/* ==========================================================================
   APOLO SERVICES — Design Tokens (CSS Custom Properties)
   Fase 3 · Especificaciones Técnicas · Panoramas DMKT
   Generado: 06 de julio de 2026

   Cargar DESPUÉS de bootstrap.css / bootstrap.min.css.
   Fuente de valores: Apolo_Fuente_de_Verdad_UX_UI.md (§3-6) + megaprompt de
   Design System + verificación directa contra el archivo Figma
   "01 · Design System" (auditado 2026-07-06).

   Donde la fuente de verdad y el Figma ya construido difieren, este archivo
   usa el valor REAL del Figma (ver notas inline "// FV difiere"). Corregir
   la fuente de verdad en un pase posterior — no está hecho todavía.
   ========================================================================== */

:root {
  /* ── Brand — identidad Apolo ── */
  --apolo-color-primary:        #107FC9;
  --apolo-color-primary-dark:   #0D56A6;
  --apolo-color-primary-navy:   #194270; /* FV difiere: Fuente de Verdad §5 dice #0D1B2E para bg-sidebar. Decisión confirmada por Eliezer y ya construida usa #194270. */
  --apolo-color-primary-light:  #E8F4FD;
  --apolo-color-accent:         #FAC414;
  --apolo-color-accent-dark:    #D4A50F;
  --apolo-color-accent-light:   #FEF9E7;

  /* ── Semantic — estados del sistema ── */
  --apolo-color-success:        #198754;
  --apolo-color-success-light:  #D1E7DD;
  --apolo-color-success-dark:   #0F5132;
  --apolo-color-warning:        #FFC107; /* FV difiere: Fuente de Verdad §5 dice #D97706. El Figma Make ya construido (megaprompt + código vigente) usa #FFC107 (Bootstrap warning nativo). */
  --apolo-color-warning-light:  #FFF3CD;
  --apolo-color-warning-dark:   #664D03;
  --apolo-color-danger:         #DC3545;
  --apolo-color-danger-light:   #F8D7DA;
  --apolo-color-danger-dark:    #842029;
  --apolo-color-info:           #0DCAF0;
  --apolo-color-info-light:     #CFF4FC;

  /* ── Neutrals — estructura (n900 → n0) ── */
  --apolo-n900: #0F1923;
  --apolo-n800: #1E2A35;
  --apolo-n700: #344050;
  --apolo-n600: #52637A;
  --apolo-n500: #7A8FA6;
  --apolo-n400: #A8BACB;
  --apolo-n300: #CCD8E2;
  --apolo-n200: #E4ECF2;
  --apolo-n100: #F1F5F9;
  --apolo-n50:  #F8FAFC;
  --apolo-n0:   #FFFFFF;

  --apolo-surface-app-bg:        var(--apolo-n100);
  --apolo-surface-card:          var(--apolo-n0);
  --apolo-surface-sidebar:       var(--apolo-color-primary-navy);
  --apolo-surface-sidebar-hover: rgba(255, 255, 255, 0.08); /* Updated to match Figma (00 - Sidebar - Estados) */
  --apolo-surface-sidebar-active: var(--apolo-color-primary);
  --apolo-text-sidebar-default:  rgba(255, 255, 255, 0.7);
  --apolo-surface-header:        var(--apolo-color-primary);
  --apolo-surface-footer:        var(--apolo-n800);
  --apolo-bg-overlay:            rgba(15, 25, 35, 0.5);

  /* ── Texto — jerarquía ── */
  --apolo-text-color-primary:    var(--apolo-n900);
  --apolo-text-color-secondary:  var(--apolo-n600);
  --apolo-text-color-tertiary:   var(--apolo-n500);
  --apolo-text-color-disabled:   var(--apolo-n400);
  --apolo-text-color-on-primary: var(--apolo-n0);
  --apolo-text-color-on-accent:  var(--apolo-n900);
  --apolo-text-color-link:       var(--apolo-color-primary);
  --apolo-text-color-link-hover: var(--apolo-color-primary-dark);

  /* ── Bordes ── */
  --apolo-border-color:         var(--apolo-n300);
  --apolo-border-color-focus:   var(--apolo-color-primary);
  --apolo-border-color-subtle:  var(--apolo-n200);

  /* ── Tipografía ── */
  --apolo-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --apolo-font-mono:   'JetBrains Mono', 'Fira Code', monospace; /* RFC, CURP, códigos */

  --apolo-text-xs:   0.6875rem;  /* 11px — etiquetas de estado, metadata */
  --apolo-text-sm:   0.8125rem;  /* 13px — texto de tabla, descripciones secundarias */
  --apolo-text-base: 0.9375rem;  /* 15px — cuerpo, labels de formulario */
  --apolo-text-lg:   1.0625rem;  /* 17px — subtítulos, ítems de navegación */
  --apolo-text-xl:   1.25rem;    /* 20px — títulos de tarjeta, encabezados de módulo */
  --apolo-text-2xl:  1.5rem;     /* 24px — títulos de página */
  --apolo-text-3xl:  1.875rem;   /* 30px — títulos de sección grandes */
  --apolo-text-stat: 2.25rem;    /* 36px — números de KPI en dashboards */

  --apolo-font-normal:   400;
  --apolo-font-medium:   500;
  --apolo-font-semibold: 600;
  --apolo-font-bold:     700;

  --apolo-leading-tight:   1.2;
  --apolo-leading-normal:  1.5;
  --apolo-leading-relaxed: 1.6;

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

  /* Espaciados semánticos */
  --apolo-padding-card:    var(--apolo-space-6);   /* 24px */
  --apolo-padding-section: var(--apolo-space-8);   /* 32px */
  --apolo-padding-field:   var(--apolo-space-3) var(--apolo-space-4); /* 12px 16px */
  --apolo-gap-cards:       var(--apolo-space-6);   /* 24px entre cards */
  --apolo-gap-fields:      var(--apolo-space-5);   /* 20px entre campos de formulario */

  /* ── Radios de borde ──
     Verificados por inspección directa del Figma Design System (2026-07-06).
     FV difiere: Apolo_Fuente_de_Verdad_UX_UI.md §6 documenta una escala distinta
     (sm=4/md=8/lg=12/xl=16) — no coincide con lo ya construido. Usar esta. */
  --apolo-radius-none: 0px;
  --apolo-radius-sm:   4px;  /* Badges, tags pequeños */
  --apolo-radius-md:   6px;  /* Campos de formulario, botones */
  --apolo-radius-lg:   8px;  /* Cards medianas, filas */
  --apolo-radius-xl:   12px; /* Cards grandes, modales, paneles destacados */
  --apolo-radius-full: 9999px; /* Pills, badges, avatares circulares */

  /* ── Sombras ── */
  --apolo-shadow-sm:    0 1px 2px rgba(15, 25, 35, 0.06);
  --apolo-shadow-md:    0 2px 8px rgba(15, 25, 35, 0.08), 0 0 0 1px rgba(15, 25, 35, 0.04);
  --apolo-shadow-lg:    0 4px 16px rgba(15, 25, 35, 0.10), 0 0 0 1px rgba(15, 25, 35, 0.04);
  --apolo-shadow-xl:    0 8px 32px rgba(15, 25, 35, 0.12), 0 0 0 1px rgba(15, 25, 35, 0.06);
  --apolo-shadow-focus: 0 0 0 3px rgba(16, 127, 201, 0.25);

  /* ── Z-Index ── */
  --apolo-z-sidebar:   1000;
  --apolo-z-header:    1010;
  --apolo-z-dropdown:  1020;
  --apolo-z-modal-bg:  1040;
  --apolo-z-modal:     1050;
  --apolo-z-toast:     1070;
  --apolo-z-tooltip:   1080;

  /* ── Layout — constantes de shell (confirmadas por Eliezer, no son tokens de diseño puro
     pero los necesita el equipo de desarrollo para el shell de la app) ── */
  --apolo-layout-header-height:            60px;
  --apolo-layout-sidebar-width:            260px; /* FV difiere: Fuente de Verdad §6 dice 240px. Confirmado 260px por Eliezer. */
  --apolo-layout-sidebar-width-collapsed:  64px;
  --apolo-layout-sidebar-transition:       width 250ms ease;

  /* ── Transiciones (agregado 2026-07-23 · NORMALIZADO 2026-07-28) ──
     Medidas sobre las reactions reales del prototipo Figma y las leyendas CSS por
     módulo — NO son un default inventado. Especificación normativa cerrada en
     `Apolo_Especificaciones_Animacion.md` v1.0.

     Cada token incluye la propiedad además de la duración: se usa como valor
     completo de `transition`, p. ej. `transition: var(--apolo-transition-color);`
     Para la misma categoría sobre otra propiedad (max-height, transform), escribir
     la propiedad explícita con la misma duración/easing — no crear tokens nuevos.

     Regla de decisión: color -> 150ms · estado de control -> 200ms ·
     layout -> 250ms · reemplazo de pantalla -> 300ms ease-out. */
  --apolo-transition-color:       color 150ms ease;        /* hover de link/ícono — Header/Footer/filas/ítems de sidebar */
  --apolo-transition-toggle:      background 200ms ease;   /* toggle switches — Cuenta y Configuración y CRM usan el MISMO componente */
  --apolo-transition-structural:  width 250ms ease;        /* expand/collapse — Sidebar */
  --apolo-transition-nav:         300ms ease-out;          /* navegación entre pantallas o estados del mismo módulo — estándar único */

  /* DEPRECADO 2026-07-28 — no usar en código nuevo.
     Existía mientras la normalización estaba abierta, para la "familia alterna" de
     200ms que el prototipo tiene wireada en Marketplace/Guía de Usuario/Sistema de
     Comunicación. La especificación de animación normalizó toda la navegación a
     --apolo-transition-nav (300ms). Se conserva solo para no romper hojas de estilo
     que ya lo referencien; retirar en la limpieza de la ola 4. */
  --apolo-transition-nav-alt:     var(--apolo-transition-nav);
}