/* ============================================
   BookinTrade — Tokens del sistema de diseño (v2 «el sabio», 27 sep 2026)
   ============================================
   Identidad: docs/brief-marca.md (leerlo antes de tocar este archivo).
   Fuente de verdad de los valores: el Design System publicado en claude.ai
   (https://claude.ai/artifact/1ux7rrNAvNeMX2bbESKZz9). Los valores de la v1
   (negro neutro + verde agua) quedaron en el historial de versiones de ese
   sistema.

   Se carga DESPUÉS de base.css, layout.css, components.css y style.css a
   propósito: así redefine las variables viejas y toda la app adopta la
   paleta nueva sin reescribir cada regla. Las variables viejas NO se borran:
   quedan como alias que apuntan a los tokens (ver "Puente" abajo). Volver
   atrás es sacar el <link> de este archivo.

   Tres ejes independientes, sobre <html>:
     - data-theme="dark" (Tinta) | "light" (Papel) → lo pone static/js/tema.js
     - clase .bt-vision-daltonico → ganancia/pérdida en azul/naranja
                                    (lo pone el menú de accesibilidad)
   ============================================ */

/* ── Fuentes (auto-hospedadas, sólo el juego latino: alcanza para el español) ──
   Newsreader: títulos, frases del sabio y TODA cifra (cifras del mismo ancho
   de fábrica). Zen Kaku Gothic New: la interfaz. Las dos con licencia OFL. */
@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/Newsreader-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/Newsreader-Italic-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("/static/fonts/ZenKakuGothicNew-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("/static/fonts/ZenKakuGothicNew-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("/static/fonts/ZenKakuGothicNew-700-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/* ── Tinta (oscuro, el principal y el default) ──
   El fondo ES el azul noche del logo. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #13131f;
  --color-surface: #1a1a28;
  --color-surface-2: #212132;
  --color-surface-3: #29293d;
  --color-border: #2c2c40;
  --color-border-strong: #6a6a82;

  --color-text-primary: #ece9e1;
  --color-text-secondary: #a9a8a3;
  --color-text-tertiary: #8f8e8a;

  --color-brand-ink: #13131f;
  --color-brand-teal: #00d4aa;

  /* Celadón (seiji): la marca, lo que está bien */
  --color-accent: #7ebea5;
  --color-accent-hover: #a3d3c0;
  --color-accent-dim: rgba(126, 190, 165, 0.14);
  --color-on-accent: #13131f;

  /* La acción principal va en papel sobre tinta, sin color */
  --color-action: #ece9e1;
  --color-action-hover: #ffffff;
  --color-on-action: #13131f;

  --color-profit: #7ebea5;
  --color-profit-dim: rgba(126, 190, 165, 0.12);
  /* Pérdida en ai-nezumi (gris azulado): un dato, no una alarma */
  --color-loss: #8fa6ae;
  --color-loss-dim: rgba(143, 166, 174, 0.12);
  --color-warning: #e6b422;
  --color-warning-dim: rgba(230, 180, 34, 0.12);
  --color-info: #8fb0e0;
  /* Bermellón: sólo el sello de "operación según el plan" */
  --color-seal: #e83929;
  --color-gold: #e6b422;
  --color-scrim: rgba(8, 8, 14, 0.72);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 2px var(--color-accent);

  /* Valores para Chart.js (canvas no lee variables: los lee tema.js) */
  --chart-grid: rgba(236, 233, 225, 0.06);
  --chart-tick: #8f8e8a;
}

/* ── Papel (claro) ── */
:root[data-theme="light"] {
  color-scheme: light;

  --color-bg: #f6f3ea;
  --color-surface: #fbfaf5;
  --color-surface-2: #efebdf;
  --color-surface-3: #e6e0d0;
  --color-border: #e3ddcc;
  --color-border-strong: #8f8876;

  --color-text-primary: #1c1b1a;
  --color-text-secondary: #595857;
  --color-text-tertiary: #65635e;

  /* Chitose-midori: el celadón oscurecido para leerse sobre papel */
  --color-accent: #316745;
  --color-accent-hover: #24502f;
  --color-accent-dim: rgba(49, 103, 69, 0.10);
  --color-on-accent: #fbfaf5;

  --color-action: #1c1b1a;
  --color-action-hover: #33312e;
  --color-on-action: #fbfaf5;

  --color-profit: #316745;
  --color-profit-dim: rgba(49, 103, 69, 0.10);
  --color-loss: #4f666f;
  --color-loss-dim: rgba(79, 102, 111, 0.10);
  --color-warning: #80620b;
  --color-warning-dim: rgba(128, 98, 11, 0.10);
  --color-info: #2f5a9e;
  --color-seal: #c8321f;
  --color-gold: #b8912a;
  --color-scrim: rgba(28, 27, 26, 0.45);

  --shadow-sm: 0 1px 3px rgba(28, 27, 26, 0.08);
  --shadow-lg: 0 12px 32px rgba(28, 27, 26, 0.14);

  --chart-grid: rgba(28, 27, 26, 0.08);
  --chart-tick: #65635e;
}

/* ── Modo daltónico: ganancia azul, pérdida naranja ──
   Para daltonismo rojo-verde (protanopia/deuteranopia, ~8% de los hombres),
   que sí distingue el eje azul-amarillo. Se combina con cualquier tema. */
:root.bt-vision-daltonico {
  --color-profit: #6cc4ff;
  --color-profit-dim: rgba(108, 196, 255, 0.12);
  --color-loss: #ff9a3c;
  --color-loss-dim: rgba(255, 154, 60, 0.12);
}
:root.bt-vision-daltonico[data-theme="light"] {
  --color-profit: #0a5cad;
  --color-profit-dim: rgba(10, 92, 173, 0.10);
  --color-loss: #a8490a;
  --color-loss-dim: rgba(168, 73, 10, 0.10);
}

/* ── Escalas que no cambian con el tema ── */
:root {
  --font-sans: "Zen Kaku Gothic New", system-ui, -apple-system, sans-serif;
  --font-serif: Newsreader, Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
}

/* ── Puente: variables viejas → tokens ──
   Cada variable que declaraban base.css y style.css pasa a apuntar al token
   de su rol. Ver la tabla completa en la sección "Migración" del sistema. */
:root {
  /* base.css (ya tenía los nombres del sistema; se agregan los que faltaban) */
  --color-success: var(--color-profit);
  --color-danger: var(--color-loss);
  --font-main: var(--font-sans);

  /* style.css */
  --bg-principal: var(--color-bg);
  --bg-sidebar: var(--color-surface);
  --bg-panel: var(--color-surface);
  --bg-panel-hover: var(--color-surface-3);
  --bg-input: var(--color-surface-2);
  --acento: var(--color-accent);
  --acento-hover: var(--color-accent-hover);
  --acento-suave: var(--color-accent-dim);
  --verde: var(--color-profit);
  --rojo: var(--color-loss);
  --amarillo: var(--color-warning);
  --verde-suave: var(--color-profit-dim);
  --rojo-suave: var(--color-loss-dim);
  --texto-primario: var(--color-text-primary);
  --texto-secundario: var(--color-text-secondary);
  --texto-muted: var(--color-text-tertiary);
  --borde: var(--color-border);
  --borde-acento: rgba(126, 190, 165, 0.35);
  --radio: var(--radius-sm);
  --radio-lg: var(--radius-md);
  --fuente-ui: var(--font-sans);
  /* --fuente era JetBrains Mono y se usaba en títulos y cifras: ahora es la
     serifa del sabio (Newsreader), que además alinea las cifras. */
  --fuente: var(--font-serif);
  --shadow: var(--shadow-sm);

  /* Variables que el JS y algunos estilos en línea usaban SIN que nadie las
     definiera: caían siempre a su color de respaldo oscuro (una paleta
     escondida). Ahora apuntan al token de su rol. */
  --color-text: var(--color-text-primary);
  --texto: var(--color-text-primary);
  --color-muted: var(--color-text-secondary);
  --color-text-muted: var(--color-text-secondary);
  --panel-2: var(--color-surface-2);
  --color-bg-elevated: var(--color-surface);
  --font-base: var(--font-sans);
}
:root[data-theme="light"] {
  --borde-acento: rgba(49, 103, 69, 0.35);
}

/* Foco de teclado visible en todo control, con el color del tema */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Cifras alineadas en columna donde se usa la fuente de datos */
body {
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-variant-numeric: lining-nums tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0s; }
}

/* ============================================
   Piezas del sistema v1 que reemplazan a las anteriores
   ============================================ */

/* ── v2 «el sabio»: tipografía de títulos y cifras ──
   Todo lo que antes iba en monoespaciada (títulos de sección, cifras de KPI,
   precios) pasa a Newsreader vía --fuente. Una serifa en negrita pesa
   demasiado: los números grandes van livianos y sin letras separadas. */
.page-header h2,
.logo-texto,
.sidebar-logo span,
.planes-titulo,
.modal-pro-titulo,
.bt-vacio-titulo,
.semana-titulo {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
}
.page-header h2 { font-size: 26px; }
.kpi-valor,
.bt-kpi-valor,
.analytics-valor,
.curva-valor,
.calc-valor,
.ia-stat-valor,
.proy-monto,
.plan-precio-monto,
.precio-monto,
.score-valor,
.semana-valor,
.rr-display {
  font-family: var(--font-serif);
  font-weight: 300;
  letter-spacing: -0.015em;
  font-variant-numeric: lining-nums tabular-nums;
}
.logo-subtitulo {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--color-text-secondary);
}
.exchange-nombre { font-family: var(--font-sans); letter-spacing: 0.04em; }

/* ── v2: la acción principal va en papel sobre tinta (o tinta sobre papel),
   sin color. El celadón queda para marcar lo que está bien. ── */
.btn-principal,
.pwa-btn-instalar,
.legal-consent-modal .btn-accept {
  background: var(--color-action);
  color: var(--color-on-action);
  letter-spacing: 0;
  font-weight: 500;
}
.btn-principal:hover,
.pwa-btn-instalar:hover,
.legal-consent-modal .btn-accept:hover {
  background: var(--color-action-hover);
}

/* ── v2: navegación sólo con palabras (kanso). Los íconos Lucide aparecen en
   todas las listas de rasgos "hecho con IA": se ocultan, no se borran. ── */
.nav-item .nav-icon { display: none; }

/* Banner de privacidad: pedía Inter por su cuenta (352 KB sólo para esa
   pastilla). Usa la fuente de la interfaz. */
html .bt-consent-banner, html .bt-consent-modal, html .bt-consent-fab { font-family: var(--font-sans); }

/* Selector ES/EN: su estilo vive en un <style> dentro de index.html con el
   verde agua viejo fijo. Esta regla le gana por especificidad. */
html .selector-idioma .lang-btn { color: var(--color-text-secondary); }
html .selector-idioma .lang-btn.activo { background: var(--color-action); color: var(--color-on-action); }

/* Títulos de panel ("Curva de cuenta", "Últimas operaciones"): la voz del sabio */
.panel h3, .card h3, .seccion h3, #pantalla-app section h3, #pantalla-app .panel-header h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: -0.005em;
}

/* Íconos Lucide del sprite: trazo de línea, color heredado del texto */
.icono {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  display: block;
}
.nav-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Marca BookinTrade (SVG): el ícono trae su propio fondo y sus esquinas */
.logo-mark,
.logo-mark-sm {
  background: transparent;
  padding: 0;
}
.logo-mark .logo-svg { width: 56px; height: 56px; display: block; }
.logo-mark-sm .logo-svg { width: 28px; height: 28px; display: block; }
.logo-mark-sm { width: 28px; height: 28px; }
/* El fondo del ícono (color-brand-ink) es casi igual a las superficies oscuras:
   un borde fino lo recorta para que no se pierda en la barra lateral. */
.logo-mark .logo-svg,
.logo-mark-sm .logo-svg {
  border-radius: 20%;
  box-shadow: 0 0 0 1px var(--color-border-strong);
}

/* Selector de tema: control segmentado de 3 botones */
.selector-tema {
  display: flex;
  gap: 2px;
  padding: 2px;
  margin: var(--space-sm) 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.selector-tema button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.selector-tema button:hover { color: var(--color-text-primary); background: var(--color-surface-3); }
.selector-tema button[aria-pressed="true"] {
  background: var(--color-accent-dim);
  color: var(--color-accent);
}
.selector-tema .icono { width: 16px; height: 16px; }
.selector-tema button { font-family: var(--font-sans); font-size: 13px; }
.selector-tema button[aria-pressed="true"] {
  background: var(--color-action);
  color: var(--color-on-action);
}

/* ── Correcciones de layout en celular (existían antes del sistema v1) ──
   1) Cuatro reglas distintas definían .kpis-grid; la última (3 columnas por
      debajo de 1200px) le ganaba a la de celular y cortaba las cifras
      ("+$342", "-8.2%") en pantallas de 390px.
   2) style.css pisaba el padding-left que deja lugar al botón ☰ fijo, que
      tapaba el título de cada sección ("shboard"). */
@media (max-width: 599px) {
  .kpis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
  }
}
@media (max-width: 1023px) {
  .page-header { padding-left: 68px; }
}

/* Etiquetas de ayuda que quedaban por debajo de 4.5:1 en Tinta */
.calc-label, .proy-label { color: var(--color-text-secondary); }

/* Cifras en tablas: Newsreader, porque la sans de la interfaz (Zen Kaku) no
   trae cifras del mismo ancho y las columnas no alineaban. */
td.num {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Botón de pantalla completa del gráfico: tenía fondo oscuro fijo y
   `outline:none` en el foco (invisible para quien navega con teclado). */
html .grafico-fs-btn {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html .grafico-fs-btn:hover { background: var(--color-surface-3); }
html .grafico-fs-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Prioridad de las recomendaciones de IA: borde fino en vez de fondo tintado
   (el fondo bajaba el contraste por debajo de 4.5:1 en Papel) y nunca < 11px. */
.ia-rec-prioridad { font-size: 11px; background: transparent; border: 1px solid currentColor; }
.ia-prio-alta, .ia-prio-media { background: transparent; }

/* Etiqueta del plan Teams: tenía un ámbar fijo; pasa al oro de la paleta */
.badge-teams { background: var(--color-warning-dim); color: var(--color-warning); border-color: var(--color-warning); }

/* Banner de privacidad: tiene su propia paleta (--bt-cc-*) para funcionar en
   páginas sueltas. Dentro de la app, se conecta a los tokens del tema. */
html .bt-consent-root {
  --bt-cc-bg: var(--color-surface);
  --bt-cc-bg-alt: var(--color-surface-2);
  --bt-cc-border: var(--color-border-strong);
  --bt-cc-fg: var(--color-text-primary);
  --bt-cc-fg-mute: var(--color-text-secondary);
  --bt-cc-accent: var(--color-action);
  --bt-cc-accent-fg: var(--color-on-action);
  --bt-cc-danger: var(--color-loss);
  --bt-cc-radius: var(--radius-lg);
  --bt-cc-shadow: var(--shadow-lg);
}

/* Backtesting en el celular: la columna de la grilla es `1fr`, que no baja
   de lo que mide su contenido. El canvas de la curva de capital la estiraba
   a 650px en pantallas de 417 y la sección entera se corría a la derecha. */
.bt-layout > * { min-width: 0; }
.bt-layout canvas { max-width: 100%; }
@media (max-width: 1000px) { html .bt-layout { grid-template-columns: minmax(0, 1fr); } }