/* =====================================================================
   MÓDULO 5 — Flujo de trabajo y formato automático.
   Los cuatro gates, el tablero de tarjetas, el editor de escenas maestras,
   el monitor de ritmo y el linter de subtexto.

   Sigue el sistema de la sección 9: plano, sin sombras, sin degradados y sin
   bordes redondeados. Mobile-first: una columna hasta 720px.
   ===================================================================== */

/* ---------------------------------------------------------------
   Utilidades locales
   --------------------------------------------------------------- */
.sr-solo {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.botonera--compacta { gap: var(--e-1); flex-wrap: wrap; }

/* La telemetría del módulo 5 lleva seis datos, uno más de los cinco que caben
   en la retícula compartida: aquí se reparte en tres para que no quede hueco. */
.telemetria--seis { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .telemetria--seis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .telemetria--seis { grid-template-columns: repeat(6, 1fr); } }
/* Y la del panel de salida, cuatro: sin esto la retícula compartida deja un hueco. */
.telemetria--cuatro { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .telemetria--cuatro { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------
   EL RAÍL DE LOS CUATRO GATES
   Cinco casillas: los cuatro gates y la salida. Un gate que todavía no
   se ha abierto se ve, pero no se puede pulsar: el bloqueo es la lección.
   --------------------------------------------------------------- */
.gates {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--filete);
  border: var(--filete) solid var(--negro-filete);
  background: var(--negro-filete);
  margin-bottom: var(--e-5);
}

.gate {
  appearance: none;
  background: var(--negro);
  border: 0;
  border-left: var(--filete-grueso) solid transparent;
  color: var(--crema);
  text-align: left;
  padding: var(--e-3) var(--e-4);
  min-height: var(--alto-toque);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--e-3);
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans);
}
.gate:hover:not(:disabled) { background: var(--negro-elev); }
.gate:focus-visible { outline: var(--filete) solid var(--acento); outline-offset: -4px; }

.gate__n {
  font-family: var(--f-display);
  font-size: var(--t-l);
  line-height: 1;
  min-width: 1.2em;
}
.gate__nombre {
  font-family: var(--f-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--t-s);
}
.gate__estado {
  font-family: var(--f-cond);
  font-size: var(--t-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--crema-apag);
  white-space: nowrap;
}

.gate--bloqueado { color: var(--inactivo-texto); cursor: not-allowed; }
.gate--bloqueado .gate__estado { color: var(--inactivo-texto); }
.gate--abierto { border-left-color: var(--acento); }
.gate--cerrado { border-left-color: var(--valido); }
.gate--cerrado .gate__estado { color: var(--valido); }
.gate--activo { background: var(--negro-elev); border-left-color: var(--crema); }
.gate--activo .gate__nombre { color: var(--acento); }
.gate--export .gate__n { color: var(--acento); }
.gate--prompt .gate__n { color: var(--acento); }

@media (min-width: 900px) {
  .gates { grid-template-columns: repeat(6, 1fr); }
  .gate {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--e-1);
    border-left: 0;
    border-top: var(--filete-grueso) solid transparent;
    padding: var(--e-3);
  }
  .gate--abierto { border-top-color: var(--acento); }
  .gate--cerrado { border-top-color: var(--valido); }
  .gate--activo { border-top-color: var(--crema); }
}

/* ---------------------------------------------------------------
   Cabecera y barra de cada gate
   --------------------------------------------------------------- */
.gate-cab { border-left: var(--filete-grueso) solid var(--acento); padding-left: var(--e-4); }
.gate-cab__pregunta {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  line-height: 1.02;
  margin: var(--e-2) 0 var(--e-2);
  text-wrap: balance;
}
.gate-cab__desc { max-width: var(--ancho-lectura); color: var(--crema-apag); }

.gate-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e-5);
  border-top: var(--filete) solid var(--negro-filete);
  border-bottom: var(--filete) solid var(--negro-filete);
  padding: var(--e-3) 0;
}
.gate-barra .meta { display: block; }
.gate-barra__cifra { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1; }
.gate-barra__cifra--mal { color: var(--acento); }
.gate-barra button { margin-left: auto; }

.siembra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
  border: var(--filete) solid var(--ambar);
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-4);
}
.siembra p { flex: 1 1 240px; margin: 0; }

/* ---------------------------------------------------------------
   TABLERO DE FICHAS (gates 1 y 3)
   --------------------------------------------------------------- */
.tablero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--filete);
  border: var(--filete) solid var(--negro-filete);
  background: var(--negro-filete);
}
@media (min-width: 700px) { .tablero { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tablero { grid-template-columns: repeat(3, 1fr); } }

.ficha {
  background: var(--negro);
  border-top: var(--filete-grueso) solid transparent;
  padding: var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.ficha--ok { border-top-color: var(--valido); }
.ficha--mal { border-top-color: var(--acento); }
.ficha--ancha { border: var(--filete) solid var(--negro-filete); border-top-width: var(--filete-grueso); }

.ficha__cab { display: flex; flex-direction: column; gap: var(--e-1); }
.ficha__titulo {
  font-family: var(--f-cond);
  font-size: var(--t-l);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
}
.ficha__sugerencia {
  font-size: var(--t-s);
  color: var(--crema-apag);
  border-left: var(--filete) solid var(--negro-filete);
  padding-left: var(--e-3);
  margin: 0;
}
.ficha__slug {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  color: var(--acento);
  margin: 0;
}
.ficha__extracto { font-size: var(--t-s); color: var(--crema-apag); margin: 0; }
.ficha__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-top: auto;
}
.ficha__pie .btn { margin-left: auto; }
.ficha__motivos { display: flex; flex-wrap: wrap; gap: var(--e-1); }

.capa-subtexto { margin-top: var(--e-3); border-top: var(--filete) dashed var(--negro-filete); padding-top: var(--e-3); }

/* ---------------------------------------------------------------
   SIMULADOR DE PITCH DE 10 MINUTOS
   --------------------------------------------------------------- */
.pitch {
  background: var(--negro);
  border: var(--filete) solid var(--acento);
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - 2 * var(--gutter));
  overflow-y: auto;
  padding: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.pitch__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.pitch__crono { font-family: var(--f-display); font-size: var(--t-xxl); line-height: 1; }
.pitch__crono--pasado { color: var(--acento); }
.pitch__barra { height: 6px; background: var(--negro-filete); }
.pitch__barra-relleno { height: 100%; width: 0; background: var(--crema); transition: width 1s linear; }
.pitch__barra-relleno--pasado { background: var(--acento); }
.pitch__cuerpo { min-height: 140px; }
.pitch__titulo { font-family: var(--f-cond); font-size: var(--t-l); margin: var(--e-1) 0 var(--e-3); }
.pitch__texto { font-size: var(--t-l); line-height: 1.3; }
.pitch__nota { font-size: var(--t-xs); color: var(--crema-apag); margin: 0; }

/* ---------------------------------------------------------------
   ESCENA MAESTRA — formato de industria
   --------------------------------------------------------------- */
.maestra { display: flex; flex-direction: column; gap: var(--e-4); }
.maestra__sub {
  font-family: var(--f-cond);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: var(--filete) solid var(--negro-filete);
  padding-bottom: var(--e-2);
  margin: var(--e-4) 0 0;
}

.entrada--slug { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.entrada--area { min-height: 120px; }

.medida {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--filete);
  border: var(--filete) solid var(--negro-filete);
  background: var(--negro-filete);
}
@media (min-width: 560px) { .medida { grid-template-columns: repeat(4, 1fr); } }

.replicas { display: flex; flex-direction: column; gap: var(--e-3); }
.replica {
  border-left: var(--filete-grueso) solid var(--negro-filete);
  padding-left: var(--e-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.replica--larga { border-left-color: var(--ambar); }
.replica__cab { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.replica__botones { display: flex; gap: var(--e-1); margin-left: auto; }
.replica__botones .btn { min-width: var(--alto-toque); }

.entrada--personaje {
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex: 1 1 140px;
  max-width: 220px;
}
.entrada--parentetico { font-style: italic; flex: 1 1 140px; max-width: 260px; }
.entrada--dialogo {
  font-family: var(--f-mono);
  min-height: 64px;
  max-width: 42ch;      /* el ancho real del diálogo en Courier 12 */
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* ---------------------------------------------------------------
   MONITOR DE RITMO
   Cada barra es una escena; su altura son los octavos de página.
   Un tramo plano se pinta en terracota porque es una alerta dura.
   --------------------------------------------------------------- */
.ritmo {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-height: 110px;
  padding: var(--e-3);
  border: var(--filete) solid var(--negro-filete);
  overflow-x: auto;
}
.ritmo__barra {
  appearance: none;
  border: 0;
  flex: 1 0 10px;
  min-width: 10px;
  background: var(--crema-apag);
  cursor: pointer;
  padding: 0;
  transition: background var(--trans);
}
/* Un tramo plano sigue en terracota con el puntero encima: es una alerta. */
.ritmo__barra:hover:not(.ritmo__barra--plano) { background: var(--crema); }
.ritmo__barra:focus-visible { outline: var(--filete) solid var(--acento); outline-offset: 2px; }
.ritmo__barra--plano { background: var(--acento); }

/* ---------------------------------------------------------------
   LINTER DE SUBTEXTO
   --------------------------------------------------------------- */
.reglas-resumen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--filete);
  border: var(--filete) solid var(--negro-filete);
  background: var(--negro-filete);
}
@media (min-width: 700px) { .reglas-resumen { grid-template-columns: repeat(4, 1fr); } }
.regla-cuenta {
  background: var(--negro);
  padding: var(--e-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}
.regla-cuenta strong { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1; }
.regla-cuenta--mal { background: var(--acento-prof); }

.hallazgo {
  border: var(--filete) solid var(--negro-filete);
  border-left: var(--filete-grueso) solid var(--acento);
  padding: var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.hallazgo--descartado { border-left-color: var(--negro-filete); opacity: 0.55; }
.hallazgo__cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2); }
.hallazgo__cita {
  font-family: var(--f-mono);
  font-size: var(--t-s);
  border-left: var(--filete) solid var(--negro-filete);
  padding-left: var(--e-3);
  margin: 0;
}
.hallazgo__personaje {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--crema-apag);
}
.hallazgo__motivo { font-size: var(--t-s); color: var(--crema-apag); margin: 0; }

/* ---------------------------------------------------------------
   GUION MUDO
   --------------------------------------------------------------- */
.mudo__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.mudo__titulo { font-family: var(--f-display); font-size: var(--t-l); margin: var(--e-1) 0 0; }
.mudo {
  margin: var(--e-4) 0;
  max-height: 420px;
  overflow-y: auto;
  border: var(--filete) solid rgba(0, 0, 0, .2);
}
.mudo__escena {
  border-left: var(--filete-grueso) solid rgba(0, 0, 0, .18);
  padding: var(--e-3) var(--e-4);
}
.mudo__escena--mal { border-left-color: var(--acento); }
.mudo__slug { font-family: var(--f-mono); text-transform: uppercase; font-size: var(--t-xs); margin: 0 0 var(--e-2); }
.mudo__accion { font-family: var(--f-mono); font-size: var(--t-s); margin: 0; white-space: pre-wrap; }
.mudo__ocultas {
  font-family: var(--f-cond);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  font-size: var(--t-meta);
  opacity: 0.6;
  margin: var(--e-2) 0 0;
}

.casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  min-height: var(--alto-toque);
  padding-top: var(--e-3);
  cursor: pointer;
}
.casilla input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--acento-prof); }

/* ---------------------------------------------------------------
   PANEL DE EXPORTACIÓN
   --------------------------------------------------------------- */
.export {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--filete);
  border: var(--filete) solid var(--negro-filete);
  background: var(--negro-filete);
}
@media (min-width: 760px) { .export { grid-template-columns: repeat(2, 1fr); } }
.export__salida {
  background: var(--negro);
  padding: var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.export__nombre { font-family: var(--f-cond); font-size: var(--t-l); font-weight: 700; margin: 0; }
.export__desc { font-size: var(--t-s); color: var(--crema-apag); margin: 0; flex: 1 1 auto; }

/* ---------------------------------------------------------------
   EL PROMPT DEL AGENTE (fase 7)
   Aquí desemboca todo: la interfaz tiene que dejar ver el prompt entero
   y dejar editarlo, porque el usuario es quien firma lo que se manda.
   --------------------------------------------------------------- */
.entrada--prompt {
  font-family: var(--f-mono);
  font-size: var(--t-s);
  line-height: 1.45;
  min-height: 320px;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.secciones {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--filete);
  border: var(--filete) solid var(--negro-filete);
  background: var(--negro-filete);
}
@media (min-width: 620px) { .secciones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .secciones { grid-template-columns: repeat(3, 1fr); } }

.seccion {
  background: var(--negro);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  min-height: var(--alto-toque);
  cursor: pointer;
  color: #6b6560;
}
.seccion input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--acento); }
.seccion--dentro { color: var(--crema); }
.seccion--fija { cursor: default; }
.seccion__nombre {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: var(--t-s);
  flex: 1 1 auto;
  line-height: 1.1;
}
.seccion__tokens {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  color: var(--crema-apag);
  white-space: nowrap;
}

.entrega {
  border: var(--filete) solid var(--negro-filete);
  border-left: var(--filete-grueso) solid var(--valido);
  padding: var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.entrega__cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2); }
.entrega__texto {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: 1.5;
  white-space: pre-wrap;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: var(--e-3);
  background: #060606;
  border: var(--filete) solid var(--negro-filete);
}

/* ---------------------------------------------------------------
   OPCIONES DEL ENCARGO (fase 8)
   Extensión, escritura y escenas clave: tres decisiones que cambian
   el texto del prompt. Una columna hasta 1000px.
   --------------------------------------------------------------- */
.opciones-prompt__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--filete);
  border: var(--filete) solid var(--negro-filete);
  background: var(--negro-filete);
}
@media (min-width: 1000px) { .opciones-prompt__rejilla { grid-template-columns: repeat(3, 1fr); } }

.opciones-prompt__bloque {
  margin: 0;
  min-width: 0;
  border: 0;
  background: var(--negro);
  padding: var(--e-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
/* Flotada, la leyenda deja de montarse sobre el borde y entra en el flujo */
.opciones-prompt__bloque > legend { float: left; width: 100%; padding: 0; margin: 0; }
.opciones-prompt__bloque .campo__pista { margin: var(--e-1) 0 0; }
.opciones-prompt__radios { display: flex; flex-direction: column; gap: var(--e-2); }

.opciones-prompt__rango {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-2);
  margin-top: var(--e-1);
  padding-top: var(--e-2);
  border-top: var(--filete) solid var(--negro-filete);
}
.opciones-prompt__cifra { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1; color: var(--acento); }
.opciones-prompt__nota { flex: 1 1 100%; font-size: var(--t-xs); color: var(--crema-apag); }
.opciones-prompt__pista { font-size: var(--t-xs); color: var(--crema-apag); margin: var(--e-2) 0 0; }