/*
 * U2 · Cortina (componentes.md): la del 02 y, desde noviembre de 2026, la
 * del método del 01. Sin JavaScript, las pantallas son secciones normales
 * en el flujo, debajo de la apertura. Con JavaScript, la capa (entrada,
 * cabecera fija con el contexto y el progreso, foco, inert) va sobre este
 * mismo HTML (abajo, «La capa»).
 *
 * Las pantallas del 02 son R1 con --pantalla (min-height: 100svh, sin
 * height fijo): el contenido empieza a --area-segura del borde superior,
 * como dentro de la capa, y sus bloques van en columna con un hueco
 * común. Las del 01, el método (U16) y la IA, conservan su composición y
 * miden lo que su contenido (metodo.css). :where(), para no cambiar la
 * especificidad de estas reglas.
 */

.loha-cortina__pantalla:where(.loha-escena--pantalla) {
	--cortina-hueco: clamp(1.5rem, 0.5rem + 2vw, 3rem);
	display: flex;
	flex-direction: column;
}

.loha-cortina__pantalla:where(.loha-escena--pantalla) > .loha-escena__contenido {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--cortina-hueco);
	padding-top: var(--area-segura);
	padding-bottom: var(--separacion);
}

/* ── Pantalla 1 ───────────────────────────────────────────── */
/* Rótulo → titular → línea → párrafo → indicación de desplazamiento, al
   pie de la pantalla. La línea es larga: unos 270 px a 1672. */

.loha-cortina__pantalla--1 .loha-encabezado__filete {
	width: clamp(8rem, 4rem + 12vw, 17rem);
}

.loha-cortina__pantalla--1 .loha-accion--bajar {
	align-self: flex-start;
	margin-top: auto;
}

/* ── Pantalla 2 ───────────────────────────────────────────── */
/* El remate, centrado al pie, bajo una línea a todo el ancho. */

.loha-cortina__cierre .loha-encabezado {
	margin-top: clamp(1.25rem, 0.9rem + 1vw, 2rem);
	text-align: center;
}

.loha-cortina__cierre .loha-encabezado__remate {
	margin-top: 0;
}

/* ── Pantalla 4 ───────────────────────────────────────────── */
/* La frase final, dos oraciones en dos líneas del campo: un poco más
   separadas que las líneas de un párrafo, pero un solo bloque (revisión
   del cliente, 02-16: 0,15–0,25 de la altura de línea; 0,2). Si una
   oración se parte en M, sus líneas siguen a la distancia normal. */

.loha-cortina__pantalla--4 .loha-cierre .loha-linea + .loha-linea {
	margin-top: 0.2lh;
}

/* =====================================================================
   La capa

   Solo con JavaScript: html.loha-js lo pone un script en línea al
   principio del <head>, antes del primer pintado, así que las pantallas
   nunca llegan a verse en el flujo. Abrir y cerrar, inert, bloqueo del
   scroll, Escape e historial: cortina.js sobre capa.js.

   - Entra desde la derecha en E y TA y desde abajo en TV y M: la
     dirección es composición y va por anchura. 550 ms al abrir, 475 al
     cerrar (variables.css).
   - Con movimiento reducido, solo opacidad, como el hero.
   - Abierta ocupa toda la ventana (o lo que deja la barra de
     administración, como el menú: .loha-capa en base.css).
   - La capa es el contenedor de scroll. Desplazamiento libre y
     continuo, sin scroll-snap (revisión del cliente, 02-06 y 02-13): el
     progreso marca por dónde va la lectura, no pantallas cerradas. La
     cabecera C va pegada arriba (sticky) y superpuesta a las pantallas,
     que ya dejan ese espacio: empiezan su contenido a --area-segura.
   ===================================================================== */

/* Solo la posición, con especificidad baja: con sesión iniciada manda
   .admin-bar .loha-capa (base.css), que baja la capa bajo la barra. */
:where(.loha-js) .loha-cortina {
	inset: 0;
}

.loha-js .loha-cortina {
	position: fixed;
	z-index: var(--z-capa);
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--beige-50);
	visibility: hidden;
	transform: translateY(100%);
	transition:
		transform var(--t-cortina-cerrar) var(--curva-suave),
		visibility 0s linear var(--t-cortina-cerrar);
}

/* :has(:target): respaldo si html.loha-js está pero el controlador no ha
   llegado a arrancar; el acceso sigue siendo un enlace a #cortina-1. */
.loha-js .loha-cortina.esta-abierta,
.loha-js .loha-cortina:not([inert]):has(:target) {
	visibility: visible;
	transform: none;
	transition:
		transform var(--t-cortina-abrir) var(--curva-suave),
		visibility 0s;
}

.loha-js .loha-cortina[inert] {
	pointer-events: none;
}

@media (min-width: 1024px) {
	.loha-js .loha-cortina:not(.esta-abierta) {
		transform: translateX(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.loha-js .loha-cortina,
	.loha-js .loha-cortina:not(.esta-abierta) {
		opacity: 0;
		transform: none;
		transition:
			opacity var(--t-cortina-cerrar) ease,
			visibility 0s linear var(--t-cortina-cerrar);
	}

	.loha-js .loha-cortina.esta-abierta,
	.loha-js .loha-cortina:not([inert]):has(:target) {
		opacity: 1;
		transition:
			opacity var(--t-cortina-abrir) ease,
			visibility 0s;
	}
}

/* Cada pantalla del 02, al menos el alto de la capa: una idea por
   ventana. La 3 mide lo que su contenido: el diagrama y su recuadro
   pueden pasar de una ventana (02-13) y, en pantallas grandes, estirarla
   dejaba un vacío de hasta 600 px antes de la 4 (02-18, a 2560 × 1440).
   Las del 01 miden siempre lo que su contenido: el método es un bloque
   continuo y la IA, su cierre. */
.loha-js .loha-cortina__pantalla:where(.loha-escena--pantalla) {
	min-height: 100%;
}

.loha-js .loha-cortina__pantalla--3 {
	min-height: 0;
}

/* El titular recibe el foco al abrir y, en el 02, con DESLIZA PARA
   SEGUIR, pero no es un control: sin contorno. */
.loha-cortina [tabindex="-1"]:focus-visible {
	outline: none;
}

/* ── Cabecera C ───────────────────────────────────────────── */

.loha-cortina > .loha-cabecera--cortina {
	display: none;
}

.loha-js .loha-cortina > .loha-cabecera--cortina {
	display: flex;
	position: sticky;
	top: 0;
	z-index: 2;
	height: var(--cabecera);
	/* Superpuesta: no empuja la primera pantalla. */
	margin-bottom: calc(-1 * var(--cabecera));
}

/* ── U3 · Indicador de progreso ───────────────────────────── */
/* Cuatro segmentos fijos abajo a la derecha de la capa, como en las
   cuatro previas; el de la pantalla actual, en color pleno. Toman el
   color de lo que tienen debajo, como la cabecera: azul sobre claro y
   blanco sobre azul (pantalla 1, mitad azul de la 3, caja de la oferta y
   panel público en TV y M). Lo decide cortina.js. En móvil, por encima
   de la zona segura inferior. Decorativo (aria-hidden). */

.loha-cortina > .loha-progreso {
	display: none;
}

.loha-js .loha-cortina > .loha-progreso {
	display: flex;
	position: fixed;
	right: calc(var(--margen) + env(safe-area-inset-right, 0px));
	bottom: calc(clamp(1.25rem, 0.9rem + 1.5vw, 3rem) + env(safe-area-inset-bottom, 0px));
	z-index: 2;
	gap: clamp(0.4rem, 0.25rem + 0.6vw, 0.75rem);
	color: var(--azul);
	pointer-events: none;
	transition: color var(--t-hover) ease;
}

@media (max-width: 599px) {
	.loha-js .loha-cortina > .loha-progreso {
		/* Por encima del indicador de inicio del iPhone (unos 34 px). */
		bottom: max(2.25rem, calc(1.25rem + env(safe-area-inset-bottom, 0px)));
	}
}

/* El CTA de la pantalla 4 es lo último de la capa y, en TV y M, pasa por
   debajo del progreso: en M, a todo el ancho, le pisaba el borde; en TV
   quedaba a 8 px. La pantalla deja debajo el sitio del progreso. */
@media (max-width: 1023px) {
	.loha-js .loha-cortina__pantalla--4 > .loha-escena__contenido {
		padding-bottom: calc(var(--separacion) + 2.5rem + env(safe-area-inset-bottom, 0px));
	}
}

.loha-js .loha-cortina > .loha-progreso--sobre-oscuro {
	color: var(--blanco);
}

.loha-progreso__segmento {
	width: clamp(1rem, 0.6rem + 1.4vw, 2.75rem);
	height: 3px;
	border-radius: 2px;
	background-color: currentColor;
	opacity: 0.3;
	transition: opacity var(--t-hover) ease;
}

.loha-progreso__segmento.es-actual {
	opacity: 1;
}