/*
 * Vista semanal de la agenda (/agenda/semana/AAAA-MM-DD/).
 *
 * Heredar, no redeclarar: no se fijan tipografías ni colores de marca. Todo lo que pinta
 * texto usa `inherit` / `currentColor`; los bordes y atenuados se derivan de `currentColor`.
 * La única excepción es el contenedor: el tema pinta el fondo de la página en gris oscuro, así
 * que la agenda se dibuja como una tarjeta clara (fondo y color de texto propios) y todo lo
 * de dentro hereda de ella. La barra sticky debe ser opaca y usa --agenda-fondo, que la
 * tarjeta fija en blanco; agenda.js solo lo copia del <body> si el CSS no lo definió.
 * Los estados (cancelado, pospuesto) usan colores SEMÁNTICOS propios, no de marca, y siempre
 * van acompañados de texto: el color nunca es lo único que distingue un estado.
 *
 * Variables que fija agenda.js sobre .derocanrol-agenda:
 *   --agenda-header-h  borde inferior del encabezado fijo del tema (y de la barra de admin)
 *   --agenda-barra-h   altura de la barra de filtros
 */

.derocanrol-agenda {
	--agenda-header-h: 0px;
	--agenda-barra-h: 0px;
	--agenda-borde: color-mix(in srgb, currentColor 18%, transparent);
	--agenda-fecha-ancho: 4.75rem;
	--agenda-flyer-ancho: 4.5rem;
	--agenda-fondo: #fff;
	--agenda-texto: #1a1a1a;
	--agenda-foco: #0b57d0;
	--agenda-pasado: #595959;
	--agenda-cancelado: #b3261e;
	--agenda-cancelado-fondo: #fdecea;
	--agenda-pospuesto: #8a4b00;
	--agenda-pospuesto-fondo: #fff1dc;

	box-sizing: border-box;
	max-width: 60rem;
	margin: 0 auto;
	padding: 1.25rem;
	border-radius: 0.5rem;
	background: #fff;
	font: inherit;
	color: #1a1a1a;
}

.derocanrol-agenda *,
.derocanrol-agenda *::before,
.derocanrol-agenda *::after {
	box-sizing: inherit;
}

.derocanrol-agenda [hidden] {
	display: none !important;
}

/* Visible solo para lectores de pantalla (contexto de un enlace, mes repetido de un día). */
.agenda-sr,
.agenda-dia__mes--oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Foco de teclado uniforme en todo lo interactivo de la tarjeta. :where() no suma especificidad: los
   elementos con un foco propio (el botón de cerrar del lightbox) lo siguen sobrescribiendo. */
.derocanrol-agenda :where(a, button, summary, select, input):focus-visible {
	outline: 3px solid var(--agenda-foco);
	outline-offset: 2px;
}

/* Encabezado: título y navegación entre semanas ---------------------------------------- */

.agenda-encabezado {
	margin-bottom: 1rem;
}

.agenda-titulo {
	margin: 0 0 0.75rem;
}

.agenda-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.agenda-nav__enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.75rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--agenda-borde);
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
}

.agenda-nav__enlace:hover,
.agenda-nav__enlace:focus-visible,
.agenda-nav__enlace[aria-current="page"] {
	border-color: currentColor;
}

.agenda-nav__hoy {
	font-weight: 700;
}

.agenda-nav__siguiente {
	margin-left: auto;
}

/* Barra sticky ------------------------------------------------------------------------- */

.agenda-barra {
	position: sticky;
	top: var(--agenda-header-h, 0px);
	z-index: 20;
	padding: 0.6rem 0;
	background-color: var(--agenda-fondo, Canvas);
	border-bottom: 1px solid var(--agenda-borde);
}

/*
 * Panel de filtros. En pantallas estrechas la barra sticky es solo este botón y el contador (unos 85 px en vez
 * de 230); al abrirse, los campos salen como una hoja sobre la lista y no empujan nada. En anchas el panel está
 * siempre abierto (agenda.js) y el botón no se ve.
 */
.agenda-filtros-panel__resumen {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 1rem;
	border: 1px solid var(--agenda-borde);
	border-radius: 999px;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

/*
 * Dentro de un <details> el navegador envuelve el contenido en ::details-content, y el `box-sizing: inherit` de
 * `.derocanrol-agenda *` hereda de ESE pseudo-elemento (content-box), no del <details>: sin esto el formulario y sus
 * campos se pasan del ancho del panel por su padding y borde.
 */
.derocanrol-agenda .agenda-filtros {
	box-sizing: border-box;
}

.agenda-filtros-panel__resumen::-webkit-details-marker {
	display: none;
}

.agenda-filtros-panel__resumen::after {
	content: "\25BE";
	content: "\25BE" / "";
}

.agenda-filtros-panel[open] > .agenda-filtros-panel__resumen::after {
	content: "\25B4";
	content: "\25B4" / "";
}

.agenda-filtros-panel__resumen:hover {
	border-color: currentColor;
}

@media (max-width: 39.99em) {
	.agenda-filtros-panel[open] > .agenda-filtros {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 30;
		max-height: calc(100vh - var(--agenda-header-h, 0px) - var(--agenda-barra-h, 0px) - 1rem);
		max-height: calc(100dvh - var(--agenda-header-h, 0px) - var(--agenda-barra-h, 0px) - 1rem);
		padding: 0.75rem;
		overflow: auto;
		background-color: var(--agenda-fondo, Canvas);
		border: 1px solid var(--agenda-borde);
		border-radius: 0 0 0.5rem 0.5rem;
		box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
	}
}

@media (min-width: 40em) {
	.agenda-filtros-panel__resumen {
		display: none;
	}
}

.agenda-filtros__campos {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.5rem 0.75rem;
}

.agenda-campo {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin: 0;
	min-width: 0;
}

.agenda-campo label {
	font-size: 0.8em;
	font-weight: 700;
}

.agenda-campo select,
.agenda-campo input {
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0.4rem 0.5rem;
	min-height: 2.75rem;
	font: inherit;
	color: inherit;
}

.agenda-campo--accion {
	margin-left: auto;
}

.agenda-filtros__limpiar {
	min-height: 2.75rem;
	padding: 0.45rem 0.8rem;
	border: 1px solid var(--agenda-borde);
	border-radius: 999px;
	background: transparent;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.agenda-filtros__limpiar:hover,
.agenda-filtros__limpiar:focus-visible {
	border-color: currentColor;
}

.agenda-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.agenda-chips:empty {
	display: none;
}

.agenda-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.75rem;
	padding: 0.25rem 0.7rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: 0.9em;
	color: inherit;
	cursor: pointer;
}

.agenda-contador {
	margin: 0.5rem 0 0;
	font-weight: 700;
}

/* Lista: un bloque por día, fecha a la izquierda y tarjetas a la derecha ---------------- */

.agenda-lista {
	margin-top: 0.5rem;
}

.agenda-vacio,
.agenda-sin-resultados {
	margin: 2rem 0;
	padding: 1.25rem;
	border: 1px dashed var(--agenda-borde);
	text-align: center;
}

.agenda-dia {
	display: grid;
	grid-template-columns: var(--agenda-fecha-ancho) minmax(0, 1fr);
	gap: 0 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--agenda-borde);
	/* Al saltar a «hoy», no quedar tapado por el encabezado y la barra sticky. */
	scroll-margin-top: calc(var(--agenda-header-h, 0px) + var(--agenda-barra-h, 0px) + 0.75rem);
}

/* Los días pasados se atenúan sin perder legibilidad: el texto pasa a un gris de 7:1 sobre blanco y solo el flyer
   se aclara. (Antes todo el día iba a opacity .5 = 3.4:1, por debajo de WCAG AA.) */
.agenda-dia.es-pasado {
	color: var(--agenda-pasado);
}

.agenda-dia.es-pasado .agenda-evento__imagen {
	opacity: 0.5;
}

.agenda-dia__fecha {
	margin: 0;
	font: inherit;
	line-height: 1.15;
}

.agenda-dia__fecha time {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.agenda-dia__semana,
.agenda-dia__mes {
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.agenda-dia__numero {
	font-size: 2em;
	font-weight: 800;
}

/* «Hoy» también como texto: el subrayado solo es discreto. */
.agenda-dia__hoy {
	align-self: flex-start;
	margin-top: 0.25rem;
	padding: 0.05rem 0.5rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.7em;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* El día de hoy (lo marca agenda.js con la fecha del sitio) se subraya en el número. */
.agenda-dia.es-hoy .agenda-dia__numero {
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

.agenda-dia__eventos {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.agenda-evento__tarjeta {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
}

/*
 * Los flyers son carteles verticales de proporciones distintas y su texto es su contenido: nunca se recortan. En la
 * lista son una miniatura dentro de una caja fija 3:4 (object-fit: contain: el cartel entero, con barras si su
 * proporción es otra); el flyer grande vive en la ficha. La caja se reserva SIEMPRE, con o sin flyer, para que el
 * título arranque en la misma columna en todas las filas.
 */
.agenda-evento__imagen {
	display: block;
	flex: 0 0 var(--agenda-flyer-ancho);
	width: var(--agenda-flyer-ancho);
	aspect-ratio: 3 / 4;
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.agenda-evento__imagen--vacia {
	background: transparent;
	border: 1px dashed var(--agenda-borde);
}

.agenda-evento__flyer {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.agenda-evento__cuerpo {
	flex: 1 1 auto;
	min-width: 0;
}

/* Título del evento: hasta 3 líneas en la lista; el texto completo sigue en el HTML. */
.agenda-evento__artista {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	margin: 0 0 0.25rem;
	overflow: hidden;
	font: inherit;
	font-size: 1.15em;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.agenda-evento__artista a {
	color: inherit;
	text-decoration: none;
}

.agenda-evento__artista a:hover,
.agenda-evento__artista a:focus-visible {
	text-decoration: underline;
}

/* «con …»: los demás artistas del evento, si no están ya en el título. */
.agenda-evento__con {
	margin: 0 0 0.25rem;
	font-size: 0.9em;
}

.agenda-evento__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.75rem;
	margin: 0;
	font-size: 0.95em;
}

.agenda-evento__hora::before {
	content: "\00B7  ";
}

.agenda-evento__datos .agenda-evento__venue + .agenda-evento__hora::before {
	content: none;
}

/* Estados. Texto + símbolo + color semántico (no de marca); un cancelado además tacha el TÍTULO, no su propio texto. */
.agenda-evento__estado {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0.4rem 0 0;
	padding: 0.15rem 0.6rem;
	border: 1px solid currentColor;
	border-radius: 0.25rem;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.agenda-evento__estado::before {
	content: "\2715";
	content: "\2715" / "";
}

.agenda-evento__estado--cancelado {
	background: var(--agenda-cancelado-fondo);
	color: var(--agenda-cancelado);
}

.agenda-evento__estado--pospuesto {
	background: var(--agenda-pospuesto-fondo);
	color: var(--agenda-pospuesto);
}

.agenda-evento__estado--pospuesto::before {
	content: "\21BB";
	content: "\21BB" / "";
}

.agenda-evento--cancelado .agenda-evento__artista a,
.ficha__titulo--cancelado,
.termino__destacado-titulo--cancelado a {
	text-decoration: line-through;
	text-decoration-thickness: 0.1em;
}

/* Boletos en la lista: acción secundaria, con área táctil de 44 px. */
.agenda-evento__acciones {
	margin: 0.5rem 0 0;
}

.agenda-evento__boletos {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 1rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

.agenda-evento__boletos:hover {
	background: color-mix(in srgb, currentColor 8%, transparent);
}

/* Ficha del evento (/evento/<slug>/) --------------------------------------------------- */

.ficha__migas {
	margin-bottom: 1rem;
}

.ficha__titulo {
	margin: 0;
}

.ficha__cuerpo {
	display: grid;
	gap: 1.5rem;
	margin-top: 1rem;
}

/* El flyer nunca se recorta: es un cartel vertical y su texto es el contenido principal. */
.ficha__flyer {
	margin: 0;
}

.ficha__flyer-enlace {
	display: block;
	color: inherit;
}

.ficha__flyer-img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.ficha__ampliar {
	display: inline-block;
	margin-top: 0.4rem;
	font-size: 0.85em;
	text-decoration: underline;
}

.ficha__datos {
	margin: 0;
}

.ficha__dato {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	gap: 0.5rem;
	padding: 0.6rem 0;
	border-top: 1px solid var(--agenda-borde);
}

.ficha__dato:last-child {
	border-bottom: 1px solid var(--agenda-borde);
}

.ficha__dato dt {
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
}

.ficha__dato dd {
	margin: 0;
}

.ficha__direccion {
	display: block;
	font-size: 0.9em;
	opacity: 0.75;
}

.ficha__artistas {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ficha__descripcion {
	margin: 0;
}

/* Acción principal de la ficha: el botón de boletos. */
.ficha__cta {
	margin: 1rem 0 0;
}

.ficha__boletos {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0 1.5rem;
	border-radius: 999px;
	background: var(--agenda-texto);
	color: var(--agenda-fondo);
	font-weight: 700;
	text-decoration: none;
}

.ficha__boletos:hover {
	background: #000;
}

@media (min-width: 30em) {
	.ficha__boletos {
		display: inline-flex;
	}
}

/* Lightbox: <dialog> nativo; la imagen grande se pide solo al abrir. */
.ficha-lightbox {
	max-width: 100vw;
	max-height: 100vh;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.ficha-lightbox::backdrop {
	background: rgb(0 0 0 / 85%);
}

/* Mientras el lightbox está abierto, la página de atrás no se desplaza. */
html:has(.ficha-lightbox[open]) {
	overflow: hidden;
}

.ficha-lightbox__imagen {
	display: block;
	max-width: 95vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

/*
 * Botón de cerrar: fijo en la esquina de la pantalla, no sobre el cartel (taparía su texto). Colores
 * del sistema (Canvas / CanvasText), no de marca: los estilos globales de `button` del tema no
 * pueden dejarlo invisible sobre un flyer claro u oscuro.
 */
.ficha-lightbox__cerrar {
	position: fixed;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 1;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 2px solid CanvasText;
	border-radius: 50%;
	background: Canvas;
	color: CanvasText;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.ficha-lightbox__cerrar:focus-visible {
	outline: 3px solid Highlight;
	outline-offset: 2px;
}

/*
 * En pantallas estrechas la ficha ya muestra el flyer a todo el ancho; un lightbox que lo encajara
 * en la pantalla no ampliaría nada. Aquí el cartel se ve a su tamaño natural, con desplazamiento y
 * pellizco para leer el texto pequeño.
 */
@media (max-width: 47.99em) {
	.ficha-lightbox {
		width: 100vw;
		height: 100vh;
		overflow: auto;
		touch-action: pan-x pan-y pinch-zoom;
	}

	.ficha-lightbox__imagen {
		max-width: none;
		max-height: none;
		min-width: 100vw;
		object-fit: fill;
	}
}

/* En el HTML la ficha va datos -> flyer -> descripción (en móvil los datos y el botón quedan antes del flyer, que
   es muy alto). En escritorio el flyer ocupa la columna izquierda. */
@media (min-width: 48em) {
	.ficha__cuerpo {
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
		grid-template-areas:
			"flyer info"
			"flyer desc";
		align-items: start;
	}

	.ficha__flyer {
		grid-area: flyer;
	}

	.ficha__info {
		grid-area: info;
	}

	.ficha__descripcion {
		grid-area: desc;
	}

	.ficha__cuerpo--sin-flyer {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"info"
			"desc";
	}
}

/* Páginas de venue y de banda (/agenda/venue/<slug>/, /agenda/banda/<slug>/) ---------------- */

.termino__encabezado {
	margin-bottom: 1.5rem;
}

.termino__tipo {
	margin: 0 0 0.25rem;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
}

.termino__titulo {
	margin: 0;
	overflow-wrap: anywhere;
}

.termino__direccion {
	margin: 0.5rem 0 0;
	opacity: 0.8;
}

.termino__enlaces {
	margin: 0.75rem 0 0;
}

.termino__seccion {
	margin: 0 0 0.75rem;
}

.termino__proximo {
	margin-bottom: 2rem;
}

/* Próximo show: el flyer en grande (completo, sin recortar) y los datos al lado o debajo. */
.termino__destacado {
	display: grid;
	gap: 1.25rem;
}

.termino__destacado-flyer {
	display: block;
}

.termino__destacado-flyer img {
	display: block;
	width: 100%;
	max-width: 28rem;
	height: auto;
	margin: 0 auto;
}

.termino__destacado-titulo {
	margin: 0 0 0.5rem;
	overflow-wrap: anywhere;
}

.termino__destacado-titulo a {
	color: inherit;
	text-decoration: none;
}

.termino__destacado-titulo a:hover,
.termino__destacado-titulo a:focus-visible {
	text-decoration: underline;
}

.termino__despues .agenda-dia__eventos {
	margin-top: 0.5rem;
}

.agenda-evento__fecha {
	font-weight: 600;
}

@media (min-width: 48em) {
	.termino__destacado-flyer img {
		max-width: 100%;
		margin: 0;
	}

	.termino__destacado {
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
		align-items: start;
	}
}

/* Pantallas anchas --------------------------------------------------------------------- */

@media (min-width: 40em) {
	.derocanrol-agenda {
		--agenda-fecha-ancho: 7rem;
		--agenda-flyer-ancho: 5rem;
	}

	.agenda-campo select,
	.agenda-campo input {
		min-width: 11rem;
	}
}

@media (max-width: 30em) {
	.agenda-campo {
		flex: 1 1 100%;
	}

	.agenda-campo select,
	.agenda-campo input {
		width: 100%;
	}
}