:root {
  /* El Estudio: base análoga cálida (ver docs/DESIGN-BRIEF.md) */
  --bg: #171210;
  --bg-panel: #1f1813;
  --bg-card: #271e16;
  --bg-hover: #35291d;
  --border: #3e3022;
  --text: #f2e9da;
  --text-dim: #a8977f;
  --accent: #e8a558;
  --accent-soft: rgba(232, 165, 88, 0.16);
  --ok: #4ade80;
  --warn: #fbbf24;
  --danger: #f87171;
  --radius: 10px;
  /* luz de lámpara: línea de brillo superior para superficies elevadas */
  --top-light: inset 0 1px 0 rgba(255, 234, 200, 0.07);
  /* tipografía */
  --font-display: 'Righteous', 'Avenir Next', -apple-system, sans-serif;
  --font-body: -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* escala tipográfica: las reglas nuevas usan esto; las viejas migran gradualmente */
  --fs-0: 0.6rem;
  --fs-1: 0.7rem;
  --fs-2: 0.8rem;
  --fs-3: 0.95rem;
  --fs-4: 1.15rem;
  --fs-5: 1.5rem;
  /* radios y espaciado */
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 14px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  font-size: 15px;
}

* { box-sizing: border-box; }

/* que [hidden] gane siempre, incluso sobre display:flex de otras reglas */
[hidden] { display: none !important; }

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

/* Rótulos de estudio: títulos con carácter de letra de ampli */
h1, h2, h3, .side-card h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; }

/* ---- Sidebar ---- */

#sidebar {
  width: 330px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* cards del panel lateral */
.side-card { padding: 12px 14px; margin-bottom: 4px; }
.side-card h3, .side-card h4 { margin: 0 0 10px; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

#vizNow {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  text-align: center;
}
#vizNowChord strong { font-size: 1.25rem; }
#vizNowNotes { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.viz-note {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.68rem;
  color: var(--text-dim);
}
.viz-note strong { color: var(--text); font-size: 0.8rem; margin-right: 3px; }

#mandalaBig svg { max-width: 100%; height: auto; }
.m-note { cursor: pointer; }
.m-note:hover text { fill: var(--accent); font-weight: 700; }
.gtr-dot { cursor: pointer; }
.cmp-note { cursor: pointer; }
.cmp-note:hover { color: var(--accent); }

#suggestionsBlock .suggestion-chip { width: 100%; text-align: left; position: relative; }
#suggestionsBlock .s-reason { max-width: none; }
.s-cmp {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 1px 6px;
}
.s-cmp:hover { color: var(--ok); border-color: var(--ok); }

.album-name {
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 700;
  padding: 4px 2px;
  width: 100%;
}
.album-name:focus { outline: none; border-bottom-color: var(--accent); }

.sidebar-hint {
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  margin: 8px 2px 0;
}

#trackList { display: flex; flex-direction: column; gap: 4px; }

.track-item {
  padding: 9px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.track-item:hover { background: var(--bg-hover); color: var(--text); }
.track-item.active { background: var(--accent-soft); color: var(--text); }
.track-item .meta { font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; }

/* ---- Main ---- */

#main { flex: 1; padding: 26px 32px; max-width: 1000px; }

#emptyState { margin-top: 12vh; text-align: center; color: var(--text-dim); }
#emptyState h2 { color: var(--text); }

/* vive dentro de #albumBox en el sidebar (330px): siempre visible aunque
   el acordeón de Mi álbum esté plegado, así que va compacto */
#trackHeader {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.track-name {
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 3px 2px;
  min-width: 0;
  width: 100%;
}
.track-name:focus { outline: none; border-bottom-color: var(--accent); }

.track-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.track-controls label { display: flex; flex-direction: column; gap: 2px; font-size: 0.66rem; color: var(--text-dim); }
.track-controls select, .track-controls input[type='number'] { font-size: 0.78rem; padding: 4px 6px; }
.track-controls input[type='number'] { width: 52px; }
#deleteTrack { margin-left: auto; align-self: flex-end; }

select, input[type='number'] {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 0.88rem;
}
input[type='number'] { width: 70px; }

/* ---- Cards y botones ---- */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: var(--top-light);
}

.btn {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); font-weight: 600; }
.btn-ghost { background: transparent; border-style: dashed; color: var(--text-dim); }
.btn-danger { background: transparent; border-color: transparent; }
.btn-danger:hover { border-color: var(--danger); }
.btn:disabled { opacity: 0.45; cursor: default; }

.gen-row { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.gen-row label { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: var(--text-dim); }
.gen-row .grow { flex: 1; min-width: 220px; }
.gen-row .grow select { width: 100%; }
.audacity { flex-direction: row !important; align-items: center; gap: 8px !important; }
.audacity input { accent-color: var(--accent); }

.fine { color: var(--text-dim); font-size: 0.78rem; font-weight: 400; }

/* ---- Secciones ---- */

#sectionsBar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.section-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.85rem;
  color: var(--text-dim);
  cursor: pointer;
}
.section-chip:hover { border-color: var(--accent); }
.section-chip.active { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
.section-chip.add { border-style: dashed; background: transparent; }
.chip-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0 2px;
}
.chip-btn:hover { color: var(--text); }

/* ---- Herramientas dentro de Estructura del tema ---- */

.arr-tools {
  border-top: 1px solid var(--border);
  margin-top: 14px;
  padding-top: 14px;
}
.gen-sep, .toolbar-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }

/* vista de arreglo horizontal (zoom out estilo Ableton Arrangement) */
#arrangementStrip { margin: 4px 0 12px; }
.arr-head { margin-bottom: 6px; }
.arr-track { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.arr-block {
  flex-shrink: 0;
  min-height: 42px;
  border-radius: 6px;
  border: 1px solid var(--arr-color);
  background: color-mix(in srgb, var(--arr-color) 16%, transparent);
  padding: 5px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: background 0.1s;
}
.arr-block:hover { background: color-mix(in srgb, var(--arr-color) 28%, transparent); }
.arr-block.active { box-shadow: inset 0 0 0 2px var(--arr-color); }
.arr-block.playing { background: color-mix(in srgb, var(--arr-color) 45%, transparent); }
.arr-block.dragging { opacity: 0.4; }
.arr-block.drop-target { outline: 2px dashed var(--accent); outline-offset: 1px; }
.arr-name { font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.arr-meta { font-size: 0.62rem; color: var(--text-dim); white-space: nowrap; }
#btnUndo, #btnRedo { font-size: 0.95rem; padding: 4px 9px; }
#btnUndo:disabled, #btnRedo:disabled { opacity: 0.35; cursor: default; }

/* barra de transporte en grupos (Componer · Transporte · Exportar), estilo DAW */
.transport-row { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.tool-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  position: relative;
  background: rgba(255, 255, 255, 0.015);
}
.tool-group-lbl {
  position: absolute;
  top: -8px;
  left: 10px;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  background: var(--bg-card);
  padding: 0 5px;
}
.transport-main { background: rgba(232, 165, 88, 0.05); }
.groove-lbl { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--text-dim); }
.groove-lbl input[type="range"] { width: 66px; accent-color: var(--accent); }
.groove-val { min-width: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.tempo-group #tempoSlider { width: 90px; accent-color: var(--accent); }
.t-play { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.t-play:hover { background: var(--accent); }
.t-rec { color: var(--danger); border-color: rgba(248, 113, 113, 0.5); }
.transport-row #playStatus { align-self: center; }

#suggestionsCtx { color: var(--accent); }

/* ---- Toolbar de la progresión ---- */

#progToolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* ---- Visual de la card: mandala o diagrama de guitarra ---- */

.chord-visual { display: flex; flex-direction: column; justify-content: center; min-height: 68px; align-items: center; gap: 2px; }

.gtr-svg { display: block; }
.gtr-fret { fill: var(--text-dim); font-size: 9px; }
.gtr-mute { fill: var(--text-dim); font-size: 9px; }
.gtr-dot-label { font-size: 7px; font-weight: 700; pointer-events: none; }
.gtr-dot-label.on-accent { fill: #fff; }
.gtr-dot-label.on-light { fill: var(--bg); }
.gtr-dot-label.open { fill: var(--text-dim); }
.gtr-title { font-size: 0.8rem; font-weight: 700; margin-bottom: 4px; }
.gtr-notes { display: flex; justify-content: space-between; font-size: 0.62rem; color: var(--text-dim); }
.gtr-intervals { color: var(--accent); }
.gtr-cell { text-align: center; }

/* ---- Visualizador con pestañas ---- */

#vizCard h3 {
  margin: 0 0 12px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.viz-tabs { display: flex; gap: 4px; }
.cmp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cmp-head .compare-close { margin-left: auto; }

/* ---- Escalas armonizadas ---- */

#harmonizedCard h3 { margin: 0 0 10px; font-size: 0.95rem; }
.hz-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
#scaleChips { display: flex; flex-wrap: wrap; gap: 6px; }

.scale-chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 20px;
  font-size: 0.72rem;
  padding: 3px 10px;
  cursor: pointer;
}
.scale-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.sevenths-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-left: auto;
  cursor: pointer;
}
.sevenths-toggle input { accent-color: var(--accent); }

.hz-scale { margin-bottom: 14px; overflow-x: auto; }
.hz-name { font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }

.hz-table { border-collapse: collapse; width: 100%; }
.hz-table th {
  text-align: left;
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 400;
  padding: 4px 10px 4px 0;
  white-space: nowrap;
}
.hz-table td {
  text-align: center;
  padding: 3px 4px;
  font-size: 0.8rem;
  color: var(--text-dim);
  border: 1px solid var(--border);
  min-width: 58px;
}
.hz-chord {
  background: var(--bg-hover);
  border: 1px solid transparent;
  color: var(--text);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
.hz-chord:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ---- Comparación ---- */

#compareCard h3 { margin: 0 0 10px; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.compare-close { margin-left: auto; padding: 2px 9px; font-size: 0.75rem; }

.chord-card.compare-selected { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }

.cmp-table { border-collapse: collapse; margin: 0 auto; }
.cmp-table { width: 100%; }
.cmp-table th, .cmp-table td {
  border: 1px solid var(--border);
  padding: 5px 8px;
  text-align: center;
  font-size: 0.8rem;
}
.cmp-table th { color: var(--text-dim); font-size: 0.75rem; }
.cmp-note { font-weight: 700; font-size: 1rem !important; }
.cmp-ext { color: var(--text-dim); }
.cmp-common td { background: rgba(74, 222, 128, 0.08); }
.cmp-common .cmp-note { color: var(--ok); }

/* ---- Progresión ---- */

#progression, .progression {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 12px;
  min-width: 0;
}

.chord-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 10px 12px;
  width: 158px;
  min-width: 158px;
  max-width: 158px;
  min-height: 252px;
  text-align: center;
  position: relative;
  transition: transform 0.1s, border-color 0.1s;
  display: flex;
  flex-direction: column;
}
.chord-card > .ctl-row:first-of-type { margin-top: auto; } /* controles anclados abajo */

.ctl-row {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.chord-card.playing { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 4px 18px rgba(232, 165, 88, 0.35); }

.chord-roman { color: var(--text-dim); font-size: 0.75rem; margin-bottom: 2px; }
.chord-label { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; }
.chord-feel { color: var(--text-dim); font-size: 0.68rem; min-height: 1em; }

.chord-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 6px; }
.badge {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 20px;
  font-size: 0.62rem;
  padding: 2px 8px;
  white-space: nowrap;
}

.mandala-mini { display: block; margin: 2px auto 4px; }

.tension-row { display: flex; gap: 4px; justify-content: center; margin-top: 8px; }
.dur-btn {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  font-size: 0.66rem;
  padding: 2px 7px;
  cursor: pointer;
  font-weight: 600;
}
.tension-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  font-size: 0.66rem;
  padding: 2px 6px;
  cursor: pointer;
}
.oct-row { align-items: center; }
.oct-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  font-size: 0.6rem;
  padding: 2px 6px;
  cursor: pointer;
  font-weight: 600;
}
.oct-btn:hover { border-color: var(--accent); color: var(--accent); }
.oct-val { font-size: 0.62rem; color: var(--text-dim); min-width: 16px; }
.lane-expand { font-size: 0.7rem; }
.tension-btn.on { border-color: var(--ok); color: var(--ok); }
.tension-btn.friction { border-color: var(--warn); color: var(--warn); }

.rhythm-btn {
  background: transparent;
  border: 1px solid var(--warn);
  color: var(--warn);
  border-radius: 6px;
  font-size: 0.72rem;
  padding: 2px 7px;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
}

.voicing-sel {
  margin-top: 6px;
  width: 100%;
  font-size: 0.68rem;
  padding: 3px 6px;
  color: var(--text-dim);
}

.io-row { display: flex; gap: 6px; margin-top: 8px; }
.io-row .btn { flex: 1; font-size: 0.78rem; padding: 6px 8px; }

/* botones de acción de la ficha: tenues por defecto (descubribles sin hover,
   clave en desktop donde no hay "sticky hover" como en touch), full al hover */
.chord-remove {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.75rem;
  opacity: 0.4;
}
.chord-card:hover .chord-remove { opacity: 1; }

.chord-compare {
  position: absolute;
  top: 4px;
  right: 24px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.75rem;
  opacity: 0.4;
}
.chord-card:hover .chord-compare { opacity: 1; }
.chord-compare:hover { color: var(--ok); }
.chord-card.compare-selected .chord-compare { opacity: 1; color: var(--ok); }

.chord-gtr {
  position: absolute;
  top: 2px;
  right: 44px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.72rem;
  opacity: 0.4;
  filter: grayscale(1);
}
.chord-card:hover .chord-gtr { opacity: 1; }
.chord-gtr.on { opacity: 1; filter: none; }

.chord-replace {
  position: absolute;
  top: 4px;
  right: 64px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.85rem;
  opacity: 0.5;
}
.chord-card:hover .chord-replace { opacity: 1; }
.chord-replace:hover { color: var(--warn); }
.chord-replace.on { opacity: 1; color: var(--warn); }
/* ficha armada para reemplazo: marco ámbar INTERNO (box-shadow inset) + tinte,
   nunca lo clipea un ancestro con overflow (a diferencia de outline). Distinto
   del violeta de "sonando" y del verde de "comparar". */
.chord-card.replace-armed {
  box-shadow: inset 0 0 0 2px var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, var(--bg-card));
}

.chord-move-row {
  position: absolute;
  top: 4px;
  left: 6px;
  display: flex;
  gap: 2px;
  opacity: 0;
}
.chord-card:hover .chord-move-row { opacity: 1; }
.chord-move {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 3px;
}
.chord-move:hover { color: var(--accent); }

.chord-card { cursor: grab; }
.chord-card.dragging { opacity: 0.4; cursor: grabbing; }
.chord-card.drop-target { border-color: var(--accent); border-style: dashed; }

.glue-connector {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 6px;
  gap: 2px;
  min-width: 46px;
}
.glue-dots { display: flex; gap: 2px; }
.glue-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.glue-dot.on { background: var(--ok); }
.glue-vld { font-size: 0.6rem; color: var(--text-dim); }

/* ---- Mandala ---- */

#mandalaCard h3 { margin: 0 0 10px; font-size: 0.95rem; }
#mandalaBig { display: flex; justify-content: center; }
#mandalaLegend { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }

.legend-chip {
  border: 1px solid var(--chip-color);
  color: var(--chip-color);
  border-radius: 20px;
  font-size: 0.72rem;
  padding: 3px 10px;
  cursor: default;
  opacity: 0.75;
}
.legend-chip.active { opacity: 1; background: color-mix(in srgb, var(--chip-color) 18%, transparent); }

/* ---- Estructura del tema (lanes) ---- */

#arrangementCard h3 { margin: 0 0 10px; font-size: 0.95rem; }
#lanes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }

.lane {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: default;
  min-width: 0; /* deja que el filmstrip de acordes se contenga y scrollee adentro, en vez de forzar el ancho de toda la página (bug clásico de flex items) */
  overflow-x: hidden;
}
.lane.active { border-color: var(--accent); background: rgba(232, 165, 88, 0.05); }
.lane.playing { border-color: var(--ok); }

.lane-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.lane-name {
  background: none;
  border: none;
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 2px 4px;
}
.lane-name:hover { color: var(--accent); }
.lane.active .lane-name { color: var(--accent); }
.lane-head select { font-size: 0.72rem; padding: 3px 6px; }
.lane-total { font-size: 0.7rem; color: var(--text-dim); }
.lane-total.over { color: var(--warn); }
.lane-btn { padding: 3px 9px; font-size: 0.7rem; margin-left: auto; }
.lane-ruler { display: flex; margin-bottom: 2px; }
.lane-blocks { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; min-height: 26px; }

.lane-bridge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 2px 10px;
}
.bridge-chip {
  background: transparent;
  border: 1px solid var(--ok);
  color: var(--ok);
  border-radius: 14px;
  font-size: 0.72rem;
  padding: 2px 9px;
  cursor: pointer;
}
.bridge-chip:hover { background: rgba(74, 222, 128, 0.12); }

.bars-target {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bars-target input { width: 50px; font-size: 0.72rem; padding: 3px 5px; }
.tl-tick.over { color: var(--warn); border-left-color: var(--warn); }
.tl-rest {
  flex-shrink: 0;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.68rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-tick {
  flex-shrink: 0;
  font-size: 0.62rem;
  color: var(--text-dim);
  border-left: 1px solid var(--border);
  padding: 0 0 2px 4px;
}
.tl-block {
  flex-shrink: 0;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
  overflow: hidden;
  transition: transform 0.1s;
}
.tl-block:hover { transform: translateY(-1px); }
/* acorde sonando: ámbar sólido (no violeta, que ya es el color base del bloque
   y del borde — con poco contraste no se distinguía cuál está sonando) */
.tl-block.playing {
  background: var(--warn);
  border-color: var(--warn);
  transform: scale(1.06);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.35);
  z-index: 1;
}
.tl-block.playing .tl-chord, .tl-block.playing .tl-dur { color: #1a1300; }
.tl-chord { font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.tl-dur { font-size: 0.62rem; color: var(--text-dim); white-space: nowrap; }

/* ---- Toggles de reproducción ---- */

.btn.toggle.on { border-color: var(--ok); color: var(--ok); background: rgba(74, 222, 128, 0.1); }
#playStatus { align-self: center; }
.section-chip.playing { border-color: var(--ok); color: var(--ok); }

/* ---- Rueda de quintas ---- */

#wheelCard h3 { margin: 0 0 10px; font-size: 0.95rem; }
.wheel-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
#wheelHint { flex-basis: 100%; }
.wheel-controls label { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-dim); }
#pivotList { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }

.w-wedge.cur { fill: rgba(232, 165, 88, 0.14); }
.w-wedge.tgt { fill: rgba(74, 222, 128, 0.1); }
.w-degree { fill: var(--text-dim); font-size: 12px; font-weight: 600; }

.w-node { cursor: pointer; }
.w-node circle { fill: var(--bg-card); stroke-width: 1.6; }
.w-node text { font-size: 12px; pointer-events: none; }
.w-major circle { stroke: #ec6a9c; }   /* rosa Callipari: mayores */
.w-major text { fill: #ec6a9c; }
.w-minor circle { stroke: #56b6f2; }   /* celeste Callipari: menores */
.w-minor text { fill: #56b6f2; }
.w-node.dim { opacity: 0.38; }
.w-node:hover { opacity: 1; }
.w-node:hover circle { stroke-width: 2.6; }
.w-node.pivot { opacity: 1; }
.w-node.pivot circle { stroke: var(--ok); stroke-width: 2.6; fill: rgba(74, 222, 128, 0.12); }
.w-node.pivot text { fill: var(--ok); font-weight: 700; }
.w-node.inprog text { font-weight: 700; }
.w-node.inprog circle { stroke-width: 3; }

/* acorde sonando ahora mismo (sincronizado con la reproducción) */
.w-node.sounding circle, .c-node.sounding circle {
  stroke: #fff;
  stroke-width: 3.4;
  filter: drop-shadow(0 0 6px rgba(232, 165, 88, 0.9));
}
.w-node.sounding text, .c-node.sounding text { fill: #fff; font-weight: 700; }
.w-node.sounding, .c-node.sounding { opacity: 1 !important; }

.lane-play.on { border-color: var(--ok); color: var(--ok); background: rgba(74, 222, 128, 0.1); }

.wheel-mode { display: flex; gap: 4px; }
.btn.small { padding: 4px 12px; font-size: 0.75rem; }
.btn.small.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
#wheelHint { align-self: center; }

/* Constelación (Callipari 08-01-B): rosa mayores, celeste menores, violeta dim */
.cn-branch { stroke: var(--border); stroke-width: 1; }
.c-node { cursor: pointer; }
.c-node circle { fill: var(--bg-card); stroke-width: 1.4; }
.c-node text { font-size: 10.5px; pointer-events: none; }
.c-node.root circle { stroke-width: 2.4; }
.c-node.root text { font-weight: 700; font-size: 11.5px; }
.cn-major circle { stroke: #ec6a9c; }
.cn-major text { fill: #ec6a9c; }
.cn-minor circle { stroke: #56b6f2; }
.cn-minor text { fill: #56b6f2; }
.cn-dim circle { stroke: #a78bfa; }
.cn-dim text { fill: #a78bfa; }
.cn-aug circle { stroke: #fbbf24; }
.cn-aug text { fill: #fbbf24; }
.c-node:hover circle { stroke-width: 2.6; }
.c-node.sel circle { stroke: #fff; stroke-width: 3; }
.c-node.sel text { fill: #fff; font-weight: 700; }
.c-node.glue2 circle { stroke: var(--ok); fill: rgba(74, 222, 128, 0.12); }
.c-node.glue2 text { fill: var(--ok); font-weight: 700; }
.c-node.glue1 { opacity: 0.55; }
.c-node.glue0 { opacity: 0.15; }

.cn-path { stroke: var(--accent); stroke-width: 1.8; fill: none; opacity: 0.85; pointer-events: none; }
.cn-step { pointer-events: none; }
.cn-step circle { fill: var(--accent); }
.cn-step text { fill: #fff; font-size: 9px; font-weight: 700; }

/* ---- Sugerencias ---- */

#suggestionsCard h3, #savedSection h3 { margin: 0 0 10px; font-size: 0.95rem; }
#suggestionChips { display: flex; flex-wrap: wrap; gap: 8px; }

.suggestion-chip {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
}
.suggestion-chip:hover { border-color: var(--accent); }
.suggestion-chip .s-label { font-weight: 700; font-size: 1.05rem; }
.suggestion-chip .s-reason { display: block; color: var(--text-dim); font-size: 0.66rem; max-width: 150px; }
.suggestion-chip .s-glue { display: block; color: var(--ok); font-size: 0.62rem; margin-top: 2px; }

/* ---- Guardadas ---- */

.saved-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 8px;
}
.saved-item .s-chords { font-weight: 600; }
.saved-item .s-date { color: var(--text-dim); font-size: 0.7rem; }
.saved-actions { display: flex; gap: 6px; }

/* ---- Panel del diapasón (todas las posiciones) ---- */

#fretboard {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 10px 0;
  min-width: 0;
  overflow: hidden;
}
.fb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.fb-head .btn { margin-left: auto; padding: 2px 9px; }
.fb-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.fb-cell {
  flex-shrink: 0;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px 2px;
  cursor: pointer;
}
.fb-cell:hover { border-color: var(--accent); }

.gtr-all {
  display: block;
  margin: 2px auto 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.62rem;
  padding: 1px 7px;
}
.gtr-all:hover { color: var(--accent); border-color: var(--accent); }

/* ---- Piano: teclado por acorde y piano roll ---- */

.pno-svg { display: block; margin: 0 auto; }
.pno-key { fill: #dfe3ee; stroke: var(--bg); stroke-width: 0.8; cursor: pointer; }
.pno-key.black { fill: #463729; }
.pno-key.on { fill: var(--accent); }
.pno-key.black.on { fill: #9d8ffb; }
.pno-key:hover { opacity: 0.85; }

#pianoRoll {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 10px 0;
  min-width: 0;
  overflow: hidden;
}
.roll-scroll { overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.roll-canvas-wrap {
  position: relative;
  min-width: 100%;
}
.roll-canvas-wrap.has-inspector {
  padding-top: 320px;
}
.roll-svg { display: block; } /* touch-action normal acá: permite deslizar con el dedo en zonas vacías */
/* solo se bloquea el gesto nativo (pan/scroll) sobre lo que se arrastra con
   pointermove, para que no compita con nuestro drag; el resto de la grilla
   queda libre para el scroll horizontal táctil */
.roll-note, .roll-note-h, .roll-vel, .roll-melody-note { touch-action: none; }
.roll-melody-note { fill: #4f8fce; stroke: rgba(201, 232, 255, 0.9); stroke-width: 0.8; cursor: pointer; }
.roll-melody-note:hover { fill: #6ca8e2; stroke: #fff; stroke-width: 1.1; }
.roll-melody-note.sel { fill: #8fc3f0; stroke: #fff; stroke-width: 1.5; }
.roll-scale-row { fill: rgba(91, 209, 205, 0.06); pointer-events: none; }
.roll-track-melody .roll-chordband,
.roll-track-melody .roll-note,
.roll-track-melody .roll-note-h,
.roll-track-melody .roll-vel { display: none; }
.roll-track-chords .roll-melody-note { display: none; }
.roll-track-tabs { display: inline-flex; gap: 3px; }
.roll-track-tabs .btn { min-height: 25px; padding: 3px 6px; font-size: 0.66rem; }
.roll-key { fill: var(--text-dim); font-size: 8px; }
.roll-note { cursor: grab; }
.roll-note:hover { fill-opacity: 1; stroke: #fff; stroke-width: 0.8; }
.roll-note.sel { stroke: #fff; stroke-width: 1.3; }
.roll-note-h { cursor: ew-resize; }
/* teclado vertical a la izquierda del roll: referencia de altura de cada acorde */
.roll-kb { fill: #dfe3ee; stroke: var(--bg); stroke-width: 0.6; cursor: pointer; }
.roll-kb.black { fill: #463729; }
.roll-kb.scale { fill: #68c9c2; }
.roll-kb.black.scale { fill: #327c7a; }
.roll-kb:hover { fill: var(--accent); }
.roll-c { fill: var(--text-dim); font-size: 8px; pointer-events: none; }
/* barra de transporte propia del roll (estilo editor de clip de un DAW) */
.roll-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.roll-bar-title { font-weight: 600; font-size: 0.85rem; }
.roll-bar-lbl { font-size: 0.72rem; color: var(--text-dim); display: flex; align-items: center; gap: 4px; }
.roll-bar-lbl select { font-size: 0.72rem; }
.roll-bar-sep { width: 1px; height: 20px; background: var(--border); }
.roll-bar-hint { flex: 1; min-width: 120px; opacity: 0.75; }
/* banda de acordes arriba (click = seleccionar acorde entero) */
.roll-chordband { cursor: pointer; }
.roll-chordband:hover .roll-clip-bg { fill-opacity: 0.45; }
.roll-chordband.sel .roll-clip-bg {
  stroke: var(--accent);
  stroke-width: 1.2;
  fill-opacity: 0.58;
}
.roll-cname {
  fill: var(--text);
  font-size: 10px;
  font-weight: 760;
  pointer-events: none;
}
.roll-cmeta {
  fill: rgba(242, 244, 241, 0.72);
  font-size: 7.2px;
  font-weight: 620;
  pointer-events: none;
}
.roll-clip-open {
  cursor: pointer;
}
.roll-clip-open rect {
  fill: rgba(14, 10, 7, 0.5);
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 0.7;
}
.roll-clip-open text {
  fill: rgba(242, 244, 241, 0.82);
  font-size: 8px;
  font-weight: 800;
  pointer-events: none;
}
.roll-clip-open:hover rect {
  fill: rgba(100, 210, 200, 0.2);
  stroke: rgba(100, 210, 200, 0.7);
}
.roll-chordband.sel .roll-clip-open rect {
  fill: rgba(100, 210, 200, 0.28);
  stroke: rgba(100, 210, 200, 0.8);
}
.roll-chord-popover {
  position: absolute;
  z-index: 5;
  border: 1px solid color-mix(in srgb, var(--pop-color) 58%, rgba(255,255,255,0.1));
  border-radius: 8px;
  background: rgba(38, 30, 23, 0.96);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32), inset 3px 0 0 var(--pop-color);
  padding: 9px;
  color: var(--text);
  backdrop-filter: blur(10px);
}
.roll-chord-popover::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -10px;
  width: 2px;
  height: 10px;
  background: var(--pop-color);
  box-shadow: 0 0 12px var(--pop-color);
}
.roll-pop-close {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
  cursor: pointer;
}
.roll-pop-close:hover {
  color: var(--text);
  background: rgba(255,255,255,0.12);
}
.roll-pop-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 7px;
  padding-right: 20px;
}
.roll-pop-head strong {
  font-size: 1.05rem;
  line-height: 1;
}
.roll-pop-head span {
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 700;
}
.roll-pop-roman {
  color: var(--accent) !important;
}
.roll-pop-body {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}
.roll-pop-body .mandala-mini {
  margin: 0;
}
.roll-pop-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--text-dim);
  font-size: 0.67rem;
  line-height: 1.2;
}
.roll-pop-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}
.roll-pop-pill {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 1px 6px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.035);
  font-size: 0.62rem;
  font-weight: 700;
}
.roll-pop-pill.on {
  color: var(--accent);
  border-color: rgba(100,210,200,0.42);
  background: rgba(100,210,200,0.12);
}
.roll-pop-tabs {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  background: rgba(14, 10, 7, 0.34);
}
.roll-pop-tab {
  flex: 1;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 760;
  padding: 4px 5px;
}
.roll-pop-tab.on {
  color: var(--accent);
  background: rgba(100, 210, 200, 0.12);
}
.roll-pop-pane {
  margin-top: 8px;
}
.roll-pop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.roll-pop-control {
  min-width: 0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  background: rgba(255,255,255,0.045);
  color: var(--text);
  cursor: pointer;
  padding: 6px 7px;
  text-align: left;
}
.roll-pop-control:hover {
  border-color: rgba(100,210,200,0.48);
  background: rgba(100,210,200,0.08);
}
.roll-pop-control span {
  display: block;
  color: var(--text-dim);
  font-size: 0.58rem;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}
.roll-pop-control strong {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
}
.roll-pop-control.wide {
  width: 100%;
}
.roll-pop-pill-btn {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.035);
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 760;
}
.roll-pop-pill-btn:hover {
  border-color: rgba(100,210,200,0.42);
  color: var(--text);
}
.roll-pop-pill-btn.on {
  color: var(--accent);
  border-color: rgba(100,210,200,0.48);
  background: rgba(100,210,200,0.12);
}
.roll-pop-pill-btn.friction {
  color: var(--warn);
  border-color: rgba(242,189,92,0.45);
}
.roll-pop-voice,
.roll-pop-guitar {
  display: grid;
  gap: 8px;
}
.roll-pop-voice .pno-svg,
.roll-pop-guitar .gtr-svg {
  margin: 0 auto;
}
.roll-pop-voice label {
  display: grid;
  gap: 4px;
  color: var(--text-dim);
  font-size: 0.68rem;
}
.roll-pop-voicing {
  width: 100%;
}
.roll-pop-actions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.roll-pop-actions button {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  background: rgba(255,255,255,0.035);
  color: var(--text-dim);
  cursor: pointer;
  min-height: 25px;
  font-weight: 780;
}
.roll-pop-actions button:hover {
  color: var(--accent);
  border-color: rgba(100,210,200,0.42);
}
.roll-ruler { cursor: pointer; }
.roll-bg { cursor: crosshair; }
/* lane de velocity abajo */
.roll-vel { cursor: ns-resize; }
.roll-vel:hover, .roll-vel.sel { fill-opacity: 1; }

/* REC armado: botón pulsando en rojo */
.btn.rec-on {
  border-color: var(--danger);
  color: var(--danger);
  animation: recPulse 1s ease-in-out infinite;
}
@keyframes recPulse { 50% { background: rgba(239, 68, 68, 0.18); } }
.rhythm-btn.edited { color: var(--accent); border-color: var(--accent); }

/* ---- Acordeones del sidebar (álbum, recomendados) ---- */

.acc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 0;
  text-align: left;
}
.acc-head:hover .acc-chevron { color: var(--accent); }
.acc-chevron {
  color: var(--text-dim);
  font-size: 0.8rem;
  transition: transform 0.15s;
  display: inline-block;
}
.acc-chevron.open { transform: rotate(90deg); }
#albumBody { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
#suggBody { margin-top: 8px; }
#suggestionsBlock .acc-head span:last-child { font-size: 0.85rem; }
#wheelCard .acc-head { font-size: 1rem; }
#wheelBody { margin-top: 10px; }

/* modal: analizar cancionero pegado */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 9, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
}
.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-box h3 { margin: 0; }
#chartText {
  width: 100%;
  resize: vertical;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.85rem;
}
.chart-name-lbl { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-dim); }
.chart-name-lbl input { flex: 1; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---- Mini-reproductor fijo abajo ---- */

#player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 5px;
}
body.has-player #main, body.has-player #sidebar { padding-bottom: 120px; }

.player-row { display: flex; align-items: center; gap: 6px; min-height: 30px; }

.p-btn {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  padding: 3px 9px;
  font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0;
}
.p-btn:hover { border-color: var(--accent); }
.p-play { font-size: 1rem; padding: 4px 14px; background: var(--accent); border-color: var(--accent); }
.p-toggle.on { border-color: var(--ok); color: var(--ok); background: rgba(74, 222, 128, 0.1); }
.p-btn.rec-on { border-color: var(--danger); color: var(--danger); animation: recPulse 1s ease-in-out infinite; }

#playerChips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
}
#playerChips::-webkit-scrollbar { display: none; }

.p-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2px 8px;
  font-size: 0.75rem;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.p-chip.active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.p-chip.playing { border-color: var(--ok); }
.p-chip.playing .p-name { color: var(--ok); }
.p-name { font-weight: 600; }
.p-reps { display: flex; align-items: center; gap: 2px; font-size: 0.7rem; }
.p-step {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0 3px;
  line-height: 1;
}
.p-step:hover { color: var(--accent); }
.p-solo {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.68rem;
  padding: 0 2px;
}
.p-solo:hover { color: var(--ok); }

#playerStrip {
  display: flex;
  gap: 3px;
  flex: 1;
  overflow: hidden;
  align-items: center;
}
.p-block {
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.p-block.playing { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
#playerStatus { flex-shrink: 0; font-size: 0.7rem; }

/* selector de tónica por escala */
.hz-tonic { font-size: 0.72rem; padding: 2px 5px; margin: 0 6px; }
.hz-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

/* ---- Teléfono / pantallas angostas ---- */
@media (max-width: 900px) {
  body { flex-direction: column; overflow-x: hidden; } /* backstop: ningún desborde futuro debería poder correr la página entera de costado */
  #sidebar {
    width: 100%;
    position: static;
    height: auto;
    overflow-y: visible;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  #main { padding: 14px 10px; max-width: none; }
  .card { padding: 12px 12px; }
  #trackHeader { gap: 8px; }
  .track-name { font-size: 1.2rem; min-width: 140px; }
  .lane-head { gap: 6px; }
  .lane-head select { max-width: 110px; }
  .lane-btn { margin-left: 0; }
  .lane-blocks { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  #progression, .progression { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .chord-card { width: 140px; min-width: 140px; max-width: 140px; }
  .gen-row { gap: 8px; }
  .btn { padding: 8px 12px; font-size: 0.85rem; }
  .cmp-table th, .cmp-table td { padding: 4px 6px; font-size: 0.75rem; }
  .hz-table td { min-width: 46px; font-size: 0.72rem; }
  .hz-chord { padding: 4px 4px; font-size: 0.74rem; }
  #wheelSvg svg { max-width: 100% !important; }
  #playerStatus { display: none; }
  .p-block { font-size: 0.7rem; padding: 3px 4px; }
  body.has-player #main, body.has-player #sidebar { padding-bottom: 132px; }
}

/* ==========================================================================
   Redesign UI v1
   Variante visual paralela para index-redesign.html. Mantiene intactos IDs,
   clases y estructura para que js/app.js conserve toda la funcionalidad.
   ========================================================================== */

:root {
  --bg: #181411;
  --bg-panel: #231c16;
  --bg-card: #2e261f;
  --bg-hover: #3c3229;
  --border: #4b3f34;
  --text: #f2f4f1;
  --text-dim: #a7b0bc;
  --accent: #64d2c8;
  --accent-soft: rgba(100, 210, 200, 0.16);
  --ok: #89d26d;
  --warn: #f2bd5c;
  --danger: #ef766f;
  --radius: 8px;
  --panel-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  --soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.16), var(--top-light);
  color-scheme: dark;
}

html {
  background: var(--bg);
}

body {
  background:
    linear-gradient(180deg, #1f1a16 0%, var(--bg) 32%, #15120f 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overflow-x: hidden;
}

body::selection {
  background: rgba(100, 210, 200, 0.28);
}

#sidebar {
  width: 354px;
  background: rgba(35, 28, 22, 0.96);
  border-right-color: rgba(255, 255, 255, 0.08);
  box-shadow: 18px 0 40px rgba(0, 0, 0, 0.16);
  padding: 18px 16px;
  gap: 12px;
}

#main {
  max-width: 1260px;
  padding: 30px 34px 44px;
  min-width: 0;
  width: auto;
}

.card {
  background: linear-gradient(180deg, rgba(51, 42, 34, 0.98), rgba(42, 34, 27, 0.98));
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
}

.side-card {
  background: rgba(46, 37, 30, 0.94);
  box-shadow: none;
}

#harmonizedCard,
#arrangementCard,
#wheelCard {
  padding: 18px 20px;
}

h2, h3, h4 {
  letter-spacing: 0;
}

.card h3,
#harmonizedCard h3,
#vizCard h3,
#compareCard h3 {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 720;
}

.fine {
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.35;
}

.btn,
.p-btn,
.scale-chip,
.dur-btn,
.tension-btn,
.rhythm-btn,
.oct-btn {
  border-radius: 7px;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.btn {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text);
  padding: 7px 13px;
  font-weight: 610;
}

.btn:hover {
  background: rgba(100, 210, 200, 0.1);
  border-color: rgba(100, 210, 200, 0.58);
}

.btn:active,
.p-btn:active,
.hz-chord:active {
  transform: translateY(1px);
}

.btn-primary,
.t-play,
.p-play {
  background: #55bfb8;
  border-color: #55bfb8;
  color: #071211;
  box-shadow: 0 8px 18px rgba(100, 210, 200, 0.22);
}

.btn-primary:hover,
.t-play:hover,
.p-play:hover {
  background: #6bddd2;
  border-color: #6bddd2;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.025);
  border-style: solid;
  color: var(--text-dim);
}

.btn-danger:hover {
  border-color: var(--danger);
  background: rgba(239, 118, 111, 0.09);
}

select,
input[type='number'],
#chartText {
  background: rgba(22, 18, 14, 0.7);
  border-color: rgba(255, 255, 255, 0.11);
  color: var(--text);
  border-radius: 7px;
}

select:focus,
input:focus,
#chartText:focus {
  outline: none;
  border-color: rgba(100, 210, 200, 0.75);
  box-shadow: 0 0 0 3px rgba(100, 210, 200, 0.12);
}

/* Faders de consola: riel hundido + gorra de fader cartoon (brief El Estudio) */
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  height: 22px;
  background: transparent;
  cursor: pointer;
  accent-color: var(--accent);
}
input[type='range']::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, #120d08, #251a0f);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.65), inset 0 -1px 0 rgba(255, 234, 200, 0.05);
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 22px;
  margin-top: -7px;
  border: 0;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 44%, rgba(46, 33, 18, 0.85) 44% 56%, transparent 56%),
    linear-gradient(180deg, #f3e3c2, #cbb289 48%, #a98f63);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.5);
}
input[type='range']::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, #120d08, #251a0f);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.65);
}
input[type='range']::-moz-range-thumb {
  width: 16px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 44%, rgba(46, 33, 18, 0.85) 44% 56%, transparent 56%),
    linear-gradient(180deg, #f3e3c2, #cbb289 48%, #a98f63);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.5);
}
input[type='range']:disabled { opacity: 0.4; cursor: default; }

.album-name,
.track-name {
  color: var(--text);
  letter-spacing: 0;
}

.album-name {
  font-size: 1.1rem;
}

.track-name {
  font-size: 1.08rem;
}

.sidebar-hint,
.tool-group-lbl {
  letter-spacing: 0.075em;
}

.track-item {
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 9px 10px;
}

.track-item:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.08);
}

.track-item.active {
  background: rgba(100, 210, 200, 0.12);
  border-color: rgba(100, 210, 200, 0.28);
}

.acc-head {
  color: var(--text);
  border-radius: 7px;
}

.acc-head:hover {
  background: rgba(255, 255, 255, 0.045);
}

#vizNow {
  background: rgba(20, 16, 12, 0.38);
  border-color: rgba(255, 255, 255, 0.1);
}

#vizNowChord strong {
  font-size: 1.45rem;
  font-weight: 780;
}

.viz-note {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
}

.viz-note strong {
  color: var(--accent);
}

#suggestionsBlock .suggestion-chip,
.suggestion-chip {
  background: rgba(21, 17, 13, 0.38);
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: 7px;
}

.suggestion-chip:hover {
  border-color: rgba(100, 210, 200, 0.58);
  background: rgba(100, 210, 200, 0.08);
}

.s-cmp {
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}

#progToolbar {
  padding: 9px 10px;
  background: rgba(18, 14, 10, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
}

.wheel-mode {
  background: rgba(21, 17, 13, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 3px;
}

.wheel-mode .btn.small {
  padding: 5px 9px;
  background: transparent;
  border-color: transparent;
}

.wheel-mode .btn.small.on,
.btn.small.on {
  background: rgba(100, 210, 200, 0.15);
  border-color: rgba(100, 210, 200, 0.36);
  color: var(--accent);
}

.tool-group {
  background: rgba(21, 17, 13, 0.35);
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 11px 8px;
}

.tool-group-lbl {
  background: #2e261f;
  color: #bec6d1;
}

.transport-main {
  background: rgba(100, 210, 200, 0.06);
}

.t-rec {
  background: rgba(239, 118, 111, 0.08);
}

.t-rec:hover {
  background: rgba(239, 118, 111, 0.14);
}

.arr-tools {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.gen-row {
  align-items: center;
}

.audacity {
  background: rgba(21, 17, 13, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
}

.scale-chip {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.09);
  color: var(--text-dim);
  border-radius: 999px;
}

.scale-chip.active {
  background: rgba(100, 210, 200, 0.14);
  border-color: rgba(100, 210, 200, 0.46);
  color: var(--accent);
}

.hz-scale {
  background: rgba(21, 17, 13, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 10px;
}

.hz-name {
  color: var(--text);
  font-weight: 720;
}

.hz-table th {
  color: #bcc5d0;
  font-weight: 650;
}

.hz-table td {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.075);
}

.hz-chord {
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.08);
  min-height: 31px;
}

.hz-chord:hover {
  background: rgba(100, 210, 200, 0.15);
  border-color: rgba(100, 210, 200, 0.55);
  color: #dffffb;
}

.hz-chord-actions { display: flex; align-items: stretch; gap: 2px; }
.hz-insert {
  min-width: 24px;
  border: 1px solid rgba(100, 210, 200, 0.35);
  border-radius: 4px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
}
.hz-insert:hover { border-color: var(--accent); background: rgba(100, 210, 200, 0.12); }

#lanes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lane {
  background: rgba(21, 17, 13, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  padding: 10px;
}

.lane.active {
  border-color: rgba(100, 210, 200, 0.36);
  background: rgba(100, 210, 200, 0.055);
}

.lane.playing {
  box-shadow: inset 3px 0 0 var(--accent);
}

.lane-head {
  gap: 8px;
}

.lane-name {
  color: var(--text);
  font-weight: 740;
}

.lane-btn,
.lane-mini,
.lane-ctl {
  border-radius: 6px;
}

.lane-blocks {
  gap: 5px;
}

.tl-block,
.arr-block,
.p-block {
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 7px;
}

.tl-block {
  background: rgba(255, 255, 255, 0.045);
}

.tl-block.playing,
.arr-block.playing,
.p-block.playing {
  background: rgba(242, 189, 92, 0.18);
  border-color: rgba(242, 189, 92, 0.65);
  color: var(--text);
}

.arr-block {
  background: color-mix(in srgb, var(--arr-color) 18%, rgba(255, 255, 255, 0.035));
}

.chord-card {
  background: linear-gradient(180deg, rgba(60, 50, 42, 0.98), rgba(42, 34, 27, 0.98));
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
}

.chord-card:hover {
  border-color: rgba(100, 210, 200, 0.45);
  transform: translateY(-2px);
}

.chord-card.playing {
  border-color: rgba(242, 189, 92, 0.85);
  box-shadow: 0 14px 30px rgba(242, 189, 92, 0.16);
}

.chord-card.roll-selected {
  border-color: rgba(100, 210, 200, 0.85);
  box-shadow: 0 0 0 1px rgba(100, 210, 200, 0.55), 0 14px 30px rgba(100, 210, 200, 0.12);
}

.chord-label {
  color: var(--text);
  font-size: 1.45rem;
  font-weight: 800;
}

.chord-roman {
  color: var(--accent);
  font-weight: 720;
}

.chord-feel {
  color: #b3bdc8;
}

.badge {
  background: rgba(100, 210, 200, 0.14);
  color: #a9f1eb;
  border: 1px solid rgba(100, 210, 200, 0.18);
}

.dur-btn {
  border-color: rgba(100, 210, 200, 0.55);
  color: var(--accent);
  background: rgba(100, 210, 200, 0.08);
}

.rhythm-btn {
  border-color: rgba(242, 189, 92, 0.48);
  color: var(--warn);
  background: rgba(242, 189, 92, 0.08);
}

.tension-btn,
.oct-btn {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

.tension-btn:hover,
.oct-btn:hover {
  background: rgba(100, 210, 200, 0.08);
}

.voicing-sel {
  background: rgba(22, 18, 14, 0.66);
}

.chord-remove,
.chord-compare,
.chord-gtr,
.chord-replace,
.chord-move-row {
  opacity: 0.62;
}

.cmp-table th,
.cmp-table td {
  border-color: rgba(255, 255, 255, 0.09);
}

.cmp-table th {
  background: rgba(255, 255, 255, 0.035);
}

.cmp-common td {
  background: rgba(137, 210, 109, 0.1);
}

#wheelSvg,
#fretboard,
#pianoRoll {
  background: rgba(21, 17, 13, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 10px;
}

#pianoRoll {
  padding: 0;
  overflow: hidden;
}

.roll-toolbar,
.roll-bar {
  background: rgba(24, 19, 15, 0.95);
}

.modal {
  background: rgba(11, 8, 6, 0.7);
  backdrop-filter: blur(10px);
}

.modal-box {
  background: linear-gradient(180deg, #362c24, #2c231b);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: var(--panel-shadow);
}

#player {
  background: rgba(34, 27, 21, 0.96);
  border-top-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
}

.p-chip {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.09);
}

.p-chip.active {
  background: rgba(100, 210, 200, 0.13);
  border-color: rgba(100, 210, 200, 0.42);
}

.p-chip.playing {
  border-color: rgba(242, 189, 92, 0.65);
}

.p-chip.playing .p-name {
  color: var(--warn);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.025);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 210, 200, 0.36);
  background-clip: padding-box;
}

@media (max-width: 900px) {
  html,
  body {
    background: var(--bg);
    max-width: 100%;
    overflow-x: hidden;
  }

  #sidebar {
    width: 100%;
    padding: 12px;
    box-shadow: none;
  }

  #main {
    padding: 12px;
  }

  #harmonizedCard,
  #arrangementCard,
  #wheelCard,
  .card {
    padding: 12px;
  }

  #progToolbar,
  .transport-row,
  .gen-row {
    gap: 8px;
  }

  .wheel-mode {
    width: 100%;
    overflow-x: auto;
  }

  .tool-group {
    flex: 1 1 220px;
  }

  .chord-card {
    min-width: 148px;
    width: 148px;
    max-width: 148px;
  }

  .hz-scale {
    padding: 8px;
    max-width: 100%;
    overflow-x: auto;
  }

  .hz-table {
    width: max-content;
    min-width: 100%;
  }

  #progression,
  .progression,
  .lane-blocks {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ---- DAW layout para Estructura del tema ---- */

#arrangementCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 100%;
  overflow: hidden;
}

.daw-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 4px;
}

.daw-titlebar h3 {
  margin: 0;
  font-size: 1.05rem;
}

.daw-titlebar p {
  margin: 3px 0 0;
}

.daw-panel {
  background: rgba(19, 15, 11, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  padding: 10px;
}

.daw-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  margin-bottom: 8px;
  color: #dce3ea;
  font-size: 0.76rem;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

.daw-panel-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.daw-map {
  padding-bottom: 8px;
}

#arrangementStrip {
  margin: 0;
}

#arrangementStrip[hidden] {
  display: none !important;
}

#arrangementStrip .arr-head {
  display: none;
}

.arr-track {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  padding: 6px;
  min-height: 58px;
}

.arr-block {
  min-height: 48px;
  border-radius: 6px;
  box-shadow: inset 0 -18px 28px rgba(0, 0, 0, 0.08);
}

.arr-block.active {
  box-shadow: inset 0 0 0 2px var(--accent), inset 0 -18px 28px rgba(0, 0, 0, 0.08);
}

.arr-name {
  font-size: 0.82rem;
}

.daw-session {
  padding: 0;
  overflow: hidden;
}

.daw-session > .daw-panel-head {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.025);
}

.daw-session > #progToolbar {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(15, 11, 8, 0.28);
}

#lanes {
  gap: 0;
}

.lane {
  border-width: 0 0 1px;
  border-color: rgba(255, 255, 255, 0.075);
  border-radius: 0;
  padding: 0;
  background: rgba(30, 23, 17, 0.54);
}

.lane:last-child {
  border-bottom: 0;
}

.lane.active {
  background: rgba(100, 210, 200, 0.05);
  border-color: rgba(100, 210, 200, 0.22);
}

.lane.playing {
  box-shadow: inset 4px 0 0 var(--warn);
}

.lane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 9px 10px;
  min-height: 50px;
}

.lane-name {
  min-width: 110px;
  flex: 1 1 150px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lane-head select,
.lane-head input {
  background: rgba(15, 11, 8, 0.68);
}

.lane-head select {
  max-width: 124px;
}

.lane-total {
  color: #c4ccd5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bars-target {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-dim);
  font-size: 0.68rem;
  white-space: nowrap;
}

.bars-target input {
  width: 42px;
  padding: 3px 5px;
  font-size: 0.72rem;
}

.lane-btn {
  margin-left: 0;
  min-width: 36px;
  height: 30px;
}

.lane [data-act="midi"] {
  min-width: 40px;
  max-width: 42px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
}

.lane [data-act="midi"]::before {
  content: "⬇";
  font-size: 0.78rem;
}

.lane.expanded .progression {
  margin: 0;
  padding: 12px 10px 14px 34px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 72px 100%,
    rgba(17, 13, 9, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.melody-arrangement-lane {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 9px 10px 0 34px;
  padding: 7px 8px;
  border: 1px solid rgba(126, 185, 255, 0.2);
  border-radius: 6px;
  background: rgba(78, 122, 170, 0.055);
}

.mel-arr-head {
  display: grid;
  gap: 3px;
  color: #c5d7ef;
  font-size: 0.68rem;
  font-weight: 780;
}

.mel-arr-head .btn {
  width: 30px;
  min-height: 25px;
  padding: 0;
  font-size: 0.76rem;
}

.mel-arr-grid {
  position: relative;
  min-width: 0;
  height: 36px;
  overflow: hidden;
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px) 0 0 / 12.5% 100%,
    rgba(18, 13, 7, 0.54);
}

.mel-arr-note {
  position: absolute;
  top: 7px;
  bottom: 7px;
  min-width: 6px;
  overflow: hidden;
  padding: 2px 5px;
  border: 1px solid rgba(150, 202, 255, 0.75);
  border-radius: 3px;
  color: #e8f4ff;
  font-size: 0.63rem;
  font-weight: 760;
  line-height: 14px;
  white-space: nowrap;
  background: rgba(68, 124, 181, 0.82);
}

.melody-arrangement-lane.empty .mel-arr-grid::after {
  position: absolute;
  inset: 0;
  content: "";
  background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(126,185,255,0.045) 8px 9px);
}

#arrangementCard.roll-edit-mode .lane.expanded .progression {
  display: none;
}

#arrangementCard.roll-edit-mode .lane.active {
  border-bottom-color: rgba(100, 210, 200, 0.24);
}

#arrangementCard.roll-edit-mode #pianoRoll {
  margin-top: 10px;
  border-color: rgba(100, 210, 200, 0.55);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.lane.collapsed .lane-blocks {
  margin: 0;
  padding: 0 10px 11px 34px;
  background: rgba(17, 13, 9, 0.2);
}

.lane.expanded > .fine,
.lane.collapsed .fine {
  display: block;
  padding: 0 12px 14px 34px;
  color: #aeb7c2;
}

.tl-block,
.tl-rest {
  min-height: 30px;
  border-radius: 5px;
}

.glue-connector {
  align-self: stretch;
  min-width: 36px;
  opacity: 0.78;
}

#progToolbar {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  justify-content: flex-end;
}

#progToolbar[hidden] {
  display: none !important;
}

#progToolbar .fine,
#progToolbar .toolbar-sep {
  display: none;
}

#progToolbar .roll-bar-lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 0.7rem;
  white-space: nowrap;
}

#progToolbar .roll-bar-lbl select {
  max-width: 150px;
  padding: 4px 7px;
}

.daw-editor-surfaces #fretboard,
.daw-editor-surfaces #pianoRoll {
  margin: 10px;
}

.arr-tools {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 10px 0 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background: rgba(22, 17, 12, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.arr-tools[hidden] {
  display: none !important;
}

.global-transport,
.composer-strip {
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
}

.global-transport {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(190px, 280px) minmax(120px, auto) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px;
}

.app-transport-bar {
  position: fixed;
  top: 0;
  left: 354px;
  right: 0;
  z-index: 70;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  margin: 0;
  min-height: 48px;
  border-color: rgba(91, 209, 205, 0.22);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background:
    linear-gradient(180deg, rgba(46, 36, 27, 0.98), rgba(26, 19, 13, 0.98));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

#trackPanel {
  padding-top: 58px;
}

.app-transport-bar #playStatus {
  display: none;
}

.transport-bank {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.transport-bank .btn,
.export-strip .btn {
  min-height: 34px;
  padding: 7px 10px;
  white-space: nowrap;
}

.app-transport-bar .transport-bank .btn {
  width: 36px;
  min-width: 36px;
  height: 34px;
  padding: 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.app-transport-bar .transport-bank #btnUndo,
.app-transport-bar .transport-bank #btnRedo {
  color: var(--text-dim);
}

.app-transport-bar #btnPlayAll {
  width: 42px;
  min-width: 42px;
  font-size: 0.88rem;
}

.app-transport-bar #btnRec {
  color: #ff7770;
}

.app-transport-bar #btnRec.rec-on {
  background: rgba(239, 118, 111, 0.24);
  box-shadow: 0 0 0 2px rgba(239, 118, 111, 0.18);
}

.transport-bank .toggle.on,
.transport-bank .toggle[aria-pressed="true"] {
  border-color: rgba(91, 209, 205, 0.58);
  background: rgba(91, 209, 205, 0.14);
  color: #eaffff;
}

.tempo-strip {
  display: grid;
  grid-template-columns: auto minmax(96px, 1fr) 38px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 8px;
  color: var(--text-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.app-transport-bar .tempo-strip {
  padding: 0 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.075);
  border-right: 1px solid rgba(255, 255, 255, 0.075);
}

.tempo-strip input[type="range"],
.audacity input[type="range"],
.section-groove input[type="range"] {
  accent-color: #5bd1cd;
}

.tempo-strip #tempoSliderVal {
  color: var(--text);
  font-size: 1.12rem;
}

.global-transport #playStatus {
  min-height: 18px;
  text-align: right;
}

.export-strip {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.app-transport-bar .export-strip .btn {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 0.7rem;
}

/* Academy es OTRO modo, no una acción más de Componer: por eso se destaca del
   resto de la tira en vez de confundirse con MIDI y WAV. */
.academy-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 11px;
  font-size: 0.7rem;
  text-decoration: none;
  white-space: nowrap;
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.academy-link:hover { background: var(--accent); color: var(--bg); }

.mixer-view {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: auto;
  background: #19110a;
  color: var(--text);
}

body.mixer-open { overflow: hidden; }

.mixer-view[hidden] { display: none !important; }

.band-room-view {
  position: fixed;
  inset: 0;
  z-index: 91;
  overflow: auto;
  background: #160f08;
  color: var(--text);
}

body.band-room-open { overflow: hidden; }
body.band-chat-open { position: fixed; width: 100%; overflow: hidden; overscroll-behavior: none; }
.band-room-view[hidden] { display: none !important; }

.band-room-topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(120px, 0.7fr) minmax(170px, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: max(9px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 9px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(91, 209, 205, 0.22);
  background: rgba(29, 20, 12, 0.97);
  backdrop-filter: blur(14px);
}

.band-room-heading h2 { margin: 1px 0 0; font-size: 1.15rem; letter-spacing: 0; }
.band-room-now { display: flex; min-width: 0; align-items: baseline; justify-content: center; gap: 8px; }
.band-room-now strong { color: var(--accent); font-size: 0.76rem; }
.band-room-now span { overflow: hidden; color: var(--text-dim); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.band-room-transport { display: flex; gap: 6px; }
.band-room-transport .btn { width: 38px; min-width: 38px; padding: 0; }
.band-room-transport #bandRoomLoop { display: inline-flex; width: auto; min-width: 70px; align-items: center; justify-content: center; gap: 5px; padding-inline: 10px; font-weight: 750; }
.band-room-transport .on { border-color: rgba(91, 209, 205, 0.62); background: rgba(91, 209, 205, 0.15); color: #eaffff; }

.band-room-council { display: block; padding: 8px 12px; border-bottom: 1px solid rgba(91, 209, 205, 0.16); background: #1c130b; }
.band-room-council-form { display: grid; grid-template-columns: auto minmax(160px, 1fr) auto; align-items: center; gap: 10px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(91, 209, 205, 0.16); background: #1f150c; }
.band-room-council-form label { display: grid; min-width: 125px; gap: 1px; }
.band-room-council-form label strong { font-size: 0.72rem; }
.band-room-council-form input { min-width: 0; min-height: 38px; }
.band-room-chat-trigger { display: grid; width: 100%; min-height: 38px; grid-template-columns: auto minmax(0, 1fr) 27px; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-left: 2px solid #b58ae8; border-radius: 0; background: rgba(181, 138, 232, 0.055); color: var(--text); text-align: left; cursor: pointer; }
.band-room-chat-trigger strong { color: #c9a9ef; font-size: 0.61rem; }
.band-room-chat-trigger span { overflow: hidden; color: var(--text-dim); font-size: 0.58rem; text-overflow: ellipsis; white-space: nowrap; }
.band-room-chat-trigger i { display: grid; width: 27px; height: 27px; place-items: center; color: var(--text-dim); font-size: 0.72rem; font-style: normal; }
.band-room-council-chat { position: fixed; z-index: 220; inset: 0; display: grid; width: 100vw; height: 100vh; height: 100dvh; min-width: 0; max-width: none; max-height: none; grid-template-rows: auto minmax(0, 1fr); overflow: clip; overscroll-behavior: none; background: #181009; }
.band-room-council-chat[hidden] { display: none !important; }
.band-room-chat-header { position: relative; z-index: 2; display: flex; min-height: 60px; align-items: center; justify-content: space-between; gap: 12px; padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid rgba(91, 209, 205, 0.2); background: #1f150c; }
.band-room-chat-header > div { display: grid; gap: 1px; }
.band-room-chat-header strong { font-size: 0.82rem; }
.band-room-chat-header .btn { width: 40px; min-width: 40px; height: 40px; padding: 0; font-size: 1.15rem; }
.band-room-chat-shell { display: grid; width: min(100%, 920px); height: 100%; min-height: 0; max-height: 100%; grid-template-rows: minmax(0, 1fr) auto; justify-self: center; overflow: hidden; background: #1b120a; }
.band-room-council-log { display: grid; min-height: 0; align-content: start; gap: 14px; padding: 20px clamp(12px, 4vw, 36px) max(28px, env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; background: #1b120a; }
.band-council-empty { margin: 0; color: var(--text-dim); font-size: 0.62rem; }
.band-council-thread { display: grid; gap: 7px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.band-council-thread:last-child { padding-bottom: 0; border-bottom: 0; }
.band-council-message { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 7px; }
.band-council-message > div { min-width: 0; padding: 6px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.045); }
.band-council-message strong { display: block; margin-bottom: 2px; color: var(--text-dim); font-size: 0.53rem; }
.band-council-message p, .band-council-agreement p, .band-council-error p { margin: 0; font-size: 0.62rem; line-height: 1.38; }
.band-council-message.user { grid-template-columns: minmax(0, 1fr) 28px; }
.band-council-message.user > div { grid-column: 1; grid-row: 1; background: rgba(91, 209, 205, 0.1); }
.band-council-user { display: grid; width: 28px; height: 28px; grid-column: 2; grid-row: 1; place-items: center; border: 1px solid rgba(91, 209, 205, 0.38); border-radius: 50%; color: var(--accent); font-size: 0.46rem; font-weight: 800; }
.band-council-agreement, .band-council-error { margin-left: 31px; padding: 7px 9px; border-left: 2px solid #b58ae8; background: rgba(181, 138, 232, 0.07); }
.band-council-agreement strong, .band-council-error strong { display: block; margin-bottom: 2px; color: #c9a9ef; font-size: 0.55rem; }
.band-council-error { border-color: #f07178; background: rgba(240, 113, 120, 0.07); }
.band-council-status { display: flex; align-items: center; gap: 7px; color: var(--text-dim); font-size: 0.58rem; }
.band-council-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: band-council-pulse 0.9s ease-in-out infinite alternate; }
.band-composition-brief { display: grid; gap: 10px; padding: 10px; border: 1px solid rgba(91, 209, 205, 0.25); background: rgba(91, 209, 205, 0.045); }
.band-composition-brief > header { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; }
.band-composition-brief > header > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--accent); color: #071116; font-size: 0.62rem; font-weight: 850; }
.band-composition-brief > header > div { display: grid; gap: 1px; }
.band-composition-brief > header strong { font-size: 0.67rem; }
.band-composition-brief > header small { color: var(--text-dim); font-size: 0.52rem; }
.band-brief-question { display: grid; gap: 5px; margin: 0; padding: 0; border: 0; }
.band-brief-question legend { margin-bottom: 4px; color: var(--text-dim); font-size: 0.54rem; font-weight: 750; }
.band-brief-question > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.band-brief-option { display: grid; min-width: 0; min-height: 52px; align-content: center; gap: 2px; padding: 7px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 5px; background: #251a10; color: var(--text); text-align: left; cursor: pointer; }
.band-brief-option strong { font-size: 0.58rem; }
.band-brief-option small { overflow: hidden; color: var(--text-dim); font-size: 0.48rem; text-overflow: ellipsis; white-space: nowrap; }
.band-brief-option.selected { border-color: rgba(91, 209, 205, 0.72); background: rgba(91, 209, 205, 0.13); box-shadow: inset 0 0 0 1px rgba(91, 209, 205, 0.1); }
.band-composition-brief > .btn { justify-self: end; }
.band-council-takes { display: grid; gap: 6px; margin-left: 31px; padding: 8px; border: 1px solid rgba(91, 209, 205, 0.26); border-radius: 6px; background: rgba(91, 209, 205, 0.045); }
.band-council-takes > header { display: grid; gap: 1px; }
.band-council-takes > header strong { color: var(--accent); font-size: 0.58rem; }
.band-council-takes > header small { color: var(--text-dim); font-size: 0.5rem; }
.band-intent-summary { display: flex; min-width: 0; align-items: center; gap: 6px; margin: 0; padding: 5px 7px; border-left: 2px solid #b58ae8; background: rgba(181, 138, 232, 0.07); font-size: 0.5rem; }
.band-intent-summary b { flex: none; color: #c9a9ef; }
.band-intent-summary span { overflow: hidden; color: var(--text-dim); text-overflow: ellipsis; white-space: nowrap; }
.band-song-roadmap { display: flex; min-width: 0; gap: 3px; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.band-song-roadmap li { flex: 0 0 auto; padding: 3px 6px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 3px; color: var(--text-dim); font-size: 0.47rem; }
.band-song-roadmap li.active { border-color: rgba(91, 209, 205, 0.55); background: rgba(91, 209, 205, 0.11); color: var(--accent); }
.band-song-roadmap li.done::before { content: '✓ '; color: var(--accent); }
.band-next-stage { justify-self: end; margin-top: 3px; }
.band-council-takes > label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; color: var(--text-dim); font-size: 0.5rem; }
.band-council-takes > label select { min-width: 0; min-height: 27px; padding: 2px 6px; font-size: 0.54rem; }
.band-council-take { display: grid; min-width: 0; grid-template-columns: 25px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; }
.band-council-take > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 4px; background: rgba(181, 138, 232, 0.16); color: #c9a9ef; font-size: 0.62rem; font-weight: 800; }
.band-council-take > div { display: grid; min-width: 0; gap: 1px; }
.band-council-take strong { font-size: 0.58rem; }
.band-council-take small { overflow: hidden; color: var(--text-dim); font-size: 0.48rem; text-overflow: ellipsis; white-space: nowrap; }
.band-council-take .band-take-fit { color: #8fcfba; }
.band-council-take.recommended > span { background: rgba(91, 209, 205, 0.18); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(91, 209, 205, 0.28); }
.band-council-take .btn { min-width: 30px; min-height: 27px; padding: 2px 6px; font-size: 0.52rem; }
.band-council-take em { color: var(--accent); font-size: 0.5rem; font-style: normal; font-weight: 750; }
.band-council-take.applied { opacity: 0.72; }
@keyframes band-council-pulse { from { opacity: 0.35; transform: scale(0.8); } to { opacity: 1; transform: scale(1.1); } }

.band-room-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  min-height: calc(100dvh - 64px - 154px);
  padding: 12px;
  isolation: isolate;
}

.band-room-stage::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(91, 209, 205, 0.035), transparent 38%),
    linear-gradient(180deg, transparent 0 68%, rgba(255, 255, 255, 0.025) 68% 69%, #1c130c 69% 100%);
  content: '';
}

.band-room-station {
  --station-accent: #5bd1cd;
  display: grid;
  min-width: 0;
  grid-template-rows: minmax(260px, 1fr) auto;
  align-self: stretch;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(38, 27, 17, 0.9), rgba(25, 17, 10, 0.96));
  transition: border-color 160ms ease, background 160ms ease;
}

.band-room-station.bass { --station-accent: #e2b063; }
.band-room-station.chords { --station-accent: #b58ae8; }
.band-room-station.melody { --station-accent: #e37d8f; }
.band-room-station[data-band-state="playing"] { border-color: color-mix(in srgb, var(--station-accent) 62%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--station-accent) 11%, #261b11), #19110a); }
.band-room-station[data-band-state="celebrating"] { border-color: #f2bd67; }
.band-room-stage[data-band-speaker] .band-room-station[data-band-state="listening"]:nth-child(-n+2) .band-room-avatar { animation: band-room-listen-right 1.25s ease-in-out infinite alternate; }
.band-room-stage[data-band-speaker] .band-room-station[data-band-state="listening"]:nth-child(n+3) .band-room-avatar { animation: band-room-listen-left 1.25s ease-in-out infinite alternate; }

.pet-nav { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; background: rgba(255,255,255,0.02); }
.app-transport-bar .transport-bank .pet-nav .btn.pet-nav-btn { display: inline-grid; place-items: center; width: 36px; min-width: 36px; height: 34px; padding: 0; border-color: color-mix(in srgb, var(--pet-accent) 45%, transparent); overflow: visible; }
.pet-nav-btn .band-pet-avatar { width: 26px; height: 26px; border-color: color-mix(in srgb, var(--pet-accent) 62%, transparent); box-shadow: none; }
.pet-nav-btn:hover { background: color-mix(in srgb, var(--pet-accent) 14%, transparent); }
.pet-nav-btn:hover .band-pet-avatar { border-color: var(--pet-accent); }
.pet-nav-btn.active { background: color-mix(in srgb, var(--pet-accent) 22%, transparent); box-shadow: inset 0 0 0 1px var(--pet-accent); }
.pet-nav-btn.active .band-pet-avatar { border-color: var(--pet-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pet-accent) 30%, transparent); }

#openBandRoomTop { position: relative; }
#openBandRoomTop.has-unread::after { content: attr(data-unread); position: absolute; top: -5px; right: -5px; display: grid; min-width: 17px; height: 17px; place-items: center; padding-inline: 4px; border: 2px solid #221810; border-radius: 9px; background: #f2bd67; color: #11120f; font-size: 0.48rem; font-weight: 900; }

.band-room-performer {
  position: relative;
  min-width: 0;
  min-height: 260px;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* Luz de lámpara del estudio: cada músico bajo su propio foco cálido */
.band-room-performer::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(ellipse 68% 52% at 50% 34%, color-mix(in srgb, var(--station-accent) 14%, transparent), transparent 72%);
  opacity: 0.7;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.band-room-station[data-band-state="playing"] .band-room-performer::before {
  opacity: 1;
  background: radial-gradient(ellipse 74% 58% at 50% 34%, color-mix(in srgb, var(--station-accent) 24%, transparent), transparent 74%);
  animation: band-room-lamp 0.96s ease-in-out infinite alternate;
}
.band-room-station[data-band-state="talking"] .band-room-performer::before { opacity: 1; }
@keyframes band-room-lamp {
  from { opacity: 0.75; }
  to { opacity: 1; }
}

.band-room-performer:focus-visible { outline: 2px solid var(--station-accent); outline-offset: -2px; }
.band-room-performer:hover .band-room-enter { color: var(--station-accent); }
.band-room-unread { position: absolute; z-index: 5; top: 7px; right: 7px; display: grid; min-width: 21px; height: 21px; place-items: center; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--station-accent) 72%, white); border-radius: 10px; background: var(--station-accent); color: #071015; font-size: 0.56rem; font-weight: 900; box-shadow: 0 3px 10px rgba(0,0,0,0.35); }
.band-room-identity { position: absolute; top: 8px; left: 8px; display: grid; gap: 1px; text-align: left; }
.band-room-identity strong { font-size: 0.82rem; }
.band-room-identity small { color: var(--text-dim); font-size: 0.59rem; }
.band-room-avatar { position: absolute; z-index: 2; left: 50%; bottom: 88px; transform: translateX(-50%); }
.band-room-avatar { transform-origin: 50% 100%; animation: band-room-breathe 2.8s ease-in-out infinite; }
.band-room-station:nth-child(2) .band-room-avatar { animation-delay: -0.7s; }
.band-room-station:nth-child(3) .band-room-avatar { animation-delay: -1.4s; }
.band-room-station:nth-child(4) .band-room-avatar { animation-delay: -2.1s; }
.band-room-station[data-band-state="playing"] .band-room-avatar { animation: band-room-groove 0.48s ease-in-out infinite alternate; }
.band-room-station[data-band-state="talking"] .band-room-avatar { animation: band-room-talk 0.34s ease-in-out infinite alternate; }
.band-room-station[data-band-state="listening"] .band-room-avatar { animation-duration: 1.65s; }
.band-room-speech { position: absolute; z-index: 6; top: 38px; right: 8px; left: 8px; max-height: 72px; padding: 8px 9px; border: 1px solid color-mix(in srgb, var(--station-accent) 45%, #4e4034); border-radius: 6px; background: rgba(238, 244, 247, 0.96); color: #221810; font-size: 0.58rem; font-weight: 720; line-height: 1.3; text-align: left; box-shadow: 0 8px 22px rgba(0,0,0,0.32); animation: band-room-speech-in 180ms ease-out; }
.band-room-speech::after { position: absolute; bottom: -7px; left: 50%; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: rgba(238, 244, 247, 0.96); content: ''; }
.band-room-speech[hidden] { display: none; }
.band-room-avatar .band-pet-avatar { width: 88px; height: 88px; border-radius: 7px; border-color: color-mix(in srgb, var(--station-accent) 54%, transparent); background-color: #1f150d; }
.band-room-enter { position: absolute; right: 7px; bottom: 7px; left: 7px; display: flex; justify-content: space-between; color: var(--text-dim); font-size: 0.62rem; font-weight: 700; transition: color 140ms ease; }
.band-room-enter i { font-style: normal; }

.band-room-gear { position: absolute; left: 50%; bottom: 42px; width: 132px; height: 70px; transform: translateX(-50%); opacity: 0.72; }
.band-room-gear.amp { width: 112px; height: 74px; border: 3px solid #4e4034; border-radius: 5px; background: repeating-linear-gradient(45deg, #251b13 0 2px, #31251a 2px 4px); box-shadow: 0 7px 0 #120d07; }
.band-room-gear.amp i { position: absolute; top: 8px; right: 10px; left: 10px; height: 5px; border-radius: 2px; background: var(--station-accent); opacity: 0.55; }
.band-room-gear.amp b { position: absolute; top: 27px; left: 20px; width: 36px; height: 36px; border: 4px solid #45382d; border-radius: 50%; }
.band-room-gear.amp span { position: absolute; top: 27px; right: 14px; width: 30px; height: 36px; border-left: 1px solid #52453a; }
.band-room-gear.drums i { position: absolute; bottom: 0; width: 48px; height: 40px; border: 4px solid #5d5045; border-radius: 50%; background: #2c2016; }
.band-room-gear.drums i:nth-child(1) { left: 42px; width: 52px; height: 52px; }
.band-room-gear.drums i:nth-child(2) { left: 5px; }
.band-room-gear.drums i:nth-child(3) { right: 0; }
.band-room-gear.drums b { position: absolute; top: 4px; width: 39px; height: 4px; border-radius: 50%; background: #b19b55; box-shadow: 18px 18px 0 -1px #b19b55; }
.band-room-gear.drums b:nth-of-type(1) { left: 4px; transform: rotate(-7deg); }
.band-room-gear.drums b:nth-of-type(2) { right: 4px; transform: rotate(7deg); }
.band-room-gear.synth { width: 142px; height: 57px; border: 3px solid #53463a; border-radius: 5px; background: #291f16; box-shadow: 0 8px 0 #120d07; }
.band-room-gear.synth i { position: absolute; top: 7px; right: 12px; left: 12px; height: 8px; background: repeating-linear-gradient(90deg, #8a6bb0 0 4px, transparent 4px 12px); }
.band-room-gear.synth span { position: absolute; right: 8px; bottom: 6px; left: 8px; display: grid; height: 25px; grid-template-columns: repeat(8, 1fr); gap: 1px; }
.band-room-gear.synth b { background: #cad0d5; border-radius: 0 0 2px 2px; }
.band-room-station[data-band-state="playing"] .band-room-gear.drums i:nth-child(1) { animation: band-room-kick 0.48s ease-in-out infinite; }
.band-room-station[data-band-state="playing"] .band-room-gear.drums b { animation: band-room-cymbal 0.7s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.band-room-station[data-band-state="playing"] .band-room-gear.synth b:nth-child(3n+1) { animation: band-room-key 0.72s steps(2, end) infinite; }
.band-room-station[data-band-state="playing"] .band-room-gear.synth b:nth-child(3n+2) { animation: band-room-key 0.72s steps(2, end) -0.24s infinite; }
.band-room-station[data-band-state="playing"] .band-room-gear.synth b:nth-child(3n) { animation: band-room-key 0.72s steps(2, end) -0.48s infinite; }
.band-room-station[data-band-state="playing"] .band-room-gear.amp i { animation: band-room-amp-light 0.9s ease-in-out infinite alternate; }
.band-room-station[data-band-state="playing"] .band-room-gear.amp b { animation: band-room-speaker-pulse 0.48s ease-in-out infinite alternate; }

@keyframes band-room-breathe { 0%, 100% { transform: translateX(-50%) translateY(0) scale(1); } 50% { transform: translateX(-50%) translateY(-3px) scale(1.025); } }
@keyframes band-room-groove { from { transform: translateX(-50%) rotate(-1.5deg) translateY(0); } to { transform: translateX(-50%) rotate(1.5deg) translateY(-5px); } }
@keyframes band-room-talk { from { transform: translateX(-50%) translateY(0) rotate(-1deg); } to { transform: translateX(-50%) translateY(-4px) rotate(1deg); } }
@keyframes band-room-listen-right { from { transform: translateX(-50%) translateY(0) rotate(0); } to { transform: translateX(-47%) translateY(-2px) rotate(2deg); } }
@keyframes band-room-listen-left { from { transform: translateX(-50%) translateY(0) rotate(0); } to { transform: translateX(-53%) translateY(-2px) rotate(-2deg); } }
@keyframes band-room-speech-in { from { opacity: 0; transform: translateY(5px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes band-room-kick { 0%, 100% { transform: scale(1); } 18% { transform: scale(1.07); } }
@keyframes band-room-cymbal { from { filter: brightness(0.88); } to { filter: brightness(1.28); } }
@keyframes band-room-key { 0%, 49% { background: #cad0d5; } 50%, 100% { background: var(--station-accent); } }
@keyframes band-room-amp-light { from { opacity: 0.35; } to { opacity: 0.95; box-shadow: 0 0 8px var(--station-accent); } }
@keyframes band-room-speaker-pulse { from { transform: scale(0.96); } to { transform: scale(1.04); } }

.band-room-station .band-pet-sound { margin: 8px 0 0; border-color: color-mix(in srgb, var(--station-accent) 22%, transparent); }
.band-room-station .band-pet-sound span { color: var(--station-accent); }
.band-pet-controls { min-width: 0; }
.band-pet-timbre { margin-top: 4px; }
.band-pet-timbre > summary { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 7px; min-height: 25px; padding: 3px 6px; color: var(--station-accent); cursor: pointer; list-style: none; font-size: 0.56rem; font-weight: 750; text-transform: uppercase; }
.band-pet-timbre > summary::-webkit-details-marker { display: none; }
.band-pet-timbre > summary::before { content: '＋'; font-size: 0.7rem; }
.band-pet-timbre[open] > summary::before { content: '−'; }
.band-pet-timbre > summary > span { white-space: nowrap; }
.band-pet-timbre > summary small { min-width: 0; overflow: hidden; color: var(--text-dim); font-size: 0.51rem; font-weight: 500; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.band-pet-timbre > summary small::before { content: '· '; }
.band-timbre-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 5px 6px 4px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.band-timbre-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding-bottom: 2px; }
.band-timbre-scope button { min-width: 0; min-height: 24px; padding: 3px 5px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; background: #251a10; color: var(--text-dim); cursor: pointer; font-size: 0.52rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.band-timbre-scope button.on { border-color: var(--station-accent, var(--accent)); background: color-mix(in srgb, var(--station-accent, var(--accent)) 13%, transparent); color: var(--station-accent, var(--accent)); }
.band-timbre-motion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); }
.band-timbre-motion label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 4px; min-width: 0; color: var(--text-dim); font-size: 0.5rem; }
.band-timbre-motion select { grid-column: 1 / -1; min-width: 0; height: 25px; padding: 2px 5px; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; background: #181009; color: var(--text); font-size: 0.52rem; }
.band-timbre-motion input { grid-column: 1 / -1; width: 100%; height: 14px; margin: 0; }
.band-timbre-motion input:disabled { opacity: 0.35; }
.band-timbre-motion output { justify-self: end; padding-left: 6px; color: var(--station-accent, var(--accent)); font-variant-numeric: tabular-nums; }
.band-timbre-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 5px; min-width: 0; color: var(--text-dim); font-size: 0.52rem; }
.band-timbre-control output { color: var(--station-accent); font-variant-numeric: tabular-nums; }
.band-timbre-control input { grid-column: 1 / -1; width: 100%; height: 14px; margin: 0; }
.band-timbre-advanced { border-top: 1px solid rgba(255,255,255,0.07); }
.band-timbre-advanced > summary { display: flex; min-height: 26px; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; color: var(--text); cursor: pointer; font-size: 0.52rem; font-weight: 750; list-style: none; text-transform: none; }
.band-timbre-advanced > summary::-webkit-details-marker { display: none; }
.band-timbre-advanced > summary::before { content: '＋'; color: var(--station-accent, var(--accent)); }
.band-timbre-advanced[open] > summary::before { content: '−'; }
.band-timbre-advanced > summary span { margin-right: auto; }
.band-timbre-advanced > summary small { color: var(--text-dim); font-size: 0.49rem; font-weight: 500; }
.band-timbre-advanced-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 8px; padding: 5px 0 3px; }
.band-timbre-advanced-grid > label:not(.band-timbre-control) { display: grid; gap: 3px; color: var(--text-dim); font-size: 0.5rem; }
.band-timbre-advanced-grid select { min-width: 0; height: 27px; padding: 2px 5px; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; background: #181009; color: var(--text); font-size: 0.52rem; }
.band-timbre-advanced-toggle { grid-column: 1 / -1; display: flex !important; grid-template-columns: none !important; align-items: center; min-height: 26px; padding: 4px 6px; border: 1px solid rgba(255,255,255,0.08); background: #24190f; color: var(--text) !important; }
.band-timbre-advanced-toggle input { width: 15px; height: 15px; margin: 0 6px 0 0; accent-color: var(--station-accent, var(--accent)); }
.band-timbre-advanced-note { grid-column: 1 / -1; color: var(--text-dim); font-size: 0.47rem; line-height: 1.35; }
.band-timbre-advanced-grid :disabled { opacity: 0.38; }
.band-timbre-copy { display: grid; grid-template-columns: minmax(0, 1fr) 26px; gap: 4px; padding-top: 3px; border-top: 1px solid rgba(255,255,255,0.07); }
.band-timbre-copy select { min-width: 0; height: 26px; padding: 2px 5px; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; background: #181009; color: var(--text); font-size: 0.52rem; }
.band-timbre-copy button { display: grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; background: #251a10; color: var(--text-dim); cursor: pointer; }
.band-timbre-copy button:not(:disabled):hover { border-color: var(--station-accent, var(--accent)); color: var(--station-accent, var(--accent)); }
.band-timbre-copy :disabled { cursor: default; opacity: 0.42; }

.band-room-jam {
  display: grid;
  grid-template-columns: minmax(190px, 0.68fr) minmax(230px, 0.9fr) minmax(0, 2fr);
  align-items: stretch;
  gap: 10px;
  min-height: 142px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(91, 209, 205, 0.18);
  background: #1c130b;
}

.band-room-jam-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px; border-left: 2px solid #b58ae8; background: rgba(181, 138, 232, 0.055); }
.band-room-jam-head > div { display: grid; gap: 2px; }
.band-room-jam-head strong { font-size: 0.82rem; }
.band-room-jam-head small { color: var(--text-dim); font-size: 0.58rem; line-height: 1.35; }
.band-room-jam-head .btn { flex: 0 0 auto; }
.band-room-direction { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 6px 9px; padding: 8px 10px; border: 1px solid rgba(91, 209, 205, 0.12); background: #22170e; }
.band-room-direction label { display: grid; min-width: 0; grid-template-columns: 1fr auto; align-items: center; gap: 3px 6px; color: var(--text-dim); font-size: 0.54rem; font-weight: 700; }
.band-room-direction output { color: var(--text); font-variant-numeric: tabular-nums; }
.band-room-direction input { grid-column: 1 / -1; width: 100%; height: 16px; margin: 0; accent-color: var(--accent); }
.band-room-take-parts { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 1px 0 0; padding: 4px; border: 1px solid rgba(91, 209, 205, 0.16); }
.band-room-take-parts legend { padding-inline: 4px; color: var(--text-dim); font-size: 0.48rem; font-weight: 750; }
.band-room-take-parts label { display: flex; min-height: 23px; grid-template-columns: none; justify-content: center; gap: 4px; padding: 3px 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.035); color: var(--text); font-size: 0.5rem; cursor: pointer; }
.band-room-take-parts input { width: 12px; height: 12px; margin: 0; grid-column: auto; }
.band-room-takes { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.band-room-takes > .fine { grid-column: 1 / -1; place-self: center; }
.band-room-take { display: grid; min-width: 0; grid-template-rows: auto auto auto auto 1fr; gap: 5px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 6px; background: #251a10; }
.band-room-take.baseline { background: #20160d; }
.band-room-take.previewing { border-color: rgba(91, 209, 205, 0.72); background: #2b1d11; box-shadow: inset 0 0 0 1px rgba(91, 209, 205, 0.12); }
.band-room-take header { display: flex; align-items: center; gap: 7px; }
.band-room-take header > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 4px; background: rgba(181, 138, 232, 0.16); color: #c9a9ef; font-size: 0.72rem; font-weight: 800; }
.band-room-take header div { display: grid; min-width: 0; gap: 1px; }
.band-room-take header strong { font-size: 0.67rem; }
.band-room-take header small { overflow: hidden; color: var(--text-dim); font-size: 0.5rem; text-overflow: ellipsis; white-space: nowrap; }
.band-room-take p { margin: 0; overflow: hidden; color: var(--text-dim); font-size: 0.58rem; text-overflow: ellipsis; white-space: nowrap; }
.band-take-reference { align-self: center; color: var(--text-dim); font-size: 0.5rem; }
.band-take-meter { display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.band-take-meter li { padding: 2px 4px; border: 1px solid rgba(181, 138, 232, 0.18); border-radius: 3px; color: #b9a6cf; font-size: 0.46rem; font-variant-numeric: tabular-nums; }
.band-take-meter li.fit { border-color: rgba(91, 209, 205, 0.28); color: var(--accent); }
.band-take-destination { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px; color: var(--text-dim); font-size: 0.48rem; }
.band-take-destination select { width: 100%; min-width: 0; min-height: 25px; padding: 2px 5px; font-size: 0.52rem; }
.band-room-take > div { display: flex; align-self: end; justify-content: flex-end; gap: 4px; }
.band-room-take .btn { min-height: 27px; padding: 3px 7px; font-size: 0.58rem; }
.band-room-take .btn.on { border-color: rgba(91, 209, 205, 0.65); color: var(--accent); background: rgba(91, 209, 205, 0.11); }

@media (max-width: 720px) {
  .band-room-topbar { grid-template-columns: auto 1fr auto; min-height: 56px; gap: 8px; padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)); }
  .band-room-heading { display: none; }
  .band-room-now { display: grid; gap: 0; justify-content: start; }
  .band-room-now span { max-width: 150px; }
  .band-room-transport { grid-column: 3; grid-row: 1; }
  .band-room-council { padding: 7px; }
  .band-room-council-form { grid-template-columns: 1fr auto; }
  .band-room-council-form label { display: none; }
  .band-room-chat-trigger { min-height: 34px; }
  .band-room-chat-header { min-height: 56px; }
  .band-room-chat-shell { height: 100%; }
  .band-room-council-log { padding: 14px 10px; }
  .band-council-takes, .band-council-agreement, .band-council-error { margin-left: 0; }
  .band-brief-question > div { grid-template-columns: 1fr; }
  .band-brief-option { min-height: 46px; }
  .band-room-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: calc(100dvh - 56px - 164px); padding: 7px; }
  .band-room-station { grid-template-rows: minmax(225px, 1fr) auto; }
  .band-room-performer { min-height: 225px; }
  .band-room-avatar { bottom: 79px; }
  .band-room-avatar .band-pet-avatar { width: 72px; height: 72px; }
  .band-room-gear { bottom: 38px; transform: translateX(-50%) scale(0.84); }
  .band-room-jam { grid-template-columns: 1fr; min-height: 154px; padding: 7px; }
  .band-room-jam-head { padding: 6px 8px; }
  .band-room-direction { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 8px; }
  .band-room-take-parts { grid-template-columns: repeat(4, minmax(90px, 1fr)); overflow-x: auto; }
  .band-room-takes { overflow-x: auto; grid-template-columns: repeat(4, minmax(180px, 1fr)); scroll-snap-type: x proximity; }
  .band-room-take { scroll-snap-align: start; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .band-room-council { padding: 4px 7px; }
  .band-room-council-form { grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
  .band-room-council-form label { display: none; }
  .band-room-council-form input { min-height: 30px; font-size: 0.62rem; }
  .band-room-council-form .btn { min-height: 30px; padding: 3px 7px; font-size: 0.58rem; }
  .band-room-chat-trigger { min-height: 30px; padding: 4px 7px; }
  .band-room-chat-trigger span { font-size: 0.52rem; }
  .band-room-chat-header { min-height: 42px; padding-block: max(5px, env(safe-area-inset-top)) 5px; }
  .band-room-chat-shell { height: 100%; }
  .band-room-council-log { padding: 8px 12px; }
  .band-room-stage { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: hidden; }
  .band-room-station { grid-template-rows: minmax(0, 1fr) auto; padding: 5px; }
  .band-room-performer { min-height: 0; }
  .band-room-avatar { bottom: 38px; }
  .band-room-avatar .band-pet-avatar { width: 46px; height: 46px; }
  .band-room-gear { bottom: 15px; transform: translateX(-50%) scale(0.48); }
  .band-room-speech { top: 27px; max-height: 48px; padding: 5px 6px; font-size: 0.48rem; }
  .band-room-identity { top: 4px; left: 4px; }
  .band-room-enter { bottom: 3px; font-size: 0.52rem; }
  .band-room-station .band-pet-sound { grid-template-columns: 1fr; gap: 3px; margin-top: 4px; padding: 4px; }
  .band-room-station .band-pet-sound select { min-height: 26px; padding-block: 2px; font-size: 0.58rem; }
  .band-pet-timbre summary { min-height: 22px; padding-inline: 4px; }
  .band-pet-timbre summary small { display: none; }
  .band-timbre-grid { grid-template-columns: 1fr; padding-inline: 4px; }
  .band-room-jam { grid-template-columns: minmax(160px, 0.55fr) minmax(210px, 0.72fr) minmax(0, 2fr); min-height: 112px; max-height: 112px; padding: 5px 7px; }
  .band-room-jam-head { padding: 5px 7px; }
  .band-room-jam-head small { display: none; }
  .band-room-direction { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 6px; }
  .band-room-direction input { height: 12px; }
  .band-room-take-parts { padding: 2px; gap: 2px; }
  .band-room-take-parts legend { display: none; }
  .band-room-take-parts label { min-height: 19px; padding: 2px; font-size: 0.44rem; }
  .band-room-takes { overflow: hidden; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .band-room-take { gap: 2px; padding: 5px; }
  .band-room-take header > span { width: 22px; height: 22px; }
  .band-room-take header small { display: none; }
  .band-room-take p, .band-room-take .band-take-meter, .band-take-destination > span { display: none; }
  .band-take-destination { display: block; }
  .band-take-destination select { min-height: 23px; }
  .band-room-take > div { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
  .band-room-take .btn { min-width: 0; min-height: 24px; padding: 2px; overflow: hidden; font-size: 0; }
  .band-room-take .btn::before { font-size: 0.68rem; }
  .band-room-take [data-band-take-preview]::before { content: '▶'; }
  .band-room-take.previewing [data-band-take-preview]::before { content: '■'; }
  .band-room-take [data-band-take-loop]::before { content: '↻'; }
  .band-room-take [data-band-take-apply]::before { content: '✓'; }
}

@media (prefers-reduced-motion: reduce) {
  .band-room-avatar { animation: none !important; }
  .band-room-speech { animation: none; }
  .band-council-status i { animation: none; }
}

.mixer-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(91, 209, 205, 0.22);
  background: rgba(31, 22, 14, 0.97);
  backdrop-filter: blur(12px);
}

.mixer-topbar h2 { margin: 1px 0 0; font-size: 1.15rem; letter-spacing: 0; }
.mixer-header-actions { display: flex; align-items: center; gap: 6px; }
.mixer-header-actions #mixerPlay,
.mixer-header-actions #mixerLoop { width: 36px; min-width: 36px; padding: 0; }
.mixer-header-actions #mixerLoop.on { border-color: rgba(91, 209, 205, 0.58); background: rgba(91, 209, 205, 0.14); color: #eaffff; }

.mixer-channels {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr)) minmax(150px, 0.72fr);
  gap: 8px;
  min-height: calc(100dvh - 62px);
  padding: 12px;
}

.mixer-channel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  background: #251a10;
}

.mixer-channel > header { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 2px solid rgba(91, 209, 205, 0.35); }
.mixer-channel > header > div { display: flex; gap: 5px; }
.mixer-channel.muted { opacity: 0.65; }
.mixer-channel.soloed { border-color: rgba(91, 209, 205, 0.55); }
.mixer-sound select { width: 100%; }

.mixer-meter {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 52px;
  align-items: center;
  gap: 7px;
  height: 15px;
}

.mixer-meter::before {
  height: 7px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #372a1f 0 8px, #21170f 8px 10px);
  content: '';
}

.mixer-meter i {
  position: absolute;
  left: 0;
  width: calc((100% - 59px) * var(--meter-level, 0));
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(90deg, #54c8bd 0 72%, #e5c85f 88%, #ef776f 100%);
  transition: width 70ms linear;
}

.mixer-meter output { color: var(--text-dim); font-size: 0.62rem; font-variant-numeric: tabular-nums; text-align: right; }

.mixer-control {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 0.76rem;
}

.mixer-control output { color: var(--text); font-variant-numeric: tabular-nums; }
.mixer-control input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.mixer-eq,
.mixer-sends { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.mixer-eq { margin-top: auto; }
.mixer-master { background: #20160d; }
.mixer-master > header { border-bottom-color: rgba(229, 200, 95, 0.58); }
.mixer-master > header .on { border-color: rgba(229, 200, 95, 0.65); background: rgba(229, 200, 95, 0.14); color: #f4dc82; }
.mixer-master-note { display: grid; gap: 3px; padding: 9px; border-left: 2px solid #e5c85f; background: rgba(229, 200, 95, 0.055); font-size: 0.7rem; }
.mixer-master-note span { color: var(--text-dim); }

@media (max-width: 760px) {
  .mixer-topbar { min-height: 54px; padding: 6px 8px; }
  .mixer-topbar .strip-eyebrow { display: none; }
  .mixer-channels {
    grid-template-columns: repeat(4, minmax(154px, 1fr)) minmax(140px, 0.8fr);
    min-width: 800px;
    min-height: calc(100dvh - 54px);
    overflow: visible;
    padding: 7px;
  }
  .mixer-channel { gap: 8px; padding: 9px; }
  .mixer-eq, .mixer-sends { gap: 6px; padding-top: 7px; }
  .mixer-header-actions #resetMixer { width: 34px; overflow: hidden; padding: 0; color: transparent; }
  .mixer-header-actions #resetMixer::after { color: var(--text); content: '↺'; }
}

.composer-strip {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(210px, 0.72fr) auto minmax(265px, 0.9fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-color: rgba(91, 209, 205, 0.16);
  background: linear-gradient(180deg, rgba(32, 24, 17, 0.92), rgba(24, 18, 12, 0.92));
}

.arr-tools::before {
  content: "Composer · " attr(data-section);
  color: #9da8b8;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.composer-flow {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 7px;
  background: rgba(14, 10, 7, 0.5);
}

.flow-choice {
  min-height: 28px;
  padding: 4px 11px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--text-dim);
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 780;
  cursor: pointer;
}

.flow-choice.on {
  border-color: rgba(91, 209, 205, 0.32);
  color: #eaffff;
  background: rgba(91, 209, 205, 0.17);
}

#flowHint {
  margin-left: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#melodyComposer {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(91, 209, 205, 0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(32, 24, 17, 0.92), rgba(24, 18, 12, 0.92));
}

#melodyComposer[hidden] {
  display: none !important;
}

.melody-head,
.melody-actions,
.mel-row,
.melody-ruler,
.melody-suggestion-list,
.melody-palette,
.melody-tension {
  display: flex;
  align-items: center;
}

.melody-head {
  justify-content: space-between;
  gap: 10px;
}

.melody-actions {
  gap: 6px;
}

.melody-edit-tools,
.melody-transport-actions,
.melody-timing-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.melody-settings,
.mel-mobile-label {
  display: none;
}

.melody-palette {
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 1px;
}

.mel-palette {
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.018);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 760;
  white-space: nowrap;
  cursor: pointer;
}

.mel-palette.on {
  border-color: rgba(91, 209, 205, 0.48);
  color: #eaffff;
  background: rgba(91, 209, 205, 0.13);
}

.mel-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.018);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.mel-tool.on {
  border-color: rgba(91, 209, 205, 0.52);
  color: #eaffff;
  background: rgba(91, 209, 205, 0.14);
}

.melody-ruler,
.mel-row {
  min-width: var(--mel-grid-w, 442px);
}

.melody-ruler-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.melody-ruler {
  height: 15px;
  color: var(--text-dim);
  font-size: 0.6rem;
}

.melody-ruler > span:first-child,
.mel-note {
  width: 38px;
  min-width: 38px;
}

.melody-ruler > span:not(:first-child) {
  width: 28px;
  text-align: center;
}

.melody-grid {
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.mel-row {
  height: 32px;
}

.mel-note {
  display: inline-flex;
  align-items: center;
  color: #c7d1dc;
  font-size: 0.68rem;
  font-weight: 750;
}

.mel-step {
  width: 28px;
  min-width: 28px;
  height: 29px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-right-color: rgba(255, 255, 255, 0.045);
  border-radius: 2px;
  color: transparent;
  background: rgba(255, 255, 255, 0.018);
  cursor: pointer;
}

.mel-step:nth-of-type(4n + 1) {
  border-left-color: rgba(91, 209, 205, 0.32);
}

.mel-step:hover {
  background: rgba(91, 209, 205, 0.12);
}

.mel-step.guide {
  border-color: rgba(226, 194, 107, 0.32);
  background: rgba(226, 194, 107, 0.1);
}

.mel-step.on {
  position: relative;
  z-index: 1;
  border-color: transparent;
  color: transparent;
  background: transparent;
  box-shadow: none;
}

.mel-step.on::after {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: var(--mel-span-px, 23px);
  height: 27px;
  content: "";
  border: 1px solid rgba(126, 230, 222, 0.88);
  border-radius: 3px;
  background: #388f8d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

.melody-grid.duration-tool .mel-step.on::after {
  cursor: ew-resize;
}

.melody-grid.duration-tool {
  cursor: ew-resize;
}

.melody-pan-strip {
  min-width: var(--mel-grid-w, 442px);
  height: 12px;
  margin-top: 2px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0 24px, rgba(255,255,255,0.025) 24px 48px);
  touch-action: pan-x;
}

.mel-step.on.color {
  background: transparent;
}

.mel-step.on.chromatic {
  background: transparent;
}

.mel-step.on.color::after { border-color: rgba(126, 185, 255, 0.9); background: #3d6f9e; }
.mel-step.on.chromatic::after { border-color: rgba(237, 157, 105, 0.92); background: #9c5c39; }

.melody-tension {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 27px;
  padding: 7px 0 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.tension-pill {
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
}

.tension-pill.tone { color: #b9f0d2; border-color: rgba(111, 207, 151, 0.36); }
.tension-pill.color { color: #c6ddff; border-color: rgba(126, 185, 255, 0.36); }
.tension-pill.chromatic { color: #ffd0ae; border-color: rgba(237, 157, 105, 0.4); }
.melody-tension.empty { align-items: center; }

.melody-contexts {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.melody-context-list {
  display: flex;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mel-context {
  display: grid;
  gap: 1px;
  min-width: 132px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.mel-context strong { font-size: 0.68rem; }
.mel-context span { color: var(--text-dim); font-size: 0.56rem; }
.mel-context.on { border-color: rgba(91, 209, 205, 0.55); background: rgba(91, 209, 205, 0.12); }

.melody-suggestions {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.melody-suggestion-list {
  align-items: stretch;
  gap: 7px;
  min-height: 35px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.mel-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 3px;
  min-width: 170px;
  padding: 3px;
  border: 1px solid rgba(91, 209, 205, 0.2);
  border-radius: 5px;
  color: var(--text);
  background: rgba(91, 209, 205, 0.055);
}

.mel-suggestion:hover {
  border-color: rgba(91, 209, 205, 0.55);
  background: rgba(91, 209, 205, 0.12);
}

.mel-suggestion-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 4px 5px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.mel-suggestion-apply {
  min-width: 30px;
  border: 1px solid rgba(91, 209, 205, 0.35);
  border-radius: 4px;
  background: rgba(91, 209, 205, 0.12);
  color: var(--accent);
  cursor: pointer;
  font-size: 1rem;
}

.mel-suggestion strong {
  font-size: 0.72rem;
}

.mel-suggestion span {
  color: var(--text-dim);
  font-size: 0.64rem;
}

.mel-suggestion small {
  overflow: hidden;
  color: #91a4b7;
  font-size: 0.55rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strip-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--text-dim);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.composer-template {
  min-width: 0;
}

.template-picker {
  display: block;
}

.template-picker select {
  width: 100%;
  min-height: 42px;
  font-size: 0.95rem;
  font-weight: 700;
  background: rgba(17, 13, 9, 0.68);
}

#templateNote {
  min-height: 16px;
  margin: 6px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arr-tools .audacity {
  display: grid;
  grid-template-columns: auto minmax(88px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.015);
}

.compose-actions {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 7px;
}

.compose-actions .btn {
  min-height: 42px;
  padding-inline: 13px;
  white-space: nowrap;
}

.compose-actions .btn-primary {
  background: #5bd1cd;
  border-color: #5bd1cd;
  color: #071112;
  font-weight: 800;
}

.section-groove {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
}

.section-groove .strip-eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.section-groove .groove-lbl {
  display: grid;
  grid-template-columns: auto minmax(54px, 1fr) 24px;
  gap: 6px;
}

@media (max-width: 1180px) {
  .lane-head {
    display: flex;
    flex-wrap: wrap;
  }

  .lane-head select,
  .lane-total,
  .bars-target,
  .lane [data-act="midi"] {
    flex: 0 1 auto;
  }

  .global-transport,
  .composer-strip {
    grid-template-columns: 1fr 1fr;
  }

  .transport-bank,
  .composer-template {
    grid-column: 1 / -1;
  }

  .section-groove {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .daw-titlebar {
    flex-direction: column;
    align-items: stretch;
  }

  .daw-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .daw-panel-actions,
  #progToolbar {
    justify-content: flex-start;
  }

  .lane-head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .lane-head select,
  .lane-total,
  .bars-target {
    max-width: none;
  }

  .lane.expanded .progression,
  .lane.collapsed .lane-blocks {
    padding-left: 10px;
  }

  .melody-arrangement-lane {
    margin-left: 10px;
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .arr-tools {
    position: static;
  }

  .app-transport-bar {
    left: 0;
  }

  .global-transport,
  .composer-strip {
    grid-template-columns: 1fr;
  }

  .global-transport #playStatus {
    text-align: left;
  }

  .export-strip {
    justify-content: flex-start;
  }

  .compose-actions {
    grid-template-columns: 1fr 1fr;
  }

  .composer-flow {
    flex-wrap: wrap;
  }

  #flowHint {
    width: 100%;
    margin: 1px 6px 4px;
  }
}

@media (max-width: 600px) {
  #melodyComposer {
    padding: 9px;
  }

  .melody-head {
    flex-direction: column;
    align-items: stretch;
  }

  .melody-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .melody-edit-tools,
  .melody-transport-actions {
    min-width: 0;
  }

  .melody-transport-actions {
    justify-content: flex-end;
  }

  .melody-timing-controls {
    display: none;
    grid-column: 1 / -1;
    justify-content: space-between;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  .melody-timing-controls.open {
    display: flex;
  }

  .melody-timing-controls label {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 5px;
    color: var(--text-dim);
    font-size: 0.68rem;
  }

  .melody-timing-controls select {
    min-height: 34px;
    font-size: 0.76rem;
  }

  .melody-settings {
    display: inline-flex;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    align-items: center;
    justify-content: center;
  }

  .mel-mobile-label {
    display: inline;
  }

  .mel-desktop-label {
    display: none;
  }

  #melodyPlay,
  #melodyClear {
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    font-size: 0.88rem;
  }

  .mel-tool {
    min-height: 36px;
    min-width: 36px;
    padding: 0;
    font-size: 0.9rem;
  }

  .mel-tool-label {
    display: none;
  }

  .melody-pan-strip {
    height: 16px;
    margin-top: 4px;
  }

  .melody-tension {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .tension-pill {
    flex: 0 0 auto;
  }
}

@media (max-width: 1180px) {
  .app-transport-bar.global-transport {
    grid-template-columns: auto minmax(120px, 1fr) auto;
  }

  .app-transport-bar .transport-bank {
    grid-column: auto;
  }

  .app-transport-bar .export-strip {
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  #trackPanel {
    padding-top: 104px;
  }

  .app-transport-bar.global-transport {
    grid-template-columns: 1fr auto;
  }

  .app-transport-bar .transport-bank {
    grid-column: 1 / -1;
  }

  .app-transport-bar .tempo-strip {
    grid-column: 1 / 2;
  }
}

/* ===== El Estudio: iconografía del transporte (brief fase 2) =====
   Los glifos unicode (▶ ● ↻ ♪) se reemplazan por SVG enmascarado, que
   hereda currentColor y por eso conserva los estados .on/.rec-on/:disabled.
   btnPlay/btnPlayAll alternan a ■ vía .is-playing (antes era textContent). */
.ico-btn { font-size: 0 !important; }
.app-transport-bar .transport-bank .btn.ico-btn::before,
.ico-btn::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
#btnPlay { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M7%205v14l12-7z%27%2F%3E%3C%2Fsvg%3E"); }
#btnPlay.is-playing { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M6%206h12v12H6z%27%2F%3E%3C%2Fsvg%3E"); }
#btnPlayAll { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%205v14l10-7z%27%2F%3E%3Cpath%20d%3D%27M15%206h5.4v12H15zm1.8%201.8v8.4h1.8V7.8z%27%2F%3E%3C%2Fsvg%3E"); }
#btnPlayAll.is-playing { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M6%206h12v12H6z%27%2F%3E%3C%2Fsvg%3E"); }
#btnRec { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%276%27%2F%3E%3C%2Fsvg%3E"); }
#btnLoop { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M17%202l4.5%204.5L17%2011V8H8a2.5%202.5%200%200%200-2.5%202.5H2A6%206%200%200%201%208%204.5h9zM7%2022l-4.5-4.5L7%2013v3h9a2.5%202.5%200%200%200%202.5-2.5H22A6%206%200%200%201%2016%2019.5H7z%27%2F%3E%3C%2Fsvg%3E"); }
#btnMetro { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M9.4%2020.2L11%206.5h2l1.6%2013.7zM8%2020.4h8v1.8H8z%27%2F%3E%3Cpath%20d%3D%27M12.2%2012.6l4.4-6%201.4%201-4.4%206z%27%2F%3E%3C%2Fsvg%3E"); }
#btnClick { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M10%204.6l9.5-2.4v3L10%207.6z%27%2F%3E%3Cpath%20d%3D%27M8%2015.4a3.3%203.3%200%201%200%202%203V6.6H8z%27%2F%3E%3C%2Fsvg%3E"); }
#openBandRoomTop { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M8.4%2017.2a2.7%202.7%200%201%200%202%202.6V8.4l8.2-1.7v6.8a2.7%202.7%200%201%200%202%202.6V3.4L8.4%205.6z%27%2F%3E%3C%2Fsvg%3E"); }
#openMixerTop { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M5%204h2v16H5z%27%2F%3E%3Cpath%20d%3D%27M2.6%208.4h6.8v2.6H2.6z%27%2F%3E%3Cpath%20d%3D%27M17%204h2v16h-2z%27%2F%3E%3Cpath%20d%3D%27M14.6%2013h6.8v2.6h-6.8z%27%2F%3E%3C%2Fsvg%3E"); }
#btnUndo { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M9%206.4V3L3%208.2l6%205.2V10h5a3.6%203.6%200%200%201%200%207.2h-4V20h4a6.8%206.8%200%200%200%200-13.6z%27%2F%3E%3C%2Fsvg%3E"); }
#btnRedo { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M15%206.4V3l6%205.2-6%205.2V10h-5a3.6%203.6%200%200%200%200%207.2h4V20h-4A6.8%206.8%200%200%201%2010%206.4z%27%2F%3E%3C%2Fsvg%3E"); }

/* ===== El Estudio: la Sala como cuarto, no como grilla de tarjetas =====
   Las estaciones pasan a ser transparentes: lo que separa a cada músico es
   su charco de luz cálida, no un borde. Así el fondo lee como un solo cuarto. */
.band-room-stage::before {
  z-index: -2;
  background:
    radial-gradient(ellipse 82% 42% at 50% -8%, rgba(255, 208, 131, 0.15), transparent 64%),
    linear-gradient(180deg, #291d12 0%, #1d1309 58%, #150d07 100%);
}
/* El piso vive en cada músico, no en el escenario: con la grilla 2x2 de mobile
   un piso único cortaba a media fila y dejaba la de arriba flotando. */
.band-room-performer::before {
  background:
    radial-gradient(ellipse 68% 52% at 50% 34%, color-mix(in srgb, var(--station-accent) 14%, transparent), transparent 72%),
    radial-gradient(ellipse 54% 44% at 50% 90%, rgba(146, 58, 44, 0.24), transparent 70%),
    linear-gradient(180deg, rgba(255, 232, 196, 0.11) 0 1px, transparent 1px),
    repeating-linear-gradient(90deg, rgba(255, 232, 196, 0.05) 0 1px, transparent 1px 54px),
    linear-gradient(180deg, #35240f, #1c1208);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 38%, 100% 38%, 100% 38%;
  background-position: 0 0, 0 0, 0 100%, 0 100%, 0 100%;
}
.band-room-station[data-band-state="playing"] .band-room-performer::before {
  background:
    radial-gradient(ellipse 74% 58% at 50% 34%, color-mix(in srgb, var(--station-accent) 26%, transparent), transparent 74%),
    radial-gradient(ellipse 54% 44% at 50% 90%, rgba(146, 58, 44, 0.24), transparent 70%),
    linear-gradient(180deg, rgba(255, 232, 196, 0.11) 0 1px, transparent 1px),
    repeating-linear-gradient(90deg, rgba(255, 232, 196, 0.05) 0 1px, transparent 1px 54px),
    linear-gradient(180deg, #35240f, #1c1208);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 38%, 100% 38%, 100% 38%;
  background-position: 0 0, 0 0, 0 100%, 0 100%, 0 100%;
}
.band-room-station,
.band-room-station[data-band-state="playing"],
.band-room-station[data-band-state="celebrating"] {
  border-color: transparent;
  background: transparent;
}
/* el estado ahora se lee en la luz del músico, no en la tarjeta */
/* Celebrar cambia sólo la capa de luz; el piso (capas 2-5) queda intacto. */
.band-room-station[data-band-state="celebrating"] .band-room-performer::before {
  opacity: 1;
  background-image:
    radial-gradient(ellipse 76% 60% at 50% 34%, rgba(242, 189, 103, 0.32), transparent 74%),
    radial-gradient(ellipse 54% 44% at 50% 90%, rgba(146, 58, 44, 0.24), transparent 70%),
    linear-gradient(180deg, rgba(255, 232, 196, 0.11) 0 1px, transparent 1px),
    repeating-linear-gradient(90deg, rgba(255, 232, 196, 0.05) 0 1px, transparent 1px 54px),
    linear-gradient(180deg, #35240f, #1c1208);
}
.band-room-identity strong { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85); }
.band-room-identity small { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
/* La sala se aprieta y el nombre baja junto a su músico: sin las tarjetas de
   fondo, un 1fr suelto dejaba ~430px de pared vacía entre nombre y avatar. */
.band-room-stage { min-height: min(calc(100dvh - 64px - 154px), 460px); }
.band-room-identity {
  top: auto;
  right: 0;
  bottom: 188px;
  left: 0;
  text-align: center;
}