/* Tokens de la aplicación MideMatic: colores, letras, espacios, radios y sombras.
   Sigue la referencia visual de Cowork (docs_cowork/referencia_visual/estilos.css, 09-10-2026): fondo claro, superficies
   blancas, bordes finos y color solo para los estados y la acción principal. Los azules de la marca son los de la web
   (una prueba lo comprueba). Cada color de texto lleva su contraste: todos pasan WCAG 2.2 AA sobre el fondo en que se usan.
   MideMatic puede copiar este archivo tal cual. Sin modo oscuro, como la marca. */

/* Inter para la interfaz (texto, tablas y formularios) y Jost solo para el logotipo y los títulos de página.
   Las dos, alojadas aquí, con su licencia OFL (fuentes/OFL-inter.txt y fuentes/OFL-jost.txt). */
@font-face { font-family: "Inter"; src: url("../fuentes/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fuentes/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fuentes/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fuentes/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fuentes/jost-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fuentes/jost-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* Superficies y bordes */
  --fondo: #f5f6f8; /* fondo de la aplicación */
  --superficie: #ffffff; /* tarjetas, tablas, menú y ventanas */
  --superficie-2: #fafbfc; /* cabeceras de tabla y pies de tarjeta */
  --superficie-3: #f8f9fb; /* el panel del dibujo y las líneas abiertas */
  --gris-suave: #f0f1f3; /* filtros segmentados y pastilla gris */
  --borde: #e4e7ec; /* bordes de tarjetas y separadores (decorativo) */
  --borde-fila: #eef0f3; /* líneas entre filas de una tabla (decorativo) */
  --borde-fuerte: #d0d5dd; /* borde de los botones secundarios (el botón se reconoce por su texto) */
  --borde-campo: #878e97; /* campos, casillas y opciones: 3,3:1 sobre blanco (WCAG 1.4.11) */

  /* Texto */
  --tinta: #1e2024; /* títulos y datos: 16,3:1 sobre blanco */
  --texto: #3b3e44; /* texto normal: 9,9:1 sobre el fondo */
  --texto-2: #656a73; /* secundario, en gris: 5,4:1 sobre blanco, 5,0:1 sobre el fondo y 4,8:1 sobre --gris-suave */
  --texto-3: #9aa0a8; /* solo iconos de adorno, nunca texto (2,6:1) */

  /* Marca: los azules de la web (src/estilos/02-base.css) */
  --azul: #1f6699; /* botón principal, enlaces y foco: 6,1:1 sobre blanco */
  --azul-hondo: #18557f; /* al pasar el ratón: 7,9:1 */
  --azul-suave: #eaf3fa; /* fondos suaves; el azul sobre él, 5,5:1 */
  --azul-tinta: #164e75; /* texto de la banda de avisos: 7,9:1 sobre --azul-suave */
  --azul-marca: #4ba5dc; /* el del logotipo: solo adornos y barras, nunca texto (2,7:1) */
  --logo: #36373b; /* el gris del logotipo y de su nombre */

  /* Estados: color + icono + texto, en pastillas (texto sobre su fondo suave) */
  --ambar: #8a5300; --ambar-suave: #fff4de; --ambar-linea: #f2c36b; /* Preguntas: 5,8:1 */
  --verde: #17784a; --verde-suave: #e8f5ee; /* Descargada y ● Plano: 4,9:1 */
  --rojo: #b42318; --rojo-suave: #fdedeb; /* Incidencia, errores y borrado: 5,8:1 (6,6:1 sobre blanco) */
  --violeta: #5b4bc4; --violeta-suave: #f0eefc; --violeta-tinta: #3e3393; /* IA: 5,7:1; su texto largo, 8,7:1 */
  --gris-estado: #555a62; /* Preparando: 6,1:1 sobre --gris-suave */

  /* Letras */
  --letra: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --letra-titulos: "Jost", "Inter", system-ui, sans-serif;
  --letra-codigo: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-h1: 1.75rem; /* 28 px, Jost */
  --t-h2: 0.9375rem; /* 15 px */
  --t-pregunta: 1.3125rem; /* 21 px, la pregunta del cuadro */
  --t-texto: 0.875rem; /* 14 px */
  --t-pequeno: 0.8125rem; /* 13 px */
  --t-mini: 0.75rem; /* 12 px: cabeceras de tabla y contadores */
  --interlineado: 1.45;

  /* Espacios: rejilla de 8 px (con medios pasos de 4 px) */
  --e-1: 0.25rem; /* 4 */
  --e-2: 0.5rem; /* 8 */
  --e-3: 0.75rem; /* 12 */
  --e-4: 1rem; /* 16 */
  --e-5: 1.5rem; /* 24 */
  --e-6: 2rem; /* 32 */
  --e-7: 3rem; /* 48 */

  /* Medidas */
  --ancho-menu: 15.5rem; /* 248 px */
  --ancho-contenido: 77.5rem; /* 1240 px */
  --ancho-enfoque: 67.5rem; /* 1080 px, el cuadro de las preguntas */
  --radio: 10px; /* tarjetas */
  --radio-p: 8px; /* botones y campos */
  --alto-boton: 2.375rem; /* 38 px */
  --alto-boton-p: 2rem; /* 32 px */
  --icono: 18px;

  /* Sombras, muy suaves */
  --sombra: 0 1px 2px rgb(16 24 40 / 0.05);
  --sombra-menu: 0 4px 8px -2px rgb(16 24 40 / 0.1), 0 2px 4px -2px rgb(16 24 40 / 0.06);
  --sombra-ventana: 0 20px 24px -4px rgb(16 24 40 / 0.1), 0 8px 8px -4px rgb(16 24 40 / 0.04);
}