:root{
  --c-personas:#ff3b56;
  --c-vehiculos:#00b7ff;
  --c-animales:#4ade30;
  --bg:#000;
  --panel-bg:#000;
  --fg:#fff;
  --dim:#a0a0a0;
  --border:#fff;
  --focus:#ffe100;
}

*{box-sizing:border-box; border-radius:0 !important; box-shadow:none !important;}

html,body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--bg);
  color:var(--fg);
  font-family:ui-monospace, "SF Mono", "Consolas", "Roboto Mono", "Courier New", monospace;
  font-size:14px;
}

*:focus{
  outline:3px solid var(--focus);
  outline-offset:2px;
}
*:focus:not(:focus-visible){
  outline:3px solid var(--focus);
}

#app{
  display:flex;
  width:100vw;
  height:100vh;
  overflow:hidden;
}

/* --- Stage (left column: camera view) --- */

#stage{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  border-right:3px solid var(--border);
}

#canvas-holder{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

#canvas-holder canvas{
  width:100%;
  height:100%;
  object-fit:contain;
}

#panelToggle{
  position:absolute;
  top:16px;
  right:16px;
  z-index:15;
  background:#000;
  border:2px solid var(--border);
  color:var(--fg);
  padding:8px 14px;
  cursor:pointer;
  font:inherit;
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
}

#panelToggle:hover{
  background:var(--fg);
  color:#000;
}

/* --- Start overlay --- */

#startOverlay{
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}

#startOverlay.hidden{display:none;}

#startCard{
  max-width:440px;
  text-align:left;
  padding:32px;
  border:3px solid var(--border);
}

#startCard h1{
  font-size:1.3rem;
  font-weight:700;
  margin:0 0 16px;
  text-transform:uppercase;
  letter-spacing:0.06em;
}

#startCard p{
  color:var(--dim);
  font-size:0.85rem;
  line-height:1.6;
  margin:0 0 20px;
}

#startBtn{
  background:var(--fg);
  color:#000;
  border:2px solid var(--border);
  padding:12px 24px;
  font:inherit;
  font-size:0.9rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  cursor:pointer;
}

#startBtn:hover{
  background:#000;
  color:var(--fg);
}

#startHint{
  margin-top:20px;
  font-size:0.7rem;
  color:var(--dim);
}

/* --- Loading badge --- */

#loadingBadge{
  position:absolute;
  top:16px;
  left:16px;
  z-index:15;
  background:#000;
  border:2px solid var(--border);
  padding:8px 14px;
  font-size:0.75rem;
  color:var(--fg);
  margin:0;
}

#loadingBadge.hidden{display:none;}

/* --- Sidebar (right column: controls) --- */

#sidebar{
  flex:0 0 clamp(200px, 30vw, 380px);
  width:clamp(200px, 30vw, 380px);
  height:100%;
  overflow-y:auto;
  background:#000 !important;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  container-type:inline-size;
  container-name:sidebar;
}

#sidebar *{
  background-color:transparent;
}

#sidebar button,
#sidebar select,
#sidebar input[type="number"],
#sidebar .fileBtn,
#sidebar .knobDial{
  background-color:#000;
}

#sidebar.hidden{
  display:none;
}

@media (max-width: 640px){
  #panelToggle{
    top:10px;
    right:10px;
    padding:6px 10px;
  }
}

/* --- Fieldsets --- */

fieldset{
  border:2px solid var(--border);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.catBox{
  border-left:6px solid var(--accent, var(--border));
}

legend{
  padding:0 6px;
  font-size:0.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.groupLabel{
  margin:4px 0 0;
  font-size:0.65rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--dim);
  border-top:1px solid var(--dim);
  padding-top:8px;
}

.row,
.fieldRow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:0.8rem;
}

.fieldRow label{
  color:var(--dim);
  white-space:nowrap;
}

.switchRow{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.8rem;
  cursor:pointer;
}

.switchRow input{
  width:18px;
  height:18px;
  cursor:pointer;
}

.radioRow{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  font-size:0.8rem;
}

.radioRow label{
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}

/* --- Form controls --- */

button,
select,
input[type="number"],
input[type="file"]::file-selector-button{
  font:inherit;
  background:#000;
  color:var(--fg);
  border:2px solid var(--border);
  padding:6px 10px;
  font-size:0.75rem;
  cursor:pointer;
}

button:hover{
  background:var(--fg);
  color:#000;
}

button:disabled,
select:disabled,
input:disabled{
  color:var(--dim);
  border-color:var(--dim);
  cursor:not-allowed;
}

select,
input[type="number"]{
  cursor:default;
  min-width:0;
  max-width:100%;
}

input[type="number"]{
  width:64px;
}

.bankSelect,
.programSelect{
  flex:1 1 180px;
}

.fileBtn{
  position:relative;
  display:inline-flex;
  align-items:center;
  background:#000;
  border:2px solid var(--border);
  color:var(--fg);
  padding:6px 10px;
  cursor:pointer;
  font-size:0.75rem;
  white-space:nowrap;
  overflow:hidden;
}

.fileBtn:hover{
  background:var(--fg);
  color:#000;
}

.fileBtn input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.status{
  color:var(--dim);
  font-size:0.7rem;
  margin:0;
}

.status.loaded{color:var(--fg);}

input[type="range"]{
  flex:1;
  min-width:80px;
  accent-color:var(--focus);
}

input[type="checkbox"],
input[type="radio"]{
  accent-color:var(--focus);
}

/* --- Knobs (control redondo para pitch/delay/reverb del fondo) --- */

.knobRow{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  gap:12px;
  padding-top:4px;
}

.knob{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:ns-resize;
  touch-action:none;
  user-select:none;
}

.knobDial{
  width:56px;
  height:56px;
  border:2px solid var(--border) !important;
  border-radius:50% !important;
  position:relative;
}

.knobIndicator{
  position:absolute;
  top:4px;
  left:50%;
  width:3px;
  height:22px;
  margin-left:-1.5px;
  background:var(--focus) !important;
  border-radius:2px !important;
  transform-origin:50% 24px;
}

.knobLabel{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--dim);
}

.knobValue{
  font-size:0.7rem;
  color:var(--fg);
  min-height:1em;
}

/* --- Responsive: la estructura de dos columnas se mantiene siempre;
   el panel (ancho fluido vía clamp arriba) reduce tipografía/espaciado
   según SU PROPIO ancho (container query), no el de la ventana entera,
   ya que ocupa ~30% del viewport sea cual sea el tamaño de pantalla.
   Este bloque va al final del archivo a propósito: con la misma
   especificidad que las reglas base, gana la que aparece después en
   la cascada, así que debe quedar tras .knobDial/fieldset/#sidebar. --- */

@container sidebar (max-width: 260px){
  #sidebar{
    padding:10px;
    gap:10px;
    font-size:0.85em;
  }

  fieldset{
    padding:8px;
  }

  .knobDial{
    width:40px;
    height:40px;
  }

  .knobIndicator{
    height:16px;
    transform-origin:50% 18px;
  }
}