/**
 * ============================================================================
 * PRO DESIGN SYSTEM — DESIGN TOKENS (2026)
 * ============================================================================
 * Capa 1: PRIMITIVOS   -> valores crudos, agnósticos al tema (:root)
 * Capa 2: SEMÁNTICOS   -> intención de uso, mapeados por tema (light / dark)
 *
 * Convención de tema:
 *   - Por defecto = claro.
 *   - Oscuro se activa con [data-theme="dark"] (control manual) o con
 *     prefers-color-scheme: dark (preferencia del sistema).
 *   - [data-theme="light"] fuerza claro aun con sistema en oscuro.
 *
 * NOTA DE ALCANCE: El manual de marca define SOLO 2 colores (amarillo/naranja),
 * el gradiente, la familia Gotham Rounded y las prohibiciones. Todo lo demás
 * (neutros, escala tipográfica, espaciado, radios, sombras, estados, paleta de
 * gráficos) es una EXTENSIÓN del sistema, construida para ser coherente con la
 * marca. Los bloques marcados con [EXT] no provienen literalmente del manual.
 * ============================================================================
 */

/* ==========================================================================
   CAPA 1 — PRIMITIVOS (agnósticos al tema)
   ========================================================================== */
:root {

  /* --- MARCA: COLORES CANÓNICOS (del manual) ------------------------------
     Uso EXCLUSIVO para logo, gradiente y grandes superficies de marca.
     NO usar como color de texto sobre blanco: no pasan contraste AA. */
  --pro-brand-yellow: #f4d969;   /* Pantone 603 C  · CMYK 5/11/71/0 */
  --pro-brand-orange: #f4a95c;   /* Pantone 4009 C · CMYK 2/38/72/0 */

  /* [EXT] Rampa de marca derivada, para estados (hover/active) y texto accesible.
     La marca solo admite los 2 tonos canónicos en el LOGO; estos derivados
     son para UI (botones, links) y NUNCA se aplican al logotipo. */
  --pro-brand-100: #fdf3df;
  --pro-brand-200: #fbe6bd;
  --pro-brand-300: #f7d488;
  --pro-brand-400: #f4a95c;  /* == naranja canónico */
  --pro-brand-500: #e8944a;
  --pro-brand-600: #d17b32;  /* hover de acciones */
  --pro-brand-700: #9a561d;  /* active / texto de marca sobre claro (AA en superficies claras y subtle) */
  --pro-brand-800: #834a1b;
  --pro-brand-900: #5f3714;

  /* --- GRADIENTE DE MARCA (del manual) ------------------------------------
     Manual: gradiente a 0° = horizontal izquierda→derecha (amarillo→naranja).
     En CSS 90deg produce ese mismo recorrido horizontal L→R. */
  --pro-gradient-brand: linear-gradient(90deg, var(--pro-brand-yellow) 0%, var(--pro-brand-orange) 100%);
  --pro-gradient-brand-diag: linear-gradient(120deg, var(--pro-brand-yellow) 0%, var(--pro-brand-orange) 100%);

  /* --- [EXT] NEUTROS (escala gris neutra; el calor queda como acento) ------
     Gris sin tinte: despega la UI de la estética beige/cálida y deja que
     el amarillo/naranja de marca funcionen como único acento cromático. */
  --pro-neutral-0:   #ffffff;
  --pro-neutral-50:  #fafafa;
  --pro-neutral-100: #f5f5f5;
  --pro-neutral-200: #e5e5e5;
  --pro-neutral-300: #d4d4d4;
  --pro-neutral-400: #a3a3a3;
  --pro-neutral-500: #737373;
  --pro-neutral-600: #525252;
  --pro-neutral-700: #404040;
  --pro-neutral-800: #262626;   /* el manual prohíbe negro puro en el LOGO;   */
  --pro-neutral-900: #171717;   /* este gris casi-negro es para texto/UI.     */
  --pro-neutral-950: #0a0a0a;

  /* --- [EXT] COLORES DE ESTADO (semántica funcional, distinta de la marca) - */
  --pro-success-500: #2e7d5b;
  --pro-success-600: #256549;
  --pro-warning-500: #b4690e;
  --pro-warning-600: #8f520a;
  --pro-error-500:   #c0362c;
  --pro-error-600:   #9c2a22;
  --pro-info-500:    #2563a8;
  --pro-info-600:    #1d4f87;

  /* ==========================================================================
     [EXT] COLOR PARA GRÁFICOS — organizado por el TRABAJO que hace el color
     --------------------------------------------------------------------------
     Elegir la familia según lo que el dato significa (no por variedad):

       TONAL     → comparar dentro de una MISMA familia (propios vs. acompañados,
                   2024 vs 2025, parte de un total). Mismo tono, distinta
                   intensidad. Es el caso más frecuente en un tablero.
       ÉNFASIS   → una serie es el foco y el resto es contexto.
       CATEGÓRICA→ SOLO entidades genuinamente distintas (Senado vs Diputados,
                   bloques). Máximo 4; más categorías → agrupar en "Otros",
                   usar múltiplos pequeños o una tabla.
       SECUENCIAL→ magnitud (mapas de calor, rankings).
       DIVERGENTE→ polaridad respecto de un punto neutro (a favor / en contra).
       ESTADO    → reservado (success/warning/error/info). NUNCA como serie.

     Todas validadas con el verificador de dataviz (banda de luminosidad, piso
     de croma, separación para daltonismo y visión normal, contraste).
     No sustituir ningún valor sin volver a validar.
     ========================================================================== */

  /* ORO DE MARCA · un solo paso, NUNCA oscurecido.
     El amarillo es el único tono sin versión oscura digna (vira a mostaza/
     marrón). Por eso el oro se usa siempre en su paso luminoso, como acento:
     la serie protagonista, "lo nuestro", el foco. Las rampas se construyen
     con pizarra, que sí oscurece bien y es su complemento natural. */
  --pro-chart-brand: #e2a020;

  /* CATEGÓRICA · orden FIJO por posición, nunca reciclar. Máx. 4 entidades. */
  --pro-chart-1: #e2a020;  /* oro (marca) */
  --pro-chart-2: #009184;  /* teal */
  --pro-chart-3: #3f5aa6;  /* índigo */
  --pro-chart-4: #a63d5f;  /* ciruela */

  /* TONAL (pizarra) · el DEFAULT del tablero: comparar dentro de una misma
     familia. La intensidad codifica jerarquía o magnitud, no identidad.
     Ej.: cámara baja = paso claro · cámara alta = paso oscuro. */
  --pro-chart-tonal-faint:  #dde4f0;
  --pro-chart-tonal-soft:   #a9bad9;
  --pro-chart-tonal-mid:    #6a83b8;
  --pro-chart-tonal-strong: #3a5391;

  /* ÉNFASIS · foco = oro de marca, contexto = gris (períodos previos, resto) */
  --pro-chart-focus:   #e2a020;
  --pro-chart-context: #c9ccd4;

  /* SECUENCIAL (magnitud): un solo tono, claro → oscuro. Nunca arcoíris. */
  --pro-chart-seq-1: #eaeff7;
  --pro-chart-seq-2: #c2cfe6;
  --pro-chart-seq-3: #8fa5cb;
  --pro-chart-seq-4: #5a76ac;
  --pro-chart-seq-5: #33497f;

  /* DIVERGENTE (polaridad): frío ↔ neutro ↔ oro de marca. */
  --pro-chart-div-neg: #3f5aa6;
  --pro-chart-div-mid: #d8d6d1;
  --pro-chart-div-pos: #e2a020;

  /* INACTIVO · estados que YA ocurrieron (caducado, cerrado, archivado).
     No son alertas: no llevan rojo, llevan gris. */
  --pro-state-inactive-bg: #ececea;
  --pro-state-inactive-fg: #5f5d58;
  --pro-state-inactive-border: #d6d4cf;

  /* ======================================================================
     TIPOGRAFÍA (familia del manual + [EXT] escala numérica)
     ====================================================================== */
  /* Gotham Rounded es comercial. Fallback redondeado (Nunito) para entornos
     sin licencia, luego stack de sistema. */
  --pro-font-family: "Gotham Rounded", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pro-font-family-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace;

  /* Pesos (del manual) */
  --pro-font-weight-light:  300;
  --pro-font-weight-book:   400;
  --pro-font-weight-medium: 500;
  --pro-font-weight-bold:   700;

  /* Tracking / kerning (del manual: tracking 0, kerning auto) */
  --pro-letter-spacing: 0em;
  --pro-font-kerning: auto;

  /* [EXT] Escala tipográfica (base 16px, razón ~1.25 tercera mayor) */
  --pro-font-size-xs:       0.75rem;   /* 12px — ejes, chips chicos, tablas densas */
  --pro-font-size-overline: 0.75rem;   /* 12px */
  --pro-font-size-caption:  0.75rem;   /* 12px */
  --pro-font-size-sm:       0.875rem;  /* 14px */
  --pro-font-size-base:     1rem;      /* 16px */
  --pro-font-size-lg:       1.125rem;  /* 18px */
  --pro-font-size-h4:       1.25rem;   /* 20px */
  --pro-font-size-h3:       1.5rem;    /* 24px */
  --pro-font-size-h2:       2rem;      /* 32px */
  --pro-font-size-h1:       2.5rem;    /* 40px */
  --pro-font-size-display:  3.5rem;    /* 56px */

  /* [EXT] Alturas de línea */
  --pro-line-height-tight:   1.1;
  --pro-line-height-snug:    1.25;
  --pro-line-height-normal:  1.5;
  --pro-line-height-relaxed: 1.65;

  /* ======================================================================
     [EXT] ESPACIADO (base 4px)
     ====================================================================== */
  --pro-space-0:   0;
  --pro-space-px:  1px;
  --pro-space-0-5: 0.125rem; /* 2  */
  --pro-space-1:   0.25rem;  /* 4  */
  --pro-space-2:   0.5rem;   /* 8  */
  --pro-space-3:   0.75rem;  /* 12 */
  --pro-space-4:   1rem;     /* 16 */
  --pro-space-5:   1.25rem;  /* 20 */
  --pro-space-6:   1.5rem;   /* 24 */
  --pro-space-8:   2rem;     /* 32 */
  --pro-space-10:  2.5rem;   /* 40 */
  --pro-space-12:  3rem;     /* 48 */
  --pro-space-16:  4rem;     /* 64 */
  --pro-space-20:  5rem;     /* 80 */
  --pro-space-24:  6rem;     /* 96 */

  /* ======================================================================
     [EXT] RADIOS (marca redondeada -> radios generosos)
     ====================================================================== */
  --pro-radius-none: 0;
  --pro-radius-sm:   0.375rem; /* 6  */
  --pro-radius-md:   0.625rem; /* 10 */
  --pro-radius-lg:   1rem;     /* 16 */
  --pro-radius-xl:   1.5rem;   /* 24 */
  --pro-radius-2xl:  2rem;     /* 32 */
  --pro-radius-full: 9999px;

  /* ======================================================================
     [EXT] SOMBRAS (gris neutro; NO aplican al logo)
     ====================================================================== */
  --pro-shadow-xs: 0 1px 2px rgba(23, 23, 23, 0.06);
  --pro-shadow-sm: 0 1px 3px rgba(23, 23, 23, 0.08), 0 1px 2px rgba(23, 23, 23, 0.06);
  --pro-shadow-md: 0 4px 8px -2px rgba(23, 23, 23, 0.10), 0 2px 4px -2px rgba(23, 23, 23, 0.06);
  --pro-shadow-lg: 0 12px 20px -4px rgba(23, 23, 23, 0.12), 0 4px 8px -4px rgba(23, 23, 23, 0.08);
  --pro-shadow-xl: 0 24px 40px -8px rgba(23, 23, 23, 0.16);

  /* ======================================================================
     [EXT] MOTION
     ====================================================================== */
  --pro-duration-fast:   120ms;
  --pro-duration-base:   200ms;
  --pro-duration-slow:   320ms;
  --pro-ease-standard:   cubic-bezier(0.2, 0, 0.2, 1);
  --pro-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --pro-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* ======================================================================
     [EXT] Z-INDEX
     ====================================================================== */
  --pro-z-base:     0;
  --pro-z-dropdown: 1000;
  --pro-z-sticky:   1100;
  --pro-z-overlay:  1300;
  --pro-z-modal:    1400;
  --pro-z-popover:  1500;
  --pro-z-toast:    1700;
  --pro-z-tooltip:  1800;

  /* ======================================================================
     [EXT] LAYOUT / GRILLA DE PÁGINA
     ====================================================================== */
  --pro-breakpoint-sm:  640px;
  --pro-breakpoint-md:  768px;
  --pro-breakpoint-lg:  1024px;
  --pro-breakpoint-xl:  1280px;
  --pro-breakpoint-2xl: 1536px;
  --pro-container-max:  1200px;
  --pro-grid-columns:   12;
  --pro-grid-gutter:    var(--pro-space-6);

  /* ======================================================================
     LOGO (regla del manual: área de resguardo = 2X)
     ====================================================================== */
  --pro-logo-clearspace-ratio: 2;      /* múltiplo de la unidad interna X */
  --pro-logo-clearspace: var(--pro-space-8);  /* aprox. práctico en UI = 2rem */
  --pro-logo-min-width: 96px;          /* [EXT] tamaño mínimo legible en pantalla */
}

/* ==========================================================================
   CAPA 2 — SEMÁNTICOS · TEMA CLARO (por defecto)
   ========================================================================== */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Superficies */
  --pro-bg-canvas:        var(--pro-neutral-50);
  --pro-bg-surface:       var(--pro-neutral-0);
  --pro-bg-subtle:        var(--pro-neutral-100);
  --pro-bg-muted:         var(--pro-neutral-200);
  --pro-bg-inverse:       var(--pro-neutral-900);

  /* Texto */
  --pro-text-primary:     var(--pro-neutral-900);
  --pro-text-secondary:   var(--pro-neutral-700);
  --pro-text-muted:       var(--pro-neutral-500);
  --pro-text-inverse:     var(--pro-neutral-50);
  --pro-text-on-brand:    var(--pro-neutral-900); /* dark sobre gradiente claro */
  --pro-text-link:        var(--pro-brand-700);
  --pro-text-link-hover:  var(--pro-brand-800);

  /* Bordes */
  --pro-border-subtle:    var(--pro-neutral-200);
  --pro-border-default:   var(--pro-neutral-300);
  --pro-border-strong:    var(--pro-neutral-400);

  /* Acción primaria (marca) */
  --pro-action-primary-bg:       var(--pro-gradient-brand);
  --pro-action-primary-bg-solid: var(--pro-brand-500);
  --pro-action-primary-hover:    var(--pro-brand-600);
  --pro-action-primary-active:   var(--pro-brand-700);
  --pro-action-primary-text:     var(--pro-neutral-900);

  /* Acción secundaria (contorno) */
  --pro-action-secondary-bg:     transparent;
  --pro-action-secondary-border: var(--pro-neutral-300);
  --pro-action-secondary-text:   var(--pro-neutral-900);
  --pro-action-secondary-hover:  var(--pro-neutral-100);

  /* Foco */
  --pro-focus-ring: 0 0 0 3px rgba(209, 123, 50, 0.45);

  /* Estados (fondo suave + texto legible) */
  --pro-success-bg: #e6f4ec;  --pro-success-fg: #1b5e43;  --pro-success-border: #b9e0cb;
  --pro-warning-bg: #fbefd9;  --pro-warning-fg: #7a4708;  --pro-warning-border: #f0d6a4;
  --pro-error-bg:   #fbe9e7;  --pro-error-fg:   #8e241c;  --pro-error-border:   #f2c4bf;
  --pro-info-bg:    #e8f0fa;  --pro-info-fg:    #184a82;  --pro-info-border:    #c2d8ef;
}

/* ==========================================================================
   CAPA 2 — SEMÁNTICOS · TEMA OSCURO
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --pro-bg-canvas:        #1a1a1a;
  --pro-bg-surface:       #242424;
  --pro-bg-subtle:        #2e2e2e;
  --pro-bg-muted:         #383838;
  --pro-bg-inverse:       var(--pro-neutral-50);

  --pro-text-primary:     #f5f5f5;
  --pro-text-secondary:   #d4d4d4;
  --pro-text-muted:       #a3a3a3;
  --pro-text-inverse:     var(--pro-neutral-900);
  --pro-text-on-brand:    var(--pro-neutral-900); /* gradiente sigue siendo claro */
  --pro-text-link:        var(--pro-brand-300);
  --pro-text-link-hover:  var(--pro-brand-200);

  --pro-border-subtle:    #303030;
  --pro-border-default:   #3d3d3d;
  --pro-border-strong:    #525252;

  --pro-action-primary-bg:       var(--pro-gradient-brand);
  --pro-action-primary-bg-solid: var(--pro-brand-500);
  --pro-action-primary-hover:    var(--pro-brand-400);
  --pro-action-primary-active:   var(--pro-brand-300);
  --pro-action-primary-text:     var(--pro-neutral-900);

  --pro-action-secondary-bg:     transparent;
  --pro-action-secondary-border: #525252;
  --pro-action-secondary-text:   #f5f5f5;
  --pro-action-secondary-hover:  #2e2e2e;

  --pro-focus-ring: 0 0 0 3px rgba(244, 169, 92, 0.55);

  --pro-success-bg: #16281f;  --pro-success-fg: #7fd3ab;  --pro-success-border: #274d3b;
  --pro-warning-bg: #2c2110;  --pro-warning-fg: #e6b56a;  --pro-warning-border: #4d3a1a;
  --pro-error-bg:   #2e1512;  --pro-error-fg:   #f0a49c;  --pro-error-border:   #522722;
  --pro-info-bg:    #14212f;  --pro-info-fg:    #8fbdea;  --pro-info-border:    #274363;

  /* Sombras más marcadas sobre fondo oscuro */
  --pro-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
  --pro-shadow-lg: 0 12px 20px -4px rgba(0, 0, 0, 0.5), 0 4px 8px -4px rgba(0, 0, 0, 0.4);

  /* Gráficos en oscuro: MISMOS tonos re-escalados para la superficie oscura
     (no es un volteo automático). Validada sobre #242424: todos los checks
     PASS, incluido contraste ≥ 3:1. */
  --pro-chart-brand: #d9a838;
  --pro-chart-1: #c08a1e;
  --pro-chart-2: #009184;
  --pro-chart-3: #7183d4;
  --pro-chart-4: #c96a86;

  --pro-chart-tonal-faint:  #4a5a7d;
  --pro-chart-tonal-soft:   #667ba8;
  --pro-chart-tonal-mid:    #8598c9;
  --pro-chart-tonal-strong: #a9bde6;

  --pro-chart-focus:   #d9a838;
  --pro-chart-context: #55596b;

  --pro-chart-seq-1: #3d4a66;
  --pro-chart-seq-2: #52658f;
  --pro-chart-seq-3: #6c81b3;
  --pro-chart-seq-4: #8b9fd2;
  --pro-chart-seq-5: #b0c2ea;

  --pro-chart-div-neg: #7183d4;
  --pro-chart-div-mid: #55524d;
  --pro-chart-div-pos: #d9a838;

  --pro-state-inactive-bg: #2b2b2b;
  --pro-state-inactive-fg: #a8a5a0;
  --pro-state-inactive-border: #3d3d3d;
}

/* Preferencia del sistema (cuando no hay override manual) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --pro-bg-canvas:        #1a1a1a;
    --pro-bg-surface:       #242424;
    --pro-bg-subtle:        #2e2e2e;
    --pro-bg-muted:         #383838;
    --pro-bg-inverse:       var(--pro-neutral-50);

    --pro-text-primary:     #f5f5f5;
    --pro-text-secondary:   #d4d4d4;
    --pro-text-muted:       #a3a3a3;
    --pro-text-inverse:     var(--pro-neutral-900);
    --pro-text-on-brand:    var(--pro-neutral-900);
    --pro-text-link:        var(--pro-brand-300);
    --pro-text-link-hover:  var(--pro-brand-200);

    --pro-border-subtle:    #303030;
    --pro-border-default:   #3d3d3d;
    --pro-border-strong:    #525252;

    --pro-action-primary-hover:  var(--pro-brand-400);
    --pro-action-primary-active: var(--pro-brand-300);
    --pro-action-secondary-border: #525252;
    --pro-action-secondary-text:   #f5f5f5;
    --pro-action-secondary-hover:  #2e2e2e;

    --pro-focus-ring: 0 0 0 3px rgba(244, 169, 92, 0.55);

    --pro-success-bg: #16281f;  --pro-success-fg: #7fd3ab;  --pro-success-border: #274d3b;
    --pro-warning-bg: #2c2110;  --pro-warning-fg: #e6b56a;  --pro-warning-border: #4d3a1a;
    --pro-error-bg:   #2e1512;  --pro-error-fg:   #f0a49c;  --pro-error-border:   #522722;
    --pro-info-bg:    #14212f;  --pro-info-fg:    #8fbdea;  --pro-info-border:    #274363;

    --pro-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
    --pro-shadow-lg: 0 12px 20px -4px rgba(0, 0, 0, 0.5), 0 4px 8px -4px rgba(0, 0, 0, 0.4);

    /* Gráficos: mismos pasos oscuros que en [data-theme="dark"] */
    --pro-chart-brand: #d9a838;
    --pro-chart-1: #c08a1e;
    --pro-chart-2: #009184;
    --pro-chart-3: #7183d4;
    --pro-chart-4: #c96a86;

    --pro-chart-tonal-faint:  #4a5a7d;
    --pro-chart-tonal-soft:   #667ba8;
    --pro-chart-tonal-mid:    #8598c9;
    --pro-chart-tonal-strong: #a9bde6;

    --pro-chart-focus:   #d9a838;
    --pro-chart-context: #55596b;

    --pro-chart-seq-1: #3d4a66;
    --pro-chart-seq-2: #52658f;
    --pro-chart-seq-3: #6c81b3;
    --pro-chart-seq-4: #8b9fd2;
    --pro-chart-seq-5: #b0c2ea;

    --pro-chart-div-neg: #7183d4;
    --pro-chart-div-mid: #55524d;
    --pro-chart-div-pos: #d9a838;

    --pro-state-inactive-bg: #2b2b2b;
    --pro-state-inactive-fg: #a8a5a0;
    --pro-state-inactive-border: #3d3d3d;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pro-duration-fast: 0ms;
    --pro-duration-base: 0ms;
    --pro-duration-slow: 0ms;
  }
}