/* ============================================================
   Academia — Eventos en vivo (bloque 12 de functions.php)
   Sección [academia_eventos], tile de calendario, línea "Fecha
   del evento" y franja en la página del curso-evento.
   Paleta corporativa (referencia): navy #13303F, azul #5092B4,
   rojo #C40002 / #E60203, gris #5C7180, borde #E8EDF1,
   fondos #EAF2F6 / #F5F8FC. Tipografía: Poppins (ya global).
   ============================================================ */

:root {
	--acad-navy: #13303f;
	--acad-azul: #5092b4;
	--acad-rojo: #c40002;
	--acad-rojo-vivo: #e60203;
	--acad-gris: #5c7180;
	--acad-borde: #e8edf1;
	--acad-fondo: #eaf2f6;
	--acad-fondo2: #f5f8fc;
}

/* --- Sección y encabezado (patrón kicker + título + subtítulo del sitio) --- */
.acad-eventos {
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 20px 72px;
	font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.acad-eventos-head {
	max-width: 640px;
	margin: 0 0 30px;
}

.acad-eventos-head .acad-kicker {
	display: block;
	color: var(--acad-azul);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.acad-eventos-head .acad-titulo {
	color: var(--acad-navy);
	font-family: var(--acad-font);
	font-size: var(--acad-title-size);
	font-weight: var(--acad-title-weight);
	line-height: 1.25;
	margin: 0 0 12px;
}

.acad-eventos-head .acad-sub {
	color: var(--acad-gris);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

/* --- Grid y tarjetas --- */
.academia-eventos-grid {
	margin-top: 6px;
}

.academia-eventos-grid .tutor-card {
	position: relative; /* ancla del tile de calendario */
	border: 1px solid var(--acad-borde);
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.academia-eventos-grid .tutor-card:hover {
	box-shadow: 0 14px 30px rgba(19, 48, 63, 0.14);
	transform: translateY(-3px);
}

/* --- Tile de calendario sobre la miniatura --- */
.academia-evento-tile {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 58px;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 6px 16px rgba(19, 48, 63, 0.22);
	pointer-events: none;
	font-family: "Poppins", sans-serif;
}

.academia-evento-tile .mes {
	display: block;
	width: 100%;
	background: var(--acad-rojo-vivo);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-align: center;
	padding: 3px 8px 2px;
}

.academia-evento-tile .dia {
	color: var(--acad-navy);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
	padding-top: 2px;
}

.academia-evento-tile .anio {
	color: var(--acad-gris);
	font-size: 10.5px;
	font-weight: 600;
	padding-bottom: 4px;
}

.academia-evento-tile.es-pasado .mes {
	background: #7a8892;
}

.academia-evento-tile.es-pasado .dia {
	color: #7a8892;
}

/* --- Línea "Fecha del evento" bajo el título de la tarjeta --- */
.academia-evento-chip {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 10px;
	align-items: center;
	align-self: stretch;
	margin: 10px 0 2px;
	padding: 9px 12px;
	background: var(--acad-fondo2);
	border-left: 3px solid var(--acad-rojo-vivo);
	border-radius: 0 8px 8px 0;
	line-height: 1.25;
}

.academia-evento-chip svg {
	grid-row: 1 / span 2;
	color: var(--acad-rojo-vivo);
}

.academia-evento-chip .etiqueta {
	grid-column: 2;
	color: var(--acad-gris);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.academia-evento-chip .fecha {
	grid-column: 2;
	color: var(--acad-navy);
	font-size: 14px;
	font-weight: 700;
}

.academia-evento-chip.es-pasado {
	border-left-color: #7a8892;
	background: #f1f3f4;
}

.academia-evento-chip.es-pasado svg {
	color: #7a8892;
}

.academia-evento-chip.es-pasado .fecha {
	color: #7a8892;
}

/* --- Franja de fecha en la página del curso-evento --- */
.academia-evento-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 1200px;
	margin: 18px auto 6px;
	padding: 13px 18px;
	background: linear-gradient(120deg, #0d4c6b, var(--acad-navy));
	color: #fff;
	border-radius: 8px;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	line-height: 1.3;
}

.academia-evento-banner svg {
	flex: 0 0 auto;
	color: #f6b8ba;
}

.academia-evento-banner strong {
	color: #fff;
}

.academia-evento-banner.es-pasado {
	background: var(--acad-gris);
}

/* --- Estado vacío --- */
.academia-eventos-vacio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 56px 20px;
	text-align: center;
	color: var(--acad-gris);
	background: var(--acad-fondo2);
	border: 1px dashed var(--acad-borde);
	border-radius: 12px;
	font-size: 16px;
}

.academia-eventos-vacio svg {
	color: var(--acad-azul);
}

.academia-eventos-vacio p {
	margin: 0;
}

/* --- Responsivo --- */
@media (max-width: 767px) {
	.acad-eventos {
		padding: 20px 16px 48px;
	}

	.acad-eventos-head {
		margin-bottom: 22px;
	}

	.academia-evento-tile {
		top: 10px;
		left: 10px;
		min-width: 52px;
	}

	.academia-evento-tile .dia {
		font-size: 21px;
	}

	.academia-evento-chip .fecha {
		font-size: 13px;
	}
}