/* ============================================================================
   NAOS · Tokens de diseño
   Fuente única de verdad para toda la UI (web y móvil Android). Ningún
   componente define colores, tamaños ni sombras a mano: todo sale de aquí.

   Reglas que vienen de la UX (docs/ux/13 y 15) y que estos tokens hacen cumplir:
   · Silencio por defecto: la base es neutra; el color solo emerge en excepciones.
   · La señal NUNCA es solo color: cada severidad trae icono + texto + posición.
   · Honestidad de latencia: en vivo / última posición / provisional se distinguen.
   · Legible a distancia de sala de control y operable con teclado.

   REGLA DE MARCA (decisión D9): el rojo es la MARCA (presentaciones, stand,
   logo). Dentro de la app casi no aparece: el botón primario es TINTA neutra.
   Así el rojo dentro del lienzo de trabajo significa una sola cosa: CRÍTICO.
   ============================================================================ */

/* Inter autoalojada (nunca desde un CDN: la CSP solo admite el mismo origen, y
   además evita una dependencia externa en una app que puede correr aislada).
   Es la fuente VARIABLE: un solo archivo de 344 KB cubre los pesos 100–900, en
   vez de cuatro archivos estáticos. Licencia SIL Open Font — ver fonts/LICENSE.txt */
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;   /* el texto se lee de inmediato con la fuente del sistema */
  src: url("/fonts/InterVariable.woff2") format("woff2");
}

/* Archivo: la voz de la MARCA. Titulares de la portada pública, del stand y del
   material impreso. No entra al lienzo de trabajo —ahí manda Inter—, así que se
   descarga solo en las páginas públicas. Subconjunto latino: 35 KB para 400–900. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/Archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* JetBrains Mono: reservada a lo que se compara carácter por carácter —folios,
   SKU, hashes, coordenadas—. Distingue 0/O y 1/l/I sin ambigüedad, y un folio mal
   leído es un movimiento mal atribuido. Las cifras de tablero NO van aquí: van en
   Inter con numerales tabulares, que alinean igual y pesan menos. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
  color-scheme: light dark;

  /* ---------------------------------------------------------------------
     1. MARCA — rojo NAOS. Uso: logo, portadas, marketing, material impreso.
     Dentro de la app: solo la marca del encabezado y el indicador de sección
     activa. Nunca como fondo de botones de acción.
     --------------------------------------------------------------------- */
  --naos-red-700: #8f1524;   /* fondo profundo de portada */
  --naos-red-600: #b3182c;   /* marca sobre fondo claro */
  --naos-red-500: #d4213a;   /* marca plena */
  --naos-red-400: #ef5c68;   /* marca sobre fondo oscuro */
  --naos-red-100: #fde9eb;   /* lavado, para realces impresos */

  --brand: var(--naos-red-600);
  --brand-contrast: #ffffff;         /* texto sobre la marca */
  --brand-surface: var(--naos-red-100);

  /* ---------------------------------------------------------------------
     2. NEUTROS — la base. Gris levemente frío para que el rojo respire.
     Ni blanco puro ni negro puro (fatiga en turnos largos).
     --------------------------------------------------------------------- */
  --bg: #f4f6f8;             /* lienzo de la app */
  --surface: #ffffff;        /* tarjetas, paneles */
  --surface-2: #fafbfc;      /* superficie hundida: encabezados de tabla, código */
  --surface-3: #eef1f5;      /* seleccionado / hover sobre superficie */
  --line: #e2e6eb;           /* bordes y separadores */
  --line-strong: #cbd2db;    /* borde de un control */

  --ink: #151a21;            /* texto principal */
  --ink-muted: #5a6572;      /* texto secundario */
  --ink-faint: #8b95a1;      /* metadatos, marcas de tiempo */
  --ink-inverse: #ffffff;

  /* ---------------------------------------------------------------------
     3. ACCIÓN — el primario de la app es TINTA, no la marca (ver regla D9).
     Alto contraste, no compite con la severidad, funciona en ambos temas.
     --------------------------------------------------------------------- */
  --action: #1b2330;               /* botón primario */
  --action-hover: #2a3547;
  --action-contrast: #ffffff;
  --action-soft: #eef1f5;          /* botón secundario / chip activo */

  /* Destructivo: separado del primario y de la severidad (bloqueo, borrado). */
  --danger: #b3182c;
  --danger-contrast: #ffffff;
  --danger-surface: #fde9eb;

  /* ---------------------------------------------------------------------
     4. SEVERIDAD — los 4 niveles del doc 15. SIEMPRE acompañados de icono y
     etiqueta: `--sev-*-icon` nombra el símbolo, nunca se usa el color solo.
     --------------------------------------------------------------------- */
  --sev-critical: #d92d20;
  --sev-critical-surface: #fdecea;
  --sev-critical-icon: "error";              /* Material Symbols */

  --sev-high: #d4700a;
  --sev-high-surface: #fdf0e3;
  --sev-high-icon: "warning";

  --sev-medium: #b58900;
  --sev-medium-surface: #fbf5e0;
  --sev-medium-icon: "info";

  --sev-info: #4a6da8;
  --sev-info-surface: #ecf1fa;
  --sev-info-icon: "notifications";

  --sev-ok: #1f8a53;                         /* normalidad / resuelto */
  --sev-ok-surface: #e7f5ed;
  --sev-ok-icon: "check_circle";

  /* ---------------------------------------------------------------------
     5. FRESCURA DEL DATO — principio de honestidad de latencia (doc 13 §2.7).
     Un mapa que miente sobre la frescura es peligroso.
     --------------------------------------------------------------------- */
  --fresh-live: #1f8a53;         /* en vivo, reportando ahora */
  --fresh-stale: #d4700a;        /* última posición hace X min */
  --fresh-offline: #8b95a1;      /* sin señal */
  --data-provisional: #4a6da8;   /* cifra del mes en curso, aún cambia */

  /* Estado de una alerta: nueva → reconocida → en proceso → resuelta. */
  --state-new: #d92d20;
  --state-ack: #4a6da8;
  --state-progress: #d4700a;
  --state-resolved: #1f8a53;

  /* ---------------------------------------------------------------------
     6. TIPOGRAFÍA — Inter (autoalojada, no CDN). Escala fluida con clamp:
     la misma escala sirve en móvil y en pantalla de sala.
     --------------------------------------------------------------------- */

  /* ---------------------------------------------------------------------
     10. MAPA — el fondo sobre el que se dibuja la flota.

     Son tokens propios y no reutilizan las superficies de la interfaz por una
     razón: un mapa necesita que el suelo, las manzanas y las vialidades se
     distingan ENTRE SÍ sin robarle contraste a lo que importa encima, que son
     los camiones y sus recorridos. Deliberadamente apagados: el mapa es el
     fondo, no el contenido.

     El día que haya un mapa real, estos tokens se convierten en el estilo que
     se le pasa al proveedor. --------------------------------------------- */
  --map-land: #eef1f5;         /* suelo */
  --map-block: #e2e6eb;        /* manzanas */
  --map-road: #f7f9fb;         /* calles secundarias */
  --map-road-major: #ffffff;   /* vialidades principales */
  --map-water: #cfe0ee;        /* canal */
  --map-park: #d8e6d5;         /* área verde */
  --map-label: #8b95a1;        /* nombres de vialidad */

  --font-sans: "InterVariable", "Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-display: "Archivo", "InterVariable", system-ui, sans-serif;  /* solo marca y páginas públicas */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-display: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);   /* portada, cifras enormes */
  --text-h1: clamp(1.4rem, 1.2rem + 0.9vw, 1.875rem);
  --text-h2: clamp(1.175rem, 1.05rem + 0.55vw, 1.4rem);
  --text-h3: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-body: 0.9375rem;      /* 15px: cómodo para lectura sostenida */
  --text-small: 0.8125rem;     /* 13px: metadatos, apoyo */
  --text-caption: 0.75rem;     /* 12px: mínimo legible; no bajar de aquí */
  --text-stat: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);      /* cifra "de un vistazo" */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;       /* titulares */
  --leading-snug: 1.35;        /* UI densa */
  --leading-normal: 1.55;      /* texto corrido */

  --tracking-tight: -0.02em;   /* titulares grandes */
  --tracking-normal: 0;
  --tracking-label: 0.08em;    /* etiquetas en mayúsculas */

  --measure: 65ch;             /* ancho máximo de lectura cómoda */

  /* ---------------------------------------------------------------------
     7. ESPACIADO — escala de 4px. Usar gap en flex/grid, no márgenes sueltos.
     --------------------------------------------------------------------- */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */

  /* ---------------------------------------------------------------------
     8. FORMA Y PROFUNDIDAD — esquinas suaves (nada cuadrado), profundidad por
     sombra sutil. Sin blur ni degradados visibles (decisión D3/D9).
     --------------------------------------------------------------------- */
  --radius-sm: 6px;      /* chips, etiquetas */
  --radius-md: 10px;     /* botones, campos */
  --radius-lg: 14px;     /* tarjetas, paneles */
  --radius-xl: 20px;     /* contenedores destacados, hojas móviles */
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 2px 8px rgba(16, 24, 40, 0.07);
  --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.10);
  --shadow-none: none;

  /* ---------------------------------------------------------------------
     9. ACCESIBILIDAD Y TACTO
     48px es el objetivo táctil mínimo de Android; se respeta también en web
     para que la misma UI sirva en tableta de almacén.
     --------------------------------------------------------------------- */
  --tap-min: 48px;
  --control-height: 40px;        /* alto de botón/campo en escritorio */
  --focus-ring: 2px solid var(--action);
  --focus-offset: 2px;
  --focus-ring-contrast: 2px solid #ffffff;  /* halo sobre fondos de color */

  /* -------------------------------------------------------------------
     10. MOVIMIENTO — corto y funcional. Se anula con prefers-reduced-motion.
     ------------------------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ------------------------------------------------------------------- */
  /* 11. CAPAS                                                            */
  /* ------------------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 100;      /* encabezado, barra de estado */
  --z-overlay: 200;     /* panel lateral, hoja móvil */
  --z-modal: 300;       /* confirmación de acción de alto impacto */
  --z-toast: 400;       /* avisos efímeros */

  /* ---------------------------------------------------------------------
     12. DISPOSICIÓN RESPONSIVA
     Puntos de quiebre pensados para el recorrido real: teléfono del chofer →
     tableta de almacén → escritorio del operador → pantalla de sala.
     --------------------------------------------------------------------- */
  --bp-sm: 30rem;      /* 480px  · teléfono grande */
  --bp-md: 48rem;      /* 768px  · tableta */
  --bp-lg: 64rem;      /* 1024px · escritorio */
  --bp-xl: 80rem;      /* 1280px · escritorio amplio */
  --bp-wall: 100rem;   /* 1600px · pantalla de sala de control */

  --container: 88rem;              /* ancho máximo del contenido */
  --container-pad: var(--space-4);
  --sidebar-w: 15rem;              /* navegación lateral en escritorio */
  --detail-w: 26rem;               /* panel de detalle junto al mapa */
}

/* ===========================================================================
   TEMA OSCURO — mismo sistema, no una inversión ingenua. Los colores de
   severidad suben de luminosidad para mantener contraste sobre fondo oscuro.
   Se define en tres capas: preferencia del sistema y ambos data-theme, para
   que el interruptor del usuario gane siempre.
   =========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1218;
    --surface: #171c24;
    --surface-2: #1e242e;
    --surface-3: #262e3a;
    --line: #28303b;
    --line-strong: #3a4553;

    --ink: #e8ecf1;
    --ink-muted: #93a0af;
    --ink-faint: #6b7684;
    --ink-inverse: #0e1218;

    --brand: var(--naos-red-400);
    --brand-surface: #2a1418;

    --action: #e8ecf1;
    --action-hover: #ffffff;
    --action-contrast: #0e1218;
    --action-soft: #262e3a;

    --danger: #ef5c68;
    --danger-contrast: #16070a;
    --danger-surface: #2a1418;


    /* Mapa nocturno. No es la inversión del claro: el suelo se oscurece MÁS que
       las manzanas para que la retícula siga leyéndose, y el agua conserva algo
       de saturación porque en oscuro es lo único que orienta de un vistazo. */
    --map-land: #12161d;
    --map-block: #1b212a;
    --map-road: #232b36;
    --map-road-major: #2f3946;
    --map-water: #16303f;
    --map-park: #17281c;
    --map-label: #5d6875;

    --sev-critical: #ff6b63;  --sev-critical-surface: #2e1512;
    --sev-high: #f2a14b;      --sev-high-surface: #2c1e0d;
    --sev-medium: #ddb63c;    --sev-medium-surface: #2a2410;
    --sev-info: #7fa1dd;      --sev-info-surface: #16203a;
    --sev-ok: #4cc487;        --sev-ok-surface: #10281d;

    --fresh-live: #4cc487;
    --fresh-stale: #f2a14b;
    --fresh-offline: #6b7684;
    --data-provisional: #7fa1dd;

    --state-new: #ff6b63;
    --state-ack: #7fa1dd;
    --state-progress: #f2a14b;
    --state-resolved: #4cc487;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);

    --focus-ring: 2px solid #7fa1dd;
  }
}

/* El interruptor del usuario manda sobre la preferencia del sistema. */
/* `color-scheme` le dice al NAVEGADOR de qué color pintar lo que dibuja él y no la hoja de
   estilos: casillas, listas desplegables, barras de desplazamiento. Con solo `light dark` en
   :root sigue la preferencia del sistema — y entonces alguien con el sistema en oscuro que
   elija el tema claro se encuentra la página clara con las casillas negras. Se ve mal y parece
   un fallo de otra cosa.

   Por eso cada tema forzado declara el suyo: si el usuario manda, manda del todo. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1218;
  --surface: #171c24;
  --surface-2: #1e242e;
  --surface-3: #262e3a;
  --line: #28303b;
  --line-strong: #3a4553;

  --ink: #e8ecf1;
  --ink-muted: #93a0af;
  --ink-faint: #6b7684;
  --ink-inverse: #0e1218;

  --brand: var(--naos-red-400);
  --brand-surface: #2a1418;

  --action: #e8ecf1;
  --action-hover: #ffffff;
  --action-contrast: #0e1218;
  --action-soft: #262e3a;

  --danger: #ef5c68;
  --danger-contrast: #16070a;
  --danger-surface: #2a1418;


  /* Mapa nocturno. No es la inversión del claro: el suelo se oscurece MÁS que
     las manzanas para que la retícula siga leyéndose, y el agua conserva algo
     de saturación porque en oscuro es lo único que orienta de un vistazo. */
  --map-land: #12161d;
  --map-block: #1b212a;
  --map-road: #232b36;
  --map-road-major: #2f3946;
  --map-water: #16303f;
  --map-park: #17281c;
  --map-label: #5d6875;

  --sev-critical: #ff6b63;  --sev-critical-surface: #2e1512;
  --sev-high: #f2a14b;      --sev-high-surface: #2c1e0d;
  --sev-medium: #ddb63c;    --sev-medium-surface: #2a2410;
  --sev-info: #7fa1dd;      --sev-info-surface: #16203a;
  --sev-ok: #4cc487;        --sev-ok-surface: #10281d;

  --fresh-live: #4cc487;
  --fresh-stale: #f2a14b;
  --fresh-offline: #6b7684;
  --data-provisional: #7fa1dd;

  --state-new: #ff6b63;
  --state-ack: #7fa1dd;
  --state-progress: #f2a14b;
  --state-resolved: #4cc487;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);

  --focus-ring: 2px solid #7fa1dd;
}

:root[data-theme="light"] {
  color-scheme: light;
  /* Tiene que revertir TODO lo que cambia el bloque oscuro, no una parte.
     Antes solo repetía seis tokens: con el sistema en oscuro y la persona eligiendo claro, el
     resto —superficies hundidas, filetes, textos secundarios, severidades y el mapa— se quedaba
     en sus valores oscuros y la pantalla salía a medio pintar. Un tema a medias es peor que no
     tener interruptor. Esta lista se genera a partir de los tokens que el oscuro toca, así que
     añadir uno nuevo allí y olvidarlo aquí vuelve a romperlo: al tocar el bloque oscuro, revisa
     este. */
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --surface-3: #eef1f5;
  --line: #e2e6eb;
  --line-strong: #cbd2db;
  --ink: #151a21;
  --ink-muted: #5a6572;
  --ink-faint: #8b95a1;
  --ink-inverse: #ffffff;
  --brand: var(--naos-red-600);
  --brand-surface: var(--naos-red-100);
  --action: #1b2330;
  --action-hover: #2a3547;
  --action-contrast: #ffffff;
  --action-soft: #eef1f5;
  --danger: #b3182c;
  --danger-contrast: #ffffff;
  --danger-surface: #fde9eb;
  --map-land: #eef1f5;
  --map-block: #e2e6eb;
  --map-road: #f7f9fb;
  --map-road-major: #ffffff;
  --map-water: #cfe0ee;
  --map-park: #d8e6d5;
  --map-label: #8b95a1;
  --sev-critical: #d92d20;
  --sev-critical-surface: #fdecea;
  --sev-high: #d4700a;
  --sev-high-surface: #fdf0e3;
  --sev-medium: #b58900;
  --sev-medium-surface: #fbf5e0;
  --sev-info: #4a6da8;
  --sev-info-surface: #ecf1fa;
  --sev-ok: #1f8a53;
  --sev-ok-surface: #e7f5ed;
  --fresh-live: #1f8a53;
  --fresh-stale: #d4700a;
  --fresh-offline: #8b95a1;
  --data-provisional: #4a6da8;
  --state-new: #d92d20;
  --state-ack: #4a6da8;
  --state-progress: #d4700a;
  --state-resolved: #1f8a53;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 2px 8px rgba(16, 24, 40, 0.07);
  --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.10);
  --focus-ring: 2px solid var(--action);
}

/* ===========================================================================
   DENSIDAD — la misma UI se opera de cerca (escritorio) y de lejos (sala de
   control). La densidad escala tipografía y alturas sin rehacer componentes.
   Se aplica con data-density en el contenedor.
   =========================================================================== */
[data-density="compact"] {
  --text-body: 0.875rem;
  --text-small: 0.75rem;
  --control-height: 32px;
  --space-4: 0.75rem;
}

/* Sala de control: legible a distancia (principio de accesibilidad, doc 13). */
[data-density="sala"] {
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-caption: 0.875rem;
  --control-height: 48px;
  --text-stat: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* ===========================================================================
   BASE — lo mínimo para que los tokens se noten sin imponer componentes.
   =========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* Foco visible solo con teclado: la UI debe ser operable sin ratón. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* Cifras alineadas en columnas (tableros, tablas, contadores). */
.tabular { font-variant-numeric: tabular-nums; }

/* Etiquetas en mayúsculas necesitan aire entre letras. */
.label {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Contenido ancho (tablas, mapas) desplaza dentro de su caja, nunca la página. */
.scroll-x { overflow-x: auto; }

/* Objetivo táctil mínimo en cualquier control interactivo. */
.tappable { min-height: var(--tap-min); min-width: var(--tap-min); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}