/* rev. 43 — wwwroot/css/vt-report.css de Mono web (global en _Host), verbatim salvo capas D-51. */
/* =====================================================================
   vt-report.css — Reporte de Ventas Vantastic (sin Syncfusion)
   Paleta Cobalt Elegante. Claro y oscuro por tokens.
   Requiere IBM Plex Sans / IBM Plex Mono (ver <link> en index.html).
   ===================================================================== */
:root{
  --cobalt:#1a4fba; --cobalt-deep:#0f3494; --cobalt-light:#2d6ae0; --cobalt-pale:#e8eef9; --cobalt-subtle:#f0f4fb;
  --ground:#f4f6fa; --surface:#ffffff; --surface-2:#fafbfe;
  --ink:#16202e; --ink-2:#3c4a5c; --muted:#6b7a8d;
  --line:#dde4ee; --line-soft:#eaeff6;
  --good:#15803d; --good-bg:#e8f5ec; --warn:#b45309; --warn-bg:#fdf3e3; --bad:#b91c1c; --bad-bg:#fbeaea;
  --excel:#1d6f42;
  --shadow:0 1px 2px rgba(20,32,52,.06),0 1px 3px rgba(20,32,52,.05);
  --shadow-lift:0 8px 28px rgba(20,32,52,.16);
  --r:6px; --r-lg:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cobalt:#5b8def; --cobalt-deep:#2d6ae0; --cobalt-light:#7ba6f5; --cobalt-pale:#1b2740; --cobalt-subtle:#161f31;
    --ground:#0e141d; --surface:#151d29; --surface-2:#1a2331;
    --ink:#e7edf6; --ink-2:#b9c6d7; --muted:#8b9bb0;
    --line:#2a3647; --line-soft:#212c3b;
    --good:#4ade80; --good-bg:#16301f; --warn:#fbbf24; --warn-bg:#33250f; --bad:#f87171; --bad-bg:#331a1b;
    --excel:#4ca96e;
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lift:0 10px 32px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --cobalt:#5b8def; --cobalt-deep:#2d6ae0; --cobalt-light:#7ba6f5; --cobalt-pale:#1b2740; --cobalt-subtle:#161f31;
  --ground:#0e141d; --surface:#151d29; --surface-2:#1a2331;
  --ink:#e7edf6; --ink-2:#b9c6d7; --muted:#8b9bb0;
  --line:#2a3647; --line-soft:#212c3b;
  --good:#4ade80; --good-bg:#16301f; --warn:#fbbf24; --warn-bg:#33250f; --bad:#f87171; --bad-bg:#331a1b;
  --excel:#4ca96e;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lift:0 10px 32px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
.vt-page{color:var(--ink);font-family:'IBM Plex Sans',-apple-system,Segoe UI,sans-serif;font-size:13px;line-height:1.5}
.vt-page{max-width:1520px;margin:0 auto;padding-inline:16px;padding-block:16px 48px}
h1,h2,h3,h4{text-wrap:balance;margin:0}
.mono{font-family:'IBM Plex Mono','SFMono-Regular',monospace;font-variant-numeric:tabular-nums}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) }
:root[data-theme="dark"] 
.app{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}

/* top bar */
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.brandline{display:flex;align-items:center;gap:10px;margin-right:auto}
.title-main{font-size:14.5px;font-weight:700;letter-spacing:-.1px}
.title-sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;font-weight:600}

.vt-back{display:inline-flex;align-items:center;gap:7px;height:31px;padding:0 11px 0 8px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);color:var(--ink-2);font:600 12.5px/1 'IBM Plex Sans',sans-serif;
  cursor:pointer;box-shadow:var(--shadow);transition:background .15s,border-color .15s,transform .1s}
.vt-back:hover{background:var(--cobalt-subtle);border-color:var(--cobalt-pale);color:var(--cobalt-deep)}
:root[data-theme="dark"] .vt-back:hover{color:var(--cobalt-light)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vt-back:hover{color:var(--cobalt-light)}}
.vt-back:active{transform:translateY(1px)}
.vt-back .chev{width:14px;height:14px;flex:none}
.vt-back.solid{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.vt-back.solid:hover{background:var(--cobalt-deep);color:#fff}
.vt-back.icon{width:31px;padding:0;justify-content:center}

.btn{display:inline-flex;align-items:center;gap:6px;height:31px;padding:0 12px;border:none;border-radius:var(--r);
  color:#fff;font:600 12.5px/1 'IBM Plex Sans',sans-serif;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.08);
  transition:filter .15s,transform .1s}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
.btn.icon-only{width:31px;padding:0;justify-content:center}
.btn-neutral{background:#374151} .btn-excel{background:var(--excel)} .btn-primary{background:var(--cobalt)}
.btn-ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line);box-shadow:none}
.btn-ghost:hover{background:var(--cobalt-subtle)}
.btn svg{width:14px;height:14px;flex:none}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);align-items:flex-end}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:10.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.ctl{height:31px;padding:0 9px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--ink);
  font:400 12.5px/1 'IBM Plex Sans',sans-serif;min-width:132px;transition:border-color .15s,box-shadow .15s}
.ctl:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-pale)}
select.ctl{appearance:none;padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 14px) 13px,calc(100% - 9px) 13px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.seg button{border:none;background:transparent;color:var(--ink-2);font:600 12px/1 'IBM Plex Sans',sans-serif;
  height:29px;padding:0 11px;cursor:pointer;border-right:1px solid var(--line-soft);transition:background .15s,color .15s}
.seg button:last-child{border-right:none}
.seg button:hover:not([disabled]){background:var(--cobalt-subtle)}
.seg button[aria-pressed="true"]{background:var(--cobalt);color:#fff}

.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.track{width:38px;height:20px;border-radius:999px;background:#c7d0dd;position:relative;transition:background .18s;flex:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .track{background:#3a4759}}
:root[data-theme="dark"] .track{background:#3a4759}
.track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .18s}
.switch input:checked + .track{background:var(--cobalt)}
.switch input:checked + .track::after{transform:translateX(18px)}
.switch .lbl{font-size:12.5px;font-weight:600;color:var(--ink-2)}

.rangebar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:8px 14px;background:var(--cobalt-subtle);
  border-bottom:1px solid var(--line);font-size:12px}
.rangebar .k{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.rangebar .v{font-family:'IBM Plex Mono',monospace;font-weight:500;color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:600}
.pill.ok{background:var(--good-bg);color:var(--good)} .pill.warn{background:var(--warn-bg);color:var(--warn)}

/* tabs */
.tabrail{display:flex;gap:2px;overflow-x:auto;padding:0 8px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.tabrail button{flex:none;border:none;background:transparent;cursor:pointer;padding:11px 13px 10px;
  font:600 12.5px/1 'IBM Plex Sans',sans-serif;color:var(--muted);white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.tabrail button:hover{color:var(--ink)}
.tabrail button[aria-selected="true"]{color:var(--cobalt);border-bottom-color:var(--cobalt)}
.tabrail .idx{font-family:'IBM Plex Mono',monospace;font-size:10.5px;opacity:.6;margin-right:5px}
.panel{padding:18px 16px 24px}
.panel[hidden]{display:none}

/* report headings */
.rpt-title{text-align:center}
.rpt-title h2{font-size:16px;font-weight:700;letter-spacing:.4px;color:var(--cobalt-deep)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rpt-title h2{color:var(--cobalt-light)}}
:root[data-theme="dark"] .rpt-title h2{color:var(--cobalt-light)}
.rpt-title p{margin:2px 0 0;font-size:11.5px;color:var(--muted)}
.meta{display:flex;flex-wrap:wrap;gap:6px 26px;padding:10px 0;border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);margin:12px 0 18px}
.meta div{display:flex;gap:6px;align-items:baseline;font-size:12px}
.meta .k{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.meta .v{font-weight:500}
.sec{display:flex;align-items:center;gap:8px;margin:22px 0 9px;font-size:12px;font-weight:700;
  letter-spacing:.7px;text-transform:uppercase;color:var(--ink-2)}
.sec::after{content:"";flex:1;height:1px;background:var(--line)}
.sec svg{width:14px;height:14px;color:var(--cobalt);flex:none}
.panel > .sec:first-child{margin-top:0}

/* ===== table engine ===== */
.vt{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.vt-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.vt-search{position:relative;flex:1 1 240px;min-width:190px;max-width:400px}
.vt-search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted)}
.vt-search input{width:100%;height:31px;padding:0 28px 0 29px;border:1px solid var(--line);border-radius:5px;
  background:var(--surface);color:var(--ink);font:400 12.5px/1 'IBM Plex Sans',sans-serif}
.vt-search input:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-pale)}
.vt-search .clr{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;
  color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px;display:none}
.vt-search.has .clr{display:block}
.vt-count{font-size:11.5px;color:var(--muted);font-family:'IBM Plex Mono',monospace;margin-left:auto;white-space:nowrap}
.vt-count b{color:var(--ink)}
/* single filter button */
.vt-filtbtn{display:inline-flex;align-items:center;gap:7px;height:31px;padding:0 11px;border:1px solid var(--line);
  border-radius:5px;background:var(--surface);color:var(--ink-2);font:600 12px/1 'IBM Plex Sans',sans-serif;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.vt-filtbtn:hover{background:var(--cobalt-subtle);border-color:var(--cobalt-pale)}
.vt-filtbtn svg{width:14px;height:14px;flex:none}
.vt-filtbtn.on{border-color:var(--cobalt);color:var(--cobalt);background:var(--cobalt-subtle)}
.vt-filtbtn .bdg{display:none;min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--cobalt);
  color:#fff;font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;align-items:center;justify-content:center}
.vt-filtbtn.on .bdg{display:inline-flex}
.th-f{margin-left:5px;opacity:.3;cursor:pointer;display:inline-block;vertical-align:-1px}
.th-f:hover{opacity:.9;color:var(--cobalt)}
.th-f.on{opacity:1;color:var(--cobalt)}
.th-f svg{width:10px;height:10px}

/* filter modal */
.flist{display:flex;flex-direction:column;gap:7px}
.fg{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.fg.open{border-color:var(--cobalt-pale)}
.fg.focus{border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-pale)}
.fg-h{display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:pointer;user-select:none;background:var(--surface)}
.fg-h:hover{background:var(--cobalt-subtle)}
.fg.open .fg-h{background:var(--surface-2);border-bottom:1px solid var(--line)}
.fg-car{width:11px;height:11px;flex:none;color:var(--muted);transition:transform .18s}
.fg.open .fg-car{transform:rotate(90deg);color:var(--cobalt)}
.fg-t{font-size:12.5px;font-weight:600;color:var(--ink)}
.fg-st{margin-left:auto;display:flex;align-items:center;gap:8px}
.fg-n{font-family:'IBM Plex Mono',monospace;font-size:11px;padding:2px 8px;border-radius:999px;
  background:var(--line-soft);color:var(--muted);white-space:nowrap}
.fg-n.on{background:var(--cobalt-pale);color:var(--cobalt-deep);font-weight:600}
:root[data-theme="dark"] .fg-n.on{color:var(--cobalt-light)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fg-n.on{color:var(--cobalt-light)}}
.fg-x{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;
  padding:2px 5px;border-radius:4px;display:none}
.fg-n.on ~ .fg-x, .fg-st .fg-x.show{display:block}
.fg-x:hover{background:var(--bad-bg);color:var(--bad)}
.fg-b{display:none;padding:9px 11px 10px}
.fg.open .fg-b{display:block}
.fg-tools{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.fg-s{flex:1;height:28px;padding:0 9px;border:1px solid var(--line);border-radius:5px;background:var(--surface);
  color:var(--ink);font:400 12px/1 'IBM Plex Sans',sans-serif;min-width:0}
.fg-s:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-pale)}
.fg-tools button{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  font:600 11px/1 'IBM Plex Sans',sans-serif;cursor:pointer;padding:0 9px;height:28px;border-radius:5px;white-space:nowrap}
.fg-tools button:hover{background:var(--cobalt-subtle);border-color:var(--cobalt-pale);color:var(--cobalt-deep)}
:root[data-theme="dark"] .fg-tools button:hover{color:var(--cobalt-light)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fg-tools button:hover{color:var(--cobalt-light)}}
.fg-l{overflow:auto;max-height:210px;border:1px solid var(--line-soft);border-radius:5px;padding:4px;background:var(--surface-2)}
.fg-l label{display:flex;align-items:center;gap:8px;padding:4px 7px;border-radius:4px;font-size:12.5px;cursor:pointer}
.fg-l label:hover{background:var(--cobalt-pale)}
.fg-l label.hid{display:none}
.fg-l label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fg-l input[type=checkbox]{accent-color:var(--cobalt);width:14px;height:14px;flex:none}
.fg-l .nores{padding:10px 7px;color:var(--muted);font-size:11.5px}
.fg-hint{font-size:11px;color:var(--muted);margin-top:6px}
#bdf .modal .body{max-height:min(60vh,520px)}
.fmodal-sum{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r);
  background:var(--cobalt-subtle);border:1px solid var(--cobalt-pale);font-size:12px;color:var(--ink-2);margin-bottom:13px}
.fmodal-sum b{color:var(--ink)}
.vt-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px 9px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.vt-chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 4px 0 9px;border-radius:999px;
  background:var(--cobalt-pale);color:var(--cobalt-deep);font-size:11px;font-weight:600}
:root[data-theme="dark"] .chip{color:var(--cobalt-light)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip{color:var(--cobalt-light)}}
.chip button{border:none;background:transparent;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0 3px;opacity:.7}
.chip button:hover{opacity:1}
.chip.clear{background:transparent;border:1px dashed var(--line);color:var(--muted);padding:0 9px;cursor:pointer}
.chip.more{background:transparent;border:1px solid var(--line);color:var(--ink-2);padding:0 9px;cursor:pointer}
.chip.hid{display:none}

.vt-scroll{overflow:auto;max-height:430px}
.vt-scroll.tall{max-height:520px}
table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
table.t th,table.t td{padding:6px 9px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
table.t thead th{position:sticky;top:0;z-index:2;background:var(--surface-2);color:var(--ink-2);
  font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;text-align:center;
  border-bottom:1px solid var(--line);box-shadow:inset 0 -1px 0 var(--line)}
table.t thead tr.l2 th{top:27px} table.t thead tr.l3 th{top:54px}
table.t thead th.srt{cursor:pointer;user-select:none}
table.t thead th.srt:hover{color:var(--cobalt);background:var(--cobalt-subtle)}
table.t thead th .ar{opacity:.35;margin-left:3px;font-size:9px}
table.t thead th.act{color:var(--cobalt)} table.t thead th.act .ar{opacity:1}
table.t th.grp{background:var(--cobalt-pale);color:var(--cobalt-deep)}
:root[data-theme="dark"] table.t th.grp{color:var(--cobalt-light)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) table.t th.grp{color:var(--cobalt-light)}}
table.t tbody tr:nth-child(even){background:var(--surface-2)}
table.t tbody tr:hover{background:var(--cobalt-subtle)}
table.t td.num{text-align:right;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
table.t td.mono{font-family:'IBM Plex Mono',monospace}
table.t td.l{text-align:left} table.t td.c{text-align:center}
tr.tot td{background:var(--cobalt-subtle);font-weight:700;border-top:2px solid var(--cobalt);border-bottom:none;
  position:sticky;bottom:0;z-index:1}
tr.tot.alt td{background:var(--surface-2);border-top:1px solid var(--line)}
.empty{padding:26px;text-align:center;color:var(--muted);font-size:12.5px}

.tag{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:600}
.tag.ok{background:var(--good-bg);color:var(--good)} .tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.bad{background:var(--bad-bg);color:var(--bad)} .tag.neu{background:var(--cobalt-pale);color:var(--cobalt-deep)}
:root[data-theme="dark"] .tag.neu{color:var(--cobalt-light)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tag.neu{color:var(--cobalt-light)}}

/* margin semaphore */
td.mg{font-family:'IBM Plex Mono',monospace;text-align:right;font-weight:600}
td.mg.m-lo{background:var(--bad-bg);color:var(--bad)}
td.mg.m-md{background:var(--warn-bg);color:var(--warn)}
td.mg.m-hi{background:var(--good-bg);color:var(--good)}
.mg-legend{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:11.5px;color:var(--muted);margin-top:9px}
.mg-legend span{display:inline-flex;align-items:center;gap:6px}
.mg-legend i{width:13px;height:13px;border-radius:3px;flex:none}

.bar{height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden;min-width:64px;margin-top:3px}
.bar > i{display:block;height:100%;border-radius:3px;background:var(--cobalt)}
.bar.green > i{background:var(--good)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:12px}
.kpi{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:11px 13px;
  display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--cobalt))}
.kpi .k{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.kpi .v{font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:600;letter-spacing:-.4px;line-height:1.25}
.kpi .v.sm{font-size:13.5px;line-height:1.45;font-family:'IBM Plex Sans',sans-serif;font-weight:600}
.kpi .d{font-size:11px;color:var(--muted)}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:13px 14px}
.card > h4{font-size:12.5px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.card > h4 .n{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--cobalt);
  border:1px solid var(--cobalt-pale);background:var(--cobalt-subtle);border-radius:4px;padding:1px 5px}
.card > h4 .sp{margin-left:auto;font-weight:400;color:var(--muted);font-size:11.5px}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-family:'IBM Plex Sans',sans-serif;fill:var(--muted);font-size:9.5px}
.chart text.val{fill:var(--ink-2);font-family:'IBM Plex Mono',monospace;font-size:9.5px}
.chart text.lbl{fill:var(--ink);font-size:10px}
.chart .gridline{stroke:var(--line-soft);stroke-width:1}
.chart .axis{stroke:var(--line);stroke-width:1}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;font-size:11px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:2px;flex:none}
.note{font-size:11.5px;color:var(--muted);margin-top:8px}

details.ladder{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-top:14px}
details.ladder > summary{list-style:none;cursor:pointer;padding:11px 14px;font-size:12.5px;font-weight:600;
  display:flex;align-items:center;gap:8px}
details.ladder > summary::-webkit-details-marker{display:none}
details.ladder > summary .caret{transition:transform .2s;color:var(--cobalt)}
details.ladder[open] > summary .caret{transform:rotate(90deg)}
details.ladder > summary:hover{background:var(--cobalt-subtle)}
details.ladder .inner{padding:0 14px 14px;border-top:1px solid var(--line-soft)}

/* modal */
.backdrop{position:fixed;inset:0;background:rgba(10,18,30,.5);backdrop-filter:blur(2px);display:none;
  align-items:center;justify-content:center;padding:16px;z-index:var(--z-modal) /* D-51 (era 60) */}
.backdrop.open{display:flex}
.modal{background:var(--surface);border-radius:14px;box-shadow:var(--shadow-lift);width:min(1000px,100%);
  max-height:92vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);
  animation:pop .22s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal header{background:linear-gradient(135deg,var(--cobalt-deep),var(--cobalt-light));color:#fff;
  padding:13px 16px;display:flex;align-items:center;gap:10px}
.modal header h3{font-size:14px;font-weight:600;flex:1}
.modal header button{background:rgba(255,255,255,.16);border:none;color:#fff;width:27px;height:27px;border-radius:5px;
  cursor:pointer;font-size:15px;line-height:1}
.modal header button:hover{background:rgba(255,255,255,.3)}
.modal .body{padding:16px;overflow:auto}
.modal footer{padding:11px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:var(--surface-2)}

/* export overlay */
.exp{width:min(420px,100%);background:var(--surface);border-radius:14px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-lift);animation:pop .22s cubic-bezier(.2,.9,.3,1.2)}
.exp header{background:linear-gradient(135deg,var(--cobalt-deep),var(--cobalt-light));color:#fff;padding:14px 18px}
.exp header h3{font-size:14.5px;font-weight:600}
.exp header p{margin:2px 0 0;font-size:11.5px;opacity:.82}
.exp .body{padding:18px}
.spin{width:46px;height:46px;margin:2px auto 14px;position:relative}
.spin svg{width:100%;height:100%;animation:rot 1.1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.spin circle.tr{stroke:var(--line);stroke-width:4;fill:none}
.spin circle.pr{stroke:var(--cobalt);stroke-width:4;fill:none;stroke-linecap:round;stroke-dasharray:80 200}
.prog{height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden;margin:14px 0 10px}
.prog > i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--cobalt),var(--cobalt-light));transition:width .32s ease}
.steps{display:flex;flex-direction:column;gap:5px;font-size:12px}
.steps li{display:flex;align-items:center;gap:8px;color:var(--muted);transition:color .2s}
.steps li .dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--line);flex:none;position:relative}
.steps li.doing{color:var(--ink);font-weight:600}
.steps li.doing .dot{border-color:var(--cobalt);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--cobalt-pale)}50%{box-shadow:0 0 0 5px transparent}}
.steps li.done{color:var(--ink-2)}
.steps li.done .dot{border-color:var(--good);background:var(--good)}
.steps li.done .dot::after{content:"";position:absolute;left:3.5px;top:1px;width:3.5px;height:7px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.steps{list-style:none;margin:0;padding:0}
.done-mark{width:52px;height:52px;margin:4px auto 12px;border-radius:50%;background:var(--good-bg);
  display:grid;place-items:center;animation:pop .3s cubic-bezier(.2,.9,.3,1.4)}
.done-mark svg{width:26px;height:26px;color:var(--good)}
.exp .fname{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted);
  word-break:break-all;margin-top:6px}
.exp footer{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:var(--surface-2)}
.exp-opts{display:flex;flex-direction:column;gap:9px;margin-bottom:4px}
.exp-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer;transition:border-color .15s,background .15s}
.exp-opt:hover{background:var(--cobalt-subtle)}
.exp-opt input{accent-color:var(--cobalt);margin-top:2px;width:15px;height:15px;flex:none}
.exp-opt:has(input:checked){border-color:var(--cobalt);background:var(--cobalt-subtle)}
.exp-opt .t{font-weight:600;font-size:12.5px} .exp-opt .d{font-size:11.5px;color:var(--muted)}

.swatches{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.sw{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;width:106px}
.sw .chipc{height:36px} .sw .t{padding:5px 7px;font-size:10px;font-family:'IBM Plex Mono',monospace;color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:640px){
  .panel{padding:14px 10px 18px} .kpi .v{font-size:17px} .ctl{min-width:118px}
  .vt-count{margin-left:0}
}