* { box-sizing: border-box; }

:root {
  /* Paleta topo oscura: grises cálidos, sin verdes. La referencia son las
     consolas modernas, donde casi todo es neutro y el color se reserva para
     decir "esto está activo". */
  --bg: #0d0d0f;
  --panel: #16161a;
  --panel-2: #1e1e22;
  --border: #2b2b31;
  --text: #eae8e6;
  --text-dim: #8b857e;

  /* Topo claro: destaca sobre el fondo sin gritar. */
  --accent: #bfb1a2;
  --accent-dim: #6b6157;
  --accent-texto: #14130f;   /* texto sobre el acento */

  --peligro: #c96a6a;
  --waveform: #cfcbc6;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- Toolbar ---------- */
.toolbar {
  /* Contenedor de referencia: el transporte se ancla al 50% de la barra.
     Tamaños fijos, no clamp() con vw: antes cada botón cambiaba de tamaño
     (y por lo tanto de posición) según el ancho de la ventana -- una
     consola física no reordena sus controles porque cambiaste de monitor.
     Si la ventana queda muy angosta, la barra se desplaza (overflow-x)
     en vez de encoger o reflowear los botones. */
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.tb-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
  flex-shrink: 0;
}

.tempo-bpm {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  /* Ancho fijo para 3 cifras: sin esto, pasar de 99 a 100 BPM ensanchaba el
     bloque y empujaba todo lo demás de la barra. */
  min-width: 3ch;
  display: inline-block;
  text-align: center;
}
.tempo-sig {
  font-size: 10px;
  color: var(--text-dim);
}

.tb-clock {
  min-width: 0;
}
#clockElapsed {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}
.clock-total {
  font-size: 10px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tb-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  /* Cada botón se planta en el ancho que le pide SU propio texto (TAP no es
     igual de ancho que STEMS): eso ya los hace asimétricos entre sí, en vez
     de una fila de cajas todas iguales como un menú genérico. */
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  white-space: nowrap;
}
.tb-btn:hover { background: #21242a; }
.tb-btn.active { background: var(--accent); color: var(--accent-texto); border-color: var(--accent); }

.tb-icon {
  font-size: 15px;
  padding: 8px 10px;
  /* Centrado de verdad (flex), no el que trae el navegador por defecto para
     un <button>: con glifos asimétricos como ▶ ese centrado "automático"
     puede quedar unos píxeles corrido. Esto es la MISMA solución que ya se
     había aplicado a los botones de la derecha (EDIT/AUTO/STEMS), pero
     nunca había llegado a los del transporte (rebobinar/play/clic). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tb-play {
  color: var(--accent);
  font-size: 18px;
}

/* Antes .tb-btn:last-of-type/#btnMenu/#btnSongs usaban margin-left:auto
   para empujarse a la derecha -- de cuando la barra era flex y tb-right no
   era su propia zona ya alineada al borde. Ahora que .tb-right es una
   columna de grid con justify-content:flex-end (ver más abajo), esas
   reglas solo metían un hueco extra ANTES de #btnSongs sin ningún motivo:
   el grupo entero ya se pega a la derecha, y el gap de .tb-right reparte
   la separación entre todos los botones por igual. */

/* ---------- Song carousel ---------- */
.song-carousel {
  display: flex;
  gap: 12px;
  padding: 14px;
  overflow-x: auto;
  background: var(--bg);
  flex-shrink: 0;
}

.song-card {
  flex: 0 0 auto;
  width: 150px;
  cursor: pointer;
}

.song-thumb {
  width: 150px;
  height: 90px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2a2d33, #1a1c20);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  color: var(--text-dim);
  font-size: 11px;
  overflow: hidden;
}

.song-card.selected .song-thumb {
  border-color: var(--accent);
}

/* ---- Modo edición del repertorio (tecla E) ---- */
.song-thumb { position: relative; }

.song-delete { color: var(--peligro); }
.song-carousel.editing .song-card:not(.add-song) .song-delete { display: flex; }

/* Con el modo edición activo la tarjeta se arrastra, así que no debe
   interpretarse como gesto de desplazamiento del carrusel. */
.song-carousel.editing .song-card:not(.add-song) {
  cursor: grab;
  touch-action: none;
}
.song-carousel.editing .song-card.dragging {
  opacity: 0.6;
  cursor: grabbing;
}
/* En edición la tarjeta se atenúa un poco para que destaquen sus controles.
   Nada de contornos de color: solo estorban y el verde ya no está en la paleta. */
.song-carousel.editing .song-card:not(.add-song) .song-thumb {
  filter: brightness(0.62);
  transition: filter 0.15s;
}
.song-carousel.editing .song-card:not(.add-song):hover .song-thumb { filter: brightness(0.75); }

.add-thumb {
  font-size: 32px;
  color: var(--text-dim);
  border: 2px dashed var(--border);
  background: transparent;
}

.song-title {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 5px;
}

.song-title .play-indicator {
  color: var(--accent);
  font-size: 10px;
}

/* ---------- Waveform overview ---------- */
.waveform-overview.hidden { display: none; }
.waveform-overview {
  position: relative;
  /* Proporcional a la pantalla y no fija: el mezclador es la zona que de
     verdad se maneja en directo, así que la onda le cede altura. */
  height: 23vh;
  min-height: 110px;
  max-height: 320px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
}

/* El canvas queda FUERA del scroll y siempre mide lo que mide el área
   visible: al hacer zoom no crece (nunca supera el tamaño máximo de canvas
   del navegador), solo se redibuja el tramo visible. */
#overviewCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Capa de scroll horizontal: aquí viven las secciones, el playhead y el
   botón "+", posicionados sobre el ancho completo (zoomeado). */
.waveform-scroll {
  position: absolute;
  inset: 0;
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 1;
}
.waveform-scroll::-webkit-scrollbar { height: 8px; }
.waveform-scroll::-webkit-scrollbar-thumb { background: #35383f; border-radius: 4px; }

.waveform-content {
  position: relative;
  height: 100%;
  width: 100%; /* JS la agranda al hacer zoom */
}

.zoom-reset-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.zoom-reset-btn.hidden { display: none; }
.zoom-reset-btn:hover { background: #21242a; }

.playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: #fff;
  pointer-events: none;
  z-index: 3;
}

.waveform-overview.editing {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.sections-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.section-block {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid rgba(255,255,255,0.15);
  border-right: 1px solid rgba(255,255,255,0.15);
}
.section-block .section-tag {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-texto);
  border: 1px solid rgba(255,255,255,0.5);
  cursor: pointer;
  z-index: 3;
}
.section-block .section-tag:hover { transform: scale(1.12); }
.section-block .section-name {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  white-space: nowrap;
}
.section-block.selected {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* Sección marcada "Omitir": se ve siempre (no solo en modo edición) para que
   en vivo quede claro qué tramo se va a saltar la app -- rayado diagonal
   sobre el color propio del tipo, en vez de taparlo con un gris genérico. */
.section-block.omitida {
  background-image: repeating-linear-gradient(
    -45deg, rgba(0,0,0,0.35) 0 6px, transparent 6px 12px
  ) !important;
  opacity: 0.55;
}
.section-block.omitida .section-name::after { content: ' (se salta)'; font-weight: 400; opacity: 0.85; }

/* Manijas de los dos bordes: mueven el inicio o el final de la sección */
.section-block.editable { cursor: grab; }
.section-block.editable:active { cursor: grabbing; }

.section-handle {
  position: absolute;
  top: 0;
  width: 12px;
  height: 100%;
  cursor: ew-resize;
  z-index: 3;
}
.section-handle.start { left: -6px; }
.section-handle.end { right: -6px; }
.section-handle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 2px;
  background: #fff;
  opacity: 0.55;
}
.section-handle:hover::after { opacity: 1; }

/* Previsualización mientras se arrastra para crear una sección nueva */
.drag-selection {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(255,255,255,0.18);
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  pointer-events: none;
  z-index: 2;
}
.drag-selection.hidden { display: none; }

.song-title .song-key {
  color: var(--text-dim);
  font-weight: 400;
}

/* Botón flotante "+" que sigue al playhead: marca sección en el punto exacto donde está pausada/detenida la canción */
.add-marker-btn {
  position: absolute;
  top: 6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-texto);
  border: 2px solid #0b0c0e;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  z-index: 4;
  transform: translateX(-50%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.add-marker-btn.hidden { display: none; }
.add-marker-btn:hover { filter: brightness(1.1); }

/* ---------- Cuadro unificado: elegir tipo de sección / repetir / eliminar ---------- */
.section-overlay-bg {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0,0,0,0.35);
}
.section-overlay-bg.hidden { display: none; }

.section-popup {
  position: fixed;
  z-index: 200;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  /* Ancho para tres columnas: con veinte etiquetas, dos columnas hacían una
     lista larguísima que obligaba a desplazar para ver los coros. */
  width: 330px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.section-popup.hidden { display: none; }
.section-popup-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  text-align: center;
}
.section-popup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
  /* Si aun así no caben, se desplaza solo la rejilla y los botones de abajo
     (Repetir / Eliminar) siguen a la vista. */
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 2px;
}
.section-popup-grid::-webkit-scrollbar { width: 6px; }
.section-popup-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.section-type-btn {
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 9px 4px;
  font-size: 12px;
  font-weight: 700;
  color: #0b0c0e;
  cursor: pointer;
  /* Los nombres largos ("Instrumental", "Sin clasificar") no deben romper la
     rejilla ni salirse del botón. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.section-type-btn.selected { border-color: #fff; }

.section-popup-actions {
  display: flex;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.section-popup-actions.hidden { display: none; }
.section-popup-actions button {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.section-popup-actions button:hover { background: #21242a; }
#btnSectionLoop.active { background: var(--accent); color: var(--accent-texto); border-color: var(--accent); }

/* "Omitir" (saltar la sección al reproducir, sin tocar el audio): solo en
   modo edición, igual que mover/estirar secciones y quitar pistas. */
.section-omitir-btn { display: none; }
body.editando-pistas .section-omitir-btn { display: block; }
.section-omitir-btn.active { background: var(--peligro); color: #fff; border-color: var(--peligro); }

/* ---------- Mixer ---------- */
.mixer {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  padding: 10px 14px;
  gap: 4px;
  background: var(--bg);
}

.mixer-hideable {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow: hidden;
}
.mixer-hideable.hidden { display: none; }

.mixer-tracks {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 2px;
  /* Con la separación por IA una canción puede pasar de 1 pista a 7. Solo se
     desplaza esta zona: la guía, el clic, el pad y el master siguen fijos y
     accesibles, que es lo que hace falta tocando en directo. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Por debajo de ~62px el fader y los botones M/S dejan de poder pulsarse con
   el dedo, así que a partir de ahí se desplaza en vez de seguir encogiendo. */
.mixer-tracks > .channel {
  flex: 1 0 62px;
  min-width: 62px;
}

.mixer-tracks::-webkit-scrollbar { height: 6px; }
.mixer-tracks::-webkit-scrollbar-track { background: transparent; }
.mixer-tracks::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.mixer-tracks::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

.guide-channel-slot {
  flex: 0 1 90px;
  min-width: 34px;
  display: flex;
  padding-right: 8px;
  margin-right: 4px;
  border-right: 1px solid var(--border);
}
.guide-channel-slot .channel { flex: 1 1 auto; }
.guide-channel-slot .channel-label { color: var(--text); font-weight: 600; }
.guide-voice-channel .channel-label { color: var(--text); font-weight: 600; }

.guide-channel-slot .empty-guide {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  opacity: 0.35;
  font-size: 11px;
  padding-bottom: 4px;
}
.fader-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 140px;
  width: 42px;
  margin: 0 auto;
  border-radius: 7px;
  background: var(--panel-2);
  /* Marcas de escala cortas a los lados, como en una consola física -- el
     raíl central ya no es esta capa: ahora es el ::before de abajo, que le
     pone el brillo neón tipo espectro. */
  background-image:
    repeating-linear-gradient(to bottom, var(--fader-marca, rgba(255,255,255,0.18)) 0 1px, transparent 1px 9.09%),
    repeating-linear-gradient(to bottom, var(--fader-marca, rgba(255,255,255,0.18)) 0 1px, transparent 1px 9.09%);
  background-repeat: no-repeat, no-repeat;
  background-size: 8px calc(100% - 22px), 8px calc(100% - 22px);
  background-position: left 3px top 11px, right 3px top 11px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Raíl central: antes una línea negra lisa, ahora un degradé neón tipo
   espectro (verde-amarillo-naranja-rojo), como la iluminación de los faders
   de una consola física moderna. Dos capas:
     ::before -- base tenue, SIEMPRE al 100% del recorrido, para que se siga
                 viendo dónde está el raíl aunque la pista esté en silencio.
     ::after  -- el brillo de verdad, que solo cubre hasta --nivel (el
                 medidor en vivo de ui.js lo actualiza en cada frame): sube y
                 baja con el sonido real de esa pista, como un vúmetro.
   Van en pseudo-elementos aparte (no en el background del wrap) para poder
   difuminarlos con `filter` sin que ese difuminado le pegue también a las
   marcas de escala. El tirador tiene su propio z-index más abajo para
   quedar siempre por encima: al ser ::before/::after position:absolute
   contra un <input> sin posicionar, el navegador los pinta a ELLOS arriba
   por default (position gana sobre el orden del DOM), así que con el brillo
   más marcado el raíl terminaba tapando el tirador -- no alcanzaba con
   pintarse "antes" en el DOM, hacía falta el z-index explícito. */
.fader-wrap { --nivel: 0; }
.fader-wrap::before,
.fader-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to top,
    #16ff6e 0%, #16ff6e 22%,
    #d4ff2e 40%,
    #fff02e 55%,
    #ff9a2e 72%,
    #ff2e3d 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.fader-wrap::before {
  /* Raíl un poco más ancho (2px -> 2.4px de cada lado del centro) y más
     visible en reposo: antes, con el fader casi en silencio, algunos apenas
     se distinguían del fondo. */
  -webkit-mask-image: linear-gradient(to right, transparent calc(50% - 2.4px), #000 calc(50% - 2.4px), #000 calc(50% + 2.4px), transparent calc(50% + 2.4px));
  mask-image: linear-gradient(to right, transparent calc(50% - 2.4px), #000 calc(50% - 2.4px), #000 calc(50% + 2.4px), transparent calc(50% + 2.4px));
  filter: blur(1.2px) brightness(1.05);
  opacity: 0.38;
}
.fader-wrap::after {
  -webkit-mask-image:
    linear-gradient(to right, transparent calc(50% - 2.4px), #000 calc(50% - 2.4px), #000 calc(50% + 2.4px), transparent calc(50% + 2.4px)),
    linear-gradient(to top, #000 calc(var(--nivel) * 100%), transparent calc(var(--nivel) * 100%));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent calc(50% - 2.4px), #000 calc(50% - 2.4px), #000 calc(50% + 2.4px), transparent calc(50% + 2.4px)),
    linear-gradient(to top, #000 calc(var(--nivel) * 100%), transparent calc(var(--nivel) * 100%));
  mask-composite: intersect;
  filter: blur(1.2px) brightness(1.6);
  opacity: 1;
  transition: opacity 0.05s linear;
}

input[type="range"].fader.vertical {
  width: 100%;
  height: 100%;
  /* z-index explícito y mayor que el del raíl (::before/::after de arriba)
     para que el tirador quede siempre encima, sin importar el brillo del
     raíl -- ver la nota junto a .fader-wrap. Sin `position` acá a propósito:
     ya viene position:absolute de la regla de más arriba (input[type=range]
     .fader), que hace falta para que cubra todo el fader-wrap -- pisarla con
     relative le rompería el inset:0 y el fader dejaría de arrastrarse bien
     en todo el recorrido. */
  z-index: 1;
}

/* Tirador ancho con la línea negra de lectura en el centro, como el de una
   consola: es esa línea la que se alinea con las marcas para leer el nivel. */
input[type="range"].fader.vertical::-webkit-slider-thumb {
  /* Imprescindible en WebKit: sin esto en el propio pseudo-elemento se sigue
     dibujando el tirador nativo y todo lo demás se ignora. */
  -webkit-appearance: none;
  appearance: none;
  width: 38px;
  height: 24px;
  border-radius: 4px;
  background:
    linear-gradient(to bottom, transparent calc(50% - 1px), #0a0a0a calc(50% - 1px),
                    #0a0a0a calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(180deg, #e9e6e2 0%, #c3bdb6 44%, #8d8781 52%, #b6b0a9 100%);
  border: 1px solid #16150f;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  cursor: grab;
}
input[type="range"].fader.vertical::-moz-range-thumb {
  width: 38px;
  height: 24px;
  border-radius: 4px;
  background: linear-gradient(180deg, #e9e6e2, #8d8781);
  border: 1px solid #16150f;
}
input[type="range"].fader.vertical:active::-webkit-slider-thumb { cursor: grabbing; }

.solo-btn, .mute-btn { width: 28px; height: 28px; border-radius: 7px; }

/* ---- Nombre y tonalidad de la canción: siempre visibles ---- */
/* El nombre se abrevia si no cabe, pero la tonalidad NUNCA: es el dato que se
   consulta a mitad de un concierto. Por eso el nombre encoge (min-width:0) y la
   tonalidad no (flex-shrink:0). */
.song-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  line-height: 1.3;
}
.song-title > span:not(.song-key):not(.play-indicator) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.song-title .song-key {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--accent);
  font-weight: 600;
}
.song-name[contenteditable="true"] {
  cursor: text;
  border-radius: 4px;
  white-space: normal;
}
.song-name[contenteditable="true"]:hover { background: rgba(255, 255, 255, 0.06); }
.song-name[contenteditable="true"]:focus {
  outline: 1px solid var(--accent);
  background: var(--panel-2);
}
.song-title .play-indicator { flex: 0 0 auto; }
/* Tamaño fijo, no clamp()/vw: igual que la barra de arriba, las tarjetas de
   canción no deben cambiar de tamaño (ni por lo tanto de posición) según el
   ancho de la ventana. */
.song-card { width: 150px; }
.song-thumb { width: 100%; height: 82px; }

/* ---- Rejilla de pads grande y adaptable ---- */
.pad-inline-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}
.pad-inline-header { flex: 0 0 auto; }
.pad-stop { flex: 0 0 auto; }
.pad-key-grid {
  flex: 1 1 auto;
  display: grid;
  /* 6 columnas y 2 filas: es la disposición del propio teclado de pads
     —alteradas arriba (Db Eb Gb Ab Bb B), naturales abajo (C D E F G A)—, así
     que la rejilla no puede reflowear libremente sin romper esa lectura. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
}
.pad-key-grid button {
  min-height: 56px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-dim);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pad-key-grid button:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.pad-key-grid button.active {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-texto);
  font-weight: 700;
}
.pad-key-grid button.suggested { border-color: var(--accent); color: var(--text); }

/* Antes había acá un @media (max-width: 900px) que volvía a meter tamaños
   en vw (song-card, tb-clock) -- pero el ancho mínimo real de la ventana en
   Electron es 900px, así que ese breakpoint nunca se cruza de verdad; solo
   traicionaba el objetivo de que nada cambie de tamaño según la ventana. */

/* Acá había dos @media más (max-width: 640px y max-height: 560px) para
   pantallas angostas/bajas -- también inalcanzables con el mínimo real de
   la ventana en Electron (900x600), y por el mismo motivo que el bloque de
   arriba, se sacaron. */

/* Menú de la tarjeta de canción (tono y tempo), visible solo en modo edición. */
.song-menu { font-size: 16px; }
.song-carousel.editing .song-card:not(.add-song) .song-menu { display: flex; }
.song-menu:hover { background: rgba(40, 44, 50, 0.95); }

/* ==========================================================================
 * Botones de la tarjeta de canción (modo edición) y hoja de ajustes
 * ========================================================================== */

/* Los cuatro controles de la tarjeta se colocan en las esquinas para no taparse
   entre sí ni ocultar la miniatura. */
/* Botones circulares de la tarjeta: mismo tamaño, mismo peso visual y un borde
   que los separa de la miniatura sea cual sea su color. */
.song-next, .song-transition-badge, .song-add-after, .song-delete, .song-menu {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(16, 16, 19, 0.94);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  transition: background 0.13s, transform 0.13s;
}
.song-next:hover, .song-transition-badge:hover, .song-add-after:hover,
.song-delete:hover, .song-menu:hover { background: rgba(46, 46, 52, 0.97); transform: scale(1.08); }

.song-next { top: -8px; left: -8px; }
.song-transition-badge { top: -8px; right: -8px; color: var(--accent); }
.song-add-after { bottom: -8px; left: -8px; font-size: 17px; font-weight: 600; }

.song-carousel.editing .song-card:not(.add-song) .song-next,
.song-carousel.editing .song-card:not(.add-song) .song-transition-badge,
.song-carousel.editing .song-card:not(.add-song) .song-add-after { display: flex; }

.song-next:hover, .song-transition-badge:hover { background: rgba(45, 49, 56, 0.96); }
/* El borrar ocupa el centro, así que se separa de las esquinas. */
/* Borrar y menú, centrados y separados entre sí. El :hover añade su escala
   sobre esta traslación, así que se repite aquí para no perderla. */
.song-carousel.editing .song-delete { top: 50%; left: 50%; margin: -14px 0 0 -34px; }
.song-carousel.editing .song-menu { top: 50%; left: 50%; bottom: auto; right: auto; margin: -14px 0 0 6px; }

/* ---- Hoja de ajustes de canción ---- */
.tp-sheet {
  width: min(460px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  overflow: hidden;
}

.tp-sheet-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.tp-sheet-title { font-weight: 600; font-size: 15px; text-align: center; }
.tp-sheet-cancel, .tp-sheet-ok {
  border: none;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 2px;
}
.tp-sheet-cancel { color: var(--accent); text-align: left; }
.tp-sheet-ok { color: var(--text-dim); text-align: right; font-weight: 600; }
.tp-sheet-ok:hover { color: var(--accent); }

.tp-sheet-body { overflow-y: auto; padding: 4px 0 14px; }

.tp-sheet-section {
  padding: 16px 16px 6px;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tp-sheet-group { background: rgba(255, 255, 255, 0.035); }

.tp-sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tp-sheet-row:last-child { border-bottom: none; }
.tp-sheet-row.disabled { opacity: 0.45; }
.tp-sheet-label { font-size: 14px; }
.tp-sheet-label small { display: block; margin-top: 2px; font-size: 11px; color: var(--text-dim); }

.tp-sheet-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
}
.tp-sheet-value .tp-menu-chev { position: static; transform: none; }

.tp-sheet-input {
  flex: 0 0 96px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  text-align: right;
}

/* Interruptor tipo iOS: el estado se lee de un vistazo desde lejos. */
.tp-switch {
  flex: 0 0 auto;
  width: 50px;
  height: 30px;
  border-radius: 15px;
  border: none;
  background: #4a4e56;
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: background 0.16s;
}
.tp-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.16s;
}
.tp-switch.on { background: var(--accent); }
.tp-switch.on::after { transform: translateX(20px); }

/* ==========================================================================
 * Reparto del mezclador: pistas a la izquierda, pad al centro, master pegado
 * al borde derecho.
 * ========================================================================== */
.mixer { align-items: stretch; gap: 8px; padding: 8px 10px 6px; }

/* Las pistas ocupan el hueco sobrante y ceden cuando el pad se abre. */
.mixer-hideable { flex: 1 1 auto; min-width: 0; }

/* El fader de Pad va pegado a su rejilla: son un mismo instrumento. */
.pad-channel { margin-right: 0; padding-right: 0; }
.pad-inline-panel { margin-left: 0; }

/* Herramientas y master, pegados al costado derecho y sin estirarse. */
.master-tools { flex: 0 0 auto; margin-left: auto; }
.master-channel { flex: 0 0 auto; margin-left: 6px; }

/* Los faders de clic son secundarios: más estrechos para dejar sitio. */
.click-mini .fader-wrap { width: 30px; }

/* ==========================================================================
 * Canales, clic, pads, master y ajustes.
 * ========================================================================== */

.fader-fill {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 8px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: var(--accent-dim);
  pointer-events: none;
  opacity: 0.85;
}

input[type="range"].fader {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  margin: 0;
  position: absolute;
  inset: 0;
  cursor: pointer;
}
input[type="range"].fader.vertical {
  writing-mode: vertical-lr;
  direction: rtl;
}
input[type="range"].fader::-webkit-slider-runnable-track { background: transparent; }
input[type="range"].fader::-moz-range-track { background: transparent; }

.channel-label {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  flex-shrink: 0;
}
.track-name { color: var(--text-dim); }

.solo-btn, .mute-btn {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.solo-btn:hover, .mute-btn:hover { border-color: var(--text-dim); }
.solo-btn.active { background: var(--accent); color: var(--accent-texto); border-color: transparent; }
.mute-btn.active { background: var(--peligro); color: #fff; border-color: transparent; }

/* ---- Grupo del clic ---- */
.click-channel-group {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.click-mini { max-width: 42px; }
.click-master .channel-label { color: var(--accent); font-weight: 600; }

.click-layers { display: flex; gap: 2px; }
.click-layers.hidden { display: none; }
.click-layers-toggle {
  align-self: center;
  width: 16px;
  height: 40px;
  margin-right: 4px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 10px;
  cursor: pointer;
  writing-mode: vertical-rl;
}
.click-layers-toggle:hover { color: var(--accent); border-color: var(--accent); }
.click-layers-toggle.abierto { color: var(--accent); }

.click-toggle {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.click-toggle:hover { border-color: var(--text-dim); }
.click-toggle.active { background: var(--accent); color: var(--accent-texto); border-color: transparent; }

.vol-slider { width: 100%; }

/* ---- Barra superior: grupos que faltaban ---- */
.tb-zone { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Sin reserva de hueco por defecto: el transporte solo flota (y por tanto solo
   necesita sitio reservado) por encima de 1100 px. Reservarlo siempre recortaba
   TAP y CLICK en pantallas medianas. */
.tb-left { grid-column: 1; overflow-x: auto; scrollbar-width: none; padding-right: 0; min-width: 0; }
.tb-left::-webkit-scrollbar { display: none; }
.tb-right {
  grid-column: 3; gap: 4px; min-width: 0;
  /* Mismo arreglo que .tb-left: sin esto, cuando los botones de la derecha
     no entran, en vez de desplazarse se salen de su columna hacia la
     izquierda y tapan al transporte del centro -- justo lo que el
     comentario de acá abajo dice que nunca debería pasar. Encontrado
     probando el ancho de una tablet (768px); el cálculo real dice que ya
     pasaba desde script un poco por debajo de los 930px, así que también
     era un bug latente de escritorio con la ventana angosta, no solo un
     problema de celular/tablet.
     justify-content:flex-start (no flex-end) por lo mismo: con flex-end el
     desplazamiento arranca mostrando el FINAL de la fila (Ayuda/Menú) y
     esconde EDIT/AUTO/STEMS, los botones que más se usan. flex-end vuelve
     más abajo en el archivo (@media min-width:1000px), donde ya sobra
     espacio de sitio y no hay nada que desplazar -- ahí sí conviene pegado
     al borde derecho en vez de apilado contra el centro. */
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
}
.tb-right::-webkit-scrollbar { display: none; }
/* A partir de acá ya sobra sitio de sobra (ver cálculo arriba en .tb-right):
   pegar el grupo de la derecha contra el borde vuelve a verse mejor que
   apilado contra el centro, y ya no hay nada que desplazar. */
@media (min-width: 1000px) {
  .tb-right { justify-content: flex-end; }
}
/* Columna central de la grilla: le corresponde su propio hueco reservado,
   nunca puede pisar a tb-left/tb-right sin importar el ancho de la ventana
   -- por eso ya no usa position:absolute (ver también la regla de más abajo). */
.tb-center { grid-column: 2; justify-self: center; }
.tb-transport { display: flex; align-items: center; gap: 10px; }
/* Tamaño fijo -- hay una regla más abajo en el archivo que ya lo fijaba en
   px (54/66px), pero ésta seguía en clamp()/vw y quedaba como código muerto
   confuso: mismo valor en las dos, para que no dependa de cuál "gana". */
.tb-transport .tb-icon { width: 54px; height: 54px; font-size: 22px; border-radius: 12px; }
.tb-transport .tb-play { width: 66px; height: 66px; font-size: 27px; }

.tb-tempo { flex-direction: column; align-items: center; gap: 0; padding: 4px 10px; }
.tb-tempo-oct { flex-direction: column; gap: 2px; }
.tb-tempo-oct button {
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 11px;
  cursor: pointer;
}
.tb-tempo-oct button:hover { border-color: var(--text-dim); color: var(--text); }

.tb-stack { display: flex; flex-direction: column; gap: 3px; }
.tb-stack > button { width: 100%; padding: 5px 14px; font-size: 12px; }
.tb-tap { position: relative; }
.tap-count { margin-left: 4px; font-size: 10px; color: var(--accent); }

/* ---- Pads ---- */
.pad-channel { flex: 0 0 auto; max-width: 60px; }
.pad-track-channel .channel-label { color: var(--text); font-weight: 600; }

/* Perillas de Brightness/Shimmer: entre el fader de fuera y la rejilla de
   tonalidades, una alineada con la fila de arriba (Db-B) y otra con la de
   abajo (C-A) -- mismo tamaño que los botones de nota, no un adorno chico. */
.pad-key-grid-fila {
  flex: 1 1 auto;
  display: flex;
  gap: 10px;
  min-height: 0;
}
.pad-key-grid-fila .pad-key-grid { flex: 1 1 auto; }
.pad-perillas-columna {
  flex: 0 0 auto;
  width: 80px;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.pad-perillas-columna.hidden { display: none; }
.pad-perillas-columna .tp-knob {
  height: 100%;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
}
.pad-perillas-columna .tp-knob-svg { width: 48px; height: 48px; }
.pad-perillas-columna .tp-knob-label { font-size: 11px; }
.pad-perillas-columna .tp-knob-valor { font-size: 12px; }

.pad-inline-header { display: flex; gap: 6px; }
.pad-type-select {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.pad-type-select:hover { border-color: var(--text-dim); }
.pad-type-select #padTypeLabel { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pad-type-swatch { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; }
.chev { color: var(--text-dim); flex-shrink: 0; }

.pad-link-btn {
  flex: 0 0 auto;
  min-width: 76px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}
.pad-link-btn.active { background: var(--accent); color: var(--accent-texto); border-color: transparent; }

.pad-stop {
  padding: 9px;
  border-radius: 10px;
  border: 1px solid var(--peligro);
  background: transparent;
  color: var(--peligro);
  font-size: 13px;
  cursor: pointer;
}
.pad-stop:hover { background: rgba(201, 106, 106, 0.12); }

/* Selector de paquete de pads, a pantalla completa */
.pad-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.62);
}
.pad-overlay.hidden { display: none; }
.pad-panel {
  width: min(520px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  overflow: hidden;
}
.pad-panel-header, .settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.pad-panel-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pad-panel-list button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.pad-panel-list button:hover { border-color: var(--text-dim); }
.pad-close, .pad-cancel {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
}
.pad-close:hover, .pad-cancel:hover { color: var(--text); border-color: var(--text-dim); }
.pad-cancel { margin: 8px; }

/* ---- Master y herramientas ---- */
.master-channel { max-width: 64px; }
.master-channel .channel-label { color: var(--text); font-weight: 600; }
.master-tools {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  padding: 0 8px;
  border-left: 1px solid var(--border);
}
.tool-btn {
  /* Ancho Y alto fijos, no min-width/padding solo: los 5 botones (BUSES, PAD
     PLAYER, SAMPLE PADS, LETRA, LOOP) tienen etiquetas de largo distinto --
     "PAD PLAYER"/"SAMPLE PADS" ocupan dos líneas y "BUSES"/"LETRA" una sola,
     así que con solo un ancho fijo la ALTURA seguía saliendo distinta según
     cuántas líneas ocupara el texto. Con height fijo + flex centrado, los
     cinco quedan del mismo tamaño exacto sin importar el texto. */
  width: 62px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.tool-btn:hover { border-color: var(--text-dim); color: var(--text); }
.tool-btn.active { background: var(--accent); color: var(--accent-texto); border-color: transparent; }
.tool-glyph { display: block; font-size: 20px; }   /* LOOP: el único botón con símbolo -- más grande para que se note */

/* ---- Panel de configuración ---- */
.settings-panel {
  width: min(880px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  overflow: hidden;
}
/* Dos columnas de altura equilibrada.
   Se usa `columns` (multicolumna) y no `grid` a propósito: el navegador reparte
   los grupos solo para que ambos lados queden a la misma altura. Con una
   rejilla había que repartirlos a mano y bastaba añadir un ajuste para que se
   descuadrara otra vez —era el caso: 21 filas a la izquierda y 6 a la derecha. */
.settings-grid {
  overflow-y: auto;
  padding: 14px 16px 18px;
  columns: 2;
  column-gap: 18px;
}

/* Cada grupo es una tarjeta que nunca se parte entre columnas. */
.settings-grupo {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;   /* hace efectivo el "no partir" en multicolumna */
  width: 100%;
  margin: 0 0 14px;
  padding: 4px 14px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}
body.tema-claro .settings-grupo { background: rgba(0, 0, 0, 0.025); }

.settings-group-title {
  margin: 0;
  padding: 12px 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Dentro de la tarjeta, la última fila no lleva línea. */
.settings-grupo .settings-row:last-child { border-bottom: none; }

/* Secciones que solo andan en la app instalada de computadora (MIDI, OSC,
   SMPTE/LTC, etc. -- ver marcarFuncionesSoloEscritorio() en main.js). Se
   apagan visualmente en vez de esconderse: así quien abre MS-Live desde el
   celular igual VE todo lo que la app sabe hacer, y entiende que para eso
   hace falta la computadora -- esconderlas daría a entender que no existen. */
.settings-grupo.solo-escritorio .settings-row { opacity: 0.45; }
.settings-grupo.solo-escritorio .settings-row * { cursor: not-allowed; }
/* wrap: en un celular angosto el título ya se parte en dos líneas -- sin
   esto la etiqueta le robaba todavía más ancho en vez de bajar sola. */
.settings-group-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.solo-escritorio-tag {
  /* No hereda el uppercase/letter-spacing del título: es una etiqueta de
     estado, no parte del nombre de la sección. */
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  white-space: nowrap;
  cursor: help;
}

.estadored-qr-row { flex-direction: column; align-items: flex-start; }
.estadored-qr-row.hidden { display: none; }
.estadored-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; }
.estadored-qr img { border-radius: 8px; background: #fff; padding: 8px; }
.estadored-qr span { font-size: 11px; color: var(--text-dim); }

@media (max-width: 720px) {
  .settings-grid { columns: 1; }
}
/* Etiqueta y control en la misma línea mientras quepan; si no, el control baja
   a la línea de abajo. Antes el control mantenía su ancho fijo y era el texto
   el que se estrujaba, partiéndose en tres o cuatro líneas de dos palabras. */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.settings-row > div { flex: 1 1 170px; min-width: 0; }
.settings-row b { font-size: 13px; font-weight: 500; }
.settings-row small { display: block; margin-top: 2px; font-size: 11px; color: var(--text-dim); }
.settings-row select, .settings-row input[type="text"], .settings-row input[type="number"] {
  flex: 0 1 168px;
  min-width: 120px;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}
.settings-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.settings-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.settings-btn:hover { border-color: var(--text-dim); }

.section-label { font-size: 11px; color: var(--text-dim); }

/* ---- Menús emergentes y formulario modal ---- */
.tp-menu {
  position: fixed;
  z-index: 320;
  min-width: 230px;
  max-width: 320px;
  padding: 6px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.tp-menu-title {
  padding: 6px 10px 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tp-menu-sep { height: 1px; margin: 5px 8px; background: var(--border); }
.tp-menu-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 9px 26px 9px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.tp-menu-item:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); }
.tp-menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
.tp-menu-item small { display: block; margin-top: 2px; font-size: 11px; color: var(--text-dim); }
.tp-menu-chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); }

.tp-modal-bg {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.62);
}
.tp-modal {
  width: min(420px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 18px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.tp-modal-title { margin-bottom: 14px; font-size: 15px; font-weight: 600; }
.tp-modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.tp-modal-row b { font-size: 13px; font-weight: 500; }
.tp-modal-row small { display: block; margin-top: 2px; font-size: 11px; color: var(--text-dim); }
.tp-modal-row input, .tp-modal-row select {
  flex: 0 0 140px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}
.tp-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
/* Desplegable a lo ancho del modal (elegir pista, etc.) -- mismo aspecto que
   los campos de .tp-modal-row, pero sin el ancho fijo de aquellos. */
.tp-select {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}
.tp-modal-ancho { width: min(560px, 100%); }
.tp-modal-ayuda { margin: 0 0 12px; font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.tp-textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  overflow-y: auto;
  max-height: 55vh;
}
.tp-btn {
  padding: 8px 16px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.tp-btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-texto); font-weight: 600; }
.tp-btn:hover { border-color: var(--text-dim); }

/* ==========================================================================
 * Ajuste final: barra superior con más presencia y faders de consola densos.
 * ========================================================================== */

/* ---- Barra superior más grande ---- */
/* Todo en píxeles fijos, nada de vw: antes esta sección de ajuste final
   pisaba los tamaños fijos de más arriba con clamp()s que sí cambiaban con
   el ancho de la ventana, y encima el transporte saltaba entre centrado
   absoluto y flujo normal en el breakpoint de 1100px -- dos posiciones
   distintas para lo mismo. Ahora es una sola, siempre. */
.toolbar { padding: 7px 14px; gap: 8px; }

.tb-btn {
  padding: 10px 16px;
  font-size: 13px;
  border-radius: 10px;
}
.tb-icon { width: 46px; height: 46px; font-size: 18px; }
.tb-transport { gap: 9px; }
.tb-transport .tb-icon { width: 54px; height: 54px; font-size: 22px; border-radius: 13px; }
.tb-transport .tb-play { width: 66px; height: 66px; font-size: 27px; }

.tb-clock { padding: 5px 15px; border-radius: 11px; }
#clockElapsed { font-size: 34px; }
.tb-clock .clock-total { font-size: 11px; }

.tempo-bpm { font-size: 25px; }
.tempo-sig { font-size: 11px; }
.tb-tempo { padding: 5px 12px; border-radius: 11px; }

.tb-tempo-oct button { padding: 4px 10px; font-size: 12px; }
.tb-stack > button { padding: 7px 16px; font-size: 12px; }

/* Centrado de VERDAD respecto a toda la barra (mitad de su ancho total), no
   solo en el hueco que le dejan tb-left/tb-right -- si esos dos miden
   distinto entre sí, centrar por margin:auto dentro del flujo lo deja
   descentrado. Absoluto y SIEMPRE así, sin condición de ancho de ventana:
   una sola posición, no dos que puedan "saltar" entre sí. */
.tb-center { grid-column: 2; justify-self: center; }

/* ---- Faders: la escala ocupa el alto disponible sin quedar vacía ----
   El problema no era el tamaño sino el vacío: un raíl larguísimo sin nada
   alrededor. Ahora el recorrido va acotado, el nivel se ve pintado bajo el
   tirador y las marcas acompañan todo el trayecto. */
/* Tira de canal: S arriba, fader que crece con el hueco, nombre y M abajo.
   Sin `display:flex` el fader no puede estirarse y se queda en su altura
   mínima, dejando medio mezclador vacío. */
.channel {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.fader-wrap {
  /* Crece con todo el alto disponible del mezclador -- antes tenía un tope
     de 320px "para que no quedara vacío abajo en pantallas altas", pero el
     efecto real era al revés: dejaba una franja de espacio sin usar entre
     el fader y el borde de la ventana. Sin tope, solo con el piso mínimo
     para que el recorrido nunca quede inservible. */
  flex: 1 1 auto;
  min-height: 130px;
  width: 40px;
  border-radius: 8px;
  background-color: #0f0f11;
  background-size: 100% 100%, 7px calc(100% - 26px), 7px calc(100% - 26px);
  background-position: center, left 4px top 13px, right 4px top 13px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 2px 7px rgba(0, 0, 0, 0.6);
}

/* Nivel: barra clara bajo el tirador, para leer la posición de un vistazo
   incluso de lejos y de reojo. */
.fader-fill {
  width: 6px;
  border-radius: 3px;
  background: var(--accent);
  opacity: 0.55;
}

input[type="range"].fader.vertical::-webkit-slider-thumb {
  width: 34px;
  height: 20px;
  border-radius: 3px;
}
input[type="range"].fader.vertical::-moz-range-thumb { width: 34px; height: 20px; }

.solo-btn, .mute-btn { width: 30px; height: 30px; font-size: 12px; }
.channel-label { font-size: 12px; }

/* "+" al final de la fila de faders: agrega una pista suelta a la canción
   actual, sin tener que rehacerla entera desde "Añadir canción". Solo en
   modo edición, igual que quitar pista/EQ/paneo manual -- así no estorba
   mientras se toca en vivo. */
.channel-add { display: none; justify-content: center; }
body.editando-pistas .channel-add { display: flex; }
.channel-add-btn {
  flex: 1 1 auto;
  min-height: 130px;
  max-height: 320px;
  width: 40px;
  border-radius: 8px;
  border: 2px dashed var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 22px;
  font-weight: 300;
  cursor: pointer;
}
.channel-add-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Los canales de clic son auxiliares: se mantienen finos. */
.click-mini .fader-wrap { width: 28px; background-size: 100% 100%, 5px calc(100% - 26px), 5px calc(100% - 26px); }
.click-mini { max-width: 38px; }

/* ---- Tabla de pads dentro del mezclador ----
   Con el mezclador oculto queda todo el ancho para los pads, que es lo que se
   busca al abrirla: superficie grande para tocar sin apuntar. */
.pad-inline-panel { flex: 1 1 auto; }
.pad-inline-panel.hidden { display: none; }
.pad-key-grid button { min-height: 70px; font-size: 22px; }

/* Pad Player/Pads de disparo/Letra comparten el mismo hueco DENTRO de la
   fila del mezclador (flex:1 1 auto, apretados entre el fader del pad y la
   columna Buses/Master, que no ceden). Con tablet/celular ese hueco no
   alcanza -- probado a 375px: la columna de perillas (80px fijos) sola casi
   se comía todo el espacio, la rejilla de tonalidades quedaba en tiras de
   pocos píxeles y, como nada de esto tenía overflow, el sobrante no
   desplazaba sino que se salía encima de los botones de Buses/Master.
   Abajo de esto, los tres pasan a pantalla completa (mismo patrón que
   .pad-overlay/Configuración) en vez de pelear por sitio en la fila. */
/* Fuera de los tamaños de celular/tablet el panel vive dentro de la fila del
   mezclador y se cierra con su propio botón (PAD PLAYER) o con la tecla X:
   la aspa sobra. Tiene que declararse ANTES del @media que la muestra -- si
   va después, al tener la misma especificidad gana por orden y la X no
   aparece nunca (que es justo lo que pasó la primera vez). */
.panel-cerrar-pantalla {
  display: none;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.panel-cerrar-pantalla:hover { border-color: var(--text-dim); }

/* El segundo criterio, max-height, NO es un extra: un celular ACOSTADO es
   ancho de sobra (no cruza los 820px) pero bajísimo, y ahí el problema no es
   que no entre a lo ancho sino que el mezclador y los paneles quedan
   cortados por abajo -- faders sin su etiqueta, botones de mute
   inalcanzables. Con solo el criterio de ancho, un celular en horizontal
   se quedaba con la disposición de escritorio y era inusable. */
@media (max-width: 820px), (max-height: 620px) {
  .pad-inline-panel:not(.hidden),
  .sample-pads-panel:not(.hidden),
  .letra-panel:not(.hidden) {
    position: fixed;
    /* Debajo de la barra de arriba, no encima: el transporte (play, tiempo,
       tempo) tiene que seguir a la vista y alcanzable mientras se opera un
       pad o se lee la letra -- es lo único que de verdad no se puede perder
       en mitad de un directo. */
    top: var(--barra-alta, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background: var(--bg);
    padding: 14px;
    overflow-y: auto;
  }
  /* La cabecera de Pads de disparo/Letra (título + ayuda + botones de zoom/
     velocidad/Expandir/Editar/Cerrar) no tenía wrap ni overflow -- con la
     pantalla completa de arriba se volvió alcanzable, y sin esto "Cerrar"
     quedaba fuera de la pantalla sin ninguna forma de volver al mezclador
     salvo la tecla X. */
  .sample-pads-header { flex-wrap: wrap; row-gap: 8px; }
  .sample-pads-header small { flex-basis: 100%; }

  /* Con el panel a pantalla completa, el botón del mezclador que lo abrió
     queda tapado: hace falta una X propia para volver (en un celular no hay
     tecla X). */
  .panel-cerrar-pantalla { display: inline-flex; }

  /* El mezclador en sí también se cortaba por abajo en horizontal. Que se
     desplace en vez de recortar: más vale llegar a los controles bajando el
     dedo que no llegar nunca. */
  .mixer { overflow-y: auto; }
  .fader-wrap { min-height: 90px; }
}

/* En un celular acostado el alto es TODO lo que hay, y estaba mal repartido:
   medido a 360px de alto, la barra (82) + el carrusel de canciones (132) +
   la vista de ondas (110) se comían 324, y al mezclador -- lo único que se
   opera de verdad en pleno directo -- le quedaban 36 píxeles. Los faders
   salían aplastados, sin etiqueta ni botón de mute alcanzable: eso es lo que
   hacía la app inusable en el celular, no un problema de ancho.
   Acá se le devuelve el sitio al mezclador quitándoselo a lo accesorio. */
/* ==========================================================================
 * Reparto horizontal del mezclador.
 * Las pistas son lo único elástico; guía, clic, pad, herramientas y master
 * tienen ancho propio y no se salen de la pantalla.
 * ========================================================================== */
.mixer { overflow: hidden; }

.mixer-hideable { flex: 1 1 0; min-width: 0; overflow: hidden; }
.mixer-tracks { flex: 1 1 0; min-width: 0; }

.guide-channel-slot,
.click-channel-group,
.pad-channel,
.master-tools,
.master-channel { flex: 0 0 auto; }

/* Anchos de la parte derecha. Van holgados a propósito: son los controles que
   se buscan a ciegas en mitad de un tema, y apretados no se aciertan. Lo que
   cede es la zona de pistas, que además se desplaza. */
.guide-channel-slot {
  flex-basis: 78px;
  padding-right: 14px;
  margin-right: 10px;
}

.click-channel-group {
  gap: 5px;
  padding-left: 14px;
  margin-left: 4px;
}
.click-mini { max-width: 46px; }
.click-mini .fader-wrap { width: 32px; }
.click-mini .channel-label { font-size: 11px; }

.pad-channel { max-width: 66px; margin-left: 12px; }
.master-channel { max-width: 74px; margin-left: 12px; }

.master-tools {
  padding: 0 14px;
  gap: 8px;
  margin-left: 10px;
}
.tool-btn {
  width: 92px;
  height: 62px;
  font-size: 11.5px;
  padding: 6px 6px;
  border-radius: 11px;
  line-height: 1.3;
}
.tool-glyph { font-size: 24px; margin-bottom: 1px; }

/* ==========================================================================
 * Pads de disparo (doble P)
 * ========================================================================== */
.sample-pads-panel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sample-pads-panel.hidden { display: none; }

/* ==========================================================================
 * Letra y acordes -- mismo molde que Pads de disparo (misma cabecera,
 * mismo espacio en el mezclador), solo cambia el cuerpo.
 * ========================================================================== */
.letra-panel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.letra-panel.hidden { display: none; }

/* Herramientas de chart (Premium): notación, capo, densidad. */
.letra-panel-herramientas {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0 2px 2px;
}
.letra-herramienta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
}
.letra-herramienta .tp-select { padding: 5px 8px; font-size: 12px; }
#btnLetraCondensado.active { background: var(--accent); color: var(--accent-texto); border-color: transparent; }
/* Acá "active" significa APAGADO (el estado que hace falta remarcar -- "ON"
   ya se sobreentiende por ser lo normal, "OFF" es la excepción que hay que
   notar de un vistazo). */
#btnLetraAutoScroll.active { background: var(--peligro); color: #fff; border-color: transparent; }
#btnLetraColumnas.active { background: var(--accent); color: var(--accent-texto); border-color: transparent; }

/* Dos columnas: van DENTRO del mismo contenedor que ya se desplaza en
   vertical (letraPanelBody) -- nunca se crea un segundo contenedor con su
   propio scroll. Así el rodillo automático sigue funcionando exactamente
   igual (scrollTop/scrollHeight de un solo eje), sin tener que rehacer esa
   cuenta para un layout de columnas de verdad.
   Por defecto (pantalla angosta, celular) queda en bloque: las dos mitades
   se leen una detrás de la otra, como si fuera una sola columna -- "solo
   funciona en pantallas grandes" es automático por el media query, no hace
   falta lógica aparte para el celular. */
.letra-panel-columnas { display: block; }
@media (min-width: 900px) {
  .letra-panel-columnas.dos-columnas {
    display: flex;
    align-items: flex-start;
    gap: 48px;
  }
  .letra-panel-columnas.dos-columnas .letra-panel-col { flex: 1 1 0; min-width: 0; }
}
/* Mapa de canción (Tipo de cifrado): lista de secciones en el orden real del
   arreglo, cada fila clickeable para saltar ahí. */
.letra-mapa-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 6px;
  border: none;
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.letra-mapa-fila:hover { background: var(--border); }
.letra-mapa-punto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--chip-color, var(--accent));
  flex: none;
}
.letra-mapa-nombre { flex: 1 1 auto; font-weight: 600; }
.letra-mapa-dur { color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Estilo condensado: versos más pegados, para ver más canción de un vistazo. */
.letra-panel-body.condensado .letra-panel-linea { margin: 0 0 1px; line-height: 1.5; }
.letra-panel-body.condensado .letra-panel-linea.con-acordes { padding-top: 1.3em; }
.letra-panel-body.condensado .letra-panel-seccion-header { margin: 10px 0 4px; }

/* Pantalla completa (tecla Y): para leer de lejos, en un atril o
   proyectado -- tapa TODA la app, no solo el hueco del mezclador. Mismo
   fondo y tipografía que el resto de la app (nada de un estilo aparte),
   pero con la letra bastante más grande, que es lo único que hace falta
   para leerla de lejos. */
.letra-panel.pantalla-completa {
  position: fixed;
  inset: 0;
  /* Por debajo de .tp-modal-bg (210): "Editar" y el selector de pista tienen
     que seguir viéndose encima aunque la letra esté en pantalla completa. */
  z-index: 205;
  background: var(--bg);
  padding: 18px 24px;
  gap: 14px;
}
.letra-panel.pantalla-completa .letra-panel-body {
  --letra-font-size: 44px !important;
}
.letra-panel.pantalla-completa .sample-pads-header span { font-size: 18px; }
#btnLetraPanelExpandir.active { background: var(--accent); color: var(--accent-texto); border-color: transparent; }

/* Control de tamaño de letra: botones A-/A+ en la cabecera, aplican una
   variable CSS que lee .letra-panel-linea -- para leer parado, lejos del
   atril, sin tener que reabrir ningún menú. */
.letra-panel-zoom { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.letra-zoom-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.letra-zoom-btn:hover { border-color: var(--text-dim); }
.letra-zoom-btn:disabled { opacity: 0.35; cursor: default; }
.letra-vel-valor {
  min-width: 28px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
/* Solo tiene sentido con la letra en modo rodillo (sin marcas de tiempo):
   con marcas el scroll salta exacto, no hay "velocidad" que ajustar. */
#letraPanelVelocidadFila.hidden { display: none; }

/* Franja de secciones -- mismos colores que la tira de arreglo sobre la onda,
   así el operador reconoce la estructura de un vistazo y puede saltar a
   cualquier bloque tocando su círculo, sin buscar la línea en el texto. */
.letra-panel-secciones {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 2px 4px;
}
.letra-panel-secciones::-webkit-scrollbar { display: none; }
.letra-panel-secciones.hidden { display: none; }
.letra-seccion-chip {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--chip-color, var(--panel-2));
  color: #16161a;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.letra-seccion-chip:hover { transform: scale(1.08); }
.letra-seccion-chip.actual {
  border-color: var(--text);
  transform: scale(1.15);
}

.letra-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* 12px horizontal se sentía pegado a la pared, sobre todo en modo clásico
     (alineado a la izquierda -- sin el centrado normal no hay nada que le
     dé aire al texto del lado izquierdo). */
  padding: 28px 28px 24px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  --letra-font-size: 20px;
}
/* Formato clásico de cifrado (línea de acordes sueltos arriba, alineados a
   mano con espacios, letra abajo): la única forma de que esa alineación se
   vea igual que como se escribió es con una fuente de ancho fijo y sin
   colapsar los espacios -- monoespaciado + pre-wrap reproduce EXACTO lo que
   la persona tecleó, sin adivinar sobre qué sílaba va cada acorde. Alineado
   a la izquierda a propósito: centrado (el modo normal) corre cada línea un
   ancho distinto según su propio largo y rompe la relación de columnas entre
   la línea de acordes y la de letra que tiene debajo. */
.letra-panel-body.modo-clasico .letra-panel-linea {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre-wrap;
  text-align: left;
  overflow-x: auto;
}
.letra-panel-body.modo-clasico { overflow-x: auto; }

/* Encabezado de sección entre bloques de letra, del mismo color que su chip
   arriba -- para saber en qué parte de la canción se está sin contar líneas. */
.letra-panel-seccion-header {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chip-color, var(--text-dim));
  margin: 22px 0 8px;
}
.letra-panel-seccion-header:first-child { margin-top: 0; }

.letra-panel-linea {
  font-size: var(--letra-font-size, 20px);
  line-height: 2.1;
  color: var(--text-dim);
  opacity: 0.4;
  text-align: center;
  margin: 0 0 6px;
  transition: opacity 0.2s, color 0.2s, transform 0.2s;
  scroll-margin: 40vh;
}
/* Sitio para el acorde que flota arriba de la palabra: sin esto se montaba
   sobre el encabezado de sección anterior. Solo en las líneas que llevan
   acordes, para no separar de más las que no tienen. */
.letra-panel-linea.con-acordes { padding-top: 1.5em; }
.letra-panel-linea.actual {
  opacity: 1;
  color: var(--text);
  font-weight: 600;
  transform: scale(1.03);
}
/* Acorde flotando arriba de su palabra -- como un chart real, en vez del
   corchete en línea ([G]palabra). El texto guardado sigue siendo el mismo
   formato ChordPro de siempre; esto solo cambia cómo se dibuja. */
.letra-panel-linea .letra-word {
  position: relative;
  display: inline-block;
}
/* Cada tema define --accent junto con --accent-texto (el color pensado a
   propósito para leerse bien ENCIMA de --accent) -- por eso el acorde va en
   una placa con ese mismo par, no como texto de color suelto: así el
   contraste lo resuelve el propio tema, no un valor fijo que en algunos
   temas (acentos claros como el de nieve o el dorado) se leía mal sobre el
   fondo oscuro del panel. */
.letra-panel-linea .letra-chord {
  position: absolute;
  left: 0;
  top: -1.35em;
  font-size: 0.56em;
  font-weight: 800;
  background: var(--accent);
  color: var(--accent-texto);
  white-space: nowrap;
  line-height: 1.6;
  padding: 0 0.4em;
  border-radius: 4px;
}
/* Acorde suelto, sin palabra debajo: líneas de intro, interludio o solo.
   A diferencia del acorde normal (que flota sobre su palabra), este ocupa
   su lugar en la línea. */
.letra-panel-linea .letra-chord-solo {
  display: inline-block;
  margin: 0 0.35em;
  font-size: 0.7em;
  font-weight: 800;
  background: var(--accent);
  color: var(--accent-texto);
  line-height: 1.6;
  padding: 0 0.4em;
  border-radius: 4px;
}
.letra-panel-vacio {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  max-width: 40ch;
  margin: 40px auto 0;
}

.sample-pads-header {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 2px 2px 0;
}
.sample-pads-header span { font-size: 14px; font-weight: 600; }
.sample-pads-header small { flex: 1 1 auto; font-size: 11px; color: var(--text-dim); }

.sample-pads-grid {
  flex: 1 1 auto;
  display: grid;
  /* Cinco columnas y dos filas: la misma disposición que las teclas
     F G H J K / V B N M <, para poder tocarlos con la mano puesta. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
}

.sample-pad {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 68px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, transform 0.08s;
}
.sample-pad:hover { background: rgba(255, 255, 255, 0.06); }
.sample-pad.cargado { border-color: var(--accent-dim); background: rgba(191, 177, 162, 0.07); }

/* Confirmación visual del disparo: en directo no siempre se oye el pad por
   encima de la banda, pero sí se ve. */
.sample-pad.disparado {
  background: var(--accent);
  border-color: transparent;
  transform: scale(0.97);
}
.sample-pad.disparado .sample-pad-tecla,
.sample-pad.disparado .sample-pad-nombre { color: var(--accent-texto); }

.sample-pad-tecla {
  font-size: 23px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.sample-pad-nombre {
  max-width: 92%;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sample-pad-accion {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(16, 16, 19, 0.9);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.sample-pad:hover .sample-pad-accion { color: var(--text); border-color: var(--text-dim); }

/* (el @media (max-width: 640px) que había acá para sample-pads-grid también
   era inalcanzable con el mínimo real de ventana -- ver nota más abajo) */

/* ==========================================================================
 * Barra superior: reloj protagonista, controles auxiliares compactos.
 * ========================================================================== */

/* El reloj es el número que se lee de lejos; el tiempo total va debajo, no al
   lado, para que no le reste sitio ni protagonismo. */
.tb-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#clockElapsed {
  /* Tamaño fijo (ver también la regla más arriba en el archivo) -- este
     bloque volvía a meter clamp()/vw y pisaba ese ajuste, el mismo problema
     que ya había pasado con la barra de transporte. */
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.tb-clock .clock-total {
  margin-top: 2px;
  font-size: 11px;
}

/* ÷2 ×2 y el corrimiento de compás son controles de ajuste puntual: van
   pequeños y su columna completa mide lo mismo que el recuadro del tempo. */
/* No se estiran a la altura de la barra: se ajustan a su contenido para que la
   columna entera mida lo mismo que el recuadro del tempo. */
.tb-tempo-oct {
  align-self: center;
  padding: 3px 5px;
  gap: 2px;
  justify-content: center;
}
.tb-tempo-oct button {
  padding: 1px 8px;
  font-size: 10.5px;
  border-radius: 5px;
  line-height: 1.35;
}

/* TAP y CLICK, cuadrados y del mismo tamaño -- achicados a propósito para que
   la barra de arriba entre entera con el resto de los botones, sin tener que
   desplazarla horizontalmente para ver TAP y CLICK. */
.tb-stack { gap: 3px; }
.tb-stack > button {
  width: 40px;
  height: 32px;
  padding: 0;
  font-size: 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
 * Fader de Master: de consola antigua, para distinguirlo de un vistazo.
 * ========================================================================== */
.master-channel .fader-wrap {
  width: 54px;
  border-radius: 9px;
  background-color: #0c0c0e;
  /* Raíl más ancho y marcas más marcadas que en los canales normales. */
  background-image:
    linear-gradient(to right, transparent calc(50% - 5px), var(--fader-riel, #000) calc(50% - 5px),
                    var(--fader-riel, #000) calc(50% + 5px), transparent calc(50% + 5px)),
    repeating-linear-gradient(to bottom, var(--fader-marca, rgba(255,255,255,0.26)) 0 1px, transparent 1px 9.09%),
    repeating-linear-gradient(to bottom, var(--fader-marca, rgba(255,255,255,0.26)) 0 1px, transparent 1px 9.09%);
  background-size: 100% 100%, 10px calc(100% - 26px), 10px calc(100% - 26px);
  background-position: center, left 4px top 13px, right 4px top 13px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 2px 9px rgba(0, 0, 0, 0.7);
}

/* Tirador grande de marfil con la línea roja de lectura en el centro: es el
   único fader rojo del mezclador, así que la mano lo encuentra sola. */
.master-channel input[type="range"].fader.vertical::-webkit-slider-thumb {
  width: 50px;
  height: 32px;
  border-radius: 4px;
  background:
    linear-gradient(to bottom, transparent calc(50% - 1.5px), #c1272d calc(50% - 1.5px),
                    #c1272d calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(180deg, #f3efe6 0%, #ddd6c8 42%, #a9a294 52%, #cdc6b8 100%);
  border: 1px solid #14120e;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.master-channel input[type="range"].fader.vertical::-moz-range-thumb {
  width: 50px;
  height: 32px;
  border-radius: 4px;
  background: linear-gradient(180deg, #f3efe6, #a9a294);
  border: 1px solid #14120e;
}

.master-channel { max-width: 86px; }
.master-channel .channel-label { font-size: 13px; letter-spacing: 0.04em; }
.master-channel .fader-fill { background: #c1272d; opacity: 0.4; width: 8px; }

/* ==========================================================================
 * Barra superior: los grupos no se encogen.
 *
 * Tenían `flex-shrink: 1` sin ancho mínimo: al estrechar la ventana se
 * comprimían hasta casi cero y su contenido se salía, quedando el tempo, el
 * reloj y los botones dibujados unos encima de otros. Ahora conservan su
 * tamaño y, si no caben, la franja izquierda se desplaza.
 * ========================================================================== */
.tb-group,
.tb-clock,
.tb-stack,
.tb-btn,
.click-toggle {
  flex-shrink: 0;
  min-width: 0;
}

.tb-left {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  /* Que el desplazamiento no arrastre la página entera en tablet. */
  overscroll-behavior-x: contain;
}
.tb-left::-webkit-scrollbar { display: none; }

/* Cada grupo mantiene su hueco: nada de textos montándose. */
.tb-tempo { min-width: 68px; }
.tb-tempo-oct { min-width: 52px; }
.tb-clock { min-width: 108px; }

/* (acá había un @media (max-width: 640px) para que tb-left pasara a dos
   filas -- también inalcanzable, y además tb-left ya es una columna de
   grid, no un contenedor flex que pudiera envolver filas). */

/* ==========================================================================
 * Corrección: acá había un bloque que pisaba el reparto horizontal del
 * mezclador (el de arriba en el archivo, líneas ~514-562 y ~1566-1615) con
 * overflow-x:auto en TODO .mixer y flex:0 0 auto en mixer-hideable/tracks.
 * Eso rompía las dos cosas que ese sistema ya hacía bien: que solo la zona
 * de PISTAS se desplace (guía/clic/pad/master quedan fijos, ver el
 * comentario en .mixer-tracks) y que mixer-hideable, al crecer con flex:1,
 * empuje master/buses hasta pegarlos al borde derecho de la ventana cuando
 * hay pocas pistas. El sistema original ya andaba bien -- no hacía falta
 * este bloque, así que se saca entero.
 * ========================================================================== */

/* ==========================================================================
 * Cartel de ayuda al pasar el cursor
 * ========================================================================== */
.tp-ayuda {
  position: fixed;
  z-index: 400;
  max-width: 280px;
  padding: 8px 11px;
  border-radius: 9px;
  background: #26262c;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  /* No debe interceptar el ratón: si lo hiciera, al aparecer bajo el cursor
     dispararía un "salir" del propio control y parpadearía. */
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.12s, transform 0.12s;
}
.tp-ayuda.visible { opacity: 1; transform: translateY(0); }

/* Botón de ayudas: más pequeño que el resto, es un interruptor secundario. */
.tb-btn.tb-mini {
  width: 34px;
  height: 34px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 9px;
  align-self: center;
}

/* ==========================================================================
 * Botones de la derecha: todos a la misma altura y con el símbolo centrado.
 * El "?" y el de repertorio iban más bajos que EDIT / AUTO / STEMS y la fila
 * quedaba desalineada.
 * ========================================================================== */
.tb-right .tb-btn {
  height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Los de símbolo son cuadrados y con el glifo algo mayor, para que se lea de
   lejos igual que el texto de los otros. */
.tb-right .tb-btn.tb-icon,
.tb-right .tb-btn.tb-mini {
  width: 42px;
  padding: 0;
  font-size: 20px;
}
.tb-right .tb-btn.tb-mini { font-size: 18px; font-weight: 700; }

/* ==========================================================================
 * Nota: la barra ya no pasa a dos filas -- ahora es una grilla de 3 columnas
 * (tb-left / tb-center / tb-right, ver la regla base de .toolbar) y el wrap
 * de flexbox no aplica igual ahí. Si la ventana queda angosta, tb-left se
 * desplaza (overflow-x: auto) en vez de reordenarse -- el mínimo real de la
 * ventana en Electron (900px) ya deja sitio de sobra para las tres zonas.
 * ========================================================================== */

/* ==========================================================================
 * Apariencia: fondo de pantalla, difuminado y controles del tema.
 * ========================================================================== */

/* Capa de fondo: detrás de todo y sin capturar el ratón. Es decoración. */
#fondoPantalla {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: opacity 0.25s;
}

/* Con fondo puesto, las zonas grandes se vuelven translúcidas para dejarlo
   ver; el texto sigue encima de su propio panel, así que no pierde legibilidad. */
/* La app ocupa toda la pantalla, así que la imagen solo puede verse A TRAVÉS
   de los paneles. Con un 74% de opacidad apenas se intuía; a este nivel se ve
   sin que el texto pierda legibilidad, y el deslizador de intensidad permite
   ajustarlo si la imagen elegida es muy clara o muy cargada. */
body.con-fondo .toolbar,
body.con-fondo .song-carousel,
body.con-fondo .mixer {
  background: color-mix(in srgb, var(--panel) 52%, transparent);
  backdrop-filter: var(--difuminado, none);
  -webkit-backdrop-filter: var(--difuminado, none);
}
body.con-fondo .waveform-overview {
  background: color-mix(in srgb, var(--panel) 62%, transparent);
}
/* Los controles sí quedan opacos: son lo que hay que leer y accionar.
   :not(.active) es a propósito: sin él, esta regla le gana en especificidad
   a .tb-btn.active/.click-toggle.active/etc. y un botón ENCENDIDO (el CLICK
   activo, por ejemplo) se pintaba del gris del panel en vez de su color de
   encendido normal en cuanto había un fondo de pantalla puesto. */
body.con-fondo .tb-group,
body.con-fondo .tb-clock,
body.con-fondo .tb-btn:not(.active),
body.con-fondo .click-toggle:not(.active),
body.con-fondo .tool-btn:not(.active),
body.con-fondo .song-thumb { background-color: var(--panel-2); }

/* Difuminado opcional de menús y paneles emergentes. --difuminado vale "none"
   cuando está desactivado, así que la regla puede quedarse siempre puesta.
   El backdrop-filter por sí solo no alcanza: estos paneles traían un fondo
   100% opaco (var(--panel) sin transparencia), así que no había nada "detrás"
   que el desenfoque pudiera mostrar -- el efecto quedaba invisible aunque
   estuviera técnicamente aplicado. --panel-difuminable (tema.js) es el mismo
   panel opaco de siempre cuando el difuminado está apagado, y se vuelve
   translúcido solo cuando se activa. */
.tp-menu, .tp-modal, .tp-sheet, .settings-panel, .pad-panel, .tp-ayuda {
  background: var(--panel-difuminable, var(--panel));
  backdrop-filter: var(--difuminado, none);
  -webkit-backdrop-filter: var(--difuminado, none);
}

/* Los faders usan el color del tema. */
.fader-wrap { background-color: var(--fader-fondo, #0f0f11); }
.sample-pad.disparado { background: var(--color-samples, var(--accent)); }

.settings-acciones { display: flex; gap: 6px; flex-shrink: 0; }

.settings-color {
  flex: 0 0 56px;
  width: 56px;
  height: 32px;
  padding: 2px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  cursor: pointer;
}
.settings-range { flex: 0 1 168px; min-width: 120px; accent-color: var(--accent); }

/* En modo Día hay elementos pensados sobre fondo oscuro que necesitan invertir
   su texto para seguir leyéndose. */
body.tema-claro .waveform-overview,
body.tema-claro .mixer { color: var(--text); }
body.tema-claro .tp-ayuda { background: var(--panel-2); }
body.tema-claro .song-thumb { border-color: var(--border); }
body.tema-claro .tb-btn:hover { background: rgba(0, 0, 0, 0.06); }
body.tema-claro .tp-menu-item:hover:not(:disabled) { background: rgba(0, 0, 0, 0.07); }
body.tema-claro .pad-key-grid button { background: rgba(0, 0, 0, 0.05); }
body.tema-claro .pad-key-grid button:hover { background: rgba(0, 0, 0, 0.09); }
body.tema-claro .sample-pad { background: rgba(0, 0, 0, 0.04); }
body.tema-claro .tp-sheet-group { background: rgba(0, 0, 0, 0.035); }

/* ==========================================================================
 * Paneo manual y borrado de pista, en la tira de canal.
 * ========================================================================== */

/* Botón de paneo: una letra (I / C / D) encima del M. Tres posiciones bastan
   para colocar clic y guía, que es para lo que se usa en directo. */
.pan-btn {
  width: 30px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.pan-btn:hover { border-color: var(--text-dim); color: var(--text); }
.pan-btn.izq, .pan-btn.der { background: var(--accent); color: var(--accent-texto); border-color: transparent; }

/* Quitar pista: solo aparece en modo edición, para no borrar nada sin querer. */
.track-delete {
  width: 26px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--peligro);
  background: transparent;
  color: var(--peligro);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: none;
}
.track-delete:hover { background: color-mix(in srgb, var(--peligro) 18%, transparent); }
body.editando-pistas .track-delete { display: block; }


/* Automatización de fader: botón de marcar + el fader "apagándose" de
   verdad cuando pasa por un punto de silencio, para verlo, no solo oírlo. */
.fader-auto-btn {
  width: 30px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  /* Igual que quitar pista y el paneo: solo se ve en modo edición, para no
     amontonar botones durante un directo normal. */
  display: none;
}
body.editando-pistas .fader-auto-btn { display: block; }
.fader-auto-btn:hover { border-color: var(--text-dim); color: var(--text); }
.fader-auto-btn.marcado-silenciar { background: var(--peligro); color: #fff; border-color: transparent; }

.channel.silenciado-auto .fader-wrap { opacity: 0.35; filter: grayscale(0.6); transition: opacity 0.15s, filter 0.15s; }
.channel .fader-wrap { transition: opacity 0.15s, filter 0.15s; }

/* ==========================================================================
 * Portada de la canción en su miniatura.
 * ========================================================================== */
.song-thumb.con-portada {
  /* La imagen la pone el JS; aquí solo se prepara el recuadro para que se vea
     bien recortada y con algo de contraste contra el texto de encima. */
  background-color: #000;
  position: relative;
  overflow: hidden;
}

/* Velo inferior: sin él, una portada clara deja ilegibles los botones de
   edición y el indicador de reproducción. */
.song-thumb.con-portada::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}

/* La tarjeta seleccionada se sigue distinguiendo aunque lleve imagen. */
.song-card.selected .song-thumb.con-portada { box-shadow: inset 0 0 0 2px var(--accent); }

/* El botón de paneo solo se ve donde importa: clic y guía. En modo edición
   aparece en todos los canales, por si la detección se dejó alguno. */
.pan-btn { display: none; }
.pan-btn.relevante,
body.editando-pistas .pan-btn { display: block; }

/* Panel de MIDI + audio nativo: overlay completo, mismo lenguaje visual que
   el panel de Configuración (dos columnas repartidas por altura). */
.tp-midi-overlay.hidden { display: none; }
.tp-midi-panel {
  width: min(880px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  overflow: hidden;
}
.tp-midi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.tp-midi-cerrar {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
}
.tp-midi-body {
  overflow-y: auto;
  padding: 14px 16px 18px;
  columns: 2;
  column-gap: 18px;
}
.tp-midi-seccion {
  margin-bottom: 14px;
  break-inside: avoid;
}
.tp-midi-seccion h4 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-dim);
}
.tp-midi-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.tp-midi-row:last-child { border-bottom: none; }
.tp-midi-nombre { flex: 1; font-size: 13px; }
.tp-midi-vacio, .tp-midi-aviso, .tp-midi-cargando {
  font-size: 12px;
  color: var(--accent-dim);
  padding: 4px 0;
}
.tp-midi-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  flex-shrink: 0;
  transition: background 0.1s, box-shadow 0.1s;
}
.tp-midi-led.on {
  background: #4ade80;
  box-shadow: 0 0 6px 2px rgba(74, 222, 128, 0.7);
}
.tp-midi-probar { padding: 2px 10px; font-size: 12px; }
.tp-midi-audio-dispositivo { padding: 6px 0; border-bottom: 1px solid var(--border); }
.tp-midi-audio-dispositivo:last-child { border-bottom: none; }
.tp-midi-audio-nombre { font-size: 13px; margin-bottom: 6px; }
.tp-midi-audio-canales { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-midi-vivo.on { background: #dc2626; color: #fff; border-color: #dc2626; }
.tp-midi-select-dispositivo, .tp-midi-select-canal {
  background: var(--panel-2);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
}
.tp-midi-select-dispositivo { width: 100%; margin-bottom: 8px; }

/* Chip de canal físico, junto al fader de cada canal del mezclador. */
.tp-ruta-chip {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 5px;
  margin: 3px auto 0;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  cursor: pointer;
  display: block;
}
.tp-ruta-chip:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.tp-ruta-chip:disabled { opacity: 0.4; cursor: default; }

/* Testigo de salida en vivo: un punto, no un botón con texto. Apagado =
   gris discreto; encendido = rojo con resplandor, inconfundible de reojo. */
.led-en-vivo {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--panel-2);
  cursor: pointer;
  align-self: center;
  transition: background 0.15s, box-shadow 0.15s;
}
.led-en-vivo:hover { border-color: var(--text-dim); }
.led-en-vivo.active {
  background: #dc2626;
  border-color: #dc2626;
  box-shadow: 0 0 6px 2px rgba(220, 38, 38, 0.7);
}

/* ==========================================================================
 * EQ paramétrico/dinámico: pantalla completa aparte, como un plugin de
 * estudio. Botón por canal para abrirla.
 * ========================================================================== */
.eq-open-btn {
  width: 30px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  display: none;
}
body.editando-pistas .eq-open-btn { display: block; }
.eq-open-btn:hover { border-color: var(--accent); color: var(--accent); }

.eq-panel {
  /* Como el Pad Player: ocupa el sitio del mezclador (debajo de la onda),
     no la pantalla entera -- la barra de arriba y el transporte siguen ahí. */
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* Con el EQ abierto no se ve nada más del mezclador (ni Pad, ni Master, ni
   los botones de la derecha): solo el fader de la pista que se está
   ecualizando, dentro del propio panel. */
.mixer.eq-modo > *:not(.eq-panel) { display: none; }

/* El gráfico cede espacio primero (min-height bajo): los controles de abajo
   son de altura fija y SIEMPRE tienen que verse completos, sea cual sea el
   tamaño de la ventana -- por eso .eq-controles no se toca aquí y este sí. */
.eq-cuerpo { flex: 1 1 auto; min-height: 60px; display: flex; gap: 10px; padding: 10px 10px 0 14px; }
.eq-cuerpo .eq-graph-wrap { padding: 0 6px 0 0; }
.eq-fader-track { flex: 0 0 auto; max-width: 70px; }
.eq-fader-track .channel-label { font-size: 11px; text-align: center; }
/* Sin min-height propio, el fader-wrap normal (min-height:140px, pensado
   para el mezclador completo) se desborda por debajo de .eq-cuerpo cuando
   este se encoge (puede bajar hasta 60px) -- su visual tapaba el texto de
   los controles de abajo (bug real reportado: "Bajos"/"Campana" se veían
   superpuestos). Aquí puede encoger hasta el alto real disponible. */
.eq-fader-track .fader-wrap { width: 32px; min-height: 0; }
.eq-panel.hidden { display: none; }

.eq-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.eq-titulo { font-weight: 700; font-size: 14px; }
.eq-head-botones { display: flex; align-items: center; gap: 8px; }

/* ==========================================================================
 * Buses VCA: mismo molde que el panel de EQ -- ocupa el sitio del mezclador,
 * no la pantalla entera, y se cierra con volverAlMezclador() (tecla X).
 * ========================================================================== */
.buses-panel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  overflow: hidden;
}
.buses-panel.hidden { display: none; }
.mixer.buses-modo > *:not(.buses-panel) { display: none; }

.buses-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.buses-titulo { font-weight: 700; font-size: 14px; }
.buses-head-botones { display: flex; align-items: center; gap: 8px; }

.buses-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 16px;
  padding: 16px;
  overflow-x: auto;
  overflow-y: hidden;
}
.buses-vacio {
  margin: auto;
  max-width: 340px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}

.buses-channel { position: relative; flex: 0 0 auto; width: 90px; }
.buses-channel .fader-wrap { width: 46px; margin: 0 auto; }
.buses-tag {
  align-self: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
  color: var(--text-dim);
  background: var(--panel-2);
  text-align: center;
}
.buses-tag.auto { color: var(--accent); }
.buses-cuenta { font-size: 10px; color: var(--text-dim); text-align: center; }
.buses-quitar-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 11px;
  cursor: pointer;
}
.buses-quitar-btn:hover { border-color: var(--peligro); color: var(--peligro); }

/* Selector de pistas al crear un grupo manual */
.buses-selector-lista {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 10px 0;
}
.buses-selector-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.buses-selector-fila:last-child { border-bottom: none; }
.buses-selector-fila input { width: 16px; height: 16px; flex-shrink: 0; }

.eq-graph-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  padding: 10px 16px;
}
#eqCanvas { width: 100%; height: 100%; display: block; border-radius: 8px; background: #000; cursor: crosshair; }

/* Tres columnas fijas -- tipo | valores | dinámica -- en vez de filas que se
   envuelven: la altura queda SIEMPRE igual, con dinámica activada o no, y
   nunca hace falta desplazar para ver el resto (bug real reportado: a veces
   el bloque del compresor se cortaba abajo, según cuánto ocupara todo lo de
   arriba). */
.eq-controles {
  flex: 0 0 auto;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}
/* "Solo gráfico": oculta los campos de abajo para que el espectro/curva
   se vean más grandes -- .eq-cuerpo tiene flex:1 1 auto, así que crece solo
   a ocupar el espacio que deja libre este bloque al desaparecer. */
.eq-controles.oculto { display: none; }
#eqBtnOcultarControles.activo { background: var(--panel-2); border-color: var(--accent); color: var(--accent); }
.eq-sin-banda { color: var(--text-dim); font-size: 13px; text-align: center; padding: 20px 0; }
.eq-banda-nombre { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }

/* Más comprimido que antes (menos gap, columna de dinámica menos ancha):
   deja hueco para ir agregando más opciones sin que el bloque crezca en
   altura -- eso es lo que hay que proteger, ver nota arriba. */
.eq-controles-grid {
  display: grid;
  grid-template-columns: minmax(170px, 0.95fr) minmax(100px, 0.7fr) minmax(230px, 1.4fr);
  gap: 10px;
  align-items: start;
}
.eq-col { min-width: 0; }
.eq-col-dinamica { border-left: 1px dashed var(--border); padding-left: 10px; }

.eq-tipos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; margin-bottom: 5px; }
.eq-activa-btn { width: 100%; }

.eq-col-valores { display: flex; flex-direction: column; gap: 5px; }

.eq-campo { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--text-dim); }
.eq-campo-fila { display: flex; align-items: center; gap: 4px; }
.eq-campo-fila input[type="number"] { flex: 1 1 auto; min-width: 0; }
.eq-campo input[type="number"] {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  color: var(--text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.eq-din-toggle { flex-direction: row; align-items: center; gap: 6px; font-size: 11px; color: var(--text); margin-bottom: 5px; }
.eq-din-toggle input { width: 16px; height: 16px; flex-shrink: 0; }

.eq-din-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 8px;
  transition: opacity 0.15s;
}
.eq-din-grid .eq-modo-btn { align-self: end; }

/* ==========================================================================
 * Perilla circular arrastrable (Brightness/Shimmer del pad, y reusable en
 * cualquier otro parámetro futuro).
 * ========================================================================== */
.pad-perillas {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 8px 12px;
  background: var(--panel-2);
  border-radius: 10px;
  flex: 0 0 auto;
  width: fit-content;
}
.tp-knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  user-select: none;
}
/* Sombra propia debajo de la perilla, como si sobresaliera del panel de
   verdad -- antes era un círculo plano pegado a la superficie. */
.tp-knob-svg { width: 46px; height: 46px; cursor: ns-resize; touch-action: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.55)); }
.tp-knob.activa .tp-knob-svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.55)) drop-shadow(0 0 4px var(--accent)); }
.tp-knob-pista { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 9; stroke-linecap: round; }
.tp-knob-arco { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; }
.tp-knob-cuerpo {
  /* El relleno de verdad (degradé radial) va inline por perilla, ver
     knob.js -- esto es solo el respaldo si algo falla al montarlo. */
  fill: var(--panel);
  stroke: rgba(0,0,0,0.55);
  stroke-width: 1.5;
}
.tp-knob-indicador { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.tp-knob-label { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.tp-knob-valor { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* Perilla mini: pegada a un campo numérico (EQ), sin etiqueta/valor propios
   -- el input de al lado ya los muestra. */
.tp-knob.mini .tp-knob-svg { width: 18px; height: 18px; }

/* ==========================================================================
 * Botones en 3D: relieve tipo consola física, no un rectángulo plano de
 * color liso. Una sola regla para todos los botones de la app en vez de
 * tocar cada bloque suelto -- capa aditiva (background-image + box-shadow)
 * encima de lo que cada botón ya tenía, así conviven con sus estados
 * ".active" de color propio (rojo, acento...) sin pisarlos.
 * ========================================================================== */
.tp-btn, .tb-btn, .tool-btn, .solo-btn, .mute-btn, .pan-btn,
.section-type-btn, .eq-tipo-btn, .eq-activa-btn, .eq-modo-btn, .eq-open-btn,
.buses-quitar-btn, .channel-add-btn, .fader-auto-btn, .settings-btn,
.zoom-reset-btn, .pad-link-btn, .pad-key-btn, .section-omitir-btn,
.pad-close, .track-delete, .buses-omitir-btn {
  background-image: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.02) 45%,
    rgba(0, 0, 0, 0.10) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 1px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.22);
}
.tp-btn:active, .tb-btn:active, .tool-btn:active, .solo-btn:active,
.mute-btn:active, .pan-btn:active, .section-type-btn:active,
.eq-tipo-btn:active, .eq-activa-btn:active, .eq-modo-btn:active,
.eq-open-btn:active, .buses-quitar-btn:active, .channel-add-btn:active,
.fader-auto-btn:active, .settings-btn:active, .zoom-reset-btn:active,
.pad-link-btn:active, .pad-key-btn:active, .section-omitir-btn:active,
.pad-close:active, .track-delete:active {
  /* Al presionar se "hunde": el brillo pasa de arriba a abajo y baja un
     poco, como un botón físico de verdad respondiendo al dedo. */
  background-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.20) 0%,
    rgba(0, 0, 0, 0.05) 55%,
    rgba(255, 255, 255, 0.06) 100%);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(1px);
}

/* ==========================================================================
 * Arreglo de reproducción (duplicar/reordenar secciones sin tocar el audio)
 * ========================================================================== */
.arrangement-strip.hidden { display: none; }
.arrangement-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 4px 0 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.arrangement-strip-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-dim, #9a9aa2);
  flex-shrink: 0;
}
.arrangement-strip-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.arrangement-strip-chips::-webkit-scrollbar { display: none; }
.arrangement-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #16161a;
  flex-shrink: 0;
  white-space: nowrap;
}
.arrangement-chip button {
  border: none;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  width: 18px;
  height: 18px;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
}
.arrangement-chip button:hover { background: rgba(0, 0, 0, 0.32); }
.arrangement-reset-btn {
  flex-shrink: 0;
  font-size: 12px;
  padding: 6px 10px;
}
.section-duplicate-btn {
  background: #3a6fa8;
  color: #fff;
}
.section-cue-btn.tiene-cue {
  background: #8a5cc4;
  color: #fff;
}

/* ==========================================================================
 * Aviso de failover del Modo respaldo
 * ========================================================================== */
.respaldo-banner.hidden { display: none; }
.respaldo-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 10px 16px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  background: #c0392b;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  animation: respaldoParpadeo 1.2s ease-in-out infinite;
}
@keyframes respaldoParpadeo {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

/* ==========================================================================
 * Reporte de sesión
 * ========================================================================== */
.reporte-contenido {
  padding: 14px 16px 18px;
  overflow-y: auto;
}
.reporte-vacio {
  color: var(--text-dim);
  text-align: center;
  padding: 30px 10px;
}
.reporte-fila {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.reporte-fila:last-child { border-bottom: none; }
.reporte-nombre { font-weight: 700; }
.reporte-detalle { font-size: 12.5px; color: var(--text-dim); }
.reporte-omitidas { font-size: 12.5px; color: var(--peligro); }

/* ==========================================================================
 * Modo simple: texto más grande para leer de un vistazo. A propósito
 * ACOTADO a zonas de ancho flexible (barra superior) -- no toca las
 * columnas de ancho fijo del mezclador (channel-label vive en una columna
 * de máx. 100px; agrandarla ahí arriesga desbordar o cortar el nombre de
 * la pista, justo lo que costó tanto dejar estable el resto de la sesión).
 * ========================================================================== */
body.modo-simple #clockElapsed { font-size: 42px; }
body.modo-simple .tb-clock .clock-total { font-size: 13px; }
body.modo-simple .tempo-bpm { font-size: 30px; }
body.modo-simple .tb-btn { font-size: 15px; }
body.modo-simple .tb-tap { font-size: 12px; }
body.modo-simple .tool-btn { font-size: 13px; }

/* ==========================================================================
 * Recorrido guiado (primeros pasos)
 * ========================================================================== */
.tour-overlay.hidden { display: none; }
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
}
/* El "agujero" que deja ver el control real: una caja con un box-shadow
   gigante que oscurece TODO menos su propio recuadro -- no hace falta
   recortar nada, el navegador ya lo resuelve con un solo elemento. */
.tour-spotlight {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.78);
  outline: 2px solid var(--accent);
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
  pointer-events: none;
}
/* Sin blanco que iluminar (paso de bienvenida/cierre): solo el fondo oscuro,
   sin marco ni agujero. */
.tour-spotlight.sin-blanco { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.78); outline: none; width: 0; height: 0; }

.tour-card {
  position: fixed;
  z-index: 601;
  width: min(320px, calc(100vw - 32px));
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.tour-progreso { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; letter-spacing: 0.04em; }
.tour-titulo { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.tour-texto { font-size: 13px; color: var(--text-dim); line-height: 1.4; margin-bottom: 14px; }
.tour-acciones { display: flex; align-items: center; gap: 8px; }
.tour-saltar { margin-right: auto; background: none; border: none; color: var(--text-dim); font-size: 12.5px; cursor: pointer; padding: 6px 4px; }
.tour-saltar:hover { color: var(--text); }
.tour-atras, .tour-siguiente {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
}
.tour-siguiente { background: var(--accent); color: var(--accent-texto); border-color: transparent; font-weight: 600; }

/* ==========================================================================
 * Celular y tablet: reparto del ALTO.
 *
 * Va al FINAL del archivo a propósito, no junto al resto de reglas del
 * mezclador: `.tool-btn` y `.master-tools` se vuelven a declarar más arriba
 * (líneas ~1830) con los tamaños de escritorio, y al tener la misma
 * especificidad gana la que aparece última. Puesto antes, este bloque se
 * escribía pero no se aplicaba nunca -- pasó de verdad las dos primeras
 * veces que se intentó.
 * ========================================================================== */
@media (max-height: 620px) {
  /* En un celular acostado el alto es TODO lo que hay, y estaba mal
     repartido: medido a 360px de alto, la barra (82) + el carrusel de
     canciones (132) + la vista de ondas (110) se comían 324, y al mezclador
     -- lo único que se opera de verdad en pleno directo -- le quedaban 36
     píxeles: faders aplastados, sin etiqueta ni botón de mute alcanzable.
     Eso hacía la app inusable en el celular, y no era un problema de ancho.

     La vista de ondas es un panorama de apoyo, no un control: es lo primero
     que sobra cuando no hay alto. Sigue el interruptor de Configuración
     para quien la quiera igual. */
  .waveform-overview { display: none; }

  /* El carrusel se queda, pero en fichas chicas: hace falta para cambiar de
     canción, no para mirar la portada en grande. */
  .song-card { width: 104px; }
  .song-thumb { height: 46px; }
  .song-carousel { padding-top: 6px; padding-bottom: 6px; }

  /* La columna BUSES/PAD PLAYER/SAMPLE PADS/LETRA/LOOP mide 5x62px + huecos
     = ~340px, mucho más que el alto que le queda al mezclador: BUSES y LOOP
     quedaban fuera de la pantalla, sin ninguna forma de llegar a ellos.
     5 botones x 32px + 4 huecos x 4px = 176 contra los ~184 de la columna:
     entran los cinco justos (con 34px y hueco de 5 sumaban 190 y LOOP
     seguía afuera -- medido, no estimado). El overflow queda igual como
     red de seguridad para el día que se agregue un sexto botón. */
  .tool-btn { width: 74px; height: 32px; font-size: 9.5px; border-radius: 8px; padding: 3px 4px; }
  .tool-glyph { font-size: 13px; margin-bottom: 0; }
  .master-tools {
    gap: 4px;
    padding: 0 8px;
    justify-content: flex-start;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .master-tools::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
 * Celular/tablet: alternar entre MEZCLADOR y ONDA.
 *
 * En una pantalla baja no caben las dos cosas -- medido, con la onda puesta
 * al mezclador le quedaban 36px de alto y viceversa. En vez de recortar las
 * dos hasta que ninguna sirva, se alternan con el botón ONDA de la barra
 * (misma idea que el Pad Player, que ya ocupa el hueco del mezclador
 * mientras está abierto).
 *
 * Sin esto, en EDIT no había forma de tocar las secciones desde el celular:
 * la onda estaba escondida y el botón EDIT no mostraba nada.
 * ========================================================================== */

/* El botón solo existe donde hace falta elegir.
   Se repite el selector con `.tb-right` delante porque `.tb-right .tb-btn`
   (dos clases) le gana a `.solo-pantalla-chica` (una sola) sin importar el
   orden: con la versión corta nada más, el botón salía también en
   escritorio. */
.solo-pantalla-chica,
.tb-right .solo-pantalla-chica { display: none; }
body.pantalla-chica .solo-pantalla-chica,
body.pantalla-chica .tb-right .solo-pantalla-chica { display: inline-flex; }

body.pantalla-chica.vista-onda .mixer { display: none; }
body.pantalla-chica.vista-onda .waveform-overview {
  display: block;
  /* Todo el alto que deja la barra y el carrusel: es la vista entera ahora,
     no una franja de apoyo. */
  flex: 1 1 auto;
  min-height: 0;
}
/* La franja de secciones se sigue mostrando/escondiendo con su propia clase
   .hidden desde el código (según si la canción tiene arreglo cargado): acá
   solo se garantiza que, cuando toque mostrarse, no la aplaste nadie. */
body.pantalla-chica.vista-onda .arrangement-strip:not(.hidden) { flex: 0 0 auto; }