/**
 * Agenda: barra de herramientas del calendario (widget Event Calendar de Essential Addons / FullCalendar).
 *
 * Reemplaza el diseño por defecto, que dibujaba una fila de ~480px dentro de una columna de ~330px
 * (se desbordaba), partía el título en dos líneas, dejaba «Hoy» bajo las flechas y apilaba los
 * iconos sobre las etiquetas.
 *
 * Estructura (la genera FullCalendar): .fc-toolbar > chunk 1 (flechas + Hoy) | chunk 2 (título) | chunk 3 (vistas).
 * Distribución: fila 1 = título + navegación; fila 2 = vistas como control segmentado de ancho completo.
 * Los selectores llevan `body` y `!important` porque los estilos de la página (Elementor, por id de widget)
 * y los del plugin usan alta especificidad e `!important`.
 */

.eael-event-calendar-wrapper {
	container-type: inline-size;
	container-name: agenda;
}

body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar {
	--ag-ink: var(--e-global-color-ccad4b4, #11617f); /* azul de marca */
	--ag-accent: #0d726e; /* aqua de marca: 5.9:1 con texto blanco */
	--ag-track: #eef5f5;
	--ag-line: #c9dcdc;

	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"title nav"
		"views views";
	align-items: center;
	justify-content: stretch;
	gap: 12px 8px;
	width: 100%;
	margin: 0 0 16px !important;
}

body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar > .fc-toolbar-chunk {
	display: flex;
	width: auto;
	margin: 0 !important;
	justify-content: flex-start;
	text-align: left;
}

body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) {
	grid-area: nav;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
}

body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar > .fc-toolbar-chunk:nth-child(2) {
	grid-area: title;
	min-width: 0;
}

body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar > .fc-toolbar-chunk:nth-child(3) {
	grid-area: views;
	width: 100%;
}

/* Cancela el margen que FullCalendar añade entre hijos. */
body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar > * > :not(:first-child) {
	margin-left: 0 !important;
}

/* Título: una sola línea, alineado a la izquierda, con mayúscula inicial («Octubre de 2026»). */
body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-toolbar-title {
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	font-size: clamp(1.0625rem, 5.6cqi, 1.5rem) !important;
	line-height: 1.2 !important;
	letter-spacing: 0;
	text-align: left !important;
	text-transform: none !important;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ag-ink) !important;
}

body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-toolbar-title::first-letter {
	text-transform: uppercase;
}

/* Navegación: flechas circulares y «Hoy» en píldora, todo a 36px de alto. */
body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-button-group {
	display: flex;
	gap: 6px;
}

body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-prev-button,
body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-next-button,
body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-today-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 36px !important;
	min-width: 36px;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--ag-line) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--ag-ink) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-transform: none !important;
	box-shadow: none !important;
}

body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-today-button {
	padding: 0 14px !important;
}

body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-prev-button:hover,
body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-next-button:hover,
body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-today-button:hover:not(:disabled) {
	background: var(--ag-track) !important;
}

body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-today-button:disabled {
	opacity: 0.55;
	cursor: default;
}

/* Vistas (Día / Semana / Mes / Agenda): control segmentado de ancho completo. */
body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar > .fc-toolbar-chunk:nth-child(3) .fc-button-group {
	box-sizing: border-box;
	width: 100%;
	padding: 4px;
	gap: 4px;
	border-radius: 12px;
	background: var(--ag-track);
}

body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-button-group > .fc-button:not(.fc-prev-button):not(.fc-next-button) {
	flex: 1 1 0;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	height: auto !important;
	min-height: 40px;
	margin: 0 !important;
	padding: 0 6px !important;
	border: 0 !important;
	border-radius: 9px !important;
	background: transparent !important;
	color: var(--ag-ink) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	white-space: nowrap;
	box-shadow: none !important;
}

body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-button-group > .fc-button:not(.fc-prev-button):not(.fc-next-button):hover {
	background: rgba(255, 255, 255, 0.75) !important;
}

body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-button-group > .fc-button.fc-button-active:not(.fc-prev-button):not(.fc-next-button) {
	background: var(--ag-accent) !important;
	color: #fff !important;
	box-shadow: 0 1px 3px rgba(13, 114, 110, 0.35) !important;
}

/* Los iconos solo cuando hay sitio; si no, empujan la etiqueta fuera del botón. */
body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-button-group > .fc-button::before {
	display: none !important;
}

@container agenda (min-width: 420px) {
	body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-button-group > .fc-button:not(.fc-prev-button):not(.fc-next-button)::before {
		position: static !important;
		display: inline-block !important;
		margin: 0 !important;
		padding: 0 !important;
		font-size: 12px !important;
	}
}

/* Columnas muy estrechas: el título ocupa su propia fila y la navegación va debajo. */
@container agenda (max-width: 300px) {
	body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar {
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"nav"
			"views";
	}

	body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) {
		justify-content: flex-start;
	}
}

/* Foco visible para teclado. */
body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-button:focus-visible {
	outline: 2px solid var(--ag-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	body .eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-button {
		transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	}
}