/* ════════════════════════════════════════════════════════════
   CENTRAL DE ÁNGELES — DESIGN TOKENS
   ⚠ FUENTE DE VERDAD del design system.
   cean-design-system-v2.html consume este archivo vía <link>.
   No dupliques estos valores en otros CSS ni en HTML embebido.
   ════════════════════════════════════════════════════════════ */

/* ── LIGHT MODE (default) ──────────────────────────────── */
:root {
  /* Fondos */
  --bg:             #E8EEF7;
  --surface:        #F2F6FB;
  --surface-2:      #FFFFFF;
  --surface-3:      #EBF0F9;

  /* Bordes */
  --border-1:       #C8D6EC;
  --border-2:       #D8E4F2;
  --border-3:       #E8EEF7;

  /* Acentos */
  --electric:       #0057FF;
  --electric-light: #E8EFFE;
  --electric-dim:   rgba(0,87,255,0.08);
  --electric-hover: #0047D4;
  /* Electric como TEXTO/link sobre superficies. En light = electric;
     en dark se aclara para no vibrar sobre fondos oscuros.
     Usar este (no --electric) para color de texto, links y acentos. */
  --electric-text:  #0057FF;
  /* Texto/iconos sobre un fondo de acento sólido (botón azul, avatar,
     burbuja saliente). Blanco en ambos temas: el acento es oscuro siempre. */
  --text-on-accent: #FFFFFF;
  /* Contorno blanco de los marcadores/pines del mapa (contraste sobre el mapa). */
  --marker-stroke:  #FFFFFF;

  --gps:            #00A86B;
  --gps-light:      #E6F7F2;
  --gps-hover:      #008F5A;

  /* Texto — text-3/text-4 cumplen AA (≥4.5:1) sobre surface-2 */
  --text-1:         #0F2044;
  --text-2:         #2D4A7A;
  --text-3:         #48679B;
  --text-4:         #5D739C;

  /* Estados (fondos/acentos gráficos) */
  --success:        #00A86B;
  --success-light:  #E6F7F2;
  --warning:        #D97706;
  --warning-light:  #FEF3C7;
  --danger:         #DC2626;
  --danger-light:   #FEE2E2;
  --info:           #2563EB;
  --info-light:     #EFF6FF;

  /* Texto de estado sobre fondos *-light (badges, alertas, chips).
     Más oscuros que --success/--warning/etc. para pasar AA en
     tamaños pequeños; en dark mode apuntan a los colores brillantes. */
  --success-text:   #05603A;
  --warning-text:   #92400E;
  --danger-text:    #B91C1C;
  --info-text:      #1D4ED8;

  /* Bordes de estado (para badges/alertas/cards *-light). Adaptan por
     tema — usar estos, no rgba() literales del acento light. */
  --success-border:  rgba(0,168,107,0.25);
  --warning-border:  rgba(217,119,6,0.25);
  --danger-border:   rgba(220,38,38,0.25);
  --info-border:     rgba(37,99,235,0.25);
  --electric-border: rgba(0,87,255,0.25);

  /* Controles */
  --toggle-track:   #7189AE;

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(15,32,68,0.08), 0 1px 2px rgba(15,32,68,0.04);
  --shadow-md:  0 4px 12px rgba(15,32,68,0.10), 0 2px 6px rgba(15,32,68,0.06);
  --shadow-lg:  0 8px 24px rgba(15,32,68,0.12);
  --shadow-gps: 0 0 0 3px rgba(0,168,107,0.20);
  --shadow-el:  0 4px 14px rgba(0,87,255,0.25);

  /* Tipografías */
  --font-display:   'Space Grotesk', sans-serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* Escala tipográfica — ÚNICA fuente de tamaños de texto.
     Los componentes deben usar estos tokens, no valores en rem sueltos.
     (1rem = 16px). Rango UI abajo; display para números/héroes. */
  --text-2xs:  0.625rem;   /* 10px — labels diminutos, timestamps, caps */
  --text-xs:   0.6875rem;  /* 11px — secundario, metadatos */
  --text-sm:   0.75rem;    /* 12px — texto base de UI (el más usado) */
  --text-base: 0.8125rem;  /* 13px — cuerpo cómodo, celdas */
  --text-md:   0.875rem;   /* 14px — títulos de card, énfasis */
  --text-lg:   1rem;       /* 16px — subtítulos */
  --text-xl:   1.125rem;   /* 18px — títulos de sección */
  --text-2xl:  1.25rem;    /* 20px — títulos grandes */
  --display-sm: 1.375rem;  /* 22px — número de stat chico */
  --display-md: 1.75rem;   /* 28px — número de stat */
  --display-lg: 2rem;      /* 32px — número destacado */
  --display-xl: 2.5rem;    /* 40px — héroe */

  /* Pesos */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Espaciado — escala para gaps/padding de layout.
     Ajustes finos internos de componentes pueden usar valores
     pares intermedios (6/10/14/18px) en literal. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-card: 14px;   /* cards de datos: stat, tabla, mapa, feed */
  --radius-full: 9999px;

  /* Layout */
  --sidebar-w:  220px;
  --topbar-h:   60px;

  /* Capas (z-index) — contrato de apilamiento a nivel APP. Usa estos para
     todo lo que flota sobre el contenido, en orden de menor a mayor.
     NOTA: el mapa (.map-card) crea su propio contexto de apilamiento y
     maneja sus capas internas con enteros locales pequeños; no toca esta escala. */
  --z-sticky:        10;   /* topbar */
  --z-sidebar:       20;   /* sidebar (desktop) */
  --z-overlay:       30;   /* backdrop del sidebar móvil */
  --z-drawer:        40;   /* panel del sidebar móvil (off-canvas) */
  --z-dropdown:      60;   /* menús flotantes: refresh, futuros dropdowns */
  --z-modal-overlay: 200;  /* backdrop de modales/popups */
  --z-modal:         201;  /* modales/popups (pin-popup) */

  /* Logo (color en light, original en dark) */
  --logo-filter: invert(1) sepia(1) saturate(5) hue-rotate(190deg) brightness(0.4);
}

/* ── DARK MODE ─────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:             #0A1628;
  --surface:        #111F3A;
  --surface-2:      #1E2D4A;
  --surface-3:      #243558;

  --border-1:       rgba(0,229,160,0.15);
  --border-2:       rgba(176,197,222,0.10);
  --border-3:       rgba(176,197,222,0.06);

  --electric:       #0057FF;
  --electric-light: rgba(0,87,255,0.15);
  --electric-dim:   rgba(0,87,255,0.08);
  --electric-hover: #0047D4;
  /* Aclarado para texto/links sobre fondos oscuros (AA sobre surface-2) */
  --electric-text:  #6BA5FF;

  --gps:            #00E5A0;
  --gps-light:      rgba(0,229,160,0.10);
  --gps-hover:      #00C48A;

  /* Texto — aclarados para pasar AA sobre surface-2 (#1E2D4A) */
  --text-1:         #F0F4FF;
  --text-2:         #B8C5DE;
  --text-3:         #9FB0D0;
  --text-4:         #8296BD;

  --success:        #00E5A0;
  --success-light:  rgba(0,229,160,0.12);
  --warning:        #F59E0B;
  --warning-light:  rgba(245,158,11,0.12);
  --danger:         #EF4444;
  --danger-light:   rgba(239,68,68,0.12);
  --info:           #3B82F6;
  --info-light:     rgba(59,130,246,0.12);

  /* En dark los brillantes sí contrastan sobre los fondos translúcidos */
  --success-text:   #00E5A0;
  --warning-text:   #F59E0B;
  --danger-text:    #F87171;
  --info-text:      #60A5FA;

  /* Bordes de estado — rgba del acento brillante de dark */
  --success-border:  rgba(0,229,160,0.28);
  --warning-border:  rgba(245,158,11,0.28);
  --danger-border:   rgba(239,68,68,0.28);
  --info-border:     rgba(59,130,246,0.28);
  --electric-border: rgba(107,165,255,0.30);

  --toggle-track:   rgba(176,197,222,0.30);

  --shadow-sm:  0 1px 4px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.5);
  --shadow-gps: 0 0 20px rgba(0,229,160,0.2);
  --shadow-el:  0 0 20px rgba(0,87,255,0.25);

  --logo-filter: none;
--l-nav-bg:var(--bg);
}

/* ── RESET / BASE ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  transition: background 0.3s ease, color 0.3s ease;
}
a { color: inherit; text-decoration: none; }

/* Legibilidad móvil: escala todo lo dimensionado en rem */
@media (max-width: 600px) {
  html { font-size: 17px; }
}

/* Foco visible para navegación por teclado (global) */
:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 2px;
}

/* Solo lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

/* Scrollbar global */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-1); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }