:root {
  color-scheme: light;
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8f9fd;
  --ink: #202335;
  --muted: #6f758c;
  --line: #e2e5ef;
  --primary: #6549ed;
  --primary-2: #7b65f4;
  --primary-soft: #eeeaff;
  --ok: #15855e;
  --ok-soft: #e9f8f1;
  --warn: #b7791f;
  --warn-soft: #fff7e8;
  --danger: #b54444;
  --shadow: 0 16px 42px rgba(36, 39, 63, .09);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; font: 15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
button, input, select { font: inherit; }
button, .button-link { border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); padding: .7rem .9rem; cursor: pointer; transition: .16s ease; text-decoration: none; }
button:hover, .button-link:hover { transform: translateY(-1px); border-color: #c9cde0; box-shadow: 0 7px 18px rgba(38, 41, 66, .08); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
button.primary, .button-link.primary { color: #fff; border-color: var(--primary); background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
button.large { padding: .9rem 1.2rem; font-weight: 700; }
input, select { min-width: 0; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); padding: .72rem .82rem; outline: none; }
input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
progress { accent-color: var(--primary); }

.topbar { position: sticky; top: 0; z-index: 20; min-height: 70px; display: flex; align-items: center; gap: 18px; padding: 10px 22px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand-icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; display: block; }
.brand-mark { font-weight: 900; letter-spacing: .03em; font-size: 1.28rem; color: var(--primary); }
.brand-sub { font-weight: 700; }
.brand-version { color: var(--muted); font-size: .72em; font-weight: 750; letter-spacing: .02em; }
.connection-pill { display: flex; align-items: center; gap: 8px; min-width: 0; padding: .48rem .7rem; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #a9adbd; flex: 0 0 auto; }
.status-dot.ok { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.status-dot.busy { background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.status-dot.warn { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.status-dot.error { background: var(--danger); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.root-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .88rem; }




/* Informe de sincronización: se muestra como modal, nunca como banner fijo. */
.community-dialog {
  width: min(620px, calc(100% - 24px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 28px 100px rgba(26,28,48,.28);
  overflow: hidden;
}
.community-dialog::backdrop { background: rgba(24,26,43,.56); backdrop-filter: blur(4px); }
.community-dialog-card { padding: 0; }
.community-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
}
.community-dialog-title { min-width: 0; display: flex; align-items: center; gap: 12px; }
.community-dialog-title h2 { margin: 2px 0 0; font-size: 1.25rem; }
.community-dialog-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.35rem;
  font-weight: 900;
}
.community-dialog-body { padding: 18px; }
.community-dialog-body > strong { display: block; font-size: 1.02rem; }
.community-dialog-body p { margin: 7px 0 0; color: var(--muted); }
.community-dialog-breakdown { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.community-dialog-breakdown span { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--muted); }
.community-dialog-breakdown strong { color: var(--ink); }
.community-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 0 18px 18px; }
.community-dialog-actions .button-link { display: inline-flex; align-items: center; justify-content: center; }

.page-shell { width: min(1480px, calc(100% - 28px)); margin: 16px auto 110px; display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 18px; align-items: start; }
.library-pane { min-width: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.stats-grid article { border: 1px solid var(--line); border-radius: 15px; background: var(--surface); padding: 13px 15px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; box-shadow: 0 8px 24px rgba(36,39,63,.035); }
.stats-grid span { color: var(--muted); font-weight: 650; }
.stats-grid strong { font-size: 1.5rem; }
.stats-grid small { grid-column: 1 / -1; color: #979bad; }
.scan-line { min-height: 20px; display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: .82rem; }
.scan-line progress { width: 180px; }
.filters { display: grid; grid-template-columns: minmax(240px, 1.5fr) minmax(115px, .55fr) minmax(170px, .8fr) minmax(130px, .55fr) minmax(135px, .55fr); gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); margin-bottom: 14px; box-shadow: 0 8px 24px rgba(36,39,63,.035); }
.filter-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.filter-actions button { flex: 0 0 auto; white-space: nowrap; }
.check { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); white-space: nowrap; }
.check input { width: auto; }
.result-count { color: var(--muted); font-size: .88rem; white-space: nowrap; text-align: right; }

.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 13px; align-items: start; }
.story-card { overflow: hidden; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: .16s ease; box-shadow: 0 8px 26px rgba(36,39,63,.045); }
.story-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #cbcfe0; }
.story-card.selected { outline: 3px solid rgba(101,73,237,.2); border-color: var(--primary); }
.card-ribbon {
  position: absolute;
  top: 16px;
  right: -42px;
  z-index: 2;
  width: 140px;
  padding: 5px 0;
  text-align: center;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: #fff;
  background: linear-gradient(135deg, #2f85ff, #1a66ff);
  transform: rotate(45deg);
  box-shadow: 0 8px 18px rgba(26,102,255,.24);
  pointer-events: none;
}
.story-card, .detail-cover-wrap { position: relative; }
.card-ribbon.new-ribbon { background: linear-gradient(135deg, #2f85ff, #1a66ff); }
.new-badge {
  color: #1f67ef !important;
  background: #eaf2ff !important;
  border: 1px solid #c9dcff;
  font-weight: 800;
}
.cover { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
.cover-placeholder { display: grid; place-items: center; background: linear-gradient(135deg, #ece8ff, #f8f7ff); color: var(--primary); font-weight: 900; letter-spacing: .04em; }
.story-card-body { padding: 11px 12px 13px; }
.card-code { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--muted); font-size: .77rem; font-weight: 700; }
.availability { padding: .18rem .42rem; border-radius: 99px; font-size: .68rem; }
.availability.installed { color: var(--ok); background: var(--ok-soft); }
.availability.missing { background: #f1f2f7; color: #888d9f; }
.availability.recordable { background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.story-card h3 { margin: 8px 0 4px; font-size: .98rem; line-height: 1.28; min-height: 2.5em; }
.story-card p { margin: 0; min-height: 0; color: var(--muted); font-size: .8rem; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; color: var(--muted); font-size: .72rem; line-height: 1.2; }
.card-meta-item { min-width: 0; max-width: 100%; display: inline-flex; align-items: center; gap: 4px; padding: .22rem .38rem; border-radius: 8px; background: var(--surface-2); }
.card-meta-item > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta-icon { width: 13px; height: 13px; flex: 0 0 13px; color: var(--primary); opacity: .82; }
.card-meta-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card-flags { min-height: 1.2rem; margin-top: 7px; color: var(--primary); font-size: .78rem; font-weight: 700; }
.card-flags:empty { display: none; }
.empty-state { grid-column: 1 / -1; min-height: 240px; display: grid; place-items: center; align-content: center; gap: 5px; color: var(--muted); border: 1px dashed #cfd3e2; border-radius: var(--radius); background: rgba(255,255,255,.5); }
.empty-state strong { color: var(--ink); font-size: 1.1rem; }

.detail-panel { position: sticky; top: 86px; align-self: start; min-height: 570px; max-height: calc(100dvh - 102px); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.detail-empty { min-height: 570px; display: grid; place-items: center; align-content: center; text-align: center; padding: 30px; color: var(--muted); }
.detail-empty span { width: 82px; height: 82px; border-radius: 24px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 900; font-size: 1.25rem; }
.detail-empty h2 { margin: 18px 0 0; color: var(--ink); }
.detail-empty p { max-width: 280px; }
.detail-card { padding-bottom: 18px; }
.detail-cover-wrap { width: 100%; background: #fff; overflow: hidden; }
.detail-cover { display: block; width: 100%; height: auto; object-fit: contain; background: #fff; }
.detail-heading, .detail-badges, .detail-actions, .meta-list, .track-list, .local-note { margin-left: 18px; margin-right: 18px; }
.detail-heading { margin-top: 16px; }
.eyebrow { color: var(--primary); font-size: .73rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.detail-heading h2 { margin: 4px 0 8px; font-size: 1.4rem; line-height: 1.18; }
.detail-heading p { margin: 0; color: var(--muted); font-size: .88rem; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.detail-badges > span { display: inline-flex; align-items: center; gap: 5px; padding: .3rem .55rem; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: .75rem; }
.detail-badges > .recordable-detail-badge { background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.detail-badge-icon { width: 14px; height: 14px; flex: 0 0 14px; color: var(--primary); opacity: .82; }
.detail-badge-icon svg, .detail-meta-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.detail-actions { display: grid; gap: 7px; margin-top: 14px; }
.detail-actions .active { background: var(--primary-soft); border-color: #d3c9ff; color: var(--primary); }
.detail-story-actions { width: 100%; min-width: 0; display: grid; gap: 7px; align-items: stretch; }
.detail-story-actions-1 { grid-template-columns: minmax(0, 150px); }
.detail-story-actions-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-story-actions-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-story-actions > * { width: 100%; min-width: 0; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: .68rem .6rem; text-align: center; white-space: nowrap; }
.detail-nfc-action { width: 100%; min-width: 0; }
.detail-nfc-action > .nfc-write-button { width: 100%; min-width: 0; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: .68rem .9rem; text-align: center; }
.detail-player-actions { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.detail-player-actions > * { width: 100%; min-width: 0; }
.nfc-write-button { white-space: nowrap; }
.nfc-write-icon { display: inline-flex; align-items: center; justify-content: center; }
.detail-action-icon { width: 16px; height: 16px; flex: 0 0 16px; color: currentColor; }
.detail-action-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nfc-write-button.nfc-writing { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); opacity: 1; }
.nfc-write-button.nfc-written { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.nfc-write-button.nfc-write-error,
.nfc-write-button.nfc-unavailable { border-color: var(--warn); background: var(--warn-soft); color: #845611; }
.meta-list { margin-top: 15px; border-top: 1px solid var(--line); }
.meta-list div { display: grid; grid-template-columns: minmax(116px, .9fr) minmax(0, 1.25fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.meta-list dt { min-width: 0; display: flex; align-items: center; gap: 7px; color: var(--muted); }
.detail-meta-icon { width: 17px; height: 17px; flex: 0 0 17px; color: var(--primary); opacity: .86; }
.meta-list dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-weight: 520; }
.meta-copy-button { max-width: 100%; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 2px 5px; margin: -2px -5px -2px 0; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-weight: 650; text-align: right; overflow-wrap: anywhere; cursor: copy; box-shadow: none; transform: none; }
.meta-copy-button:hover { background: var(--primary-soft); color: var(--primary); box-shadow: none; transform: none; }
.meta-copy-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.meta-copy-button > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.meta-copy-icon { flex: 0 0 auto; color: var(--primary); font-size: .9em; opacity: .78; }
.track-list { margin-top: 16px; }
.track-list h3 { margin: 0 0 8px; font-size: .96rem; }
.track-row { width: 100%; display: flex; justify-content: space-between; gap: 8px; border-radius: 9px; padding: .5rem .6rem; margin-bottom: 5px; text-align: left; }
.track-row small { color: var(--muted); }
.track-row.active { border-color: var(--primary); background: var(--primary-soft); }
.local-note { margin-top: 15px; padding: 12px; border-radius: 12px; background: var(--surface-2); color: var(--muted); }
.recordable-note { display: grid; gap: 4px; background: var(--primary-soft); color: var(--muted); }
.recordable-note strong { color: var(--primary); }

.player-bar { position: fixed; z-index: 30; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(1000px, calc(100% - 24px)); display: grid; grid-template-columns: minmax(180px, 1fr) 110px minmax(260px, 1.5fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #d4d7e4; border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 18px 60px rgba(25,28,48,.22); backdrop-filter: blur(18px); }
.player-copy { min-width: 0; display: flex; flex-direction: column; }
.player-copy strong, .player-copy span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-copy span { color: var(--muted); font-size: .8rem; }
.player-bar audio { width: 100%; height: 40px; }

.converter-dialog { width: min(1040px, calc(100% - 30px)); max-width: none; border: 0; border-radius: 22px; padding: 0; background: var(--surface); box-shadow: 0 28px 100px rgba(26,28,48,.28); }
.converter-dialog::backdrop { background: rgba(24,26,43,.55); backdrop-filter: blur(4px); }
.dialog-card { padding: 22px; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dialog-head h2 { margin: 4px 0; }
.dialog-head p { margin: 0; color: var(--muted); }
.converter-grid { display: grid; grid-template-columns: 1.15fr .9fr .95fr; gap: 12px; margin-top: 20px; }
.converter-step { position: relative; min-height: 300px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); display: flex; flex-direction: column; gap: 11px; }
.converter-step h3 { margin: 2px 0 4px; }
.step-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; }
.hint { color: var(--muted); font-size: .84rem; }
.source-tracks { margin: 0; padding: 0; list-style: none; max-height: 170px; overflow: auto; border-top: 1px solid var(--line); }
.source-tracks li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: .82rem; }
.source-tracks small { color: var(--muted); white-space: nowrap; }
.converter-step label:not(.check) { display: grid; gap: 6px; color: var(--muted); font-weight: 650; }
.input-button { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; }
.k-prefix { font-weight: 900; color: var(--primary); }
.danger-check { white-space: normal; color: var(--danger); margin-top: 8px; }
.converter-run progress { width: 100%; }
.conversion-status { font-size: .84rem; color: var(--muted); overflow-wrap: anywhere; }
.safety-note { margin-top: 12px; padding: 12px 14px; background: var(--warn-soft); border: 1px solid #f0d69d; border-radius: 12px; color: #745111; }
.safety-note code { background: rgba(255,255,255,.7); padding: .1rem .3rem; border-radius: 5px; }

.toast { position: fixed; z-index: 50; right: 18px; bottom: 20px; max-width: min(420px, calc(100% - 36px)); padding: 12px 15px; border-radius: 12px; background: #2d3042; color: #fff; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.ok { background: #126c4f; }
.toast.warn { background: #8c651b; }
.toast.error { background: #963a3a; }

@media (max-width: 1120px) {
  .topbar { flex-wrap: wrap; }
  .connection-pill { order: 3; width: 100%; }
  .top-actions { flex: 1; justify-content: flex-end; }
  .page-shell { grid-template-columns: 1fr; }
  .detail-panel { position: static; top: auto; min-height: 0; max-height: none; overflow: hidden; }
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filters #searchInput { grid-column: span 2; }
  .filter-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .converter-grid { grid-template-columns: 1fr; }
  .converter-step { min-height: 0; }
}

@media (max-width: 720px) {
  .topbar { padding: 10px 12px; gap: 9px; }
  .brand { flex: 1; }
  .top-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .top-actions .root-name { grid-column: 1 / -1; max-width: none; }
  .page-shell { width: min(100% - 18px, 1480px); margin-top: 10px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters #searchInput { grid-column: 1 / -1; }
  .filter-actions { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto 1fr; justify-content: stretch; }
  .filter-actions .check { min-width: 0; }
  .filter-actions button { min-width: 0; }
  .result-count { text-align: left; }
  .story-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .story-card h3 { font-size: .9rem; }
  .card-meta { gap: 4px; font-size: .69rem; }
  .card-meta-item { padding: .18rem .3rem; }
  .player-bar { grid-template-columns: 1fr auto; }
  .player-bar progress, .player-bar audio { grid-column: 1 / -1; }
  .dialog-card { padding: 15px; }
  .dialog-head { flex-direction: column; }
}

@media (max-width: 420px) {
  .story-grid { grid-template-columns: 1fr; }
  .stats-grid { gap: 7px; }
  .stats-grid article { padding: 10px; }
}

/* Selector de vista y modo lista */
.catalog-toolbar { min-height: 38px; margin: -4px 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.catalog-toolbar .result-count { text-align: left; }
.view-switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.view-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: .38rem .55rem; border: 0; border-radius: 8px; background: transparent; color: var(--muted); box-shadow: none; }
.view-button:hover { background: #fff; color: var(--ink); transform: none; }
.view-button[aria-pressed="true"] { background: #fff; color: var(--primary); box-shadow: 0 1px 4px rgba(36,39,63,.12); }
.view-button span[aria-hidden="true"] { font-size: 1.05rem; line-height: 1; }
.view-label { font-size: .76rem; font-weight: 750; }

.story-grid.list-view { display: flex; flex-direction: column; gap: 8px; }
.story-grid.list-view .story-card { display: grid; grid-template-columns: 86px minmax(0, 1fr); min-height: 86px; border-radius: 14px; }
.story-grid.list-view .story-card:hover { transform: translateX(2px); }
.story-grid.list-view .cover,
.story-grid.list-view .cover-placeholder { width: 86px; height: 86px; aspect-ratio: auto; object-fit: contain; border-right: 1px solid var(--line); background: #fff; }
.story-grid.list-view .story-card-body { min-width: 0; padding: 9px 12px; display: flex; flex-direction: column; justify-content: center; }
.story-grid.list-view .story-card h3 { margin: 4px 0 3px; min-height: 0; font-size: .96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-grid.list-view .story-card p { min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-grid.list-view .card-meta { margin-top: 4px; gap: 4px 7px; }
.story-grid.list-view .card-meta-item { padding: .16rem .3rem; background: transparent; }
.story-grid.list-view .card-flags { min-height: 0; margin-top: 4px; }
.story-grid.list-view .empty-state { width: 100%; }

@media (max-width: 720px) {
  .catalog-toolbar { margin-top: -2px; }
  .view-switch { justify-self: start; }
  .view-label { display: none; }

  /* v4.27: la portada ocupa toda la columna de la tarjeta en lista móvil.
     La tarjeta puede crecer cuando los metadatos saltan de línea; la imagen
     permanece centrada vertical y horizontalmente sin deformarse ni recortarse. */
  .story-grid.list-view .story-card {
    grid-template-columns: clamp(78px, 22vw, 92px) minmax(0, 1fr);
    min-height: 86px;
    align-items: stretch;
  }
  .story-grid.list-view .cover,
  .story-grid.list-view .cover-placeholder {
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    align-self: stretch;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center center;
  }
  .story-grid.list-view .story-card-body { padding: 7px 9px; }
}

/* Ficha responsive: panel fijo, drawer intermedio y bottom sheet móvil */
.detail-dialog {
  width: min(620px, calc(100% - 20px));
  max-width: none;
  max-height: calc(100dvh - 20px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 28px 100px rgba(26,28,48,.32);
  overflow: hidden;
}
.detail-dialog::backdrop { background: rgba(24,26,43,.62); backdrop-filter: blur(4px); }
.detail-dialog-shell { display: flex; flex-direction: column; max-height: calc(100dvh - 20px); }
.detail-dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
}
.detail-dialog-head > div { min-width: 0; display: flex; flex-direction: column; }
.detail-dialog-head strong { max-width: min(66vw, 440px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-dialog-close { flex: 0 0 auto; }
.detail-dialog-content { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.detail-dialog-content .detail-cover { width: 100%; height: auto; object-fit: contain; }
.detail-dialog-content .detail-card { padding-bottom: max(22px, env(safe-area-inset-bottom)); }

/* La ficha fija solo se usa cuando realmente caben las dos columnas.
   Entre 721 y 1120 px el mismo <dialog> funciona como drawer lateral;
   hasta 720 px conserva el bottom sheet móvil. */
@media (min-width: 1121px) {
  .detail-dialog { display: none; }
}

@media (max-width: 1120px) {
  .detail-panel { display: none; }
}

@media (min-width: 721px) and (max-width: 1120px) {
  .detail-dialog {
    inset: 12px 12px 12px auto;
    width: min(420px, calc(100% - 24px));
    height: calc(100dvh - 24px);
    max-height: none;
    margin: 0;
    border-radius: 20px;
  }
  .detail-dialog-shell {
    height: 100%;
    max-height: none;
  }
  .detail-dialog-head strong { max-width: min(300px, calc(100vw - 150px)); }
  .detail-dialog-content { min-height: 0; }
  .detail-dialog-content .detail-cover { width: 100%; height: auto; object-fit: contain; background: #fff; }
  .detail-dialog-content .detail-actions { display: grid; }
  .detail-dialog-content .detail-story-actions > * { min-width: 0; }
}

@media (max-width: 720px) {
  .detail-dialog {
    width: 100%;
    max-height: 94dvh;
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
  }
  .detail-dialog-shell { max-height: 94dvh; }
  .detail-dialog-head { padding-top: max(10px, env(safe-area-inset-top)); }
  .detail-dialog-content .detail-cover { width: 100%; height: auto; object-fit: contain; background: #fff; }
  .detail-dialog-content .detail-actions { display: grid; }
  .detail-dialog-content .detail-story-actions > * { min-width: 0; }
  .detail-dialog-content .meta-list div { grid-template-columns: minmax(112px, .9fr) minmax(0, 1.2fr); }
}

@media (max-width: 420px) {
  .detail-story-actions > * { padding: .64rem .34rem; font-size: .79rem; gap: 4px; }
  .detail-story-actions .detail-action-icon { width: 14px; height: 14px; flex-basis: 14px; }
}

@media (max-width: 340px) {
  .detail-story-actions > * { font-size: .76rem; padding-left: .28rem; padding-right: .28rem; }
  .detail-story-actions .nfc-write-icon { display: none; }
}

.story-grid.list-view .card-ribbon {
  top: 12px;
  right: -46px;
  width: 120px;
  font-size: .66rem;
}
.detail-cover-wrap .card-ribbon {
  top: 18px;
  right: -44px;
  width: 150px;
}
@media (max-width: 1120px) {
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .card-ribbon { top: 14px; right: -44px; width: 124px; font-size: .66rem; }
  .detail-cover-wrap .card-ribbon { top: 14px; right: -46px; width: 132px; }
}


@media (max-width: 520px) {
  .filter-actions { grid-template-columns: 1fr 1fr; }
  .filter-actions .check { grid-column: 1 / -1; }
  .filter-actions button { width: 100%; }
}

/* === UI simplificada: cabecera con iconos, controles a ancho completo y reproductor integrado === */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.header-connection {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.header-connection .root-name {
  flex: 0 1 auto;
  max-width: 220px;
  font-weight: 700;
}
.header-connection .connection-pill {
  width: auto;
  min-width: 0;
  max-width: 430px;
}
.header-connection .connection-pill #statusText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-actions {
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.icon-button {
  position: relative;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
}
.action-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-button .icon-disconnect { display: none; }
.icon-button.connected .icon-connect { display: none; }
.icon-button.connected .icon-disconnect { display: block; }
.icon-button.primary.connected {
  color: var(--danger);
  border-color: #ebcaca;
  background: #fff8f8;
}
.icon-button.primary.connected:hover {
  border-color: #dfa9a9;
  background: #fff1f1;
}

.page-shell {
  margin-bottom: 34px;
  grid-template-columns: minmax(0, 1fr) 390px;
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 12px;
}
.controls-pane {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
}
.library-pane {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
.detail-panel {
  grid-column: 2;
  grid-row: 2;
}

/* Los contadores y filtros ocupan el ancho completo antes de dividir catálogo/detalle. */
.stats-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.filters {
  grid-template-columns: minmax(250px, 1.7fr) repeat(4, minmax(130px, .8fr)) auto;
  width: 100%;
}
.filter-actions {
  grid-column: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.filter-actions button {
  white-space: nowrap;
  min-width: 0;
}

/* Reproductor: forma parte de la ficha, no flota sobre el contenido. */
.detail-player-slot {
  margin: 0 18px;
}
.player-bar,
.player-bar[hidden] {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  margin: 14px 0 2px;
  padding: 12px;
  display: block;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: none;
  backdrop-filter: none;
}
.player-bar[hidden] { display: none !important; }
.player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.player-copy {
  min-width: 0;
  flex: 1;
}
.player-close {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 10px;
}
.player-close .action-icon {
  width: 18px;
  height: 18px;
}
.player-bar progress {
  width: 100%;
  margin: 0 0 8px;
}
.player-bar audio {
  width: 100%;
  height: 42px;
  display: block;
}

@media (max-width: 1280px) {
  .filters {
    grid-template-columns: minmax(240px, 1.5fr) repeat(4, minmax(125px, 1fr));
  }
  .filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1120px) {
  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .header-connection {
    min-width: 0;
  }
  .top-actions {
    width: auto;
    flex: 0 0 auto;
  }
  .page-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .controls-pane,
  .library-pane,
  .detail-panel {
    grid-column: 1;
  }
  .controls-pane { grid-row: 1; }
  .library-pane { grid-row: 2; }
  .detail-panel { grid-row: 3; }
}

@media (max-width: 720px) {
  .topbar {
    min-height: 0;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "connection connection";
    gap: 7px 10px;
  }
  .brand {
    grid-area: brand;
    min-width: 0;
  }
  .brand-mark { font-size: 1.12rem; }
  .brand-sub { font-size: .96rem; }
  .top-actions {
    grid-area: actions;
    width: auto;
    display: flex;
    grid-template-columns: none;
    gap: 6px;
  }
  .icon-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 11px;
  }
  .header-connection {
    grid-area: connection;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
  }
  .header-connection .root-name {
    max-width: 120px;
    font-size: .78rem;
    padding-left: 2px;
  }
  .header-connection .connection-pill {
    width: 100%;
    max-width: none;
    padding: .4rem .58rem;
    font-size: .78rem;
  }

  .page-shell {
    width: min(100% - 16px, 1480px);
    row-gap: 9px;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .stats-grid article:last-child {
    grid-column: 1 / -1;
  }
  .filters {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .filters #searchInput {
    grid-column: 1 / -1;
  }
  .filter-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 7px;
  }
  .filter-actions button {
    min-height: 42px;
  }
  .detail-player-slot {
    margin: 0 16px;
  }
  .player-bar {
    margin-top: 12px;
    padding: 10px;
  }
}

@media (max-width: 520px) {
  .filters {
    grid-template-columns: 1fr;
  }
  .filters #searchInput,
  .filters select,
  .filter-actions {
    grid-column: 1;
    width: 100%;
  }
  .filter-actions {
    grid-template-columns: 1fr 1fr;
  }
  .filter-actions .check {
    min-height: 40px;
    white-space: normal;
  }
  .filter-actions button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.header-connection .connection-pill { order: 0; }

.top-actions #helpBtn { margin-left: 4px; }

/* hidden must always win, especially for the inline player */
[hidden] { display: none !important; }

@media (max-width: 720px) {
  .top-actions #helpBtn { margin-left: 3px; }
  .community-dialog { width: calc(100% - 16px); border-radius: 18px; }
  .community-dialog-head { padding: 14px; }
  .community-dialog-body { padding: 14px; }
  .community-dialog-breakdown { grid-template-columns: 1fr; }
  .community-dialog-actions { padding: 0 14px 14px; display: grid; grid-template-columns: 1fr 1fr; }
  .community-dialog-actions > * { width: 100%; }
  .community-dialog-actions #acceptCommunityDialogBtn { grid-column: 1 / -1; }
}

/* === Portadas ausentes === */
.cover-placeholder {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 18px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(101,73,237,.10), transparent 36%),
    linear-gradient(145deg, #f4f1ff, #faf9ff);
  color: var(--primary);
}
.cover-placeholder-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  border: 1px solid #ddd6ff;
  box-shadow: 0 8px 22px rgba(101,73,237,.10);
}
.cover-placeholder-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cover-placeholder-code {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 34px;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-align: center;
}
.cover-placeholder-text {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 16px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: 0;
  text-align: center;
}
.detail-cover.cover-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 260px;
}
.detail-cover.cover-placeholder .cover-placeholder-icon {
  width: 82px;
  height: 82px;
  border-radius: 24px;
}
.detail-cover.cover-placeholder .cover-placeholder-icon svg {
  width: 42px;
  height: 42px;
}
.detail-cover.cover-placeholder .cover-placeholder-code { font-size: 1rem; }
.detail-cover.cover-placeholder .cover-placeholder-text { font-size: .82rem; }

.story-grid.list-view .cover-placeholder {
  padding: 0;
  gap: 0;
  border-right: 1px solid var(--line);
  background: linear-gradient(145deg, #f4f1ff, #faf9ff);
}
.story-grid.list-view .cover-placeholder-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  box-shadow: none;
}
.story-grid.list-view .cover-placeholder-icon svg { width: 22px; height: 22px; }
.story-grid.list-view .cover-placeholder-code,
.story-grid.list-view .cover-placeholder-text { display: none; }

@media (max-width: 720px) {
  .detail-cover.cover-placeholder { min-height: 0; aspect-ratio: 1 / 1; }
}

/* Importar ZIP: mantener la cabecera compacta incluso con cuatro acciones. */
@media (max-width: 360px) {
  .brand-sub { display: none; }
  .top-actions { gap: 4px; }
  .icon-button { width: 37px; height: 37px; min-width: 37px; }
  .action-icon { width: 19px; height: 19px; }
}


/* === Ayuda y uso responsable === */
.help-dialog {
  width: min(780px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 28px 100px rgba(26,28,48,.30);
  overflow: hidden;
}
.help-dialog::backdrop { background: rgba(24,26,43,.58); backdrop-filter: blur(4px); }
.help-dialog-card { display: flex; flex-direction: column; max-height: calc(100dvh - 28px); }
.help-dialog-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.97);
}
.help-dialog-title { min-width: 0; display: flex; align-items: center; gap: 12px; }
.help-dialog-title h2 { margin: 2px 0 0; font-size: 1.28rem; }
.help-dialog-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.28rem;
  font-weight: 900;
}
.help-dialog-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
}
.help-dialog-body section + section { margin-top: 22px; }
.help-dialog-body h3 { margin: 0 0 8px; font-size: 1.02rem; }
.help-dialog-body p { margin: 0; color: var(--muted); }
.help-lead { padding: 16px; border-radius: 15px; background: var(--primary-soft); border: 1px solid #dad2ff; }
.help-lead p { color: #5142a8; }
.help-steps { margin: 0; padding-left: 1.35rem; color: var(--muted); }
.help-steps li + li { margin-top: 7px; }
.help-steps strong { color: var(--ink); }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.help-grid > div { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.legal-help {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 13px;
  padding: 16px;
  border-radius: 15px;
  background: var(--warn-soft);
  border: 1px solid #f0d69d;
}
.legal-help-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #fff;
  border: 1px solid #efcf90;
  color: var(--warn);
  font-size: 1.25rem;
  font-weight: 900;
}
.legal-help h3 { color: #6f4b0d; }
.legal-help h4 { margin: 0 0 10px; color: #6f4b0d; font-size: .99rem; }
.legal-help p, .legal-help li { color: #745a27; }
.legal-help ul { margin: 10px 0; padding-left: 1.2rem; }
.legal-help li + li { margin-top: 6px; }
.help-note { font-size: .86rem; }
.help-dialog-actions { flex: 0 0 auto; display: flex; justify-content: flex-end; padding: 0 18px 18px; background: var(--surface); }
.help-dialog-actions button { min-width: 110px; }

@media (max-width: 720px) {
  .help-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 18px; }
  .help-dialog-card { max-height: calc(100dvh - 16px); }
  .help-dialog-head { padding: 14px; }
  .help-dialog-body { padding: 14px; }
  .help-grid { grid-template-columns: 1fr; }
  .legal-help { grid-template-columns: 1fr; }
  .legal-help-icon { width: 38px; height: 38px; }
  .help-dialog-actions { padding: 0 14px 14px; }
  .help-dialog-actions button { width: 100%; }
}


/* === Comprobación de integridad del PLAYER === */
.integrity-warning-box {
  margin: 14px 18px 0;
  padding: 12px 14px;
  border: 1px solid #efd096;
  border-radius: 13px;
  background: #fff8ea;
  color: #765016;
}
.integrity-warning-box strong { display: block; color: #7f5110; }
.integrity-warning-box ul { margin: 8px 0 0; padding-left: 20px; }
.integrity-warning-box li + li { margin-top: 4px; }
.integrity-size-note { margin: 8px 0 0; color: #8b6b36; font-size: .8rem; }

/* === Estado de instalación/integridad sobre la portada === */
.integrity-overlay-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 20px);
  padding: .28rem .55rem;
  border: 1px solid #f0d39c;
  border-radius: 999px;
  background: rgba(255, 247, 232, .96);
  color: #98651b;
  box-shadow: 0 5px 14px rgba(123, 82, 15, .12);
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(3px);
}
/* Disponibilidad editorial: gris, también sin PLAYER; no confundir con rojo/naranja. */
.integrity-overlay-badge.is-not-available {
  background: rgba(241, 243, 246, .98);
  border-color: #b8c0cb;
  color: #505d6f;
  box-shadow: 0 5px 14px rgba(71, 82, 99, .12);
}
/* Se atenúa únicamente la portada; la tarjeta y sus controles siguen operativos. */
.story-card.is-unavailable > .cover,
.detail-cover-wrap.is-unavailable > .detail-cover {
  filter: grayscale(1);
  opacity: .43;
}
/* Roja: ausencia confirmada tras sincronizar un PLAYER; ámbar: incompleto. */
.integrity-overlay-badge.is-not-installed {
  background: rgba(255, 237, 239, .97);
  border-color: #eda4ac;
  color: #a51d2d;
  box-shadow: 0 5px 14px rgba(172, 32, 50, .15);
}
.story-grid.list-view .integrity-overlay-badge {
  top: 7px;
  left: 7px;
  padding: .2rem .4rem;
  font-size: .58rem;
}
.detail-cover-wrap .integrity-overlay-badge {
  top: 12px;
  left: 12px;
  padding: .32rem .62rem;
  font-size: .74rem;
}
@media (max-width: 720px) {
  .integrity-overlay-badge {
    top: 8px;
    left: 8px;
    padding: .24rem .48rem;
    font-size: .64rem;
  }
  .detail-cover-wrap .integrity-overlay-badge {
    top: 10px;
    left: 10px;
    font-size: .68rem;
  }
}


/* === v1.9: tarjetas uniformes en vista cuadrícula === */
/* Todas las filas implícitas usan la misma fracción y las tarjetas se estiran
   a la altura de su celda. Así figuras, audiocuentos, contenidos fuera del
   catálogo y cuentos sin portada mantienen cajas del mismo tamaño. */
.story-grid:not(.list-view) {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.story-grid:not(.list-view) .story-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.story-grid:not(.list-view) .story-card-body {
  flex: 1 1 auto;
}

/* === v2.0: detalle desplegable del informe de sincronizacion === */
.community-dialog {
  max-height: min(88vh, 820px);
}
.community-dialog-card {
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 820px);
}
.community-dialog-body {
  min-height: 0;
  overflow: auto;
}
.community-dialog-details {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.community-dialog-details[hidden] { display: none !important; }
.community-dialog-details-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.community-dialog-details-head h3 {
  margin: 0;
  font-size: .94rem;
}
.community-dialog-details-count {
  color: var(--muted);
  font-size: .78rem;
  white-space: nowrap;
}
.community-dialog-items {
  display: grid;
  gap: 8px;
}
.sync-detail-item {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  overflow: clip;
}
.sync-detail-item[open] {
  border-color: #d2d5e4;
  box-shadow: 0 7px 20px rgba(36,39,63,.055);
}
.sync-detail-item summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 9px 34px 9px 11px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sync-detail-item summary::-webkit-details-marker { display: none; }
.sync-detail-item summary::after {
  content: "›";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  color: var(--muted);
  font-size: 1.15rem;
  font-weight: 800;
  transition: transform .16s ease;
}
.sync-detail-item[open] summary::after {
  transform: translateY(-50%) rotate(-90deg);
}
.sync-detail-ident {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.sync-detail-ident strong {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: .82rem;
}
.sync-detail-ident span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: .88rem;
}
.sync-detail-statuses {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
}
.sync-status {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: .69rem;
  font-weight: 750;
  white-space: nowrap;
}
.sync-status-local { background: #eef0f6; color: #6f758c; }
.sync-status-warning { background: var(--warn-soft); color: var(--warn); border: 1px solid #f0cf93; }
.sync-detail-content {
  padding: 0 11px 11px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.sync-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
  margin: 10px 0 0;
}
.sync-detail-grid div {
  min-width: 0;
}
.sync-detail-grid dt {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 650;
}
.sync-detail-grid dd {
  margin: 1px 0 0;
  overflow-wrap: anywhere;
  font-size: .82rem;
  font-weight: 700;
}
.sync-issues {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--warn-soft);
  color: #775016;
}
.sync-issues-secondary { margin-top: 7px; }
.sync-variant-title {
  margin-bottom: 4px;
  font-size: .76rem;
  font-weight: 800;
}
.sync-issues ul {
  margin: 0;
  padding-left: 18px;
  font-size: .78rem;
}
.sync-issues li + li { margin-top: 3px; }

@media (max-width: 520px) {
  .sync-detail-item summary {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .sync-detail-statuses { justify-content: flex-start; }
  .sync-detail-grid { grid-template-columns: 1fr; }
}
.community-dialog-head,
.community-dialog-actions { flex: 0 0 auto; }
.community-dialog-body { flex: 1 1 auto; }
.sync-variant-meta {
  margin-bottom: 4px;
  color: #8a6428;
  font-size: .72rem;
}

/* === v2.2: lista a ancho completo === */
/* La regla base de .story-grid usa align-items:start para la cuadrícula.
   Al cambiar a flex en modo lista ese valor hacía que cada tarjeta mantuviera
   su ancho intrínseco. En lista deben estirarse a todo el ancho disponible. */
.story-grid.list-view {
  width: 100%;
  align-items: stretch;
}
.story-grid.list-view .story-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* === v2.5: limpieza segura del PLAYER y deteccion de audio de descarga FABA === */
.sync-status-download {
  background: #fff1dc;
  color: #9a5b00;
  border: 1px solid #efc57f;
}

.cleanup-dialog {
  width: min(860px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 28px 100px rgba(26,28,48,.30);
  overflow: hidden;
}
.cleanup-dialog::backdrop { background: rgba(24,26,43,.60); backdrop-filter: blur(4px); }
.cleanup-dialog-card { display: flex; flex-direction: column; max-height: calc(100dvh - 28px); }
.cleanup-dialog-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.97);
}
.cleanup-dialog-title { min-width: 0; display: flex; align-items: center; gap: 12px; }
.cleanup-dialog-title h2 { margin: 2px 0 0; font-size: 1.25rem; }
.cleanup-dialog-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #fff2e2;
  border: 1px solid #f0d1a1;
  color: #9a5b00;
  font-size: 1.15rem;
  font-weight: 900;
}
.cleanup-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px;
}
.cleanup-intro { margin: 0 0 16px; color: var(--muted); }
.cleanup-intro strong { color: var(--ink); }
.cleanup-section {
  margin-top: 13px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.cleanup-section h3 { margin: 0 0 5px; font-size: .95rem; }
.cleanup-hint { margin: 0 0 10px; color: var(--muted); font-size: .8rem; }
.cleanup-language-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cleanup-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  cursor: pointer;
}
.cleanup-option + .cleanup-option { margin-top: 8px; }
.cleanup-language-options .cleanup-option + .cleanup-option { margin-top: 0; }
.cleanup-option input { margin-top: 2px; flex: 0 0 auto; }
.cleanup-option span { min-width: 0; display: grid; gap: 2px; }
.cleanup-option strong { font-size: .86rem; }
.cleanup-option small { color: var(--muted); font-size: .74rem; line-height: 1.35; }
.cleanup-empty { margin: 0; color: var(--muted); font-size: .82rem; }
.cleanup-simulate-row {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cleanup-simulate-row span { color: var(--muted); font-size: .78rem; }
.cleanup-preview { margin-top: 14px; }
.cleanup-preview[hidden] { display: none !important; }
.cleanup-preview-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 11px;
  background: #fff7e9;
  border: 1px solid #efcf98;
}
.cleanup-preview-summary strong { color: #774a05; }
.cleanup-preview-summary span { color: #8a6428; font-size: .8rem; }
.cleanup-warning {
  margin: 8px 0 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--warn-soft);
  color: #775016;
  font-size: .78rem;
}
.cleanup-preview-empty {
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  color: var(--muted);
}
.cleanup-items {
  margin-top: 9px;
  max-height: 270px;
  overflow-y: auto;
  display: grid;
  gap: 6px;
  padding-right: 2px;
}
.cleanup-item {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  overflow: clip;
}
.cleanup-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  cursor: pointer;
  font-size: .82rem;
}
.cleanup-item summary > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cleanup-item summary > span:last-child { flex: 0 0 auto; color: var(--muted); font-size: .76rem; }
.cleanup-item summary strong { color: var(--primary); margin-right: 5px; }
.cleanup-item-body { padding: 0 11px 10px; border-top: 1px solid var(--line); }
.cleanup-item-body p { margin: 8px 0 6px; display: flex; flex-wrap: wrap; gap: 5px; }
.cleanup-item-body small { color: var(--muted); }
.cleanup-reason {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 999px;
  background: #fff1dc;
  color: #8a570c;
  border: 1px solid #efcb91;
  font-size: .7rem;
  font-weight: 700;
}
.cleanup-confirm-box {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #efc4c4;
  border-radius: 12px;
  background: #fff8f8;
}
.cleanup-confirm-box .check { color: #7e3434; font-weight: 700; }
.cleanup-confirm-box p { margin: 7px 0 0; color: #9a5c5c; font-size: .76rem; }
.cleanup-progress-wrap { margin-top: 10px; display: grid; gap: 5px; }
.cleanup-progress-wrap progress { width: 100%; }
.cleanup-progress-wrap span { color: var(--muted); font-size: .77rem; }
.cleanup-dialog-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 18px 18px;
  background: var(--surface);
}
button.danger {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}
button.danger:hover:not(:disabled) { filter: brightness(.95); }
button.danger:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 720px) {
  .cleanup-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 18px; }
  .cleanup-dialog-card { max-height: calc(100dvh - 16px); }
  .cleanup-dialog-head, .cleanup-dialog-body { padding: 14px; }
  .cleanup-language-options { grid-template-columns: 1fr; }
  .cleanup-dialog-actions { padding: 0 14px 14px; display: grid; grid-template-columns: 1fr 1fr; }
  .cleanup-dialog-actions button { width: 100%; }
  .cleanup-preview-summary { align-items: flex-start; flex-direction: column; }
}

/* Seis acciones en la cabecera: compactar antes para evitar desbordes en movil. */
@media (max-width: 620px) {
  .brand-sub { display: none; }
  .top-actions { gap: 4px; }
  .icon-button { width: 36px; height: 36px; min-width: 36px; }
  .action-icon { width: 18px; height: 18px; }
}


/* === v2.6: información del modelo PLAYER bajo demanda === */
.connection-info-button {
  border: 0;
  font: inherit;
  text-align: left;
  box-shadow: none;
  transform: none;
}
.connection-info-button:hover { transform: none; box-shadow: none; }
.connection-info-button:disabled { opacity: 1; cursor: default; }
.connection-info-button.is-clickable { cursor: pointer; }
.connection-info-button.is-clickable:hover { background: #f0eefc; color: var(--ink); }
.connection-info-button.is-clickable:focus-visible { outline: 3px solid var(--primary-soft); outline-offset: 2px; }

.device-info-dialog {
  width: min(620px, calc(100% - 24px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 28px 100px rgba(26,28,48,.28);
  overflow: hidden;
}
.device-info-dialog::backdrop { background: rgba(24,26,43,.56); backdrop-filter: blur(4px); }
.device-info-card { display: flex; flex-direction: column; max-height: min(88vh, 760px); }
.device-info-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 18px 14px; border-bottom: 1px solid var(--line);
}
.device-info-title { min-width: 0; display: flex; align-items: center; gap: 12px; }
.device-info-title h2 { margin: 2px 0 0; font-size: 1.25rem; }
.device-info-icon {
  width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center;
  border-radius: 13px; background: var(--primary-soft); color: var(--primary); font-size: 1.15rem; font-weight: 900;
}
.device-info-body { min-height: 0; overflow: auto; padding: 18px; }
.device-model-panel {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2);
}
.device-section-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.device-model-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 1rem; }
.device-model-badge.original { background: #eef4ff; color: #315eb8; }
.device-model-badge.plus { background: #e9f8f1; color: var(--ok); }
.device-model-badge.mixed, .device-model-badge.conflict { background: var(--warn-soft); color: var(--warn); }
.device-model-badge.unknown { background: #eef0f5; color: var(--muted); }
.device-model-panel p { margin: 0; color: var(--muted); }
.device-info-grid { margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.device-info-grid div { padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.device-info-grid dt { color: var(--muted); font-size: .76rem; }
.device-info-grid dd { margin: 3px 0 0; font-weight: 750; overflow-wrap: anywhere; }
.device-signals-section, .device-evidence-section { margin-top: 18px; }
.device-signals-section h3, .device-evidence-section h3 { margin: 0 0 9px; font-size: .94rem; }
.device-format-signals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.device-format-signals span { display: grid; gap: 1px; padding: 10px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.device-format-signals strong { font-size: 1.05rem; }
.device-format-signals small { color: var(--muted); font-size: .72rem; }
.device-format-signals .device-signal-empty { grid-column: 1 / -1; color: var(--muted); text-align: left; }
.device-evidence-section ul { margin: 0; padding-left: 20px; }
.device-evidence-section li + li { margin-top: 4px; }
.device-evidence-section p { margin: 10px 0 0; color: var(--muted); font-size: .82rem; }
.device-info-actions { display: flex; justify-content: flex-end; padding: 0 18px 18px; }
.device-info-actions button { min-width: 110px; }

@media (max-width: 720px) {
  .device-info-dialog { width: calc(100% - 16px); border-radius: 18px; }
  .device-info-head, .device-info-body { padding: 14px; }
  .device-model-panel { grid-template-columns: 1fr; gap: 8px; }
  .device-info-grid { grid-template-columns: 1fr 1fr; }
  .device-format-signals { grid-template-columns: 1fr 1fr; }
  .device-info-actions { padding: 0 14px 14px; }
  .device-info-actions button { width: 100%; }
}

/* === v2.7: comprobación de compatibilidad al arrancar === */
.compatibility-dialog {
  width: min(680px, calc(100% - 24px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 28px 100px rgba(26,28,48,.28);
  overflow: hidden;
}
.compatibility-dialog::backdrop { background: rgba(24,26,43,.56); backdrop-filter: blur(4px); }
.compatibility-card { display: flex; flex-direction: column; max-height: min(88vh, 760px); }
.compatibility-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}
.compatibility-title { min-width: 0; display: flex; align-items: center; gap: 12px; }
.compatibility-title h2 { margin: 2px 0 0; font-size: 1.25rem; }
.compatibility-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 1.35rem;
  font-weight: 900;
}
.compatibility-icon.compatible { background: var(--ok-soft); color: var(--ok); }
.compatibility-icon.limited { background: var(--warn-soft); color: var(--warn); }
.compatibility-icon.unsupported { background: #fff0f0; color: var(--danger); }
.compatibility-body { min-height: 0; overflow: auto; padding: 18px; }
.compatibility-summary {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
}
.compatibility-summary.compatible { border-color: #bfe7d6; background: var(--ok-soft); }
.compatibility-summary.limited { border-color: #efd19d; background: var(--warn-soft); }
.compatibility-summary.unsupported { border-color: #efc2c2; background: #fff4f4; }
.compatibility-summary strong { display: block; font-size: 1.05rem; }
.compatibility-summary p { margin: 0; color: var(--muted); }
.compatibility-environment {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.compatibility-environment div { padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.compatibility-environment dt { color: var(--muted); font-size: .76rem; }
.compatibility-environment dd { margin: 3px 0 0; font-weight: 750; overflow-wrap: anywhere; }
.compatibility-features-section { margin-top: 18px; }
.compatibility-features-section h3 { margin: 0 0 9px; font-size: .94rem; }
.compatibility-features { display: grid; gap: 7px; }
.compatibility-feature {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 11px;
  background: var(--surface-2);
}
.compatibility-feature-mark {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
}
.compatibility-feature.ok .compatibility-feature-mark { background: var(--ok-soft); color: var(--ok); }
.compatibility-feature.missing .compatibility-feature-mark { background: #fff0f0; color: var(--danger); }
.compatibility-feature strong { font-size: .76rem; }
.compatibility-feature.ok strong { color: var(--ok); }
.compatibility-feature.missing strong { color: var(--danger); }
.compatibility-note { margin: 16px 0 0; color: var(--muted); font-size: .84rem; }
.compatibility-actions { display: flex; justify-content: flex-end; padding: 0 18px 18px; }
.compatibility-actions button { min-width: 110px; }

@media (max-width: 620px) {
  .compatibility-dialog { width: calc(100% - 16px); border-radius: 18px; }
  .compatibility-card { max-height: calc(100dvh - 16px); }
  .compatibility-head, .compatibility-body { padding: 14px; }
  .compatibility-summary { grid-template-columns: 1fr; gap: 7px; }
  .compatibility-environment { grid-template-columns: 1fr; }
  .compatibility-feature { grid-template-columns: 26px minmax(0, 1fr); }
  .compatibility-feature strong { grid-column: 2; }
  .compatibility-actions { padding: 0 14px 14px; }
  .compatibility-actions button { width: 100%; }
}


/* === v3.3: filtros multiselección con checkboxes === */
.multi-filter {
  position: relative;
  min-width: 0;
}
.multi-filter-trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: .72rem .82rem;
  text-align: left;
  border-radius: 11px;
  box-shadow: none;
}
.multi-filter-trigger:hover {
  transform: none;
  box-shadow: none;
}
.multi-filter-trigger [data-multi-label] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multi-filter.has-selection .multi-filter-trigger {
  color: var(--primary);
  border-color: #cfc6ff;
  background: #fbfaff;
}
.multi-filter-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .95rem;
  transition: transform .16s ease;
}
.multi-filter-trigger[aria-expanded="true"] .multi-filter-chevron {
  transform: rotate(180deg);
}
.multi-filter-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  left: 0;
  width: max(100%, 250px);
  max-width: min(340px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 18px 46px rgba(36,39,63,.16);
}
.multi-filter-align-right .multi-filter-menu {
  left: auto;
  right: 0;
}
.multi-filter-menu-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 3px 7px 7px;
  border-bottom: 1px solid var(--line);
}
.multi-filter-menu-head strong {
  font-size: .82rem;
}
.multi-filter-clear {
  padding: .35rem .55rem;
  border: 0;
  border-radius: 8px;
  color: var(--primary);
  background: transparent;
  font-size: .76rem;
  font-weight: 750;
}
.multi-filter-clear:hover {
  transform: none;
  box-shadow: none;
  background: var(--primary-soft);
}
.multi-filter-options {
  max-height: 260px;
  overflow: auto;
  padding: 5px 1px 1px;
  overscroll-behavior: contain;
}
.multi-filter-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--ink);
}
.multi-filter-option:hover {
  background: var(--surface-2);
}
.multi-filter-option input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--primary);
}
.multi-filter-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.multi-filter-empty {
  display: block;
  padding: 10px 8px;
  color: var(--muted);
  font-size: .82rem;
}

@media (max-width: 520px) {
  .filters .multi-filter {
    grid-column: 1;
    width: 100%;
  }
  .multi-filter-menu,
  .multi-filter-align-right .multi-filter-menu {
    left: 0;
    right: auto;
    width: 100%;
    max-width: 100%;
  }
}

/* v3.3 · conversión por lotes */
.converter-mode-tabs { display: inline-flex; gap: 4px; margin-top: 18px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.converter-mode-tabs button { border: 0; background: transparent; padding: 8px 13px; border-radius: 9px; color: var(--muted); font-weight: 750; }
.converter-mode-tabs button.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 5px rgba(30,32,55,.1); }
.batch-converter-panel[hidden], #singleConverterPanel[hidden] { display: none !important; }
.batch-converter-grid { grid-template-columns: .85fr .85fr 1.4fr; }
.batch-run-step { min-width: 0; }
.batch-preview-summary { padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: .88rem; }
.batch-preview-list { max-height: 245px; overflow: auto; display: grid; gap: 6px; padding-right: 3px; }
.batch-confirm { align-items: flex-start; white-space: normal; padding: 9px 10px; border-radius: 10px; background: var(--warn-soft); border: 1px solid #f0d69d; }
#cancelBatchBtn { color: var(--danger); }
#batchConversionProgress { width: 100%; }
@media (max-width: 1120px) {
  .batch-converter-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .converter-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .converter-mode-tabs button { width: 100%; }
}

/* === v3.5: destino de conversión independiente del PLAYER === */
.converter-target-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.converter-target-actions > button { flex: 1 1 160px; }

/* === v3.7: conversión por lotes en dos filas === */
.batch-converter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.batch-converter-grid > .converter-step:not(.batch-run-step) {
  height: 100%;
}
.batch-converter-grid .batch-run-step {
  grid-column: 1 / -1;
  min-height: 0;
}
.batch-converter-grid .batch-preview-list {
  max-height: min(440px, 46vh);
}
.converter-dialog {
  max-height: calc(100dvh - 20px);
  overflow: auto;
}
@media (max-width: 760px) {
  .batch-converter-grid {
    grid-template-columns: 1fr;
  }
  .batch-converter-grid .batch-run-step {
    grid-column: auto;
  }
  .batch-converter-grid .batch-preview-list {
    max-height: 360px;
  }
}

/* === v3.7: final de lote visible y pasos superiores igualados === */
.batch-finish-empty { padding: 12px; color: var(--muted); text-align: center; }


/* === v4.0: avisos del conversor dentro de la top layer del dialog === */
.converter-notice {
  position: sticky;
  top: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #d7dbe8;
  border-radius: 12px;
  background: #2d3042;
  color: #fff;
  box-shadow: 0 10px 30px rgba(26, 28, 48, .18);
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.converter-notice[hidden] { display: none !important; }
.converter-notice.ok { background: #126c4f; border-color: #126c4f; }
.converter-notice.warn { background: #8c651b; border-color: #8c651b; }
.converter-notice.error { background: #963a3a; border-color: #963a3a; }
.converter-notice button {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
}
.converter-notice button:hover { background: rgba(255,255,255,.2); }

/* === v4.6: lista de lotes estable + panel de detalle separado === */
.batch-converter-grid .batch-job-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-height: min(260px, 30dvh);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 4px 2px 0;
  scrollbar-gutter: stable;
  align-content: initial;
}
.batch-job-row {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 9px;
  text-align: left;
  line-height: 1.15;
  cursor: pointer;
}
.batch-job-row:hover { background: var(--surface-2); }
.batch-job-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.batch-job-row.is-selected {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}
.batch-job-row > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.batch-job-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.batch-job-row.ready .batch-job-status,
.batch-job-status.ready { background: #e4f7ef; color: #08704e; }
.batch-job-row.skip .batch-job-status,
.batch-job-status.skip { background: var(--warn-soft); color: #80560d; }
.batch-job-chevron {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  transition: transform .15s ease;
}
.batch-job-row.is-selected .batch-job-chevron { transform: rotate(90deg); }
.batch-job-detail {
  flex: 0 0 auto;
  width: 100%;
  margin: 2px 0 0;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 12px;
  background: var(--surface);
  overflow: visible;
}
.batch-job-detail[hidden] { display: none !important; }
.batch-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.batch-detail-head > div { display: grid; gap: 2px; min-width: 0; }
.batch-detail-head strong { font-size: .95rem; overflow-wrap: anywhere; }
.batch-detail-eyebrow { color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.batch-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px 16px;
  margin: 0;
}
.batch-detail-grid > div { min-width: 0; }
.batch-detail-grid dt { margin: 0 0 2px; color: var(--muted); font-size: .7rem; }
.batch-detail-grid dd { margin: 0; color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.batch-detail-note,
.batch-detail-reason { margin: 11px 0 0; font-size: .8rem; overflow-wrap: anywhere; }
.batch-detail-note { color: #08704e; }
.batch-detail-reason {
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--warn-soft);
  color: #775016;
}
.batch-run-step > .batch-confirm,
.batch-run-step > #convertBatchBtn,
.batch-run-step > #cancelBatchBtn,
.batch-run-step > #batchConversionProgress,
.batch-run-step > #batchConversionStatus { flex: 0 0 auto; }
@media (max-width: 760px) {
  .batch-converter-grid .batch-job-list { max-height: min(220px, 28dvh); }
  .batch-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .batch-detail-grid { grid-template-columns: 1fr; }
  .batch-job-row { grid-template-columns: minmax(0, 1fr) auto 18px; padding-inline: 9px; }
}

/* === Ayuda: grabación NFC e índice de colecciones === */

.help-nfc {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid #d9d2ff;
  border-radius: 16px;
  background: var(--primary-soft);
}
.help-nfc-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  font-size: 1.35rem;
  box-shadow: 0 5px 16px rgba(101,73,237,.10);
}
.help-nfc h3 { margin: 0 0 5px; }
.help-nfc p { margin: 0; color: var(--muted); }
.help-nfc-steps { margin: 10px 0 0; padding-left: 20px; color: var(--muted); }
.help-nfc-steps li + li { margin-top: 5px; }
.help-nfc .help-nfc-note,
.help-nfc .help-nfc-warning { margin-top: 10px; font-size: .8rem; }
.help-nfc .help-nfc-warning {
  padding: 9px 10px;
  border: 1px solid #e3c56e;
  border-radius: 10px;
  background: #fff7dc;
  color: #6a5318;
}
.help-nfc code { white-space: nowrap; }

.catalog-index-help {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}
.catalog-index-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.catalog-index-head > div { min-width: 0; }
.catalog-index-head h3 { margin-bottom: 5px; }
.catalog-index-head p { max-width: 620px; }
.catalog-index-count {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}
.catalog-index-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.catalog-index-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.catalog-index-table th,
.catalog-index-table td {
  padding: 10px 11px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.catalog-index-table tr:last-child td { border-bottom: 0; }
.catalog-index-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8f7fd;
  color: #69637d;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.catalog-index-table td:first-child code {
  color: var(--primary);
  font-weight: 800;
  white-space: nowrap;
}
.catalog-index-table td:nth-child(2) { min-width: 170px; }
.catalog-secondary { color: var(--muted); }
.catalog-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.catalog-status.is-complete { background: #e9f8ef; color: #277849; }
.catalog-status.is-incomplete { background: #fff2df; color: #9b5b12; }
.catalog-source-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.catalog-source-link:hover { text-decoration: underline; }
.catalog-index-note {
  margin-top: 10px !important;
  font-size: .78rem;
}

@media (max-width: 720px) {
  .catalog-index-help { padding: 12px; }
  .catalog-index-head { gap: 10px; }
  .catalog-index-count { display: none; }
  .catalog-index-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .catalog-index-table,
  .catalog-index-table tbody,
  .catalog-index-table tr,
  .catalog-index-table td { display: block; width: 100%; }
  .catalog-index-table thead { display: none; }
  .catalog-index-table tbody { display: grid; gap: 9px; }
  .catalog-index-table tr {
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(23,24,41,.03);
  }
  .catalog-index-table td {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 4px 0;
    border: 0;
    line-height: 1.3;
  }
  .catalog-index-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .70rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
  }
  .catalog-index-table td:first-child {
    margin-bottom: 2px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
  }
  .catalog-index-table td:first-child code { font-size: .86rem; }
  .catalog-index-table td:nth-child(2) { min-width: 0; }
  .catalog-source-link { white-space: normal; }
}

@media (max-width: 720px) {
  .help-nfc { grid-template-columns: 1fr; padding: 13px; }
  .help-nfc-icon { width: 42px; height: 42px; }
}

/* === Kuentoteca PWA / instalación móvil === */
.help-install {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-2);
}
.help-install-icon { width: 64px; height: 64px; border-radius: 16px; display: block; }
.help-install h3 { margin: 0 0 6px; }
.help-install p { margin: 4px 0 0; color: var(--muted); }
.help-install .help-install-note { font-size: .8rem; }
@media (max-width: 620px) {
  .brand-icon { display: none; }
  .brand-mark { font-size: 1.05rem; }
}
@media (max-width: 380px) {
  .brand-mark { font-size: 1rem; }
  .top-actions { gap: 3px; }
  .icon-button { width: 34px; height: 34px; min-width: 34px; }
}
@media (max-width: 520px) {
  .help-install { grid-template-columns: 48px minmax(0, 1fr); gap: 11px; padding: 12px; }
  .help-install-icon { width: 48px; height: 48px; border-radius: 13px; }
}

/* === Importación múltiple ZIP con simulación === */
.zip-import-dialog {
  width: min(980px, calc(100% - 28px));
  max-width: none;
  max-height: min(92dvh, 900px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 28px 100px rgba(26,28,48,.28);
}
.zip-import-dialog::backdrop { background: rgba(24,26,43,.58); backdrop-filter: blur(4px); }
.zip-import-dialog-card { display: flex; flex-direction: column; max-height: min(92dvh, 900px); }
.zip-import-dialog-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}
.zip-import-dialog-title { min-width: 0; display: flex; align-items: center; gap: 12px; }
.zip-import-dialog-title h2 { margin: 2px 0 0; font-size: 1.25rem; }
.zip-import-dialog-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--primary);
  font-size: 1.35rem;
  font-weight: 900;
}
.zip-import-dialog-body { min-height: 0; overflow-y: auto; padding: 18px; }
.zip-import-intro { margin: 0 0 14px; color: var(--muted); }
.zip-import-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.zip-import-summary strong { color: var(--ink); }
.zip-import-summary span { color: var(--muted); font-size: .84rem; text-align: right; }
.zip-import-overwrite-all {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #efc8c4;
  border-radius: 14px;
  background: #fff5f4;
  cursor: pointer;
}
.zip-import-overwrite-all input { margin-top: 3px; }
.zip-import-overwrite-all span { display: grid; gap: 2px; }
.zip-import-overwrite-all strong { color: #8f2d27; }
.zip-import-overwrite-all small { color: #8a5b57; line-height: 1.35; }
.zip-import-list { display: grid; gap: 9px; margin-top: 14px; }
.zip-import-item {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(180px, 1fr) minmax(210px, 1.15fr);
  align-items: center;
  gap: 10px 14px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.zip-import-item.invalid { border-color: #efc8c4; background: #fff8f7; }
.zip-import-main { min-width: 0; display: grid; gap: 2px; }
.zip-import-main strong { color: var(--primary); font-size: .88rem; }
.zip-import-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; font-weight: 700; }
.zip-import-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: .76rem; }
.zip-import-choice { min-width: 0; justify-self: stretch; }
.zip-import-action-label { display: grid; gap: 4px; }
.zip-import-action-label > span { color: var(--muted); font-size: .7rem; font-weight: 700; }
.zip-import-action {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .8rem;
}
.zip-import-action-text { display: inline-flex; align-items: center; min-height: 34px; color: var(--muted); font-size: .8rem; font-weight: 750; }
.zip-import-action-text.ready { color: #287449; }
.zip-import-badge {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: .69rem;
  font-weight: 800;
  white-space: nowrap;
}
.zip-import-badge.new { background: #eaf8ef; color: #277044; }
.zip-import-badge.exists { background: #fff5df; color: #8c6519; }
.zip-import-badge.overwrite { background: #fbe9e8; color: #963c35; }
.zip-import-badge.invalid { background: #fdeceb; color: #9a3630; }
.zip-import-badge.skipped { background: var(--surface-2); color: var(--muted); }
.zip-import-error { grid-column: 1 / -1; margin: -2px 0 0; color: #9a3630; font-size: .77rem; line-height: 1.35; }
.zip-import-error.backup { color: #5e6677; }
.zip-import-confirm {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.zip-import-confirm p { margin: 7px 0 0; color: var(--muted); font-size: .79rem; line-height: 1.4; }
.zip-import-progress-wrap { display: grid; gap: 6px; margin-top: 12px; }
.zip-import-progress-wrap progress { width: 100%; }
.zip-import-progress-wrap span { min-height: 1em; color: var(--muted); font-size: .8rem; }
.zip-import-dialog-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 18px 18px;
  background: var(--surface);
}

@media (max-width: 720px) {
  .zip-import-dialog { width: calc(100% - 12px); max-height: calc(100dvh - 12px); border-radius: 18px; }
  .zip-import-dialog-card { max-height: calc(100dvh - 12px); }
  .zip-import-dialog-head { padding: 14px; }
  .zip-import-dialog-body { padding: 14px; }
  .zip-import-summary { align-items: flex-start; flex-direction: column; gap: 4px; }
  .zip-import-summary span { text-align: left; }
  .zip-import-item { grid-template-columns: 1fr; gap: 7px; }
  .zip-import-choice { width: 100%; }
  .zip-import-error { grid-column: 1; }
  .zip-import-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; padding: 0 14px 14px; }
  .zip-import-dialog-actions button { width: 100%; }
}

/* === v4.59: selector de apariencia y modo oscuro === */
.theme-menu-wrap { position: relative; display: inline-flex; }
.theme-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 8px);
  right: 0;
  width: min(286px, calc(100vw - 20px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 18px 52px rgba(25, 28, 48, .20);
}
.theme-menu-title {
  padding: 5px 8px 7px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.theme-option {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  box-shadow: none;
  transform: none;
}
.theme-option:hover { background: var(--surface-2); border-color: transparent; box-shadow: none; transform: none; }
.theme-option:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.theme-option.active { background: var(--primary-soft); color: var(--primary); }
.theme-option-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 850;
}
.theme-option.active .theme-option-icon { background: var(--surface); color: var(--primary); }
.theme-option > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.theme-option strong { font-size: .84rem; }
.theme-option small { color: var(--muted); font-size: .72rem; font-weight: 500; line-height: 1.25; }
.theme-option-check { visibility: hidden; color: var(--primary); font-weight: 900; text-align: center; }
.theme-option.active .theme-option-check { visibility: visible; }
.theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-icon-moon { display: block; }

/* En teléfonos muy estrechos las acciones pasan a una fila propia para no desbordar. */
@media (max-width: 340px) {
  .topbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "actions"
      "connection";
  }
  .top-actions { justify-content: flex-end; }
  .theme-menu { right: 0; }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1118;
  --surface: #181b25;
  --surface-2: #202430;
  --ink: #f1f3f8;
  --muted: #a6aec1;
  --line: #303746;
  --primary: #9b87ff;
  --primary-2: #7e68f2;
  --primary-soft: #2a2447;
  --ok: #62d7a7;
  --ok-soft: #17382e;
  --warn: #f0bd68;
  --warn-soft: #3a2d19;
  --danger: #ff8989;
  --shadow: 0 18px 48px rgba(0, 0, 0, .34);
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .topbar { background: rgba(24, 27, 37, .93); }
html[data-theme="dark"] button:hover,
html[data-theme="dark"] .button-link:hover { border-color: #4b5367; box-shadow: 0 7px 18px rgba(0, 0, 0, .22); }
html[data-theme="dark"] input,
html[data-theme="dark"] select { color-scheme: dark; }
html[data-theme="dark"] .stats-grid small { color: #929aac; }
html[data-theme="dark"] .story-card { box-shadow: 0 8px 26px rgba(0, 0, 0, .14); }
html[data-theme="dark"] .story-card:hover { border-color: #4a5265; }
html[data-theme="dark"] .story-card.selected { outline-color: rgba(155, 135, 255, .28); }
html[data-theme="dark"] .new-badge { color: #8ab8ff !important; background: #1a2b45 !important; border-color: #315682; }
html[data-theme="dark"] .availability.missing { background: #262b37; color: #a9b0c1; }
html[data-theme="dark"] .empty-state { border-color: #3b4354; background: rgba(24, 27, 37, .55); }
html[data-theme="dark"] .detail-actions .active { border-color: #51477d; }
html[data-theme="dark"] .nfc-write-button.nfc-written { border-color: #2d7c61; background: #16372d; color: #7bd6b4; }
html[data-theme="dark"] .nfc-write-button.nfc-write-error,
html[data-theme="dark"] .nfc-write-button.nfc-unavailable { border-color: #72552e; background: #362a19; color: #edcb8a; }
html[data-theme="dark"] .view-button:hover,
html[data-theme="dark"] .view-button[aria-pressed="true"] { background: var(--surface); }
html[data-theme="dark"] .view-button[aria-pressed="true"] { box-shadow: 0 1px 5px rgba(0, 0, 0, .22); }
html[data-theme="dark"] .detail-dialog-head,
html[data-theme="dark"] .help-dialog-head,
html[data-theme="dark"] .cleanup-dialog-head { background: rgba(24, 27, 37, .97); }
html[data-theme="dark"] .icon-button.primary.connected { color: var(--danger); border-color: #5a3438; background: #332024; }
html[data-theme="dark"] .icon-button.primary.connected:hover { border-color: #7a454a; background: #3d2429; }
html[data-theme="dark"] .cover-placeholder { background: linear-gradient(145deg, #27223d, #1b1e29); }
html[data-theme="dark"] .cover-placeholder-icon { background: rgba(32, 36, 48, .92); border-color: #51477d; }
html[data-theme="dark"] .story-grid.list-view .cover-placeholder { background: linear-gradient(145deg, #27223d, #1b1e29); }
html[data-theme="dark"] .connection-info-button.is-clickable:hover { background: var(--primary-soft); }
html[data-theme="dark"] .multi-filter.has-selection .multi-filter-trigger { border-color: #554a84; background: #211d34; }
html[data-theme="dark"] .theme-menu { box-shadow: 0 18px 52px rgba(0, 0, 0, .42); }

/* Avisos y estados: conservar semántica sin superficies claras dentro del tema oscuro. */
html[data-theme="dark"] .safety-note,
html[data-theme="dark"] .legal-help,
html[data-theme="dark"] .batch-confirm { border-color: #67512d; color: #f0d6a4; }
html[data-theme="dark"] .safety-note code { background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .legal-help-icon { background: #2f281d; border-color: #67512d; }
html[data-theme="dark"] .legal-help h3,
html[data-theme="dark"] .legal-help h4,
html[data-theme="dark"] .legal-help p,
html[data-theme="dark"] .legal-help li { color: #ecd4a8; }
html[data-theme="dark"] .integrity-warning-box { background: #34291b; border-color: #69522e; color: #ebd09a; }
html[data-theme="dark"] .integrity-warning-box strong { color: #f0bf69; }
html[data-theme="dark"] .integrity-size-note { color: #cdb887; }
html[data-theme="dark"] .integrity-overlay-badge { background: rgba(52, 41, 27, .96); border-color: #69522e; color: #efbd68; box-shadow: 0 5px 14px rgba(0, 0, 0, .22); }
html[data-theme="dark"] .integrity-overlay-badge.is-not-installed { background: rgba(73, 32, 40, .97); border-color: #ad5664; color: #ffb6be; box-shadow: 0 5px 14px rgba(0, 0, 0, .26); }
html[data-theme="dark"] .integrity-overlay-badge.is-not-available { background: rgba(43, 48, 58, .98); border-color: #727c8d; color: #e4e7ed; box-shadow: 0 5px 14px rgba(0, 0, 0, .26); }
html[data-theme="dark"] .help-status.missing { background: #46232b; color: #ffb6be; }
html[data-theme="dark"] .sync-status-download,
html[data-theme="dark"] .cleanup-reason { background: #3b2b17; color: #f0bc64; border-color: #6d512b; }
html[data-theme="dark"] .sync-status-local { background: #282d39; color: var(--muted); }
html[data-theme="dark"] .cleanup-dialog-icon { background: #382818; border-color: #6d512b; color: #f0bd68; }
html[data-theme="dark"] .cleanup-preview-summary { background: #34291b; border-color: #69522e; }
html[data-theme="dark"] .cleanup-preview-summary strong,
html[data-theme="dark"] .cleanup-warning { color: #f0c575; }
html[data-theme="dark"] .cleanup-preview-summary span { color: #d5bd8d; }
html[data-theme="dark"] .cleanup-confirm-box { background: #332024; border-color: #63373c; }
html[data-theme="dark"] .cleanup-confirm-box .check { color: #ffb0b0; }
html[data-theme="dark"] .cleanup-confirm-box p { color: #d99292; }

html[data-theme="dark"] .device-model-badge.original { background: #1c2b43; color: #91baff; }
html[data-theme="dark"] .device-model-badge.plus { background: var(--ok-soft); color: var(--ok); }
html[data-theme="dark"] .device-model-badge.unknown { background: #282d39; color: var(--muted); }
html[data-theme="dark"] .compatibility-icon.unsupported,
html[data-theme="dark"] .compatibility-feature.missing .compatibility-feature-mark { background: #382125; color: var(--danger); }
html[data-theme="dark"] .compatibility-summary.compatible { border-color: #315f50; }
html[data-theme="dark"] .compatibility-summary.limited { border-color: #67512d; }
html[data-theme="dark"] .compatibility-summary.unsupported { border-color: #66383d; background: #332024; }
html[data-theme="dark"] .batch-job-status.ready { background: var(--ok-soft); color: var(--ok); }
html[data-theme="dark"] .batch-job-status.skip { color: #f0bd68; }

html[data-theme="dark"] .help-nfc-icon { background: var(--surface); }
html[data-theme="dark"] .help-nfc .help-nfc-warning {
  border-color: #67512d;
  background: #3a2d19;
  color: #f0bd68;
}
html[data-theme="dark"] .catalog-index-table th { background: #20232f; color: #bbb2d4; }
html[data-theme="dark"] .catalog-status.is-complete { background: var(--ok-soft); color: var(--ok); }
html[data-theme="dark"] .catalog-status.is-incomplete { background: #3a2d19; color: #f0bd68; }
html[data-theme="dark"] .zip-import-overwrite-all { background: #332024; border-color: #66383d; }
html[data-theme="dark"] .zip-import-overwrite-all strong { color: #ffaaaa; }
html[data-theme="dark"] .zip-import-overwrite-all small { color: #d39a9a; }
html[data-theme="dark"] .zip-import-item.invalid { border-color: #66383d; background: #2e2023; }
html[data-theme="dark"] .zip-import-badge.new { background: var(--ok-soft); color: var(--ok); }
html[data-theme="dark"] .zip-import-badge.exists { background: #3a2d19; color: #f0bd68; }
html[data-theme="dark"] .zip-import-badge.overwrite,
html[data-theme="dark"] .zip-import-badge.invalid { background: #382125; color: #ff9d9d; }
html[data-theme="dark"] .zip-import-error { color: #ff9d9d; }
html[data-theme="dark"] .zip-import-error.backup { color: var(--muted); }

/* Las portadas se mantienen sobre fondo blanco deliberadamente para respetar su arte original. */
html[data-theme="dark"] .cover,
html[data-theme="dark"] .detail-cover,
html[data-theme="dark"] .detail-cover-wrap,
html[data-theme="dark"] .story-grid.list-view .cover { background: #fff; }
@media (max-width: 620px) {
  /* El menú se alinea con el borde derecho del grupo, incluido el botón Ayuda. */
  .theme-menu { right: -40px; }
}

/* === Ayuda v4.64: navegación por tareas y referencia secundaria === */
.help-dialog { width: min(1020px, calc(100% - 24px)); }
.help-dialog-body { padding: 0; scroll-behavior: smooth; }
.help-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: start; min-height: 0; }
.help-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  gap: 4px;
  align-self: start;
  padding: 16px 12px;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
}
.help-nav-link {
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 750;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.help-nav-link > span:first-child {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--primary);
  font-size: .78rem;
  font-weight: 900;
}
.help-nav-link:hover,
.help-nav-link:focus-visible { background: var(--primary-soft); color: var(--primary); outline: none; }
.help-nav-link.is-home { color: var(--primary); }
.help-content { min-width: 0; padding: 20px 22px 28px; }
.help-section { scroll-margin-top: 14px; }
.help-content > .help-section + .help-section { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.help-section-heading { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.help-section-heading > div { min-width: 0; }
.help-section-heading h3 { margin: 0 0 3px; font-size: 1.08rem; }
.help-section-heading p { margin: 0; color: var(--muted); font-size: .86rem; }
.help-section-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .84rem;
  font-weight: 900;
}
.help-hero {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 17px;
  border: 1px solid #dad2ff;
  border-radius: 16px;
  background: var(--primary-soft);
}
.help-hero-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--surface);
  color: var(--primary);
  font-size: 1.35rem;
  font-weight: 900;
}
.help-hero h3 { margin: 2px 0 4px; font-size: 1.14rem; }
.help-hero p { margin: 0; color: var(--muted); }
.help-topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.help-topic-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 2px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.help-topic-card:hover,
.help-topic-card:focus-visible { transform: translateY(-1px); border-color: #cfc5ff; background: var(--surface-2); outline: none; }
.help-topic-icon { grid-row: 1 / span 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); color: var(--primary); font-weight: 900; }
.help-topic-card strong { min-width: 0; font-size: .84rem; }
.help-topic-card small { min-width: 0; color: var(--muted); font-size: .73rem; line-height: 1.3; }
.help-basic-panel { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); }
.help-basic-panel .help-section-heading { margin-bottom: 11px; }
.help-step-cards { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.help-step-cards li { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.help-step-cards li > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: .76rem; font-weight: 900; }
.help-step-cards strong,
.help-step-cards small { display: block; }
.help-step-cards strong { font-size: .82rem; }
.help-step-cards small { margin-top: 2px; color: var(--muted); font-size: .74rem; line-height: 1.35; }
.help-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.help-panel { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }
.help-panel h4 { margin: 0 0 7px; font-size: .88rem; }
.help-panel p { margin: 0; color: var(--muted); font-size: .82rem; }
.help-compact-steps,
.help-check-list { margin: 0; padding-left: 1.15rem; color: var(--muted); font-size: .81rem; }
.help-compact-steps li + li,
.help-check-list li + li { margin-top: 5px; }
.help-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.help-status-grid > div { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.help-status { grid-row: 1 / span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; }
.help-status.ok { background: var(--ok-soft); color: var(--ok); }
.help-status.warn { background: var(--warn-soft); color: var(--warn); }
.help-status.muted { background: var(--surface-2); color: var(--muted); }
.help-status.missing { background: #ffedef; color: #b32534; }
.help-status.unknown { background: var(--primary-soft); color: var(--primary); }
.help-status.unavailable { background: #edf0f3; color: #505d6f; }
html[data-theme="dark"] .help-status.unavailable { background: #2b303a; color: #e4e7ed; }
.help-status-grid strong { font-size: .78rem; }
.help-status-grid small { color: var(--muted); font-size: .69rem; line-height: 1.3; }
.help-callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: start; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; font-size: .8rem; }
.help-callout strong { white-space: nowrap; }
.help-callout span { color: var(--muted); }
.help-callout.info { background: var(--surface-2); }
.help-callout.safe { border-color: #bfe5d6; background: var(--ok-soft); }
.help-callout.safe strong { color: var(--ok); }
.help-callout.warn { border-color: #ecd49d; background: var(--warn-soft); }
.help-callout.warn strong { color: var(--warn); }
.help-nfc-demo { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }
.help-nfc-demo > div { min-width: 0; }
.help-nfc-demo strong,
.help-nfc-demo small { display: block; }
.help-nfc-demo strong { margin-top: 2px; font-size: 1rem; }
.help-nfc-demo small { color: var(--muted); font-size: .75rem; }
.help-nfc-demo code { flex: 0 0 auto; padding: 8px 10px; border-radius: 9px; background: var(--surface); color: var(--primary); font-weight: 850; }
.help-step-cards-four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; }
.help-step-cards-four li { grid-template-columns: 26px minmax(0, 1fr); padding: 9px; }
.help-step-cards-four li > span { width: 26px; height: 26px; }
.help-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.help-feature-list > div { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.help-feature-list strong,
.help-feature-list span { display: block; }
.help-feature-list strong { font-size: .82rem; }
.help-feature-list span { margin-top: 2px; color: var(--muted); font-size: .76rem; }
.help-install-modern { display: grid; grid-template-columns: 64px repeat(2, minmax(0, 1fr)); gap: 12px; align-items: center; margin-bottom: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.help-install-modern > div strong,
.help-install-modern > div span { display: block; }
.help-install-modern > div strong { font-size: .82rem; }
.help-install-modern > div span { margin-top: 3px; color: var(--muted); font-size: .76rem; }
.help-faq { display: grid; gap: 8px; }
.help-faq details,
.help-reference-disclosure { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: clip; }
.help-faq summary,
.help-reference-disclosure > summary { cursor: pointer; list-style: none; padding: 11px 13px; font-size: .82rem; font-weight: 800; }
.help-faq summary::-webkit-details-marker,
.help-reference-disclosure > summary::-webkit-details-marker { display: none; }
.help-faq summary::after,
.help-reference-disclosure > summary::after { content: '+'; float: right; margin-left: 12px; color: var(--primary); font-size: 1rem; line-height: 1; }
.help-faq details[open] summary::after,
.help-reference-disclosure[open] > summary::after { content: '−'; }
.help-faq details[open] summary,
.help-reference-disclosure[open] > summary { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.help-faq details p { padding: 11px 13px 13px; color: var(--muted); font-size: .79rem; }
.help-reference-disclosure + .help-reference-disclosure { margin-top: 8px; }
.help-reference-disclosure > summary { display: flex; align-items: center; gap: 10px; }
.help-reference-disclosure > summary > span:first-child { min-width: 0; flex: 1 1 auto; }
.help-reference-disclosure > summary strong,
.help-reference-disclosure > summary small { display: block; }
.help-reference-disclosure > summary small { margin-top: 2px; color: var(--muted); font-weight: 500; }
.help-reference-content { padding: 12px; }
.help-reference-content.catalog-index-help { border: 0; border-radius: 0; background: transparent; }
.compact-reference .catalog-index-table-wrap { margin: 0; }
.compact-reference .catalog-index-note { margin-bottom: 0 !important; }
.compact-legal { margin: 0; }
.help-dialog-actions { border-top: 1px solid var(--line); padding-top: 12px; }

html[data-theme="dark"] .help-hero { border-color: #51477d; }
html[data-theme="dark"] .help-topic-card:hover,
html[data-theme="dark"] .help-topic-card:focus-visible { border-color: #51477d; }
html[data-theme="dark"] .help-callout.safe { border-color: #315f50; }
html[data-theme="dark"] .help-callout.warn { border-color: #67512d; }

@media (max-width: 900px) {
  .help-layout { grid-template-columns: 150px minmax(0, 1fr); }
  .help-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-step-cards-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .help-dialog { width: calc(100% - 10px); max-height: calc(100dvh - 10px); border-radius: 16px; }
  .help-dialog-card { max-height: calc(100dvh - 10px); }
  .help-dialog-body { padding: 0; }
  .help-layout { display: block; }
  .help-nav {
    position: sticky;
    top: 0;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .help-nav::-webkit-scrollbar { display: none; }
  .help-nav-link { flex: 0 0 auto; min-height: 36px; padding: 6px 9px; border: 1px solid var(--line); background: var(--surface); }
  .help-nav-link > span:first-child { width: 20px; height: 20px; flex-basis: 20px; }
  .help-content { padding: 14px 12px 22px; }
  .help-content > .help-section + .help-section { margin-top: 24px; padding-top: 22px; }
  .help-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-two-column,
  .help-step-cards,
  .help-feature-list { grid-template-columns: 1fr; }
  .help-step-cards-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-install-modern { grid-template-columns: 48px minmax(0, 1fr); }
  .help-install-modern .help-install-icon { grid-row: 1 / span 2; width: 48px; height: 48px; }
  .help-nfc-demo { align-items: flex-start; flex-direction: column; }
  .help-nfc-demo code { max-width: 100%; overflow-wrap: anywhere; }
  .help-dialog-actions { padding: 10px 12px 12px; }
}

@media (max-width: 420px) {
  .help-dialog-title .eyebrow { font-size: .66rem; }
  .help-dialog-title h2 { font-size: 1.1rem; }
  .help-dialog-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .help-topic-grid { grid-template-columns: 1fr; }
  .help-status-grid { grid-template-columns: 1fr; }
  .help-step-cards-four { grid-template-columns: 1fr; }
  .help-callout { grid-template-columns: 1fr; gap: 3px; }
  .help-callout strong { white-space: normal; }
}
.help-nav-link.is-active { background: var(--primary-soft); color: var(--primary); }
.help-nav-link.is-active > span:first-child { border-color: #d4cbff; }
html[data-theme="dark"] .help-nav-link.is-active > span:first-child { border-color: #51477d; }

/* === v4.85: cabecera compacta y paneles de consulta plegables en móviles === */
.mobile-header-actions, .mobile-filters-toggle, .mobile-stats-toggle, .mobile-group-title { display: none; }
.mobile-action-group, .advanced-filters { display: contents; }

/* Orden visual de escritorio intacto aunque la búsqueda preceda a las estadísticas en el DOM. */
.controls-pane { display: flex; flex-direction: column; }
.controls-pane > .stats-grid { order: 0; }
.controls-pane > .scan-line { order: 1; }
.controls-pane > .filters { order: 2; }

@media (max-width: 720px) {
  .topbar {
    position: sticky;
    min-height: 0;
    padding: 7px 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand quick" "connection connection";
    gap: 5px 8px;
    overflow: visible;
  }
  .topbar .brand { grid-area: brand; flex: initial; gap: 8px; min-width: 0; }
  .topbar .brand-icon { display: block; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; }
  .topbar .brand-mark { display: none; }
  .topbar .brand-sub { display: inline-flex; align-items: center; font-size: 1rem; }
  .topbar .brand-version { color: var(--ink); font-size: .86rem; font-weight: 800; }
  .mobile-header-actions { grid-area: quick; display: flex; align-items: center; gap: 6px; }
  .mobile-header-button {
    width: 40px; height: 40px; min-width: 40px; display: inline-grid; place-items: center;
    padding: 0; border: 1px solid var(--line); border-radius: 11px;
    background: var(--surface); color: var(--ink);
  }
  .mobile-header-button .action-icon { width: 21px; height: 21px; }
  #mobileMenuBtn[aria-expanded="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
  .header-connection { grid-area: connection; display: block; min-width: 0; width: 100%; }
  .header-connection .root-name { display: none; }
  .header-connection .connection-pill {
    display: flex; width: 100%; max-width: none; min-height: 25px; padding: 3px 9px;
    gap: 7px; font-size: .75rem; border: 0; border-radius: 8px;
  }
  .header-connection .status-dot { width: 7px; height: 7px; }
  /* Misma colección de botones del escritorio; solo cambia la presentación. */
  .topbar .top-actions {
    position: absolute; z-index: 50; top: calc(100% + 5px); left: 8px; right: 8px;
    width: auto; max-height: calc(100dvh - 104px); overflow-y: auto; overscroll-behavior: contain;
    display: grid; grid-template-columns: 1fr; gap: 12px;
    padding: 12px; margin: 0; border: 1px solid var(--line); border-radius: 16px;
    background: var(--surface); color: var(--ink); box-shadow: 0 22px 55px rgba(25,28,48,.22);
    visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
  }
  .topbar .top-actions.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
  .mobile-action-group { display: grid; grid-template-columns: 1fr; gap: 3px; min-width: 0; }
  .mobile-action-group + .mobile-action-group { padding-top: 10px; border-top: 1px solid var(--line); }
  .mobile-group-title { display: block; padding: 0 5px 5px; font-size: .69rem; letter-spacing: .08em; font-weight: 850; color: var(--muted); }
  .topbar .top-actions .icon-button {
    width: 100%; min-width: 0; height: auto; min-height: 44px;
    display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    padding: 9px 12px; margin: 0; border: 0; border-radius: 10px;
    background: transparent; color: var(--ink); font-size: .88rem; font-weight: 650; text-align: left;
  }
  .topbar .top-actions .icon-button.primary:not(.connected) { background: var(--primary-soft); color: var(--primary); }
  .topbar .top-actions .icon-button.primary.connected { background: var(--surface-2); color: var(--danger); }
  .topbar .top-actions .icon-button::after { content: attr(aria-label); display: block; flex: 1; min-width: 0; white-space: normal; }
  .topbar .top-actions .action-icon { flex: 0 0 21px; width: 21px; height: 21px; }
  .topbar .top-actions .theme-menu-wrap { display: block; width: 100%; }
  .topbar .top-actions .theme-menu { position: static; width: 100%; max-width: 100%; margin: 4px 0 6px; box-shadow: none; }
  .topbar .top-actions .theme-option { min-height: 48px; }

  .controls-pane > .filters { order: 0; margin-bottom: 0; }
  .controls-pane > .mobile-stats-toggle { order: 1; }
  .controls-pane > .stats-grid { order: 2; }
  .controls-pane > .scan-line { order: 3; min-height: 0; }
  .page-shell { margin-top: 9px; row-gap: 7px; }
  .topbar + .page-shell .controls-pane { gap: 8px; }
  .controls-pane > .filters {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 8px; padding: 7px; border-radius: 13px; box-shadow: none;
  }
  .controls-pane > .filters #searchInput {
    grid-column: 1; width: 100%; min-width: 0; min-height: 44px; padding: .62rem .76rem;
  }
  .mobile-filters-toggle {
    grid-column: 2; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 89px; min-height: 44px; padding: 7px 10px; font-size: .83rem; font-weight: 800;
    border-radius: 10px; color: var(--ink); background: var(--surface-2);
  }
  .mobile-filters-toggle .action-icon { width: 17px; height: 17px; }
  .mobile-filters-toggle[aria-expanded="true"], .mobile-filters-toggle.has-active-filters {
    color: var(--primary); border-color: var(--primary); background: var(--primary-soft);
  }
  .controls-pane > .filters .advanced-filters {
    grid-column: 1 / -1; display: none; width: 100%;
    padding: 10px 0 1px; border-top: 1px solid var(--line);
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  }
  .controls-pane > .filters .advanced-filters.is-open { display: grid; }
  .controls-pane > .filters .advanced-filters > select,
  .controls-pane > .filters .advanced-filters > .multi-filter { grid-column: auto; width: 100%; }
  .controls-pane > .filters .filter-actions {
    grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-top: 4px; justify-content: stretch;
  }
  .controls-pane > .filters .filter-actions .check { grid-column: 1 / -1; white-space: normal; }
  .controls-pane > .filters .filter-actions button { grid-column: 1 / -1; width: 100%; min-height: 44px; }
  .mobile-stats-toggle {
    width: 100%; min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; box-shadow: none;
    font-size: .83rem; text-align: left; background: var(--surface);
  }
  .mobile-stats-copy { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-weight: 750; }
  .mobile-stats-copy .action-icon { width: 17px; height: 17px; flex: 0 0 17px; color: var(--primary); }
  .mobile-stats-count { white-space: nowrap; color: var(--muted); }
  .mobile-stats-count strong { color: var(--ink); }
  .mobile-toggle-chevron { display: inline-block; font-size: 1.1rem; margin-left: 4px; transition: transform .14s ease; }
  .mobile-stats-toggle[aria-expanded="true"] .mobile-toggle-chevron { transform: rotate(180deg); }
  .controls-pane > .stats-grid { display: none; margin-bottom: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .controls-pane > .stats-grid.is-open { display: grid; }
  .controls-pane > .stats-grid article { min-width: 0; }
}
@media (max-width: 520px) {
  .controls-pane > .filters .advanced-filters { grid-template-columns: 1fr; }
  .controls-pane > .filters .advanced-filters > select,
  .controls-pane > .filters .advanced-filters > .multi-filter { grid-column: 1; }
}
@media (max-width: 340px) {
  .mobile-header-actions { gap: 4px; }
  .mobile-header-button { width: 38px; min-width: 38px; height: 38px; }
  .topbar .brand-version { font-size: .81rem; }
  .mobile-stats-toggle { font-size: .76rem; padding-inline: 9px; }
  .mobile-filters-toggle { min-width: 82px; padding-inline: 7px; }
}