/* NO EDITAR ESTE ARCHIVO EN EL SERVIDOR.
   El original vive en github.com/embajadademarca/banderitapasion y cualquier cambio hecho aqui
   se perdera en la siguiente subida. OJO: la subida al servidor es MANUAL — ver "Publicar los
   cambios en la web" en el README. Un cambio en GitHub no llega solo a la web. */
.ang-ficha {
	--ang-rojo: #c8102e;
	--ang-azul: #142850;
	--ang-fondo: #fffaf5;
	--ang-borde: #e7ddd0;
	--ang-texto: #26221d;
	--ang-texto-suave: #6b6257;
	--ang-chip-activo: #142850;

	box-sizing: border-box;
	color: var(--ang-texto);
	max-width: 640px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.ang-ficha *,
.ang-ficha *::before,
.ang-ficha *::after {
	box-sizing: inherit;
}

/*
 * La ficha ocupa toda la pantalla pero scrollea entera como una página normal — sin alto fijo
 * ni "overflow: hidden" en el body que afecte al scroll vertical. En pantalla completa se quita
 * el max-width de 640px (pensado para cuando la ficha va embebida como bloque dentro de una
 * página normal) para que use todo el ancho de la pantalla, con un padding que crece con el
 * viewport. El recorte horizontal evita el scroll lateral de unos pocos píxeles que el truco
 * de "width: 100vw" de la cuenta atrás/el calendario introduce en páginas con scroll vertical
 * (100vw incluye el ancho de la barra de scroll del navegador). "clip" (si el navegador lo
 * entiende) en vez de "hidden" para no convertir el body en contenedor de scroll, que rompería
 * la barra de búsqueda fija ("position: sticky").
 */
body.ang-ficha-pantalla-completa {
	overflow-x: hidden;
	overflow-x: clip;
}

body.ang-ficha-pantalla-completa .ang-ficha {
	max-width: none;
	width: 100%;
	padding: max(28px, env(safe-area-inset-top)) clamp(16px, 6vw, 120px) max(40px, env(safe-area-inset-bottom));
}

.ang-ficha a:focus-visible,
.ang-ficha button:focus-visible,
.ang-ficha summary:focus-visible {
	outline: 2px solid var(--ang-rojo);
	outline-offset: 2px;
}

/*
 * Barra "El programa finaliza en…", a todo el ancho de la pantalla independientemente de si la
 * ficha tiene su propio max-width o no. Empieza oculta (atributo "hidden" en el HTML) hasta que
 * el script confirma que al programa aún le queda; el valor lo escribe él, por eso su <span>
 * nace vacío.
 *
 * Fija arriba al hacer scroll, y por encima de la barra de búsqueda, que se queda justo debajo
 * (ver --ang-alto-cuenta-atras en .ang-ficha__barra): son las dos cosas que interesa tener
 * siempre a mano mientras se recorre el programa, y apiladas no se tapan.
 *
 * El ancho completo se consigue con "margin-left: calc(50% - 50vw)" y no con el truco de
 * "left: 50%" + "margin-left: -50vw" que usa el hero: en un elemento "sticky" las propiedades
 * left/right no desplazan nada, definen dónde se pega, así que aquel truco dejaría la barra
 * descuadrada. Este solo usa márgenes y funciona con cualquier posicionamiento.
 */
.ang-ficha__cuenta-atras {
	position: sticky;
	top: 0;
	z-index: 11;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 24px;
	padding: 10px 16px;
	background: var(--ang-azul);
	color: #fff;
	text-align: center;
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.ang-ficha__cuenta-atras-valor {
	display: inline-block;
	margin-left: 6px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.ang-ficha__aviso {
	max-width: 640px;
	margin: 40px auto;
	padding: 0 16px;
	color: var(--ang-texto-suave);
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ang-ficha__cabecera {
	margin-bottom: 28px;
}

.ang-ficha__subtitulo {
	margin: 4px 0 0;
	color: var(--ang-texto-suave);
	font-size: 1em;
	font-weight: 600;
}

/*
 * Cabecera "landing" cuando hay imagen: a toda pantalla (se sale del ancho/padding del
 * contenedor con el truco de los 100vw, tenga o no la ficha su propio max-width), con
 * degradado oscuro abajo para que el título se lea encima de cualquier foto.
 */
.ang-ficha__hero {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	height: min(78vh, 620px);
	min-height: 320px;
	margin-bottom: 28px;
	overflow: hidden;
	background: var(--ang-borde);
}

.ang-ficha__hero-imagen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ang-ficha__hero-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 24px clamp(16px, 6vw, 120px) 36px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.78) 100%);
}

/* Selector combinado (no solo ".ang-ficha__titulo--hero") para ganarle en especificidad a
   ".ang-ficha__titulo" sin depender de en qué orden aparezcan en la hoja de estilos. */
.ang-ficha__titulo.ang-ficha__titulo--hero {
	color: #fff;
	font-size: clamp(2.1em, 5.5vw, 3.6em);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.ang-ficha__credito {
	margin: -14px 0 28px;
	font-size: 0.78em;
	color: var(--ang-texto-suave);
	text-align: right;
	font-style: italic;
}

.ang-ficha__categoria {
	display: inline-block;
	background: var(--ang-chip-activo);
	color: #fff;
	font-size: 0.78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 999px;
	padding: 5px 14px;
	margin-bottom: 10px;
}

.ang-ficha__titulo {
	margin: 0;
	font-size: clamp(1.7em, 4vw, 2.4em);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ang-rojo);
	line-height: 1.15;
}

.ang-ficha__bloque {
	margin: 24px 0;
	padding: 18px 20px;
	background: rgba(255, 255, 255, 0.65);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ang-ficha__bloque-titulo {
	margin: 0 0 12px;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ang-texto-suave);
}

.ang-ficha__sesiones {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ang-ficha__sesion {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	padding: 10px 0;
	border-top: 1px solid var(--ang-borde);
}

.ang-ficha__sesion:first-child {
	border-top: none;
	padding-top: 0;
}

.ang-ficha__sesion-fecha {
	font-weight: 700;
	color: var(--ang-texto);
	flex-basis: 100%;
}

.ang-ficha__sesion-horas {
	color: var(--ang-rojo);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ang-ficha__sesion-precio {
	color: var(--ang-texto-suave);
	font-size: 0.92em;
}

.ang-ficha__sesion-precio::before {
	content: "·";
	margin-right: 10px;
	color: var(--ang-borde);
}

.ang-ficha__cta {
	display: block;
	text-align: center;
	text-decoration: none;
	background: var(--ang-rojo);
	color: #fff;
	font-weight: 700;
	font-size: 1.05em;
	border-radius: 14px;
	padding: 14px 20px;
	margin: 24px 0;
	transition: opacity 0.15s ease;
}

.ang-ficha__cta:hover {
	opacity: 0.88;
}

.ang-ficha__tecnica {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
}

.ang-ficha__tecnica dt {
	color: var(--ang-texto-suave);
	font-weight: 600;
}

.ang-ficha__tecnica dd {
	margin: 0;
}

.ang-ficha__meta p {
	margin: 0 0 8px;
}

.ang-ficha__meta p:last-child {
	margin-bottom: 0;
}

.ang-ficha__meta a {
	color: var(--ang-azul);
	font-weight: 600;
}

.ang-ficha__texto {
	margin: 0;
	white-space: pre-line;
}

.ang-ficha__practica .ang-ficha__texto {
	font-size: 0.9em;
	color: var(--ang-texto-suave);
}

/* =========================================================================================
 * Programa completo (JSON con "eventos", ver render_temporada() en class-ang-programa.php).
 * ====================================================================================== */

/*
 * Cabecera del programa: tarjeta grande con degradado de la paleta del lanzamiento (o foto de
 * fondo si el JSON trae "imagen"), con "Eventos recomendados" + nombre, fechas, localidad,
 * distintivo y estado. La primera declaración de "background" es la de respaldo para
 * navegadores sin color-mix().
 */
.ang-ficha__cabecera--temporada {
	position: relative;
	overflow: hidden;
	margin: 0 0 14px;
	padding: clamp(18px, 3.4vw, 34px);
	border-radius: 28px;
	background: var(--ang-azul);
	background: linear-gradient(135deg, var(--ang-azul) 0%, color-mix(in srgb, var(--ang-azul) 70%, var(--ang-rojo)) 100%);
	color: #fff;
	box-shadow: 0 22px 44px -28px rgba(0, 0, 0, 0.6);
}

.ang-ficha__cabecera-imagen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ang-ficha__cabecera--con-imagen::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.75) 100%);
}

.ang-ficha__cabecera-contenido {
	position: relative;
	z-index: 1;
	max-width: 780px;
}

/*
 * En un programa, "Eventos recomendados" es la etiqueta del sitio y el <h1> de la página, pero
 * lo que el visitante busca es el nombre de la fiesta. Así que el <h1> va de antetítulo pequeño
 * (sigue siendo el <h1>, solo cambia su tamaño) y el titular grande lo ocupa ese nombre. De
 * paso, la cabecera ocupa bastante menos y los actos de hoy suben en la primera pantalla.
 */
.ang-ficha__cabecera--temporada .ang-ficha__titulo {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.78em;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ang-ficha__cabecera--temporada .ang-ficha__subtitulo {
	margin-top: 4px;
	color: #fff;
	font-size: clamp(1.7em, 4.6vw, 2.5em);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.ang-ficha__cabecera-meta {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.94em;
	font-weight: 600;
	line-height: 1.4;
}

/* Separador al final del dato anterior (no al principio del siguiente): si la línea se parte en
   móvil, el "·" se queda arriba en vez de encabezar la línea nueva. */
.ang-ficha__cabecera-meta span:not(:last-child)::after {
	content: "·";
	margin: 0 10px;
	opacity: 0.6;
}

.ang-ficha__cabecera-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.ang-ficha__estado,
.ang-ficha__distintivo {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 0.76em;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.ang-ficha__estado {
	background: #fff;
	color: var(--ang-azul);
}

/* El "display: inline-flex" de arriba gana por origen al "[hidden] { display: none }" del navegador. */
.ang-ficha__estado[hidden] {
	display: none;
}

.ang-ficha__distintivo {
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff;
}

.ang-ficha__descripcion {
	margin: 14px 0 0;
	max-width: 62ch;
	color: rgba(255, 255, 255, 0.88);
}

/*
 * Descripciones largas (ocho líneas en móvil no es raro) dejaban el programa de hoy fuera
 * de la primera pantalla. Se recorta a tres líneas con un "Ver más" debajo. La clase la pone el
 * JavaScript y solo si de verdad sobra texto: sin JavaScript se ve entera, como antes.
 */
.ang-ficha__descripcion--plegada {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.ang-ficha__descripcion-mas {
	margin: 6px 0 0;
	padding: 0;
	font: inherit;
	font-size: 0.88em;
	font-weight: 700;
	color: #fff;
	background: none;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	cursor: pointer;
}

.ang-ficha__descripcion-mas:hover {
	border-bottom-color: #fff;
}

.ang-ficha__cabecera--temporada + .ang-ficha__credito {
	margin: -12px 4px 20px;
}

/* Aviso del propio JSON ("aviso"), p. ej. que el programa oficial aún no está completo. */
.ang-ficha__nota {
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 1px dashed var(--ang-borde);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.6);
	color: var(--ang-texto-suave);
	font-size: 0.9em;
}

/*
 * Aviso de vista previa (?dia=AAAA-MM-DD en la URL). Tiene que cantar: es la diferencia entre
 * "estoy probando cómo quedará el sábado" y "la web está mostrando un día que no es". Amarillo
 * de advertencia, a todo el ancho y arriba del todo. Empieza con el atributo "hidden".
 */
.ang-ficha__previsualizacion {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin: 0 -50vw 16px;
	padding: 10px 16px;
	background: #ffd84d;
	color: #3d2f00;
	text-align: center;
	font-size: 0.88em;
	font-weight: 700;
}

/* Mismo motivo que en ".ang-ficha__ver-todos[hidden]". */
.ang-ficha__previsualizacion[hidden] {
	display: none;
}

.ang-ficha__previsualizacion-salir {
	margin-left: 10px;
	color: inherit;
	font-weight: 800;
}

/*
 * Barra de búsqueda + chips, fija arriba al hacer scroll (estilo app): siempre a mano mientras
 * se recorre el calendario o el programa. Fondo translúcido con desenfoque; el color sólido de
 * la primera declaración es el respaldo para navegadores sin color-mix().
 *
 * Se pega justo debajo de la cuenta atrás, que también es fija y va por encima (z-index mayor).
 * --ang-alto-cuenta-atras lo mide su script y lo escribe en .ang-ficha; si no hay cuenta atrás
 * —ficha de un solo evento, o programa ya terminado— no existe la variable y el respaldo de 0px
 * deja esta barra arriba del todo, como estaba.
 */
.ang-ficha__barra {
	position: sticky;
	top: var(--ang-alto-cuenta-atras, 0px);
	z-index: 10;
	margin: 0 -10px;
	padding: 10px;
	background: var(--ang-fondo);
	background: color-mix(in srgb, var(--ang-fondo) 86%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
	border-radius: 0 0 18px 18px;
}

.ang-ficha__filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.ang-ficha__filtro-texto {
	flex: 1 1 220px;
	min-width: 0;
	font: inherit;
	font-size: 1em;
	color: var(--ang-texto);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8078' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px 50% / 18px 18px;
	border: 1px solid var(--ang-borde);
	border-radius: 999px;
	padding: 12px 18px 12px 44px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	-webkit-appearance: none;
	appearance: none;
}

.ang-ficha__filtro-texto:focus {
	outline: 2px solid var(--ang-rojo);
	outline-offset: 1px;
}

/* Chip del día elegido en el calendario: su "×" quita ese filtro sin tocar los demás. */
.ang-ficha__filtro-fecha-activo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-size: 0.9em;
	font-weight: 700;
	color: #fff;
	background: var(--ang-rojo);
	border: none;
	border-radius: 999px;
	padding: 10px 16px;
	cursor: pointer;
}

.ang-ficha__filtro-fecha-activo:hover {
	opacity: 0.88;
}

/* El "display: inline-flex" de arriba gana por origen al "[hidden] { display: none }" del navegador. */
.ang-ficha__filtro-fecha-activo[hidden] {
	display: none;
}

/* Chips de categoría: una fila que se desliza en horizontal en móvil en vez de partirse. */
.ang-ficha__chips {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	padding-bottom: 2px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ang-ficha__chips::-webkit-scrollbar {
	display: none;
}

/*
 * Con ratón (ordenador) estas filas se arrastran pinchando (ver el script del programa), igual
 * que con el dedo en el móvil: el cursor de mano lo anuncia. Los chips se partieron un tiempo en
 * varias líneas en el ordenador, pero se prefirió la misma fila deslizable que en el móvil.
 */
@media (hover: hover) and (pointer: fine) {
	.ang-ficha__chips,
	.ang-ficha__destacados-lista {
		cursor: grab;
	}
}

/* Mientras se arrastra con el ratón: sin encaje (lo haría ir a saltos) ni selección de texto. */
.ang-ficha__destacados-lista.is-arrastrando,
.ang-ficha__chips.is-arrastrando {
	cursor: grabbing;
	scroll-snap-type: none;
	-webkit-user-select: none;
	user-select: none;
}

.ang-ficha__chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-size: 0.88em;
	font-weight: 700;
	color: var(--ang-texto);
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid var(--ang-borde);
	border-radius: 999px;
	padding: 8px 14px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ang-ficha__chip:hover {
	border-color: var(--ang-texto-suave);
}

/* Con el día o el texto de ahora, esa categoría no tiene actos: se ve, pero apagada. */
.ang-ficha__chip:disabled {
	opacity: 0.45;
	cursor: default;
}

.ang-ficha__chip:disabled:hover {
	border-color: var(--ang-borde);
}

.ang-ficha__chip[aria-pressed="true"] {
	color: #fff;
	background: var(--ang-chip-activo);
	border-color: var(--ang-chip-activo);
}

.ang-ficha__chip-total {
	font-size: 0.85em;
	font-weight: 600;
	opacity: 0.65;
	font-variant-numeric: tabular-nums;
}

/*
 * Botón que revela el programa debajo del calendario. Desaparece en cuanto el programa se
 * muestra (por este botón, un día, una categoría o el buscador) — es una revelación de un solo
 * sentido, no un interruptor para volver a ocultarlo.
 */
/*
 * Bloque "Hoy": los actos del día en curso, justo debajo del calendario. Va ahí y no antes a
 * propósito: quien entra a mirar un día concreto necesita ver primero que hay un calendario,
 * y quien solo quiere saber qué hay hoy lo encuentra a un scroll, ya resuelto y sin pulsar.
 * Líneas compactas (hora a la izquierda, título y lugar a la derecha) en vez de las tarjetas
 * grandes del programa, para que quepan varias de un vistazo. Lo rellena el JavaScript y
 * empieza con el atributo "hidden": si hoy no hay actos, no aparece.
 */
.ang-ficha__hoy {
	margin: 4px 0 0;
	padding: 18px;
	border: 1px solid var(--ang-borde);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.75);
}

/* Mismo motivo que en ".ang-ficha__ver-todos[hidden]". */
.ang-ficha__hoy[hidden] {
	display: none;
}

.ang-ficha__hoy-cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin-bottom: 12px;
}

.ang-ficha__hoy-cabecera .ang-ficha__seccion-titulo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}

.ang-ficha__hoy-etiqueta {
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--ang-rojo);
	color: #fff;
	font-size: 0.62em;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ang-ficha__hoy-fecha {
	font-size: 0.82em;
	font-weight: 700;
}

.ang-ficha__hoy-total {
	margin: 0;
	color: var(--ang-texto-suave);
	font-size: 0.9em;
	font-weight: 600;
}

.ang-ficha__hoy-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/*
 * Cada línea lleva a la tarjeta completa del acto, ya en el programa (el href con su id hace
 * de respaldo si el JavaScript fallara). Rejilla de dos columnas para que las horas queden
 * alineadas en vertical aunque un acto no tenga hora.
 */
.ang-ficha__hoy-acto {
	display: grid;
	grid-template-columns: 58px 1fr;
	align-items: baseline;
	gap: 12px;
	padding: 10px 8px;
	border-radius: 14px;
	color: inherit;
	text-decoration: none;
	transition: background 0.15s ease;
}

.ang-ficha__hoy-lista li + li .ang-ficha__hoy-acto {
	border-top: 1px solid var(--ang-borde);
}

.ang-ficha__hoy-acto:hover {
	background: color-mix(in srgb, var(--ang-rojo) 8%, transparent);
}

.ang-ficha__hoy-hora {
	color: var(--ang-rojo);
	font-weight: 800;
	font-size: 0.95em;
	font-variant-numeric: tabular-nums;
}

/*
 * Acto de varios días que sigue en marcha: no lleva hora, lleva aviso. Sin versalitas y algo
 * más pequeño que una hora, para que quepa en la misma columna sin partirse en dos líneas.
 */
.ang-ficha__hoy-hora--curso {
	color: var(--ang-texto-suave);
	font-size: 0.82em;
	font-weight: 700;
	white-space: nowrap;
}

.ang-ficha__hoy-cuerpo {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ang-ficha__hoy-titulo {
	font-weight: 700;
	line-height: 1.3;
}

/*
 * El acto marcado como imprescindible en el JSON lleva un punto rojo. Va detrás del título y
 * no delante: delante desplazaría ese título y rompería la alineación con el resto de líneas.
 */
.ang-ficha__hoy-acto--destacado .ang-ficha__hoy-titulo::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-radius: 50%;
	background: var(--ang-rojo);
	vertical-align: middle;
}

.ang-ficha__hoy-meta {
	color: var(--ang-texto-suave);
	font-size: 0.85em;
	font-weight: 600;
}

.ang-ficha__hoy-mas {
	display: block;
	width: 100%;
	margin: 12px 0 0;
	padding: 11px 16px;
	font: inherit;
	font-size: 0.92em;
	font-weight: 700;
	color: var(--ang-azul);
	background: transparent;
	border: 1px solid var(--ang-borde);
	border-radius: 14px;
	cursor: pointer;
}

.ang-ficha__hoy-mas:hover {
	border-color: var(--ang-rojo);
	color: var(--ang-rojo);
}

/* Mismo motivo que en ".ang-ficha__ver-todos[hidden]". */
.ang-ficha__hoy-mas[hidden] {
	display: none;
}

.ang-ficha__ver-todos {
	display: block;
	width: 100%;
	margin: 14px 0 0;
	padding: 15px 20px;
	font: inherit;
	font-size: 1em;
	font-weight: 700;
	text-align: center;
	color: #fff;
	background: var(--ang-rojo);
	border: none;
	border-radius: 16px;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.ang-ficha__ver-todos:hover {
	opacity: 0.88;
}

/* Mismo motivo que en ".ang-ficha__estado[hidden]". */
.ang-ficha__ver-todos[hidden] {
	display: none;
}

/*
 * Calendario, pintado por JavaScript (en vez de un <input type="date"> nativo, que no se puede
 * maquetar igual en todos los navegadores). Es la vista inicial del programa, a todo el ancho
 * (mismo truco de los 100vw que el hero/la cuenta atrás). Debajo van los actos de hoy, los
 * imprescindibles y el programa completo — alcanzables con scroll normal de página, no una
 * vista aparte que sustituye al calendario.
 *
 * El min-height ya no llena la pantalla: cuando el calendario era lo último de la primera
 * pantalla, ese alto lo hacía protagonista; ahora, con los actos de hoy justo debajo, solo
 * servía para alejarlos (en un móvil eran 305 px de hueco vacío, porque el mes ocupa unos 354
 * y el min-height forzaba 658). Se queda un mínimo modesto, lo justo para que el bloque no
 * pegue saltos entre un mes de cuatro filas y uno de seis.
 */
.ang-ficha__calendario-pantalla {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-top: 8px;
	padding: 24px clamp(16px, 6vw, 120px) 32px;
	min-height: min(46vh, 420px);
	/* La barra de búsqueda es fija: sin este hueco, al volver al calendario con el botón
	   flotante su parte de arriba —el nombre del mes— se quedaba escondida detrás de ella.
	   Mismo remedio que ya usan el listado y las tarjetas de acto. */
	scroll-margin-top: var(--ang-alto-barra, 140px);
	display: flex;
	flex-direction: column;
	/* Arriba, no centrado: con la cabecera del programa encima, centrado quedaba más abajo de la primera pantalla. */
	justify-content: flex-start;
}

.ang-ficha__calendario-nav,
.ang-ficha__calendario-dias-semana,
.ang-ficha__calendario-dias {
	width: 100%;
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}

.ang-ficha__calendario-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.ang-ficha__calendario-mes {
	font-weight: 800;
	font-size: 1.4em;
	letter-spacing: -0.01em;
}

.ang-ficha__calendario-mes-anterior,
.ang-ficha__calendario-mes-siguiente {
	width: 48px;
	height: 48px;
	font-size: 1.6em;
	line-height: 1;
	color: var(--ang-texto);
	background: rgba(0, 0, 0, 0.05);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.ang-ficha__calendario-mes-anterior:disabled,
.ang-ficha__calendario-mes-siguiente:disabled {
	opacity: 0.3;
	cursor: default;
}

.ang-ficha__calendario-mes-anterior:not(:disabled):hover,
.ang-ficha__calendario-mes-siguiente:not(:disabled):hover {
	background: var(--ang-borde);
}

.ang-ficha__calendario-dias-semana {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 10px;
	font-size: 0.85em;
	font-weight: 700;
	color: var(--ang-texto-suave);
	text-align: center;
}

.ang-ficha__calendario-dias {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	row-gap: 12px;
}

.ang-ficha__calendario-dia {
	position: relative;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	width: 48px;
	font: inherit;
	font-size: 1.05em;
	color: var(--ang-texto-suave);
	background: none;
	border: none;
	border-radius: 50%;
	cursor: default;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ang-ficha__calendario-dia--vacio {
	visibility: hidden;
}

.ang-ficha__calendario-dia--hoy {
	box-shadow: inset 0 0 0 2px var(--ang-borde);
}

.ang-ficha__calendario-dia--con-evento {
	color: var(--ang-texto);
	font-weight: 700;
	cursor: pointer;
}

.ang-ficha__calendario-dia--con-evento::after {
	content: "";
	position: absolute;
	bottom: 6px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ang-rojo);
}

.ang-ficha__calendario-dia--hoy.ang-ficha__calendario-dia--con-evento {
	box-shadow: inset 0 0 0 2px var(--ang-rojo);
}

.ang-ficha__calendario-dia--con-evento:hover {
	background: var(--ang-borde);
}

.ang-ficha__calendario-dia--seleccionado,
.ang-ficha__calendario-dia--seleccionado:hover {
	background: var(--ang-rojo);
	color: #fff;
}

.ang-ficha__calendario-dia--seleccionado::after {
	background: #fff;
}

/* Número de actos del día, cuando hay más de uno. */
.ang-ficha__calendario-num {
	position: absolute;
	top: -2px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--ang-azul);
	color: #fff;
	font-size: 0.62em;
	font-weight: 800;
	line-height: 18px;
	font-variant-numeric: tabular-nums;
}

.ang-ficha__calendario-dia--seleccionado .ang-ficha__calendario-num {
	background: #fff;
	color: var(--ang-rojo);
	box-shadow: 0 0 0 1px var(--ang-rojo);
}

.ang-ficha__seccion-titulo {
	margin: 0;
	font-size: 1.35em;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--ang-texto);
}

/* "Imprescindibles": tarjetas grandes en una fila deslizable (scroll-snap). */
.ang-ficha__destacados {
	margin: 8px 0 0;
}

.ang-ficha__destacados .ang-ficha__seccion-titulo {
	margin-bottom: 12px;
}

.ang-ficha__destacados-lista {
	list-style: none;
	margin: 0;
	padding: 0 0 8px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(260px, 80%), 1fr);
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.ang-ficha__destacado {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	min-height: 150px;
	padding: 20px;
	border-radius: 22px;
	background: var(--ang-rojo);
	background: linear-gradient(160deg, var(--ang-rojo) 0%, color-mix(in srgb, var(--ang-rojo) 55%, var(--ang-azul)) 100%);
	color: #fff;
	text-decoration: none;
	scroll-snap-align: start;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ang-ficha__destacado:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.6);
}

.ang-ficha__destacado-categoria {
	align-self: flex-start;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ang-ficha__destacado-titulo {
	font-size: 1.2em;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.ang-ficha__destacado-fecha {
	margin-top: auto;
	font-size: 0.88em;
	font-weight: 600;
	opacity: 0.9;
}

/*
 * Botón flotante para volver al calendario, abajo a la derecha: en un móvil es donde llega el
 * pulgar sin cambiar de mano, y la barra fija de arriba —que también está siempre a la vista—
 * es justo la esquina peor de alcanzar. Lo enseña y lo esconde el JavaScript según dónde haya
 * quedado el calendario, así que no estorba mientras se ve.
 *
 * "position: fixed" respecto a la pantalla: ni el recorte horizontal del body ni la barra fija
 * lo afectan, porque ninguno de los dos crea un contexto de posicionamiento (no hay transform
 * ni filter de por medio).
 */
.ang-ficha__ir-calendario {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	font: inherit;
	font-size: 0.92em;
	font-weight: 700;
	color: #fff;
	background: var(--ang-azul);
	border: none;
	border-radius: 999px;
	box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.55);
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.ang-ficha__ir-calendario:hover {
	transform: translateY(-2px);
}

/* Mismo motivo que en ".ang-ficha__ver-todos[hidden]". */
.ang-ficha__ir-calendario[hidden] {
	display: none;
}

.ang-ficha__ir-calendario-icono {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/*
 * Botón flotante de compartir por WhatsApp: abajo a la derecha, encima del de "Calendario" (que
 * mide unos 46px de alto) con un poco de aire, para que no se pisen cuando salen los dos. Está
 * siempre a la vista: se puede querer compartir el programa desde cualquier punto de la página.
 * Verde de WhatsApp para que se reconozca de un vistazo, aunque no vaya a juego con la ficha.
 */
.ang-ficha__compartir {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: calc(max(16px, env(safe-area-inset-bottom)) + 58px);
	z-index: 20;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	color: #fff;
	background: #25d366;
	border-radius: 50%;
	box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.55);
	transition: transform 0.15s ease;
}

.ang-ficha__compartir:hover {
	transform: translateY(-2px);
}

.ang-ficha__compartir:focus-visible {
	outline: 3px solid var(--ang-azul);
	outline-offset: 3px;
}

.ang-ficha__compartir-icono {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

/* Hueco al final del programa para que los botones flotantes no tapen la última tarjeta. */
.ang-ficha__listado {
	padding-bottom: 132px;
}

/*
 * El programa, oculto al principio (atributo "hidden") y agrupado por días. Sin la regla
 * [hidden], "display" de las reglas de autor ganaría por origen a la del navegador.
 */
.ang-ficha__listado {
	margin-top: 32px;
	scroll-margin-top: var(--ang-alto-barra, 140px);
}

.ang-ficha__listado[hidden],
.ang-ficha__grupo[hidden],
.ang-ficha__evento[hidden] {
	display: none;
}

.ang-ficha__listado-cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
}

.ang-ficha__contador {
	margin: 0;
	color: var(--ang-texto-suave);
	font-size: 0.9em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ang-ficha__sin-resultados {
	margin: 20px 0 0;
	padding: 16px 20px;
	background: rgba(255, 255, 255, 0.65);
	border-radius: 16px;
	color: var(--ang-texto-suave);
	text-align: center;
}

.ang-ficha__grupo {
	margin-top: 24px;
}

.ang-ficha__grupo-titulo {
	margin: 0 0 10px;
	font-size: 0.8em;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--ang-rojo);
}

.ang-ficha__listado--un-dia .ang-ficha__grupo-titulo {
	display: none;
}

.ang-ficha__listado--un-dia .ang-ficha__grupo {
	margin-top: 16px;
}

.ang-ficha__temporada {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Tarjeta de acto: ficha de fecha a la izquierda (estilo calendario de app) y contenido. */
.ang-ficha__evento {
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 16px;
	padding: 16px 18px;
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid transparent;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	scroll-margin-top: var(--ang-alto-barra, 140px);
	transition: box-shadow 0.2s ease;
}

.ang-ficha__evento:hover {
	box-shadow: 0 10px 26px -18px rgba(0, 0, 0, 0.45);
}

.ang-ficha__evento:focus {
	outline: none;
}

.ang-ficha__evento--destacado {
	border-color: var(--ang-rojo);
}

@keyframes ang-ficha-resalte {
	from {
		box-shadow: 0 0 0 0 var(--ang-rojo);
	}
	to {
		box-shadow: 0 0 0 14px transparent;
	}
}

.ang-ficha__evento--resaltado {
	animation: ang-ficha-resalte 1.2s ease-out 2;
}

.ang-ficha__evento-fecha {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: start;
	padding: 8px 0 10px;
	border-radius: 14px;
	background: rgba(0, 0, 0, 0.04);
	line-height: 1.1;
	text-align: center;
}

.ang-ficha__evento-fecha-semana,
.ang-ficha__evento-fecha-mes {
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ang-texto-suave);
}

.ang-ficha__evento-fecha-dia {
	margin: 2px 0;
	font-size: 1.65em;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ang-rojo);
	font-variant-numeric: tabular-nums;
}

.ang-ficha__evento-cuerpo {
	min-width: 0;
}

.ang-ficha__evento-etiquetas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
}

.ang-ficha__evento-etiquetas .ang-ficha__categoria {
	margin: 0;
	padding: 3px 10px;
	font-size: 0.7em;
}

.ang-ficha__insignia {
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.05);
	color: var(--ang-rojo);
	font-size: 0.7em;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ang-ficha__evento-titulo {
	margin: 0 0 6px;
	font-size: 1.1em;
	font-weight: 800;
	color: var(--ang-texto);
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.ang-ficha__evento-datos {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 0.86em;
	color: var(--ang-texto-suave);
}

.ang-ficha__evento-hora,
.ang-ficha__evento-numero {
	color: var(--ang-rojo);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ang-ficha__evento-lugar {
	color: var(--ang-azul);
	font-weight: 600;
}

.ang-ficha__evento-precio {
	font-weight: 600;
}

.ang-ficha__evento-entradas {
	display: inline-flex;
	align-items: center;
	margin-top: 12px;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--ang-rojo);
	color: #fff;
	font-size: 0.86em;
	font-weight: 700;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.ang-ficha__evento-entradas:hover {
	opacity: 0.88;
}

.ang-ficha__evento-detalle {
	margin-top: 12px;
}

.ang-ficha__evento-detalle summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 0.86em;
	color: var(--ang-azul);
	list-style: none;
}

.ang-ficha__evento-detalle summary::-webkit-details-marker {
	display: none;
}

.ang-ficha__evento-detalle summary::after {
	content: " ▾";
}

.ang-ficha__evento-detalle[open] summary::after {
	content: " ▴";
}

.ang-ficha__evento-detalle .ang-ficha__texto {
	margin-top: 10px;
}

.ang-ficha__evento-detalle .ang-ficha__tecnica {
	margin-top: 12px;
}

.ang-ficha__fuente {
	margin: 32px 0 0;
	color: var(--ang-texto-suave);
	font-size: 0.82em;
	text-align: center;
}

.ang-ficha__fuente a {
	color: inherit;
	font-weight: 600;
}

@media (max-width: 480px) {
	.ang-ficha {
		font-size: 15px;
	}

	/* En móvil el bloque "Hoy" se aprieta un poco: cabe un acto más antes del pliegue. */
	.ang-ficha__hoy {
		padding: 14px;
	}

	.ang-ficha__hoy-acto {
		grid-template-columns: 52px 1fr;
		gap: 10px;
		padding: 9px 4px;
	}

	.ang-ficha__tecnica {
		grid-template-columns: 1fr;
		gap: 2px 0;
	}

	.ang-ficha__tecnica dd {
		margin-bottom: 8px;
	}

	.ang-ficha__cabecera--temporada {
		border-radius: 22px;
	}

	.ang-ficha__calendario-pantalla {
		padding-top: 24px;
		padding-bottom: 32px;
	}

	.ang-ficha__calendario-mes {
		font-size: 1.15em;
	}

	.ang-ficha__calendario-mes-anterior,
	.ang-ficha__calendario-mes-siguiente {
		width: 40px;
		height: 40px;
		font-size: 1.4em;
	}

	.ang-ficha__calendario-dia {
		width: 38px;
		font-size: 0.95em;
	}

	.ang-ficha__evento {
		grid-template-columns: 50px 1fr;
		gap: 12px;
		padding: 14px;
	}

	.ang-ficha__evento-fecha-dia {
		font-size: 1.4em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ang-ficha *,
	.ang-ficha *::before,
	.ang-ficha *::after {
		animation: none !important;
		transition: none !important;
	}
}