/* Rompe el Ciclo · expediente y exportación (T-25 y T-26)
 *
 * Cuarta hoja. Se carga DESPUÉS de screens.css y no pisa ninguna regla suya:
 * todo lo de aquí vive bajo `.dossier` y `.export`.
 *
 * Reglas vinculantes, las mismas del resto del proyecto:
 *   · Ningún color literal. Todo sale de tokens.css.
 *   · Solo se animan `transform` y `opacity` (RNF-05). Aquí, de hecho, no se
 *     anima nada propio: la entrada de la pantalla ya la hace `rise` en
 *     base.css, que los tokens anulan con `prefers-reduced-motion`.
 *   · EL ROJO `--loop` TOCA UNA SOLA COSA EN ESTA HOJA: la cifra de la
 *     predicción en el histórico. Es lo que la cabeza dijo, no lo que la
 *     persona hizo. Ningún dato del usuario se pinta en rojo (AR-03, regla 1
 *     del diseño anti fracaso).
 *
 * La forma de la pantalla es la de un expediente de verdad: bloques separados
 * por filetes finos, cifras en versales de ancho fijo, y el histórico como un
 * registro que se lee de arriba abajo. No hay gráficas, no hay porcentajes y no
 * hay barras de progreso hacia ningún umbral.
 */

/* Por si el navegador no aplicara el `hidden` del agente de usuario sobre un
   botón con clase propia: lo oculto se oculta y punto. */
[hidden] { display: none !important; }

/* ==========================================================================
   Expediente
   ========================================================================== */

.dossier__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);
}

.dossier__title {
  margin: 0;
}

/* Cada bloque se separa por un filete, no por un recuadro: un expediente es una
   sucesión de asientos, no una rejilla de tarjetas iguales. */
.dossier__block {
  margin: 0;
  padding-top: var(--gap-s);
  border-top: 1px solid var(--rule);
}

/* El bloque de arranques no lleva filete: es el primero y abre la pantalla. */
.dossier__block:first-of-type {
  padding-top: 0;
  border-top: none;
}

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

/* El texto de formación va en tinta suave y aire propio. No es un aviso ni una
   carencia: es la explicación de por qué el expediente todavía es corto. */
.dossier__forming {
  margin: 0;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* El número que solo puede subir, en el verde de la salida. Es la cifra más
   grande de la pantalla porque es la única que nunca puede bajar. */
.dossier__number {
  font-family: var(--serif);
  font-size: var(--text-huge);
  font-weight: 300;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--exit);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* Las frases de los agregados llevan la serif de lectura: son la conclusión del
   expediente, no un pie de tabla. */
.dossier__line {
  font-family: var(--serif);
  font-size: var(--text-lead);
  line-height: 1.28;
  margin: 0;
  max-width: 26ch;
  text-wrap: pretty;
}

/* ---------- bloque 5, el mapa de emociones ---------- */

.dossier__emotions {
  list-style: none;
  margin: var(--gap-s) 0 0;
  padding: 0;
}

.dossier__emotion {
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
  font-size: var(--text-small);
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ---------- bloque 6, el histórico ---------- */

.dossier__history {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dossier__row {
  padding: var(--gap-s) 0;
  border-top: 1px solid var(--rule);
}

.dossier__row:first-child {
  border-top: none;
  padding-top: var(--gap-xs);
}

.dossier__row-visible {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dossier__row-head {
  display: flex;
  align-items: baseline;
  gap: var(--gap-s);
  margin: 0;
  min-width: 0;
}

/* La fecha manda el ojo hacia abajo por la columna, así que va fija y estrecha. */
.dossier__date {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  min-width: 5ch;
}

/* La tarea es lo que la persona escribió, tal cual. Se recorta a dos líneas
   para que ninguna fila se coma la pantalla, y nunca se altera su texto. */
.dossier__task {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
  line-height: 1.35;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.dossier__pair {
  display: flex;
  align-items: baseline;
  gap: var(--gap-s);
  margin: 0;
  padding-left: calc(5ch + var(--gap-s));
}

.dossier__emotion-tag {
  margin-right: auto;
  font-family: var(--mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Las dos cifras del contraste, del mismo tamaño y con el mismo peso. La
   comparación tiene que ser inmediata y ninguna de las dos puede parecer la
   importante: lo único que las distingue es el color. */
.dossier__value {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: right;
}

/* El único rojo de la pantalla: la predicción de la cabeza. */
.dossier__value.is-loop { color: var(--loop); }

/* Y su contraste: lo que pasó de verdad. */
.dossier__value.is-exit { color: var(--exit); }

/* ==========================================================================
   Exportación
   ========================================================================== */

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

.export__body-text {
  max-width: 34ch;
  color: var(--ink-soft);
  margin-bottom: 0;
}

/* La confirmación de que el archivo salió. Papel hundido y filete verde: es una
   constancia tranquila, del mismo molde que la nota del paso 4. */
.export__note {
  margin: var(--gap-m) 0 0;
  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;
}