/* Colores de CSIS Studio: cambiando estas variables cambia toda la app. */
:root {
  --bg: #121417;
  --panel: #1B1E23;
  --panel-2: #23272e;
  --borde: #2c3038;
  --texto: #ECEEF1;
  --suave: #9097a3;
  --violeta: #8B5CF6;
  --menta: #5EEAD4;
  --c-texto: #EC4899;
  --c-video: #2A3340;
  --c-musica: #14B8A6;
  --c-efectos: #F59E0B;
  --radio: 10px;
  --alto-regla: 24px;
  --alto-pista: 34px;
  --alto-video: 60px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--texto);
  background: var(--bg);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }

button {
  font: inherit; font-size: 13px; color: var(--texto);
  background: var(--panel-2); border: 1px solid var(--borde);
  border-radius: 8px; padding: 6px 10px; cursor: pointer;
}
button:hover { border-color: var(--violeta); }
button:disabled { opacity: .4; cursor: default; border-color: var(--borde); }
.desactivada { opacity: .45; }
input, select { font: inherit; color: var(--texto); }

/* Rejilla general: barra, zona superior y línea de tiempo */
/* Los tamaños (--col-bib, --col-prop, --fila-tl) los pone distribucion.js. */
.app {
  display: grid; height: 100vh; height: 100dvh;
  /* Etapa 4b: barra superior de 40 px (lo ganado es para el visor). */
  grid-template-rows: 40px minmax(180px, 1fr) 6px var(--fila-tl, minmax(120px, 250px));
  /* Una sola columna que nunca pasa del ancho de la ventana: así una línea de
     tiempo larga hace scroll dentro de sí misma en vez de empujar los paneles fuera. */
  grid-template-columns: minmax(0, 1fr);
}
.app > * { min-width: 0; }

.topbar {
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: var(--panel); border-bottom: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.logo { width: 32px; height: 32px; }
.nombre-proyecto {
  flex: 1; min-width: 0; max-width: 340px; background: transparent; border: 1px solid transparent;
  border-radius: 8px; padding: 6px 8px; font-size: 14px;
}
.nombre-proyecto:hover, .nombre-proyecto:focus { border-color: var(--borde); outline: none; background: var(--bg); }
.guardado { color: var(--menta); font-size: 12px; margin-left: auto; opacity: .85; }
.guardado.error { color: var(--c-efectos); }
.btn-exportar { background: var(--violeta); border-color: var(--violeta); font-weight: 700; padding: 8px 18px; }
.btn-exportar:hover { filter: brightness(1.12); }

.zona-sup {
  display: grid; min-height: 0;
  grid-template-columns: var(--col-bib, minmax(180px, 290px)) 6px minmax(200px, 1fr) 6px var(--col-prop, minmax(220px, 290px));
}
.panel { position: relative; background: var(--panel); padding: 12px; overflow-y: auto; min-height: 0; min-width: 0; }

/* Divisores: se notan al pasar el ratón (cursor y línea violeta) */
.divisor { position: relative; background: var(--borde); touch-action: none; z-index: 2; }
.divisor-v { cursor: col-resize; }
.divisor-h { cursor: row-resize; }
.divisor::after { content: ""; position: absolute; inset: 0; background: var(--violeta); opacity: 0; transition: opacity .15s; }
.divisor:hover::after, .redimensionando .divisor:active::after { opacity: 1; }
.plegada-bib .divisor[data-div=bib], .plegada-prop .divisor[data-div=prop], .plegada-tl .divisor[data-div=tl] { pointer-events: none; }
.redimensionando { user-select: none; }
.redimensionando.redim-v * { cursor: col-resize !important; }
.redimensionando.redim-h * { cursor: row-resize !important; }

/* Botón de plegar y franja plegada */
.plegar { flex: none; padding: 4px 8px; background: transparent; color: var(--suave); }
.plegar:hover { color: var(--texto); }
.propiedades > .plegar { float: right; margin-left: 6px; }
.plegada-bib .biblioteca, .plegada-prop .propiedades { padding: 0; overflow: hidden; }
.plegada-bib .biblioteca > :not(.pestanas), .plegada-bib .pestanas > :not(.plegar),
.plegada-prop .propiedades > :not(.plegar),
.plegada-tl .tl-cuerpo, .plegada-tl .tl-barra > :not(.plegar) { display: none; }
/* Plegada, toda la franja es el botón para desplegar */
.plegada-bib .biblioteca .plegar, .plegada-prop .propiedades > .plegar {
  position: absolute; inset: 0; width: 100%; float: none; margin: 0; border: none; border-radius: 0;
  display: flex; justify-content: center; padding-top: 14px; font-size: 16px;
}
.plegada-tl .tl-barra { padding: 0; border: none; height: 100%; }
.plegada-tl .tl-barra .plegar { width: 100%; height: 100%; border: none; border-radius: 0; text-align: left; padding-left: 14px; }

/* Biblioteca */
.pestanas { display: flex; gap: 4px; margin-bottom: 12px; }
.pestana { flex: 1; background: transparent; }
.pestana.activa { background: var(--violeta); border-color: var(--violeta); }
.btn-importar {
  display: block; text-align: center; padding: 10px; border-radius: var(--radio);
  border: 1.5px dashed var(--violeta); color: var(--texto); cursor: pointer; font-size: 14px;
}
.btn-importar:hover { background: rgba(139, 92, 246, .12); }
.pista-ayuda { color: var(--suave); font-size: 12px; text-align: center; margin: 6px 0 12px; }
.arrastrando-archivos .biblioteca { outline: 2px dashed var(--menta); outline-offset: -6px; }
.cuadricula { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.medio { position: relative; border-radius: 8px; overflow: hidden; background: var(--panel-2); touch-action: pan-y; user-select: none; }
.medio img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; pointer-events: none; }
.medio .dur { position: absolute; left: 4px; bottom: 22px; font-size: 10px; background: rgba(0,0,0,.65); padding: 1px 4px; border-radius: 4px; }
.medio .nom { font-size: 11px; padding: 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.medio .mas { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--violeta); border: none; font-weight: 700; }
.medio.falta img { opacity: .3; }
.medio .recargar { position: absolute; inset: 20% 4px auto; font-size: 11px; padding: 4px; background: var(--c-efectos); color: #111; border: none; }
.medio.sel { outline: 2px solid var(--violeta); outline-offset: -2px; }
.medio .quitar { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; padding: 0; border-radius: 50%; font-size: 11px; background: rgba(0,0,0,.65); border: none; opacity: .75; }
.medio .quitar:hover { opacity: 1; background: #b91c1c; }
/* Pestaña Texto: estilos de partida */
.estilos { display: grid; gap: 8px; }
.estilo { padding: 14px 10px; font-weight: 800; }
.est-titular { font-size: 18px; text-shadow: 0 0 3px #000; }
.est-precio { font-size: 16px; background: var(--c-texto); border-radius: 99px; border: none; }
.est-llamada { font-size: 15px; background: var(--violeta); border: none; }
.fantasma { position: fixed; width: 60px; pointer-events: none; opacity: .85; z-index: 50; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.5); }

/* Visor */
/* El marco del lienzo es lo único que encoge: los controles (flex: none) siempre caben
   y el lienzo se hace más pequeño para dejarles sitio, sea cual sea la proporción. */
.visor { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 10px; }
.visor-marco { position: relative; flex: 1 1 0; min-height: 0; min-width: 0; }
#lienzo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; touch-action: none; }
/* Recuadro con tiradores del elemento seleccionado */
.recuadro { position: absolute; border: 2px solid var(--violeta); cursor: move; touch-action: none; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.tirador { position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid var(--violeta); border-radius: 50%; touch-action: none; }
.t-1 { left: -8px; top: -8px; cursor: nwse-resize; } .t-2 { right: -8px; top: -8px; cursor: nesw-resize; }
.t-3 { left: -8px; bottom: -8px; cursor: nesw-resize; } .t-4 { right: -8px; bottom: -8px; cursor: nwse-resize; }
.transporte { display: flex; align-items: center; gap: 4px; }
.btn-tr { width: 34px; height: 34px; padding: 8px; background: transparent; }
.btn-tr svg { width: 100%; height: 100%; display: block; }
.visor-controles { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px 14px; padding-top: 8px; flex-wrap: wrap; }
.tiempo { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--suave); min-width: 120px; text-align: right; }
.btn-play { width: 42px; height: 42px; border-radius: 50%; padding: 9px; background: var(--violeta); border: none; }
.btn-play svg { width: 100%; height: 100%; display: block; }
.ico-pausa, .reproduciendo .ico-play { display: none !important; }
.reproduciendo .ico-pausa { display: block !important; }
.btn-pantalla { width: 36px; height: 36px; padding: 0; font-size: 18px; }
.btn-pantalla.activo { border-color: var(--violeta); }
/* Visor a pantalla completa: lienzo grande y los controles debajo */
.visor:fullscreen { background: #000; padding: 16px; }
/* Selector de proporción: siempre las tres opciones en una fila, la activa resaltada */
.formatos { display: inline-flex; flex: none; flex-wrap: nowrap; gap: 2px; }
.formatos .formato { display: inline-block; flex: none; padding: 4px 8px; font-size: 12px; white-space: nowrap; }
.formatos .formato.activo { border-color: var(--violeta); background: rgba(139, 92, 246, .25); color: #fff; }

/* Propiedades */
.propiedades h3 { margin: 0 0 10px; font-size: 14px; }
.propiedades h4 { margin: 16px 0 6px; font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.campo { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; margin: 6px 0; }
.campo select, .campo input[type=range] { width: 58%; }
.campo input[type=range] { accent-color: var(--violeta); }
.campo select { background: var(--bg); border: 1px solid var(--borde); border-radius: 6px; padding: 4px; }
.campo input[type=color] { width: 44px; height: 26px; padding: 0; border: 1px solid var(--borde); background: none; }
.area { width: 100%; resize: vertical; font: inherit; font-size: 14px; color: var(--texto); background: var(--bg); border: 1px solid var(--borde); border-radius: 6px; padding: 6px; }
.campo input[type=text] { background: var(--bg); border: 1px solid var(--borde); border-radius: 6px; padding: 5px 7px; width: 60%; }
.bloque-off { opacity: .45; pointer-events: none; }
.botones { display: flex; gap: 6px; flex-wrap: wrap; }
.botones .activo { border-color: var(--violeta); background: rgba(139, 92, 246, .2); }
.aviso-falta { background: rgba(245, 158, 11, .15); border: 1px solid var(--c-efectos); padding: 8px; border-radius: 8px; font-size: 12px; }

/* Línea de tiempo */
.timeline { display: flex; flex-direction: column; background: var(--panel); border-top: 1px solid var(--borde); min-height: 0; }
.tl-barra { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--borde); overflow-x: auto; }
.separador { flex: 1; }
#zoom { width: 110px; accent-color: var(--violeta); }
.tl-cuerpo { display: flex; flex: 1; min-height: 0; overflow-y: auto; }
.tl-cabeceras { width: 110px; flex-shrink: 0; border-right: 1px solid var(--borde); }
.cab-regla { height: var(--alto-regla); }
.cab { height: var(--alto-pista); display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 12px; border-top: 1px solid var(--borde); flex-wrap: wrap; align-content: center; row-gap: 0; }
.cab:nth-child(3) { height: var(--alto-video); }
.cab small { width: 100%; font-size: 9px; color: var(--menta); }
.cab.off { opacity: .6; }
.cab b { width: 16px; text-align: center; }
.ico-texto { color: var(--c-texto); } .ico-video { color: #8fa3bd; } .ico-musica { color: var(--c-musica); } .ico-efectos { color: var(--c-efectos); }
.tl-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; position: relative; }
.tl-contenido { position: relative; min-width: 100%; }
.tl-regla { height: var(--alto-regla); position: relative; cursor: ew-resize; touch-action: none; border-bottom: 1px solid var(--borde); }
.marca-seg { position: absolute; top: 12px; bottom: 0; border-left: 1px solid #3a3f48; }
.marca-seg span { position: absolute; top: -11px; left: 3px; font-size: 10px; color: var(--suave); }
.pista { position: relative; height: var(--alto-pista); border-top: 1px solid var(--borde); touch-action: pan-x; }
.pista-video { height: var(--alto-video); background: rgba(255,255,255,.02); }
.pista.off { opacity: .45; }
.bloque { position: absolute; top: 5px; bottom: 5px; border-radius: 6px; font-size: 11px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 22px; }
.pista-texto .bloque { background: var(--c-texto); padding: 0 14px; cursor: grab; touch-action: none; user-select: none; }
.pista-texto .bloque.sel { box-shadow: 0 0 0 2px #fff; z-index: 2; }
.pista-texto .bloque .borde { background: rgba(0,0,0,.18); }
.etiqueta-t { pointer-events: none; }
.pista-efectos .bloque { background: var(--c-efectos); color: #111; padding: 0 4px; }

.clip {
  position: absolute; top: 4px; bottom: 4px; border-radius: 7px; overflow: hidden;
  background-color: var(--c-video); background-size: auto 100%; background-repeat: repeat-x;
  border: 2px solid #3a4658; touch-action: none; cursor: grab; user-select: none;
}
.clip .etiqueta { position: absolute; left: 12px; bottom: 3px; right: 12px; font-size: 11px; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.clip.sel { border-color: var(--violeta); box-shadow: 0 0 0 1px var(--violeta); }
.clip.falta { background-image: repeating-linear-gradient(45deg, #3a2a10 0 8px, #2a2010 8px 16px) !important; border-color: var(--c-efectos); }
.clip.arrastrando { opacity: .8; z-index: 5; cursor: grabbing; box-shadow: 0 6px 18px rgba(0,0,0,.6); }
.borde { position: absolute; top: 0; bottom: 0; width: 12px; z-index: 1; cursor: ew-resize; background: rgba(255,255,255,.12); }
.borde::after { content: ""; position: absolute; top: 30%; bottom: 30%; left: 4px; width: 2px; border-radius: 2px; background: #fff; }
.borde-ini { left: 0; } .borde-fin { right: 0; }
.clip.sel .borde { background: var(--violeta); }
.vacia { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--suave); pointer-events: none; }

.tl-cursor { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--menta); pointer-events: none; z-index: 10; }
.tl-cursor-cabeza { position: absolute; top: 0; left: -7px; width: 16px; height: 14px; background: var(--menta); border-radius: 3px 3px 8px 8px; pointer-events: auto; cursor: ew-resize; touch-action: none; }

/* Aviso flotante */
.aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
  background: var(--panel-2); border: 1px solid var(--menta); color: var(--texto);
  padding: 10px 16px; border-radius: 99px; font-size: 13px; transition: .25s; pointer-events: none; z-index: 100;
  max-width: calc(100vw - 32px); text-align: center;
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }

/* Móvil (solo pantallas realmente pequeñas): visor arriba, línea de tiempo abajo y
   paneles que se abren desde la barra inferior. En escritorio los paneles no desaparecen. */
@media (max-width: 699px), (pointer: coarse) and (max-width: 899px) {
  .app { grid-template-rows: 50px 1fr 230px 52px; }
  .divisor, .plegar { display: none; }
  .marca-nombre, .etq, .pista-ayuda { display: none; }
  .topbar { gap: 8px; padding: 0 10px; }
  .btn-exportar { padding: 7px 12px; }
  .zona-sup { grid-template-columns: 1fr; }
  .panel {
    position: fixed; left: 0; right: 0; bottom: 52px; max-height: 60vh; z-index: 40;
    border: none; border-top: 2px solid var(--violeta); border-radius: 14px 14px 0 0;
    transform: translateY(110%); transition: transform .25s; box-shadow: 0 -10px 30px rgba(0,0,0,.5);
  }
  .panel.abierto { transform: translateY(0); }
  .tl-cabeceras { width: 74px; }
  .cab small { display: none; }
  .tiempo { min-width: 0; }
  .aviso { bottom: 70px; }
}

/* Selector visual de animaciones de texto (etapa 2b) */
.anim-mini { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; min-width: 0;
  font-size: 10px; line-height: 1.15; text-align: center; }
.anim-mini canvas { width: 100%; aspect-ratio: 5 / 3; border-radius: 6px; background: var(--bg); display: block; }
.anim-mini span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.anim-mini.activo { border-color: var(--violeta); background: rgba(139, 92, 246, .22); }
.anim-ninguna { grid-column: span 2; justify-content: center; min-height: 32px; }

/* Etapa 2c: tirador de giro del texto (círculo unido al recuadro con una línea) */
.tirador-giro { display: none; position: absolute; left: 50%; top: -34px; width: 16px; height: 16px; margin-left: -8px;
  background: var(--violeta); border: 2px solid #fff; border-radius: 50%; cursor: grab; touch-action: none; }
.tirador-giro::after { content: ""; position: absolute; left: 50%; top: 14px; width: 2px; height: 18px; margin-left: -1px; background: var(--violeta); pointer-events: none; }
.recuadro.con-giro .tirador-giro { display: block; }
.fila-angulo { display: flex; gap: 6px; align-items: center; width: 58%; }
.campo .fila-angulo input[type=range] { width: auto; flex: 1; min-width: 0; }
.fila-angulo button { padding: 2px 8px; font-size: 12px; }
.campo label, label.campo { cursor: pointer; }

/* Selector de fuente: cada opción con su propia letra */
.campo .sel-fuente { font-size: 15px; }
.sel-fuente optgroup { font-family: system-ui, sans-serif; font-style: normal; color: var(--suave); }
.sel-fuente option { color: var(--texto); background: var(--bg); font-size: 16px; }

/* Etapa 2d: filas compactas de animación en el panel */
.anim-filas { display: flex; flex-direction: column; gap: 8px; }
.anim-fila { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 4px 8px;
  padding: 6px; background: var(--bg); border: 1px solid var(--borde); border-radius: 8px; }
.anim-fila > canvas { width: 60px; height: 36px; border-radius: 5px; background: var(--panel-2); display: block; }
.anim-fila.sin > canvas { opacity: .35; }
.anim-fila-nombre { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.anim-fila-nombre small { font-size: 10px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.anim-fila-nombre b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anim-cambiar { padding: 4px 10px; font-size: 12px; }
.anim-fila-ajustes { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; min-width: 0; }
.anim-ajuste { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: 12px; color: var(--suave); white-space: nowrap; }
.anim-ajuste input[type=range] { flex: 1; min-width: 40px; accent-color: var(--violeta); }
.anim-fila-ajustes select { max-width: 48%; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 6px; padding: 3px; font-size: 12px; }
.anim-buscar { flex: 1; min-width: 120px; background: var(--bg); color: var(--texto); border: 1px solid var(--borde); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; }

/* Galería flotante de animaciones (encima del visor) */
.galeria-anim { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--panel); border: 1px solid var(--violeta); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.gal-cabecera { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gal-pestanas { margin: 0; }
.gal-cerrar { margin-left: auto; width: 32px; height: 32px; padding: 0; font-size: 15px; }
.gal-chips { display: flex; gap: 6px; overflow-x: auto; flex-shrink: 0; padding-bottom: 2px; }
.gal-chips.apagadas { opacity: .5; }
.chip { flex-shrink: 0; border-radius: 999px; padding: 4px 12px; font-size: 12px; white-space: nowrap; }
.chip.activo { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.gal-rejilla { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 4px; }
.gal-rejilla .anim-ninguna { grid-column: auto; min-height: 60px; }
.gal-rejilla > p { grid-column: 1 / -1; }
.gal-pie { margin: 0; }
/* Al elegir: la miniatura se amplía por encima de las demás sin mover la rejilla */
.anim-mini { position: relative; transition: transform .2s ease, box-shadow .2s ease; }
.anim-mini.ampliada { transform: scale(1.6); z-index: 5; background: var(--panel-2); box-shadow: 0 10px 30px rgba(0,0,0,.6); }
@media (max-width: 699px), (pointer: coarse) and (max-width: 899px) {
  .galeria-anim { left: 2vw; right: 2vw; top: 2vh; bottom: 2vh; }
  .gal-rejilla { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

/* Barra de progreso sobre el visor: aparece con el ratón y se oculta sola */
.progreso { position: absolute; z-index: 4; height: 30px; padding: 0 12px 10px; display: flex; align-items: flex-end;
  cursor: pointer; touch-action: none; opacity: 0; pointer-events: none; transition: opacity .25s;
  background: linear-gradient(transparent, rgba(0,0,0,.45)); }
.progreso.visible { opacity: 1; pointer-events: auto; }
.prog-pista { position: relative; flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.28); transition: height .15s; }
.progreso:hover .prog-pista { height: 6px; }
.prog-sobre, .prog-lleno { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; }
.prog-sobre { background: rgba(255,255,255,.35); }
.prog-lleno { background: var(--violeta); }
.prog-lleno::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--violeta); }
.prog-tip { position: absolute; bottom: 20px; transform: translateX(-50%); padding: 2px 6px; border-radius: 5px;
  background: rgba(0,0,0,.8); color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
/* Etapa 2e: panel del texto compacto (filas resumen + ventana emergente junto al panel) */
.res-filas { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.res-fila { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 5px 6px; background: var(--bg); border: 1px solid var(--borde); border-radius: 8px; }
.res-fila.abierta { border-color: var(--violeta); }
.res-aa, .res-giro, .res-reloj { width: 44px; height: 30px; display: grid; place-items: center; border-radius: 5px;
  background: var(--panel-2); font-size: 18px; font-weight: 800; line-height: 1; overflow: hidden; }
.res-giro { background: none; color: var(--menta); }
.res-reloj { font-size: 15px; font-weight: 400; }
.res-fondo { width: 44px; height: 22px; border: 1px dashed var(--borde); border-radius: 4px; }
.galeria-anim.emergente { gap: 6px; overflow: hidden; }
.emergente .gal-cabecera b { font-size: 14px; }
.emer-cuerpo .campo input[type=range] { width: 52%; }
.emer-cuerpo .fila-angulo { width: 58%; }
.emer-cuerpo .botones { margin: 6px 0; }
.num { width: 80px; background: var(--bg); border: 1px solid var(--borde); border-radius: 6px; padding: 4px 6px; }
@media (max-width: 699px), (pointer: coarse) and (max-width: 899px) {
  .galeria-anim.emergente { top: auto; bottom: 2vh; max-height: 70vh; }
}

.emer-cuerpo select.sel-sentido { width: 52%; }

/* ---- Transiciones entre clips (etapa 3) ---- */
/* Unión: línea invisible en el corte; dentro, el rombo o la marca y la franja de duración. */
.union { position: absolute; top: 0; bottom: 0; width: 0; z-index: 3; pointer-events: none; }
.union > * { pointer-events: auto; }
.union-rombo { position: absolute; top: 0; left: -7px; width: 14px; height: 14px; padding: 0; border-radius: 3px;
  transform: rotate(45deg); background: var(--panel); border: 1.5px solid var(--suave); opacity: .75; touch-action: none; }
.union-rombo:hover, .union.sel .union-rombo { opacity: 1; border-color: var(--violeta); background: var(--violeta); }
.union-marca { position: absolute; top: -1px; left: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 3px;
  max-width: 96px; height: 18px; padding: 0 6px; border-radius: 99px; font-size: 10px; line-height: 1;
  background: var(--violeta); border: 1px solid #fff3; color: #fff; touch-action: none; white-space: nowrap; }
.union-marca span { overflow: hidden; text-overflow: ellipsis; }
.union.sel .union-marca { box-shadow: 0 0 0 2px #fff; }
.union-franja { position: absolute; bottom: 4px; height: 6px; transform: translateX(-50%); border-radius: 3px;
  background: rgba(139, 92, 246, .75); pointer-events: none; }
.galeria-tr .gal-cabecera b { font-size: 14px; }
.tr-pie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--borde); padding-top: 8px; }
.tr-pie .pista-ayuda { margin: 0; }
.tr-ajustes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.tr-ajustes select { background: var(--panel-2); border: 1px solid var(--borde); border-radius: 6px; padding: 3px; font-size: 12px; }
.tr-botones { margin: 0; }
.tr-nota { width: 100%; color: var(--c-efectos); font-size: 11px; }
.tr-entre { text-align: left; margin: 0 0 8px; }

/* ---- Etapa 3b: ventanas movibles y "Añadir a la unión" ---- */
/* La barra de título se arrastra (no en el móvil, donde la ventana queda fija). */
.movible .gal-cabecera { cursor: move; user-select: none; -webkit-user-select: none; touch-action: none; }
.movible .gal-cabecera :is(button, input, select) { cursor: pointer; }
.movible .gal-cabecera input[type=search] { cursor: text; }
.mover-icono { color: var(--suave); font-size: 16px; line-height: 1; letter-spacing: -2px; }
.galeria-anim.arrastrando { box-shadow: 0 24px 60px rgba(0,0,0,.75); opacity: .96; }
@media (max-width: 699px), (pointer: coarse) and (max-width: 899px) {
  .movible .gal-cabecera { cursor: auto; touch-action: auto; }
  .mover-icono { display: none; }
}
.tr-union { font-size: 12px; color: var(--suave); white-space: nowrap; }
.tr-elegida-caja { font-size: 12px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.tr-anadir { background: var(--violeta); border-color: var(--violeta); color: #fff; }
/* La que ya está puesta en la unión lleva una línea discontinua; la elegida, el resaltado normal. */
.anim-mini.aplicada:not(.activo) { outline: 1.5px dashed var(--violeta); outline-offset: 2px; }

/* ---- Etapa 4: audio ---- */
/* Botones de silenciar / ocultar en las cabeceras de las pistas */
.cab-btns { margin-left: auto; display: flex; gap: 2px; }
.pista-btn { position: relative; width: 22px; height: 22px; padding: 3px; border-radius: 5px; background: transparent; border-color: transparent; color: var(--suave); }
.pista-btn:hover { color: var(--texto); }
.pista-btn svg { width: 100%; height: 100%; display: block; }
.pista-btn.apagado { color: var(--c-efectos); }
.pista-btn.apagado::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; background: currentColor; transform: rotate(-45deg); }
.pista.apagada { opacity: .4; }

/* Bloques de música y efectos con su forma de onda */
.pista-musica .bloque-audio { background: var(--c-musica); }
.pista-efectos .bloque-audio { background: var(--c-efectos); color: #111; }
.bloque-audio { padding: 0; cursor: grab; touch-action: none; user-select: none; min-width: 6px; }
.bloque-audio .onda { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
.pista-efectos .bloque-audio .onda { filter: invert(1); opacity: .45; }
.etiqueta-a { position: relative; padding: 0 12px; font-size: 11px; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.pista-efectos .etiqueta-a { text-shadow: none; }
.bloque-audio .borde { background: rgba(0,0,0,.18); }
.bloque-audio.corto .borde { width: 5px; }
.bloque-audio.corto .etiqueta-a { display: none; }
.bloque-audio.sel { box-shadow: 0 0 0 2px #fff; z-index: 2; }
.bloque-audio.mudo { opacity: .5; }
.bloque-audio.falta { background: repeating-linear-gradient(45deg, #3a2a10 0 8px, #2a2010 8px 16px); color: var(--c-efectos); }

/* Pestaña Audio de la biblioteca */
.lista-audio { display: flex; flex-direction: column; gap: 4px; }
.bib-titulo { margin: 14px 0 0; font-size: 13px; }
.aud-fila { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 8px; background: var(--panel-2); touch-action: pan-y; user-select: none; cursor: grab; }
.aud-fila button { padding: 3px 7px; font-size: 11px; flex: none; }
.aud-fila.falta { border: 1px solid var(--c-efectos); }
.aud-fila .recargar { background: var(--c-efectos); color: #111; border: none; }
.aud-nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.aud-nombre b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-nombre small { font-size: 10px; color: var(--suave); }
.aud-escuchar { width: 26px; height: 26px; padding: 0 !important; border-radius: 50%; }
.aud-escuchar.activo { background: var(--violeta); border-color: var(--violeta); }
.aud-mas { width: 26px; height: 26px; padding: 0 !important; border-radius: 50%; background: var(--violeta); border: none; font-weight: 700; }
.aud-quitar { background: transparent; border-color: transparent; opacity: .7; }
.aud-quitar:hover { opacity: 1; background: #b91c1c; }
.aud-aviso { width: 26px; text-align: center; color: var(--c-efectos); }
.fantasma-audio { width: auto; box-shadow: none; position: fixed; z-index: 100; pointer-events: none; background: var(--c-musica); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap; }

/* Panel del audio */
.aud-panel-nombre { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aud-valor { font-size: 12px; min-width: 44px; text-align: right; }
.tl-cabeceras { width: 134px; }
.cab { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 699px), (pointer: coarse) and (max-width: 899px) {
  /* En el móvil, cabeceras estrechas: solo el icono de la pista y sus botones. */
  .tl-cabeceras { width: 74px; }
  .cab { font-size: 0; gap: 2px; padding: 0 4px; }
  .cab b { font-size: 12px; }
}

/* ---- Etapa 4b: compactar, ventanas redimensionables y audio en la línea de tiempo ---- */
/* Barra superior baja (40 px): logo, nombre, "Guardado" y Exportar más pequeños. */
.topbar { gap: 10px; padding: 0 10px; }
.logo { width: 24px; height: 24px; }
.marca { font-size: 14px; }
.nombre-proyecto { padding: 3px 8px; font-size: 13px; }
.guardado { font-size: 11px; white-space: nowrap; }
.btn-exportar { padding: 4px 12px; font-size: 12px; border-radius: 7px; }

/* Transporte compacto: solo iconos (su nombre sale al pasar el ratón). */
.transporte { gap: 2px; flex: none; }
.btn-tr { width: 26px; height: 26px; padding: 5px; border-radius: 6px; }
.btn-tr.btn-play { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--violeta); border: none; }
.visor-controles { gap: 6px 10px; padding-top: 6px; }
.tiempo { font-size: 12px; min-width: 0; white-space: nowrap; }
.btn-pantalla { width: 28px; height: 28px; font-size: 15px; flex: none; }

/* Barra de la línea de tiempo: herramientas, transporte y zoom. Si no cabe, primero se
   esconden los textos de los botones y, si aún no cabe, pasa a una segunda fila. */
.timeline { container-type: inline-size; }
.tl-barra { flex-wrap: wrap; overflow: visible; gap: 4px 6px; padding: 4px 8px; }
.tl-grupo { display: flex; align-items: center; gap: 3px; flex: none; }
.tl-barra .tl-btn { padding: 3px 8px; font-size: 12px; white-space: nowrap; }
.tl-transporte { padding: 0 6px; border-left: 1px solid var(--borde); border-right: 1px solid var(--borde); }
.tl-transporte .btn-tr { width: 24px; height: 24px; padding: 5px; }
.tl-transporte .btn-tr.btn-play { width: 26px; height: 26px; padding: 6px; }
#zoom { width: 96px; }
@container (max-width: 760px) {
  .tl-barra .etq { display: none; }
  #zoom { width: 70px; }
}
/* Cabeceras de las pistas: el nombre nunca se monta sobre los botones. */
.cab { overflow: hidden; }

/* Vídeos ocultos: se renderizan (diminutos y casi transparentes) en lugar de display:none,
   para que el navegador no deje de preparar sus fotogramas. */
.videos-ocultos { position: fixed; left: 0; top: 0; width: 2px; height: 2px; overflow: hidden; opacity: .01; pointer-events: none; z-index: -1; }
.videos-ocultos video { display: block; width: 2px; height: 2px; }

/* Valores editables junto a los deslizadores (valorEditable en util.js). */
.campo .fila-valor { display: flex; align-items: center; gap: 6px; width: 58%; }
.fila-valor input[type=range], .campo .fila-valor input[type=range], .campo .fila-angulo input[type=range] { flex: 1; width: auto; min-width: 40px; accent-color: var(--violeta); }
.valor-ed { flex: none; min-width: 38px; text-align: right; font-size: 12px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums; cursor: text; border-bottom: 1px dashed var(--suave); border-radius: 2px; }
.valor-ed:hover, .valor-ed:focus-visible { color: #fff; border-bottom-color: var(--violeta); outline: none; background: rgba(139, 92, 246, .15); }
.valor-campo { flex: none; width: 58px; padding: 2px 4px; font-size: 12px; text-align: right; background: var(--bg);
  border: 1px solid var(--violeta); border-radius: 4px; color: var(--texto); }
.anim-ajuste .valor-ed { min-width: 34px; }

/* Ventanas emergentes redimensionables: asa en la esquina inferior derecha. */
.galeria-anim { container-type: inline-size; }
.galeria-anim.redimensionable::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 9px; height: 9px;
  border-right: 2px solid var(--suave); border-bottom: 2px solid var(--suave); border-radius: 0 0 3px 0; opacity: .6; pointer-events: none; }
.galeria-anim.redimensionable:hover::after { opacity: 1; border-color: var(--violeta); }
/* Contenido flexible: en una ventana ancha las opciones van en columnas; en una estrecha, apiladas. */
.emer-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); column-gap: 18px; padding-right: 2px; }
.emer-cuerpo > h4, .emer-cuerpo > p, .emer-cuerpo > .aviso-falta { grid-column: 1 / -1; }
@container (max-width: 270px) {
  .emer-cuerpo .campo { flex-direction: column; align-items: stretch; gap: 3px; }
  .emer-cuerpo .campo > :not(span):not(input[type=color]):not(input[type=checkbox]) { width: 100%; }
}
@container (max-width: 480px) {
  .gal-cabecera .anim-buscar { order: 5; flex-basis: 100%; }
}
@media (max-width: 699px), (pointer: coarse) and (max-width: 899px) {
  .galeria-anim.redimensionable::after { display: none; }
}

/* Bloques de audio: envolvente (volumen y fundidos), línea de volumen y tiradores de fundido. */
.bloque-audio .envolvente { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* La línea de volumen solo se arrastra en el bloque seleccionado: así, sin seleccionar,
   todo el centro del bloque sirve para moverlo (primer clic = seleccionar). */
.asa-vol { position: absolute; left: 12px; right: 12px; height: 8px; margin-top: -4px; z-index: 3; cursor: ns-resize; touch-action: none; pointer-events: none; }
.bloque-audio.sel .asa-vol { pointer-events: auto; }
.asa-vol::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; border-radius: 2px; background: transparent; }
.bloque-audio.sel .asa-vol::after { background: rgba(255,255,255,.55); }
.bloque-audio.sel .asa-vol:hover::after { background: #fff; height: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.asa-fade { position: absolute; top: 1px; width: 10px; height: 10px; z-index: 4; border-radius: 50%; background: #fff;
  border: 1.5px solid rgba(0,0,0,.55); cursor: ew-resize; touch-action: none; opacity: 0; transition: opacity .15s; }
.bloque-audio:hover .asa-fade, .bloque-audio.sel .asa-fade { opacity: 1; }
.asa-globo { position: fixed; z-index: 100; pointer-events: none; padding: 2px 7px; border-radius: 5px; background: rgba(0,0,0,.85);
  color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Galería de sonidos de la app */
.btn-galeria-sonidos { display: block; width: 100%; padding: 8px; background: transparent; border: 1.5px dashed var(--c-efectos); }
.btn-galeria-sonidos:hover { background: rgba(245, 158, 11, .12); }
.son-rejilla { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.son-tarjeta { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 8px; background: var(--panel-2); border: 1px solid var(--borde); cursor: grab; touch-action: pan-y; user-select: none; }
.son-tarjeta:hover { border-color: var(--violeta); }
.son-onda { width: 56px; height: 28px; border-radius: 4px; background: var(--bg); display: block; }
.son-botones { display: flex; gap: 4px; }

/* ======================================================================
   Etapa 4c: menú lateral, pistas por capas, menú contextual
   ====================================================================== */
/* Arriba: menú | panel de la fila activa | divisor | visor (el resto). */
.app.con-menu .zona-sup { grid-template-columns: var(--col-menu, 78px) var(--col-panel, minmax(220px, 300px)) 6px minmax(0, 1fr); }
.app.con-menu.plegada-panel .zona-sup { grid-template-columns: var(--col-menu, 78px) minmax(0, 1fr); }
.plegada-panel .panel-lateral, .plegada-panel .divisor[data-div=panel] { display: none; }
.zona-sup > * { min-width: 0; }

/* Menú lateral: icono + nombre corto; estrecho = solo iconos. */
.menu-lateral { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; min-height: 0; overflow: hidden;
  background: var(--panel); border-right: 1px solid var(--borde); }
.menu-fila { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px;
  background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--suave); font-size: 10.5px; line-height: 1.1; }
.menu-fila:hover { color: var(--texto); background: var(--panel-2); border-color: transparent; }
.menu-fila.activa { color: #fff; background: rgba(139, 92, 246, .22); border-color: rgba(139, 92, 246, .55); }
.menu-fila.con-punto::after { content: ""; position: absolute; top: 5px; right: 9px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--menta); box-shadow: 0 0 0 2px var(--panel); }
.menu-nombre { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-fila[hidden], .menu-sep[hidden] { display: none; }
.menu-sep { flex: none; height: 1px; margin: 3px 8px; background: var(--borde); }
.menu-estrechar { flex: none; margin-top: auto; align-self: center; width: 30px; height: 26px; padding: 4px; background: transparent;
  border-color: transparent; color: var(--suave); }
.menu-estrechar:hover { color: var(--texto); }
.ico { display: inline-block; width: 20px; height: 20px; flex: none; }
.ico svg { width: 100%; height: 100%; display: block; }
.menu-estrecho .menu-nombre { display: none; }
.menu-estrecho .menu-fila { padding: 8px 2px; }
.menu-estrecho .menu-fila.con-punto::after { right: 4px; }

/* Panel de la fila activa: cabecera fija y la sección con su propio scroll. */
.panel-lateral { display: flex; flex-direction: column; padding: 0; overflow: hidden; border-right: 1px solid var(--borde); }
.panel-cab { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-bottom: 1px solid var(--borde); font-size: 13px; }
.panel-cab .plegar { margin-left: auto; }
.seccion { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; }
.seccion[hidden] { display: none; }
.panel-lateral h3 { margin: 0 0 10px; font-size: 14px; }
.panel-lateral h4 { margin: 16px 0 6px; font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.pista-ayuda.izq { text-align: left; }
.sec-titulo { margin-bottom: 4px !important; }
.arrastrando-archivos .panel-lateral { outline: 2px dashed var(--menta); outline-offset: -6px; }
fieldset.sin-borde { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Sección Transiciones: lista de uniones. */
.tr-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.tr-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px;
  background: var(--bg); border: 1px solid var(--borde); border-radius: 8px; }
.tr-item.sel { border-color: var(--violeta); }
.tr-item-icono { text-align: center; font-size: 15px; color: var(--violeta); }

/* Animación de una superposición: nombre + selector agrupado en la misma fila. */
.anim-fila-capa { grid-template-columns: minmax(0, 1fr) minmax(0, 58%); }
.anim-fila-capa > select { width: 100%; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 6px; padding: 3px; font-size: 12px; }

/* ---- Línea de tiempo por capas ---- */
.tl-cuerpo { overflow: hidden; }
.tl-cabeceras { width: 196px; flex-shrink: 0; overflow: hidden; position: relative; }
.tl-scroll { overflow: auto; }
.tl-regla { position: sticky; top: 0; z-index: 6; background: var(--panel); }
.cab-regla { position: sticky; top: 0; z-index: 2; height: var(--alto-regla); display: flex; align-items: center; padding: 0 6px;
  background: var(--panel); border-bottom: 1px solid var(--borde); }
.btn-mas-pista { padding: 1px 8px; font-size: 11px; border-radius: 6px; }
.tl-pistas { position: relative; padding-bottom: 28px; }
.cab-relleno { height: 28px; }
.tl-alto { background: var(--bg); border: 1px solid var(--borde); border-radius: 6px; padding: 2px 4px; font-size: 12px; }

.pista { touch-action: pan-x pan-y; }
.pista-principal { background: rgba(255, 255, 255, .025); }
.pista-sup { background: rgba(236, 72, 153, .025); }
.pista-sonido { background: rgba(20, 184, 166, .025); }
.pista.bloqueada { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 6px, transparent 6px 12px); }
.pista.bloqueada .bloque, .pista.bloqueada .clip { cursor: default; }
.pista.destino { box-shadow: inset 0 0 0 2px var(--violeta); background-color: rgba(139, 92, 246, .1); }
/* Al arrastrar al hueco de arriba/abajo: línea donde aparecerá la pista nueva. */
.tl-contenido.nueva-arriba .tl-pistas::before, .tl-contenido.nueva-abajo .tl-pistas::after {
  content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--violeta); z-index: 7; pointer-events: none; }
.tl-contenido.nueva-arriba .tl-pistas::before { top: -2px; }
.tl-contenido.nueva-abajo .tl-pistas::after { bottom: 22px; }

/* Bloques de las pistas de superposición: textos (rosa) y vídeos/fotos (con miniatura). */
.bloque-texto { background: var(--c-texto); padding: 0 14px; cursor: grab; touch-action: none; user-select: none; }
.bloque-capa { padding: 0 14px; cursor: grab; touch-action: none; user-select: none; color: #fff; text-shadow: 0 1px 2px #000;
  background-color: #3a3354; background-size: auto 100%; background-repeat: repeat-x; border: 1.5px solid #6d5aa8; }
.bloque-capa.falta { background-image: repeating-linear-gradient(45deg, #3a2a10 0 8px, #2a2010 8px 16px) !important; border-color: var(--c-efectos); }
.bloque-texto.sel, .bloque-capa.sel { box-shadow: 0 0 0 2px #fff; z-index: 2; }
.bloque-texto .borde, .bloque-capa .borde { background: rgba(0, 0, 0, .2); }
.bloque.mudo { opacity: .5; }
.clip.mudo .etiqueta::before { content: "🔇 "; }
.pista .vacia { white-space: nowrap; }
/* Sonido: archivos en verde azulado; sonidos de la app en ámbar. */
.bloque-audio { background: var(--c-musica); }
.bloque-audio.gen { background: var(--c-efectos); color: #111; }
.bloque-audio.gen .onda { filter: invert(1); opacity: .45; }
.bloque-audio.gen .etiqueta-a { text-shadow: none; }

/* Cabeceras: icono, nombre editable, botones y borde inferior para cambiar el alto. */
.cab { position: relative; display: flex; align-items: center; gap: 3px; padding: 0 3px 0 6px; overflow: hidden;
  border-top: 1px solid var(--borde); font-size: 12px; white-space: nowrap; }
.cab-ico { width: 16px; height: 16px; }
.cab-ico .ico { width: 16px; height: 16px; }
.ico-principal { color: #8fa3bd; } .ico-sup { color: var(--c-texto); } .ico-sonido { color: var(--c-musica); }
.cab-nombre { flex: 1; min-width: 24px; padding: 2px 4px; font-size: 12px; color: var(--texto); background: transparent;
  border: 1px solid transparent; border-radius: 5px; text-overflow: ellipsis; }
.cab-nombre:hover { border-color: var(--borde); }
.cab-nombre:focus { border-color: var(--violeta); background: var(--bg); outline: none; }
.cab-btns { display: flex; gap: 0; flex: none; margin-left: 0; align-items: center; }
.cab .pista-btn { width: 20px; height: 20px; padding: 2px; }
.cab .pista-btn .ico { width: 100%; height: 100%; }
.cab .pista-btn:disabled { opacity: .25; }
.cab-orden { display: none; }
.cab:hover .cab-orden, .cab:focus-within .cab-orden { display: flex; }
.btn-candado.apagado::after { display: none; }
.cab.apagada .cab-nombre { opacity: .6; }
.cab.bloqueada { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 6px, transparent 6px 12px); }
.cab-redim { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; touch-action: none; z-index: 1; }
.cab-redim:hover, .redimensionando .cab-redim:active { background: var(--violeta); opacity: .7; }

/* ---- Menú contextual propio ---- */
.menu-ctx { position: fixed; z-index: 90; min-width: 210px; max-width: 300px; padding: 4px; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.6); }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; text-align: left; font-size: 13px;
  background: transparent; border: none; border-radius: 6px; }
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: rgba(139, 92, 246, .25); outline: none; }
.menu-item kbd { margin-left: auto; padding-left: 16px; font: inherit; font-size: 11px; color: var(--suave); }
.menu-item .ico { width: 16px; height: 16px; color: var(--suave); }
.menu-ctx .menu-sep { margin: 4px 6px; }

/* ---- Móvil: el menú es una barra inferior de iconos y el panel sube como una hoja ---- */
@media (max-width: 699px), (pointer: coarse) and (max-width: 899px) {
  .app.con-menu .zona-sup, .app.con-menu.plegada-panel .zona-sup { grid-template-columns: minmax(0, 1fr); }
  .menu-lateral { position: fixed; left: 0; right: 0; bottom: 0; height: 52px; z-index: 45; flex-direction: row; gap: 2px;
    padding: 4px; border-right: none; border-top: 1px solid var(--borde); }
  .menu-fila { flex: 1 1 0; min-width: 42px; padding: 4px 1px; font-size: 9px; }
  .menu-fila .ico { width: 18px; height: 18px; }
  .menu-lateral .menu-sep, .menu-estrechar { display: none; }
  .panel-lateral { padding: 0; display: flex; }
  .panel-lateral .plegar { display: none; }
  .tl-cabeceras { width: 104px; }
  .cab-nombre { font-size: 11px; }
  .cab .pista-btn { width: 18px; height: 18px; }
  .cab:hover .cab-orden { display: none; }
}

/* ---- Etapa 4d: panel Texto ---- */
/* Estilos de partida como botones bajos (30 px) con su muestra; se reparten en una o dos filas. */
.estilos { display: flex; flex-wrap: wrap; gap: 6px; }
.estilo { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 10px; font-size: 13px; line-height: 1; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-simple { font-weight: 600; background: transparent; border: 1.5px dashed var(--violeta); }
.est-simple:hover { background: rgba(139, 92, 246, .12); }
.est-titular { font-size: 14px; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.est-precio { font-size: 13px; }
.est-llamada { font-size: 13px; border-radius: 6px; }
.sec-texto { margin-top: 10px; border-top: 1px solid var(--borde); }
.panel-lateral h4.sec-texto-titulo { margin-top: 10px; }
.sec-texto-vacio { margin-top: 14px; }

/* ======================================================================
   Etapa 4e: selección de tramos y puntos de volumen
   ====================================================================== */
.tl-btn.activa { background: rgba(139, 92, 246, .3); border-color: var(--violeta); color: #fff; }
.tl-contenido.modo-tramo .clip, .tl-contenido.modo-tramo .bloque, .tl-contenido.modo-tramo .tl-regla { cursor: text; }
/* Franja del tramo: no se come los clics (solo sus bordes y su etiqueta). */
.tramo-franja { position: absolute; z-index: 8; pointer-events: none; background: rgba(255, 255, 255, .16);
  border-left: 2px solid #fff; border-right: 2px solid #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.tramo-franja.todas { background: rgba(94, 234, 212, .12); border-color: var(--menta); }
.tramo-borde { position: absolute; top: 0; bottom: 0; width: 10px; pointer-events: auto; cursor: ew-resize; touch-action: none; }
.tramo-borde-a { left: -6px; } .tramo-borde-b { right: -6px; }
.tramo-borde::after { content: ""; position: absolute; top: 50%; left: 2px; width: 6px; height: 16px; margin-top: -8px; border-radius: 3px; background: #fff; }
.tramo-franja.todas .tramo-borde::after { background: var(--menta); }
.tramo-etq { position: absolute; left: 4px; top: 1px; padding: 0 5px; border-radius: 4px; background: rgba(0,0,0,.75); color: #fff;
  font-size: 10px; line-height: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: auto; }
/* Barra flotante del tramo (en body, posición fija). */
.tramo-barra { position: fixed; z-index: 70; display: flex; flex-direction: column; gap: 4px; padding: 3px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--borde); box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.tramo-fila { display: flex; align-items: center; gap: 2px; }
.tramo-btn { min-width: 26px; height: 26px; padding: 0 5px; font-size: 13px; line-height: 1; border-radius: 6px; background: transparent; border: 1px solid transparent; }
.tramo-btn:hover:not(:disabled) { background: var(--panel-2); border-color: var(--borde); }
.tramo-btn:disabled { opacity: .35; cursor: default; }
.tramo-sep { width: 1px; align-self: stretch; margin: 3px 2px; background: var(--borde); }
.tramo-vol { display: flex; align-items: center; gap: 6px; padding: 2px 6px 3px; font-size: 12px; }
.tramo-vol[hidden] { display: none; }
.tramo-vol input[type=range] { flex: 1; min-width: 90px; }
/* Puntos de volumen: curva amarilla y tiradores redondos. */
.curva-vol { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.asa-punto { position: absolute; z-index: 5; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: #FDE047; border: 1.5px solid rgba(0,0,0,.6); cursor: move; touch-action: none; }
.asa-punto:hover { transform: scale(1.3); }

/* ---- Etapa 4e: panel Medios unificado (pestañas Medios / Audio) ---- */
.pestanas-medios { display: none; gap: 2px; padding: 2px; border-radius: 7px; background: var(--bg); }
.panel-lateral[data-activo="medios"] .pestanas-medios { display: flex; }
.panel-lateral[data-activo="medios"] #panel-titulo { font-size: 11px; color: var(--suave); font-weight: 600; }
.pestana-medios { padding: 2px 9px; font-size: 12px; border-radius: 5px; background: transparent; border: 1px solid transparent; color: var(--suave); }
.pestana-medios:hover { color: var(--texto); }
.pestana-medios.activa { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.btn-importar.compacto { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 10px; font-size: 13px; white-space: nowrap; }
.pista-ayuda.mini { font-size: 11px; margin: 4px 0 8px; }
.sub-medios[hidden] { display: none; }
/* Miniaturas pequeñas: varias por fila (72–84 px), nombre en una línea con "…". */
.sub-medios .cuadricula { grid-template-columns: repeat(auto-fill, minmax(72px, 84px)); justify-content: start; gap: 6px; }
.sub-medios .medio img, .sub-medios .medio > div:first-child { aspect-ratio: 4/5; }
.sub-medios .medio .nom { font-size: 10.5px; padding: 2px 4px; }
.sub-medios .medio .dur { bottom: 19px; font-size: 9.5px; }
.sub-medios .medio .mas { width: 22px; height: 22px; font-size: 13px; }
.sub-medios .medio .quitar { width: 18px; height: 18px; font-size: 10px; }
/* Tarjetas de audio: onda, nombre + duración, ▶, + y ✕. */
.aud-tarjeta { gap: 6px; padding: 4px 6px; }
.aud-onda { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: rgba(20, 184, 166, .18); color: var(--c-musica); }
.aud-onda svg { width: 18px; height: 18px; }

/* ======================================================================
   Etapa 4g: tramo con teclado (I / O), herramienta Tramo visible, zoom del tramo
   y ventanas emergentes estrechas sin solapes
   ====================================================================== */
/* Herramienta Tramo: icono propio y, activa, botón violeta lleno + borde violeta en la línea de
   tiempo + cursor en cruz sobre los elementos y la regla. */
.btn-tramo { display: inline-flex; align-items: center; gap: 2px; }
.ico-tramo { width: 15px; height: 15px; flex: none; }
.tl-barra .tl-btn.btn-tramo.activa { background: var(--violeta); border-color: #fff; color: #fff; box-shadow: 0 0 0 2px rgba(139, 92, 246, .45); }
.timeline.modo-tramo .tl-scroll { outline: 2px solid var(--violeta); outline-offset: -2px; }
.timeline.modo-tramo .tl-contenido .clip, .timeline.modo-tramo .tl-contenido .bloque,
.timeline.modo-tramo .tl-contenido .clip *, .timeline.modo-tramo .tl-contenido .bloque *,
.timeline.modo-tramo .tl-regla { cursor: crosshair; }
/* Con la herramienta activa, el dedo marca el tramo en vez de desplazar la línea de tiempo. */
.timeline.modo-tramo .pista, .timeline.modo-tramo .pista * { touch-action: none; }
.tl-barra .btn-io { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Barra del tramo: el panel de zoom (intensidad + suavizado) va en su propia fila. */
.tramo-zoom select { max-width: 110px; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 6px; padding: 2px; font-size: 12px; }
.tramo-zoom-modo { white-space: nowrap; }
.tramo-barra { max-width: calc(100vw - 8px); }
.tramo-fila { flex-wrap: wrap; }

/* Marca de zoom en el bloque: franja violeta clara abajo + lupa. */
.marca-zoom { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; pointer-events: none; z-index: 1; }
.marca-zoom canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.marca-zoom b { position: absolute; right: 13px; bottom: 1px; font-size: 10px; line-height: 1; font-weight: normal;
  filter: drop-shadow(0 1px 1px #000); }

/* ---- Ventanas emergentes estrechas: nada se monta sobre nada ---- */
/* El contenido nunca se sale de la ventana; la cabecera, los chips y el pie no se aplastan y la
   rejilla (con scroll propio) se queda con el resto. */
.galeria-anim { overflow: hidden; min-width: 0; }
.galeria-anim > * { min-width: 0; }
.gal-cabecera, .gal-chips { flex-shrink: 0; }
.gal-rejilla { flex: 1 1 0; min-height: 56px; }
.gal-pie { flex: 0 1 auto; min-height: 0; overflow: hidden; }
/* Cabecera: los textos se recortan con "…" en vez de saltar de línea o tapar el ✕. */
.gal-cabecera > b, .gal-cabecera .tr-union, .gal-cabecera .gal-pestanas {
  flex: 1 1 0; min-width: 0; max-width: max-content; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-cabecera .gal-pestanas { flex-wrap: nowrap; }
.gal-cabecera .gal-pestanas button { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gal-cabecera .tr-union { flex-grow: 2; }
.gal-cabecera .mover-icono, .gal-cerrar { flex: none; }
/* Chips: una fila con scroll horizontal (rueda o panel táctil). */
.gal-chips { scrollbar-width: thin; overscroll-behavior-x: contain; }
/* Rejillas: menos columnas cuanto más estrecha (nunca más anchas que la ventana). */
.gal-rejilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr)); }
.son-rejilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
/* Pie de la galería de transiciones: se recoloca en varias filas y, si no cabe, scroll propio. */
.tr-pie { flex: 0 1 auto; min-height: 44px; overflow-y: auto; overflow-x: hidden; }
.tr-pie > * { min-width: 0; }
.tr-ajustes > * { min-width: 0; }
.tr-ajustes .anim-ajuste { flex: 1 1 150px; }
.tr-elegida-caja { max-width: 100%; }
.tr-botones { min-width: 0; }
.tr-botones button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@container (max-width: 420px) {
  .tr-pie { gap: 6px; }
  .tr-ajustes, .tr-botones { flex-basis: 100%; }
  .tr-botones button { flex: 1 1 auto; padding-left: 6px; padding-right: 6px; font-size: 12px; }
  .gal-rejilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 84px), 1fr)); gap: 6px; }
  .galeria-anim .gal-cerrar { width: 28px; height: 28px; }
}
/* Ventanas emergentes de propiedades: el título también se recorta. */
.emergente .gal-cabecera { flex-wrap: nowrap; }

/* ======================================================================
   Etapa 4h: huecos e imán, multiselección y grupos, foco del teclado, zoom de la línea
   de tiempo, barra del tramo sin tapar nada, curvas de zoom y voltear
   ====================================================================== */
/* Imán (N): activo = violeta lleno. */
.btn-iman { display: inline-flex; align-items: center; gap: 2px; }
.ico-iman { width: 15px; height: 15px; flex: none; }
.tl-barra .tl-btn.btn-iman.activa { background: rgba(139, 92, 246, .3); border-color: var(--violeta); color: #fff; }
/* Hueco en la pista principal: negro con rayas suaves (así se ve que es "nada"). */
.hueco { position: absolute; top: 4px; bottom: 4px; border-radius: 6px; background: #000;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px);
  border: 1px dashed #4b5563; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hueco span { font-size: 10px; color: var(--suave); white-space: nowrap; pointer-events: none; }
/* Marcas de las uniones: siempre arriba; compactas (solo icono) con pistas bajas o clips estrechos. */
.union-marca { top: 2px; z-index: 4; }
.union.compacta .union-marca { height: 15px; padding: 0 4px; }
.union.compacta .union-marca span { display: none; }
.union.compacta .union-rombo { width: 12px; height: 12px; left: -6px; top: 1px; }
.pista-principal .clip .etiqueta { bottom: 2px; }

/* Multiselección: todos con su marca; el principal, más marcado. */
.clip.sel-principal, .bloque.sel-principal { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--violeta); }
/* Grupos: borde del color del grupo y un icono de enlace. */
.clip.en-grupo, .bloque.en-grupo { outline: 2px solid var(--c-grupo, #F59E0B); outline-offset: -2px; }
.ico-grupo { position: absolute; top: 1px; right: 13px; z-index: 6; font-size: 10px; line-height: 1; pointer-events: none;
  filter: drop-shadow(0 1px 1px #000); }
/* Foco del teclado (Tab): recuadro discontinuo, solo con la línea de tiempo enfocada. */
.tl-scroll:focus { outline: none; }
.tl-scroll:focus-visible { box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .35); }
.tl-scroll:focus .foco { outline: 2px dashed var(--menta); outline-offset: 1px; z-index: 6; }
/* Nombre de la pista: se lee como texto (clic = seleccionar la pista); doble clic = escribir. */
.cab-nombre[readonly] { cursor: pointer; }
.cab-nombre[readonly]:focus { outline: none; }

/* Zoom de la línea de tiempo: − / % / + / Ajustar. */
.zoom-pct { width: 58px; text-align: center; padding: 2px 4px; font-size: 12px; font-variant-numeric: tabular-nums;
  background: var(--bg); border: 1px solid var(--borde); border-radius: 6px; color: var(--texto); }
.zoom-pct:focus { border-color: var(--violeta); outline: none; }
.tl-zoom .tl-btn:disabled { opacity: .4; }

/* Barra del tramo: flotante dentro de la zona de pistas o acoplada bajo la barra de herramientas. */
.tramo-barra.acoplada { position: static; flex: none; max-width: none; margin: 0; border-radius: 0; box-shadow: none;
  border-width: 0 0 1px; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 2px 8px; }
.tramo-btn { display: inline-flex; align-items: center; gap: 3px; }
.tramo-etq-corta { display: none; font-size: 11px; white-space: nowrap; }
.tramo-barra.con-etq .tramo-etq-corta { display: inline; }
.tramo-zoom { flex-wrap: wrap; }
.tramo-zoom-par { display: inline-flex; align-items: center; gap: 4px; }
.tramo-zoom-par small { color: var(--suave); font-size: 10px; }
.tramo-zoom-par input[type=range] { width: 80px; min-width: 60px; flex: none; }
.tramo-zoom-flecha { color: var(--suave); }

/* Curva de zoom (violeta, discontinua) con sus tiradores; la lupa en la esquina. */
.curva-zoom { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.asa-punto.asa-zoom { background: #C4B5FD; border-radius: 2px; transform: rotate(45deg); }
.asa-punto.asa-zoom:hover { transform: rotate(45deg) scale(1.3); }

/* Voltear: botones en el panel. */
.botones-volteo button { flex: 1 1 auto; }
.valores-distintos .valor-ed::after { content: " *"; color: var(--suave); }
.tramo-barra.medir { max-width: none; }
.tramo-barra.medir .tramo-fila { flex-wrap: nowrap; }

/* ======================================================================
   Etapa 5: exportar, archivos guardados en el navegador y guía de atajos
   ====================================================================== */
/* Barra superior: botón de la guía de atajos (solo icono). */
.btn-atajos { flex: none; width: 30px; height: 28px; padding: 4px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--suave); }
.btn-atajos:hover, .btn-atajos[aria-expanded="true"] { color: var(--texto); }
.btn-atajos svg { width: 20px; height: 20px; }
.btn-exportar { flex: none; white-space: nowrap; }

/* Panel Medios: espacio usado en el navegador y marca de "no guardado". */
.espacio-medios { margin: -6px 0 10px; font-size: 10.5px; color: var(--suave); text-align: center; line-height: 1.3; }
.espacio-medios:empty { display: none; }
.espacio-medios.lleno { color: var(--c-efectos); }
.medio .no-guardado { position: absolute; right: 4px; bottom: 22px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-efectos); color: #111; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; }

/* Exportar: capa que bloquea el editor y ventana (movible como las demás). Debajo de los avisos (z 100). */
.exportar-capa { position: fixed; inset: 0; z-index: 95; background: rgba(8, 9, 11, .62); }
.exportando #recuadro, .exportando #progreso, .exportando .tramo-barra { visibility: hidden !important; }
.exportar-ventana { max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: hidden; }
.exp-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 14px; align-items: start; }
.exp-vista { display: flex; justify-content: center; }
.exp-mini { display: block; max-width: 150px; max-height: 200px; border-radius: 8px; background: #000; border: 1px solid var(--borde); }
.exp-datos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.exp-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.exp-fila > span { color: var(--suave); flex: none; }
.exp-fila > b { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.exp-campo-nombre { flex-direction: column; align-items: stretch; gap: 4px; }
.exp-nombre-fila { display: flex; align-items: center; gap: 4px; min-width: 0; }
.exp-nombre { flex: 1; min-width: 0; padding: 6px 8px; font-size: 13px; background: var(--bg); border: 1px solid var(--borde); border-radius: 6px; }
.exp-nombre:focus { border-color: var(--violeta); outline: none; }
.exp-nombre-fila small { color: var(--suave); font-size: 13px; }
.exp-aviso { grid-column: 1 / -1; margin: 0; padding: 8px 10px; font-size: 12px; line-height: 1.4; border-radius: 8px;
  border: 1px solid var(--c-efectos); background: rgba(245, 158, 11, .1); }
.exp-aviso.error { border-color: #ef4444; background: rgba(239, 68, 68, .12); }
.exp-datos .exp-aviso { grid-column: auto; }
.exp-nota { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--suave); line-height: 1.4; }
.exp-nota b { color: var(--texto); font-weight: 600; }
.exp-botones { grid-column: 1 / -1; justify-content: flex-end; }
.exp-botones .btn-exportar { padding: 6px 16px; font-size: 13px; }
.exp-barra { height: 10px; border-radius: 99px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--borde); }
.exp-lleno { height: 100%; width: 0; background: var(--violeta); transition: width .2s linear; }
.exp-estado { margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.exp-ok { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--menta); }
@container (max-width: 420px) {
  .exp-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .exp-mini { max-height: 140px; }
}

/* Guía de atajos: grupos por tema, cada atajo con sus teclas y lo que hace. */
.guia-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 4px 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); padding-right: 2px; }
.guia-grupo h4 { margin: 10px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--menta); }
.guia-grupo dl { margin: 0; }
.guia-fila { display: grid; grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); gap: 10px; padding: 4px 0;
  border-bottom: 1px solid var(--borde); font-size: 12.5px; align-items: baseline; }
.guia-fila dt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; color: var(--suave); font-size: 11px; }
.guia-fila dd { margin: 0; line-height: 1.35; }
.guia-cuerpo kbd { display: inline-block; padding: 1px 6px; border-radius: 5px; font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--texto); background: var(--panel-2); border: 1px solid var(--borde); border-bottom-width: 2px; white-space: nowrap; }
.guia-cuerpo kbd.frase { white-space: normal; font-weight: 500; }
.guia-o { color: var(--suave); }
.guia-cuerpo [hidden] { display: none; }
@container (max-width: 340px) {
  .guia-fila { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Móvil: barra superior sin montarse (el nombre del proyecto encoge) y ventanas a casi toda la pantalla. */
@media (max-width: 699px), (pointer: coarse) and (max-width: 899px) {
  .topbar { gap: 6px; }
  .guardado { font-size: 10px; }
  .btn-atajos { width: 28px; }
  .exportar-ventana { max-width: none; max-height: none; }
  .exp-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .exp-mini { max-height: 150px; }
  .exp-botones button { flex: 1 1 auto; min-height: 40px; }
}
@media (max-width: 380px) {
  .guardado { display: none; }
}

/* ==== Etapa 6: feedback tras la prueba completa del MVP ==== */

/* Medios: pestañas Vídeo / Imgs / Audio sin título "Biblioteca" (se sobreentiende). */
.panel-lateral[data-activo="medios"] #panel-titulo { display: none; }
.pestana-medios { padding: 2px 8px; }

/* Miniaturas pequeñas con tamaño ajustable (--mini, 40–120 px; deslizador y Ctrl+rueda). */
.cuad-cab { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; font-size: 11px; color: var(--suave); min-width: 0; }
.cuad-cuenta { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuad-tam { display: flex; align-items: center; gap: 3px; flex: none; cursor: default; }
.cuad-tam input { width: 76px; }
.cuad-tam span { font-size: 11px; line-height: 1; }
.cuad-tam .cuad-tam-g { font-size: 15px; }
.sub-medios .cuadricula { --mini: 48px; grid-template-columns: repeat(auto-fill, var(--mini)); gap: 4px; justify-content: start; }
.sub-medios .cuad-vacia { grid-column: 1 / -1; }
.sub-medios .medio { border-radius: 6px; }
.sub-medios .medio img, .sub-medios .medio .sin-mini { display: block; width: 100%; aspect-ratio: 4/5; }
.sub-medios .medio .nom { display: none; } /* el nombre va en su title (al pasar el ratón) */
.sub-medios .medio .dur { left: 2px; bottom: 2px; font-size: 8.5px; padding: 0 3px; line-height: 1.4; border-radius: 3px; }
.sub-medios .medio .mas, .sub-medios .medio .quitar { top: 2px; width: 16px; height: 16px; font-size: 10px; line-height: 16px;
  opacity: 0; transition: opacity .12s; }
.sub-medios .medio .mas { right: 2px; }
.sub-medios .medio .quitar { left: 2px; }
.sub-medios .medio:hover .mas, .sub-medios .medio:hover .quitar, .sub-medios .medio:focus-within .mas,
.sub-medios .medio:focus-within .quitar, .sub-medios .medio.sel .mas, .sub-medios .medio.sel .quitar { opacity: 1; }
.sub-medios .cuadricula.grande .medio .mas, .sub-medios .cuadricula.grande .medio .quitar { width: 20px; height: 20px; line-height: 20px; font-size: 12px; }
.sub-medios .medio .recargar { inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; padding: 0;
  border-radius: 50%; font-size: 14px; line-height: 24px; }
.sub-medios .medio .no-guardado { right: 2px; bottom: 2px; width: 12px; height: 12px; font-size: 9px; line-height: 12px; }
@media (pointer: coarse) {
  .sub-medios .medio .mas, .sub-medios .medio .quitar { opacity: .9; width: 20px; height: 20px; line-height: 20px; }
}

/* Datos del archivo: enlace de una línea arriba del panel y su ventana. */
.enlace-datos { display: inline-block; margin: 0 0 6px; padding: 0; background: none; border: none; border-radius: 3px;
  color: #b9a4fb; font-size: 11.5px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.enlace-datos:hover { color: #fff; }
.enlace-datos:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; }
#prop-contenido h4.prim { margin-top: 2px; }
.datos-cuerpo { display: block; }
.datos-lista { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 12.5px; }
.datos-lista dt { color: var(--suave); }
.datos-lista dd { margin: 0; overflow-wrap: anywhere; }

/* Línea de tiempo: la última pista va pegada al pie; el hueco libre queda arriba (junto a la regla). */
.tl-contenido { display: flex; flex-direction: column; min-height: 100%; }
.tl-regla { flex: none; }
.tl-pistas { flex: none; margin-top: auto; padding-bottom: 0; }
.tl-cabeceras { display: flex; flex-direction: column; }
.tl-cabeceras > * { flex-shrink: 0; }
.tl-cabeceras > .cab-espacio { flex: 1 0 0; min-height: 0; }
.cab-relleno { display: none; }
.cab-redim.arriba { top: 0; bottom: auto; }
.tl-contenido.nueva-abajo .tl-pistas::after { bottom: 0; }

/* Uniones en las pistas de superposición (textos o superposiciones pegados). */
.pista-sup .union-rombo { top: 1px; }
.anim-mini.no-vale { opacity: .35; filter: grayscale(1); cursor: not-allowed; }
.anim-mini.no-vale:hover { opacity: .55; }
.tr-nota-libre { flex: none; margin: 0 2px; text-align: left; font-size: 11px; }

/* ============ Etapa 6b ============ */
/* Recuadro del visor: 8 tiradores. Los de los lados (solo ancho o solo alto) son cuadrados
   para distinguirlos de las esquinas; los textos solo tienen esquinas. */
.tirador.lado { border-radius: 3px; }
.t-n { left: 50%; top: -8px; margin-left: -7px; cursor: ns-resize; }
.t-s { left: 50%; bottom: -8px; margin-left: -7px; cursor: ns-resize; }
.t-e { top: 50%; right: -8px; margin-top: -7px; cursor: ew-resize; }
.t-w { top: 50%; left: -8px; margin-top: -7px; cursor: ew-resize; }
.recuadro.sin-lados .tirador.lado { display: none; }

/* Título de la primera sección del panel con el enlace "datos-…" a la derecha, en su línea. */
.fila-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 2px 0 6px; }
.fila-titulo h4 { margin: 0 !important; min-width: 0; }
.fila-titulo .enlace-datos { flex: none; margin: 0; font-size: 11px; }

/* Barra de la línea de tiempo: botones solo con icono, del tamaño de los del transporte. */
.tl-barra .tl-btn.tl-ico { position: relative; width: 24px; height: 24px; padding: 4px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tl-barra .tl-btn.tl-ico .ico { width: 100%; height: 100%; }
/* Ayuda propia (nombre + atajo): al pasar el ratón y al llegar con el teclado. */
.tl-barra [data-tip]::after, .tip-flotante {
  font: 500 12px/1.3 system-ui, sans-serif; color: var(--texto); background: #0d0f12; border: 1px solid var(--violeta);
  border-radius: 6px; padding: 4px 8px; box-shadow: 0 6px 18px rgba(0,0,0,.55); pointer-events: none; text-align: left; }
.tl-barra [data-tip]::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 6px); z-index: 60;
  width: max-content; max-width: min(260px, 70vw); white-space: normal; display: none; }
.tl-barra [data-tip]:hover::after, .tl-barra [data-tip]:focus-visible::after { display: block; }
.tip-flotante { position: fixed; z-index: 400; max-width: min(260px, 70vw); }

/* Imán en la cabecera de la pista principal: resaltado cuando está activado. */
.cab .pista-btn.cab-iman.activa { color: #fff; background: rgba(139, 92, 246, .45); border-color: var(--violeta); }

/* Alto de las pistas: siempre desde la línea SUPERIOR de la cabecera. */
.cab-redim { top: 0; bottom: auto; }
/* Orden de las pistas: arrastrar la cabecera (línea que indica el destino). */
.cab-orden .pista-btn { cursor: pointer; }
.cab.cab-arrastrando { opacity: .55; }
.moviendo-pista, .moviendo-pista * { cursor: grabbing !important; }
.linea-orden { position: fixed; height: 3px; background: var(--violeta); border-radius: 2px; z-index: 300; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
/* Móvil: la cabecera de la principal lleva un botón más (imán): un poco más de ancho para que quepa. */
@media (max-width: 699px), (pointer: coarse) and (max-width: 899px) {
  .tl-cabeceras { width: 128px; }
  .cab-principal .cab-ico { display: none; }
}

/* ============ Etapa 6c: recortar ============ */
/* Botón conmutador junto al recuadro: debajo, o dentro si debajo no cabe. */
.rec-recortar { position: absolute; left: -2px; top: calc(100% + 10px); padding: 2px 8px; font-size: 11px; line-height: 16px;
  white-space: nowrap; cursor: pointer; background: rgba(20, 22, 27, .85); }
.recuadro.boton-dentro .rec-recortar { top: auto; bottom: 12px; left: 12px; }
.rec-recortar.activo { background: #F59E0B; border-color: #F59E0B; color: #111; font-weight: 700; }
/* Con Recortar activo o Alt pulsada: recuadro discontinuo y tiradores en forma de barra, en ámbar. */
.recuadro.recortando { border-style: dashed; border-color: #F59E0B; }
.recuadro.recortando .tirador { background: #F59E0B; border-color: #111; border-radius: 2px; cursor: crosshair; }
.recuadro.recortando .t-n, .recuadro.recortando .t-s { width: 26px; height: 8px; margin-left: -13px; cursor: row-resize; }
.recuadro.recortando .t-n { top: -5px; } .recuadro.recortando .t-s { bottom: -5px; }
.recuadro.recortando .t-e, .recuadro.recortando .t-w { width: 8px; height: 26px; margin-top: -13px; cursor: col-resize; }
.recuadro.recortando .t-e { right: -5px; } .recuadro.recortando .t-w { left: -5px; }
.btn-recortar.activo { border-color: #F59E0B !important; background: rgba(245, 158, 11, .25) !important; }