/* 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{
  --tbl-bg:#F7F8FA; --tbl-surface:#FFFFFF; --tbl-surface-2:#FBFBFC; --tbl-overlay:rgba(18,22,31,.42);
  --tbl-ink:#1B2027; --tbl-ink-soft:#59616E; --tbl-muted:#8A929E;
  --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-ok:#1A7A47; --tbl-ok-bg:#E7F4EC; --tbl-warn:#8A6412; --tbl-warn-bg:#FBF2DD; --tbl-danger:#A12631; --tbl-danger-bg:#FBEAEC;
  --tbl-focus:rgba(142,27,35,.38);
  --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:9px; --tbl-r-sm:6px; --tbl-r-lg:13px;
  --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-overlay:rgba(0,0,0,.6);
  --tbl-ink:#E8EBF0; --tbl-ink-soft:#A4ADB9; --tbl-muted:#7E8794;
  --tbl-border:#262B33; --tbl-border-2:#333944; --tbl-line:#20242B;
  --tbl-accent:#DB5A63; --tbl-accent-dark:#C2454E; --tbl-accent-ink:#FFFFFF; --tbl-accent-soft:rgba(219,90,99,.14);
  --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:rgba(219,90,99,.45);
  --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-overlay:rgba(0,0,0,.6);
  --tbl-ink:#E8EBF0; --tbl-ink-soft:#A4ADB9; --tbl-muted:#7E8794;
  --tbl-border:#262B33; --tbl-border-2:#333944; --tbl-line:#20242B;
  --tbl-accent:#DB5A63; --tbl-accent-dark:#C2454E; --tbl-accent-ink:#FFFFFF; --tbl-accent-soft:rgba(219,90,99,.14);
  --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:rgba(219,90,99,.45);
  --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)}

/* 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}

/* cabeceras de página + estados */
.tbl-wrap{max-width:1080px;margin:0 auto;padding:34px 28px 80px}
.tbl-phead{margin-bottom:22px}
.tbl-phead h1{font-size:24px;font-weight:700;letter-spacing:-.022em;display:flex;align-items:center;gap:11px;text-wrap:balance}
.tbl-phead .tbl-adot{width:10px;height:10px;border-radius:50%}
.tbl-phead p{margin:5px 0 0;color:var(--tbl-muted);font-size:13.5px}
.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}

.tbl-canvas{border:1.5px dashed var(--tbl-border-2);border-radius:var(--tbl-r-lg);background:var(--tbl-surface-2);min-height:44vh;display:grid;place-items:center;text-align:center;padding:40px}
.tbl-canvas .ico{width:46px;height:46px;color:var(--tbl-muted);margin-bottom:14px}
.tbl-canvas h2{font-size:16px;font-weight:600}
.tbl-canvas p{color:var(--tbl-muted);font-size:13.5px;margin:7px 0 0;max-width:340px}

.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)}
.tbl-deny svg{color:var(--tbl-muted);margin-bottom:14px}
.tbl-deny h2{font-size:18px;font-weight:700}
.tbl-deny p{color:var(--tbl-muted);font-size:13.5px;margin:8px 0 0}

@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}