/* ============================================================================
   PSE Design Tokens: fuente única del sistema visual
   ----------------------------------------------------------------------------
   Origen: docs/PSE-UX-UI-MASTER-AUDIT.md §16 y D-FUTURA-3 (los componentes consumen
   SOLO los alias de rol; los valores de marca viven arriba y son intercambiables).
   Versión 2 (04/10/2026, Núcleo de Comando): roles completos, tema oscuro, capas,
   medidas del marco de la intranet. Dirección visual «Mostrador»: ver
   docs/PLAN_NUCLEO.md §3 y docs/DECISIONES_NUCLEO.md D5.

   Tema: claro por defecto; oscuro si el sistema lo pide (prefers-color-scheme) o si
   la persona lo eligió (atributo data-tema="oscuro" en <html>). data-tema="claro"
   fuerza el claro aunque el sistema esté en oscuro.
   ========================================================================== */

:root {
  /* ===== 1. MARCA (únicos valores que cambiarían con otra marca) ========== */
  --navy-50:  #F0F4FB;
  --navy-100: #DCE5F5;
  --navy-200: #B9CBEA;
  --navy-300: #8FA9DB;
  --navy-400: #5F7FC6;
  --navy-500: #3B5CAB;
  --navy-600: #24418C;
  --navy-700: #122C6E;
  --navy-800: #071E58;
  --navy-900: #001A5A;
  --navy-950: #0F1D3D;

  --orange-500: #FF9A22;
  --orange-600: #F08A0D;
  --orange-50:  #FFF4E3;

  --whatsapp-500: #25D366;

  /* ===== 2. ROLES: superficies y texto ==================================== */
  --color-background:    #F4F6FA;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F8F9FC;  /* cabecera de tabla, fondo de filtros */
  --color-surface-3:     #EEF2FA;  /* fila al pasar, selección suave */
  --color-text:          #14213B;
  --color-heading:       var(--navy-900);
  --color-muted:         #5B6478;  /* 5,9:1 sobre blanco */
  --color-faint:         #636D85;  /* 4,9:1 sobre blanco y 4,6:1 sobre surface-2: mínimo AA */
  --color-border:        #E4E7EF;
  --color-border-strong: #C9CFDD;
  --color-overlay:       rgba(8, 18, 45, .55);

  /* ===== 3. ROLES: acción ================================================= */
  --color-primary:       var(--navy-700);
  --color-primary-hover: var(--navy-800);
  --color-on-primary:    #FFFFFF;
  --color-interactive:   var(--navy-600);   /* links y foco */
  --color-cta:           var(--orange-500); /* D3: solo la acción principal de la pantalla */
  --color-cta-hover:     var(--orange-600);
  --color-on-cta:        var(--navy-900);
  --color-focus:         var(--navy-600);

  /* ===== 4. SEMÁNTICOS (pares fondo/texto AA; nunca el naranja de marca) == */
  --color-success:        #1C7C3C;
  --color-success-bg:     #E9F8EF;
  --color-success-border: #B5E3C6;
  --color-warning:        #8A5A00;
  --color-warning-bg:     #FCF0DB;
  --color-warning-border: #F1D39C;
  --color-error:          #A32D2D;
  --color-error-bg:       #FCEBEB;
  --color-error-border:   #F0BDBD;
  --color-info:           #24418C;
  --color-info-bg:        #EDF2FC;
  --color-info-border:    #C4D3F0;
  --color-neutral:        #4A5468;
  --color-neutral-bg:     #EEF0F4;

  /* ===== 5. MENÚ LATERAL ================================================== */
  --color-sidebar:        var(--navy-900);
  --color-sidebar-text:   #D3DBEE;
  --color-sidebar-muted:  #9BAAD0;
  --color-sidebar-hover:  rgba(255, 255, 255, .08);
  --color-sidebar-active: rgba(255, 255, 255, .13);
  --color-sidebar-line:   rgba(255, 255, 255, .12);

  /* ===== 6. TIPOGRAFÍA (D2: Poppins títulos, Inter interfaz) =============== */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-text:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --text-xs:   .75rem;     /* 12: metadatos, rótulos de tabla */
  --text-sm:   .8125rem;   /* 13: texto secundario */
  --text-base: .875rem;    /* 14: interfaz densa de oficina */
  --text-md:   .9375rem;   /* 15: lectura (procedimientos, ayuda) */
  --text-lg:   1.0625rem;  /* 17: título de tarjeta */
  --text-xl:   1.25rem;    /* 20: subtítulo de pantalla */
  --text-2xl:  1.5rem;     /* 24: título de pantalla */
  --text-3xl:  1.875rem;   /* 30: cifra de un indicador */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --leading-tight: 1.25;
  --leading-ui:    1.45;
  --leading-body:  1.6;

  /* ===== 7. ESPACIADO (base 4) ============================================ */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ===== 8. RADIOS (D5: tres y la píldora) ================================ */
  --radius-xs:   6px;   /* chips chicos, teclas */
  --radius-sm:   8px;   /* botones, campos, ítems del menú */
  --radius-md:   12px;  /* tarjetas, paneles, diálogos */
  --radius-pill: 999px;

  /* ===== 9. ELEVACIÓN ===================================================== */
  --shadow-raised:  0 1px 2px rgba(15, 29, 61, .06), 0 1px 1px rgba(15, 29, 61, .04);
  --shadow-overlay: 0 16px 40px rgba(8, 18, 45, .22);

  /* ===== 10. MOVIMIENTO =================================================== */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease: cubic-bezier(.2, 0, 0, 1);

  /* ===== 11. CAPAS ======================================================== */
  --z-top: 50; --z-velo: 55; --z-sidebar: 60; --z-ayuda: 85; --z-lupa: 90; --z-avisos: 95; --z-dialogo: 96;

  /* ===== 12. MEDIDAS DEL MARCO ============================================ */
  --sidebar-w:    248px;
  --sidebar-w-col: 64px;
  --topbar-h:     56px;
  --content-max:  1280px;
  --text-max:     72ch;
  --container-marketing: 1120px;
  --container-text:      720px;

  /* ===== 13. ALIAS HISTÓRICOS (no usar en código nuevo) =================== */
  --navy:   var(--navy-900);
  --orange: var(--orange-500);
  --ink:    var(--navy-950);
  --muted:  var(--color-muted);
  --line:   var(--color-border);
  --bg:     var(--color-background);

  color-scheme: light;
}

/* ===== TEMA OSCURO =======================================================
   Navy profundo, no negro: mantiene la identidad. Mismos roles, otros valores. */
:root[data-tema="oscuro"] {
  --color-background:    #0B1631;
  --color-surface:       #111E3F;
  --color-surface-2:     #15244B;
  --color-surface-3:     #1B2D5C;
  --color-text:          #E6EBF5;
  --color-heading:       #F1F4FB;
  --color-muted:         #AEB9D2;
  --color-faint:         #93A0BD;
  --color-border:        #24345F;
  --color-border-strong: #35497F;
  --color-overlay:       rgba(2, 6, 18, .7);
  --color-primary:       #3B5CAB;
  --color-primary-hover: #4C6DBC;
  --color-on-primary:    #FFFFFF;
  --color-interactive:   #A9C0F0;
  --color-focus:         #A9C0F0;
  --color-success:        #7FD9A1;
  --color-success-bg:     #12301F;
  --color-success-border: #24573A;
  --color-warning:        #F2C46D;
  --color-warning-bg:     #33260B;
  --color-warning-border: #5E4717;
  --color-error:          #F4A3A3;
  --color-error-bg:       #3A1616;
  --color-error-border:   #6B2C2C;
  --color-info:           #A9C0F0;
  --color-info-bg:        #172A57;
  --color-info-border:    #2D4682;
  --color-neutral:        #C4CCDD;
  --color-neutral-bg:     #1E2B4D;
  --color-sidebar:        #071027;
  --color-sidebar-text:   #D3DBEE;
  --color-sidebar-muted:  #8E9CC0;
  --shadow-raised:  0 1px 2px rgba(0, 0, 0, .35);
  --shadow-overlay: 0 16px 40px rgba(0, 0, 0, .5);
  --navy: #F1F4FB;
  --ink:  #E6EBF5;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --color-background:    #0B1631;
    --color-surface:       #111E3F;
    --color-surface-2:     #15244B;
    --color-surface-3:     #1B2D5C;
    --color-text:          #E6EBF5;
    --color-heading:       #F1F4FB;
    --color-muted:         #AEB9D2;
    --color-faint:         #93A0BD;
    --color-border:        #24345F;
    --color-border-strong: #35497F;
    --color-overlay:       rgba(2, 6, 18, .7);
    --color-primary:       #3B5CAB;
    --color-primary-hover: #4C6DBC;
    --color-on-primary:    #FFFFFF;
    --color-interactive:   #A9C0F0;
    --color-focus:         #A9C0F0;
    --color-success:        #7FD9A1;
    --color-success-bg:     #12301F;
    --color-success-border: #24573A;
    --color-warning:        #F2C46D;
    --color-warning-bg:     #33260B;
    --color-warning-border: #5E4717;
    --color-error:          #F4A3A3;
    --color-error-bg:       #3A1616;
    --color-error-border:   #6B2C2C;
    --color-info:           #A9C0F0;
    --color-info-bg:        #172A57;
    --color-info-border:    #2D4682;
    --color-neutral:        #C4CCDD;
    --color-neutral-bg:     #1E2B4D;
    --color-sidebar:        #071027;
    --color-sidebar-text:   #D3DBEE;
    --color-sidebar-muted:  #8E9CC0;
    --shadow-raised:  0 1px 2px rgba(0, 0, 0, .35);
    --shadow-overlay: 0 16px 40px rgba(0, 0, 0, .5);
    --navy: #F1F4FB;
    --ink:  #E6EBF5;
    color-scheme: dark;
  }
}

/* Foco visible universal */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Respeto de reduced-motion como piso del sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}