/* ============================================================================
   BITE HUB · AGENTIC HUB — DESIGN TOKENS  v2.1.0
   ----------------------------------------------------------------------------
   Fuente única de verdad del sistema de diseño. Consumido por las 13 superficies
   del ecosistema (sitio web, Dashboard, App AI-OPS, Consola, CRM, Estudio, FARO
   y los buzones de los agentes 01-04). Ver design-system/README.md.

   CÓMO USAR:  <link rel="stylesheet" href="/design-tokens.css">
   Luego en CSS o estilos inline:  color: var(--text-primary);

   REGLA: este archivo NO contiene componentes ni layout, solo variables.
   Los componentes viven en components.css. Editar SIEMPRE la copia canónica en
   /design-system y redistribuir con `node scripts/sync-design-system.js`.

   v2.0.0 — MAJOR: el ecosistema pasa de tema oscuro a **modo claro**. Los
   NOMBRES de token no cambian (por eso los puentes de alias de la App y el
   Dashboard siguen funcionando); cambian los valores. Estética "SaaS Premium /
   Editorial": blancos cálidos, grafito profundo, acentos maduros, bordes de 1px
   y sombras de elevación — sin neón, sin glow, sin gradientes decorativos.

   v2.1.0 — El acento pasa del cobalto al NARANJA del logotipo (#ff6e06), por
   decisión de marca del 30-jul-2026. Ningún nombre de token cambia: cambian
   --accent* y la rampa secuencial, en los dos temas.

   Tres tokens NO pasaron a naranja, y no es un olvido: --chart-1,
   --agent-cost-sentinel y --div-pos. Ahí el color no dice "marca", dice
   "qué dato es este", y el naranja del logo queda a ΔE 0.3 (deutan) del ámbar
   que ya ocupa el slot vecino — un daltónico no distinguiría dos series ni dos
   agentes. Medido con el validador de daltonismo, no estimado; las cifras
   están junto a cada token. --info tampoco: es estado semántico, y un aviso
   informativo naranja se confunde con la advertencia ámbar.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── MARCA ──────────────────────────────────────────────────────────────
     Naranja del logotipo Agentic Hub. Sustituye al cobalto por decisión de
     marca del 30-jul-2026: el color de la identidad es también el de las
     acciones.

     Dos consecuencias que NO son opcionales, medidas con el calculador de
     contraste, no estimadas:
       · El naranja con texto BLANCO encima da 2.81:1 y reprueba. Por eso el
         botón lleva tinta OSCURA (--accent-contrast, 6.68:1) en LOS DOS temas:
         es el mismo botón en claro y en oscuro, no cambia de color de texto al
         alternar.
       · El naranja puro como TEXTO sobre fondo claro da 2.71:1 y también
         reprueba. Para eso está --accent-text.                               */
  --accent:            #ff6e06;   /* naranja del logo, tal cual              */
  --accent-hover:      #E85F02;   /* tinta encima 5.42:1                     */
  --accent-active:     #D65802;   /* tinta encima 4.69:1 — el más oscuro que
                                     todavía pasa con la tinta del botón     */
  --accent-contrast:   #1A1005;   /* tinta SOBRE fondo --accent    6.68:1    */
  --accent-subtle:     rgba(255, 110, 6, 0.09);   /* tinte de fondo          */
  /* Más alfa que el cobalto (0.22): el naranja es más claro y con 0.22 el
     borde se perdía contra el fondo cálido de página.                       */
  --accent-border:     rgba(255, 110, 6, 0.32);
  /* Acento TIPOGRÁFICO. Con el cobalto este token era un alias de --accent
     (8.6:1 sobre blanco, pasaba solo). Con el naranja YA NO PUEDE SERLO:
     #ff6e06 como texto da 2.71:1. Usar este —no --accent— para cifras,
     viñetas y enlaces.

     Medido contra las CUATRO superficies claras, no solo contra --bg-base:
     4.88 base · 4.60 sunken · 5.05 surface · 4.72 surface-2. El valor
     anterior (#BF5305) se calibró solo contra --bg-base y por eso reprobaba
     con 4.29:1 sobre --bg-sunken — lo destapó auditar la página renderizada,
     no el archivo CSS.                                                      */
  --accent-text:       #B84F04;

  /* ── MARCA · COLORES DE LOS LOGOTIPOS ───────────────────────────────────
     Extraídos de los SVG oficiales: "BITE" negro + "HUB" verde, "AGENTIC"
     negro + "HUB" naranja.

     Desde el 30-jul-2026 el naranja de Agentic YA ES --accent, así que
     --marca-agentic-* y el acento coinciden. Se conservan los nombres porque
     las 13 superficies los referencian directamente y porque el verde de Bite
     sigue siendo solo marca. El idioma de MARCA y el FUNCIONAL dejaron de
     estar separados: era exactamente lo que pedía la decisión.

     Cada color trae tres variantes porque el color puro del logo casi nunca
     pasa WCAG sobre fondo claro — medido, no estimado:
       verde  #3ac000 → 2.33:1 sobre #FBFBFA  (no sirve ni de borde)
       naranja #ff6e06 → 2.71:1 sobre #FBFBFA, y con texto BLANCO encima 2.81:1
     Por eso el botón naranja lleva tinta OSCURA (6.68:1), no blanca: así se
     conserva el naranja exacto del logo sin romper la accesibilidad.
     Sobre fondo oscuro los dos colores puros ya pasan (7.9:1 y 6.8:1).       */
  --marca-bite:          #3ac000;   /* verde del logo, tal cual              */
  --marca-bite-ui:       #32a700;   /* bordes/realce en claro     3.04:1     */
  --marca-bite-text:     #298600;   /* texto sobre claro          4.50:1     */

  --marca-agentic:       #ff6e06;   /* naranja del logo, tal cual            */
  /* Estos dos se recalibraron el 30-jul contra las CUATRO superficies claras.
     Estaban medidos solo contra --bg-base y sobre --bg-sunken se quedaban por
     debajo del mínimo: el borde en 2.88:1 (min 3) y el texto en 4.29:1
     (min 4.5). Ahora el peor caso de cada uno pasa.                         */
  --marca-agentic-ui:    #EA6305;   /* bordes/realce en claro  peor 3.04:1   */
  --marca-agentic-text:  #B84F04;   /* texto sobre claro       peor 4.60:1   */
  --marca-agentic-ink:   #1A1005;   /* tinta SOBRE el naranja     6.68:1     */
  /* Hover del botón naranja. Se OSCURECE (lo convencional en tema claro) pero
     no tanto como --marca-agentic-text: ese llega a 4.55:1 contra el fondo de
     página, y como aquí lo que importa es el contraste contra la TINTA del
     botón, se quedaría en 3.98:1 y reprobaría. #E85F02 da 5.42:1.            */
  --marca-agentic-hover: #E85F02;

  /* ── NEUTRALES · CAPAS DE ELEVACIÓN ─────────────────────────────────────
     Undertone cálido: blancos con una pizca de amarillo, no gris azulado.
     En modo claro la elevación sube hacia el BLANCO (al revés que en oscuro). */
  --bg-base:           #FBFBFA;   /* fondo de la app / página                */
  --bg-sunken:         #F4F4F6;   /* zonas hundidas (inputs, code)           */
  --bg-surface:        #FFFFFF;   /* cards, paneles                          */
  --bg-surface-2:      #F7F7F9;   /* hover / superficie alterna              */
  --bg-header:         rgba(251, 251, 250, 0.78);  /* barras fijas + blur    */
  --bg-overlay:        rgba(17, 24, 39, 0.42);     /* backdrop de modales    */

  /* ── BORDES ─────────────────────────────────────────────────────────────
     La firma del look: hairlines de 1px, nunca sombras duras para separar.  */
  --border-subtle:     #EEF0F3;   /* divisores tenues, grid de gráficas      */
  --border-default:    #E2E8F0;   /* borde estándar de card                  */
  --border-strong:     #CBD5E1;   /* hover / énfasis / ejes                  */

  /* ── TEXTO ──────────────────────────────────────────────────────────────
     Grafito profundo, no negro puro: menos fatiga y más "editorial".
     Todos pasan AA sobre --bg-surface y --bg-base.                          */
  --text-primary:      #111827;   /* 16.9:1 sobre blanco                     */
  --text-secondary:    #475569;   /*  8.6:1                                  */
  --text-tertiary:     #64748B;   /*  5.7:1 — labels, metadatos              */
  --text-disabled:     #94A3B8;   /*  2.8:1 — solo texto deshabilitado       */
  /* Con el cobalto era blanco. Con el naranja el blanco da 2.81:1 y reprueba:
     la tinta sobre el acento es oscura. Ver --accent-contrast.              */
  --text-on-accent:    #1A1005;

  /* ── SEMÁNTICOS ─────────────────────────────────────────────────────────
     Vibrantes pero maduros. Recalibrados para contraste SOBRE BLANCO: en modo
     claro el tono base baja de luminosidad y el `-text` es MÁS OSCURO que la
     base (en oscuro era al revés).                                          */
  --success:           #047857;   /* esmeralda profundo — ganancia/eficiencia */
  --success-bg:        rgba(4, 120, 87, 0.08);
  --success-border:    rgba(4, 120, 87, 0.22);
  --success-text:      #065F46;   /* texto sobre --success-bg                 */

  --warning:           #B45309;   /* ámbar tostado                            */
  --warning-bg:        rgba(180, 83, 9, 0.08);
  --warning-border:    rgba(180, 83, 9, 0.22);
  --warning-text:      #92400E;   /* texto sobre --warning-bg                 */
  --warning-strong:    #B45309;   /* botón de acción ámbar (captura/envío)    */
  --warning-ink:       #FFFFFF;   /* texto sobre fondo ámbar sólido           */

  --danger:            #B91C1C;
  --danger-bg:         rgba(185, 28, 28, 0.08);
  --danger-border:     rgba(185, 28, 28, 0.22);
  --danger-text:       #991B1B;   /* texto sobre --danger-bg                  */
  --danger-strong:     #B91C1C;   /* acción destructiva / grabar              */

  --terracota:         #C2410C;   /* merma / hospitalidad (acento cálido)     */
  --terracota-bg:      rgba(194, 65, 12, 0.08);
  --terracota-border:  rgba(194, 65, 12, 0.22);

  /* INFO se queda COBALTO a propósito, y por eso deja de ser alias de
     --accent. Al pasar el acento a naranja, un aviso "informativo" naranja
     queda a un pelo del ámbar de --warning (#B45309): el usuario no podría
     distinguir "te informo" de "cuidado". Info es un estado SEMÁNTICO, no
     marca — igual que el verde de éxito y el rojo de error, que tampoco son
     colores de marca. Aquí el azul no es el azul viejo: es el azul de
     "información", que en toda interfaz es frío.                            */
  --info:              #1D4ED8;
  --info-bg:           rgba(29, 78, 216, 0.07);
  --info-border:       rgba(29, 78, 216, 0.22);
  --info-text:         #1E40AF;   /* texto sobre --info-bg                    */

  --neutral:           #64748B;   /* estado "sin datos" / gris               */
  --neutral-bg:        rgba(100, 116, 139, 0.10);

  /* ── IDENTIDAD POR AGENTE ───────────────────────────────────────────────
     Colores maduros, nada fosforescente. Este set se VALIDÓ con el validador
     de daltonismo del skill dataviz sobre superficie blanca, con TODOS los
     pares en juego (los 5 agentes aparecen juntos en el Dashboard):
       CVD peor par #A21CAF↔#1D4ED8 ΔE 7.4 (protan) · visión normal ΔE 19.2.
     Sets más "obvios" fallan y por eso NO se usan: ámbar #B45309 junto a
     carmesí #BE123C da ΔE 5.7 (un deuterán no distingue Staff Mentor de Brand
     Guardian), y un teal para Intelligence queda a ΔE 9.8 del verde de
     Concierge — indistinguible incluso con visión normal.

     REGLA DE USO: son color de MARCA (badge, borde, punto), nunca el único
     portador de identidad. Siempre acompañados de ícono + nombre del agente.
     --agent-staff-mentor queda en 2.94:1 contra blanco: sirve para marcas y
     rellenos, NO para texto.

     POR QUÉ COST SENTINEL SIGUE EN COBALTO. Se han probado los DOS tonos
     cálidos y los dos reprueban. Medido con el validador, contra TODOS los
     pares (los cinco agentes salen juntos en el Dashboard, no en fila):
       naranja del logo #ff6e06 ↔ ámbar de Staff Mentor #CA8A04
         → ΔE 0.3 (deutan) · ΔE 10.6 con visión normal.
       terracota #C2410C ↔ rojo de Brand Guardian #DC2626
         → ΔE 2.4 (protan) · ΔE 6.0 con visión normal.
     El set con cobalto sí pasa (peor par ΔE 19.2 normal). La terracota entró
     en --chart-1 y ahí funciona, porque en la escala de gráficas su vecino es
     el ámbar y no el rojo; aquí el vecino es el rojo y se caen las dos.
     Aquí el color no es marca, es DATO: identifica una entidad.             */
  --agent-concierge:       #047857;   /* Ventas / atención    (esmeralda)    */
  --agent-brand-guardian:  #DC2626;   /* Reputación / marca   (rojo)         */
  --agent-staff-mentor:    #CA8A04;   /* Operación / staff    (ámbar dorado) */
  --agent-cost-sentinel:   #1D4ED8;   /* Costos / finanzas    (cobalto)      */
  --agent-intelligence:    #A21CAF;   /* Analítica / reportes (magenta)      */

  /* ── SEMÁFORO (Dashboard) → alias a semánticos ──────────────────────────*/
  --semaforo-verde:    var(--success);
  --semaforo-amarillo: var(--warning);
  --semaforo-rojo:     var(--danger);
  --semaforo-gris:     var(--neutral);

  /* ── DATA-VIZ ───────────────────────────────────────────────────────────
     Consumido por charts.js. El orden de los slots ES el mecanismo de
     seguridad para daltonismo: asignar SIEMPRE en orden, nunca ciclar.
     Validado sobre blanco (pares adyacentes): peor par #DC2626↔#047857
     ΔE 8.6 (protan) · visión normal ΔE 30.9.

     SLOT 1 EN TERRACOTA desde el 31-jul, por decisión del usuario: quería
     calor en las gráficas. El naranja del logo NO podía entrar (ΔE 0.3 deutan
     contra el ámbar del slot 2: la escala se venía abajo).

     Es una terracota QUEMADA (#9A3412), no la de --terracota (#C2410C), y la
     diferencia importa. Con #C2410C la escala pasa la regla de pares
     adyacentes, pero si una gráfica pinta las 6 series a la vez el slot 1
     queda a ΔE 6.0 del rojo del slot 5 — se volvía el peor par de la paleta.
     Con #9A3412 el peor par vuelve a ser el que ya existía antes de tocar
     nada (teal↔esmeralda, ΔE 9.8), o sea que el cambio no empeora nada.
     Adyacentes: ΔE 23.1 contra el ámbar vecino, mejor que el cobalto que
     había aquí.                                                             */
  --chart-1: #9A3412;   /* terracota quemada */
  --chart-2: #CA8A04;   /* ámbar    */
  --chart-3: #A21CAF;   /* magenta  */
  --chart-4: #047857;   /* esmeralda*/
  --chart-5: #DC2626;   /* rojo     */
  --chart-6: #0D9488;   /* teal     */

  /* Cromo de la gráfica: recesivo por definición. */
  --chart-grid:     #EEF0F3;
  --chart-axis:     #CBD5E1;
  --chart-ink:      #475569;
  --chart-ink-mute: #64748B;
  --chart-surface:  #FFFFFF;

  /* Rampa secuencial (magnitud continua: heatmaps, rellenos de área).
     Un solo tono, claro→oscuro. Para rampas ORDINALES (etapas de embudo,
     tiers) no bajar de --seq-400: por debajo no alcanza 2:1 contra blanco.

     ESTA SÍ pasó al naranja de marca (30-jul-2026). Una rampa secuencial es
     de UN SOLO tono y se lee sola, así que no hay pares adyacentes con los
     que chocar: el problema que impide el naranja en la escala categórica
     aquí no existe. Luminosidad verificada monótona en los 8 pasos, y
     --seq-400 da 2.26:1 contra blanco (sobre el piso ordinal de 2:1).       */
  --seq-100: #FFEDD5;
  --seq-200: #FED7AA;
  --seq-300: #FDBA74;
  --seq-400: #FB923C;
  --seq-500: #F97316;
  --seq-600: #EA580C;
  --seq-700: #C2410C;
  --seq-800: #9A3412;

  /* Divergente (polaridad: variación vs. objetivo). Dos tonos opuestos y un
     gris neutro en medio — nunca un tono en el punto medio.
     El polo positivo se queda COBALTO: la gracia de una escala divergente es
     que los dos extremos sean opuestos, y cualquier cálido contra el rojo de
     --div-neg deja de serlo. Medido: terracota ↔ rojo da ΔE 6.1 con visión
     normal (y 5.0 deutan); cobalto ↔ rojo da ΔE 35.9. Con un cálido, "por
     encima del objetivo" dejaría de distinguirse de "por debajo", que es lo
     único que esta escala tiene que decir.                                  */
  --div-neg: #B91C1C;
  --div-mid: #F1F5F9;
  --div-pos: #1D4ED8;

  /* ── ESPACIADO · escala 8pt (base 4) ────────────────────────────────────*/
  --space-0:    0;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;

  /* ── RADIOS ─────────────────────────────────────────────────────────────*/
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── TIPOGRAFÍA ─────────────────────────────────────────────────────────
     --font-display es la voz editorial: SOLO para titulares del sitio web.
     Las interfaces (Dashboard, App, Consola) usan --font-sans en todo.      */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Courier New', monospace;

  /* Escala tipográfica */
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;

  /* Pesos */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Interlineado */
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* Tracking (espaciado de letra) — labels en mayúsculas */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.12em;

  /* ── ELEVACIÓN · sombras para UI clara ──────────────────────────────────
     Difusas y de muy baja opacidad, teñidas de azul-grafito (no negro puro,
     que sobre blanco se ve sucio). La jerarquía la carga el borde de 1px; la
     sombra solo despega la superficie.                                      */
  --shadow-xs:   0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm:   0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md:   0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg:   0 16px 40px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.04);
  --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.70);
  --ring-focus:  0 0 0 3px rgba(255, 110, 6, 0.38);   /* naranja: más alfa
                                     que el cobalto (0.28) para que el anillo
                                     de foco siga leyéndose sobre el fondo   */

  /* ── Z-INDEX · escala única ─────────────────────────────────────────────*/
  --z-base:    1;
  --z-sticky:  20;
  --z-header:  40;
  --z-nav:     50;
  --z-overlay: 100;
  --z-toast:   200;

  /* ── MOVIMIENTO ─────────────────────────────────────────────────────────*/
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================================
   TEMA OSCURO  ·  :root[data-theme="dark"]
   ----------------------------------------------------------------------------
   Nació dentro del <style> de la landing y aquí se promueve al canónico, que
   es lo que lo vuelve disponible para las 13 superficies: todas ya cargan este
   archivo, así que ninguna necesita CSS nuevo para tener tema oscuro — solo el
   arranque que pone el atributo (design-system/tema.js).

   NO es una inversión del tema claro. En claro la elevación sube hacia el
   blanco y la sombra hace el trabajo; aquí la elevación sube hacia el gris y
   **el peso lo carga el borde**, porque una sombra negra sobre fondo negro no
   se ve.

   Tres decisiones que no son obvias:
   1) El texto principal NO es blanco puro (#F1F3F6). El blanco puro sobre
      negro produce halo y cansa; el gris muy claro se lee más nítido.
   2) El naranja de marca, al revés que el cobalto, NO necesita corrección en
      oscuro: #ff6e06 da 6.79:1 contra #0E1013. El cobalto sí la necesitaba
      (2.4:1, los botones se hundían en la página) y por eso subía a #2563EB.
      El acento es ahora el MISMO color en los dos temas.
   3) Y tampoco necesita un tono aparte para TEXTO: 6.79:1 pasa de sobra. Aun
      así --accent-text sube a #FF8B33 (8.16:1) para que el enlace se despegue
      del botón. En claro los dos son distintos por obligación; en oscuro, por
      jerarquía.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;   /* barras de scroll, autocompletado y controles nativos */

  /* Capas — grafito profundo con una pizca de azul, no negro puro */
  --bg-base:      #0E1013;
  --bg-sunken:    #08090B;
  --bg-surface:   #14171B;
  --bg-surface-2: #1A1E24;
  --bg-header:    rgba(14,16,19,0.72);
  --bg-overlay:   rgba(3,4,6,0.66);

  /* Bordes — aquí son la estructura, no un detalle */
  --border-subtle:  #1E222A;
  --border-default: #282D36;
  --border-strong:  #3A414D;

  /* Texto */
  --text-primary:   #F1F3F6;   /* 17.0:1 sobre --bg-base */
  --text-secondary: #A8B1BE;   /*  8.8:1 */
  --text-tertiary:  #7E8899;   /*  5.3:1 */
  --text-disabled:  #565E6B;
  --text-on-accent: #1A1005;   /* igual que en claro: el botón naranja lleva
                                  tinta oscura en los DOS temas */

  /* Marca funcional (naranja del logo) */
  --accent:          #ff6e06;   /* mismo color que en claro: 6.79:1 aquí   */
  --accent-hover:    #FF8B33;   /* en oscuro el hover ACLARA, no oscurece
                                   — tinta encima 8.03:1                   */
  --accent-active:   #E85F02;   /* tinta encima 5.42:1                     */
  --accent-contrast: #1A1005;   /* tinta SOBRE --accent   6.68:1           */
  --accent-subtle:   rgba(255,110,6,0.15);
  --accent-border:   rgba(255,139,51,0.38);
  --accent-text:     #FF8B33;   /* acento TIPOGRÁFICO: 8.16:1 sobre --bg-base */

  /* Marca de los logotipos — sobre fondo oscuro el color PURO ya pasa, así
     que las tres variantes colapsan al color del logo (verde 7.9:1, naranja
     6.8:1). La tinta sobre el naranja sigue siendo oscura: es el mismo botón
     en los dos temas y no debe cambiar de color de texto al alternar. */
  --marca-bite-ui:      #3ac000;
  --marca-bite-text:    #4FD916;   /* 10.2:1 — realce tipográfico en oscuro  */
  --marca-agentic-ui:   #ff6e06;
  --marca-agentic-text: #FF8B33;   /*  8.2:1                                  */
  --marca-agentic-hover: #FF8B33;  /* en oscuro el hover ACLARA (8.03:1 tinta)*/

  /* Semánticos — subidos de luminosidad para que funcionen como texto */
  --success:        #10B981;
  --success-bg:     rgba(16,185,129,0.13);
  --success-border: rgba(16,185,129,0.32);
  --success-text:   #6EE7B7;

  --warning:        #F59E0B;
  --warning-bg:     rgba(245,158,11,0.13);
  --warning-border: rgba(245,158,11,0.32);
  --warning-text:   #FBBF24;
  --warning-strong: #B45309;   /* fondo sólido: blanco encima da 5.1:1 */
  --warning-ink:    #FFFFFF;

  --danger:        #EF4444;
  --danger-bg:     rgba(239,68,68,0.13);
  --danger-border: rgba(239,68,68,0.32);
  --danger-text:   #FCA5A5;
  --danger-strong: #DC2626;

  --terracota:        #FB923C;
  --terracota-bg:     rgba(251,146,60,0.13);
  --terracota-border: rgba(251,146,60,0.32);

  /* INFO en oscuro. Mientras --info era alias de --accent heredaba gratis la
     corrección del cobalto para fondo oscuro. Al fijarlo a un literal en
     :root (para que el naranja no se lo llevara), esa herencia se perdió y
     el #1D4ED8 del tema claro se quedaría en 2.4:1 aquí: invisible. Estos
     tres valores son los que tenía el acento cobalto en oscuro.            */
  --info:        #2563EB;
  --info-bg:     rgba(59,130,246,0.13);
  --info-border: rgba(96,165,250,0.34);
  --info-text:   #93C5FD;

  --neutral:    #94A3B8;
  --neutral-bg: rgba(148,163,184,0.14);

  /* Identidad por agente — mismos tonos, subidos para fondo oscuro */
  --agent-concierge:      #10B981;
  --agent-brand-guardian: #F87171;
  --agent-staff-mentor:   #FBBF24;
  --agent-cost-sentinel:  #60A5FA;
  --agent-intelligence:   #E879F9;

  /* ── DATA-VIZ EN OSCURO ─────────────────────────────────────────────────
     La landing no llevaba esto porque no dibuja gráficas; el Dashboard, la
     Consola y el CRM sí, y sin estas líneas los ejes y la retícula se quedan
     en gris claro sobre grafito (invisibles) y las series pierden contraste.
     Se conserva el ORDEN de los slots, que es el mecanismo de seguridad para
     daltonismo: asignar siempre en orden, nunca ciclar.                     */
  /* Slot 1 en terracota, igual que en claro pero un paso más claro, como
     hacen todos los tonos en este tema. Ojo: NO es el --terracota de oscuro
     (#FB923C) — ese se queda a ΔE 11.2 del ámbar del slot 2 y reprueba.
     #EA580C da ΔE 23.4 contra el ámbar y no aparece en ninguna lista de
     fallos del validador.                                                  */
  --chart-1: #EA580C;   /* terracota quemada */
  --chart-2: #FBBF24;   /* ámbar    */
  --chart-3: #E879F9;   /* magenta  */
  --chart-4: #34D399;   /* esmeralda*/
  --chart-5: #F87171;   /* rojo     */
  --chart-6: #2DD4BF;   /* teal     */

  --chart-grid:     #1E222A;
  --chart-axis:     #3A414D;
  --chart-ink:      #A8B1BE;
  --chart-ink-mute: #7E8899;
  --chart-surface:  #14171B;

  /* Rampa secuencial INVERTIDA: en claro va claro→oscuro porque "más" es más
     tinta; en oscuro "más" es más luz, así que el extremo alto es el claro. */
  --seq-100: #431407;
  --seq-200: #7C2D12;
  --seq-300: #9A3412;
  --seq-400: #C2410C;
  --seq-500: #EA580C;
  --seq-600: #F97316;
  --seq-700: #FB923C;
  --seq-800: #FDBA74;

  /* Divergente — el punto medio deja de ser gris casi blanco y pasa a ser el
     gris de superficie, que es lo que "cero" significa sobre fondo oscuro.  */
  --div-neg: #F87171;
  --div-mid: #262B33;
  --div-pos: #60A5FA;

  /* Elevación — sombra negra real + filo superior que dibuja el canto */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.50);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.55), 0 2px 5px rgba(0,0,0,0.40);
  --shadow-lg: 0 18px 46px rgba(0,0,0,0.62), 0 5px 12px rgba(0,0,0,0.45);
  --highlight-top: inset 0 1px 0 rgba(255,255,255,0.06);
  --ring-focus: 0 0 0 3px rgba(255,139,51,0.46);
}

/* ============================================================================
   UTILIDADES FUNDAMENTALES (opt-in)
   Clases mínimas y de bajo riesgo. Todo lo demás vive en components.css.
   ========================================================================== */

/* Números alineados (KPIs, montos, tablas) — clave para look ejecutivo. */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* Anillo de foco accesible y consistente (WCAG) en cualquier control. */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

/* Render de texto. En modo claro NO se antialiasa a la fuerza: el suavizado
   `antialiased` adelgaza el texto oscuro sobre fondo claro y lo vuelve pálido.
   Se conserva la clase para no romper el marcado que ya la usa. */
.smooth-text { text-rendering: optimizeLegibility; }

/* ============================================================================
   LOGOTIPO POR TEMA
   ----------------------------------------------------------------------------
   Cada marca tiene dos archivos y aquí se elige cuál se ve. Es CSS puro y no
   JavaScript a propósito: el atributo data-theme ya está puesto por el arranque
   del <head> antes del primer pintado, así que el logo correcto entra desde el
   primer fotograma y nunca se ve el otro parpadear.

   OJO CON LOS NOMBRES, que son al revés de lo que parece:
     <marca>-oscuro.svg → tinta OSCURA → clase .claro  → fondo CLARO
     <marca>.svg        → tinta CLARA  → clase .oscuro → fondo OSCURO

   El estado por defecto (sin atributo, sin JS) muestra la variante clara, que
   es el tema por defecto del ecosistema.

   USO:
     <img class="logo-tema claro"  src="/logos/bite-hub-oscuro.svg" alt="Bite Hub">
     <img class="logo-tema oscuro" src="/logos/bite-hub.svg"        alt="Bite Hub">

   POR QUÉ !important. Varias superficies dimensionan su logo con un style=""
   en línea que incluye display:block, y un estilo en línea gana a cualquier
   regla de hoja. Sin !important esas cabeceras mostraban los DOS logotipos,
   uno encima del otro. Esto no es una preferencia estética sino un interruptor
   de visibilidad: tiene que ganar siempre.
   ========================================================================== */
.logo-tema.claro  { display: block !important; }
.logo-tema.oscuro { display: none  !important; }
:root[data-theme="dark"] .logo-tema.claro  { display: none  !important; }
:root[data-theme="dark"] .logo-tema.oscuro { display: block !important; }

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