/* styles.css */
* { margin:0; padding:0; box-sizing:border-box }
body { display:flex; height:100vh; font-family:Arial,sans-serif }
.sidebar {
  width:260px; background:#f5f5f5; padding:10px;
  display:flex; flex-direction:column; gap:10px; overflow:auto;
}
.sidebar label, .sidebar button { font-size:14px; width:100%; }
.sidebar input, .sidebar button { box-sizing:border-box; }

#frames {
  flex:1; display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px; padding:12px;
  justify-items:center; align-content:start;
  background:#e0e0e0; overflow:auto;
}

.frame {
  background:#fff; border:2px solid #888;
  padding:6px; width:340px;
  display:flex; flex-direction:column; gap:6px;
}
.frame.selected { border-color:#ff6a00; }

.frame canvas {
  width:100%; height:180px;
  border:1px solid #333;
  transform-origin:center;
  transform-style:preserve-3d;
}
.depthRow { font-size:13px; display:flex; align-items:center; gap:6px; }
.controls {
  display:flex; gap:6px; align-items:center;
}
.controls button, .controls input[type="number"] {
  padding:4px; font-size:14px; cursor:pointer;
}
.btn-cam.active  { background:lightblue; }
.btn-rec.active  { background:red;      animation:blink .5s infinite; }
.btn-play.active { background:lightgreen;}
@keyframes blink { 50% { opacity:0.3 } }

/* Biblioteca estática */
.hidden { display:none; }
.library {
  display: grid;
  grid-template-columns: repeat(auto-fill, 60px);
  grid-auto-rows: 60px;
  gap: 6px;
  padding: 4px;
  background: #fafafa;
  /* deja overflow sólo para scroll si hay muchas miniaturas */
  overflow-y: auto;
}

.library img {
  width: 60px;            /* fija el ancho de la miniatura */
  height: 60px;           /* fija la altura de la miniatura */
  object-fit: contain;    /* muestra la imagen completa, sin recortes */
  object-position: center;/* centra la imagen dentro del cuadro */
  cursor: pointer;
  border: 2px solid transparent;
}

.library img:hover {
  border-color: #ff6a00;
}

/* Overlay de progreso */
.overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.5); display:flex;
  align-items:center; justify-content:center;
  z-index:1000;
}
.overlay.hidden { display:none; }
.progress-container {
  background:#fff; padding:20px; border-radius:8px;
  text-align:center; width:300px;
}
.progress-container label { display:block; margin-bottom:10px; font-size:16px; }
.progress-container input { width:100%; }
#progressSlider::-webkit-slider-thumb { -webkit-appearance:none; width:50; height:50 }
#progressSlider::-moz-range-thumb    { width:50; height:50; border:none }
#progressSlider::-ms-thumb           { width:50; height:50; border:none }



.library {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 4px;
  background: #fafafa;
}

.library .thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
}

.library .thumb:hover {
  border-color: #ff6a00;
}