/**
 * Formularios de Contact Form 7 (contacto e inscripciones a campamentos).
 *
 * No es un bloque del núcleo y theme.json no llega a sus campos: aquí van
 * el aspecto del diseño (etiquetas en negrita, campos de 52 px con borde
 * de 1,5 px y radio «campo», casilla de 22 px) y los avisos. inc/
 * formularios.php la carga solo donde Contact Form 7 carga su hoja, y
 * después de ella.
 *
 * La maquetación (dos columnas que se apilan) es la del formulario de
 * contacto, con las clases fermento-formulario de su plantilla en Contact
 * Form 7. Los avisos de error no dependen solo del color: el campo marca
 * su borde más grueso y el texto dice qué falta. Hay dos selectores de
 * varias clases, justificados: Contact Form 7 pinta su aviso con
 * «.wpcf7 form .wpcf7-response-output» y solo se le gana igualándolo.
 */

/* ===== Maquetación del formulario de contacto ===== */

/* Dos columnas como máximo (240 px como mínimo cada una). El hueco entre
   filas deja sitio a los avisos de error (ver «Avisos»). */
.fermento-formulario {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(240px, calc(50% - 10px))), 1fr));
	gap: 34px 20px;

	& > * {
		margin: 0;
	}
}

.fermento-formulario__campo {
	display: flex;
	flex-direction: column;
	gap: 8px;

	& > label {
		color: var(--wp--preset--color--texto);
		font-size: 15px;
		font-weight: 700;
	}
}

.fermento-formulario__campo--ancho,
.fermento-formulario__privacidad,
.fermento-formulario__enviar {
	grid-column: 1 / -1;
}

/* Información básica y casilla, una debajo de otra. */
.fermento-formulario__privacidad {
	display: flex;
	flex-direction: column;
	gap: 12px;

	& > p {
		margin: 0;
	}
}

/* Información básica de protección de datos (primera capa, RGPD), encima
   de la casilla: responsable, finalidad y derechos, con enlace a la
   política de privacidad. */
.fermento-formulario__aviso {
	color: var(--wp--preset--color--texto-secundario);
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.5;
}

/* Antispam Turnstile y botón, uno debajo de otro. Contact Form 7 y
   Turnstile meten saltos de línea que solo añadían hueco. */
.fermento-formulario__enviar > p {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	margin: 0;

	& br {
		display: none;
	}
}

/* ===== Campos ===== */

.wpcf7-form-control-wrap {
	position: relative;
	display: block;
}

.wpcf7-text,
.wpcf7-select,
.wpcf7-textarea {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 52px;
	padding: 12px 16px;
	border: 1.5px solid var(--wp--preset--color--borde-campo);
	border-radius: var(--wp--preset--border-radius--campo);
	background: var(--wp--preset--color--fondo);
	color: var(--wp--preset--color--texto);
	font: inherit;
	font-size: 16px;

	&:focus-visible {
		border-color: var(--wp--preset--color--texto);
		outline: 3px solid var(--wp--custom--foco);
		outline-offset: 2px;
	}

	&[aria-invalid="true"] {
		border-width: 2.5px;
		border-color: var(--wp--preset--color--acento-texto);
	}
}

.wpcf7-textarea {
	min-block-size: 134px;
	resize: vertical;
}

/* Casilla de la política de privacidad. */
.wpcf7-list-item {
	margin: 0;

	& > label {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		color: var(--wp--preset--color--texto-secundario);
		font-size: 15px;
		line-height: 1.5;
		cursor: pointer;
	}

	& input {
		flex: none;
		inline-size: 22px;
		block-size: 22px;
		margin: 1px 0 0;
		accent-color: var(--wp--preset--color--texto);
		cursor: pointer;
	}

	& input:focus-visible {
		outline: 3px solid var(--wp--custom--foco);
		outline-offset: 2px;
	}
}

.wpcf7-submit {
	border: 0;
	cursor: pointer;

	&:disabled {
		cursor: progress;
	}
}

/* ===== Avisos ===== */

/* El aviso de cada campo va en el hueco de debajo, sin ocupar sitio: al
   corregir un campo, Contact Form 7 lo quita en cuanto el campo pierde el
   foco, y si ocupara sitio la página subiría justo al pulsar el campo
   siguiente (el clic caería en otra parte; comprobado el 29/10/2026). */
.wpcf7-not-valid-tip {
	position: absolute;
	inset-block-start: calc(100% + 4px);
	inset-inline-start: 0;
	color: var(--wp--preset--color--acento-texto);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600;
	line-height: 1.35;
}

/* stylelint-disable-next-line selector-max-class -- Iguala el selector con el que Contact Form 7 pinta su aviso. */
.wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 16px 20px;
	border: 0;
	border-radius: var(--wp--preset--border-radius--pequeno);
	background: var(--wp--preset--color--fondo-calido);
	color: var(--wp--preset--color--texto);
	font-weight: 600;
	line-height: 1.5;
}

/* Mensaje enviado: el aviso del diseño, en azul claro y más grande. */
/* stylelint-disable-next-line selector-max-class -- Iguala el selector del estado «enviado» de Contact Form 7. */
.wpcf7 form.sent .wpcf7-response-output {
	padding: 22px 24px;
	background: var(--wp--preset--color--fondo-tarjeta);
	font-size: var(--wp--preset--font-size--grande);
}