/* ==========================================================================
   Tokens — UI kit "Ecosistema Cobranza" (Figma m9OihdbHmpgpyprvqDx1ns · 64:847)
   Valores sacados de las variables del nodo, NO de las etiquetas hex del kit
   (las etiquetas tienen errores). Extensiones propias marcadas con [ext].
   ========================================================================== */

:root {
  /* --- Primitivos: Primary (verde) --- */
  --primary-50: #f2f9f6;
  --primary-100: #cce7dc;
  --primary-200: #99cfb9;
  --primary-300: #66b696;
  --primary-400: #339e73;
  --primary-500: #008650;
  --primary-600: #006b40;
  --primary-700: #005030;
  --primary-800: #003620;
  --primary-900: #001b10;

  /* --- Primitivos: Investigación (morado) --- */
  --investigacion-100: #ecd7ee;
  --investigacion-200: #d9afdd;
  --investigacion-300: #c788cd;
  --investigacion-400: #b460bc;
  --investigacion-500: #a138ab;
  --investigacion-600: #812d89;
  --investigacion-700: #612267;
  --investigacion-800: #401644;
  --investigacion-900: #200b22;

  /* --- Primitivos: Cobranza (teal) --- */
  --cobranza-100: #a5e0e6;
  --cobranza-300: #005863;
  /* Teal de "Misión de cobranza" en las pantallas del equipo (var colors/surface/cobranza) */
  --cobranza-500: #008393;

  /* --- Primitivos: Neutrales --- */
  --neutral-0: #ffffff;
  --neutral-50: #f6f6f6;
  --neutral-100: #e7e7e7;
  --neutral-200: #cecece;
  --neutral-300: #b6b6b6;
  --neutral-400: #9d9d9d;
  --neutral-500: #858585;
  --neutral-600: #6a6a6a;
  --neutral-700: #505050;
  --neutral-800: #353535;
  --neutral-900: #1b1b1b;
  --neutral-1000: #000000;

  /* --- Feedback --- */
  --success-subtle: #ebffef;
  --success-light: #8dc881;
  --success: #1eb100;
  --success-strong: #126a00;

  --warning-subtle: #fefcf2;
  --warning-light: #feefc3;
  --warning: #ffce00;
  --warning-strong: #997c00;

  --info-subtle: #dffbff;
  --info-light: #abeaf4;
  --info: #34c0d7;
  --info-strong: #1a4361;

  --error-subtle: #fff0f0;
  --error-light: #ec8f8f;
  --error: #f43232;
  --error-strong: #921e1e;

  /* --- Semánticos: texto (kit "Aplications / Text") --- */
  --text-default: var(--neutral-800);
  --text-secondary: var(--neutral-500);
  --text-disabled: var(--neutral-300);
  --text-inverse: var(--neutral-0);
  --text-link: var(--primary-500);

  /* --- Semánticos: superficies --- */
  --bg-app: var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --bg-subtle: var(--primary-50);
  --border-default: rgba(0, 0, 0, 0.1);

  /* [ext] Riesgo: semáforo sobre tokens de feedback */
  --risk-bajo: var(--success);
  --risk-medio: var(--warning);
  --risk-alto: var(--error);

  /* --- Tipografía (kit "PAX") --- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-caption: 10px;   --lh-caption: 12px;
  --fs-label: 12px;     --lh-label: 16px;
  --fs-body: 14px;      --lh-body: 20px;
  --fs-h2: 14px;        --lh-h2: 20px;
  --fs-h1: 16px;        --lh-h1: 24px;
  --fs-display-m: 20px; --lh-display-m: 28px;
  --fs-display-l: 24px; --lh-display-l: 32px;
  /* [ext] Niveles grandes para leer en campo, de un vistazo */
  --fs-display-xl: 32px; --lh-display-xl: 38px;
  --fs-hero: 48px;       --lh-hero: 52px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* --- Espaciado, radios, sombras --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0, 27, 16, 0.06), 0 2px 8px rgba(0, 27, 16, 0.06);
  --shadow-2: 0 4px 12px rgba(0, 27, 16, 0.08), 0 16px 40px rgba(0, 27, 16, 0.12);

  /* --- Motion (curvas fuertes; nunca ease-in en UI) --- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-press: 140ms;
  --dur-fast: 200ms;
  --dur-base: 280ms;

  --touch-min: 48px;
}

/* ==========================================================================
   Tema. Sin atributo se ve oscuro; la app arranca en claro (index.html trae data-theme="light"
   y prefs.js lo cambia si el gestor eligió otro).
   Las pantallas usan SOLO estos semánticos, así cambiar de tema no toca componentes.
   ========================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  /* [ext] Modo ruta (oscuro) — construido con el verde 900 del kit */
  --route-bg: var(--primary-900);
  --route-surface: #08261a;
  --route-surface-2: #0e3324;
  --route-border: rgba(204, 231, 220, 0.12);
  --route-text: #eaf5f0;
  --route-text-secondary: rgba(234, 245, 240, 0.64);

  --bg-app: var(--route-bg);
  --bg-surface: var(--route-surface);
  --text-default: var(--route-text);
  --text-secondary: var(--route-text-secondary);
  --border-default: var(--route-border);

  --accent-text: var(--primary-100);
  --accent-label: var(--primary-200);
  --accent-border: var(--primary-300);
  --accent-bg: rgba(102, 182, 150, 0.12);
  --mint: #8ef0c6;
  --anchor-on: rgba(142, 240, 198, 0.35);
  --chip-bg: rgba(204, 231, 220, 0.1);
  --switch-off: rgba(255, 255, 255, 0.18);
  --initials-bg: var(--primary-700);
  --initials-fg: var(--primary-100);
  --card-shadow: none;
  --card-border: var(--route-border);
  --glow: rgba(51, 158, 115, 0.28);
  --win-glow: rgba(142, 240, 198, 0.18);
  --eta-bg: rgba(0, 27, 16, 0.82);
  --stage-bg:
    radial-gradient(1200px 600px at 20% -10%, rgba(51, 158, 115, 0.18), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(0, 88, 99, 0.22), transparent 60%),
    #0b1410;

  --map-bg: #0b2a1d;
  --map-park: rgba(51, 158, 115, 0.18);
  --map-grid: rgba(204, 231, 220, 0.08);
  --map-avenue: rgba(204, 231, 220, 0.14);
  --map-route: #8ef0c6;
  --map-route-bg: rgba(142, 240, 198, 0.18);

  /* Copiloto (todo lo que es de Rulo): cyan/teal, como el "Copiloto" de las pantallas del equipo */
  --copilot: var(--info);
  --copilot-strong: var(--cobranza-500);
  --copilot-text: #9eecf7;
  --copilot-soft: rgba(52, 192, 215, 0.12);
  --copilot-border: rgba(52, 192, 215, 0.42);
  --glass-bg: rgba(8, 38, 30, 0.62);
  --glass-border: rgba(165, 224, 230, 0.18);
  --glass-hi: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] {
  color-scheme: light;
  --route-bg: var(--neutral-50);
  --route-surface: var(--neutral-0);
  --route-surface-2: var(--primary-50);
  --route-border: rgba(0, 54, 32, 0.1);
  --route-text: var(--neutral-800);
  --route-text-secondary: var(--neutral-500);

  --bg-app: var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --text-default: var(--neutral-800);
  --text-secondary: var(--neutral-500);
  --border-default: rgba(0, 0, 0, 0.1);

  --accent-text: var(--primary-700);
  --accent-label: var(--primary-600);
  --accent-border: var(--primary-500);
  --accent-bg: var(--primary-50);
  --mint: var(--primary-500);
  --anchor-on: rgba(0, 134, 80, 0.35);
  --chip-bg: var(--primary-50);
  --switch-off: var(--neutral-200);
  --initials-bg: var(--primary-100);
  --initials-fg: var(--primary-700);
  --card-shadow: var(--shadow-1);
  --card-border: transparent;
  --glow: rgba(51, 158, 115, 0.14);
  --win-glow: #c6f5df;
  --eta-bg: rgba(255, 255, 255, 0.92);
  --stage-bg:
    radial-gradient(1200px 600px at 20% -10%, rgba(51, 158, 115, 0.16), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(0, 88, 99, 0.12), transparent 60%),
    #e9efec;

  --map-bg: #e4efe9;
  --map-park: rgba(51, 158, 115, 0.2);
  --map-grid: rgba(0, 54, 32, 0.07);
  --map-avenue: rgba(0, 54, 32, 0.1);
  --map-route: var(--primary-500);
  --map-route-bg: rgba(0, 134, 80, 0.16);

  --copilot: var(--info);
  --copilot-strong: var(--cobranza-500);
  --copilot-text: #006b78;
  --copilot-soft: #eafbfd;
  --copilot-border: rgba(52, 192, 215, 0.55);
  --glass-bg: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(52, 192, 215, 0.28);
  --glass-hi: rgba(255, 255, 255, 0.7);
}