/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --page: #f6f5f1;
  --surface: #fcfcfb;
  --surface-2: #f1f0eb;
  --surface-3: #e8e7e1;
  --ink: #141413;
  --ink-2: #52514e;
  --muted: #8a8882;
  --line: #e3e2db;
  --line-strong: #cfcdc4;
  --accent: #2a78d6;
  --accent-ink: #1c5cab;
  --accent-wash: rgba(42, 120, 214, .10);
  --good: #0a7a0a;
  --bad: #c43636;
  --series: #2a78d6;
  --series-wash: rgba(42, 120, 214, .12);
  --neg: #e34948;
  --faint-dot: rgba(42, 120, 214, .28);
  --st-star: #c98500;
  --st-star-wash: rgba(237, 161, 0, .14);
  --st-ok: #128a5e;
  --st-ok-wash: rgba(27, 175, 122, .13);
  --st-not: #8a8882;
  --st-not-wash: rgba(138, 136, 130, .14);
  --tier-hi-bg: #1c5cab; --tier-hi-ink: #fff;
  --tier-mid-bg: #b7d3f6; --tier-mid-ink: #0d366b;
  --tier-lo-bg: #e8e7e1; --tier-lo-ink: #52514e;
  --bna: #0f6f5c; --bna-wash: rgba(15, 111, 92, .11);
  --warnc: #a35f00;
  --th-hi-bg: #5b3fa8; --th-hi-ink: #fff;
  --th-mid-bg: #ddd3f6; --th-mid-ink: #36226e;
  --shadow: 0 1px 2px rgba(20, 20, 19, .06), 0 8px 24px rgba(20, 20, 19, .08);
  --shadow-lg: 0 12px 48px rgba(20, 20, 19, .18);
  --r: 10px;
  --r-sm: 6px;
  --top: 52px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --surface-2: #222220; --surface-3: #2c2c2a;
    --ink: #f4f3ee; --ink-2: #c3c2b7; --muted: #8f8d86;
    --line: #2c2c2a; --line-strong: #3d3d3a;
    --accent: #5598e7; --accent-ink: #86b6ef; --accent-wash: rgba(85, 152, 231, .14);
    --good: #3cc23c; --bad: #ef7070;
    --series: #3987e5; --series-wash: rgba(57, 135, 229, .16); --neg: #e66767;
    --faint-dot: rgba(57, 135, 229, .35);
    --st-star: #f0b232; --st-star-wash: rgba(240, 178, 50, .14);
    --st-ok: #2fc48c; --st-ok-wash: rgba(47, 196, 140, .13);
    --st-not: #8f8d86; --st-not-wash: rgba(143, 141, 134, .16);
    --tier-hi-bg: #3987e5; --tier-hi-ink: #fff;
    --tier-mid-bg: #184f95; --tier-mid-ink: #cde2fb;
    --tier-lo-bg: #2c2c2a; --tier-lo-ink: #c3c2b7;
    --bna: #45c4a3; --bna-wash: rgba(69, 196, 163, .14);
    --warnc: #e3a33a;
    --th-hi-bg: #8e72e0; --th-hi-ink: #fff;
    --th-mid-bg: #3b2c70; --th-mid-ink: #ddd3f6;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg: 0 12px 48px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --surface-2: #222220; --surface-3: #2c2c2a;
  --ink: #f4f3ee; --ink-2: #c3c2b7; --muted: #8f8d86;
  --line: #2c2c2a; --line-strong: #3d3d3a;
  --accent: #5598e7; --accent-ink: #86b6ef; --accent-wash: rgba(85, 152, 231, .14);
  --good: #3cc23c; --bad: #ef7070;
  --series: #3987e5; --series-wash: rgba(57, 135, 229, .16); --neg: #e66767;
  --faint-dot: rgba(57, 135, 229, .35);
  --st-star: #f0b232; --st-star-wash: rgba(240, 178, 50, .14);
  --st-ok: #2fc48c; --st-ok-wash: rgba(47, 196, 140, .13);
  --st-not: #8f8d86; --st-not-wash: rgba(143, 141, 134, .16);
  --tier-hi-bg: #3987e5; --tier-hi-ink: #fff;
  --tier-mid-bg: #184f95; --tier-mid-ink: #cde2fb;
  --tier-lo-bg: #2c2c2a; --tier-lo-ink: #c3c2b7;
  --bna: #45c4a3; --bna-wash: rgba(69, 196, 163, .14);
  --warnc: #e3a33a;
  --th-hi-bg: #8e72e0; --th-hi-ink: #fff;
  --th-mid-bg: #3b2c70; --th-mid-ink: #ddd3f6;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.6);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--page); color: var(--ink);
  font: 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.num, .tab-num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.ink2 { color: var(--ink-2); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.icon.sm { width: 14px; height: 14px; }
.icon.fill { fill: currentColor; stroke: none; }
kbd {
  font: 600 11px/1 var(--font); padding: 2px 5px; border-radius: 4px;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--surface);
  color: var(--ink-2); min-width: 18px; display: inline-block; text-align: center;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50; height: var(--top);
  display: flex; align-items: center; gap: 20px; padding: 0 16px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); font-size: 15px; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--ink); color: var(--surface); display: grid; place-items: center; }
.nav { display: flex; gap: 2px; }
.nav a {
  color: var(--ink-2); padding: 6px 12px; border-radius: 8px; font-weight: 550;
  display: flex; align-items: center; gap: 7px;
}
.nav a:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.nav a.on { background: var(--surface-3); color: var(--ink); }
.nav .pill { font-size: 11px; font-weight: 650; padding: 1px 6px; border-radius: 99px; background: var(--accent); color: #fff; }
.topbar .spacer { flex: 1; }
.run-info { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.run-info b { color: var(--ink-2); font-weight: 600; }
.icon-btn {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px;
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

/* ── Buttons & controls ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); font: 550 13px var(--font); cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn.primary:hover { opacity: .9; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn kbd { margin-left: 2px; }

.mark-btn { gap: 7px; }
.mark-btn[data-status="star"].on { background: var(--st-star-wash); border-color: var(--st-star); color: var(--st-star); }
.mark-btn[data-status="ok"].on { background: var(--st-ok-wash); border-color: var(--st-ok); color: var(--st-ok); }
.mark-btn[data-status="not"].on { background: var(--st-not-wash); border-color: var(--st-not); color: var(--ink-2); }
.mark-btn.on .icon { fill: currentColor; }
.mark-btn[data-status="not"].on .icon, .mark-btn[data-status="ok"].on .icon { fill: none; stroke-width: 2.4; }

select, input[type=text], input[type=number], input[type=search], textarea {
  font: 13px var(--font); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 8px; height: 32px; padding: 0 10px;
}
textarea { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.45; width: 100%; }
select { padding-right: 26px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8882' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

.seg { display: inline-flex; background: var(--surface-2); border-radius: 9px; padding: 3px; gap: 2px; }
.seg a, .seg button, .seg label {
  border: 0; background: transparent; color: var(--ink-2); font: 550 12.5px var(--font);
  padding: 4px 10px; border-radius: 7px; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.seg a:hover, .seg button:hover, .seg label:hover { color: var(--ink); text-decoration: none; }
.seg .on, .seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.seg label { padding: 0; }
.seg label span { padding: 4px 10px; border-radius: 7px; }
.seg input { display: none; }

.toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--ink-2); font-weight: 550; font-size: 12.5px; user-select: none; white-space: nowrap; }
.toggle input[type=checkbox] { appearance: none; width: 28px; height: 16px; border-radius: 99px; background: var(--line-strong); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.toggle input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle input[type=checkbox]:checked { background: var(--accent); }
.toggle input[type=checkbox]:checked::after { transform: translateX(12px); }

/* ── Filter strip ────────────────────────────────────────────────────────── */
.strip {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.strip .grow { flex: 1; }
.strip select, .strip input[type=search] { height: 30px; }
.strip input[type=search] { width: 150px; }
.strip input[type=text] { height: 30px; width: 128px; }
.strip select { padding-left: 9px; padding-right: 24px; background-position: right 8px center; }
.strip .count { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs a {
  display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px;
  color: var(--ink-2); font-weight: 550; white-space: nowrap; font-size: 13px;
}
.tabs a:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.tabs a.on { background: var(--ink); color: var(--surface); }
.tabs a .n { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tabs a.on .n { color: inherit; opacity: .7; }
.tabs .sep { width: 1px; background: var(--line); margin: 4px 6px; }

/* ── Inbox (2 paneles) ───────────────────────────────────────────────────── */
body.fill { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
body.fill .topbar { flex: none; }
body.fill .strip { flex: none; }
.split { display: grid; grid-template-columns: minmax(340px, 420px) 1fr; flex: 1; min-height: 0; }
.queue { border-right: 1px solid var(--line); overflow-y: auto; background: var(--surface); }
.pane { overflow-y: auto; background: var(--page); }
.queue-head { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 8px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.queue-head .grow { flex: 1; }
.queue-head select { height: 28px; font-size: 12.5px; }

.qi {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); cursor: pointer; position: relative; color: inherit;
}
.qi:hover { background: var(--surface-2); text-decoration: none; }
.qi.sel { background: var(--accent-wash); }
.qi.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.qi.gone { opacity: .35; }
.qi .th { width: 72px; height: 56px; border-radius: 6px; object-fit: cover; background: var(--surface-3); display: grid; place-items: center; color: var(--muted); }
.qi .l1 { display: flex; align-items: baseline; gap: 8px; }
.qi .price { font-weight: 650; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.qi .vs { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.qi .l2 { color: var(--ink-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi .l3 { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.qi .side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.score {
  display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px;
  border-radius: 6px; font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.score.hi { background: var(--tier-hi-bg); color: var(--tier-hi-ink); }
.score.mid { background: var(--tier-mid-bg); color: var(--tier-mid-ink); }
.score.lo { background: var(--tier-lo-bg); color: var(--tier-lo-ink); }
.score.big { min-width: 48px; height: 36px; font-size: 18px; border-radius: 9px; }

.chip {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px;
  border-radius: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
}
.chip .icon { width: 12px; height: 12px; }
.chip.new { background: var(--accent-wash); color: var(--accent-ink); border-color: transparent; }
.chip.drop { background: rgba(10, 122, 10, .10); color: var(--good); border-color: transparent; }
.chip.ok { background: rgba(10, 122, 10, .08); color: var(--good); border-color: transparent; }
.chip.warn { background: rgba(196, 54, 54, .10); color: var(--bad); border-color: transparent; }
.chip.st-star { background: var(--st-star-wash); color: var(--st-star); border-color: transparent; }
.chip.st-ok { background: var(--st-ok-wash); color: var(--st-ok); border-color: transparent; }
.chip.st-not { background: var(--st-not-wash); color: var(--ink-2); border-color: transparent; }
.chip.lg { height: 26px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }

.load-more { padding: 14px; text-align: center; }
.empty { padding: 48px 24px; text-align: center; color: var(--muted); }
.empty h2 { color: var(--ink); margin-bottom: 6px; }

/* ── Ficha ───────────────────────────────────────────────────────────────── */
.sheet { max-width: 980px; margin: 0 auto; padding: 20px 24px 64px; }
.sheet-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.sheet-title { font-size: 20px; font-weight: 680; letter-spacing: -.015em; line-height: 1.25; }
.sheet-sub { color: var(--ink-2); margin-top: 3px; }
.sheet-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 12px 0 16px; }
.sheet-actions .grow { flex: 1; }

.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 150px 150px; gap: 6px; border-radius: var(--r); overflow: hidden; margin-bottom: 18px; }
.gallery button { padding: 0; border: 0; cursor: zoom-in; background: var(--surface-3); position: relative; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery button:first-child { grid-row: span 2; }
.gallery .more { position: absolute; inset: 0; background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; font-weight: 650; font-size: 15px; }
.gallery.n1 { grid-template-columns: 1fr; grid-template-rows: 300px; }
.gallery.n2 { grid-template-columns: 2fr 1fr; }
.gallery.n2 button:nth-child(2) { grid-row: span 2; }
.gallery.n3 { grid-template-columns: 2fr 1fr; }
.no-photos { height: 120px; border: 1px dashed var(--line-strong); border-radius: var(--r); display: grid; place-items: center; color: var(--muted); margin-bottom: 18px; text-align: center; font-size: 13px; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 14px; }
.fact { padding: 12px 14px; border-right: 1px solid var(--line); }
.fact:last-child { border-right: 0; }
.fact .k { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.fact .v { font-size: 19px; font-weight: 680; font-variant-numeric: tabular-nums; margin-top: 2px; letter-spacing: -.01em; }
.fact .s { font-size: 12px; color: var(--ink-2); margin-top: 1px; }

.specs { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 2px 2px 14px; color: var(--ink-2); font-size: 13px; }
.specs span { display: inline-flex; align-items: center; gap: 6px; }
.specs b { color: var(--ink); font-weight: 600; }

.signals { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px; min-width: 0; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.card-h .r { font-size: 12px; color: var(--muted); }
.card p { margin: 0; }

.note-box textarea { min-height: 64px; background: var(--surface-2); border-color: transparent; }
.note-box textarea:focus { background: var(--surface); }
.note-status { font-size: 12px; color: var(--muted); height: 16px; margin-top: 4px; }

.sb-total { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sb-base { font-size: 12.5px; color: var(--ink-2); }
.sb-row { display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr 44px; gap: 10px; align-items: center; padding: 4px 0; font-size: 12.5px; }
.sb-row .lab { color: var(--ink-2); min-width: 0; }
.sb-row .lab small { display: block; color: var(--muted); font-size: 11px; }
.sb-track { position: relative; height: 12px; }
.sb-track::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-strong); }
.sb-bar { position: absolute; top: 2px; height: 8px; }
.sb-bar.pos { left: calc(50% + 1px); background: var(--series); border-radius: 0 3px 3px 0; }
.sb-bar.neg { right: calc(50% + 1px); background: var(--neg); border-radius: 3px 0 0 3px; }
.sb-row .d { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.sb-warn { background: rgba(196,54,54,.08); color: var(--bad); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 8px; }
.sb-foot { font-size: 12px; color: var(--muted); margin-top: 8px; }

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--muted); font: 11px var(--font); font-variant-numeric: tabular-nums; }
.chart .end-label { fill: var(--ink); font: 600 12px var(--font); font-variant-numeric: tabular-nums; }
.chart .dot-faint { fill: var(--faint-dot); }
.chart .dot-this { fill: var(--series); stroke: var(--surface); stroke-width: 2.5; }
.chart .ref { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 0; opacity: .6; }
.chart .series-line { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .series-dot { fill: var(--series); stroke: var(--surface); stroke-width: 2; }
.chart .series-fill { fill: var(--series); }
.chart .hit { fill: transparent; }
.chart [data-tip] { cursor: default; }
.chart [data-tip]:hover .series-fill { opacity: .8; }
.comp-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); margin-top: 4px; flex-wrap: wrap; }
.comp-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }

.amen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 14px; font-size: 13px; }
.amen span { display: flex; align-items: center; gap: 7px; color: var(--ink-2); }
.amen span.yes { color: var(--ink); }
.amen span.yes .icon { color: var(--good); }
.amen span.no { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }

.desc { white-space: pre-wrap; color: var(--ink-2); font-size: 13px; line-height: 1.6; max-height: 9.6em; overflow: hidden; position: relative; }
.desc.open { max-height: none; }
.desc:not(.open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3em; background: linear-gradient(transparent, var(--surface)); }

.minimap { height: 220px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }

details.edit summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
details.edit summary::-webkit-details-marker { display: none; }
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 12px; margin-top: 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.form-grid input { width: 100%; }
.form-row { display: flex; gap: 16px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.form-row label { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-2); }

.banner { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; background: var(--accent-wash); color: var(--accent-ink); }

.sx { display: grid; grid-template-columns: minmax(230px, 0.8fr) 1.2fr; gap: 22px; }
.sx-total { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.meter { margin-bottom: 10px; }
.meter-h { display: flex; gap: 8px; align-items: baseline; font-size: 13px; margin-bottom: 4px; }
.meter-h span:first-child { font-weight: 600; }
.meter-h b { margin-left: auto; font-variant-numeric: tabular-nums; }
.meter-h .muted { font-size: 11.5px; }
.meter-track { position: relative; height: 8px; background: var(--surface-3); border-radius: 4px; }
.meter-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--series); border-radius: 4px; }
.meter-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink-2); opacity: .5; }
.sx-group { border-top: 1px solid var(--line); padding: 8px 0; }
.sx-group:first-child { border-top: 0; padding-top: 0; }
.sx-group summary { cursor: pointer; display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; padding: 2px 0 6px; list-style: none; }
.sx-group summary::-webkit-details-marker { display: none; }
.sx-group summary::before { content: "▸"; color: var(--muted); margin-right: 6px; transition: transform .15s; display: inline-block; }
.sx-group[open] summary::before { transform: rotate(90deg); }
.sx-group summary span { flex: 1; }
.sx-ctx { font-size: 12.5px; color: var(--ink-2); padding: 2px 0; }
.sb-warn { display: flex; gap: 6px; align-items: center; }
.sb-warn.soft { background: var(--surface-2); color: var(--ink-2); }
.drawer .sx { grid-template-columns: 1fr; }

/* ── Explorar ────────────────────────────────────────────────────────────── */
.explore { display: grid; grid-template-columns: minmax(360px, 440px) 1fr; flex: 1; min-height: 0; position: relative; }
.explore.v-mapa { grid-template-columns: 1fr; }
.explore.v-mapa .cards { display: none; }
.explore.v-lista { grid-template-columns: 1fr; }
.explore.v-lista .map-wrap { display: none; }
.explore.v-lista .cards-inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 14px 16px; }
.cards { overflow-y: auto; border-right: 1px solid var(--line); background: var(--page); }
.cards .queue-head { background: var(--page); }
.cards-inner { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.cards-meta { padding: 10px 14px 0; color: var(--muted); font-size: 12.5px; }

.pc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; cursor: pointer; display: grid; grid-template-columns: 132px 1fr; color: inherit; transition: border-color .12s, box-shadow .12s; }
.pc:hover, .pc.hl { border-color: var(--line-strong); box-shadow: var(--shadow); text-decoration: none; }
.pc.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pc .ph { position: relative; background: var(--surface-3); min-height: 112px; }
.pc .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc .ph .score { position: absolute; top: 7px; left: 7px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.pc .ph .noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.pc .bd { padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc .price { font-weight: 680; font-size: 15.5px; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 8px; }
.pc .l2 { color: var(--ink-2); font-size: 12.5px; }
.pc .l3 { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc .chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.explore.v-lista .pc { grid-template-columns: 1fr; }
.explore.v-lista .pc .ph { min-height: 170px; }

.map-wrap { position: relative; }
#map { position: absolute; inset: 0; background: var(--surface-2); }
.map-legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 500; background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; box-shadow: var(--shadow);
  font-size: 12px; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px;
}
.map-legend .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; border: 1.5px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
.map-tools { position: absolute; right: 12px; top: 12px; z-index: 500; display: flex; gap: 6px; }
.map-tools .seg { background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); }
.map-tools .btn { background: var(--surface); box-shadow: var(--shadow); }
.map-tools .btn:hover { background: var(--surface-2); }
.btn.loading { pointer-events: none; opacity: .7; }
.btn.loading .icon { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.loading .icon { animation: none; } }

.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100%); z-index: 600;
  background: var(--page); box-shadow: var(--shadow-lg); overflow-y: auto;
  transform: translateX(100%); transition: transform .2s ease;
}
.drawer.open { transform: none; }
.drawer .sheet { padding: 16px 20px 48px; }
.drawer-close { position: sticky; top: 0; z-index: 3; display: flex; justify-content: flex-end; gap: 6px; padding: 10px 12px 0; pointer-events: none; }
.drawer-close > * { pointer-events: auto; background: var(--surface); box-shadow: var(--shadow); }
.drawer .gallery { grid-template-rows: 120px 120px; }
.drawer .facts { grid-template-columns: repeat(2, 1fr); }
.drawer .fact:nth-child(2) { border-right: 0; }
.drawer .fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.drawer .grid2 { grid-template-columns: 1fr; gap: 0; }
.drawer .amen { grid-template-columns: repeat(2, 1fr); }

/* Leaflet en tema */
.leaflet-container { font: 12px var(--font); background: var(--surface-2); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--surface) 80%, transparent) !important; color: var(--muted) !important; }
.leaflet-control-attribution a { color: var(--ink-2) !important; }
.leaflet-bar a { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.leaflet-tooltip { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 6px; font-weight: 600; }
.leaflet-tooltip-top::before { border-top-color: var(--surface); }

/* ── Mercado / Ajustes ───────────────────────────────────────────────────── */
.page { max-width: 1160px; margin: 0 auto; padding: 24px 24px 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head p { margin: 4px 0 0; color: var(--ink-2); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.kpi .k { font-size: 12px; color: var(--muted); font-weight: 600; }
.kpi .v { font-size: 26px; font-weight: 680; letter-spacing: -.02em; margin-top: 2px; }
.kpi .s { font-size: 12px; color: var(--ink-2); }
.kpi a.v { color: var(--ink); display: block; }

.bb { width: 100%; border-collapse: collapse; font-size: 13px; }
.bb th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bb td { padding: 6px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb tr:last-child td { border-bottom: 0; }
.bb tr:hover td { background: var(--surface-2); }
.bb .r { text-align: right; }
.bb .barcell { width: 40%; min-width: 160px; }
.bar-track { position: relative; height: 14px; }
.bar-fill { position: absolute; left: 0; top: 2px; height: 10px; background: var(--series); border-radius: 0 4px 4px 0; }
.bar-ref { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--ink-2); opacity: .55; }
.bb a { color: var(--ink); font-weight: 550; }

.weights { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.w-row { display: grid; grid-template-columns: 1fr 96px; gap: 4px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.w-row:last-child { border-bottom: 0; }
.w-row label { font-weight: 550; }
.w-row small { grid-column: 1; color: var(--muted); font-size: 12px; }
.w-row input { width: 96px; text-align: right; font-variant-numeric: tabular-nums; grid-row: 1 / span 2; grid-column: 2; }
.w-row.changed input { border-color: var(--st-star); background: var(--st-star-wash); }
.w-row .def { font-size: 11.5px; color: var(--muted); }
.sticky-actions { position: sticky; bottom: 0; background: color-mix(in srgb, var(--page) 92%, transparent); backdrop-filter: blur(6px); padding: 12px 0; display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 8px; }

/* ── Tooltip, toast, lightbox, ayuda ─────────────────────────────────────── */
#tip { position: fixed; z-index: 1000; pointer-events: none; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 550; padding: 5px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; transition: opacity .08s; font-variant-numeric: tabular-nums; }
#tip.on { opacity: 1; }
#toast { position: fixed; z-index: 1000; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; transition: all .18s; background: var(--ink); color: var(--surface); padding: 9px 10px 9px 14px; border-radius: 10px; display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow-lg); font-weight: 550; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast button { background: transparent; border: 1px solid rgba(255,255,255,.25); color: inherit; border-radius: 6px; padding: 3px 8px; font: 600 12px var(--font); cursor: pointer; }
:root[data-theme="dark"] #toast button { border-color: rgba(0,0,0,.25); }

.lightbox { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; }
.lightbox.on { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 6px; }
.lightbox .lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 22px; }
.lightbox .prev { left: 20px; } .lightbox .next { right: 20px; }
.lightbox .close { top: 30px; right: 20px; transform: none; }
.lightbox .cnt { position: absolute; bottom: 18px; color: #ddd; font-size: 13px; }

dialog.help { border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); width: min(440px, 92vw); }
dialog.help::backdrop { background: rgba(0,0,0,.35); }
.help dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 14px 0 0; font-size: 13px; }
.help dt { text-align: right; }
.help dd { margin: 0; color: var(--ink-2); }

.htmx-request.dim, .htmx-request .dim { opacity: .5; transition: opacity .15s; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
.back-mobile { display: none !important; }
@media (max-width: 1100px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(2) { border-right: 0; }
  .fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .grid2 { grid-template-columns: 1fr; gap: 0; }
  .sx { grid-template-columns: 1fr; }
  .run-info { display: none; }
}
@media (max-width: 860px) {
  .topbar { gap: 8px; padding: 0 10px; }
  .brand span { display: none; }
  .nav a { padding: 6px 8px; }
  .nav a .lbl { display: none; }
  .split { grid-template-columns: 1fr; }
  .split .pane { position: fixed; inset: var(--top) 0 0 0; z-index: 40; transform: translateX(100%); transition: transform .2s; }
  .split.show-pane .pane { transform: none; }
  .explore { grid-template-columns: 1fr; }
  .explore .map-wrap { display: none; }
  .explore.v-mapa .map-wrap { display: block; }
  .sheet { padding: 14px 14px 64px; }
  .gallery { grid-template-rows: 110px 110px; }
  .amen { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .strip input[type=search] { width: 140px; }
  .back-mobile { display: inline-flex !important; margin-bottom: 8px; }
  .strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .strip > *, .strip form > * { flex: none; }
  #filters.strip { flex: none; }
  .strip .grow { display: none; }
  .sheet-actions kbd, .btn kbd { display: none; }
}
@media (hover: none) { kbd { display: none; } }

/* ── Crédito ── */
.credit-card .facts { margin-bottom: 8px; }
.credit-card .sb-warn { align-items: flex-start; margin: 0; }
.credit-card .sb-warn .icon { flex: none; margin-top: 2px; }
.risk-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.risk-list li { display: flex; gap: 6px; align-items: flex-start; }
.risk-list .icon { color: var(--bad); flex: none; margin-top: 3px; }
.risk-list b { color: var(--ink); }
#credito .w-row { grid-template-columns: 1fr 120px; }

/* ── +Hogares, entorno y score hogar-bna ── */
.warnc { color: var(--warnc); }
.score.h.hi { background: var(--th-hi-bg); color: var(--th-hi-ink); }
.score.h.mid { background: var(--th-mid-bg); color: var(--th-mid-ink); }
.score.h.lo { background: var(--tier-lo-bg); color: var(--tier-lo-ink); }
.pc .ph .score.h { left: auto; right: 7px; }
.chip.bna { background: var(--bna-wash); color: var(--bna); border-color: transparent; }
.sheet-scores { display: flex; gap: 12px; flex: none; text-align: center; }
.sheet-scores .muted { font-size: 11.5px; margin-top: 3px; }
.bna-card h3 { display: flex; align-items: center; gap: 6px; }
.bna-card h3 .icon { color: var(--bna); }
.bna-card .facts { grid-template-columns: 1fr 1fr 1.6fr; margin-bottom: 10px; }
.entorno .ent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 22px; }
.entorno h4 { display: flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 6px; }
.ent-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.ent-row span { color: var(--ink-2); min-width: 0; }
.ent-row small { color: var(--muted); display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-row b { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 620; }
.ent-row.sub { border-bottom: 0; font-size: 12px; }
.drawer .entorno .ent-grid { grid-template-columns: 1fr; }

details.pop { position: relative; }
details.pop > summary { list-style: none; cursor: pointer; height: 30px; }
details.pop > summary::-webkit-details-marker { display: none; }
details.pop[data-active] > summary { border-color: var(--accent); color: var(--accent-ink); }
.pop-body {
  position: absolute; z-index: 900; top: calc(100% + 6px); right: 0; width: 300px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 12px; display: grid; gap: 10px; font-size: 13px;
}
.pop-body label { display: grid; gap: 4px; color: var(--ink-2); font-weight: 600; }
.pop-body label.toggle { display: flex; font-weight: 500; }
.pop-body select { width: 100%; height: 30px; }
.pop-body small, .pop-body p { color: var(--muted); font-weight: 400; font-size: 11.5px; margin: 0; }

.map-layers {
  position: absolute; right: 12px; top: 54px; z-index: 500; background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; box-shadow: var(--shadow); font-size: 12.5px; color: var(--ink-2); max-width: 240px;
}
.map-layers > summary { list-style: none; cursor: pointer; padding: 6px 10px; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.map-layers > summary::-webkit-details-marker { display: none; }
.map-layers .ly { padding: 2px 10px 10px; display: grid; gap: 3px; }
.map-layers .ly h5 { margin: 6px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.map-layers label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.map-layers i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; flex: none; }
.map-layers i.dot { width: 9px; height: 9px; border-radius: 50%; }
.map-layers i.area { width: 12px; height: 10px; border-radius: 2px; }
.map-layers i.heat { width: 14px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, #ffd34d, #f07c28, #c81e1e); }

@media (max-width: 1100px) {
  .bna-card .facts { grid-template-columns: 1fr 1fr; }
  .bna-card .fact.wide { grid-column: 1 / -1; border-right: 0; }
  .entorno .ent-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .pop-body { position: fixed; top: calc(var(--top) + 52px); left: 12px; right: 12px; width: auto; }
}
.sup-legend { gap: 6px !important; }
.sup-bar { display: inline-block; width: 110px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.sup-read { max-width: 460px; display: block !important; line-height: 1.35; }
.sup-read b { color: var(--ink); }

/* ── Score principal ── */
.sheet-scores-alt { display: grid; gap: 5px; font-size: 11.5px; color: var(--muted); text-align: left; align-content: start; }
.sheet-scores-alt > div { display: flex; align-items: center; gap: 5px; }
.score.sm { min-width: 26px; height: 20px; font-size: 11.5px; padding: 0 5px; }
.sx-group-static .sb-row { grid-template-columns: 1fr auto; }
.sx-group-static .sb-row.total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
details.score-card > summary { list-style: none; cursor: pointer; margin-bottom: 0; }
details.score-card > summary::-webkit-details-marker { display: none; }
details.score-card[open] > summary { margin-bottom: 10px; }

/* ── Entrada y revisor ── */
.who { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.who a { color: var(--muted); }
body.login-page { min-height: 100vh; display: grid; place-items: center; background: var(--page); padding: 16px; }
.login-box { width: min(320px, 100%); display: grid; gap: 14px; padding: 22px; }
.login-box .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.login-box label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.login-box input { height: 36px; font-size: 15px; }
.login-box p { margin: 0; font-size: 12.5px; }