/*
 * Design Tokens — Knowledge Index (Wiki Brain)
 * Filosofía: Editorial Limpio — sistema de diseño propio de este nodo, NO es una
 * copia del canon Brain (Neural Green/Inter) — no reemplazar por Shared/tokens.css.
 * Referencias: Google Material, Apple HIG, Linear, Antigravity
 * Generado: 2026-05-30 · Consolidado CEN-S3 (P97, 2026-07-16): las 2 copias
 * idénticas (Celex_Direct + Celular_Express) unificadas aquí — antes divergían
 * por accidente de copy-paste, no por diseño intencional.
 * Stack: CSS Custom Properties (Vanilla JS, sin build step)
 *
 * Uso: Importar en index.html antes de cualquier otro stylesheet (../_shared/tokens.css).
 * Todos los componentes referencian estas variables — nunca hardcodear valores.
 */

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

:root {
  /* Paleta Gestored */
  --primitive-blue-950:   #0a1628;
  --primitive-blue-900:   #0d1f3c;
  --primitive-blue-800:   #112850;
  --primitive-blue-700:   #163368;
  --primitive-blue-600:   #1b3fa0;   /* ← Azul Gestored principal */
  --primitive-blue-500:   #2952c4;
  --primitive-blue-400:   #4068d4;
  --primitive-blue-300:   #6b8de0;
  --primitive-blue-200:   #a8beed;
  --primitive-blue-100:   #dce5f8;
  --primitive-blue-50:    #f0f4fd;

  --primitive-orange-600: #c45a0a;
  --primitive-orange-500: #f5821f;   /* ← Naranja Gestored */
  --primitive-orange-400: #f79547;
  --primitive-orange-100: #fde8d3;
  --primitive-orange-50:  #fff4ec;

  --primitive-gray-950:   #09090b;
  --primitive-gray-900:   #18181b;
  --primitive-gray-800:   #27272a;
  --primitive-gray-700:   #3f3f46;
  --primitive-gray-600:   #52525b;
  --primitive-gray-500:   #71717a;
  --primitive-gray-400:   #a1a1aa;
  --primitive-gray-300:   #d4d4d8;
  --primitive-gray-200:   #e4e4e7;
  --primitive-gray-100:   #f4f4f5;
  --primitive-gray-50:    #fafafa;

  --primitive-green-500:  #22c55e;
  --primitive-green-100:  #dcfce7;
  --primitive-amber-500:  #f59e0b;
  --primitive-amber-100:  #fef3c7;
  --primitive-red-500:    #ef4444;
  --primitive-red-100:    #fee2e2;
  --primitive-teal-500:   #14b8a6;
  --primitive-teal-100:   #ccfbf1;

  --primitive-white:      #ffffff;
  --primitive-black:      #000000;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* MODO CLARO — Default                                                        */
/* ─────────────────────────────────────────────────────────────────────────── */

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

  /* ── Fondos ─────────────────────────────────────────────────────────────── */
  --color-bg-primary:         var(--primitive-white);         /* Fondo principal */
  --color-bg-secondary:       var(--primitive-gray-50);       /* Sidebar, cards */
  --color-bg-tertiary:        var(--primitive-gray-100);      /* Inputs, wells */
  --color-bg-inverse:         var(--primitive-gray-950);      /* Tooltips, popovers oscuros */
  --color-bg-accent-subtle:   var(--primitive-blue-50);       /* Hover en items de nav */
  --color-bg-accent:          var(--primitive-blue-600);      /* Item activo en nav */
  --color-bg-overlay:         rgba(9, 9, 11, 0.4);            /* Modal backdrop */

  /* ── Texto ──────────────────────────────────────────────────────────────── */
  --color-text-primary:       var(--primitive-gray-950);      /* Títulos, body principal */
  --color-text-secondary:     var(--primitive-gray-600);      /* Subtítulos, meta */
  --color-text-tertiary:      var(--primitive-gray-400);      /* Placeholder, disabled */
  --color-text-inverse:       var(--primitive-white);         /* Texto sobre fondos oscuros */
  --color-text-link:          var(--primitive-blue-600);      /* Links */
  --color-text-link-hover:    var(--primitive-blue-500);
  --color-text-accent:        var(--primitive-blue-600);      /* Labels activos, énfasis */
  --color-text-on-accent:     var(--primitive-white);         /* Texto sobre bg-accent */

  /* ── Bordes ─────────────────────────────────────────────────────────────── */
  --color-border-primary:     var(--primitive-gray-200);      /* Bordes principales */
  --color-border-secondary:   var(--primitive-gray-100);      /* Bordes sutiles */
  --color-border-focus:       var(--primitive-blue-500);      /* Focus ring */
  --color-border-accent:      var(--primitive-blue-600);      /* Borde activo */

  /* ── Acento ─────────────────────────────────────────────────────────────── */
  --color-accent-primary:        var(--primitive-blue-600);
  --color-accent-primary-hover:  var(--primitive-blue-500);
  --color-accent-primary-active: var(--primitive-blue-700);
  --color-accent-secondary:      var(--primitive-orange-500);
  --color-accent-secondary-hover:var(--primitive-orange-600);

  /* ── Estados ────────────────────────────────────────────────────────────── */
  --color-status-success:     var(--primitive-green-500);
  --color-status-success-bg:  var(--primitive-green-100);
  --color-status-warning:     var(--primitive-amber-500);
  --color-status-warning-bg:  var(--primitive-amber-100);
  --color-status-error:       var(--primitive-red-500);
  --color-status-error-bg:    var(--primitive-red-100);
  --color-status-info:        var(--primitive-teal-500);
  --color-status-info-bg:     var(--primitive-teal-100);
  --color-status-pending:     var(--primitive-orange-500);
  --color-status-pending-bg:  var(--primitive-orange-50);

  /* ── Sidebar específico ─────────────────────────────────────────────────── */
  --color-sidebar-bg:         var(--primitive-gray-50);
  --color-sidebar-border:     var(--primitive-gray-200);
  --color-sidebar-item-hover: var(--primitive-blue-50);
  --color-sidebar-item-active-bg:   var(--primitive-blue-600);
  --color-sidebar-item-active-text: var(--primitive-white);
  --color-sidebar-text:       var(--primitive-gray-700);
  --color-sidebar-text-muted: var(--primitive-gray-400);

  /* ── Sombras ────────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 0 3px rgba(27, 63, 160, 0.25);   /* Azul Gestored focus ring */
  --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* MODO OSCURO                                                                 */
/* ─────────────────────────────────────────────────────────────────────────── */

[data-theme="dark"] {

  --color-bg-primary:         #111318;                        /* No puro negro — evita harshness */
  --color-bg-secondary:       #1a1d24;
  --color-bg-tertiary:        #22262f;
  --color-bg-inverse:         var(--primitive-gray-50);
  --color-bg-accent-subtle:   rgba(27, 63, 160, 0.15);
  --color-bg-accent:          var(--primitive-blue-600);
  --color-bg-overlay:         rgba(0, 0, 0, 0.6);

  --color-text-primary:       #e8eaf0;                        /* No blanco puro */
  --color-text-secondary:     #9398a8;
  --color-text-tertiary:      #5a5f70;
  --color-text-inverse:       var(--primitive-gray-950);
  --color-text-link:          var(--primitive-blue-300);
  --color-text-link-hover:    var(--primitive-blue-200);
  --color-text-accent:        var(--primitive-blue-300);
  --color-text-on-accent:     var(--primitive-white);

  --color-border-primary:     rgba(255, 255, 255, 0.08);
  --color-border-secondary:   rgba(255, 255, 255, 0.04);
  --color-border-focus:       var(--primitive-blue-400);
  --color-border-accent:      var(--primitive-blue-500);

  --color-accent-primary:        var(--primitive-blue-400);
  --color-accent-primary-hover:  var(--primitive-blue-300);
  --color-accent-primary-active: var(--primitive-blue-500);
  --color-accent-secondary:      var(--primitive-orange-400);
  --color-accent-secondary-hover:var(--primitive-orange-500);

  --color-status-success:     #4ade80;
  --color-status-success-bg:  rgba(74, 222, 128, 0.12);
  --color-status-warning:     #fbbf24;
  --color-status-warning-bg:  rgba(251, 191, 36, 0.12);
  --color-status-error:       #f87171;
  --color-status-error-bg:    rgba(248, 113, 113, 0.12);
  --color-status-info:        #2dd4bf;
  --color-status-info-bg:     rgba(45, 212, 191, 0.12);
  --color-status-pending:     var(--primitive-orange-400);
  --color-status-pending-bg:  rgba(245, 130, 31, 0.12);

  --color-sidebar-bg:         #15181f;
  --color-sidebar-border:     rgba(255, 255, 255, 0.06);
  --color-sidebar-item-hover: rgba(27, 63, 160, 0.15);
  --color-sidebar-item-active-bg:   var(--primitive-blue-600);
  --color-sidebar-item-active-text: var(--primitive-white);
  --color-sidebar-text:       #9398a8;
  --color-sidebar-text-muted: #5a5f70;

  --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(64, 104, 212, 0.35);
  --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary:         #111318;
    --color-bg-secondary:       #1a1d24;
    --color-bg-tertiary:        #22262f;
    --color-bg-inverse:         var(--primitive-gray-50);
    --color-bg-accent-subtle:   rgba(27, 63, 160, 0.15);
    --color-bg-accent:          var(--primitive-blue-600);
    --color-bg-overlay:         rgba(0, 0, 0, 0.6);
    --color-text-primary:       #e8eaf0;
    --color-text-secondary:     #9398a8;
    --color-text-tertiary:      #5a5f70;
    --color-text-inverse:       var(--primitive-gray-950);
    --color-text-link:          var(--primitive-blue-300);
    --color-text-link-hover:    var(--primitive-blue-200);
    --color-text-accent:        var(--primitive-blue-300);
    --color-text-on-accent:     var(--primitive-white);
    --color-border-primary:     rgba(255, 255, 255, 0.08);
    --color-border-secondary:   rgba(255, 255, 255, 0.04);
    --color-border-focus:       var(--primitive-blue-400);
    --color-border-accent:      var(--primitive-blue-500);
    --color-accent-primary:        var(--primitive-blue-400);
    --color-accent-primary-hover:  var(--primitive-blue-300);
    --color-accent-primary-active: var(--primitive-blue-500);
    --color-accent-secondary:      var(--primitive-orange-400);
    --color-sidebar-bg:         #15181f;
    --color-sidebar-border:     rgba(255, 255, 255, 0.06);
    --color-sidebar-item-hover: rgba(27, 63, 160, 0.15);
    --color-sidebar-item-active-bg:   var(--primitive-blue-600);
    --color-sidebar-item-active-text: var(--primitive-white);
    --color-sidebar-text:       #9398a8;
    --color-sidebar-text-muted: #5a5f70;
    --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-focus: 0 0 0 3px rgba(64, 104, 212, 0.35);
    --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* TIPOGRAFÍA                                                                  */
/* ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* Familias — heredadas del Dashboard Gestored existente */
  --font-family-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono:    'Fira Code', 'JetBrains Mono', 'SF Mono', monospace;

  /* Escala de tamaños — base 16px */
  --font-size-xs:    0.75rem;    /*  12px */
  --font-size-sm:    0.875rem;   /*  14px */
  --font-size-base:  1rem;       /*  16px */
  --font-size-md:    1.125rem;   /*  18px */
  --font-size-lg:    1.25rem;    /*  20px */
  --font-size-xl:    1.5rem;     /*  24px */
  --font-size-2xl:   1.875rem;   /*  30px */
  --font-size-3xl:   2.25rem;    /*  36px */
  --font-size-4xl:   3rem;       /*  48px — Hero/display */

  /* Pesos */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  /* Altura de línea */
  --line-height-tight:   1.2;    /* Títulos grandes */
  --line-height-snug:    1.35;   /* Subtítulos */
  --line-height-normal:  1.5;    /* Body cómodo */
  --line-height-relaxed: 1.7;    /* Lectura extendida — artículos Wiki */

  /* Espaciado de letras */
  --letter-spacing-tight:  -0.025em;  /* Display, headlines */
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.05em;   /* Labels, caps */
  --letter-spacing-wider:   0.1em;    /* All-caps pequeño */
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* ESPACIADO — Base 4px, filosofía "Balanced" (Rams / Google Material)        */
/* ─────────────────────────────────────────────────────────────────────────── */

:root {
  --space-0:    0;
  --space-1:    0.25rem;    /*  4px */
  --space-2:    0.5rem;     /*  8px */
  --space-3:    0.75rem;    /* 12px */
  --space-4:    1rem;       /* 16px — unidad base */
  --space-5:    1.25rem;    /* 20px */
  --space-6:    1.5rem;     /* 24px */
  --space-7:    2rem;       /* 32px */
  --space-8:    2.5rem;     /* 40px */
  --space-9:    3rem;       /* 48px */
  --space-10:   4rem;       /* 64px */
  --space-11:   5rem;       /* 80px */
  --space-12:   6rem;       /* 96px */
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* LAYOUT                                                                      */
/* ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* Anchos máximos */
  --max-width-content:  72ch;       /* Lectura cómoda — artículos Wiki */
  --max-width-wide:     960px;      /* Sección Documentos, tablas */
  --max-width-page:     1440px;     /* Contenedor principal */

  /* Sidebar */
  --sidebar-width:       248px;
  --sidebar-width-collapsed: 60px;

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

  /* Bordes redondeados */
  --border-radius-xs:   4px;
  --border-radius-sm:   6px;
  --border-radius-md:   10px;
  --border-radius-lg:   16px;
  --border-radius-xl:   24px;
  --border-radius-full: 9999px;

  /* Breakpoints (referencia — usar en media queries) */
  --breakpoint-sm:   375px;
  --breakpoint-md:   768px;
  --breakpoint-lg:   1024px;
  --breakpoint-xl:   1280px;
  --breakpoint-2xl:  1536px;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* MOVIMIENTO                                                                  */
/* ─────────────────────────────────────────────────────────────────────────── */

:root {
  --duration-instant:   50ms;
  --duration-fast:      150ms;
  --duration-normal:    250ms;
  --duration-slow:      400ms;
  --duration-slower:    600ms;

  --easing-default:  cubic-bezier(0.4, 0, 0.2, 1);   /* Material standard */
  --easing-in:       cubic-bezier(0.4, 0, 1, 1);
  --easing-out:      cubic-bezier(0, 0, 0.2, 1);
  --easing-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* TOKENS DE COMPONENTES — Semántica de alto nivel                             */
/* ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* Botón primario */
  --btn-primary-bg:        var(--color-accent-primary);
  --btn-primary-bg-hover:  var(--color-accent-primary-hover);
  --btn-primary-text:      var(--color-text-on-accent);
  --btn-primary-radius:    var(--border-radius-sm);

  /* Botón secundario */
  --btn-secondary-bg:        transparent;
  --btn-secondary-border:    var(--color-border-primary);
  --btn-secondary-text:      var(--color-text-primary);
  --btn-secondary-bg-hover:  var(--color-bg-tertiary);

  /* Card / tarjeta de tema */
  --card-bg:        var(--color-bg-primary);
  --card-border:    var(--color-border-primary);
  --card-radius:    var(--border-radius-md);
  --card-shadow:    var(--shadow-card);
  --card-padding:   var(--space-6);

  /* Sección colapsable */
  --collapse-header-bg:       var(--color-bg-secondary);
  --collapse-header-hover:    var(--color-bg-tertiary);
  --collapse-border:          var(--color-border-secondary);
  --collapse-radius:          var(--border-radius-sm);

  /* Badge de perfil */
  --badge-pm-bg:        rgba(27, 63, 160, 0.1);
  --badge-pm-text:      var(--primitive-blue-600);
  --badge-pm-border:    rgba(27, 63, 160, 0.2);

  --badge-disenador-bg:    rgba(168, 85, 247, 0.1);
  --badge-disenador-text:  #9333ea;
  --badge-disenador-border:rgba(168, 85, 247, 0.2);

  --badge-go-bg:        rgba(20, 184, 166, 0.1);
  --badge-go-text:      #0f766e;
  --badge-go-border:    rgba(20, 184, 166, 0.2);

  --badge-comercial-bg:    rgba(245, 130, 31, 0.1);
  --badge-comercial-text:  var(--primitive-orange-600);
  --badge-comercial-border:rgba(245, 130, 31, 0.2);

  /* Chip de tema relacionado */
  --chip-bg:        var(--color-bg-tertiary);
  --chip-text:      var(--color-text-secondary);
  --chip-border:    var(--color-border-secondary);
  --chip-bg-hover:  var(--color-bg-accent-subtle);
  --chip-text-hover:var(--color-text-accent);

  /* Input / buscador */
  --input-bg:        var(--color-bg-tertiary);
  --input-border:    var(--color-border-primary);
  --input-border-focus: var(--color-border-focus);
  --input-text:      var(--color-text-primary);
  --input-placeholder:  var(--color-text-tertiary);
  --input-radius:    var(--border-radius-sm);
  --input-shadow-focus: var(--shadow-focus);

  /* Tabla del Directorio */
  --table-header-bg:    var(--color-bg-secondary);
  --table-row-hover:    var(--color-bg-accent-subtle);
  --table-border:       var(--color-border-secondary);
  --table-row-expanded: var(--color-bg-secondary);
}