/*
 * Formulario de Hablemos (componentes.md, U15): el HTML estándar de
 * Contact Form 7, con las variables del sistema. Sustituye a la hoja del
 * plugin, que no se carga (recursos.php); de ella se queda solo lo que
 * hace funcionar el formulario: los textos para lectores de pantalla, los
 * campos ocultos y el mensaje según el estado. Solo se carga en la
 * plantilla de Hablemos, como el JavaScript del plugin.
 *
 *   etiquetas            interfaz, 500, en --c-texto
 *   campos               texto de lectura sobre --papel, borde de 3:1
 *   casilla              la de aceptación, con su texto al lado
 *   botón                R7 con fondo azul (--relleno), 56 px de alto
 *   Turnstile            solo alineación y separación
 *   .loha-form-obligatorios, .loha-form-nota   microtexto
 *
 * Estados: error por campo (.wpcf7-not-valid y .wpcf7-not-valid-tip),
 * mensaje general (.wpcf7-response-output, por la clase de estado del
 * formulario) y enviando (.submitting): el botón, como deshabilitado.
 * Sin animaciones: el indicador de carga del plugin no se pinta.
 */

.loha-formulario {
	/* Borde de los campos y la casilla: el azul mezclado con el papel,
	   para que el campo se distinga del fondo con 3:1 como mínimo, el
	   umbral de los componentes de interfaz (sistema-color.md). */
	--formulario-borde: color-mix(in srgb, var(--azul) 58%, var(--papel));
	/* El error, sin rojo, que no está en la paleta: --beige-700, el acento
	   del texto pequeño, en el borde del campo y en el mensaje
	   (decisiones-abiertas.md, «Decidido»). */
	--formulario-error: var(--beige-700);
	color: var(--c-texto);
}

/* ── Lo imprescindible de la hoja del plugin ──────────────── */

.loha-formulario .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.loha-formulario .hidden-fields-container,
.loha-formulario .wpcf7-spinner {
	display: none;
}

/* ── Composición ──────────────────────────────────────────── */
/* Cada pieza del formulario (los párrafos que pone el plugin, Turnstile
   y el mensaje), una debajo de otra con la misma separación. */
.loha-formulario .wpcf7-form {
	display: grid;
	row-gap: clamp(1.25rem, 1.05rem + 0.6vw, 1.75rem);
}

/* Etiqueta encima de su campo. El salto que el plugin pone tras el texto
   de la etiqueta sobra: la separación la da el margen del campo. Vale
   con la etiqueta envolviendo al campo (la plantilla del plugin) y con
   la etiqueta suelta delante. */
.loha-formulario label {
	display: block;
	color: var(--c-texto);
	font-size: var(--fs-interfaz);
	font-weight: 500;
	line-height: var(--lh-interfaz);
}

.loha-formulario label > br,
.loha-formulario label + br {
	display: none;
}

.loha-formulario .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.5rem;
}

/* Sin etiqueta delante (la casilla de aceptación), sin margen. */
.loha-formulario p > .wpcf7-form-control-wrap:first-child {
	margin-top: 0;
}

/* ── Campos ───────────────────────────────────────────────── */
/* Texto de lectura (16 px como mínimo: iOS no amplía al enfocar), sobre
   --papel, con 48 px de alto como mínimo. */
.loha-formulario :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea) {
	display: block;
	width: 100%;
	min-height: 3rem;
	margin: 0;
	padding: 0.65em 0.9em;
	border: 1px solid var(--formulario-borde);
	border-radius: 2px;
	background-color: var(--papel);
	color: var(--c-texto);
	font-family: var(--sans);
	font-size: var(--fs-lectura);
	font-weight: 400;
	line-height: 1.4;
	transition:
		border-color var(--t-hover) ease,
		box-shadow var(--t-hover) ease;
}

.loha-formulario textarea {
	height: 9.5rem;
	min-height: 6rem;
	resize: vertical;
}

.loha-formulario ::placeholder {
	color: var(--c-texto-2);
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	.loha-formulario :is(input, textarea):not([type="submit"], :disabled):hover {
		border-color: var(--c-texto);
	}
}

/* Foco: el borde en azul y el contorno del sitio, más pegado al campo. */
.loha-formulario :is(input, textarea):not([type="submit"]):focus-visible {
	border-color: var(--c-texto);
	outline: 2px solid var(--c-texto);
	outline-offset: 2px;
}

/* ── Error por campo ──────────────────────────────────────── */
/* El campo, con el borde en --formulario-error y el doble de grueso (sin
   mover nada: la segunda línea es una sombra interior); el aviso, debajo,
   en microtexto. El aviso lo lee el lector de pantalla desde el campo
   (aria-describedby, lo pone el plugin). */
.loha-formulario .wpcf7-not-valid:not(.wpcf7-acceptance) {
	border-color: var(--formulario-error);
	box-shadow: inset 0 0 0 1px var(--formulario-error);
}

.loha-formulario .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4rem;
	color: var(--formulario-error);
	font-size: var(--fs-micro);
	font-weight: 500;
	line-height: var(--lh-interfaz);
}

/* ── Casilla de aceptación ────────────────────────────────── */
/* La casilla y su texto en una fila; la etiqueta entera se pulsa, con
   44 px de alto como mínimo, que se comen la separación de arriba y de
   abajo (margen negativo) para que la fila quede al ritmo del resto. La
   marca, la de Lucide (check) en --papel sobre azul. */
.loha-formulario .wpcf7-list-item {
	display: block;
	margin: 0;
}

.loha-formulario .wpcf7-acceptance label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: var(--control-minimo);
	margin-block: calc((1.375rem - var(--control-minimo)) / 2);
	font-weight: 400;
	cursor: pointer;
}

.loha-formulario input[type="checkbox"] {
	appearance: none;
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	margin: 0;
	border: 1px solid var(--formulario-borde);
	border-radius: 2px;
	background: var(--papel) center / 0.9rem no-repeat;
	cursor: pointer;
	transition:
		background-color var(--t-hover) ease,
		border-color var(--t-hover) ease;
}

/* La marca va como imagen de fondo, porque una casilla no tiene hijos: no
   hereda el color, que va escrito (--papel). Excepción decidida a los SVG
   en línea (CLAUDE.md, decisiones-abiertas.md). */
.loha-formulario input[type="checkbox"]:checked {
	border-color: var(--azul);
	background-color: var(--azul);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF8F2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

@media (hover: hover) and (pointer: fine) {
	.loha-formulario input[type="checkbox"]:hover {
		border-color: var(--c-texto);
	}
}

.loha-formulario input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--c-texto);
	outline-offset: 2px;
}

/* Con la aceptación como validación (opción del plugin), el aviso de
   error va bajo la fila y la casilla se marca como los campos. */
.loha-formulario .wpcf7-acceptance.wpcf7-not-valid input[type="checkbox"] {
	border-color: var(--formulario-error);
	box-shadow: inset 0 0 0 1px var(--formulario-error);
}

/* ── Textos del formulario ────────────────────────────────── */
/* Dos clases para escribir en la plantilla del formulario: la nota de
   campos obligatorios y una nota libre (la información básica de
   protección de datos, por ejemplo). Microtexto, en --c-texto-2. */
.loha-formulario :is(.loha-form-obligatorios, .loha-form-nota) {
	color: var(--c-texto-2);
	font-size: var(--fs-micro);
	line-height: 1.5;
}

/* M: las notas, que son frases (la información básica de protección de
   datos), al tamaño de lectura; «* Campos obligatorios», un rótulo,
   sigue en microtexto (ronda 5). */
@media (max-width: 599px) {
	.loha-formulario .loha-form-nota {
		font-size: var(--fs-lectura);
		line-height: var(--lh-lectura);
		text-wrap: pretty;
	}
}

/* Enlaces dentro del formulario (la política de privacidad): subrayados,
   como en todo el sitio; más gruesos al pasar o enfocar. */
.loha-formulario a {
	color: var(--c-texto);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
	.loha-formulario a:hover {
		text-decoration-thickness: 2px;
	}
}

.loha-formulario a:focus-visible {
	text-decoration-thickness: 2px;
}

/* ── Turnstile ────────────────────────────────────────────── */
/* Solo alineación y separación: a la izquierda, como el resto, y con su
   alto reservado (65 px, el del tamaño normal) para que el formulario no
   salte al cargar el widget. Si solo aparece cuando hace falta
   (interaction-only), no reserva nada. */
.loha-formulario .wpcf7-turnstile {
	justify-self: start;
	max-width: 100%;
}

.loha-formulario .wpcf7-turnstile:not([data-appearance="interaction-only"]) {
	min-height: 65px;
}

/* ── Botón ────────────────────────────────────────────────── */
/* R7 con fondo azul y texto --beige-100 (accion.css, --relleno), a 56 px
   de alto, el del CTA final (espaciado.md). La flecha va como imagen de
   fondo, porque un <input> no tiene hijos: no hereda el color, que va
   escrito (--beige-100; --azul-700 deshabilitado). Al pasar o enfocar,
   avanza 6 px, como en R7. En M, a ancho completo, con el texto a la
   izquierda y la flecha a la derecha, como el CTA de R8. Excepción
   decidida a los SVG en línea (CLAUDE.md, decisiones-abiertas.md). */
.loha-formulario .wpcf7-submit {
	--flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ECE1D3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	display: inline-block;
	min-height: var(--cta-alto);
	margin: 0;
	padding: 0 calc(1.6em + 1.15em + 0.8em) 0 2em;
	border: 1px solid var(--azul);
	border-radius: 999px;
	background: var(--azul) var(--flecha) no-repeat right 1.6em center / 1.15em;
	color: var(--beige-100);
	font-family: var(--sans);
	font-size: var(--fs-interfaz);
	font-weight: 600;
	line-height: var(--lh-interfaz);
	letter-spacing: var(--tracking-mayusculas);
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-position var(--t-hover) var(--curva-suave),
		background-color var(--t-hover) ease,
		border-color var(--t-hover) ease,
		color var(--t-hover) ease;
}

@media (hover: hover) and (pointer: fine) {
	.loha-formulario .wpcf7-form:not(.submitting) .wpcf7-submit:not(:disabled):hover {
		background-position: right calc(1.6em - 6px) center;
	}
}

/* El contorno del foco, en azul: el del sitio toma el color del texto,
   que aquí es --beige-100 y no se vería sobre el papel. */
.loha-formulario .wpcf7-submit:focus-visible {
	background-position: right calc(1.6em - 6px) center;
	outline-color: var(--azul);
}

/* Deshabilitado (hasta marcar la casilla, si el plugin lo pide así) y
   enviando: apagado, en --beige-100, el tono de las cajas, con el texto
   en --azul-700. Se sigue leyendo (6,97), pero no parece pulsable: ni el
   azul del botón activo ni el contorno de las acciones del sitio. */
.loha-formulario .wpcf7-submit:disabled,
.loha-formulario .submitting .wpcf7-submit {
	--flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C4A73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	border-color: var(--beige-100);
	background-color: var(--beige-100);
	color: var(--azul-700);
	cursor: not-allowed;
}

.loha-formulario .submitting .wpcf7-submit {
	cursor: progress;
}

@media (max-width: 599px) {
	.loha-formulario .wpcf7-submit {
		display: block;
		width: 100%;
		padding-left: 1.5em;
		text-align: left;
	}
}

/* ── Mensaje general ──────────────────────────────────────── */
/* Tras enviar: una caja --beige-100 con una línea a la izquierda, azul si
   se ha enviado y --formulario-error si algo ha fallado. Oculta mientras
   no hay nada que decir. El lector de pantalla recibe el mismo texto por
   la región de estado del plugin (.screen-reader-response). */
.loha-formulario .wpcf7-response-output {
	margin: 0;
	padding: 0.9rem 1.15rem;
	border-left: 3px solid var(--c-texto);
	background-color: var(--beige-100);
	color: var(--c-texto);
	font-size: var(--fs-lectura);
	line-height: var(--lh-lectura);
}

.loha-formulario .wpcf7-response-output:empty,
.loha-formulario :is(.init, .resetting, .submitting) .wpcf7-response-output {
	display: none;
}

.loha-formulario :is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output {
	border-left-color: var(--formulario-error);
}

@media (prefers-reduced-motion: reduce) {
	.loha-formulario :is(input, textarea) {
		transition: none;
	}
}