/**
 * Nuvia Sequera — el aula
 * ==================================================================
 *
 * La carpeta privada de cada programa. La regla que la gobierna toda:
 * cada carpeta se viste como su producto, no como un panel neutro.
 *
 *   · Ruta4A entra por el campo rosa de marca y su logotipo, con el
 *     acento del eje de formación en todos los componentes.
 *   · Nosotras y Nosotros entran por su cartel: campo lila a sangre
 *     con la fotografía virada al mismo tono, el logotipo haciendo de
 *     titular y el corazón de la identidad saliendo por la esquina.
 *
 * Lo demás —listas, documentos, reproductor— es deliberadamente sobrio:
 * quien está aquí viene a estudiar, no a mirar la interfaz.
 *
 * El icono de usuario de la cabecera no está aquí: sale en todas las
 * páginas, así que vive en principal.css con el resto de la cabecera.
 *
 *  1. El cartel de la carpeta
 *  2. El índice
 *  3. La barra de la carpeta
 *  4. Módulos, vídeos y documentos
 *  5. Entrar
 *  6. Vacíos y avisos
 */

/* ==================================================================
   1. EL CARTEL DE LA CARPETA
   ================================================================== */

.ns-aula-cartel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3rem, 7vw, 5rem);
}

.ns-aula-cartel__interior {
	position: relative;
	z-index: 1;
}

.ns-aula-cartel__rotulo {
	font-family: var(--ns-font-display);
	font-weight: var(--ns-peso-negro);
	font-size: var(--ns-t-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 var(--ns-e-4);
	opacity: 0.75;
}

.ns-aula-cartel__titulo {
	margin: 0;
	line-height: 1;
}

.ns-aula-cartel__lema {
	margin: var(--ns-e-4) 0 0;
	max-width: 30rem;
	font-weight: var(--ns-peso-ligero);
	font-size: var(--ns-t-grande);
	line-height: 1.3;
}

.ns-aula-cartel__edicion {
	margin: var(--ns-e-3) 0 0;
	font-family: var(--ns-font-display);
	font-weight: var(--ns-peso-negro);
	font-size: var(--ns-t-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.75;
}

/* --- Nosotras y Nosotros: el campo lila del cartel ------------------- */

.ns-aula-cartel[data-estilo="cartel"] {
	background-color: var(--ns-lila-400);
	color: var(--ns-blanco);
}

.ns-aula-cartel__logo {
	display: block;
	width: auto;
	height: clamp(3.25rem, 6.5vw, 5rem);
	max-width: 100%;
}

/*
 * El lema y la edición no arrancan en la «N»: arrancan donde arranca el
 * tagline dentro del propio logotipo, medido en sus trazos SVG (ver
 * --ns-ruta-tagline-fraccion en principal.css). El ancho del logotipo
 * aquí se fija por alto, así que primero se deriva el ancho real con
 * su proporción (690.43 × 205.3, el viewBox del SVG).
 */
.ns-aula-cartel[data-estilo="cartel"] .ns-aula-cartel__lema,
.ns-aula-cartel[data-estilo="cartel"] .ns-aula-cartel__edicion {
	margin-left: calc(
		clamp(3.25rem, 6.5vw, 5rem) * 690.43 * var(--ns-ruta-tagline-fraccion, 0.3015) / 205.3
	);
}

/*
 * La fotografía llega ya virada al lila, con su propio fondo plano del
 * mismo tono: por eso puede ocupar media banda sin borde visible, solo
 * con un desvanecido por la izquierda para que el texto tenga apoyo.
 * En vertical no cabe partida, así que pasa a ser el fondo entero, muy
 * atenuada.
 */
.ns-aula-cartel__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.ns-aula-cartel__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;
	opacity: 0.45;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 70%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 70%);
}

@media (min-width: 48rem) {
	.ns-aula-cartel__foto {
		left: 46%;
	}

	.ns-aula-cartel__foto img {
		object-position: 50% 28%;
		opacity: 0.95;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
		mask-image: linear-gradient(to right, transparent 0%, #000 42%);
	}
}

.ns-aula-cartel .ns-cartel__corazon {
	position: absolute;
	z-index: -1;
	right: -6%;
	bottom: -40%;
	width: clamp(14rem, 30vw, 26rem);
	aspect-ratio: 826 / 715;
	transform: rotate(-8deg);
	opacity: 0.3;
	pointer-events: none;
}

.ns-aula-cartel .ns-cartel__corazon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ns-aula-cartel .ns-cartel__corazon svg path {
	fill: var(--ns-blanco);
}

/* --- Ruta4A: el campo rosa de su portada ----------------------------- */

.ns-aula-cartel[data-estilo="ruta4a"] {
	background-color: var(--ns-rosa-300);
	color: var(--ns-tinta);
}

/* La marca compuesta como palabra, igual que en la portada del curso. */
.ns-aula-cartel[data-estilo="ruta4a"] .ns-ruta4a {
	font-size: clamp(3.25rem, 8vw, 6rem);
	line-height: 0.82;
	letter-spacing: -0.06em;
}

/* Sobre el campo rosa el «4» va en blanco: rosa sobre rosa desaparece. */
.ns-aula-cartel[data-estilo="ruta4a"] .ns-ruta4a .ns-cuatro {
	color: var(--ns-blanco);
}

.ns-aula-cartel[data-estilo="ruta4a"] .ns-aula-cartel__lema {
	font-style: italic;
	font-weight: var(--ns-peso-fino);
	font-size: clamp(1.35rem, 2.6vw, 2rem);
	line-height: 1.1;
	max-width: 20ch;
	opacity: 0.9;
}

/* La misma pieza y el mismo encuadre que el héroe de la ficha. */
.ns-aula-cartel__pieza {
	position: absolute;
	z-index: -1;
	right: -6%;
	bottom: -30%;
	width: clamp(18rem, 42vw, 34rem);
	height: auto;
	opacity: 0.85;
	pointer-events: none;
}

/* ==================================================================
   2. EL ÍNDICE
   ================================================================== */

.ns-aula-indice__titulo {
	margin: var(--ns-e-3) 0 0;
	font-size: var(--ns-t-h1);
	font-weight: var(--ns-peso-negro);
}

.ns-aula-indice__texto {
	margin: var(--ns-e-4) 0 0;
	max-width: var(--ns-ancho-texto);
	color: var(--ns-tinta-suave);
	font-size: var(--ns-t-grande);
	font-weight: var(--ns-peso-ligero);
}

.ns-aula-indice__rejilla {
	display: grid;
	gap: var(--ns-e-5);
	margin-top: var(--ns-e-7);
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.ns-aula-indice__rejilla {
		grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	}
}

.ns-aula-tarjeta {
	position: relative;
	display: block;
	isolation: isolate;
	overflow: hidden;
	min-height: 15rem;
	padding: var(--ns-e-6);
	border-radius: var(--ns-radio-l);
	text-decoration: none;
	transition: transform var(--ns-transicion), box-shadow var(--ns-transicion);
}

.ns-aula-tarjeta:hover {
	transform: translateY(-3px);
	box-shadow: var(--ns-sombra-m);
}

.ns-aula-tarjeta[data-estilo="cartel"] {
	background-color: var(--ns-lila-400);
	color: var(--ns-blanco);
}

.ns-aula-tarjeta[data-estilo="ruta4a"] {
	background-color: var(--ns-rosa-300);
	color: var(--ns-tinta);
}

.ns-aula-tarjeta__foto {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.ns-aula-tarjeta__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	opacity: 0.45;
	-webkit-mask-image: linear-gradient(to top, transparent 10%, #000 90%);
	mask-image: linear-gradient(to top, transparent 10%, #000 90%);
}

.ns-aula-tarjeta__interior {
	display: flex;
	flex-direction: column;
	gap: var(--ns-e-3);
	height: 100%;
}

.ns-aula-tarjeta__logo {
	/*
	 * .ns-aula-tarjeta__interior es flex en columna: sin align-self, el
	 * eje transversal (el ancho) estira el logotipo al 100% en vez de
	 * dejarlo en su ancho natural según la altura.
	 */
	align-self: flex-start;
	display: block;
	width: auto;
	height: 2.75rem;
	max-width: 100%;
	margin-bottom: var(--ns-e-2);
}

/* Mismo criterio que en el cartel grande: el lema arranca donde arranca
   el tagline del logotipo, no en la «N». */
.ns-aula-tarjeta[data-estilo="cartel"] .ns-aula-tarjeta__lema {
	margin-left: calc( 2.75rem * 690.43 * var(--ns-ruta-tagline-fraccion, 0.3015) / 205.3 );
}

.ns-aula-tarjeta__marca {
	display: block;
	margin-bottom: var(--ns-e-2);
	line-height: 1;
}

.ns-aula-tarjeta__marca .ns-ruta4a {
	font-size: 2.75rem;
	letter-spacing: -0.045em;
}

/* Mismo criterio que en el cartel: sobre rosa, el «4» en blanco. */
.ns-aula-tarjeta[data-estilo="ruta4a"] .ns-ruta4a .ns-cuatro {
	color: var(--ns-blanco);
}

.ns-aula-tarjeta__lema {
	display: block;
	font-weight: var(--ns-peso-ligero);
	font-size: var(--ns-t-cuerpo);
	line-height: 1.35;
}

.ns-aula-tarjeta__cuenta {
	display: block;
	margin-top: auto;
	padding-top: var(--ns-e-5);
	font-family: var(--ns-font-display);
	font-weight: var(--ns-peso-negro);
	font-size: var(--ns-t-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.8;
}

.ns-aula-indice__salir {
	margin-top: var(--ns-e-7);
	font-size: var(--ns-t-pequeno);
}

.ns-aula-indice__salir a {
	color: var(--ns-tinta-tenue);
}

/* ==================================================================
   3. LA BARRA DE LA CARPETA
   ================================================================== */

.ns-aula-barra {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ns-e-5);
	align-items: center;
	padding-bottom: var(--ns-e-5);
	margin-bottom: var(--ns-e-7);
	border-bottom: 1px solid var(--ns-borde);
	font-size: var(--ns-t-pequeno);
}

.ns-aula-barra a {
	color: var(--ns-tinta-suave);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--ns-transicion), border-color var(--ns-transicion);
}

.ns-aula-barra a:hover {
	color: var(--ns-acento-texto);
	border-bottom-color: currentColor;
}

.ns-aula-barra__editar {
	margin-left: auto;
}

/* ==================================================================
   4. MÓDULOS, VÍDEOS Y DOCUMENTOS
   ================================================================== */

.ns-aula-modulo + .ns-aula-modulo {
	margin-top: var(--ns-e-8);
}

.ns-aula-modulo__titulo {
	margin: 0 0 var(--ns-e-5);
	font-size: var(--ns-t-h3);
	font-weight: var(--ns-peso-negro);
	color: var(--ns-acento-texto);
}

/*
 * El contenedor del sitio es ancho porque está pensado para fotografía a
 * sangre. Aquí se lee y se ve vídeo, así que la columna se acota: un
 * reproductor de 1400 px obliga a mover la cabeza.
 */
.ns-aula-modulo__lista {
	display: grid;
	gap: var(--ns-e-5);
	max-width: 56rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- Vídeo y audio ---------------------------------------------------- */
.ns-aula-medio__titulo {
	margin: 0 0 var(--ns-e-2);
	font-size: var(--ns-t-h4);
	font-weight: var(--ns-peso-medio);
	font-family: var(--ns-font-texto);
}

.ns-aula-medio__nota {
	margin: 0 0 var(--ns-e-3);
	color: var(--ns-tinta-suave);
	font-size: var(--ns-t-pequeno);
}

.ns-aula-medio__marco {
	position: relative;
	overflow: hidden;
	border-radius: var(--ns-radio-m);
	background-color: var(--ns-tinta);
}

.ns-aula-medio__video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background-color: var(--ns-tinta);
}

/*
 * El nombre de quien mira, sobreimpreso. No impide grabar la pantalla
 * —nada lo impide— pero deja marcada cualquier copia que salga de aquí.
 * Cambia de esquina cada minuto para que no se pueda recortar sin más.
 */
.ns-aula-medio__marca {
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: 0.35em 0.7em;
	border-radius: var(--ns-radio-s);
	background-color: rgb(30 30 28 / 22%);
	color: rgb(255 255 255 / 62%);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	pointer-events: none;
	user-select: none;
	animation: ns-aula-marca 60s steps(1, end) infinite;
}

@keyframes ns-aula-marca {
	0%   { top: 1rem; right: 1rem; bottom: auto; left: auto; }
	25%  { top: auto; right: 1rem; bottom: 3.5rem; left: auto; }
	50%  { top: auto; right: auto; bottom: 3.5rem; left: 1rem; }
	75%  { top: 1rem; right: auto; bottom: auto; left: 1rem; }
	100% { top: 1rem; right: 1rem; bottom: auto; left: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.ns-aula-medio__marca { animation: none; }
}

.ns-aula-medio__audio {
	width: 100%;
}

/* --- Documentos ------------------------------------------------------- */
.ns-aula-doc {
	display: flex;
	align-items: center;
	gap: var(--ns-e-4);
	padding: var(--ns-e-4) var(--ns-e-5);
	background-color: var(--ns-blanco);
	border: 1px solid var(--ns-borde-tenue);
	border-radius: var(--ns-radio-m);
	transition: border-color var(--ns-transicion), box-shadow var(--ns-transicion);
}

.ns-aula-doc:hover {
	border-color: var(--ns-acento-borde);
	box-shadow: var(--ns-sombra-s);
}

.ns-aula-doc__icono {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--ns-acento-texto);
}

.ns-aula-doc__icono svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ns-aula-doc__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	flex: 1 1 auto;
}

.ns-aula-doc__titulo {
	font-weight: var(--ns-peso-medio);
	overflow-wrap: anywhere;
}

.ns-aula-doc__nota {
	color: var(--ns-tinta-suave);
	font-size: var(--ns-t-pequeno);
}

.ns-aula-doc__meta {
	color: var(--ns-tinta-tenue);
	font-size: var(--ns-t-micro);
	letter-spacing: 0.04em;
}

.ns-aula-doc__descarga {
	flex: none;
	padding: 0.55em 1.2em;
	border: 1px solid var(--ns-acento-borde);
	border-radius: var(--ns-radio-pill);
	color: var(--ns-acento-texto);
	font-size: var(--ns-t-pequeno);
	font-weight: var(--ns-peso-fuerte);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--ns-transicion), color var(--ns-transicion);
}

.ns-aula-doc__descarga:hover {
	background-color: var(--ns-acento-solido);
	border-color: var(--ns-acento-solido);
	color: var(--ns-acento-solido-texto);
}

@media (max-width: 34rem) {
	.ns-aula-doc {
		flex-wrap: wrap;
	}

	.ns-aula-doc__descarga {
		width: 100%;
		text-align: center;
	}
}

/* Lo que solo ve Nuvia: materiales preparados y todavía sin publicar. */
.ns-aula-medio.esta-oculto,
.ns-aula-doc.esta-oculto {
	opacity: 0.62;
}

/* Cuánto le queda al material antes de borrarse. En documentos va dentro
   de la línea de metadatos; en vídeos y audios, en su propia línea. La
   última semana cambia de color: deja de ser un dato y es un aviso. */

.ns-aula-caduca {
	display: inline-block;
	margin-left: var(--ns-e-2);
	color: var(--ns-tinta-tenue);
	font-size: var(--ns-t-micro);
	letter-spacing: 0.04em;
}

.ns-aula-caduca::before {
	content: "·";
	margin-right: var(--ns-e-2);
	color: var(--ns-tinta-tenue);
}

.ns-aula-caduca.esta-cerca {
	color: var(--ns-acento-texto);
	font-weight: var(--ns-peso-medio);
}

.ns-aula-medio__meta {
	margin: 0 0 var(--ns-e-3);
	font-size: var(--ns-t-pequeno);
}

.ns-aula-medio__meta .ns-aula-caduca {
	margin-left: 0;
}

.ns-aula-medio__meta .ns-aula-caduca::before {
	content: none;
}

.ns-aula-etiqueta {
	display: inline-block;
	margin-left: var(--ns-e-2);
	padding: 0.15em 0.6em;
	border-radius: var(--ns-radio-pill);
	background-color: var(--ns-arena);
	color: var(--ns-tinta-suave);
	font-family: var(--ns-font-texto);
	font-size: var(--ns-t-micro);
	font-weight: var(--ns-peso-fuerte);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

.ns-aula-aviso {
	margin-top: var(--ns-e-7);
	padding-top: var(--ns-e-5);
	border-top: 1px solid var(--ns-borde);
	color: var(--ns-tinta-tenue);
	font-size: var(--ns-t-pequeno);
}

/* ==================================================================
   5. ENTRAR
   ================================================================== */

.ns-aula-entrada__titulo {
	margin: var(--ns-e-3) 0 0;
	font-size: var(--ns-t-h2);
	font-weight: var(--ns-peso-negro);
}

.ns-aula-entrada__texto {
	margin: var(--ns-e-4) 0 var(--ns-e-6);
	color: var(--ns-tinta-suave);
	font-size: var(--ns-t-grande);
	font-weight: var(--ns-peso-ligero);
}

.ns-aula-entrada #loginform {
	display: grid;
	gap: var(--ns-e-4);
	padding: var(--ns-e-6);
	background-color: var(--ns-blanco);
	border: 1px solid var(--ns-borde-tenue);
	border-radius: var(--ns-radio-l);
	box-shadow: var(--ns-sombra-s);
}

.ns-aula-entrada #loginform p {
	margin: 0;
}

.ns-aula-entrada #loginform label {
	display: block;
	margin-bottom: var(--ns-e-2);
	font-size: var(--ns-t-pequeno);
	font-weight: var(--ns-peso-medio);
}

.ns-aula-entrada #loginform input[type="text"],
.ns-aula-entrada #loginform input[type="password"] {
	width: 100%;
	padding: 0.85em 1em;
	border: 1px solid var(--ns-borde);
	border-radius: var(--ns-radio-s);
	background-color: var(--ns-hueso);
	font-family: inherit;
	font-size: var(--ns-t-cuerpo);
	color: var(--ns-texto);
}

.ns-aula-entrada #loginform input:focus-visible {
	outline: 2px solid var(--ns-acento);
	outline-offset: 1px;
}

.ns-aula-entrada .login-remember label {
	display: flex;
	align-items: center;
	gap: var(--ns-e-2);
	margin: 0;
	font-weight: var(--ns-peso-normal);
	color: var(--ns-tinta-suave);
}

.ns-aula-entrada #wp-submit {
	width: 100%;
	padding: 1em 2em;
	border: 0;
	border-radius: var(--ns-radio-pill);
	background-color: var(--ns-acento-solido);
	color: var(--ns-acento-solido-texto);
	font-family: inherit;
	font-size: var(--ns-t-cuerpo);
	font-weight: var(--ns-peso-fuerte);
	cursor: pointer;
	transition: background-color var(--ns-transicion), transform var(--ns-transicion);
}

.ns-aula-entrada #wp-submit:hover {
	background-color: var(--ns-lila-600);
	transform: translateY(-1px);
}

.ns-aula-entrada__ayuda {
	margin: var(--ns-e-4) 0 0;
	font-size: var(--ns-t-pequeno);
	color: var(--ns-tinta-suave);
}

/* ==================================================================
   6. VACÍOS
   ================================================================== */

.ns-aula-vacia {
	max-width: var(--ns-ancho-texto);
}

.ns-aula-vacia h1,
.ns-aula-vacia h2 {
	margin: 0 0 var(--ns-e-4);
	font-size: var(--ns-t-h2);
	font-weight: var(--ns-peso-negro);
}

.ns-aula-vacia p {
	color: var(--ns-tinta-suave);
	font-size: var(--ns-t-grande);
	font-weight: var(--ns-peso-ligero);
}

.ns-aula-vacia__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ns-e-4);
	margin-top: var(--ns-e-6);
}