/* ==========================================================================
   70 · PROJECT 2080 ACADEMIA (plugin)
   --------------------------------------------------------------------------
   Se carga en todo el sitio con el plugin activo: toda página lleva el modal de
   la comunidad o su formulario (decisión 058, p2080_ctx_academy en inc/assets.php).

   ── POR QUÉ LOS ESTILOS DEL PLUGIN VIVEN EN EL TEMA (decisión 038) ────────
   El plugin no trae CSS: pinta su marcado con las clases del tema —.field,
   .field__label, .field__error, .field--check, .btn, .alert, .modal—, que ya
   están en 40-components.css. Así un formulario del plugin no puede verse
   distinto de uno del tema, y no hay un segundo juego de colores que
   mantener (el plugin de Optimi traía el suyo, con siete hex propios).

   Aquí queda solo lo que es del plugin y de nadie más: la caja de estado y
   el botón mientras se envía. Es corto a propósito, como 70-cf7.css.
   ========================================================================== */

/* La caja de estado existe siempre, vacía y a la escucha (aria-live), para
   que el lector de pantalla anuncie el resultado del envío. Vacía no ocupa
   sitio; con mensaje se separa del formulario. */
.p2080a-status:not(:empty) {
	margin-block-end: var(--space-3);
}

/* Mientras se envía, el JS desactiva el botón. Sin esto parecería que la web
   se ha quedado colgada. */
.p2080a-form [type="submit"]:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* El grupo de intereses va sin el marco de fieldset por defecto: dentro de un
   formulario largo, un recuadro más es ruido. El <legend> se queda, que es lo
   que da nombre al grupo para el lector de pantalla. */
.p2080a-form fieldset {
	padding: 0;
	border: 0;
}

.p2080a-form legend {
	margin-block-end: var(--space-1);
	padding: 0;
}

/* Campos que comparten fila dentro de un modal, donde cada píxel cuenta. En la
   página siguen uno debajo de otro, y la explicación de la fecha cabe. */
.p2080a-form__row {
	display: grid;
	gap: var(--space-3);
}

.modal .p2080a-form__row {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-2);
}

.modal .p2080a-form__row--short {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal input[type="date"] ~ .field__help {
	display: none;
}

/* El botón y su error, siempre a la vista: en un móvil el formulario no cabe
   entero, y lo que no puede quedar fuera de la pantalla es esto. */
.modal .p2080a-form__actions {
	position: sticky;
	inset-block-end: 0;
	z-index: 1;
	display: grid;
	gap: var(--space-1);
	padding-block: var(--space-1);
	background-color: var(--c-bg-raised);
}

.modal .p2080a-form__actions .p2080a-status {
	margin-block-end: 0;
}

/* ==========================================================================
   RESERVA EN TRES PASOS
   Programa, fecha y tus datos, con calendario (decisión 052). Lo dibuja
   assets/booking.js del plugin. Sin JavaScript el diálogo no se muestra: el botón
   es un enlace a la solicitud de la landing.
   ========================================================================== */

.no-js dialog[data-p2080a-booking] {
	display: none;
}

.booking-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-1);
	padding: 0;
	color: var(--c-muted);
	font-size: var(--fs-data);
	list-style: none;
}

.booking-steps li + li {
	margin-block-start: 0;
}

.booking-steps li::before {
	content: "";
	display: block;
	height: 3px;
	margin-block-end: 4px;
	border-radius: var(--radius-pill);
	background-color: var(--c-border);
}

.booking-steps .is-done::before,
.booking-steps [aria-current]::before {
	background-image: var(--g-brand);
}

.booking-steps [aria-current] {
	color: var(--c-heading);
	font-weight: 700;
}

.booking-step__title {
	font-size: var(--fs-body);
}

/* Un botón con la forma de .choice. */
.booking-option {
	width: 100%;
	color: inherit;
	font: inherit;
	text-align: start;
}

.booking-option + .booking-option {
	margin-block-start: var(--space-1);
}

.booking-summary {
	display: grid;
	justify-items: start;
	gap: 2px;
	padding: var(--space-2);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-media);
	font-size: var(--fs-small);
}

.booking-summary .btn {
	margin-block-start: var(--space-1);
}

.booking-summary__title {
	color: var(--c-heading);
	font-weight: 700;
}

.booking-summary + .p2080a-form {
	margin-block-start: var(--space-2);
}

/* El calendario */
.booking-cal__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-1);
}

.booking-cal__month {
	color: var(--c-heading);
	font-weight: 700;
}

.booking-cal {
	width: 100%;
	border-spacing: 2px;
	border-collapse: separate;
	table-layout: fixed;
}

.booking-cal th {
	padding-block: 4px;
	color: var(--c-muted);
	font-size: var(--fs-data);
	font-weight: 600;
	text-align: center;
	text-transform: capitalize;
}

.booking-cal td {
	padding: 0;
	text-align: center;
}

.booking-cal__empty {
	display: block;
	padding-block: var(--space-1);
	color: var(--c-muted);
	font-size: var(--fs-small);
}

.booking-cal__empty[aria-current] {
	text-decoration: underline;
}

/* El estado lo dicen el color del filo y la cifra de plazas, y el lector de
   pantalla lo oye entero en la etiqueta del botón. */
.booking-cal__day {
	display: grid;
	width: 100%;
	padding: 4px 0;
	border: 1px solid var(--c-border);
	border-block-end: 3px solid var(--day-state);
	border-radius: var(--radius-input);
	background-color: transparent;
	color: var(--c-heading);
	font: inherit;
	font-size: var(--fs-small);
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

:is(.booking-cal__day, .booking-legend li).is-open {
	--day-state: var(--c-success);
}

:is(.booking-cal__day, .booking-legend li).is-last {
	--day-state: var(--c-warning);
}

:is(.booking-cal__day, .booking-legend li).is-full {
	--day-state: var(--c-error);
}

.booking-cal__day.is-session {
	border-color: var(--c-accent);
}

.booking-cal__day[aria-pressed="true"] {
	background-color: var(--c-accent);
	color: var(--c-bg);
}

/* «5 plazas» no cabe en una celda de móvil: ahí queda la cifra. */
.booking-cal__seats {
	font-size: var(--fs-data);
	font-weight: 500;
}

.booking-cal__seats--long {
	display: none;
}

@media (min-width: 480px) {
	.booking-cal__seats--short {
		display: none;
	}

	.booking-cal__seats--long {
		display: inline;
		letter-spacing: -0.02em;
		white-space: nowrap;
	}
}

.booking-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding: 0;
	color: var(--c-muted);
	font-size: var(--fs-data);
	list-style: none;
}

.booking-legend li {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.booking-legend li::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--radius-pill);
	background-color: var(--day-state);
}