/**
 * Agenda de Eventos
 *
 * Typography is inherited from the theme on purpose: only spacing, colour and
 * layout are set here, so the agenda looks like the rest of the site instead of
 * like a plugin dropped on top of it. Logical properties keep the layout
 * correct when the page is served right to left.
 */

.agenda-eventos {
	--agenda-primario: #396283;
	--agenda-secundario: #203c53;
	--agenda-acento: #1d83d7;
	--agenda-borde: #c4d0db;
	--agenda-suave: #f6f8fa;
	--agenda-texto-tenue: #6b7785;

	/* The same grey drops to 4.28:1 once it sits on the tinted panel, so the
	   supporting text of the export controls uses a darker step. */
	--agenda-texto-apoyo: #5a6672;

	/* The month grid is built in layers so it reads as a panel without going
	   flat: a tinted frame, day cells barely off white on top of it, the days of
	   the neighbouring months a step back, and the weekday row clearly marked.
	   The list below keeps the page background: it is running text, not a table. */
	--agenda-fondo-panel: #dfe7ee;
	--agenda-fondo-celda: #fbfcfd;
	--agenda-fondo-otro-mes: #eaeff4;
	--agenda-fondo-cabecera: #ccd8e3;
	--agenda-fondo-hoy: #dceaf7;

	margin: 0 auto;

	/* The agenda takes the width its column offers. The cap only stops the month
	   grid from stretching on very wide screens; the reading measure of the list
	   is handled further down, on the body of each entry. */
	max-width: 1400px;
}

/* Calendar layer ---------------------------------------------------------- */

/* FullCalendar mounts on this element and adds its own `fc` classes to it, so
   everything below is a descendant selector without `.fc` in between. */
.agenda-eventos__calendario {
	background: var(--agenda-fondo-panel);
	border: 1px solid var(--agenda-borde);
	border-radius: 4px;
	font-size: 0.95em;
	margin-bottom: 2.5rem;
	margin-top: 1rem;
	padding: 0.9rem 1rem 1rem;

	--fc-border-color: var(--agenda-borde);
	--fc-page-bg-color: var(--agenda-fondo-celda);
	--fc-neutral-bg-color: var(--agenda-fondo-cabecera);
	--fc-today-bg-color: var(--agenda-fondo-hoy);
	--fc-event-bg-color: var(--agenda-primario);
	--fc-event-border-color: var(--agenda-primario);
	--fc-event-text-color: #fff;
	--fc-button-bg-color: var(--agenda-primario);
	--fc-button-border-color: var(--agenda-primario);
	--fc-button-hover-bg-color: var(--agenda-secundario);
	--fc-button-hover-border-color: var(--agenda-secundario);
	--fc-button-active-bg-color: var(--agenda-secundario);
	--fc-button-active-border-color: var(--agenda-secundario);
}

.agenda-eventos__calendario[hidden] {
	display: none;
}



/* The cell rules carry an element selector so they outrank FullCalendar's own,
   which are injected into the head after this stylesheet and would otherwise
   win the tie. */
.agenda-eventos__calendario th.fc-col-header-cell {
	background: var(--agenda-fondo-cabecera);
}

.agenda-eventos__calendario td.fc-daygrid-day {
	background: var(--agenda-fondo-celda);
}

/* The days spilling in from the neighbouring months step back a shade. */
.agenda-eventos__calendario td.fc-day-other {
	background: var(--agenda-fondo-otro-mes);
}

.agenda-eventos__calendario td.fc-day-today {
	background: var(--agenda-fondo-hoy);
}

.agenda-eventos__calendario .fc-toolbar-title {
	font-size: 1.35em;
	font-weight: 600;
}

/* Spanish writes "agosto de 2026" in lower case; only the first letter goes up.
   text-transform: capitalize would give "Agosto De 2026". */
.agenda-eventos__calendario .fc-toolbar-title::first-letter {
	text-transform: uppercase;
}

.agenda-eventos__calendario .fc-button {
	border-radius: 3px;
	font-size: 0.85em;
	padding: 0.4em 0.9em;
	text-transform: capitalize;
}

.agenda-eventos__calendario .fc-daygrid-day-number,
.agenda-eventos__calendario .fc-col-header-cell-cushion {
	color: var(--agenda-secundario);
	text-decoration: none;
}

.agenda-eventos__calendario .fc-col-header-cell-cushion {
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Floor for the height of a day cell, set from JavaScript out of the width the
   calendar ends up with. Without it the grid collapses to the height of its
   contents and the month reads as a set of strips. */
.agenda-eventos__calendario .fc-daygrid-day-frame {
	min-height: var( --agenda-alto-celda, 90px );
}

.agenda-eventos__calendario .fc-event {
	cursor: pointer;
	font-size: 0.9em;
	padding: 1px 3px;
}

/* Event names here are long ("Recitación del último hizb y Du'a An Nasri") and
   the default grid cuts them off mid-word. Wrapping costs a little height and
   saves the visitor from having to hover to read the title. */
.agenda-eventos__calendario .fc-daygrid-event,
.agenda-eventos__calendario .fc-event-title {
	overflow: visible;
	white-space: normal;
}

.agenda-eventos__calendario .fc-daygrid-event-harness {
	margin-bottom: 2px;
}

/* Compact calendar ------------------------------------------------------- */

/* On a phone the day cell is about fifty pixels wide, so the events become dots
   and the names are read in the list underneath. The class is set from
   JavaScript out of the width of the block, not of the window, so the same rules
   apply to the shortcode dropped into a narrow column. */

.agenda-eventos--compacto .agenda-eventos__calendario {
	font-size: 0.9em;
	padding: 0.6rem 0.6rem 0.7rem;
}

.agenda-eventos--compacto .fc-daygrid-day-frame {
	cursor: pointer;
}

.agenda-eventos--compacto .fc-daygrid-day-events {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	justify-content: center;
	margin-top: 2px;
	min-height: 0;
	padding: 0 2px;
}

.agenda-eventos--compacto .fc-daygrid-event-harness {
	margin-bottom: 0;
	width: auto;
}

.agenda-eventos--compacto .fc-daygrid-dot-event {
	background: none;
	padding: 0;
}

.agenda-eventos--compacto .fc-event-time,
.agenda-eventos--compacto .fc-event-title,
.agenda-eventos--compacto .fc-daygrid-day-bottom {
	display: none;
}

.agenda-eventos--compacto .fc-daygrid-event-dot {
	border-color: var(--agenda-primario);
	border-width: 4px;
	margin: 0;
}

.agenda-eventos--compacto .fc-daygrid-day-number {
	font-size: 0.95em;
	padding: 2px 4px;
}

.agenda-eventos--compacto .fc-col-header-cell-cushion {
	font-size: 0.75em;
	letter-spacing: 0;
	padding: 4px 2px;
}

.agenda-eventos--compacto .fc-toolbar {
	gap: 0.4rem;
}

.agenda-eventos--compacto .fc-toolbar-title {
	font-size: 1.05em;
}

.agenda-eventos--compacto .fc-button {
	font-size: 0.78em;
	padding: 0.35em 0.6em;
}

.agenda-eventos__detalle {
	background: var(--agenda-suave);
	border-inline-start: 3px solid var(--agenda-primario);
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-top: 1rem;
	padding: 0.85rem 1rem;
}

.agenda-eventos__detalle span {
	color: var(--agenda-texto-apoyo);
	font-size: 0.9em;
}

.agenda-eventos__detalle-exportar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.75rem;
	margin: 0.5rem 0 0;
}

.agenda-eventos__detalle-exportar a {
	font-size: 0.9em;
}

/* Calendar exports -------------------------------------------------------- */

/* Both controls are a `details` element: closed they are one quiet button, open
   they are ordinary links. That keeps the page usable with no JavaScript, and it
   keeps twelve entries from turning into forty eight visible buttons.

   Open, the panel floats over the page instead of pushing it: opening a menu at
   the top of the agenda must not shove the calendar and the whole list down, and
   in a list of twelve events it must not move the entry you were reading. */

.agenda-eventos__oculto {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

.agenda-eventos__cabecera {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 0.6rem;
}

.agenda-eventos__suscripcion-boton,
.agenda-evento__exportar-boton {
	border: 1px solid var(--agenda-borde);
	border-radius: 3px;
	color: var(--agenda-primario);
	cursor: pointer;
	display: inline-block;
	font-size: 0.82em;
	letter-spacing: 0.02em;
	list-style: none;
	padding: 0.35em 0.8em;
}

.agenda-eventos__suscripcion-boton::-webkit-details-marker,
.agenda-evento__exportar-boton::-webkit-details-marker {
	display: none;
}

.agenda-eventos__suscripcion-boton::after,
.agenda-evento__exportar-boton::after {
	content: "+";
	font-size: 1.1em;
	line-height: 1;
	margin-inline-start: 0.45em;
}

details[open] > .agenda-eventos__suscripcion-boton::after,
details[open] > .agenda-evento__exportar-boton::after {
	content: "\2212";
}

.agenda-eventos__suscripcion-boton:hover,
.agenda-evento__exportar-boton:hover,
.agenda-eventos__suscripcion-boton:focus-visible,
.agenda-evento__exportar-boton:focus-visible {
	background: var(--agenda-suave);
	border-color: var(--agenda-primario);
}

.agenda-eventos__suscripcion,
.agenda-evento__exportar {
	position: relative;
}

/* The two panels share the floating shell. Each one anchors to the side of the
   page its button lives on, so neither can push itself off screen. */
.agenda-eventos__suscripcion-cuerpo,
.agenda-evento__exportar-lista {
	background: #fff;
	border: 1px solid var(--agenda-borde);
	border-radius: 3px;
	box-shadow: 0 8px 22px rgba( 32, 60, 83, 0.16 );
	inset-block-start: calc(100% + 0.4rem);
	position: absolute;
	z-index: 30;
}

.agenda-eventos__suscripcion-cuerpo {
	inset-inline-end: 0;
	inline-size: min( 32rem, calc( 100vw - 2.5rem ) );
	padding: 0.9rem 1.1rem;
}

.agenda-eventos__suscripcion-texto {
	color: var(--agenda-texto-apoyo);
	font-size: 0.85em;
	margin: 0 0 0.7rem;
}

.agenda-eventos__suscripcion-lista {
	display: grid;
	gap: 0.7rem 1.6rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.agenda-eventos__suscripcion-pista {
	color: var(--agenda-texto-apoyo);
	display: block;
	font-size: 0.8em;
}

.agenda-evento__exportar {
	display: inline-block;
	margin-top: 0.7rem;
}

.agenda-evento__exportar-lista {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	inset-inline-start: 0;
	list-style: none;
	margin: 0;
	min-inline-size: 100%;
	padding: 0.4rem 0;
	white-space: nowrap;
}

.agenda-evento__exportar-lista a {
	display: block;
	font-size: 0.86em;
	padding: 0.4rem 1.1rem;
}

.agenda-evento__exportar-lista a:hover,
.agenda-evento__exportar-lista a:focus-visible {
	background: var(--agenda-suave);
}

/* Upcoming list ----------------------------------------------------------- */

.agenda-eventos__titulo {
	margin-bottom: 1.2rem;
}

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

.agenda-eventos__mes {
	border-bottom: 1px solid var(--agenda-borde);
	color: var(--agenda-texto-tenue);
	font-size: 0.8em;
	letter-spacing: 0.08em;
	margin: 2rem 0 1rem;
	padding-bottom: 0.35rem;
	text-transform: uppercase;
}

.agenda-eventos__items > .agenda-eventos__mes:first-child {
	margin-top: 0;
}

.agenda-evento {
	border-radius: 4px;
	display: flex;
	gap: 1.1rem;
	margin-bottom: 0.5rem;
	padding: 0.9rem 0.6rem;
	transition: background-color 0.4s ease;
}

.agenda-evento.is-destacado {
	background-color: rgba(29, 131, 215, 0.12);
}

.agenda-evento__fecha {
	align-items: center;
	background: var(--agenda-primario);
	border-radius: 4px;
	color: #fff;
	display: flex;
	flex: 0 0 3.6rem;
	flex-direction: column;
	height: 3.6rem;
	justify-content: center;
	line-height: 1.1;
}

.agenda-evento__dia {
	font-size: 1.5em;
	font-weight: 700;
}

.agenda-evento__mes {
	font-size: 0.72em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.agenda-evento__cuerpo {
	flex: 1 1 auto;

	/* A line of text stops being comfortable past roughly 80 characters, and the
	   column this sits in can be 1600px wide. */
	max-width: 78ch;
	min-width: 0;
}

.agenda-evento__titulo {
	font-size: 1.05em;
	line-height: 1.3;
	margin: 0 0 0.3rem;
}

.agenda-evento__cuando {
	color: var(--agenda-secundario);
	font-size: 0.92em;
	margin: 0 0 0.15rem;
}

.agenda-evento__cuando::first-letter {
	text-transform: uppercase;
}

.agenda-evento__lugar {
	color: var(--agenda-texto-tenue);
	font-size: 0.88em;
	margin: 0 0 0.35rem;
}

.agenda-evento__direccion {
	display: block;
}

.agenda-evento__descripcion {
	margin: 0.4rem 0 0;
}

.agenda-evento__enlace {
	margin: 0.4rem 0 0;
}

.agenda-eventos__vacio {
	background: var(--agenda-suave);
	border-inline-start: 3px solid var(--agenda-primario);
	padding: 1rem 1.2rem;
}

.agenda-eventos__pie {
	color: var(--agenda-texto-tenue);
	font-size: 0.82em;
	margin-top: 2rem;
}

@media screen and (max-width: 549px) {
	.agenda-evento {
		gap: 0.85rem;
		padding: 0.8rem 0;
	}

	.agenda-evento__fecha {
		flex-basis: 3.1rem;
		height: 3.1rem;
	}
}

@media print {
	.agenda-eventos__calendario,
	.agenda-eventos__cabecera,
	.agenda-evento__exportar,
	.agenda-eventos__pie {
		display: none;
	}
}