/* ==========================================================================
   SIMULATOR & INTERACTIVE HARDWARE CONSOLE STYLES
   Simulador de Consola 8 Canales, Editor de Loops A/B/C y Visor de Letras
   ========================================================================== */

/* Console Container */
.simulator-container {
  background: var(--bg-veil);
  border: 1px solid var(--metal-dark);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.simulator-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 20px;
}

/* Master Transport & Timecode */
.transport-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
}

.current-track-card {
  background: var(--bg-mixer-strip);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 6px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 140px;
}

.current-track-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  margin-bottom: 2px;
}

.current-track-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.btn-transport {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--bg-strip-hover);
  border: 1px solid var(--border-subtle);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-transport:hover {
  background: var(--metal-dark);
  transform: scale(1.04);
}

/* PLAY / PAUSA: Botón cuadrado redondeado. Verde para arrancar, Amarillo para pausar. */
.btn-transport.play-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--accent-green);
  color: #000;
  border-color: var(--accent-green);
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.5);
  font-size: 1.15rem;
}

.btn-transport.play-btn:hover {
  background: var(--accent-green);
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.7);
}

.btn-transport.play-btn.playing {
  background: var(--accent-stage-yellow);
  color: #000;
  border-color: var(--accent-yellow);
  box-shadow: 0 0 14px rgba(252, 211, 77, 0.5);
}

.btn-transport.play-btn.playing:hover {
  background: var(--accent-stage-yellow);
  box-shadow: 0 0 18px rgba(252, 211, 77, 0.7);
}

/* STOP: Cuadrado redondeado rojo con borde y fondo tenue en reposo */
.btn-transport.stop-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: var(--accent-red);
}

.btn-transport.stop-btn:hover {
  background: var(--accent-red);
  color: #fff;
  border-color: var(--accent-red);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}

/* BOTÓN LYRICS: Chapa cian redondeada (badge) con icono de micrófono */
.btn-lyrics-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: var(--radius-sm);
  color: var(--accent-cyan);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-lyrics-nav:hover {
  background: rgba(6, 182, 212, 0.28);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.5);
  color: #fff;
}

/* Timecode Display:
   00:00 | -03:04 en Amarillo de escenario detenido, verde sonando */
.timecode-box {
  background: #000;
  border: 1px solid var(--metal-dark);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--accent-stage-yellow);
  letter-spacing: 1.5px;
  text-shadow: none;
  display: flex;
  align-items: baseline;
  gap: 6px;
  transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

.timecode-sep {
  color: var(--accent-stage-yellow);
  opacity: 0.45;
  margin: 0 2px;
  font-weight: 400;
}

.timecode-box.playing {
  color: var(--accent-green);
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.55);
}

.timecode-box.playing .timecode-sep {
  color: var(--accent-green);
}

.timecode-box small {
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* Cabecera del Módulo Mixer: AUDIO MIXER CONTROL, MIDI MAP y MASTER EQ */
.mixer-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 2px;
}

.mixer-tabs-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mixer-tab-active {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
}

.mixer-tab-pill {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  background: var(--bg-mixer-strip);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mixer-tab-pill:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  background: var(--bg-strip-hover);
}

.btn-master-eq {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: var(--radius-sm);
  color: var(--accent-green);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-master-eq:hover {
  background: rgba(16, 185, 129, 0.28);
  border-color: var(--accent-green);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.45);
}

/* Song Selector Dropdown */
.song-selector-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.select-custom {
  background: var(--bg-card-elevated);
  color: #fff;
  border: 1px solid var(--border-subtle);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.9rem;
  outline: none;
  cursor: pointer;
}

.select-custom:focus {
  border-color: var(--accent-orange);
}

/* Interactive Tabs for Simulator Modes */
.sim-mode-tabs {
  display: flex;
  gap: 8px;
  background: var(--bg-veil);
  padding: 4px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
}

.sim-tab-btn {
  padding: 6px 18px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  border: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sim-tab-btn.active {
  background: var(--bg-card-elevated);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   8-CHANNEL MIXER STRIPS
   ========================================================================== */
/* LA MESA: región de pistas (se desplaza internamente) + tirador + banda fija (se pliega). */
.mixer-board {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--bg-dark);
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  position: relative;
  min-height: 420px;
}

.track-region {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-right: 4px;
}

/* ── El tirador triangular ────────────────────────────────────────────────────────────────
   SIN FONDO Y PEGADO AL BORDE de lo que pliega. Con un bloque de color propio se leía como una
   barra ancha metida entre las pistas y las tiras (*"el contenedor del triángulo está muy ancho,
   se ve feo"*). El área táctil sigue siendo la columna entera; lo que se quita es el color. */
.band-handle {
  width: 28px;
  flex: none;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  z-index: 12;
}

.band-handle-tri {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 11px solid var(--text-dim);
  transition: border-color var(--transition-fast), transform var(--transition-normal);
}

.band-handle:hover .band-handle-tri { border-left-color: var(--accent-orange); }
.band-handle:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }

/* Plegado: el triángulo apunta al otro lado. */
.band-handle.collapsed .band-handle-tri { transform: rotate(180deg); }

/* ── La banda fija: contenedor ÚNICO de las cinco tiras ───────────────────────────────────
   Fondo y borde propios, distintos de la mixer de pistas, porque estos faders hacen lo mismo
   que uno de pista —subir y bajar volumen— pero NO sobre una pista. En un escenario, mover el
   fader equivocado es un error caro. */
.fixed-band {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex: none;
  background: var(--bg-mixer-strip);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 0 6px;
  position: relative;
  z-index: 10;
  box-shadow: -6px 0 16px rgba(0, 0, 0, 0.6);
}

.fixed-band .channel-strip {
  background: transparent;
  border: none;
  min-width: 78px;
  width: 78px;
  padding: 10px 4px;
}

/* Rótulo inferior de cada tira fija (8 CH, IN 1, PERF, MAIN). */
.strip-footer {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-top: auto;
  padding-top: 4px;
}

/* Fila de chapitas (EQ · FX de los micrófonos). Se RESERVA en las cinco tiras aunque esté
   vacía: si una se la saltara, su fader subiría 20 px y se rompería la línea de los faders —que
   es de donde sale el automatismo de bajar la mano sin mirar. */
.chip-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 20px;
  width: 100%;
  margin-bottom: 6px;
}

.btn-strip.btn-chip {
  flex: none;
  padding: 2px 7px;
  font-size: 0.5rem;
}

/* En un micrófono en directo el EQ no es un retoque: es lo que quita el retumbe del escenario.
   ROSA como el de las pistas: es el mismo mando. Ver `.btn-strip.btn-eq.active`. */
.btn-strip.btn-eq-bus.active {
  background: var(--accent-pink);
  color: #000;
  border-color: var(--accent-pink);
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
}

.btn-strip.btn-fx-bus.active {
  background: var(--accent-cyan);
  color: #000;
  border-color: var(--accent-teal);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}

/* Título de la tira fija: lleva SU acento, que es lo que la distingue de una cinta de pista. */
.fixed-title {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* Conmutador PRE/POST de los vúmetros: en el MASTER en rojo */
.prepost {
  display: flex;
  gap: 2px;
}

.prepost button {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 700;
  padding: 3px 6px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 3px;
  background: rgba(239, 68, 68, 0.08);
  color: var(--accent-red);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.prepost button.active {
  background: var(--accent-red);
  color: #fff;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

/* Botón MUTE del master en rojo */
.btn-strip.btn-mute-master {
  color: var(--accent-red);
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

.btn-strip.btn-mute-master.active {
  background: var(--accent-red);
  color: #fff;
  border-color: var(--accent-red);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
}

/* El nombre del preset en INSTR ocupa la fila de mandos. */
.preset-name {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  color: var(--accent-purple);
  text-align: center;
  line-height: 1.2;
  padding: 0 2px;
}

/* LA TIRA, DE ARRIBA ABAJO: nombre · nº+paneo · M/S · REF/LOOP · OUT · fader · dB.
   Todos los mandos ARRIBA y nada por debajo del fader salvo la lectura, que es como se
   ordena una mesa de mezclas de verdad. */
.channel-strip {
  background: var(--bg-mixer-strip);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 98px;
  transition: background var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.track-region .channel-strip {
  flex: 0 0 98px;
  width: 98px;
}

/* Al plegar los buses fijos, las tiras de pista pueden expandirse armónicamente */
.mixer-board:has(.band-handle.collapsed) .track-region .channel-strip {
  flex: 1 1 98px;
  max-width: 130px;
}

.channel-strip:hover {
  background: var(--bg-strip-hover);
}

.channel-header {
  text-align: center;
  width: 100%;
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.channel-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* Fila del NOMBRE: el LED de "pista cargada" y el nombre, nada más.
   Igual que la app: la fila del título es etiqueta, no zona de mandos. */
.channel-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 20px;
}

.load-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);
  flex: none;
}

.channel-name {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Fila del PANEO: número de canal grande a la izquierda, mando redondo centrado ─────────
   Copia la fila de 36 dp de la app. El número va GRANDE porque en una mesa se lee de un
   vistazo desde lejos, y no cuesta alto: vive en el hueco que deja el mando al centrarse. */
.pan-row {
  position: relative;
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.channel-num-big {
  position: absolute;
  left: 2px;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1;
  pointer-events: none;
}

.pan-knob {
  width: 36px;
  height: 36px;
  cursor: ns-resize;
  flex: none;
}

.pan-knob svg { display: block; }

/* Output Routing Badge — la banda selectora de salida.
   En el TONO DEL CHASIS, no en cian: mismo idioma que todo mando en reposo. */
.routing-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  background: var(--control-off);
  color: var(--text-dim);
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2px;
  cursor: pointer;
  letter-spacing: 0.04em;
}

/* Solo / Mute / Ref / Loop buttons */
.strip-button-row {
  display: flex;
  gap: 4px;
  width: 100%;
  justify-content: center;
  margin-bottom: 6px;
}

.btn-strip {
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--control-off);
  color: var(--text-dim);
  cursor: pointer;
  flex: 1;
  text-align: center;
  transition: all var(--transition-fast);
}

.btn-strip.btn-mute.active {
  background: var(--accent-red);
  color: #fff;
  border-color: var(--accent-red);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.btn-strip.btn-solo.active {
  background: var(--accent-yellow);
  color: #000;
  border-color: var(--accent-yellow);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.btn-strip.btn-ref.active {
  background: var(--accent-cyan);
  color: #000;
  border-color: var(--accent-teal);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}

.btn-strip.btn-loop.active {
  background: var(--accent-orange);
  color: #fff;
  border-color: var(--accent-orange);
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
}

/* El EQ es PROCESO, y por eso ROSA. Pasó por tres colores y los dos primeros chocaban:
   cian (lo llevan ya el REF y el OUT, o sea "dato y ruteo"), morado (lo lleva la tira entera de
   INSTR, y la chapita del EQ aparece doce veces al lado). El rosa es el único que se separa a la
   vez del cian de las chapitas vecinas y del morado del instrumento. */
.btn-strip.btn-eq.active {
  background: var(--accent-pink);
  color: #000;
  border-color: var(--accent-pink);
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
}

/* La chapita del EQ: PEQUEÑA y JUNTO AL MANDO DE PANEO, a su derecha.
   Vive dentro de `.pan-row`, en posición absoluta contra el borde derecho, igual que el número
   de canal se ancla al izquierdo. Así **no cuesta ni un píxel de alto**: la fila del paneo ya
   medía 36 px y el mando, al centrarse, deja hueco libre a los dos lados.
   Más pequeña que un botón de mando (24×18 contra 30×30) a propósito: el EQ se abre una vez al
   montar y no se toca cantando, así que no compite por el dedo con la M y la S. */
.btn-strip.btn-eq {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  width: 24px;
  height: 18px;
  flex: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  letter-spacing: 0.02em;
}

/* Fader & VU Meter Cluster.
   ⚠️ EL FADER SE CENTRA SOLO, NO EL GRUPO — y esa distinción es todo el arreglo. Estuvo en un
   flex centrado, que es lo natural de escribir, pero un flex centra el CONJUNTO: con el vúmetro
   colgando a la izquierda, el carril acababa desplazado del centro de la tira, y cada vez que se
   añadía o quitaba algo al lado se movía otra vez. Él lo vio dos veces seguidas.
   Ahora el carril se ancla al 50 % de la tira y el vúmetro se cuelga a su izquierda con un
   desplazamiento fijo. El carril cae en el centro exacto de las doce tiras pase lo que pase
   alrededor, que es lo que hace que la mano baje al fader sin mirar. */
.fader-vu-cluster {
  position: relative;
  height: 184px;
  margin: 2px 0 4px;
  width: 100%;
}

/* Carril: centro exacto de la tira. El `translateX(-50%)` sobre su propio ancho (8 px). */
.fader-vu-cluster .vertical-fader-track {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* Vúmetro colgado a la izquierda del carril: 4 (medio carril) + 8 (hueco) + 6 (su ancho) = 18. */
.fader-vu-cluster .vu-meter-bar {
  position: absolute;
  top: 0;
  left: calc(50% - 18px);
}

/* Realistic Vertical Fader */
.vertical-fader-track {
  width: 8px;
  height: 180px;
  background: var(--bg-veil);
  border-radius: 4px;
  position: relative;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
  flex: none;
  /* ⛔ NADA DE `overflow: hidden` AQUÍ. Se lo puse para redondear la bandita y **se comió la
     marca del 0 dB**, que se sale 12 px a cada lado del carril (`left/right: -12px`) porque
     tiene que sobresalir para leerse. Lo cazó él en el primer vistazo. La bandita ya se redondea
     sola con su propio `border-radius`, así que el recorte no hacía falta para nada. */
}

/* LA "BANDITA": el recorrido ya andado del fader, ahora más fina y elegante (menos ancha). */
.fader-fill {
  position: absolute;
  left: 2.5px;
  right: 2.5px;
  bottom: 0;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 2px;
  pointer-events: none;
  transition: height 0.05s ease;
}

/* LECTURA EN dB: pegada al fader, al final de su recorrido, y repartida a los dos extremos de la
   tira — el NÚMERO a la izquierda y la unidad "dB" a la derecha. Es como rotula su lectura una
   mesa de verdad, y de paso el número queda alineado entre las doce tiras aunque cambie de
   ancho (por eso `tabular-nums`: los dígitos ocupan lo mismo y la columna no baila). */
/* AJUSTADA A LA IZQUIERDA Y JUNTO A LA BANDA DEL FADER, no repartida a los cantos de la tira.
   El `padding-left` la alinea con el borde izquierdo del vúmetro —los mismos 18 px a la
   izquierda del centro que usa el conjunto—, así que la lectura arranca justo debajo del fader
   en vez de flotar en la esquina de la tira. */
.fader-db {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  padding-left: calc(50% - 18px);
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.db-val {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.db-unit {
  font-size: 0.56rem;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

/* LA MARCA DEL 0 dB (unidad). Va a 36 px de los 180 del carril, o sea al 80 % de recorrido, que
   es donde la curva del fader da 0 dB — el mismo 0,8 que usa el motor. Sobresale a los dos lados
   a propósito: una marca del ancho del carril (8 px) no se ve.
   `z-index` por encima de la bandita, que se dibuja antes en el DOM pero ocupa el mismo sitio. */
.fader-unity-mark {
  position: absolute;
  top: 36px;
  left: -12px;
  right: -12px;
  height: 2px;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  z-index: 2;
}
.fader-unity-mark::after {
  content: "0";
  position: absolute;
  right: -10px;
  top: -6px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-dim);
}

.vertical-fader-input {
  -webkit-appearance: none;
  appearance: none;
  width: 180px;
  height: 36px;
  background: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  cursor: pointer;
  z-index: 5;
}

.vertical-fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 32px;
  background: linear-gradient(90deg, var(--metal-light) 0%, var(--metal-mid) 50%, var(--metal-dark) 100%);
  border-radius: 3px;
  border: 1px solid #111;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: ns-resize;
  position: relative;
}

/* Rótulo MASTER en el hueco de la fila del paneo: el bus no panea, pero SÍ ocupa esa fila —
   es lo que mantiene su fader en la misma línea que el de las tiras de pista. */
.master-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-orange);
}

/* Authentic LED VU Meter */
.vu-meter-bar {
  flex: none;
  width: 6px;
  height: 180px;
  background: var(--bg-veil);
  border-radius: 3px;
  display: flex;
  flex-direction: column-reverse;
  padding: 2px;
  gap: 2px;
  overflow: hidden;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.9);
}

.vu-led-segment {
  width: 100%;
  height: 3px;
  border-radius: 1px;
  background: var(--bg-card-elevated);
  transition: background 0.05s ease;
}

.vu-led-segment.lit-green {
  background: var(--accent-green);
  box-shadow: 0 0 4px var(--accent-green);
}

.vu-led-segment.lit-yellow {
  background: var(--accent-yellow);
  box-shadow: 0 0 4px var(--accent-yellow);
}

.vu-led-segment.lit-red {
  background: var(--accent-red);
  box-shadow: 0 0 6px var(--accent-red);
}

/* Master Strip */
.master-strip {
  background: var(--bg-card-elevated);
  border: 1px solid rgba(239, 68, 68, 0.35);
  min-width: 82px;
}
.master-strip .channel-name {
  color: var(--accent-red);
}

/* ==========================================================================
   WAVEFORM & LOOP EDITOR (LOOPS EDITOR)
   ========================================================================== */
.waveform-editor-container {
  background: var(--bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.loops-editor-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}

.loops-editor-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
}

.loop-icon-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Canvas Display */
.waveform-canvas-wrap {
  position: relative;
  width: 100%;
  height: 96px;
  background: var(--bg-dark);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  overflow: hidden;
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-bottom: none;
  cursor: crosshair;
}

canvas#waveformCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Minimap Canvas */
.minimap-canvas-wrap {
  width: 100%;
  height: 16px;
  background: var(--bg-dark);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  border: 1px solid rgba(16, 185, 129, 0.4);
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}

canvas#minimapCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Barra de Controles de Loops */
.loop-control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.loop-slot-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--bg-mixer-strip);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.slot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.dot-pink { background: var(--accent-pink); }
.dot-cyan { background: var(--accent-cyan); }
.dot-green { background: var(--accent-green); }

/* ⭐ TRES ESTADOS EN LA RANURA DE LOOP, y es la ley de la lámpara.
   · `.sonando`  → RELLENO del color: el loop está en ON y va a repetir.
   · `.active`   → SOLO contorno encendido: es la que estás editando, pero no suena.
   · ninguna     → contorno tenue.
   Antes el relleno significaba "elegida", así que el estado más llamativo se lo llevaba el que
   no hace nada. Gemelo de `ContentView.swift` y `WaveformViews.kt`. */
.btn-slot.active { border-width: 2px; }
.btn-slot.slot-a.active { border-color: var(--accent-pink); }
.btn-slot.slot-b.active { border-color: var(--accent-cyan); }
.btn-slot.slot-c.active { border-color: var(--accent-green); }

.btn-slot.slot-a { color: var(--accent-pink); }
.btn-slot.slot-b { color: var(--accent-cyan); }
.btn-slot.slot-c { color: var(--accent-green); }

.btn-slot.slot-a.sonando {
  background: var(--accent-pink);
  color: #fff;
  border-color: var(--accent-pink);
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
}
.btn-slot.slot-a.sonando .dot-pink { background: #fff; }

.btn-slot.slot-b.sonando {
  background: var(--accent-cyan);
  color: #000;
  border-color: var(--accent-teal);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

.btn-slot.slot-c.sonando {
  background: var(--accent-green);
  color: #000;
  border-color: var(--accent-green);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

/* Stepper de Parámetros (START, END, EXIT REPS) */
.loop-param-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.stepper-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.stepper-val {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  min-width: 50px;
  text-align: center;
}

.stepper-val-cyan {
  color: var(--accent-cyan);
}

.stepper-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-card-elevated);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.stepper-btn:hover {
  background: var(--accent-cyan);
  color: #000;
}

/* Grupo de Acciones de Loops */
.loop-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-loop-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--bg-mixer-strip);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-loop-toggle:hover {
  border-color: var(--accent-orange);
  background: var(--bg-strip-hover);
}

.btn-loop-toggle.active {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
  color: #fff;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
}

.btn-loop-trash {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: var(--accent-red);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-loop-trash:hover {
  background: var(--accent-red);
  color: #fff;
  border-color: var(--accent-red);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.loop-zoom-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-zoom-tool {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-zoom-tool:hover {
  background: rgba(6, 182, 212, 0.2);
  color: #fff;
}

/* ==========================================================================
   LYRICS & CHORDS STAGE SYNC (TELEPROMPTER PROFESIONAL DE ESCENARIO - PARIDAD REAL)
   ========================================================================== */
:root {
  --letra-otras: clamp(1.4rem, 5vw, 2.25rem);
}

.stage-teleprompter-view {
  background-color: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
}

/* Marca de Agua Ambiental de Escenario */
.watermark-overlay {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  transition: color 0.3s ease;
}

/* Cabecera Superior del Teleprompter */
.teleprompter-header {
  background-color: var(--card-bg);
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 10;
}

.teleprompter-song-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.teleprompter-song-info .icon {
  color: var(--accent-orange);
  font-size: 1.2rem;
}

.teleprompter-song-info h1 {
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 700;
  color: var(--accent-orange);
  font-family: var(--font-mono);
  text-transform: uppercase;
  margin: 0;
}

.teleprompter-status-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stage-badge {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  font-family: var(--font-mono);
  transition: all 0.2s ease;
}

.stage-badge-playlist {
  background: rgba(6, 182, 212, 0.8);
  color: #000;
}

.stage-badge-control {
  background: var(--accent-orange);
  color: #fff;
  border: 1px solid var(--accent-orange);
}

.stage-badge-presets {
  background: var(--accent-purple);
  color: #fff;
}

.stage-badge-connected {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-green);
  border: 1px solid var(--accent-green);
  cursor: default;
}

/* Barra de Loops Remotos y Presets del Instrumento */
.teleprompter-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: var(--card-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  gap: 16px;
  flex-wrap: wrap;
  z-index: 5;
}

.loop-sections-bar {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 0 0 auto;
}
.loop-sections-bar::-webkit-scrollbar { display: none; }

.remote-loop-btn {
  background-color: #333;
  color: #fff;
  border: 2px solid transparent;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s ease, background-color 0.2s ease;
}

.remote-loop-btn:hover {
  transform: scale(1.04);
}

.preset-bar {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex: 0 0 auto;
  gap: 8px;
}

.preset-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.preset-btn .slot {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--accent-purple);
}

.preset-btn.active {
  background-color: var(--accent-green-deep);
  border-color: var(--accent-green);
}
.preset-btn.active .slot { color: var(--accent-green); }

/* Contenedor Principal de Letras */
.teleprompter-lyrics-main {
  height: 420px;
  overflow-y: auto;
  scroll-behavior: smooth;
  position: relative;
  background-color: var(--card-bg);
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  z-index: 2;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 18%, rgba(0,0,0,1) 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 18%, rgba(0,0,0,1) 82%, transparent 100%);
}
.teleprompter-lyrics-main::-webkit-scrollbar { display: none; }

.lyrics-content-wrap {
  padding: 25vh max(20px, 2.6%) 25vh max(20px, 2.6%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Líneas de Letra */
.lyrics-line {
  padding: 10px 10px;
  margin: 6px 0;
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
  cursor: pointer;
  opacity: 0.6;
  width: 100%;
  position: relative;
}

.lyrics-line:hover {
  opacity: 0.85;
}

.lyrics-line.active {
  opacity: 1.0;
  transform: scale(1.05);
}

.lyrics-text {
  font-size: var(--letra-otras);
  line-height: 1.3;
  font-weight: 500;
  color: #ffffff;
  white-space: pre-wrap;
  text-align: center;
  display: inline;
}

.lyrics-line.active .lyrics-text {
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(1.6rem, 5.5vw, 2.6rem);
}

/* Superíndice de Acordes */
.chord-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
}

.chord-stamp {
  position: absolute;
  font-size: calc(var(--letra-otras) * 0.52);
  font-weight: 700;
  color: var(--accent-stage-yellow);
  white-space: nowrap;
  opacity: 0.833;
}

.lyrics-line.active .chord-stamp {
  opacity: 1.0;
}

/* Comentarios e Instrucciones ChordPro */
.comment-line {
  color: var(--accent-cyan);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  padding: 8px 16px;
  margin: 6px 0;
  background: rgba(6, 182, 212, 0.08);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.comment-line::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M18 11v2h4v-2h-4zM4 9c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h1v4h2v-4h1l5 3V6L8 9H4zm11.5 3c0-1.33-.58-2.53-1.5-3.35v6.69c.92-.81 1.5-2.02 1.5-3.34zM16.4 7.4l3.2-2.4-1.2-1.6-3.2 2.4 1.2 1.6zm3.2 11.6l-3.2-2.4-1.2 1.6 3.2 2.4 1.2-1.6z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M18 11v2h4v-2h-4zM4 9c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h1v4h2v-4h1l5 3V6L8 9H4zm11.5 3c0-1.33-.58-2.53-1.5-3.35v6.69c.92-.81 1.5-2.02 1.5-3.34zM16.4 7.4l3.2-2.4-1.2-1.6-3.2 2.4 1.2 1.6zm3.2 11.6l-3.2-2.4-1.2 1.6 3.2 2.4 1.2-1.6z"/></svg>') center / contain no-repeat;
}

.section-badge {
  color: var(--accent-orange);
  font-weight: 700;
  font-size: clamp(0.95rem, 2.6vw, 1.25rem);
  padding: 4px 16px;
  margin-top: 14px;
  margin-bottom: 4px;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.instruction {
  color: var(--accent-orange);
  font-weight: 600;
  font-size: clamp(1rem, 2.8vw, 1.35rem);
  margin-top: 16px;
  margin-bottom: 6px;
  display: block;
  text-align: center;
}

/* Transport Deck Inferior */
.teleprompter-transport-deck {
  background-color: var(--bg-veil);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 10;
}

.teleprompter-progress-container {
  width: 100%;
}

.teleprompter-progress-bar {
  width: 100%;
  accent-color: var(--accent-orange);
  cursor: pointer;
}

.teleprompter-controls-row {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.time-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 8px 16px;
  min-width: 120px;
}

.time-box-title {
  color: var(--accent-orange);
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-mono);
  margin-bottom: 2px;
}

.time-val {
  font-size: 1.8rem;
  font-weight: 900;
  font-family: var(--font-mono);
  color: #ffffff;
}

.transport-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.transport-btn {
  border: none;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 72px;
  height: 68px;
  transition: transform 0.1s, opacity 0.2s;
  color: white;
  gap: 4px;
  font-weight: 700;
  font-size: 0.75rem;
  font-family: var(--font-mono);
}

.transport-btn:active {
  transform: scale(0.92);
}

.transport-btn svg {
  width: 24px;
  height: 24px;
}

.play-btn { background-color: var(--accent-green); }
.pause-btn { background-color: var(--accent-orange); }
.stop-btn { background-color: var(--accent-red); }
.live-btn { background-color: rgba(107, 114, 128, 0.8); }
.live-btn.on { background-color: var(--accent-green); }

/* Botón Fullscreen */
.fullscreen-stage-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}
.fullscreen-stage-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}


/* ==========================================================================
   INTERACTIVE MIXER INSPECTOR & COMPONENT GUIDES
   ========================================================================== */

.btn-inspector-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.35);
  color: var(--accent-orange);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.btn-inspector-toggle:hover {
  background: rgba(249, 115, 22, 0.22);
  border-color: var(--accent-orange);
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.35);
  transform: translateY(-1px);
}

.btn-inspector-toggle.active {
  background: var(--accent-orange);
  color: #000;
  border-color: var(--accent-orange);
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.6);
}

/* Panel del Inspector */
.mixer-inspector-panel {
  display: none;
  background: rgba(13, 16, 23, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(249, 115, 22, 0.4);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(249, 115, 22, 0.15);
  animation: inspectorSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.mixer-inspector-panel.active {
  display: block;
}

.inspector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.inspector-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inspector-tag {
  background: var(--accent-orange);
  color: #000;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.inspector-component-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.inspector-actions-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inspector-step-counter {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-inspector-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.btn-inspector-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* Grid de información en 3 bloques */
.inspector-body-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.inspector-card {
  background: rgba(255, 255, 255, 0.025);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}

.inspector-card-live {
  border-left: 3px solid var(--accent-cyan);
}

.inspector-card-tech {
  border-left: 3px solid var(--accent-orange);
}

.inspector-card-tip {
  border-left: 3px solid var(--accent-green);
}

.inspector-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.inspector-card-live .inspector-card-header { color: var(--accent-cyan); }
.inspector-card-tech .inspector-card-header { color: var(--accent-orange); }
.inspector-card-tip .inspector-card-header { color: var(--accent-green); }

.inspector-card-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

.inspector-card-text code {
  background: rgba(0, 0, 0, 0.4);
  color: var(--accent-stage-yellow);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

/* Footer & Navegación de chips */
.inspector-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.inspector-nav-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-inspector-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-inspector-nav:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.inspector-quick-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.inspector-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.inspector-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

.inspector-chip.active {
  background: rgba(249, 115, 22, 0.15);
  border-color: var(--accent-orange);
  color: var(--accent-orange);
  font-weight: 700;
}

/* Efecto de Foco / Resaltado en la Mesa */
.mixer-board.inspector-mode [data-inspect] {
  cursor: help !important;
  transition: outline 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mixer-board.inspector-mode [data-inspect]:hover {
  outline: 2px dashed rgba(249, 115, 22, 0.6);
  outline-offset: 2px;
}

.inspect-highlight {
  outline: 2px solid var(--accent-orange) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25), 0 0 20px rgba(249, 115, 22, 0.7) !important;
  animation: inspectPulse 1.8s infinite alternate ease-in-out;
  position: relative;
  z-index: 10;
}

@keyframes inspectPulse {
  0% { box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3), 0 0 12px rgba(249, 115, 22, 0.5); }
  100% { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.5), 0 0 24px rgba(249, 115, 22, 0.9); }
}

@keyframes inspectorSlideDown {
  0% { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   SHOW SETTINGS MODAL & REPERTOIRE PREPARATION (PARIDAD CON APP REAL)
   ========================================================================== */
.show-settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.show-settings-overlay.active {
  display: flex;
}

.show-settings-modal {
  background-color: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 780px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.show-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background-color: var(--card-bg);
}

.show-settings-title {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-close-window {
  background: transparent;
  border: none;
  color: var(--accent-cyan);
  font-weight: 700;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 8px;
  transition: opacity 0.15s ease;
}
.btn-close-window:hover {
  opacity: 0.8;
}

.show-settings-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.show-card-section {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.show-card-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

.show-input-row {
  display: flex;
  gap: 10px;
}

.show-text-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
}
.show-text-input:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.btn-cyan-action {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: var(--accent-cyan);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-cyan-action:hover {
  background: rgba(6, 182, 212, 0.25);
  color: #ffffff;
}

.btn-orange-action {
  background: rgba(249, 115, 22, 0.15);
  border: 1px solid rgba(249, 115, 22, 0.3);
  color: var(--accent-orange);
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-orange-action:hover {
  background: rgba(249, 115, 22, 0.25);
}

.shows-chip-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.show-chip-item {
  background: var(--control-off);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}
.show-chip-item.active {
  background: rgba(6, 182, 212, 0.15);
  border-color: var(--accent-cyan);
  color: #ffffff;
}

.setlist-order-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.setlist-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.setlist-song-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.setlist-song-title {
  font-weight: 700;
  color: #ffffff;
  font-size: 0.92rem;
}

.setlist-song-artist {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.setlist-btn-group {
  display: flex;
  gap: 4px;
}

.btn-setlist-touch {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-setlist-touch:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
}
.btn-setlist-touch:disabled {
  color: var(--text-dim);
  cursor: not-allowed;
  opacity: 0.5;
}
.btn-setlist-touch.btn-remove {
  color: var(--accent-red);
}
.btn-setlist-touch.btn-remove:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
}

.repertoire-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.repertoire-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}

.repertoire-folder-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-cyan);
  opacity: 0.85;
}

.btn-add-to-show {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--accent-green);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 0.8rem;
}
.btn-add-to-show.already-in {
  background: rgba(255, 255, 255, 0.05);
  border-color: transparent;
  color: rgba(16, 185, 129, 0.6);
  cursor: default;
}

.btn-trash-repertoire {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--accent-red);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.btn-trash-repertoire:hover {
  background: rgba(239, 68, 68, 0.25);
}

.live-frozen-banner {
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.3);
  color: var(--accent-orange);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
}

/* ==========================================================================
   GLOBAL AUDIO ROUTING & SETTINGS MODAL (PARIDAD CON APP NATIVA)
   ========================================================================== */
.global-settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.global-settings-overlay.active {
  display: flex;
}

.global-settings-modal {
  background-color: var(--bg-card-elevated);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 820px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.global-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background-color: var(--bg-card-elevated);
}

.global-settings-title {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.routing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  gap: 10px;
}

.routing-track-label {
  font-weight: 700;
  color: #ffffff;
  font-size: 0.88rem;
  min-width: 85px;
}

.segmented-picker {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}

.segmented-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.segmented-btn.active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-weight: 700;
}

.output-pair-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--control-off);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.output-pair-label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-orange);
}

.output-pair-dropdown {
  background: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--accent-orange);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
}

/* Escáner de Canales de Micrófono */
.mic-scanner-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px dashed rgba(6, 182, 212, 0.3);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mic-scanner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));
  gap: 6px;
}

.mic-channel-meter {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mic-channel-meter:hover {
  background: rgba(6, 182, 212, 0.1);
  border-color: var(--accent-cyan);
}

.mic-channel-meter.detected {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--accent-green);
}

.mic-channel-bar-wrap {
  width: 12px;
  height: 36px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.mic-channel-bar-fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(to top, var(--accent-green), var(--accent-orange), var(--accent-red));
  transition: height 0.1s ease;
}

/* Tabla de Mapeo MIDI */
.midi-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.midi-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  border-radius: 6px;
}

.midi-action-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  font-family: var(--font-mono);
}

.midi-assigned-badge {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(6, 182, 212, 0.2);
}

/* ==========================================================================
   MASTER EQ · ROOM CALIBRATION MODAL & PINK NOISE (PARIDAD CON APP NATIVA)
   ========================================================================== */
.master-eq-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.master-eq-overlay.active {
  display: flex;
}

.master-eq-modal {
  background-color: var(--bg-card-elevated);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 860px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.master-eq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background-color: var(--bg-card-elevated);
}

.master-eq-title {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.calibration-canvas-container {
  width: 100%;
  height: 280px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.calibration-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.eq-legend-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.eq-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.eq-legend-dot {
  width: 10px;
  height: 3px;
  border-radius: 2px;
}

.snr-verdict-badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.snr-good {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
}
.snr-ok {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid var(--accent-amber);
  color: var(--accent-amber);
}
.snr-low {
  background: rgba(249, 115, 22, 0.15);
  border: 1px solid var(--accent-orange);
  color: var(--accent-orange);
}
.snr-loud {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
}

.eq-band-controls-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  text-align: center;
}

.eq-band-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.2);
  padding: 6px 2px;
  border-radius: 4px;
}

.eq-band-freq {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  font-weight: 600;
}

.eq-band-gain {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-orange);
}

.eq-band-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 16px;
  height: 60px;
  accent-color: var(--accent-orange);
  cursor: pointer;
}

/* ==========================================================================
   MUSICIANS CONNECTION (WIFI) & QR CODES MODAL (PARIDAD CON APP NATIVA)
   ========================================================================== */
.connection-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.connection-overlay.active {
  display: flex;
}

.connection-modal {
  background-color: var(--bg-card-elevated);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 780px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.connection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background-color: var(--bg-card-elevated);
}

.connection-title {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.server-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: rgba(0, 0, 0, 0.25);
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.qr-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 12px 0;
}

.qr-role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 14px 10px;
  gap: 6px;
}

.qr-frame {
  width: 168px;
  height: 168px;
  background: #ffffff;
  padding: 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.qr-frame svg, .qr-frame canvas, .qr-frame img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.qr-role-title {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin-top: 4px;
}

.qr-role-desc {
  font-size: 0.75rem;
  color: var(--text-dim);
  max-width: 220px;
  line-height: 1.3;
}

.qr-role-url {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  opacity: 0.8;
  word-break: break-all;
}

.pin-security-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 16px;
  border-radius: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.roles-in-use-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  padding: 10px 14px;
  border-radius: 8px;
  margin-top: 8px;
}

/* ==========================================================================
   SETUP — PRESETS & KEYBOARD MAPPING MODAL (PARIDAD TOTAL CON APP NATIVA)
   ========================================================================== */
.presets-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.presets-overlay.active {
  display: flex;
}

.presets-modal {
  background-color: var(--bg-card-elevated);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 900px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.presets-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background-color: var(--bg-card-elevated);
}

.presets-title {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.song-slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 12px 0;
}

@media (max-width: 700px) {
  .song-slots-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.song-slot-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
  position: relative;
}

.song-slot-card.active {
  border-color: var(--accent-purple);
  background: rgba(168, 85, 247, 0.08);
}

.slot-letter-badge {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--accent-purple);
}

.piano-keyboard-view {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 10px;
  margin: 12px 0;
  overflow-x: auto;
}

.piano-keys-track {
  display: flex;
  position: relative;
  height: 90px;
  user-select: none;
  min-width: 600px;
}

.piano-white-key {
  flex: 1;
  background: #ffffff;
  border: 1px solid #999;
  border-radius: 0 0 4px 4px;
  height: 100%;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.piano-white-key.split-part1 {
  background: rgba(249, 115, 22, 0.25);
}

.piano-white-key.split-part2 {
  background: rgba(6, 182, 212, 0.25);
}

.piano-white-key.split-part3 {
  background: rgba(168, 85, 247, 0.25);
}

.piano-black-key {
  position: absolute;
  width: 14px;
  height: 58%;
  background: #000000;
  border-radius: 0 0 3px 3px;
  z-index: 2;
  cursor: pointer;
}

.piano-black-key.split-part1 {
  background: var(--accent-orange);
}

.piano-black-key.split-part2 {
  background: var(--accent-cyan);
}

.piano-black-key.split-part3 {
  background: var(--accent-purple);
}

.split-parts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}

.split-part-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 10px 14px;
  gap: 12px;
  flex-wrap: wrap;
}

.touch-knobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 12px 0;
}

.touch-knob-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ==========================================================================
   RESPONSIVE SIMULATOR & HARDWARE CONSOLE STYLES
   ========================================================================== */
@media (max-width: 1024px) {
  .simulator-container {
    padding: 18px 14px;
  }
}

@media (max-width: 768px) {
  .simulator-container {
    padding: 12px 8px;
    border-radius: var(--radius-md);
  }
  .simulator-top-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
  }
  .transport-cluster {
    justify-content: center;
    width: 100%;
    gap: 8px;
  }
  .current-track-card {
    min-width: unset;
    width: 100%;
  }
  .timecode-box {
    font-size: 1.15rem;
    padding: 6px 12px;
    letter-spacing: 1px;
  }
  .btn-transport {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  .btn-transport.play-btn {
    width: 40px;
    height: 40px;
  }
  .btn-lyrics-nav {
    padding: 6px 12px;
    font-size: 0.7rem;
  }
  
  /* Mode Tabs */
  .sim-mode-tabs {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 3px;
    gap: 4px;
    justify-content: flex-start;
  }
  .sim-tab-btn {
    flex: none;
    padding: 6px 12px;
    font-size: 0.78rem;
  }
  
  /* Mixer */
  .mixer-board {
    padding: 8px 4px;
    min-height: 380px;
    border-radius: 8px;
  }
  .track-region {
    gap: 5px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .channel-strip {
    min-width: 66px;
    width: 66px;
    padding: 8px 2px;
  }
  .fixed-band .channel-strip {
    min-width: 66px;
    width: 66px;
    padding: 8px 2px;
  }
  .band-handle {
    width: 22px;
  }
  .fixed-band {
    gap: 4px;
    padding: 0 4px;
  }
  .strip-name {
    font-size: 0.72rem;
  }

  /* Teleprompter */
  .stage-teleprompter-view {
    min-height: 300px;
    padding: 12px 8px;
  }
  .teleprompter-header {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .teleprompter-controls {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }
  .teleprompter-song-info h1 {
    font-size: 1.1rem;
  }
  .teleprompter-line {
    font-size: 1.05rem;
    line-height: 1.4;
  }
  .chord-chip {
    font-size: 0.85rem;
  }

  /* Waveform & Loops */
  .waveform-container {
    padding: 10px 6px;
  }
  .waveform-canvas {
    height: 110px !important;
  }
  .minimap-canvas {
    height: 32px !important;
  }
  .waveform-controls-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .loop-slots-toolbar {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .btn-loop-slot {
    flex: 1;
    min-width: 70px;
    font-size: 0.72rem;
  }

  /* All Modals */
  .show-settings-modal,
  .eq-modal-card,
  .presets-modal-card,
  .routing-dialog,
  .connection-modal-card {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    border-radius: 12px;
  }
  
  .show-settings-body,
  .presets-body {
    padding: 12px 8px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .piano-keys-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .piano-keys-track {
    min-width: 500px;
  }
  
  .song-slots-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .split-part-row {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .song-slots-grid {
    grid-template-columns: 1fr;
  }
  .touch-knobs-grid {
    grid-template-columns: 1fr;
  }
  .channel-strip {
    min-width: 62px;
    width: 62px;
  }
}