/*
 * Fechas de la sede (Man City Widgets).
 * Estructura y valores de reserva. Los colores y medidas llegan en variables
 * desde los ajustes del widget; cómo se ve cada sesión en cada pantalla (fila
 * o desplegable) y qué pasa con las fechas que no caben, también.
 */

.mcw-fs {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--mcw-fs-gap, 16px);
	width: 100%;
	max-width: var(--mcw-fs-ancho, 100%);
	margin-left: auto;
	padding: 32px;
	background: var(--mcw-fs-fondo, #fff);
	color: var(--mcw-fs-texto-color, #001838);
	text-align: left;
}

.mcw-fs[data-disposicion="lista"] {
	gap: var(--mcw-fs-gap-lista, 32px);
}

.mcw-fs *,
.mcw-fs *::before,
.mcw-fs *::after {
	box-sizing: border-box;
}

.mcw-fs [hidden] {
	display: none !important;
}

/* ---------- Año y pestañas de mes ---------- */

.mcw-fs__opciones {
	display: flex;
	flex-direction: column;
	gap: var(--mcw-fs-anio-gap, 16px);
	width: var(--mcw-fs-meses-ancho, 352px);
	max-width: 100%;
}

.mcw-fs .mcw-fs__anio {
	margin: 0;
	padding: 0;
	color: var(--mcw-fs-anio-color, #3bd6ff);
}

.mcw-fs__meses {
	display: grid;
	grid-auto-columns: minmax(max-content, 1fr);
	grid-auto-flow: column;
	overflow-x: auto;
	scrollbar-width: none;
}

.mcw-fs__meses::-webkit-scrollbar {
	display: none;
}

/*
 * Tres clases: el kit de Elementor y el tema pintan los <button> de rojo y rosa
 * (también al pasar el ratón y con el foco). Con tres clases, el fondo de aquí
 * gana a todos sus estados.
 */
.mcw-fs .mcw-fs__meses .mcw-fs__mes {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 16px var(--mcw-fs-mes-gap, 16px) 0;
	border: 0;
	border-bottom: var(--mcw-fs-linea, 2px) solid var(--mcw-fs-linea-color, #dde6ed);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--mcw-fs-mes-color, #001838);
	font-family: inherit;
	text-align: left;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.mcw-fs .mcw-fs__meses .mcw-fs__mes:hover {
	border-bottom-color: var(--mcw-fs-linea-hover, #6caddf);
}

.mcw-fs .mcw-fs__meses .mcw-fs__mes.is-activo {
	border-bottom-color: var(--mcw-fs-linea-activa, #3bd6ff);
	color: var(--mcw-fs-mes-activo, #001838);
	cursor: default;
}

.mcw-fs .mcw-fs__meses .mcw-fs__mes:focus {
	outline: none;
}

.mcw-fs .mcw-fs__meses .mcw-fs__mes:focus-visible {
	outline: 2px solid var(--mcw-fs-linea-hover, #6caddf);
	outline-offset: -2px;
}

/* Lista simple: línea bajo el año que indica cuánto queda al deslizar las fechas. */
.mcw-fs__barra {
	position: relative;
	display: none;
	height: var(--mcw-fs-linea, 2px);
	overflow: hidden;
	background: var(--mcw-fs-linea-color, #dde6ed);
}

.mcw-fs.is-desplazable .mcw-fs__barra {
	display: block;
}

.mcw-fs__barra-pulgar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background: var(--mcw-fs-linea-activa, #3bd6ff);
}

/* ---------- Pastillas de fechas ---------- */

.mcw-fs__grupo {
	min-width: 0;
}

/*
 * Al deslizarse, la fila llega hasta el borde de la caja (como en el Figma de
 * móvil): se come el relleno lateral con márgenes negativos y lo devuelve por
 * dentro. Los 3 px de arriba y abajo dejan sitio al contorno del foco.
 */
.mcw-fs__rangos {
	--mcw-fs-sangria-l: calc(var(--mcw-fs-pad-l, 32px) * var(--mcw-fs-rangos-sangria, 0));
	--mcw-fs-sangria-r: calc(var(--mcw-fs-pad-r, 32px) * var(--mcw-fs-rangos-sangria, 0));
	display: flex;
	flex-wrap: var(--mcw-fs-rangos-wrap, wrap);
	gap: var(--mcw-fs-rango-gap, 12px);
	margin: -3px calc(var(--mcw-fs-sangria-r) * -1) -3px calc(var(--mcw-fs-sangria-l) * -1);
	padding: 3px var(--mcw-fs-sangria-r) 3px var(--mcw-fs-sangria-l);
	overflow-x: var(--mcw-fs-rangos-overflow, visible);
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--mcw-fs-sangria-l) var(--mcw-fs-sangria-r);
	scrollbar-width: none;
}

.mcw-fs__rangos::-webkit-scrollbar {
	display: none;
}

.mcw-fs .mcw-fs__rangos .mcw-fs__rango {
	flex: none;
	margin: 0;
	padding: 8px;
	border: var(--mcw-fs-rango-borde-grosor, 1px) solid var(--mcw-fs-rango-borde, #001838);
	border-radius: var(--mcw-fs-rango-radio, 96px);
	background: var(--mcw-fs-rango-fondo, #fff);
	box-shadow: none;
	color: var(--mcw-fs-rango-texto, #001838);
	font-family: inherit;
	text-align: center;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mcw-fs .mcw-fs__rangos .mcw-fs__rango:hover {
	background: var(--mcw-fs-rango-fondo-hover, rgba(108, 173, 223, 0.1));
	border-color: var(--mcw-fs-rango-borde-hover, #6caddf);
}

.mcw-fs .mcw-fs__rangos .mcw-fs__rango.is-activo {
	background: var(--mcw-fs-rango-fondo-activo, rgba(108, 173, 223, 0.3));
	border-color: var(--mcw-fs-rango-borde-activo, #6caddf);
	color: var(--mcw-fs-rango-texto-activo, #001838);
	cursor: default;
}

.mcw-fs .mcw-fs__rangos .mcw-fs__rango:focus {
	outline: none;
}

.mcw-fs .mcw-fs__rangos .mcw-fs__rango:focus-visible {
	outline: 2px solid var(--mcw-fs-rango-borde-hover, #6caddf);
	outline-offset: 1px;
}

/* ---------- Sesiones ---------- */

/* Las sesiones comparten columnas (subgrid): si un botón no cabe en su columna, la
   columna crece igual en todas y las líneas siguen alineadas. */
.mcw-fs__lista {
	display: grid;
	grid-template-columns: var(--mcw-fs-cols, minmax(0, 1fr) 132px 132px 132px);
	gap: var(--mcw-fs-sesiones-gap, 8px) 0;
}

.mcw-fs__lista:focus {
	outline: none;
}

/*
 * Una sesión es una rejilla. En la fila tiene cuatro columnas (centro, público,
 * precio y botón: el cuerpo «desaparece» con display: contents y sus tres
 * bloques pasan a ser columnas). En el desplegable tiene una sola: la cabecera
 * y, debajo, el cuerpo, que solo se ve abierto.
 */
.mcw-fs .mcw-fs__sesion {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: var(--mcw-fs-cols, minmax(0, 1fr) 132px 132px 132px);
	grid-template-columns: subgrid;
	gap: var(--mcw-fs-fila-gap, 0px);
	padding: 12px;
	border: var(--mcw-fs-borde-grosor, 1px) solid var(--mcw-fs-borde, #001838);
	background: var(--mcw-fs-sesion-fondo, transparent);
}

.mcw-fs__cabecera {
	display: flex;
	align-items: flex-start;
	gap: var(--mcw-fs-icono-gap, 8px);
	min-width: 0;
	padding-right: var(--mcw-fs-pad, 12px);
	border-right: var(--mcw-fs-sep, 1px) solid var(--mcw-fs-separador, #001838);
	cursor: var(--mcw-fs-cursor, auto);
}

.mcw-fs .mcw-fs__cabecera .mcw-fs__lugar {
	display: flex;
	flex: 1 1 auto;
	flex-direction: var(--mcw-fs-dir, column);
	align-items: var(--mcw-fs-alinear, center);
	gap: var(--mcw-fs-icono-gap, 8px);
	min-width: 0;
	color: inherit;
	text-align: var(--mcw-fs-texto, center);
	text-decoration: none;
}

.mcw-fs .mcw-fs__cabecera a.mcw-fs__lugar:hover .mcw-fs__centro,
.mcw-fs .mcw-fs__cabecera a.mcw-fs__lugar:focus-visible .mcw-fs__centro {
	color: var(--mcw-fs-enlace-hover, #6caddf);
	text-decoration: underline;
}

.mcw-fs .mcw-fs__cabecera a.mcw-fs__lugar:focus-visible {
	outline: 2px solid var(--mcw-fs-enlace-hover, #6caddf);
	outline-offset: 2px;
}

.mcw-fs__icono {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--mcw-fs-icono, 24px);
	height: var(--mcw-fs-icono, 24px);
	color: var(--mcw-fs-icono-color, #001838);
	font-size: var(--mcw-fs-icono, 24px);
	line-height: 1;
}

.mcw-fs__icono svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.mcw-fs__textos {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--mcw-fs-txt-gap, 4px);
	min-width: 0;
	max-width: 100%;
	overflow-wrap: break-word;
}

.mcw-fs .mcw-fs__centro {
	color: var(--mcw-fs-centro, #001838);
}

.mcw-fs .mcw-fs__direccion {
	color: var(--mcw-fs-direccion, #001838);
}

.mcw-fs__cuerpo {
	display: var(--mcw-fs-cuerpo, contents);
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--mcw-fs-fila-gap, 8px) var(--mcw-fs-des-precio-gap, 32px);
}

.mcw-fs__sesion:not(.is-abierta) .mcw-fs__cuerpo {
	display: var(--mcw-fs-cuerpo-cerrado, contents);
}

.mcw-fs__publico {
	display: flex;
	flex-direction: var(--mcw-fs-dir, column);
	grid-column: var(--mcw-fs-publico-col, auto);
	align-items: var(--mcw-fs-alinear, center);
	gap: var(--mcw-fs-icono-gap, 8px);
	min-width: 0;
	padding: 0 var(--mcw-fs-pad, 12px);
	border-right: var(--mcw-fs-sep, 1px) solid var(--mcw-fs-separador, #001838);
	color: var(--mcw-fs-publico, #001838);
	text-align: var(--mcw-fs-texto, center);
}

/* Fila: género y edades en dos líneas. Desplegable: seguidos con «. ». */
.mcw-fs__publico .mcw-fs__textos {
	display: var(--mcw-fs-publico-textos, flex);
}

.mcw-fs__punto {
	display: var(--mcw-fs-punto, none);
}

.mcw-fs__precios {
	display: flex;
	flex-direction: var(--mcw-fs-precio-dir, column);
	flex-wrap: wrap;
	align-items: var(--mcw-fs-precio-alinear, center);
	justify-content: var(--mcw-fs-precio-justificar, center);
	gap: 4px 8px;
	min-width: 0;
	padding: 0 var(--mcw-fs-pad, 12px) 0 calc(var(--mcw-fs-pad, 12px) + var(--mcw-fs-precio-sangria, 0px));
	text-align: var(--mcw-fs-texto, center);
}

.mcw-fs .mcw-fs__precio {
	color: var(--mcw-fs-precio, rgba(0, 24, 56, 0.5));
	text-decoration: line-through;
}

.mcw-fs .mcw-fs__oferta {
	color: var(--mcw-fs-oferta, #001838);
}

.mcw-fs__cta {
	display: flex;
	align-items: center;
	justify-content: var(--mcw-fs-cta-justificar, center);
	min-width: 0;
}

/* ---------- Botón ---------- */

.mcw-fs .mcw-fs__cta .mcw-fs__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border: 0;
	border-radius: var(--mcw-fs-boton-radio, 0);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Figma: «Primary S» (Electric Blue) y, al pasar el ratón, «Hover» (Sky Blue). */
.mcw-fs .mcw-fs__cta a.mcw-fs__boton.is-activo {
	background: var(--mcw-fs-boton-fondo, #3bd6ff);
	color: var(--mcw-fs-boton-texto, #001838);
}

.mcw-fs .mcw-fs__cta a.mcw-fs__boton.is-activo:hover,
.mcw-fs .mcw-fs__cta a.mcw-fs__boton.is-activo:focus-visible {
	background: var(--mcw-fs-boton-fondo-hover, #6caddf);
	color: var(--mcw-fs-boton-texto-hover, #001838);
}

.mcw-fs .mcw-fs__cta a.mcw-fs__boton.is-activo:focus-visible {
	outline: 2px solid var(--mcw-fs-boton-texto, #001838);
	outline-offset: 2px;
}

/* Figma: «Disabled S» / «Sold out!»: gris claro apagado, sin enlace. */
.mcw-fs .mcw-fs__cta .mcw-fs__boton.is-inactivo {
	background: var(--mcw-fs-inactivo-fondo, #dde6ed);
	color: var(--mcw-fs-inactivo-texto, #001838);
	opacity: var(--mcw-fs-inactivo-opacidad, 0.3);
	cursor: default;
}

/* ---------- Flecha del desplegable ---------- */

.mcw-fs .mcw-fs__cabecera .mcw-fs__toggle {
	display: var(--mcw-fs-toggle, none);
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--mcw-fs-flecha, 20px);
	height: var(--mcw-fs-flecha, 20px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--mcw-fs-flecha-color, #001838);
	font-size: var(--mcw-fs-flecha, 20px);
	line-height: 1;
	cursor: pointer;
}

.mcw-fs .mcw-fs__cabecera .mcw-fs__toggle:focus {
	outline: none;
}

.mcw-fs .mcw-fs__cabecera .mcw-fs__toggle:focus-visible {
	outline: 2px solid var(--mcw-fs-enlace-hover, #6caddf);
	outline-offset: 2px;
}

.mcw-fs__toggle svg,
.mcw-fs__toggle i {
	width: 100%;
	height: 100%;
	transition: transform 0.3s ease;
}

.mcw-fs__sesion.is-abierta .mcw-fs__toggle svg,
.mcw-fs__sesion.is-abierta .mcw-fs__toggle i {
	transform: rotate(180deg);
}

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

.mcw-fs-aviso {
	padding: 16px;
	border: 1px dashed #6caddf;
	background: #f7f9ff;
	color: #001838;
	font-size: 14px;
	line-height: 1.4;
}

.mcw-fs-vacio {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mcw-fs .mcw-fs__meses .mcw-fs__mes,
	.mcw-fs .mcw-fs__rangos .mcw-fs__rango,
	.mcw-fs .mcw-fs__cta .mcw-fs__boton,
	.mcw-fs__toggle svg,
	.mcw-fs__toggle i {
		transition: none;
	}
}