/**
 * Design tokens del tema.
 *
 * Este es el único archivo CSS del sitio público que contiene valores
 * literales de color, tipografía, espaciado y forma. Todos los demás usan
 * variables. Reteñir un establecimiento es cambiar aquí, no buscar colores
 * repartidos por diez hojas de estilo.
 *
 * Los tres colores marcados como «corregido» sustituyen a los del diseño
 * original, que no alcanzaban el contraste mínimo de WCAG 2.1 nivel AA. La
 * justificación está en docs/DECISIONES.md.
 *
 * El color de acento y el secundario los sobrescribe PHP con lo configurado en
 * el panel de identidad, mediante wp_add_inline_style().
 */

:root {
	/* ---------- Color: identidad institucional ---------- */
	--color-navy: #1a3055;
	--color-navy-claro: #2a4573;
	--color-celeste: #d0f8f8;
	--color-celeste-oscuro: #a9ebeb;

	/* Corregido: el diseño usaba #1B75BC (4,3:1) para los enlaces del menú. */
	--color-azul-enlace: #17639e;
	/* Corregido: el diseño usaba #1986EF (3,3:1) en bloques con texto blanco. */
	--color-azul-bloque: #1470c9;
	/* Corregido: el diseño usaba #F42C53 (3,8:1) en acentos y controles. */
	--color-rojo: #d81e44;
	--color-rojo-oscuro: #b21738;

	--color-rosado: #ffe2de;
	--color-rosado-fuerte: #ffcccc;
	--color-rosado-suave: #fce0e0;

	/* Corregido: el diseño usaba #24B9CC en la banda «Postula durante todo el
	   año», donde el texto blanco encima mide 2,36:1. Este tono conserva el
	   turquesa y alcanza 5,17:1. El #24B9CC original se conserva como color de
	   círculo de atributo, donde el rótulo va debajo y no encima. */
	--color-turquesa: #177885;

	/* ---------- Color: superficies y texto ---------- */
	--color-fondo: #ffffff;
	--color-fondo-alterno: #ecf0f5;
	--color-fondo-suave: #f6f8fb;
	/* Borde decorativo de separación. No transmite información, por lo que no
	   le aplica el contraste mínimo de componentes de interfaz. */
	--color-borde: #d4dae4;
	/* Borde de campos de formulario y de controles: es lo que delimita el
	   área editable, así que debe alcanzar 3:1 sobre blanco (criterio
	   1.4.11). Este tono mide 3,73:1. */
	--color-borde-fuerte: #7a8598;

	--color-texto: #1a3055;
	--color-texto-suave: #45526b;
	--color-texto-inverso: #ffffff;

	/* ---------- Color: acentos configurables por establecimiento ---------- */
	--color-acento: #d81e44;
	--color-acento-oscuro: #b81a3a;
	--color-acento-texto: #ffffff;
	--color-acento-secundario: #1470c9;
	--color-acento-secundario-oscuro: #115fab;
	--color-acento-secundario-texto: #ffffff;

	/* ---------- Color: estados ---------- */
	--color-foco: #b21738;
	--color-error: #a4123a;
	--color-error-fondo: #fdecef;
	--color-exito: #1a6b41;
	--color-exito-fondo: #e8f5ee;
	--color-aviso-fondo: #fff6e0;
	--color-impresion: #000000;

	/* Capa oscura sobre la fotografía del hero y de las cabeceras interiores.
	   Sin ella, el contraste del título dependería de qué fotografía suba
	   cada establecimiento y dejaría de ser auditable.

	   La opacidad mínima es 0,62 en TODA la superficie, no solo en la parte
	   inferior. En el peor caso —una fotografía completamente blanca— el
	   fondo efectivo resultante es #686F7A, sobre el que el texto blanco
	   alcanza 5,07:1. Un degradado que empiece más claro deja el texto por
	   debajo del mínimo cuando la fotografía es clara: con alfa 0,35 el
	   contraste cae a 2,57:1. */
	--capa-hero: rgba(11, 22, 41, 0.62);
	--capa-hero-degradado: linear-gradient(180deg, rgba(11, 22, 41, 0.62) 0%, rgba(11, 22, 41, 0.8) 100%);
	--capa-interior: rgba(11, 22, 41, 0.62);
	/* Sombra del texto que va directamente sobre una fotografía, sin panel
	   detrás. No sustituye al contraste: solo despega las letras. */
	--sombra-texto-sobre-foto: 0 1px 3px rgba(11, 22, 41, 0.85), 0 0 12px rgba(11, 22, 41, 0.55);
	/* La misma idea para texto oscuro sobre fotografía: la sombra es clara. */
	--sombra-texto-sobre-foto-clara: 0 1px 3px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.75);
	/* Velo claro del mensaje de la dirección: opaco donde va el texto y
	   desvanecido antes del retrato. */
	--capa-mensaje-degradado: linear-gradient(90deg, rgba(236, 240, 245, 0.93) 0%, rgba(236, 240, 245, 0.93) 46%, rgba(236, 240, 245, 0) 74%);

	/* ---------- Tipografía ---------- */
	--fuente-institucional: "gobCL", "Mulish", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--fuente-base: "Mulish", "gobCL", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

	--peso-normal: 400;
	--peso-medio: 600;
	--peso-fuerte: 700;
	--peso-negro: 800;

	/* Escala fluida: el mínimo corresponde a 360 px y el máximo a 1600 px. */
	--fs-100: 0.8125rem;
	--fs-200: 0.9375rem;
	--fs-300: 1rem;
	--fs-400: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--fs-500: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
	--fs-600: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);
	--fs-700: clamp(1.625rem, 1.35rem + 1.2vw, 2.5rem);
	--fs-800: clamp(2.125rem, 1.5rem + 2.8vw, 4rem);

	--interlinea-apretada: 1.15;
	--interlinea-titulo: 1.25;
	--interlinea-base: 1.65;
	--interlinea-holgada: 1.8;

	--espaciado-letras-titulo: -0.01em;
	--espaciado-letras-rotulo: 0.02em;

	/* Aumento de espaciado del panel de accesibilidad. */
	--espaciado-palabras: 0;
	--espaciado-caracteres: 0;

	/* Escala de texto del panel de accesibilidad. La escala se aplica sobre el
	   tamaño base del navegador, de modo que respeta también la preferencia
	   que la persona ya tenga configurada en su sistema. */
	--escala-texto: 100%;
	--escala-grande: 112.5%;
	--escala-mayor: 125%;
	--escala-maxima: 140%;

	/* Filtros del panel de accesibilidad. Se combinan en una sola declaración
	   «filter», porque dos reglas separadas se sobrescriben en vez de sumarse. */
	--acc-grises: 0;
	--acc-brillo: 1;
	--acc-invertir: 0;

	/* ---------- Espaciado ---------- */
	--e-3xs: 0.25rem;
	--e-2xs: 0.5rem;
	--e-xs: 0.75rem;
	--e-sm: 1rem;
	--e-md: 1.5rem;
	--e-lg: 2rem;
	--e-xl: 3rem;
	--e-2xl: 4rem;
	--e-3xl: 5.5rem;

	--seccion-espacio: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);

	/* ---------- Estructura ---------- */
	--ancho-contenido: 64rem;
	--ancho-lectura: 44rem;
	--ancho-amplio: 80rem;
	--margen-lateral: clamp(1rem, 0.5rem + 2.5vw, 3rem);

	/* ---------- Forma ---------- */
	--radio-xs: 0.25rem;
	--radio-sm: 0.5rem;
	--radio-md: 0.75rem;
	--radio-lg: 1.25rem;
	--radio-pildora: 999rem;

	--borde-fino: 1px;
	--borde-grueso: 2px;

	--sombra-suave: 0 1px 3px rgba(26, 48, 85, 0.12);
	--sombra-media: 0 4px 16px rgba(26, 48, 85, 0.14);
	--sombra-alta: 0 10px 30px rgba(26, 48, 85, 0.18);

	/* ---------- Controles ---------- */
	--objetivo-minimo: 2.75rem; /* 44 px: criterio 2.5.5 de WCAG 2.1. */
	--grosor-foco: 3px;
	--desplazamiento-foco: 2px;

	/* ---------- Movimiento ---------- */
	--transicion-rapida: 120ms ease-out;
	--transicion-media: 220ms ease-out;

	/* ---------- Capas ---------- */
	--capa-contenido: 1;
	--capa-cabecera: 100;
	--capa-menu: 200;
	--capa-flotante: 300;
	--capa-dialogo: 400;
}

/**
 * Preferencia de alto contraste del panel de accesibilidad.
 *
 * No sustituye al contraste del diseño base, que ya cumple AA: sube el
 * contraste para quien lo necesita por sobre ese mínimo.
 */
.acc-contraste {
	--color-texto: #000000;
	--color-texto-suave: #1a1a1a;
	--color-fondo: #ffffff;
	--color-fondo-alterno: #ffffff;
	--color-fondo-suave: #ffffff;
	--color-borde: #000000;
	--color-borde-fuerte: #000000;
	--color-navy: #000000;
	--color-navy-claro: #000000;
	--color-celeste: #ffffff;
	--color-celeste-oscuro: #ffffff;
	--color-azul-enlace: #0b3f70;
	--color-azul-bloque: #0b3f70;
	--color-acento: #98002e;
	--color-acento-oscuro: #6d0021;
	--color-acento-secundario: #0b3f70;
	--color-acento-secundario-oscuro: #06294a;
	--color-rosado: #ffffff;
	--color-rosado-fuerte: #ffffff;
	--color-rosado-suave: #ffffff;
	--capa-hero: rgba(0, 0, 0, 0.82);
	--capa-hero-degradado: linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.9) 100%);
	--capa-interior: rgba(0, 0, 0, 0.82);
	--sombra-texto-sobre-foto: 0 1px 2px #000000, 0 0 8px #000000, 0 0 16px #000000;
	--sombra-texto-sobre-foto-clara: 0 1px 2px #ffffff, 0 0 8px #ffffff, 0 0 16px #ffffff;
	/* En alto contraste el velo tapa la fotografía por completo: la prioridad
	   es leer el texto, no ver la imagen de fondo. */
	--capa-mensaje-degradado: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
	--sombra-suave: none;
	--sombra-media: none;
	--sombra-alta: none;
}

/**
 * Aumento de espaciado del panel de accesibilidad.
 *
 * Los valores corresponden al criterio 1.4.12 «Espaciado del texto».
 */
.acc-espaciado-1 {
	--espaciado-palabras: 0.08em;
	--espaciado-caracteres: 0.06em;
}

.acc-espaciado-2 {
	--espaciado-palabras: 0.16em;
	--espaciado-caracteres: 0.12em;
}

.acc-espaciado-3 {
	--espaciado-palabras: 0.24em;
	--espaciado-caracteres: 0.18em;
}

.acc-altura-1 {
	--interlinea-base: 1.8;
	--interlinea-holgada: 1.9;
	--interlinea-titulo: 1.35;
}

.acc-altura-2 {
	--interlinea-base: 2;
	--interlinea-holgada: 2.1;
	--interlinea-titulo: 1.45;
}

.acc-altura-3 {
	--interlinea-base: 2.3;
	--interlinea-holgada: 2.4;
	--interlinea-titulo: 1.6;
}