/*
 * La tarjeta «Por dónde empezar» de la portada del curso. El porqué está en
 * orden.php (parte TICK-2026-010).
 *
 * Es la puerta de entrada a la ruta: una sola acción a la vista —el botón— y
 * debajo el camino entero para que se entienda el plan de un vistazo. A partir
 * de ahí el alumno no necesita volver: dentro del aula el «Siguiente» ya va por
 * la ruta y la barra del tema la enseña siempre.
 *
 * Va dentro de la página de curso de Tutor, que es clara, y justo encima de
 * «Contenido del curso». Marca de la escuela: cian #00B4D8 sobre azul marino
 * #0a2a40, con Manrope, que el plugin ya carga en todo el frontal. Todo con
 * prefijo .cnm-orden para no rozar nada de Tutor.
 */

.cnm-orden {
	font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
	margin-top: 40px;
	padding: 22px 24px 20px;
	background: #f4fbfd;
	border: 1px solid #d5e9f1;
	/* La banda cian de la izquierda: se lee como «esto lo dice el centro». */
	border-left: 4px solid #00b4d8;
	border-radius: 12px;
}

.cnm-orden__eti {
	margin: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #0a6a86;
}

.cnm-orden__titulo {
	margin: 4px 0 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
	color: #0a2a40;
}

.cnm-orden__texto {
	margin: 8px 0 0;
	max-width: 62ch;
	font-size: 14px;
	line-height: 1.55;
	color: #3d5d70;
}

.cnm-orden__texto strong {
	font-weight: 800;
	color: #0a2a40;
}

/* ---- La única acción de la tarjeta ---- */

a.cnm-orden__boton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding: 13px 24px;
	border-radius: 999px;
	background: #00b4d8;
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

a.cnm-orden__boton:hover,
a.cnm-orden__boton:focus-visible {
	background: #0a2a40;
	color: #fff;
	text-decoration: none;
}

/* ---- El camino: 11 › 10 › 5 › 6 … ---- */

.cnm-orden__ruta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin-top: 16px;
}

.cnm-orden__ruta-eti {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #4a7d94;
}

.cnm-orden__ruta-pasos {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	/* Sin viñetas: los números ya son la lista. Safari deja de anunciarla al
	   quitar list-style, por eso el role="list" en el HTML. */
	list-style: none;
	overflow-x: auto;
	max-width: 100%;
	/* Sin esto un hijo flex nunca encoge por debajo de su contenido y el
	   overflow de arriba no llega a usarse: la ruta desbordaría la barra. */
	min-width: 0;
}

.cnm-orden__ruta-pasos li {
	margin: 0;
	flex: 0 0 auto;
}

.cnm-orden__ruta-pasos li + li::before {
	content: "\203A";
	margin-right: 4px;
	color: #a8c9d6;
	font-weight: 700;
}

.cnm-orden__ruta-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 7px;
	border: 1px solid #cfe4ed;
	border-radius: 999px;
	background: #fff;
	color: #0a6a86;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
}

/* El primero es donde empieza todo: se marca en cian. */
.cnm-orden__ruta-pasos li:first-child .cnm-orden__ruta-num {
	border-color: #00b4d8;
	background: #eaf8fc;
}

a.cnm-orden__ruta-num:hover,
a.cnm-orden__ruta-num:focus-visible {
	border-color: #00b4d8;
	background: #eaf8fc;
	color: #0a6a86;
	text-decoration: none;
}

/* ---- La lista con nombres, plegada ---- */

.cnm-orden__detalle {
	margin-top: 14px;
}

.cnm-orden__detalle > summary {
	cursor: pointer;
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: #0a6a86;
}

.cnm-orden__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 4px 18px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.cnm-orden__lista li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: #0a2a40;
}

.cnm-orden__num {
	flex: 0 0 auto;
	font-weight: 800;
	color: #0a6a86;
	white-space: nowrap;
}

.cnm-orden__nombre {
	font-weight: 600;
}

@media (max-width: 700px) {
	.cnm-orden {
		margin-top: 28px;
		padding: 18px 16px 16px;
	}

	.cnm-orden__titulo {
		font-size: 18px;
	}

	a.cnm-orden__boton {
		width: 100%;
		justify-content: center;
		padding: 14px 18px;
		font-size: 14px;
	}

	.cnm-orden__lista {
		grid-template-columns: 1fr;
	}
}