:root{
  --bg:#f4f5f7; --panel:#fff; --ink:#16181d; --muted:#6b7280; --line:#e3e6eb;
  --brand:#0f3d5c; --brand-2:#1471a8; --accent:#f59e0b;
  --ok:#15803d; --okbg:#e7f6ec; --warn:#b45309; --warnbg:#fef3e2;
  --bad:#b91c1c; --badbg:#fdeaea; --info:#1d4ed8; --infobg:#e8effd;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:14px}
#app{display:flex;height:100vh;overflow:hidden}
/* ---- sidebar ---- */
aside{width:208px;background:var(--brand);color:#dbe7f0;display:flex;flex-direction:column;flex:none}
.brand{padding:14px 16px;font-weight:700;font-size:15px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand small{display:block;font-weight:400;font-size:11px;opacity:.7}
nav{padding:8px;display:flex;flex-direction:column;gap:2px}
nav button{background:none;border:0;color:inherit;text-align:left;padding:8px 10px;border-radius:8px;font-size:13.5px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
nav button:hover{background:rgba(255,255,255,.1)}
nav button.on{background:rgba(255,255,255,.16);font-weight:600}
nav button kbd{background:rgba(255,255,255,.15);border-radius:4px;padding:1px 6px;font-size:11px;font-family:var(--mono)}
.sidefoot{margin-top:auto;padding:12px 14px;font-size:11.5px;border-top:1px solid rgba(255,255,255,.12);line-height:1.7}
.pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:600}
.pill.mock{background:#fff3d6;color:#8a5a00}.pill.api,.pill.replica{background:#d9ecff;color:#0b4fa0}
/* ---- main ---- */
main{flex:1;display:flex;flex-direction:column;min-width:0}
header.top{background:var(--panel);border-bottom:1px solid var(--line);padding:10px 18px;display:flex;gap:12px;align-items:center}
.searchbox{flex:1;max-width:560px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:#fafbfc;cursor:text;color:var(--muted)}
.searchbox b{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.searchbox kbd{margin-left:auto;font-family:var(--mono);font-size:11px;background:#eef1f4;border:1px solid var(--line);border-radius:4px;padding:1px 6px;flex:none}
.health{margin-left:auto;font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block}
.dot.bad{background:var(--bad)}
/* tabs */
.tabs{background:var(--panel);border-bottom:1px solid var(--line);display:flex;gap:4px;padding:6px 12px 0;overflow-x:auto}
.tabs button{border:1px solid var(--line);border-bottom:0;background:#f1f3f5;border-radius:8px 8px 0 0;padding:7px 10px;font-size:12.5px;cursor:pointer;white-space:nowrap;color:var(--muted)}
.tabs button.on{background:#fff;color:var(--ink);font-weight:600}
.tabs button .x{margin-left:8px;opacity:.5}.tabs button .x:hover{opacity:1;color:var(--bad)}
#view{flex:1;overflow:auto;padding:18px;max-width:1200px;width:100%;margin:0 auto}
h2{margin:0 0 12px;font-size:18px}h3{margin:22px 0 10px;font-size:14px;color:var(--brand)}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:8px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}
.card .v{font-size:24px;font-weight:700;font-family:var(--mono)}
.card .l{font-size:12px;color:var(--muted);margin-top:2px}
.card .s{font-size:12px;color:var(--muted);font-family:var(--mono)}
/* tables */
.toolbar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;align-items:center}
.toolbar input[type=search]{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;min-width:220px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:4px 12px;font-size:12px;cursor:pointer}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:13px}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:#f7f9fb;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);position:sticky;top:0}
tbody tr{cursor:pointer}tbody tr:hover{background:#f2f7fc}tbody tr.focus{background:#e3effa;outline:2px solid var(--brand-2);outline-offset:-2px}
td.num,th.num{text-align:right;font-family:var(--mono)}
td.mono{font-family:var(--mono);font-size:12px}
tfoot td{font-weight:700;background:#f7f9fb;font-family:var(--mono)}
.badge{display:inline-block;padding:1px 9px;border-radius:99px;font-size:11.5px;font-weight:600}
.b-vigente,.b-cobrado,.b-abierto{background:var(--okbg);color:var(--ok)}
.b-pendiente,.b-en_tramitacion,.b-reabierto{background:var(--warnbg);color:var(--warn)}
.b-devuelto{background:#fff3d6;color:#8a5a00}
.b-anulada,.b-cancelada,.b-vencida,.b-anulado,.b-incobrable,.b-cerrado{background:#eef1f4;color:var(--muted)}
.b-suspendida{background:var(--infobg);color:var(--info)}
.attr{display:inline-block;background:#eef4f9;border:1px solid #d7e5f0;border-radius:6px;padding:1px 7px;font-size:11.5px;margin:1px 3px 1px 0;font-family:var(--mono)}
.muted{color:var(--muted)}.small{font-size:12px}
.ficha{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.ficha .head{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:6px}
.ficha .head h2{margin:0}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 18px;margin:10px 0;font-size:13px}
.kv b{color:var(--muted);font-weight:500;display:block;font-size:11px;text-transform:uppercase;letter-spacing:.03em}
/* palette */
#pal{position:fixed;inset:0;background:rgba(10,20,30,.45);display:none;align-items:flex-start;justify-content:center;padding-top:12vh;z-index:50}
#pal.open{display:flex}
.palbox{background:#fff;border-radius:12px;width:min(620px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
.palbox input{width:100%;border:0;border-bottom:1px solid var(--line);padding:14px 16px;font-size:15px;outline:none}
.palres{max-height:320px;overflow:auto}
.palres .r{padding:9px 16px;cursor:pointer;display:flex;gap:10px;align-items:center;font-size:13.5px}
.palres .r.focus{background:var(--brand);color:#fff}
.palres .r .t{margin-left:auto;font-size:11px;opacity:.7;font-family:var(--mono)}
#toast{position:fixed;bottom:18px;right:18px;display:flex;flex-direction:column;gap:8px;z-index:60}
.toast{background:#1f2937;color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.empty{padding:30px;text-align:center;color:var(--muted)}
.help{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;max-width:560px}
.help kbd{font-family:var(--mono);background:#eef1f4;border:1px solid var(--line);border-radius:4px;padding:1px 7px;font-size:12px;white-space:nowrap}