:root{--bg:#f4f6f9;--pan:#fff;--ink:#1c2430;--mut:#6b7686;--lin:#dde3ea;--pri:#0b5cab;--pri2:#084a8a;--ok:#1b7f4b;--err:#b3261e;--side:#14202e;--sidei:#c9d4e2;--r:6px}
@media (prefers-color-scheme:dark){:root{--bg:#10161e;--pan:#18212c;--ink:#e6ecf3;--mut:#93a0b2;--lin:#2a3644;--pri:#4b9bff;--pri2:#2f7fe0;--side:#0b1118;--sidei:#aebbd0}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--pri);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:16px;margin:0;flex:1}h2{font-size:18px;margin:0 0 6px}h3{font-size:14px;margin:12px 0 6px}
.mut{color:var(--mut)}small{color:var(--mut);font-weight:400}
.app{display:flex;min-height:100vh}
.side{width:188px;background:var(--side);color:var(--sidei);display:flex;flex-direction:column;padding:10px 0;flex-shrink:0}
.marca{display:flex;gap:8px;align-items:center;padding:4px 14px 12px;color:#fff;font-weight:700;line-height:1.1}
.marca small{color:var(--sidei);font-weight:400;font-size:10px;letter-spacing:.06em}
.logo{width:28px;height:28px;border-radius:6px;background:var(--pri);display:grid;place-items:center;font-weight:800}
.side nav{flex:1}.side nav a{display:block;padding:7px 14px;color:var(--sidei);border-left:3px solid transparent}
.side nav a:hover{background:rgba(255,255,255,.06);text-decoration:none}.side nav a.act{background:rgba(255,255,255,.1);color:#fff;border-left-color:var(--pri)}
.salir{padding:8px 14px}
.main{flex:1;min-width:0}
.top{display:flex;align-items:center;gap:10px;background:var(--pan);border-bottom:1px solid var(--lin);padding:8px 14px;position:sticky;top:0;z-index:5}
.ctx{color:var(--mut);font-size:12px}
.cuerpo{padding:12px 14px;max-width:1200px}
.barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}.barra h3{margin:0;flex:1}.barra p{margin:0;flex:1}
.t{width:100%;border-collapse:collapse;background:var(--pan);border:1px solid var(--lin);border-radius:var(--r);font-size:12.5px}
.t th{background:rgba(127,140,155,.12);text-align:left;font-weight:600;padding:5px 8px;border-bottom:1px solid var(--lin);white-space:nowrap}
.t td{padding:4px 8px;border-bottom:1px solid var(--lin);vertical-align:middle}
.t tr:hover td{background:rgba(11,92,171,.05)}.t .d{text-align:right;font-variant-numeric:tabular-nums}.t tr.hist td{color:var(--mut)}
.btn{display:inline-block;background:var(--pri);color:#fff;border:0;border-radius:var(--r);padding:7px 12px;font:inherit;cursor:pointer}
.btn:hover{background:var(--pri2);text-decoration:none}.btn.sm{padding:4px 10px;font-size:12px}.btn.xs{padding:2px 7px;font-size:11.5px}
.btn.sec{background:transparent;color:var(--pri);border:1px solid var(--pri)}.btn.danger{background:var(--err)}.btn.blq{display:block;width:100%;margin:6px 0;text-align:left}
input,select{font:inherit;color:var(--ink);background:var(--pan);border:1px solid var(--lin);border-radius:var(--r);padding:5px 7px;max-width:100%}
input:focus,select:focus,.btn:focus-visible{outline:2px solid var(--pri);outline-offset:1px}
label{display:block;margin:7px 0;font-size:12px;color:var(--mut)}label input,label select{display:block;width:100%;margin-top:2px;color:var(--ink)}
label.chk{display:flex;gap:6px;align-items:center;color:var(--ink)}label.chk input{width:auto;margin:0}
fieldset{border:1px solid var(--lin);border-radius:var(--r);margin:8px 0}legend{color:var(--mut);font-size:11.5px;padding:0 4px}
.en-linea{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap;margin:0}.en-linea input,.en-linea select{display:inline-block;width:auto;margin:0}
.buscar{min-width:220px}
.aviso{padding:7px 10px;border-radius:var(--r);margin:8px 14px;border:1px solid;word-break:break-word}
.aviso.ok{background:rgba(27,127,75,.1);border-color:var(--ok);color:var(--ok)}.aviso.err{background:rgba(179,38,30,.1);border-color:var(--err);color:var(--err)}
.chip{padding:1px 7px;border-radius:10px;font-size:11px;background:rgba(127,140,155,.2)}.chip.activa{background:rgba(27,127,75,.18);color:var(--ok)}.chip.prueba{background:rgba(11,92,171,.18)}
.chip.suspendida,.chip.cancelada,.chip.solo_lectura{background:rgba(179,38,30,.15);color:var(--err)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:8px 0}
.kpi{background:var(--pan);border:1px solid var(--lin);border-radius:var(--r);padding:10px}.kpi b{display:block;font-size:20px}.kpi span{color:var(--mut);font-size:12px}
.caja{background:var(--pan);border:1px solid var(--lin);border-radius:var(--r);padding:8px 12px;margin:10px 0}
.tarjeta-u{display:block;background:var(--pan);border:1px solid var(--lin);border-radius:var(--r);padding:12px;margin:8px 0;color:var(--ink)}.tarjeta-u b{font-size:18px;display:block}.tarjeta-u span{color:var(--mut)}
dialog{border:1px solid var(--lin);border-radius:8px;background:var(--pan);color:var(--ink);padding:14px 16px;width:min(420px,94vw);max-height:90vh;overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.45)}.acc{display:flex;gap:8px;margin-top:10px}
body.centrado{display:grid;place-items:center;min-height:100vh;padding:16px}.tarjeta{background:var(--pan);border:1px solid var(--lin);border-radius:8px;padding:20px;width:min(380px,100%)}
.tarjeta .btn{margin-top:8px}.codigo{font:600 15px ui-monospace,Consolas,monospace;letter-spacing:.08em;word-break:break-all;background:rgba(127,140,155,.15);padding:8px;border-radius:var(--r)}
.solo-movil{display:none}
@media (max-width:760px){
  .solo-movil{display:inline-block}.side{position:fixed;inset:0 auto 0 0;z-index:20;transform:translateX(-100%);transition:transform .15s}.side.abierto{transform:none}
  .cuerpo{padding:10px 12px}.t{display:block;overflow-x:auto}.buscar{min-width:0;flex:1}
}
body.exp-residente .side{background:#0d3b66}body.exp-residente{font-size:15px}body.exp-residente .btn{padding:10px 14px}
@media print{.side,.top,.btn{display:none}}