/* =====================================================================
   MAKKI — MÓDULO 3 · Macroestructura y diseño de actos.
   Secuenciador de tres pistas: hitos, curva de tensión y pizarra de
   secuencias. En móvil las pistas se apilan y la pizarra muestra un acto
   a la vez (sección 12).
   ===================================================================== */

/* ---------------------------------------------------------------
   LÍNEA DE TIEMPO (pistas 1 y 2, mismo eje X)
   --------------------------------------------------------------- */
.linea-marco {
  position: relative;
  background: #040404;
  border: var(--filete) solid var(--negro-filete);
  padding: var(--e-3) var(--e-3) var(--e-2);
  overflow-x: auto;
  touch-action: pan-x;
}
.linea { display: block; width: 100%; min-width: 560px; height: auto; }

.eje-fondo { fill: #0b0b0a; }
.eje-linea { stroke: var(--negro-filete); stroke-width: 1; }
.eje-marca { stroke: #1d1c1a; stroke-width: 1; }
.eje-txt {
  font-family: "Barlow Condensed", sans-serif; font-size: 7px; font-weight: 700;
  fill: var(--crema-apag); letter-spacing: .12em; text-anchor: middle;
}

/* franjas de acto */
.acto-franja { fill: #0e0d0c; }
.acto-franja--par { fill: #141312; }
.acto-borde { stroke: var(--negro-filete); stroke-width: 1; stroke-dasharray: 4 3; }
.acto-etq {
  font-family: "Anton", sans-serif; font-size: 9px; fill: #3a3733;
  text-transform: uppercase; text-anchor: middle;
}

/* pista 1 — hitos */
.hito-tallo { stroke: var(--acento); stroke-width: 1.4; }
.hito-pomo { fill: var(--acento); }
.hito-txt {
  font-family: "Barlow Condensed", sans-serif; font-size: 7.5px; font-weight: 700;
  fill: var(--crema); letter-spacing: .14em; text-transform: uppercase;
}
.hito-min {
  font-family: ui-monospace, Consolas, monospace; font-size: 6.5px; fill: var(--crema-apag);
}

/* pista 2 — curva de tensión */
.curva-area { fill: rgba(217, 72, 31, .16); }
.curva-linea { fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linejoin: round; }
.curva-punto { fill: var(--crema); stroke: var(--acento); stroke-width: 1.4; cursor: pointer; }
.curva-punto--plano { fill: var(--ambar); stroke: var(--ambar); }
.curva-punto--activo { fill: var(--acento); stroke: var(--crema); stroke-width: 2; }
.curva-rejilla { stroke: #171615; stroke-width: .7; }
.curva-etq {
  font-family: "Barlow Condensed", sans-serif; font-size: 6.5px; font-weight: 700;
  fill: var(--crema-apag); letter-spacing: .1em; text-transform: uppercase;
}
/* tramo plano marcado sobre la curva */
.tramo-plano { fill: rgba(232, 163, 61, .16); stroke: var(--ambar); stroke-width: 1; stroke-dasharray: 3 2; }

.pista-etq {
  font-family: "Barlow Condensed", sans-serif; font-size: 7px; font-weight: 700;
  fill: var(--crema-apag); letter-spacing: .2em; text-transform: uppercase;
}

/* ---------------------------------------------------------------
   PIZARRA DE SECUENCIAS (pista 3)
   --------------------------------------------------------------- */
.pizarra { display: grid; gap: var(--e-3); grid-template-columns: 1fr; margin-top: var(--e-4); }
@media (min-width: 1000px) { .pizarra { grid-template-columns: 1fr 2fr 1fr; } }

/* Selector de acto, solo en móvil */
.actos-tabs { display: flex; border: var(--filete) solid var(--negro-filete); margin-top: var(--e-4); }
@media (min-width: 1000px) { .actos-tabs { display: none; } }
.acto-tab {
  flex: 1 1 0; min-height: var(--alto-toque);
  background: var(--negro); color: var(--crema-apag);
  border: 0; border-right: var(--filete) solid var(--negro-filete);
  font-family: var(--f-cond); font-weight: 700; font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.acto-tab:last-child { border-right: 0; }
.acto-tab--actual { background: var(--crema); color: var(--negro); }

.columna-acto { border: var(--filete) solid var(--negro-filete); }
.columna-acto--destino { border-color: var(--acento); background: var(--negro-elev); }
.columna-acto__cabeza {
  padding: var(--e-2) var(--e-3);
  border-bottom: var(--filete) solid var(--negro-filete);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2);
}
.columna-acto__cuerpo { padding: var(--e-3); min-height: 90px; }
/* En móvil solo se muestra el acto activo */
@media (max-width: 999px) {
  .columna-acto[hidden] { display: none !important; }
}

/* --- tarjeta de secuencia --- */
/* La tarjeta es clic para editar; solo el asa se arrastra. Sin touch-action
   en la tarjeta: en móvil tocar una secuencia no puede bloquear el scroll. */
.secuencia {
  position: relative;          /* para la línea de inserción del arrastre */
  border: var(--filete) solid var(--negro-filete);
  background: var(--negro-elev);
  padding: var(--e-3);
  margin-bottom: var(--e-2);
  cursor: pointer;
}

/* Asa de arrastre: mueve la secuencia arriba y abajo dentro de su acto,
   o la lleva a otro. Las flechas hacen lo primero sin arrastrar. */
.secuencia__asa {
  width: 30px; height: 30px; display: grid; place-items: center;
  color: var(--crema-apag);
  border: 1px dashed var(--crema-apag);
  font-size: 1rem; line-height: 1;
  cursor: grab; touch-action: none; user-select: none;
}
.secuencia__asa:hover { border-color: var(--acento); border-style: solid; color: var(--acento); }

/* Copia que sigue al puntero mientras se arrastra */
.secuencia-fantasma {
  position: fixed; z-index: 90; margin: 0;
  pointer-events: none;
  border-color: var(--acento);
  opacity: .92;
}
body.arrastrando-secuencia, body.arrastrando-secuencia * { cursor: grabbing !important; user-select: none; }

/* Mientras se arrastra, todos los actos admiten la tarjeta (también el suyo,
   para ordenarla), y el hueco donde caería se marca con una línea */
body.arrastrando-secuencia .columna-acto { border-style: dashed; border-color: var(--crema-apag); }
body.arrastrando-secuencia .columna-acto.columna-acto--destino { border-style: solid; border-color: var(--acento); background: var(--negro-elev); }
/* Pseudoelemento en el hueco entre tarjetas (margen de 8px + borde de 2px):
   no desplaza nada, así que la posición calculada no oscila al moverse */
.secuencia--insertar-antes::before,
.secuencia--insertar-despues::after {
  content: '';
  position: absolute; left: -2px; right: -2px;
  height: 4px; background: var(--acento);
  pointer-events: none;
}
.secuencia--insertar-antes::before { top: -8px; }
.secuencia--insertar-despues::after { bottom: -8px; }
.columna-acto--destino .columna-acto__cabeza::after {
  content: 'suelta aquí';
  font-family: var(--f-cond); font-size: var(--t-meta); font-weight: 700;
  letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--acento);
}
.acto-tab--destino { background: var(--acento-prof); color: var(--crema); }
.secuencia:last-child { margin-bottom: 0; }
/* El hover no toca el borde izquierdo (incompleta / plana) ni tapa la activa. */
.secuencia:hover:not(.secuencia--activa) { border-top-color: var(--crema-apag); border-right-color: var(--crema-apag); border-bottom-color: var(--crema-apag); }
.secuencia--arrastrando { opacity: .45; border-style: dashed; border-color: var(--acento); cursor: grabbing; }
.secuencia--incompleta { border-left: var(--filete-grueso) solid var(--acento); }
.secuencia--plana { border-left: var(--filete-grueso) solid var(--ambar); }
.secuencia--activa { border-color: var(--crema); }
.secuencia:focus-visible { outline: var(--filete-grueso) solid var(--acento); outline-offset: 2px; }

.secuencia__cabeza { display: flex; justify-content: space-between; gap: var(--e-2); align-items: baseline; }
.secuencia__n {
  font-family: ui-monospace, Consolas, monospace; font-size: .62rem;
  letter-spacing: .08em; color: var(--crema-apag); flex: none;
}
.secuencia__titulo {
  font-family: var(--f-cond); font-weight: 700; font-size: var(--t-s);
  line-height: 1.15; margin: var(--e-1) 0 var(--e-2); overflow-wrap: anywhere;
}
.secuencia__pie { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }

/* barra de riesgo dentro de la tarjeta */
.riesgo-barra { display: flex; gap: 1px; flex: 1 1 60px; min-width: 60px; }
.riesgo-tramo { flex: 1 1 0; height: 6px; background: var(--negro-filete); }
.riesgo-tramo--on { background: var(--acento); }
.riesgo-cifra {
  font-family: ui-monospace, Consolas, monospace; font-size: .62rem;
  color: var(--crema-apag); flex: none;
}

.secuencia__mover { display: flex; gap: 2px; flex: none; }
.secuencia__mover button {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: transparent; color: var(--crema-apag);
  border: 1px solid var(--negro-filete); cursor: pointer;
  font-family: var(--f-cond); font-weight: 700; font-size: .8rem;
}
.secuencia__mover button:hover:not(:disabled) { border-color: var(--crema); color: var(--crema); }
.secuencia__mover button:disabled { opacity: .3; cursor: not-allowed; }

/* hueco de inserción durante el arrastre */
.hueco { height: 4px; background: var(--acento); margin-bottom: var(--e-2); }

/* ---------------------------------------------------------------
   BAHÍA DE DESENLACE — tres nodos obligatorios, cerrada
   --------------------------------------------------------------- */
.bahia { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .bahia { grid-template-columns: repeat(3, 1fr); } }

.nodo {
  border-top: var(--filete-grueso) solid var(--negro-filete);
  padding-top: var(--e-3);
  display: flex; flex-direction: column;
}
.nodo--completo { border-top-color: var(--valido); }
.nodo--alerta { border-top-color: var(--acento); }
.nodo__n {
  font-family: ui-monospace, Consolas, monospace; font-size: .62rem;
  letter-spacing: .1em; color: var(--crema-apag);
}
.nodo__titulo { font-family: var(--f-display); font-size: var(--t-l); text-transform: uppercase; line-height: 1; margin: var(--e-1) 0 var(--e-2); }
.nodo__desc { font-size: var(--t-xs); color: var(--crema-apag); margin-bottom: var(--e-3); }

/* interruptores del clímax: modo mudo e irreversibilidad */
.interruptor {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-3); min-height: var(--alto-toque);
  border: var(--filete) solid var(--negro-filete); cursor: pointer;
  margin-bottom: var(--e-2);
}
/* Al marcar el último interruptor se cierra el clímax: el verde tiene que verse
   en ese instante, no cuando el puntero se va. */
.interruptor:hover:not(.interruptor--on) { border-color: var(--crema-apag); }
.interruptor--on { border-color: var(--valido); }
.interruptor input { margin-top: 3px; flex: none; width: 20px; height: 20px; accent-color: var(--valido); }
.interruptor__texto { flex: 1 1 auto; }
.interruptor__titulo { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--t-s); display: block; }
.interruptor__desc { font-size: var(--t-xs); color: var(--crema-apag); }

/* selector de carga + / − / ± */
.cargas { display: flex; gap: var(--filete); }
.carga-btn {
  flex: 1 1 0; min-height: 44px;
  background: var(--negro); color: var(--crema-apag);
  border: var(--filete) solid var(--negro-filete);
  font-family: var(--f-display); font-size: var(--t-l); cursor: pointer; line-height: 1;
}
/* El hover solo previsualiza las cargas que NO están elegidas. Pesaba más que
   --elegida y, justo al pulsar, dejaba el signo crema sobre fondo crema. */
.carga-btn:hover:not(.carga-btn--elegida) { border-color: var(--crema); color: var(--crema); }
.carga-btn--elegida { background: var(--crema); color: var(--negro); border-color: var(--crema); }
.carga-btn small {
  display: block; font-family: var(--f-cond); font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase; margin-top: 2px;
}

/* contraste entre el clímax del acto II y el final */
.contraste {
  display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap;
  padding: var(--e-3); border: var(--filete) solid var(--negro-filete);
  margin-top: var(--e-4);
}
.contraste--ok { border-color: var(--valido); }
.contraste--mal { border-color: var(--acento); }
.contraste__par { display: flex; align-items: center; gap: var(--e-2); }
.contraste__signo { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1; }
.contraste__flecha { color: var(--crema-apag); font-size: 1.2rem; }

/* ---------------------------------------------------------------
   ESQUELETO DE ESCENAS (lo que hereda el Módulo 4)
   --------------------------------------------------------------- */
.esqueleto { display: grid; gap: var(--e-2); grid-template-columns: 1fr; }
@media (min-width: 760px)  { .esqueleto { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .esqueleto { grid-template-columns: repeat(3, 1fr); } }

.escena-hueca {
  border: var(--filete) solid var(--negro-filete);
  padding: var(--e-3);
  display: flex; flex-direction: column; gap: var(--e-2);
}
.escena-hueca__meta { display: flex; justify-content: space-between; gap: var(--e-2); }
.escena-hueca__titulo { font-family: var(--f-cond); font-weight: 700; font-size: var(--t-s); line-height: 1.15; overflow-wrap: anywhere; }
.escena-hueca__delta { display: flex; align-items: center; gap: var(--e-2); }
.delta-signo {
  width: 26px; height: 26px; display: grid; place-items: center; flex: none;
  font-family: var(--f-display); font-size: .95rem;
  background: var(--negro-filete); color: var(--crema);
}
.delta-signo--mas { background: var(--valido-prof); }
.delta-signo--menos { background: var(--acento-prof); }
.delta-signo--ironia { background: var(--ambar-prof); }
.delta-flecha { color: var(--crema-apag); }
.escena-hueca--sin-cambio { border-color: var(--acento); }