/*--------------------------------------------------------------
Design System BCN · Tokens
Única fuente de verdad de colores, tipografía, espaciado, radios,
sombras, capas y movimiento. Ver docs/DESIGN_SYSTEM.md.

Reglas:
  - Ningún otro CSS del proyecto debe escribir colores literales:
    se usa var(--token). (tests/test_design_system.py lo verifica.)
  - Los nombres --color-* coinciden con flask_mapoteca para poder
    compartir componentes entre proyectos.
  - El modo oscuro solo redefine variables, nunca componentes.
--------------------------------------------------------------*/

:root {
    /* ---------- Marca ---------- */
    --color-primary: #cc0000;
    --color-primary-hover: #aa0000;
    --color-primary-10: rgba(204, 0, 0, 0.1);
    --color-primary-20: rgba(204, 0, 0, 0.2);
    --color-primary-40: rgba(204, 0, 0, 0.4);
    --color-on-primary: #ffffff;          /* texto sobre fondo primary */

    --color-secondary: #4a5d8f;
    --color-secondary-hover: #37466c;
    --color-secondary-40: rgba(74, 93, 143, 0.4);
    --color-secondary-60: rgba(74, 93, 143, 0.6);
    --color-secondary-70: rgba(74, 93, 143, 0.7);

    --color-neutral-dark: #3e4551;        /* barras y bloques oscuros de marca */
    --color-neutral-darker: #2b3038;
    --color-on-neutral-dark: #ffffff;
    --color-on-neutral-dark-muted: rgba(255, 255, 255, 0.8);
    --color-accent: #f56a6a;              /* decorativo: bordes y subrayados (no para texto) */
    --color-accent-on-dark: #ff9a9a;      /* texto de énfasis sobre --color-neutral-dark (4,75:1) */

    /* Tarjetas destacadas: texto e íconos SIEMPRE blancos; el fondo se ajusta por tema para mantener el contraste AA */
    --feature-fg: #ffffff;
    --feature-primary: #cc0000;
    --feature-secondary: #4a5d8f;
    --feature-neutral: #3e4551;
    --feature-tertiary: #2e7d6b;          /* verde azulado */

    /* ---------- Superficies y texto ---------- */
    --color-bg: #ffffff;                  /* fondo de la página */
    --color-white: var(--color-bg);       /* alias de mapoteca (se invierte en oscuro) */
    --color-surface: #eeeeee;             /* tarjetas, botones circulares */
    --color-surface-hover: #e0e0e0;
    --color-surface-light: #f9f9f9;
    --color-border: #dee2e6;
    --color-border-soft: #f1f3f5;

    --color-text-main: #1b1c1c;
    --color-text-muted: #5f6368;          /* 6,0:1 sobre --color-bg */
    --color-heading: #3d4449;

    /* ---------- Estados ---------- */
    --color-success: #166534;
    --color-success-bg: #dcfce7;
    --color-warning: #92400e;
    --color-warning-bg: #fef3c7;
    --color-danger: #991b1b;
    --color-danger-bg: #fee2e2;
    --color-info: var(--color-secondary);
    --color-info-bg: #eef5fc;
    --color-focus-ring: var(--color-primary-40);

    /* ---------- Overlays y sombras ---------- */
    --color-overlay: rgba(15, 23, 42, 0.6);
    --color-shadow: rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 12px 24px var(--color-shadow);
    --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-brand: 0 10px 30px var(--color-primary-20);
    --shadow-popover: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 16px 32px -4px rgba(0, 0, 0, 0.18);

    /* ---------- Tipografía ---------- */
    --font-body: "Roboto Condensed", sans-serif;
    --font-heading: "Roboto Slab", serif;
    --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.5rem;

    --weight-light: 300;
    --weight-regular: 400;
    --weight-bold: 700;

    --leading-tight: 1.2;
    --leading-body: 1.65;

    /* ---------- Espaciado (escala de 0,25 rem) ---------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Ritmo vertical y medidas (espaciado fluido: crece con el ancho de pantalla) */
    --section-space: clamp(2rem, 1.25rem + 3vw, 4rem);      /* entre secciones de una página */
    --block-space: clamp(1.5rem, 1rem + 2vw, 2.5rem);       /* entre bloques dentro de una sección */
    --gutter: clamp(1rem, 0.5rem + 2vw, 1.5rem);            /* entre columnas y tarjetas */
    --measure: 68ch;                                        /* largo de línea de lectura cómodo (45-75) */
    --measure-wide: 75ch;                                   /* tope recomendado: introducciones a una columna */

    /* ---------- Radios ---------- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* ---------- Capas ---------- */
    --z-content: 1;
    --z-sticky: 10;
    --z-dropdown: 100;
    --z-header: 900;
    --z-overlay: 1200;
    --z-popover: 2000;
    --z-prompt: 10000;

    /* ---------- Movimiento ---------- */
    --duration-fast: 0.2s;
    --duration-base: 0.3s;
    --ease-standard: ease;
    --ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- Layout ---------- */
    --container-max: 1140px;
    --header-offset: 50px;                /* alto del header fijo de bcn.cl: 50 px hasta 1100 px, 60 px desde 1101 px (ver base.css) */
    --summary-height: calc(3rem + var(--space-4) + 1px);   /* alto del resumen fijo de la comuna: escudo de 3rem + su relleno */
    --tool-size: 40px;
    --touch-size: 44px;                   /* mínimo táctil recomendado */
    --tap-gap: 0.75rem;                   /* separación mínima entre objetivos táctiles contiguos */

    /* ---------- Datos: gráficos ---------- */
    /* Categórica (series distintas). Contraste mínimo 3:1 sobre --color-bg. */
    --chart-1: #4a5d8f;
    --chart-2: #cc0000;
    --chart-3: #c47400;
    --chart-4: #2e7d6b;
    --chart-5: #8a4fa3;
    --chart-6: #3182bd;
    --chart-7: #7a5c2e;
    --chart-8: #c2185b;
    --chart-9: #5d7f2a;
    --chart-10: #6d6d6d;
    --chart-11: #0b7a9b;
    --chart-12: #a35a00;
    /* Secuencial (mapas coropléticos, 6 clases de menor a mayor) */
    --seq-1: #deebf7;
    --seq-2: #c6dbef;
    --seq-3: #9ecae1;
    --seq-4: #6baed6;
    --seq-5: #3182bd;
    --seq-6: #08519c;
    --chart-text: var(--color-text-main);
    --chart-grid: var(--color-border);
}

/* ---------- Modo oscuro: solo variables ----------
   Se activa con la clase .dark-mode en <html> (la fija un script en el <head>
   antes de pintar, para evitar el parpadeo del tema claro). */
:root.dark-mode,
body.dark-mode {
    --color-primary: #ff5252;
    --color-primary-hover: #ff7676;
    --color-primary-10: rgba(255, 82, 82, 0.15);
    --color-primary-20: rgba(255, 82, 82, 0.25);
    --color-primary-40: rgba(255, 82, 82, 0.45);
    --color-on-primary: #121212;

    --color-secondary: #8da2d8;
    --color-secondary-hover: #a9bbf0;
    --color-secondary-40: rgba(141, 162, 216, 0.4);
    --color-secondary-60: #b0c0e8;
    --color-secondary-70: #c5d3f5;

    --color-neutral-dark: #2a2f38;
    --color-neutral-darker: #1c2026;

    --feature-primary: #d32f2f;           /* blanco 4,98:1 */
    --feature-secondary: #546aa8;         /* blanco 5,24:1 */
    --feature-neutral: #4a5260;           /* blanco 7,87:1; se distingue del fondo negro */

    --color-bg: #121212;
    --color-surface: #1e1e1e;
    --color-surface-hover: #2a2a2a;
    --color-surface-light: #1a1a1a;
    --color-border: #333333;
    --color-border-soft: #262626;

    --color-text-main: #e0e0e0;
    --color-text-muted: #a8a8a8;
    --color-heading: #eeeeee;

    --color-success: #86efac;
    --color-success-bg: #14361f;
    --color-warning: #fde68a;
    --color-warning-bg: #3d2f0c;
    --color-danger: #fca5a5;
    --color-danger-bg: #431717;
    --color-info-bg: #1b2538;

    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-shadow: rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.6);

    --chart-1: #8da2d8;
    --chart-2: #ff5252;
    --chart-3: #ffb347;
    --chart-4: #5cc4a8;
    --chart-5: #c39bd3;
    --chart-6: #6bb3e8;
    --chart-7: #d9b26f;
    --chart-8: #f06292;
    --chart-9: #9ccc65;
    --chart-10: #b0b0b0;
    --chart-11: #4dd0e1;
    --chart-12: #ffa726;
    --seq-1: #1b2b3d;
    --seq-2: #24405c;
    --seq-3: #2f5a86;
    --seq-4: #4a82b8;
    --seq-5: #7fb2e0;
    --seq-6: #c2dcf5;
}

/* La vista de impresión y el papel siempre usan el tema claro. */
@media print {
    :root.dark-mode,
    body.dark-mode {
        --color-bg: #ffffff;
        --color-text-main: #1b1c1c;
        --color-heading: #3d4449;
        --color-surface: #eeeeee;
        --color-border: #dee2e6;
        --color-primary: #cc0000;
        --chart-text: #1b1c1c;
    }
}