.project-player {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.project-player span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.project-player input { min-width: 100px; }
.full { width: 100%; margin-top: 9px; }
[hidden] { display: none !important; }
.stage.project-playing { box-shadow: inset 0 0 0 2px var(--accent2); }
.stage.transitioning video { animation: projectFade .35s ease; }
@keyframes projectFade { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 650px) {
  .project-player { grid-template-columns: 1fr 1fr; }
  .project-player span, .project-player input { grid-column: 1 / -1; width: 100%; }
}

/* =============================================================
   Tira de fotogramas del clip
   ============================================================= */
.clip-strip{
  margin:14px 0 4px;padding:12px 14px;
  border:1px solid rgba(57,255,20,.16);
  background:rgba(8,8,10,.7);
}
.cs-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:9px;
}
.cs-title{
  font-family:'Space Grotesk',ui-monospace,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gom-green,#39ff14);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cs-times{font-size:12px;color:var(--gom-muted,#7c7c86);white-space:nowrap}
.cs-times b{color:var(--gom-text,#e8e8e0);font-weight:500}

.cs-track{
  position:relative;height:54px;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);background:#050505;
  user-select:none;
  /* Sin overflow:hidden — recortaba la mitad de los tiradores de los extremos
     y solo se podían agarrar por unos pocos píxeles. Los fotogramas se
     recortan en su propio contenedor. */
}
.cs-thumbs{
  position:absolute;inset:0;display:flex;
  overflow:hidden;pointer-events:none;
}
.cs-frame{
  flex:1 1 0;min-width:0;height:100%;
  background-size:cover;background-position:center;
  border-right:1px solid rgba(0,0,0,.35);
}
.cs-cargando{
  display:flex;align-items:center;justify-content:center;width:100%;
  font-size:12px;color:var(--gom-muted,#7c7c86);
}
.cs-shade{
  position:absolute;top:0;height:100%;z-index:2;
  background:rgba(3,3,3,.72);pointer-events:none;
}
.cs-sel{
  position:absolute;top:0;height:100%;pointer-events:none;z-index:3;
  border-top:2px solid var(--gom-green,#39ff14);
  border-bottom:2px solid var(--gom-green,#39ff14);
}
.cs-handle{
  position:absolute;top:-2px;height:calc(100% + 4px);width:11px;margin-left:-5px;
  background:var(--gom-green,#39ff14);cursor:ew-resize;z-index:6;
  box-shadow:0 0 12px rgba(57,255,20,.55);
  touch-action:none;
}
/* Zona de agarre más ancha que la barra visible, para no tener que apuntar */
.cs-handle::before{
  content:"";position:absolute;top:0;bottom:0;left:-8px;right:-8px;
}
.cs-handle::after{
  content:"";position:absolute;left:50%;top:50%;
  width:1px;height:18px;margin:-9px 0 0 -1px;
  background:rgba(0,0,0,.55);box-shadow:3px 0 0 rgba(0,0,0,.55),-3px 0 0 rgba(0,0,0,.55);
}
.cs-cut{
  position:absolute;top:0;height:100%;width:2px;margin-left:-1px;
  background:#ff2020;z-index:4;pointer-events:none;
  box-shadow:0 0 10px rgba(255,32,32,.8);
}
.cs-cut span{
  position:absolute;top:-1px;left:5px;
  padding:1px 5px;background:#ff2020;color:#fff;
  font-family:'Space Grotesk',ui-monospace,monospace;font-size:9px;
  white-space:nowrap;
}
.cs-cut.fuera{opacity:.35}
.cs-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:9px;
}
.cs-foot .hint{font-size:11.5px;color:var(--gom-muted,#7c7c86)}
.cs-foot button{width:auto;padding:7px 14px;margin:0;flex-shrink:0}

/* =============================================================
   Línea de tiempo proporcional del proyecto
   ============================================================= */
.tl{
  position:relative;margin:10px 0 16px;padding-top:20px;
  border:1px solid rgba(57,255,20,.14);background:rgba(8,8,10,.6);
  cursor:pointer;user-select:none;
}
.tl-ruler{
  position:absolute;top:0;left:0;right:0;height:20px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.tl-mark{
  position:absolute;top:4px;transform:translateX(-50%);
  font-family:'Space Grotesk',ui-monospace,monospace;font-size:9px;
  color:var(--gom-muted,#7c7c86);white-space:nowrap;
}
.tl-mark::after{
  content:"";position:absolute;left:50%;top:13px;
  width:1px;height:6px;background:rgba(255,255,255,.14);
}
.tl-track{position:relative;height:56px;margin:6px 0}
.tl-clip{
  position:absolute;top:0;height:100%;
  background-size:cover;background-position:center;
  border:1px solid rgba(57,255,20,.3);
  overflow:hidden;transition:border-color .15s,box-shadow .15s;
}
.tl-clip::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,3,3,.35),rgba(3,3,3,.82));
}
.tl-clip:hover{border-color:rgba(57,255,20,.65)}
.tl-clip.sel{
  border-color:var(--gom-green,#39ff14);
  box-shadow:inset 0 0 0 1px var(--gom-green,#39ff14),0 0 22px rgba(57,255,20,.28);
}
.tl-clip-lbl,.tl-clip-dur{
  position:absolute;left:7px;
  font-family:'Space Grotesk',ui-monospace,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:calc(100% - 14px);
}
.tl-clip-lbl{top:6px;font-size:10.5px;color:#fff}
.tl-clip-dur{bottom:6px;font-size:10px;color:var(--gom-green,#39ff14)}
.tl-trans{
  position:absolute;right:0;top:0;height:100%;
  background:repeating-linear-gradient(45deg,
    rgba(160,107,255,.30) 0 5px, rgba(160,107,255,.10) 5px 10px);
  border-left:1px solid rgba(160,107,255,.55);
}
.tl-cursor{
  position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;left:0;
  background:var(--gom-green,#39ff14);pointer-events:none;z-index:5;
  box-shadow:0 0 12px rgba(57,255,20,.75);
}
.tl-cursor span{
  position:absolute;top:0;left:5px;
  padding:1px 5px;background:var(--gom-green,#39ff14);color:#050505;
  font-family:'Space Grotesk',ui-monospace,monospace;font-size:9px;
  white-space:nowrap;
}

@media (max-width:760px){
  .cs-foot{flex-direction:column;align-items:stretch}
  .cs-foot button{width:100%}
  .tl-clip-lbl{font-size:9px}
}