/* NEIX Tableros — base.css
   Design system: tokens de marca (claro/oscuro), tipografía Inter auto-hospedada (sin CDN → CSP
   estricta), reset mínimo, y las piezas base (logo, login, cabeceras, lienzo vacío, denegado).
   Convención: variables --tbl-*  ·  clases .tbl-bloque__elem--mod.  Nada de inline (lo revienta el CI). */

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-latin-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-latin-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-latin-700.woff2") format("woff2")}

:root{
  color-scheme:light dark;  /* checkboxes, selects y fechas nativos siguen el tema */
  --tbl-bg:#F7F8FA; --tbl-surface:#FFFFFF; --tbl-surface-2:#FBFBFC; --tbl-surface-3:#F2F3F6; --tbl-overlay:rgba(18,22,31,.42);
  --tbl-ink:#1B2027; --tbl-ink-soft:#59616E; --tbl-muted:#646B78;  /* muted ≥ WCAG AA (4.5:1) sobre blanco y sobre surface-3 (A11Y-03: antes 4,36:1 en surface-3) */
  --tbl-border:#ECEEF1; --tbl-border-2:#DEE1E6; --tbl-line:#F1F2F5;
  --tbl-accent:#8E1B23; --tbl-accent-dark:#71151B; --tbl-accent-ink:#FFFFFF; --tbl-accent-soft:rgba(142,27,35,.08);
  --tbl-ppto:#878F9C; /* barra "presupuesto" (neutro, contrasta con el bordó del real). A11Y-03: ≥ 3:1 contra la superficie (antes 1,70:1) */
  /* *-fill = relleno de controles con texto blanco encima; en oscuro se oscurece para pasar AA (4.5:1) */
  --tbl-accent-fill:#8E1B23; --tbl-danger-fill:#A12631;
  --tbl-ok:#1A7A47; --tbl-ok-bg:#E7F4EC; --tbl-warn:#8A6412; --tbl-warn-bg:#FBF2DD; --tbl-danger:#A12631; --tbl-danger-bg:#FBEAEC;
  --tbl-focus:#8E1B23;  /* sólido: ≥3:1 contra superficie (WCAG 1.4.11); antes rgba .38 = 2,1:1 */
  --tbl-shadow-sm:0 1px 2px rgba(20,26,38,.05); --tbl-shadow-md:0 8px 24px rgba(20,26,38,.10); --tbl-shadow-lg:0 24px 64px rgba(20,26,38,.22);
  --tbl-r-xs:2px; --tbl-r:9px; --tbl-r-sm:6px; --tbl-r-lg:13px; /* r-xs: swatches/controles chicos (revisado en claro/oscuro, Fase 1b) */
  /* paleta CATEGÓRICA (series, áreas, tipos de activo…): sin el rojo de peligro ni el verde de "ok" (no deben
     leerse como bueno/malo). Claro: tonos oscuros (≥4,5:1 con texto blanco encima, ver --tbl-cat-ink). */
  --tbl-cat-1:#2563EB; --tbl-cat-2:#C2410C; --tbl-cat-3:#7C3AED; --tbl-cat-4:#0F766E; --tbl-cat-5:#A21CAF;
  --tbl-cat-6:#A16207; --tbl-cat-7:#0E7490; --tbl-cat-8:#BE185D; --tbl-cat-9:#8B5E34; --tbl-cat-10:#64748B;
  --tbl-cat-ink:#FFFFFF; /* texto sobre un chip de color categórico */
  --tbl-sans:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --tbl-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --tbl-bg:#0F1216; --tbl-surface:#171B21; --tbl-surface-2:#1D222A; --tbl-surface-3:#242A34; --tbl-overlay:rgba(0,0,0,.6);
  --tbl-ink:#E8EBF0; --tbl-ink-soft:#A4ADB9; --tbl-muted:#8B94A1;
  --tbl-border:#262B33; --tbl-border-2:#333944; --tbl-line:#20242B;
  --tbl-accent:#E36D75; --tbl-accent-dark:#C2454E; --tbl-accent-ink:#FFFFFF; --tbl-accent-soft:rgba(219,90,99,.14); --tbl-ppto:#707988;
  --tbl-accent-fill:#C2454E; --tbl-danger-fill:#B23A44; /* oscuros: texto blanco encima pasa AA en modo oscuro */
  --tbl-ok:#5FCB90; --tbl-ok-bg:rgba(95,203,144,.13); --tbl-warn:#E2B558; --tbl-warn-bg:rgba(226,181,88,.13); --tbl-danger:#E6737E; --tbl-danger-bg:rgba(230,115,126,.14);
  --tbl-focus:#DB5A63;
  --tbl-cat-1:#60A5FA; --tbl-cat-2:#FB923C; --tbl-cat-3:#A78BFA; --tbl-cat-4:#2DD4BF; --tbl-cat-5:#E879F9;
  --tbl-cat-6:#EAB308; --tbl-cat-7:#22D3EE; --tbl-cat-8:#F472B6; --tbl-cat-9:#C8A27A; --tbl-cat-10:#94A3B8;
  --tbl-cat-ink:#0F1216; /* en oscuro los categóricos son claros → texto oscuro encima */
  --tbl-shadow-sm:0 1px 2px rgba(0,0,0,.35); --tbl-shadow-md:0 8px 24px rgba(0,0,0,.45); --tbl-shadow-lg:0 24px 64px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --tbl-bg:#0F1216; --tbl-surface:#171B21; --tbl-surface-2:#1D222A; --tbl-surface-3:#242A34; --tbl-overlay:rgba(0,0,0,.6);
  --tbl-ink:#E8EBF0; --tbl-ink-soft:#A4ADB9; --tbl-muted:#8B94A1;
  --tbl-border:#262B33; --tbl-border-2:#333944; --tbl-line:#20242B;
  --tbl-accent:#E36D75; --tbl-accent-dark:#C2454E; --tbl-accent-ink:#FFFFFF; --tbl-accent-soft:rgba(219,90,99,.14); --tbl-ppto:#707988;
  --tbl-accent-fill:#C2454E; --tbl-danger-fill:#B23A44; /* oscuros: texto blanco encima pasa AA en modo oscuro */
  --tbl-ok:#5FCB90; --tbl-ok-bg:rgba(95,203,144,.13); --tbl-warn:#E2B558; --tbl-warn-bg:rgba(226,181,88,.13); --tbl-danger:#E6737E; --tbl-danger-bg:rgba(230,115,126,.14);
  --tbl-focus:#DB5A63;
  --tbl-cat-1:#60A5FA; --tbl-cat-2:#FB923C; --tbl-cat-3:#A78BFA; --tbl-cat-4:#2DD4BF; --tbl-cat-5:#E879F9;
  --tbl-cat-6:#EAB308; --tbl-cat-7:#22D3EE; --tbl-cat-8:#F472B6; --tbl-cat-9:#C8A27A; --tbl-cat-10:#94A3B8;
  --tbl-cat-ink:#0F1216; /* en oscuro los categóricos son claros → texto oscuro encima */
  --tbl-shadow-sm:0 1px 2px rgba(0,0,0,.35); --tbl-shadow-md:0 8px 24px rgba(0,0,0,.45); --tbl-shadow-lg:0 24px 64px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tbl-bg);color:var(--tbl-ink);font-family:var(--tbl-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select{font-family:inherit}
h1,h2,h3{margin:0}
[hidden]{display:none!important}
::selection{background:var(--tbl-accent-soft)}
.tbl-muted{color:var(--tbl-muted)}
.tbl-num{font-variant-numeric:tabular-nums}
.tbl-skip{position:absolute;left:-9999px;top:0;background:var(--tbl-surface);color:var(--tbl-ink);padding:10px 14px;border-radius:var(--tbl-r);z-index:200}
.tbl-skip:focus{left:12px;top:12px;outline:2px solid var(--tbl-focus)}
/* visualmente oculto pero accesible a lectores de pantalla (tabla de datos de los gráficos, WCAG 1.3.1).
   No usar display/visibility:none (los SR los saltan). Recipe estándar a11y-project. */
.tbl-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* logo */
.tbl-logo{display:block;height:26px;width:auto}
.tbl-logo--lg{height:34px;margin:0 auto 4px}
.tbl-logo--bar{height:19px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tbl-logo{filter:brightness(0) invert(1)}}
:root[data-theme="dark"] .tbl-logo{filter:brightness(0) invert(1)}

/* login */
.tbl-login{min-height:100vh;display:grid;place-items:center;padding:24px}
.tbl-login__card{width:400px;max-width:100%;background:var(--tbl-surface);border:1px solid var(--tbl-border);border-radius:16px;box-shadow:var(--tbl-shadow-md);padding:38px 34px 26px;text-align:center}
.tbl-login__sub{font-size:13.5px;color:var(--tbl-muted);margin-top:6px}
.tbl-msbtn{margin:26px 0 14px;width:100%;height:46px;border:1px solid var(--tbl-border-2);border-radius:var(--tbl-r);background:var(--tbl-surface);color:var(--tbl-ink);font-size:14.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:11px;transition:background .14s,border-color .14s}
.tbl-msbtn:hover{background:var(--tbl-surface-2);border-color:var(--tbl-muted)}
.tbl-msbtn:focus-visible{outline:2px solid var(--tbl-focus);outline-offset:2px}
.tbl-login__note{font-size:12.5px;color:var(--tbl-muted)}
.tbl-login__foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--tbl-line);font-size:11.5px;color:var(--tbl-muted);display:flex;align-items:center;justify-content:center;gap:7px}
.tbl-login__err{margin-top:16px;background:var(--tbl-danger-bg);color:var(--tbl-danger);border-radius:var(--tbl-r);padding:11px 13px;font-size:12.8px;font-weight:500;text-align:left;display:flex;gap:9px;align-items:flex-start}
.tbl-login__err svg{flex:none;margin-top:1px}

/* layout raíz: full-screen y fluido. El contenido llena TODO el alto disponible (para que el lienzo /
   los tableros ocupen la pantalla) y el ancho es fluido con padding proporcional (compu/proyector/celu).
   100dvh usa el alto dinámico del viewport → correcto en móviles con barra de navegador. */
#app{min-height:100dvh;display:flex;flex-direction:column}
.tbl-wrap{flex:1 0 auto;display:flex;flex-direction:column;min-width:0;width:100%;max-width:2100px;margin:0 auto;padding:clamp(14px,1.7vw,28px) clamp(16px,3vw,52px) clamp(40px,5vh,80px)}
.tbl-phead{margin-bottom:clamp(14px,1.8vh,22px)}
.tbl-phead h1{font-size:clamp(19px,0.3vw + 16px,22px);font-weight:700;letter-spacing:-.018em;display:flex;align-items:center;gap:10px;text-wrap:balance}
.tbl-phead .tbl-adot{width:9px;height:9px;border-radius:50%}
.tbl-phead p{margin:4px 0 0;color:var(--tbl-muted);font-size:13px}
.tbl-tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tbl-muted);border:1px solid var(--tbl-border-2);padding:3px 8px;border-radius:999px}

/* lienzo: crece para llenar el alto que queda bajo la cabecera (flex:1), con un piso razonable */
.tbl-canvas{flex:1 1 auto;border:1.5px dashed var(--tbl-border-2);border-radius:var(--tbl-r-lg);background:var(--tbl-surface-2);min-height:max(300px,46vh);display:grid;place-items:center;text-align:center;padding:clamp(24px,4vw,56px)}
.tbl-canvas .ico{width:clamp(44px,3.4vw,60px);height:clamp(44px,3.4vw,60px);color:var(--tbl-muted);margin-bottom:14px}
.tbl-canvas h2{font-size:clamp(17px,0.7vw + 13px,24px);font-weight:600}
.tbl-canvas p{color:var(--tbl-muted);font-size:clamp(13px,0.35vw + 11px,16px);margin:7px 0 0;max-width:min(420px,88%)}

.tbl-deny{max-width:440px;margin:64px auto;text-align:center;background:var(--tbl-surface);border:1px solid var(--tbl-border);border-radius:var(--tbl-r-lg);padding:38px 30px;box-shadow:var(--tbl-shadow-sm)}
/* ícono de la tarjeta de estado en una insignia redonda (mismo lenguaje que la pantalla de sesión vencida);
   trazos redondeados: sin round, el punto del "!" (path de largo 0) no se dibuja */
.tbl-deny>svg:first-child{width:22px;height:22px;padding:12px;box-sizing:content-box;border-radius:50%;background:var(--tbl-surface-2);border:1px solid var(--tbl-line);color:var(--tbl-muted);margin:0 auto 16px;display:block;stroke-linecap:round;stroke-linejoin:round}
.tbl-deny h2{font-size:18px;font-weight:700;letter-spacing:-.01em}
.tbl-deny p{color:var(--tbl-muted);font-size:13.5px;line-height:1.55;margin:8px auto 0;max-width:340px}
.tbl-deny .tbl-btn{margin-top:22px;min-width:140px;justify-content:center}
/* acción principal de la tarjeta de error: mismo tratamiento que "Volver a ingresar" (sesión vencida) */
.tbl-deny .tbl-deny__go{height:42px;min-width:170px;gap:8px;border-radius:10px;box-shadow:0 1px 2px rgba(16,24,40,.08),0 4px 12px -4px var(--tbl-accent-fill);transition:filter .14s,box-shadow .14s,transform .06s}
.tbl-deny .tbl-deny__go:hover{filter:brightness(.94);box-shadow:0 1px 2px rgba(16,24,40,.1),0 8px 18px -6px var(--tbl-accent-fill)}
.tbl-deny .tbl-deny__go:active{transform:translateY(1px)}
.tbl-deny p.tbl-deny__auto{font-size:12px;margin-top:12px;min-height:1.2em}
/* problema de conexión / demora (no un error de datos): insignia en tono ámbar */
.tbl-deny--warn>svg:first-child{background:var(--tbl-warn-bg);color:var(--tbl-warn);border-color:transparent}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* utilitarias (para no usar estilos inline — CSP estricta) */
.tbl-flex1{flex:1}
.tbl-fs15{font-size:15.5px}
.tbl-mb4{margin-bottom:4px}
.tbl-mw260{max-width:260px}
.tbl-nowrap{white-space:nowrap}
.tbl-areadot--lg{width:12px;height:12px}
.tbl-avatar--sm{width:32px;height:32px;font-size:12px}

:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}