/* ==========================================================
   DECKA DJ · EL EDITOR
   ----------------------------------------------------------
   Arriba, tres zonas: los clips que tienes, el monitor con su
   transporte y la ficha de lo que haya seleccionado. Abajo, la
   línea de tiempo con sus tres pistas y la rejilla de compases,
   para que los cortes caigan donde cae el bombo.

   Verde de cabo a rabo, que es el color de «cerrado» en Decka
   DJ: aquí ya no se crea nada, se monta y se saca.
   ========================================================== */

.ed[hidden]{display:none !important}
.ed{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:clamp(8px,.9vh,13px)}

/* ---------- las tres zonas de arriba ---------- */
.ed-arriba{flex:1 1 auto;min-height:0;display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.9fr) minmax(0,.78fr);
  gap:clamp(8px,.8vw,14px)}
.ed-zona{position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden;
  border-radius:clamp(12px,.9vw,16px);
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 20px 46px -30px #000}
.ed-zona > header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:clamp(8px,1vh,12px) clamp(10px,.8vw,14px);
  border-bottom:1px solid rgba(255,255,255,.07)}
.ed-zona > header b{display:flex;align-items:center;gap:8px;min-width:0;
  font-family:var(--dato,monospace);font-size:.48rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--aluminio,#8CA0B8);font-weight:400}
.ed-zona > header b svg{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:var(--v,#4BE0A0);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ed-zona > header em{font-style:normal;font-family:var(--dato,monospace);font-size:.46rem;
  color:var(--apagado,#7C8799);white-space:nowrap}
.ed-cuerpo{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;
  padding:clamp(8px,1vh,12px) clamp(9px,.8vw,13px)}

/* ---------- los clips que tienes ---------- */
.ed-clips{display:flex;flex-direction:column;gap:7px}
.ed-clip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:center;
  cursor:grab;border:0;padding:7px;border-radius:11px;text-align:left;color:inherit;font:inherit;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:.15s ease}
.ed-clip:hover{background:color-mix(in srgb, var(--v,#4BE0A0) 16%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--v,#4BE0A0) 45%, transparent)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .ed-clip:hover{background:rgba(255,255,255,.1)}
}
.ed-clip:active{cursor:grabbing}
.ed-clip-mini{width:54px;aspect-ratio:16/10;border-radius:7px;overflow:hidden;flex:0 0 auto;
  position:relative;background:#05070B;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ed-clip-mini img,.ed-clip-mini video{width:100%;height:100%;object-fit:cover;display:block}
.ed-clip-txt{min-width:0}
.ed-clip-txt b{display:block;font-size:.78rem;color:var(--crema,#F4F0E6);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-clip-txt span{display:block;font-family:var(--dato,monospace);font-size:.44rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--apagado,#7C8799);margin-top:3px}
.ed-vacio{margin:0;padding:18px 6px;text-align:center;font-size:.77rem;line-height:1.55;
  color:var(--apagado,#7C8799)}
.ed-vacio b{display:block;color:var(--aluminio,#8CA0B8);margin-bottom:5px}

/* ---------- el monitor ---------- */
.ed-monitor{padding:0}
.ed-pantalla{position:relative;flex:1 1 auto;min-height:0;background:#04060A;overflow:hidden;
  display:grid;place-items:center}
/* El monitor es un lienzo: lo pinta el mismo compositor que la
   exportación, así que lo que se ve aquí es lo que sale luego. */
.ed-lienzo{position:absolute;inset:0;width:100%;height:100%;display:block;background:#04060A}
/* Los vídeos siguen existiendo, ocultos, solo para descodificar y
   sonar. No se pone display:none a propósito: hay navegadores que
   dejan de dar fotogramas de lo que no se muestra, y el lienzo
   copiaría negro. */
.ed-medios{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;
  opacity:.001;pointer-events:none;z-index:-1}
.ed-medios video{width:1px;height:1px}
/* con display:grid el atributo hidden no basta */
.ed-pantalla .ed-nada[hidden]{display:none !important}
.ed-pantalla .ed-nada{text-align:center;padding:20px;display:grid;gap:9px;justify-items:center}
.ed-pantalla .ed-nada svg{width:clamp(26px,2.4vw,36px);height:clamp(26px,2.4vw,36px);
  fill:none;stroke:var(--v,#4BE0A0);stroke-width:1.5;opacity:.55}
.ed-pantalla .ed-nada p{margin:0;font-size:.79rem;color:var(--apagado,#7C8799);max-width:30ch;
  line-height:1.5}
/* ---------- pantalla completa, en dos modos ----------
   Limpia, para enseñar el montaje, y con los mandos, para
   revisarlo sin volver a la ventana pequeña. Los mandos no se
   quitan del documento, solo se esconden: al salir están donde
   estaban y no hay que volver a montar nada. */
.ed-monitor[data-lleno="1"]{background:#000;padding:0}
.ed-monitor[data-lleno="1"] .ed-pantalla{height:100%}

/* ---------- los mandos de pantalla completa ----------
   Una barra flotante sobre el vídeo, centrada y con un ancho
   propio. Antes en pantalla completa se estiraba el transporte de
   la ventana pequeña a lo ancho de todo el monitor: el play en un
   extremo, el reloj en medio y el BPM en el otro, a medio metro
   de distancia en un monitor grande, y sin barra de progreso.
   Fuera de pantalla completa no existe. */
.ed-mandos{display:none}
.ed-monitor[data-lleno="1"][data-modo="mandos"] .ed-mandos{
  display:block;position:absolute;z-index:6;
  left:50%;transform:translateX(-50%);
  bottom:max(22px, env(safe-area-inset-bottom, 0px));
  width:min(680px, calc(100% - 48px));
  padding:11px 13px 9px;border-radius:17px;
  background:rgba(8,11,18,.82);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), 0 26px 60px -24px #000;
  transition:opacity .28s ease, transform .28s ease}
.ed-monitor[data-lleno="1"][data-modo="mandos"][data-quieto="1"] .ed-mandos{
  opacity:0;transform:translateX(-50%) translateY(14px);pointer-events:none}
.ed-mandos-fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;align-items:center;margin-top:9px}
.ed-mandos-der{display:flex;gap:6px}
.ed-mandos .ed-reloj{text-align:center}

/* la raya de progreso: se puede arrastrar */
.ed-mandos-barra{position:relative;height:16px;cursor:pointer;touch-action:none}
.ed-mandos-barra::before{content:"";position:absolute;left:0;right:0;top:7px;height:3px;
  border-radius:3px;background:rgba(255,255,255,.17)}
.ed-mandos-barra i{position:absolute;left:0;top:7px;height:3px;width:0;border-radius:3px;
  background:var(--v,#4BE0A0)}
.ed-mandos-barra b{position:absolute;top:3px;left:0;width:11px;height:11px;border-radius:50%;
  margin-left:-5.5px;background:var(--crema,#F4F0E6);
  box-shadow:0 2px 8px rgba(0,0,0,.6);transition:transform .14s ease}
.ed-mandos-barra:hover b{transform:scale(1.25)}

/* las guías de encuadre, como en un monitor de verdad */
.ed-guias{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s ease}
.ed-guias[data-on="1"]{opacity:.5}
.ed-guias i{position:absolute;background:rgba(255,255,255,.22)}
.ed-guias i:nth-child(1){left:33.33%;top:0;bottom:0;width:1px}
.ed-guias i:nth-child(2){left:66.66%;top:0;bottom:0;width:1px}
.ed-guias i:nth-child(3){top:33.33%;left:0;right:0;height:1px}
.ed-guias i:nth-child(4){top:66.66%;left:0;right:0;height:1px}

/* El transporte vive en la barra de la línea de tiempo, no debajo
   del monitor: es una isla compacta, no una franja estirada de lado
   a lado con el play en una punta y el BPM en la otra. */
.ed-transporte{flex:0 0 auto;display:flex;align-items:center;gap:clamp(8px,.7vw,13px);
  padding:5px 6px 5px 8px;border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.22));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ed-transporte .ed-reloj{text-align:left;min-width:7.5ch}
.ed-botones{display:flex;gap:6px;align-items:center}
.ed-bt{cursor:pointer;border:0;width:clamp(30px,2.4vw,36px);aspect-ratio:1;border-radius:10px;
  display:grid;place-items:center;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:.15s ease}
.ed-bt:hover{background:rgba(255,255,255,.13)}
.ed-bt svg{width:16px;height:16px;fill:none;stroke:var(--crema,#F4F0E6);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ed-bt.grande{width:clamp(38px,3vw,46px);
  background:linear-gradient(180deg, color-mix(in srgb, var(--v,#4BE0A0) 92%, #fff), var(--v,#4BE0A0));
  box-shadow:0 10px 24px -12px var(--v,#4BE0A0), inset 0 1px 0 rgba(255,255,255,.45)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .ed-bt.grande{background:var(--v,#4BE0A0)}
}
.ed-bt.grande svg{stroke:#06120C;fill:#06120C;width:18px;height:18px}
.ed-reloj{font-family:var(--dato,monospace);font-size:clamp(.78rem,1.5vh,.95rem);
  color:var(--crema,#F4F0E6);text-align:center;letter-spacing:.06em;white-space:nowrap}
.ed-reloj small{display:block;font-size:.44rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--apagado,#7C8799);margin-top:3px}
.ed-conmut{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.ed-conm{cursor:pointer;border:0;border-radius:9px;padding:7px 11px;
  font-family:var(--dato,monospace);font-size:.46rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--aluminio,#8CA0B8);background:rgba(0,0,0,.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:.15s ease;white-space:nowrap}
.ed-conm:hover{color:var(--crema,#F4F0E6)}
.ed-conm[data-on="1"]{color:#06120C;font-weight:600;background:var(--v,#4BE0A0);
  box-shadow:0 0 20px -8px var(--v,#4BE0A0)}

/* ---------- la ficha de la derecha ---------- */
.ed-ficha{display:flex;flex-direction:column;gap:clamp(9px,1.1vh,14px)}
.ed-grupo{display:flex;flex-direction:column;gap:6px}
.ed-grupo > span{font-family:var(--dato,monospace);font-size:.44rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--apagado,#7C8799)}
.ed-mando{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.ed-mando label{font-size:.76rem;color:var(--aluminio,#8CA0B8);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-mando output{font-family:var(--dato,monospace);font-size:.68rem;color:var(--v,#4BE0A0);
  text-align:right;min-width:46px}
.ed-mando input[type="range"]{grid-column:1 / -1;width:100%;accent-color:var(--v,#4BE0A0);
  height:5px}
.ed-pares{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.ed-par{cursor:pointer;border:0;border-radius:9px;padding:8px 6px;text-align:center;
  font-family:var(--dato,monospace);font-size:.5rem;letter-spacing:.08em;
  color:var(--aluminio,#8CA0B8);background:rgba(0,0,0,.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:.15s ease}
.ed-par:hover{color:var(--crema,#F4F0E6)}
.ed-par[data-on="1"]{color:#06120C;font-weight:600;background:var(--v,#4BE0A0)}
.ed-nota{margin:0;font-size:.74rem;line-height:1.5;color:var(--apagado,#7C8799)}
.ed-nota b{color:var(--aluminio,#8CA0B8);font-weight:600}

/* ==========================================================
   LA LÍNEA DE TIEMPO
   ========================================================== */
.ed-linea{flex:0 0 auto;position:relative;border-radius:clamp(12px,.9vw,16px);overflow:hidden;
  background:linear-gradient(180deg,rgba(12,16,24,.8),rgba(6,8,13,.9));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 20px 46px -30px #000}
.ed-linea-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:clamp(7px,.9vh,11px) clamp(10px,.9vw,15px);
  border-bottom:1px solid rgba(255,255,255,.07)}
.ed-linea-cab b{display:flex;align-items:center;gap:8px;
  font-family:var(--dato,monospace);font-size:.48rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--aluminio,#8CA0B8);font-weight:400}
.ed-linea-cab b svg{width:14px;height:14px;fill:none;stroke:var(--v,#4BE0A0);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ed-linea-mandos{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

.ed-pistas{position:relative;padding:0 0 clamp(7px,.9vh,11px)}
/* La línea se desplaza a lo ancho cuando el montaje no cabe con el
   zoom que haya puesto. Los nombres de las pistas se quedan
   pegados a la izquierda, que es lo que permite acercarse a un
   corte sin perder de vista en qué pista se está. */
.ed-scroll{position:relative;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.ed-scroll::-webkit-scrollbar{height:9px}
.ed-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:9px}
.ed-scroll::-webkit-scrollbar-track{background:transparent}
.ed-dentro{position:relative;min-width:100%}
.ed-regla{position:relative;height:20px;margin:0 0 4px;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.07)}
.ed-regla i{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.1)}
.ed-regla i[data-fuerte="1"]{background:rgba(255,255,255,.26)}
.ed-regla span{position:absolute;top:3px;font-family:var(--dato,monospace);font-size:.42rem;
  color:var(--apagado,#7C8799);transform:translateX(3px)}

.ed-pista{position:relative;display:flex;align-items:stretch;gap:0;
  height:clamp(34px,4.6vh,50px);margin-top:4px}
.ed-pista-et{position:sticky;left:0;z-index:3;flex:0 0 108px;width:108px;
  display:flex;align-items:center;gap:5px;padding-left:10px;
  font-family:var(--dato,monospace);font-size:.44rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--apagado,#7C8799);min-width:0;overflow:hidden;
  background:linear-gradient(90deg, var(--fondoPista,#0B0E14) 78%, transparent)}
.ed-pista-et b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ed-pista-et i{width:6px;height:6px;border-radius:2px;background:var(--p,#4BE0A0);flex:0 0 auto;
  box-shadow:0 0 8px var(--p,#4BE0A0)}
/* Los botones de la pista se ven siempre, tenues. Escondidos
   hasta pasar por encima nadie los encuentra, y subir una pista
   de sitio es justo lo que hay que hacer para tapar un vídeo con
   otro: si no se ve que se puede, no se hace. */
.ed-pista-et button{flex:0 0 auto;cursor:pointer;border:0;background:none;
  padding:2px;border-radius:5px;color:#5C6675;transition:color .15s ease, background .15s ease}
.ed-pista-et button:last-of-type{margin-right:6px}
.ed-pista:hover .ed-pista-et button{color:var(--apagado,#7C8799)}
.ed-pista-et button:hover{color:var(--crema,#F4F0E6);background:rgba(255,255,255,.12)}
.ed-pista-et button svg{width:12px;height:12px;display:block;fill:none;stroke:currentColor;stroke-width:2}
.ed-canal{position:relative;overflow:hidden;border-radius:8px;flex:0 0 auto;
  background:rgba(255,255,255,.028);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.ed-canal[data-suelta="1"]{box-shadow:inset 0 0 0 1.5px var(--v,#4BE0A0)}
/* la rejilla de compases, por debajo de los trozos */
.ed-canal .ed-rej{position:absolute;inset:0;pointer-events:none}
.ed-canal .ed-rej i{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.055)}
.ed-canal .ed-rej i[data-fuerte="1"]{background:rgba(255,255,255,.13)}

/* El color de la barra dice qué hay dentro sin tener que leer el
   nombre: morado vídeo mudo, marrón vídeo con sonido, rojo audio y
   verde foto. Lo pone el archivo, no la pista, así que un clip no
   cambia de color al moverlo de sitio. */
.ed-trozo{position:absolute;top:3px;bottom:3px;border-radius:6px;overflow:hidden;cursor:grab;
  border:0;padding:0;min-width:10px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c,#B07BFF) 52%, transparent),
                                     color-mix(in srgb, var(--c,#B07BFF) 26%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c,#B07BFF) 66%, transparent);
  transition:box-shadow .14s ease}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .ed-trozo{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
}
.ed-trozo:active{cursor:grabbing}
.ed-trozo:hover{box-shadow:inset 0 0 0 1.5px var(--c,#B07BFF)}
.ed-trozo[data-sel="1"]{box-shadow:inset 0 0 0 2px #fff, 0 0 26px -8px var(--c,#B07BFF);z-index:2}
/* una franja del color a la izquierda, que se ve aunque la barra
   sea estrechísima porque el clip dure medio segundo */
.ed-trozo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--c,#B07BFF)}
.ed-trozo span{position:absolute;left:6px;right:6px;top:50%;transform:translateY(-50%);
  font-size:.66rem;color:#fff;font-weight:600;text-align:left;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.8)}
/* La miniatura va muy apagada a propósito. Con la imagen a toda
   luz, el color del tipo —que es lo que se lee de un vistazo— se
   perdía debajo de un vídeo de barras de color. Ahora la
   miniatura sitúa y el color manda. */
.ed-trozo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.17}
.ed-trozo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c,#B07BFF) 30%, transparent),
                                     color-mix(in srgb, var(--c,#B07BFF) 12%, transparent))}
.ed-trozo span{z-index:2}
/* los tiradores de los extremos. El de la derecha cambia lo que
   dura; el de la izquierda recorta por delante sin mover la
   imagen de sitio. */
.ed-trozo u{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;opacity:0;
  transition:opacity .15s ease}
.ed-trozo:hover u,.ed-trozo[data-sel="1"] u{opacity:1}
.ed-trozo u[data-lado="d"]{right:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42))}
.ed-trozo u[data-lado="i"]{left:0;background:linear-gradient(270deg,transparent,rgba(255,255,255,.42))}

.ed-cabezal{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none;
  z-index:4;box-shadow:0 0 12px rgba(255,255,255,.7)}
.ed-cabezal::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #fff}

/* ---------- las salidas ---------- */
.ed-salidas{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(7px,.7vw,11px)}
.ed-salida{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;
  cursor:pointer;border:0;text-align:left;color:inherit;font:inherit;
  padding:clamp(9px,1.1vh,14px) clamp(11px,.9vw,16px);border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:.16s ease}
.ed-salida:hover{transform:translateY(-2px);
  background:color-mix(in srgb, var(--s,#4BE0A0) 15%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--s,#4BE0A0) 52%, transparent),
             0 0 34px -18px var(--s,#4BE0A0)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .ed-salida:hover{background:rgba(255,255,255,.1)}
}
.ed-salida-ico{width:clamp(30px,2.4vw,38px);aspect-ratio:1;border-radius:10px;flex:0 0 auto;
  display:grid;place-items:center;background:color-mix(in srgb, var(--s,#4BE0A0) 16%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--s,#4BE0A0) 34%, transparent)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .ed-salida-ico{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
}
.ed-salida-ico svg{width:56%;height:56%;fill:none;stroke:var(--s,#4BE0A0);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.ed-salida b{display:block;font-size:.83rem;font-weight:600;color:var(--crema,#F4F0E6);
  line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-salida span{display:block;font-size:.72rem;color:var(--apagado,#7C8799);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:1250px){
  .ed-arriba{grid-template-columns:minmax(0,1fr)}
  .ed-bin,.ed-insp{max-height:26vh}
  .ed-salidas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-height:800px){
  .ed-salida span{display:none}
  .ed-pista{height:30px}
}

/* ==========================================================
   EL COLOR DE LA MESA MANDA AQUÍ DENTRO
   El armazón del sitio tiñe de cian todo lo que lleve data-on,
   y en el editor eso es verde. Con un selector más concreto se
   queda como debe sin tocar nada de fuera.
   ========================================================== */
.ed .ed-par[data-on="1"],
.ed .ed-conm[data-on="1"]{background:var(--v,#4BE0A0);color:#06120C;
  box-shadow:0 0 20px -8px var(--v,#4BE0A0)}
.ed .ed-mando input[type="range"]{accent-color:var(--v,#4BE0A0);
  --relleno:linear-gradient(90deg, var(--v,#4BE0A0), color-mix(in srgb, var(--v,#4BE0A0) 45%, transparent))}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .ed .ed-mando input[type="range"]{--relleno:var(--v,#4BE0A0)}
}
.ed .ed-mando input[type="range"]::-webkit-slider-runnable-track{background:var(--relleno)}
.ed .ed-mando input[type="range"]::-moz-range-track{background:var(--relleno)}

/* ==========================================================
   LOS ARCHIVOS, EN DOS SECCIONES
   ----------------------------------------------------------
   Arriba lo tuyo, abajo lo que ha salido de la IA. Cada una con
   su cuenta y su vista, en cuadrícula o en lista, porque con
   cincuenta clips una lista larga no hay quien la lea.
   ========================================================== */
.ed-bin .ed-cuerpo{padding:0;display:flex;flex-direction:column;gap:0}
.ed-seccion{display:flex;flex-direction:column;min-height:0;flex:1 1 50%}
.ed-seccion + .ed-seccion{border-top:1px solid rgba(255,255,255,.08)}
.ed-seccion > header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:clamp(7px,.9vh,10px) clamp(9px,.8vw,13px)}
.ed-seccion > header b{display:flex;align-items:center;gap:7px;min-width:0;
  font-family:var(--dato,monospace);font-size:.44rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--aluminio,#8CA0B8);font-weight:400}
.ed-seccion > header b i{width:6px;height:6px;border-radius:2px;background:var(--s,#4BE0A0);
  box-shadow:0 0 8px var(--s,#4BE0A0);flex:0 0 auto}
.ed-vistas{display:flex;gap:3px;flex:0 0 auto}
.ed-vista{cursor:pointer;border:0;width:24px;height:24px;border-radius:7px;display:grid;
  place-items:center;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:.14s ease}
.ed-vista svg{width:13px;height:13px;fill:none;stroke:var(--aluminio,#8CA0B8);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ed-vista:hover svg{stroke:var(--crema,#F4F0E6)}
.ed .ed-vista[data-on="1"]{background:var(--v,#4BE0A0)}
.ed .ed-vista[data-on="1"] svg{stroke:#06120C}
.ed-seccion .ed-lista{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;
  padding:0 clamp(9px,.8vw,13px) clamp(8px,1vh,12px)}

/* en cuadrícula */
.ed-lista[data-vista="cuadricula"] .ed-clips{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.ed-lista[data-vista="cuadricula"] .ed-clip{grid-template-columns:minmax(0,1fr);padding:0;
  overflow:hidden}
.ed-lista[data-vista="cuadricula"] .ed-clip-mini{width:100%;border-radius:10px 10px 0 0}
.ed-lista[data-vista="cuadricula"] .ed-clip-txt{padding:6px 7px 7px}
.ed-lista[data-vista="cuadricula"] .ed-clip-txt b{font-size:.72rem}
.ed-lista[data-vista="cuadricula"] .ed-clip-txt span{font-size:.4rem}

/* los huecos dibujados: aquí va contenido */
.ed-huecos{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.ed-hueco{position:relative;aspect-ratio:16/10;border-radius:10px;display:grid;place-items:center;
  border:1.4px dashed color-mix(in srgb, var(--s,#4BE0A0) 34%, transparent);
  background:color-mix(in srgb, var(--s,#4BE0A0) 5%, rgba(255,255,255,.012))}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .ed-hueco{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.02)}
}
.ed-hueco svg{width:34%;height:34%;fill:none;stroke:var(--s,#4BE0A0);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:.45}
.ed-hueco::after{content:"";position:absolute;left:8px;right:8px;bottom:7px;height:2px;
  border-radius:2px;background:color-mix(in srgb, var(--s,#4BE0A0) 22%, transparent)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .ed-hueco::after{background:rgba(255,255,255,.1)}
}
.ed-subir{margin-top:8px;width:100%;cursor:pointer;border:0;border-radius:10px;
  padding:9px 12px;font-family:var(--dato,monospace);font-size:.46rem;letter-spacing:.12em;
  text-transform:uppercase;color:#06120C;font-weight:700;background:var(--s,#4BE0A0);
  box-shadow:0 10px 24px -14px var(--s,#4BE0A0)}
.ed-subir.fantasma{color:var(--aluminio,#8CA0B8);background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}

/* lo que ocupan tus archivos, en tu propio equipo */
.ed-disco{margin:7px 0 0;display:flex;align-items:center;gap:8px;
  font-family:var(--dato,monospace);font-size:.4rem;letter-spacing:.09em;
  text-transform:uppercase;color:#7E8896}
.ed-disco span{flex:1 1 auto;min-width:0}
.ed-disco button{flex:0 0 auto;cursor:pointer;border:0;border-radius:7px;padding:5px 9px;
  font:inherit;color:#AEB8C7;background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:color .2s ease, background .2s ease}
.ed-disco button:hover{color:#FF7A6E;background:rgba(255,68,56,.12);
  box-shadow:inset 0 0 0 1px rgba(255,68,56,.3)}

/* ==========================================================
   LA FICHA CON PESTAÑAS
   ========================================================== */
.ed-pes{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;
  padding:clamp(7px,.9vh,10px) clamp(9px,.8vw,13px) 0}
.ed-pe{cursor:pointer;border:0;border-radius:9px 9px 0 0;padding:8px 4px;
  font-family:var(--dato,monospace);font-size:.44rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--apagado,#7C8799);background:rgba(255,255,255,.03);transition:.14s ease;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-pe:hover{color:var(--aluminio,#8CA0B8)}
.ed .ed-pe[data-on="1"]{color:#06120C;font-weight:700;background:var(--v,#4BE0A0)}

/* efectos: rejilla de fichitas */
.ed-efectos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.ed-efecto{cursor:pointer;border:0;border-radius:10px;padding:9px 7px;display:flex;
  flex-direction:column;align-items:center;gap:5px;color:var(--aluminio,#8CA0B8);
  background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:.14s ease;min-width:0}
.ed-efecto svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.ed-efecto span{font-size:.64rem;line-height:1.2;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ed-efecto:hover{color:var(--crema,#F4F0E6)}
.ed .ed-efecto[data-on="1"]{color:#06120C;background:var(--v,#4BE0A0)}

/* pegatinas */
.ed-pegas{display:flex;flex-direction:column;gap:9px}
.ed-pega-g > span{display:block;font-family:var(--dato,monospace);font-size:.42rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--apagado,#7C8799);margin-bottom:5px}
.ed-pega-r{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:4px}
.ed-pega{cursor:pointer;border:0;border-radius:8px;padding:5px;background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:.13s ease;display:grid;
  place-items:center}
.ed-pega:hover{background:rgba(255,255,255,.14);transform:scale(1.08)}
.ed-pega img{width:100%;height:auto;display:block;aspect-ratio:1}

/* texto */
.ed-campo{display:flex;flex-direction:column;gap:5px}
.ed-campo label{font-family:var(--dato,monospace);font-size:.42rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--apagado,#7C8799)}
.ed-campo input[type="text"],.ed-campo textarea{width:100%;border:0;outline:0;border-radius:9px;
  padding:9px 11px;color:var(--crema,#F4F0E6);font:inherit;font-size:.84rem;
  background:rgba(0,0,0,.36);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ed-campo input:focus,.ed-campo textarea:focus{box-shadow:inset 0 0 0 1px var(--v,#4BE0A0)}
.ed-colores{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.ed-color{cursor:pointer;border:0;aspect-ratio:1;border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.ed-color[data-on="1"]{box-shadow:inset 0 0 0 2px #fff, 0 0 16px -4px currentColor}

/* ==========================================================
   LA BARRA DE HERRAMIENTAS DE LA LÍNEA
   ========================================================== */
.ed-barra{display:flex;align-items:center;gap:clamp(5px,.5vw,9px);flex-wrap:wrap;
  padding:clamp(6px,.8vh,10px) clamp(9px,.8vw,14px);
  border-bottom:1px solid rgba(255,255,255,.07)}
.ed-sep{width:1px;align-self:stretch;background:rgba(255,255,255,.1);margin:2px 3px}
.ed-h{cursor:pointer;border:0;width:clamp(28px,2.2vw,33px);aspect-ratio:1;border-radius:8px;
  display:grid;place-items:center;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:.14s ease;flex:0 0 auto}
.ed-h svg{width:15px;height:15px;fill:none;stroke:var(--aluminio,#8CA0B8);stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.ed-h:hover{background:rgba(255,255,255,.12)}
.ed-h:hover svg{stroke:var(--crema,#F4F0E6)}
.ed .ed-h[data-on="1"]{background:var(--v,#4BE0A0)}
.ed .ed-h[data-on="1"] svg{stroke:#06120C}
.ed-h[disabled]{opacity:.35;cursor:not-allowed}
.ed-zoombar{display:flex;align-items:center;gap:7px;flex:0 0 auto;min-width:120px}
.ed-zoombar svg{width:14px;height:14px;fill:none;stroke:var(--apagado,#7C8799);stroke-width:1.9;
  stroke-linecap:round;flex:0 0 auto}
.ed .ed-zoombar input[type="range"]{flex:1 1 auto;min-width:70px;height:5px;
  accent-color:var(--v,#4BE0A0)}
.ed-largo{margin-left:auto;font-family:var(--dato,monospace);font-size:.5rem;letter-spacing:.09em;
  color:var(--apagado,#7C8799);white-space:nowrap}
.ed-largo b{color:var(--crema,#F4F0E6);font-weight:400}

/* ==========================================================
   EL MONITOR: PANTALLA COMPLETA Y CAPAS
   ========================================================== */
.ed-capa{position:absolute;pointer-events:none;z-index:3;
  transform:translate(-50%,-50%);text-align:center;max-width:86%}
.ed-capa img{width:100%;height:auto;display:block}
.ed-capa b{display:block;font-family:var(--display,inherit);font-weight:800;line-height:1.1;
  letter-spacing:-.01em;text-shadow:0 3px 18px rgba(0,0,0,.85)}
.ed-pantalla:fullscreen{background:#000}
.ed-pantalla:fullscreen video,.ed-pantalla:fullscreen img{max-height:100vh}

/* la pista nueva se puede quitar */
.ed-pista-et button{cursor:pointer;border:0;background:transparent;padding:0 0 0 3px;
  display:grid;place-items:center;opacity:.5;transition:.14s ease}
.ed-pista-et button:hover{opacity:1}
.ed-pista-et button svg{width:11px;height:11px;fill:none;stroke:var(--rojo,#FF4438);
  stroke-width:2.2;stroke-linecap:round}

/* ==========================================================
   AL SOLTAR ARCHIVOS ENCIMA
   ----------------------------------------------------------
   El editor entero acepta que le sueltes vídeos e imágenes, no
   solo el botón de la esquina. Mientras el archivo va por el
   aire, el borde lo dice.
   ========================================================== */
.ed[data-suelta="1"]{
  outline:2px dashed rgba(75,224,160,.7);outline-offset:-6px;
  background:rgba(75,224,160,.05)}
/* un archivo que el navegador no sabe abrir se dice, no se calla */
.ed-clip[data-mal="1"]{opacity:.62}
.ed-clip[data-mal="1"] .ed-clip-txt span{color:#FF8A80}

/* ==========================================================
   SACAR EL MONTAJE
   ----------------------------------------------------------
   Una ventana corta: tamaño, fotogramas y a correr. Mientras
   trabaja no se puede tocar nada, porque cambiar el montaje a
   media exportación daría un archivo con mitad de una cosa y
   mitad de otra.
   ========================================================== */
.ed-velo{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:24px;background:rgba(3,6,10,.76);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ed-salir{
  width:min(460px,94vw);display:flex;flex-direction:column;gap:12px;
  padding:22px;border-radius:18px;
  background:linear-gradient(180deg,#121926,#080C13);
  box-shadow:inset 0 0 0 1px rgba(75,224,160,.3), 0 60px 120px -60px #000}
.ed-salir > b{font-family:var(--disp,inherit);font-size:1.15rem;color:#E7ECF3}
.ed-salir > p{margin:0;font-size:.8rem;line-height:1.5;color:#AEB8C7}
.ed-salir-tam{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.ed-salir-fps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.ed-salir-tam button,.ed-salir-fps button{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:9px 11px;border:0;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.05);color:#C6CFDC;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  font-family:var(--dato,inherit);font-size:.66rem;text-align:left}
.ed-salir-fps button{align-items:center}
.ed-salir-tam button b{font-family:var(--disp,inherit);font-size:.92rem;color:#E7ECF3}
.ed-salir-tam button span{font-size:.62rem;color:#7E8896}
.ed-salir-tam button[data-on="1"],.ed-salir-fps button[data-on="1"]{
  background:linear-gradient(180deg,#8CF0C4,#4BE0A0);color:#06080D;
  box-shadow:0 0 22px -8px #4BE0A0}
.ed-salir-tam button[data-on="1"] b,
.ed-salir-tam button[data-on="1"] span{color:#06080D}
.ed-salir-barra{height:6px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.08)}
.ed-salir-barra i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#8CF0C4,#4BE0A0);
  box-shadow:0 0 14px -2px #4BE0A0;transition:width .25s ease}
.ed-salir-paso{
  margin:0;font-family:var(--dato,inherit);font-size:.64rem;color:#9AA5B6;min-height:1.1em}
.ed-salir-pie{display:flex;gap:8px;justify-content:flex-end;margin-top:2px}
.ed-salir .ed-bt{
  padding:9px 15px;border:0;border-radius:10px;cursor:pointer;
  font-family:var(--dato,inherit);font-size:.66rem;
  color:#C6CFDC;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ed-salir .ed-bt-si{
  color:#06080D;background:linear-gradient(180deg,#8CF0C4,#4BE0A0);
  box-shadow:0 0 26px -10px #4BE0A0}
.ed-salir .ed-bt:disabled{opacity:.5;cursor:default}

/* ==========================================================
   LO QUE FALTABA
   ========================================================== */

/* ---------- la ficha del trozo, con su cabecera ----------
   El panel llegaba hasta media columna y dejaba el resto en
   negro. Ahora cae aquí todo lo que se le hace a un trozo sin
   irse a la pestaña de efectos. */
.ed-cabe{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  gap:2px 10px;align-items:center;padding:9px 10px;border-radius:12px;
  background:color-mix(in srgb, var(--c,#B07BFF) 13%, rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c,#B07BFF) 32%, transparent)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .ed-cabe{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
}
.ed-cabe img,.ed-cabe i{grid-row:1 / 3;width:46px;aspect-ratio:16/10;border-radius:7px;
  object-fit:cover;display:grid;place-items:center;background:rgba(0,0,0,.4)}
.ed-cabe i svg{width:18px;height:18px;fill:none;stroke:var(--c,#B07BFF);stroke-width:1.7}
.ed-cabe b{font-size:.8rem;font-weight:600;color:var(--crema,#F4F0E6);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ed-cabe em{font-style:normal;font-family:var(--dato,monospace);font-size:.42rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--c,#B07BFF)}

/* la nota que explica un mando, en el gris más apagado de los tres */
.ed-pista-nota{margin:1px 0 0;font-size:.67rem;line-height:1.45;color:#7E8896}

/* la ficha de datos del archivo, al final del panel */
.ed-datos{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 10px;
  font-family:var(--dato,monospace);font-size:.56rem}
.ed-datos dt{color:#7E8896;letter-spacing:.05em}
.ed-datos dd{margin:0;color:#AEB8C7;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- la rejilla de efectos ----------
   Sin icono: el nombre cabe entero y se lee, que es lo que hace
   falta cuando hay catorce colores donde antes había ocho. */
.ed-efectos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.ed-efecto{min-height:34px;padding:7px 8px}
.ed-efecto span{font-size:.66rem}
/* la línea que cuenta qué hace el efecto señalado: para el móvil,
   donde no hay ratón que poner encima, y para quien va con el
   teclado y nunca vería el título */
.ed-dice{margin:2px 0 0;padding:9px 11px;border-radius:10px;font-size:.7rem;line-height:1.5;
  color:#AEB8C7;background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);min-height:2.6em}

/* ---------- la cesta de archivos ----------
   El color de cada ficha es el mismo que tendrá su barra en la
   línea de tiempo: así se sabe qué va a salir antes de soltarlo. */
.ed-clip{position:relative}
.ed-clip::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;
  border-radius:0 3px 3px 0;background:var(--c,#B07BFF)}
.ed-clip-son{width:24px;height:24px;fill:none;stroke:var(--c,#FF4438);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ed-clip-mini:has(.ed-clip-son){display:grid;place-items:center;
  background:color-mix(in srgb, var(--c,#FF4438) 14%, rgba(0,0,0,.4))}

/* Las dos secciones reparten el alto en vez de quedarse cada una
   con la mitad fija: la de arriba ocupa lo que necesite y la de
   abajo se estira hasta el final. Así no queda el hueco negro que
   salía debajo de cada lista cuando había pocos archivos. */
.ed-seccion:first-child{flex:0 1 auto}
.ed-seccion:last-child{flex:1 1 auto}
.ed-seccion .ed-lista{flex:1 1 auto;min-height:0;overflow-y:auto}

/* ---------- la barra de herramientas ---------- */
.ed-h[data-flojo="1"]{opacity:.32;pointer-events:none}
.ed-zoombar{display:flex;align-items:center;gap:7px}
.ed-zoombar input[type="range"]{width:clamp(80px,9vw,150px)}
.ed-zoombar .ed-h{width:auto;padding:0 9px;font-family:var(--dato,monospace);font-size:.42rem;
  letter-spacing:.1em;text-transform:uppercase}

/* ==========================================================
   LO QUE SE AÑADIÓ AL REPASAR LA PANTALLA
   ========================================================== */

/* ---------- las pistas suben y bajan ----------
   Con seis pistas no cabían todas y no había manera de llegar a
   la de abajo. Ahora la línea se desplaza también a lo alto, con
   los rótulos pegados a la izquierda y la regla pegada arriba. */
.ed-scroll{overflow-y:auto;max-height:min(46vh, 420px);
  overscroll-behavior:contain;touch-action:pan-x pan-y}
.ed-scroll::-webkit-scrollbar{width:9px;height:9px}
.ed-regla{position:sticky;top:0;z-index:4;
  background:linear-gradient(180deg,rgba(9,12,19,.97),rgba(9,12,19,.88))}
/* arrastrando la línea con el ratón */
.ed-scroll[data-arrastrando="1"]{cursor:grabbing;user-select:none}
.ed-scroll[data-arrastrando="1"] *{pointer-events:none}

/* ---------- el hueco de debajo de los archivos ----------
   Estaba en blanco. Ahora dice de dónde sale lo que falta y
   lleva hasta allí. */
.ed-vacio{margin:9px 10px 12px;font-size:.72rem;line-height:1.5;
  color:var(--apagado,#7C8799);text-align:center}
.ed-vacio-idas{display:flex;gap:6px;justify-content:center;margin-top:9px;flex-wrap:wrap}
.ed-vacio-idas button{cursor:pointer;border:0;border-radius:9px;padding:6px 11px;
  font:inherit;font-size:.66rem;color:var(--crema,#F4F0E6);
  background:color-mix(in srgb, var(--s,#C79BFF) 15%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--s,#C79BFF) 42%, transparent);
  transition:.15s ease}
.ed-vacio-idas button:hover{background:color-mix(in srgb, var(--s,#C79BFF) 27%, transparent)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .ed-vacio-idas button{background:rgba(255,255,255,.08);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
}

/* ---------- que una miniatura sin cargar no sea un cuadro negro ----------
   Debajo de la imagen va el icono de su tipo, así que si la
   portada no llega se sigue distinguiendo un vídeo de una foto. */
.ed-clip-mini{display:grid;place-items:center;
  background:rgba(255,255,255,.05) center/34% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8799' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.8'/%3E%3Cpath d='M3.5 17l5-5 4 4 3-2.5 5 4.5'/%3E%3C/svg%3E")}
.ed-clip-mini img,.ed-clip-mini video{grid-area:1/1}

/* con la línea más alta, en pantallas bajas se recorta un poco */
@media (max-height: 820px){
  .ed-scroll{max-height:min(38vh, 300px)}
}

/* el transporte, ya dentro de la barra, se ajusta a su escala:
   en la barra los botones son más pequeños que bajo el monitor */
.ed-barra .ed-transporte .ed-bt{width:clamp(27px,2.1vw,31px);border-radius:8px}
.ed-barra .ed-transporte .ed-bt svg{width:14px;height:14px}
.ed-barra .ed-transporte .ed-bt.grande{width:clamp(33px,2.6vw,38px)}
.ed-barra .ed-transporte .ed-bt.grande svg{width:16px;height:16px}
.ed-barra .ed-transporte .ed-reloj{font-size:clamp(.66rem,1.2vh,.78rem)}
.ed-barra .ed-transporte .ed-reloj small{font-size:.4rem;margin-top:1px}
.ed-barra .ed-transporte .ed-conm{padding:5px 8px;font-size:.42rem}
/* en pantalla completa vuelven a tamaño de verdad */
.ed-mandos .ed-bt{width:clamp(34px,2.6vw,40px)}
.ed-mandos .ed-bt.grande{width:clamp(44px,3.4vw,52px)}
.ed-mandos .ed-bt.grande svg{width:20px;height:20px}

/* ==========================================================
   SEGUNDO REPASO DE LA PANTALLA
   ========================================================== */

/* ---------- el azul del transporte ----------
   El verde es el color del editor entero. El bloque que gobierna
   la reproducción —play, BPM y las dos pantallas completas— va en
   azul para que se distinga de un vistazo de todo lo demás. */
.ed-transporte{--az:#4C8DFF}
.ed-transporte .ed-bt.grande{
  background:linear-gradient(180deg, color-mix(in srgb, var(--az) 88%, #fff), var(--az));
  box-shadow:0 10px 24px -12px var(--az), inset 0 1px 0 rgba(255,255,255,.45)}
.ed-transporte .ed-bt.grande svg{stroke:#04101F;fill:#04101F}
.ed-transporte .ed-bt svg{stroke:color-mix(in srgb, var(--az) 62%, #F4F0E6)}
.ed-transporte .ed-bt:hover{background:color-mix(in srgb, var(--az) 22%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--az) 45%, transparent)}
.ed-transporte .ed-bt:hover svg{stroke:#DCE9FF}
.ed-transporte .ed-conm{color:color-mix(in srgb, var(--az) 55%, #8CA0B8)}
.ed-transporte .ed-conm:hover{color:#DCE9FF;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--az) 45%, transparent)}
.ed-transporte #edBpm{color:#DCE9FF;
  background:color-mix(in srgb, var(--az) 16%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--az) 42%, transparent)}
.ed-transporte .ed-reloj{color:#E6EEFF}
.ed-sep.fino{margin:2px 1px;opacity:.6}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .ed-transporte .ed-bt.grande{background:#4C8DFF}
  .ed-transporte .ed-bt svg{stroke:#9CC0FF}
  .ed-transporte #edBpm{color:#DCE9FF;background:rgba(76,141,255,.16)}
}

/* ---------- el zoom, al final de la barra ----------
   Era una lupa con una barra de sistema al lado. Ahora es una
   cápsula con sus dos pasos, un raíl fino con el recorrido
   marcado y el botón de ajustar dentro. */
.ed-zoombar{display:flex;align-items:center;gap:3px;flex:0 0 auto;min-width:0;
  padding:3px;border-radius:11px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ed-zoom-mas{cursor:pointer;border:0;background:transparent;width:22px;height:22px;
  border-radius:7px;display:grid;place-items:center;font:inherit;font-size:.86rem;line-height:1;
  color:var(--apagado,#7C8799);transition:.14s ease}
.ed-zoom-mas:hover{background:rgba(255,255,255,.09);color:var(--crema,#F4F0E6)}
.ed .ed-zoombar input[type="range"]{-webkit-appearance:none;appearance:none;
  width:clamp(74px,7vw,118px);height:22px;background:transparent;cursor:ew-resize;margin:0}
.ed .ed-zoombar input[type="range"]::-webkit-slider-runnable-track{height:3px;border-radius:3px;
  background:rgba(255,255,255,.14)}
.ed .ed-zoombar input[type="range"]::-moz-range-track{height:3px;border-radius:3px;
  background:rgba(255,255,255,.14)}
.ed .ed-zoombar input[type="range"]::-moz-range-progress{height:3px;border-radius:3px;
  background:var(--v,#4BE0A0)}
.ed .ed-zoombar input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:11px;height:11px;border-radius:50%;margin-top:-4px;background:var(--crema,#F4F0E6);
  box-shadow:0 1px 5px rgba(0,0,0,.6);transition:transform .13s ease}
.ed .ed-zoombar input[type="range"]::-moz-range-thumb{width:11px;height:11px;border:0;
  border-radius:50%;background:var(--crema,#F4F0E6);box-shadow:0 1px 5px rgba(0,0,0,.6)}
.ed .ed-zoombar input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.2)}
.ed-zoom-aj{cursor:pointer;border:0;border-radius:8px;padding:0 9px;height:22px;
  font-family:var(--dato,monospace);font-size:.42rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--aluminio,#8CA0B8);background:rgba(255,255,255,.05);transition:.14s ease;
  white-space:nowrap}
.ed-zoom-aj:hover{background:rgba(255,255,255,.12);color:var(--crema,#F4F0E6)}

/* ---------- el cabezal: se coge por arriba y no se pierde ---------- */
.ed-cabezal{pointer-events:none}
.ed-cabezal::before{display:none}
.ed-cabezal-asa{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:15px;height:15px;pointer-events:auto;cursor:ew-resize;touch-action:none;
  border-radius:3px 3px 7px 7px;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.65);transition:transform .13s ease, background .13s ease}
.ed-cabezal-asa::after{content:"";position:absolute;left:50%;top:4px;transform:translateX(-50%);
  width:5px;height:7px;border-left:1px solid rgba(0,0,0,.35);border-right:1px solid rgba(0,0,0,.35)}
.ed-cabezal-asa:hover{transform:translateX(-50%) scale(1.14);background:#DCE9FF}
/* la regla entera responde al ratón: pinchas y el cabezal va allí */
.ed-regla{cursor:ew-resize;touch-action:none}

/* ---------- ver y borrar un archivo ---------- */
.ed-clip-caja{position:relative;display:block;min-width:0}
.ed-clip-acc{position:absolute;top:5px;right:5px;display:flex;gap:4px;
  opacity:0;transition:opacity .14s ease}
.ed-clip-caja:hover .ed-clip-acc,
.ed-clip-caja:focus-within .ed-clip-acc{opacity:1}
.ed-clip-acc button{cursor:pointer;border:0;width:23px;height:23px;border-radius:7px;
  display:grid;place-items:center;background:rgba(4,7,12,.82);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:.14s ease}
.ed-clip-acc button:hover{background:rgba(4,7,12,.96)}
.ed-clip-acc svg{width:12px;height:12px;fill:none;stroke:var(--crema,#F4F0E6);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ed-clip-acc button:last-child:hover svg{stroke:var(--rojo,#FF4438)}
/* en pantallas táctiles no hay hover: se dejan puestos */
@media (hover: none){ .ed-clip-acc{opacity:1} }

/* ---------- el visor de un archivo ---------- */
.ed-visor{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:4vmin;
  background:rgba(2,4,8,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  animation:edVisorEntra .19s ease}
@keyframes edVisorEntra{from{opacity:0}to{opacity:1}}
.ed-visor-caja{position:relative;max-width:min(1100px,92vw);max-height:88vh;
  display:flex;flex-direction:column;gap:11px;align-items:center}
.ed-visor img,.ed-visor video{max-width:100%;max-height:76vh;display:block;border-radius:13px;
  box-shadow:0 34px 90px -34px #000, inset 0 0 0 1px rgba(255,255,255,.1)}
.ed-visor audio{width:min(520px,86vw)}
.ed-visor-pie{text-align:center}
.ed-visor-pie b{display:block;font-size:.92rem;color:var(--crema,#F4F0E6);font-weight:600}
.ed-visor-pie span{display:block;margin-top:3px;font-family:var(--dato,monospace);font-size:.46rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--apagado,#7C8799)}
.ed-visor-x{position:absolute;top:-6px;right:-6px;cursor:pointer;border:0;width:32px;height:32px;
  border-radius:50%;display:grid;place-items:center;background:rgba(10,14,22,.92);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:.14s ease}
.ed-visor-x:hover{background:rgba(255,68,56,.22)}
.ed-visor-x svg{width:15px;height:15px;fill:none;stroke:var(--crema,#F4F0E6);stroke-width:2;
  stroke-linecap:round}

/* ---------- el monitor vacío: la marca al fondo ----------
   Como el reposo de un CDJ: el nombre grande, muy separado, con
   un halo difuso detrás y un filete debajo. Nada de iconos. */
.ed-pantalla .ed-nada{gap:clamp(16px,3vh,30px)}

/* El logotipo, tal cual es: DECKA en gris claro y DJ en negro
   sobre un bloque naranja macizo. Sin disco —eso me lo había
   inventado— y con los colores del archivo, que no son los de
   la interfaz: el naranja de la marca es #FF7F27, no el ámbar
   #FFA033 que usa el resto de la pantalla. */
.ed-marca{position:relative;display:grid;justify-items:center;gap:clamp(9px,1.5vh,15px);
  padding:clamp(10px,2vh,22px) clamp(18px,3vw,44px);
  --marca-naranja:#FF7F27; --marca-crema:#EAEBED}
.ed-marca-halo{position:absolute;inset:-45% -28%;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 64% at 36% 42%, rgba(255,127,39,.17), transparent 70%),
    radial-gradient(50% 62% at 66% 56%, rgba(127,212,255,.12), transparent 72%),
    radial-gradient(64% 72% at 50% 50%, rgba(255,255,255,.05), transparent 76%);
  filter:blur(30px)}
.ed-marca-txt{position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:clamp(6px,.7vw,11px);
  font-family:var(--display,inherit);font-weight:900;font-stretch:120%;
  font-size:clamp(1.6rem,4.6vw,3.9rem);letter-spacing:.06em;line-height:1;
  color:var(--marca-crema)}
.ed-marca-txt b{font-family:var(--display,inherit);font-weight:900;font-stretch:120%;
  font-size:.52em;letter-spacing:.06em;line-height:1;
  color:#0B0B0B;background:var(--marca-naranja);
  border-radius:.16em;padding:.2em .26em .24em}
.ed-marca u{position:relative;z-index:1;display:block;text-decoration:none;
  width:clamp(120px,22vw,300px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,127,39,.42),transparent)}

@media (prefers-reduced-motion: reduce){
  .ed-visor{animation:none}
}

/* ---------- el transporte, centrado ----------
   Con margin auto quedaba centrado entre sus vecinos, que no es lo
   mismo: a la izquierda hay diez herramientas y a la derecha el
   zoom, así que se iba hacia un lado.

   Lo saqué del flujo y lo anclé al centro, y eso estaba MAL: un
   elemento absoluto no empuja a nadie, así que a 1600 y a 1440
   se montaba encima de la barra de herramientas y se comía los
   clics. Medido: el botón de añadir pista caía debajo del
   transporte y quien recibía la pulsación era el transporte.

   Ahora se queda en el flujo y el centrado se consigue dándole a
   los dos lados el mismo peso: izquierda y derecha crecen igual
   y el transporte queda en medio sin pisar nada. Por encima de
   1600, donde sobra sitio, queda centrado de verdad; por debajo
   se desplaza, que es preferible a taparlo. */
.ed-barra{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  min-height:46px;flex-wrap:nowrap}
.ed-lado{display:flex;align-items:center;gap:clamp(5px,.5vw,9px);min-width:0;flex-wrap:wrap}
.ed-lado.der{justify-content:flex-end}
.ed-barra .ed-transporte{margin:0}
.ed-barra .ed-largo{margin-left:0}
/* Apretar antes que partir en dos filas. Medido en el navegador:
   los tres grupos piden unos 1360 px, así que por debajo de 1500
   hay que quitar algo. Lo primero que sobra es el contador de
   duración —la línea de tiempo ya lo dice—, y luego los botones
   se encogen. Partir la barra en dos filas era peor: a 1024×768
   la segunda fila caía fuera de la pantalla. */
@media (max-width:1500px){
  .ed-barra .ed-largo{display:none}
}
@media (max-width:1500px){
  .ed-barra{gap:4px;padding-left:7px;padding-right:7px}
  .ed-lado{gap:3px}
  .ed-barra .ed-h{width:28px;border-radius:7px}
  .ed-barra .ed-h svg{width:13px;height:13px}
  .ed-barra .ed-transporte{gap:5px;padding:4px 5px}
  .ed-barra .ed-transporte .ed-bt{width:26px}
  .ed-barra .ed-transporte .ed-bt.grande{width:31px}
  .ed-barra .ed-reloj small{display:none}
  .ed .ed-zoombar input[type="range"]{width:62px}
}
@media (max-width:1120px){
  /* el reloj y el zoom van en la línea de tiempo, que los repite:
     aquí se quedan solo los mandos */
  .ed-barra .ed-reloj{display:none}
  .ed-zoom-aj{display:none}
}

/* ---------- los interruptores de la pista ----------
   Silenciar, ocultar y bloquear. Apagados casi no se ven, para
   no competir con los trozos; encendidos cogen el color de lo
   que hacen, que es la única manera de ver de un vistazo qué
   pista está muda o clavada. */
.ed-sw{cursor:pointer;border:0;background:transparent;width:20px;height:20px;border-radius:6px;
  display:grid;place-items:center;flex:0 0 auto;transition:.14s ease}
.ed-sw svg{width:12px;height:12px;fill:none;stroke:var(--apagado,#7C8799);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ed-sw:hover{background:rgba(255,255,255,.09)}
.ed-sw:hover svg{stroke:var(--crema,#F4F0E6)}
.ed-sw[data-on="1"] svg{stroke:var(--ambar,#FFA033)}
.ed-sw[data-sw^="fija"][data-on="1"] svg{stroke:var(--rojo,#FF4438)}

/* la pista, cuando está apagada o clavada */
.ed-pista[data-mudo="1"] .ed-trozo[data-clase="AUDIO"],
.ed-pista[data-oculta="1"] .ed-trozo{opacity:.4;filter:saturate(.35)}
.ed-pista[data-fija="1"] .ed-trozo{cursor:default}
.ed-pista[data-fija="1"] .ed-trozo u{display:none}
/* una franja diagonal muy tenue: se ve que está clavada sin leer nada */
.ed-pista[data-fija="1"] .ed-canal{
  background-image:repeating-linear-gradient(45deg,
    rgba(255,255,255,.035) 0 6px, transparent 6px 12px)}
.ed-pista[data-mudo="1"] .ed-pista-et > b,
.ed-pista[data-oculta="1"] .ed-pista-et > b{opacity:.5;text-decoration:line-through}