:root {
  --primary: #3b82f6;
  --surface: #f2f4fb;
  --border: #d0d7e8;
  font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Reset y layout */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {

  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background: #fafbfe;
  color: #111;
}

/* Contenedor escalable */
#escala-wrapper {
  width: 1280px; /* Ancho base */
  transform-origin: top left;
  transition: transform 0.2s ease;
}

/* Contenedor general */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 16px;
  background: var(--primary);
  color: #fff;
  width: 100vw;
}

header img.logo {
  height: 48px; /* o el tamaño que prefieras */
}
.workspace {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar izquierdo */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: #fff;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.sidebar button {
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.2s;
}
.sidebar button:hover {
  background: #e9eef7;
}
.sidebar button.active {
  background: var(--primary);
  color: #fff;
}

/* Área de canvas */
.canvas-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
#canvas-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
canvas {
  border: 1px solid var(--border);
  background: #000;
}

/* Controles debajo del canvas */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  background: #fff;
  border-top: 1px solid var(--border);
}
.controls label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .85rem;
}
.controls input[type=range] {
  width: 100px;
}
.controls button {
  padding: 4px 8px;
  border: none;
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.2s;
}
.controls button:hover {
  background: #e9eef7;
}
.controls button.active {
  background: var(--primary);
  color: #fff;
}

/* Timeline y capas */
.timeline {
  border-top: 1px solid var(--border);
  background: #fff;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.layer-bar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.layer-buttons {
  display: flex;
  gap: 6px;
}
.layer-buttons button {
  padding: 5px 8px;
  border: none;
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.2s;
  font-size: .9rem;
}
.layer-buttons button:hover {
  background: #e9eef7;
}
.layer-buttons button.active {
  background: var(--primary);
  color: #fff;
}
#layers {
  display: flex;
  gap: 4px;
  list-style: none;
  max-width: 100%;
  overflow-x: auto;
  padding: 0 4px;
}
#layers li {
  padding: 3px 8px;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: #fff;
  white-space: nowrap;
  cursor: pointer;
  font-size: .85rem;
}
#layers li.selected {
  border-color: var(--primary);
  background: #e9eef7;
}

/* Timeline botones */
.timeline-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.timeline-buttons button {
  padding: 5px 8px;
  border: none;
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.2s;
  font-size: .9rem;
}
.timeline-buttons button:hover {
  background: #e9eef7;
}
.timeline-buttons button.active {
  background: var(--primary);
  color: #fff;
}

/* Miniaturas */
#thumbnails-wrapper {
  overflow-x: auto;
  border-top: 1px solid var(--border);
  padding-top: 4px;
}
#thumbnails {
  display: flex;
  gap: 4px;
  min-height: 64px;
}
#thumbnails img {
  height: 60px;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

#thumbnails img.selected {
  border: 3px solid #007bff;
  border-radius: 6px;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.6);

}
.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 60px;
  border: 2px dashed var(--border);
  border-radius: 6px;
  color: #999;
  font-size: 1.4rem;
  cursor: pointer;
}

/* Sidebar derecho (Lip Sync fijo, oculta/visible) */
.sidebar-lipsync {
  position: fixed;
  top: 60px;
  right: 10px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 200px;
  z-index: 150;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.sidebar-lipsync.hidden {
  transform: translateX(300px);
  pointer-events: none;
  opacity: 0;
}
.sidebar-lipsync h4 {
  margin: 0;
  font-size: 1rem;
  color: #333;
}
.sidebar-lipsync button {
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.2s;
}
.sidebar-lipsync button:hover {
  background: #e9eef7;
}
.sidebar-lipsync button.active {
  background: var(--primary);
  color: #fff;
}

/* Botón flotante toggle */
#toggle-lipsync-panel {
  background: var(--primary);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

/* Responsive para pantallas pequeñas */
@media screen and (max-width: 1024px) {
  .workspace {
    flex-wrap: wrap;
    justify-content: center;
  }
  .sidebar-lipsync {
    order: 3;
    width: 100%;
    max-width: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    border-left: none;
    border-top: 1px solid var(--border);
    box-shadow: none;
    position: static;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: all !important;
  }
  .sidebar-lipsync button {
    flex: 1 1 120px;
    margin: 4px;
  }
}
body {
  display: flex;
  justify-content: center;
  align-items: start;
  background: #fafbfe;
  margin: 0;
  height: 100vh;
  overflow: hidden;
}

#escala-wrapper {
  width: 1280px;
  transform-origin: top center;
  margin: 0 auto;
}

.canvas-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

#canvas-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.thumbnail.selected-thumbnail {
  border: 3px solid #007bff;
  box-shadow: 0 0 6px rgba(0, 123, 255, 0.7);
  border-radius: 6px;
}