/*
 * Brain Framework — Design Tokens v1.2.0
 * Sistema de diseño canónico del ecosistema Brain.
 * Todas las apps del ecosistema importan este archivo como fuente de verdad.
 *
 * Filosofía: Dark & cerebral, Electric & alive — precisión de datos con energía visual.
 * Referencias: Linear, Bloomberg Terminal, visualizaciones de física de partículas.
 *
 * Uso: Importar antes de cualquier otro stylesheet.
 *      Todos los componentes referencian variables semánticas — nunca valores primitivos directamente.
 *
 * Overrides de proyecto: Sobreescribir variables semánticas en el CSS del proyecto.
 *      Nunca modificar los primitivos — solo re-mapear semánticos.
 *
 * Versión: 1.1.0 · 2026-06-19
 *
 * v1.1.0 — Agregado: tokens de íconos (--icon-*), containers de íconos,
 *           --sidebar-footer-height, animación brain-spin.
 */


/* ═══════════════════════════════════════════════════════════════════════════ */
/* PRIMITIVOS — Valores base. No usar directamente en componentes.            */
/* ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Paleta Navy / Deep Space ──────────────────────────────────────────── */
  --primitive-navy-900:   #0E1117;   /* Canvas más oscuro */
  --primitive-navy-800:   #161B24;   /* Superficie base */
  --primitive-navy-700:   #1C2130;   /* Superficie elevada */
  --primitive-navy-600:   #242834;   /* Deep Space — overlay */
  --primitive-navy-500:   #2E3445;   /* Interactivo sutil */
  --primitive-navy-400:   #3A4055;   /* Interactivo default */
  --primitive-navy-300:   #4A5268;   /* Borde fuerte */
  --primitive-navy-200:   #6B7494;   /* Texto terciario */
  --primitive-navy-100:   #9BA4BC;   /* Texto secundario */

  /* ── Neural Green — Color primario de marca ────────────────────────────── */
  --primitive-green-700:  #6D9900;
  --primitive-green-600:  #91CC00;
  --primitive-green-500:  #B6FF00;   /* ← Neural Green principal */
  --primitive-green-400:  #C5FF33;
  --primitive-green-300:  #D4FF66;
  --primitive-green-200:  #E3FF99;
  --primitive-green-100:  #F1FFCC;

  /* ── Cognitive Purple — Secundario ─────────────────────────────────────── */
  --primitive-purple-700: #4A2EB8;
  --primitive-purple-600: #6340E0;
  --primitive-purple-500: #7D53FF;   /* ← Cognitive Purple principal */
  --primitive-purple-400: #9772FF;
  --primitive-purple-300: #B191FF;
  --primitive-purple-200: #CBB0FF;
  --primitive-purple-100: #E5D8FF;

  /* ── Synaptic Blue — Terciario / datos en vivo ─────────────────────────── */
  --primitive-blue-700:   #007399;
  --primitive-blue-600:   #009ACC;
  --primitive-blue-500:   #00C2FF;   /* ← Synaptic Blue principal */
  --primitive-blue-400:   #33CEFF;
  --primitive-blue-300:   #66DAFF;
  --primitive-blue-200:   #99E7FF;
  --primitive-blue-100:   #CCF3FF;

  /* ── Alert Amber — Advertencias ────────────────────────────────────────── */
  --primitive-orange-700: #994000;
  --primitive-orange-600: #CC5500;
  --primitive-orange-500: #FF6B00;   /* ← Alert Amber principal */
  --primitive-orange-400: #FF8933;
  --primitive-orange-300: #FFA766;
  --primitive-orange-200: #FFC499;
  --primitive-orange-100: #FFE2CC;

  /* ── Error Red ─────────────────────────────────────────────────────────── */
  --primitive-red-500:    #FF4D6A;
  --primitive-red-400:    #FF7088;
  --primitive-red-100:    rgba(255, 77, 106, 0.12);

  /* ── Neutros ────────────────────────────────────────────────────────────── */
  --primitive-white:      #FFFFFF;
  --primitive-gray-50:    #F2F4F8;
  --primitive-gray-100:   #E8EBF0;
  --primitive-gray-200:   #D0D5E0;
  --primitive-gray-300:   #B0B8CC;
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* MODO OSCURO — Default del ecosistema Brain                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {

  /* ── Fondos ─────────────────────────────────────────────────────────────── */
  --color-bg-base:          var(--primitive-navy-900);   /* Canvas, página */
  --color-bg-surface:       var(--primitive-navy-800);   /* Sidebar, topbar */
  --color-bg-elevated:      var(--primitive-navy-700);   /* Cards, modales */
  --color-bg-overlay:       var(--primitive-navy-600);   /* Deep overlay */
  --color-bg-subtle:        var(--primitive-navy-500);   /* Hover sutil */
  --color-bg-interactive:   var(--primitive-navy-400);   /* Hover interactivo */

  /* ── Bordes ─────────────────────────────────────────────────────────────── */
  --color-border-subtle:    var(--primitive-navy-500);
  --color-border-default:   var(--primitive-navy-400);
  --color-border-strong:    var(--primitive-navy-300);
  --color-border-brand:     var(--primitive-green-500);
  --color-border-accent:    var(--primitive-purple-500);

  /* ── Texto ──────────────────────────────────────────────────────────────── */
  --color-text-primary:     var(--primitive-gray-100);   /* #E8EBF0 */
  --color-text-secondary:   var(--primitive-navy-100);   /* #9BA4BC */
  --color-text-tertiary:    var(--primitive-navy-200);   /* #6B7494 */
  --color-text-disabled:    var(--primitive-navy-300);
  --color-text-inverse:     var(--primitive-navy-900);
  --color-text-brand:       var(--primitive-green-500);
  --color-text-accent:      var(--primitive-purple-400);
  --color-text-info:        var(--primitive-blue-400);
  --color-text-warning:     var(--primitive-orange-400);
  --color-text-success:     var(--primitive-green-400);
  --color-text-error:       var(--primitive-red-500);
  --color-data-accent:      var(--primitive-green-500);   /* Texto numérico destacado: Neural Green en dark */

  /* ── Colores de marca / interactivos ────────────────────────────────────── */
  --color-brand-primary:    var(--primitive-green-500);   /* Neural Green */
  --color-brand-secondary:  var(--primitive-purple-500);  /* Cognitive Purple */
  --color-brand-tertiary:   var(--primitive-blue-500);    /* Synaptic Blue */
  --color-brand-alert:      var(--primitive-orange-500);  /* Alert Amber */

  /* ── Estados de sistema ─────────────────────────────────────────────────── */
  --color-status-running:   var(--primitive-green-500);
  --color-status-degraded:  var(--primitive-orange-500);
  --color-status-failed:    var(--primitive-red-500);
  --color-status-idle:      var(--primitive-navy-200);
  --color-status-pending:   var(--primitive-blue-500);

  /* ── Data visualization — series ordenadas ──────────────────────────────── */
  --color-dataviz-1:        var(--primitive-green-500);   /* Modelo primario */
  --color-dataviz-2:        var(--primitive-purple-500);  /* Modelo secundario */
  --color-dataviz-3:        var(--primitive-blue-500);    /* Terciario */
  --color-dataviz-4:        var(--primitive-orange-500);  /* Cuarto */
  --color-dataviz-5:        var(--primitive-green-300);   /* Variante clara */
  --color-dataviz-6:        var(--primitive-purple-300);  /* Variante clara */

  /* ── Sombras — Dark mode: aditivas, no sustractivas ────────────────────── */
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:     0 2px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-xl:     0 16px 48px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.4);

  --shadow-glow-green:
    0 0 0 1px rgba(182,255,0,0.3),
    0 0 16px rgba(182,255,0,0.15),
    0 0 32px rgba(182,255,0,0.08);

  --shadow-glow-purple:
    0 0 0 1px rgba(125,83,255,0.4),
    0 0 16px rgba(125,83,255,0.2),
    0 0 32px rgba(125,83,255,0.08);

  --shadow-glow-blue:
    0 0 0 1px rgba(0,194,255,0.3),
    0 0 16px rgba(0,194,255,0.15);

  --shadow-focus:  0 0 0 2px var(--color-brand-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* MODO CLARO                                                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {

  /* ── Fondos ─────────────────────────────────────────────────────────────── */
  --color-bg-base:          var(--primitive-gray-50);
  --color-bg-surface:       var(--primitive-white);
  --color-bg-elevated:      var(--primitive-white);
  --color-bg-overlay:       var(--primitive-gray-100);
  --color-bg-subtle:        var(--primitive-gray-200);
  --color-bg-interactive:   var(--primitive-gray-100);

  /* ── Bordes ─────────────────────────────────────────────────────────────── */
  --color-border-subtle:    var(--primitive-gray-100);
  --color-border-default:   var(--primitive-gray-200);
  --color-border-strong:    var(--primitive-gray-300);
  --color-border-brand:     var(--primitive-green-600);
  --color-border-accent:    var(--primitive-purple-500);

  /* ── Texto ──────────────────────────────────────────────────────────────── */
  --color-text-primary:     var(--primitive-navy-900);
  --color-text-secondary:   var(--primitive-navy-400);
  --color-text-tertiary:    var(--primitive-navy-300);
  --color-text-disabled:    var(--primitive-gray-300);
  --color-text-inverse:     var(--primitive-gray-100);
  --color-text-brand:       var(--primitive-green-700);   /* Verde lima → oscurecer en light */
  --color-text-accent:      var(--primitive-purple-600);
  --color-text-info:        var(--primitive-blue-600);
  --color-text-warning:     var(--primitive-orange-600);
  --color-text-success:     var(--primitive-green-700);
  --color-text-error:       #DC2626;
  --color-data-accent:      var(--primitive-purple-600);  /* Texto numérico destacado: Cognitive Purple en light (legible sobre blanco) */

  /* ── Colores de marca — los acentos no se desaturan en light ───────────── */
  --color-brand-primary:    var(--primitive-green-500);
  --color-brand-secondary:  var(--primitive-purple-500);
  --color-brand-tertiary:   var(--primitive-blue-500);
  --color-brand-alert:      var(--primitive-orange-500);

  /* ── Badges — Light mode: colores legibles sobre fondo claro ───────────── */
  --badge-running-bg:      rgba(109,153,0,0.10);
  --badge-running-text:    #5A8000;
  --badge-running-border:  rgba(109,153,0,0.30);

  --badge-pending-bg:      rgba(0,150,200,0.10);
  --badge-pending-text:    #0077AA;
  --badge-pending-border:  rgba(0,150,200,0.30);

  --badge-degraded-bg:     rgba(204,85,0,0.10);
  --badge-degraded-text:   #994000;
  --badge-degraded-border: rgba(204,85,0,0.30);

  --badge-failed-bg:       rgba(220,38,38,0.10);
  --badge-failed-text:     #DC2626;
  --badge-failed-border:   rgba(220,38,38,0.25);

  /* ── Nav active — Light mode ──────────────────────────────────────────── */
  --nav-item-active-bg:    rgba(109,153,0,0.10);
  --nav-item-active-text:  #5A8000;
  --nav-item-hover-bg:     var(--color-bg-overlay);
  --nav-item-hover-text:   var(--primitive-navy-900);

  /* ── Botón secundario — Light mode ───────────────────────────────────── */
  --btn-secondary-bg-hover: rgba(125,83,255,0.08);
  --btn-ghost-bg-hover:     var(--color-bg-overlay);

  /* ── Sombras — Light mode: convencionales ──────────────────────────────── */
  --shadow-sm:     0 1px 3px rgba(14,17,23,0.08);
  --shadow-md:     0 4px 12px rgba(14,17,23,0.10);
  --shadow-lg:     0 8px 24px rgba(14,17,23,0.12);
  --shadow-xl:     0 16px 48px rgba(14,17,23,0.15);

  --shadow-glow-green:
    0 0 0 2px rgba(182,255,0,0.5),
    0 0 12px rgba(182,255,0,0.2);

  --shadow-glow-purple:
    0 0 0 2px rgba(125,83,255,0.4),
    0 0 12px rgba(125,83,255,0.15);

  --shadow-focus:  0 0 0 2px var(--color-brand-primary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-base:          var(--primitive-navy-900);
    --color-bg-surface:       var(--primitive-navy-800);
    --color-bg-elevated:      var(--primitive-navy-700);
    --color-bg-overlay:       var(--primitive-navy-600);
    --color-bg-subtle:        var(--primitive-navy-500);
    --color-bg-interactive:   var(--primitive-navy-400);
    --color-border-subtle:    var(--primitive-navy-500);
    --color-border-default:   var(--primitive-navy-400);
    --color-border-strong:    var(--primitive-navy-300);
    --color-border-brand:     var(--primitive-green-500);
    --color-border-accent:    var(--primitive-purple-500);
    --color-text-primary:     var(--primitive-gray-100);
    --color-text-secondary:   var(--primitive-navy-100);
    --color-text-tertiary:    var(--primitive-navy-200);
    --color-text-brand:       var(--primitive-green-500);
    --color-text-accent:      var(--primitive-purple-400);
    --shadow-sm:     0 1px 2px rgba(0,0,0,0.4);
    --shadow-md:     0 2px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-lg:     0 8px 24px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
    --shadow-xl:     0 16px 48px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.4);
    --shadow-glow-green:
      0 0 0 1px rgba(182,255,0,0.3),
      0 0 16px rgba(182,255,0,0.15),
      0 0 32px rgba(182,255,0,0.08);
    --shadow-glow-purple:
      0 0 0 1px rgba(125,83,255,0.4),
      0 0 16px rgba(125,83,255,0.2),
      0 0 32px rgba(125,83,255,0.08);
    --shadow-focus:  0 0 0 2px var(--color-brand-primary);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* GRADIENTES                                                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --gradient-brand:        linear-gradient(135deg, #B6FF00 0%, #7D53FF 100%);
  --gradient-neural:       linear-gradient(90deg, #7D53FF 0%, #00C2FF 100%);
  --gradient-alert:        linear-gradient(90deg, #FF6B00 0%, #FF4D6A 100%);
  --gradient-glow-green:   radial-gradient(ellipse at top, rgba(182,255,0,0.08) 0%, transparent 70%);
  --gradient-glow-purple:  radial-gradient(ellipse at top, rgba(125,83,255,0.10) 0%, transparent 70%);
  --gradient-mesh-light:
    radial-gradient(at 30% 20%, rgba(125,83,255,0.15) 0%, transparent 50%),
    radial-gradient(at 80% 80%, rgba(182,255,0,0.08) 0%, transparent 50%),
    radial-gradient(at 60% 50%, rgba(0,194,255,0.06) 0%, transparent 50%);
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* TIPOGRAFÍA                                                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Familias */
  --font-family-base:  'Inter', 'Geist', system-ui, -apple-system, sans-serif;
  --font-family-mono:  'JetBrains Mono', 'Fira Code', 'Geist Mono', monospace;

  /* Escala de tamaños */
  --font-size-2xs:     0.625rem;    /* 10px — micro labels, badges */
  --font-size-xs:      0.6875rem;   /* 11px — chart axis, chips */
  --font-size-sm:      0.75rem;     /* 12px — table cells, metadata */
  --font-size-base:    0.8125rem;   /* 13px — body default */
  --font-size-md:      0.875rem;    /* 14px — body principal */
  --font-size-lg:      1rem;        /* 16px — nav items, labels */
  --font-size-xl:      1.125rem;    /* 18px — card titles */
  --font-size-2xl:     1.375rem;    /* 22px — section titles */
  --font-size-3xl:     1.75rem;     /* 28px — page titles */
  --font-size-4xl:     2.25rem;     /* 36px — hero KPIs */
  --font-size-5xl:     3rem;        /* 48px — large metrics */
  --font-size-6xl:     4rem;        /* 64px — splash hero */
  --font-size-display: 6rem;        /* 96px — logotype display */

  /* Pesos */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;   /* Reservado exclusivamente para logotipo */

  /* Altura de línea */
  --line-height-tight:    1.1;    /* Hero headings */
  --line-height-snug:     1.25;   /* Subheadings */
  --line-height-normal:   1.4;    /* Body */
  --line-height-relaxed:  1.6;    /* Párrafos largos */
  --line-height-loose:    2.0;    /* Filas de tabla */

  /* Espaciado de letras */
  --letter-spacing-tight:   -0.03em;  /* Headings grandes */
  --letter-spacing-normal:   0em;
  --letter-spacing-wide:     0.04em;  /* Labels all-caps */
  --letter-spacing-wider:    0.08em;  /* Badge text */
  --letter-spacing-widest:   0.12em;  /* Nav, section dividers */
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* ESPACIADO — Base 8px                                                        */
/* ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --space-0:    0px;
  --space-px:   1px;
  --space-0-5:  2px;    /* Micro gaps */
  --space-1:    4px;    /* XS */
  --space-1-5:  6px;    /* Badge padding */
  --space-2:    8px;    /* SM */
  --space-3:    12px;   /* Base */
  --space-4:    16px;   /* MD */
  --space-5:    20px;   /* Card padding */
  --space-6:    24px;   /* Section gap */
  --space-8:    32px;   /* LG */
  --space-10:   40px;   /* XL */
  --space-12:   48px;   /* Hero */
  --space-16:   64px;   /* 2XL */
  --space-20:   80px;   /* 3XL */
  --space-24:   96px;   /* Max layout */
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* LAYOUT                                                                      */
/* ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Anchos máximos */
  --max-width-content:  1376px;
  --max-width-wide:     1280px;

  /* Sidebar */
  --sidebar-width:            220px;
  --sidebar-width-collapsed:   64px;
  --sidebar-footer-height:     48px;   /* Footer de versión + changelog */

  /* Topbar */
  --topbar-height:  56px;

  /* Breakpoints */
  --breakpoint-sm:   640px;
  --breakpoint-md:   768px;
  --breakpoint-lg:   1024px;
  --breakpoint-xl:   1280px;
  --breakpoint-2xl:  1440px;
  --breakpoint-3xl:  1920px;
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* ÍCONOS — Brain Icon System "Rounded Outline Precision"                      */
/* Spec completa: Sistema_Gestion_Documental/04_[Referencia]/_AI/             */
/*                [AI]_04_REF_Design_Iconos_V01.md                            */
/* ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Tamaños de ícono ──────────────────────────────────────────────────── */
  --icon-2xs:   10px;    /* Decoradores en badges, micro-dots de status */
  --icon-xs:    12px;    /* Íconos inline en texto, acciones compactas */
  --icon-sm:    14px;    /* Toolbars secundarios, breadcrumb */
  --icon-md:    16px;    /* DEFAULT — nav, botones, form fields */
  --icon-lg:    18px;    /* Headers de card, section markers */
  --icon-xl:    20px;    /* Feature callouts, empty state illustrations */
  --icon-2xl:   24px;    /* Hero sections, CTAs grandes */
  --icon-3xl:   32px;    /* Onboarding steps, modal headers */
  --icon-4xl:   48px;    /* Contenedores KPI card */
  --icon-5xl:   64px;    /* Empty state centerpiece */

  /* ── Containers de ícono (icon × 1.5) ─────────────────────────────────── */
  --icon-container-sm:      24px;   /* Para --icon-md (16px) */
  --icon-container-md:      36px;   /* Para --icon-2xl (24px) */
  --icon-container-lg:      48px;   /* Para --icon-3xl (32px) */
  --icon-container-xl:      72px;   /* Para --icon-4xl (48px) */
  --icon-container-radius:  var(--radius-lg);   /* 8px — rounded square */

  /* ── Stroke weights por tamaño ─────────────────────────────────────────── */
  /* 10–12px → 1px stroke  ·  14–24px → 1.5px stroke  ·  32px+ → 2px stroke */
  --icon-stroke-sm:   1px;
  --icon-stroke-md:   1.5px;   /* ← ESTÁNDAR — canvas 24px */
  --icon-stroke-lg:   2px;
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* BORDER RADIUS                                                               */
/* ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --radius-none:  0px;
  --radius-xs:    2px;     /* Progress bars */
  --radius-sm:    4px;     /* Tags en tablas densas */
  --radius-md:    6px;     /* Botones, inputs, cards pequeñas */
  --radius-lg:    8px;     /* Cards estándar, modales */
  --radius-xl:    12px;    /* Cards grandes, panels */
  --radius-2xl:   16px;    /* Feature cards */
  --radius-3xl:   24px;    /* Splash panels */
  --radius-full:  9999px;  /* Badges, chips, avatares, toggles */
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* MOVIMIENTO                                                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --duration-instant:   50ms;
  --duration-fast:      100ms;
  --duration-normal:    200ms;
  --duration-slow:      300ms;
  --duration-slower:    500ms;
  --duration-slowest:   800ms;

  --ease-linear:      linear;
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);   /* CTAs con bounce */
  --ease-decelerate:  cubic-bezier(0.0, 0.0, 0.2, 1);      /* Enter */
  --ease-accelerate:  cubic-bezier(0.4, 0.0, 1, 1);        /* Exit */
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* TOKENS DE COMPONENTES                                                       */
/* ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Botón primario (Neural Green) ──────────────────────────────────────── */
  --btn-primary-bg:           #B6FF00;
  --btn-primary-bg-hover:     #C5FF33;
  --btn-primary-bg-active:    #91CC00;
  --btn-primary-text:         #0E1117;   /* Texto oscuro sobre verde lima */
  --btn-primary-radius:       var(--radius-md);
  --btn-primary-shadow-focus: var(--shadow-glow-green);

  /* ── Botón secundario (Purple outlined) ─────────────────────────────────── */
  --btn-secondary-bg:           transparent;
  --btn-secondary-bg-hover:     rgba(125,83,255,0.12);
  --btn-secondary-border:       var(--primitive-purple-500);
  --btn-secondary-text:         var(--primitive-purple-400);
  --btn-secondary-shadow-focus: var(--shadow-glow-purple);

  /* ── Botón ghost ────────────────────────────────────────────────────────── */
  --btn-ghost-bg:           transparent;
  --btn-ghost-bg-hover:     var(--color-bg-interactive);
  --btn-ghost-text:         var(--color-text-secondary);

  /* ── Botón destructivo ──────────────────────────────────────────────────── */
  --btn-destructive-bg:         transparent;
  --btn-destructive-bg-hover:   rgba(255,107,0,0.12);
  --btn-destructive-border:     var(--primitive-orange-500);
  --btn-destructive-text:       var(--primitive-orange-400);

  /* ── Tamaños de botón ───────────────────────────────────────────────────── */
  --btn-height-sm:   28px;
  --btn-height-md:   36px;
  --btn-height-lg:   44px;

  /* ── Card ───────────────────────────────────────────────────────────────── */
  --card-bg:         var(--color-bg-elevated);
  --card-border:     1px solid var(--color-border-subtle);
  --card-radius:     var(--radius-xl);
  --card-padding:    var(--space-5);
  --card-shadow:     var(--shadow-md);
  --card-hover-bg:   var(--color-bg-elevated);
  --card-hover-border: var(--color-border-default);
  --card-hover-shadow: var(--shadow-lg);

  /* ── Navegación ─────────────────────────────────────────────────────────── */
  --nav-top-height:            var(--topbar-height);
  --nav-top-bg:                var(--color-bg-surface);
  --nav-sidebar-width:         var(--sidebar-width);
  --nav-sidebar-collapsed:     var(--sidebar-width-collapsed);
  --nav-sidebar-bg:            var(--color-bg-surface);
  --nav-item-height:           36px;
  --nav-item-radius:           var(--radius-md);
  --nav-item-default-text:     var(--color-text-secondary);
  --nav-item-hover-bg:         var(--color-bg-interactive);
  --nav-item-hover-text:       var(--color-text-primary);
  --nav-item-active-bg:        rgba(182,255,0,0.08);
  --nav-item-active-text:      var(--primitive-green-500);
  --nav-item-active-border:    2px solid var(--primitive-green-500);

  /* ── Input ──────────────────────────────────────────────────────────────── */
  --input-bg:              var(--color-bg-elevated);
  --input-border:          1px solid var(--color-border-default);
  --input-border-focus:    var(--color-border-brand);
  --input-text:            var(--color-text-primary);
  --input-placeholder:     var(--color-text-tertiary);
  --input-radius:          var(--radius-md);
  --input-height:          36px;
  --input-shadow-focus:    var(--shadow-glow-green);

  /* ── Badges / Status chips ──────────────────────────────────────────────── */
  --badge-running-bg:      rgba(182,255,0,0.12);
  --badge-running-text:    #B6FF00;
  --badge-running-border:  rgba(182,255,0,0.25);

  --badge-degraded-bg:     rgba(255,107,0,0.12);
  --badge-degraded-text:   #FF8933;
  --badge-degraded-border: rgba(255,107,0,0.25);

  --badge-failed-bg:       rgba(255,77,106,0.12);
  --badge-failed-text:     #FF4D6A;
  --badge-failed-border:   rgba(255,77,106,0.25);

  --badge-pending-bg:      rgba(0,194,255,0.12);
  --badge-pending-text:    #00C2FF;
  --badge-pending-border:  rgba(0,194,255,0.25);

  --badge-padding:         2px 8px;
  --badge-radius:          var(--radius-full);
  --badge-font-size:       var(--font-size-2xs);
  --badge-font-weight:     var(--font-weight-semibold);
  --badge-letter-spacing:  var(--letter-spacing-wider);

  /* ── Data visualization ─────────────────────────────────────────────────── */
  --chart-axis-color:       var(--primitive-navy-300);
  --chart-grid-color:       rgba(74,82,104,0.3);
  --chart-tooltip-bg:       var(--color-bg-overlay);
  --chart-tooltip-border:   var(--color-border-default);
  --chart-tooltip-radius:   var(--radius-lg);
  --chart-threshold-line:   var(--primitive-green-500);
  --chart-anomaly-fill:     rgba(255,107,0,0.10);
  --chart-anomaly-border:   rgba(255,107,0,0.40);
  --chart-sparkline-width:  1.5px;
  --chart-area-opacity:     0.15;
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* ANIMACIONES GLOBALES                                                        */
/* ═══════════════════════════════════════════════════════════════════════════ */

@keyframes brain-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(182,255,0,0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(182,255,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(182,255,0,0); }
}

@keyframes brain-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes brain-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes brain-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Uso: animation: brain-spin 1s linear infinite; */
/* Aplicar a íconos en estado "Loading" — refresh, sync, processing */


/* ═══════════════════════════════════════════════════════════════════════════ */
/* ACCESIBILIDAD                                                               */
/* ═══════════════════════════════════════════════════════════════════════════ */

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