/**
 * SGE Design Tokens — fuente única de verdad para colores y espaciados.
 *
 * Uso en CSS:  color: var(--sge-primary);
 * Uso en JS:   getComputedStyle(document.documentElement).getPropertyValue('--sge-primary')
 *
 * MIGRACIÓN: reemplazar hex hardcodeados por estas variables en archivos nuevos o al tocar código existente.
 * NO hacer big-bang replace en archivos generados (app.css, icons.css, vendor/).
 */

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --sge-primary:        #185FA5;   /* azul corporativo principal  (938 usos) */
  --sge-primary-light:  #378ADD;   /* azul claro / hover          (500 usos) */
  --sge-secondary:      #0AB39C;   /* teal secundario             (142 usos) */
  --sge-teal:           #4ECAC2;   /* teal suave                  ( 57 usos) */
  --sge-cyan:           #00E5FF;   /* cyan acento                 (340 usos) */

  /* ── Semantic ───────────────────────────────────────────── */
  --sge-success:        #10B981;   /* verde éxito                 (194 usos) */
  --sge-success-alt:    #22C55E;   /* verde Bootstrap             ( 80 usos) */
  --sge-success-bs:     #28A745;   /* verde Bootstrap clásico     ( 53 usos) */
  --sge-warning:        #F59E0B;   /* ámbar aviso                 (178 usos) */
  --sge-warning-alt:    #F9B931;   /* dorado suave                ( 58 usos) */
  --sge-danger:         #EF4444;   /* rojo error                  (154 usos) */
  --sge-danger-alt:     #F1416C;   /* rojo rosado                 ( 63 usos) */
  --sge-danger-bs:      #DC3545;   /* rojo Bootstrap              ( 91 usos) */
  --sge-danger-soft:    #EF5F5F;   /* rojo suave                  ( 63 usos) */
  --sge-danger-dark:    #DC2626;   /* rojo oscuro                 ( 56 usos) */
  --sge-danger-light:   #F87171;   /* rojo claro                  ( 56 usos) */

  /* ── Neutral ────────────────────────────────────────────── */
  --sge-dark:           #1E293B;   /* slate 800                   (166 usos) */
  --sge-dark-alt:       #323A46;   /* dark sidebar                ( 63 usos) */
  --sge-gray-700:       #475569;   /* slate 600                   ( 85 usos) */
  --sge-gray-600:       #64748B;   /* slate 500                   (381 usos) */
  --sge-gray-500:       #6C757D;   /* Bootstrap secondary         (175 usos) */
  --sge-gray-400:       #94A3B8;   /* slate 400                   (204 usos) */
  --sge-gray-300:       #DEE2E6;   /* Bootstrap border            ( 90 usos) */
  --sge-gray-200:       #E2E8F0;   /* slate 200                   (143 usos) */
  --sge-gray-100:       #E9ECEF;   /* Bootstrap light             (112 usos) */
  --sge-gray-50:        #F1F5F9;   /* slate 100                   ( 81 usos) */
  --sge-surface:        #F8F9FA;   /* Bootstrap bg-light          (177 usos) */
  --sge-surface-alt:    #F8FAFC;   /* slate 50                    ( 75 usos) */
  --sge-white:          #FFFFFF;   /* blanco                      (249 usos) */

  /* ── Integrations ───────────────────────────────────────── */
  --sge-whatsapp:       #25D366;   /* verde WhatsApp              (108 usos) */

  /* ── VIP / Immersion (SIGUEN el tema, valores claros) ──────────────
     GOV-UX-20 los definio FIJOS EN OSCURO a proposito, con este argumento:
     "el look VIP es una firma visual de estas pantallas, no algo que tenga
     que apagarse si alguien prefiere el tema claro en el resto del sitio".

     GOV-UX-42 lo revierte, por decision explicita del dueño: "no coloques
     fondos oscuros, esos no son de nosotros al menos que activemos el modo
     dark". Una firma visual que aparece SOLO en 15 de las pantallas no es
     una firma: es una isla oscura en un sistema claro, y era el reclamo
     que el dueño venia repitiendo pantalla por pantalla.

     Los valores claros son los mismos de --alpha-* (sge-elite-base.css),
     que es el juego que este sistema ya usa para superficies adaptativas;
     los oscuros de mas abajo son EXACTAMENTE los que estaban aca, asi que
     en modo oscuro nada cambia de aspecto.

     Alcance: 67 usos de .card-enhanced, 5 de .immersion-card y 5 de
     .glass-panel-elite, repartidos en 15 plantillas. */
  --vip-bg:             #fdfdfd;                     /* = --alpha-bg claro */
  --vip-card:           rgba(255, 255, 255, 0.9);    /* = --alpha-surface claro */
  --vip-card-shadow:    0 10px 40px rgba(0, 0, 0, 0.08);
  --vip-border:         rgba(0, 0, 0, 0.08);         /* = --alpha-border claro */
  --vip-border-strong:  rgba(24, 95, 165, 0.35);     /* azul de marca, no cian neon */
  --vip-glass-bg:       rgba(24, 95, 165, 0.05);
  --vip-glass-blur:     15px;
  --vip-text:           #0f172a;                     /* = --alpha-text claro */
  --vip-muted:          rgba(15, 23, 42, 0.6);       /* = --alpha-text-m claro */
  --vip-accent:         var(--sge-cyan);
  --vip-primary:        var(--sge-primary);
  --vip-secondary:      var(--sge-primary-light);
  --vip-blue-soft:      rgba(24, 95, 165, 0.15);
  --vip-success:        var(--sge-success);
  --vip-warning:        var(--sge-warning);
  --vip-danger:         var(--sge-danger);

}

/* Los mismos --vip-* en modo oscuro: valores IDENTICOS a los que tenian
   cuando estaban fijos, asi que activando el tema oscuro estas pantallas se
   ven exactamente como se veian antes de GOV-UX-42. Lo unico que cambio es
   que ahora hay un modo claro. */
[data-bs-theme="dark"] {
  /* GOV-UX-43 -- ESTAS DOS FALTABAN, y era la causa de que en modo oscuro
     TODA tarjeta comun (`.card`) fuera BLANCA.

     `sge-unificado.css` pinta `.card` con `var(--sge-surface)`, y aca arriba
     --sge-surface esta declarada `#F8F9FA` dentro de `:root`.
     `sge-design-system.css` si tiene una variante oscura, pero pierde: `:root`
     y `[data-bs-theme="dark"]` valen LO MISMO en especificidad (0,1,0), asi
     que gana el que carga ultimo -- y es este archivo.

     Sintoma medido en /command-center/system-tests/ con el tema oscuro: la
     tarjeta en rgb(255,255,255) y su `text-muted` en rgba(255,255,255,.62).
     Texto blanco sobre blanco, contraste 1,00. Por eso las plantillas venian
     poniendo `bg-dark` a mano: estaban compensando esto. */
  --sge-surface:        rgba(10, 20, 40, 0.80);
  --sge-surface-alt:    rgba(15, 23, 42, 0.72);

  --vip-bg:             #020617;
  --vip-card:           rgba(15, 23, 42, 0.6);
  --vip-card-shadow:    0 10px 40px rgba(1, 9, 18, 0.5);
  --vip-border:         rgba(255, 255, 255, 0.07);
  --vip-border-strong:  rgba(0, 229, 255, 0.3);
  --vip-glass-bg:       rgba(4, 44, 83, 0.12);
  --vip-text:           #E2E8F0;
  --vip-muted:          #94A3B8;
}

:root {
  /* ── Spacing (base 4px) ─────────────────────────────────── */
  --sge-space-1:  0.25rem;
  --sge-space-2:  0.5rem;
  --sge-space-3:  0.75rem;
  --sge-space-4:  1rem;
  --sge-space-6:  1.5rem;
  --sge-space-8:  2rem;
  --sge-space-12: 3rem;

  /* ── Radius ─────────────────────────────────────────────── */
  --sge-radius-sm:  4px;
  --sge-radius:     8px;
  --sge-radius-lg:  12px;
  --sge-radius-xl:  16px;
  --sge-radius-2xl: 24px;
  --sge-radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --sge-shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --sge-shadow:     0 4px 12px rgba(0,0,0,.10);
  --sge-shadow-lg:  0 8px 24px rgba(0,0,0,.14);
  --sge-shadow-xl:  0 16px 48px rgba(0,0,0,.18);

  /* ── Transitions ────────────────────────────────────────── */
  --sge-transition:       0.2s ease;
  --sge-transition-slow:  0.35s ease;

  /* ── Z-index layers ─────────────────────────────────────── */
  --sge-z-dropdown:  1000;
  --sge-z-sticky:    1020;
  --sge-z-modal:     1050;
  --sge-z-toast:     1080;
  --sge-z-tooltip:   1090;
}