/* ============================================================
   Agenda Cerro de las Cabezas — Frontend Styles
   Paleta corporativa: burdeos #87212f · amarillo #fabd31 · marrón #796767
   Accesibilidad: WCAG 2.1 AAA (≥7:1 texto normal, ≥4.5:1 texto grande)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── Variables de diseño ── */
:root {
	--ag-font      : 'Plus Jakarta Sans', system-ui, sans-serif;

	/* Burdeos corporativo — contraste sobre blanco: 9.2:1 ✓ AAA */
	--ag-primary   : #87212f;
	--ag-primary-dk: #6b1a25;      /* hover/activo — 12.1:1 ✓ AAA          */
	--ag-primary-lt: #fdf0f1;      /* fondo tenue burdeos                   */
	--ag-primary-md: #eddcde;      /* borde suave burdeos                   */

	/* Amarillo corporativo — SOLO como fondo con texto oscuro              */
	/* #fabd31 sobre blanco: 1.7:1 — no usar como texto                    */
	/* #3a1a00 sobre #fabd31: 9.3:1 ✓ AAA                                  */
	--ag-amber     : #fabd31;
	--ag-amber-dk  : #d9a100;      /* borde/acento amarillo                 */
	--ag-amber-lt  : #fffbec;      /* fondo tenue amarillo                  */
	--ag-amber-text: #3a1a00;      /* texto sobre amarillo — 9.3:1 ✓ AAA   */

	/* Marrón corporativo — solo decorativo (bordes, dots)                 */
	/* #796767 sobre blanco: 3.1:1 — NO usar como texto                    */
	/* #5c4f4f (oscurecido) sobre blanco: 7.1:1 ✓ AAA                     */
	--ag-brown     : #796767;
	--ag-brown-text: #5c4f4f;      /* versión AAA para texto                */

	/* Día de hoy: fondo amarillo pálido + número en burdeos */
	--ag-today-bg  : #fffbec;
	--ag-today-bdr : #d9a100;

	/* Textos — todos pasan AAA sobre blanco */
	--ag-text      : #1c0509;      /* 18.6:1 ✓ AAA — texto principal        */
	--ag-text-mid  : #5c2630;      /* 9.8:1  ✓ AAA — texto secundario       */
	--ag-text-soft : #7a4452;      /* 7.2:1  ✓ AAA — texto suave            */

	--ag-border    : #eddcde;
	--ag-bg        : #ffffff;
	--ag-bg-panel  : #fdf8f8;

	--ag-radius    : 14px;
	--ag-radius-sm : 8px;
	--ag-shadow    : 0 2px 20px rgba(135,33,47,.08), 0 1px 4px rgba(135,33,47,.06);
	--ag-shadow-lg : 0 8px 40px rgba(135,33,47,.12);

	--ag-transition: .18s cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper principal — calendario arriba, panel debajo ── */
.agenda-wrap {
	display        : flex !important;
	flex-direction : column !important;
	gap            : 20px;
	max-width      : 1120px;
	margin         : 0 auto;
	font-family    : var(--ag-font);
	color          : var(--ag-text);
	line-height    : 1.5;
}

/* ════════════════════════════════════════════════
   BLOQUE CALENDARIO
   ════════════════════════════════════════════════ */
.agenda-calendar {
	background    : var(--ag-bg);
	border-radius : var(--ag-radius);
	box-shadow    : var(--ag-shadow);
	border        : 1px solid var(--ag-border);
	padding       : 28px 28px 20px;
	overflow      : hidden;
}

/* ── Cabecera con mes y navegación ── */
.agenda-cal-header {
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	margin-bottom   : 24px;
	gap             : 12px;
}

.agenda-header-center {
	display         : flex;
	flex-direction  : column;
	align-items     : center;
	gap             : 6px;
}

.agenda-month-title {
	font-size     : 1.35rem;
	font-weight   : 800;
	color         : var(--ag-primary);
	margin        : 0;
	letter-spacing: -.02em;
	text-transform: capitalize;
}

/* Botón "Hoy" — blanco con borde burdeos, texto burdeos (9.2:1 ✓ AAA) */
.agenda-today-btn {
	font-family   : var(--ag-font);
	font-size     : .72rem;
	font-weight   : 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color         : var(--ag-primary);
	background    : #ffffff;
	border        : 1.5px solid var(--ag-primary);
	border-radius : 20px;
	padding       : 3px 12px;
	cursor        : pointer;
	transition    : var(--ag-transition);
}

.agenda-today-btn:hover {
	background: var(--ag-primary);
	color     : #ffffff;
}

/* ── Botones de navegación — blanco con borde burdeos (9.2:1 ✓ AAA) */
.agenda-nav-btn {
	display         : flex;
	align-items     : center;
	justify-content : center;
	width           : 40px;
	height          : 40px;
	border-radius   : var(--ag-radius-sm);
	border          : 1.5px solid var(--ag-primary);
	background      : #ffffff;
	cursor          : pointer;
	color           : var(--ag-primary);
	transition      : var(--ag-transition);
	flex-shrink     : 0;
}

/* Forzar tamaño del SVG de las flechas */
.agenda-nav-btn svg {
	width    : 28px;
	height   : 28px;
	flex-shrink: 0;
}

.agenda-nav-btn:hover {
	background   : var(--ag-primary);
	border-color : var(--ag-primary);
	color        : #ffffff;
	box-shadow   : 0 4px 12px rgba(135,33,47,.25);
	transform    : translateY(-1px);
}

.agenda-nav-btn:active { transform: translateY(0); }

/* ── Nombres de los días ── */
.agenda-day-names {
	display               : grid;
	grid-template-columns : repeat(7,1fr);
	gap                   : 4px;
	margin-bottom         : 6px;
}

.agenda-day-names span {
	text-align    : center;
	font-size     : .68rem;
	font-weight   : 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color         : var(--ag-text-soft);  /* 7.2:1 ✓ AAA */
	padding       : 6px 0;
}

/* ── Grid de días ── */
.agenda-days {
	display               : grid;
	grid-template-columns : repeat(7,1fr);
	gap                   : 4px;
}

/* ── Celda de día ── */
.agenda-day-cell {
	min-height   : 72px;
	border-radius: var(--ag-radius-sm);
	padding      : 7px 6px 6px;
	border       : 1.5px solid transparent;
	background   : #fdf8f8;
	display      : flex;
	flex-direction: column;
	gap          : 3px;
	cursor       : default;
	transition   : var(--ag-transition);
	position     : relative;
}

.agenda-day-empty {
	background: transparent;
	min-height : 72px;
}

.agenda-day-cell.agenda-weekend {
	background: #faf4f4;
}

.agenda-day-cell.agenda-has-events {
	cursor: pointer;
}

.agenda-day-cell.agenda-has-events:hover {
	background  : var(--ag-primary-lt);
	border-color: var(--ag-primary-md);
	box-shadow  : 0 2px 8px rgba(135,33,47,.12);
}

/* Día de hoy: fondo amarillo pálido, número en burdeos (9.2:1 ✓ AAA) */
.agenda-day-cell.agenda-today {
	background  : var(--ag-today-bg);
	border-color: var(--ag-today-bdr);
}

.agenda-day-cell.agenda-today .agenda-day-num {
	color      : var(--ag-primary);   /* 9.2:1 ✓ AAA */
	font-weight: 800;
}

/* Día seleccionado: fondo burdeos, texto blanco (9.2:1 ✓ AAA) */
.agenda-day-cell.agenda-selected {
	background  : var(--ag-primary) !important;
	border-color: var(--ag-primary) !important;
	box-shadow  : 0 4px 16px rgba(135,33,47,.3);
}

.agenda-day-cell.agenda-selected .agenda-day-num,
.agenda-day-cell.agenda-selected .agenda-day-label {
	color: rgba(255,255,255,.95) !important;
}

.agenda-day-cell.agenda-selected .agenda-dot {
	box-shadow: 0 0 0 1.5px rgba(255,255,255,.6);
}

/* ── Número del día ── */
.agenda-day-num {
	font-size  : .82rem;
	font-weight: 700;
	color      : var(--ag-text-mid);   /* 9.8:1 ✓ AAA */
	line-height: 1;
	display    : block;
}

/* ── Etiquetas mini en celdas con ≤2 eventos ── */
.agenda-day-label {
	font-size    : .6rem;
	font-weight  : 700;
	color        : #fff;
	padding      : 1px 5px;
	border-radius: 3px;
	white-space  : nowrap;
	overflow     : hidden;
	text-overflow: ellipsis;
	max-width    : 100%;
	letter-spacing: .01em;
}

/* ── Dots de eventos ── */
.agenda-event-dots {
	display    : flex;
	flex-wrap  : wrap;
	gap        : 3px;
	margin-top : auto;
	padding-top: 4px;
}

.agenda-dot {
	width        : 7px;
	height       : 7px;
	border-radius: 50%;
	flex-shrink  : 0;
	transition   : transform var(--ag-transition);
}

.agenda-day-cell.agenda-has-events:hover .agenda-dot {
	transform: scale(1.2);
}

/* Dot de evento destacado: pulso en amarillo */
.agenda-dot-star {
	animation: agDotPulse 2s ease-in-out infinite;
}

@keyframes agDotPulse {
	0%,100% { box-shadow: 0 0 0 0 rgba(250,189,49,.55); }
	50%      { box-shadow: 0 0 0 5px rgba(250,189,49,0); }
}

.agenda-dot-overflow {
	font-size  : .6rem;
	font-weight: 800;
	color      : var(--ag-text-soft);  /* 7.2:1 ✓ AAA */
	line-height: 7px;
}

/* ── Leyenda ── */
.agenda-legend {
	margin-top : 18px;
	padding-top: 16px;
	border-top : 1.5px solid var(--ag-border);
	display    : flex;
	flex-wrap  : wrap;
	gap        : 6px 14px;
	align-items: center;
}

.agenda-legend-label {
	font-size     : .68rem;
	font-weight   : 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color         : var(--ag-text-soft);  /* 7.2:1 ✓ AAA */
	margin-right  : 4px;
}

.agenda-legend-item {
	display     : flex;
	align-items : center;
	gap         : 6px;
	font-size   : .78rem;
	font-weight : 600;
	color       : var(--ag-text-mid);   /* 9.8:1 ✓ AAA */
	background  : none;
	border      : 1px solid var(--ag-border);
	border-radius: 20px;
	padding     : 3px 10px 3px 6px;
	cursor      : pointer;
	transition  : var(--ag-transition);
}

.agenda-legend-item:hover {
	background  : var(--ag-primary-lt);
	border-color: var(--ag-primary-md);
	color       : var(--ag-primary);
}

.agenda-legend-dot {
	width        : 9px;
	height       : 9px;
	border-radius: 50%;
	flex-shrink  : 0;
}

/* ── Loading ── */
.agenda-loading-wrap {
	grid-column    : 1/-1;
	display        : flex;
	justify-content: center;
	align-items    : center;
	padding        : 60px 0 40px;
}

.agenda-spinner {
	width        : 36px;
	height       : 36px;
	border       : 3px solid var(--ag-primary-md);
	border-top   : 3px solid var(--ag-primary);
	border-radius: 50%;
	animation    : agSpin .7s linear infinite;
}

@keyframes agSpin { to { transform: rotate(360deg); } }

.agenda-error {
	grid-column: 1/-1;
	text-align : center;
	color      : var(--ag-primary);   /* 9.2:1 ✓ AAA */
	padding    : 30px;
	font-size  : .9rem;
}

/* ════════════════════════════════════════════════
   PANEL DE EVENTOS — debajo del calendario, compacto
   ════════════════════════════════════════════════ */
.agenda-panel {
	background   : var(--ag-bg-panel);
	border-radius: var(--ag-radius);
	box-shadow   : var(--ag-shadow);
	border       : 1px solid var(--ag-border);
	overflow     : hidden;
}

.agenda-panel-inner {
	padding      : 16px 20px;
	scrollbar-width: thin;
	scrollbar-color: var(--ag-primary-md) transparent;
}

.agenda-panel-inner::-webkit-scrollbar { width: 5px; }
.agenda-panel-inner::-webkit-scrollbar-thumb {
	background: var(--ag-primary-md);
	border-radius: 10px;
}

/* ── Placeholder compacto ── */
.agenda-panel-placeholder {
	display        : flex;
	flex-direction : row;
	align-items    : center;
	justify-content: flex-start;
	gap            : 14px;
	padding        : 16px 4px;
	text-align     : left;
}

.agenda-placeholder-icon {
	width        : 44px;
	height       : 44px;
	border-radius: 50%;
	background   : var(--ag-primary-lt);
	border       : 2px solid var(--ag-primary-md);
	display      : flex;
	align-items  : center;
	justify-content: center;
	color        : var(--ag-primary);
	flex-shrink  : 0;
}

.agenda-placeholder-title {
	font-size  : .9rem;
	font-weight: 700;
	color      : var(--ag-primary);
	margin     : 0 0 2px;
}

.agenda-placeholder-sub {
	font-size: .78rem;
	color    : var(--ag-text-soft);
	margin   : 0;
	max-width: none;
}

/* ── Lista de eventos — 1 columna ── */
.agenda-events-list {
	display       : flex;
	flex-direction: column;
	gap           : 10px;
}

/* Cabecera día seleccionado: fondo burdeos sólido — blanco 9.2:1 ✓ AAA */
.agenda-panel-header {
	display        : flex;
	align-items    : flex-start;
	gap            : 12px;
	padding        : 16px 16px 14px;
	background     : var(--ag-primary);
	border-radius  : var(--ag-radius-sm);
	margin-bottom  : 14px;
	position       : relative;
}

/* Cabecera vista mensual: burdeos oscuro */
.agenda-panel-header--month {
	background: var(--ag-primary-dk);
}

.agenda-panel-date-icon {
	font-size  : 1.4rem;
	line-height: 1;
	margin-top : 2px;
	flex-shrink: 0;
}

.agenda-panel-date-label {
	display    : block;
	font-size  : .65rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color      : rgba(255,255,255,.75);  /* sobre burdeos ✓ */
	margin-bottom: 3px;
}

.agenda-panel-date-title {
	margin   : 0;
	font-size: .95rem;
	font-weight: 800;
	color    : #ffffff;                   /* 9.2:1 ✓ AAA */
	line-height: 1.2;
	text-transform: capitalize;
}

.agenda-panel-close {
	position  : absolute;
	top       : 10px;
	right     : 10px;
	background: rgba(255,255,255,.18);
	border    : none;
	border-radius: 6px;
	width     : 28px;
	height    : 28px;
	display   : flex;
	align-items: center;
	justify-content: center;
	color     : #ffffff;
	cursor    : pointer;
	transition: var(--ag-transition);
}

.agenda-panel-close:hover {
	background: rgba(255,255,255,.30);
}

/* ── Tarjeta de evento ── */
.agenda-event-card {
	background   : var(--ag-bg);
	border-radius: var(--ag-radius-sm);
	border       : 1px solid var(--ag-border);
	overflow     : hidden;
	display      : flex;
	transition   : var(--ag-transition);
	position     : relative;
}

.agenda-event-card:hover {
	border-color: var(--ag-primary-md);
	box-shadow  : 0 4px 20px rgba(135,33,47,.12);
	transform   : translateY(-1px);
}

/* Evento destacado: fondo amarillo pálido */
.agenda-event-card--destacado {
	border-color: #f0d070;
	background  : #fffdf5;
}

.agenda-event-card--destacado:hover {
	border-color: var(--ag-amber-dk);
	box-shadow  : 0 4px 20px rgba(217,161,0,.18);
}

.agenda-card-accent {
	width     : 4px;
	background: var(--ev-color, var(--ag-primary));
	flex-shrink: 0;
	transition: width var(--ag-transition);
}

.agenda-event-card:hover .agenda-card-accent { width: 6px; }

.agenda-card-body {
	padding: 13px 14px 14px;
	flex   : 1;
	min-width: 0;
}

.agenda-card-top {
	display        : flex;
	align-items    : flex-start;
	justify-content: space-between;
	gap            : 8px;
	margin-bottom  : 8px;
}

.agenda-card-title {
	font-size  : .9rem;
	font-weight: 800;
	color      : var(--ag-text);       /* 18.6:1 ✓ AAA */
	margin     : 0;
	line-height: 1.3;
	flex       : 1;
	min-width  : 0;
}

.agenda-card-star {
	font-size: .8rem;
	margin-right: 3px;
}

/* Badge de categoría — color por categoría, texto blanco */
.agenda-cat-badge {
	font-size    : .62rem;
	font-weight  : 700;
	letter-spacing:.05em;
	text-transform: uppercase;
	color        : #fff;
	background   : var(--cat-color, var(--ag-primary));
	padding      : 3px 8px;
	border-radius: 20px;
	white-space  : nowrap;
	flex-shrink  : 0;
}

.agenda-card-meta {
	display  : flex;
	flex-wrap: wrap;
	gap      : 5px;
	margin-bottom: 8px;
}

.agenda-meta-chip {
	display     : inline-flex;
	align-items : center;
	gap         : 4px;
	font-size   : .73rem;
	color       : var(--ag-text-mid);  /* 9.8:1 ✓ AAA */
	background  : var(--ag-bg-panel);
	border      : 1px solid var(--ag-border);
	border-radius: 20px;
	padding     : 3px 9px 3px 7px;
	white-space : nowrap;
}

.agenda-meta-chip svg {
	color      : var(--ag-text-soft);  /* 7.2:1 ✓ AAA */
	flex-shrink: 0;
}

.agenda-card-desc {
	font-size  : .78rem;
	color      : var(--ag-text-mid);   /* 9.8:1 ✓ AAA */
	line-height: 1.6;
	margin     : 0 0 10px;
}

.agenda-card-link {
	display    : inline-flex;
	align-items: center;
	gap        : 4px;
	font-size  : .73rem;
	font-weight: 700;
	color      : var(--ag-primary);    /* 9.2:1 ✓ AAA */
	text-decoration: none;
	border-bottom: 1.5px solid transparent;
	transition : var(--ag-transition);
}

.agenda-card-link:hover {
	color       : var(--ag-primary-dk);
	border-color: var(--ag-primary-dk);
}

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */
@media (max-width: 960px) {
	/* layout ya es 1 columna, nada que cambiar */
}

@media (max-width: 600px) {
	.agenda-calendar,
	.agenda-panel { border-radius: 10px; }

	.agenda-calendar {
		padding: 16px 14px 14px;
	}

	.agenda-day-cell {
		min-height: 52px;
		padding   : 5px 4px 4px;
	}

	.agenda-day-label { display: none; }

	.agenda-day-num { font-size: .75rem; }

	.agenda-dot {
		width : 6px;
		height: 6px;
	}

	.agenda-month-title { font-size: 1.1rem; }
}

@media (max-width: 400px) {
	.agenda-day-cell {
		min-height: 42px;
		padding   : 4px 3px;
		border-radius: 5px;
	}
	.agenda-day-names span { font-size: .6rem; }
}