/* Escena 04 · "La sala de edición". Prefijo .ed-, todo bajo #lp.
   La clase entra en bruto (fría, plana) y sale editada (cálida): --calor 0..1 lo mueve el JS.
   Solo se animan transform, opacity y stroke-dashoffset. */

#lp [data-escena="edicion"] {
  --calor: 0;
  min-height: 0; padding: 14px;
  display: grid; gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "barra" "visor" "panel" "linea" "rail";
}
@media (min-width: 640px) {
  #lp [data-escena="edicion"] {
    padding: 16px; gap: 12px;
    grid-template-columns: minmax(0, 1fr) 176px;
    grid-template-areas: "barra barra" "visor panel" "linea linea" "rail rail";
  }
}
@media (min-width: 640px) and (max-width: 999px) { #lp [data-escena="edicion"] { max-width: 760px } }

/* ---------- Barra superior ---------- */
#lp .ed-barra { grid-area: barra; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; padding: 0 2px 10px; border-bottom: 1px solid var(--filo) }
#lp .ed-archivo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 13px; color: var(--txt-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
#lp .ed-archivo svg { width: 14px; height: 14px; flex: none; color: color-mix(in oklab, var(--frio) calc((1 - var(--calor)) * 100%), var(--oro)); filter: drop-shadow(0 0 calc(var(--calor) * 5px) color-mix(in oklab, var(--oro-2) 70%, transparent)) }
#lp .ed-estado { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 13px; white-space: nowrap }
#lp .ed-dur { color: var(--txt); font-variant-numeric: tabular-nums; min-width: 5ch; text-align: right }
#lp .ed-etiqueta { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--filo); color: var(--frio); transition: color .5s var(--ease), border-color .5s var(--ease) }
#lp .ed-etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transition: background .5s }
#lp .ed-etiqueta.calido { color: var(--oro); border-color: color-mix(in oklab, var(--oro) 40%, transparent) }
#lp .ed-etiqueta.listo { color: var(--txt); border-color: color-mix(in oklab, var(--verde) 45%, transparent) }
#lp .ed-etiqueta.listo::before { background: var(--verde); box-shadow: 0 0 8px color-mix(in oklab, var(--verde) 70%, transparent) }
@media (max-width: 639px) { #lp .ed-etiqueta { display: none } }

/* ---------- Visor ---------- */
#lp .ed-visor {
  grid-area: visor; position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--filo);
  background: radial-gradient(ellipse 80% 70% at 20% 0%, color-mix(in oklab, var(--oro) 10%, transparent), transparent 60%), var(--panel);
}
#lp .ed-lienzo { position: absolute; inset: 0; transform-origin: 0 0; border-radius: 8px; overflow: hidden; will-change: transform; background: var(--panel-2) }
#lp .ed-fondo { position: absolute; inset: 0 }
#lp .ed-fondo-frio { background: linear-gradient(180deg, color-mix(in oklab, var(--frio-2) 30%, var(--panel-2)), color-mix(in oklab, var(--frio-2) 12%, var(--panel))) }
#lp .ed-fondo-calido {
  opacity: var(--calor);
  background:
    radial-gradient(ellipse 85% 75% at 12% 0%, color-mix(in oklab, var(--oro) 30%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in oklab, var(--oro-3) 18%, var(--panel-2)), var(--panel));
}
/* Diapositiva en bruto: barras planas */
#lp .ed-diapo { position: absolute; inset: 0; opacity: var(--diapo, 1) }
#lp .ed-barra-txt { position: absolute; border-radius: 3px; background: color-mix(in oklab, var(--frio) calc((1 - var(--calor)) * 100%), var(--txt-3)); opacity: .42 }
#lp .ed-barra-txt.t { left: 8%; top: 13%; width: 44%; height: 7% }
#lp .ed-barra-txt.s { left: 8%; top: 24%; width: 26%; height: 3.5%; opacity: .28 }
#lp .ed-barra-txt.b { height: 3.6%; opacity: .34 }
#lp .ed-barra-txt.b::before { content: ""; position: absolute; left: -4.5%; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: inherit }
#lp .ed-barra-txt.b1 { left: 11%; top: 44%; width: 52% }
#lp .ed-barra-txt.b2 { left: 11%; top: 55%; width: 44% }
#lp .ed-barra-txt.b3 { left: 11%; top: 66%; width: 38% }
#lp .ed-logo { position: absolute; right: 7%; top: 11%; width: 7%; aspect-ratio: 1; border-radius: 3px; border: 1px solid color-mix(in oklab, var(--frio) 60%, transparent); opacity: .5 }
#lp .ed-puntero { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--txt-2); background: color-mix(in oklab, var(--txt) 40%, transparent); opacity: .9; will-change: transform }
/* Presentador abstracto */
#lp .ed-pres { position: absolute; right: 5%; bottom: 0; height: 40%; width: auto; overflow: visible }
#lp .ed-pres path, #lp .ed-pres circle { fill: color-mix(in oklab, var(--frio-2) calc((1 - var(--calor)) * 100%), var(--oro-3)); fill-opacity: .55; stroke: color-mix(in oklab, var(--frio) calc((1 - var(--calor)) * 100%), var(--oro)); stroke-opacity: .7; stroke-width: 1 }
/* Timecode */
#lp .ed-tc { position: absolute; left: 10px; top: 8px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: rgb(calc(125 + 60 * var(--calor)) calc(147 + 30 * var(--calor)) calc(173 - 8 * var(--calor))) }
#lp .ed-tc::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9 }
/* Diagrama generado */
#lp .ed-diagrama { position: absolute; left: 6%; right: 6%; top: 15%; width: 88%; height: auto; overflow: visible }
#lp .ed-diagrama .nodo { fill: var(--panel-2); stroke: var(--oro); stroke-width: 1.2; transition: fill .5s var(--ease), stroke .5s var(--ease) }
#lp .ed-diagrama .nodo.viva { fill: color-mix(in oklab, var(--oro) 20%, var(--panel-2)); stroke: var(--oro-2) }
#lp .ed-diagrama .halo { fill: none; stroke: var(--oro-2); stroke-width: 6; stroke-opacity: 0; transition: stroke-opacity .6s var(--ease) }
#lp .ed-diagrama .halo.viva { stroke-opacity: .14 }
#lp .ed-diagrama .traza { fill: none; stroke: var(--oro-3); stroke-width: 1.2; stroke-linecap: round }
#lp .ed-diagrama .punta { fill: var(--oro); opacity: 0 }
#lp .ed-diagrama .rotulo { font-family: var(--f-texto); font-size: 13px; font-weight: 500; fill: var(--txt-2); opacity: 0; transition: fill .5s }
#lp .ed-diagrama .rotulo.viva { fill: var(--txt) }
#lp .ed-diagrama .titulo { font-family: var(--f-serif); font-style: italic; font-size: 14px; fill: var(--oro-2); opacity: 0 }
/* Subtítulo */
#lp .ed-sub { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); max-width: 90%; padding: 5px 11px; border-radius: 7px; background: color-mix(in oklab, var(--noche) 74%, transparent); font-size: 14px; line-height: 1.35; font-weight: 500; color: var(--txt); text-align: center; text-wrap: balance; opacity: var(--subop, 0); transform-origin: 50% 50%; will-change: transform, opacity }
#lp .ed-sub .pal { display: inline-block; opacity: 0 }
#lp .ed-sub .pal.oro { color: var(--oro-2) }
/* Luz y frío */
#lp .ed-luz { position: absolute; inset: 0; pointer-events: none; opacity: var(--calor); background: radial-gradient(ellipse 70% 60% at 0% 0%, color-mix(in oklab, var(--oro-2) 24%, transparent), transparent 65%) }
#lp .ed-frio { position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - var(--calor)); background: radial-gradient(ellipse 70% 70% at 50% 45%, transparent 50%, color-mix(in oklab, var(--frio-2) 60%, transparent)) }
/* Exportación: tres formatos */
#lp .ed-pane { position: absolute; border-radius: 6px; overflow: hidden; border: 1px solid color-mix(in oklab, var(--oro) 35%, transparent); opacity: 0; transform: scale(.7); transform-origin: 50% 50%; will-change: transform, opacity;
  background: radial-gradient(ellipse 90% 70% at 15% 0%, color-mix(in oklab, var(--oro) 28%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in oklab, var(--oro-3) 18%, var(--panel-2)), var(--panel)) }
#lp .ed-pane .mini { position: absolute; display: flex; align-items: center; gap: 3px }
#lp .ed-pane .mini i { width: 5px; height: 5px; border-radius: 50%; background: var(--oro); flex: none }
#lp .ed-pane .mini b { flex: 1; height: 1px; background: var(--oro-3); display: block }
#lp .ed-pane-b .mini { flex-direction: column; left: 50%; top: 16%; height: 42%; width: 5px; margin-left: -2.5px }
#lp .ed-pane-b .mini b { width: 1px; height: auto; align-self: stretch; flex: 1 }
#lp .ed-pane-c .mini { left: 14%; right: 14%; top: 36% }
#lp .ed-pane .subt { position: absolute; left: 20%; right: 20%; bottom: 12%; height: 3px; border-radius: 2px; background: color-mix(in oklab, var(--txt) 70%, transparent) }
#lp .ed-pane .subt::after { content: ""; position: absolute; left: 25%; right: 25%; top: 5px; height: 3px; border-radius: 2px; background: color-mix(in oklab, var(--oro-2) 80%, transparent) }
#lp .ed-pane-b .subt { left: 16%; right: 16%; bottom: 14% }
#lp .ed-pane-etq { position: absolute; font-family: var(--f-mono); font-size: 12px; color: var(--txt-3); text-align: center; opacity: 0; will-change: opacity, transform }
#lp .ed-listo { position: absolute; left: 50%; bottom: 7%; transform: translate(-50%, 8px); opacity: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--filo-2); background: color-mix(in oklab, var(--noche) 72%, transparent); font-size: 14px; color: var(--txt); white-space: nowrap; will-change: transform, opacity }
#lp .ed-listo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 8px color-mix(in oklab, var(--verde) 70%, transparent) }

/* ---------- Panel del asistente ---------- */
#lp .ed-panel { grid-area: panel; display: flex; flex-direction: column; min-width: 0; min-height: 0 }
#lp .ed-panel-cab { display: none; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--txt-3); padding-bottom: 8px; border-bottom: 1px solid var(--filo) }
#lp .ed-panel-cab::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 6px color-mix(in oklab, var(--oro) 70%, transparent) }
#lp .ed-msgs { position: relative; min-height: 36px }
#lp .ed-msg { position: absolute; left: 0; right: 0; display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.4; color: var(--txt-2); opacity: 0; will-change: transform, opacity }
#lp .ed-msg i { flex: none; width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; background: var(--noche); border: 1px solid var(--filo-2); transition: background .4s, border-color .4s, box-shadow .4s }
#lp .ed-msg.activa { color: var(--txt) }
#lp .ed-msg.activa i { background: var(--oro); border-color: var(--oro); box-shadow: 0 0 8px color-mix(in oklab, var(--oro) 70%, transparent) }
#lp .ed-msg.hecha i { background: var(--oro-3); border-color: var(--oro-3) }
#lp .ed-msg .l { display: none }
/* Móvil: una línea que cambia */
@media (max-width: 639px) {
  #lp .ed-msgs { height: 36px; border: 1px solid var(--filo); border-radius: 8px; padding: 0 12px; background: var(--noche) }
  #lp .ed-msg { top: 0; bottom: 0; align-items: center; white-space: nowrap; overflow: hidden }
  #lp .ed-msg span { overflow: hidden; text-overflow: ellipsis; min-width: 0 }
  #lp .ed-msg i { margin-top: 0 }
}
@media (min-width: 640px) {
  #lp .ed-panel-cab { display: flex }
  #lp .ed-msgs { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%); mask-image: linear-gradient(180deg, transparent, #000 28%) }
  #lp .ed-msg { bottom: 0 }
  #lp .ed-msg .l { display: inline } #lp .ed-msg .c { display: none }
}

/* ---------- Línea de tiempo ---------- */
#lp .ed-linea { grid-area: linea; position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 8px; row-gap: 4px; align-items: center }
@media (min-width: 640px) { #lp .ed-linea { grid-template-columns: 78px minmax(0, 1fr); column-gap: 10px; row-gap: 6px } }
#lp .ed-etq { font-family: var(--f-mono); font-size: 12px; color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
#lp .ed-etq .l { display: none }
@media (min-width: 640px) { #lp .ed-etq .l { display: inline } #lp .ed-etq .c { display: none } }
#lp .ed-regla { position: relative; height: 16px }
#lp .ed-tick { position: absolute; top: 11px; width: 1px; height: 5px; background: var(--filo-2) }
#lp .ed-tick span { position: absolute; left: 4px; top: -12px; font-family: var(--f-mono); font-size: 12px; line-height: 1; color: var(--txt-3); white-space: nowrap }
#lp .ed-tick.fin span { left: auto; right: 3px }
#lp .ed-pista { position: relative; height: 16px; border-radius: 4px; background: var(--noche); border: 1px solid var(--filo); overflow: hidden }
@media (min-width: 640px) { #lp .ed-pista { height: 22px; border-radius: 5px } }
#lp .ed-seg { position: absolute; top: 0; bottom: 0; transform-origin: 0 50% }
#lp .ed-seg-v { background: linear-gradient(180deg, var(--panel-2), var(--panel)) }
#lp .ed-seg-v::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 13px, var(--filo) 13px 14px) }
#lp .ed-seg-a { color: color-mix(in oklab, var(--frio) calc((1 - var(--calor)) * 100%), var(--oro)) }
#lp .ed-seg-a svg { display: block; width: 100%; height: 100%; overflow: visible }
#lp .ed-seg-a path { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; fill: none }
#lp .ed-marca { position: absolute; inset: 0; opacity: var(--marca, 0); border-left: 1px solid var(--frio); border-right: 1px solid var(--frio); background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--frio) 55%, transparent) 0 1.5px, transparent 1.5px 5px) }
#lp .ed-chip { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; background: color-mix(in oklab, var(--oro) 22%, transparent); border: 1px solid color-mix(in oklab, var(--oro) 45%, transparent); transform-origin: 0 50%; opacity: 0; transform: scaleX(.5) }
@media (min-width: 640px) { #lp .ed-chip { top: 4px; bottom: 4px; border-radius: 4px } }
#lp .ed-chip-g { background: color-mix(in oklab, var(--oro-2) 26%, transparent); border-color: color-mix(in oklab, var(--oro-2) 60%, transparent); display: flex; align-items: center; padding: 0 6px; font-family: var(--f-mono); font-size: 12px; color: var(--oro-2); white-space: nowrap; overflow: hidden }
#lp .ed-chip-g span { display: none }
@media (min-width: 640px) { #lp .ed-chip-g span { display: inline } }
#lp .ed-cabezal { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--oro-2); box-shadow: 0 0 6px color-mix(in oklab, var(--oro-2) 60%, transparent); pointer-events: none; will-change: transform; z-index: 2 }
#lp .ed-cabezal::before { content: ""; position: absolute; left: -4px; top: 3px; width: 7px; height: 7px; background: var(--oro-2); transform: rotate(45deg); border-radius: 1px }

/* ---------- Pasos (botones reales) ---------- */
#lp .ed-rail { grid-area: rail; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px solid var(--filo) }
#lp .ed-pasos { position: relative; display: flex; flex: none }
#lp .ed-pasos::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; height: 1px; background: var(--filo-2) }
#lp .ed-pasos-luz { position: absolute; left: 22px; right: 22px; top: 50%; height: 1px; background: var(--oro); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); box-shadow: 0 0 6px color-mix(in oklab, var(--oro) 60%, transparent) }
#lp .ed-paso { position: relative; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; padding: 0; border-radius: 50% }
#lp .ed-paso i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--noche); border: 1px solid var(--filo-2); transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease) }
#lp .ed-paso.hecho i { background: var(--oro); border-color: var(--oro) }
#lp .ed-paso[aria-pressed="true"] i { background: var(--oro-2); border-color: var(--oro-2); transform: scale(1.35); box-shadow: 0 0 10px 2px color-mix(in oklab, var(--oro-2) 55%, transparent) }
#lp .ed-paso:hover i { border-color: var(--oro) }
#lp .ed-paso-txt { font-size: 14px; color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
#lp .ed-paso-txt b { font-family: var(--f-mono); font-weight: 400; color: var(--oro); margin-right: 8px; display: none }
@media (min-width: 640px) { #lp .ed-paso-txt b { display: inline } }