/* ============================================================
   SITIO PÚBLICO — estilos del módulo sobre los tokens de base.css
   Reemplaza a StylePublico/styleHome.css y StylePublico/galeryStyle.css
   (que quedan sin cargar; se borran en T14).
   ============================================================ */

/* Header: link de ingreso a la derecha (espejo de .salir en el admin) */
.menu .ingresar { margin-left: auto; color: var(--brand-700); }
.menu .ingresar:hover { background: var(--brand-100); color: var(--brand-900); }

/* ============================================================
   HERO (.destacado)
   ============================================================ */
.destacado {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	min-height: 320px;
}

.destacado .contenedor-texto {
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}

.destacado .titulo {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.destacado .titulo::after {
	content: '';
	display: block;
	margin-top: 10px;
	width: 72px;
	height: 3px;
	border-radius: 2px;
	background: var(--accent);
}

.destacado .extracto {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-muted);
}

.destacado .contenedor-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ============================================================
   ZONA PRINCIPAL DEL HOME: artículos + sidebar de la directora
   ============================================================ */
.principal {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 20px;
	align-items: start;
}

.articulos { display: grid; gap: 20px; }

.articulo {
	display: flex;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	min-height: 180px;
}

.articulo .contenedor-thumbnail { width: 38%; flex-shrink: 0; }

.articulo .contenedor-thumbnail a { display: block; width: 100%; height: 100%; }

.articulo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.articulo .contenedor-texto {
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.articulo .titulo { font-size: 18px; font-weight: 700; }
.articulo .titulo a { color: var(--text); }
.articulo .titulo a:hover { color: var(--brand-700); }

.articulo .extracto { color: var(--text-muted); font-size: 15px; }

.btn-link {
	margin-top: auto;
	align-self: flex-end;
	padding: 6px 12px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--brand-700);
	transition: background .15s ease;
}

.btn-link:hover { background: var(--brand-50); }

/* Bio de la directora (la card .sidebar la da base.css) */
.sidebar .bio .titulo {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 8px;
}

/* ============================================================
   LISTAS PÚBLICAS (actividades / cursos)
   ============================================================ */
.lista { display: grid; gap: 16px; }

.elemento {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 20px 24px;
}

.elemento .titulo {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.elemento .extracto { color: var(--text-muted); font-size: 15px; }

/* Estado vacío para listas que no son tablas */
.estado-vacio-lista {
	padding: 40px 16px;
	text-align: center;
	color: var(--text-muted);
	font-size: 15px;
}

/* ============================================================
   PÁGINA DE ACTIVIDADES
   ============================================================ */
.intro-seccion {
	text-align: center;
	padding: 12px 0 4px;
}

.intro-seccion h1 {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.intro-seccion h1::after {
	content: '';
	display: block;
	margin: 10px auto 0;
	width: 72px;
	height: 3px;
	border-radius: 2px;
	background: var(--accent);
}

.intro-seccion p {
	max-width: 560px;
	margin: 10px auto 0;
	font-size: 16px;
	color: var(--text-muted);
}

.grilla-actividades {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	align-items: stretch;
}

.grilla-actividades .estado-vacio-lista { grid-column: 1 / -1; }

.actividad {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: transform .15s ease, box-shadow .15s ease;
}

.actividad:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.actividad .inicial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 4px;
	border-radius: var(--radius);
	background: var(--brand-100);
	color: var(--brand-900);
	font-size: 18px;
	font-weight: 700;
}

/* Tintes alternados de la inicial para dar ritmo visual */
.actividad:nth-child(3n+2) .inicial { background: var(--brand-600); color: var(--surface); }
.actividad:nth-child(3n) .inicial { background: var(--accent); color: var(--brand-900); }

.actividad .titulo { font-size: 18px; font-weight: 700; }

.actividad .extracto {
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1.6;
}

/* ============================================================
   GALERÍA DE FOTOS
   ============================================================ */
.galeria { padding: 20px; }

.contenedor-imagenes-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}

.contenedor-imagenes-galeria .imagen {
	position: relative;
	height: 220px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 1px solid var(--border);
}

.imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.overlay {
	position: absolute;
	inset: auto 0 0 0;
	height: 0;
	overflow: hidden;
	background: var(--brand-600);
	background: color-mix(in srgb, var(--brand-600) 82%, transparent);
	transition: height .3s ease;
}

.overlay h3 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	text-align: center;
	color: var(--surface);
	font-size: 18px;
	font-weight: 600;
}

.imagen:hover .overlay { height: 100%; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
	.destacado { grid-template-columns: 1fr; }
	.destacado .contenedor-thumbnail { height: 220px; }
	.principal { grid-template-columns: 1fr; }
}