/*
 * Bot Colibrí: los tokens de la marca, el único archivo de colores, letras y medidas. Lo usan la página pública
 * (pagina_publica/index.html) y toda la aplicación (web/src/estilos/tema.css lo importa). El usuario, 2026-11-10: «Un
 * archivo de tokens con los colores exactamente como en las referencias» (la landing, la entrada, la 404 y la app) y
 * «Los componentes usan SOLO tokens, nunca colores fijos». Ningún otro archivo pone colores: si falta uno, se agrega
 * aquí, con su valor claro y su valor oscuro (docs/DISENO.md).
 *
 * Los colores son los de las referencias. Hay uno que no está en ellas: `--bc-borde-campo`, el borde de los campos, las
 * casillas y el interruptor apagado, porque `--bc-linea-fuerte` no llega al 3 a 1 que pide el contraste de un campo
 * (web/src/tema/tema.test.ts lo mide en los dos modos).
 *
 * El modo claro u oscuro, como lo pidió (paso 3): sin elección, el del computador; con «Modo oscuro» / «Modo claro»,
 * `data-theme` en <html> (web/src/tema/modo.ts y, antes de pintar, web/public/tema.js). Los selectores sin `:root`
 * (`[data-theme="light"]`, `[data-theme="dark"]`) dejan mostrar un tema dentro del otro: la página /diseno muestra
 * cada componente en los dos a la vez.
 *
 * Todas las medidas van en rem: si ella agranda la letra del navegador, todo crece con ella.
 */

@font-face { font-family: "IBM Plex Sans"; src: url("fuentes/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fuentes/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fuentes/IBMPlexSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fuentes/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fuentes/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- Los colores, claros (sin elección y con el computador en claro, o con «Modo claro») */
:root,
[data-theme="light"] {
  --bc-papel: #ffffff; /* la hoja: tarjetas, tablas, campos, menús, ventanas */
  --bc-superficie: #f5f8f7; /* el fondo de la página, encabezados de tabla, filas que se pasan */
  --bc-superficie-2: #e9f1ef; /* lo apagado: botón deshabilitado, medidor vacío, ficha neutra */
  --bc-linea: #d5dfdc; /* las líneas entre filas y los bordes de las hojas */
  --bc-linea-fuerte: #9fb1ac; /* bajo el encabezado de una tabla, bordes de botones, barras de desplazamiento */
  --bc-borde-campo: #788e89; /* el borde de los campos, las casillas y el interruptor apagado (3 a 1) */
  --bc-tinta: #14201d; /* el texto */
  --bc-tinta-suave: #4e5d59; /* rótulos, ayudas, lo secundario */
  --bc-marca: #0f766e; /* el color de Bot Colibrí: el botón principal, los enlaces, lo elegido, el foco */
  --bc-marca-fuerte: #0b4f4a; /* el principal bajo el mouse */
  --bc-marca-tinte: #e2f0ed; /* el fondo de lo elegido y de los monogramas */
  --bc-en-marca: #ffffff; /* la letra sobre el color de la marca */
  --bc-garganta: #b4206f; /* «Beta» y los datos de ejemplo */
  --bc-garganta-tinte: #fbe4ef;
  --bc-exito: #15603a;
  --bc-exito-tinte: #dcf3e4;
  --bc-aviso: #8a4b00;
  --bc-aviso-tinte: #fdf0d5;
  --bc-peligro: #a3261b;
  --bc-peligro-tinte: #fde4e1;
  --bc-banda: #0b4f4a; /* la banda de la página pública */
  --bc-en-banda: #ffffff;
  --bc-en-banda-suave: #cfe6e1;
  --bc-sombra-hoja: 0 0.0625rem 0.125rem rgba(20, 32, 29, 0.06), 0 0.75rem 2rem -0.75rem rgba(20, 32, 29, 0.18);
  --bc-sombra-menu: 0 0.25rem 0.375rem rgba(20, 32, 29, 0.06), 0 1rem 2.5rem -0.5rem rgba(20, 32, 29, 0.22);
  --bc-velo: rgba(20, 32, 29, 0.45); /* detrás de una ventana emergente */
  --bc-papel-documento: #ffffff; /* la hoja de los PDF y los correos, blanca en los dos modos (el logo, la vista previa) */
  color-scheme: light;
}

/* ---------- Lo que no cambia con el tema */
:root {
  --bc-letra: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --bc-letra-datos: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; /* NIT, cuentas, códigos, versión */

  /* Los tamaños de la letra, de menor a mayor. Ningún texto va en otro tamaño. */
  --bc-tamano-rotulo: 0.75rem; /* «Empresa», los grupos del menú, «Beta», el atajo «/» */
  --bc-tamano-mini: 0.8125rem; /* encabezados de tabla, fichas, la versión */
  --bc-tamano-chico: 0.875rem; /* lo secundario: NIT bajo un nombre, ayudas, el pie */
  --bc-tamano-control: 0.925rem; /* botones chicos, menús, rótulos de campo, letra de las tablas */
  --bc-tamano-texto: 1rem; /* el texto, los botones y los campos */
  --bc-tamano-grande: 1.05rem; /* el título de un estado vacío o de una zona */
  --bc-tamano-seccion: 1.15rem; /* el título de una sección, una hoja o un paso */
  --bc-tamano-marca: 1.2rem; /* «Bot Colibrí» en la cabecera */
  --bc-tamano-pagina: clamp(1.6rem, 1.25rem + 1.4vw, 2.1rem); /* el título de la página */
  --bc-tamano-cifra: 2.1rem; /* una cifra grande, como el porcentaje del medidor */

  /* Los espacios: entre una cosa y otra, siempre uno de estos. */
  --bc-espacio-1: 0.25rem;
  --bc-espacio-2: 0.5rem;
  --bc-espacio-3: 0.75rem;
  --bc-espacio-4: 1rem;
  --bc-espacio-5: 1.25rem;
  --bc-espacio-6: 1.5rem;
  --bc-espacio-7: 2rem;
  --bc-espacio-8: 2.75rem;
  --bc-espacio-9: 3.5rem;

  /* Las esquinas */
  --bc-radio-chico: 0.3rem; /* los tipos de archivo, el atajo «/» */
  --bc-radio-item: 0.4rem; /* monogramas, opciones de un menú */
  --bc-radio: 0.5rem; /* hojas, tablas, campos */
  --bc-radio-boton: 0.6rem; /* botones, menús y ventanas que flotan */
  --bc-radio-pildora: 62.5rem; /* fichas, «Beta», el interruptor */

  /* Los altos y anchos */
  --bc-alto-control: 2.75rem; /* botones y campos */
  --bc-alto-control-chico: 2.25rem; /* el botón chico */
  --bc-ancho-corto: 15rem; /* el campo corto: códigos, números, NIT */
  --bc-ancho: 72rem; /* la página pública, la entrada y la 404 */
  --bc-ancho-app: 76rem; /* el contenido de la aplicación */
  --bc-alto-cabeza: 0rem; /* el alto de la cabecera de la app, que la mide al dibujarse (Encabezado.vue) */
}

/* ---------- Los colores oscuros: con el computador en oscuro (si ella no eligió el claro)… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bc-papel: #0e1715;
    --bc-superficie: #13201d;
    --bc-superficie-2: #1a2a26;
    --bc-linea: #2a3b37;
    --bc-linea-fuerte: #46605a;
    --bc-borde-campo: #56736c;
    --bc-tinta: #e7f0ed;
    --bc-tinta-suave: #a7b9b4;
    --bc-marca: #3cc2b0;
    --bc-marca-fuerte: #8ee3d6;
    --bc-marca-tinte: #12312c;
    --bc-en-marca: #04211d;
    --bc-garganta: #ff7ab4;
    --bc-garganta-tinte: #3a1428;
    --bc-exito: #7fdca3;
    --bc-exito-tinte: #10301f;
    --bc-aviso: #f3c06b;
    --bc-aviso-tinte: #352409;
    --bc-peligro: #ff9a8c;
    --bc-peligro-tinte: #3b1512;
    --bc-banda: #12312c;
    --bc-en-banda: #e7f0ed;
    --bc-en-banda-suave: #a7c9c2;
    --bc-sombra-hoja: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.4), 0 0.75rem 2rem -0.75rem rgba(0, 0, 0, 0.7);
    --bc-sombra-menu: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.4), 0 1rem 2.5rem -0.5rem rgba(0, 0, 0, 0.75);
    --bc-velo: rgba(0, 0, 0, 0.6);
    --bc-papel-documento: #ffffff;
    color-scheme: dark;
  }
}

/* … y con «Modo oscuro» (los mismos valores) */
:root[data-theme="dark"],
[data-theme="dark"] {
  --bc-papel: #0e1715;
  --bc-superficie: #13201d;
  --bc-superficie-2: #1a2a26;
  --bc-linea: #2a3b37;
  --bc-linea-fuerte: #46605a;
  --bc-borde-campo: #56736c;
  --bc-tinta: #e7f0ed;
  --bc-tinta-suave: #a7b9b4;
  --bc-marca: #3cc2b0;
  --bc-marca-fuerte: #8ee3d6;
  --bc-marca-tinte: #12312c;
  --bc-en-marca: #04211d;
  --bc-garganta: #ff7ab4;
  --bc-garganta-tinte: #3a1428;
  --bc-exito: #7fdca3;
  --bc-exito-tinte: #10301f;
  --bc-aviso: #f3c06b;
  --bc-aviso-tinte: #352409;
  --bc-peligro: #ff9a8c;
  --bc-peligro-tinte: #3b1512;
  --bc-banda: #12312c;
  --bc-en-banda: #e7f0ed;
  --bc-en-banda-suave: #a7c9c2;
  --bc-sombra-hoja: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.4), 0 0.75rem 2rem -0.75rem rgba(0, 0, 0, 0.7);
  --bc-sombra-menu: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.4), 0 1rem 2.5rem -0.5rem rgba(0, 0, 0, 0.75);
  --bc-velo: rgba(0, 0, 0, 0.6);
  --bc-papel-documento: #ffffff;
  color-scheme: dark;
}