/* @version 1.132.0 - 2026-10-23 */
/**
 * ESAM Management - Estilos del formulario público de inscripción.
 * Diseño limpio y profesional. Cero dependencias externas (Doc 6).
 */

/* La zona del plugin se pinta a sí misma —fondo, texto y superficies— igual
   que hace el panel, en vez de confiar en el tema del club: el tema no tiene
   por qué saber de modo oscuro, y hasta S94 el texto se aclaraba pero el fondo
   seguía siendo el blanco del tema, con lo que la pantalla quedaba ilegible.
   Los tokens ya cambian solos con el modo, así que esta regla vale para los
   dos. */
.esamjudo-form-wrap {
	max-width: 720px;
	margin: 0 auto;
	background: var(--ej-bg);
	color: var(--ej-text);
	padding: 20px;
	border-radius: 10px;
}

.esamjudo-form .esamjudo-fieldset {
	border: 1px solid #d7d7d7;
	border-radius: 6px;
	padding: 20px 24px;
	margin: 0 0 24px;
}

.esamjudo-form legend {
	font-weight: 600;
	font-size: 1.05rem;
	padding: 0 8px;
}

.esamjudo-field {
	margin: 0 0 16px;
}

.esamjudo-field label,
.esamjudo-field .esamjudo-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
}

.esamjudo-field input[type="text"],
.esamjudo-field input[type="email"],
.esamjudo-field input[type="tel"],
.esamjudo-field input[type="date"],
.esamjudo-field input[type="number"],
.esamjudo-field select,
.esamjudo-field textarea {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid #c4c4c4;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 1rem;
}

.esamjudo-field select:disabled {
	background: #f2f2f2;
	color: #888;
}

.esamjudo-field-check label,
.esamjudo-bloque-dias label {
	display: inline-block;
	font-weight: 400;
	margin-right: 18px;
}

.esamjudo-field-check input[type="checkbox"],
.esamjudo-field input[type="radio"] {
	margin-right: 6px;
}

.esamjudo-req {
	color: #b3261e;
}

.esamjudo-help {
	font-size: 0.9rem;
	color: #555;
	margin: 0 0 14px;
}

.esamjudo-horario-texto {
	display: inline-block;
	padding: 8px 12px;
	background: #f3f6f9;
	border: 1px solid #d7e0e8;
	border-radius: 4px;
}

.esamjudo-aviso-actividad {
	margin-top: 8px;
	padding: 10px 12px;
	background: #fff7e6;
	border: 1px solid #f0d28a;
	border-radius: 4px;
	font-size: 0.92rem;
}

/* ══════════════════════════════════════════════════════════════════════════
 * S146 (doc14 §7-bis y §7-ter) — EL ÁREA PRIVADA, CON EL DISEÑO DE LA MAQUETA.
 *
 * 🔴 v1.948.0 (15/09/2026, el cliente al ver la primera versión): «se parece poco
 * a lo que me habías enseñado en el html… todo a ancho completo sin tarjetas».
 * Rehecha copiando `mi-area-esam.html`, la maqueta que aprobó: hoja blanca con
 * sombra, avisos compactos con un solo botón, rejilla de tarjetas, pastillas de
 * estado, filas finas de documentos en dos columnas y datos en filas.
 *
 * Los colores salen de los tokens de la parte pública. Solo tres son del área,
 * con su valor oscuro abajo, como en la maqueta: la marca de los botones (en
 * oscuro, el azul claro: el oscuro no se leería sobre la hoja), el texto de los
 * botones y la sombra de la hoja.
 *
 * El tema del club pone margen a párrafos, títulos y listas del contenido: por
 * eso las reglas de texto van con `.esamjudo-portal` delante.
 * ══════════════════════════════════════════════════════════════════════════ */
.esamjudo-portal {
	--ej-area-marca:       #1f2d50;
	--ej-area-boton-texto: #ffffff;
	--ej-area-sombra:      0 1px 2px rgba(31, 45, 80, .06), 0 8px 24px rgba(31, 45, 80, .08);
	--ej-area-radio:       10px;
}

@media (prefers-color-scheme: dark) {
	.esamjudo-portal {
		--ej-area-marca:       #8fa6e6;
		--ej-area-boton-texto: #0f1420;
		--ej-area-sombra:      0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
	}
}

/* ── La hoja ── */
.esamjudo-portal.ej-area {
	display: grid;
	gap: 16px;
	padding: 22px 24px;
	border: 1px solid var(--ej-border);
	border-radius: 14px;
	background: var(--ej-card);
	box-shadow: var(--ej-area-sombra);
	color: var(--ej-text);
	/* La letra del plugin, como el acceso y el alta (visto en la captura: la
	   hoja salía con la del tema y el saludo con su negra más gruesa). */
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.5;
}

.ej-area__cab {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
}

.esamjudo-portal .ej-area__hola {
	margin: 0;
	color: var(--ej-text);
	font-family: inherit;
	font-size: 1.45rem;
	font-weight: 700; /* La Montserrat del plugin llega hasta 700: más, el navegador la engorda a mano. */
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.esamjudo-portal .ej-area__sub,
.esamjudo-portal .ej-area__nota {
	margin: 0;
	color: var(--ej-muted);
	font-size: 0.88rem;
}

.esamjudo-portal .ej-area__sub {
	margin-top: 4px;
}

/* ── El selector de alumnos (S146, §7-bis) ── */
.ej-area-alumnos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* S161 (opción A, elegida por él): en el móvil las pastillas de los hijos iban una
   debajo de otra y ocupaban unos 170 px. Ahora, una sola fila que se desliza (sin
   barra), con el nombre de pila y «+ Hermano»; el hijo elegido se centra solo
   (centrarFilasDePestanas() en esamjudo-public.js). En escritorio, como siempre. */
.ej-area-alumno__corto {
	display: none;
}
@media (max-width: 600px) {
	.ej-area-alumnos {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: 2px;
	}
	.ej-area-alumnos::-webkit-scrollbar {
		display: none;
	}
	.ej-area-alumnos .ej-area-alumno {
		flex: none;
		white-space: nowrap;
	}
	.ej-area-alumno__largo {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.ej-area-alumno__corto {
		display: inline;
	}
}

/* El tema del club subraya los enlaces y pisaba el text-decoration de la
   pastilla (visto en la captura del 15/09/2026): la regla va con más peso. */
.esamjudo-portal a.ej-area-alumno,
.esamjudo-portal a.ej-area-alumno:hover,
.esamjudo-portal a.ej-area-alumno:focus-visible {
	text-decoration: none;
}

.ej-area-alumno {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 6px;
	border: 1px solid var(--ej-border);
	border-radius: 999px;
	background: var(--ej-card);
	color: var(--ej-text);
	font-size: 0.86rem;
	font-weight: 600;
	text-decoration: none;
}

.esamjudo-portal a.ej-area-alumno:hover,
.esamjudo-portal a.ej-area-alumno:focus-visible {
	border-color: var(--ej-area-marca);
	color: var(--ej-text);
}

.esamjudo-portal a.ej-area-alumno--activo {
	border-color: var(--ej-area-marca);
	background: var(--ej-surface-2);
}

.ej-area-alumno__inicial {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ej-area-marca);
	color: var(--ej-area-boton-texto);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* B29 (S182, 22/10/2026): la foto del alumno en su pastilla, en el mismo círculo
   que las iniciales. Sin foto, siguen las iniciales. */
.esamjudo-portal img.ej-area-alumno__foto {
	display: block;
	object-fit: cover;
	padding: 0;
	margin: 0;
	border: 0;
	max-width: none;
	flex: 0 0 auto;
}

/* B29 (S182): la foto en «Mis datos → Datos del alumno», como en el panel: a la
   derecha de los datos; en el móvil, arriba y centrada. El recuadro es el de la
   renovación (`.ej-area .ej-subida`, `.ej-subida-vista`). */
.esamjudo-portal .ej-area-datos-foto {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 180px;
	gap: 18px;
	align-items: start;
}
.esamjudo-portal .ej-area-foto {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	container-type: inline-size;
}
.esamjudo-portal .ej-area-foto [hidden] {
	display: none !important;
}
.esamjudo-portal .ej-area-foto__titulo {
	margin: 0;
	font-weight: 600;
	font-size: .85rem;
}
.esamjudo-portal .ej-area-foto__falta {
	align-self: flex-start;
}
.esamjudo-portal .ej-area-foto .ej-subida-vista .ej-subida-vista__btn {
	white-space: nowrap;
}
@container (max-width: 239px) {
	.ej-area .ej-area-foto .ej-subida-vista__acciones { gap: 4px; padding: 30px 6px 8px; }
	.ej-area .ej-area-foto .ej-subida-vista .ej-subida-vista__btn,
	.ej-area .ej-area-foto .ej-subida-vista .ej-subida-vista__btn:hover,
	.ej-area .ej-area-foto .ej-subida-vista .ej-subida-vista__btn:focus,
	.ej-area .ej-area-foto .ej-subida-vista .ej-subida-vista__btn:active { padding: 5px 8px; font-size: .72rem; }
	.ej-area .ej-area-foto .ej-subida-vista__btn svg { display: none; }
}
.esamjudo-portal .ej-area-foto__quitar p,
.esamjudo-portal .ej-area-foto__nota,
.esamjudo-portal .ej-area-foto__estado {
	margin: 0;
	font-size: .8rem;
	line-height: 1.4;
}
@media (max-width: 600px) {
	.esamjudo-portal .ej-area-datos-foto {
		grid-template-columns: minmax(0, 1fr);
	}
	.esamjudo-portal .ej-area-datos-foto > .ej-area-foto {
		order: -1;
		width: 100%;
		max-width: 200px;
		justify-self: center;
	}
}

/* 🔴 S183 (23/10/2026, su maqueta a 1440, 1280, 768 y 390) — «MIS DATOS» CON UN
   SOLO BOTÓN, fuera de las tarjetas y abajo a la derecha; en el móvil, a lo ancho
   con la frase centrada encima. Con la foto elegida y sin guardar, su píldora. */
.esamjudo-portal .ej-area-foto__nueva {
	align-self: center;
}
.esamjudo-portal .ej-area-misdatos__pie {
	display: grid;
	gap: 8px;
	justify-items: end;
	text-align: right;
}
.esamjudo-portal .ej-area-misdatos__pie[hidden],
.esamjudo-portal .ej-area-misdatos__pie > [hidden] {
	display: none;
}
.esamjudo-portal .ej-area-misdatos__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
}
.esamjudo-portal .ej-area-misdatos__nota {
	margin: 0;
	color: var(--ej-muted);
	font-size: .8rem;
}
/* El «No has cambiado nada» de Mis datos y de Forma de pago. */
.esamjudo-portal .ej-area-sin-cambios {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--ej-text);
	font-size: .85rem;
	font-weight: 600;
}
@media (max-width: 600px) {
	.esamjudo-portal .ej-area-misdatos__pie,
	.esamjudo-portal .ej-area-misdatos__fila {
		justify-items: stretch;
		text-align: center;
	}
	.esamjudo-portal .ej-area-misdatos__fila {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
}

/* 🔴 S147 (16/09/2026, el cliente): «pondría al lado de donde se muestran los
   hermanos otra píldora, con el mismo formato que tienen los hermanos, y que
   pusiera ¿Apuntar a otro hermano?».

   Es un BOTÓN, no un enlace —apuntar a un hermano es un formulario con
   confirmación—, así que hay que quitarle lo que el navegador le pone de suyo a
   los botones y dejarlo exactamente igual que las pastillas de al lado. El resto
   del aspecto lo hereda de `.ej-area-alumno`. */
.esamjudo-portal button.ej-area-alumno--nuevo {
	font-family: inherit;
	line-height: inherit;
	cursor: pointer;
	appearance: none;
}

/* El «+» del círculo, un poco mayor que unas iniciales para que se lea como un
   «añadir» y no como una letra. */
.esamjudo-portal .ej-area-alumno--nuevo .ej-area-alumno__inicial {
	font-size: 0.95rem;
	line-height: 1;
}

.esamjudo-portal button.ej-area-alumno--nuevo:hover,
.esamjudo-portal button.ej-area-alumno--nuevo:focus-visible {
	border-color: var(--ej-area-marca);
}

/* El formulario que dispara esa pastilla no pinta nada por sí mismo: solo guarda
   la confirmación y el error, que aparecen debajo de la tira cuando hacen falta. */
.esamjudo-portal .ej-area-form--suelto {
	display: grid;
	gap: 10px;
}

/* ── Las pestañas: se deslizan de lado en el móvil ── */
.ej-area-pestanas {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	border-bottom: 1px solid var(--ej-border);
	scrollbar-width: thin;
}

.esamjudo-portal a.ej-area-pestana,
.esamjudo-portal a.ej-area-pestana:hover,
.esamjudo-portal a.ej-area-pestana:focus-visible {
	text-decoration: none;
}

.ej-area-pestana {
	flex: none;
	padding: 9px 12px;
	border-bottom: 2.5px solid transparent;
	color: var(--ej-muted);
	font-size: 0.86rem;
	font-weight: 700;
	white-space: nowrap;
}

.esamjudo-portal a.ej-area-pestana:hover {
	color: var(--ej-text);
}

.esamjudo-portal a.ej-area-pestana.is-activa {
	border-bottom-color: var(--ej-accent);
	color: var(--ej-area-marca);
}

.ej-area-panel {
	display: grid;
	gap: 12px;
	min-width: 0;
}

.ej-area-panel[hidden] {
	display: none;
}

/* ── Avisos: compactos, con lo que es, hasta cuándo y un botón ── */
.ej-area-aviso {
	display: grid;
	gap: 8px;
	padding: 12px 14px;
	border-radius: var(--ej-area-radio);
	font-size: 0.88rem;
}

.ej-area-aviso > strong {
	color: inherit;
	font-size: 0.94rem;
}

.ej-area-aviso--pendiente,
/* S176 — «Has cambiado quién puede recoger… hay que volver a firmarla» (Contactos)
   usaba esta clase desde la S149 sin que existiera su estilo: salía como texto
   suelto. Es un aviso de firma pendiente: el mismo recuadro. */
.ej-area-aviso--atencion {
	background: var(--ej-warning-bg);
	color: var(--ej-warning-fg);
}

/* S168 — «Ir a la inscripción del colegio» en el aviso del área: el mismo botón dorado
   y centrado que el del alta por la web (antes, un enlace suelto que no se veía). */
.ej-area-aviso .ej-area-aviso__ir-fila { text-align: center; }
.ej-area-aviso a.ej-area-aviso__ir {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 10px;
	background: var(--ej-accent);
	color: #1f2d50;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.2;
	text-decoration: none;
}
.ej-area-aviso a.ej-area-aviso__ir:hover { filter: brightness(1.08); }

.ej-area-aviso--obligatorio {
	background: var(--ej-danger-bg);
	color: var(--ej-danger-fg);
}

.ej-area-aviso-lectura {
	margin: 0;
	padding: 12px 14px;
	border-radius: var(--ej-area-radio);
	background: var(--ej-warning-bg);
	color: var(--ej-warning-fg);
	font-size: 0.88rem;
}

.esamjudo-portal .ej-area-error {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--ej-danger-fg);
	font-size: 0.82rem;
	font-weight: 600;
}

/* ── Botones ── */
.ej-area-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* 🔴 S147 (16/09/2026, el cliente, viéndolo en pantalla: «el botón de cancelar la
   cuenta nueva sigue saliendo aunque no se esté creando una cuenta nueva»). El
   `display` de abajo le GANA al atributo `hidden`, así que un botón escondido se
   seguía viendo. Es el mismo tropiezo que «Parentesco (otro)» en la S146: allí se
   escribió la regla para los campos y para las tarjetas, pero no para los botones.
   Va ANTES, para que la especificidad no dependa del orden de lectura. */
.esamjudo-portal a.ej-area-btn[hidden],
.esamjudo-portal button.ej-area-btn[hidden] {
	display: none !important;
}

.esamjudo-portal a.ej-area-btn,
.esamjudo-portal button.ej-area-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border: 1px solid var(--ej-area-marca);
	border-radius: 8px;
	background: var(--ej-area-marca);
	color: var(--ej-area-boton-texto);
	font: inherit;
	font-size: 0.84rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

.esamjudo-portal a.ej-area-btn:hover,
.esamjudo-portal button.ej-area-btn:hover {
	color: var(--ej-area-boton-texto);
	filter: brightness(1.12);
	text-decoration: none;
}

.esamjudo-portal a.ej-area-btn--sec,
.esamjudo-portal button.ej-area-btn--sec,
.esamjudo-portal a.ej-area-btn--sec:hover,
.esamjudo-portal button.ej-area-btn--sec:hover {
	background: transparent;
	color: var(--ej-area-marca);
	filter: none;
}

.esamjudo-portal a.ej-area-btn--sec:hover,
.esamjudo-portal button.ej-area-btn--sec:hover {
	background: var(--ej-surface-2);
}

.esamjudo-portal a.ej-area-btn--peq,
.esamjudo-portal button.ej-area-btn--peq {
	padding: 5px 10px;
	font-size: 0.78rem;
}

/* S146 (A24): el botón de pedir la baja, en rojo, con los colores que ya cambian en modo oscuro. */
.esamjudo-portal a.ej-area-btn--peligro,
.esamjudo-portal button.ej-area-btn--peligro,
.esamjudo-portal a.ej-area-btn--peligro:hover,
.esamjudo-portal button.ej-area-btn--peligro:hover {
	border-color: var(--ej-danger-fg);
	background: var(--ej-danger-bg);
	color: var(--ej-danger-fg);
	filter: none;
}

.esamjudo-portal a.ej-area-btn:focus-visible,
.esamjudo-portal button.ej-area-btn:focus-visible {
	outline: 2px solid var(--ej-accent);
	outline-offset: 2px;
}

.esamjudo-portal button.ej-area-btn:disabled {
	opacity: 0.55;
	cursor: default;
	filter: none;
}

/* ── Pastillas de estado ── */
.ej-area-pildora {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

.ej-area-pildora--ok {
	background: var(--ej-success-bg);
	color: var(--ej-success-fg);
}

.ej-area-pildora--av {
	background: var(--ej-warning-bg);
	color: var(--ej-warning-fg);
}

.ej-area-pildora--gris {
	background: var(--ej-surface-2);
	color: var(--ej-muted);
}

/* S146: la baja definitiva ya pedía esta pastilla en Inscripciones y no tenía color. */
.ej-area-pildora--mal {
	background: var(--ej-danger-bg);
	color: var(--ej-danger-fg);
}

/* 🔴 S154 — La tarjeta del tutor dentro de «Autorizados a recoger»: la misma
   píldora y el mismo borde de acento que en el panel, para que la familia vea
   de dónde sale esa persona y por qué no se toca desde aquí. */
.esamjudo-portal .ej-area-pildora-tutor {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	margin-left: auto;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--ej-accent-soft, rgba(230, 168, 42, .18));
	color: var(--ej-accent);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* S157: sin colgar del área, porque la misma tarjeta sale también en el alta
   por la web, que no vive dentro del portal. */
.ej-area-contacto--tutor {
	border-left: 3px solid var(--ej-accent);
}

/* 🔴 S157 (23/09/2026, él viéndolo en su pantalla) — LA TARJETA DEL TUTOR EN EL
   ÁREA SE VEÍA EN CRUDO.

   La tarjeta del tutor es UNA SOLA pieza para el panel y para el área
   (`admin/partials/_autorizado-tutor-card.php`), y su ropa vive en el CSS del
   panel, que en el área no se carga. Resultado: al lado de la tarjeta del
   autorizado, bien puesta, los dos tutores salían con los nombres de los campos
   en negrita, los datos descolgados y una casilla azul del navegador donde
   tenía que haber un interruptor —contra la ley de diseño del plugin.

   Aquí se le pone la misma ropa que lleva la tarjeta del autorizado del área.
   No se toca el marcado, que es del panel y allí se ve bien. */
.ej-area-contacto .ej-contacto-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 12px 8px;
}

.ej-area-contacto .ej-contacto-avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ej-area-marca, var(--ej-accent, #e6a82a));
	color: var(--ej-area-boton-texto, #1a1f2b);
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
}

.ej-area-contacto .ej-contacto-card__nameblock {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	min-width: 0;
}

.ej-area-contacto .ej-contacto-card__nombre {
	min-width: 0;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: break-word;
}

/* La píldora «Tutor/a», igual que la del área. */
.ej-area-contacto .ej-contacto-pildora-tutor {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--ej-accent-soft, rgba(230, 168, 42, .18));
	color: var(--ej-accent);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Los datos, en dos columnas finas como los del autorizado. */
.ej-area-contacto .ej-contacto-card__body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 3px 10px;
	margin: 0;
	padding: 0 12px 12px;
	font-size: 0.82rem;
}

.ej-area-contacto .ej-contacto-card__body dt {
	margin: 0;
	color: var(--ej-muted);
	font-weight: 400;
}

.ej-area-contacto .ej-contacto-card__body dd {
	margin: 0;
	color: var(--ej-text);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.ej-area-contacto .ej-contacto-card__recoger {
	margin-top: auto;
	padding: 0 12px 12px;
}

.ej-area-contacto .ej-contacto-card__nota {
	margin: 6px 0 0;
	color: var(--ej-muted);
	font-size: 0.74rem;
	line-height: 1.35;
}

/* El interruptor del panel (`esamjudo-switch`), vestido como el del área.
   S183: y en Forma de pago, «usar esta cuenta también para ellos», que era una
   casilla con el nombre casi negro sobre el fondo oscuro. */
:is(.ej-area-contacto, .ej-area-tutores-firma, .ej-contacto-card--tutor, .ej-area-herm-quitar, [data-ej-recoger-hermanos], [data-area-form="cuenta_a_hermanos"]) .esamjudo-switch {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--ej-text);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

:is(.ej-area-contacto, .ej-area-tutores-firma, .ej-contacto-card--tutor, .ej-area-herm-quitar, [data-ej-recoger-hermanos], [data-area-form="cuenta_a_hermanos"]) .esamjudo-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

/* 🔴 S157 (23/09/2026, él en su pantalla: «no se ve el interruptor bien»): el
   carril se pintaba con colores del área, y en el alta por la web esas fichas
   no existen: salía transparente y solo se veía la bolita suelta. Cada color
   lleva ahora su respaldo. */
:is(.ej-area-contacto, .ej-area-tutores-firma, .ej-contacto-card--tutor, .ej-area-herm-quitar, [data-ej-recoger-hermanos], [data-area-form="cuenta_a_hermanos"]) .esamjudo-switch__track {
	position: relative;
	flex: 0 0 44px;
	width: 44px;
	height: 24px;
	border-radius: 999px;
	background: var(--ej-field-border, #56607a);
	transition: background-color .15s ease;
}

:is(.ej-area-contacto, .ej-area-tutores-firma, .ej-contacto-card--tutor, .ej-area-herm-quitar, [data-ej-recoger-hermanos], [data-area-form="cuenta_a_hermanos"]) .esamjudo-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
	transition: transform .15s ease;
}

:is(.ej-area-contacto, .ej-area-tutores-firma, .ej-contacto-card--tutor, .ej-area-herm-quitar, [data-ej-recoger-hermanos], [data-area-form="cuenta_a_hermanos"]) .esamjudo-switch input:checked + .esamjudo-switch__track {
	background: var(--ej-area-marca, var(--ej-accent, #e6a82a));
}

:is(.ej-area-contacto, .ej-area-tutores-firma, .ej-contacto-card--tutor, .ej-area-herm-quitar, [data-ej-recoger-hermanos], [data-area-form="cuenta_a_hermanos"]) .esamjudo-switch input:checked + .esamjudo-switch__track::after {
	transform: translateX(20px);
}

:is(.ej-area-contacto, .ej-area-tutores-firma, .ej-contacto-card--tutor, .ej-area-herm-quitar, [data-ej-recoger-hermanos], [data-area-form="cuenta_a_hermanos"]) .esamjudo-switch input:focus-visible + .esamjudo-switch__track {
	outline: 2px solid var(--ej-area-marca, var(--ej-accent, #e6a82a));
	outline-offset: 2px;
}

:is(.ej-area-contacto, .ej-area-tutores-firma, .ej-contacto-card--tutor, .ej-area-herm-quitar, [data-ej-recoger-hermanos], [data-area-form="cuenta_a_hermanos"]) .esamjudo-switch input:disabled + .esamjudo-switch__track {
	opacity: .55;
}

/* ── Rejilla y tarjetas ── */
.ej-area-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px;
}

.ej-area-rejilla--ancha {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* 🔴 S147 (16/09/2026, el cliente, viendo la pestaña Inscripciones en su portátil):
   «si tiene varias inscripciones o actividades en la misma temporada, que salgan en
   dos columnas; si solo tiene una, que se quede como está».

   Medido ese día: la rejilla repartía sola (`auto-fit`), así que con 1.256 px de ancho
   habría montado **hasta cuatro** columnas —tres actividades, tres columnas—, y con una
   sola tarjeta la estiraba a todo el ancho. Lo segundo es justo lo que él quiere y no se
   toca; lo primero se fija en DOS como máximo.

   Se hace con `:has()` —que este CSS ya usa en otros tres sitios— para no tocar el PHP ni
   contar tarjetas por JavaScript: si existe una segunda tarjeta, dos columnas; si no, la
   regla no se aplica y la única sigue ocupando todo el ancho.

   Solo en escritorio y MacBook (de 1100 px, el mismo corte que el 85 % de ancho del área).
   En tablet y en móvil se queda en una columna: dos tarjetas de estas no caben sin que el
   horario y la cuota se partan. */
@media (min-width: 1100px) {
	.ej-area-rejilla--ancha:has( > .ej-area-tarjeta:nth-of-type(2) ) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 🔴 S147 (16/09/2026, el cliente, sobre la pestaña Contactos del área):
   «cada contacto tiene que aparecer en una tarjeta, 4 columnas que es el máximo
   de contactos que se puede tener si eres menor de edad y 2 si eres mayor de
   edad. Mira cómo está en el panel del admin y el funcionamiento es el mismo».

   O sea: LAS COLUMNAS SON EL CUPO, no un reparto automático. Cuatro plazas en
   menores y dos en mayores, y las que están sin ocupar se dibujan con el borde
   a rayas, para que se vea de un vistazo cuántas quedan. La tarjeta es la del
   panel (.ej-contacto-card): avatar de iniciales, el nombre, las dos acciones
   en iconos arriba a la derecha y los datos en una lista debajo.

   De 1100 px para abajo las columnas bajan a dos y luego a una, y los huecos
   vacíos desaparecen: en un móvil ocupan pantalla sin decir nada. Eso es
   adaptación a móvil y tablet, y corre de mi cuenta, no suya. */
.esamjudo-portal .ej-area-contactos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin-top: 12px;
}

@media (min-width: 620px) {
	.esamjudo-portal .ej-area-contactos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.esamjudo-portal .ej-area-contactos--menor {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.esamjudo-portal .ej-area-contactos--mayor {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* S172 (10/10/2026, pedido por él): la pestaña Tutores usa esta misma
	   rejilla, pero un alumno tiene dos tutores como mucho; a cuatro columnas
	   cada tarjeta se quedaba en un cuarto de ancho. Dos, como en el panel. */
	.esamjudo-portal .ej-area-contactos.ej-area-tutores-lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.esamjudo-portal .ej-area-contacto {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--ej-border);
	border-radius: var(--ej-area-radio);
	background: var(--ej-card);
	color: var(--ej-text);
}

/* Sin `gap` a propósito: el desplegable de corregir datos y el formulario de
   quitar viven dentro de la tarjeta y, mientras están cerrados, no miden nada.
   Con `gap` dejarían dos huecos en blanco al pie de cada tarjeta. */
.esamjudo-portal .ej-area-contacto__cab {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 78px 8px 12px;
}

/* Si la ficha va en solo lectura no hay iconos, así que tampoco su hueco. */
.esamjudo-portal .ej-area-contacto:not( :has( .ej-area-contacto__accion ) ) .ej-area-contacto__cab {
	padding-right: 12px;
}

.esamjudo-portal .ej-area-contacto__avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ej-area-marca);
	/* Las iniciales NO van en blanco fijo: en modo oscuro la marca del área es
	   un azul claro (#8fa6e6) y el blanco encima no se leería. Se usa la misma
	   ficha que ya resuelve esto en los botones del área, que en oscuro pasa a
	   casi negro. */
	color: var(--ej-area-boton-texto);
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
}

.esamjudo-portal .ej-area-contacto__nombre {
	min-width: 0;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: break-word;
}

.esamjudo-portal .ej-area-contacto__datos {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 3px 10px;
	margin: 0;
	padding: 0 12px 12px;
	font-size: 0.82rem;
}

.esamjudo-portal .ej-area-contacto__datos dt {
	margin: 0;
	color: var(--ej-muted);
	font-weight: 500;
	white-space: nowrap;
}

/* El email se parte y se lee entero. En el panel se corta con puntos suspensivos,
   pero allí la columna es más ancha; aquí, a un cuarto de pantalla, cortarlo
   dejaría el correo sin ver, que es justo el dato al que se llama. */
.esamjudo-portal .ej-area-contacto__datos dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* S158 (el cliente, viéndolo en pantalla): «Ponerlo también a sus hermanos» y
   «Que sus datos aquí vayan aparte», centrados y con aire por encima. Solo la
   fila del botón, no la de la pregunta que se abre debajo. */
.esamjudo-portal .ej-area-contacto .ej-area-form--suelto > .ej-area-botones {
	justify-content: center;
	margin: 8px 0 12px;
}

.esamjudo-portal .ej-area-contacto__compartido {
	margin: 0 12px 12px;
	padding: 7px 9px;
	border-radius: 8px;
	background: var(--ej-surface-2);
	color: var(--ej-muted);
	font-size: 0.76rem;
	line-height: 1.4;
}

/* Las dos acciones, en la esquina de arriba a la derecha como en el panel. Van
   colocadas encima de la tarjeta (no en el flujo) porque cada una es el tirador
   de algo que se abre más abajo: el lápiz abre el desplegable de corregir datos
   y la papelera envía el formulario de quitar. */
.esamjudo-portal .ej-area-contacto__accion {
	position: absolute;
	top: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--ej-muted);
	cursor: pointer;
	list-style: none;
}

.esamjudo-portal .ej-area-contacto__accion::-webkit-details-marker {
	display: none;
}

.esamjudo-portal .ej-area-contacto__accion--editar {
	right: 42px;
}

.esamjudo-portal .ej-area-contacto__accion--quitar {
	right: 10px;
}

.esamjudo-portal .ej-area-contacto__accion:hover,
.esamjudo-portal .ej-area-contacto__accion:focus-visible {
	background: var(--ej-surface-2);
	color: var(--ej-text);
	outline: none;
}

.esamjudo-portal .ej-area-contacto__accion--quitar:hover,
.esamjudo-portal .ej-area-contacto__accion--quitar:focus-visible {
	color: var(--ej-danger-fg);
}

.esamjudo-portal .ej-area-contacto__editar[open] > .ej-area-contacto__accion--editar {
	background: var(--ej-surface-2);
	color: var(--ej-text);
}

.esamjudo-portal .ej-area-contacto__editar > .ej-area-form {
	margin: 2px 12px 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ej-border);
}

.esamjudo-portal .ej-area-contacto__quitar .ej-area-confirmacion,
.esamjudo-portal .ej-area-contacto__quitar > .ej-area-error {
	margin: 0 12px 12px;
}

/* Al abrir un formulario, su tarjeta pasa a ocupar la fila entera: en una
   columna de un cuarto de ancho los campos no se pueden rellenar. */
@media (min-width: 620px) {
	.esamjudo-portal .ej-area-contacto:has( > details[open] ),
	.esamjudo-portal details.ej-area-contacto--libre[open] {
		grid-column: 1 / -1;
	}
}

/* La primera plaza libre: se pulsa y se añade a alguien ahí mismo. */
/* El borde a rayas va con la ficha de los CAMPOS, no con la de las tarjetas:
   `--ej-border` es el gris casi blanco de una tarjeta llena y, medido en
   pantalla, las plazas libres no se distinguían del fondo. El panel del club
   marca así todos sus recuadros a rayas (`1px dashed var(--ej-field-border)`). */
.esamjudo-portal .ej-area-contacto--libre {
	border-style: dashed;
	border-color: var(--ej-field-border);
	background: none;
}

.esamjudo-portal .ej-area-contacto--libre > summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 104px;
	padding: 12px;
	color: var(--ej-area-marca);
	font-size: 0.84rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	list-style: none;
	cursor: pointer;
}

.esamjudo-portal .ej-area-contacto--libre > summary::-webkit-details-marker {
	display: none;
}

.esamjudo-portal .ej-area-contacto--libre > summary:focus-visible {
	outline: 2px solid var(--ej-accent);
	outline-offset: -2px;
}

.esamjudo-portal .ej-area-contacto--libre:hover {
	background: var(--ej-surface-3);
}

.esamjudo-portal .ej-area-contacto--libre[open] > summary {
	justify-content: flex-start;
	min-height: 0;
	border-bottom: 1px solid var(--ej-border);
}

.esamjudo-portal .ej-area-contacto__mas {
	font-size: 1.15rem;
	line-height: 1;
}

.esamjudo-portal .ej-area-contacto--libre > .ej-area-form {
	padding: 12px;
}

/* Las plazas que aún no ocupa nadie. En móvil no se pintan: ahí solo hay una
   columna y una caja vacía detrás de otra no cuenta nada, solo hace bajar. */
.esamjudo-portal .ej-area-contacto--hueco {
	display: none;
	min-height: 104px;
	border-style: dashed;
	border-color: var(--ej-field-border);
	background: none;
}

@media (min-width: 620px) {
	.esamjudo-portal .ej-area-contacto--hueco {
		display: block;
	}
}

/* 🔴 S147 (16/09/2026, el cliente, viendo la pestaña Consentimientos en su
   pantalla): «antes la había visto yo y se veía bien, no sé por qué ahora no se
   ve bien. Debe funcionar exactamente igual que en el panel del admin».

   Lo que se veía mal era el reparto: había UNA tarjeta a la izquierda y un
   historial a la derecha que crecía solo, así que con muchas firmas la columna
   izquierda quedaba con medio metro de blanco debajo. El panel no lo hace así:
   tiene TRES tarjetas en fila (uso de imágenes, RGPD y normativa) y el histórico
   de cada una vive DENTRO de su propia columna, justo debajo de su tarjeta
   (`.ej-consent-grid`, tres columnas fijas y una sola en móvil).

   Aquí se hace igual. `align-items: start` es la pieza que evita que las tres
   se estiren a la altura de la más alta.

   El corte a dos columnas y luego a una es adaptación a tablet y móvil, y corre
   de mi cuenta. */
.esamjudo-portal .ej-area-consents {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

@media (min-width: 620px) {
	.esamjudo-portal .ej-area-consents {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.esamjudo-portal .ej-area-consents {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Cada columna es la tarjeta MÁS su histórico, como una sola pieza. */
.esamjudo-portal .ej-area-consent {
	display: grid;
	gap: 10px;
	align-content: start;
	min-width: 0;
}

/* 🔴 S147 (16/09/2026, el cliente, viendo Mis datos en su pantalla): «la tarjeta
   de datos del alumno sale muy grande debido a la columna de la derecha; ¿no se
   puede hacer que dentro de la columna de la izquierda estén los datos del alumno
   y los datos del tutor?».

   DOS COLUMNAS DE VERDAD, NO UNA REJILLA QUE REPARTE SOLA.

   `.ej-area-rejilla` coloca cada tarjeta donde le toca y las estira para igualar
   la altura de la fila; por eso una tarjeta corta al lado de una larga quedaba con
   medio metro de blanco debajo. Aquí cada columna es un contenedor propio con sus
   tarjetas apiladas, y `align-items: start` impide que se estiren.

   Es la misma pieza que arregló Consentimientos ese día, sacada aparte para poder
   usarla también en el Inicio, donde él señaló lo mismo.

   El corte a una sola columna en móvil y tablet es adaptación, y la decido yo. */
.esamjudo-portal .ej-area-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

@media (min-width: 1100px) {
	.esamjudo-portal .ej-area-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.esamjudo-portal .ej-area-col {
	display: grid;
	gap: 12px;
	align-content: start;
	min-width: 0;
}

/* 🔴 S147 (16/09/2026, el cliente) — LAS TRES COLUMNAS DEL INICIO.
   Él decide el diseño «para escritorio y MacBook»; la adaptación a móvil y a
   tablet, en vertical y en horizontal, corre de mi cuenta (dicho por él ese día).
   Hasta ahora la rejilla repartía sola (`auto-fit`), así que el número de columnas
   lo decidía el ancho y con dos tarjetas salían dos. Aquí van fijas:
     · Móvil: una columna, y en el orden que pidió — inscripción, notificaciones y
       documentos al final.
     · Tablet en vertical y en horizontal: dos columnas; la tercera pasa abajo
       ocupando todo el ancho, que a tres se estrecharían el horario y la cuota.
     · Escritorio y MacBook (de 1100 px, el mismo corte que el 85 % de ancho): tres.
   La tarjeta de apuntar a un hermano va siempre debajo, a todo lo ancho. */
.ej-area-rejilla--inicio {
	grid-template-columns: minmax(0, 1fr);
	/*
	 * 🔴 S147 (16/09/2026, el cliente, viendo el Inicio de un mayor de edad en su
	 * pantalla): las columnas se estiraban para igualar la altura de la fila, así
	 * que Notificaciones, con 97 px de contenido, ocupaba 536 px y dejaba un hueco
	 * blanco enorme a la derecha. Medido ese día con A6 MAYOR.
	 *
	 * `align-items: start` hace que cada columna mida lo que necesita. Es la misma
	 * pieza que arregló Mis datos y Consentimientos.
	 */
	align-items: start;
}

.ej-area-columna {
	display: grid;
	gap: 12px;
	align-content: start;
	min-width: 0;
}

/* 🔴 S147 (16/09/2026, el cliente, rediseñando el Inicio en su pantalla) — DOS
   COLUMNAS, NO TRES.

   Sus palabras: «si se pasa Notificaciones debajo de Tus documentos y las
   actividades se pasan una al lado de la otra; es decir, en lugar de 3 columnas,
   2: en la izquierda Renovación, Tus documentos y Notificaciones, y en la derecha
   a dos columnas las actividades».

   Así que `--avisos` deja de ser una columna —su tarjeta vive ahora dentro de
   `--renov`, debajo de documentos— y la columna de actividades reparte por dentro.

   🔴 EL ORDEN, CAMBIADO POR ÉL EL 16/09/2026: «y en móvil y tablet la píldora de
   Plazo abierto que se vea también arriba». La columna de renovación va PRIMERA en
   todas las anchuras, para que el aviso de plazo abierto se vea nada más entrar y
   no haya que bajar hasta el final.

   (El orden anterior —primero las actividades— lo había decidido yo, no él.) */
.ej-area-rejilla--inicio > .ej-area-columna--renov {
	order: 1;
}

.ej-area-rejilla--inicio > .ej-area-columna--insc {
	order: 2;
}

.ej-area-rejilla--inicio > form.ej-area-tarjeta {
	order: 3;
}

/* De escritorio y MacBook para arriba: izquierda la columna de renovación,
   documentos y notificaciones; derecha, las actividades. */
@media (min-width: 1100px) {
	.ej-area-rejilla--inicio {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}

	/* El orden ya está fijado arriba para todas las anchuras: renovación primero.
	   Aquí no se repite, para no tener dos sitios diciendo lo mismo. */
	.ej-area-rejilla--inicio > form.ej-area-tarjeta {
		grid-column: 1 / -1;
	}

	/* LAS ACTIVIDADES, UNA AL LADO DE LA OTRA (él, 16/09/2026).
	   Con `:has()`, igual que en Inscripciones: si hay una segunda tarjeta se parte
	   en dos; si solo hay una, la regla no se aplica y ocupa el ancho entero, que es
	   lo que él decidió allí y vale aquí. */
	.ej-area-rejilla--inicio > .ej-area-columna--insc:has( > .ej-area-tarjeta:nth-of-type(2) ) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ej-area-tarjeta {
	display: grid;
	gap: 8px;
	align-content: start;
	min-width: 0;
	padding: 14px;
	border: 1px solid var(--ej-border);
	border-radius: var(--ej-area-radio);
	background: var(--ej-card);
	color: var(--ej-text);
}

.ej-area-tarjeta--gris {
	background: var(--ej-surface-3);
}

.ej-area-tarjeta__cab {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px 12px;
}

.esamjudo-portal .ej-area-tarjeta h4 {
	margin: 0;
	color: var(--ej-text);
	font-size: 0.94rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: normal;
}

.esamjudo-portal .ej-area-tarjeta p {
	margin: 0;
	color: var(--ej-muted);
	font-size: 0.84rem;
}

.esamjudo-portal .ej-area-importe,
.esamjudo-portal .ej-area-tarjeta p.ej-area-importe {
	color: var(--ej-text);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* 🔴 S183 (23/10/2026, visto en pantalla) — Un error dentro de una tarjeta salía
   gris: la regla de arriba le ganaba al rojo de `.ej-area-error`. Medido en «La foto
   es obligatoria…» de Mis datos: rgb(154,164,189) en vez del rojo del de abajo. */
.esamjudo-portal .ej-area-tarjeta p.ej-area-error {
	color: var(--ej-danger-fg);
}

/* 🔵 S183 (23/10/2026, su maqueta a 1440, 1280, 768 y 390) — FORMA DE PAGO: cada
   actividad del grupo en su línea, con su punto, en vez de todas seguidas con «·»;
   y el hermano que ya paga con esa cuenta, con su píldora y sin interruptor. */
.esamjudo-portal .ej-area-tarjeta h4.ej-area-pago-actividades {
	display: grid;
	gap: 4px;
	flex: 1 1 220px;
	min-width: 0;
}
.esamjudo-portal .ej-area-pago-actividades__una {
	position: relative;
	padding-left: 14px;
}
.esamjudo-portal .ej-area-pago-actividades__una::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ej-area-marca, var(--ej-accent, #e6a82a));
}
.esamjudo-portal .ej-area-pago-yausan {
	list-style: none;
	margin: 4px 0 10px;
	padding: 0;
	display: grid;
	gap: 6px;
}
.esamjudo-portal .ej-area-pago-yausan li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--ej-text);
	font-size: 0.82rem;
	font-weight: 600;
}

/* 🔴🔴 S183 (23/10/2026) — EL AVISO DE UN CAMPO, DEBAJO DE ÉL Y EN ROJO, en todos
   los formularios del área (ejAreaComprobarFormulario de esamjudo-public.js). El
   mismo aviso, el mismo borde y el mismo asterisco que la renovación
   (`.ej-rn-campo-error`, `.ej-rn-req` de esamjudo-area-renovar.css, que solo se
   carga en la renovación). */
.esamjudo-portal .ej-area-campo-error,
.esamjudo-portal .ej-area-tarjeta p.ej-area-campo-error {
	margin: 6px 0 0;
	padding: 8px 12px;
	border-radius: 8px;
	background: var(--ej-danger-bg);
	color: var(--ej-danger-fg);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.35;
}
.esamjudo-portal .ej-area-form input.is-error,
.esamjudo-portal .ej-area-form select.is-error,
.esamjudo-portal .ej-area-form textarea.is-error {
	border-color: var(--ej-danger-fg);
}
.esamjudo-portal .ej-area-req,
.esamjudo-portal .ej-area-form .ej-rn-req {
	color: var(--ej-danger-fg);
}

/* S183: y el «No has cambiado nada» de Forma de pago, con el color del texto. */
.esamjudo-portal .ej-area-tarjeta p.ej-area-sin-cambios {
	color: var(--ej-text);
}

/* ── Datos en filas: el nombre a la izquierda, el valor a la derecha ── */
.esamjudo-portal .ej-area-datos {
	margin: 0;
}

.ej-area-datos > div {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid var(--ej-border);
	font-size: 0.86rem;
}

.ej-area-datos > div:last-child {
	border-bottom: 0;
}

.esamjudo-portal .ej-area-datos dt {
	margin: 0;
	color: var(--ej-muted);
	font-weight: 400;
}

.esamjudo-portal .ej-area-datos dd {
	margin: 0;
	color: var(--ej-text);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.esamjudo-portal .ej-area-datos__nota {
	display: block;
	color: var(--ej-muted);
	font-size: 0.78rem;
	font-weight: 400;
}

/* ── Documentos: dos columnas de filas finas ── */
.ej-area-dos-col {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 24px;
	align-items: start;
}

.esamjudo-portal .ej-area-etiqueta {
	margin: 0 0 4px;
	color: var(--ej-muted);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.esamjudo-portal .ej-area-etiqueta--sep {
	margin-top: 18px;
}

.esamjudo-portal .ej-area-grupo {
	margin: 12px 0 0;
	color: var(--ej-text);
	font-size: 0.8rem;
	font-weight: 700;
}

/* 🔴 S147 (16/09/2026, el cliente) — LOS DOCUMENTOS, AGRUPADOS EN ACORDEONES COMO
   EN LA PESTAÑA «ARCHIVOS» DE LA FICHA DEL ALUMNO. Se miró juntos en la web local:
   allí cada inscripción es un acordeón cerrado, con la actividad y el centro en el
   título y debajo dos etiquetas (temporada y tipo). Aquí igual, y **cerrados por
   defecto**, que es la regla del plugin. */
.esamjudo-portal .ej-area-grupo-doc {
	margin-top: 10px;
	border: 1px solid var(--ej-border);
	border-radius: var(--ej-area-radio);
	background: var(--ej-card);
}

.esamjudo-portal .ej-area-grupo-doc > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding: 10px 12px;
	cursor: pointer;
	color: var(--ej-text);
	font-size: 0.82rem;
	font-weight: 700;
	list-style: none;
}

/* La flecha, del lado del texto y girando al abrir (como el resto del área). */
.esamjudo-portal .ej-area-grupo-doc > summary::-webkit-details-marker {
	display: none;
}

.esamjudo-portal .ej-area-grupo-doc > summary::before {
	content: "›";
	display: inline-block;
	transition: transform .15s ease;
	color: var(--ej-muted);
	font-size: 1.1em;
}

.esamjudo-portal .ej-area-grupo-doc[open] > summary::before {
	transform: rotate(90deg);
}

.esamjudo-portal .ej-area-grupo-doc__titulo {
	text-transform: uppercase;
	letter-spacing: .02em;
}

.esamjudo-portal .ej-area-grupo-doc__etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.esamjudo-portal .ej-area-grupo-doc__cuerpo {
	padding: 0 12px 10px;
	border-top: 1px solid var(--ej-border);
}

.ej-area-fila {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 10px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--ej-border);
	color: var(--ej-text);
	font-size: 0.86rem;
}

.ej-area-fila:last-child {
	border-bottom: 0;
}

.ej-area-fila__que {
	min-width: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.ej-area-fila__que small {
	display: block;
	color: var(--ej-muted);
	font-size: 0.76rem;
	font-weight: 400;
}

.esamjudo-portal .ej-area-fila__que small.ej-area-fila__perdido {
	color: var(--ej-danger-fg);
	font-weight: 600;
}

.ej-area-fila__acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
}

.ej-area-fila__estado {
	color: var(--ej-muted);
	font-size: 0.78rem;
	font-weight: 600;
	text-align: right;
}

/* ── Subpestañas de Inscripciones (S146): un control de pastillas, más ligero
      que las pestañas de arriba; Renovar va en dorado ── */
.ej-area-subpestanas {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 2px;
	scrollbar-width: thin;
}

.esamjudo-portal a.ej-area-sub,
.esamjudo-portal a.ej-area-sub:hover {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border: 1px solid var(--ej-border);
	border-radius: 999px;
	background: var(--ej-card);
	color: var(--ej-text);
	font-size: 0.84rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

.esamjudo-portal a.ej-area-sub:hover {
	border-color: var(--ej-area-marca);
}

.esamjudo-portal a.ej-area-sub--oro {
	border-color: var(--ej-accent);
	background: var(--ej-warning-bg);
}

.esamjudo-portal a.ej-area-sub.is-activa {
	border-color: var(--ej-area-marca);
	background: var(--ej-area-marca);
	color: var(--ej-area-boton-texto);
}

.ej-area-sub__cuenta {
	padding: 0 7px;
	border-radius: 999px;
	background: var(--ej-surface-2);
	color: var(--ej-muted);
	font-size: 0.7rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* S161 (dicho por él): las filas de pestañas se deslizan con el dedo y la elegida se
   centra sola, así que la barra gris de desplazamiento sobra. */
.ej-area-pestanas,
.ej-area-subpestanas,
.ej-rn-subtabs {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.ej-area-pestanas::-webkit-scrollbar,
.ej-area-subpestanas::-webkit-scrollbar,
.ej-rn-subtabs::-webkit-scrollbar {
	display: none;
}

/* S161 (idea suya): la temporada a la que se renueva, dentro de la pestaña «Renovar». */
.ej-area-sub__temporada {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.esamjudo-portal a.ej-area-sub.is-activa .ej-area-sub__cuenta {
	background: rgba(255, 255, 255, .22);
	color: var(--ej-area-boton-texto);
}

.ej-area-subpanel {
	display: grid;
	gap: 12px;
	min-width: 0;
}

.ej-area-subpanel[hidden],
.ej-area-hist-grupo[hidden],
.ej-area-hist-fila[hidden] {
	display: none;
}

/* ── Historial: filtro por tipo y filas finas por temporada ── */
.ej-area-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.esamjudo-portal button.ej-area-filtro {
	padding: 4px 11px;
	border: 1px solid var(--ej-border);
	border-radius: 999px;
	background: var(--ej-surface-3);
	color: var(--ej-text);
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
}

.esamjudo-portal button.ej-area-filtro[aria-pressed="true"] {
	border-color: var(--ej-area-marca);
	background: var(--ej-card);
	color: var(--ej-area-marca);
}

.ej-area-hist-grupo {
	display: grid;
	gap: 8px;
}

.esamjudo-portal .ej-area-temporada {
	margin: 6px 0 0;
	color: var(--ej-muted);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.ej-area-hist-fila {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 6px 14px;
	align-items: center;
	padding: 10px 12px;
	border: 1px solid var(--ej-border);
	border-radius: 8px;
	background: var(--ej-surface-3);
	color: var(--ej-text);
	font-size: 0.86rem;
}

.ej-area-hist-fila__que {
	min-width: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.ej-area-hist-fila__que small {
	display: block;
	color: var(--ej-muted);
	font-size: 0.76rem;
	font-weight: 400;
}

.ej-area-hist-fila__acc {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

/* ── Aviso de «cambio guardado» ── */
.esamjudo-portal .ej-area-aviso--ok {
	margin: 0;
	background: var(--ej-success-bg);
	color: var(--ej-success-fg);
}

/* ── Formularios del área (S146): los campos y el interruptor del alta por la
      web, con la marca del área. Van con `.esamjudo-portal` delante porque el
      tema del club pone alto y márgenes a los campos. ── */
.ej-area-form {
	display: grid;
	gap: 12px;
	min-width: 0;
}

.ej-area-campos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px 16px;
}

.ej-area-campo {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

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

/* El `display: flex` de arriba le ganaba al atributo `hidden`: «Parentesco
   (otro)» salía sin haber elegido «Otro» (visto en la captura a 390). */
.ej-area-campo[hidden],
.ej-area-campos[hidden] {
	display: none;
}

.esamjudo-portal .ej-area-campo label {
	margin: 0 0 6px;
	color: var(--ej-text);
	font-size: 0.83rem;
	font-weight: 600;
}

.esamjudo-portal .ej-area-campo input,
.esamjudo-portal .ej-area-campo select,
.esamjudo-portal .ej-area-campo textarea {
	width: 100%;
	box-sizing: border-box;
	/* 16 px: por debajo, el iPhone hace zoom al tocar el campo. */
	font-size: 16px;
	font-family: inherit;
	line-height: 1.2;
	/* El tema pone `height: 40px` a los campos y recorta las letras (S104). */
	height: auto;
	min-height: 38px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--ej-field-border);
	border-radius: 9px;
	background: var(--ej-input-bg);
	color: var(--ej-text);
}

.esamjudo-portal .ej-area-campo textarea {
	min-height: 84px;
	resize: vertical;
}

.esamjudo-portal .ej-area-campo input:focus,
.esamjudo-portal .ej-area-campo select:focus,
.esamjudo-portal .ej-area-campo textarea:focus {
	outline: 2px solid var(--ej-area-marca);
	outline-offset: 1px;
	border-color: var(--ej-area-marca);
}

.esamjudo-portal .ej-area-campo input[readonly] {
	background: var(--ej-surface-2);
	color: var(--ej-muted);
}

/* 🔵 S147 (16/09/2026, el cliente) — FORMA DE PAGO: EL NOMBRE DEL BANCO DEBAJO DEL
   IBAN. Reconocido, con el color y el peso del texto, porque es un dato; no
   reconocido, en el gris de las notas, porque entonces lo que importa es el campo
   que se abre justo debajo para escribirlo. */
.esamjudo-portal .ej-area-banco {
	margin: 6px 0 0;
	color: var(--ej-text);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.4;
}

.esamjudo-portal .ej-area-banco--sin {
	color: var(--ej-muted);
	font-weight: 400;
}

/* S177 (visto en pantalla): al pedir una cuenta nueva el nombre del banco de la
   anterior se quedaba al lado del IBAN vacío; la pantalla lo escondía, pero otra
   regla le daba `display` y ganaba al atributo `hidden`. */
.esamjudo-portal .ej-area-banco[hidden] {
	display: none !important;
}

/* 🔵 S147 (16/09/2026, el cliente) — LAS CUENTAS QUE LA FAMILIA YA TIENE.
   Una tarjeta por cuenta, con los cuatro últimos números, el titular y dónde se
   usa; las del propio alumno resaltadas, como en el panel (S96). Al final,
   siempre, «Usar una cuenta nueva». */
.esamjudo-portal .ej-area-cuentas {
	display: grid;
	gap: 8px;
	margin-bottom: 4px;
}

.esamjudo-portal .ej-area-cuentas[hidden] {
	display: none;
}

.esamjudo-portal .ej-area-cuentas__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 8px;
}

.esamjudo-portal .ej-area-cuenta {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--ej-field-border);
	border-radius: var(--ej-area-radio);
	background: var(--ej-input-bg);
	cursor: pointer;
}

.esamjudo-portal .ej-area-cuenta--propia {
	border-color: var(--ej-area-marca);
}

.esamjudo-portal .ej-area-cuenta:has( input:checked ) {
	border-color: var(--ej-area-marca);
	box-shadow: 0 0 0 2px var(--ej-area-marca) inset;
}

.esamjudo-portal .ej-area-cuenta input {
	margin: 2px 0 0;
	flex: 0 0 auto;
}

.esamjudo-portal .ej-area-cuenta__texto {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.esamjudo-portal .ej-area-cuenta__iban {
	color: var(--ej-text);
	font-size: 0.88rem;
	font-weight: 700;
}

.esamjudo-portal .ej-area-cuenta__titular {
	color: var(--ej-text);
	font-size: 0.82rem;
}

.esamjudo-portal .ej-area-cuenta__nota {
	color: var(--ej-muted);
	font-size: 0.78rem;
	line-height: 1.4;
}

/* S147: la papelera de cada cuenta, como en el panel: arriba a la derecha de la
   tarjeta, apagada hasta que se pasa por encima, y en el color de peligro. */
.esamjudo-portal .ej-area-cuenta__quitar {
	margin-left: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	color: var(--ej-muted);
	cursor: pointer;
}

.esamjudo-portal .ej-area-cuenta__quitar:hover,
.esamjudo-portal .ej-area-cuenta__quitar:focus-visible {
	color: var(--ej-danger-fg);
	background: var(--ej-surface-2);
	outline: none;
}

/* 🔵 S147 (16/09/2026, el cliente): «cuando se ha elegido Domiciliación bancaria,
   que se vean los datos de la cuenta en una tarjeta al lado de la que hay». Dos
   tarjetas en fila por actividad de escritorio y MacBook para arriba; en móvil y
   tablet, una debajo de otra. Si no hay domiciliación, el grupo trae una sola
   tarjeta y `:has()` deja la fila a lo ancho, sin media tarjeta vacía al lado.
   Mismo recurso que las dos columnas de Inscripciones. */
.esamjudo-portal .ej-area-grupo-pago {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-bottom: 16px;
}

@media (min-width: 1100px) {
	.esamjudo-portal .ej-area-grupo-pago:has( > .ej-area-tarjeta:nth-of-type(2) ) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}
}

/* 🔴 S147 (16/09/2026, el cliente): «en escritorio y MacBook, ya que hay espacio de
   sobra, ponlo al lado del IBAN el nombre de la entidad bancaria». De 1100 px para
   arriba —el mismo corte con el que el área se pone al 85 %— el campo se reparte en
   dos: el IBAN a la izquierda y el nombre a su derecha, a la misma altura. Por
   debajo de ese ancho no se toca nada: sigue debajo, apilado, que es donde cabe. */
@media (min-width: 1100px) {
	.esamjudo-portal .ej-area-campo--iban {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		grid-template-areas:
			"etiqueta etiqueta"
			"campo    banco";
		column-gap: 14px;
		align-items: center;
	}

	.esamjudo-portal .ej-area-campo--iban > label { grid-area: etiqueta; }
	.esamjudo-portal .ej-area-campo--iban > input { grid-area: campo; }

	/* Sin margen arriba: aquí ya no va debajo, va al lado y centrado con el campo. */
	.esamjudo-portal .ej-area-campo--iban > .ej-area-banco {
		grid-area: banco;
		margin: 0;
	}
}

/* 🔵 S147 (16/09/2026, el cliente) — MIS DATOS › DIRECCIÓN: MANDA EL CÓDIGO POSTAL.
   El desplegable de localidades y el recuadro para dar de alta un código que no
   está en el listado. Las fichas de color son las del portal: las del alta
   (`.ej-alta .ej-alta__cp-nuevo`) no llegan aquí dentro. */
.esamjudo-portal .ej-area-localidades {
	margin-top: 6px;
}

.esamjudo-portal .ej-area-cp-nuevo {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 14px;
	background: var(--ej-surface-2);
	border: 1px solid var(--ej-border);
	border-radius: var(--ej-area-radio);
}

/* El `display: flex` de arriba le gana al atributo `hidden`, como le pasó a
   «Parentesco (otro)» en la S146: sin esto, el recuadro saldría siempre. */
.esamjudo-portal .ej-area-cp-nuevo[hidden] {
	display: none;
}

.esamjudo-portal .ej-area-cp-nuevo__msg {
	margin: 0;
	color: var(--ej-muted);
	font-size: 0.82rem;
	line-height: 1.5;
}

/* 🔴 S147 (16/09/2026, visto en captura a 1536) — SE REPARTE POR EL ANCHO DEL
   RECUADRO, NO POR EL DE LA VENTANA.
   Esto estaba en tres columnas a partir de 700 px de ventana, y salía mal: el
   recuadro no vive en la ventana, vive dentro de una tarjeta de unos 590 px, así
   que con el navegador ancho las tres columnas se apretaban y partían los textos
   («Nombre de la lo…» y «— Selecciona –»). Con `auto-fit` las columnas se cuentan
   por el sitio que hay de verdad, y los botones se van a su propia línea en
   cuanto no quepan al lado. Sin consultas de medios y sin recortes a ningún ancho. */
.esamjudo-portal .ej-area-cp-nuevo__fila {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	align-items: end;
}

.esamjudo-portal .ej-area-cp-nuevo__botones {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Con el código postal encontrado, la provincia no se cambia a mano. Un
   desplegable no admite `readonly`, así que se pinta como el campo de localidad
   —que sí lo lleva— y se apaga. */
.esamjudo-portal .ej-area-campo select.ej-area-solo-lectura {
	background: var(--ej-surface-2);
	color: var(--ej-muted);
	pointer-events: none;
}

/* El interruptor: la casilla de verdad debajo, invisible pero viva, y lo que
   se ve es la pista. El mismo componente que el alta por la web. */
.esamjudo-portal .ej-interruptor {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--ej-text);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

.esamjudo-portal .ej-interruptor input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.esamjudo-portal .ej-interruptor__pista {
	position: relative;
	flex: 0 0 44px;
	width: 44px;
	height: 24px;
	border-radius: 999px;
	background: var(--ej-field-border);
	transition: background-color .15s ease;
}

.esamjudo-portal .ej-interruptor__pista::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
	transition: transform .15s ease;
}

.esamjudo-portal .ej-interruptor input:checked + .ej-interruptor__pista {
	background: var(--ej-area-marca);
}

.esamjudo-portal .ej-interruptor input:checked + .ej-interruptor__pista::after {
	transform: translateX(20px);
}

.esamjudo-portal .ej-interruptor input:focus-visible + .ej-interruptor__pista {
	outline: 2px solid var(--ej-accent);
	outline-offset: 2px;
}

.esamjudo-portal .ej-interruptor input:disabled + .ej-interruptor__pista {
	opacity: .55;
}

.esamjudo-portal .ej-interruptor:has( input:disabled ) {
	cursor: not-allowed;
}

.ej-interruptor__texto {
	min-width: 0;
}

/* El título de una pestaña que no va en tarjeta (Contactos). */
.esamjudo-portal .ej-area-titulo {
	margin: 0;
	color: var(--ej-text);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Desplegables del área: cerrados por defecto (ley de los acordeones). El
   rótulo se lee como un enlace de la marca, con su flecha. */
.ej-area-desplegable {
	display: grid;
	gap: 10px;
	min-width: 0;
}

.esamjudo-portal .ej-area-desplegable > summary {
	display: flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	color: var(--ej-area-marca);
	font-size: 0.86rem;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.esamjudo-portal .ej-area-desplegable > summary::-webkit-details-marker {
	display: none;
}

.esamjudo-portal .ej-area-desplegable > summary::before {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform .15s ease;
}

.esamjudo-portal .ej-area-desplegable[open] > summary::before {
	transform: rotate(45deg);
}

.esamjudo-portal .ej-area-desplegable > summary:focus-visible {
	outline: 2px solid var(--ej-accent);
	outline-offset: 2px;
}

/* La confirmación antes de guardar: dentro del formulario, sin ventanas. */
.ej-area-confirmacion {
	display: grid;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--ej-area-radio);
	background: var(--ej-warning-bg);
	color: var(--ej-warning-fg);
	font-size: 0.88rem;
}

.ej-area-confirmacion[hidden] {
	display: none;
}

.esamjudo-portal .ej-area-confirmacion p {
	margin: 0;
	color: inherit;
	font-size: inherit;
}

/* S146: en Accesos cada tutor es una fila que se confirma entera; la confirmación
   ocupa la fila de lado a lado, debajo del nombre y del interruptor. */
.esamjudo-portal .ej-area-fila > .ej-area-confirmacion {
	grid-column: 1 / -1;
}

@media (max-width: 520px) {
	.ej-area-hist-fila {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.ej-area-hist-fila__acc {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}
}

@media (max-width: 860px) {
	.ej-area-dos-col {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* S146 — Bonificaciones: las cuentas de cada cuota, con los importes a la derecha
   y en dos columnas también en el móvil, para que se lean como una suma. */
.esamjudo-portal .ej-area-datos--cuentas > div {
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
}

.esamjudo-portal .ej-area-datos--cuentas dd {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.esamjudo-portal .ej-area-datos--cuentas > .ej-area-datos__total {
	align-items: baseline;
	border-top: 1px solid var(--ej-border);
}

.esamjudo-portal .ej-area-datos--cuentas > .ej-area-datos__total dt {
	color: var(--ej-text);
	font-weight: 700;
}

@media (max-width: 520px) {
	.esamjudo-portal.ej-area {
		padding: 16px;
	}

	.ej-area-datos > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.ej-area-fila {
		grid-template-columns: minmax(0, 1fr);
	}

	.ej-area-fila__acciones {
		justify-content: flex-start;
	}

	.ej-area-fila__estado {
		text-align: left;
	}
}

.esamjudo-portal-aviso-plazo {
	padding: 10px 12px;
	background: #e7f1fb;
	border: 1px solid #a9c9e8;
	border-radius: 4px;
	font-size: 0.92rem;
	color: #1e3a5f;
}

.esamjudo-portal-aviso-plazo--warning {
	background: #fff7e6;
	border-color: #f0d28a;
	color: #6b4e00;
}

.esamjudo-form-actions {
	margin: 8px 0 16px;
}

.esamjudo-btn-submit {
	display: inline-block;
	padding: 12px 28px;
	background: #1d3b5e;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	cursor: pointer;
}

.esamjudo-btn-submit:hover {
	background: #16304d;
}

.esamjudo-form-mensaje {
	margin-top: 8px;
	padding: 12px 14px;
	border-radius: 4px;
	font-size: 0.95rem;
}

.esamjudo-msg-error {
	background: #fde8e8;
	border: 1px solid #f5a9a9;
	color: #8a1c1c;
}

.esamjudo-msg-info {
	background: #e9f1fb;
	border: 1px solid #b9d3f0;
	color: #1d3b5e;
}

.esamjudo-msg-success {
	background: #e6f4ea;
	border: 1px solid #a9d8b9;
	color: #1c6b34;
}

.esamjudo-aviso {
	padding: 14px 16px;
	background: #f3f6f9;
	border: 1px solid #d7e0e8;
	border-radius: 4px;
}

/* Resumen de cuota en vivo */
.esamjudo-resumen {
	border: 1px solid #1d3b5e;
	border-radius: 6px;
	padding: 18px 22px;
	margin: 0 0 20px;
	background: #f7f9fc;
}

.esamjudo-resumen-titulo {
	margin: 0 0 12px;
	font-size: 1.05rem;
}

.esamjudo-resumen-linea {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	font-size: 1rem;
}

.esamjudo-resumen-descuento {
	color: #1c6b34;
}

.esamjudo-resumen-total {
	border-top: 1px solid #c9d4e2;
	margin-top: 6px;
	padding-top: 10px;
	font-weight: 700;
	font-size: 1.15rem;
}

.esamjudo-resumen-nota {
	margin: 10px 0 0;
	font-size: 0.88rem;
	color: #666;
}

/* Precios y ahorros en contexto (junto a cada opción) */
.esamjudo-precio-opcion {
	margin-left: 8px;
	font-weight: 600;
	color: #1d3b5e;
}

.esamjudo-precio-opcion:empty,
.esamjudo-descuento-opcion:empty {
	margin-left: 0;
}

.esamjudo-descuento-opcion {
	margin-left: 8px;
	font-weight: 600;
	color: #1c6b34;
}

/* Portal Privado (Fase 4 — Paso 4.2) */
.esamjudo-portal {
	max-width: 920px;
}

/* 🔴 S146 (15/09/2026, el cliente) — EL ÁREA DEL ALUMNO O DEL TUTOR, AL 100 % EN MÓVIL Y
   TABLET Y AL 85 % EN ESCRITORIO Y MACBOOK, «respetando los rellenos que hay ahora mismo».
   Mismo recurso que el asistente del alta (`.ej-alta-wrap`): salirse del contenedor del
   tema, que pisa el ancho de todo lo que cuelga de su contenido (por eso la clase va
   repetida y se usa `width` además de `max-width`). El corte en 1100 px de ventana es el
   del alta: una tablet apaisada (1024 px) va al 100 %. Los rellenos de la hoja no se tocan. */
.esamjudo-portal.ej-area.ej-area {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc( 50% - 50vw );
	border-radius: 0;
	border-left: 0;
	border-right: 0;
}

@media (min-width: 1100px) {
	.esamjudo-portal.ej-area.ej-area {
		width: 85vw;
		max-width: 85vw;
		margin-inline: calc( 50% - 42.5vw );
		border-radius: 14px;
		border-left: 1px solid var(--ej-border);
		border-right: 1px solid var(--ej-border);
		/* 🔴 S147 (16/09/2026, el cliente, mirando su portátil): «el bloque está
		   totalmente pegado a la cabecera, habría que separarlo por lo menos en
		   escritorio y MacBook unos 80px». Va dentro de esta misma consulta de
		   medios —la del 85 % de ancho— para que en móvil y tablet no cambie
		   nada: ahí el bloque va al 100 % y pegado, que es lo que se decidió.
		   Es margen, no relleno: los rellenos de la hoja no se tocan (S146). */
		margin-top: 80px;
	}
}

html:has( .esamjudo-portal.ej-area ),
body:has( .esamjudo-portal.ej-area ) {
	overflow-x: clip;
}

.esamjudo-portal-cabecera {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 18px;
}

.esamjudo-portal-titulo {
	margin: 0 0 4px;
}

.esamjudo-portal-salir {
	flex-shrink: 0;
	padding: 8px 16px;
	border: 1px solid #c4c4c4;
	border-radius: 4px;
	color: #1d3b5e;
	text-decoration: none;
	font-size: 0.9rem;
}

.esamjudo-portal-salir:hover {
	background: #f3f6f9;
}

.esamjudo-portal-datos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 24px;
	margin: 0;
}

.esamjudo-portal-datos dt {
	font-size: 0.82rem;
	color: #666;
	margin-bottom: 2px;
}

.esamjudo-portal-datos dd {
	margin: 0;
	font-weight: 500;
}

.esamjudo-portal-dato-ancho {
	grid-column: 1 / -1;
}

/* El historial es más ancho que la caja en pantallas estrechas, así que hace
   scroll DENTRO de su envoltorio. `min-width: 0` no es cosmético: un
   <fieldset> se ensancha con su contenido por defecto, de modo que este
   overflow no llegaba a activarse nunca y la tabla se salía del recuadro —se
   veía al pintar el fondo en S94, sobre el blanco del tema. */
.esamjudo-portal-tabla-wrap {
	overflow-x: auto;
	max-width: 100%;
}

.esamjudo-form .esamjudo-fieldset,
.esamjudo-portal .esamjudo-fieldset {
	min-width: 0;
}

.esamjudo-portal-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.esamjudo-portal-tabla th,
.esamjudo-portal-tabla td {
	padding: 9px 10px;
	border-bottom: 1px solid #e2e2e2;
	text-align: left;
	white-space: nowrap;
}

.esamjudo-portal-tabla th {
	color: #555;
	font-weight: 600;
	background: #f7f9fc;
}

/* Formulario de Renovación dentro del Portal Privado (Fase 4 — Paso 4.3) */
.esamjudo-portal-renovacion {
	margin-top: 24px;
}

/* Enlaces de descarga del comprobante en PDF (Fase 4 — Paso 4.4) */
.esamjudo-portal-descarga,
.esamjudo-enlace-descarga {
	color: #1a5fb4;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.esamjudo-portal-descarga:hover,
.esamjudo-enlace-descarga:hover {
	text-decoration: underline;
}

.esamjudo-enlace-descarga {
	display: inline-block;
	margin-top: 6px;
}

/* Documentos del alumno en el Portal Privado (S33): agrupados por
 * inscripción, en tarjetas dentro de una rejilla (no apiladas a ancho
 * completo, para que no crezcan en altura con varios documentos). */
.ej-portal-doc-grupo { margin-bottom: 20px; }
.ej-portal-doc-grupo:last-of-type { margin-bottom: 0; }
.ej-portal-doc-grupo h4 {
	font-size: 0.92rem;
	font-weight: 600;
	margin: 0 0 10px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #333;
}
.ej-portal-doc-lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}
.ej-portal-doc-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px;
	border: 1px solid #d7d7d7;
	border-radius: 8px;
	background: #fff;
}
.ej-portal-doc-row__meta { display: flex; flex-direction: column; gap: 2px; }
.ej-portal-doc-row__meta strong { font-size: 0.9rem; overflow-wrap: break-word; }
.ej-portal-doc-row__meta span { font-size: 0.78rem; color: #666; }
/* A75 (S88): el documento consta en la ficha pero su fichero ya no está. */
.ej-portal-doc-row__meta span.ej-portal-doc-row__perdido { color: #b42318; font-weight: 600; }
.ej-portal-doc-row__acciones { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ej-portal-doc-row__acciones a {
	color: #1a5fb4;
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
}
.ej-portal-doc-row__acciones a:hover { text-decoration: underline; }
.ej-portal-btn-compartir {
	background: none;
	border: 1px solid #1a5fb4;
	color: #1a5fb4;
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 0.8rem;
	cursor: pointer;
	font-family: inherit;
}
.ej-portal-btn-compartir:hover { background: rgba(26, 95, 180, .08); }

.ej-portal-doc-enlace-resultado {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid #d7d7d7;
	border-radius: 8px;
	background: #f7f9fc;
}
.ej-portal-doc-enlace-resultado p { margin: 0 0 6px; font-size: 0.85rem; color: #555; }
.ej-portal-doc-enlace-resultado p:not(:first-child) { margin-top: 10px; }
.ej-portal-doc-enlace-campo { display: flex; gap: 8px; }
.ej-portal-doc-enlace-campo input {
	flex: 1;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid #d7d7d7;
	border-radius: 6px;
	font-family: monospace;
}
/* ══════════════════════════════════════════════════════════════════════════
 * TOKENS DE COLOR — LOS MISMOS QUE EL PANEL
 * Indicación del cliente (S94): la parte pública **no tiene paleta propia**.
 * Estos son los tokens de `admin/css/esamjudo-cat.css` con sus valores
 * exactos: los claros aquí, y los oscuros en el bloque de más abajo. Antes el
 * modo oscuro público iba por libre (otros azules, otros bordes) y además no
 * pintaba ningún fondo, así que quedaba texto claro sobre el blanco del tema.
 * ══════════════════════════════════════════════════════════════════════════ */
.esamjudo-form-wrap,
.esamjudo-portal,
/* S103: el alta nueva pública bebe de los MISMOS tokens. Se añade aquí y no
   con una paleta propia por la indicación del cliente en S94 — la parte
   pública no tiene colores propios— y porque así hereda gratis el modo
   oscuro de más abajo. Medido en pantalla: sin esta línea, `var(--ej-card)`
   y `var(--ej-border)` no resolvían, y el asistente salía sin fondo, sin
   borde y con los botones transparentes. */
.ej-alta-wrap,
/* S144 (pregunta 47): el aviso de plazo abierto de la portada, por lo mismo. */
.ej-aviso-plazo,
/* S149: y el aviso de «vamos a firmar» del área, que también cuelga del body y
   fuera de la caja del portal. Medido en pantalla el 17/09/2026: sin esta línea
   salía transparente, con el texto del área leyéndose por debajo. */
.ej-area-yendo-a-firmar,
/* S162: y la caja de confirmar y de aviso de la parte pública (esamjudo-confirmar.js). */
.ej-confirmar,
/* S169: y la ventana de ayuda (esamjudo-ayuda.js), con los mismos colores. */
.ej-ayuda-modal {
	--ej-brand:        #1f2d50;
	--ej-brand-2:      #33457a;
	--ej-accent:       #d8a13a;

	/* El gris del panel (#f4f6fa) resultaba demasiado marcado en la web
	   pública, donde el bloque va sobre el fondo del tema del club: aquí se
	   usa un gris mucho más claro, casi blanco, para que la caja se note sin
	   ensuciar la página (indicación del cliente, S94). En oscuro sí se usa el
	   mismo fondo que el panel. */
	--ej-bg:           #fcfdfe;
	--ej-card:         #ffffff;
	--ej-surface-2:    #f0f3f9;
	--ej-surface-3:    #f7f9fc;
	--ej-empty-bg:     #fafbfe;
	--ej-preview-bg:   #f0f6fc;

	--ej-border:       #e2e6ee;
	--ej-field-border: #6e747c;
	--ej-input-bg:     #ffffff;
	--ej-text:         #1d2433;
	--ej-muted:        #6b7385;

	--ej-danger-bg:    #fdecec;
	--ej-danger-fg:    #b32d2e;
	--ej-success-bg:   #d1fae5;
	--ej-success-fg:   #065f46;
	--ej-warning-bg:   #fef3e2;
	--ej-warning-fg:   #92620a;

	--ej-link:         #2271b1;
	--ej-link-hover:   #135e96;

	--ej-radius-sm:    6px;
}

/* S144 (14/09/2026, el cliente) — EL SELECTOR DE TEMA DEL ALTA.
   Con él elegido, manda él y no el sistema: `data-theme` lo pone el propio
   formulario antes de pintarse. Son los mismos valores oscuros de abajo; la regla
   del sistema se aparta cuando alguien ha elegido «claro». */
.ej-alta-wrap[data-theme="dark"],
.ej-confirmar[data-theme="dark"], /* S162: la caja de confirmar sigue el tema que se eligió en el alta. */
.ej-ayuda-modal[data-theme="dark"] { /* S169: y la ventana de ayuda, igual. */
	--ej-bg:           #121826;
	--ej-card:         #1b2233;
	--ej-surface-2:    #232c42;
	--ej-surface-3:    #202840;
	--ej-empty-bg:     #1a2031;
	--ej-preview-bg:   #1e2940;

	--ej-border:       #2c3550;
	--ej-field-border: #56607a;
	--ej-input-bg:     #141a29;
	--ej-text:         #e7eaf3;
	--ej-muted:        #9aa4bd;

	--ej-danger-bg:    rgba(179, 45, 46, .20);
	--ej-danger-fg:    #f1a4a4;
	--ej-success-bg:   rgba(74, 222, 128, .15);
	--ej-success-fg:   #6ee7b7;
	--ej-warning-bg:   rgba(240, 184, 73, .18);
	--ej-warning-fg:   #f0b849;

	--ej-link:         #72aee6;
	--ej-link-hover:   #a7d0f2;

	color-scheme: dark;
}

/* ══════════════════════════════════════════════════════════════════════════
 * DARK MODE — @media (prefers-color-scheme: dark)
 * Se aplica cuando el sistema operativo / navegador del usuario está en oscuro.
 * Los valores son los de `.esamjudo-cat[data-theme="dark"]`, sin inventar
 * ninguno: mismo fondo, mismas superficies, mismos bordes y mismos textos que
 * el panel.
 * ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {

	/* ── Tokens: overrides oscuros del panel ─────────────────────────────── */
	.esamjudo-form-wrap,
	.esamjudo-portal,
	.ej-alta-wrap:not([data-theme="light"]), /* S144: si en el alta se eligió «claro», manda eso. */
	.ej-aviso-plazo,
	.ej-area-yendo-a-firmar, /* S149: el aviso de «vamos a firmar» del área. */
	.ej-confirmar:not([data-theme="light"]), /* S162: la caja de confirmar de la parte pública. */
	.ej-ayuda-modal:not([data-theme="light"]) { /* S169: y la ventana de ayuda. */
		--ej-bg:           #121826;
		--ej-card:         #1b2233;
		--ej-surface-2:    #232c42;
		--ej-surface-3:    #202840;
		--ej-empty-bg:     #1a2031;
		--ej-preview-bg:   #1e2940;

		--ej-border:       #2c3550;
		--ej-field-border: #56607a;
		--ej-input-bg:     #141a29;
		--ej-text:         #e7eaf3;
		--ej-muted:        #9aa4bd;

		--ej-danger-bg:    rgba(179, 45, 46, .20);
		--ej-danger-fg:    #f1a4a4;
		--ej-success-bg:   rgba(74, 222, 128, .15);
		--ej-success-fg:   #6ee7b7;
		--ej-warning-bg:   rgba(240, 184, 73, .18);
		--ej-warning-fg:   #f0b849;

		--ej-link:         #72aee6;
		--ej-link-hover:   #a7d0f2;

		color-scheme: dark;
	}

	/* ── Fieldsets y tarjetas ────────────────────────────────────────────── */
	.esamjudo-form .esamjudo-fieldset {
		background: var(--ej-card);
		border-color: var(--ej-border);
	}

	.esamjudo-form legend,
	.esamjudo-field label,
	.esamjudo-field .esamjudo-label {
		color: var(--ej-text);
	}

	/* ── Campos de formulario ────────────────────────────────────────────── */
	.esamjudo-field input[type="text"],
	.esamjudo-field input[type="email"],
	.esamjudo-field input[type="tel"],
	.esamjudo-field input[type="date"],
	.esamjudo-field input[type="number"],
	.esamjudo-field select,
	.esamjudo-field textarea {
		background: var(--ej-input-bg);
		color: var(--ej-text);
		border-color: var(--ej-field-border);
	}

	.esamjudo-field select:disabled {
		background: var(--ej-empty-bg);
		color: var(--ej-muted);
	}

	/* ── Asterisco requerido y ayudas ────────────────────────────────────── */
	.esamjudo-req  { color: var(--ej-danger-fg); }
	.esamjudo-help { color: var(--ej-muted); }

	.esamjudo-horario-texto {
		background: var(--ej-preview-bg);
		border-color: var(--ej-border);
		color: var(--ej-text);
	}

	/* ── Avisos ──────────────────────────────────────────────────────────── */
	.esamjudo-aviso-actividad,
	.esamjudo-portal-aviso-plazo--warning,
	.esamjudo-aviso {
		background: var(--ej-warning-bg);
		border-color: var(--ej-warning-fg);
		color: var(--ej-warning-fg);
	}

	.esamjudo-portal-aviso-plazo,
	.esamjudo-msg-info {
		background: var(--ej-preview-bg);
		border-color: var(--ej-border);
		color: var(--ej-link);
	}

	.esamjudo-msg-error {
		background: var(--ej-danger-bg);
		border-color: var(--ej-danger-fg);
		color: var(--ej-danger-fg);
	}

	.esamjudo-msg-success {
		background: var(--ej-success-bg);
		border-color: var(--ej-success-fg);
		color: var(--ej-success-fg);
	}

	/* ── Botón principal ─────────────────────────────────────────────────── */
	.esamjudo-btn-submit {
		background: var(--ej-brand-2);
		color: #fff;
	}
	.esamjudo-btn-submit:hover { background: var(--ej-brand); }

	/* ── Resumen de cuota ────────────────────────────────────────────────── */
	.esamjudo-resumen {
		background: var(--ej-card);
		border-color: var(--ej-border);
		color: var(--ej-text);
	}

	.esamjudo-resumen-descuento { color: var(--ej-success-fg); }
	.esamjudo-resumen-total     { border-top-color: var(--ej-border); }
	.esamjudo-resumen-nota      { color: var(--ej-muted); }

	.esamjudo-precio-opcion    { color: var(--ej-link); }
	.esamjudo-descuento-opcion { color: var(--ej-success-fg); }

	/* ── Portal de la familia ────────────────────────────────────────────── */
	.esamjudo-portal-titulo { color: var(--ej-text); }

	.esamjudo-portal-salir {
		border-color: var(--ej-border);
		color: var(--ej-link);
	}
	.esamjudo-portal-salir:hover { background: var(--ej-surface-3); }

	.esamjudo-portal-datos dt { color: var(--ej-muted); }
	.esamjudo-portal-datos dd { color: var(--ej-text); }

	.esamjudo-portal-tabla td { border-bottom-color: var(--ej-border); }
	.esamjudo-portal-tabla th {
		color: var(--ej-muted);
		background: var(--ej-surface-2);
	}

	.esamjudo-enlace-descarga { color: var(--ej-link); }

	/* ── Documentos del portal ───────────────────────────────────────────── */
	.ej-portal-doc-grupo h4 { color: var(--ej-text); }

	.ej-portal-doc-row {
		background: var(--ej-card);
		border-color: var(--ej-border);
	}

	.ej-portal-doc-row__meta span { color: var(--ej-muted); }
	.ej-portal-doc-row__meta span.ej-portal-doc-row__perdido { color: var(--ej-danger-fg); }
	.ej-portal-doc-row__acciones a { color: var(--ej-link); }
	/* S177 (16/10/2026, dicho por él): en oscuro ningún enlace con el azul
	   que pone el tema de la web. Estos no tenían color propio: el teléfono
	   (telefono_leido() y su gemelo del JS) y el correo de las tarjetas de
	   contacto y de los datos de contacto del área. Van en el azul claro,
	   como el resto de enlaces del área. */
	.esamjudo-portal a.ej-tel-enlace,
	.esamjudo-portal .ej-contacto-card__body dd a,
	.esamjudo-portal .ej-area-contacto__datos dd a { color: var(--ej-link); }

	.ej-portal-btn-compartir {
		border-color: var(--ej-link);
		color: var(--ej-link);
	}
	.ej-portal-btn-compartir:hover { background: var(--ej-surface-3); }

	.ej-portal-doc-enlace-resultado {
		background: var(--ej-surface-3);
		border-color: var(--ej-border);
	}
	.ej-portal-doc-enlace-resultado p { color: var(--ej-muted); }

	.ej-portal-doc-enlace-campo input {
		background: var(--ej-input-bg);
		border-color: var(--ej-border);
		color: var(--ej-text);
	}
}

/* Descuento "Cantidad" (S42): campo numerico en vez de checkbox -- descuento
   = valor x cantidad (p. ej. "5 por cada hermano inscrito"). */
.esamjudo-opcion--cantidad {
	display: flex;
	align-items: center;
	gap: .5em;
}
.esamjudo-opcion--cantidad label {
	display: flex;
	align-items: center;
	gap: .5em;
	flex-wrap: wrap;
}
.esamjudo-opcion--cantidad [data-cantidad-input] {
	width: 4.5em;
	text-align: right;
}

/* ══════════════════════════════════════════════════════════════════════════
 * A80 · FASE 2 (S94) — SIN JUSTIFICANTE NO HAY DESCUENTO
 * El descuento sin papel se ve apagado pero NO escondido: la familia tiene
 * que ver que existe, entender por qué no puede marcarlo, y poder resolverlo
 * ahí mismo adjuntando el documento.
 *
 * Sin colores propios: todo sale de los tokens del panel declarados arriba,
 * así que el claro y el oscuro salen solos.
 * ══════════════════════════════════════════════════════════════════════════ */
.esamjudo-opcion--bloqueada {
	padding: 10px 12px;
	border: 1px dashed var(--ej-border);
	border-radius: var(--ej-radius-sm);
	background: var(--ej-empty-bg);
}

/* S95: el descuento sin papel **ya se puede marcar** (el orden nuevo es marcar →
   subir → si no, se quita solo al enviar), así que dejó de tener sentido
   pintarlo apagado y con el cursor de "prohibido": se podía tocar pero parecía
   que no. Se conserva el recuadro de arriba, que sí ayuda a ver que ese
   descuento tiene algo pendiente. */
.esamjudo-opcion--bloqueada > label {
	cursor: pointer;
}

/* S95 (decisión del cliente): la píldora «Mejor opción» junto al descuento que
   gana. Mismo aspecto y mismos tokens que la del panel
   (`.ej-renov-badge-mejor`), para que la familia y el club vean lo mismo. */
.esamjudo-opcion-mejor {
	display: inline-block;
	margin-left: .5em;
	font-size: .72em;
	font-weight: 600;
	padding: .1em .45em;
	border-radius: 3px;
	line-height: 1.4;
	background: var(--ej-success-bg);
	color: var(--ej-success-fg);
	vertical-align: middle;
}

/* S95: «Hermanos» no es una casilla — se aplica solo. Se alinea con el resto de
   opciones pero sin hueco de casilla, para que se lea como lo que es: algo ya
   concedido, no algo que elegir. */
.esamjudo-opcion--automatica {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* El aviso va SIEMPRE pegado a su descuento y en su propia línea: en el panel
   (S93) un aviso colocado en la columna de al lado acabó leyéndose como si
   fuera de otra cosa. */
.esamjudo-opcion-aviso {
	display: block;
	margin: 4px 0 8px;
	font-size: .9em;
	color: var(--ej-warning-fg);
}

/* El candado dice de un vistazo que está bloqueado A PROPÓSITO. Sin él, un
   descuento apagado y sin más se lee como una avería de la página. */
.esamjudo-opcion-aviso::before {
	content: "🔒 ";
}

.esamjudo-opcion-adjuntar {
	display: flex;
	align-items: center;
	gap: .75em;
	flex-wrap: wrap;
}

/* Dar `display` a un elemento anula el atributo `hidden` del navegador: sin
   esto, esconder el aviso o el botón desde el JS no se notaba en pantalla
   —el dato decía oculto y se seguía viendo—. Visto en una captura, no en el
   DOM, que es donde se veía bien. */
.esamjudo-opcion-aviso[hidden],
.esamjudo-opcion-adjuntar[hidden],
.esamjudo-opcion-estado[hidden] {
	display: none;
}

.esamjudo-btn-adjuntar {
	padding: 6px 14px;
	border: 1px solid var(--ej-field-border);
	border-radius: var(--ej-radius-sm);
	background: var(--ej-card);
	color: var(--ej-text);
	font: inherit;
	font-size: .9em;
	cursor: pointer;
}

.esamjudo-btn-adjuntar:hover:not(:disabled) {
	border-color: var(--ej-text);
}

.esamjudo-btn-adjuntar:disabled {
	opacity: .6;
	cursor: default;
}

/* S144 (q27): «Usar la cámara», al lado de «Adjuntar justificante» y con su
   mismo aspecto; solo se añade el icono delante del texto. */
.esamjudo-btn-camara {
	display: inline-flex;
	align-items: center;
	gap: .4em;
}
.esamjudo-btn-camara svg {
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
}

.esamjudo-opcion-estado {
	font-size: .9em;
}

/* La confirmación de un descuento YA respaldado cuelga directamente de su
   línea: en línea con el texto se partía a mitad de frase y se leía como si
   fuera parte del nombre del descuento. Dentro del bloque de adjuntar (que es
   flex) sí debe quedarse al lado del botón, por eso solo se toca el hijo
   directo. */
.esamjudo-opcion > .esamjudo-opcion-estado {
	display: block;
	margin-top: 4px;
}

.esamjudo-opcion-estado--ok    { color: var(--ej-success-fg); }
.esamjudo-opcion-estado--error { color: var(--ej-danger-fg); }

/* Un descuento de tipo "Cantidad" es una fila horizontal: bloqueado necesita
   partir a varias líneas para que quepan el aviso y el botón. */
.esamjudo-opcion--cantidad.esamjudo-opcion--bloqueada {
	flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LA PUERTA DE ENTRADA DE LAS FAMILIAS (S102)
 *
 * Plantilla elegida por el cliente («v1 onda»), adaptada a los colores del
 * club. Dos columnas en escritorio —bienvenida oscura a la izquierda, acción a
 * la derecha— y apilado en móvil, con la onda girada para separar los bloques.
 *
 * La decisión de diseño que importa: los DOS caminos (familia que vuelve y
 * familia nueva) van en pestañas, con el mismo peso. El 1 de septiembre entra
 * mucha gente nueva por esta misma dirección, y si su camino queda escondido
 * en un enlace pequeño al pie, acaban llamando por teléfono al club.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* El bloque se mide a SÍ MISMO, no a la ventana: así se adapta al ancho que le
   deje el tema del club (que puede meterlo en una columna estrecha) en vez de
   fiarse del tamaño de la pantalla. La medida va en la envoltura porque un
   contenedor no puede consultar su propio ancho, solo el de sus hijos. */
.ej-acceso-wrap {
	container-type: inline-size;

	/* A TODO EL ANCHO DE LA PANTALLA (petición del cliente, S102).
	   El bloque se sale del contenedor estrecho del tema y llega de borde a
	   borde, sea cual sea la plantilla de la página.

	   🔴 EL DETALLE QUE COSTÓ UNA VUELTA: `vw` incluye el ancho de la barra de
	   desplazamiento vertical. En un navegador con barra clásica —Windows— eso
	   son unos 15 px de más, así que el bloque salía más ancho que la pantalla,
	   aparecía una barra horizontal y TODA la página quedaba desplazada, con un
	   hueco a la derecha del menú del tema. No se veía en navegadores donde la
	   barra flota encima sin ocupar sitio, que es como se probó la primera vez.

	   Se corrige recortando el desbordamiento en la página que contiene el
	   bloque. `clip` y no `hidden` a propósito: `hidden` crearía un contenedor
	   de desplazamiento y rompería las posiciones pegajosas del tema (la
	   cabecera fija, por ejemplo). El scroll vertical no se toca. */
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	max-width: 100vw;
}

html:has( .ej-acceso-wrap ),
body:has( .ej-acceso-wrap ) {
	overflow-x: clip;
}

.ej-acceso {
	--ej-brand:        #1f2d50;
	--ej-brand-2:      #33457a;
	--ej-accent:       #d8a13a;
	--ej-bg:           #fcfdfe;
	--ej-card:         #ffffff;
	--ej-surface-2:    #f0f3f9;
	--ej-border:       #e2e6ee;
	--ej-field-border: #c3cadb;
	--ej-input-bg:     #ffffff;
	--ej-text:         #1d2433;
	--ej-muted:        #6b7385;
	--ej-danger-bg:    #fdecec;
	--ej-danger-fg:    #b32d2e;

	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 620px;
	margin: 0 auto;
	background: var(--ej-bg);
	color: var(--ej-text);
	font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	/* A ancho completo no lleva esquinas redondeadas ni sombra: iría de borde a
	   borde con las esquinas cortadas por la pantalla. */
	overflow: hidden;
}

/* Cada mitad centra su contenido, horizontal y verticalmente. Antes se
   empujaban hacia el centro del bloque (margin-left/right: auto) para que no
   quedaran separadas en pantallas anchas, pero eso descentraba el formulario
   dentro de su propia mitad: 48 px de hueco a un lado y 272 al otro. */
.ej-acceso__marca-inner { margin: 0 auto; }

/* ── Panel de bienvenida ─────────────────────────────────────────────── */
.ej-acceso__marca {
	position: relative;
	background:
		radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0) 0 0/22px 22px,
		linear-gradient(158deg, var(--ej-brand) 0%, #16203a 100%);
	color: #fff;
	display: flex;
	align-items: center;
	padding: 56px 52px;
}
.ej-acceso__marca-inner { position: relative; z-index: 2; max-width: 420px; }

.ej-acceso__eyebrow {
	margin: 0 0 18px;
	font-size: .74rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ej-accent);
}
.ej-acceso__titulo {
	margin: 0 0 18px;
	/* Se limita el ancho de la línea en vez de forzar el salto con un <br>:
	   así el título se parte por donde toca en cualquier tamaño. */
	max-width: 15ch;
	font-size: clamp(1.7rem, 2.4vw, 2.45rem);
	line-height: 1.16;
	font-weight: 700;
	letter-spacing: -.015em;
	color: #fff;
}
.ej-acceso__claim {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255,255,255,.78);
}

/* La onda: vertical en escritorio, horizontal al apilarse. */
.ej-acceso__onda {
	position: absolute; top: 0; right: -1px; height: 100%; width: 78px;
	fill: var(--ej-bg); z-index: 1;
}
.ej-acceso__onda-movil { display: none; }

/* ── Panel de acción ─────────────────────────────────────────────────── */
.ej-acceso__panel {
	display: flex; align-items: center; justify-content: center;
	padding: 56px 48px;
}
.ej-acceso__caja { width: 100%; max-width: 520px; }

.ej-acceso__aviso {
	background: var(--ej-danger-bg); color: var(--ej-danger-fg);
	border-radius: 8px; padding: 11px 14px; margin: 0 0 20px;
	font-size: .92rem; line-height: 1.5;
}

/* ── Las dos pestañas ────────────────────────────────────────────────── */
/* La temporada a la que se esta inscribiendo, sobre las pestanas. Discreta:
   informa sin competir con los dos caminos, que son la accion principal. */
.ej-acceso__temporada {
	margin: 0 0 12px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ej-muted);
}

.ej-acceso__tabs {
	display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
	background: var(--ej-surface-2);
	border-radius: 11px; padding: 4px; margin: 0 0 28px;
}
.ej-acceso__tab {
	appearance: none; border: 0; cursor: pointer;
	padding: 11px 8px; border-radius: 8px;
	background: transparent; color: var(--ej-muted);
	font-family: inherit; font-size: .93rem; font-weight: 600;
	transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.ej-acceso__tab:hover { color: var(--ej-text); }
.ej-acceso__tab.is-active {
	background: var(--ej-card); color: var(--ej-brand);
	box-shadow: 0 1px 4px rgba(31,45,80,.13);
}
.ej-acceso__tab:focus-visible { outline: 2px solid var(--ej-brand-2); outline-offset: 2px; }

.ej-acceso__seccion { display: none; }
.ej-acceso__seccion.is-active { display: block; }

.ej-acceso__h2 {
	margin: 0 0 5px; font-size: 1.3rem; font-weight: 700;
	letter-spacing: -.01em; color: var(--ej-text);
}
.ej-acceso__sub { margin: 0 0 18px; color: var(--ej-muted); font-size: .9rem; }

/* ── Campos ──────────────────────────────────────────────────────────── */
/* ── ALTURAS COMPACTAS EN TODO EL PANEL DE ACCIÓN (S107) ───────────────
 * Petición del cliente al verlo en pantalla: los campos y los textos de la
 * derecha ocupaban demasiado alto, sobre todo desde que la recuperación
 * encadena cuatro pantallas. Se recorta el relleno y se baja un punto la
 * letra en TODA la columna de la derecha —entrar, alta y recuperación—,
 * pero sin llegar a amontonar: sigue habiendo aire entre campo y campo.
 *
 * 🔴 La columna IZQUIERDA (.ej-acceso__marca) NO se toca: es la carta de
 * presentación del club y ahí el aire es parte del diseño. */
.ej-acceso .ej-campo { margin: 0 0 14px; }
.ej-acceso .ej-campo label {
	display: block; margin: 0 0 4px;
	font-size: .7rem; font-weight: 700;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--ej-muted);
}
.ej-acceso .ej-campo input {
	width: 100%; box-sizing: border-box;
	padding: 10px 13px;
	border: 1px solid var(--ej-field-border);
	border-radius: 8px;
	background: var(--ej-input-bg); color: var(--ej-text);
	font-family: inherit; font-size: .94rem; line-height: 1.35;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.ej-acceso .ej-campo input::placeholder { color: #a6adbd; }
.ej-acceso .ej-campo input:focus {
	outline: none;
	border-color: var(--ej-brand-2);
	box-shadow: 0 0 0 3px rgba(51,69,122,.16);
}
.ej-campo__ayuda {
	display: block; margin-top: 4px;
	font-size: .78rem; line-height: 1.4; color: var(--ej-muted);
}

/* ── Botón ───────────────────────────────────────────────────────────── */
.ej-acceso .ej-btn {
	display: block; width: 100%; box-sizing: border-box;
	text-align: center; text-decoration: none;
	padding: 12px 18px; border: 0; border-radius: 8px;
	font-family: inherit; font-size: .96rem; font-weight: 700;
	cursor: pointer;
	transition: background .16s ease, transform .08s ease;
}
.ej-acceso .ej-btn--principal { background: var(--ej-brand); color: #fff; }
.ej-acceso .ej-btn--principal:hover { background: var(--ej-brand-2); }
.ej-acceso .ej-btn--principal:active { transform: translateY(1px); }
.ej-acceso .ej-btn:focus-visible { outline: 2px solid var(--ej-accent); outline-offset: 2px; }

.ej-acceso__pie {
	margin: 14px 0 0; font-size: .8rem; line-height: 1.45;
	color: var(--ej-muted); text-align: center;
}
.ej-enlace {
	appearance: none; background: none; border: 0; padding: 0;
	color: var(--ej-brand-2); font: inherit; font-weight: 700;
	cursor: pointer; text-decoration: underline;
}

.ej-acceso__pasos {
	margin: 0 0 18px; padding: 0 0 0 19px;
	color: var(--ej-text); font-size: .95rem; line-height: 1.6;
}
.ej-acceso__pasos li { margin: 6px 0; }

.ej-acceso__mensaje {
	/* S169 (B24): la forma del dibujo que aprobó (12 px de margen, esquinas de 10 px, 13,5 px). */
	margin: 16px 0 0; padding: 12px 14px; border-radius: 10px;
	font-size: 13.5px; line-height: 1.55;
}
.ej-acceso__mensaje b { font-weight: 700; }
.ej-acceso__mensaje--info { background: var(--ej-surface-2); color: var(--ej-text); }

/* ═══ S107 — RECUPERAR EL ACCESO SIN EL CORREO ANTIGUO ══════════════════
 * Todo va con doble clase (.ej-acceso .ej-rec__…) porque el tema del club
 * pisa nuestros estilos en la parte pública: un `fieldset` o un `label`
 * sueltos los repinta cualquier tema, y esta pantalla la ve la familia.
 * ═══════════════════════════════════════════════════════════════════════ */

/* El aviso de vuelta del enlace de confirmación. En verde cuando el cambio se
   ha consumado, con los mismos colores del mensaje de éxito de la caja. */
.ej-acceso .ej-acceso__aviso--ok {
	background: #d1fae5; color: #065f46;
}
.ej-acceso .ej-acceso__aviso--error {
	background: var(--ej-danger-bg); color: var(--ej-danger-fg);
}

/* El enlace de la puerta de atrás: se ve, pero no compite con el botón de
   entrar. Quien puede entrar por lo normal no tiene por qué fijarse. */
.ej-acceso .ej-acceso__pie--rec {
	margin-top: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--ej-border);
}

/* Los cuatro pasos ocupan el mismo sitio: solo uno está vivo a la vez. */
.ej-acceso .ej-rec__paso { display: none; }
.ej-acceso .ej-rec__paso.is-active { display: block; }

.ej-acceso .ej-rec__aviso {
	margin: 0 0 16px; padding: 11px 14px; border-radius: 8px;
	background: var(--ej-danger-bg); color: var(--ej-danger-fg);
	font-size: .92rem; line-height: 1.5;
}

/* El contador de preguntas. Va delante de la pregunta y discreto: informa de
   cuánto queda sin robarle protagonismo a lo que hay que contestar. */
.ej-acceso .ej-rec__progreso {
	margin: 0 0 10px;
	font-size: .74rem; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--ej-muted);
}

/* Los dos botones de la navegación, en la misma línea y a los extremos: el de
   seguir a la derecha, donde cae el pulgar en el móvil. */
.ej-acceso .ej-rec__navegacion {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; margin-top: 4px;
}
/* Mismo motivo que en las pestañas: `display: flex` se come el `hidden`, y
   los botones seguían ahí al cerrarse la vía. */
.ej-acceso .ej-rec__navegacion[hidden] { display: none; }
/* «Anterior» no se parte en dos líneas ni se deja encoger: es un enlace de
   dos palabras cortas y quedaba partido por la mitad. */
.ej-acceso .ej-rec__navegacion .ej-enlace {
	flex: 0 0 auto; white-space: nowrap;
}
.ej-acceso .ej-rec__navegacion .ej-btn { width: auto; min-width: 180px; margin-left: auto; }

/* Cada pregunta, en su propia tarjeta. Solo se ve una a la vez (S107): con
   cuatro o cinco seguidas la pantalla se hacía interminable en el móvil. */
.ej-acceso .ej-rec__pregunta {
	margin: 0 0 14px; padding: 12px 14px 6px;
	border: 1px solid var(--ej-border); border-radius: 10px;
	background: var(--ej-card);
}
.ej-acceso .ej-rec__pregunta legend {
	padding: 0 6px; margin-left: -6px;
	font-size: .9rem; font-weight: 700; line-height: 1.4;
	color: var(--ej-text);
}

/* Toda la fila es pulsable, no solo el redondelito: esto se contesta desde el
   móvil y con prisa. */
.ej-acceso .ej-rec__opcion {
	display: flex; align-items: center; gap: 9px;
	margin: 0 0 4px; padding: 7px 9px;
	border: 1px solid transparent; border-radius: 8px;
	font-size: .88rem; line-height: 1.35; color: var(--ej-text);
	cursor: pointer;
}
.ej-acceso .ej-rec__opcion:hover { background: var(--ej-surface-2); }
.ej-acceso .ej-rec__opcion:has( input:checked ) {
	background: var(--ej-surface-2); border-color: var(--ej-field-border);
}
.ej-acceso .ej-rec__opcion input {
	width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--ej-brand-2);
}

.ej-acceso .ej-rec select {
	width: 100%; padding: 12px 14px;
	border: 1px solid var(--ej-field-border); border-radius: 8px;
	background: var(--ej-input-bg); color: var(--ej-text);
	font: inherit; font-size: .95rem;
}

/* Dentro de la recuperación, las dos pestañas se esconden: el JS les pone
   `hidden`, pero su propia regla `display: flex` lo pisaba y seguían a la
   vista, invitando a salirse a mitad del proceso. */
.ej-acceso .ej-acceso__tabs[hidden] { display: none; }

/* El texto de ayuda de una pregunta (hoy solo el de la cuenta bancaria). */
.ej-acceso .ej-rec__ayuda {
	margin: 2px 0 14px; font-size: .85rem; line-height: 1.5;
	color: var(--ej-muted);
}

/* ── La cuenta bancaria enmascarada ────────────────────────────────────
 * ES** **** XXXX **** **** XXXX — se teclean solo los dos grupos que se
 * piden. Los asteriscos van en el mismo tamaño y espaciado que los huecos
 * para que se lea como un IBAN de verdad y se vea de un vistazo QUÉ trozo
 * hay que mirar en el recibo. */
.ej-acceso .ej-rec__iban {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin: 0 0 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ej-acceso .ej-rec__iban-fijo {
	color: var(--ej-muted); font-size: 1.05rem; letter-spacing: .12em;
	user-select: none;
}
/* Ancho para CUATRO dígitos con su espaciado: con menos, el propio
   marcador «XXXX» se cortaba y se leía «XXX». */
.ej-acceso .ej-rec__iban-campo {
	width: 7ch; padding: 9px 6px;
	border: 1px solid var(--ej-field-border); border-radius: 8px;
	background: var(--ej-input-bg); color: var(--ej-text);
	font: inherit; font-size: 1.05rem; letter-spacing: .12em; text-align: center;
}
.ej-acceso .ej-rec__iban-campo::placeholder { color: #c3cadb; letter-spacing: .12em; }
.ej-acceso .ej-rec__iban-campo:focus {
	outline: none; border-color: var(--ej-brand-2);
	box-shadow: 0 0 0 3px rgba(51, 69, 122, .15);
}

/* ── TODO ESTE PANEL VA MÁS COMPACTO QUE LA ENTRADA NORMAL ─────────────
 * Petición del cliente (S107), y tiene sentido: la entrada de siempre son
 * dos campos y un botón, mientras que aquí se encadenan cuatro pantallas
 * seguidas. Con el aire de la puerta principal, cada paso obligaba a bajar.
 * Se recorta el relleno y se baja un punto la letra —lo justo para que
 * quepa de una vez—, pero SIN pegar los elementos entre sí: apretado no es
 * amontonado, y esto lo va a rellenar gente con prisa desde el móvil. */
/* Los tamaños compactos ya viven en la base del panel (ver «ALTURAS
   COMPACTAS» más arriba): aquí solo queda lo propio de la recuperación, que
   encadena más pasos que ninguna otra pantalla. */
.ej-acceso .ej-rec .ej-campo { margin: 0 0 12px; }
.ej-acceso .ej-rec select { padding: 9px 12px; font-size: .92rem; }

/* ── En escritorio, los campos van EN DOS COLUMNAS ─────────────────────
 * Petición del cliente (S107): uno debajo de otro desperdiciaba media
 * pantalla a lo alto en un ordenador. En cuanto el bloque tiene ancho, se
 * reparten; por debajo de eso vuelven a apilarse solos.
 *
 * La consulta es @container y no @media a propósito: lo que decide no es el
 * tamaño de la pantalla sino el ancho que el tema del club le deje a este
 * bloque, que puede ser una columna estrecha dentro de una página ancha.
 *
 * Va sobre `.is-active` porque el paso oculto se esconde con display:none —
 * sin esa condición, esto lo volvería a mostrar. */
@container (min-width: 1024px) {
	.ej-acceso .ej-rec__paso.is-active[data-ej-rec-paso="datos"],
	.ej-acceso .ej-rec__paso.is-active[data-ej-rec-paso="correo"] {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 16px;
		align-items: start;
	}

	/* Lo que no es un campo ocupa la fila entera: textos, el desplegable de
	   «¿de quién es el correo?» y el botón. */
	.ej-acceso .ej-rec__paso.is-active[data-ej-rec-paso="datos"] > .ej-btn,
	.ej-acceso .ej-rec__paso.is-active[data-ej-rec-paso="correo"] > .ej-btn,
	.ej-acceso .ej-rec__paso.is-active[data-ej-rec-paso="correo"] > .ej-acceso__sub,
	.ej-acceso .ej-rec__paso.is-active[data-ej-rec-paso="correo"] > #ej-rec-quien {
		grid-column: 1 / -1;
	}

	/* El botón, separado de los campos y sin estirarse a todo lo ancho. */
	.ej-acceso .ej-rec__paso.is-active[data-ej-rec-paso="datos"] > .ej-btn,
	.ej-acceso .ej-rec__paso.is-active[data-ej-rec-paso="correo"] > .ej-btn {
		margin-top: 6px; justify-self: start; min-width: 260px;
	}
}

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════
 * Cuatro escalones reales: escritorio, portátil, tablet y móvil.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Portátil (13-14") — se aprieta el aire lateral, no el contenido. */
@container (max-width: 1280px) {
	.ej-acceso__marca { padding: 48px 40px; }
	.ej-acceso__panel { padding: 48px 36px; }
}

/* Tablet horizontal / portátil pequeño */
@container (max-width: 1024px) {
	.ej-acceso { min-height: 560px; }
	.ej-acceso__marca { padding: 40px 32px; }
	.ej-acceso__panel { padding: 40px 28px; }
	.ej-acceso__onda { width: 54px; }
}

/* Tablet vertical y móvil: se apila y la onda pasa a horizontal. */
@container (max-width: 860px) {
	.ej-acceso {
		grid-template-columns: 1fr;
		min-height: 0;
		border-radius: 12px;
	}
	.ej-acceso__marca {
		padding: 40px 28px 62px;
		align-items: flex-start;
	}
	.ej-acceso__marca-inner { max-width: none; }
	.ej-acceso__onda { display: none; }
	.ej-acceso__onda-movil {
		display: block;
		position: absolute; left: 0; right: 0; bottom: -1px;
		width: 100%; height: 46px;
		fill: var(--ej-bg); z-index: 1;
	}
	.ej-acceso__panel { padding: 34px 28px 40px; }
	.ej-acceso__caja { max-width: 520px; margin: 0 auto; }
}

/* Móvil */
@container (max-width: 560px) {
	.ej-acceso { border-radius: 0; box-shadow: none; }
	.ej-acceso__marca { padding: 32px 20px 54px; }
	.ej-acceso__titulo { font-size: 1.55rem; }
	.ej-acceso__claim { font-size: .95rem; }
	.ej-acceso__panel { padding: 26px 20px 34px; }
	.ej-acceso__tabs { margin-bottom: 22px; }
	.ej-acceso__tab { font-size: .88rem; padding: 12px 4px; }
	.ej-acceso__h2 { font-size: 1.25rem; }
	/* 16px reales en los campos: por debajo, el móvil hace zoom al enfocar. */
	.ej-acceso .ej-campo input { font-size: 16px; padding: 13px 14px; }
}

/* ── Modo oscuro ─────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.ej-acceso {
		--ej-bg:           #121826;
		--ej-card:         #1a2136;
		--ej-surface-2:    #232c42;
		--ej-border:       #2c3550;
		--ej-field-border: #3c476a;
		--ej-input-bg:     #1a2136;
		--ej-text:         #e7ebf5;
		--ej-muted:        #9aa4bd;
		box-shadow: none;
	}
	.ej-acceso__tab.is-active { background: #2b3552; color: #e7ebf5; }
	.ej-acceso .ej-btn--principal { background: var(--ej-brand-2); }
	.ej-acceso .ej-btn--principal:hover { background: #4a5c96; }
}

.ej-acceso__mensaje--error   { background: var(--ej-danger-bg); color: var(--ej-danger-fg); }
.ej-acceso__mensaje--exito,
.ej-acceso__mensaje--success { background: #d1fae5; color: #065f46; }
.ej-acceso__mensaje--info    { background: var(--ej-surface-2); color: var(--ej-text); }
/* S169 (B24): «ya te enviamos uno, espera» y «demasiados intentos», en ámbar; y el
   botón de ayuda debajo del mensaje cuando los datos no coinciden o está bloqueado. */
/* Los colores del dibujo: la página de acceso tiene sus propios colores y no traía
   los del aviso (por eso el ámbar salía sin fondo, visto el 05/10/2026). */
.ej-acceso__mensaje--aviso   { background: #fef3e2; color: #92620a; }
@media (prefers-color-scheme: dark) {
	.ej-acceso__mensaje--aviso { background: rgba(240, 184, 73, .18); color: #f0b849; }
}
.ej-acceso__ayuda-fila { margin-top: 8px; }
/* El botón de ayuda dentro del mensaje, como en el dibujo: transparente, con el borde
   y la letra del color del mensaje (rojo o ámbar). Con doble clase para que el tema
   del club no lo pinte de azul al pulsarlo. */
.ej-acceso .ej-acceso__mensaje .ej-acceso__ayuda,
.ej-acceso .ej-acceso__mensaje .ej-acceso__ayuda:hover,
.ej-acceso .ej-acceso__mensaje .ej-acceso__ayuda:focus,
.ej-acceso .ej-acceso__mensaje .ej-acceso__ayuda:active {
	min-height: 0;
	padding: 5px 11px;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font-size: 12px;
	font-weight: 600;
	box-shadow: none;
}
.ej-acceso .ej-acceso__mensaje .ej-acceso__ayuda svg { color: inherit; width: 14px; height: 14px; }
/* v2.77.0 (S178, B15 fase 3, opción A): «Solicitar acceso» dentro del «no coinciden»,
   separado por una raya fina del color del mensaje. El botón es el mismo que el de ayuda. */
.ej-acceso__vuelta {
	margin-top: 12px; padding-top: 10px;
	border-top: 1px solid currentColor;
	border-top-color: color-mix(in srgb, currentColor 30%, transparent);
}
.ej-acceso .ej-acceso__mensaje .ej-acceso__vuelta-texto { margin: 0 0 8px; font-size: 13px; }
.ej-acceso .ej-acceso__mensaje .ej-acceso__vuelta-btn[disabled] { opacity: .6; cursor: default; }



/* Los datos del panel de bienvenida, en pildoras (opcion elegida por el
   cliente tras comparar cinco formatos en pantalla). Se separan bien del
   parrafo: pegados a el no se leian como algo aparte. */
/* La doble clase no es capricho: el tema del club (Astra) mete sangría a
   TODAS las listas, y con esos 20 px de más las dos píldoras se quedaban a
   cinco píxeles de caber en una línea y se apilaban. Con una sola clase su
   regla ganaba a la nuestra. */
.ej-acceso .ej-acceso__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}
.ej-acceso .ej-acceso__datos li {
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.18);
	color: #fff;
	font-size: .9rem;
	line-height: 1.3;
}
.ej-acceso .ej-acceso__datos strong { font-weight: 700; }

/* EL CODIGO MORAL DEL JUDO, debajo de los datos: cierra el panel con el porque
   despues de haber dado el que. Sin cursivas -el cliente no las quiere en
   ninguna parte- y sin eslogan inventado: los ocho valores del judo dicen mas
   que cualquier reclamo. */
.ej-acceso .ej-acceso__codigo-rotulo {
	margin: 26px 0 7px;
	color: rgba(255,255,255,.45);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
}
.ej-acceso .ej-acceso__codigo {
	margin: 0;
	color: var(--ej-accent);
	font-size: .93rem;
	font-weight: 600;
	line-height: 1.75;
}

/* La cita del fundador del judo. Doble clase por lo mismo que las píldoras: el
   tema del club estiliza blockquote y cite por su cuenta. La línea vertical a
   la izquierda la separa del lema de arriba sin necesidad de más espacio. */
.ej-acceso .ej-acceso__cita {
	margin: 18px 0 0;
	padding: 2px 0 2px 16px;
	border-left: 2px solid rgba(216,161,58,.45);
	background: none;
	quotes: none;
}
.ej-acceso .ej-acceso__cita p {
	margin: 0;
	color: rgba(255,255,255,.82);
	font-size: .92rem;
	line-height: 1.5;
}
.ej-acceso .ej-acceso__cita cite {
	display: block;
	margin-top: 6px;
	color: rgba(255,255,255,.5);
	font-size: .8rem;
	font-style: normal;
}

/* NADA EN CURSIVA (peticion expresa del cliente). No basta con no ponerla
   nosotros: el tema del club pone en cursiva las citas por su cuenta, asi que
   hay que desactivarlo a mano en todo el bloque. */
.ej-acceso,
.ej-acceso p,
.ej-acceso cite,
.ej-acceso blockquote,
.ej-acceso blockquote p,
.ej-acceso em,
.ej-acceso i {
	font-style: normal;
}

/* ==========================================================================
   A14.1 (S103) — EL ALTA NUEVA PUBLICA
   --------------------------------------------------------------------------
   Mismo lenguaje visual que la puerta de entrada (misma paleta, mismos
   botones), pero con la estructura del asistente del panel: barra de pasos
   arriba, un panel a la vez, y las acciones abajo.

   DOBLE CLASE EN TODO. El tema del club (Astra) pisa nuestros estilos donde no
   se espera — en la S102 pasó dos veces en una sola sesion, con la sangria de
   las listas y la cursiva de las citas. Todo lo que pueda heredar del tema se
   blinda aqui con `.ej-alta` delante.
   ========================================================================== */

/* La anchura del asistente vive en la ENVOLTURA, no en el bloque.
   Dos motivos, y el segundo se midió en pantalla:
   1. La envoltura es el contenedor de consulta (`container-type`), así que es
      ella quien tiene que tener el ancho real que luego se consulta.
   2. El `max-width` puesto en el bloque interior NO se aplicaba: llegaba
      `none` al elemento aunque el resto de la misma regla —el fondo, el
      relleno— sí se aplicaba. Algo del tema del club lo pisa. Es la enésima
      vez que el tema se mete donde no se le llama (ley aprendida en la S102),
      y aquí se resuelve sin pelear por especificidad: se marca el ancho en la
      envoltura, que el tema no toca. */
.ej-alta-wrap {
	/* `width` y no `max-width`: el tema del club pisa el `max-width` de todo lo
	   que cuelga de su contenido —medido en pantalla, llegaba `none` tanto al
	   bloque como a esta envoltura—, pero no toca el ancho. `min()` mantiene el
	   comportamiento que se buscaba: 820 px como mucho, y todo el ancho
	   disponible cuando la pantalla es más estrecha.

	   `margin-inline` por el mismo motivo: el `margin-left`/`right` clásico
	   tampoco llegaba. */
	width: min( 820px, 100% ) !important;
	margin-inline: auto;
	container-type: inline-size;
}
/* S183 (23/10/2026, visto por él: «antes se veía como un cuadrado con los bordes
   redondeados y ahora ocupa todo el ancho»). La página «Inscripción nueva» de la
   web del club mete el asistente dentro de un contenedor de Spectra, y Spectra
   pone `width: 100%` a todo lo que cuelga de su contenedor con un selector de
   trece `:not()` encadenados (medido en `uag-css-2382.css`). Ninguna cantidad
   razonable de clases repetidas le gana, así que el ancho de la envoltura —aquí
   y en los tres cortes de abajo— va con `!important`. */

/* MAS ANCHO EN ESCRITORIO Y PORTATIL (peticion del cliente, S104).
   El corte va en 1100px de VENTANA a proposito, no en el contenedor: una
   tablet apaisada mide 1024px y tiene que seguir viendose exactamente igual
   que hasta ahora. Por debajo de ese ancho no cambia nada.

   Se repite `width` y no `max-width` por lo mismo que arriba: el tema del club
   pisa el `max-width` de todo lo que cuelga de su contenido. */
@media (min-width: 1100px) {
	/* S144 (14/09/2026, el cliente, viéndolo a tamaño MacBook): el 85 % del ancho
	   de la pantalla, antes 980 px fijos. «Y en escritorio también»: sin tope, en
	   cualquier pantalla de portátil o de escritorio. */
	.ej-alta-wrap { width: min( 85vw, 100% ) !important; }
}

/* S144 (14/09/2026, el cliente, viéndolo en tablet horizontal): ahí el asistente
   ocupa el 90 % del ancho de la pantalla, en vez de quedarse en 820 px con aire a
   los lados. Escritorio y portátil siguen en 980 px. */
@media (min-width: 900px) and (max-width: 1099px) {
	.ej-alta-wrap { width: min( 90vw, 100% ) !important; }
}

/* S144 (14/09/2026, el cliente, viéndolo en el móvil) — EN EL MÓVIL, EL ASISTENTE
   A TODO EL ANCHO DE LA PANTALLA, con su relleno por dentro para que los campos no
   vayan pegados al borde. Mismo recurso que la puerta de acceso (`.ej-acceso-wrap`,
   S102): salirse del contenedor del tema y recortar el sobrante que deja la barra
   de desplazamiento. Va por ancho de pantalla y no de contenedor porque la
   envoltura no puede consultarse a sí misma. */
@media (max-width: 600px) {
	/* La clase va repetida a propósito: el tema del club centra todo lo que
	   cuelga de su contenido con `.entry-content[data-ast-blocks-layout] > *`
	   { margin-left: auto; margin-right: auto }, que pesa más que una clase
	   sola y dejaba el bloque desplazado 20 px a la derecha y cortado (medido
	   en pantalla a 390 px). Tres veces la clase le gana sin `!important`. */
	.ej-alta-wrap.ej-alta-wrap.ej-alta-wrap {
		width: 100vw !important;
		max-width: 100vw;
		margin-inline: calc( 50% - 50vw );
	}
	html:has( .ej-alta-wrap ),
	body:has( .ej-alta-wrap ) {
		overflow-x: clip;
	}
}

/* OCULTAR ES OCULTAR. El `hidden` del HTML vale `display:none`, pero es una
   regla del navegador y la pisa cualquier `display` que venga del tema del
   club o de nuestras propias clases. Medido en pantalla en la S103: el botón
   «Atrás» salía en la antesala, donde no hay nada detrás a lo que volver, con
   `hidden = true` y `display: block` a la vez. Se blinda para todo el bloque,
   que es donde el asistente esconde y enseña pasos constantemente. */
.ej-alta [hidden],
.ej-alta-wrap [hidden] {
	display: none !important;
}

.ej-alta {
	width: 100%;
	padding: 28px 22px 40px;
	background: var(--ej-card);
	border: 1px solid var(--ej-border);
	border-radius: 14px;
	color: var(--ej-text);
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-sizing: border-box;
}

/* ---------- Cabecera ---------- */
.ej-alta .ej-alta__cabecera { margin: 0 0 22px; }

/* El titulo y la temporada comparten linea: el titulo a la izquierda y la
   temporada a la derecha (peticion del cliente, S104). `align-items: baseline`
   y no `center`: lo que tiene que cuadrar es la linea del texto, no la caja.

   `flex-wrap` para lo estrecho: en movil no caben los dos, y la temporada cae
   debajo del titulo en vez de apretarlo. */
.ej-alta .ej-alta__cabecera-fila {
	display: flex;
	flex-wrap: wrap;
	/* S144: a la derecha van ahora dos líneas (versión y selector de tema, y
	   debajo la temporada); se alinea por abajo para que la temporada siga a la
	   altura del título. */
	align-items: flex-end;
	justify-content: space-between;
	gap: 4px 18px;
	margin: 0 0 10px;
}

/* ── S144 (14/09/2026, el cliente): versión y selector de tema, encima de la temporada ── */
.ej-alta .ej-alta__cabecera-lado {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}
.ej-alta .ej-alta__ajustes {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ej-alta .ej-alta__version {
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--ej-muted);
	font-variant-numeric: tabular-nums;
}
.ej-alta .ej-tema {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: var(--ej-surface-2);
	border: 1px solid var(--ej-border);
	border-radius: 999px;
}
/* Con la especificidad de sobra: el tema del club pinta los <button> a su manera. */
.ej-alta .ej-tema .ej-tema__btn,
.ej-alta .ej-tema .ej-tema__btn:hover,
.ej-alta .ej-tema .ej-tema__btn:focus,
.ej-alta .ej-tema .ej-tema__btn:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ej-muted);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .12s ease, color .12s ease;
}
.ej-alta .ej-tema .ej-tema__btn:hover,
.ej-alta .ej-tema .ej-tema__btn:focus-visible { color: var(--ej-text); outline: none; }
.ej-alta .ej-tema .ej-tema__btn.is-active,
.ej-alta .ej-tema .ej-tema__btn.is-active:hover,
.ej-alta .ej-tema .ej-tema__btn.is-active:focus {
	background: var(--ej-card);
	color: var(--ej-text);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .14);
}
.ej-alta .ej-tema__btn svg { display: block; width: 15px; height: 15px; }
/* S144 (14/09/2026, el cliente, viéndolo en el móvil): arriba, «Tu inscripción» a
   la izquierda y el selector de tema a la derecha, en la misma línea; debajo, la
   temporada a la izquierda y la versión a la derecha. Sin tocar el HTML: los dos
   envoltorios de la derecha se disuelven y cada pieza va a su casilla. */
@container (max-width: 560px) {
	.ej-alta .ej-alta__cabecera-fila {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"titulo tema"
			"temporada version";
		align-items: center;
		gap: 8px 12px;
	}
	.ej-alta .ej-alta__cabecera-lado,
	.ej-alta .ej-alta__ajustes { display: contents; }
	.ej-alta .ej-alta__titulo { grid-area: titulo; }
	.ej-alta .ej-tema { grid-area: tema; justify-self: end; }
	.ej-alta .ej-alta__temporada { grid-area: temporada; }
	.ej-alta .ej-alta__version { grid-area: version; justify-self: end; }
}

.ej-alta .ej-alta__temporada {
	margin: 0;
	flex: 0 0 auto;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ej-accent);
}
.ej-alta .ej-alta__titulo {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--ej-text);
	text-wrap: balance;
}
.ej-alta .ej-alta__intro {
	margin: 0;
	color: var(--ej-muted);
	font-size: .88rem;
	line-height: 1.6;
	max-width: 58ch;
}

/* ---------- Barra de pasos ----------
   En movil se desplaza en horizontal en vez de apilarse: apilada ocuparia
   media pantalla antes del primer campo. */
.ej-alta .ej-alta__pasos {
	margin: 0 0 24px;
	border-bottom: 1px solid var(--ej-border);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* S144 (el cliente): la barra del navegador se esconde; la sustituye el riel
	   de aquí abajo, a la mitad de fina y igual en todos. */
	scrollbar-width: none;
}
.ej-alta .ej-alta__pasos::-webkit-scrollbar { display: none; height: 0; }
.ej-alta .ej-alta__pasos-riel {
	/* Pegado a la vista mientras la lista se desplaza por debajo. */
	position: sticky;
	left: 0;
	height: 4px;
	margin: 2px 0 3px;
	border-radius: 4px;
	background: var(--ej-surface-2);
}
.ej-alta .ej-alta__pasos-riel-barra {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	min-width: 24px;
	border-radius: 4px;
	background: var(--ej-muted);
	opacity: .55;
	cursor: grab;
	touch-action: none;
	transition: opacity .15s ease;
}
.ej-alta .ej-alta__pasos-riel-barra:hover,
.ej-alta .ej-alta__pasos-riel-barra.is-arrastrando { opacity: .9; }
.ej-alta .ej-alta__pasos-riel-barra.is-arrastrando { cursor: grabbing; }
.ej-alta .ej-alta__pasos-lista {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0 0 2px;
	list-style: none;
}
.ej-alta .ej-alta__paso-item { margin: 0; padding: 0; }

.ej-alta .ej-alta__paso {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--ej-muted);
	font-family: inherit;
	font-size: .85rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}
.ej-alta .ej-alta__paso[disabled] { opacity: .45; cursor: default; }
.ej-alta .ej-alta__paso.is-actual {
	color: var(--ej-text);
	border-bottom-color: var(--ej-brand);
}
.ej-alta .ej-alta__paso.is-hecho { color: var(--ej-text); opacity: 1; }
.ej-alta .ej-alta__paso:focus-visible { outline: 2px solid var(--ej-accent); outline-offset: -2px; }

.ej-alta .ej-alta__paso-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: none;
	border-radius: 50%;
	background: var(--ej-surface-2);
	color: inherit;
	font-size: .74rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.ej-alta .ej-alta__paso.is-actual .ej-alta__paso-n { background: var(--ej-brand); color: #fff; }
.ej-alta .ej-alta__paso.is-hecho .ej-alta__paso-n { background: var(--ej-success-bg); color: var(--ej-success-fg); }
/* S144 (14/09/2026, el cliente): en oscuro los números se veían en blanco —el
   círculo azul marino del paso actual se confunde con el fondo— y el verde de los
   hechos no se veía bien. En oscuro, el paso actual y los hechos llevan el círculo
   en el dorado de la temporada, clarito, y el número en ese mismo dorado. En
   claro no cambia nada. */
.ej-alta-wrap[data-theme="dark"] .ej-alta .ej-alta__paso.is-actual .ej-alta__paso-n,
.ej-alta-wrap[data-theme="dark"] .ej-alta .ej-alta__paso.is-hecho .ej-alta__paso-n {
	background: rgba(216, 161, 58, .22);
	color: var(--ej-accent);
}
@media (prefers-color-scheme: dark) {
	.ej-alta-wrap:not([data-theme="light"]) .ej-alta .ej-alta__paso.is-actual .ej-alta__paso-n,
	.ej-alta-wrap:not([data-theme="light"]) .ej-alta .ej-alta__paso.is-hecho .ej-alta__paso-n {
		background: rgba(216, 161, 58, .22);
		color: var(--ej-accent);
	}
}
/* S183 (23/10/2026): la regla de la S177 —en oscuro ningún enlace con el azul
   del tema— cubría el área (.esamjudo-portal) pero no el alta por la web. En el
   paso Contactos, el correo y el teléfono de la tarjeta del tutor salían en el
   azul del tema sobre el fondo oscuro. Van en el azul claro, como en el área. */
.ej-alta-wrap[data-theme="dark"] a.ej-tel-enlace,
.ej-alta-wrap[data-theme="dark"] .ej-contacto-card__body dd a { color: var(--ej-link); }
@media (prefers-color-scheme: dark) {
	.ej-alta-wrap:not([data-theme="light"]) a.ej-tel-enlace,
	.ej-alta-wrap:not([data-theme="light"]) .ej-contacto-card__body dd a { color: var(--ej-link); }
}

/* ---------- Paneles de cada paso ---------- */
.ej-alta .ej-alta__panel { margin: 0 0 24px; }
.ej-alta .ej-alta__panel[hidden] { display: none; }

.ej-alta .ej-alta__h2 {
	margin: 0 0 6px;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--ej-text);
}
/* S143 — El titulillo del segundo tutor. Lleva su clase propia porque el tema
   del club pisa los encabezados: un h3 a pelo sale con el tamano y el color de
   Astra, no con los nuestros. */
.ej-alta .ej-alta__h3 {
	margin: 22px 0 6px;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--ej-text);
}
.ej-alta .ej-alta__sub {
	margin: 0 0 16px;
	color: var(--ej-muted);
	font-size: .86rem;
	line-height: 1.6;
}
.ej-alta .ej-alta__sub--pendiente {
	padding: 12px 14px;
	background: var(--ej-surface-2);
	border-radius: var(--ej-radius-sm);
	color: var(--ej-muted);
}

/* La sangria se fija a mano: el tema del club se la come y las vinetas quedan
   fuera de la caja (ley aprendida en la S102). */
.ej-alta .ej-alta__lista {
	margin: 0 0 16px;
	padding: 0 0 0 20px;
	list-style: disc;
}
.ej-alta .ej-alta__lista li {
	margin: 0 0 8px;
	padding: 0;
	color: var(--ej-text);
	font-size: .88rem;
	line-height: 1.6;
}
.ej-alta .ej-alta__nota {
	margin: 0;
	padding: 12px 14px;
	background: var(--ej-preview-bg);
	border-radius: var(--ej-radius-sm);
	color: var(--ej-text);
	font-size: .85rem;
	line-height: 1.55;
}

/* S144 (cliente, 14/09/2026, doc25 paso 9): después de confirmar, las preguntas del
   panel —otra actividad y otro hermano— antes de firmar todo junto. */
.ej-alta .ej-alta__tras { display: flex; flex-direction: column; gap: 16px; }
.ej-alta .ej-alta__tras > .ej-alta__h2,
.ej-alta .ej-alta__tras > .ej-alta__sub { margin: 0; }
.ej-alta .ej-alta__tras-lista {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 14px 16px 14px 34px;
	background: var(--ej-surface-2);
	border-radius: 10px;
	color: var(--ej-text);
	font-size: .88rem;
	line-height: 1.45;
}
.ej-alta .ej-alta__tras-pregunta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--ej-border);
	border-radius: 10px;
}
.ej-alta .ej-alta__tras-texto { margin: 0; color: var(--ej-text); font-size: .95rem; font-weight: 600; }
.ej-alta .ej-alta__tras-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.ej-alta .ej-alta__tras[hidden],
.ej-alta .ej-alta__tras-lista[hidden],
.ej-alta .ej-alta__tras-pregunta[hidden] { display: none; }

/* S144 (doc25 «Cancelar a media tanda», A70 del panel): qué altas de la tanda se borran. */
.ej-alta .ej-alta__cancelar-tanda { display: flex; flex-direction: column; gap: 14px; margin: 0 0 4px; }
.ej-alta .ej-alta__cancelar-tanda[hidden] { display: none; }
.ej-alta .ej-alta__cancelar-tanda > .ej-alta__sub { margin: 0; }
.ej-alta .ej-alta__cancelar-lista {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px 16px;
	background: var(--ej-surface-2);
	border-radius: 10px;
}
.ej-alta .ej-alta__cancelar-fila { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ej-alta .ej-alta__cancelar-nota { margin: 0; padding-left: 52px; color: var(--ej-text); font-size: .85rem; opacity: .75; }

/* ---------- Acciones ---------- */
.ej-alta .ej-alta__acciones {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	align-items: center;
	padding-top: 18px;
	border-top: 1px solid var(--ej-border);
}
.ej-alta .ej-btn {
	display: inline-block;
	padding: 12px 22px;
	border: 0;
	border-radius: 10px;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.ej-alta .ej-btn--principal { background: var(--ej-brand); color: #fff; }
.ej-alta .ej-btn--principal:hover { background: var(--ej-brand-2); }
.ej-alta .ej-btn--principal:active { transform: translateY(1px); }
.ej-alta .ej-btn--secundario {
	background: transparent;
	color: var(--ej-text);
	border: 1px solid var(--ej-border);
}
.ej-alta .ej-btn--secundario:hover { background: var(--ej-surface-2); }
.ej-alta .ej-btn:focus-visible { outline: 2px solid var(--ej-accent); outline-offset: 2px; }
.ej-alta .ej-btn[disabled] { opacity: .55; cursor: default; }

/* ---------- Mensajes y pie ---------- */
.ej-alta .ej-alta__mensaje {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: var(--ej-radius-sm);
	background: var(--ej-danger-bg);
	color: var(--ej-danger-fg);
	font-size: .87rem;
	line-height: 1.5;
}
.ej-alta .ej-alta__mensaje[hidden] { display: none; }

/* 🔴 S157 (23/09/2026, él viéndolo en su pantalla: «pon el enlace con un color
   que se vea»). El enlace que lleva al área heredaba el azul del tema y caía
   sobre el fondo rojo del aviso: no se leía y no parecía pulsable.

   Dentro del aviso va con el color del propio aviso, en negrita y con el
   subrayado separado, que es lo que se lee de un vistazo sobre ese fondo. Y al
   pasar por encima se marca con un recuadro, para que se vea que es un botón. */
.ej-alta .ej-alta__mensaje a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}
.ej-alta .ej-alta__mensaje a:hover,
.ej-alta .ej-alta__mensaje a:focus-visible {
	color: inherit;
	background: rgba( 255, 255, 255, .12 );
	border-radius: 6px;
	box-shadow: 0 0 0 4px rgba( 255, 255, 255, .12 );
}

/* En el aviso claro (el de «ya existe», que no es un error) el azul del tema sí
   se lee, así que ahí solo se refuerza el grosor. */
.ej-alta .ej-alta__mensaje--info a {
	color: var(--ej-accent);
}

/* El enlace a la puerta vive DENTRO de la fila del boton, pegado a la
   izquierda (cliente, S104): `margin-right: auto` es lo que empuja los botones
   al otro extremo. Ya no lleva su propia raya ni su propio margen, porque la
   raya de separacion la pone ya la fila de acciones. */
.ej-alta .ej-alta__pie {
	margin: 0 auto 0 0;
	padding: 0;
	border: 0;
	color: var(--ej-muted);
	font-size: .83rem;
	line-height: 1.4;
}
.ej-alta .ej-alta__pie a { color: var(--ej-link); font-weight: 600; }
.ej-alta .ej-alta__pie a:hover { color: var(--ej-link-hover); }

/* NADA EN CURSIVA (peticion expresa del cliente). No basta con no ponerla
   nosotros: el tema del club la pone por su cuenta en varios sitios. */
.ej-alta,
.ej-alta p,
.ej-alta li,
.ej-alta cite,
.ej-alta blockquote,
.ej-alta blockquote p,
.ej-alta em,
.ej-alta i {
	font-style: normal;
}

@container (max-width: 560px) {
	/* S144: a todo el ancho de la pantalla, sin bordes laterales ni esquinas y con su relleno. */
	.ej-alta { padding: 22px 20px 32px; border-radius: 0; border-left: 0; border-right: 0; }
	.ej-alta .ej-alta__acciones { flex-direction: column-reverse; align-items: stretch; }
	.ej-alta .ej-btn { width: 100%; }
}

/* El camino «Soy nuevo» de la puerta no es un boton, es un ENLACE con aspecto
   de boton — lleva a otra pagina—, y el tema del club subraya todos los
   enlaces de su contenido. Visto en pantalla en la S103, en cuanto ese boton
   dejo de ser un aviso y paso a llevar a alguna parte: salia con el texto
   subrayado dentro del recuadro azul. */
.ej-acceso a.ej-btn,
.ej-acceso a.ej-btn:hover,
.ej-acceso a.ej-btn:focus,
.ej-alta a.ej-btn,
.ej-alta a.ej-btn:hover,
.ej-alta a.ej-btn:focus {
	text-decoration: none;
}

/* ── EL HOVER DE LAS PESTANAS Y LOS BOTONES, BLINDADO (S103) ──────────────────
   Visto en pantalla por el cliente: al pasar el raton por «Soy nuevo», la
   pestana se pintaba con el AZUL DE BOTON del tema y el texto quedaba casi
   ilegible encima.

   La causa es la de siempre, pero con un matiz que conviene recordar: nuestras
   reglas si declaraban el fondo en el estado normal, pero NO en `:hover`. Como
   ahi no deciamos nada, el `button:hover` del tema entraba sin pelear. Un
   estado sin declarar es un estado regalado: se declaran los cuatro (normal,
   hover, focus y active) en todo lo que sea un boton dentro de nuestros
   bloques. */
.ej-acceso .ej-acceso__tab:hover,
.ej-acceso .ej-acceso__tab:focus,
.ej-acceso .ej-acceso__tab:active {
	background: var(--ej-surface-3);
	color: var(--ej-text);
	box-shadow: none;
}
.ej-acceso .ej-acceso__tab.is-active,
.ej-acceso .ej-acceso__tab.is-active:hover,
.ej-acceso .ej-acceso__tab.is-active:focus,
.ej-acceso .ej-acceso__tab.is-active:active {
	background: var(--ej-card);
	color: var(--ej-brand);
	box-shadow: 0 1px 4px rgba(31,45,80,.13);
}

/* 🔴 S149 (17/09/2026, él con el móvil en modo oscuro) — LA PESTAÑA ACTIVA NO
   SE LEÍA, Y EL ENLACE DE ABAJO TAMPOCO.

   Medido en pantalla: el texto de «Ya soy del club» salía en #1f2d50 sobre un
   fondo #1a2136. Azul marino sobre azul marino, contraste 1,1 a 1 — el mínimo
   legible es 4,5. Y «He cambiado de correo y no puedo entrar», en #33457a sobre
   el mismo fondo: 2,1 a 1. Justo el enlace que busca quien no puede entrar.

   Lo llamativo es que la regla oscura de la pestaña SÍ existía, arriba, en su
   bloque de `prefers-color-scheme`. Lo que pasó es que estas reglas de aquí
   —añadidas después para que el tema del club no pintara sus botones encima—
   llevan un `.ej-acceso` delante y **pesan más**, así que ganaban también en
   oscuro y devolvían el color de fondo blanco. La regla buena seguía ahí, sin
   aplicarse nunca.

   Por eso el arreglo va aquí y con el mismo peso, y no arriba: si se cambia
   allí, vuelve a perder.

   Blanco, dicho por él: «pon el color blanco». En claro no cambia nada. */
@media (prefers-color-scheme: dark) {
	.ej-acceso .ej-acceso__tab.is-active,
	.ej-acceso .ej-acceso__tab.is-active:hover,
	.ej-acceso .ej-acceso__tab.is-active:focus,
	.ej-acceso .ej-acceso__tab.is-active:active {
		background: #2b3552;
		color: #fff;
		box-shadow: none;
	}

	.ej-acceso .ej-enlace,
	.ej-acceso .ej-enlace:hover,
	.ej-acceso .ej-enlace:focus,
	.ej-acceso .ej-enlace:active {
		color: #fff;
	}
}

/* Los pasos del asistente del alta son botones tambien, y les pasaria igual. */
.ej-alta .ej-alta__paso:hover,
.ej-alta .ej-alta__paso:focus,
.ej-alta .ej-alta__paso:active {
	background: var(--ej-surface-3);
	color: var(--ej-text);
}
.ej-alta .ej-alta__paso[disabled]:hover {
	background: none;
	color: var(--ej-muted);
}
.ej-alta .ej-alta__paso.is-actual,
.ej-alta .ej-alta__paso.is-actual:hover,
.ej-alta .ej-alta__paso.is-actual:focus {
	background: none;
	color: var(--ej-text);
	border-bottom-color: var(--ej-brand);
}

/* Y los botones principales/secundarios, en sus cuatro estados. */
.ej-acceso .ej-btn--principal:focus,
.ej-acceso .ej-btn--principal:active,
.ej-alta .ej-btn--principal:focus,
.ej-alta .ej-btn--principal:active {
	background: var(--ej-brand-2);
	color: #fff;
}
.ej-alta .ej-btn--secundario:hover,
.ej-alta .ej-btn--secundario:focus,
.ej-alta .ej-btn--secundario:active {
	background: var(--ej-surface-2);
	color: var(--ej-text);
}

/* ── Campos del asistente del alta (A14.1, S103) ─────────────────────────────
   Una columna en movil y dos cuando cabe. La medida la da el propio bloque
   (container queries sobre .ej-alta-wrap), no la ventana: el tema del club
   puede meter el asistente en una columna estrecha y entonces el tamano de la
   pantalla no dice nada de lo que hay disponible aqui dentro. */
.ej-alta .ej-campos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px 20px;
	margin: 0 0 8px;
}
@container (min-width: 620px) {
	.ej-alta .ej-campos { grid-template-columns: 1fr 1fr; }
	.ej-alta .ej-campo--ancho { grid-column: 1 / -1; }
}
/* S144 (decisión del cliente): en los colegios, la fila de curso escolar y días y
   horario lleva el grupo al final. Tres columnas cuando caben; si no, el grupo
   baja a la línea siguiente. */
@container (min-width: 820px) {
	.ej-alta .ej-campos--con-grupo { grid-template-columns: 1fr 1fr 1fr; }
}

.ej-alta .ej-campo { display: flex; flex-direction: column; min-width: 0; }

.ej-alta .ej-campo label {
	margin: 0 0 6px;
	font-size: .83rem;
	font-weight: 600;
	color: var(--ej-text);
}
.ej-alta .ej-req { color: var(--ej-danger-fg); }

.ej-alta .ej-campo input,
.ej-alta .ej-campo select,
.ej-alta .ej-campo textarea {
	width: 100%;
	box-sizing: border-box;
	/* 16px REALES: por debajo de eso, el navegador del iPhone hace zoom solo al
	   tocar el campo y descoloca la pantalla entera. */
	font-size: 16px;
	font-family: inherit;
	padding: 8px 12px;
	/* La altura de linea se declara A MANO y no se deja en `normal` (S104):
	   cada motor la interpreta a su manera —medido: 24 px en los campos de
	   texto y «normal» en los desplegables— y sin un numero fijo la cuenta de
	   aqui abajo no se puede garantizar.

	   1.2 y no menos: las letras piden mas alto del que ocupa su tamaño. La
	   cola de una `g` o de una `j` baja, y el acento de una `Á` o la tilde de
	   la `Ñ` suben. Con 1 se recortarian, y solo en algunas palabras: el peor
	   fallo posible, el que no sale en las pruebas y sale con las familias.

	   OJO, medido en pantalla (S104): esto manda en `input` y `textarea`, pero
	   los `select` LO IGNORAN —la hoja del propio navegador les impone
	   `normal`—. Por eso el alto minimo de aqui abajo no se calcula con nuestra
	   linea, sino con la peor que puede poner un navegador. Medido: caja de
	   texto de 20 px para una letra de 15, y entra de sobra. */
	line-height: 1.2;
	/* 🔴 LA ALTURA SE DECLARA AQUI, Y NO ES UN CAPRICHO (S104, visto por el
	   cliente en Chrome). El tema del club inyecta en linea
	   `input[...], select { height: 40px }`. Con nuestro relleno de 12+12, la
	   caja del texto se quedaba en 14 px para una letra de 16 px: Chrome
	   RECORTA las letras y Firefox no, asi que el fallo solo se veia en uno de
	   los dos navegadores.

	   Es la ley aprendida en la S103, otra vez: un estado que no declaramos es
	   un estado regalado. `height: auto` desactiva la del tema y el `min-height`
	   de aqui abajo pone la nuestra. */
	height: auto;
	/* LA CUENTA, y hay que respetarla siempre que se toque el relleno:

	     alto minimo >= linea + relleno arriba + relleno abajo + los dos bordes

	   Con 15 px de letra y linea 1.2 son 18; mas 8+8 de relleno y 2 de borde,
	   36. Se deja en 38 para no ir al limite y para que el dedo tenga donde
	   dar. Cuando la cuenta no se cumple —lo que pasaba con los 40 px que
	   impone el tema— Chrome RECORTA las letras y Firefox las deja salir, y el
	   fallo solo se ve en uno de los dos navegadores. */
	min-height: 38px;
	background: var(--ej-input-bg);
	color: var(--ej-text);
	border: 1px solid var(--ej-field-border);
	border-radius: 9px;
}
.ej-alta .ej-campo textarea { resize: vertical; min-height: 92px; }

.ej-alta .ej-campo input:focus,
.ej-alta .ej-campo select:focus,
.ej-alta .ej-campo textarea:focus {
	outline: 2px solid var(--ej-brand-2);
	outline-offset: 1px;
	border-color: var(--ej-brand-2);
}

.ej-alta .ej-campo__ayuda {
	margin: 6px 0 0;
	font-size: .78rem;
	line-height: 1.45;
	color: var(--ej-muted);
}

/* El campo que falla se marca, ademas de contarlo arriba: un aviso general sin
   senalar donde deja a la familia buscando. */
.ej-alta .ej-campo--error input,
.ej-alta .ej-campo--error select,
.ej-alta .ej-campo--error textarea {
	border-color: var(--ej-danger-fg);
	background: var(--ej-danger-bg);
}
.ej-alta .ej-campo--error label { color: var(--ej-danger-fg); }

/* "Ya estas en el club" no es un error de la familia: no se pinta en rojo. */
.ej-alta .ej-alta__mensaje--info {
	background: var(--ej-preview-bg);
	color: var(--ej-text);
	border: 1px solid var(--ej-border);
}

/* ── Avisos del paso «Donde entrenar» (A14.1, S103) ──────────────────────────
   Nunca un "no se puede" sin salida: el plazo cerrado dice a quien escribir, la
   clase llena ofrece la lista de espera y la externa lleva a donde toque. */
.ej-alta .ej-alta__aviso {
	margin: 18px 0 0;
	padding: 16px 18px;
	border-radius: 10px;
	background: var(--ej-warning-bg);
	color: var(--ej-warning-fg);
	font-size: .88rem;
	line-height: 1.55;
}
.ej-alta .ej-alta__aviso[hidden] { display: none; }
.ej-alta .ej-alta__aviso p { margin: 0 0 10px; }
.ej-alta .ej-alta__aviso p:last-child { margin-bottom: 0; }

.ej-alta .ej-alta__aviso-titulo {
	font-weight: 700;
	font-size: 1rem;
}

/* S157 — la linea que dice que dia falla y a que otra opcion se puede ir. Va
   debajo del titulo, en texto normal, y desaparece cuando no hay nada que
   contar (una clase de un solo dia ya lo dice todo arriba). */
.ej-alta .ej-alta__aviso-detalle[hidden] { display: none; }

/* La lista de espera no es un error de la familia: es informacion, y se pinta
   como tal. */
.ej-alta .ej-alta__aviso--espera {
	background: var(--ej-preview-bg);
	color: var(--ej-text);
	border: 1px solid var(--ej-border);
}

.ej-alta .ej-campos--espera { margin: 14px 0 16px; gap: 14px 16px; }

/* 🔴 S157 (22/09/2026, pedido por él) — LOS CUATRO CAMPOS DE LA LISTA DE ESPERA,
   EN UNA SOLA LINEA EN ESCRITORIO.

   Son cuatro datos cortos —nombre, apellidos, correo y telefono— y en dos filas
   de dos hacian parecer el formulario mas largo de lo que es, justo donde la
   familia acaba de llevarse un no. En una linea se ve de un vistazo que es un
   momento.

   Se mide el bloque, no la ventana (misma razon que .ej-campos: el tema del club
   puede meter el asistente en una columna estrecha). Por debajo de 900px vuelven
   a dos columnas, y en movil a una, sin tocar nada de eso. */
@container (min-width: 900px) {
	.ej-alta .ej-campos--espera { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ej-alta .ej-alta__aviso-resultado {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: var(--ej-radius-sm);
	background: var(--ej-card);
	border: 1px solid var(--ej-border);
	font-weight: 600;
}
.ej-alta .ej-alta__aviso-resultado[hidden] { display: none; }

/* El grupo elegido, repetido debajo del desplegable en texto normal: el texto
   de un <option> se corta cuando no cabe, y ni parte en dos lineas ni se puede
   ensanchar. Medido en pantalla con el cliente delante (S103).

   S104: vuelve a estar en uso. El desplegable propio que la sustituyo se ha
   retirado —el cliente quito las plazas de la lista y sin ellas no se ganaba
   su sitio—, asi que esta linea es otra vez la unica red del texto largo. */
.ej-alta .ej-alta__detalle-clase {
	margin: 8px 0 0;
	padding: 9px 12px;
	background: var(--ej-surface-2);
	border-radius: var(--ej-radius-sm);
	color: var(--ej-text);
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.45;
}
.ej-alta .ej-alta__detalle-clase[hidden] { display: none; }

/* ── EL TEXTO DE LOS CAMPOS, UN PUNTO MAS PEQUEÑO (cliente, S104) ────────────
   Solo en escritorio, y no por gusto: los 16 px de los campos no son una
   eleccion de diseño, son el limite por debajo del cual el navegador del
   iPhone y del iPad hace zoom solo al tocar el campo y descoloca la pantalla
   entera. Asi que la letra baja donde no existe ese riesgo —raton y teclado— y
   en movil y tablet se queda exactamente igual.
 */
@media (min-width: 1100px) {
	.ej-alta .ej-campo input,
	.ej-alta .ej-campo select,
	.ej-alta .ej-campo textarea {
		font-size: 15px;
	}
}

/* ── EN EL MÓVIL, LOS CAMPOS MÁS BAJOS SIN BAJAR LA LETRA (cliente, S144) ─────
   Él pidió 14 px para que fueran más estrechos de alto; se le explicó que por
   debajo de 16 el iPhone hace zoom al tocar cada campo, y eligió dejar la letra
   y quitar relleno. LA CUENTA de arriba se sigue cumpliendo: 21 px de línea en el
   peor navegador (los desplegables usan la suya, no la nuestra) + 6 + 6 de
   relleno + 2 de borde = 35. Las alergias no entran: tienen su propio alto. */
@container (max-width: 560px) {
	.ej-alta .ej-campo input,
	.ej-alta .ej-campo select {
		padding-top: 6px;
		padding-bottom: 6px;
		min-height: 35px;
	}
}

/* ── LA PUERTA DE «RETOMAR» (A14.1, S104) ────────────────────────────────────
   No es un paso del asistente: es lo que se ve ANTES de que el asistente
   exista, cuando este navegador dejo un alta a medias. Por eso no lleva barra
   de pasos ni nada del recorrido; solo la pregunta y las dos salidas.

   🔴 S144 (14/09/2026, lo vio el cliente): media fila seguía siendo un campo
   «grandísimo» para una fecha de diez caracteres. El cuadro de la fecha mide lo
   que la fecha; la etiqueta y la ayuda siguen con su ancho. */
.ej-alta .ej-alta__retomar[hidden] { display: none !important; }

.ej-alta .ej-alta__retomar .ej-campos { margin: 0 0 18px; }
.ej-alta .ej-alta__retomar #ej-retomar-fecha { width: 100%; max-width: 200px; }

@container (min-width: 620px) {
	.ej-alta .ej-alta__retomar .ej-campo--ancho { grid-column: auto; }
}

.ej-alta .ej-alta__retomar .ej-alta__nota { margin: 16px 0 0; }

/* ── EL PASO «DATOS DEL ALUMNO» (S144, decisión del cliente del 14/09/2026) ──
   Como la ficha del panel: la foto a la izquierda y los campos a la derecha, en
   las mismas filas (tres, cuatro y dos campos). En móvil, una columna con la foto
   arriba. */
.ej-alta .ej-alta__datos { display: grid; grid-template-columns: 1fr; gap: 20px 28px; margin: 0 0 18px; }
/* S163 (29/09/2026): el bloque de la foto es el mismo en la renovación del área
   («tiene que ser lo mismo», decisión del cliente). Por eso las reglas de la foto
   de aquí abajo nombran también `.ej-area`: un solo dibujo, no una copia. */
.ej-alta .ej-alta__foto,
.ej-area .ej-alta__foto {
	/* La zona de subida va en gris neutro, sin el azulado del resto de superficies
	   (indicación del cliente: «más limpio, un gris claro»). */
	--ej-subida-fondo:        #f5f6f8;
	--ej-subida-fondo-activo: #eceef2;
	--ej-subida-borde:        #c3c8d0;
	--ej-subida-icono-fondo:  #ffffff;
	--ej-subida-marca:        #1f2d50;

	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
@media (prefers-color-scheme: dark) {
	.ej-alta-wrap:not([data-theme="light"]) .ej-alta__foto {
		--ej-subida-fondo:        #1d222d;
		--ej-subida-fondo-activo: #242a37;
		--ej-subida-borde:        #4a5263;
		--ej-subida-icono-fondo:  #2b3140;
		--ej-subida-marca:        #b9c6e8;
	}
}
/* S168 — El área no va dentro de `.ej-alta-wrap` y su modo oscuro es solo el del
   dispositivo: sin esto la zona de la foto se quedaba clara con letras claras. */
@media (prefers-color-scheme: dark) {
	.ej-area .ej-alta__foto {
		--ej-subida-fondo:        #1d222d;
		--ej-subida-fondo-activo: #242a37;
		--ej-subida-borde:        #4a5263;
		--ej-subida-icono-fondo:  #2b3140;
		--ej-subida-marca:        #b9c6e8;
	}
}
.ej-alta-wrap[data-theme="dark"] .ej-alta__foto {
	--ej-subida-fondo:        #1d222d;
	--ej-subida-fondo-activo: #242a37;
	--ej-subida-borde:        #4a5263;
	--ej-subida-icono-fondo:  #2b3140;
	--ej-subida-marca:        #b9c6e8;
}
/* ── DIRECCIÓN (S144, 14/09/2026) ─────────────────────────────────────────────
   Móvil, en una columna; tablet, Dirección a lo ancho y el resto de dos en dos;
   MacBook y escritorio, los cuatro en una línea con la dirección más ancha y el
   código postal estrecho. */
.ej-alta .ej-campos.ej-campos--dir { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 620px) {
	.ej-alta .ej-campos.ej-campos--dir { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.ej-alta .ej-campos--dir > .ej-campo--dir-calle { grid-column: 1 / -1; }
}
@container (min-width: 1100px) {
	.ej-alta .ej-campos.ej-campos--dir { grid-template-columns: minmax(0, 2fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr); }
	.ej-alta .ej-campos--dir > .ej-campo--dir-calle { grid-column: auto; }
}
@supports not (container-type: inline-size) {
	@media (min-width: 700px) {
		.ej-alta .ej-campos.ej-campos--dir { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
		.ej-alta .ej-campos--dir > .ej-campo--dir-calle { grid-column: 1 / -1; }
	}
	@media (min-width: 1300px) {
		.ej-alta .ej-campos.ej-campos--dir { grid-template-columns: minmax(0, 2fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr); }
		.ej-alta .ej-campos--dir > .ej-campo--dir-calle { grid-column: auto; }
	}
}
.ej-alta .ej-alta__localidades { margin-top: 6px; }
/* El recuadro para dar de alta un código postal que no existe, como el del panel:
   debajo de los campos y en horizontal (el cliente); en el móvil, uno debajo de otro. */
.ej-alta .ej-alta__cp-nuevo {
	margin-top: 16px;
	padding: 12px 14px;
	background: var(--ej-surface-2);
	border: 1px solid var(--ej-border);
	border-radius: var(--ej-radius-sm);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ej-alta .ej-alta__cp-nuevo-msg { margin: 0; color: var(--ej-muted); font-size: .85rem; line-height: 1.5; }
.ej-alta .ej-alta__cp-nuevo-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: end; }
.ej-alta .ej-alta__cp-nuevo-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.ej-alta .ej-alta__cp-nuevo-error { margin: 0; color: var(--ej-danger-fg); font-size: .85rem; }
@container (min-width: 620px) {
	.ej-alta .ej-alta__cp-nuevo-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
}
@supports not (container-type: inline-size) {
	@media (min-width: 700px) {
		.ej-alta .ej-alta__cp-nuevo-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
	}
}
/* Con el código postal encontrado, localidad y provincia no se tocan a mano, como en el panel. */
.ej-alta .ej-campo input[readonly],
.ej-alta .ej-campo select.ej-alta__solo-lectura {
	background: var(--ej-surface-2);
	color: var(--ej-muted);
	cursor: default;
}
.ej-alta .ej-campo select.ej-alta__solo-lectura { pointer-events: none; }

/* ── CONTACTOS (S144, 14/09/2026) ─────────────────────────────────────────────
   Las tarjetas de las personas y el formulario de añadir o editar, como la
   pestaña del panel. El formulario: en el móvil una columna; en tablet de dos en
   dos; en MacBook y escritorio en una línea, con Nombre y Email más anchos y
   «Parentesco (otro)» justo debajo de Parentesco (como en Tutores). */
.ej-alta .ej-contactos { display: flex; flex-direction: column; gap: 14px; }
.ej-alta .ej-contactos__titulo { margin: 0; color: var(--ej-text); font-size: 1rem; font-weight: 700; }
.ej-alta .ej-contactos__contador { color: var(--ej-muted); font-size: .9rem; font-weight: 600; }
.ej-alta .ej-contactos__aviso {
	margin: 0;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--ej-danger-bg);
	color: var(--ej-danger-fg);
	font-size: .85rem;
	line-height: 1.5;
}
.ej-alta .ej-contactos__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ej-alta .ej-contactos__lista:empty { display: none; }
.ej-alta .ej-contactos__vacio { margin: 0; color: var(--ej-muted); font-size: .88rem; }
.ej-alta .ej-contactos__anadir { align-self: flex-start; }
/* S144 (D5): los contactos de los hermanos que no caben, a elegir, como el aviso del panel. */
.ej-alta .ej-contactos__familia {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 14px 16px;
	border: 1px solid var(--ej-border);
	border-radius: var(--ej-radius-sm);
	background: var(--ej-surface-2);
}
.ej-alta .ej-contactos__familia[hidden] { display: none; }
.ej-alta .ej-contactos__familia > .ej-alta__sub { margin: 0; }
.ej-alta .ej-contactos__familia > .ej-alta__acciones { flex-wrap: wrap; }
.ej-alta .ej-contactos__familia-texto { margin: 0; color: var(--ej-text); font-size: .92rem; font-weight: 600; }
.ej-alta .ej-contactos__familia-lista { display: flex; flex-direction: column; gap: 10px; }
.ej-alta .ej-contactos__familia-fila { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ej-alta .ej-contactos__familia-de { margin: 0; padding-left: 52px; color: var(--ej-muted); font-size: .82rem; overflow-wrap: anywhere; }
.ej-alta .ej-contactos__familia-contador { margin: 0; color: var(--ej-muted); font-size: .85rem; }
.ej-alta .ej-contactos__familia-contador.is-aviso { color: var(--ej-danger-fg); font-weight: 600; }
.ej-alta .ej-contacto-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--ej-border);
	border-radius: var(--ej-radius-sm);
	background: var(--ej-surface-2);
}
.ej-alta .ej-contacto-card__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ej-alta .ej-contacto-card__avatar {
	display: inline-flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ej-border);
	border-radius: 50%;
	background: var(--ej-input-bg);
	color: var(--ej-text);
	font-size: .8rem;
	font-weight: 700;
}
.ej-alta .ej-contacto-card__nombre { flex: 1 1 auto; min-width: 0; color: var(--ej-text); font-weight: 600; overflow-wrap: anywhere; }
.ej-alta .ej-contacto-card__acciones { display: flex; flex: 0 0 auto; gap: 2px; }
.ej-alta .ej-contacto-card .ej-contacto-card__icono--editar:hover,
.ej-alta .ej-contacto-card .ej-contacto-card__icono--editar:focus-visible { color: var(--ej-accent); }
.ej-alta .ej-contacto-card__body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 12px;
	margin: 0;
	font-size: .85rem;
}
.ej-alta .ej-contacto-card__body dt { margin: 0; color: var(--ej-muted); font-weight: 600; }
.ej-alta .ej-contacto-card__body dd { margin: 0; color: var(--ej-text); overflow-wrap: anywhere; }
.ej-alta .ej-contacto-card__nota { margin: 0; color: var(--ej-muted); font-size: .8rem; }
/* 🔴 S154 — La tarjeta del tutor dentro de los autorizados a recoger: la misma
   píldora y el mismo borde de acento que en el panel, para que la familia vea de
   dónde sale esa persona y por qué no se puede tocar aquí. */
.ej-alta .ej-contacto-card--tutor { border-left: 3px solid var(--ej-accent); }
.ej-alta .ej-contacto-pildora-tutor {
	display: inline-block;
	flex: 0 0 auto;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--ej-accent-soft, rgba(230, 168, 42, .18));
	color: var(--ej-accent);
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.ej-alta .ej-contactos__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--ej-border);
	border-radius: var(--ej-radius-sm);
	background: var(--ej-surface-2);
}
.ej-alta .ej-campos.ej-campos--contacto { grid-template-columns: minmax(0, 1fr); }
.ej-alta .ej-contactos__form-msg { margin: 0; color: var(--ej-danger-fg); font-size: .85rem; }
.ej-alta .ej-contactos__form-msg.is-info { color: var(--ej-muted); }
.ej-alta .ej-contactos__form-botones { display: flex; flex-wrap: wrap; gap: 8px; }
@container (min-width: 620px) {
	.ej-alta .ej-campos.ej-campos--contacto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ej-alta .ej-campos--contacto > .ej-campo--contacto-otro { grid-column: 1; }
}
/* Las tarjetas, de dos en dos solo cuando caben sin partir el email (medido a
   768 px: con dos columnas se partía); cuatro autorizados quedan en 2 y 2. */
@container (min-width: 800px) {
	.ej-alta .ej-contactos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 🔴 S154 (21/09/2026, pedido por él) — DE TRES EN TRES CUANDO HAY SITIO.
   Con los tutores dentro de la lista son hasta cuatro tarjetas, y de dos en dos
   la pantalla se hacía larga. A partir de aquí caben tres sin partir el email. */
@container (min-width: 1040px) {
	.ej-alta .ej-contactos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 1100px) {
	.ej-alta .ej-campos.ej-campos--contacto { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1fr); }
	.ej-alta .ej-campos--contacto > .ej-campo--contacto-otro { grid-column: 5; }
}
@supports not (container-type: inline-size) {
	@media (min-width: 700px) {
		.ej-alta .ej-campos.ej-campos--contacto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.ej-alta .ej-campos--contacto > .ej-campo--contacto-otro { grid-column: 1; }
	}
	@media (min-width: 900px) {
		.ej-alta .ej-contactos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
	@media (min-width: 1240px) {
		.ej-alta .ej-contactos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	}
	@media (min-width: 1300px) {
		.ej-alta .ej-campos.ej-campos--contacto { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1fr); }
		.ej-alta .ej-campos--contacto > .ej-campo--contacto-otro { grid-column: 5; }
	}
}

/* ── LA FAMILIA NUMEROSA (S144, 14/09/2026, el cliente) ──────────────────────
   En «Datos del alumno»: el interruptor y, encendido, el documento, con la
   misma zona gris de subida que la foto, en horizontal. */
.ej-alta .ej-campos.ej-campos--fn {
	--ej-subida-fondo:        #f5f6f8;
	--ej-subida-fondo-activo: #eceef2;
	--ej-subida-borde:        #c3c8d0;
	--ej-subida-icono-fondo:  #ffffff;
	--ej-subida-marca:        #1f2d50;
	align-items: center;
}
@media (prefers-color-scheme: dark) {
	.ej-alta-wrap:not([data-theme="light"]) .ej-campos.ej-campos--fn {
		--ej-subida-fondo:        #1d222d;
		--ej-subida-fondo-activo: #242a37;
		--ej-subida-borde:        #4a5263;
		--ej-subida-icono-fondo:  #2b3140;
		--ej-subida-marca:        #b9c6e8;
	}
}
.ej-alta-wrap[data-theme="dark"] .ej-campos.ej-campos--fn {
	--ej-subida-fondo:        #1d222d;
	--ej-subida-fondo-activo: #242a37;
	--ej-subida-borde:        #4a5263;
	--ej-subida-icono-fondo:  #2b3140;
	--ej-subida-marca:        #b9c6e8;
}
.ej-alta .ej-subida-doc {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 12px 16px;
	background: var(--ej-subida-fondo);
	border: 1.5px dashed var(--ej-subida-borde);
	border-radius: 12px;
	color: var(--ej-text);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.ej-alta .ej-subida-doc:hover,
.ej-alta .ej-subida-doc:focus-visible,
.ej-alta .ej-subida-doc.is-arrastrando {
	background: var(--ej-subida-fondo-activo);
	border-color: var(--ej-subida-marca);
	outline: none;
}
.ej-alta .ej-subida-doc__icono {
	display: inline-flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ej-subida-icono-fondo);
	color: var(--ej-subida-marca);
}
.ej-alta .ej-subida-doc__icono svg { width: 22px; height: 22px; }
.ej-alta .ej-subida-doc__cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ej-alta .ej-subida-doc__titulo { font-size: .85rem; font-weight: 600; }
.ej-alta .ej-subida-doc .ej-subida__texto { font-size: .8rem; }
.ej-alta .ej-subida-doc__formatos { font-size: .74rem; color: var(--ej-muted); }
.ej-alta .ej-doc-vista {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 10px 12px;
	background: var(--ej-subida-fondo);
	border: 1px solid var(--ej-border);
	border-radius: 12px;
}
.ej-alta .ej-doc-vista.is-arrastrando { outline: 2px solid var(--ej-accent); outline-offset: 2px; }
.ej-alta .ej-doc-vista__icono { display: inline-flex; flex: 0 0 auto; color: var(--ej-subida-marca); }
.ej-alta .ej-doc-vista__icono svg { width: 22px; height: 22px; }
.ej-alta .ej-doc-vista__nombre {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: .88rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ej-alta .ej-doc-vista__btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid var(--ej-field-border);
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	color: var(--ej-text);
	font: inherit;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}
.ej-alta .ej-doc-vista__btn svg { width: 14px; height: 14px; }
.ej-alta .ej-doc-vista__btn:hover,
.ej-alta .ej-doc-vista__btn:focus-visible { background: transparent; border-color: var(--ej-subida-marca); color: var(--ej-text); }
.ej-alta .ej-alta__fn-doc.ej-campo--error .ej-subida-doc,
.ej-alta .ej-alta__fn-doc.ej-campo--error .ej-doc-vista { border-color: var(--ej-danger-fg); }

/* S144 (el cliente): el nombre del campo va dentro de la zona, encima de la nube. */
.ej-alta .ej-subida__titulo,
.ej-area .ej-subida__titulo { display: block; font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--ej-text); }

/* ── La zona vacía: arrastrar o pulsar ── */
.ej-alta .ej-subida,
.ej-area .ej-subida {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	aspect-ratio: 3 / 4;
	max-width: 100%;
	box-sizing: border-box;
	padding: 18px 14px;
	margin: 0;
	background: var(--ej-subida-fondo);
	border: 1.5px dashed var(--ej-subida-borde);
	border-radius: 14px;
	color: var(--ej-text);
	text-align: center;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ej-alta .ej-subida:hover,
.ej-alta .ej-subida:focus-visible,
.ej-area .ej-subida:hover,
.ej-area .ej-subida:focus-visible {
	background: var(--ej-subida-fondo-activo);
	border-color: var(--ej-subida-marca);
	outline: none;
}
.ej-alta .ej-subida:focus-visible,
.ej-area .ej-subida:focus-visible { box-shadow: 0 0 0 3px rgba(120, 136, 170, .28); }
.ej-alta .ej-subida.is-arrastrando,
.ej-area .ej-subida.is-arrastrando {
	background: rgba(216, 161, 58, .10);
	border-style: solid;
	border-color: var(--ej-accent);
}
.ej-alta .ej-subida__icono,
.ej-area .ej-subida__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--ej-subida-icono-fondo);
	color: var(--ej-subida-marca);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px rgba(16, 24, 40, .07);
	transition: transform .22s ease;
}
.ej-alta .ej-subida__icono svg,
.ej-area .ej-subida__icono svg { width: 28px; height: 28px; }
.ej-alta .ej-subida:hover .ej-subida__icono,
.ej-alta .ej-subida.is-arrastrando .ej-subida__icono,
.ej-area .ej-subida:hover .ej-subida__icono,
.ej-area .ej-subida.is-arrastrando .ej-subida__icono { transform: translateY(-3px); }
.ej-alta .ej-subida__texto,
.ej-area .ej-subida__texto { display: block; font-size: .82rem; line-height: 1.5; color: var(--ej-text); }
.ej-alta .ej-subida__texto--tactil,
.ej-area .ej-subida__texto--tactil { display: none; }
.ej-alta .ej-subida__enlace,
.ej-area .ej-subida__enlace {
	color: var(--ej-subida-marca);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.ej-alta .ej-subida__formatos,
.ej-area .ej-subida__formatos { display: block; font-size: .7rem; line-height: 1.4; color: var(--ej-muted); }
/* En el móvil y la tablet no se arrastra: al tocar, el teléfono ofrece la cámara o la galería. */
@media (hover: none) and (pointer: coarse) {
	.ej-alta .ej-subida__texto--raton,
	.ej-area .ej-subida__texto--raton { display: none; }
	.ej-alta .ej-subida__texto--tactil,
	.ej-area .ej-subida__texto--tactil { display: block; }
}
.ej-alta .ej-alta__foto.ej-campo--error .ej-subida,
.ej-area .ej-alta__foto.ej-campo--error .ej-subida {
	background: var(--ej-danger-bg);
	border-color: var(--ej-danger-fg);
}

/* ── Con la foto puesta: la foto y, encima, «Cambiar» y «Quitar» ── */
.ej-alta .ej-subida-vista,
.ej-area .ej-subida-vista {
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border: 1px solid var(--ej-border);
	border-radius: 14px;
	background: var(--ej-subida-fondo);
}
.ej-alta .ej-subida-vista.is-arrastrando,
.ej-area .ej-subida-vista.is-arrastrando { outline: 2px solid var(--ej-accent); outline-offset: 2px; }
.ej-alta .ej-subida-vista__img,
.ej-area .ej-subida-vista__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ej-alta .ej-subida-vista__acciones,
.ej-area .ej-subida-vista__acciones {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 40px 8px 10px;
	background: linear-gradient(to top, rgba(12, 17, 28, .82) 0%, rgba(12, 17, 28, .45) 55%, rgba(12, 17, 28, 0) 100%);
}
/* Con la especificidad de sobra: el tema del club pinta los <button> a su manera. */
.ej-alta .ej-subida-vista .ej-subida-vista__btn,
.ej-alta .ej-subida-vista .ej-subida-vista__btn:hover,
.ej-alta .ej-subida-vista .ej-subida-vista__btn:focus,
.ej-alta .ej-subida-vista .ej-subida-vista__btn:active,
.ej-area .ej-subida-vista .ej-subida-vista__btn,
.ej-area .ej-subida-vista .ej-subida-vista__btn:hover,
.ej-area .ej-subida-vista .ej-subida-vista__btn:focus,
.ej-area .ej-subida-vista .ej-subida-vista__btn:active {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 6px 10px;
	border: 0;
	border-radius: 8px;
	/* Oscuro y no blanco translúcido: sobre una foto clara (fondo blanco de carnet)
	   el blanco se perdía y no se leía (medido en pantalla). */
	background: rgba(15, 20, 32, .72);
	color: #ffffff;
	font-family: inherit;
	font-size: .76rem;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: none;
	cursor: pointer;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background-color .15s ease;
}
.ej-alta .ej-subida-vista .ej-subida-vista__btn:hover,
.ej-alta .ej-subida-vista .ej-subida-vista__btn:focus-visible,
.ej-area .ej-subida-vista .ej-subida-vista__btn:hover,
.ej-area .ej-subida-vista .ej-subida-vista__btn:focus-visible { background: rgba(15, 20, 32, .92); outline: none; }
.ej-alta .ej-subida-vista__btn svg,
.ej-area .ej-subida-vista__btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* S144 (medido en pantalla a 390 px): con la foto del móvil, de 140 px, «Cambiar» y
   «Quitar» no cabían y se cortaban. Ahí se quedan con su nombre, sin el icono y
   un poco más compactos: el nombre es lo que dice qué hace cada uno. */
@container (max-width: 619px) {
	.ej-alta .ej-subida-vista__acciones { gap: 4px; padding: 30px 6px 8px; }
	.ej-alta .ej-subida-vista .ej-subida-vista__btn,
	.ej-alta .ej-subida-vista .ej-subida-vista__btn:hover,
	.ej-alta .ej-subida-vista .ej-subida-vista__btn:focus,
	.ej-alta .ej-subida-vista .ej-subida-vista__btn:active { padding: 5px 8px; font-size: .72rem; }
	.ej-alta .ej-subida-vista__btn svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ej-alta .ej-subida,
	.ej-alta .ej-subida__icono,
	.ej-alta .ej-subida-vista .ej-subida-vista__btn,
	.ej-area .ej-subida,
	.ej-area .ej-subida__icono,
	.ej-area .ej-subida-vista .ej-subida-vista__btn { transition: none; }
}

.ej-alta .ej-alta__datos-campos { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ej-alta .ej-alta__datos-campos .ej-campos { margin: 0; }
/* S144 (14/09/2026, visto en pantalla a 390, 768, 1024 y 1440 px): en móvil y
   tablet vertical la foto va ARRIBA, centrada y sin pasar de 240 px; al lado de
   los campos solo cuando caben, con la caja de 800 px o más. Con la foto al lado
   en una tablet vertical, la columna de datos quedaba tan estrecha que el
   apellido se cortaba y las etiquetas largas partían su fila. */
/* En el móvil, más pequeña todavía (el cliente, viéndolo a 390 px, dos veces). */
.ej-alta .ej-alta__foto { width: 100%; max-width: 140px; margin-inline: auto; }
/* S144 (el cliente): el título del paso sobra cuando ya lo dice la pestaña. Se
   aparta de la vista pero se queda para quien navega con lector de pantalla, que
   es a donde lleva el foco al cambiar de paso. */
.ej-alta .ej-alta__h2.ej-alta__h2--solo-lector {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
@container (min-width: 620px) {
	.ej-alta .ej-alta__foto { max-width: 240px; }
	.ej-alta .ej-campos--tres { grid-template-columns: 1fr 1fr 1fr; }
	/* S144 (14/09/2026, el cliente): Email y Grado del mismo ancho, y el Peso
	   más estrecho, que para un número no hace falta más. */
	.ej-alta .ej-campos--email-grado-peso { grid-template-columns: 1fr 1fr 150px; }
}
@container (min-width: 800px) {
	.ej-alta .ej-alta__datos { grid-template-columns: 200px 1fr; align-items: start; }
	/* S144 (el cliente): la foto, centrada en vertical respecto a las filas de la derecha. */
	.ej-alta .ej-alta__foto { align-self: center; max-width: none; margin-inline: 0; }
}
/* S144 (el cliente, en tablet horizontal): la foto un poco más pequeña. Con el
   asistente ya a 980 px (escritorio y portátil) se queda en 200. */
@container (min-width: 800px) and (max-width: 979px) {
	.ej-alta .ej-alta__datos { grid-template-columns: 170px 1fr; }
}
/* S144 (14/09/2026, el cliente, viéndolo en tablet vertical): la foto más pequeña
   y a la izquierda, y a su derecha Nombre, Apellidos y Fecha de nacimiento
   apilados; el resto de filas, debajo y a todo el ancho. La columna de los campos
   se disuelve para que cada fila vaya a su sitio en la rejilla de la foto. */
@container (min-width: 620px) and (max-width: 799px) {
	.ej-alta .ej-alta__datos { grid-template-columns: 170px minmax(0, 1fr); align-items: center; }
	.ej-alta .ej-alta__datos-campos { display: contents; }
	.ej-alta .ej-alta__foto { grid-column: 1; grid-row: 1; max-width: 170px; margin-inline: 0; }
	.ej-alta .ej-campos.ej-campos--identidad { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr); }
	.ej-alta .ej-alta__datos-campos > .ej-campos:not(.ej-campos--identidad) { grid-column: 1 / -1; }
}
/* S144 (14/09/2026, el cliente): en Tutores, Teléfono | DNI / NIE | Parentesco en
   la misma línea, y la papelera «Quitar» a su medida al final (antes ocupaba una
   columna tan ancha como un campo y dejaba a Parentesco sin sitio). «Parentesco
   (otro)», cuando sale, justo debajo de Parentesco, como en escritorio. */
@container (min-width: 620px) {
	.ej-alta .ej-campos.ej-campos--en-linea {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
		grid-auto-flow: row;
	}
	.ej-alta .ej-campos--en-linea > [data-ej-parentesco-otro] { grid-column: 3; }
}
/* ── LOS DOS INTERRUPTORES DE TUTORES (S144, 14/09/2026, el cliente) ─────────
   El interruptor: la casilla de verdad se queda debajo, invisible pero viva
   (teclado, lector de pantalla y envío del formulario), y lo que se ve es la
   pista. Mismo componente que el paso Hermanos. */
.ej-alta .ej-interruptor {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	cursor: pointer;
	color: var(--ej-text);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.4;
}
.ej-alta .ej-interruptor input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}
.ej-alta .ej-interruptor__pista {
	position: relative;
	flex: 0 0 44px;
	width: 44px;
	height: 24px;
	border-radius: 999px;
	background: var(--ej-field-border);
	transition: background-color .15s ease;
}
.ej-alta .ej-interruptor__pista::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
	transition: transform .15s ease;
}
.ej-alta .ej-interruptor input:checked + .ej-interruptor__pista { background: var(--ej-brand); }
/* S144 (visto en pantalla): en modo oscuro el azul de la marca no se distingue
   del fondo de la tarjeta; encendido va en el dorado de la temporada, el mismo
   que eligió el cliente para los números de los pasos. */
.ej-alta-wrap[data-theme="dark"] .ej-alta .ej-interruptor input:checked + .ej-interruptor__pista { background: var(--ej-accent); }
@media (prefers-color-scheme: dark) {
	.ej-alta-wrap:not([data-theme="light"]) .ej-alta .ej-interruptor input:checked + .ej-interruptor__pista { background: var(--ej-accent); }
}
.ej-alta .ej-interruptor input:checked + .ej-interruptor__pista::after { transform: translateX(20px); }
.ej-alta .ej-interruptor input:focus-visible + .ej-interruptor__pista {
	outline: 2px solid var(--ej-accent);
	outline-offset: 2px;
}
.ej-alta .ej-interruptor__texto { min-width: 0; }
/* S144 (el cliente): la papelera de cada tutor, al lado de Parentesco, a la
   altura del campo. Solo el icono, sin texto y sin recuadro (lo pidió él al
   verla con «Quitar» y borde). */
.ej-alta .ej-campo.ej-campo--quitar { align-self: end; }
.ej-alta .ej-tutor-quitar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	min-height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--ej-muted);
	line-height: 1;
	cursor: pointer;
	transition: color .15s ease;
}
.ej-alta .ej-tutor-quitar svg { width: 20px; height: 20px; flex: 0 0 20px; }
/* En el móvil los campos van en una columna: la papelera, detrás de todos los
   del tutor, también de «Parentesco (otro)» cuando sale. Solo aquí: en tablet y
   escritorio la columna de cada uno está fijada y el orden la movería de fila. */
@container (max-width: 619px) {
	.ej-alta .ej-campos--en-linea > .ej-campo--quitar { order: 1; }
}
@supports not (container-type: inline-size) {
	@media (max-width: 699px) {
		.ej-alta .ej-campos--en-linea > .ej-campo--quitar { order: 1; }
	}
}
.ej-alta .ej-tutor-quitar:hover,
.ej-alta .ej-tutor-quitar:focus-visible {
	background: transparent;
	color: var(--ej-danger-fg);
}
.ej-alta .ej-tutor-quitar:focus-visible { outline: 2px solid var(--ej-accent); outline-offset: 2px; }
.ej-alta .ej-tutor-quitar:disabled { opacity: .55; cursor: wait; }

/* S144: y su aviso, debajo de los dos interruptores, a todo lo ancho. */
.ej-alta .ej-alta__interruptores-aviso {
	grid-column: 1 / -1;
	margin: 0;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--ej-danger-bg);
	color: var(--ej-danger-fg);
	font-size: .85rem;
	line-height: 1.5;
}
/* S144: como en el panel (S127), el anillo rojo marca el interruptor que pide
   el segundo tutor mientras no esté. */
.ej-alta .ej-interruptor.is-error .ej-interruptor__pista {
	box-shadow: 0 0 0 2px var(--ej-danger-fg);
}
/* Bloqueado (por el otro interruptor) o guardándose: se ve, pero no se toca. */
.ej-alta .ej-interruptor input:disabled + .ej-interruptor__pista { opacity: .55; }
.ej-alta .ej-interruptor:has( input:disabled ) { cursor: not-allowed; }

.ej-alta .ej-alta__interruptores {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px 32px;
	margin: 0 0 22px;
}
.ej-alta .ej-alta__interruptor-nota {
	margin: 6px 0 0 56px;
	font-size: .78rem;
	line-height: 1.45;
	color: var(--ej-muted);
}

/* S144 (el cliente): el icono de información al lado de cada interruptor, como
   en el panel. El texto del interruptor encoge y el icono se queda a su lado;
   la nota del bloqueo baja debajo, dentro de su misma columna (S121). */
.ej-alta .ej-alta__interruptor-caja {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 4px;
	min-width: 0;
}
.ej-alta .ej-alta__interruptor-caja > .ej-interruptor { flex: 1 1 0; min-width: 0; }
.ej-alta .ej-alta__interruptor-caja > .ej-alta__interruptor-nota { flex: 1 0 100%; }

/* El botón ⓘ: el mismo del panel (22 px, gris, redondo al pasar el ratón). */
.ej-alta .ej-info-btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ej-muted);
	cursor: pointer;
	line-height: 1;
	box-shadow: none;
	transition: background-color .15s ease, color .15s ease;
}
.ej-alta .ej-info-btn:hover,
.ej-alta .ej-info-btn[aria-expanded="true"] {
	background: var(--ej-surface-2);
	color: var(--ej-text);
}
.ej-alta .ej-info-btn:focus-visible {
	outline: 2px solid var(--ej-accent);
	outline-offset: 1px;
}
.ej-alta .ej-info-btn svg { display: block; }

/* La explicación que abre el icono: debajo de los dos interruptores, a todo lo
   ancho, con la raya dorada a la izquierda como el panel. */
.ej-alta .ej-ayuda {
	grid-column: 1 / -1;
	margin: 0;
	padding: 10px 14px;
	background: var(--ej-surface-2);
	border-left: 3px solid var(--ej-accent);
	border-radius: 0 8px 8px 0;
	font-size: .85rem;
	line-height: 1.6;
	color: var(--ej-text);
}
.ej-alta .ej-ayuda p { margin: 0 0 8px; }
.ej-alta .ej-ayuda ul { margin: 0 0 0 18px; padding: 0; }
.ej-alta .ej-ayuda li { margin: 0 0 4px; }
.ej-alta .ej-ayuda li:last-child { margin-bottom: 0; }

/* S144 (el cliente): en MacBook y escritorio, los dos interruptores uno al lado
   del otro, y Nombre, Email, Teléfono, DNI / NIE y Parentesco en una sola línea
   («Parentesco (otro)» también, cuando sale). Las dos filas del tutor se disuelven
   en una rejilla con tantas columnas como campos se ven. */
@container (min-width: 1100px) {
	.ej-alta .ej-alta__interruptores { grid-template-columns: 1fr 1fr; }
	/* S144 (el cliente, viéndolo): Nombre y Email más anchos, Teléfono y DNI / NIE
	   más estrechos, y «Parentesco (otro)» justo debajo de Parentesco. */
	.ej-alta .ej-alta__tutor-campos {
		display: grid;
		/* S144: y una sexta columna, a su medida, para la papelera.
		   S158 (24/09/2026): el Teléfono con un mínimo de 200px. Con .8fr se
		   quedaba en 174px y, con la bandera delante, el primer dígito se
		   escondía: «644 555 666» se leía «44 555 666». */
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(200px, .8fr) minmax(0, .8fr) minmax(0, 1fr) auto;
		gap: 18px 20px;
		margin: 0 0 8px;
	}
	.ej-alta .ej-alta__tutor-campos > .ej-campos { display: contents; }
	.ej-alta .ej-alta__tutor-campos [data-ej-parentesco-otro] { grid-column: 5; }
}

/* S144 (el cliente): las alergias van como cuarta fila y no necesitan tanta altura. */
.ej-alta .ej-alta__datos-campos textarea { min-height: 64px; }

/* ── EL PASO DE PAGO Y EL DE CONFIRMAR (A14.1, S144) ─────────────────────────
   Las cuentas que ya usa un hermano se eligen con una tarjeta entera, no con un
   punto diminuto: en un movil hay que poder acertar con el pulgar. La elegida se
   marca con el borde y el fondo, ademas del propio punto. */
.ej-alta [data-ej-pago][hidden],
.ej-alta [data-ej-pago-domiciliacion][hidden],
.ej-alta [data-ej-pago-cuentas][hidden],
.ej-alta [data-ej-pago-nueva][hidden],
.ej-alta [data-ej-pago-otra][hidden],
.ej-alta .ej-alta__resumen[hidden] { display: none; }

.ej-alta .ej-alta__cuentas {
	display: grid;
	gap: 10px;
	margin: 0 0 18px;
}
.ej-alta .ej-alta__cuenta {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--ej-border);
	border-radius: 10px;
	background: var(--ej-card);
	color: var(--ej-text);
	font-size: .88rem;
	font-weight: 400;
	line-height: 1.45;
	cursor: pointer;
}
.ej-alta .ej-alta__cuenta input {
	width: auto;
	min-height: 0;
	height: auto;
	margin: 3px 0 0;
	flex: 0 0 auto;
}
.ej-alta .ej-alta__cuenta.is-elegida {
	border-color: var(--ej-brand-2);
	background: var(--ej-preview-bg);
}
.ej-alta .ej-alta__cuenta-iban { font-weight: 600; letter-spacing: .02em; }
.ej-alta .ej-alta__cuenta-de {
	display: block;
	margin: 2px 0 0;
	color: var(--ej-muted);
	font-size: .8rem;
}

/* El resumen de lo elegido antes de confirmar: etiqueta y valor en dos columnas,
   que en un movil estrecho siguen cabiendo porque las etiquetas son cortas. */
.ej-alta .ej-alta__resumen {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	margin: 0 0 18px;
	padding: 14px 16px;
	background: var(--ej-surface-2);
	border-radius: 10px;
	font-size: .88rem;
	line-height: 1.45;
}
.ej-alta .ej-alta__resumen dt { margin: 0; color: var(--ej-muted); font-weight: 600; }
.ej-alta .ej-alta__resumen dd { margin: 0; color: var(--ej-text); }

/* ── INSCRIPCIÓN (S144, cliente 14/09/2026) ──────────────────────────────────
   A la izquierda, un tercio: la tarjeta con lo ya elegido y, debajo del peso, el
   tercer día. A la derecha, dos tercios: la forma de pago. En tablet y móvil, una
   debajo de la otra: en un tercio de esas pantallas no se lee el resumen. */
.ej-alta .ej-insc-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
.ej-alta .ej-insc-resumen {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 14px 16px;
	background: var(--ej-surface-2);
	border-radius: 10px;
}
.ej-alta .ej-insc-resumen[hidden],
.ej-alta .ej-insc-resumen__tercer-dia[hidden] { display: none; }
/* El resumen ya va dentro de la tarjeta: sin su propio fondo ni margen. */
.ej-alta .ej-insc-resumen .ej-alta__resumen { margin: 0; padding: 0; background: transparent; border-radius: 0; }
.ej-alta .ej-insc-resumen__tercer-dia { padding-top: 12px; border-top: 1px solid var(--ej-border); }
.ej-alta .ej-insc-grid__pago > .ej-alta__h3:first-child { margin-top: 0; }

/* S144 (cliente, 14/09/2026): comprobaciones en el momento, como en el panel. El
   aviso va debajo del propio campo; debajo del IBAN, el nombre del banco. */
.ej-alta .ej-campo__error {
	margin: 4px 0 0;
	color: var(--ej-danger-fg);
	font-size: .8rem;
	line-height: 1.4;
}
.ej-alta .ej-alta__banco-nombre {
	margin: 4px 0 0;
	color: var(--ej-text);
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.4;
}
.ej-alta .ej-alta__banco-nombre.is-desconocido { color: var(--ej-muted); font-weight: 400; }
.ej-alta .ej-alta__banco-nombre[hidden] { display: none; }

/* S144 (cliente, 14/09/2026): el bloque de abajo de «Inscripción», en tres columnas
   y en este orden —Descuentos, Resumen de la cuota y Documentos a firmar—; en
   tablet y móvil, una debajo de otra. */
.ej-alta .ej-insc-bloque {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin: 28px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--ej-border);
}
.ej-alta .ej-insc-bloque__col { min-width: 0; }
.ej-alta .ej-insc-bloque__col > .ej-alta__h3:first-child { margin-top: 0; }

/* Descuentos. */
.ej-alta .ej-insc-dto-lista { display: flex; flex-direction: column; gap: 10px; }
.ej-alta .ej-insc-dto {
	padding: 10px 12px;
	border: 1px solid var(--ej-border);
	border-radius: var(--ej-radius-sm);
	background: var(--ej-surface-2);
	font-size: .88rem;
}
.ej-alta .ej-insc-dto__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ej-alta .ej-insc-dto__linea { margin: 0; color: var(--ej-text); }
.ej-alta .ej-insc-dto__valor { color: var(--ej-muted); font-size: .82rem; }
.ej-alta .ej-insc-dto__marca {
	padding: 1px 6px;
	border: 1px solid var(--ej-border);
	border-radius: 999px;
	color: var(--ej-muted);
	font-size: .7rem;
	font-weight: 600;
}
.ej-alta .ej-insc-mejor { margin-left: 6px; color: var(--ej-accent); font-size: .74rem; font-weight: 700; }
.ej-alta .ej-insc-espera { display: block; margin-top: 2px; color: var(--ej-muted); font-size: .78rem; }
.ej-alta .ej-insc-dto__cantidad { display: flex; align-items: center; gap: 8px; margin: 0; }
.ej-alta .ej-insc-dto__cantidad input { width: 72px; }
.ej-alta .ej-insc-dto__papel { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; }
.ej-alta .ej-insc-dto__papel p { margin: 0; font-size: .8rem; line-height: 1.4; }
.ej-alta .ej-insc-dto__papel-falta { color: var(--ej-danger-fg); }
.ej-alta .ej-insc-dto__papel-estado { color: var(--ej-muted); }
.ej-alta .ej-insc-dto__papel-estado:empty { display: none; }
/* El papel ya subido: la vista del carnet de «Datos del alumno», a todo lo ancho de la tarjeta. */
.ej-alta .ej-insc-dto__papel .ej-doc-vista { align-self: stretch; }
.ej-alta .ej-insc-dto__adjuntar { padding: 7px 12px; font-size: .82rem; }
.ej-alta .ej-insc-vacio { margin: 0; color: var(--ej-muted); font-size: .86rem; }

/* Resumen de la cuota. */
.ej-alta .ej-insc-cuota__tabla {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 6px 12px;
	margin: 0;
	padding: 14px 16px;
	background: var(--ej-surface-2);
	border-radius: 10px;
	font-size: .88rem;
}
.ej-alta .ej-insc-cuota__tabla dt { margin: 0; color: var(--ej-muted); font-weight: 600; }
.ej-alta .ej-insc-cuota__tabla dd { margin: 0; color: var(--ej-text); text-align: right; font-variant-numeric: tabular-nums; }
.ej-alta .ej-insc-cuota__tabla .ej-insc-cuota__total { padding-top: 8px; border-top: 1px solid var(--ej-border); color: var(--ej-text); font-size: 1rem; font-weight: 700; }
/* 🔴 S157 (23/09/2026, pedido por Marcelo) — «Ya tienes otro que rebaja lo
   mismo». Es un aviso, no un error: la familia no ha hecho nada mal, solo se le
   dice que la cuota no va a bajar más. Por eso va en el tono de la marca y no
   en rojo. */
.ej-alta .ej-insc-dto__empate {
	margin: 8px 0 0;
	padding: 10px 12px;
	border-left: 3px solid var(--ej-accent);
	border-radius: 8px;
	background: var(--ej-accent-soft, rgba(230, 168, 42, .12));
	color: var(--ej-text);
	font-size: .84rem;
	line-height: 1.5;
}

/* 🔴 S157 (23/09/2026, él viéndolo en su pantalla: «este texto ponlo más grande
   y con estilo de aviso, para que se vea bien»).

   Es la regla del dinero —solo se aplica el descuento que más rebaja, y los
   acumulables se suman aparte— y se estaba leyendo como una letra pequeña de
   contrato. Pasa a ser un aviso con su recuadro, como los demás del plugin. */
.ej-alta .ej-insc-cuota__nota {
	display: block;
	margin: 12px 0 0;
	padding: 12px 14px;
	border-left: 3px solid var(--ej-accent);
	border-radius: 8px;
	background: var(--ej-accent-soft, rgba(230, 168, 42, .12));
	color: var(--ej-text);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.5;
}

/* Documentos a firmar. */
.ej-alta .ej-insc-docs {
	margin: 0;
	padding: 14px 16px 14px 34px;
	background: var(--ej-surface-2);
	border-radius: 10px;
	color: var(--ej-text);
	font-size: .86rem;
	line-height: 1.6;
}
.ej-alta .ej-insc-docs__vacio { margin-left: -18px; list-style: none; color: var(--ej-muted); }

/* 🔴 S168 (04/10/2026, decisión suya) — LA CLASE QUE SE PAGA EN EL COLEGIO.
   Arriba, el aviso y a su lado la subida de la inscripción hecha en el colegio,
   destacada como la foto del alumno; en el móvil, uno debajo del otro. Abajo, la
   tarjeta de Descuentos no se ve pero guarda su sitio («en lugar de display usa
   visibility»), para que Resumen de la cuota y Documentos a firmar no se
   ensanchen; cuando las columnas van una debajo de otra, se quita del todo. */
.ej-alta .ej-insc-colegio {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-items: stretch;
	margin: 8px 0 0;
}
.ej-alta .ej-insc-colegio[hidden] { display: none; }
.ej-alta .ej-insc-colegio .ej-insc-colegio__aviso { margin: 0; align-self: start; }
/* Los mismos colores que la zona de la foto (`.ej-alta__foto`), en claro y en oscuro. */
.ej-alta .ej-insc-colegio__papel {
	--ej-subida-fondo:        #f5f6f8;
	--ej-subida-fondo-activo: #eceef2;
	--ej-subida-borde:        #c3c8d0;
	--ej-subida-icono-fondo:  #ffffff;
	--ej-subida-marca:        #1f2d50;
	min-width: 0;
}
@media (prefers-color-scheme: dark) {
	.ej-alta-wrap:not([data-theme="light"]) .ej-insc-colegio__papel {
		--ej-subida-fondo:        #1d222d;
		--ej-subida-fondo-activo: #242a37;
		--ej-subida-borde:        #4a5263;
		--ej-subida-icono-fondo:  #2b3140;
		--ej-subida-marca:        #b9c6e8;
	}
}
.ej-alta-wrap[data-theme="dark"] .ej-insc-colegio__papel {
	--ej-subida-fondo:        #1d222d;
	--ej-subida-fondo-activo: #242a37;
	--ej-subida-borde:        #4a5263;
	--ej-subida-icono-fondo:  #2b3140;
	--ej-subida-marca:        #b9c6e8;
}
.ej-alta .ej-insc-colegio__zona { align-items: stretch; margin-top: 0; }
.ej-alta .ej-insc-colegio .ej-subida { aspect-ratio: auto; min-height: 210px; }
.ej-alta .ej-insc-colegio__papel .ej-subida__titulo { margin: 0; }
.ej-alta .ej-insc-colegio__ayuda { color: var(--ej-muted); }
/* Si se intenta seguir sin él: el recuadro en rojo y el aviso debajo, como en el área. */
.ej-alta .ej-insc-colegio .ej-subida.ej-insc-colegio__zona--falta {
	background: var(--ej-danger-bg);
	border-color: var(--ej-danger-fg);
}
.ej-alta .ej-insc-colegio__ayuda.ej-insc-colegio__ayuda--falta { color: var(--ej-danger-fg); font-weight: 600; }
.ej-alta .ej-insc-bloque__col--sin-dtos { display: none; }
@container (min-width: 600px) {
	.ej-alta .ej-insc-colegio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@supports not (container-type: inline-size) {
	@media (min-width: 700px) {
		.ej-alta .ej-insc-colegio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
}

@container (min-width: 1100px) {
	.ej-alta .ej-insc-bloque { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ej-alta .ej-insc-bloque__col--sin-dtos { display: block; visibility: hidden; }
}
@supports not (container-type: inline-size) {
	@media (min-width: 1300px) {
		.ej-alta .ej-insc-bloque { grid-template-columns: repeat(3, minmax(0, 1fr)); }
		.ej-alta .ej-insc-bloque__col--sin-dtos { display: block; visibility: hidden; }
	}
}
@container (min-width: 1100px) {
	.ej-alta .ej-insc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@supports not (container-type: inline-size) {
	@media (min-width: 1300px) {
		.ej-alta .ej-insc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
	}
}

/* S144 (cliente, 14/09/2026): Confirmar en dos columnas iguales — la tarjeta a la
   izquierda; a la derecha el uso de imágenes y el aviso. Mismo corte que Inscripción. */
.ej-alta .ej-conf-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
.ej-alta .ej-conf-grid__datos { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ej-alta .ej-conf-grid__resumen > .ej-alta__resumen,
.ej-alta .ej-conf-grid__datos > .ej-alta__nota { margin-top: 0; margin-bottom: 0; }
@container (min-width: 1100px) {
	.ej-alta .ej-conf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@supports not (container-type: inline-size) {
	@media (min-width: 1300px) {
		.ej-alta .ej-conf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
}

/* S144 (cliente, 14/09/2026): debajo, los consentimientos de la ficha en tres
   columnas —imágenes, RGPD, normativa y privacidad—, como en el PDF y sin firmas.
   En tablet y móvil, una debajo de otra. */
.ej-alta .ej-conf-cons {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	margin-top: 24px;
}
.ej-alta .ej-conf-cons__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ej-alta .ej-conf-cons__tarjeta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 14px 16px;
	background: var(--ej-surface-2);
	border-radius: 10px;
}
.ej-alta .ej-conf-cons__tarjeta .ej-conf-cons__titulo { margin: 0; color: var(--ej-text); font-size: .88rem; font-weight: 700; line-height: 1.35; }
.ej-alta .ej-conf-cons__texto { margin: 0; color: var(--ej-text); font-size: .82rem; line-height: 1.55; }
.ej-alta .ej-conf-cons__texto[hidden] { display: none; }
/* S157 — mientras se leen los dos textos a la vez, cada uno dice a cuál de las
   dos respuestas corresponde. Al elegir, el rotulo desaparece. */
.ej-alta .ej-conf-cons__rotulo { display: block; margin: 8px 0 2px; font-weight: 600; }
.ej-alta .ej-conf-cons__rotulo[hidden] { display: none; }
.ej-alta .ej-conf-cons__texto + .ej-conf-cons__texto { margin-top: 10px; }
.ej-alta .ej-conf-cons__texto a { color: var(--ej-accent); overflow-wrap: anywhere; }
@container (min-width: 1100px) {
	.ej-alta .ej-conf-cons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@supports not (container-type: inline-size) {
	@media (min-width: 1300px) {
		.ej-alta .ej-conf-cons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	}
}

/* ── RESPALDO PARA SAFARI 15 Y ANTERIORES (cliente, S104) ────────────────────
   El asistente decide sus columnas por el ancho de SU CAJA, no de la pantalla,
   con consultas de contenedor. Eso existe en Safari a partir de la 16.

   El cliente tiene un iPad Air 2, que se quedo en iPadOS 15.8 —es su ultima
   version posible, no hay actualizacion— y decide cubrir «de ese aparato en
   adelante», porque algunas familias tendran tabletas parecidas. Sin esto, ahi
   los campos salen todos en UNA columna aunque la pantalla sea ancha: no se
   rompe nada, pero se ve como un movil estirado.

   Va dentro de `@supports not (...)` a proposito y no como reglas sueltas: asi
   los navegadores modernos ni la miran, y las dos formas de decidir columnas no
   pueden pisarse entre ellas. Donde alli se mira la caja, aqui se mira la
   ventana; los numeros no son los mismos porque no miden lo mismo:

     caja de 620 px  ≈  ventana de 700 px (la caja va con su relleno dentro)
     caja de 560 px  ≈  ventana de 620 px

   En el iPad Air 2 eso da dos columnas de pie (768) y apaisado (1024), y una
   sola en un movil viejo, que es lo que se busca.

   🔴 PROBADO EN CHROME Y FIREFOX FORZANDO LA REGLA. Que el Safari 15 de verdad
   la aplique bien esta SIN COMPROBAR: hace falta el iPad del cliente. */
@supports not (container-type: inline-size) {

	@media (min-width: 700px) {
		.ej-alta .ej-campos { grid-template-columns: 1fr 1fr; }
		.ej-alta .ej-campo--ancho { grid-column: 1 / -1; }
		.ej-alta .ej-alta__retomar .ej-campo--ancho { grid-column: auto; }
	}

	/* S144: la fila con el grupo, en tres columnas cuando caben (caja de 820 px ≈ ventana de 900 px). */
	@media (min-width: 900px) {
		.ej-alta .ej-campos--con-grupo { grid-template-columns: 1fr 1fr 1fr; }
	}

	/* S144: «Datos del alumno», la foto a la izquierda y las filas del panel. */
	@media (min-width: 700px) {
		.ej-alta .ej-alta__foto { max-width: 240px; }
		.ej-alta .ej-campos--tres { grid-template-columns: 1fr 1fr 1fr; }
		.ej-alta .ej-campos--email-grado-peso { grid-template-columns: 1fr 1fr 150px; }
	}
	@media (min-width: 880px) {
		.ej-alta .ej-alta__datos { grid-template-columns: 200px 1fr; align-items: start; }
		.ej-alta .ej-alta__foto { align-self: center; max-width: none; margin-inline: 0; }
	}
	@media (min-width: 880px) and (max-width: 1099px) {
		.ej-alta .ej-alta__datos { grid-template-columns: 170px 1fr; }
	}
	@media (min-width: 1300px) {
		.ej-alta .ej-alta__interruptores { grid-template-columns: 1fr 1fr; }
		.ej-alta .ej-alta__tutor-campos { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(200px, .8fr) minmax(0, .8fr) minmax(0, 1fr) auto; gap: 18px 20px; margin: 0 0 8px; }
		.ej-alta .ej-alta__tutor-campos > .ej-campos { display: contents; }
		.ej-alta .ej-alta__tutor-campos [data-ej-parentesco-otro] { grid-column: 5; }
	}
	@media (min-width: 700px) and (max-width: 879px) {
		.ej-alta .ej-alta__datos { grid-template-columns: 170px minmax(0, 1fr); align-items: center; }
		.ej-alta .ej-alta__datos-campos { display: contents; }
		.ej-alta .ej-alta__foto { grid-column: 1; grid-row: 1; max-width: 170px; margin-inline: 0; }
		.ej-alta .ej-campos.ej-campos--identidad { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr); }
		.ej-alta .ej-alta__datos-campos > .ej-campos:not(.ej-campos--identidad) { grid-column: 1 / -1; }
	}
	@media (min-width: 700px) and (max-width: 1299px) {
		.ej-alta .ej-campos.ej-campos--en-linea { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; grid-auto-flow: row; }
		.ej-alta .ej-campos--en-linea > [data-ej-parentesco-otro] { grid-column: 3; }
	}

	@media (max-width: 620px) {
		.ej-alta { padding: 22px 20px 32px; border-radius: 0; border-left: 0; border-right: 0; }
		.ej-alta .ej-campo input,
		.ej-alta .ej-campo select { padding-top: 6px; padding-bottom: 6px; min-height: 35px; }
		.ej-alta .ej-alta__acciones { flex-direction: column-reverse; align-items: stretch; }
		.ej-alta .ej-btn { width: 100%; }
	}
}

/* ═══════════════════════════ S139 — MIENTRAS SE COMPRUEBA SI HAY ALGO A MEDIAS
   El asistente nace escondido detrás de una sola línea, para no enseñar la
   antesala y cambiarla debajo tres segundos después. Dura un parpadeo. */
.ej-alta .ej-alta__comprobando {
	display: none;
	margin: 1.4rem 0;
	text-align: center;
	opacity: .75;
}
.ej-alta.ej-alta--comprobando .ej-alta__comprobando { display: block; }
.ej-alta.ej-alta--comprobando .ej-alta__pasos,
.ej-alta.ej-alta--comprobando .ej-alta__form,
.ej-alta.ej-alta--comprobando form,
.ej-alta.ej-alta--comprobando .ej-alta__retomar { display: none !important; }
.ej-alta .ej-alta__retomado {
	margin: 0 0 1rem;
	padding: .6rem .9rem;
	border-radius: 8px;
	background: rgba(116, 232, 240, .12);
	font-weight: 600;
}

/* ═══════════════════════════ S144 — EL AVISO DE PLAZO ABIERTO EN LA PORTADA
   Pregunta 47 del documento de decisiones: sale cada vez que se entra en la
   portada mientras algún centro tenga el plazo abierto, y es uno solo, general,
   con los centros que lo tienen abierto. Los colores son los tokens de siempre
   (el aviso está añadido al bloque de tokens de arriba, con su modo oscuro), y
   los botones repiten los del alta nueva.

   Todo va con la clase del aviso delante, y el hover de los botones declarado:
   aquí no estamos dentro de ningún formulario nuestro, sino encima de la
   portada del tema del club, que pinta sus propios botones y enlaces.

   🔴 No bloquea el scroll de la página (ley del proyecto): la capa va encima y
   nada más. */
.ej-aviso-plazo {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ej-aviso-plazo[hidden] { display: none !important; }

.ej-aviso-plazo .ej-aviso-plazo__fondo {
	position: absolute;
	inset: 0;
	background: rgba(18, 24, 38, .6);
}

.ej-aviso-plazo .ej-aviso-plazo__caja {
	position: relative;
	width: min( 480px, 100% );
	max-height: calc( 100vh - 32px );
	overflow-y: auto;
	box-sizing: border-box;
	padding: 26px 24px 22px;
	background: var(--ej-card);
	color: var(--ej-text);
	border: 1px solid var(--ej-border);
	border-radius: 14px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
	outline: none;
}

.ej-aviso-plazo .ej-aviso-plazo__temporada {
	margin: 0 0 6px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ej-muted);
}
.ej-aviso-plazo .ej-aviso-plazo__titulo {
	margin: 0 0 8px;
	font-family: inherit;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--ej-text);
}
.ej-aviso-plazo .ej-aviso-plazo__texto {
	margin: 0 0 12px;
	font-size: .92rem;
	line-height: 1.5;
	color: var(--ej-muted);
}
.ej-aviso-plazo .ej-aviso-plazo__lista {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}
.ej-aviso-plazo .ej-aviso-plazo__centro {
	margin: 0 0 8px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--ej-surface-2);
}
.ej-aviso-plazo .ej-aviso-plazo__nombre {
	display: block;
	font-size: .95rem;
	font-weight: 600;
	color: var(--ej-text);
}
.ej-aviso-plazo .ej-aviso-plazo__detalle {
	display: block;
	margin-top: 2px;
	font-size: .8rem;
	line-height: 1.4;
	color: var(--ej-muted);
}

.ej-aviso-plazo .ej-aviso-plazo__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}
.ej-aviso-plazo .ej-btn {
	display: inline-block;
	padding: 12px 22px;
	border: 0;
	border-radius: 10px;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
}
.ej-aviso-plazo .ej-btn--principal,
.ej-aviso-plazo .ej-btn--principal:hover,
.ej-aviso-plazo .ej-btn--principal:focus,
.ej-aviso-plazo .ej-btn--principal:active {
	color: #fff;
	text-decoration: none;
}
.ej-aviso-plazo .ej-btn--principal { background: var(--ej-brand); }
.ej-aviso-plazo .ej-btn--principal:hover,
.ej-aviso-plazo .ej-btn--principal:focus { background: var(--ej-brand-2); }
.ej-aviso-plazo .ej-btn--secundario,
.ej-aviso-plazo .ej-btn--secundario:hover,
.ej-aviso-plazo .ej-btn--secundario:focus,
.ej-aviso-plazo .ej-btn--secundario:active {
	color: var(--ej-text);
	border: 1px solid var(--ej-border);
}
.ej-aviso-plazo .ej-btn--secundario { background: transparent; }
.ej-aviso-plazo .ej-btn--secundario:hover,
.ej-aviso-plazo .ej-btn--secundario:focus { background: var(--ej-surface-2); }
.ej-aviso-plazo .ej-btn:focus-visible { outline: 2px solid var(--ej-accent); outline-offset: 2px; }

/* NADA EN CURSIVA (petición expresa del cliente), tampoco la que ponga el tema. */
.ej-aviso-plazo,
.ej-aviso-plazo p,
.ej-aviso-plazo li,
.ej-aviso-plazo span,
.ej-aviso-plazo h2 {
	font-style: normal;
}

@media (max-width: 480px) {
	.ej-aviso-plazo .ej-aviso-plazo__acciones { flex-direction: column-reverse; }
	.ej-aviso-plazo .ej-btn { width: 100%; }
}

@media (prefers-color-scheme: dark) {
	.ej-aviso-plazo .ej-btn--principal { background: var(--ej-brand-2); }
	.ej-aviso-plazo .ej-btn--principal:hover,
	.ej-aviso-plazo .ej-btn--principal:focus { background: #4a5c96; }
}

/* ── Área · Renovar: el asistente con la estructura del panel (S146, «el panel que
      está previsto»). Un paso por actividad arriba, la inscripción de partida a la
      izquierda y las pestañas que se abren en orden a la derecha. ── */
.ej-rv {
	display: grid;
	gap: 14px;
	min-width: 0;
}

.ej-rv-pasos {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	border-bottom: 1px solid var(--ej-border);
	scrollbar-width: thin;
}

.esamjudo-portal a.ej-rv-paso,
.esamjudo-portal a.ej-rv-paso:hover {
	flex: none;
	padding: 8px 12px;
	border-bottom: 2.5px solid transparent;
	color: var(--ej-muted);
	font-size: 0.84rem;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
}

.esamjudo-portal a.ej-rv-paso:hover {
	color: var(--ej-text);
}

.esamjudo-portal a.ej-rv-paso.is-actual {
	border-bottom-color: var(--ej-area-marca);
	color: var(--ej-area-marca);
}

.esamjudo-portal .ej-rv-layout {
	display: grid;
	grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.ej-rv-izq,
.ej-rv-der,
.ej-rv-panel {
	display: grid;
	gap: 12px;
	min-width: 0;
}

.ej-rv-panel[hidden],
.esamjudo-portal button.ej-rv-subtab[hidden],
.esamjudo-portal button[data-rv-guardar][hidden],
.esamjudo-portal button[data-rv-continuar][hidden] {
	display: none;
}

.ej-rv-subtabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	border-bottom: 1px solid var(--ej-border);
}

.esamjudo-portal button.ej-rv-subtab,
.esamjudo-portal button.ej-rv-subtab:hover,
.esamjudo-portal button.ej-rv-subtab:focus {
	margin: 0;
	padding: 7px 10px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--ej-muted);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.esamjudo-portal button.ej-rv-subtab:hover {
	color: var(--ej-text);
}

.esamjudo-portal button.ej-rv-subtab[aria-selected="true"] {
	border-bottom-color: var(--ej-accent);
	color: var(--ej-area-marca);
}

.esamjudo-portal button.ej-rv-subtab:disabled {
	opacity: 0.4;
	cursor: default;
}

.esamjudo-portal button.ej-rv-subtab:focus-visible {
	outline: 2px solid var(--ej-area-marca);
	outline-offset: 2px;
}

.ej-rv-persona--principal {
	border-color: var(--ej-accent);
}

.ej-rv-persona__cab {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	color: var(--ej-text);
	font-size: 0.88rem;
}

.ej-rv-avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ej-area-marca);
	color: var(--ej-area-boton-texto);
	font-size: 0.7rem;
	font-weight: 700;
}

.esamjudo-portal .ej-rv-titulo {
	margin: 0;
	color: var(--ej-text);
	font-size: 0.94rem;
	font-weight: 700;
	text-transform: none;
}

.ej-rv-acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--ej-border);
}

@media (max-width: 900px) {
	.esamjudo-portal .ej-rv-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   🔴 S149 (17/09/2026, el cliente) — «VAMOS A FIRMAR», DELANTE DE TODO.

   Cuando la familia cambia quién puede recoger a un menor y se va de la
   pestaña Contactos, se la lleva a firmar la Ficha sin que tenga que pulsar
   nada. El aviso de que eso va a pasar estaba dentro de la pestaña, al final,
   y él lo vio en su pantalla: «lo has puesto abajo, que no da tiempo a
   verlo». Así que va centrado y encima de la página, con el mismo dibujo que
   el aviso de plazo de la portada.

   🔴 No bloquea el scroll (ley del proyecto): es una capa, y nada más.
   ────────────────────────────────────────────────────────────────────────── */
.ej-area-yendo-a-firmar {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ej-area-yendo-a-firmar[hidden] { display: none !important; }

.ej-area-yendo-a-firmar .ej-area-yendo-a-firmar__fondo {
	position: absolute;
	inset: 0;
	background: rgba(18, 24, 38, .6);
}

.ej-area-yendo-a-firmar .ej-area-yendo-a-firmar__caja {
	position: relative;
	width: min( 460px, 100% );
	box-sizing: border-box;
	padding: 26px 24px 22px;
	background: var(--ej-card);
	color: var(--ej-text);
	border: 1px solid var(--ej-border);
	border-radius: 14px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
	text-align: center;
}

.ej-area-yendo-a-firmar .ej-area-yendo-a-firmar__titulo {
	margin: 0 0 10px;
	font-size: 1.06rem;
	font-weight: 700;
	color: var(--ej-text);
}

.ej-area-yendo-a-firmar .ej-area-yendo-a-firmar__texto {
	margin: 0 0 12px;
	font-size: 0.92rem;
	line-height: 1.5;
}

.ej-area-yendo-a-firmar .ej-area-yendo-a-firmar__pie {
	margin: 0;
	padding: 10px 12px;
	border-radius: var(--ej-area-radio);
	background: var(--ej-warning-bg);
	color: var(--ej-warning-fg);
	font-size: 0.88rem;
	font-weight: 600;
}

/* ===== S149 — El curso que se matricula fuera del club ======================
   En Garralda, de 6º de Primaria en adelante la matrícula se hace en la web del
   propio colegio. La familia elige ese curso en el alta pública y le sale esto,
   con el aviso que escribe el club y dos botones: ir a matricularse o cerrar.

   Es un modal y no un aviso al pie por petición suya: el de abajo «no da tiempo
   a verlo». Mismo dibujo que el aviso de firma del área, para que la web no
   parezca dos webs distintas. */
.ej-alta-fuera {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	background: rgba(18, 24, 38, .6);
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ej-alta-fuera[hidden] { display: none !important; }

.ej-alta-fuera .ej-alta-fuera__caja {
	width: min( 480px, 100% );
	box-sizing: border-box;
	padding: 26px 24px 22px;
	background: var(--ej-card);
	color: var(--ej-text);
	border: 1px solid var(--ej-border);
	border-radius: 14px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
	text-align: center;
}

.ej-alta-fuera .ej-alta-fuera__titulo {
	margin: 0 0 10px;
	font-size: 1.06rem;
	font-weight: 700;
}

.ej-alta-fuera .ej-alta-fuera__texto {
	margin: 0 0 18px;
	font-size: 0.95rem;
	line-height: 1.55;
}

.ej-alta-fuera .ej-alta-fuera__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.ej-alta-fuera .ej-alta-fuera__acciones p {
	margin: 0;
	font-size: 0.9rem;
	width: 100%;
}

/* S167 (M5/M6) — El aviso en dos pasos de la clase que se inscribe en el colegio:
   cada paso en su recuadro, a lo ancho, y los dos botones debajo. */
.ej-alta-fuera .ej-alta-fuera__paso {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--ej-border);
	border-radius: 10px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

/* S168 — El botón «Ir a la inscripción del colegio»: centrado y en el dorado del club,
   que se ve igual sobre la caja clara y sobre la oscura (el secundario se perdía). */
.ej-alta-fuera .ej-alta-fuera__paso .ej-alta-fuera__ir {
	align-self: center;
	background: var(--ej-accent);
	color: #1f2d50;
	border: 0;
}
.ej-alta-fuera .ej-alta-fuera__paso .ej-alta-fuera__ir:hover { filter: brightness(1.08); }

.ej-alta-fuera .ej-alta-fuera__acciones .ej-alta-fuera__paso-titulo {
	font-weight: 700;
	font-size: 0.95rem;
}

.ej-alta-fuera .ej-alta-fuera__botones {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 4px;
}

/* ===== S162 — La caja de confirmar y de aviso de la parte pública ===========
   Sustituye a las ventanas del navegador (decisión suya de la S122, empezada por
   la parte pública el 28/09/2026). Mismo dibujo que la de arriba, «Este curso no
   se matricula aquí», y los botones del alta. La pinta esamjudo-confirmar.js. */
.ej-confirmar {
	position: fixed;
	inset: 0;
	z-index: 100010;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	background: rgba(18, 24, 38, .6);
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ej-confirmar .ej-confirmar__caja {
	width: min( 480px, 100% );
	box-sizing: border-box;
	padding: 26px 24px 22px;
	background: var(--ej-card);
	color: var(--ej-text);
	border: 1px solid var(--ej-border);
	border-radius: 14px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
	text-align: center;
}

.ej-confirmar .ej-confirmar__titulo {
	margin: 0 0 10px;
	color: inherit;
	font-size: 1.06rem;
	font-weight: 700;
	line-height: 1.4;
}

.ej-confirmar .ej-confirmar__texto {
	margin: 0 0 12px;
	color: inherit;
	font-size: 0.95rem;
	line-height: 1.55;
}

.ej-confirmar .ej-confirmar__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 18px;
}

.ej-confirmar .ej-confirmar__btn {
	display: inline-block;
	padding: 12px 22px;
	border: 1px solid var(--ej-border);
	border-radius: 10px;
	background: transparent;
	color: var(--ej-text);
	font-family: inherit;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
.ej-confirmar .ej-confirmar__btn:hover { background: var(--ej-surface-2); }
.ej-confirmar .ej-confirmar__btn--principal { border-color: var(--ej-brand); background: var(--ej-brand); color: #fff; }
.ej-confirmar .ej-confirmar__btn--principal:hover { background: var(--ej-brand-2); }
.ej-confirmar .ej-confirmar__btn--peligro { border-color: #b32d2e; background: #b32d2e; color: #fff; }
.ej-confirmar .ej-confirmar__btn--peligro:hover { background: #962526; }
.ej-confirmar .ej-confirmar__btn:focus-visible { outline: 2px solid var(--ej-accent); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
 * 🔴 S157 (23/09/2026) — LOS TUTORES QUE HOY NO RECOGEN AL ALUMNO
 *
 * Van debajo de la lista de autorizados, separados por una línea, para que se
 * vea que no ocupan plaza: son los que se pueden volver a poner. Decidido con
 * él ese día, después de ver que al apagar el interruptor la tarjeta salía de
 * la lista y no había manera de encenderlo otra vez.
 *
 * Las tarjetas son las mismas de arriba (la pieza única de la S154), así que
 * aquí solo va el marco y el título; nada de repintar la tarjeta.
 * ══════════════════════════════════════════════════════════════════════════ */
.esamjudo-portal .ej-area-tutores-fuera {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--ej-border, rgba(31, 45, 80, .14));
}

.esamjudo-portal .ej-area-titulo--peq {
	font-size: .95rem;
}

.esamjudo-portal .ej-area-tutores-fuera .ej-area__nota {
	margin: 4px 0 12px;
}

/* S157 — la cabecera de Tutores, con su cuenta al lado del título, y la
   tarjeta de los dos interruptores de la familia, que solo se leen. */
.esamjudo-portal .ej-area-cab {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.esamjudo-portal .ej-area-tutores-firma {
	margin-bottom: 16px;
}

.esamjudo-portal .ej-area-tutores-firma .ej-area-datos dt {
	font-weight: 400;
}

/* S157 — la tarjeta de los dos interruptores de la familia: preguntas largas a
   lo ancho, con el Sí o el No al final de cada línea. En la rejilla de dos
   columnas de `ej-area-datos` se partían palabra a palabra. */
.esamjudo-portal .ej-area-tutores-firma__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.esamjudo-portal .ej-area-tutores-firma__lista li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ej-border, rgba(31, 45, 80, .10));
}

.esamjudo-portal .ej-area-tutores-firma__lista li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.esamjudo-portal .ej-area-tutores-firma__lista span {
	flex: 1 1 260px;
	color: var(--ej-muted);
}

/* La nota del interruptor de recoger viene de la pieza del panel y allí no
   tiene margen: dentro de la tarjeta del área se salía del recuadro. */
.esamjudo-portal .ej-tutor-card__recoger {
	margin-top: 10px;
}

.esamjudo-portal .ej-tutor-recoger-nota {
	margin: 6px 0 0;
	color: var(--ej-muted);
	font-size: .8rem;
	line-height: 1.35;
}

/* Las tarjetas de tutor, todas a la misma altura, como las de los autorizados. */
.esamjudo-portal .ej-area-tutores-lista .ej-contacto-card--tutor {
	display: flex;
	flex-direction: column;
}

/* S157 — Los dos interruptores de la familia, en la pestaña Tutores. El
   interruptor a la izquierda con su tamaño, y la pregunta al lado ocupando lo
   que le queda. Sin esto el carril se estiraba a media pantalla, porque la fila
   es flexible y el carril no traía ancho propio. */
.esamjudo-portal .ej-area-tutores-firma__lista--switches li {
	display: block;
}

.esamjudo-portal .ej-area-tutores-firma__lista--switches .esamjudo-switch {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.esamjudo-portal .ej-area-tutores-firma__lista--switches .esamjudo-switch__track {
	flex: 0 0 auto;
	margin-top: 2px;
}

.esamjudo-portal .ej-area-tutores-firma__lista--switches .esamjudo-switch__label {
	flex: 1 1 auto;
	color: var(--ej-text);
	font-weight: 400;
	line-height: 1.35;
}

/* Los botones de cada tarjeta de tutor, uno debajo de otro y a su ancho. */
.esamjudo-portal .ej-area-tutor-acciones {
	display: grid;
	gap: 6px;
	margin-top: 10px;
}

/* 🔴 S157 — Buscar a un tutor que ya está en el club, antes de crear otro.
   La lista de resultados es una columna de botones anchos, como el resto de
   listas del área; el que no se puede elegir —ya vinculado o archivado— se
   queda apagado con su motivo debajo. */
.esamjudo-portal .ej-area-tutor-buscar {
	margin-bottom: 14px;
}

.esamjudo-portal .ej-area-tutor-buscar__lista {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.esamjudo-portal .ej-area-tutor-buscar__item {
	display: grid;
	gap: 2px;
	width: 100%;
	text-align: left;
	padding: 8px 10px;
	border: 1px solid var(--ej-border, #d9dee7);
	border-radius: 8px;
	background: var(--ej-card, #fff);
	color: var(--ej-text);
	cursor: pointer;
	font: inherit;
}

.esamjudo-portal .ej-area-tutor-buscar__item:hover:not(:disabled) {
	border-color: var(--ej-area-marca, var(--ej-accent, #e6a82a));
}

.esamjudo-portal .ej-area-tutor-buscar__item:disabled {
	cursor: default;
	opacity: .6;
}

.esamjudo-portal .ej-area-tutor-buscar__item small {
	color: var(--ej-muted, #6b7280);
	font-size: .85em;
}

.esamjudo-portal .ej-area-tutor-buscar__vincular {
	margin-top: 10px;
	padding: 10px;
	border: 1px solid var(--ej-border, #d9dee7);
	border-radius: 8px;
}

/* La tarjeta de quien ya no es tutor: los mismos datos, apagada. */
.esamjudo-portal .ej-area-tutor--archivado {
	opacity: .85;
}

/* 🔴 S157 — Y CUANDO ESTÁ OCULTO, SE QUEDA OCULTO.
   `.ej-area-form` le da `display: grid`, y eso pisa el `display: none` que el
   navegador aplica a `hidden`: el formulario de vincular se veía nada más
   buscar, sin haber elegido a nadie, pidiendo un parentesco para nadie. Visto
   en pantalla el 23/09/2026. Se acota a esta pieza para no tocar el resto. */
.esamjudo-portal .ej-area-tutor-buscar__vincular[hidden] {
	display: none;
}

/* La pregunta por los hermanos al quitarle a alguien que puede recoger. */
.esamjudo-portal .ej-area-recoger-hermanos {
	list-style: none;
	margin: 6px 0 10px;
	padding: 0;
	display: grid;
	gap: 4px;
}

.esamjudo-portal .ej-area-recoger-hermanos label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

/* S158 — «Lleno» en la pregunta de poner un contacto a los hermanos. */
.esamjudo-portal .ej-area-recoger-hermanos__nota {
	display: block;
	font-size: 0.85em;
	color: #b45309;
}

/* 🔴 S158 — «Ya no son hermanos», con la pregunta del motivo como la ✕ del
   panel. Los pasos se esconden con `hidden`, y el formulario lleva
   `display: grid` (ver arriba): sin esto se verían los tres a la vez. */
.esamjudo-portal .ej-area-herm-quitar {
	display: grid;
	gap: 10px;
	margin: 4px 0 12px;
}

.esamjudo-portal .ej-area-herm-quitar [data-ej-herm-paso][hidden],
.esamjudo-portal .ej-area-herm-quitar [data-ej-herm-inicio][hidden] {
	display: none;
}

.esamjudo-portal .ej-area-herm-opciones {
	display: grid;
	gap: 8px;
}

.esamjudo-portal button.ej-area-herm-opcion {
	display: grid;
	gap: 2px;
	width: 100%;
	padding: 10px 12px;
	text-align: left;
	font: inherit;
	color: inherit;
	background: var(--ej-surface-2);
	border: 1px solid var(--ej-border);
	border-radius: var(--ej-area-radio);
	cursor: pointer;
}

.esamjudo-portal button.ej-area-herm-opcion:hover,
.esamjudo-portal button.ej-area-herm-opcion:focus-visible {
	border-color: var(--ej-area-marca);
}

.esamjudo-portal .ej-area-herm-opcion span {
	font-size: 0.85rem;
	opacity: .85;
}

.esamjudo-portal .ej-area-herm-cuota:empty {
	display: none;
}

.esamjudo-portal .ej-area-herm-cuota ul {
	margin: 4px 0 0;
	padding-left: 18px;
}

/* S158 — al elegir a un hijo en «¿Falta algún hermano?», los demás se esconden. */
.esamjudo-portal .ej-area-herm-quitar[hidden] {
	display: none;
}

.esamjudo-portal .ej-area-herm-titulo {
	font-size: 0.95rem;
}

/* S161 (25/09/2026) — Inicio del área: la lista para quitar a un hijo de la
   renovación sin terminar. Un interruptor por hijo, con aire entre ellos. */
.esamjudo-portal .ej-area-tanda-quitar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 12px;
}
.esamjudo-portal .ej-area-tanda-quitar[hidden] {
	display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 🔵 S161 (25/09/2026, opción B a dos columnas, elegida por él) — EL AVISO DE LA
 * RENOVACIÓN DE HERMANOS SIN FIRMAR.
 *
 * 🔵 Y MÁS BAJO (25/09/2026, ~22:10, opción C elegida por él, con el reloj pequeño):
 * la B ocupaba mucha altura (159 px en escritorio y 353 en el móvil, medido). Ahora
 * el reloj va pequeño junto al título, el plazo en una ficha ámbar pequeña en la
 * misma línea, los hijos renovados en fichas verdes pequeñas y una nota de una
 * línea; los botones a la derecha, y en el móvil en una sola fila, mitad y mitad.
 * El mismo dibujo en el asistente y en Inicio, con los colores del área (claro y
 * oscuro). Maqueta: https://claude.ai/artifact/JtoubjioN3SojQfaugR1Gt
 * ══════════════════════════════════════════════════════════════════════════ */
.esamjudo-portal .ej-area-tanda {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px 24px;
	align-items: center;
	margin: 0 0 16px;
	padding: 14px 18px;
	background: var(--ej-card);
	color: var(--ej-text);
	border: 1px solid var(--ej-border);
	border-radius: var(--ej-area-radio);
	box-shadow: var(--ej-area-sombra);
}
.esamjudo-portal .ej-area-tanda__cuerpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	min-width: 0;
}
.esamjudo-portal .ej-area-tanda__tit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ej-text);
}
.esamjudo-portal .ej-area-tanda__reloj {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--ej-warning-fg);
}
.esamjudo-portal .ej-area-tanda__plazo {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 6px;
	line-height: 1.5;
	background: var(--ej-warning-bg);
	color: var(--ej-warning-fg);
	font-size: .82rem;
	font-weight: 600;
}
.esamjudo-portal .ej-area-tanda__hijos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: .85rem;
	color: var(--ej-muted);
}
.esamjudo-portal .ej-area-tanda__hijo {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 8px;
	border-radius: 6px;
	background: var(--ej-success-bg);
	color: var(--ej-success-fg);
	font-weight: 600;
}
.esamjudo-portal .ej-area-tanda__hijo svg {
	width: 12px;
	height: 12px;
}
.esamjudo-portal .ej-area-tanda__nota {
	margin: 0;
	font-size: .85rem;
	color: var(--ej-muted);
}
.esamjudo-portal .ej-area-tanda__acciones {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
.esamjudo-portal .ej-area-tanda__acciones .ej-area-tanda__nota {
	font-size: .8rem;
}
/* S161 (opción 1, elegida por él): en el móvil, el plazo en la nota y no en el título.
   Y en escritorio (dicho por él), la nota va al lado del plazo, no bajo los botones. */
.esamjudo-portal .ej-area-tanda__nota-movil,
.esamjudo-portal .ej-area-tanda__hijo-corto,
.esamjudo-portal .ej-area-tanda__acciones .ej-area-tanda__nota-esc {
	display: none;
}
.esamjudo-portal .ej-area-tanda__nota-tit {
	font-size: .82rem;
	font-weight: 500;
	color: var(--ej-muted);
}
.esamjudo-portal .ej-area-tanda__nota-movil strong {
	color: var(--ej-warning-fg);
	font-weight: 700;
}
@media (max-width: 720px) {
	.esamjudo-portal .ej-area-tanda__tit .ej-area-tanda__plazo,
	.esamjudo-portal .ej-area-tanda__nota-tit,
	.esamjudo-portal .ej-area-tanda__nota-esc,
	.esamjudo-portal .ej-area-tanda__hijo-largo {
		display: none;
	}
	.esamjudo-portal .ej-area-tanda__hijo-corto {
		display: inline;
	}
	.esamjudo-portal .ej-area-tanda__nota-movil {
		display: inline;
	}
}
.esamjudo-portal .ej-area-tanda__botones {
	display: flex;
	gap: 10px;
}
.esamjudo-portal .ej-area-tanda__botones .ej-area-btn {
	width: auto;
	white-space: nowrap;
	/* S161 (dicho por él): un poco más pequeños que los del resto del área. */
	padding: 7px 14px;
	font-size: .85rem;
	min-height: 0;
}
.esamjudo-portal .ej-area-tanda .ej-area-tanda-quitar,
.esamjudo-portal .ej-area-tanda .ej-area-error {
	grid-column: 1 / -1;
}
@media (max-width: 720px) {
	.esamjudo-portal .ej-area-tanda {
		grid-template-columns: minmax(0, 1fr);
		padding: 14px;
	}
	.esamjudo-portal .ej-area-tanda__acciones {
		align-items: stretch;
	}
	/* En el móvil (dicho por él: salían muy grandes), cada botón a la medida de su
	   texto, juntos a la izquierda y en una sola fila si caben. */
	.esamjudo-portal .ej-area-tanda__botones {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.esamjudo-portal .ej-area-tanda__botones .ej-area-btn {
		width: auto;
		flex: 0 0 auto;
		padding: 6px 12px;
	}
}
/* La confirmación de quitar, dentro de la tarjeta: separada por una línea y sin huecos grandes. */
.esamjudo-portal .ej-area-tanda .ej-area-tanda-quitar {
	margin-top: 0;
	padding-top: 14px;
	border-top: 1px solid var(--ej-border);
	gap: 10px;
}
.esamjudo-portal .ej-area-tanda .ej-area-tanda-quitar p {
	margin: 0;
}

/* S161 (C2) — Debajo de «¿A quién quitas…?»: qué cuota cambiaría a quien se queda.
   Gris y discreto si no cambia nada; en ámbar si sube o baja la de alguien. Lo usan el
   asistente de renovar y la caja de Inicio. */
.esamjudo-portal .ej-rn-quitar-aviso {
	margin: 4px 0 0;
	font-size: .88rem;
	color: var(--ej-muted);
}
.esamjudo-portal .ej-rn-quitar-aviso--cambia {
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--ej-warning-bg);
	color: var(--ej-warning-fg);
	font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 🔵 S169 (05/10/2026, B4, decidido por él con su maqueta y un dibujo delante)
 * EL BOTÓN «¿NECESITAS AYUDA CON LA INSCRIPCIÓN?» Y SU VENTANA.
 *
 * Arriba, en la cabecera del alta web y del área (opción B del dibujo). En
 * escritorio el texto algo más pequeño que el de su maqueta; en el móvil, solo el
 * icono. La ventana es la de su maqueta (texto, «Llámanos» y «WhatsApp») con los
 * colores del plugin, en claro y en oscuro como la caja de confirmar. Mientras
 * está abierta la página de detrás se bloquea: excepción suya, solo aquí.
 * ══════════════════════════════════════════════════════════════════════════ */
.ej-ayuda-boton {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 5px 12px;
	border: 1px solid var(--ej-border, #e2e6ee);
	border-radius: 999px;
	background: var(--ej-card, #ffffff);
	color: var(--ej-text, #1d2433);
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
.ej-ayuda-boton svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--ej-accent, #d8a13a); }
.ej-ayuda-boton:hover { border-color: var(--ej-accent, #d8a13a); }
/* El tema del club pinta de azul los botones con el foco o pulsados (visto el
   05/10/2026 en local: rgb(4, 92, 180)); estas mandan sobre las suyas. */
.ej-alta .ej-ayuda-boton:hover, .ej-alta .ej-ayuda-boton:focus, .ej-alta .ej-ayuda-boton:active,
.ej-area .ej-ayuda-boton:hover, .ej-area .ej-ayuda-boton:focus, .ej-area .ej-ayuda-boton:active {
	background: var(--ej-card, #ffffff);
	color: var(--ej-text, #1d2433);
	border-color: var(--ej-accent, #d8a13a);
	box-shadow: none;
}
.ej-ayuda-boton:focus-visible { outline: 2px solid var(--ej-accent, #d8a13a); outline-offset: 2px; }
@media (max-width: 600px) {
	.ej-ayuda-boton { padding: 6px; min-width: 32px; justify-content: center; }
	.ej-ayuda-boton__texto {
		position: absolute; width: 1px; height: 1px; overflow: hidden;
		clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
	}
}

/* En el alta, junto al título; en el área, junto a «Salir». */
.ej-alta__titulo-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
/* En el móvil la cabecera del alta reparte sus piezas en una rejilla (S144): el
   título y su botón van juntos en la casilla del título. */
@container (max-width: 560px) {
	.ej-alta .ej-alta__titulo-fila { grid-area: titulo; gap: 8px; }
}
.ej-area__cab-acciones { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.ej-ayuda-modal {
	position: fixed;
	inset: 0;
	z-index: 100020;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	background: rgba(18, 24, 38, .6);
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	overscroll-behavior: contain;
}
.ej-ayuda-modal *, .ej-ayuda-modal *::before, .ej-ayuda-modal *::after { box-sizing: border-box; }
.ej-ayuda-modal .ej-ayuda-modal__caja {
	position: relative;
	width: min( 520px, 100% );
	max-height: calc( 100vh - 32px );
	max-height: calc( 100dvh - 32px );
	overflow-y: auto;
	padding: 30px 26px 24px;
	background: var(--ej-card);
	color: var(--ej-text);
	border: 1px solid var(--ej-border);
	border-radius: 14px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
.ej-ayuda-modal .ej-ayuda-modal__cerrar {
	position: absolute; top: 8px; right: 8px;
	width: 44px; height: 44px; display: grid; place-items: center;
	padding: 0; border: 0; border-radius: 50%;
	background: transparent; color: var(--ej-muted); cursor: pointer;
}
.ej-ayuda-modal .ej-ayuda-modal__cerrar:focus,
.ej-ayuda-modal .ej-ayuda-modal__cerrar:active { background: transparent; color: var(--ej-muted); box-shadow: none; }
.ej-ayuda-modal .ej-ayuda-modal__cerrar:hover { background: var(--ej-surface-2); color: var(--ej-text); }
.ej-ayuda-modal .ej-ayuda-modal__icono {
	width: 48px; height: 48px; display: grid; place-items: center;
	margin-bottom: 14px; border: 1px solid var(--ej-border); border-radius: 50%;
	color: var(--ej-accent);
}
.ej-ayuda-modal .ej-ayuda-modal__titulo { margin: 0 0 8px; padding-right: 40px; font-size: 1.2rem; font-weight: 600; line-height: 1.3; color: inherit; }
.ej-ayuda-modal .ej-ayuda-modal__texto { margin: 0 0 22px; font-size: .95rem; line-height: 1.65; color: var(--ej-muted); }
.ej-ayuda-modal .ej-ayuda-modal__acciones { display: grid; gap: 12px; grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) ); }
.ej-ayuda-modal .ej-ayuda-modal__opcion {
	display: flex; align-items: center; gap: 14px; min-height: 56px; min-width: 0;
	padding: 13px 16px; border: 1px solid var(--ej-border); border-radius: 10px;
	text-decoration: none; color: var(--ej-text); background: transparent;
}
.ej-ayuda-modal .ej-ayuda-modal__opcion svg { flex-shrink: 0; }
.ej-ayuda-modal .ej-ayuda-modal__opcion span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ej-ayuda-modal .ej-ayuda-modal__opcion small { font-size: .8rem; color: var(--ej-muted); }
.ej-ayuda-modal .ej-ayuda-modal__opcion strong { font-size: .95rem; font-weight: 600; white-space: nowrap; color: var(--ej-text); }
.ej-ayuda-modal .ej-ayuda-modal__opcion--tel { color: var(--ej-accent); }
.ej-ayuda-modal .ej-ayuda-modal__opcion--wa { color: #1c8a4f; }
.ej-ayuda-modal[data-theme="dark"] .ej-ayuda-modal__opcion--wa { color: #5fcf8f; }
@media (prefers-color-scheme: dark) {
	.ej-ayuda-modal:not([data-theme="light"]) .ej-ayuda-modal__opcion--wa { color: #5fcf8f; }
}
.ej-ayuda-modal .ej-ayuda-modal__opcion:hover { border-color: currentColor; background: var(--ej-surface-3); }
.ej-ayuda-modal :focus-visible { outline: 2px solid var(--ej-accent); outline-offset: 2px; }
html.ej-ayuda-sin-scroll, html.ej-ayuda-sin-scroll body { overflow: hidden; }

/* S177: «¿De quién es la cuenta?» en el área — con una persona de la ficha,
   sus campos se esconden (los pone el servidor) y se ve su nombre. */
.ej-quien-oculto {
	display: none !important;
}
.ej-area-quien-resumen {
	margin: 0;
	font-weight: 600;
}