/* ============================================================================
   2Day · Sistema de Control de Combustible
   base.css — sistema unificado (tokens + componentes)

   CÓMO USARLO
   1. Copia este archivo a  backend/frontend/static/base.css
   2. En cada pantalla (login, operador, coordinador, gerente, combustible,
      dashboard) BORRA el bloque <style> de tokens y componentes base y deja:

        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="/static/base.css">
        <style> ...solo lo específico de ESTA pantalla... </style>

   3. Quita el <link> de Barlow Condensed de las 6 pantallas.
   4. Sustituye los <canvas> de partículas por /static/bgfx.js.

   REGLAS DEL SISTEMA
   · Dos familias: IBM Plex Sans (texto/UI) + IBM Plex Mono (cifras, folios, ejes).
   · Tres radios: 6 / 10 / 999. Nada más.
   · Una sola escala tipográfica (--t-*). No inventar tamaños en línea.
   · Una sola familia de sombras (--sh-1/2/3). Prohibido `4px 4px 0`.
   · Colores de estado siempre por par tinta+fondo (--ok/--ok-bg…), nunca color-mix
     improvisado.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* superficies — cuatro niveles reales de jerarquía */
  --bg:#eef1f5;          /* lienzo */
  --card:#ffffff;        /* tarjeta sobre lienzo */
  --panel:#ffffff;       /* flotante: modal, dropdown */
  --sunken:#f4f6f9;      /* hundido: input, celda, chip neutro */

  /* texto */
  --ink:#101418;
  --ink-2:#48525d;
  --muted:#626c78;      /* 4.71:1 sobre --bg; el #6b7581 anterior daba 4.13:1 y no pasaba AA */

  /* bordes */
  --line:#e2e6eb;
  --line-2:#c9d0d8;

  /* marca */
  --accent:#EC6D1D;
  /* El naranja de marca cuando lleva TEXTO encima. El de arriba con blanco da
     3.10:1 y la norma pide 4.5:1; éste da 4.73:1 con la tinta blanca de este tema,
     mismo tono y menos luminosidad. `--accent` sigue siendo el de iconos, bordes,
     enlaces y series de gráficas, donde no hay nada que leer encima. */
  --accent-solid:#BE5310;
  --accent-2:#cf5710;
  --accent-ink:#ffffff;
  --accent-bg:#fdeee2;

  /* estado — cada uno con su fondo calibrado (AA sobre su propio -bg) */
  --ok:#0a6b45;      --ok-bg:#e2f3ea;
  --warn:#8a5a06;    --warn-bg:#fbf0da;
  --danger:#b3341c;  --danger-bg:#fce9e4;
  --info:#0b6ea6;    --info-bg:#e4f1fa;

  /* tipo de unidad — paleta Okabe-Ito, segura para daltonismo y sin choque
     con --accent (naranja) ni --danger (rojo). ÚNICA fuente de verdad:
     antes dashboard decía tracto=azul/camión=ámbar y coordinador decía
     tracto=naranja/camión=azul. */
  --u-tracto:#0072B2;   --u-tracto-bg:#e4f0f8;
  --u-camion:#00806a;   --u-camion-bg:#e0f2ee;
  --u-remol:#a8557f;    --u-remol-bg:#f8eaf2;

  /* navegación lateral — negra en ambos temas, es la firma de la marca */
  --nav:#0a0c0f;
  --nav-line:#22272e;
  --nav-ink:#f2f5f8;
  --nav-item:#c3cad3;
  --nav-muted:#7d8794;
  --nav-group:#5a636e;
  --nav-hover:#171b21;
  --nav-w:248px;

  /* fondo animado — valores que SÍ se ven en claro */
  --fx-dot:rgba(16,20,24,.40);
  --fx-link:rgba(16,20,24,.16);
  --fx-hot:rgba(236,109,29,.72);
  --fx-glow-a:rgba(236,109,29,.16);
  --fx-glow-b:rgba(0,114,178,.13);

  /* tipografía */
  --f-sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;

  --t-eyebrow:600 10px/1.2 var(--f-mono);   /* migas, grupos de nav, etiquetas */
  --t-label:600 11px/1.3 var(--f-sans);     /* label de KPI, th de tabla */
  --t-micro:400 11px/1.45 var(--f-sans);
  --t-sm:400 12px/1.45 var(--f-sans);
  --t-body:400 13px/1.55 var(--f-sans);
  --t-strong:600 13px/1.5 var(--f-sans);
  --t-h3:600 15px/1.25 var(--f-sans);       /* título de tarjeta */
  --t-h2:600 19px/1.2 var(--f-sans);        /* título de sección */
  --t-h1:600 26px/1.15 var(--f-sans);       /* héroe de login */
  --t-kpi:600 26px/1 var(--f-mono);         /* cifra grande = instrumento */
  --t-num:500 12px/1.4 var(--f-mono);       /* folio, placa, fecha, cantidad */

  /* forma */
  --r-1:6px;      /* control: input, botón, item de nav, chip */
  --r-2:10px;     /* contenedor: tarjeta, panel, modal */
  --r-pill:999px;

  /* sombras — una sola familia, siempre difusa */
  --sh-1:0 1px 2px rgba(16,20,24,.07);
  --sh-2:0 8px 24px rgba(16,20,24,.10);
  --sh-3:0 18px 44px rgba(16,20,24,.16);

  /* ritmo */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --pad-page:28px 32px;   /* padding del contenido principal */
  --pad-card:18px 20px;
}

html[data-theme="dark"]{
  /* el lienzo sube un paso: así el aside negro se distingue del fondo.
     Antes --bg y --nav eran ambos #0a0c0f y el sidebar desaparecía. */
  --bg:#12161b;
  --card:#191e25;
  --panel:#1c222a;
  --sunken:#0f1318;

  --ink:#e8ecf1;
  --ink-2:#aeb7c1;
  --muted:#8a94a1;

  --line:#262c34;
  --line-2:#39414b;

  --accent:#FF7A2E;
  /* En OSCURO no hace falta oscurecer nada: aquí `--accent-ink` ya es tinta oscura
     (#17100a), y sobre el naranja de marca da 7.21:1. El 2.60:1 que se medía venía de
     las vistas, que escribían `color:#fff` a mano y se saltaban ese token. */
  --accent-solid:#FF7A2E;
  --accent-2:#EC6D1D;
  --accent-ink:#17100a;
  --accent-bg:#2c1a0d;

  --ok:#4ecb92;      --ok-bg:#12291f;
  --warn:#e5b04a;    --warn-bg:#2b2113;
  --danger:#f2836e;  --danger-bg:#2e1a16;
  --info:#4cbdf0;    --info-bg:#122631;

  --u-tracto:#4cb2e8;  --u-tracto-bg:#10222e;
  --u-camion:#3fc79f;  --u-camion-bg:#0f2620;
  --u-remol:#de93b8;   --u-remol-bg:#2a1722;

  --nav:#0a0c0f;
  --nav-line:#2e353f;      /* más claro que en tema claro: es el borde que separa */
  --nav-hover:#1b2028;
  --nav-group:#6d7684;

  --fx-dot:rgba(232,236,241,.44);
  --fx-link:rgba(232,236,241,.18);
  --fx-hot:rgba(255,122,46,.80);
  --fx-glow-a:rgba(255,122,46,.20);
  --fx-glow-b:rgba(76,189,240,.16);

  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 8px 24px rgba(0,0,0,.50);
  --sh-3:0 18px 44px rgba(0,0,0,.62);
}

/* ------------------------------------------------------------ 2. CIMIENTOS */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:var(--t-body);
  -webkit-font-smoothing:antialiased}
body{min-height:100vh;min-height:100dvh}
h1,h2,h3,h4,h5{margin:0;font-family:var(--f-sans);font-weight:600;letter-spacing:0}
h1{font:var(--t-h1)}  h2{font:var(--t-h2)}  h3,h4,h5{font:var(--t-h3)}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2);text-decoration:underline}
input,select,textarea,button{font-family:inherit;color:inherit;font-size:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:var(--r-pill);
  border:3px solid var(--bg)}
.mono{font:var(--t-num);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes drift{0%,100%{transform:translate3d(-2%,-1.5%,0)}
                 50%{transform:translate3d(2%,1.5%,0)}}
@keyframes lane{to{stroke-dashoffset:-360}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.45}}

/* ------------------------------------------------------- 3. FONDO ANIMADO */
/* Una sola opacidad (1) en las 6 pantallas. Antes: .6 / .7 / .95 según el
   archivo, y las partículas se pintaban con alfa .14–.28 sobre --ink, por lo
   que en tema claro eran invisibles. Ahora el alfa vive en --fx-* y se calibra
   por tema. */
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:1}
.bgfx .glow{position:absolute;inset:-15%;animation:drift 30s ease-in-out infinite;
  background:
    radial-gradient(680px 460px at 16% 6%,  var(--fx-glow-a), transparent 70%),
    radial-gradient(760px 540px at 88% 94%, var(--fx-glow-b), transparent 70%)}
.bgfx canvas{position:absolute;inset:0;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){
  .bgfx .glow{animation:none}
  .bgfx canvas{display:none}
}

/* --------------------------------------------------------- 4. ESQUELETO */
.layout{position:relative;z-index:1;display:flex;min-height:100vh;align-items:stretch}

aside{flex:0 0 var(--nav-w);width:var(--nav-w);background:var(--nav);
  position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;
  padding:18px 12px 12px;
  /* la separación del lienzo: borde + elevación. Es lo que faltaba en oscuro. */
  border-right:1px solid var(--nav-line);
  box-shadow:6px 0 22px rgba(0,0,0,.16)}
html[data-theme="dark"] aside{box-shadow:8px 0 26px rgba(0,0,0,.42)}

.brand{padding:2px 6px 14px}
.brand img{width:132px;height:auto;display:block}
.brand .tag{display:flex;align-items:center;gap:var(--s-2);margin-top:11px}
.brand .tag i{width:7px;height:15px;background:var(--accent);transform:skewX(-22deg);
  flex:0 0 auto}
.brand .tag em{font:var(--t-eyebrow);letter-spacing:.22em;color:var(--nav-muted);
  font-style:normal;text-transform:uppercase}

nav{display:flex;flex-direction:column;gap:2px;flex:1;margin-top:var(--s-1);
  overflow-y:auto;overflow-x:hidden}
.grp{font:var(--t-eyebrow);letter-spacing:.22em;text-transform:uppercase;
  color:var(--nav-group);padding:16px 12px 6px}
.navbtn{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;
  cursor:pointer;padding:9px 12px;color:var(--nav-item);border-radius:var(--r-1);
  font:var(--t-strong);text-align:left;transition:color .12s,background .12s}
.navbtn:hover{color:var(--nav-ink);background:var(--nav-hover)}
.navbtn.on{color:var(--accent-ink);background:var(--accent-solid)}
.navbtn svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.navbtn .bdg{margin-left:auto;background:var(--danger);color:#fff;
  border-radius:var(--r-pill);font:var(--t-num);font-size:10px;min-width:19px;
  height:18px;display:grid;place-items:center;padding:0 5px}
.navbtn.on .bdg{background:var(--accent-ink);color:var(--accent)}

.uwrap{border-top:1px solid var(--nav-line);padding-top:13px;margin-top:2px;
  display:flex;align-items:center;gap:10px}
.uwrap .av{width:32px;height:32px;border:0;border-radius:var(--r-1);
  background:var(--u-tracto);color:#fff;font:var(--t-strong);display:grid;
  place-items:center;cursor:pointer;overflow:hidden;flex:0 0 auto}
.uwrap .nm{flex:1;min-width:0;font:var(--t-strong);color:var(--nav-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uwrap .rl{font:var(--t-eyebrow);letter-spacing:.12em;color:var(--nav-muted);
  text-transform:uppercase}

/* iconbtn DENTRO del aside: antes heredaba --card (blanco en tema claro) y
   quedaba un botón blanco sobre el sidebar negro. */
.uwrap .iconbtn,aside .iconbtn{background:transparent;border-color:var(--nav-line);
  color:var(--nav-muted)}
.uwrap .iconbtn:hover,aside .iconbtn:hover{background:var(--nav-hover);
  color:var(--nav-ink)}

main{flex:1;min-width:0;padding:0 0 var(--s-6)}
.topbar{position:sticky;top:0;z-index:5;padding:var(--s-4) 32px;display:flex;
  align-items:center;gap:var(--s-4);border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(10px)}
.crumb{font:var(--t-eyebrow);letter-spacing:.2em;color:var(--muted);
  text-transform:uppercase}
.title{font:var(--t-h2);margin:2px 0 0}
.content{padding:var(--pad-page);max-width:1520px}
.section{display:none}
.section.on{display:block;animation:rise .35s ease both}

/* ------------------------------------------------------- 5. COMPONENTES */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2);
  padding:var(--pad-card);box-shadow:var(--sh-1)}
.card>h3{font:var(--t-h3);margin-bottom:2px}
.card .sub{font:var(--t-num);color:var(--muted)}
.grid{display:grid;gap:var(--s-4)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s-4);margin-bottom:var(--s-5)}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2);
  padding:16px 18px;box-shadow:var(--sh-1)}
.kpi .l{font:var(--t-label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.kpi .v{font:var(--t-kpi);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  margin:10px 0 4px}
.kpi .s{font:var(--t-micro);color:var(--muted)}

table{width:100%;border-collapse:collapse}
th{padding:11px 16px;text-align:left;font:var(--t-label);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--line);font:var(--t-sm)}
td.mono{font:var(--t-num);font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--sunken)}
.tablewrap{overflow-x:auto;border-radius:var(--r-2)}

/* pastilla: una sola forma, un solo tamaño, color por par tinta+fondo */
.pill{display:inline-block;padding:3px 9px;border-radius:var(--r-pill);
  font:600 10px/1.5 var(--f-sans);letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap}
.pill.tracto  {background:var(--u-tracto-bg);color:var(--u-tracto)}
.pill.camion  {background:var(--u-camion-bg);color:var(--u-camion)}
.pill.remolque{background:var(--u-remol-bg);color:var(--u-remol)}
.pill.ok,.pill.conf{background:var(--ok-bg);color:var(--ok)}
.pill.pend,.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.venc,.pill.alta{background:var(--danger-bg);color:var(--danger)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.rech,.pill.neutro{background:var(--sunken);color:var(--muted)}

.btn{padding:9px 16px;border:1px solid var(--line-2);background:var(--card);
  color:var(--ink);font:var(--t-strong);cursor:pointer;border-radius:var(--r-1);
  transition:background .12s,border-color .12s}
.btn:hover{background:var(--sunken);border-color:var(--line-2)}
.btn.primary{background:var(--accent-solid);border-color:var(--accent-solid);
  color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.lg{padding:14px 18px;width:100%}

.iconbtn{width:36px;height:36px;border:1px solid var(--line-2);background:var(--card);
  border-radius:var(--r-1);cursor:pointer;display:grid;place-items:center;
  color:var(--ink);transition:background .12s}
.iconbtn:hover{background:var(--sunken)}
.iconbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;
  stroke-linejoin:round}

label{display:block;font:var(--t-label);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line-2);
  background:var(--sunken);color:var(--ink);border-radius:var(--r-1);
  font:400 15px/1.4 var(--f-sans);transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-bg)}
input::placeholder{color:var(--muted)}
.field{margin-bottom:var(--s-4)}

.panel{background:var(--panel);border:1px solid var(--line-2);
  border-radius:var(--r-2);box-shadow:var(--sh-3)}
.alert{display:flex;align-items:center;gap:var(--s-2);padding:10px 12px;
  border-radius:var(--r-1);font:var(--t-sm)}
.alert.danger{background:var(--danger-bg);color:var(--danger);
  border:1px solid color-mix(in oklab,var(--danger) 34%,transparent)}
.alert.ok{background:var(--ok-bg);color:var(--ok);
  border:1px solid color-mix(in oklab,var(--ok) 34%,transparent)}

/* ------------------------------------------------------------ 6. MÓVIL */
@media (max-width:860px){
  :root{--pad-page:18px 16px;--pad-card:16px}
  aside{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);
    transition:transform .22s ease}
  aside.open{transform:none}
  .topbar{padding:12px 16px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
}

/* --------------------------------------------------------- 7. IMPRESIÓN */
@media print{
  aside,.topbar,.bgfx,.btn,.iconbtn{display:none!important}
  .content{padding:0;max-width:none}
  .card,.kpi{break-inside:avoid;box-shadow:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}