/* ════════════════════════════════════════════════════════════════════
   GoSysPro Design System 1.0 — Tokens
   Única fuente de verdad de color, tipografía, espaciado y movimiento.
   Debe cargarse ANTES de app.css. Especificación: design/03-sistema-de-diseno.md
   Dark = tema principal (NOC/SOC). Light = override por [data-theme="light"].
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Montserrat:wght@700;800&family=Outfit:wght@500;600;700;800&display=swap');

:root {
  /* ── Superficies (dark, escalonadas — nunca #000) ─────────────── */
  --gsp-bg:             #0C1322;
  --gsp-surface-1:      #121B2E;
  --gsp-surface-2:      #18233A;
  --gsp-surface-3:      #1F2D4A;
  --gsp-border:         #243352;
  --gsp-border-strong:  #35496F;

  /* ── Texto ────────────────────────────────────────────────────── */
  --gsp-text:           #E6ECF7;  /* 14.9:1 sobre bg */
  --gsp-text-secondary: #A3B2CC;  /*  8.0:1 */
  --gsp-text-muted:     #6B7CA3;  /*  4.6:1 — mínimo para texto funcional */
  --gsp-text-disabled:  #49587A;  /* solo elementos disabled */

  /* ── Marca / acento ───────────────────────────────────────────── */
  --gsp-primary:        #00A8E0;
  --gsp-primary-hover:  #2BBCEE;
  --gsp-primary-muted:  rgba(0,168,224,.14);
  --gsp-secondary:      #7C8DF0;
  --gsp-secondary-muted: rgba(124,141,240,.14);

  /* ── Semánticos de UI ─────────────────────────────────────────── */
  --gsp-success:        #34C759;
  --gsp-warning:        #F5A623;
  --gsp-error:          #F2545B;
  --gsp-info:           #4D9EF8;

  /* ── Severidades: base (sólido) / fg (texto chip) / bg (fondo chip) */
  --sev-critical:       #E5484D;
  --sev-critical-fg:    #FF8A8E;
  --sev-critical-bg:    rgba(229,72,77,.16);
  --sev-major:          #F76808;
  --sev-major-fg:       #FF9D5C;
  --sev-major-bg:       rgba(247,104,8,.16);
  --sev-minor:          #F5A623;
  --sev-minor-fg:       #FFC966;
  --sev-minor-bg:       rgba(245,166,35,.14);
  --sev-warning:        #F5D90A;
  --sev-warning-fg:     #F0E16E;
  --sev-warning-bg:     rgba(245,217,10,.12);
  --sev-informational:    #4D9EF8;
  --sev-informational-fg: #8BC0FB;
  --sev-informational-bg: rgba(77,158,248,.14);
  --sev-ok:             #46A758;
  --sev-ok-fg:          #7BD389;
  --sev-ok-bg:          rgba(70,167,88,.14);
  --sev-debug:          #8E7CF0;
  --sev-debug-fg:       #BCB2F7;
  --sev-debug-bg:       rgba(142,124,240,.14);
  --sev-unknown:        #6E7C96;
  --sev-unknown-fg:     #9AA8C0;
  --sev-unknown-bg:     rgba(110,124,150,.14);

  /* ── Estados de alerta ────────────────────────────────────────── */
  --status-open-fg:     #FF8A8E;  --status-open-bg:     rgba(229,72,77,.14);
  --status-ack-fg:      #8BC0FB;  --status-ack-bg:      rgba(77,158,248,.14);
  --status-silenced-fg: #BCB2F7;  --status-silenced-bg: rgba(142,124,240,.14);
  --status-closed-fg:   #7BD389;  --status-closed-bg:   rgba(70,167,88,.14);
  --status-expired-fg:  #9AA8C0;  --status-expired-bg:  rgba(110,124,150,.14);

  /* ── Tipografía ───────────────────────────────────────────────── */
  --gsp-font:       'Inter', system-ui, 'Segoe UI', sans-serif;
  --gsp-font-mono:  'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
  --gsp-font-brand: 'Montserrat', sans-serif;     /* solo logo/login */

  --text-2xs: 10px;  --lh-2xs: 14px;   /* solo badges numéricos */
  --text-xs:  11px;  --lh-xs:  16px;
  --text-sm:  12px;  --lh-sm:  16px;
  --text-base:13px;  --lh-base:20px;   /* cuerpo por defecto */
  --text-md:  14px;  --lh-md:  20px;
  --text-lg:  16px;  --lh-lg:  24px;
  --text-xl:  20px;  --lh-xl:  28px;
  --text-2xl: 28px;  --lh-2xl: 34px;   /* KPIs */

  /* ── Espaciado (base 4px) ─────────────────────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 48px; --space-10: 64px;

  /* ── Radios ───────────────────────────────────────────────────── */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;

  /* ── Elevación ────────────────────────────────────────────────── */
  --elevation-1: 0 2px 8px rgba(0,0,0,.35);
  --elevation-2: 0 12px 40px rgba(0,0,0,.5);

  /* ── Capas ────────────────────────────────────────────────────── */
  --z-sticky: 10; --z-nav: 100; --z-dropdown: 500;
  --z-overlay: 900; --z-modal: 1000; --z-toast: 1100;

  /* ── Movimiento ───────────────────────────────────────────────── */
  --motion-fast: 120ms ease-out;
  --motion-base: 200ms cubic-bezier(.2, 0, 0, 1);
  --motion-slow: 300ms cubic-bezier(.2, 0, 0, 1);

  /* ── Layout shell ─────────────────────────────────────────────── */
  --nav-width: 232px;        /* sidebar expandido */
  --nav-width-rail: 56px;    /* sidebar colapsado (rail de iconos) */
  --header-height: 52px;
  --filter-panel-width: 248px;
  --detail-panel-width: 400px;
}

/* ════════════════════════════════════════════════════════════════════
   TEMA CLARO — override completo (no parcial: cada token con par light)
   ════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --gsp-bg:             #F4F6FA;
  --gsp-surface-1:      #FFFFFF;
  --gsp-surface-2:      #EDF1F7;
  --gsp-surface-3:      #E2E9F3;
  --gsp-border:         #D8E0EC;
  --gsp-border-strong:  #AFBDD4;

  --gsp-text:           #16223B;
  --gsp-text-secondary: #42526E;
  --gsp-text-muted:     #5E6F8F;
  --gsp-text-disabled:  #9AA8C0;

  --gsp-primary:        #007AAD;
  --gsp-primary-hover:  #0095C8;
  --gsp-primary-muted:  rgba(0,122,173,.10);
  --gsp-secondary:      #5B6BD6;
  --gsp-secondary-muted: rgba(91,107,214,.10);

  --gsp-success:        #1E8E3E;
  --gsp-warning:        #B26205;
  --gsp-error:          #C5303A;
  --gsp-info:           #1A6FD4;

  --sev-critical:       #D93840; --sev-critical-fg: #A3232B; --sev-critical-bg: rgba(217,56,64,.10);
  --sev-major:          #E25F0A; --sev-major-fg:    #9E4505; --sev-major-bg:    rgba(226,95,10,.10);
  --sev-minor:          #DD8C0A; --sev-minor-fg:    #8F5E06; --sev-minor-bg:    rgba(221,140,10,.10);
  --sev-warning:        #C9A700; --sev-warning-fg:  #7A6500; --sev-warning-bg:  rgba(201,167,0,.12);
  --sev-informational:    #2A7FDB; --sev-informational-fg: #1B5FAC; --sev-informational-bg: rgba(42,127,219,.10);
  --sev-ok:             #2F9E44; --sev-ok-fg:       #1F7A33; --sev-ok-bg:       rgba(47,158,68,.10);
  --sev-debug:          #7058DB; --sev-debug-fg:    #5240AC; --sev-debug-bg:    rgba(112,88,219,.10);
  --sev-unknown:        #64748B; --sev-unknown-fg:  #475569; --sev-unknown-bg:  rgba(100,116,139,.10);

  --status-open-fg:    #A3232B; --status-open-bg:    rgba(217,56,64,.10);
  --status-ack-fg:     #1B5FAC; --status-ack-bg:     rgba(42,127,219,.10);
  --status-silenced-fg: #5240AC; --status-silenced-bg: rgba(112,88,219,.10);
  --status-closed-fg:  #1F7A33; --status-closed-bg:  rgba(47,158,68,.10);
  --status-expired-fg: #475569; --status-expired-bg: rgba(100,116,139,.10);

  --elevation-1: 0 2px 8px rgba(22,34,59,.10);
  --elevation-2: 0 12px 40px rgba(22,34,59,.18);
}

/* ════════════════════════════════════════════════════════════════════
   TEMA NOVA — interfaz oscura moderna (acento índigo/violeta, "Soft UI").
   Hereda las severidades/estados semánticos del dark base (:root) y solo
   redefine superficies, texto, acento, elevación y radios. Diseñado con el
   skill ui-ux-pro-max (estilo "Soft UI Evolution", paleta indigo/violet on dark).
   ════════════════════════════════════════════════════════════════════ */
html[data-theme="nova"] {
  /* ── Superficies: slate índigo profundo con tinte violeta (nunca #000) ── */
  --gsp-bg:             #0B0F1E;
  --gsp-surface-1:      #141A2E;
  --gsp-surface-2:      #1B2340;
  --gsp-surface-3:      #232C4F;
  --gsp-border:         #2A3357;
  --gsp-border-strong:  #3D4776;

  /* ── Texto (contraste verificado sobre --gsp-bg) ─────────────────────── */
  --gsp-text:           #EDEFFA;  /* ~15:1 */
  --gsp-text-secondary: #AEB6D6;  /*  ~8.7:1 */
  --gsp-text-muted:     #808AB0;  /*  ~5.0:1 — mínimo funcional */
  --gsp-text-disabled:  #545E85;

  /* ── Acento índigo / violeta (fresco, distinto del cian del NOC) ─────── */
  --gsp-primary:         #7C83F5;
  --gsp-primary-hover:   #99A0F8;
  --gsp-primary-muted:   rgba(124,131,245,.16);
  --gsp-secondary:       #C084FC;
  --gsp-secondary-muted: rgba(192,132,252,.16);
  --gsp-info:            #6AA6FF;

  /* ── Elevación suave y estratificada (Soft UI Evolution) ─────────────── */
  --elevation-1: 0 1px 2px rgba(0,0,0,.32), 0 6px 20px rgba(8,10,26,.45);
  --elevation-2: 0 16px 48px rgba(6,8,22,.6);

  /* ── Radios ligeramente mayores (moderno, suave) ─────────────────────── */
  --radius-xs: 5px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px;
}

/* ════════════════════════════════════════════════════════════════════
   TEMA LUMEN — reingeniería de la UI (dirección híbrida ops+limpio).
   Dark moderno refinado: superficies más profundas y limpias, acento azul +
   cian de marca, tipografía Outfit (títulos/KPIs) + Inter (cuerpo), radios y
   sombras más suaves. Hereda severidades/estados del dark base. El polish de
   componentes vive scoped en app.css (`html[data-theme="lumen"] …`).
   Diseñado con el skill ui-ux-pro-max (estilo "Data-Dense Dashboard").
   ════════════════════════════════════════════════════════════════════ */
html[data-theme="lumen"] {
  /* Superficies — near-black slate, escalonadas y limpias */
  --gsp-bg:             #0A0E17;
  --gsp-surface-1:      #0F1524;
  --gsp-surface-2:      #141B2C;
  --gsp-surface-3:      #1A2236;
  --gsp-border:         #212B42;
  --gsp-border-strong:  #2E3A57;

  /* Texto (contraste verificado sobre --gsp-bg) */
  --gsp-text:           #EAEEF7;
  --gsp-text-secondary: #98A4BE;
  --gsp-text-muted:     #6E7A96;
  --gsp-text-disabled:  #47526E;

  /* Acento azul + cian de marca */
  --gsp-primary:         #3B82F6;
  --gsp-primary-hover:   #60A5FA;
  --gsp-primary-muted:   rgba(59,130,246,.14);
  --gsp-secondary:       #22D3EE;
  --gsp-secondary-muted: rgba(34,211,238,.14);
  --gsp-info:            #5B9DF9;

  /* Radios y sombras más suaves/modernas */
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --elevation-1: 0 1px 2px rgba(0,0,0,.40), 0 8px 24px rgba(0,0,0,.28);
  --elevation-2: 0 20px 50px rgba(0,0,0,.5);
}

/* ════════════════════════════════════════════════════════════════════
   REGLAS GLOBALES BASE (acompañan a los tokens)
   ════════════════════════════════════════════════════════════════════ */

/* Focus visible — WCAG 2.4.7. Aplica a TODO elemento interactivo */
:focus-visible {
  outline: 2px solid var(--gsp-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Numerales tabulares en todo dato numérico */
.gsp-num, .gsp-kpi-value, .gsp-count-badge, td[data-numeric], time {
  font-variant-numeric: tabular-nums;
}

/* Datos técnicos en monospace */
.gsp-mono { font-family: var(--gsp-font-mono); font-size: 0.92em; }

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}