/*
 * Marca Eníslate: la estación leída como su marquesina y su tótem de precios.
 *   - Azul marino de marquesina dueño de la franja de arriba; suelo claro y frío debajo.
 *   - Rojo, naranja, amarillo y verde: las barras del logo y el semáforo de cobertura.
 *   - Cifras en Barlow Condensed (los dígitos del tótem), interfaz en Barlow.
 *   - Íconos de trazo (Lucide, templates/_iconos.html), nunca emoji en la interfaz.
 * La usan la administración, el ingreso, el registro y el portal del personal. Ver DESIGN.md.
 */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/Barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/Barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/Barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/Barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 800; font-style: normal; font-display: swap; src: url("/static/fonts/Barlow-800.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/BarlowCondensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/BarlowCondensed-700.woff2") format("woff2"); }

:root {
    /* Marca */
    --e-marino: #0B2545;
    --e-marino-2: #163A66;
    --e-marino-tinta: #C9D6EA;
    --e-azul: #1767D2;
    --e-azul-hover: #1156B3;
    --e-azul-texto: #1560C4;
    --e-azul-suave: #E7F0FD;
    --e-rojo: #D92D2A;
    --e-naranja: #F07C1E;
    --e-amarillo: #F5B80F;
    --e-verde: #1F9A48;
    /* Estados: texto oscuro sobre fondo suave (contraste AA) */
    --e-bien: #146C34;
    --e-bien-suave: #E4F5EA;
    --e-atencion: #9A4A06;
    --e-atencion-suave: #FDF1DD;
    --e-mal: #B01E1E;
    --e-mal-suave: #FCEBEB;
    /* Neutros fríos */
    --e-suelo: #EDF1F6;
    --e-superficie: #FFFFFF;
    --e-superficie-2: #F5F7FA;
    --e-linea: #D5DCE6;
    --e-linea-suave: #E4E9F0;
    --e-tinta: #0E1A2B;
    --e-tinta-2: #3A4659;
    --e-tinta-3: #5A6678;
    /* Forma */
    --e-radio-s: 6px;
    --e-radio: 8px;
    --e-radio-l: 12px;
    --e-sombra-1: 0 1px 2px rgba(14, 26, 43, 0.06), 0 1px 3px rgba(14, 26, 43, 0.05);
    --e-sombra-2: 0 8px 20px -6px rgba(14, 26, 43, 0.16), 0 2px 5px rgba(14, 26, 43, 0.06);
    --e-sombra-3: 0 28px 56px -16px rgba(8, 23, 46, 0.40), 0 6px 14px rgba(8, 23, 46, 0.12);
    --e-foco: 0 0 0 3px rgba(23, 103, 210, 0.32);
    --e-letra: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --e-cifras: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    --e-rapido: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
    color-scheme: light;
}

body.dark-theme {
    --e-marino: #071630;
    --e-marino-2: #12305A;
    --e-azul: #2F74DE;
    --e-azul-hover: #4A88EA;
    --e-azul-texto: #8DB8FF;
    --e-azul-suave: #152A4D;
    --e-bien: #6FD69A;
    --e-bien-suave: #11301F;
    --e-atencion: #F6BD6A;
    --e-atencion-suave: #34250F;
    --e-mal: #F79292;
    --e-mal-suave: #3B1719;
    --e-suelo: #0A1220;
    --e-superficie: #111B2C;
    --e-superficie-2: #0E1727;
    --e-linea: #26344B;
    --e-linea-suave: #1C283C;
    --e-tinta: #E6ECF5;
    --e-tinta-2: #B5C2D5;
    --e-tinta-3: #8E9CB2;
    --e-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --e-sombra-2: 0 10px 24px -8px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
}

/* ----- Superficies del navegador que también llevan la marca ----- */
::selection { background: rgba(23, 103, 210, 0.24); color: inherit; }
input, textarea { caret-color: var(--e-azul); }
:focus-visible { outline: 2px solid var(--e-azul); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: #B6C1D2 transparent; }
body.dark-theme * { scrollbar-color: #33435D transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #B6C1D2; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
body.dark-theme ::-webkit-scrollbar-thumb { background: #33435D; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ----- Íconos ----- */
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.girando { animation: e-girar 0.9s linear infinite; }
@keyframes e-girar { to { transform: rotate(360deg); } }

/* ----- Logotipo: símbolo en su placa blanca + Eníslate ----- */
.marca { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; min-width: 0; }
.marca-simbolo { width: 34px; height: 34px; flex: none; padding: 3px; border-radius: 9px; background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
/* "Eníslate" es un trazo (templates/_iconos.html, #marca-nombre): Barlow 800 ya convertida, nunca sale en otra letra.
   font-size fija el tamaño como si fuera texto; el alto del trazo es el de las mayúsculas y el acento. */
.marca-nombre { font-size: 21px; height: 0.708em; width: auto; aspect-ratio: 3373 / 708; flex: none; fill: currentColor; overflow: visible; }

/* ----- Franja de la marquesina: las cuatro barras del logo ----- */
.franja-semaforo { display: grid; grid-template-columns: repeat(4, 1fr); height: 4px; flex: none; }
.franja-semaforo i:nth-child(1) { background: var(--e-rojo); }
.franja-semaforo i:nth-child(2) { background: var(--e-naranja); }
.franja-semaforo i:nth-child(3) { background: var(--e-amarillo); }
.franja-semaforo i:nth-child(4) { background: var(--e-verde); }

/* ----- La luz de AHORA: un LED que siempre dice dónde está el presente ----- */
.led-ahora { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--e-verde); flex: none;
    box-shadow: 0 0 0 3px rgba(31, 154, 72, 0.22); animation: e-led 2.4s ease-in-out infinite; }
@keyframes e-led { 50% { box-shadow: 0 0 0 5px rgba(31, 154, 72, 0.08); } }

@media (prefers-reduced-motion: reduce) {
    .girando { animation-duration: 2.4s; }
    .led-ahora { animation: none; }
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}