:root { --fondo:#f6f7f9; --panel:#fff; --texto:#1b1f24; --tenue:#667085; --borde:#e4e7ec; --acento:#2563eb;
        --critica:#b42318; --alta:#c4320a; --media:#b54708; --baja:#475467; --ok:#067647; }
@media (prefers-color-scheme: dark) {
  :root { --fondo:#0f1115; --panel:#171a21; --texto:#e6e8ec; --tenue:#98a2b3; --borde:#2a2f3a; --acento:#60a5fa;
          --critica:#f97066; --alta:#fb6514; --media:#fdb022; --baja:#98a2b3; --ok:#47cd89; }
}
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--fondo); color:var(--texto); }
header { display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--borde); position:sticky; top:0; }
nav { display:flex; gap:4px; flex-wrap:wrap; flex:1; }
nav button, #salir { border:1px solid transparent; background:none; color:var(--texto); padding:6px 10px; border-radius:6px; cursor:pointer; font:inherit; }
nav button.activo { background:var(--fondo); border-color:var(--borde); font-weight:600; }
#usuario { color:var(--tenue); font-size:12px; }
main { padding:16px; max-width:1400px; margin:0 auto; }
h2 { font-size:16px; margin:20px 0 8px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px; }
.kpi { background:var(--panel); border:1px solid var(--borde); border-radius:8px; padding:12px; }
.kpi .valor { font-size:24px; font-weight:650; font-variant-numeric:tabular-nums; }
.kpi .etiqueta { color:var(--tenue); font-size:12px; }
.tabla { overflow-x:auto; background:var(--panel); border:1px solid var(--borde); border-radius:8px; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--borde); vertical-align:top; }
th { color:var(--tenue); font-weight:500; font-size:12px; white-space:nowrap; }
tr:last-child td { border-bottom:none; }
tr.clic { cursor:pointer; } tr.clic:hover td { background:var(--fondo); }
td.num { font-variant-numeric:tabular-nums; white-space:nowrap; }
.sev { font-weight:600; white-space:nowrap; }
.sev-5 { color:var(--critica); } .sev-4 { color:var(--alta); } .sev-3 { color:var(--media); } .sev-2, .sev-1 { color:var(--baja); }
.chip { display:inline-block; border:1px solid var(--borde); border-radius:999px; padding:1px 8px; margin:2px 4px 2px 0; font-size:12px; word-break:break-all; }
.ok { color:var(--ok); } .tenue { color:var(--tenue); } .err { color:var(--critica); }
.resumen-ia { color:var(--tenue); font-size:12px; max-width:520px; }
.filtros { margin:8px 0; display:flex; gap:8px; align-items:center; }
select, .volver { font:inherit; padding:4px 8px; border:1px solid var(--borde); border-radius:6px; background:var(--panel); color:var(--texto); }
.volver { cursor:pointer; }