/*
 * Horario semanal (Man City Widgets).
 * Estructura y valores de reserva. Los colores y el formato de cada
 * dispositivo llegan en variables desde los ajustes del widget (así ganan a
 * los de reserva aunque vengan del kit).
 *
 * Las líneas entre filas son sombras interiores y no bordes: como en el Figma,
 * no suman alto (filas de 52 px en ordenador).
 */

.mcw-hs {
	box-sizing: border-box;
	width: 100%;
}

.mcw-hs *,
.mcw-hs *::before,
.mcw-hs *::after {
	box-sizing: inherit;
}

/* Formato: tabla o acordeón (reserva por si faltan los ajustes: acordeón en móvil). */
.mcw-hs__tabla {
	display: var(--mcw-hs-ver-tabla, block);
	container-type: inline-size;
}

.mcw-hs__acordeon {
	display: var(--mcw-hs-ver-acordeon, none);
}

@media (max-width: 677px) {
	.mcw-hs {
		--mcw-hs-ver-tabla: none;
		--mcw-hs-ver-acordeon: block;
	}
}

/* Color de cada columna o día: el propio si lo tiene, si no el de par/impar. */
.mcw-hs .is-impar {
	--mcw-hs-col: var(--mcw-hs-col-propio, var(--mcw-hs-col-impar, rgba(59, 214, 255, 0.05)));
}

.mcw-hs .is-par {
	--mcw-hs-col: var(--mcw-hs-col-propio, var(--mcw-hs-col-par, rgba(59, 214, 255, 0.1)));
}

/* ------------------------------------------------------------------ */
/* Tabla                                                               */
/* ------------------------------------------------------------------ */

.mcw-hs__fila {
	display: grid;
	grid-template-columns: var(--mcw-hs-ancho-hora, 188px) repeat(var(--mcw-hs-dias, 5), minmax(0, 1fr));
}

.mcw-hs__esquina,
.mcw-hs__dia,
.mcw-hs__hora,
.mcw-hs__casilla {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	text-align: center;
	overflow-wrap: break-word;
}

/* Esquina: degradado del color a transparente hacia arriba. */
.mcw-hs__esquina {
	padding: 12px;
	background: linear-gradient(0deg, var(--mcw-hs-esquina, #3bd6ff), transparent);
	background: linear-gradient(0deg, var(--mcw-hs-esquina, #3bd6ff) 0%, color-mix(in srgb, var(--mcw-hs-esquina, #3bd6ff) 50%, transparent) 35.655%, transparent 100%);
	color: var(--mcw-hs-hora-color, #001838);
}

.mcw-hs__dia {
	padding: 12px;
	background: linear-gradient(180deg, transparent 0%, var(--mcw-hs-col) 89.286%), var(--mcw-hs-base, #fff);
	color: var(--mcw-hs-dia-color, #001838);
}

.mcw-hs__cuerpo {
	position: relative;
	overflow: hidden;
	background: var(--mcw-hs-base, #fff);
}

.mcw-hs__hora {
	padding: 16px 12px;
	background-color: var(--mcw-hs-hora-fondo, #3bd6ff);
	color: var(--mcw-hs-hora-color, #001838);
}

.mcw-hs__casilla {
	padding: 16px 12px;
	background-color: var(--mcw-hs-col);
	color: var(--mcw-hs-casilla-color, #001838);
}

.mcw-hs__cuerpo .mcw-hs__fila > * {
	box-shadow:
		inset 0 calc(-1 * var(--mcw-hs-linea-fila, 0px)) 0 var(--mcw-hs-linea, #fff),
		inset var(--mcw-hs-linea-columna, 0px) 0 0 var(--mcw-hs-linea-v, #fff);
}

.mcw-hs__cuerpo .mcw-hs__fila:not(:last-child) > * {
	--mcw-hs-linea-fila: var(--mcw-hs-linea-grosor, 1px);
}

.mcw-hs__cuerpo .mcw-hs__fila > * + * {
	--mcw-hs-linea-columna: var(--mcw-hs-linea-v-grosor, 0px);
}

/* ------------------------------------------------------------------ */
/* Acordeón                                                            */
/* ------------------------------------------------------------------ */

.mcw-hs__ac-degradado {
	height: 48px;
	background: linear-gradient(180deg, transparent 0%, var(--mcw-hs-ac-degradado, rgba(59, 214, 255, 0.05)) 89.286%), var(--mcw-hs-base, #fff);
}

.mcw-hs__ac-dias {
	display: flex;
	flex-direction: column;
}

.mcw-hs .mcw-hs__ac-dia.is-impar {
	--mcw-hs-col: var(--mcw-hs-col-propio, var(--mcw-hs-ac-impar, rgba(59, 214, 255, 0.05)));
}

.mcw-hs .mcw-hs__ac-dia.is-par {
	--mcw-hs-col: var(--mcw-hs-col-propio, var(--mcw-hs-ac-par, rgba(59, 214, 255, 0.1)));
}

/* Cada día por encima del anterior: su sombra cae sobre el de arriba, como en el Figma. */
.mcw-hs__ac-dia {
	position: relative;
	overflow: hidden;
	background: linear-gradient(var(--mcw-hs-col), var(--mcw-hs-col)), var(--mcw-hs-base, #fff);
}

.mcw-hs .mcw-hs__ac-titulo {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
}

/* Dos clases para ganar a los botones del tema (Hello Elementor los pinta de rosa). */
.mcw-hs .mcw-hs__ac-boton {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--mcw-hs-ac-dia-color, #001838);
	font: inherit;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	white-space: normal;
	cursor: pointer;
	transition: none;
	-webkit-tap-highlight-color: transparent;
}

.mcw-hs .mcw-hs__ac-boton:hover,
.mcw-hs .mcw-hs__ac-boton:focus {
	background: transparent;
	color: var(--mcw-hs-ac-dia-color, #001838);
	outline: none;
}

.mcw-hs .mcw-hs__ac-boton:focus-visible {
	outline: 2px solid var(--mcw-hs-ac-dia-color, #001838);
	outline-offset: -4px;
}

.mcw-hs__ac-nombre {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
}

.mcw-hs__ac-flecha {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--mcw-hs-flecha-tamano, 20px);
	height: var(--mcw-hs-flecha-tamano, 20px);
	color: var(--mcw-hs-flecha-color, #001838);
	line-height: 1;
}

.mcw-hs__ac-flecha svg {
	display: block;
	width: var(--mcw-hs-flecha-tamano, 20px);
	height: var(--mcw-hs-flecha-tamano, 20px);
	fill: currentColor;
}

.mcw-hs__ac-flecha i {
	font-size: var(--mcw-hs-flecha-tamano, 20px);
}

.mcw-hs__ac-flecha--abierta,
.mcw-hs__ac-dia.is-abierto .mcw-hs__ac-flecha--cerrada {
	display: none;
}

.mcw-hs__ac-dia.is-abierto .mcw-hs__ac-flecha--abierta {
	display: inline-flex;
}

.mcw-hs__ac-flecha--gira {
	transition: transform var(--mcw-hs-duracion, 300ms) ease;
}

.mcw-hs__ac-dia.is-abierto .mcw-hs__ac-flecha--gira {
	transform: rotate(180deg);
}

/*
 * Panel: se abre animando el alto de la fila de la rejilla (de 0 a su
 * contenido). Cerrado queda invisible también para el teclado y los lectores.
 */
.mcw-hs__ac-panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows var(--mcw-hs-duracion, 300ms) ease, visibility 0s linear var(--mcw-hs-duracion, 300ms);
}

.mcw-hs__ac-dia.is-abierto .mcw-hs__ac-panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows var(--mcw-hs-duracion, 300ms) ease, visibility 0s linear 0s;
}

/* Para cerrar de golpe el día de arriba sin que la página dé un salto (lo pone el guion). */
.mcw-hs__ac-dia.is-sin-transicion .mcw-hs__ac-panel {
	transition: none;
}

.mcw-hs__ac-dentro {
	min-height: 0;
	overflow: hidden;
}

.mcw-hs .mcw-hs__ac-lista {
	margin: 0;
	padding: 0 0 4px;
	list-style: none;
}

.mcw-hs .mcw-hs__ac-franja {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 8px 16px;
	text-align: left;
}

.mcw-hs__ac-franja + .mcw-hs__ac-franja {
	box-shadow: inset 0 var(--mcw-hs-ac-linea-grosor, 1px) 0 var(--mcw-hs-ac-linea, rgba(59, 214, 255, 0.5));
}

.mcw-hs__ac-hora {
	color: var(--mcw-hs-ac-hora-color, #001838);
}

.mcw-hs__ac-actividad {
	color: var(--mcw-hs-ac-actividad-color, #001838);
}

@media (prefers-reduced-motion: reduce) {
	.mcw-hs__ac-panel,
	.mcw-hs__ac-dia.is-abierto .mcw-hs__ac-panel,
	.mcw-hs__ac-flecha--gira {
		transition: none;
	}
}