/* Rompe el Ciclo · estilos específicos de pantalla
 *
 * Tercera y última hoja. Orden de carga obligatorio:
 *   1. tokens.css   variables de marca (paleta, tipografía, ritmo, movimiento)
 *   2. base.css     reset y componentes compartidos
 *   3. screens.css  este archivo, estilos propios de cada pantalla
 *
 * Reglas vinculantes de este archivo:
 *   · Solo se animan `transform` y `opacity` (RNF-05). Nunca layout.
 *   · Las duraciones salen de los tokens, que ya se ponen a cero con
 *     `prefers-reduced-motion` (RNF-04).
 *   · El rojo `--loop` jamás califica un dato del usuario (AR-03).
 *   · Ningún color literal: todo sale de tokens.css.
 *
 * Estado: Fase 0. Aquí viven de momento las fuentes locales y la pantalla de
 * arranque. Las pantallas del protocolo se añaden en las fases 3 y 4.
 */

/* ==========================================================================
   Fuentes locales (T-03, RNF-03, AD-13)
   ==========================================================================
   Servidas desde `app/fonts/`, cero peticiones externas. Ambas son fuentes
   variables en subconjunto latino, que es el que cubre el español completo
   (incluye U+00C0 a U+00FF: ñ, á, é, í, ó, ú, ü, ¿, ¡).

   Origen exacto de los archivos, por si hay que volver a bajarlos:
     Fraunces  fonts.gstatic.com, familia Fraunces v38, ejes opsz 9..144 y
               wght 300..700, subconjunto `latin`  →  fraunces-latin-var.woff2
     Inter     fonts.gstatic.com, familia Inter v20, eje wght 400..700,
               subconjunto `latin`                 →  inter-latin-var.woff2
   Se obtienen pidiendo a fonts.googleapis.com/css2 con un agente de usuario
   moderno y descargando la URL del bloque comentado como `latin`.

   `font-display: swap` deja que el texto se lea de inmediato con la pila de
   respaldo del sistema definida en tokens.css. Si estos dos archivos faltan,
   la app se ve con Georgia y con la de sistema, y sigue funcionando entera. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fraunces trae eje de tamaño óptico. Dejarlo automático hace que los títulos
   grandes se vean con el dibujo de display y el texto pequeño con el de lectura. */
html { font-optical-sizing: auto; }

/* ==========================================================================
   Barra de progreso: estado inicial
   ==========================================================================
   base.css define el aspecto de la barra. Aquí solo se fija el punto de
   partida en cero para que no aparezca llena en el primer pintado. La
   anchura la gobierna la capa de aplicación al cambiar de paso. */

.progress__fill { width: 0; }

/* ==========================================================================
   Pantalla de arranque (Fase 0)
   ==========================================================================
   Provisional. Confirma que el módulo ES carga, que la marca se ve y que los
   servicios base responden. La sustituye el router de la Fase 2 (T-15). */

.boot {
  justify-content: center;
  gap: var(--gap-m);
}

.boot__mark {
  font-size: var(--text-huge);
  line-height: 0.86;
  font-weight: 300;
}

.boot__checks {
  list-style: none;
  margin: var(--gap-m) 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.boot__check {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-s);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.boot__value { color: var(--ink-soft); text-align: right; }
.boot__value.is-exit { color: var(--exit); }

/* Un servicio que no responde se marca con tinta plena, nunca con el rojo del
   bucle: ese color queda reservado para la predicción de la cabeza (AR-03). */
.boot__value.is-alert { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   T-18 a T-21 · Inicio y pasos 1 a 5
   ==========================================================================
   Añadido al final, sin tocar nada de lo anterior. Reglas que se respetan
   aquí igual que en el resto del archivo: ningún color literal, solo tokens;
   solo se animan `transform` y `opacity`; el rojo `--loop` no toca ningún dato
   de la persona. */

/* El encabezado de cada pantalla recibe el foco al montar (a11y.js le pone
   tabindex -1). Sin esta regla el anillo sería el azul del sistema, que no es
   de la paleta. Se mantiene visible: es la única señal de dónde está el foco. */
.screen .ask:focus-visible {
  outline: 2px solid var(--exit);
  outline-offset: 4px;
  border-radius: var(--radius);
}

/* El formulario es la columna de la pantalla, para que Intro en un campo
   envíe el paso sin código de teclas y el pie siga pegado abajo. */
.step-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Jerarquía deliberada: la pregunta del paso manda, la del deslizador va un
   escalón por debajo aunque comparta la serif. */
.step__scale .ask {
  font-size: var(--text-lead);
  line-height: 1.2;
  margin-bottom: 0;
}

.step__helper { margin-bottom: var(--gap-m); }

/* Nota del encogimiento con tope. Tinta suave sobre papel hundido: es una
   confirmación tranquila, jamás un aviso. */
.step__note {
  margin: 0 0 var(--gap-m);
  padding: 0.8rem 1rem;
  background: var(--paper-sunk);
  border-left: 2px solid var(--exit);
  border-radius: var(--radius);
  font-size: var(--text-small);
  color: var(--ink-soft);
  max-width: 40ch;
}

/* ---------- inicio ---------- */

.home__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

/* La marca ocupa el aire de arriba y empuja las tarjetas hacia la mano. */
.home__mark {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  padding-top: var(--gap-l);
}

.home__title {
  font-size: var(--text-huge);
  font-weight: 300;
  line-height: 0.88;
  margin: 0;
  max-width: 8ch;
}

.card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--gap-s) var(--gap-s) var(--gap-s);
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

/* El plan en pie se distingue por el verde de la salida, nunca por una marca
   de urgencia ni de retraso. */
.card--plan { border-left: 3px solid var(--exit); }

.card__line {
  font-family: var(--serif);
  font-size: var(--text-lead);
  line-height: 1.25;
  margin: 0;
}

/* Las dos salidas del borrador, con el mismo ancho y la misma clase de botón:
   ninguna de las dos es la recomendada. */
.card__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-xs);
}
.card__pair .btn { padding-inline: 0.5rem; }

/* ---------- paso 5, el plan ---------- */

.plan__block { margin-bottom: var(--gap-m); }

.plan__detail:empty { display: none; }

.field--short {
  font-size: var(--text-body);
  margin-top: var(--gap-xs);
}

/* El selector nativo de hora: mismo trazo que el resto de campos, ancho al
   contenido para que no parezca un campo de texto vacío. */
.field--time {
  width: auto;
  min-width: 8ch;
  font-family: var(--sans);
}

.plan__helper { margin: var(--gap-xs) 0 0; }

/* ---------- confirmación del plan diferido ---------- */

.plan-listo .screen__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ==========================================================================
   T-22 y T-23 · Paso 6 (temporizador), paso 7 (contraste) y cierre
   ==========================================================================
   Añadido al final, sin tocar nada de lo anterior. Se respetan las mismas
   reglas del archivo: ningún color literal, solo tokens; solo se animan
   `transform` y `opacity`; el rojo `--loop` no toca ningún dato de la persona,
   solo la predicción de su cabeza.

   Sobre el minuto 5: aquí no hay ninguna regla de alarma. No existe un estado
   `.is-alerta`, ni un color que cambie al cruzar un umbral, ni una animación
   que llame la atención. La transición del minuto 5 es el cambio de contenido
   de la pantalla, que ya viaja con la animación `rise` de `base.css`, de
   opacidad y desplazamiento, y que los tokens anulan con
   `prefers-reduced-motion`. */

/* ---------- paso 6, el tiempo transcurrido ---------- */

.timer { margin: 0; }

.timer__label { margin-bottom: var(--gap-xs); }

/* Cifras de ancho fijo: sin esto el número se estremece cada segundo al pasar
   de un 1 a un 8, y ese temblor es exactamente la sensación que esta pantalla
   no puede producir. */
.timer__value {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 0.88;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  margin: 0;
}

.timer--hero {
  margin: var(--gap-l) 0 var(--gap-m);
}
.timer--hero .timer__value { font-size: var(--text-huge); }

/* En el minuto 5 el tiempo deja de ser el protagonista y pasa a ser un dato:
   sigue visible y sigue subiendo, pero quien manda en la pantalla es la
   elección. Cambia el tamaño, nunca el color. */
.timer--quiet {
  margin: var(--gap-m) 0;
  padding-top: var(--gap-s);
  border-top: 1px solid var(--rule);
}
.timer--quiet .timer__value {
  font-size: var(--text-lead);
  color: var(--ink-soft);
  line-height: 1.1;
}

/* La frase del permiso vive justo debajo del tiempo, fija durante todo el
   arranque. No aparece al minuto 5: ya estaba desde el segundo cero. */
.timer__permission { max-width: 34ch; margin-bottom: 0; }

/* ---------- paso 6, la elección del minuto 5 ---------- */

/* Las dos salidas comparten molde: mismo ancho, mismo alto, mismo peso
   tipográfico, misma jerarquía. Aquí no se ajusta el tamaño de ninguna de las
   dos, y no existe ninguna clase que haga a una más importante que la otra.
   Lo único que las distingue es el color, y el verde de la salida es el de
   parar (regla 5 del diseño anti fracaso). */
.choice {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xs);
}

/* ---------- paso 7, la brecha del ciclo ---------- */

/* El bloque nace en el documento ya escrito y con su sitio hecho, y solo se
   revela al responder. Así aparecer no empuja nada de la pantalla y lo único
   que se anima es opacidad y desplazamiento. */
.gap {
  margin-top: var(--gap-m);
  padding-top: var(--gap-s);
  border-top: 1px solid var(--rule);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-normal) var(--ease),
              transform var(--dur-normal) var(--ease);
}
.gap.is-revealed { opacity: 1; transform: none; }

.gap__row {
  display: flex;
  align-items: baseline;
  gap: var(--gap-s);
  margin: 0;
}
.gap__row + .gap__row { margin-top: var(--gap-xs); }

.gap__lead { color: var(--ink-soft); }

.gap__value {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 12vw, 3.25rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.045em;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* El rojo es de la cabeza y el verde de lo que pasó de verdad. Es la única
   pareja de colores de toda la app donde el rojo es correcto, porque no
   califica a la persona: califica su predicción. */
.gap__value.is-loop { color: var(--loop); }
.gap__value.is-exit { color: var(--exit); }

/* ---------- cierre ---------- */

.closeout__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* El número que solo puede subir, en el verde de la salida. */
.closeout__number {
  font-family: var(--serif);
  font-size: var(--text-huge);
  font-weight: 300;
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: var(--exit);
  margin: 0 0 var(--gap-s);
}

.closeout__line {
  font-size: var(--text-lead);
  line-height: 1.25;
  max-width: 20ch;
}