/* =============================================================================================
   tokens.css — la base visual común del ecosistema 360 Success (ADR-054)

   QUÉ ES. El alfabeto con el que cada producto escribe sus pantallas: tipografías, neutros,
   colores de estado, espaciado, radios, sombras y anillo de foco. Capa 0 lo define; cada producto
   lo COPIA a su repo tal cual y declara el sha (ADR-054 D2). No es un paquete: nada de un producto
   depende en tiempo de ejecución de algo que vive fuera de su repo (Constitución §3.4).

   LO QUE NO ESTÁ AQUÍ, a propósito (ADR-054 D1). Lo pone cada producto en SU archivo, después de
   cargar éste:
     · su logo, sus pantallas y su texto;
     · su `--acento`, UNO solo, aprobado por dirección y escrito en `platform/marca/acentos.json`.
   Aquí `--acento` vale `--marca` sólo para que nada se vea roto antes de que el producto elija.

   CÓMO SE USA EN UN PRODUCTO (Angular):
     src/styles/tokens.css   ← copia exacta de este archivo; no se edita
     src/styles/producto.css ← :root { --acento: #…; } y lo propio del producto
     y en styles.css: @import './styles/tokens.css'; @import './styles/producto.css';
   Los colores sueltos van en producto.css o en ningún sitio: un hex en un componente es lo que
   cuenta el guardián de diseño (ADR-054 D5, trinquete sobre la línea base del 17-oct).

   LAS LETRAS (ADR-054 D3, opción A, 17-oct). Este archivo NO las descarga: cada producto
   las sirve desde su propio bundle o desde Google Fonts. Montserrat 600/700 · Inter 400/500/600 ·
   IBM Plex Mono 400/500. Si no cargan, las de reserva mantienen la página legible.

   CONTRASTE (ADR-054 D5). Cada pareja de abajo marcada `@contraste` la comprueba
   `scripts/contraste-tokens.py` en el CI de platform. Si una baja de su mínimo, este archivo no se
   publica. Texto: 4,5:1 (WCAG AA 1.4.3). Bordes de control y foco: 3:1 (WCAG AA 1.4.11).

   SIN DECIDIR, y por eso no está: el modo oscuro. Cuando se decida entra aquí, para todos.
   ============================================================================================= */

:root {
  /* ── Marca corporativa (PLATFORM.md §15) ─────────────────────────────────────────────────── */
  --marca: #122345;            /* navy: cabecera, barra lateral, pantalla de entrada */
  --marca-profunda: #0b2545;   /* el segundo navy del manual: fondos grandes, pie */
  --sobre-marca: #fbfcfd;      /* texto e iconos encima del navy */
  --acento: var(--marca);      /* lo reemplaza cada producto (D4) */
  --sobre-acento: #fbfcfd;

  /* ── Neutros: los nombres que ya usan Déjàvu360 y ClickPay360 ───────────────────────────── */
  --tinta: #15202b;            /* texto principal */
  --tinta-suave: #526070;      /* texto secundario, etiquetas, ayudas */
  --papel: #eef1f4;            /* fondo de la aplicación */
  --blanco: #fbfcfd;           /* superficies: tarjetas, tablas, campos */
  --regla: #b5bfca;            /* líneas DECORATIVAS (separadores). No sirve como borde de un campo */
  --borde-control: #7b8794;    /* borde de campos, casillas y botones secundarios */

  /* ── Estado: significan lo mismo en todos los productos (D1) ─────────────────────────────── */
  --exito: #1d6b44;   --exito-fondo: #e6f2ec;
  --aviso: #8a5300;   --aviso-fondo: #fbf1e0;
  --error: #a4262c;   --error-fondo: #fbe9ea;
  --info:  #1d5a8c;   --info-fondo:  #e5eef7;

  /* ── Foco: visible siempre, también sobre el navy ───────────────────────────────────────── */
  --foco: #2f6bd1;

  /* Series de gráficos (28-oct-2026, de Anticipa2, validadas con la skill dataviz). Comunes a todos los
     productos: un panel no inventa sus colores. En este orden; ≥ 3:1 sobre --blanco y --papel. */
  --serie-1: #1e8a57;
  --serie-2: #3567c4;
  --serie-3: #d86410;
  --serie-4: #8a55c9;
  --serie-5: #ad7e0a;   /* el #b8860b de origen daba 2,87:1 sobre --papel */
  --serie-6: #c23c5a;
  --anillo: 0 0 0 2px var(--blanco), 0 0 0 4px var(--foco);

  /* ── Tipografía (D3) ─────────────────────────────────────────────────────────────────────── */
  --titulo: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cifra: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --texto-pequeno: 0.8125rem;  /* 13px: notas, procedencia de los datos */
  --texto: 0.9375rem;          /* 15px: el cuerpo */
  --texto-grande: 1.0625rem;   /* 17px: el cuerpo en móvil y en lectura larga */
  --titulo-3: 1.25rem;
  --titulo-2: 1.5rem;
  --titulo-1: 2rem;
  --interlineado: 1.5;
  --interlineado-titulo: 1.2;

  /* ── Espaciado: escala de 4px ───────────────────────────────────────────────────────────── */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.5rem;
  --espacio-6: 2rem;
  --espacio-7: 3rem;
  --espacio-8: 4rem;

  /* ── Radios y sombras ───────────────────────────────────────────────────────────────────── */
  --radio-s: 4px;     /* campos, etiquetas */
  --radio: 8px;       /* botones, tarjetas */
  --radio-l: 14px;    /* paneles, hojas móviles */
  --radio-pildora: 999px;

  --sombra-1: 0 1px 2px rgba(18, 35, 69, 0.08), 0 1px 1px rgba(18, 35, 69, 0.04);
  --sombra-2: 0 4px 12px rgba(18, 35, 69, 0.10), 0 1px 3px rgba(18, 35, 69, 0.06);
  --sombra-3: 0 12px 32px rgba(18, 35, 69, 0.14), 0 2px 6px rgba(18, 35, 69, 0.08);

  /* ── Medidas de la estructura (las mismas que ya usan Déjàvu360 y ClickPay360) ───────────── */
  --barra: 3rem;      /* altura de la cabecera */
  --rail: 12.5rem;    /* ancho de la barra lateral */
}

/* Las cifras se alinean en columna en todas partes: importes, fechas, porcentajes. */
.cifra, [data-cifra] {
  font-family: var(--cifra);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------------------------
   Parejas que se comprueban (scripts/contraste-tokens.py). Formato: @contraste <texto> sobre <fondo> <mínimo>
   @contraste --tinta sobre --blanco 4.5
   @contraste --tinta sobre --papel 4.5
   @contraste --tinta-suave sobre --blanco 4.5
   @contraste --tinta-suave sobre --papel 4.5
   @contraste --sobre-marca sobre --marca 4.5
   @contraste --sobre-marca sobre --marca-profunda 4.5
   @contraste --sobre-acento sobre --marca 4.5
   @contraste --sobre-acento sobre --error 4.5
   @contraste --exito sobre --blanco 4.5
   @contraste --exito sobre --exito-fondo 4.5
   @contraste --aviso sobre --blanco 4.5
   @contraste --aviso sobre --aviso-fondo 4.5
   @contraste --error sobre --blanco 4.5
   @contraste --error sobre --error-fondo 4.5
   @contraste --info sobre --blanco 4.5
   @contraste --info sobre --info-fondo 4.5
   @contraste --borde-control sobre --blanco 3
   @contraste --borde-control sobre --papel 3
   @contraste --foco sobre --blanco 3
   @contraste --foco sobre --papel 3
   @contraste --foco sobre --marca 3
   @contraste --serie-1 sobre --blanco 3
   @contraste --serie-1 sobre --papel 3
   @contraste --serie-2 sobre --blanco 3
   @contraste --serie-2 sobre --papel 3
   @contraste --serie-3 sobre --blanco 3
   @contraste --serie-3 sobre --papel 3
   @contraste --serie-4 sobre --blanco 3
   @contraste --serie-4 sobre --papel 3
   @contraste --serie-5 sobre --blanco 3
   @contraste --serie-5 sobre --papel 3
   @contraste --serie-6 sobre --blanco 3
   @contraste --serie-6 sobre --papel 3
   ------------------------------------------------------------------------------------------- */