/* MentorBI — Tema de marca "Quality / Manager ERP"
   Reskin para la instancia congelada que ve Quality (mentorbi.consulting). Colores, tipografía
   y logos copiados literales del sistema de diseño real que Quality entregó
   (proyectos/mentorbi/inbox/Quality/Sistema de diseno Manager ERP - interactivo.html, 2026-09-24)
   — nunca aproximados. tokens/colors.css y tokens/typography.css (identidad oficial de MentorIA)
   quedan intactos.

   Se activa vía el atributo [data-theme-brand="quality"] en <html>, inyectado por server.py
   únicamente cuando MENTORBI_BRAND_THEME=quality está definido en el .env de esa instancia —
   /opt/mentorbi-dev no lo define, así que nunca hereda este reskin por accidente. Ver
   proyectos/mentorbi/decisiones_y_contexto.md, entrada [2026-09-24c].

   MECANISMO: styles.css casi nunca usa los alias semánticos de colors.css (--surface-*,
   --text-*) — la gran mayoría de sus reglas referencian directo la PALETA LITERAL
   (--navy-900, --gold-500, --gray-400...). Por eso este archivo sobreescribe esa capa literal,
   no la semántica: las variables CSS se resuelven en cascada sobre el elemento donde se usan,
   así que redefinir --navy-900 aquí basta para que TODO lo que ya dice `var(--navy-900)` en
   styles.css (botones, tarjetas, chat, badges...) cambie de color sin tocar ese archivo —
   incluidos los propios alias semánticos de colors.css, que también son solo `var(--navy-900)`
   por dentro. Verificado visualmente antes de darlo por bueno (ver checklist de verificación). */

@font-face { font-family: "D-DIN PRO"; src: url("../fonts/quality/DDINPRO-400.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "D-DIN PRO"; src: url("../fonts/quality/DDINPRO-500.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "D-DIN PRO"; src: url("../fonts/quality/DDINPRO-600.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "D-DIN PRO"; src: url("../fonts/quality/DDINPRO-700.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "D-DIN PRO"; src: url("../fonts/quality/DDINPRO-800.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "D-DIN PRO"; src: url("../fonts/quality/DDINPRO-900.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Cuprum"; src: url("../fonts/quality/Cuprum-Regular.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cuprum"; src: url("../fonts/quality/Cuprum-Italic.ttf") format("truetype"); font-weight: 400 700; font-style: italic; font-display: swap; }

/* :root[...] y no solo [...]: `:root[data-theme="dark"]` de colors.css (línea 113) redefine
   --border-inverse con la MISMA especificidad de atributo — con solo `[data-theme-brand="quality"]`
   ese bloque de colors.css gana por tener también el pseudo-elemento :root (especificidad más alta),
   así que el cian de --border-inverse de abajo nunca se pintaba: siempre ganaba
   rgba(6,19,43,0.35) (casi negro) de colors.css, aunque este archivo cargue después en el HTML.
   Bug real, no una decisión de diseño — encontrado al corregir el borde "negro" de las tarjetas
   KPI a pedido de la Directora. Ver decisiones_y_contexto.md, entrada [2026-09-24k]. */
:root[data-theme-brand="quality"] {
  /* ---- Paleta real Manager ERP, valores verbatim del archivo del cliente ---- */
  --azul-quality: #0D2358;
  --naranja-erp: #FC771F;
  --cian: #0098DA;
  --azul-electrico: #2424C5;
  --celeste: #91D8F7;
  --gris-manager: #848688;
  --tinta-cuerpo: #1E2A44;
  --fondo-claro: #F5F8FC;
  --turquesa-cierre: #29D0E8;

  --font-family-display: "D-DIN PRO", "Barlow Semi Condensed", "Barlow", "Bahnschrift", sans-serif;
  --font-family-body: "Cuprum", "Arial Narrow", sans-serif;

  /* ---- Degradados de marca (verbatim, sección "Paleta de marca" del HTML de Quality) ---- */
  --grad-institucional: linear-gradient(150deg, var(--azul-quality) 0%, var(--azul-electrico) 100%);

  /* ---- Capa literal de colors.css remapeada — esto es lo que realmente repinta la app ----
     --azul-electrico (#2424C5) es un color que la propia paleta del cliente documenta para
     DEGRADADOS, no para rellenos planos grandes — como relleno sólido se ve "muy brillante, sin
     armonía" (hallazgo original de la Directora sobre las tarjetas, 2026-09-24; el mismo defecto
     reapareció en la sección de chat en la siguiente revisión y se corrige aquí de raíz). Ya no
     queda NINGÚN uso de --azul-electrico como color plano — vive solo en los degradados
     (--grad-institucional, la "ola" del login). Dos superficies oscuras, ambos tonos reales de
     Quality aunque su rol documentado sea otro (párrafos/primario), reutilizados como superficie
     porque funcionan igual de bien y evitan el azul eléctrico:
       --navy-900 (tarjetas: kpi-card, chart-card, inputs)      → --tinta-cuerpo #1E2A44
       --navy-800 (paneles elevados: chat-header, burbuja IA)   → --tinta-cuerpo #1E2A44 (mismo
         tono que las tarjetas — antes era azul-eléctrico, encendido, sin necesidad real de
         distinguirse de las tarjetas)
       --navy-700 (burbuja del usuario, divisor)                → --azul-quality #0D2358 (el navy
         más oscuro y "primario" de la marca — dos tonos de navy calmados dan jerarquía visual
         real entre "tu mensaje" y "respuesta del asistente" sin recurrir al azul brillante)
     --navy-950 (fondo de página) usa el degradado --grad-institucional en vez de un plano sólido
     (ver regla body más abajo — un token de color no puede ser un degradado, así que --navy-950
     en sí se queda sólido en azul-quality para los usos que sí necesitan un color plano, ej.
     texto oscuro sobre botón dorado). */
  --navy-950: var(--azul-quality);
  --navy-900: var(--tinta-cuerpo);
  --navy-800: var(--tinta-cuerpo);
  --navy-700: var(--azul-quality);
  --navy-600: var(--celeste);

  --blue-600: var(--cian);
  --blue-500: var(--cian);
  --blue-100: var(--celeste);

  --gold-500: var(--naranja-erp);
  --gold-600: var(--naranja-erp);
  --gold-300: var(--celeste);
  --gold-100: var(--fondo-claro);

  /* gray-400/500/600 son "texto muted" en el sistema original — gris-manager cumple ese mismo
     rol en la paleta de Quality, mapeo directo sin pérdida. gray-100/200/300 son texto claro
     sobre fondo navy (tarjetas, chat) — usan blanco/fondo-claro/celeste para mantener jerarquía
     de lectura. gray-700/800/900 son texto oscuro sobre fondo claro — tinta-cuerpo. */
  --gray-50: var(--fondo-claro);
  --gray-100: var(--white);
  --gray-200: var(--fondo-claro);
  --gray-300: var(--celeste);
  --gray-400: var(--gris-manager);
  --gray-500: var(--gris-manager);
  --gray-600: var(--gris-manager);
  --gray-700: var(--tinta-cuerpo);
  --gray-800: var(--tinta-cuerpo);
  --gray-900: var(--tinta-cuerpo);

  --text-body-official: var(--tinta-cuerpo);

  /* Borde de tarjetas/paneles sobre fondo navy. Primer valor (celeste, del PPT slide 6) corregido
     a cian a pedido de la Directora, siguiendo el rol que la propia paleta de Quality le asigna
     a cada color: cian es "líneas y sobretítulos", celeste es "destacado en oscuro" (texto/acento,
     no líneas) — cian es el más correcto para un borde. --border-inverse la usan 23 reglas de
     styles.css (kpi-card, chart-card, pane-chat, header, composer...) — un solo cambio aquí les
     da a todas el mismo borde. */
  --border-inverse: rgba(0, 152, 218, 0.45);

  /* violeta y los colores semánticos de estado (éxito/alerta/peligro/info) no tienen
     equivalente en el sistema de Quality — se dejan tal cual, no son identidad de marca. Única
     excepción: el disclaimer del modal de Informe (`--warning-fill`/`--warning-text`, amarillo)
     es visible todo el tiempo dentro de ese modal, no un estado puntual — corregido más abajo,
     ver comentario junto a `.informe-modal__disclaimer`. */
}

/* Overrides puntuales de componente (no de token) — pedido explícito de la Directora tras ver el
   reskin en producción: aviso "Generado por IA" y el hint inicial del chat quedaban en gris (bajo
   contraste para su gusto sobre el navy) — blanco puro, sin tocar el resto de usos de --gray-400
   (sigue sirviendo en otros lugares). `.kpi-card__value` salió de este grupo el 2026-09-24m: ya
   no vive sobre navy, ver bloque de tarjetas más abajo. */
[data-theme-brand="quality"] .chat-header__disclaimer,
[data-theme-brand="quality"] .msg--hint {
  color: var(--white);
}

/* Disclaimer del modal de Informe Estratégico — la Directora lo vio amarillo (`--warning-fill`/
   `--warning-text` de MentorIA) tanto durante la carga como ya generado el informe, y notó que ese
   amarillo no existe en ninguna parte de la paleta de Quality. Corregido a naranja-erp — no es un
   color de advertencia inventado, es el mismo "esto necesita tu atención" que ya usa el resto de
   la app (CTA, insignias de hallazgos, borde de tarjeta de hallazgo), con el mismo tratamiento de
   fondo-tinte-suave + texto sólido que ya tenía el amarillo, solo recoloreado. */
[data-theme-brand="quality"] .informe-modal__disclaimer {
  background: rgba(252, 119, 31, 0.15);
  color: var(--naranja-erp);
}

/* Fondo de página plano — corregido 2026-09-24m. La Directora comparó el degradado "Institucional"
   contra los fondos reales del PPT del cliente (planos, sin brillo) y decidió que el degradado
   "brilla mucho a los ojos y dificulta la lectura por más de 1 minuto" — cambia a azul-quality
   sólido, el mismo tono que ya usa medio degradado y que el PPT usa de fondo real en sus slides.
   El degradado --grad-institucional sigue existiendo como token (lo sigue usando la "ola" del
   login) — solo se retira de aquí. */
[data-theme-brand="quality"] body {
  background: var(--azul-quality);
}

/* Tarjetas del dashboard (KPI + gráficos) — receta real, no aproximada. El HTML del cliente
   documenta su propia sección de tarjetas ("06 · TARJETAS Y CIFRAS", id="tarjetas"): fondo
   blanco, SIN borde, radius 20px, sombra suave azul-quality — nunca la superficie navy que usa
   el resto de la app. La Directora encontró esta sección y pidió tarjetas blancas en un primer
   momento — corregido en la misma sesión [2026-09-24n] al ver que no era la tarjeta correcta de
   referencia: la real es la tarjeta CENTRAL de esa misma sección (acento en degradado, texto
   blanco), no las dos blancas de los costados. Fondo = --grad-institucional (mismo degradado que
   ya usa esa tarjeta central, mismo token que la "ola" del login). Se extiende aquí también a
   chart-card por ser la misma familia visual en el mismo grid. */
[data-theme-brand="quality"] .kpi-card,
[data-theme-brand="quality"] .chart-card {
  background: var(--grad-institucional);
  border: 1px solid var(--cian);
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(13, 35, 88, 0.35);
}

/* Jerarquía de texto sobre la tarjeta en degradado — instrucción literal de la Directora con la
   tarjeta "Local o en la nube" como referencia exacta: etiqueta (el nombre del KPI/el título del
   gráfico) en el mismo tono que el wordmark "MentorBI" (corregido 2026-09-24p — antes cian, la
   Directora pidió igualarlo al de "MentorBI", que es celeste vía --gold-300, no cian), cifra/valor
   principal en blanco sin tocar, meta (fecha/corte) en blanco pero más chica que el resto —
   --font-caption (12px) ya era el token más chico del sistema, así que el meta baja a un tamaño
   explícito por debajo de esa escala. */
[data-theme-brand="quality"] .kpi-card__title,
[data-theme-brand="quality"] .chart-card__title {
  color: var(--gold-300);
}

[data-theme-brand="quality"] .kpi-card__value,
[data-theme-brand="quality"] .bar-chart__value {
  color: var(--white);
}

[data-theme-brand="quality"] .kpi-card__meta {
  color: var(--white);
  font-size: 11px;
}

[data-theme-brand="quality"] .chart-card__info:hover,
[data-theme-brand="quality"] .chart-card__info:focus-visible {
  border-color: var(--naranja-erp);
  color: var(--naranja-erp);
}

/* Botones del header — receta real de "03 · BOTONES" (sección id="botones" del HTML del cliente):
   siempre píldora (radius 999px, nunca radius-md), nunca borde+relleno transparente como tenían
   estos dos. La Directora pidió revisar si cumplían el estándar — no cumplían: eran "ghost"
   (borde + fondo transparente), un patrón que el sistema del cliente no usa en ningún botón real
   documentado (ni siquiera "sobre fondo oscuro" — ahí usan relleno sólido blanco o naranja).
   Animación (hover un paso más claro, activo escala 0,98) copiada literal de la variante "sobre
   fondo oscuro" (id="botones", más el hover de la variante naranja para el CTA). Tamaño bajado de
   "md" (48px) a "sm" (36px, real de la tabla de tamaños del cliente) 2026-09-24r — con el logo ya
   en 84px, el "md" les quitaba protagonismo, se veían del mismo peso visual que el logo. Mismo
   tamaño que ya usa "Enviar por correo" dentro del modal. */
[data-theme-brand="quality"] .app__informe,
[data-theme-brand="quality"] .app__logout {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 15px;
  transition: background 150ms, transform 150ms, box-shadow 250ms;
}

[data-theme-brand="quality"] .app__informe:active:not(:disabled),
[data-theme-brand="quality"] .app__logout:active {
  transform: scale(0.98);
}

/* "Informe estratégico" — es la acción principal del header (abre el informe), así que toma el
   CTA naranja sólido real (background #FC771F/color #0D2358, hover #FF8A3D + resplandor), no el
   blanco sólido que ellos reservan para acciones secundarias sobre fondo oscuro. */
[data-theme-brand="quality"] .app__informe {
  border: none;
  background: var(--naranja-erp);
  color: var(--azul-quality);
  font-weight: 700;
}

[data-theme-brand="quality"] .app__informe:hover:not(:disabled) {
  background: #FF8A3D;
  color: var(--azul-quality);
  box-shadow: 0 8px 22px rgba(252, 119, 31, 0.35);
}

/* "Cerrar sesión" — acción secundaria, de menor jerarquía. El HTML del cliente no documenta un
   botón "ghost" específico para fondo oscuro (solo el sólido blanco, reservado arriba para el CTA
   real), así que se extrapola el mismo lenguaje de su variante ghost documentada para fondo claro
   (borde 2px + relleno transparente + tinte sutil al pasar el mouse) traducida a fondo oscuro con
   celeste — mismo motivo/radius/altura/animación que el CTA, menor peso visual. */
[data-theme-brand="quality"] .app__logout {
  border: 2px solid var(--celeste);
  background: transparent;
  color: var(--celeste);
  font-weight: 700;
}

[data-theme-brand="quality"] .app__logout:hover {
  background: rgba(145, 216, 247, 0.12);
  color: var(--celeste);
  border-color: var(--celeste);
}

/* "Enviar por correo" (dentro del modal de Informe Estratégico) — mismo hallazgo que
   "Informe estratégico"/"Cerrar sesión": era "ghost" (borde+transparente), el HTML del cliente no
   documenta ese patrón. Es una acción secundaria de tamaño más chico dentro de un modal (no la
   acción principal del header), así que toma el tamaño "sm" real de "03 · BOTONES" (altura 36px,
   padding 0 16px, texto 15px) en vez del "md" de 48px que usan los botones del header — mismo CTA
   naranja sólido, misma animación (hover más claro, activo escala 0,98). */
[data-theme-brand="quality"] .informe-modal__enviar {
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: var(--naranja-erp);
  color: var(--azul-quality);
  font-size: 15px;
  font-weight: 700;
  transition: background 150ms, transform 150ms, box-shadow 250ms;
}

[data-theme-brand="quality"] .informe-modal__enviar:hover {
  background: #FF8A3D;
  color: var(--azul-quality);
  box-shadow: 0 8px 22px rgba(252, 119, 31, 0.35);
}

[data-theme-brand="quality"] .informe-modal__enviar:active {
  transform: scale(0.98);
}