/**
 * Formulario de inscripción · EAME
 *
 * Sin dependencias y con variables propias para que herede del tema sin
 * pelearse con él. Diseño móvil primero, como exige el PDF.
 */

/**
 * Color de marca.
 *
 * Estos tres valores los reescribe el plugin con el color elegido en los
 * ajustes, mediante una regla :root que se añade después de esta hoja. Van
 * aquí, en :root, y NO dentro de .eame-formulario: una declaración en un
 * selector más específico ganaría siempre a la que inyecta el plugin, y el
 * color de los ajustes no llegaría nunca. Además así los alcanzan el resumen
 * del pago y la pantalla de confirmación, que viven fuera del formulario.
 */
:root {
	--eame-marca: #1f6feb;
	--eame-marca-rgb: 31, 111, 235;
	--eame-marca-texto: #ffffff;

	/* Todos los bordes del diseño salen de aquí. Se usa el color de marca
	   completo en los contornos estructurales y una versión atenuada en las
	   separaciones internas, para que el conjunto siga siendo legible sin
	   perder la identidad. */
	--eame-borde: var(--eame-marca);
	--eame-borde-suave: rgba(var(--eame-marca-rgb), 0.35);
}

.eame-formulario {
	--eame-borde-activo: var(--eame-marca);
	--eame-fondo-suave: rgba(0, 0, 0, 0.025);
	--eame-error: #b32d2e;
	--eame-exito: #1d7a3e;
	--eame-radio: 8px;

	margin: 2em 0;
	max-width: 46rem;
}

/* --------------------------------------------------------------- Bloques */

.eame-bloque {
	border: 1px solid var(--eame-marca);
	border-radius: var(--eame-radio);
	margin: 0 0 1.5em;
	padding: 1.25em 1.25em 1em;
}

.eame-bloque__titulo {
	align-items: center;
	display: flex;
	font-size: 1.05em;
	font-weight: 700;
	gap: 0.6em;
	padding: 0 0.4em;
	width: auto;
}

.eame-bloque__numero {
	align-items: center;
	background: var(--eame-marca);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	flex: 0 0 1.7em;
	font-size: 0.85em;
	height: 1.7em;
	justify-content: center;
	line-height: 1;
}

.eame-bloque__ayuda {
	font-size: 0.9em;
	margin: 0 0 1em;
	opacity: 0.75;
}

/* ---------------------------------------------------------------- Campos */

.eame-rejilla {
	display: grid;
	gap: 1em;
	grid-template-columns: 1fr;
}

@media (min-width: 40em) {
	.eame-rejilla {
		grid-template-columns: 1fr 1fr;
	}

	.eame-campo--ancho {
		grid-column: 1 / -1;
	}
}

.eame-campo {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	margin: 0;
}

.eame-campo label {
	font-size: 0.92em;
	font-weight: 600;
}

.eame-campo input,
.eame-campo select {
	border: 1px solid var(--eame-borde);
	border-radius: var(--eame-radio);
	font: inherit;
	padding: 0.65em 0.75em;
	width: 100%;
}

.eame-campo input:focus,
.eame-campo select:focus {
	border-color: var(--eame-borde-activo);
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(var(--eame-marca-rgb), 0.3);
}

.eame-campo input[aria-invalid="true"] {
	border-color: var(--eame-error);
}

.eame-ayuda {
	font-size: 0.82em;
	opacity: 0.7;
}

.eame-campo .eame-ayuda--error {
	color: var(--eame-error);
	font-weight: 600;
	opacity: 1;
}

abbr.required {
	border: 0;
	color: var(--eame-error);
	text-decoration: none;
}

/* ----------------------------------------------------------- Disciplinas */

.eame-disciplina + .eame-disciplina {
	border-top: 1px solid var(--eame-borde-suave);
	margin-top: 1.1em;
	padding-top: 1.1em;
}

/* Importe según lo marcado. Cierra el bloque de modalidades porque es su
   consecuencia directa: se marca una casilla y el precio cambia a la vista. */

.eame-tarifa {
	align-items: baseline;
	background: rgba(var(--eame-marca-rgb), 0.08);
	border-radius: var(--eame-radio);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	justify-content: space-between;
	margin: 1.2em 0 0;
	padding: 0.7em 0.9em;
}

.eame-tarifa__etiqueta {
	font-size: 0.9em;
}

.eame-tarifa__importe {
	font-size: 1.25em;
	font-weight: 700;
}

/* El interruptor de cada modalidad es la decisión principal del bloque, así que
   se presenta como una tarjeta pulsable y no como una casilla suelta. */

.eame-interruptor {
	align-items: center;
	background: var(--eame-fondo-suave);
	border: 1px solid var(--eame-borde);
	border-radius: var(--eame-radio);
	cursor: pointer;
	display: flex;
	font-weight: 600;
	gap: 0.7em;
	padding: 0.85em 1em;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.eame-interruptor:hover {
	border-color: var(--eame-marca);
}

.eame-interruptor:has(input:checked) {
	background: rgba(var(--eame-marca-rgb), 0.09);
	border-color: var(--eame-marca);
	box-shadow: inset 3px 0 0 var(--eame-marca);
}

.eame-interruptor:focus-within {
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px rgba(var(--eame-marca-rgb), 0.3);
}

.eame-interruptor input {
	flex: 0 0 auto;
	height: 1.25em;
	margin: 0;
	width: 1.25em;
}

.eame-interruptor__texto {
	flex: 1;
	min-width: 0;
}

/* Pista de qué ocurre al marcar: la flecha gira al desplegarse. */

.eame-interruptor__pista {
	align-items: center;
	color: var(--eame-marca);
	display: flex;
	flex: 0 0 auto;
	font-size: 0.8em;
	font-weight: 600;
	gap: 0.35em;
	opacity: 0.85;
}

.eame-interruptor__pista-texto[hidden] {
	display: none;
}

.eame-interruptor__flecha {
	transition: transform 0.22s ease;
}

.eame-interruptor:has(input:checked) .eame-interruptor__flecha {
	transform: rotate(180deg);
}

@media (max-width: 30em) {
	.eame-interruptor__pista-texto {
		display: none;
	}
}

.eame-categorias {
	border-left: 2px solid var(--eame-borde-suave);
	margin: 0.9em 0 0 1em;
	padding-left: 1.1em;
}

.eame-categorias[hidden] {
	display: none;
}

.eame-categorias__titulo {
	font-size: 0.9em;
	font-weight: 600;
	margin: 0 0 0.6em;
}

.eame-categorias__lista {
	display: grid;
	gap: 0.5em;
	grid-template-columns: 1fr;
}

@media (min-width: 34em) {
	.eame-categorias__lista {
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	}
}

.eame-categoria {
	align-items: center;
	background: var(--eame-fondo-suave);
	border: 1px solid var(--eame-borde);
	border-radius: var(--eame-radio);
	cursor: pointer;
	/* La rejilla evita que el nombre empuje al contador fuera de la caja:
	   la columna central absorbe el espacio y la derecha se queda con el suyo. */
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0.55em;
	padding: 0.7em 0.85em;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.eame-categoria input[type="radio"] {
	margin: 0;
}

.eame-categoria:hover:not(.eame-categoria--agotada) {
	border-color: var(--eame-borde-activo);
}

.eame-categoria:has(input:checked) {
	background: rgba(var(--eame-marca-rgb), 0.09);
	border-color: var(--eame-marca);
}

.eame-categoria--agotada {
	cursor: not-allowed;
	opacity: 0.5;
}

.eame-categoria__nombre {
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}

.eame-categoria__plazas {
	font-size: 0.8em;
	line-height: 1.3;
	opacity: 0.75;
	text-align: right;
}

/* En pantallas estrechas el contador baja a su propia línea en lugar de
   comprimir el nombre hasta partirlo. */
@media (max-width: 22em) {
	.eame-categoria {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.eame-categoria__plazas {
		grid-column: 2;
		text-align: left;
	}
}

/* --------------------------------------------------------- Declaraciones */

.eame-declaracion {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	font-size: 0.92em;
	gap: 0.7em;
	line-height: 1.5;
	padding: 0.55em 0;
}

.eame-declaracion + .eame-declaracion {
	border-top: 1px dashed var(--eame-borde-suave);
}

.eame-declaracion input {
	flex: 0 0 auto;
	height: 1.15em;
	margin-top: 0.2em;
	width: 1.15em;
}

/* ------------------------------------------------------------------ Envío */

.eame-envio {
	margin-top: 1.5em;
}

.eame-envio__boton {
	font-size: 1.05em;
	padding: 0.85em 2em;
	width: 100%;
}

@media (min-width: 34em) {
	.eame-envio__boton {
		width: auto;
	}
}

.eame-envio__nota {
	font-size: 0.85em;
	margin: 0.8em 0 0;
	opacity: 0.7;
}

/* ----------------------------------------------------------------- Avisos */

.eame-aviso {
	border: 1px solid var(--eame-borde-suave);
	border-left: 4px solid var(--eame-marca);
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.04);
	margin: 1.5em 0;
	padding: 1em 1.25em;
}

.eame-aviso--cerrado {
	border-left-color: #b32d2e;
}

.eame-aviso p {
	margin: 0;
}

.eame-aviso--error {
	border-left-color: #b32d2e;
}

/* Modo oscuro: solo si el tema lo declara. */
@media (prefers-color-scheme: dark) {
	.eame-formulario {
		--eame-fondo-suave: rgba(255, 255, 255, 0.04);
	}
}

/* ==========================================================================
   Confirmación tras el pago
   ========================================================================== */

.eame-confirmacion {
	--eame-acento: var(--eame-marca);

	border: 1px solid var(--eame-borde);
	border-left: 4px solid var(--eame-acento);
	border-radius: 8px;
	margin: 0 0 2em;
	padding: 1.4em 1.5em;
}

.eame-confirmacion--espera {
	--eame-acento: #a06800;
}

.eame-confirmacion__titulo {
	font-size: 1.15em;
	margin: 0 0 1em;
}

.eame-confirmacion__ficha + .eame-confirmacion__ficha {
	border-top: 1px solid var(--eame-borde-suave);
	margin-top: 1.4em;
	padding-top: 1.4em;
}

.eame-confirmacion__dorsal {
	background: rgba(0, 0, 0, 0.04);
	border-radius: 6px;
	display: inline-block;
	margin-bottom: 1em;
	padding: 0.5em 1em;
	text-align: center;
}

.eame-confirmacion__dorsal span {
	display: block;
	font-size: 0.72em;
	letter-spacing: 0.05em;
	opacity: 0.7;
	text-transform: uppercase;
}

.eame-confirmacion__dorsal strong {
	font-size: 1.6em;
	line-height: 1.2;
}

.eame-confirmacion__datos {
	display: grid;
	gap: 0.75em 1.5em;
	grid-template-columns: 1fr;
	margin: 0;
}

@media (min-width: 34em) {
	.eame-confirmacion__datos {
		grid-template-columns: 1fr 1fr;
	}
}

.eame-confirmacion__datos dt {
	font-size: 0.75em;
	letter-spacing: 0.04em;
	opacity: 0.7;
	text-transform: uppercase;
}

.eame-confirmacion__datos dd {
	margin: 0.15em 0 0;
}

.eame-confirmacion__incluye,
.eame-confirmacion__aviso {
	font-size: 0.88em;
	margin: 1.2em 0 0;
	opacity: 0.8;
}

.eame-confirmacion__acciones {
	margin: 1.3em 0 0;
}

.eame-confirmacion__reglamento {
	font-size: 0.9em;
	margin: 0.6em 0 0;
}

@media (prefers-color-scheme: dark) {	.eame-confirmacion__dorsal {
		background: rgba(255, 255, 255, 0.06);
	}
}

/* --- Botón de pago bloqueado hasta aceptar las declaraciones ------------- */

/* Desactivado conserva el color de la organización, sin atenuar, y refuerza el
   grosor del texto. Lo único que lo distingue del activo es el cursor y el
   aviso de debajo, que explica qué falta por aceptar. */

.eame-formulario .eame-envio__boton[disabled],
.eame-formulario .eame-envio__boton[aria-disabled="true"],
.eame-formulario .button.alt.eame-envio__boton[disabled] {
	background: var(--eame-marca);
	background-color: var(--eame-marca);
	border-color: var(--eame-marca);
	color: var(--eame-marca-texto);
	cursor: not-allowed;
	font-weight: 800;
	opacity: 1;
}

.eame-envio__bloqueo {
	color: var(--eame-error);
	font-size: 0.88em;
	font-weight: 600;
	margin: 0.8em 0 0;
}

.eame-envio__bloqueo[hidden] {
	display: none;
}

/* Resalta las declaraciones que faltan mientras el envío está bloqueado. */
.eame-formulario--bloqueado .eame-declaracion--obligatoria:has(input:not(:checked)) {
	background: rgba(179, 45, 46, 0.06);
	border-radius: 4px;
	box-shadow: inset 3px 0 0 var(--eame-error);
	padding-left: 0.7em;
}

/* --- Campos conservados tras un error de validación --------------------- */

.eame-aviso--conservado {
	border-left-color: #1d7a3e;
}

.eame-campo input[aria-invalid="true"],
.eame-campo select[aria-invalid="true"] {
	background: rgba(179, 45, 46, 0.05);
	border-color: var(--eame-error);
	box-shadow: inset 3px 0 0 var(--eame-error);
}

/* --- Desplazamiento acompañado --------------------------------------------
   scroll-margin deja aire al centrar un bloque, para que no quede pegado a un
   encabezado fijo del tema. El desplazamiento suave lo pide el JavaScript, que
   además respeta prefers-reduced-motion. */

.eame-bloque,
.eame-categorias,
.eame-envio,
.eame-campo,
.eame-aviso {
	scroll-margin-block: 6rem;
}

/* --- Campo corto (código postal) ---------------------------------------- */

@media (min-width: 40em) {
	.eame-campo--corto {
		max-width: 12rem;
	}
}


/* --- Botón de envío con el color de la organización ---------------------- */

.eame-formulario .eame-envio__boton,
.eame-formulario button.eame-envio__boton,
.eame-formulario .button.alt.eame-envio__boton {
	background: var(--eame-marca);
	background-color: var(--eame-marca);
	border: 1px solid var(--eame-marca);
	color: var(--eame-marca-texto);
}

.eame-formulario .eame-envio__boton:hover:not([disabled]),
.eame-formulario .button.alt.eame-envio__boton:hover:not([disabled]) {
	background: var(--eame-marca);
	background-color: var(--eame-marca);
	color: var(--eame-marca-texto);
	filter: brightness(0.92);
}

.eame-formulario .eame-envio__boton:focus-visible {
	outline: 2px solid var(--eame-marca);
	outline-offset: 3px;
}

/* --- Resumen de la inscripción sobre el formulario de pago --------------- */

/* --- Casillas y botones de opción con el color de la organización -------- */

.eame-formulario input[type="checkbox"],
.eame-formulario input[type="radio"],
.eame-confirmacion input[type="checkbox"] {
	accent-color: var(--eame-marca);
}

/* Reserva para navegadores sin accent-color: se colorea el propio control. */
@supports not (accent-color: red) {
	.eame-formulario input[type="checkbox"]:checked,
	.eame-formulario input[type="radio"]:checked {
		background-color: var(--eame-marca);
		border-color: var(--eame-marca);
		filter: none;
	}
}

.eame-formulario input[type="checkbox"]:focus-visible,
.eame-formulario input[type="radio"]:focus-visible {
	outline: 2px solid var(--eame-marca);
	outline-offset: 2px;
}

/* ==========================================================================
   Datos de la inscripción en el resumen del pedido
   --------------------------------------------------------------------------
   WooCommerce los pinta en una sola línea separados por barras. Aquí se
   reparten uno por línea, que es como se leen de un vistazo:

       Competidor: Fco Javier Hurtado
       Esquila mecánica: Novato
       Esquila con tijera: Novato
       Talla de camiseta: L

   Los dos puntos los añade WooCommerce, no se tocan.
   ========================================================================== */

.wc-block-components-product-metadata .wc-block-components-product-details {
	display: block;
	line-height: 1.6;
}

/* Cada dato ocupa su línea. */
.wc-block-components-product-metadata .wc-block-components-product-details > span {
	display: block;
}

/* El separador « / » sobra cuando cada dato va en su línea. Es aria-hidden,
   así que ocultarlo no quita nada a los lectores de pantalla. */
.wc-block-components-product-metadata .wc-block-components-product-details > span[aria-hidden="true"] {
	display: none;
}

/* Nombre y valor siguen juntos dentro de su línea. */
.wc-block-components-product-metadata .wc-block-components-product-details__name {
	display: inline;
	font-weight: 600;
	margin-right: 0.25em;
}

.wc-block-components-product-metadata .wc-block-components-product-details__value {
	display: inline;
}

/* ==========================================================================
   Datos de la inscripción en «Detalles del pedido»
   --------------------------------------------------------------------------
   Solo afecta a las líneas marcadas como inscripción: las de los productos
   físicos de la tienda conservan su presentación.
   ========================================================================== */

.eame-linea-inscripcion .wc-item-meta {
	list-style: none;
	list-style-type: none;
	margin: 0.5em 0 0;
	padding: 0;
}

/* Un dato por línea, con la etiqueta y su valor juntos: «Campo: Valor». */

.eame-linea-inscripcion .wc-item-meta li {
	display: block;
	line-height: 1.6;
	margin: 0;
}

.eame-linea-inscripcion .wc-item-meta-label {
	font-weight: 600;
	margin-right: 0.25em;
}

/* WooCommerce envuelve el valor en un párrafo, que por defecto trae márgenes
   propios y parte la línea en dos. */
.eame-linea-inscripcion .wc-item-meta li > p {
	display: inline;
	margin: 0;
}