/* =====================================================================
   MAKKI — MÓDULO 4 · Micro-gestor de escenas.
   Dos niveles: la lista de escenas y el flujo de 5 pasos de una escena.
   ===================================================================== */

/* ---------------------------------------------------------------
   LISTA DE ESCENAS
   --------------------------------------------------------------- */
.escenas-lista { display: grid; gap: var(--e-2); grid-template-columns: 1fr; }
@media (min-width: 720px)  { .escenas-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .escenas-lista { grid-template-columns: repeat(3, 1fr); } }

.escena-tarjeta {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-3);
  border: var(--filete) solid var(--negro-filete);
  border-left: var(--filete-grueso) solid var(--negro-filete);
  background: var(--negro-elev); color: var(--crema);
  text-align: left; font: inherit; cursor: pointer; width: 100%;
  transition: border-color var(--trans);
}
/* El hover no toca el borde izquierdo: ese es el semáforo de la escena. */
.escena-tarjeta:hover { border-top-color: var(--crema-apag); border-right-color: var(--crema-apag); border-bottom-color: var(--crema-apag); }
.escena-tarjeta--validada { border-left-color: var(--valido); }
.escena-tarjeta--bloqueada { border-left-color: var(--acento); }
.escena-tarjeta--empezada { border-left-color: var(--ambar); }
.escena-tarjeta:focus-visible { outline: var(--filete-grueso) solid var(--acento); outline-offset: 2px; }

.escena-tarjeta__cabeza { display: flex; justify-content: space-between; gap: var(--e-2); align-items: baseline; }
.escena-tarjeta__titulo {
  font-family: var(--f-cond); font-weight: 700; font-size: var(--t-s);
  line-height: 1.15; overflow-wrap: anywhere;
}
.escena-tarjeta__pie { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; margin-top: auto; }

/* semáforo de los 5 pasos dentro de la tarjeta */
.pasos-puntos { display: flex; gap: 2px; }
.paso-punto {
  width: 16px; height: 5px; background: var(--negro-filete);
}
.paso-punto--hecho { background: var(--valido); }
.paso-punto--actual { background: var(--crema); }

/* ---------------------------------------------------------------
   FLUJO DE 5 PASOS
   --------------------------------------------------------------- */
.escena-cabecera {
  display: flex; justify-content: space-between; gap: var(--e-3);
  flex-wrap: wrap; align-items: flex-start;
  border-top: var(--filete-grueso) solid var(--acento);
  padding-top: var(--e-3); margin-bottom: var(--e-4);
}
.escena-cabecera__titulo {
  font-family: var(--f-display); font-size: var(--t-xl);
  text-transform: uppercase; line-height: .95; margin: var(--e-1) 0 0;
}
.escena-nav { display: flex; gap: var(--e-2); flex-wrap: wrap; }

.paso-cuerpo { border: var(--filete) solid var(--negro-filete); padding: var(--e-4); }
@media (min-width: 720px) { .paso-cuerpo { padding: var(--e-5); } }
.paso-cuerpo__pregunta {
  font-family: var(--f-cond); font-weight: 700; font-size: var(--t-l);
  color: var(--acento); text-transform: uppercase; letter-spacing: .01em;
  margin: 0 0 var(--e-2);
}
.paso-cuerpo__desc { font-size: var(--t-s); color: var(--crema-apag); margin-bottom: var(--e-5); max-width: 60ch; }

/* --- paso 1: las dos fuerzas enfrentadas --- */
.choque { display: grid; gap: var(--e-3); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .choque { grid-template-columns: 1fr auto 1fr; } }
.choque__lado { border-top: var(--filete-grueso) solid var(--negro-filete); padding-top: var(--e-3); }
.choque__lado--deseo { border-top-color: var(--crema); }
.choque__lado--fuerza { border-top-color: var(--acento); }
.choque__vs {
  align-self: center; justify-self: center;
  font-family: var(--f-display); font-size: var(--t-xl); color: var(--acento);
  text-transform: uppercase; line-height: 1;
}
@media (max-width: 759px) { .choque__vs { justify-self: start; } }

/* --- pasos 2 y 4: valor y carga --- */
.valor-fila { display: grid; gap: var(--e-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .valor-fila { grid-template-columns: 1fr 1fr; } }

/* comparador ΔV */
.deltav {
  display: flex; gap: var(--e-4); align-items: center; flex-wrap: wrap;
  padding: var(--e-4); margin-top: var(--e-5);
  border: var(--filete) solid var(--negro-filete);
}
.deltav--cambio { border-color: var(--valido); }
.deltav--plano { border-color: var(--acento); background: rgba(217, 72, 31, .08); }
.deltav__cifra { font-family: var(--f-display); font-size: var(--t-xxl); line-height: 1; }
.deltav__par { display: flex; align-items: center; gap: var(--e-2); }
.deltav__signo {
  width: 42px; height: 42px; display: grid; place-items: center; flex: none;
  font-family: var(--f-display); font-size: var(--t-l);
  background: var(--negro-filete); color: var(--crema);
}
.deltav__signo--mas { background: var(--valido-prof); }
.deltav__signo--menos { background: var(--acento-prof); }
.deltav__signo--ironia { background: var(--ambar-prof); }
.deltav__flecha { font-size: 1.4rem; color: var(--crema-apag); }

/* --- paso 3: secuenciador de beats, texto y subtexto --- */
.beats { display: grid; gap: var(--e-3); }
.beat {
  display: grid; gap: var(--e-3); grid-template-columns: 1fr;
  border-left: var(--filete-grueso) solid var(--negro-filete);
  padding-left: var(--e-3);
}
@media (min-width: 820px) { .beat { grid-template-columns: 28px 1fr 1fr auto; align-items: start; } }
.beat--completo { border-left-color: var(--valido); }
.beat--repetido { border-left-color: var(--acento); background: rgba(217, 72, 31, .07); }
.beat__n {
  font-family: ui-monospace, Consolas, monospace; font-size: .68rem;
  color: var(--crema-apag); padding-top: var(--e-3);
}
.beat__capa-etq {
  display: block; font-family: var(--f-cond); font-size: var(--t-meta); font-weight: 700;
  letter-spacing: var(--ls-meta); text-transform: uppercase; margin-bottom: var(--e-1);
}
.beat__capa-etq--subtexto { color: var(--acento); }
.beat__acciones { display: flex; gap: 2px; padding-top: var(--e-3); }
.beat__acciones 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;
}
.beat__acciones button:hover:not(:disabled) { border-color: var(--crema); color: var(--crema); }
.beat__acciones button:disabled { opacity: .3; cursor: not-allowed; }

/* medidor del ratio de subtexto */
.ratio {
  display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap;
  padding: var(--e-3) var(--e-4); margin-top: var(--e-4);
  border: var(--filete) solid var(--negro-filete);
}
.ratio--ok { border-color: var(--valido); }
.ratio--bajo { border-color: var(--acento); }
.ratio__barra { flex: 1 1 140px; min-width: 120px; height: 10px; background: var(--negro-filete); position: relative; }
.ratio__relleno { height: 100%; background: var(--acento); }
.ratio--ok .ratio__relleno { background: var(--valido); }
.ratio__umbral { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--crema); }
.ratio__cifra { font-family: var(--f-display); font-size: var(--t-l); line-height: 1; flex: none; }

/* --- paso 5: el abismo --- */
.abismo { display: grid; gap: var(--e-3); grid-template-columns: 1fr; }
@media (min-width: 760px) { .abismo { grid-template-columns: 1fr 1fr; } }
.abismo__lado { border-top: var(--filete-grueso) solid var(--negro-filete); padding-top: var(--e-3); }
.abismo__lado--expectativa { border-top-color: var(--crema-apag); }
.abismo__lado--realidad { border-top-color: var(--acento); }
.abismo__brecha {
  grid-column: 1 / -1; text-align: center;
  font-family: var(--f-cond); font-weight: 700; letter-spacing: var(--ls-meta);
  text-transform: uppercase; font-size: var(--t-meta); color: var(--crema-apag);
  padding: var(--e-2) 0;
}

/* veredicto de la escena, al pie del flujo */
.veredicto {
  border-top: var(--filete-grueso) solid var(--negro-filete);
  padding-top: var(--e-4); margin-top: var(--e-6);
}
.veredicto--ok { border-top-color: var(--valido); }
.veredicto--bloqueada { border-top-color: var(--acento); }
.veredicto__titulo { font-family: var(--f-display); font-size: var(--t-l); text-transform: uppercase; line-height: 1; }