/**
 * Estética personalizada de la AGENDA — listado [agenda_listado] + calendario.
 *
 * Hoja única que se carga SOLO en las páginas que usan los shortcodes de agenda.
 * Inspirada en el patrón clásico de The Events Calendar de la web antigua:
 * bloque de fecha (día grande + mes) a la izquierda, y a la derecha hora,
 * título del evento y lugar.
 *
 * Pensada para tocarse a mano (no se maqueta con Bricks). Todas las clases siguen
 * BEM con prefijo `kt-agenda`. Usa la variable de color de plantilla --pi-color
 * (definida por el tema/edición) con un fallback.
 *
 * @package KtFuncionsPianoiturbi
 */

.kt-agenda {
	--kt-agenda-color: #4E4A4A;
	--kt-agenda-texto: #222;
	--kt-agenda-tenue: #777;
	--kt-agenda-linea: #e5e5e5;

	max-width: 860px;
	margin: 0 auto;
	color: var( --kt-agenda-texto );
	/* Margen al saltar al ancla #kt-agenda tras paginar (alto del menú fijo). */
	scroll-margin-top: 110px;
}

/* ----------------------------------------------------------------------------
 * Secciones y títulos
 * ------------------------------------------------------------------------- */
.kt-agenda__seccion {
	margin-bottom: 2.5rem;
}

.kt-agenda__seccion--pasados {
	margin-top: 3rem;
}

.kt-agenda__titulo--pasados {
	font-size: 1.4rem;
	font-weight: 600;
	margin: 0 0 1.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var( --kt-agenda-color );
}

.kt-agenda__vacio {
	font-size: 1.05rem;
	color: var( --kt-agenda-tenue );
	font-style: italic;
	padding: 1.5rem 0;
	margin: 0;
}

/* ----------------------------------------------------------------------------
 * Lista de eventos
 * ------------------------------------------------------------------------- */
.kt-agenda__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kt-agenda__evento {
	display: flex;
	align-items: stretch;
	gap: 1.25rem;
	padding: 10px;
	border-bottom: 1px solid var( --kt-agenda-linea );
	position: relative;
}

.kt-agenda__evento:hover {
	background-color: #f9f7f7;
}

/* El enlace envuelve fecha + cuerpo y ocupa toda la fila. */
.kt-agenda__evento-enlace {
	display: flex;
	align-items: stretch;
	gap: 1.25rem;
	flex: 1 1 auto;
	text-decoration: none;
	color: inherit;
}

.kt-agenda__evento-enlace:hover .kt-agenda__titulo-evento {
	color: var( --kt-agenda-color );
}

/* ----------------------------------------------------------------------------
 * Bloque de fecha (día grande + mes + año)
 * ------------------------------------------------------------------------- */
.kt-agenda__fecha {
	flex: 0 0 70px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.05;
	padding: 0.4rem 0;
	border-right: 1px solid var( --kt-agenda-linea );
}

.kt-agenda__dia {
	font-size: 2.4rem;
	font-weight: 700;
	color: #0d0d0d;
}

.kt-agenda__mes {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.kt-agenda__anio {
	font-size: 10px;
	color: #000;
}

/* ----------------------------------------------------------------------------
 * Cuerpo del evento (hora + título + lugar + dirección)
 * ------------------------------------------------------------------------- */
.kt-agenda__cuerpo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0px;
	line-height: 1.3em;
	color: #4E4A4A;
}

.kt-agenda__hora {
	font-size: 13px;
	font-weight: 500;
	color: #0d0d0d;
}

.kt-agenda__titulo-evento {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	transition: color 0.15s ease;
	color: #000;
}

/* Resto de spans dentro del cuerpo del evento (lugar, dirección…). */
.kt-agenda__lugar {
	font-size: 12px;
	color: #000;
}

.kt-agenda__direccion {
	font-size: 12px;
	color: #000;
}

/* ----------------------------------------------------------------------------
 * Botón de entradas (fuera del enlace principal)
 * ------------------------------------------------------------------------- */
.kt-agenda__entradas {
	align-self: center;
	flex: 0 0 auto;
	display: inline-block;
	border: 3px solid var( --negre, #000 );
	padding: 12px 24px;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1em;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	color: var( --negre, #000 );
	background-color: var( --blanc, #fff );
	transition: color 0.15s ease, background-color 0.15s ease;
}

.kt-agenda__entradas:hover {
	color: var( --blanc, #fff );
	background-color: var( --negre, #000 );
}

/* ----------------------------------------------------------------------------
 * Eventos pasados (atenuados)
 * ------------------------------------------------------------------------- */
.kt-agenda__evento--pasado {
	opacity: 0.7;
}

.kt-agenda__evento--pasado .kt-agenda__dia,
.kt-agenda__evento--pasado .kt-agenda__hora {
	color: var( --kt-agenda-tenue );
}

/* ----------------------------------------------------------------------------
 * Paginación del listado (6 eventos por página)
 * ------------------------------------------------------------------------- */
.kt-agenda__paginacion {
	margin-top: 2.5rem;
}

.kt-agenda__paginacion-lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Números y flechas: texto plano (sin cajas), estilo del paginador de Noticias. */
.kt-agenda__pag-enlace,
.kt-agenda__pag-actual {
	display: inline-block;
	padding: 0;
	border: 0;
	background: none;
	text-decoration: none;
	font-size: 14px;
	line-height: 1;
	color: #999;
}

.kt-agenda__pag-enlace {
	color: #000;
}

.kt-agenda__pag-enlace:hover {
	color: #0d0d0d;
}

/* Página activa: negro y en negrita. */
.kt-agenda__pag-actual {
	color: #0d0d0d;
	font-weight: 700;
}

/* Flechas anterior/siguiente. */
.kt-agenda__pag-flecha {
	font-size: 1.15rem;
	color: #0d0d0d;
}

/* ----------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */
@media ( max-width: 600px ) {
	.kt-agenda__evento,
	.kt-agenda__evento-enlace {
		flex-direction: column;
		gap: 0.5rem;
	}

	.kt-agenda__fecha {
		flex-direction: row;
		gap: 0.4rem;
		justify-content: flex-start;
		border-right: 0;
		border-bottom: 1px solid var( --kt-agenda-linea );
		padding-bottom: 0.5rem;
	}

	.kt-agenda__dia {
		font-size: 1.4rem;
	}

	.kt-agenda__entradas {
		align-self: flex-start;
	}
}

/* ============================================================================
 * CALENDARIO (modo [agenda_calendario]) — overrides de estética sobre la
 * librería Event Calendar. Aquí afinamos colores/tipografía del calendario para
 * que combine con el listado. (Las reglas estructurales viven en calendar.css.)
 * ========================================================================= */
.kt-agenda-calendario {
	margin: 0 auto;
}

/* Altura FIJA del calendario (atributos altura / altura_movil del shortcode →
 * variables CSS). El calendario rellena este contenedor (JS height:100%). Reserva
 * el espacio (evita el salto al paginar el listado) y permite alto responsive. */
.kt-agenda-calendario--altura-fija {
	height: var( --kt-cal-altura, 560px );
}

@media ( max-width: 767px ) {
	.kt-agenda-calendario--altura-fija {
		height: var( --kt-cal-altura-movil, 320px );
	}
}

/* La librería pone min-height:5em por celda del mes → en alturas pequeñas (móvil)
 * forzaría barra de scroll interna. Lo anulamos: con flex, las filas igualmente
 * rellenan la altura fijada, pero pueden comprimirse sin scroll. */
.kt-agenda-calendario .ec-day-grid .ec-body .ec-day {
	min-height: 0;
}

/* La librería declara estas variables SOBRE el propio elemento .ec, así que para
 * sobrescribirlas hay que apuntar a `.kt-agenda-calendario .ec` (más específico
 * que el `.ec` de la librería). */
.kt-agenda-calendario .ec {
	--ec-accent-color: var( --pi-color, #b8860b );
	/* Color de fondo de los eventos en el calendario (antes azul de la librería). */
	--ec-event-bg-color: #c0c0c0;
}

/* Título de la barra superior (nombre del mes). */
.kt-agenda-calendario .ec-title {
	font-size: 21px;
}

/* Título del evento dentro del calendario. */
.kt-agenda-calendario .ec-event-title {
	font-size: 12px;
	color: #000;
}

/* Hora del evento dentro del calendario. */
.kt-agenda-calendario .ec-day-grid .ec-event-time,
.kt-agenda-calendario .ec-timeline .ec-event-time {
	font-size: 10px;
	color: #000;
}

/* Cuerpo del evento (un poco de aire interior). */
.kt-agenda-calendario .ec-day-grid .ec-event-body,
.kt-agenda-calendario .ec-all-day .ec-event-body,
.kt-agenda-calendario .ec-timeline .ec-event-body {
	padding: 1px;
}