/* web-audit — consola de auditoria.
   Disciplina de color: el color saturado es SOLO severidad. La interfaz vive en neutros frios.
   Tipografia del sistema (la herramienta debe funcionar tras la VPN, sin internet) con cifras
   tabulares en todo lo que se compara en columna. */
:root{
  --ground:#F6F8FA; --surface:#fff; --surface2:#EDF1F5; --ink:#101822; --muted:#5A6875; --line:#D9E0E7;
  --crit:#C02B1D; --critbg:#FBE9E7; --warn:#8A6A00; --warnbg:#F7F0DC; --ok:#0E7A4B; --okbg:#E4F4EC;
  --unknown:#6B7684; --unknownbg:#E9ECEF; --info:#17557F; --infobg:#E7EFF6; --action:#17557F;
  --code:#161D26; --codeink:#E3EAF2; --aside:212px;
}
@media(prefers-color-scheme:dark){:root{
  --ground:#0D1219; --surface:#161D26; --surface2:#1F2833; --ink:#E6ECF3; --muted:#8FA0B0; --line:#28323D;
  --crit:#F97066; --critbg:#3A1A18; --warn:#E0B457; --warnbg:#33290F; --ok:#5FC98F; --okbg:#10301F;
  --unknown:#93A1B1; --unknownbg:#242D38; --info:#6CB4E4; --infobg:#16283C; --action:#6CB4E4;
  --code:#080C11; --codeink:#DCE5EF;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,sans-serif;font-variant-numeric:tabular-nums}
a{color:var(--action)}
:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:4px}
code{font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface2);padding:1px 5px;border-radius:4px}

/* ---- estructura ---- */
aside{position:fixed;top:0;left:0;bottom:0;width:var(--aside);background:var(--surface);
  border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:14px}
main{margin-left:var(--aside);padding:26px 34px 80px;max-width:none;min-width:0}
.brand{font-weight:600;font-size:13px;letter-spacing:.02em}
.brand-sub{font-size:12px;color:var(--muted);margin-top:-11px}
aside nav{display:flex;flex-direction:column;gap:1px}
aside nav.sec{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
aside nav.sec a{color:var(--muted);font-size:13.5px}
aside nav.sec a.on{color:var(--ink)}
aside nav a{display:block;padding:7px 10px;border-radius:7px;color:var(--ink);text-decoration:none;font-size:14px}
aside nav a:hover{background:var(--surface2)}
aside nav a.on{background:var(--surface2);font-weight:600}
.side-box{border-top:1px solid var(--line);padding-top:10px;font-size:12.5px;color:var(--muted)}
.side-box b{color:var(--ink)}
.asfoot{font-size:11.5px;color:var(--muted);line-height:1.5}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumbs .sep{opacity:.5}.crumbs a{text-decoration:none}
h1{font-size:26px;margin:0 0 4px;letter-spacing:-.01em}
h2{font-size:20px;margin:30px 0 12px}
.muted{color:var(--muted)}
.metaline{color:var(--muted);font-size:13.5px;margin:2px 0 18px}
.sub2{color:var(--muted);font-size:12.5px;margin-top:2px}
.nota{color:var(--muted);font-size:12.5px;margin-top:10px}
.lab{display:block;color:var(--muted);font-size:12.5px;margin-bottom:5px}
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.acciones{display:flex;gap:8px;align-items:center}
.homelink{font-size:.75em;color:var(--action);text-decoration:none;margin-left:2px;vertical-align:middle}.homelink:hover{text-decoration:underline}
.inline{display:inline}

/* ---- situacion: la frase que se lee primero ---- */
.situacion{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--unknown);
  border-radius:11px;padding:18px 20px;margin:16px 0 8px}
.situacion.crit{border-left-color:var(--crit)}
.situacion.ok{border-left-color:var(--ok)}
.situacion .frase{font-size:22px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em}
.situacion .sub{margin:2px 0;color:var(--muted);font-size:13.5px}
.situacion .acciones{margin-top:14px}

/* ---- tira de estado: la lista se lee como un grafico ---- */
.bar{display:inline-flex;height:9px;min-width:26px;width:60%;border-radius:5px;overflow:hidden;
  background:var(--surface2);vertical-align:middle}
.bar i{display:block;height:100%;min-width:3px}   /* un critico entre muchos avisos tiene que verse */
.bar .crit{background:var(--crit)}.bar .warn{background:var(--warn)}
.bar .info{background:var(--info);opacity:.45}.bar .skip{background:var(--unknown);opacity:.4}
.bar.empty{width:26px;background:repeating-linear-gradient(90deg,var(--surface2) 0 3px,transparent 3px 6px)}
.barcell{min-width:130px}

/* ---- medidor de cumplimiento: tres tramos, lo no comprobado NUNCA en verde ---- */
.meter{display:inline-flex;width:110px;height:9px;border-radius:5px;overflow:hidden;background:var(--surface2);vertical-align:middle}
.meter i{display:block;height:100%}
.meter .ok{background:var(--ok)}.meter .no{background:var(--crit)}.meter .nc{background:var(--unknown);opacity:.45}
.meter-txt{margin-left:9px;font-size:12.5px;color:var(--muted)}
.metercell{white-space:nowrap}
.meterrow{margin:6px 0 16px}

/* ---- tablas ---- */
.tblwrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:11px}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-weight:600;font-size:12.5px;color:var(--muted);background:var(--surface2)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;white-space:nowrap}
td.crit-n{color:var(--crit);font-weight:600}
tbody tr a.rowlink{color:var(--ink);text-decoration:none;font-weight:600}
tbody tr a.rowlink:hover{text-decoration:underline}
tbody tr:hover td{background:var(--surface2)}
.rowlink.big{font-size:18px}
.tag{font-size:11.5px;color:var(--muted);background:var(--surface2);padding:2px 7px;border-radius:999px;margin-left:6px}

/* ---- servidores ---- */
.srvcard{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--unknown);
  border-radius:11px;padding:16px 18px;margin:12px 0}
.srvcard.crit{border-left-color:var(--crit)}.srvcard.warn{border-left-color:var(--warn)}.srvcard.ok{border-left-color:var(--ok)}
.srvhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.srvgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px}
.big2{font-size:22px;font-weight:600}

/* ---- pestanas ---- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:18px 0 20px}
.tabs a{padding:9px 14px;text-decoration:none;color:var(--muted);font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--action)}

/* ---- hallazgos: un bloque por tipo de problema, con sitio para leer ---- */
.nivel{margin:26px 0 34px}
.nivel-cab{display:flex;align-items:center;gap:10px;font-size:17px;margin:0 0 12px;font-weight:600}
.nivel-cab .nivel-n{font-size:15px;font-weight:700;padding:2px 10px;border-radius:999px}
.nivel-cab.crit .nivel-n{color:var(--crit);background:var(--critbg)}
.nivel-cab.warn .nivel-n{color:var(--warn);background:var(--warnbg)}
.nivel-cab .nivel-sub{font-size:13px;font-weight:400;color:var(--muted);margin-left:4px}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.dot.crit{background:var(--crit)}.dot.warn{background:var(--warn)}

.tipo{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:11px;margin:10px 0;overflow:hidden}
.tipo.crit{border-left-color:var(--crit)}
.tipo.warn{border-left-color:var(--warn)}
.tipo>summary{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;list-style:none}
.tipo>summary::-webkit-details-marker{display:none}
.tipo>summary:hover{background:var(--surface2)}
.tipo>summary::after{content:"";flex:none;width:8px;height:8px;margin-left:6px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.tipo[open]>summary::after{transform:rotate(-135deg)}
.tipo .cuenta{flex:none;min-width:44px;padding:6px 10px;border-radius:8px;text-align:center;
  font-size:16px;font-weight:700;line-height:1.15}
.tipo.crit .cuenta{color:var(--crit);background:var(--critbg)}
.tipo.warn .cuenta{color:var(--warn);background:var(--warnbg)}
.tipo .tit{flex:1;font-size:15.5px;font-weight:600;line-height:1.45}
.tipo .fid{flex:none;font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);
  background:var(--surface2);padding:3px 7px;border-radius:5px}

.tipo .cuerpo{padding:4px 18px 20px 18px;border-top:1px solid var(--line)}
.tipo .cuerpo>p{margin:14px 0 0;font-size:14.5px;line-height:1.65;max-width:68ch;color:var(--ink)}
.tipo .why b,.tipo .act b{color:var(--ink)}
.tipo .act{color:var(--muted)}
.tipo .donde-cab{margin:18px 0 8px!important;font-size:13px;color:var(--muted);font-weight:600}
.tipo .rutas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;
  max-height:340px;overflow-y:auto}
.tipo .rutas li{font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);
  background:var(--ground);border-radius:6px;padding:6px 10px;overflow-wrap:anywhere}
.tipo .mas{font-size:13px;color:var(--muted);margin-top:10px!important}
.tipo .cuerpo pre{margin:14px 0 0;background:var(--code);color:var(--codeink);border-radius:9px;
  padding:14px 16px;font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto;
  max-height:300px;white-space:pre-wrap;word-break:break-word}

/* requisitos */
.group{background:var(--surface);border:1px solid var(--line);border-radius:11px;margin:10px 0;overflow:hidden}
.group>summary{display:flex;align-items:center;gap:10px;padding:15px 18px;cursor:pointer;font-weight:600;font-size:15px;list-style:none}
.group>summary::-webkit-details-marker{display:none}
.group>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.group[open]>summary::after{transform:rotate(-135deg)}
.group>summary:hover{background:var(--surface2)}
.req{border-top:1px solid var(--line);padding:14px 18px;font-size:14.5px;line-height:1.6}
.req .est{display:inline-block;min-width:124px;text-align:center;font-size:11.5px;font-weight:700;
  padding:5px 9px;border-radius:6px;margin-right:12px;vertical-align:2px}
.req .est.si{color:var(--ok);background:var(--okbg)}
.req .est.no{color:var(--crit);background:var(--critbg)}
.req .est.nc{color:var(--warn);background:var(--warnbg)}
.req .est.man{color:var(--muted);background:var(--surface2)}
.req .why{margin:9px 0 0 136px;font-size:13px;line-height:1.6;color:var(--muted)}
.resumen{display:flex;align-items:center;gap:14px;margin:6px 0 22px}
.resumen .bar{width:240px;height:12px}
.resumen-txt{font-size:14px;color:var(--muted)}

/* ---- filtros ---- */
.filtros{display:flex;align-items:center;gap:10px;margin:14px 0 18px;flex-wrap:wrap}
.filtros label.f{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.filtros select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--ink);font:13.5px system-ui,sans-serif;max-width:230px}
.chip-f{font-size:13px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  text-decoration:none;color:var(--muted);background:var(--surface)}
.chip-f.on{color:var(--ink);font-weight:600;border-color:var(--action)}
.filtros .acciones{margin-left:auto}

/* ---- estados vacios: una invitacion, no un hueco ---- */
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:11px;padding:20px;
  color:var(--muted);font-size:14px;margin:12px 0}
.empty.ok{border-style:solid;border-color:var(--ok);color:var(--ok);background:var(--okbg)}
.empty.crit{border-style:solid;border-color:var(--crit);color:var(--ink);background:var(--critbg)}
.empty pre{margin-top:10px;background:var(--code);color:var(--codeink);border-radius:8px;padding:11px 13px;
  font:12px/1.5 ui-monospace,monospace;overflow-x:auto;max-height:240px;white-space:pre-wrap}

/* ---- botones y formularios ---- */
.btn{display:inline-block;background:var(--action);color:#fff;border:0;border-radius:8px;padding:9px 15px;
  font:600 14px system-ui,sans-serif;cursor:pointer;text-decoration:none}
.btn.sec{background:var(--surface2);color:var(--ink);border:1px solid var(--line)}
.btn.small{padding:5px 11px;font-size:12.5px}
.btn:hover{filter:brightness(1.07)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:16px 18px;margin:12px 0}
.panel h2{margin-top:0}
form.cfg{display:grid;gap:15px}
form.cfg label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
form.cfg input[type=text],form.cfg input[type=email],form.cfg input[type=number],form.cfg input[type=password],form.cfg select,form.cfg textarea,.suggestion-filters select,.acciones select,.finding-action input[type=text]{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--ground);
  color:var(--ink);font:14px system-ui,sans-serif}
form.cfg .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;gap:9px;align-items:center;font-size:14px}
.flash{background:var(--okbg);color:var(--ok);border:1px solid var(--ok);border-radius:8px;padding:10px 14px;margin-bottom:12px;font-size:14px}
.flash.err{background:var(--critbg);color:var(--crit);border-color:var(--crit)}

/* ---- runner, logs y visor ---- */
.runner{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:flex-start;
  border-top:1px solid var(--line);padding-top:10px}
.runner .dot{width:9px;height:9px;border-radius:50%;background:var(--unknown);flex:none;margin-top:3px}
.runner.ok .dot{background:var(--ok)}
.runner.run .dot{background:var(--warn);animation:pulse 1.4s infinite}
.runner.off .dot{background:var(--crit)}
@keyframes pulse{50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
a.notif{font-size:11px;color:var(--muted);text-decoration:none;border:1px dashed var(--line);border-radius:7px;padding:5px 9px;text-align:center}
a.notif:hover{color:var(--ink);border-style:solid}
.logbox{background:var(--surface);border:1px solid var(--line);border-radius:11px;margin:10px 0;overflow:hidden}
.logbox>summary{display:flex;align-items:center;gap:10px;padding:12px 15px;cursor:pointer;font-weight:600;font-size:14px;list-style:none}
.logbox>summary::-webkit-details-marker{display:none}
.logbox>summary:hover{background:var(--surface2)}
.logbox>summary .muted{font-weight:400;font-size:12.5px}
.logbox>summary .btn{margin-left:auto}
.logbox pre.log{margin:0;border-radius:0;max-height:360px;overflow:auto;border-top:1px solid var(--line)}
pre.log{background:var(--code);color:var(--codeink);font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:14px 16px;border-radius:9px;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
pre.log .lc{color:#F97066;font-weight:600}pre.log .lw{color:#E0B457}pre.log .li{color:#84B8F5}pre.log .ls{color:#93A1B1}
iframe.report{width:100%;height:76vh;border:1px solid var(--line);border-radius:11px;background:var(--surface)}
.filetabs{display:flex;gap:6px;margin:10px 0}
.filetabs a{font-size:12.5px;padding:5px 11px;border:1px solid var(--line);border-radius:7px;text-decoration:none;color:var(--ink)}
.filetabs a.on{background:var(--surface2);font-weight:600}
.card{display:block;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--line);
  border-radius:11px;padding:15px 17px;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--line)}
.card h3 a.rowlink{font-size:15px}
.cardfoot{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:13px;padding-top:12px;
  border-top:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin-top:14px}
.card h3{margin:0 0 6px;font-size:15px;word-break:break-word}
.card .meta{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6}
.card.crit{border-top-color:var(--crit)}.card.warn{border-top-color:var(--warn)}.card.ok{border-top-color:var(--ok)}
.cnt{display:inline-block;min-width:30px;text-align:center;font-weight:600;font-size:13px;padding:4px 7px;border-radius:6px;margin-right:4px}
.cnt.sm{min-width:24px;font-size:12px;padding:3px 6px}
.cnt.crit{color:var(--crit);background:var(--critbg)}.cnt.warn{color:var(--warn);background:var(--warnbg)}
.cnt.info{color:var(--info);background:var(--infobg)}.cnt.skip{color:var(--unknown);background:var(--unknownbg)}
.toast{position:fixed;right:18px;bottom:18px;background:var(--ok);color:#fff;padding:12px 17px;border-radius:9px;
  font-weight:600;font-size:14px;box-shadow:0 6px 22px rgba(0,0,0,.25);z-index:99}

/* ---- dashboard: cifras, graficos y bloque por servidor ---- */
.filtros form.ff{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 20px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:14px 16px;
  display:flex;flex-direction:column;gap:3px}
.tile .tv{font-size:26px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.tile .tl{font-size:12px;color:var(--muted)}
.tile.crit{border-color:var(--crit)}.tile.crit .tv{color:var(--crit)}
.tile.ok .tv{color:var(--ok)}
.srvblock{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:16px 18px;margin-bottom:18px}
.srvblock .srvhead{margin-bottom:12px}
.chartrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,300px);gap:18px;align-items:start}
.ch{margin:0;min-width:0}
.ch figcaption{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12px;color:var(--muted);margin-bottom:8px}
.leg{display:inline-flex;align-items:center;gap:4px}
.leg .k{display:inline-block;width:15px;border-top:2px solid currentColor;margin-left:9px}
.leg .k:first-child{margin-left:0}
.leg .k.crit{color:var(--crit)}.leg .k.warn{color:var(--warn)}.leg .k.dash{border-top-style:dashed}

/* evolucion: la rejilla se ve, pero no compite con los datos */
svg.chart{display:block;width:100%;height:auto;overflow:visible}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .ax{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.chart .ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .ln.crit{stroke:var(--crit)}.chart .ln.warn{stroke:var(--warn)}
.chart .pt{stroke:var(--surface);stroke-width:1.5}
.chart .pt.crit{fill:var(--crit)}.chart .pt.warn{fill:var(--warn)}
.chart .lbl{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.chart .lbl.crit{fill:var(--crit)}.chart .lbl.warn{fill:var(--warn)}

/* criticos por sitio: la lista se lee como grafico */
.hbars{display:flex;flex-direction:column;gap:5px}
.hbar{display:grid;grid-template-columns:minmax(0,1fr) 62px 42px;gap:9px;align-items:center;
  padding:4px 5px;border-radius:6px;text-decoration:none;color:var(--ink)}
.hbar:hover{background:var(--surface2)}
.hb-n{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-t{height:9px;border-radius:3px;background:var(--surface2);overflow:hidden}
.hb-t i{display:block;height:100%;background:var(--crit);border-radius:3px}
.hb-v{font-size:12.5px;font-weight:600;text-align:right;color:var(--crit);font-variant-numeric:tabular-nums}
.srvfoot{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.srvfoot b{color:var(--ink);font-weight:600}

/* ---- ayuda ---- */
.doc{max-width:none}
.doc h2{font-size:20px;margin:32px 0 10px;padding-top:12px;border-top:1px solid var(--line)}
.doc h3{font-size:15.5px;margin:22px 0 6px}
.doc h4{font-size:13.5px;color:var(--muted);margin:16px 0 4px}
.doc p{margin:10px 0;line-height:1.65}
.doc ul,.doc ol{padding-left:22px}.doc li{margin:6px 0}
.doc pre{background:var(--code);border-radius:9px;padding:14px 16px;overflow-x:auto}
.doc pre code{background:none;color:var(--codeink);padding:0;font-size:12.5px;line-height:1.55}
.doc blockquote{margin:12px 0;padding:10px 16px;border-left:3px solid var(--warn);background:var(--surface);
  border-radius:0 8px 8px 0;color:var(--muted)}
.doc .sc{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:9px;margin:14px 0}

@media(max-width:900px){
  /* la barra lateral pasa a ser una cabecera compacta: solo marca y destinos */
  aside{position:static;width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
        gap:4px 10px;padding:10px 14px}
  aside .brand{margin-right:6px}
  aside .brand-sub,aside .asfoot,aside a.notif,aside .side-box{display:none}
  aside nav,aside nav.sec{flex-direction:row;flex-wrap:wrap;gap:2px;margin:0;padding:0;border:0}
  aside nav a{padding:6px 10px;font-size:13.5px}
  .runner{border-top:0;padding-top:0;margin-left:auto;font-size:11.5px;align-items:center}
  main{margin-left:0;padding:18px 16px 60px}
  .situacion .frase{font-size:19px}
  .pagehead{gap:10px}
  .chartrow{grid-template-columns:1fr;gap:16px}
  .tiles{grid-template-columns:1fr 1fr}
  .hbar{grid-template-columns:minmax(0,1fr) 48px 38px}
  h1{font-size:22px}
}

/* Progreso encima del estado del runner. */
.audit-progress{margin-top:16px;font-size:11px;color:var(--muted);min-width:0}
.audit-progress[hidden]{display:none}
.audit-progress-meta{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px}
#audit-elapsed{font-variant-numeric:tabular-nums;white-space:nowrap}
.audit-progress progress{display:block;width:100%;height:8px;accent-color:var(--warn)}
@media(max-width:900px){.audit-progress{width:100%;margin-top:8px}}

.finding-item{margin-bottom:14px;border:1px solid var(--line);border-radius:8px;padding:10px;overflow-wrap:anywhere}
.finding-item .tipo{margin:0 0 8px}
.finding-action{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}.finding-action label{display:flex;flex-direction:column;align-items:flex-start;gap:5px;font-size:12.5px;color:var(--muted);flex:1 1 320px;min-width:0}
.finding-action input{max-width:100%;box-sizing:border-box}

.finding-action input[type=text]{min-height:40px;transition:border-color .15s,box-shadow .15s}
.finding-action input[type=text]::placeholder{color:var(--muted);opacity:1}
.finding-action input[type=text]:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-color:var(--action)}
.finding-action .btn{min-height:40px;box-sizing:border-box;flex-shrink:0}
@media(max-width:600px){.finding-action label{flex-basis:100%}.finding-action .btn{width:100%}}

/* Suggestions */
.suggestions-form textarea{resize:vertical;min-height:120px;line-height:1.6}
.suggestions-form :is(textarea,select):focus-visible{outline:2px solid var(--accent,var(--ink));outline-offset:2px}
.suggestion-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.suggestion-description{white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:0}
.suggestion-priority{border:1px solid var(--line);border-radius:16px;padding:3px 9px;font-size:12px}
.priority-alta{color:var(--crit);background:var(--critbg)}
.priority-media{color:var(--warn);background:var(--warnbg)}
.priority-baja{color:var(--muted);background:var(--ground)}
@media(max-width:600px){form.suggestions-form .row2{grid-template-columns:1fr}.suggestion-meta time{width:100%}}

.nav-icon{display:inline-flex;width:22px;justify-content:center;margin-right:9px;font-size:18px;line-height:1;vertical-align:middle}
.suggestion-compose{margin:24px 0}
.suggestion-compose>summary{cursor:pointer;font-weight:600;font-size:16px;padding:4px}
.compose-hint{display:block;margin:4px 0 0 22px;font-size:13px;font-weight:400;color:var(--muted)}
.suggestion-compose[open]>summary{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.suggestion-type-icon{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;margin-right:9px;background:var(--surface2);border-radius:8px;font-family:monospace}
.suggestion-card{border-left:3px solid var(--line)}
.suggestion-description{margin:16px 0;line-height:1.7}
.suggestion-delete{border-top:1px solid var(--line);padding-top:12px;font-size:13px}
.suggestion-delete>summary{cursor:pointer;color:var(--muted);width:fit-content}
.btn.danger{background:var(--critbg);color:var(--crit);border:1px solid var(--crit)}

/* Filters use the same fields, surfaces and buttons as configuration forms. */
.suggestion-list-heading h2{margin-bottom:16px}
.suggestion-filters{display:flex;align-items:flex-end;flex-wrap:wrap;gap:16px;margin:0 0 18px}
.suggestion-filters label.f{display:flex;flex-direction:column;gap:7px;flex:1 1 200px;min-width:0;font-size:13px;font-weight:600;color:var(--muted)}
.suggestion-filters select{width:100%;min-height:42px;cursor:pointer;color-scheme:light dark}
.suggestion-filter-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.suggestion-filter-actions .btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.suggestion-results{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin:0 0 16px;font-size:13px}
.suggestion-results strong{color:var(--ink);font-size:14px}
.suggestion-empty{text-align:center;padding:38px 24px}
.suggestion-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--surface2);color:var(--muted);font-size:25px;margin-bottom:12px}
.suggestion-empty h3{margin:0 0 8px;font-size:16px}
.suggestion-empty p{max-width:480px;margin:0 auto;line-height:1.65}
@media(max-width:600px){.suggestion-filters{gap:14px}.suggestion-filters label.f{flex-basis:100%}.suggestion-filter-actions{width:100%}.suggestion-filter-actions .btn{flex:1}.suggestion-empty{padding:28px 18px}}

.finding-locations{margin:16px 0}.finding-locations ul{padding-left:20px}.finding-locations code{overflow-wrap:anywhere;white-space:normal}.finding-action{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.finding-suggest{margin-top:12px;font-size:13px}.finding-suggest summary{cursor:pointer;color:var(--action)}.finding-suggest form{margin-top:8px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}.finding-suggest label{display:flex;flex-direction:column;gap:5px;width:100%;color:var(--muted)}.finding-suggest textarea{width:100%;box-sizing:border-box}.suggestion-finding{margin:0 0 6px;font-size:13px}

/* ---- login ---- */
body.login-page{min-height:100vh;display:grid;place-items:center;padding:24px 16px;
  background:radial-gradient(900px 420px at 50% -80px,var(--infobg),transparent 70%),var(--ground)}
.login-card{width:100%;max-width:380px;margin:0;padding:30px 28px 28px;background:var(--surface);
  border:1px solid var(--line);border-top:4px solid var(--action);border-radius:11px;
  box-shadow:0 1px 2px rgba(16,24,34,.05),0 12px 32px -12px rgba(16,24,34,.18);animation:login-in .15s ease-out}
@keyframes login-in{from{opacity:0;transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.login-card{animation:none}}
.login-brand{text-align:center;margin-bottom:22px}
.login-logo{width:44px;height:44px;color:var(--action);display:block;margin:0 auto 12px}
.login-brand h1{font-size:15px;font-weight:600;letter-spacing:.08em;margin:0}
.login-brand p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.login-form{display:grid;gap:15px}
.login-field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.login-field input{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:8px;background:var(--ground);
  color:var(--ink);font:14px system-ui,sans-serif}
.login-field input:hover{border-color:var(--unknown)}
.login-field input:focus-visible{outline:2px solid var(--action);outline-offset:1px;border-color:var(--action)}
.login-pass{position:relative}
.login-pass input{padding-right:78px}
.login-toggle{position:absolute;top:50%;right:5px;transform:translateY(-50%);border:0;background:none;color:var(--action);
  font:600 12.5px system-ui,sans-serif;padding:6px 8px;border-radius:6px;cursor:pointer}
.login-toggle:hover{background:var(--surface2)}
.login-caps{margin:6px 0 0;font-size:12.5px;color:var(--warn)}
.login-submit{width:100%;padding:11px 15px;margin-top:3px;color:var(--surface)}   /* blanco en claro, tinta oscura en oscuro: AA en ambos */
.login-logo path{stroke:var(--surface)}
.login-msg{margin:0 0 16px;padding:10px 12px;border-radius:8px;font-size:13.5px;border:1px solid}
.login-msg.crit{background:var(--critbg);color:var(--crit);border-color:var(--crit)}
.login-msg.warn{background:var(--warnbg);color:var(--warn);border-color:var(--warn)}
@media(max-width:480px){.login-card{padding:26px 20px 22px}.login-field input{font-size:16px}}
.acciones select{width:auto;min-width:280px;max-width:100%}