/* =========================================================
   EDU · Navegación del catálogo
   Migas, cabeceras, tarjetas, listas de fichas, filtro y paginación.
   Todo el archivo vive bajo .edu-page o clases con prefijo edu-,
   para que no se filtre a ninguna otra parte del tema.
   ========================================================= */

:root {
	--edu-tinta:      #18202a;
	--edu-texto:      #344054;
	--edu-suave:      #667085;
	--edu-linea:      #e4e7ec;
	--edu-fondo:      #ffffff;
	--edu-fondo-alt:  #f8fafc;
	--edu-acento:     #1769aa;
	--edu-radio:      12px;
	--edu-sombra:     0 1px 2px rgba(16, 24, 40, .05);
	--edu-sombra-alt: 0 6px 20px rgba(16, 24, 40, .09);
}

.edu-page {
	max-width: 1080px;
	margin: 0 auto;
	padding: 28px 24px 64px;
	color: var(--edu-texto);
	line-height: 1.6;
}


/* ---------- Migas ---------- */

.edu-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--edu-suave);
}

.edu-breadcrumbs--ficha {
	margin-top: 14px;
}

.edu-breadcrumbs a {
	color: var(--edu-suave);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.edu-breadcrumbs a:hover {
	color: var(--edu-acento);
	border-bottom-color: currentColor;
}

.edu-crumb-home {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.edu-crumb-icon {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.edu-crumb-actual {
	color: var(--edu-tinta);
	font-weight: 600;
}


/* ---------- Cabecera ---------- */

.edu-head {
	margin: 22px 0 34px;
}

.edu-kicker,
.edu-kicker-row {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.edu-kicker-row {
	gap: 10px;
	flex-wrap: wrap;
	margin: 10px 0 4px;
}

.edu-kicker {
	padding: 4px 11px;
	border: 1px solid var(--edu-linea);
	border-radius: 999px;
	background: var(--edu-fondo-alt);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--edu-suave);
}

.edu-kicker-icon {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.edu-title {
	margin: 14px 0 0;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	letter-spacing: -.022em;
	color: var(--edu-tinta);
}

.edu-lead {
	margin-top: 12px;
	max-width: 62ch;
	font-size: 17px;
	color: var(--edu-suave);
}

.edu-lead p:last-child {
	margin-bottom: 0;
}


/* ---------- Bloques ---------- */

.edu-bloque {
	margin-top: 38px;
}

.edu-bloque-titulo {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--edu-suave);
}

.edu-nota,
.edu-vacio {
	margin: 0 0 16px;
	font-size: 15px;
	color: var(--edu-suave);
}

.edu-vacio {
	padding: 26px;
	border: 1px dashed var(--edu-linea);
	border-radius: var(--edu-radio);
	background: var(--edu-fondo-alt);
	text-align: center;
}


/* ---------- Índice: ramas ---------- */

.edu-ramas {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.edu-rama-card {
	padding: 26px;
	border: 1px solid var(--edu-linea);
	border-radius: 16px;
	background: var(--edu-fondo);
	box-shadow: var(--edu-sombra);
}

.edu-rama-titulo {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -.015em;
}

.edu-rama-titulo a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--edu-tinta);
	text-decoration: none;
}

.edu-rama-titulo a:hover {
	color: var(--edu-acento);
}

.edu-rama-icon {
	width: 20px;
	height: 20px;
	fill: var(--edu-acento);
	flex: none;
}

.edu-rama-meta {
	margin: 8px 0 0;
	font-size: 13.5px;
	color: var(--edu-suave);
}

.edu-rama-desc {
	margin-top: 12px;
	font-size: 15px;
	color: var(--edu-suave);
}

.edu-areas-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.edu-areas-lista li {
	margin: 0;
}

.edu-area-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border: 1px solid var(--edu-linea);
	border-radius: 999px;
	background: var(--edu-fondo-alt);
	font-size: 14px;
	color: var(--edu-texto);
	text-decoration: none;
	transition: border-color .15s, color .15s, background .15s;
}

.edu-area-chip:hover {
	border-color: var(--edu-acento);
	background: #fff;
	color: var(--edu-acento);
}

.edu-area-num {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--edu-suave);
}

.edu-rama-mas {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 20px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--edu-acento);
	text-decoration: none;
}

.edu-rama-mas:hover .edu-flecha {
	transform: translateX(3px);
}

.edu-flecha {
	width: 16px;
	height: 16px;
	fill: currentColor;
	transition: transform .15s ease;
}


/* ---------- Tarjetas de área ---------- */

.edu-tarjetas {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.edu-tarjeta {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 18px;
	border: 1px solid var(--edu-linea);
	border-radius: var(--edu-radio);
	background: var(--edu-fondo);
	text-decoration: none;
	box-shadow: var(--edu-sombra);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}

.edu-tarjeta:hover {
	transform: translateY(-2px);
	border-color: #cfd6e0;
	box-shadow: var(--edu-sombra-alt);
}

.edu-tarjeta-icon {
	width: 18px;
	height: 18px;
	fill: var(--edu-acento);
	opacity: .85;
}

.edu-tarjeta-nombre {
	font-size: 16.5px;
	font-weight: 650;
	color: var(--edu-tinta);
	letter-spacing: -.01em;
}

.edu-tarjeta-desc {
	font-size: 14px;
	color: var(--edu-suave);
}

.edu-tarjeta-num {
	margin-top: auto;
	padding-top: 6px;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	color: var(--edu-suave);
}


/* ---------- Filtro de nivel ---------- */

.edu-filtro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 6px 0 20px;
	padding: 14px 16px;
	border: 1px solid var(--edu-linea);
	border-radius: var(--edu-radio);
	background: var(--edu-fondo-alt);
}

.edu-filtro-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--edu-suave);
}

.edu-filtro-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.edu-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid var(--edu-linea);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
	color: var(--edu-texto);
	cursor: pointer;
	transition: border-color .15s, color .15s, box-shadow .15s;
}

.edu-chip:hover {
	border-color: var(--edu-nivel, var(--edu-acento));
	color: var(--edu-nivel, var(--edu-acento));
}

.edu-chip.is-activa {
	border-color: var(--edu-nivel, var(--edu-acento));
	color: var(--edu-nivel, var(--edu-acento));
	box-shadow: inset 0 0 0 1px var(--edu-nivel, var(--edu-acento));
	font-weight: 600;
}

.edu-chip-num {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--edu-suave);
}

.edu-chip.is-activa .edu-chip-num {
	color: inherit;
	opacity: .8;
}

.edu-filtro-estado {
	flex-basis: 100%;
	margin: 0;
	min-height: 1em;
	font-size: 13px;
	color: var(--edu-suave);
}

.edu-sin-resultados {
	padding: 22px;
	border: 1px dashed var(--edu-linea);
	border-radius: var(--edu-radio);
	text-align: center;
	color: var(--edu-suave);
}

.edu-link-boton {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--edu-acento);
	text-decoration: underline;
	cursor: pointer;
}


/* ---------- Lista de fichas ---------- */

.edu-fichas {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--edu-linea);
}

.edu-ficha {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0;
	padding: 12px 4px;
	border-bottom: 1px solid var(--edu-linea);
}

.edu-ficha[hidden] {
	display: none;
}

.edu-grupo {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 22px 4px 8px;
	border-bottom: 2px solid var(--edu-nivel, var(--edu-linea));
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--edu-nivel, var(--edu-suave));
}

.edu-grupo:first-child {
	padding-top: 4px;
}

.edu-grupo[hidden] {
	display: none;
}

.edu-ficha-link {
	flex: 1 1 auto;
	font-size: 16px;
	color: var(--edu-tinta);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.edu-ficha-link:hover {
	color: var(--edu-acento);
	border-bottom-color: currentColor;
}

.edu-nivel-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border: 1px solid var(--edu-nivel, var(--edu-linea));
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--edu-nivel, var(--edu-suave));
	background: #fff;
}

.edu-nivel-chip--mini {
	flex: none;
	font-size: 11.5px;
	padding: 2px 9px;
}


/* ---------- Paginación ---------- */

.edu-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 28px;
}

.edu-pager-link {
	padding: 8px 16px;
	border: 1px solid var(--edu-linea);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--edu-acento);
	text-decoration: none;
	background: #fff;
}

.edu-pager-link:hover {
	border-color: var(--edu-acento);
}

.edu-pager-status {
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
	color: var(--edu-suave);
}


/* ---------- Áreas hermanas ---------- */

.edu-hermanas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 46px;
	padding-top: 22px;
	border-top: 1px solid var(--edu-linea);
}

.edu-hermanas-label {
	flex-basis: 100%;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--edu-suave);
}

.edu-hermana {
	padding: 5px 12px;
	border: 1px solid var(--edu-linea);
	border-radius: 999px;
	font-size: 13.5px;
	color: var(--edu-texto);
	text-decoration: none;
}

.edu-hermana:hover {
	border-color: var(--edu-acento);
	color: var(--edu-acento);
}


/* ---------- Foco visible ---------- */

.edu-page a:focus-visible,
.edu-chip:focus-visible,
.edu-link-boton:focus-visible {
	outline: 2px solid var(--edu-acento);
	outline-offset: 2px;
	border-radius: 6px;
}


/* ---------- Móvil ---------- */

@media (max-width: 640px) {

	.edu-page {
		padding: 20px 16px 48px;
	}

	.edu-breadcrumbs--ficha {
		margin-top: 8px;
	}

	.edu-rama-card {
		padding: 20px;
	}

	.edu-tarjetas {
		grid-template-columns: 1fr;
	}

	.edu-ficha {
		flex-wrap: wrap;
		gap: 6px;
	}

	.edu-filtro {
		padding: 12px;
	}
}


/* ---------- Preferencias del sistema ---------- */

@media (prefers-reduced-motion: reduce) {

	.edu-tarjeta,
	.edu-flecha {
		transition: none;
	}

	.edu-tarjeta:hover {
		transform: none;
	}
}


/* =========================================================
   ICONOS DE ÁREA
   Un glifo distinto por área. Repetir la misma cuadrícula 19
   veces no aporta nada: el ojo la ignora. Un icono propio hace
   el área reconocible y ayuda a volver a encontrarla.
   ========================================================= */

.edu-icono-area {
	width: 22px;
	height: 22px;
	fill: var(--edu-acento);
}

.edu-tarjeta-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 4px;
	border-radius: 11px;
	background: linear-gradient(160deg, #eef6fc, #e3eef8);
}

.edu-chip-icono {
	width: 15px;
	height: 15px;
	fill: var(--edu-acento);
	opacity: .8;
	flex: none;
}

.edu-head--area {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

.edu-head-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 62px;
	height: 62px;
	margin-top: 4px;
	border-radius: 18px;
	background: linear-gradient(160deg, #eef6fc, #dfeaf6);
}

.edu-icono-grande {
	width: 30px;
	height: 30px;
	fill: var(--edu-acento);
}


/* =========================================================
   BARRA DE PROPORCIÓN POR NIVEL
   El total esconde la forma del área: 70 fichas puede ser todo
   básico o un recorrido completo. La barra lo dice de un vistazo.
   ========================================================= */

.edu-barra {
	display: flex;
	width: 100%;
	height: 5px;
	margin-top: 12px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--edu-linea);
}

.edu-barra i {
	display: block;
	height: 100%;
}


@media (max-width: 640px) {

	.edu-head--area {
		gap: 14px;
	}

	.edu-head-icono {
		width: 48px;
		height: 48px;
		border-radius: 14px;
	}

	.edu-icono-grande {
		width: 24px;
		height: 24px;
	}
}