/* ================= Base & Theme ================= */
:root{
  --bg:#0c0b10;
  --panel:#15141a;
  --accent:#ff6f3c;
  --muted:#cfcfcf;

  /* Tamaños compactos para el Drum */
  --step-size: 34px;   /* antes 50px */
  --step-font: 12px;   /* antes 16px */
}

*{ box-sizing:border-box }

body{
  margin:0;
  background:linear-gradient(#07060a,#0e0d11);
  color:var(--muted);
  font-family:Inter,system-ui,Arial;
  padding:18px;
}

.wrap{ max-width:1200px; margin:0 auto }

header{ display:flex; align-items:center; justify-content:space-between; gap:12px }
h1{ margin:0; color:var(--accent); font-size:18px }

/* ================= Controls header ================= */
.controls{ display:flex; gap:10px; align-items:center; margin:12px 0; flex-wrap:wrap }
.controls-block{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.small{ font-size:12px; color:#a9a9a9 }

/* ================= Panels ================= */
.panel{
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  border-radius:10px;
  padding:12px;
  border:1px solid rgba(255,255,255,0.03);
}
.panel-head{ display:flex; justify-content:space-between; align-items:center }

.grid{ display:flex; flex-direction:column; gap:20px; margin-top:14px }

/* ================= Generic form ================= */
select,input{
  background:#0f0e11;
  color:var(--muted);
  border:1px solid rgba(255,255,255,0.03);
  padding:6px;
  border-radius:6px;
}
label{ font-size:13px; color:#bfbfbf }
.row{ display:flex; gap:12px; align-items:center }
.row.compact{ gap:10px }

/* ================= Step buttons (drum/synth) ================= */
.step{
  width:var(--step-size);
  height:var(--step-size);
  border-radius:6px;
  border:0;
  background:#222;
  color:#eee;
  cursor:pointer;
  display:inline-grid;
  place-items:center;
  font-size:var(--step-font);
}
.step.active{
  background:linear-gradient(180deg,#28a745,#34d058);
  color:#0f200d;
  box-shadow:0 6px 18px rgba(40,167,69,.3);
}
.step.playing{ outline:2px solid #ffe98a }

/* ================= Drum Machine ================= */
/* Fila en 3 columnas: etiqueta | controles | pasos */
.drum-row{
  display:grid;
  grid-template-columns: 120px minmax(160px,220px) 1fr;
  gap:10px;
  align-items:center;
}

/* Etiqueta */
.drum-label{
  font-size:14px;
  color:var(--accent);
  text-align:right;
  user-select:none;
  padding-right:6px;
}

/* Controles por canal (Vol + Mute) en una línea compacta */
.drum-chan-ctrls{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items:center;
  gap:8px;
  white-space:nowrap; /* Evita saltos de línea */
}

/* Slider de volumen corto */
.drum-chan-ctrls input[type="range"]{
  width:90px;
}

/* Botón mute compacto */
.mute-btn{
  background:#3a333d;
  color:#fff;
  padding:4px 8px;
  border-radius:8px;
  border:0;
  cursor:pointer;
  font-size:12px;
  line-height:1;
}
.mute-btn.active{ background:#7a2a2a }

/* Tira de pasos: compacta y con scroll si no cabe */
.drum-steps{
  display:flex;
  gap:4px;              /* antes 6px */
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:4px;   /* deja espacio para el scrollbar */
}

/* ================= Synth steps ================= */
.synth-steps{
  display:flex;
  flex-direction:row;
  gap:8px;
  flex-wrap:wrap;
  padding:6px;
}
.synth-step{ display:flex; flex-direction:column; align-items:center; gap:6px }
.note-select{ width:76px; font-size:12px }
.note-select.current{
  outline:2px solid #ffe98a;
  box-shadow:0 0 0 2px rgba(255,233,138,0.15) inset;
  border-radius:6px;
}
.clear-note-btn{
  background:var(--accent);
  color:#200;
  border:none;
  padding:3px 7px;
  border-radius:6px;
  cursor:pointer;
  font-size:11px;
}
.transpose-input{
  width:54px;
  text-align:center;
  font-size:12px;
  padding:4px 6px;
}

.param-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
.param-row.compact{ gap:10px; margin-top:8px }
.param{ display:flex; flex-direction:column; font-size:12px; color:#cfcfcf }
.param input[type=range]{ width:120px }

/* ================= Sintes lado a lado (compactos) ================= */
.synth{ padding:10px }
.synths-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.synth-col{ display:flex; flex-direction:column; gap:12px }

/* Encoger textos/controles dentro de los sintes */
.synth .row label,
.synth .param label{ font-size:12px }
.synth select,
.synth input[type=number],
.synth input[type=range]{ font-size:12px }

/* ================= Responsivo ================= */
@media (max-width: 1000px){
  /* En pantallas estrechas, coloca los pasos debajo de los controles */
  .drum-row{
    grid-template-columns: 120px 1fr;
    grid-template-areas:
      "label controls"
      "steps steps";
  }
  .drum-label{ grid-area: label }
  .drum-chan-ctrls{ grid-area: controls }
  .drum-steps{ grid-area: steps }
}

@media (max-width: 900px){
  .synths-row{ grid-template-columns:1fr }
}

/* ================= Buttons ================= */
button.primary{
  background:var(--accent);
  color:#200;
  padding:8px 12px;
  border-radius:8px;
  border:0;
  cursor:pointer;
  font-weight:700;
}
button.ghost{
  background:#2a262a;
  color:#fff;
  padding:8px 12px;
  border-radius:8px;
  border:0;
  cursor:pointer;
}

/* ================= Footer ================= */
footer{ margin-top:14px; color:#8f8f8f; font-size:13px }

/* Paso activo en percusión */
.perc-step.playing {
  outline: 2px solid #ff8ad6;
  box-shadow: 0 0 6px rgba(255, 138, 214, 0.6);
}

/* Paso activo en percusión */
.perc-step.playing {
  outline: 2px solid #ff8ad6;
  box-shadow: 0 0 6px rgba(255, 138, 214, 0.6);
}

/* Paso seleccionado (activo) en percusión */
.perc-step.active {
  background: linear-gradient(180deg, #ff8ad6, #ff6bbd);
  color: #200;
  box-shadow: 0 6px 18px rgba(255, 138, 214, 0.3);
}

.step.playing {
  background: yellow;
  color: black;
}