/* ============================================================
   deac-prtp · app.css
   Todo lo que NO viene del sistema impreso: el armazón de la SPA
   (pantallas, índice, campos de ejercicio, indicador de guardado).
   Requiere tokens.css y componentes.css cargados antes.

   Regla dura del encargo, aplicada acá: el cuerpo de lectura usa la
   escala --web-* en REM, nunca la escala cqw de la guía impresa (ver
   PLAN.md — "trampa técnica"). Los diagramas (.mitos/.modulos/.plazos/
   .cuadrantes) SÍ se quedan en cqw a propósito: con container-type
   establecido en la columna de lectura (abajo), cqw pasa a significar
   "% del ancho de la columna" — un contexto acotado y razonable — y así
   se conserva el mismo dibujo que ya EXISTE y ya está probado en el
   sistema impreso, en vez de recalcular a mano seis diagramas distintos.
   Es una lectura deliberada de "ninguna regla de LECTURA quedó en cqw":
   un diagrama no es texto de lectura. Señalado para revisión en
   CAMBIOS.md.
   ============================================================ */

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0;
  background: var(--azul-800);
  font-family: var(--lectura);
  color: var(--tinta-cuerpo);
  -webkit-font-smoothing: antialiased;
}

@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('/fuentes/Montserrat-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900;
  font-display: swap; src: url('/fuentes/SourceSans3-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('/fuentes/SourceSans3-Italic.woff2') format('woff2');
}

a { color: inherit; }
button { font: inherit; }

:focus-visible { outline: 3px solid var(--ambar-cl); outline-offset: 2px; }

/* ============================================================
   ARMAZÓN
   ============================================================ */
#app { min-height: 100dvh; display: flex; flex-direction: column; }
#app[hidden] { display: none; } /* el id le gana a [hidden] del UA stylesheet si no se repite acá */

#barra-superior {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--azul-900);
  border-bottom: 1px solid var(--azul-linea);
}
#boton-indice {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-chico);
  background: none; border: 1px solid var(--azul-linea); color: var(--blanco);
  font-size: 1.1rem; cursor: pointer;
}
#boton-indice:hover { border-color: var(--acero); }

#barra-progreso-envoltura { flex: 1; min-width: 0; }
.progreso-etq {
  display: flex; justify-content: space-between; gap: var(--e2);
  font-family: var(--display); font-weight: 700; font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acero);
  margin-bottom: 4px;
}
.progreso { height: 6px; border-radius: var(--r-pill); overflow: hidden; background: var(--azul-800); border: 1px solid var(--azul-linea); }
.progreso-relleno { height: 100%; width: 0; background: var(--ambar); border-radius: inherit; transition: width .3s ease; }

/* Flotante, abajo — cerca de donde la persona escribe, no arriba donde
   obliga a levantar la vista. Aparece solo cuando hay algo que decir y
   se saca del flujo de #barra-superior (position:fixed), así que la
   barra de progreso recupera el ancho completo sola, sin tocar su CSS. */
#indicador-guardado {
  position: fixed; left: 50%; bottom: var(--e5); z-index: 40;
  transform: translate(-50%, 0);
  display: flex; align-items: center; gap: .5em;
  font-family: var(--display); font-weight: 700; font-size: .8125rem;
  letter-spacing: .02em; white-space: nowrap;
  padding: .65em 1.1em; border-radius: var(--r-pill);
  background: var(--azul-900); color: var(--acero);
  box-shadow: 0 6px 20px rgba(8, 22, 31, .35), 0 0 0 1px var(--azul-linea);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
#indicador-guardado.visible { opacity: 1; visibility: visible; transform: translate(-50%, -2px); }
.indicador-guardando { color: var(--ambar); }
.indicador-guardado-ok { color: var(--acero); }
.indicador-sin-guardar { color: #ffb199; background: #3a1f18; box-shadow: 0 6px 20px rgba(58, 20, 10, .4), 0 0 0 1px #5a2e20; }
@media (min-width: 1024px) {
  #indicador-guardado { left: auto; right: var(--e6); transform: none; }
  #indicador-guardado.visible { transform: translateY(-2px); }
}

#pantalla-activa { flex: 1; outline: none; }

/* ============================================================
   ÍNDICE
   ============================================================ */
#fondo-indice {
  position: fixed; inset: 0; z-index: 29; background: rgba(8, 22, 31, .6);
  opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
#fondo-indice.visible { opacity: 1; visibility: visible; }

#indice {
  position: fixed; z-index: 30; top: 0; bottom: 0; left: 0;
  width: min(340px, 88vw);
  background: var(--azul-900); border-right: 1px solid var(--azul-linea);
  overflow-y: auto; padding: var(--e5) var(--e4);
  transform: translateX(-100%); transition: transform .2s ease;
}
#indice.abierto { transform: translateX(0); }

.indice-guia { margin-bottom: var(--e6); }
.indice-guia-titulo {
  font-family: var(--display); font-weight: 800; font-size: .8rem;
  letter-spacing: .08em; color: var(--blanco); margin: 0 0 var(--e3);
}
.indice-guia.inactiva { opacity: .5; }
.indice-guia-nota { font-size: .8rem; color: var(--acero); margin: 0; }

.indice-modulo { margin-bottom: var(--e4); }
.indice-modulo-titulo {
  font-family: var(--display); font-weight: 700; font-size: .7rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--acero);
  margin: 0 0 var(--e2);
}
.indice-lecciones { list-style: none; margin: 0; padding: 0; }
.indice-leccion a {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e2);
  border-radius: var(--r-chico);
  text-decoration: none; color: var(--acero-claro); font-size: .875rem;
}
.indice-leccion a:hover { background: rgba(255, 255, 255, .06); }
.indice-leccion-numero { font-family: var(--display); font-weight: 700; color: var(--acero); flex: none; }
.indice-leccion-titulo { flex: 1; }
.indice-leccion-icono { flex: none; color: var(--ambar); }
.indice-leccion-completado a { color: var(--blanco); }
.indice-leccion-actual a { background: rgba(242, 180, 65, .12); color: var(--blanco); font-weight: 600; }
.indice-leccion-abierta a { outline: 1px solid var(--ambar); }

@media (min-width: 1024px) {
  #boton-indice { display: none; }
  #fondo-indice { display: none; }
  #indice {
    /* Sin "height" fijo a propósito — ver la nota de abajo. */
    position: sticky; top: 57px; transform: none; min-height: calc(100dvh - 57px);
    border-right: 1px solid var(--azul-linea); flex: none;
  }
  #app { flex-direction: row; }
  #app > #barra-superior { position: fixed; top: 0; left: 0; right: 0; }
  #app { padding-top: 57px; }
  #pantalla-activa { flex: 1; min-width: 0; }
  /* Costura del punto 4: #indice tenía height (no min-height) fijo a
     100dvh-57px. Cuando la lección de al lado es más alta que un
     viewport (la mayoría lo son), la fila #app crece más allá de esa
     altura, pero la caja de #indice se quedaba corta — abajo de su
     propio borde inferior quedaba mostrando el fondo de <body>
     (--azul-800, más claro) en vez de --azul-900 de #indice, y ahí
     aparecía el cambio de tono a media altura. Con min-height en vez de
     height, #indice se estira con align-items:stretch (default de
     flex) hasta igualar la altura real de la fila — su fondo cubre
     todo el alto, sin costura, y sigue sticky igual. */
}

/* ============================================================
   PANTALLAS — contenedor común
   ============================================================ */
.pantalla { min-height: calc(100dvh - 57px); display: flex; flex-direction: column; padding: var(--e5) var(--e4); }
.pantalla-contenido { container-type: inline-size; width: 100%; max-width: 720px; margin-inline: auto; flex: 1; position: relative; }
.pantalla-contenido > :not(.cifra) { position: relative; z-index: 1; }

/* Cifra fantasma de apertura de módulo — el resto de sus reglas (tamaño,
   color, el truco de justify para "MÓDULO") ya vienen de componentes.css;
   ahí solo faltaba position:absolute, que en el original disparaba con
   ".page>.cifra" — selector que no existe en este proyecto (sin .page). */
.pantalla .cifra { position: absolute; z-index: 0; }
.pantalla-centrada { display: flex; flex-direction: column; justify-content: center; min-height: 60vh; }
.pantalla-atras {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--display); font-weight: 700; font-size: .8125rem;
  letter-spacing: .02em; text-decoration: none; color: var(--tinta-2);
  margin-bottom: var(--e5);
}
.pantalla-atras:hover { color: var(--ambar-osc); }
.pantalla.osc .pantalla-atras, .pantalla.osc.interior .pantalla-atras { color: var(--acero); }
.pantalla.osc .pantalla-atras:hover, .pantalla.osc.interior .pantalla-atras:hover { color: var(--ambar); }
.pantalla-accion { margin: var(--e7) 0 var(--e6); display: flex; justify-content: flex-end; }
.pantalla.osc .pantalla-accion { justify-content: center; }
/* El logo es hermano de .pantalla-contenido, no su hijo (ver
   render/portada.js y render/apertura.js), así que no hereda el
   max-width:720px + margin-inline:auto que centra esa columna — en
   pantallas anchas quedaba pegado al borde de .pantalla en vez de
   alinearse con el resto del contenido y con .foot (línea de abajo, que
   sí tiene ese ajuste). margin-left replica el mismo inset que produce
   ese centrado, sin tener que envolver el logo en un contenedor nuevo. */
.pantalla .logo { width: 100px; height: auto; margin-bottom: var(--e5); margin-left: max(0px, calc((100% - 720px) / 2)); }
.pantalla .foot { max-width: 720px; margin-inline: auto; width: 100%; }
/* "De Experto a / Consultor" del pie de portada y aperturas ahora parte
   en dos líneas (ver render/bloques.js, renderPie) — alineadas a la
   derecha, que es donde .pg ya vive dentro del .foot (display:flex,
   justify-content:space-between en componentes.css); sin esto, la
   segunda línea de un span multilínea se alinea a la izquierda del
   span por defecto aunque el span esté a la derecha de la fila. */
.foot .pg { text-align: right; white-space: nowrap; }
.foot > span:first-child { min-width: 0; }
/* Sello DEAC de la portada — el usuario rechazó la ubicación arriba
   (junto al logo): es una firma estampada, no un segundo logo, y ese
   gesto solo tiene sentido abajo, sobre el pie. Va como hermano entre
   .pantalla-contenido y .foot: al no llevar "margin-top:auto" (a
   diferencia de .foot), el flex-column de .pantalla lo deja apoyado
   justo encima del pie en el flujo normal, sin position:absolute ni
   medir la altura del pie (que varía si "Módulos 1 y 2 · 7 lecciones"
   se parte en dos líneas en pantallas angostas). El margin de la derecha
   replica el inset de la columna de 720px (mismo truco que .logo,
   arriba), y margin-left:auto lo empuja contra ese borde derecho.
   Nombre "sello-portada" y no "sello": .sello YA existe más arriba en
   este archivo (copiado de deac-web/componentes.css) como marca de agua
   impresa — opacity:.06, rotate(-10.2deg), pensada para ".page>.sello"
   (selector que no existe acá) — y de haber reusado el nombre, esas
   reglas habrían chocado en cascada contra esta (opacidad casi invisible
   y rotación no pedidas). Esa clase vieja sigue sin usarse en la app. */
.portada .sello-portada {
  display: block; position: relative; height: auto; aspect-ratio: 1817 / 1612;
  width: clamp(72px, 18vw, 110px);
  margin: var(--e6) max(0px, calc((100% - 720px) / 2)) 0 auto;
}
.portada .sello-portada .sello-color,
.portada .sello-portada .sello-acero { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ============================================================
   CORREOGRAFÍA DE PORTADA · v4
   Misma coreografía que deac-web (ver docs/MOVIMIENTO.md para la
   línea de tiempo completa y la fuente de cada token --esc-*/--dur-*),
   con los colores y la tipografía propios de deac-prtp — nunca los de
   app.html — y adaptada al layout lineal de esta app (deac-web usa un
   canvas proporcionado a A4 con posiciones absolutas; acá todo vive en
   el flujo normal de .pantalla, que ya es flex-column). Dos hilos en
   paralelo — texto y sello — que se reencuentran en el botón; el
   enganche del botón lo resuelve JS (ver motor.js, montarPortada),
   agregando la clase .lista cuando termina la última letra del tipeo.

   Simplificación deliberada frente a deac-web: ahí el sello, en su
   tamaño final, queda superpuesto al resto de la escena (canvas
   absoluto), así que necesita saltar de z-index alto a bajo al
   galvanizarse. Acá el sello en su tamaño final vive en su propio
   espacio, abajo, sin superponerse a nada — el único momento en que
   ocupa más espacio del que le corresponde es la entrada gigante, y
   ahí ya pinta encima del resto por ser el último elemento del DOM
   (mismo comportamiento, sin necesidad de animar z-index). */
.portada { overflow: clip; }

.portada .etq { opacity: 0; animation: portada-fade var(--mov-lento) var(--curva-entra) var(--esc-etq) both; }
@keyframes portada-fade { from { opacity: 0 } to { opacity: 1 } }

.portada .tt .l1 { opacity: 0;
  animation: portada-linea var(--mov-lento) var(--curva-entra) var(--esc-l1) both; }
@keyframes portada-linea {
  from { opacity: 0; transform: translateY(var(--mov-y)) scale(var(--mov-escala)) }
  to { opacity: 1; transform: none }
}

/* "zona de valor" entra con desenfoque, no solo con fundido — necesita
   su propio keyframe porque además anima filter, que no comparte con
   l1. El drop-shadow se repite en los dos extremos para que no
   desaparezca mientras el blur está activo (blur() y drop-shadow() son
   dos funciones del mismo filter: la segunda reemplaza a la primera
   entera si no van juntas). */
.portada .tt .l2.oro-tit { position: relative; opacity: 0; background-position: 0 0;
  animation:
    portada-linea-desenfoca var(--dur-l2) var(--curva-entra) var(--esc-l2) both,
    portada-reflejo var(--dur-reflejo) var(--curva-suave) var(--esc-reflejo) forwards;
}
@keyframes portada-linea-desenfoca {
  from { opacity: 0; transform: translateY(var(--mov-y)) scale(var(--mov-escala));
         filter: blur(11px) drop-shadow(0 0 .13em rgba(242,180,65,.26)) }
  to { opacity: 1; transform: none;
       filter: blur(0) drop-shadow(0 0 .13em rgba(242,180,65,.26)) }
}
@keyframes portada-reflejo {
  from { background-position: 0 0 }
  to { background-position: 2.475em 0 }
}

/* Destello: chispa de cuatro puntas, insertada por JS dentro de .l2
   (ver motor.js) — un <svg> propio, no un ::after: una forma de cuatro
   puntas con curvas cóncavas no se dibuja limpia solo con CSS. Aparece
   justo cuando el reflejo termina de pasar. */
.portada .destello { position: absolute; top: 38%; right: -.15em; width: .62em; height: .62em;
  margin-top: -.31em; pointer-events: none; color: var(--oro-alto, var(--ambar));
  filter: drop-shadow(0 0 .1em var(--ambar));
  opacity: 0; transform: scale(.2) rotate(-35deg);
  animation: portada-destello var(--dur-destello) var(--curva-sello) var(--esc-destello) both;
}
@keyframes portada-destello {
  0% { opacity: 0; transform: scale(.15) rotate(-35deg) }
  45% { opacity: 1; transform: scale(1.2) rotate(0deg) }
  100% { opacity: 0; transform: scale(.15) rotate(30deg) }
}

/* Filete: se dibuja de izquierda a derecha con el destello, por
   transform:scaleX (transform-origin:left), nunca animando width — el
   ancho real lo fija JS midiendo el largo de "zona de valor" (ver
   motor.js, medirFilete), igual que deac-web. */
.portada .filete.ligado { transform: scaleX(0); transform-origin: left;
  animation: portada-filete var(--dur-filete) var(--curva-entra) var(--esc-filete) both; }
@keyframes portada-filete { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* Tipeo letra por letra: JS parte .dek en spans .letra y les pone
   animation-delay (ver motor.js) — acá solo el keyframe y la duración
   de CADA letra. */
.portada .letra { opacity: 0; animation: portada-fade var(--dur-letra) linear forwards; }

/* ---------- sello · dos hilos propios, independiente del texto ---------- */
/* Nace gigante — se achica en línea recta hasta su tamaño y lugar
   final, sin rebote ni parada intermedia (--curva-suave, no
   --curva-sello: con un salto de escala tan grande el rebote lo
   achicaba casi a un punto antes de asentarlo). will-change avisa al
   navegador que esto va a animar. */
.portada .sello-portada { opacity: 0; will-change: transform;
  transform-origin: 72% 60%;
  animation: portada-sello-estampa var(--dur-sello-entra) var(--curva-suave) var(--esc-sello) forwards;
}
@keyframes portada-sello-estampa {
  0% { opacity: 1; transform: scale(4.5) }
  100% { opacity: 1; transform: scale(1) }
}
/* Galvanizado: dos imágenes ya resueltas de antemano (a color y
   pre-teñida en acero), no una imagen a color con una máscara CSS en
   vivo — más simple y no depende de que mask-image se soporte igual en
   todas partes. La de acero termina en opacidad de fantasma, no opaca
   al 100%. La duración real no es --dur-galvaniza fijo: motor.js la
   reemplaza por --dur-tipeo-calc (la mitad de lo que tarda el tipeo
   completo), para que las dos cosas terminen juntas — lo que queda acá
   es solo el respaldo si esa variable no llegara a fijarse. */
.portada .sello-portada .sello-color { opacity: 1;
  animation: portada-galvaniza-color var(--dur-tipeo-calc, var(--dur-galvaniza)) var(--curva-suave) var(--esc-galvaniza) both; }
@keyframes portada-galvaniza-color { from { opacity: 1 } to { opacity: 0 } }
.portada .sello-portada .sello-acero { opacity: 0;
  animation: portada-galvaniza-acero var(--dur-tipeo-calc, var(--dur-galvaniza)) var(--curva-suave) var(--esc-galvaniza) both; }
@keyframes portada-galvaniza-acero { from { opacity: 0 } to { opacity: .4 } }

/* Pie: filete inferior + los dos textos, ya con el sello en su sitio. */
.portada .foot { opacity: 0;
  animation: portada-fade var(--dur-pie) var(--curva-suave) var(--esc-pie) both; }

/* Botón: JS agrega .lista cuando termina la última letra del tipeo (o
   antes, si el tipeo resultara más corto que el resto). Desenfoque de
   entrada, mismo lenguaje que el titular: "enfocándose". Mientras
   tanto queda con disabled= true (motor.js), así que no hace falta
   pointer-events:none acá para evitar un clic de casualidad. */
.portada .pantalla-accion { opacity: 0; filter: blur(8px); transform: scale(1.04); }
.portada .pantalla-accion.lista {
  animation: portada-enfoca var(--dur-cierre) var(--curva-suave) both; }
@keyframes portada-enfoca {
  from { opacity: 0; filter: blur(8px); transform: scale(1.04) }
  to { opacity: 1; filter: blur(0); transform: scale(1) }
}

/* Con prefers-reduced-motion, JS ya deja el tipeo intacto (sin separar
   en spans) y agrega .lista de inmediato — acá solo falta que el resto
   de los elementos, que arrancan en opacity:0 más arriba, aparezcan
   directo en su estado final en vez de quedar invisibles para
   siempre (ninguno tendría animación que los lleve ahí). El sello
   aparece ya "asentado y galvanizado" (sello-color en 0, sello-acero en
   .4), sin el paso de entrada gigante. */
@media (prefers-reduced-motion: reduce) {
  .portada .etq,
  .portada .tt .l1,
  .portada .tt .l2.oro-tit,
  .portada .filete.ligado,
  .portada .sello-portada,
  .portada .foot,
  .portada .pantalla-accion {
    animation: none !important;
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .portada .destello { animation: none !important; opacity: 0 !important; }
  .portada .sello-portada .sello-color { animation: none !important; opacity: 0 !important; }
  .portada .sello-portada .sello-acero { animation: none !important; opacity: .4 !important; }
}

@media (min-width: 641px) {
  .pantalla { padding: var(--e7) var(--e6); }
}
@media (min-width: 1024px) {
  .pantalla { padding: var(--e8) var(--e7); }
}

/* Transición sobria entre pantallas — nada de coreografía (ver PLAN.md:
   "Sin animaciones"). Un fundido corto, respetado por prefers-reduced-motion. */
.pantalla { animation: pantalla-entra .18s ease both; }
@keyframes pantalla-entra { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; transition-duration: 1ms !important;
  }
}

/* ============================================================
   ESCALA WEB EN REM — nunca cqw para texto de lectura
   ============================================================
   No es solo tamaño de letra: componentes.css también pone en cqw el
   ESPACIADO (padding, margin, gap) de cada uno de estos componentes. Un
   grep inicial que solo miró font-size lo dejó pasar — corregido acá:
   cada regla de abajo pisa TANTO el tamaño como el espaciado de su
   selector, para que no quede ninguna medida de lectura atada al ancho
   del contenedor. Lo único que se deja en cqw (más abajo, sección
   DIAGRAMAS) es lo que no es texto de lectura: el número fantasma de
   apertura de módulo y el tamaño del sello — ver esa sección para el
   porqué. */
.pantalla-contenido .marca { gap: var(--e2); }
.pantalla-contenido .marca i { width: 3px; height: 15px; }
.pantalla-contenido .marca span { font-size: .8rem; }
.pantalla-contenido .run,
.pantalla .foot { font-size: var(--web-foot); padding-block: .6em; }
.pantalla-contenido .etq { font-size: var(--web-etq); }
.pantalla-contenido .tt { font-size: clamp(2.25rem, 6vw + 1rem, 4.5rem); line-height: 1.05; }
.pantalla-contenido .tt-mod { font-size: clamp(2rem, 5vw + 1rem, 3.75rem); line-height: 1.08; }
.pantalla-contenido .filete { margin: var(--e5) 0; }
.pantalla-contenido h3 { font-size: var(--web-h3); line-height: 1.15; max-width: none; margin: 0 0 var(--e4); }
.pantalla-contenido h4 { font-size: var(--web-h4); line-height: 1.3; margin: var(--e6) 0 var(--e3); }
.pantalla-contenido p { font-size: var(--web-p); line-height: 1.65; max-width: 68ch; margin-bottom: 1.1em; }
.pantalla-contenido .dek { font-size: var(--web-dek); max-width: 40ch; line-height: 1.45; margin-top: var(--e5); }
.pantalla-contenido .gancho { font-size: var(--web-gancho); line-height: 1.5; max-width: 46ch; padding-left: var(--e4); margin-bottom: var(--e5); }
.pantalla-contenido .nota { font-size: calc(var(--web-p) * .85); max-width: 62ch; }
.pantalla-contenido ul,
.pantalla-contenido ol { margin-bottom: var(--e4); }
.pantalla-contenido li { font-size: var(--web-p); line-height: 1.6; max-width: 68ch; padding-left: 1.15em; margin-bottom: .6em; }
.pantalla-contenido li::before { top: .55em; width: .7em; }
.pantalla-contenido ol li { padding-left: 1.5em; }
.pantalla-contenido ol li::before { font-size: .9em; top: .1em; }
.pantalla-contenido .caja { padding: var(--e5); margin: var(--e5) 0; }
.pantalla-contenido .clave { padding: var(--e4) var(--e5); margin: var(--e5) 0 0; }
.pantalla-contenido .clave .t,
.pantalla-contenido .caja .t,
.pantalla-contenido .turno .t { font-size: var(--web-rotulo); margin-bottom: var(--e2); }
.pantalla-contenido .caja p,
.pantalla-contenido .clave p { font-size: var(--web-p); }
.pantalla-contenido .turno { border-radius: var(--r-medio); padding: var(--e5); margin-top: var(--e5); }
.pantalla-contenido table { font-size: var(--web-p); margin-top: var(--e4); }
.pantalla-contenido th { font-size: .8rem; padding: 0 var(--e3) var(--e2) 0; }
.pantalla-contenido td { padding: var(--e2) var(--e3) var(--e2) 0; }
.pantalla-contenido .formula { font-size: calc(var(--web-p) * 1.15); }
.pantalla-contenido .msj { font-size: calc(var(--web-p) * 1.05); }
.pantalla-contenido .campo { font-size: .8rem; margin: var(--e4) 0 0; }
.pantalla-contenido .cont { margin-top: var(--e7); }
.pantalla-contenido .cont span { font-size: clamp(1.75rem, 5vw + 1rem, 3.25rem); }

/* ---------- DIAGRAMAS ----------
   Se dejan en cqw a propósito, acotados por container-type en
   .pantalla-contenido (arriba): son dibujos, no prosa — el número "01"/
   "02" gigante y traslúcido detrás del titular de apertura, y el tamaño
   del sello/logo. El TEXTO real que llevan adentro (los cuatro mitos, las
   descripciones de .modulos/.plazos, los nombres de .cuadrantes) ya
   hereda de los selectores de arriba (p, span de lectura) o se corrige
   explícitamente abajo — nada de lo que se LEE queda en cqw. */
.pantalla-contenido .mitos span,
.pantalla-contenido .cuadrantes span,
.pantalla-contenido .plazos b,
.pantalla-contenido .modulos b,
.pantalla-contenido .mitos b,
.pantalla-contenido .cuadrantes b,
.pantalla-contenido .rotulo { font-size: var(--web-p); }
.pantalla-contenido .mitos b { width: auto; min-width: 2.2em; font-size: var(--web-h4); }
/* Proporción de la cifra ámbar contra el título de lección (--web-h3),
   igual que en el PDF fuente: ahí .modulos b va a 6.2cqw, más grande que
   su propio h3 (5.1cqw) — acá no puede ir en cqw (es texto que se lee),
   así que se toma el token de titular más grande disponible. El ancho de
   la columna va en rem, no en em, para que no dependa del font-size
   propio de cada elemento — si no, el rótulo de encabezado (que hereda
   un font-size mucho más chico) mide una columna angosta y el texto de
   las filas no arranca a la misma altura que su encabezado. */
.pantalla-contenido .modulos b { width: auto; min-width: 4.5rem; font-size: var(--web-h3); }
.pantalla-contenido .plazos b { width: auto; min-width: 5.5rem; font-size: var(--web-h4); }
.pantalla-contenido .rotulo { font-size: .75rem; padding-bottom: var(--e2); }
/* El rótulo de columna ("MÓDULO", "PERÍODO") hereda por accidente el
   ámbar, el peso y el tracking de los números de fila de
   .modulos/.plazos/.mitos — mismo tono, peso y tracking que "Qué vas a
   resolver"/"Qué está pasando" (ver .rotulo arriba), nunca el de la
   cifra. Mismo ajuste que el PDF fuente (pdf_zona_de_valor_V7.html,
   ".modulos .rotulo b, .plazos .rotulo b"). */
.pantalla-contenido .rotulo b {
  color: var(--tinta-2); font-size: inherit;
  font-weight: inherit; letter-spacing: inherit;
}
.pantalla-contenido .cuadrantes { width: 100%; max-width: 480px; }
/* OJO: acá NO va font-size (ni "inherit" ni ningún valor) para
   .venn-etq/.venn-centro — el tamaño de letra del venn vive como
   atributo del propio SVG (ver render/bloques.js), justamente para que
   escale en proporción con el dibujo. "inherit" parecía inocuo pero
   GANABA contra el atributo del SVG en la cascada (una propiedad CSS
   real siempre le gana a un atributo de presentación, así sea
   "inherit") y, como nada más en la cadena de herencia le fija un
   tamaño, terminaba heredando el 16px por defecto del navegador — el
   texto del venn llevaba semanas renderizando más chico de lo que
   decía cualquier font-size que se le pusiera en bloques.js. Encontrado
   al revisar el punto 5 (corrección de interfaz sobre capturas). Si
   hace falta blindar el venn de la escala cqw de algún lado, que sea
   con un selector más específico que compita en especificidad, nunca
   con font-size a secas.*/

/* Portada/apertura: coreografía apagada, pero conservan tt/dek grandes y
   centradas, como pide el encargo ("exactamente como en el PDF"). */
.pantalla.osc .pantalla-contenido,
.pantalla.osc.interior .pantalla-contenido { text-align: left; }

/* ============================================================
   VENN — geometría propia (ver nota de cabecera)
   ============================================================ */
/* El tamaño de letra va como atributo del propio SVG (25 / 88, en las
   unidades del viewBox original) para que escale en proporción con el
   dibujo — un font-size en px de CSS no respetaría esa escala. */
.venn { width: 100%; max-width: 460px; display: block; margin: var(--e6) auto; height: auto; }
.venn-etq {
  font-family: var(--display); font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase; fill: var(--tinta);
}
.venn-centro { font-family: var(--display); font-weight: 900; }

/* ============================================================
   CIERRE DE MÓDULO
   ============================================================ */
.pantalla-cierre-modulo .cierre-modulo-aviso { color: var(--tinta-2); font-size: .9rem; }
.cierre-modulo-preguntas { display: flex; flex-direction: column; gap: var(--e6); margin-top: var(--e5); }
.cierre-modulo-pregunta { border: none; padding: 0; margin: 0; }
.cierre-modulo-pregunta legend {
  float: left; width: 100%; /* mismo motivo que legend.campo-etiqueta — ver esa nota */
  font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--tinta); margin-bottom: var(--e3); padding: 0;
}
.cierre-modulo-pregunta legend + * { clear: both; }
.cierre-modulo-escala { display: flex; gap: var(--e2); flex-wrap: wrap; }
.cierre-modulo-punto { position: relative; }
.cierre-modulo-punto input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.cierre-modulo-punto span {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--papel-linea); font-family: var(--display); font-weight: 700;
  color: var(--tinta-2);
}
.cierre-modulo-punto input:checked + span { background: var(--ambar); border-color: var(--ambar); color: var(--azul-800); }
.cierre-modulo-punto input:focus-visible + span { outline: 3px solid var(--ambar-cl); outline-offset: 2px; }

/* ============================================================
   CIERRE DE GUÍA / EXPEDIENTE
   ============================================================ */
.expediente { margin-top: var(--e6); display: flex; flex-direction: column; gap: var(--e6); }
.expediente-leccion h3 { font-size: var(--web-h4); margin-bottom: var(--e2); }
.expediente-campo { margin-bottom: var(--e3); }
.expediente-campo-etiqueta { font-family: var(--display); font-weight: 700; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); margin: 0 0 4px; }
.expediente-campo p, .expediente-campo ul { margin: 0; font-size: .95rem; }
.expediente-campo ul { padding-left: 1.2em; }
.expediente-descargar, .cuestionario-enlace { margin-top: var(--e6); }
.cuestionario-enlace { padding-top: var(--e5); border-top: 1px solid var(--papel-linea); }

/* ============================================================
   CUESTIONARIO FINAL
   ============================================================ */
.cuestionario-intro { margin: var(--e5) 0 var(--e6); padding: var(--e4) var(--e5);
  background: var(--papel-panel); border-radius: var(--r-medio); }
.cuestionario-intro-linea { margin: 0 0 var(--e2); font-size: .95rem; color: var(--tinta-2); }
.cuestionario-intro-linea:last-child { margin-bottom: 0; }
.cuestionario-intro-linea b { color: var(--tinta); }

.cuestionario-seccion { margin-bottom: var(--e7); }
.cuestionario-seccion h4 {
  font-family: var(--display); font-weight: 800; font-size: 1.0625rem; color: var(--tinta);
  margin: 0 0 var(--e2); padding-bottom: var(--e2); border-bottom: 1px solid var(--papel-linea);
}
.cuestionario-seccion > .cuestionario-nota:first-of-type { margin-top: 0; }
.cuestionario-nota { font-size: .875rem; font-style: italic; color: var(--tinta-2); margin: var(--e2) 0 var(--e4); }
.cuestionario-pregunta { margin-top: var(--e5); }
.cuestionario-pregunta:first-of-type { margin-top: var(--e4); }
.cuestionario-numero {
  display: inline-block; font-family: var(--display); font-weight: 800; font-size: .75rem;
  color: var(--ambar-osc); letter-spacing: .06em; margin-bottom: var(--e2);
}
.cuestionario-pregunta .cuestionario-nota { margin: var(--e2) 0 0; }
.cuestionario-aviso {
  background: #F8DDD1; color: #8A3B1B; font-weight: 600; font-size: .9rem;
  padding: var(--e3) var(--e4); border-radius: var(--r-chico); margin-top: var(--e5);
}
.cuestionario-aviso[hidden] { display: none; }

.campo-escala-opcional-ayuda { font-size: .8125rem; color: var(--tinta-2); margin: 0 0 var(--e3); }
.campo-escala-opcional-fila { display: flex; gap: var(--e2); flex-wrap: wrap; }
.campo-escala-opcional-punto { position: relative; }
.campo-escala-opcional-punto input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.campo-escala-opcional-fila .campo-escala-opcional-punto span {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--papel-linea); font-family: var(--display); font-weight: 700;
  color: var(--tinta-2); cursor: pointer;
}
.campo-escala-opcional-fila .campo-escala-opcional-punto input:checked + span {
  background: var(--ambar); border-color: var(--ambar); color: var(--azul-800);
}
.campo-escala-opcional-punto input:focus-visible + span { outline: 3px solid var(--ambar-cl); outline-offset: 2px; }
.campo-escala-opcional-no-responde { margin-top: var(--e3); }
.campo-escala-opcional-no-responde .campo-escala-opcional-punto {
  display: flex; align-items: center; gap: var(--e3); font-size: .875rem; color: var(--tinta-2); cursor: pointer;
}
.campo-escala-opcional-no-responde .campo-escala-opcional-punto span {
  width: auto; height: auto; border-radius: 0; border: none; font-family: var(--lectura); font-weight: 400;
}
.campo-escala-opcional-no-responde input { position: static; opacity: 1; width: 18px; height: 18px; flex: none; }

/* ============================================================
   PANTALLA DE ENTRADA (código) y CONSENTIMIENTO
   ============================================================ */
#entrada[hidden] { display: none; } /* mismo motivo que #app[hidden] más arriba */
.pantalla-entrada {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  background: var(--campo-oscuro); padding: var(--e5);
}
.pantalla-entrada form {
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--e4); align-items: stretch;
}
.pantalla-entrada .logo { width: 90px; height: auto; align-self: center; }
.pantalla-entrada h1 { font-family: var(--display); font-size: 1.5rem; color: var(--blanco); text-align: center; margin: 0; }
.pantalla-entrada input {
  font-size: 1.25rem; text-align: center; letter-spacing: .2em; text-transform: uppercase;
  padding: var(--e3); border-radius: var(--r-chico); border: 1.5px solid var(--azul-linea);
  background: var(--azul-800); color: var(--blanco);
}
.pantalla-entrada input:focus-visible { border-color: var(--ambar); outline: none; }
#entrada-error, #consentimiento-error { color: #ff9a6b; font-size: .9rem; }

.pantalla-consentimiento .consentimiento-casilla {
  display: flex; gap: var(--e3); align-items: flex-start; margin: var(--e4) 0; font-size: .95rem; cursor: pointer;
}
.pantalla-consentimiento .consentimiento-casilla input { flex: none; width: 20px; height: 20px; margin-top: 2px; }

/* ============================================================
   CAMPOS DE EJERCICIO
   El bloque de escritura va sobre --papel, un punto elevado respecto del
   fondo — ver PLAN.md.
   ============================================================ */
.ejercicio-campos { display: flex; flex-direction: column; gap: var(--e6); margin-top: var(--e6); }
.campo-envoltura {
  background: var(--papel); border: 1px solid var(--papel-linea); border-radius: var(--r-medio);
  padding: var(--e5); box-shadow: 0 2px 10px rgba(11, 31, 46, .06);
}
.campo-etiqueta {
  display: block; font-family: var(--display); font-weight: 700; font-size: .95rem;
  color: var(--tinta); margin: 0 0 var(--e3); padding: 0; border: none;
}
/* Un <legend> se pinta por defecto montado sobre el borde superior de su
   <fieldset> (comportamiento nativo, no un margen que se pueda corregir
   con margin/padding normales). float lo saca de ese modo especial y lo
   vuelve un bloque más dentro de la caja, con su padding respetado —
   ancho 100% porque un float se encoge al contenido si no se le fuerza.
   Nunca afecta a .campo-etiqueta cuando es <label> (campos simples), que
   no tiene este problema — por eso el selector va atado a la etiqueta.

   Aun con el float al 100%, el primer hermano de DESPUÉS del legend se
   probó quedando pegado a su borde derecho con ancho 0 en vez de bajar
   solo (comprobado en el navegador, no algo teórico) — el propio legend
   flotante no alcanza a "llenar la línea" para el elemento inmediato
   siguiente. `+ *` lo despeja sea cual sea ese elemento, así ningún
   consumidor nuevo de este patrón se puede olvidar de ponerlo. */
legend.campo-etiqueta { float: left; width: 100%; }
legend.campo-etiqueta + * { clear: both; }
.campo-opcion { border: none; }

.campo-texto, .campo-parrafo, .campo-numero, .campo-fecha, .campo-lista-agregar input {
  width: 100%; font-family: var(--lectura); font-size: 1rem;
  padding: .7em var(--e3); border: 1.5px solid var(--papel-linea); border-radius: var(--r-chico);
  background: #fff; color: var(--tinta-cuerpo);
}
.campo-texto:focus-visible, .campo-parrafo:focus-visible, .campo-numero:focus-visible,
.campo-fecha:focus-visible, .campo-lista-agregar input:focus-visible { border-color: var(--ambar-osc); outline: none; }
.campo-parrafo { resize: vertical; min-height: 6em; }
.campo-numero-fila { display: flex; align-items: center; gap: var(--e3); }
.campo-numero { max-width: 12ch; }
.campo-numero-unidad { color: var(--tinta-2); font-size: .875rem; }

.campo-opcion-fila {
  display: flex; align-items: center; gap: var(--e3); padding: var(--e2) 0; cursor: pointer; font-size: .95rem;
}
.campo-opcion-fila input:not(.sr-solo) { width: 18px; height: 18px; flex: none; }

.campo-seleccion-orden-fila { align-items: center; }
.campo-seleccion-orden-numero {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: .75rem;
  border: 1.5px solid var(--papel-linea); color: transparent;
}
.campo-seleccion-orden-numero.activo { background: var(--ambar); border-color: var(--ambar); color: var(--azul-800); }
/* El círculo es la única marca visible — el checkbox real está detrás,
   oculto con .sr-solo (ver seleccion-orden.js), así que el foco de
   teclado tiene que verse en el círculo, no en un control invisible. */
.campo-seleccion-orden-fila input:focus-visible + .campo-seleccion-orden-numero {
  outline: 3px solid var(--ambar-cl); outline-offset: 2px;
}
.campo-seleccion-orden-texto { flex: 1; }

.campo-lista-contador {
  font-family: var(--display); font-weight: 700; font-size: .75rem; color: var(--tinta-2); margin-left: var(--e2);
}
.campo-lista-contador.completo { color: var(--ambar-osc); }
.campo-lista-items { list-style: none; margin: 0 0 var(--e3); padding: 0; }
.campo-lista-item {
  display: flex; align-items: center; gap: var(--e3); padding: var(--e2) 0;
  border-bottom: 1px solid var(--papel-linea);
}
.campo-lista-texto { flex: 1; }
.campo-lista-icono {
  flex: none; background: none; border: none; color: var(--tinta-2);
  cursor: pointer; padding: .4em; border-radius: var(--r-chico);
  display: flex; align-items: center; justify-content: center;
}
.campo-lista-icono:hover { color: var(--tinta); background: var(--papel-panel); }
.campo-lista-borrar:hover { color: #a8342f; }
.campo-lista-editar { width: 100%; }
.campo-lista-agregar { display: flex; gap: var(--e3); flex-direction: column; }
@media (min-width: 480px) {
  .campo-lista-agregar { flex-direction: row; }
  .campo-lista-agregar input { flex: 1; }
}

.campo-vacio { color: var(--tinta-2); font-size: .9rem; }
.campo-vacio a { color: var(--ambar-osc); font-weight: 600; }
.campo-seleccion-lista { display: flex; flex-direction: column; gap: var(--e2); }
.campo-seleccion-fila {
  display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e3);
  border: 1px solid var(--papel-linea); border-radius: var(--r-chico); cursor: pointer; font-size: .95rem;
}
.campo-seleccion-fila input { width: 18px; height: 18px; flex: none; }
.campo-seleccion-eliminado { border-color: #e3b8a0; background: #fff6f1; cursor: default; justify-content: space-between; }
.campo-seleccion-nota { color: #a8562f; font-size: .8rem; font-style: italic; flex: none; }
.campo-seleccion-contador { font-family: var(--display); font-weight: 700; font-size: .8rem; color: var(--tinta-2); margin: 0 0 var(--e3); }
.campo-seleccion-contador.completo { color: var(--ambar-osc); }

.campo-formula-subcampo { margin-bottom: var(--e3); }
.campo-formula-subcampo label { display: block; font-size: .8rem; color: var(--tinta-2); margin-bottom: 4px; }
.campo-formula-subcampo input {
  width: 100%; font-family: var(--lectura); font-size: 1rem;
  padding: .7em var(--e3); border: 1.5px solid var(--papel-linea); border-radius: var(--r-chico);
  background: #fff; color: var(--tinta-cuerpo);
}
.campo-formula-subcampo input:focus-visible { border-color: var(--ambar-osc); outline: none; }
.campo-formula-vista-previa {
  margin-top: var(--e4); padding: var(--e3); background: var(--papel-panel); border-radius: var(--r-chico);
  font-family: var(--display); font-weight: 600; color: var(--tinta);
}

.caja-copiable { position: relative; }
.caja-copiar { margin-top: var(--e3); }