/* ============================================================
   SAM — Design Tokens ("Cyber-Municipal Command")
   Fuente de verdad: DESIGN.md (frontmatter). No hardcodear
   colores fuera de este archivo.
   ============================================================ */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url('../assets/fonts/montserrat-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url('../assets/fonts/montserrat-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Widgets nativos (calendario, dropdowns, scrollbars) en oscuro,
     acordes al tema — el picker de <input type=date> hereda esto. */
  color-scheme: dark;

  /* ---- Breakpoints (capas INTENCIONALES, no inconsistencia) ----
     900  = ESTRUCTURA (fuente de verdad: sdk/device.js lee este token):
            phone < 900 <= desktop. Shell, launcher, capas del livechat.
     700  = TABLAS → tarjetas apiladas (kernel .table y tabla SDUI): una
            tabla se asfixia antes que el resto del layout.
     640  = ajuste fino SDUI (botones a lo ancho, tiles 2 col, grids a 1 col).
     Las media queries de CSS NO pueden usar var() en @media: van con el
     literal (899.98px, etc.) — si cambias esto, cámbialas. */
  --bp-phone-max: 900;

  /* ---- Superficies ---- */
  /* Lienzo base. NO es negro puro a propósito: el contraste del 100% contra el
     texto claro produce halación en pantallas OLED —el texto "vibra" y sangra,
     sobre todo con astigmatismo— que es el error que la Biblia UX señala en el
     cap. 27. #121212 conserva el efecto "LED" de los acentos cian de DESIGN.md
     sin quemar. Decisión tomada por el equipo: manda la Biblia sobre el
     #000000 que pedía DESIGN.md. */
  --c-black: #121212;
  --c-midnight: #00012e;
  --c-surface: #0e1320;
  --c-surface-bright: #343947;
  --c-surface-lowest: #090e1b;
  --c-surface-low: #161b29;
  --c-surface-container: #1a1f2d;
  --c-surface-high: #252a38;
  --c-surface-highest: #303443;
  --c-surface-variant: #303443;
  /* Panel de vidrio estándar (DESIGN §Elevation) */
  --c-glass: rgba(13, 18, 31, 0.8);
  --c-glass-strong: rgba(13, 18, 31, 0.92);

  /* ---- Texto ---- */
  --c-text: #dee2f5;
  --c-text-variant: #bdc8d1;
  --c-text-muted: rgba(222, 226, 245, 0.62);
  --c-text-cyan: #a5f3fc;
  --c-inverse-surface: #dee2f5;
  --c-inverse-on-surface: #2b303e;

  /* ---- Primario (Electric Cyan) ---- */
  /* Triplete RGB del acento: TODO rgba() de acento del CSS deriva de aquí
     (rgba(var(--c-primary-rgb), α)) — así los temas del panel re-tiñen fondo
     animado, rail y glows pisando UN token. Espejo: derivedVars en core.js. */
  --c-primary-rgb: 56, 189, 248;
  --c-secondary-rgb: 3, 198, 178;
  --c-primary: #8ed5ff;
  --c-on-primary: #00354a;
  --c-primary-container: #38bdf8;
  --c-on-primary-container: #004965;
  --c-primary-bright: #38bdf8;
  --c-primary-dim: #7bd0ff;
  --c-primary-glow: rgba(var(--c-primary-rgb), 0.3);
  --c-primary-glow-soft: rgba(var(--c-primary-rgb), 0.16);
  --c-primary-text-shadow: rgba(var(--c-primary-rgb), 0.4);

  /* ---- Secundario (Teal-Turquoise) ---- */
  --c-secondary: #44e2cd;
  --c-on-secondary: #003731;
  --c-secondary-container: #03c6b2;
  --c-on-secondary-container: #004d44;

  /* ---- Terciario ---- */
  --c-tertiary: #b1ceff;
  --c-on-tertiary: #00305f;
  --c-tertiary-container: #7fb3ff;
  --c-on-tertiary-container: #004482;

  /* ---- Estado ---- */
  --c-error: #ffb4ab;
  --c-on-error: #690005;
  --c-error-container: #93000a;
  --c-on-error-container: #ffdad6;
  --c-ok: #4ade80;
  --c-warn: #fbbf24;
  /* Nota informativa (alert/badge info): SEMÁNTICO, no marca. Fijo por defecto
     para que una nota destaque contra cualquier tema; editable por tema como
     semilla `info` (igual que ok/warn/error). */
  --c-info: #60a5fa;
  --c-whatsapp: #25d366;

  /* ---- Bordes ---- */
  --c-outline: #87929a;
  --c-outline-variant: #3e484f;
  --c-border-glass: rgba(var(--c-primary-rgb), 0.35);
  --c-border-glass-strong: rgba(var(--c-primary-rgb), 0.65);

  /* ---- Tipografía ---- */
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Radios ---- */
  --r-sm: 0.25rem;
  --r: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-full: 9999px;

  /* ---- Espaciado (unidad 5px) ---- */
  --sp-unit: 5px;
  --sp-xs: 10px;
  --sp-sm: 15px;
  --sp-md: 20px;
  --sp-lg: 25px;
  --sp-xl: 30px;
  --sp-xxl: 40px;
  --sp-section: 100px;
  --mobile-max: 420px;

  /* ---- Touch (Biblia cap.5: mínimo 44/48px) ---- */
  --touch-min: 48px;

  /* ---- Elevación / glow ---- */
  --glow-primary: 0 0 15px var(--c-primary-glow);
  --glow-primary-strong: 0 0 24px rgba(var(--c-primary-rgb), 0.45);
  --glow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --blur-glass: blur(12px);

  /* ---- Motion (Biblia cap.8: 150–300ms funcional) ----
     Curvas spring aproximadas con cubic-bezier (estilo Kinetics,
     valores propios). "pop" tiene overshoot leve. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.68, 0.19);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --ease-spring-soft: cubic-bezier(0.38, 1.12, 0.63, 1);
  --t-fast: 150ms;
  --t-base: 220ms;
  --t-slow: 300ms;
  /* Única excepción >300ms: transición de apertura tipo Android
     (no bloquea el siguiente tap, es percepción de continuidad). */
  /* Apertura de módulo desde el launcher: más pausada a propósito — cubre el
     primer fetch del módulo para que no "aterrice a medio cargar". */
  --t-openapp: 560ms;

  /* ---- Z-index (orquestado, Biblia cap.22) ---- */
  --z-nav: 100;
  --z-dropdown: 200;
  --z-toast: 800;
  --z-fab: 900;
  --z-bubble: 901;
  --z-help: 950;
  --z-modal: 980;
  --z-tour: 1000;
  --z-tour-card: 1001;

  /* ---- Puente de tokens SDUI (contrato frontend-sdui §9.1) ----
     El motor SDUI expresa todo su CSS como var(--sui-*, DEFAULT).
     Este bloque re-tematiza los módulos SDUI al tema Cyber-Municipal
     sin tocar el renderer ni los módulos. */
  --sui-bg: transparent;
  --sui-surface: var(--c-surface-high);
  --sui-card-bg: var(--c-surface-container);
  --sui-border: var(--c-border-glass);
  --sui-heading: #ffffff;
  --sui-text: var(--c-text);
  --sui-muted: var(--c-text-muted);
  --sui-muted-strong: var(--c-text-variant);
  --sui-brand: var(--c-primary-bright);
  --sui-brand-strong: var(--c-primary);
  --sui-brand-soft: var(--c-primary-dim);
  --sui-brand-light: var(--c-primary);
  --sui-brand-bg: var(--c-primary-glow-soft);
  --sui-brand-rgb: var(--c-primary-rgb);
  --sui-ok: var(--c-ok);
  --sui-warn: var(--c-warn);
  --sui-danger: var(--c-error);
  --sui-info: var(--c-info);
  --sui-radius-sm: var(--r);
  --sui-radius-md: var(--r-md);
  --sui-radius-lg: var(--r-xl);
  --sui-shadow-sm: 0 0 10px var(--c-primary-glow-soft);
  --sui-shadow-md: var(--glow-primary);
  --sui-shadow-lg: var(--glow-primary-strong);
  --sui-ring: 0 0 0 1px var(--c-primary-bright), 0 0 14px var(--c-primary-glow);
  --sui-font: var(--font);

  /* Tinta sobre superficies de acento. Nuestra marca es cian CLARO: texto
     blanco encima es ilegible. Toda pastilla/botón/burbuja de marca del motor
     usa este token, así que basta esta línea para arreglarlos todos. */
  --sui-on-accent: var(--c-on-primary);

  /* Paneles auxiliares que usan los custom_widgets (helpdesk, etc.). Sin este
     puente caían a sus fallbacks claros (#fff) dentro del tema oscuro. */
  --sui-panel: var(--c-surface-container);
  --sui-panel-2: var(--c-surface-low);

  /* Velo, código y barrido: el motor los expresa como token desde v0.1.0. */
  --sui-overlay: rgba(2, 6, 15, 0.72);
  --sui-code-bg: var(--c-surface-lowest);
  --sui-code-text: var(--c-text);
  --sui-shimmer: rgba(var(--c-primary-rgb), 0.16);

  /* Paleta categórica (donut, heatmap, avatares). Familia cian→teal→hielo,
     con ámbar/verde/coral solo como series de contraste. */
  --sui-chart-1: var(--c-primary-bright);
  --sui-chart-2: var(--c-secondary);
  --sui-chart-3: var(--c-tertiary);
  --sui-chart-4: var(--c-secondary-container);
  --sui-chart-5: var(--c-ok);
  --sui-chart-6: var(--c-tertiary-container);
  --sui-chart-7: var(--c-warn);
  --sui-chart-8: var(--c-error);

  /* Capas del motor dentro de la escala de la casa: por debajo del tour de
     Bob (--z-tour 1000), que siempre debe poder tapar a un módulo. */
  --sui-z-modal: var(--z-modal);
  --sui-z-drawer: var(--z-modal);
  --sui-z-palette: 981;
  --sui-z-confirm: 982;

  /* Tinta de titulares: #fff en oscuro, tinta profunda en claro. Todo lo que
     antes hardcodeaba #fff debe usar este token. */
  --c-heading: #ffffff;

  /* Campos de entrada (DESIGN §Input Fields: monocromo oscuro; en claro, blanco). */
  --c-input-bg: #111111;
}

/* ============================================================
   Modo claro ("Cyber-Municipal Daylight")
   Mismo lenguaje (cian eléctrico, glass, glows) sobre lienzo claro.
   Solo se re-mapean tokens: ni el motor SDUI ni los módulos se tocan.
   Se activa con <html data-theme="light"> (persistido en localStorage).
   ============================================================ */
:root[data-theme='light'] {
  color-scheme: light;

  /* ---- Superficies ---- */
  --c-black: #eef2f8;
  --c-midnight: #e3ebf7;
  --c-surface: #f8fafd;
  --c-surface-bright: #ffffff;
  --c-surface-lowest: #e6ebf3;
  --c-surface-low: #eef2f8;
  --c-surface-container: #ffffff;
  --c-surface-high: #e7edf5;
  --c-surface-highest: #dbe3ef;
  --c-surface-variant: #dbe3ef;
  --c-glass: rgba(255, 255, 255, 0.82);
  --c-glass-strong: rgba(255, 255, 255, 0.94);

  /* ---- Texto ---- */
  --c-heading: #0f172a;
  --c-text: #1e293b;
  --c-text-variant: #334155;
  --c-text-muted: rgba(30, 41, 59, 0.62);
  --c-text-cyan: #0369a1;
  --c-inverse-surface: #1e293b;
  --c-inverse-on-surface: #f1f5f9;

  /* ---- Primario (cian con contraste sobre claro) ---- */
  --c-primary-rgb: 2, 132, 199;
  --c-secondary-rgb: 20, 184, 166;
  --c-primary: #0284c7;
  --c-on-primary: #ffffff;
  --c-primary-container: #0ea5e9;
  --c-on-primary-container: #013a52;
  --c-primary-bright: #0284c7;
  --c-primary-dim: #0369a1;
  --c-primary-glow: rgba(var(--c-primary-rgb), 0.28);
  --c-primary-glow-soft: rgba(var(--c-primary-rgb), 0.12);
  --c-primary-text-shadow: rgba(var(--c-primary-rgb), 0.25);

  /* ---- Secundario ---- */
  --c-secondary: #0d9488;
  --c-on-secondary: #ffffff;
  --c-secondary-container: #14b8a6;
  --c-on-secondary-container: #0b3d38;

  /* ---- Terciario ---- */
  --c-tertiary: #2563eb;
  --c-on-tertiary: #ffffff;
  --c-tertiary-container: #3b82f6;
  --c-on-tertiary-container: #0b2d6b;

  /* ---- Estado ---- */
  --c-error: #dc2626;
  --c-on-error: #ffffff;
  --c-error-container: #fecaca;
  --c-on-error-container: #7f1d1d;
  --c-ok: #16a34a;
  --c-warn: #d97706;
  --c-info: #2563eb;

  /* ---- Bordes ---- */
  --c-outline: #64748b;
  --c-outline-variant: #c7d2e0;
  --c-border-glass: rgba(var(--c-primary-rgb), 0.28);
  --c-border-glass-strong: rgba(var(--c-primary-rgb), 0.5);

  /* ---- Elevación / glow (más sombra, menos neón) ---- */
  --glow-primary: 0 4px 16px rgba(var(--c-primary-rgb), 0.18);
  --glow-primary-strong: 0 6px 22px rgba(var(--c-primary-rgb), 0.26);
  --glow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* ---- Puente SDUI (lo que no hereda de --c-*) ---- */
  --sui-heading: #0f172a;
  --sui-brand-rgb: var(--c-primary-rgb);
  --sui-on-accent: #ffffff;
  --sui-overlay: rgba(15, 23, 42, 0.42);
  --sui-shimmer: rgba(var(--c-primary-rgb), 0.12);
  --c-input-bg: #ffffff;
}