/* SPECTRA · hoja de estilos única (P1-08). Tokens primero; ningún color se escribe fuera de :root.
   Chips: fondo claro, texto oscuro del mismo tono y borde medio (contraste ≥ 7:1, documento 26 §5.2).
   scripts/verificar_contraste.py lee los pares --chip-*-bg / --chip-*-ink de este archivo en CI. */
:root{
  --ink:#1B2330;--muted:#5B6474;--line:#D8DCE3;--borde-campo:#6B7280;--bg:#F5F6F8;--card:#FFFFFF;--th:#EEF1F6;
  --accent:#1F3864;--accent-oscuro:#0F2447;--ok:#2E8B57;--warn:#B98A2A;--bad:#B5472D;--info:#2F4B7C;
  /* familias de estado (chips) */
  --chip-vigente-bg:#E3F3E8;--chip-vigente-ink:#0F5132;--chip-vigente-borde:#8CCFA6;
  --chip-nota-bg:#FFF3CD;--chip-nota-ink:#664D03;--chip-nota-borde:#F1D27A;
  --chip-bloquea-bg:#F8D7DA;--chip-bloquea-ink:#842029;--chip-bloquea-borde:#EFA2A9;
  --chip-falta-bg:#E9ECEF;--chip-falta-ink:#343A40;--chip-falta-borde:#C4CAD1;
  --chip-espera-bg:#DDEBFF;--chip-espera-ink:#0B3D91;--chip-espera-borde:#9DBDF0;
  --chip-viejo-bg:#EFE1F5;--chip-viejo-ink:#4A1B6B;--chip-viejo-borde:#C9A6DE;
  --chip-neutro-bg:#FFFFFF;--chip-neutro-ink:#3F4756;--chip-neutro-borde:#9AA3B2;
  /* banners */
  --banner-exito-bg:#E3F3E8;--banner-exito-ink:#0F5132;--banner-exito-borde:#2E8B57;
  --banner-aviso-bg:#FFF3CD;--banner-aviso-ink:#664D03;--banner-aviso-borde:#B98A2A;
  --banner-error-bg:#F8D7DA;--banner-error-ink:#842029;--banner-error-borde:#B5472D;
  --banner-info-bg:#DDEBFF;--banner-info-ink:#0B3D91;--banner-info-borde:#2F4B7C;
  --toque:44px;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 -apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg)}
header{background:var(--accent);color:#fff;padding:8px 20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
header a{color:#fff;text-decoration:none;opacity:.92;padding:8px 4px;min-height:var(--toque);display:inline-flex;align-items:center}header a:hover,header a:focus-visible{opacity:1;text-decoration:underline}
header b{font-size:18px;margin-right:8px}
header .marca-activa{text-decoration:underline;text-underline-offset:6px}
.barra-division{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:12px}
.barra-division label{color:#fff;opacity:.9;font-size:12px}
.barra-division select{padding:6px 8px;min-height:36px}
.meta{font-size:12px;opacity:.85}
.form-salir{margin:0}
.btn-mini{padding:6px 10px;font-size:12px;background:var(--accent-oscuro);min-height:36px}
.barra-abierta{background:#FFF4D6;color:#6B4E00;padding:4px 20px;font-size:12px}
main{max-width:1200px;margin:0 auto;padding:20px}
h1{font-size:24px;margin:0 0 6px}h2{font-size:18px;margin:26px 0 8px}h3{font-size:16px;margin:16px 0 6px}
.sub{color:var(--muted);margin:0 0 14px}
.sin-margen-sup{margin-top:0}
.pequeno{font-size:14px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--info);outline-offset:2px}
/* tablas: nunca desplazan la página; el contenedor desplaza y el encabezado se queda (P1-08) */
.tabla{overflow-x:auto;margin:6px 0 14px;max-width:100%}
table{width:100%;border-collapse:collapse;background:var(--card);font-size:14px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--th);font-weight:600;position:sticky;top:0;z-index:1}
/* chips: forma + texto + color, nunca solo color */
.tag{display:inline-block;padding:2px 8px;border-radius:3px;font-size:12px;font-weight:600;line-height:1.5;border:1px solid var(--chip-neutro-borde);background:var(--chip-neutro-bg);color:var(--chip-neutro-ink);white-space:nowrap}
.tag::before{content:"— ";font-weight:700}
.tag.vigente{background:var(--chip-vigente-bg);color:var(--chip-vigente-ink);border-color:var(--chip-vigente-borde)}.tag.vigente::before{content:"✓ "}
.tag.nota{background:var(--chip-nota-bg);color:var(--chip-nota-ink);border-color:var(--chip-nota-borde)}.tag.nota::before{content:"◐ "}
.tag.bloquea{background:var(--chip-bloquea-bg);color:var(--chip-bloquea-ink);border-color:var(--chip-bloquea-borde)}.tag.bloquea::before{content:"✕ "}
.tag.falta{background:var(--chip-falta-bg);color:var(--chip-falta-ink);border-color:var(--chip-falta-borde)}.tag.falta::before{content:"○ "}
.tag.espera{background:var(--chip-espera-bg);color:var(--chip-espera-ink);border-color:var(--chip-espera-borde)}.tag.espera::before{content:"⧗ "}
.tag.viejo{background:var(--chip-viejo-bg);color:var(--chip-viejo-ink);border-color:var(--chip-viejo-borde)}.tag.viejo::before{content:"⧗! "}
.tag.neutro{border-style:dashed}
/* severidad de chequeos: escala propia, no los colores de estado */
.tag.sev-alta{background:var(--chip-bloquea-bg);color:var(--chip-bloquea-ink);border-color:var(--chip-bloquea-borde)}.tag.sev-alta::before{content:"◆ "}
.tag.sev-media{background:var(--chip-nota-bg);color:var(--chip-nota-ink);border-color:var(--chip-nota-borde)}.tag.sev-media::before{content:"◈ "}
.tag.sev-baja{background:var(--chip-falta-bg);color:var(--chip-falta-ink);border-color:var(--chip-falta-borde)}.tag.sev-baja::before{content:"◇ "}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.kpi{background:var(--card);border:1px solid var(--line);padding:10px 14px}
.kpi b{display:block;font-size:26px;font-variant-numeric:tabular-nums}.kpi span{color:var(--muted);font-size:13px;display:block}
/* semáforo de los paneles (P2-02): color en el borde y en una palabra, nunca solo color */
.kpi.sem-rojo{border-left:5px solid var(--bad)}.kpi.sem-ambar{border-left:5px solid var(--warn)}.kpi.sem-verde{border-left:5px solid var(--ok)}.kpi.sem-gris{border-left:5px solid var(--borde-campo)}
.semaforo{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 7px;border-radius:3px;border:1px solid}
.semaforo.rojo{background:var(--chip-bloquea-bg);color:var(--chip-bloquea-ink);border-color:var(--chip-bloquea-borde)}.semaforo.ambar{background:var(--chip-nota-bg);color:var(--chip-nota-ink);border-color:var(--chip-nota-borde)}
.semaforo.verde{background:var(--chip-vigente-bg);color:var(--chip-vigente-ink);border-color:var(--chip-vigente-borde)}.semaforo.gris{background:var(--chip-falta-bg);color:var(--chip-falta-ink);border-color:var(--chip-falta-borde)}
.semaforo.grande{font-size:13px;vertical-align:middle;margin-left:6px}
a.accion{font-weight:600}
/* menú por rol: grupos desplegables en la barra (P2-01) */
.menu-grupo{position:relative;display:inline-block}.menu-grupo summary{color:#fff;opacity:.92;padding:8px 4px;min-height:var(--toque);list-style:none;display:inline-flex;align-items:center}
.menu-grupo summary::-webkit-details-marker{display:none}.menu-grupo summary.marca-activa{text-decoration:underline;text-underline-offset:6px}
.menu-grupo .menu-lista{position:absolute;left:0;top:100%;background:var(--accent-oscuro);min-width:200px;display:flex;flex-direction:column;padding:4px 8px;z-index:20;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.menu-grupo .menu-lista a{padding:8px 6px}
.card{background:var(--card);border:1px solid var(--line);padding:14px 16px;margin:10px 0}
.card-aviso{border-left:4px solid var(--warn)}
.card-destacada{border-left:4px solid var(--accent)}
.login-card{max-width:420px;margin:60px auto}
.campo-lleno{width:100%}
.bloque-campo{margin:8px 0}
.form-ancho{align-items:end}
.crece{flex:1;min-width:320px}
.pre{white-space:pre-wrap;margin:8px 0 0;font:inherit}
.pre-mini{white-space:pre-wrap;font-size:12px}
.lista-componentes{margin:4px 0 0 14px;padding:0}
.texto-mal{color:var(--bad)}
form.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
label{font-size:12px;color:var(--muted);display:block}
input,select{padding:8px 10px;border:1px solid var(--borde-campo);border-radius:3px;font:inherit;min-height:var(--toque);font-size:16px;max-width:100%}
input[type=file]{padding:6px 0;border:0}
button{background:var(--accent);color:#fff;border:0;padding:9px 14px;border-radius:3px;cursor:pointer;font:inherit;min-height:var(--toque)}
button.secundario{background:var(--muted)}
button.peligro{background:var(--bad)}
summary{cursor:pointer;min-height:32px;display:flex;align-items:center}
.banner{padding:10px 14px;border-left:4px solid;margin:10px 0;border-radius:2px}
.banner.exito,.msg{background:var(--banner-exito-bg);color:var(--banner-exito-ink);border-left:4px solid var(--banner-exito-borde);padding:10px 14px;margin:10px 0}
.banner.aviso{background:var(--banner-aviso-bg);color:var(--banner-aviso-ink);border-color:var(--banner-aviso-borde)}
.banner.error,.err{background:var(--banner-error-bg);color:var(--banner-error-ink);border-left:4px solid var(--banner-error-borde);padding:10px 14px;margin:10px 0}
.banner.info{background:var(--banner-info-bg);color:var(--banner-info-ink);border-color:var(--banner-info-borde)}
.note{font-size:13px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.prop{font-size:11px;color:#7A5A0F;font-weight:600}
dialog.confirmar{border:1px solid var(--line);border-radius:4px;padding:18px 20px;max-width:520px;width:calc(100% - 32px)}
dialog.confirmar::backdrop{background:rgba(27,35,48,.55)}
dialog.confirmar h2{margin:0 0 8px;font-size:18px}
dialog.confirmar .previa{background:var(--th);padding:8px 10px;border-radius:3px;margin:8px 0 14px;white-space:pre-wrap;font-size:14px}
dialog.confirmar menu{display:flex;gap:8px;justify-content:flex-end;padding:0;margin:0}
@media(max-width:800px){.grid2{grid-template-columns:1fr}}
@media(max-width:640px){main{padding:12px}h1{font-size:20px}.kpis{grid-template-columns:repeat(2,1fr)}header{gap:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{header,form,details,dialog,.no-print{display:none!important}main{max-width:none}}