/* Olympus Horario - Direccion "Olympus Oro sobre Negro"
 *
 * Los selectores llevan el contenedor por delante (.odt-h / .odt-h-modal) a
 * proposito: el kit global de Elementor estiliza `button` y `select` con
 * especificidad 0,1,1 y ganaria a una clase suelta.
 *
 * El marcado esta agrupado por dia. En escritorio los grupos de dia pasan a
 * `display: contents` y cada casilla se coloca con `grid-area` dentro de una
 * unica rejilla, que es lo que mantiene alineadas las filas de horas. En movil
 * la rejilla pasa a bloque y cada grupo de dia se convierte en una tarjeta.
 */

.odt-h {
	--odt-bg: #101010;
	--odt-surface: #191817;
	--odt-surface-hover: #201e1b;
	--odt-ink: #ffffff;
	--odt-muted: #a6a29b;
	--odt-accent: #b59953;
	--odt-support: #e7df9f;
	--odt-line: #2e2b26;
	--odt-radius: 10px;

	font-family: "Barlow", sans-serif;
	color: var(--odt-ink);
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.odt-h *,
.odt-h *::before,
.odt-h *::after {
	box-sizing: border-box;
}

/* Intro ------------------------------------------------------------------ */

.odt-h .odt-h__intro {
	margin-bottom: 36px;
}

.odt-h .odt-h__lede {
	font-size: 18px;
	line-height: 1.6;
	color: var(--odt-muted);
	max-width: 60ch;
	margin: 0;
}

/* Controles -------------------------------------------------------------- */

.odt-h .odt-h__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 20px;
	margin-bottom: 20px;
}

.odt-h .odt-h__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.odt-h .odt-h__field-label {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--odt-muted);
}

.odt-h .odt-h__select {
	font-family: "Barlow", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--odt-ink);
	background-color: var(--odt-surface);
	background-image: none;
	border: 1px solid var(--odt-line);
	border-radius: 999px;
	padding: 10px 18px;
	min-width: 240px;
	height: auto;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.odt-h .odt-h__select option {
	color: #ffffff;
	background-color: #191817;
}

.odt-h .odt-h__select:focus-visible,
.odt-h .odt-h__toggle:focus-visible,
.odt-h .odt-h__class:focus-visible {
	outline: 2px solid var(--odt-accent);
	outline-offset: 2px;
}

.odt-h .odt-h__toggle {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--odt-accent);
	background-color: transparent;
	border: 1px solid var(--odt-accent);
	border-radius: 999px;
	padding: 11px 22px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.odt-h .odt-h__toggle:hover {
	color: var(--odt-support);
	border-color: var(--odt-support);
	background-color: transparent;
}

.odt-h .odt-h__toggle[aria-pressed="true"],
.odt-h .odt-h__toggle[aria-pressed="true"]:hover {
	background-color: var(--odt-accent);
	border-color: var(--odt-accent);
	color: #101010;
}

/* Aparicion al desplazar -------------------------------------------------
 *
 * Aqui, a diferencia del resto del sitio, no se mueve nada: solo se funde,
 * una columna de dia tras otra. Es una tabla de consulta, y desplazar filas
 * de datos mientras se leen molesta mas de lo que aporta.
 *
 * Lo que se vigila es la rejilla, no los grupos de dia: en escritorio esos
 * grupos son `display: contents` y su caja mide cero, asi que el observador
 * nunca los daba por visibles. El escalonado sale de `--odt-orden`, que cada
 * grupo declara y sus casillas heredan.
 */
.odt-anim .odt-h .odt-h__grid[data-odt-reveal] .odt-h__times > *,
.odt-anim .odt-h .odt-h__grid[data-odt-reveal] .odt-h__day > * {
	opacity: 0;
	transition: opacity 0.5s ease;
	transition-delay: calc(var(--odt-orden, 0) * 80ms);
}

.odt-anim .odt-h .odt-h__grid[data-odt-reveal].odt-visible .odt-h__times > *,
.odt-anim .odt-h .odt-h__grid[data-odt-reveal].odt-visible .odt-h__day > * {
	opacity: 1;
}

/* Rejilla de escritorio -------------------------------------------------- */

.odt-h .odt-h__grid {
	display: grid;
	grid-template-columns: 128px repeat(5, 1fr);
	grid-template-rows: auto;
	grid-auto-rows: minmax(104px, auto);
	gap: 10px;
}

/* Los contenedores desaparecen del layout: sus hijos son celdas de la rejilla. */
.odt-h .odt-h__times,
.odt-h .odt-h__day {
	display: contents;
}

.odt-h .odt-h__colhead,
.odt-h .odt-h__dayname {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--odt-accent);
	text-align: center;
	margin: 0;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--odt-line);
	align-self: end;
}

.odt-h .odt-h__colhead--corner {
	text-align: left;
	color: var(--odt-muted);
}

.odt-h .odt-h__time {
	display: flex;
	align-items: center;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--odt-ink);
}

.odt-h .odt-h__cell {
	display: flex;
}

.odt-h .odt-h__free {
	display: block;
	width: 100%;
	min-height: 2px;
	align-self: center;
	border-top: 1px solid var(--odt-line);
}

/* La hora dentro del boton solo se ve en movil; en escritorio la lleva la
   columna de horas, pero se mantiene accesible para lectores de pantalla. */
.odt-h .odt-h__when {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Clase ------------------------------------------------------------------ */

.odt-h .odt-h__class {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 104px;
	margin: 0;
	padding: 16px 14px;
	font-family: "Barlow", sans-serif;
	font-size: 16px;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	color: var(--odt-ink);
	background-color: var(--odt-surface);
	background-image: none;
	border: 1px solid var(--odt-line);
	border-radius: var(--odt-radius);
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.odt-h .odt-h__class:hover,
.odt-h .odt-h__class:focus {
	color: var(--odt-ink);
	border-color: var(--odt-accent);
	background-color: var(--odt-surface-hover);
}

.odt-h .odt-h__name {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.1;
	letter-spacing: 0.02em;
	color: var(--odt-ink);
}

.odt-h .odt-h__badge {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 5px 12px;
	white-space: nowrap;
}

.odt-h .odt-h__class--disponible .odt-h__badge {
	color: var(--odt-accent);
	border: 1px solid var(--odt-accent);
}

.odt-h .odt-h__class--ultimas .odt-h__badge {
	color: #101010;
	background-color: var(--odt-accent);
	border: 1px solid var(--odt-accent);
}

.odt-h .odt-h__class--completo {
	background-color: transparent;
}

.odt-h .odt-h__class--completo .odt-h__name {
	color: var(--odt-muted);
}

.odt-h .odt-h__class--completo .odt-h__badge {
	color: var(--odt-muted);
	border: 1px solid var(--odt-line);
}

.odt-h .odt-h__class[data-dim="1"] {
	opacity: 0.25;
	pointer-events: none;
}

/* Leyenda y pie ---------------------------------------------------------- */

.odt-h .odt-h__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--odt-line);
}

.odt-h .odt-h__key {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 5px 12px;
}

.odt-h .odt-h__key--disponible {
	color: var(--odt-accent);
	border: 1px solid var(--odt-accent);
}

.odt-h .odt-h__key--ultimas {
	color: #101010;
	background-color: var(--odt-accent);
	border: 1px solid var(--odt-accent);
}

.odt-h .odt-h__key--completo {
	color: var(--odt-muted);
	border: 1px solid var(--odt-line);
}

.odt-h .odt-h__updated,
.odt-h .odt-h__empty {
	font-size: 15px;
	line-height: 1.6;
	color: var(--odt-muted);
	margin: 16px 0 0;
}

.odt-h .odt-h__empty {
	padding: 24px;
	border: 1px solid var(--odt-line);
	border-radius: var(--odt-radius);
	margin-bottom: 20px;
}

.odt-h .odt-h__empty[hidden],
.odt-h .odt-h__grid[hidden] {
	display: none;
}

/* Panel de detalle ------------------------------------------------------- */

.odt-h-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background-color: rgba(16, 16, 16, 0.9);
	font-family: "Barlow", sans-serif;
}

.odt-h-modal[hidden] {
	display: none;
}

.odt-h-modal .odt-h-modal__panel {
	position: relative;
	width: 100%;
	max-width: 460px;
	padding: 32px;
	color: #ffffff;
	background-color: #191817;
	border: 1px solid #2e2b26;
	border-radius: 10px;
}

.odt-h-modal .odt-h-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	font-family: "Barlow", sans-serif;
	font-size: 22px;
	line-height: 1;
	color: #a6a29b;
	background-color: transparent;
	background-image: none;
	border: 1px solid #2e2b26;
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
}

.odt-h-modal .odt-h-modal__close:hover {
	color: #ffffff;
	background-color: transparent;
	border-color: #b59953;
}

.odt-h-modal .odt-h-modal__close:focus-visible {
	outline: 2px solid #b59953;
	outline-offset: 2px;
}

.odt-h-modal .odt-h-modal__when {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #b59953;
	margin: 0 0 8px;
	padding-right: 40px;
}

.odt-h-modal .odt-h-modal__title {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 34px;
	line-height: 1.05;
	margin: 0 0 16px;
	color: #ffffff;
}

.odt-h-modal .odt-h-modal__badge {
	display: inline-block;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 5px 12px;
	margin-bottom: 16px;
}

.odt-h-modal .odt-h-modal__badge[data-state="disponible"] {
	color: #b59953;
	border: 1px solid #b59953;
}

.odt-h-modal .odt-h-modal__badge[data-state="ultimas"] {
	color: #101010;
	background-color: #b59953;
	border: 1px solid #b59953;
}

.odt-h-modal .odt-h-modal__badge[data-state="completo"] {
	color: #a6a29b;
	border: 1px solid #2e2b26;
}

.odt-h-modal .odt-h-modal__note {
	font-size: 16px;
	line-height: 1.6;
	color: #a6a29b;
	margin: 0 0 24px;
}

.odt-h-modal .odt-h-modal__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.odt-h-modal .odt-h-modal__btn {
	display: block;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	border-radius: 999px;
	padding: 13px 24px;
}

.odt-h-modal .odt-h-modal__btn--primary {
	color: #101010;
	background-color: #b59953;
	border: 1px solid #b59953;
}

.odt-h-modal .odt-h-modal__btn--primary:hover {
	background-color: #e7df9f;
	border-color: #e7df9f;
	color: #101010;
}

.odt-h-modal .odt-h-modal__btn--ghost {
	color: #a6a29b;
	background-color: transparent;
	border: 1px solid #2e2b26;
	font-size: 15px;
}

.odt-h-modal .odt-h-modal__btn--ghost:hover {
	color: #e7df9f;
	border-color: #e7df9f;
}

.odt-h-modal .odt-h-modal__btn:focus-visible {
	outline: 2px solid #e7df9f;
	outline-offset: 2px;
}

/* Movil: una tarjeta por dia --------------------------------------------- */

@media (max-width: 900px) {
	.odt-h {
		padding: 0 16px;
	}

	.odt-h .odt-h__grid {
		display: block;
	}

	/* La columna de horas sobra: cada clase ya lleva la suya. */
	.odt-h .odt-h__times {
		display: none;
	}

	.odt-h .odt-h__day {
		display: block;
		padding: 18px;
		margin-bottom: 14px;
		background-color: var(--odt-surface);
		border: 1px solid var(--odt-line);
		border-radius: var(--odt-radius);
	}

	.odt-h .odt-h__day:last-child {
		margin-bottom: 0;
	}

	/* Dia sin ninguna clase visible: la tarjeta entera desaparece. */
	.odt-h .odt-h__day[data-empty="1"] {
		display: none;
	}

	.odt-h .odt-h__dayname {
		font-size: 22px;
		text-align: left;
		padding-bottom: 12px;
		margin-bottom: 14px;
	}

	.odt-h .odt-h__cell {
		display: block;
		margin-bottom: 10px;
	}

	.odt-h .odt-h__cell:last-child {
		margin-bottom: 0;
	}

	/* Huecos sin clase y clases filtradas fuera: no ocupan sitio en la tarjeta. */
	.odt-h .odt-h__cell:has(.odt-h__free),
	.odt-h .odt-h__cell:has([data-dim="1"]) {
		display: none;
	}

	.odt-h .odt-h__when {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
		font-family: "Barlow Condensed", sans-serif;
		font-weight: 700;
		font-size: 12px;
		line-height: 1.2;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--odt-muted);
	}

	.odt-h .odt-h__class {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: 4px 12px;
		min-height: 0;
		padding: 14px 16px;
		text-align: left;
		background-color: #101010;
	}

	.odt-h .odt-h__when {
		flex: 0 0 100%;
	}

	.odt-h .odt-h__name {
		font-size: 19px;
	}

	.odt-h-modal .odt-h-modal__panel {
		padding: 26px 22px;
	}

	.odt-h-modal .odt-h-modal__title {
		font-size: 28px;
	}
}

@media (max-width: 480px) {
	.odt-h .odt-h__select {
		min-width: 0;
		width: 100%;
	}

	.odt-h .odt-h__field {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.odt-anim .odt-h .odt-h__grid[data-odt-reveal] .odt-h__times > *,
	.odt-anim .odt-h .odt-h__grid[data-odt-reveal] .odt-h__day > *,
	.odt-anim .odt-h .odt-h__grid[data-odt-reveal].odt-visible .odt-h__times > *,
	.odt-anim .odt-h .odt-h__grid[data-odt-reveal].odt-visible .odt-h__day > * {
		opacity: 1;
		transition: none;
	}

	.odt-h .odt-h__class,
	.odt-h .odt-h__toggle {
		transition: none;
	}
}



/* Sello de nueva apertura --------------------------------------------------
 *
 * Circulo colgado de la esquina superior derecha de la casilla. Sobresale un
 * poco a proposito: pegado al borde parece parte del recuadro, y despegado se
 * lee como lo que es, algo puesto encima.
 *
 * La casilla no recorta, asi que el circulo puede salirse sin quedar cortado.
 */

.odt-h .odt-h__class {
	position: relative;
	overflow: visible;
}

.odt-h .odt-h__sello {
	position: absolute;
	top: -11px;
	right: -11px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--odt-accent, #b59953);
	color: #101010;
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	transform: rotate(-10deg);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
	pointer-events: none;
}

/* Para lector de pantalla: el circulo no dice nada util por si solo. No se
   oculta con display:none porque entonces tampoco se leeria en voz alta. */
.odt-h .odt-h__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 900px) {
	.odt-h .odt-h__sello {
		width: 40px;
		height: 40px;
		font-size: 11.5px;
		top: -9px;
		right: -9px;
	}
}

/* Boton intermedio de la ventana: el de WhatsApp.
 *
 * El dorado macizo se lo queda matricularse, que es la accion que la
 * persona puede completar ella sola a cualquier hora. Este queda con el
 * borde dorado: visible, pero un escalon por debajo. */
.odt-h-modal .odt-h-modal__btn--wa {
	background-color: transparent;
	color: #b59953;
	border: 1px solid #b59953;
}

.odt-h-modal .odt-h-modal__btn--wa:hover,
.odt-h-modal .odt-h-modal__btn--wa:focus-visible {
	background-color: rgba(181, 153, 83, 0.12);
	color: #e7df9f;
}

.odt-h-modal .odt-h-modal__btn[hidden] { display: none; }