/* ============================================================
   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;
  /* CONTENEDORES de estado. Existían solo para el error, y por eso un botón
     «Hecho» no podía pintarse de verde: un tono sin contenedor no tiene dónde
     apoyarse. Mismo par que error-container/on-error-container — fondo sólido y
     un color de texto que contrasta con él — para que un control semántico se
     lea con el sol de frente, que es donde se usan los módulos de campo. */
  /* Color de un BOTON con tono. No es el contenedor del estado: aquel es un
     fondo para leer texto encima dentro de una tarjeta, y esto es una
     superficie que hay que encontrar de un vistazo en la calle. Mismos cuatro
     valores en claro y en oscuro, con texto blanco: los cuatro pasan AA. */
  --c-btn-ok: #15803d;
  --c-btn-info: #1d4ed8;
  --c-btn-warn: #b45309;
  --c-btn-critical: #b91c1c;
  --c-ok-container: #0b5d2b;
  --c-on-ok-container: #c6f6d5;
  --c-warn-container: #6b4600;
  --c-on-warn-container: #ffe6b0;
  --c-info-container: #0b4a8f;
  --c-on-info-container: #d8e8ff;
  /* 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;
  /* La mascota va POR ENCIMA de modales y cajones (980) y por debajo de su
     propio tour (1000). Estaba en 900/950, debajo del cajon del motor: con la
     ficha de un caso abierta el FAB se veia pero no se podia pulsar —el overlay
     se comia el clic— y justo ahi es donde alguien pide ayuda. Pedir ayuda no
     puede depender de cerrar antes lo que no entiendes. */
  --z-fab: 985;
  --z-fabnav: 992;  /* casa y secciones del telefono: sobre la mascota, bajo la guia */
  --z-bubble: 986;
  --z-help: 990;
  --z-modal: 980;
  --z-dock: 970;    /* dock de una vista (motor 0.31): sobre el contenido, bajo un modal */
  --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-page-bg: var(--c-surface);  /* fondo opaco de una seccion cuando se arrastra como carta (motor 0.19.2) */
  --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);

  /* Alturas de los bloques acotados con scroll interno (prop `scroll` del
     motor >=0.10: container/list/each). Por escala, nunca píxeles en vistas;
     el host decide cuánto vale cada escalón. */
  --sui-scroll-sm: 16rem;
  --sui-scroll-md: 26rem;
  --sui-scroll-lg: 38rem;

  /* Zona de los botones flotantes del telefono (casa y secciones, shell.css:
     56px de alto + 14px de margen). El motor la usa para que un pie pegajoso
     (form.stickySubmit, motor 0.26.0) quede ENCIMA de ellos, y el host para el
     relleno inferior de la vista: nada queda tapado. */
  --sui-float-zone: 70px;

  /* Lado minimo de lo que se toca con el dedo (motor 0.26.0): flechas de
     seccion, la x de un chip, -/+, «Ver mas», paginas. 44px del contrato; el
     --touch-min del panel (48px) es para sus propios botones grandes. */
  --sui-touch-min: 44px;

  /* Suelo tipografico del telefono (motor 0.26.2): chips de estado y
     antetitulos/etiquetas pequeñas. Medidos a 9-11px en Inicio, Politicas, el
     Dashboard del helpdesk y el RAG. En escritorio el motor y la skin mandan;
     en <=700px nada de eso baja de aqui (ver el @media al final). */
  --sui-fs-badge: 12px;
  --sui-fs-eyebrow: 12px;
  --fs-micro: 9px;
  --fs-label: 11px;

  /* Tarjetas con imagen (stat.backdrop / stat.art, motor 0.21.0).
     Velo sobre la foto: triplete RGB SEPARADO POR ESPACIOS, porque el motor lo
     compone con la opacidad que declara el modulo:
     rgb(var(--sui-scrim-rgb) / var(--sdui-dim)). El texto encima es claro en
     los DOS temas (la foto no cambia con el tema); la sombra rescata los bordes
     brillantes. El arte es una escala cerrada: el modulo dice sm|md|lg. */
  --sui-scrim-rgb: 2 6 15;
  --sui-on-image: #ffffff;
  --sui-on-image-muted: rgba(255, 255, 255, 0.84);
  --sui-on-image-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 14px rgba(0, 0, 0, 0.35);
  --sui-stat-art-sm: 3rem;
  --sui-stat-art-md: 4.5rem;
  --sui-stat-art-lg: 6rem;

  /* 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-dock: var(--z-dock);
  --sui-z-drawer: var(--z-modal);
  --sui-z-palette: 981;
  /* La confirmación del motor («¿Seguro?») va encima de todo lo que flota
     —la casa y las secciones del teléfono, la mascota, su chat— y debajo de
     las guías: quien tiene que contestar no puede tenerla tapada. Antes era
     982 y en el teléfono la casa (992) le quedaba encima. */
  --sui-z-confirm: calc(var(--z-fabnav) + 6);

  /* Vidrio de lo que flota sobre un lienzo `stage` (motor 0.38.0): sus ranuras
     y sus mandos. Opaco casi del todo: encima pasa un organigrama entero y el
     texto de la ranura tiene que leerse. El tema claro lo re-mapea solo. */
  --sui-stage-glass: var(--c-glass-strong);

  /* 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;
  /* En claro, el contenedor es el pálido y el texto el oscuro: bajo el sol lo
     que salva la lectura es el CONTRASTE, no la saturación. */
  --c-ok-container: #b7f0c8;
  --c-on-ok-container: #0d3d1f;
  --c-warn-container: #fde3a7;
  --c-on-warn-container: #6b3d05;
  --c-info-container: #c7dcfd;
  --c-on-info-container: #12356e;

  /* ---- 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;

  /* Tarjetas con imagen: el texto sobre la foto sigue siendo claro en modo
     claro (un texto oscuro sobre una foto oscurecida no se lee), asi que el
     velo sigue siendo oscuro — tinta de pizarra en vez de medianoche. */
  --sui-scrim-rgb: 15 23 42;
  --sui-on-image: #ffffff;
  --sui-on-image-muted: rgba(255, 255, 255, 0.86);
  --sui-on-image-shadow: 0 1px 2px rgba(15, 23, 42, 0.7), 0 0 12px rgba(15, 23, 42, 0.4);
}

/* Telefono (motor 0.26.2): micro-etiquetas y etiquetas a 12px. Medido «Accesos
   directos» de Inicio a 9px y la fecha a 11px. */
@media (max-width: 700px) {
  :root { --fs-micro: var(--sui-fs-eyebrow, 12px); --fs-label: var(--sui-fs-eyebrow, 12px); }
}