/* =========================================================================
   IPUE-PL · Design Tokens
   -------------------------------------------------------------------------
   Variables base del sistema de diseño. Todo valor visual (color, espacio,
   sombra, radio, tipografía) DEBE consumirse desde aquí. No hardcodear.
   ========================================================================= */

:root {
    /* Esquema: CLARO por defecto, aunque el sistema esté en oscuro (decisión del
       usuario, 2026-10-29). El oscuro solo con data-theme="dark" en <html>, que pone
       el botón de tema (comun/tema.js). Superficies, texto y bordes se resuelven con
       light-dark(), que sigue a color-scheme. */
    color-scheme: light;

    /* ── Paleta corporativa ─────────────────────────────────────────────── */
    --ipue-azul:           #00338D;
    --ipue-azul-oscuro:    #002966;
    --ipue-azul-claro:     #1A5490;
    --ipue-celeste:        #009FDA;
    --ipue-celeste-claro:  #33B5E5;
    --ipue-amarillo:       #F0AB00;
    --ipue-dorado:         #FFD100;

    /* Gradientes corporativos reutilizables */
    --grad-primary:    linear-gradient(135deg, var(--ipue-azul) 0%, var(--ipue-celeste) 100%);
    --grad-azul:       linear-gradient(135deg, var(--ipue-azul) 0%, var(--ipue-azul-claro) 100%);
    --grad-celeste:    linear-gradient(135deg, var(--ipue-celeste) 0%, var(--ipue-celeste-claro) 100%);

    /* ── Neutros (escala de gris) — se invierten en dark vía light-dark():
       50–400 = superficies/bordes (claro→oscuro); 500–900 = texto (oscuro→claro). */
    --gray-50:  light-dark(#F8F9FA, #1B1E22);
    --gray-100: light-dark(#F0F4F7, #22262B);
    --gray-200: light-dark(#E9ECEF, #2C3036);
    --gray-300: light-dark(#DEE2E6, #3A3F46);
    --gray-400: light-dark(#CED4DA, #4C525A);
    --gray-500: light-dark(#A0AEC0, #8A93A0);
    --gray-600: light-dark(#718096, #AAB2BD);
    --gray-700: light-dark(#4A5568, #D8DDE3);
    --gray-800: light-dark(#2D3748, #F4F6F8);
    --gray-900: light-dark(#1A202C, #FFFFFF);

    /* ── Colores semánticos (estado, feedback) ──────────────────────────── */
    /* Los `-soft` (fondo) y `-soft-text` (texto) adaptan a dark: en claro pastel + texto
       oscuro; en dark, fondo oscuro teñido del color + texto claro (≥6:1). El color base
       (sólido, con texto blanco encima) es igual en ambos modos. */
    --success:           #28A745;
    --success-soft:      light-dark(#D1E7DD, #15311F);
    --success-soft-text: light-dark(#0A3622, #6FD995);

    --warning:           #F0AB00;
    --warning-soft:      light-dark(#FFF3CD, #3A2D08);
    --warning-soft-text: light-dark(#664D03, #F2C75B);

    --danger:            #DC3545;
    --danger-soft:       light-dark(#F8D7DA, #3B181C);
    --danger-soft-text:  light-dark(#58151C, #EF8E97);

    --info:              #009FDA;
    --info-soft:         light-dark(#CFF4FC, #0B2E3B);
    --info-soft-text:    light-dark(#055160, #5BC4EC);

    --purple:            #6F42C1;
    --purple-soft:       light-dark(#E9DDFB, #271B40);
    --purple-soft-text:  light-dark(#3D2371, #C0A4EF);

    --neutral-soft:      light-dark(#E2E3E5, #2A2E34);
    --neutral-soft-text: light-dark(#41464B, #C4C9D0);

    /* Tonos para tramos de edad (consistencia con censo de membresía). Se consumen vía
       `style="--c: var(--age-X)"` en CENSO_TRAMOS de comun/censoUi.js. Solo adultos
       (azul marino) necesita aclararse en dark; los demás ya contrastan sobre superficie oscura. */
    --age-ninos:    #FF6B9D;
    --age-adolesc:  #FF8C42;
    --age-jovenes:  #28A745;
    --age-adultos:  light-dark(#00338D, #33B5E5);
    --age-dorada:   #F0AB00;

    /* ── Página y superficies — adaptan a dark vía light-dark() ───────────── */
    --page-bg:      light-dark(#F5F5F5, #121316);
    --surface:      light-dark(#FFFFFF, #1E2024);
    --surface-soft: light-dark(#F8F9FA, #26292F);
    --border:       light-dark(#E9ECEF, #34383F);
    --border-soft:  light-dark(#F0F0F0, #2A2D33);

    /* ── Espaciado (escala de 4px) ──────────────────────────────────────── */
    --sp-0: 0;
    --sp-1: 0.25rem;   /*  4px */
    --sp-2: 0.5rem;    /*  8px */
    --sp-3: 0.75rem;   /* 12px */
    --sp-4: 1rem;      /* 16px */
    --sp-5: 1.25rem;   /* 20px */
    --sp-6: 1.5rem;    /* 24px */
    --sp-7: 2rem;      /* 32px */
    --sp-8: 2.5rem;    /* 40px */
    --sp-9: 3rem;      /* 48px */

    /* ── Radii ──────────────────────────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   10px;
    --radius-2xl:  12px;
    --radius-3xl:  18px;
    --radius-pill: 999px;

    /* ── Sombras ────────────────────────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 4px rgba(0, 51, 141, 0.06);
    --shadow-md: 0 2px 8px rgba(0, 51, 141, 0.08);
    --shadow-lg: 0 4px 16px rgba(0, 51, 141, 0.12);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.18);

    /* ── Tipografía ─────────────────────────────────────────────────────── */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --fs-xs:   0.68rem;   /* 10.9 */
    --fs-sm:   0.78rem;   /* 12.5 */
    --fs-base: 0.88rem;   /* 14   */
    --fs-md:   0.95rem;   /* 15.2 */
    --fs-lg:   1.05rem;   /* 16.8 */
    --fs-xl:   1.2rem;    /* 19.2 */
    --fs-2xl:  1.5rem;    /* 24   */
    --fs-3xl:  1.8rem;    /* 28.8 */
    --fs-4xl:  2.2rem;    /* 35.2 */

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --lh-tight: 1.2;
    --lh-base:  1.45;
    --lh-loose: 1.6;

    /* ── Transiciones ───────────────────────────────────────────────────── */
    --tr-fast: 0.15s ease;
    --tr-base: 0.25s ease;
    --tr-slow: 0.4s ease;

    /* ── Z-index (alineado con Bootstrap) ───────────────────────────────── */
    --z-base:           1;
    --z-sticky:         200;
    --z-dropdown:       1000;
    --z-modal-backdrop: 1040;
    --z-modal:          1050;
    --z-popover:        1060;
    --z-tooltip:        1070;
    --z-toast:          9999;

    /* ── Layout de página working ───────────────────────────────────────── */
    --page-pad-x: var(--sp-6);
    --page-pad-y: var(--sp-4);
    --head-pad-y: var(--sp-3);

    /* ═════════════════════════════════════════════════════════════════════
       TIER 2 · SEMÁNTICO
       ---------------------------------------------------------------------
       Capa de tokens que expresan INTENCIÓN, no color literal. Los
       componentes (.app-btn, .app-card, etc.) deben consumir esta capa
       cuando exista, no la paleta literal. Beneficios:
         · Renombrar/recambiar un valor de marca sin tocar componentes.
         · Soporte futuro de dark mode: solo se redefine este bloque.
         · Lectura más clara — `var(--color-action)` dice qué es, no qué color.
       ───────────────────────────────────────────────────────────────────── */

    /* Acciones e identidad de marca */
    --color-action:        var(--ipue-azul);          /* RELLENOS de marca (botón primary, fills) — con texto blanco encima */
    --color-action-strong: var(--ipue-azul-oscuro);   /* Hover/active de los rellenos de action */
    --color-action-fg:     light-dark(var(--ipue-azul), var(--ipue-celeste-claro)); /* Azul de marca como PRIMER PLANO (texto/icono/enlace/borde activo): en dark se aclara a celeste-claro para contraste sobre superficies oscuras */
    --color-action-soft:   light-dark(#F0F4FF, #1C2740); /* Fondo soft con tono action (current, highlight) */
    --color-accent:        var(--ipue-dorado);        /* CTA "accent" (botón dorado) */
    --color-accent-strong: var(--ipue-amarillo);      /* Hover de accent */

    /* Texto */
    --text-strong:    var(--gray-800);  /* Títulos, valores destacados */
    --text-default:   var(--gray-700);  /* Cuerpo de texto */
    --text-muted:     var(--gray-600);  /* Labels, subtítulos */
    --text-subtle:    var(--gray-500);  /* Metadata, helper text */
    --text-on-action: #FFFFFF;          /* Texto sobre fondo action/danger/info/success */
    --text-on-accent: var(--ipue-azul); /* Texto sobre fondo dorado (accent) */

    /* Superficies (fondos) */
    --surface-page:     var(--page-bg);       /* Fondo de la app */
    --surface-card:     var(--surface);       /* Cards, modales, paneles */
    --surface-muted:    var(--surface-soft);  /* Filas hover, footers de tabla, sub-secciones */
    --surface-inverted: var(--gray-800);      /* Tooltips, badges oscuros */
    --surface-backdrop: rgb(0 0 0 / 0.45);    /* ::backdrop de <dialog> y popovers modales */

    /* Bordes */
    --border-default: var(--border);       /* Borde estándar de cards/paneles/tablas */
    --border-subtle:  var(--border-soft);  /* Dividers internos, filas de info-row */
    --border-strong:  var(--gray-300);     /* Inputs, app-btn-icon */

    /* Sombras semánticas */
    --shadow-card:        var(--shadow-md);   /* Cards en estado normal */
    --shadow-card-hover:  var(--shadow-xl);   /* Cards interactivas en hover */
    --shadow-soft:        var(--shadow-sm);   /* Paneles, action-bar */
    --shadow-elevated:    var(--shadow-lg);   /* Dropdowns, search results, action-bar:hover */
    --shadow-floating:    var(--shadow-xl);   /* Modales, hero, popovers */

    /* Barra superior (navbar). Mantiene el gradiente de marca en claro Y en oscuro
       — es identidad, no superficie —, así que su texto no sale de la rampa de
       grises (que se invierte en dark) sino de capas de blanco sobre el azul.
       Las opacidades están elegidas para pasar AA sobre el extremo azul del
       gradiente, que es donde cae el texto. Los PANELES desplegables sí son
       superficie normal y usan --surface-card / --text-*. */
    --navbar-bg:        var(--grad-primary);
    --navbar-fg:        #FFFFFF;                 /* Texto principal (marca, usuario) */
    --navbar-fg-muted:  rgb(255 255 255 / 0.9);  /* Iconos y enlaces de miga */
    --navbar-fg-subtle: rgb(255 255 255 / 0.7);  /* Miga actual, separadores de miga */
    --navbar-divider:   rgb(255 255 255 / 0.3);  /* Barrita separadora */
    --navbar-hover-bg:  rgb(255 255 255 / 0.15); /* Hover de los botones de la barra */

    /* Paneles de marca: el héroe del inicio y el panel izquierdo del login. Mismo
       criterio que la barra: el degradado es identidad y no cambia con el tema, así
       que el texto va en blanco y los adornos son capas de blanco. */
    --marca-grad:        linear-gradient(135deg, var(--ipue-azul) 0%, #0055B3 50%, var(--ipue-celeste) 100%);
    --marca-fg:          #FFFFFF;
    --marca-fg-muted:    rgb(255 255 255 / 0.82);  /* Lema y textos secundarios */
    --marca-deco:        rgb(255 255 255 / 0.06);  /* Círculos decorativos */
    --marca-glass:       rgb(255 255 255 / 0.13);  /* Pastillas sobre el degradado */
    --marca-glass-borde: rgb(255 255 255 / 0.28);
    --marca-sombra:      0 4px 18px rgb(0 51 141 / 0.28);

    /* Estados de interacción */
    --ring-focus:   var(--ipue-celeste);  /* Color del outline de :focus-visible */
    --selection-bg: var(--ipue-celeste);  /* Color de ::selection */
    --selection-fg: #FFFFFF;

    /* Ejes de Material Symbols (iconos). Se aplican en .app-icon vía font-variation-settings;
       sobreescribibles por instancia/contexto (p.ej. .app-icon--fill pone FILL:1). */
    --icon-fill: 0;    /* 0 = outlined, 1 = relleno */
    --icon-wght: 400;  /* grosor del trazo (100–700) */
    --icon-grad: 0;    /* énfasis fino (-50–200) */
    --icon-opsz: 24;   /* tamaño óptico (20–48) */
}

/* Tema elegido: data-theme en <html>. Lo aplica un script inline en el <head> antes
   de pintar (layout/base.html, index.html). Sin él, claro. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Padding de página por breakpoint: móvil más compacto, escritorio amplio */
@media (max-width: 575.98px) {
    :root {
        --page-pad-x: var(--sp-3);
        --page-pad-y: var(--sp-2);
        --head-pad-y: var(--sp-2);
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    :root {
        --page-pad-x: var(--sp-4);
        --page-pad-y: var(--sp-3);
    }
}