/* ============================================================
   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; }

#indicador-guardado {
  flex: none; font-family: var(--display); font-weight: 700; font-size: .6875rem;
  letter-spacing: .05em; color: var(--acero); white-space: nowrap;
  max-width: 40vw; overflow: hidden; text-overflow: ellipsis;
}
.indicador-guardando { color: var(--ambar); }
.indicador-guardado-ok { color: var(--acero); }
.indicador-sin-guardar { color: #ff9a6b; }

#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-parte { margin-bottom: var(--e6); }
.indice-parte-titulo {
  font-family: var(--display); font-weight: 800; font-size: .8rem;
  letter-spacing: .08em; color: var(--blanco); margin: 0 0 var(--e3);
}
.indice-parte.inactiva { opacity: .5; }
.indice-parte-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 {
    position: sticky; top: 57px; transform: none; 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; }
}

/* ============================================================
   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-accion { margin-top: var(--e7); display: flex; justify-content: flex-end; }
.pantalla.osc .pantalla-accion { justify-content: center; }
.pantalla .logo { width: 100px; height: auto; margin-bottom: var(--e5); }
.pantalla .foot { max-width: 720px; margin-inline: auto; width: 100%; }

@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,
.pantalla-contenido .modulos b { width: auto; min-width: 2.2em; font-size: var(--web-h4); }
.pantalla-contenido .plazos b { width: auto; min-width: 5em; font-size: var(--web-rotulo); }
.pantalla-contenido .rotulo { font-size: .75rem; padding-bottom: var(--e2); }
.pantalla-contenido .cuadrantes { width: 100%; max-width: 480px; }
.pantalla-contenido .venn-etq,
.pantalla-contenido .venn-centro { font-size: inherit; } /* venn es SVG propio, ver render/bloques.js — no hereda cqw del sistema impreso */

/* 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)
   ============================================================ */
.venn { width: 100%; max-width: 420px; display: block; margin: var(--e6) auto; height: auto; }
.venn-circulo { fill: var(--ambar); fill-opacity: .16; stroke: var(--ambar-osc); stroke-width: 1; }
.venn-etq {
  font-family: var(--display); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; fill: var(--tinta-2);
}
.venn-centro { font-family: var(--display); font-weight: 800; font-size: 22px; fill: var(--ambar-osc); }

/* ============================================================
   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 {
  font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--tinta); margin-bottom: var(--e3); padding: 0;
}
.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); }

/* ============================================================
   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; 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;
}
.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 { width: 18px; height: 18px; flex: none; }

.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; cursor: pointer; }
.campo-lista-borrar {
  flex: none; background: none; border: none; color: var(--tinta-2); font-family: var(--display);
  font-weight: 700; font-size: .75rem; cursor: pointer; padding: .3em .5em;
}
.campo-lista-borrar:hover { color: var(--tinta); }
.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-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); }