/* PALETA & RESET */
:root{
  --bg:          #f0f2f5;
  --surface:     #ffffff;
  --primary:     #0074ff;
  --primary-dark:#0059c7;
  --border:      #d0d4da;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,Arial,Helvetica,sans-serif;}
body{background:var(--bg);color:#222;height:100vh;display:flex;justify-content:center;align-items:center;}

/* CONTENEDOR GENERAL */
.container{width:95%;max-width:1280px;display:flex;flex-direction:column;gap:16px;}

/* HEADER */
header{text-align:center;}
h1{font-size:2.2rem;color:var(--primary);}

/* WORKSPACE */
.workspace{display:flex;gap:16px;justify-content:center;align-items:stretch;}

/* SIDEBAR */
.sidebar{display:flex;flex-direction:column;gap:10px}
.sidebar button{
  padding:10px 14px;border:none;border-radius:8px;background:var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,.08);cursor:pointer;transition:background .2s;
}
.sidebar button:hover{background:#e9eef7;}
.sidebar button.active{background:var(--primary);color:#fff;}

/* CANVAS */
.canvas-area{display:flex;flex-direction:column;align-items:center;gap:12px;}
#canvas-container{
  border:2px solid var(--border);border-radius:12px;overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
canvas{display:block;background:#000;}

/* CONTROLES */
.controls{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;
  width:100%;
}
.controls label{display:flex;flex-direction:column;font-size:.8rem;color:#333;gap:4px;}
.controls input[type=range]{width:100%}
.controls button{
  padding:10px;border:none;border-radius:8px;background:var(--primary);
  color:#fff;cursor:pointer;transition:background .2s;
}
.controls button:hover{background:var(--primary-dark);}
.controls button.active{background:var(--primary-dark);}

/* TIMELINE */
.timeline{display:flex;flex-direction:column;gap:10px;align-items:center;}
.timeline-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.timeline-buttons button{
  padding:8px 12px;border:none;border-radius:8px;background:var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,.08);cursor:pointer;transition:background .2s;
}
.timeline-buttons button:hover{background:#e9eef7;}
.timeline-buttons button.active{background:var(--primary);color:#fff;}

#thumbnails-wrapper{
  width:100%;border:1px solid var(--border);border-radius:8px;background:var(--surface);
  overflow-x:auto;white-space:nowrap;padding:6px;
}
#thumbnails{display:inline-flex;gap:6px;align-items:center;}
#thumbnails img,#thumbnails .slot{
  width:64px;height:64px;border:3px solid var(--border);border-radius:6px;
  cursor:pointer;position:relative;background:#fff;display:flex;justify-content:center;align-items:center;
  font-size:32px;color:#aaa;user-select:none;
}
#thumbnails img.selected{border-color:var(--primary);}
#thumbnails img::before,#thumbnails .slot::before{
  content:attr(data-index);position:absolute;top:0;left:0;font-size:11px;
  background:rgba(0,0,0,.6);color:#fff;padding:0 4px;border-bottom-right-radius:6px;
}
/* Blink rec */
#record-screen.recording{background:#ff4d4d;color:#fff;}
#record-screen.recording:hover{background:#ff4d4d;}