/* Music Pixel Center — TODA la página es una pantalla de MPC: backlight verde
   (o el tema elegido) cubriendo el viewport, todo dibujado en tinta oscura con
   fuente dot-matrix, grilla de puntos y scanlines globales. UI monocroma: solo
   dos tonos (backlight + tinta); lo "activo/seleccionado" se invierte (tinta
   llena, texto backlight), igual que la interfaz real de la MPC2500. */

:root {
  /* Fuente única: Silkscreen (pixel) en TODA la página. */
  --f-pixel: 'Silkscreen', system-ui, sans-serif;
  --f-dot:   'Silkscreen', system-ui, sans-serif;   /* antes DotGothic16; ahora todo pixel */
}

/* ── Estética única: verde LIMA de MPC (sin cambio de tema) ─────────────── */
body[data-theme="lima"] {
  --bl:#c3dd49; --bl2:#d3eb56; --bl3:#a0bd2e;
  --ink:#2b3708;   /* tinta verde-oliva oscura (contraste bajo, no negro puro) */
  --ink2:#55661f;  /* tinta apagada (texto secundario) */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100vh;
  overflow: hidden;            /* página FIJA, sin barras de desplazamiento */
  background-color: var(--bl);
  color: var(--ink);
  font-family: var(--f-pixel);   /* Silkscreen para todo lo que no fije otra */
  image-rendering: pixelated;
}
/* Textura SUPER sutil: grano dot-matrix (puntos de tinta a ~3% sobre el lima) +
   un brillo apenas perceptible arriba-izquierda, para que el fondo respire sin
   dejar de ser plano-LCD. Todo en la capa de fondo: jamás tapa la UI. */
body {
  background-color: var(--bl);
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.07) 0.9px, transparent 1.1px),
    radial-gradient(rgba(255, 255, 255, 0.09) 0.9px, transparent 1.1px),
    radial-gradient(120% 120% at 28% 18%, rgba(255, 255, 255, 0.05), transparent 60%);
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-position: 0 0, 2.5px 2.5px, 0 0;
}
/* Centrar verticalmente el conjunto (nameplate + unidad) en el viewport. */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding-top: 0;        /* sin nameplate: la unidad va centrada */
  zoom: 1.155;           /* TODA la UI ~15% más grande (10% base + 5% extra) */
}

/* Todo en tinta. Cajas rectangulares con borde de tinta GRUESO (pixel-UI). */
.unit, .transport, .song-panel, .pads-panel, .pad,
.btn-folder, .btn-play, .btn-stop, .voice-toggle,
.prog-select select, .seq-select select, .tempo, .song-name, .song-total,
.meter-bar-track {
  background: transparent;
  border: 3px solid var(--ink);   /* más grueso */
  border-radius: 0;               /* esquinas duras = más pixel */
  color: var(--ink);
  box-shadow: none;
}


/* ── "Unidad": marco de tinta sobre la pantalla ────────────────────────── */
.unit {
  width: 900px;
  max-width: 94vw;
  margin: 0;
  padding: 0.7rem;
  border-width: 3px;
  flex: 0 0 auto;
  transform: scale(1.1);          /* UI central 10% más grande */
  transform-origin: center center;
}
/* Columna única centrada. */
.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.stack > * { width: 100%; max-width: 460px; }

/* Logo VPC: centrado arriba, a la altura del botón de cargar proyecto. */
#app-logo {
  position: fixed;
  top: 0.7rem;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: auto;
  z-index: 50;
  image-rendering: pixelated;
}
@media (max-width: 600px) { #app-logo { display: none; } }

/* Esquina superior izquierda: stack vertical ordenado y alineado. */
.corner-load {
  position: fixed;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 50;
  width: 15rem;
  max-width: 40vw;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
}
.corner-load .btn-folder {
  width: 100%;
  text-align: center;
}
.corner-project {
  font-family: var(--f-pixel);
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.corner-project[hidden] { display: none; }
/* Renglón de estado OCULTO: no mostramos infos debajo de los controles de carga
   (los mensajes siguen yendo a la consola para depurar, pero no a la UI). */
.status { display: none; }

/* ── Controles ─────────────────────────────────────────────────────────── */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

/* Botones: borde de tinta; hover/activo = invertido (relleno de tinta). */
.btn-folder, .btn-export {
  font-family: var(--f-pixel);
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}
.btn-folder { border-width: 3px; }
.btn-folder:hover, .btn-export:hover:not(:disabled) { background: var(--ink); color: var(--bl); }
.btn-folder:active, .btn-export:active:not(:disabled) { transform: translateY(1px); }
.btn-folder:focus-visible, .btn-export:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-export:disabled { opacity: 0.4; cursor: default; }

.prog-select { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; color: var(--ink); }
.prog-select select, .seq-select select {
  font-family: var(--f-dot);
  font-size: 0.7rem;
  padding: 0.3rem 0.4rem;
  color: var(--ink);
}
.prog-select select option { background: var(--bl); color: var(--ink); }
.prog-select select option:disabled { color: var(--ink2); }
/* Estilo retro MPC para TODOS los desplegables (secuencias, Note Repeat, etc.):
   recuadro de tinta, fuente pixel y la lista en lima/tinta (lo que el navegador
   permite estilar del <select> nativo). */
select {
  font-family: var(--f-pixel);
  -webkit-appearance: none; appearance: none;
  background: var(--bl); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 0;
  padding: 0.3rem 1.4rem 0.3rem 0.5rem; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 0.55rem center, right 0.4rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
select option { background: var(--bl); color: var(--ink); font-family: var(--f-pixel); }
select option:disabled { color: var(--ink2); }
select option:checked { background: var(--ink); color: var(--bl); }

/* Mono/Poly: debajo de la fila de bancos, del ancho del bloque lateral. */
.voice-toggle {
  width: 100%;
  text-align: center;
  font-family: var(--f-pixel);
  font-size: 0.7rem;
  letter-spacing: 1px;
  padding: 0.32rem 0.4rem;
  cursor: pointer;
}
.voice-toggle:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.voice-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* MONO = invertido (relleno), POLY = contorno: el estado se ve sin color */
.voice-toggle[data-mode="mono"] { background: var(--ink); color: var(--bl); }
.voice-toggle[data-mode="mono"]:hover { filter: brightness(1.1); }

/* ── NOTE REPEAT: toggle + dropdown de división, debajo de MUTE ─────────── */
/* margin-top:auto empuja la fila al FONDO de la columna lateral (queda alineada
   con el borde inferior de los pads, "abajo de todo"). */
.nr-row { display: flex; gap: 0.3rem; align-items: stretch; margin-top: auto; }
.nr-row .nr-toggle { flex: 1 1 auto; width: auto; font-size: 0.62rem; letter-spacing: 0.5px; }
.nr-toggle[data-mode="on"] { background: var(--ink); color: var(--bl); }
.nr-toggle[data-mode="on"]:hover { filter: brightness(1.1); }
.nr-select {
  flex: 0 0 auto;
  font-family: var(--f-pixel); font-size: 0.55rem;
  border: 3px solid var(--ink); background: var(--bl); color: var(--ink);
  padding: 0.25rem 0.95rem 0.25rem 0.35rem; cursor: pointer;   /* lugar para la flecha pixel */
}
.nr-select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* El botón TRACKS solo existe en móvil (desktop muestra la lista a la izquierda). */
.tracks-toggle { display: none; }

/* ── Pads: 4×4 muy simple y pixelado. Solo "PAD n". ────────────────────── */
/* Fila: pads CENTRADOS en la página; los bancos van anclados a su borde
   derecho (posición absoluta) para no desplazar ni achicar la grilla. */
.pads-row {
  position: relative;
  width: 100%;
}
.pads-panel {
  position: relative;
  padding: 0.5rem;
  border-width: 3px;
  max-width: 330px;          /* más compacto para que entre todo */
  margin: 0 auto;            /* centrado */
}

/* Bloque lateral (banco + Mono/Poly) anclado a la derecha de los pads. */
.bank-side {
  position: absolute;
  top: 0;
  bottom: 0;            /* abarca toda la altura de los pads → NR queda al fondo */
  left: 100%;
  margin-left: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: stretch;
}
/* Selector de programa anclado a la IZQUIERDA (lado opuesto a los bancos). */
.prog-side {
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 0.6rem;
  width: 12rem;        /* más ancho para "TRACK n · ProgramNN" */
}
.prog-side .prog-select { display: none; }   /* select oculto: queda solo como modelo */

/* Lista vertical de tracks: cada uno una tarjeta con el MIDI del track de fondo. */
.track-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  max-height: 15rem;
  overflow-y: auto;
}
.track-item {
  position: relative;
  width: 100%;
  height: 1.9rem;
  flex: 0 0 auto;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0;
}
.track-item:hover:not(.active) { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.track-mini {                       /* MIDI del track, de fondo */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.75;
  pointer-events: none;
}
.track-label {
  position: relative;
  z-index: 1;
  font-family: var(--f-pixel);
  font-size: 0.62rem;
  letter-spacing: 0.5px;
  /* Recuadro opaco que tapa el mini-MIDI SOLO detrás del nombre. */
  background: var(--bl);
  border: 2px solid var(--ink);
  padding: 2px 0.4rem;
  margin-left: 0.4rem;
  color: var(--ink);
  white-space: nowrap;
}
.track-item.active { background: var(--ink); }
.track-item.active .track-label { color: var(--bl); background: var(--ink); border-color: var(--bl); }
.track-item.active .track-mini { opacity: 1; }
/* Botones de banco A/B/C/D en FILA (izquierda→derecha). */
.bank-col {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
}
.bank-btn {
  width: 1.9rem;
  height: 2.1rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;            /* letra centrada vertical y horizontalmente */
  justify-content: center;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  transition: background 0.1s steps(1), box-shadow 0.1s ease;
}
.bank-letter {
  font-family: var(--f-pixel);
  font-size: 0.95rem;
  color: var(--ink);
}
.bank-btn:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.bank-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bank-btn.bank-empty { opacity: 0.4; }     /* banco sin sonidos en este program */
/* Retroiluminación ROJA del banco seleccionado. */
.bank-btn.active {
  background: #c41f1f;
  border-color: #ff6a5a;
  box-shadow: 0 0 14px rgba(220,40,40,0.85), inset 0 0 12px rgba(255,90,70,0.6);
}
.bank-btn.active .bank-letter { color: #fff; text-shadow: 0 0 6px rgba(255,120,100,0.9); }
.pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
.pad {
  position: relative;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border: 3px solid var(--ink);   /* contorno pixelado grueso */
  border-radius: 0;               /* esquinas duras = más pixel */
  transition: background 0.05s steps(1), color 0.05s steps(1);
}
.pad:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.pad .pad-label {
  font-family: var(--f-pixel);
  font-size: 1.15rem;
  letter-spacing: 0.3px;
  color: var(--ink);
  line-height: 1;
  text-align: center;
}
.pad.empty { opacity: 0.4; cursor: default; }    /* visible aunque no haya sample */
/* LED de "pad con sonido cargado": un píxel en la esquina (sin texto). */
.pad-led {
  position: absolute;
  top: 5px; right: 5px;
  width: 5px; height: 5px;
  background: var(--ink);
}
/* Atajo de teclado: chiquito, esquina inferior izquierda del pad. */
.pad-key {
  position: absolute;
  bottom: 4px; left: 5px;
  font-family: var(--f-pixel);
  font-size: 0.5rem;
  line-height: 1;
  color: var(--ink2);
  opacity: 0.75;
}
.pad.empty .pad-key { opacity: 0.45; }
/* Feedback de hover en pads con sonido (desktop). */
.pad.loaded:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
/* disparo = inversión total (relleno de tinta) */
.pad.hit { background: var(--ink); }
.pad.hit .pad-label { color: var(--bl); }
.pad.hit .pad-key { color: var(--bl); }
.pad.hit .pad-led { background: var(--bl); }
.choke-state {
  margin: 0.7rem 0 0;
  font-family: var(--f-dot);
  font-size: 0.7rem;
  text-align: center;
  color: var(--ink2);
}

.hint { color: var(--ink2); font-size: 0.7rem; }

/* ── Botón flotante (esquina sup. derecha) que abre el visor ───────────── */
.corner-wave-btn {
  position: fixed;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 3px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s steps(1);
}
.corner-wave-btn:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.corner-wave-btn[aria-pressed="true"] { background: var(--ink); color: var(--bl); }
.corner-wave-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.corner-wave-btn svg, .corner-song-btn svg { width: 62%; height: 62%; }

/* Etiqueta de texto debajo del ícono en los botones de esquina (.PGM, SONG,
   TRACK, .WAV, Q LINK, VOLUME). El botón pasa a columna: ícono arriba, texto
   abajo en fuente pixel chiquita. */
.corner-wave-btn, .corner-song-btn, .corner-vol-btn,
.corner-midi-btn, .corner-prog-btn, .corner-qlink-btn {
  flex-direction: column;
  gap: 0.1rem;
}
.corner-wave-btn svg, .corner-song-btn svg, .corner-vol-btn svg,
.corner-midi-btn svg, .corner-prog-btn svg, .corner-qlink-btn svg {
  width: 42%; height: 42%;
}
.corner-label {
  font-family: var(--f-pixel);
  font-size: 0.46rem;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.corner-info-btn { flex-direction: column; gap: 0.02rem; }
.corner-info-btn .corner-bang { font-family: var(--f-pixel); font-size: 0.85rem; line-height: 1; }
.corner-info-btn .corner-label { font-size: 0.42rem; }

/* Botón del ARREGLO/SONG: igual que el de onda pero JUSTO DEBAJO. */
.corner-song-btn {
  position: fixed;
  top: 15.2rem;                /* debajo de Q-Links */
  right: 0.8rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 3px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s steps(1);
}
.corner-song-btn:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.corner-song-btn[aria-pressed="true"] { background: var(--ink); color: var(--bl); }
.corner-song-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.corner-song-btn:disabled, .corner-wave-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Arreglo / Song: VENTANA FLOTANTE movible ──────────────────────────── */
.song-panel {
  position: fixed;
  top: 6.6rem;
  right: 0.8rem;
  z-index: 60;
  width: min(620px, 92vw);
  background: var(--bl);
  border: 3px solid var(--ink);
  border-radius: 3px;
  padding: 0.5rem 0.7rem 0.7rem;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.25);
}
.song-panel[hidden] { display: none; }
.song-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  cursor: move;                /* handle de arrastre */
  user-select: none;
  flex-wrap: wrap;
}

/* ── Visor de onda: VENTANA FLOTANTE movible ───────────────────────────── */
.wave-panel {
  position: fixed;
  top: 3.6rem;
  right: 0.8rem;
  z-index: 60;
  width: min(620px, 92vw);
  background: var(--bl);                 /* opaca sobre el contenido */
  border: 3px solid var(--ink);
  border-radius: 3px;
  padding: 0.5rem 0.6rem 0.6rem;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.25); /* sombra dura tipo ventana */
}
.wave-panel[hidden] { display: none; }
.wave-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
  font-family: var(--f-dot);
  font-size: 0.7rem;
  color: var(--ink);
  flex-wrap: wrap;
  cursor: move;                          /* handle de arrastre */
  user-select: none;
}
.wave-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.2rem;
  width: 1.6rem; height: 1.6rem;
  line-height: 1;
  font-family: var(--f-dot);
  font-size: 1rem;            /* cruz más grande */
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
}
.wave-close:hover { background: var(--ink); color: var(--bl); }
.wave-title { font-family: var(--f-pixel); font-size: 0.7rem; letter-spacing: 1px; }
.wave-sample-sel { display: flex; align-items: center; gap: 0.35rem; }
.wave-sample-sel select {
  -webkit-appearance: none; appearance: none;
  background: transparent;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 2px;
  padding: 0.14rem 1.3rem 0.14rem 0.4rem;
  font-family: var(--f-dot);
  font-size: 0.7rem;
  cursor: pointer;
  /* Flecha "menor que" apuntando hacia abajo (chevron ∨) = es desplegable. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201%20L6%206%20L11%201'%20fill='none'%20stroke='%232b3708'%20stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 0.45rem center;
  background-size: 8px 6px;
  background-repeat: no-repeat;
}
.wave-info { margin-left: auto; white-space: nowrap; }
/* Bocina y grid de chops: SOLO móvil (ocultos en desktop). */
.wave-speaker { display: none; }
.wave-chops { display: none; }
.wave-canvas {
  display: block;
  width: 100%;
  height: 150px;
  image-rendering: pixelated;
  /* Cursor custom = el ícono de la onda (mismas barras del botón del waveform). */
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='%23000'%3E%3Crect%20x='2'%20y='2'%20width='2'%20height='20'/%3E%3Crect%20x='6'%20y='6'%20width='2'%20height='12'/%3E%3Crect%20x='10'%20y='9'%20width='2'%20height='6'/%3E%3Crect%20x='14'%20y='10'%20width='2'%20height='4'/%3E%3Crect%20x='18'%20y='11'%20width='2'%20height='2'/%3E%3Crect%20x='22'%20y='11.5'%20width='2'%20height='1'/%3E%3C/g%3E%3C/svg%3E") 12 12, pointer;
}
.muted { color: var(--ink2); font-size: 0.7rem; }

/* ── Sub-paneles (secuenciador / song) ─────────────────────────────────── */
.transport { padding: 0.6rem 0.75rem 0.7rem; position: relative; }
/* BPM en la esquina superior derecha del secuenciador (recuadrado). */
#tempo {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  margin: 0;
  min-height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.7rem;
  border: 3px solid var(--ink);
  font-size: 0.7rem;
  letter-spacing: 0.5px;
}
.transport-title, .song-title {
  font-family: var(--f-pixel);
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}
.transport-title { margin: 0 0 0.6rem; }
/* Indicador ► PLAY parpadeante mientras reproduce (feedback claro, pixel). */
.transport-title::after, .song-title::after { content: ""; }
.transport.playing .transport-title::after,
.song-panel.playing .song-title::after {
  content: " \25B6 PLAY";
  color: #e0473b;                /* PLAY titilante en ROJO */
  animation: mpc-blink 0.7s steps(1) infinite;
}
@keyframes mpc-blink { 50% { opacity: 0; } }
.transport-row, .song-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.song-row { margin-bottom: 0.8rem; }

/* LOCATE: posición bar.beat + botones BAR/STEP, arriba del transporte. */
.locate-row {
  display: flex;
  align-items: stretch;        /* todas las cajas con el MISMO alto */
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}
.locate-pos, .loc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.1rem;          /* alto unificado (un toque más altas) */
  font-family: var(--f-pixel);
  letter-spacing: 0.5px;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 0;
  background: transparent;
}
.locate-pos {
  font-size: 0.7rem;
  letter-spacing: 1px;
  padding: 0 0.6rem;
  min-width: 3.4rem;
}
.loc-btn {
  font-size: 0.7rem;
  padding: 0 0.5rem;
  min-width: 2rem;
  cursor: pointer;
}
.loc-btn:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.loc-btn:active { transform: translateY(1px); }
.loc-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Flechas de STEP un poco más gruesas/grandes. */
.loc-step { font-size: 0.95rem; min-width: 1.8rem; }
/* BPM dentro del LOCATE: pegado a la derecha, MISMA caja/grosor que el botón BAR
   (mismo alto, mismo borde 3px) y alineado abajo con la fila. */
/* Play/Stop: glifos de tinta (triángulo / cuadrado), invierten al pasar. */
.btn-play, .btn-stop {
  position: relative;
  font-size: 0;
  width: 2.1rem; height: 2.1rem;
  cursor: pointer;
}
.btn-play::after {
  /* Triángulo centrado vía clip-path (sin offsets a ojo). */
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0.7rem; height: 0.72rem;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.btn-stop::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0.62rem; height: 0.62rem;
  background: var(--ink);
}
.btn-play:hover, .btn-stop:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.btn-play:active, .btn-stop:active { transform: translateY(1px); }
.btn-play:disabled, .btn-stop:disabled { opacity: 0.4; cursor: default; }

.seq-select { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; color: var(--ink); flex: 1 1 12rem; }
.seq-select select { flex: 1; }
.tempo, .song-name, .song-total {
  font-family: var(--f-dot);
  font-size: 0.7rem;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  white-space: nowrap;
}
.song-total { margin-left: auto; }

.meter { margin-top: 0.7rem; }
.meter-info {
  display: flex; justify-content: space-between;
  font-family: var(--f-dot);
  font-size: 0.7rem;
  color: var(--ink2);
  margin-bottom: 0.35rem;
}
.meter-note { color: var(--ink); }
.meter-bar-track { height: 12px; overflow: hidden; }
.meter-fill {
  height: 100%; width: 0%;
  /* barra "rellena" de tinta con tramado de píxeles */
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 4px),
    var(--ink);
  transition: width 0.05s linear;
}

.song-loop { display: flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; color: var(--ink); }

/* ── Song mode estilo MPC: lista VERTICAL de pasos (arriba→abajo) ───────── */
/* Columnas compartidas por el encabezado y cada fila. */
.song-listhead, .song-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-pixel);
  font-size: 0.7rem;
  padding: 0.28rem 0.5rem;
}
.song-listhead {
  color: var(--ink2);
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--ink);
  margin-top: 0.6rem;
}
.song-listhead .ss-seq, .song-step .ss-seq { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-bpm  { width: 3rem; flex: 0 0 auto; color: var(--ink2); }
.song-step .ss-bpm { color: inherit; }
.ss-num  { width: 1.7rem; flex: 0 0 auto; }
.ss-rep  { width: 2.4rem; flex: 0 0 auto; text-align: right; }
.ss-bars { width: 2.6rem; flex: 0 0 auto; text-align: right; }

/* Lista scrolleable verticalmente si hay muchos pasos. */
.song-timeline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 14rem;
  overflow-y: auto;
  margin-top: 2px;
}
.song-step { color: var(--ink); border-left: 3px solid transparent; }
.song-step:nth-child(odd) { background: color-mix(in srgb, var(--ink) 6%, transparent); }
/* Paso SONANDO: invertido (relleno de tinta) — indica el patrón actual. */
.song-step.active { background: var(--ink); color: var(--bl); border-left-color: var(--bl); }

@media (prefers-reduced-motion: reduce) {
  .pad, .meter-fill, .song-playhead { transition: none; }
  .transport.playing .transport-title::after,
  .song-panel.playing .song-title::after { animation: none; }
}

/* Mono/Poly cambiado a mano (difiere del detectado en el .PGM): marca sutil. */
.voice-toggle.overridden { outline: 2px dotted var(--ink); outline-offset: 2px; }

/* ── Volumen general: ventana FIJA (no se mueve), esquina inferior derecha ── */
/* Panel POP-UP arriba del botón de volumen (no en una esquina). */
.vol-panel {
  position: fixed;
  bottom: 4rem;              /* esquina inferior izquierda, arriba de INFO/tutorial */
  left: 0.9rem;
  z-index: 60;
  background: var(--bl);
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 0.5rem 0.6rem 0.6rem;
  width: 13.5rem;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.25);
}
.vol-body { display: flex; align-items: center; gap: 0.6rem; }
.vol-val {
  font-family: var(--f-pixel);
  font-size: 0.7rem;
  color: var(--ink);
  min-width: 2.4rem;
  text-align: right;
  flex: 0 0 auto;
}
/* Slider pixelado: pista hueca de tinta + thumb cuadrado centrado. */
/* El BORDE va en el input (la caja). La pista es transparente del alto interior
   (18 − 2 − 2 = 14px) y el thumb mide ESE mismo alto → rellena exacto, centrado. */
.vol-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  background: transparent;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.vol-range::-webkit-slider-runnable-track { height: 14px; background: transparent; border: 0; }
.vol-range::-moz-range-track { height: 14px; background: transparent; border: 0; }
.vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 14px;          /* = alto interior de la pista → centrado perfecto */
  margin-top: 0;
  background: var(--ink);
  border: 0;
}
.vol-range::-moz-range-thumb { width: 12px; height: 14px; background: var(--ink); border: 0; border-radius: 0; }
.vol-range:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Versión del JJOS: cartel fijo, esquina inferior derecha, estilo LCD pixel. */
.corner-jjos {
  position: fixed;
  bottom: 0.9rem;
  right: 0.9rem;
  z-index: 50;
  font-family: var(--f-pixel);
  font-size: 0.55rem;
  letter-spacing: 0.5px;
  color: var(--ink2);
  opacity: 0.8;
  user-select: none;
  pointer-events: none;
}

/* Botón del VOLUMEN: igual que los otros, debajo del de Song. */
.corner-vol-btn {
  position: fixed;
  bottom: 0.9rem;              /* a la derecha del botón de info */
  left: 3.9rem;                /* 0.9 + 2.6 (ancho info) + 0.4 */
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 3px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.1s steps(1);
}
.corner-vol-btn:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.corner-vol-btn[aria-pressed="true"] { background: var(--ink); color: var(--bl); }
.corner-vol-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.vol-panel[hidden] { display: none; }
.vol-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  font-family: var(--f-pixel);
  font-size: 0.7rem;
  letter-spacing: 1px;
  color: var(--ink);
}

/* Botón del MIDI: igual que los otros, debajo del de Volumen. */
.corner-midi-btn {
  position: fixed;
  top: 4.4rem;                 /* debajo del botón de onda */
  right: 0.8rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 3px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s steps(1);
}
.corner-midi-btn:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.corner-midi-btn[aria-pressed="true"] { background: var(--ink); color: var(--bl); }
.corner-midi-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.corner-midi-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Visor MIDI por track: VENTANA FLOTANTE movible (como Song) ─────────── */
.midi-panel {
  position: fixed;
  top: 6.6rem;
  left: 0.8rem;
  z-index: 60;
  width: min(680px, 92vw);
  background: var(--bl);
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 0.5rem 0.7rem 0.7rem;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.25);
}
.midi-panel[hidden] { display: none; }
.midi-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  cursor: move;                /* handle de arrastre */
  user-select: none;
  flex-wrap: wrap;
}
.midi-title { font-family: var(--f-pixel); font-size: 0.7rem; letter-spacing: 1px; color: var(--ink); }
.midi-info { font-family: var(--f-pixel); font-size: 0.7rem; color: var(--ink); }
.midi-pos {
  font-family: var(--f-pixel);
  font-size: 0.7rem;
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 0.1rem 0.4rem;
  margin-left: auto;
}
.midi-canvas { display: block; width: 100%; height: 170px; image-rendering: pixelated; }

/* ── Pantalla de inicio (splash) estilo SEGA: fundido entrada/salida ────── */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: var(--bl);
  animation: splash-fade 2.5s ease forwards;
}
.splash-logo {
  width: clamp(52px, 10vw, 78px);
  height: auto;
  image-rendering: pixelated;
  animation: splash-text 2.5s ease forwards;
}
.splash-text {
  font-family: var(--f-pixel);
  font-size: clamp(0.7rem, 2.3vw, 1.05rem);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  padding: 0 1rem;
  animation: splash-text 2.5s ease forwards;
}
/* Mientras dura el splash, la UI queda OCULTA; aparece (con un fundido) recién
   cuando se quita la clase .splashing (al terminar el fundido del splash). */
body.splashing > :not(.splash) { opacity: 0 !important; pointer-events: none; }
body > :not(.splash) { transition: opacity 0.45s ease; }
/* El contenedor se mantiene opaco y al final se desvanece y deja de bloquear. */
@keyframes splash-fade {
  0%, 88% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* El contenido entra rápido y se mantiene visible casi todo el splash. */
@keyframes splash-text {
  0%  { opacity: 0; transform: scale(0.96); }
  12% { opacity: 1; transform: scale(1); }
  90% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.01); }
}
@media (prefers-reduced-motion: reduce) {
  .splash, .splash-text, .splash-logo { animation-duration: 2.5s; }
}

/* ── INFO: botón esquina inferior izquierda + panel push-up movible ─────── */
.corner-info-btn {
  position: fixed;
  bottom: 0.9rem;
  left: 0.9rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  font-family: var(--f-pixel);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 3px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.1s steps(1);
}
.corner-info-btn:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.corner-info-btn[aria-pressed="true"] { background: var(--ink); color: var(--bl); }
.corner-info-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.info-panel {
  position: fixed;
  left: 0.9rem;
  bottom: 0.9rem;
  transform: translateY(calc(-100% - 0.4rem));   /* push-up arriba del botón */
  z-index: 60;
  width: 17rem;
  background: var(--bl);
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 0.5rem 0.6rem 0.6rem;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.25);
}
.info-panel[hidden] { display: none; }
.info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  font-family: var(--f-pixel);
  font-size: 0.7rem;
  letter-spacing: 1px;
  color: var(--ink);
  cursor: move;                /* handle de arrastre */
  user-select: none;
}
.info-body {
  font-family: var(--f-pixel);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--ink);
  min-height: 2.4rem;
}

/* Fila de ZOOM del waveform: abajo del canvas, separada por una línea. */
.wave-zoom {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 2px solid var(--ink);
}

/* Barra de desplazamiento del waveform (panear cuando hay zoom). */
.wave-scroll {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  margin-top: 0.4rem;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.wave-scroll:disabled { opacity: 0.35; cursor: default; }
.wave-scroll::-webkit-slider-runnable-track { height: 14px; background: transparent; border: 0; }
.wave-scroll::-moz-range-track { height: 14px; background: transparent; border: 0; }
.wave-scroll::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 14px; margin-top: 0; background: var(--ink); border: 0; }
.wave-scroll::-moz-range-thumb { width: 22px; height: 14px; background: var(--ink); border: 0; border-radius: 0; }
.wave-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Botón del PROGRAM VIEW: debajo del de MIDI. */
.corner-prog-btn {
  position: fixed;
  top: 8rem;                   /* debajo del de MIDI */
  right: 0.8rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 3px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s steps(1);
}
.corner-prog-btn:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.corner-prog-btn[aria-pressed="true"] { background: var(--ink); color: var(--bl); }
.corner-prog-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.corner-prog-btn:disabled { opacity: 0.35; cursor: default; }

/* ── PROGRAM VIEW: ventana flotante con tabla A1→D16 ───────────────────── */
.prog-panel {
  position: fixed;
  top: 6.6rem;
  left: 0.8rem;
  z-index: 60;
  width: min(560px, 92vw);
  background: var(--bl);
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 0.5rem 0.6rem 0.6rem;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.25);
}
.prog-panel[hidden] { display: none; }
.prog-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  cursor: move;
  user-select: none;
  font-family: var(--f-pixel);
  font-size: 0.7rem;
  color: var(--ink);
}
.prog-title { letter-spacing: 1px; }
.prog-info { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mono/Poly del programa, en la esquina del header (invertido = relleno). */
.prog-voice {
  border: 2px solid var(--ink);
  padding: 0.12rem 0.4rem;
}
.prog-voice[data-mode="mono"] { background: var(--ink); color: var(--bl); }

.prog-table-wrap { max-height: 16rem; overflow-y: auto; overflow-x: auto; border: 2px solid var(--ink); }
.prog-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-pixel);
  font-size: 0.62rem;
  color: var(--ink);
}
/* Enmarcar TODAS las filas y columnas (alto contraste). */
.prog-table th, .prog-table td {
  border: 2px solid var(--ink);
  padding: 0.28rem 0.4rem;
  text-align: left;
  white-space: nowrap;
}
.prog-table thead th {
  position: sticky;
  top: 0;
  background: var(--ink);
  color: var(--bl);            /* encabezado invertido para contraste */
  letter-spacing: 0.5px;
}
.prog-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.prog-table td.empty { color: var(--ink2); }

/* Fila del Program View resaltada cuando se toca su pad (invertida). */
.prog-table tbody tr.hit td { background: var(--ink); color: var(--bl); }

/* Subhead del Program View con el botón "+ info para nerds". */
.prog-subhead { padding: 0.3rem 0.4rem 0; }
.prog-nerd-btn {
  width: 100%;
  font-family: var(--f-pixel);
  font-size: 0.6rem;
  letter-spacing: 0.5px;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 0.26rem 0.4rem;
  cursor: pointer;
}
.prog-nerd-btn:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.prog-nerd-btn[aria-pressed="true"] { background: var(--ink); color: var(--bl); }

/* Caja del EQ master (FX master de JJOS) en el Program View. */
.prog-eq-box { padding: 0.4rem; border-top: 2px solid var(--ink); }
.prog-eq-box[hidden] { display: none; }
.eq-title {
  font-family: var(--f-pixel); font-size: 0.62rem; letter-spacing: 0.5px;
  margin-bottom: 0.3rem; display: flex; align-items: center; gap: 0.4rem;
}
.eq-fxtitle { margin-top: 0.8rem; border-top: 2px dotted var(--ink2); padding-top: 0.6rem; }
.eq-state {
  border: 2px solid var(--ink); padding: 0 0.3rem; font-size: 0.55rem;
  background: var(--ink); color: var(--bl);
}
.eq-svg {
  display: block; width: 100%; height: 3.2rem;
  border: 2px solid var(--ink); color: var(--ink); margin-bottom: 0.3rem;
}
.eq-table { width: 100%; border-collapse: collapse; font-family: var(--f-pixel); font-size: 0.6rem; }
.eq-table td { border: 2px solid var(--ink); padding: 0.18rem 0.4rem; }
.eq-table td.eq-up { font-weight: 700; }
.eq-table td.eq-dn { color: var(--ink2); }
.eq-empty { font-family: var(--f-pixel); font-size: 0.62rem; color: var(--ink2); }
#eq-bypass { margin-top: 0.35rem; }

/* Modo nerd: columna ATTACK con más prioridad (más grande y en negrita). */
.prog-table .col-atk { font-size: 0.8rem; font-weight: 700; text-align: center; }
.prog-table thead .col-atk { font-size: 0.62rem; }  /* el header normal */
/* Celda del mini-gráfico de envolvente (ocupa el ancho de la columna ENV). */
.prog-table .env-cell { padding: 0.15rem 0.25rem; width: 5.5rem; }
.env-svg { display: block; width: 100%; height: 1.5rem; }


/* SOLO / MUTE por track: mismo estilo que MONO/POLY (contorno = off, relleno = on). */
.track-toggle[data-mode="on"] { background: var(--ink); color: var(--bl); }
.track-toggle[data-mode="on"]:hover { filter: brightness(1.1); }
.track-toggle:disabled { opacity: 0.35; cursor: default; }

/* ── Botón "?" (tutorial), junto a info y volumen ──────────────────────── */
.corner-help-btn {
  position: fixed;
  bottom: 0.9rem;
  left: 6.9rem;                /* a la derecha del de volumen */
  z-index: 50;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0;
  font-family: var(--f-pixel); font-size: 1rem;
  color: var(--ink); background: transparent;
  border: 3px solid var(--ink); border-radius: 0; cursor: pointer;
  transition: background 0.1s steps(1);
}
.corner-help-btn:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.corner-help-btn:active { background: var(--ink); color: var(--bl); }
.corner-help-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── Diálogo "¿Querés ver el tutorial?" ────────────────────────────────── */
.tut-ask {
  position: fixed; inset: 0; z-index: 9200;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.55);
}
.tut-ask[hidden] { display: none; }
.tut-ask-box {
  background: var(--bl); border: 3px solid var(--ink);
  padding: 1rem 1.1rem; max-width: 22rem; width: 86vw;
  font-family: var(--f-pixel); color: var(--ink);
}
.tut-ask-title { font-size: 0.95rem; letter-spacing: 0.5px; margin-bottom: 0.5rem; }
.tut-ask-text { font-size: 0.7rem; line-height: 1.6; margin: 0 0 0.9rem; }
.tut-ask-btns { display: flex; gap: 0.5rem; justify-content: flex-end; }
.tut-btn {
  font-family: var(--f-pixel); font-size: 0.7rem; letter-spacing: 0.5px;
  padding: 0.4rem 0.7rem; cursor: pointer;
  background: var(--ink); color: var(--bl); border: 3px solid var(--ink); border-radius: 0;
}
.tut-btn:hover { filter: brightness(1.1); }
.tut-btn-ghost { background: transparent; color: var(--ink); }
.tut-btn-ghost:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }

/* ── Tutorial spotlight (foco + tooltip) ───────────────────────────────── */
.tut-catch {                 /* captura los clicks para avanzar */
  position: fixed; inset: 0; z-index: 9000;
  background: transparent; cursor: pointer;
}
.tut-catch[hidden] { display: none; }
.tut-spot {                  /* recuadro de foco: oscurece TODO menos el target */
  position: fixed; z-index: 9001; pointer-events: none;
  border: 2px solid var(--bl);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.72);
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}
.tut-spot[hidden] { display: none; }
.tut-tip {
  position: fixed; z-index: 9002; max-width: 17rem;
  background: var(--bl); border: 3px solid var(--ink);
  padding: 0.55rem 0.65rem; font-family: var(--f-pixel); color: var(--ink);
  cursor: pointer; transition: top .18s ease, left .18s ease;
}
.tut-tip[hidden] { display: none; }
.tut-tip-title { font-size: 0.72rem; letter-spacing: 0.5px; margin-bottom: 0.3rem; }
.tut-tip-text { font-size: 0.62rem; line-height: 1.55; margin: 0; }
.tut-tip-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 0.5rem; font-size: 0.55rem; color: var(--ink2);
}
.tut-tip-skip { color: var(--ink); text-decoration: underline; cursor: pointer; }

/* ── Overlay de RUIDO (grano) animado tipo estática de TV ───────────────── */
html::after {
  content: "";
  position: fixed;
  inset: -50%;                   /* margen extra para que el desplazamiento no muestre bordes */
  width: 200%; height: 200%;
  z-index: 9990;
  pointer-events: none;          /* no bloquea clicks */
  opacity: 0.05;                 /* 5% */
  /* Ruido forzado a GRIS OPACO (alpha=1) con feColorMatrix → se ve de verdad.
     baseFrequency baja = grano grande. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.35'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0.33%200.33%200.33%200%200%200.33%200.33%200.33%200%200%200.33%200.33%200.33%200%200%200%200%200%200%201'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;  /* tile grande del grano */
  animation: tvnoise 0.09s steps(10) infinite;
}
/* Saltos rápidos de posición → titileo de estática de TV. */
@keyframes tvnoise {
  0%   { background-position:   0px    0px; }
  10%  { background-position: -60px   30px; }
  20%  { background-position:  40px  -50px; }
  30%  { background-position: -90px  -20px; }
  40%  { background-position:  70px   60px; }
  50%  { background-position: -30px   90px; }
  60%  { background-position:  90px  -70px; }
  70%  { background-position: -80px   50px; }
  80%  { background-position:  50px  -90px; }
  90%  { background-position: -40px  -40px; }
  100% { background-position:  20px   70px; }
}
@media (prefers-reduced-motion: reduce) { html::after { animation: none; } }

/* ── Q-LINKS: botón de esquina + panel con 4 faders read-only ──────────── */
.corner-qlink-btn {
  position: fixed;
  top: 11.6rem;                /* debajo de Program View */
  right: 0.8rem;
  z-index: 50;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; padding: 0;
  color: var(--ink); background: transparent;
  border: 3px solid var(--ink); border-radius: 3px; cursor: pointer;
  transition: background 0.1s steps(1);
}
.corner-qlink-btn:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.corner-qlink-btn[aria-pressed="true"] { background: var(--ink); color: var(--bl); }
.corner-qlink-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.corner-qlink-btn:disabled { opacity: 0.35; cursor: default; }

.qlink-panel {
  position: fixed;
  top: 6.6rem;
  left: 0.8rem;
  z-index: 60;
  width: min(320px, 90vw);
  background: var(--bl);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.25);
  font-family: var(--f-pixel);
  color: var(--ink);
}
.qlink-panel[hidden] { display: none; }
.qlink-head {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.5rem; border-bottom: 2px solid var(--ink);
  cursor: move; font-size: 0.7rem; letter-spacing: 0.5px;
}
.qlink-title { letter-spacing: 1px; }
.qlink-info { flex: 1; font-size: 0.6rem; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qlink-body {
  display: flex; justify-content: space-around; gap: 0.4rem;
  padding: 0.7rem 0.5rem 0.4rem;
}
.qlink-col { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; flex: 1; }
.qlink-track {
  position: relative;
  width: 1.7rem; height: 9rem;
  border: 2px solid var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.qlink-track::before {                /* línea central tenue */
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--ink); opacity: 0.25;
}
.qlink-thumb {
  position: absolute; left: -2px; right: -2px; height: 0.5rem;
  background: var(--ink);
  transform: translateY(-50%);
  transition: top 0.05s linear;       /* movimiento suave */
}
.qlink-col.idle .qlink-thumb { opacity: 0.3; }   /* sin automatización: tenue */
.qlink-param {
  font-size: 0.6rem; letter-spacing: 0.5px; text-transform: uppercase;
  background: var(--ink); color: var(--bl); padding: 0.08rem 0.3rem;
}
.qlink-col.idle .qlink-param { background: transparent; color: var(--ink2); border: 1px solid var(--ink2); }
.qlink-tag { font-size: 0.55rem; color: var(--ink2); }
.qlink-val { font-size: 0.55rem; color: var(--ink); font-variant-numeric: tabular-nums; min-height: 0.8em; }
.qlink-note {
  font-size: 0.55rem; color: var(--ink2); line-height: 1.4;
  padding: 0 0.6rem 0.6rem; text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════
   MÓVIL — tab bar + layout responsive (<=600px). No afecta al desktop.
   ════════════════════════════════════════════════════════════════════════ */

/* Tab bar: oculta en desktop; visible solo en móvil (media query abajo). */
.mtabbar { display: none; }
.mtab {
  flex: 1; border: 0; border-right: 2px solid var(--ink);
  background: var(--bl); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: var(--f-pixel); font-size: 0.5rem; letter-spacing: 0.3px;
  padding: 0.5rem 0 0.45rem; min-height: 3.1rem; cursor: pointer;
  touch-action: manipulation;   /* sin delay de 300ms ni doble-tap zoom */
}
.mtab svg { width: 18px; height: 18px; flex: 0 0 auto; }
.mtab:last-child { border-right: 0; }
.mtab.act { background: var(--ink); color: var(--bl); }
.mtab:disabled { opacity: 0.32; cursor: default; }
.mtab:active { background: color-mix(in srgb, var(--ink) 18%, transparent); }
.mtab.act:active { background: var(--ink); }

/* ── Apertura de paneles: "pintado progresivo" tipo LCD (izquierda→derecha) ──
   Cada vez que un visor pasa de oculto a visible, se pinta en pasos y entra con
   una capa de scanlines que se desvanece (igual que las slides del site). */
/* Se dispara por JS (clase .lcd-in) en cada apertura → garantiza que corra. */
.lcd-in { animation: lcd-open 0.42s steps(9) both; }
@keyframes lcd-open {
  0%   { clip-path: inset(0 100% 0 0); filter: brightness(1.8) contrast(1.4); }
  60%  { filter: brightness(1.25) contrast(1.2); }
  100% { clip-path: inset(0 0 0 0); filter: none; }
}
.lcd-in::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 30;
  background: repeating-linear-gradient(0deg, rgba(43,55,8,.45) 0 1px, transparent 1px 3px);
  animation: lcd-open-scan 0.42s steps(9) forwards;
}
@keyframes lcd-open-scan { 0% { opacity: 0.95; } 100% { opacity: 0; } }

@media (max-width: 600px) {
  /* anular escalado del desktop y permitir scroll vertical (la UI puede ser más
     alta que el viewport) en vez del centrado fijo con overflow:hidden. */
  html, body { height: auto; min-height: 100dvh; overflow-y: auto; overflow-x: hidden; }
  body {
    zoom: 1; justify-content: flex-start;
    padding-top: calc(0.6rem + env(safe-area-inset-top));   /* esquiva el notch */
    overscroll-behavior-y: contain;                          /* sin pull-to-refresh */
  }
  /* Alto de la tab bar (incl. safe-area) para que paneles/pads no queden tapados. */
  :root { --tabbar-h: calc(3.1rem + env(safe-area-inset-bottom)); }

  /* Botones de esquina fijos → reemplazados por la tab bar */
  .corner-wave-btn, .corner-song-btn, .corner-vol-btn, .corner-midi-btn,
  .corner-prog-btn, .corner-qlink-btn, .corner-info-btn, .corner-help-btn,
  .corner-jjos { display: none; }

  /* Pads a todo el ancho; deja lugar abajo para la tab bar (alto real + safe-area) */
  .unit {
    transform: none; width: 100%; max-width: 100vw;
    padding: 0.5rem 0.9rem calc(var(--tabbar-h) + 0.6rem); border-width: 0;
  }
  .stack > * { max-width: 100%; }
  /* Orden vertical en móvil: pads PRIMERO, después controles. La sección de pads
     queda ~15% más chica vía max-width (reflow real, sin `zoom` no-estándar). */
  .pads-panel { max-width: 390px; width: auto; margin: 0 auto; display: flex; flex-direction: column; }
  .hp, .pad { touch-action: manipulation; }   /* sin doble-tap zoom sobre los pads */
  /* Táctil: el atajo de teclado no aplica → ocultamos el atajo (centro) y mostramos
     "PAD n" centrado en su lugar. */
  .pad .pad-label { display: none; }
  .pad .pad-key {
    position: static; bottom: auto; left: auto;
    opacity: 1; color: var(--ink); font-size: 0.7rem;
  }
  .pad.hit .pad-key { color: var(--bl); }
  #pads { order: 1; }
  .bank-side { order: 2; }
  .prog-side { order: 3; }

  /* Banks + TRACKS + MONO/SOLO/MUTE/N.RPT: de columna lateral absoluta a filas */
  .bank-side {
    position: static; top: auto; bottom: auto; left: auto;
    margin: 0.6rem 0 0; flex-direction: row; flex-wrap: wrap; gap: 0.4rem;
  }
  .bank-col { flex: 0 0 auto; flex-direction: row; gap: 0.4rem; }   /* ABCD compacto */
  .bank-side > .voice-toggle { flex: 1; }
  .tracks-toggle { display: block; }                                /* TRACKS junto a ABCD */
  .tracks-toggle[aria-expanded="true"] { background: var(--ink); color: var(--bl); }
  .bank-side .nr-row { flex: 0 0 100%; margin-top: 0; }

  /* Lista de tracks: desplegable. Oculta hasta que se abre con TRACKS. */
  .prog-side {
    position: static; width: 100%; right: auto; margin: 0.4rem 0 0;
    display: none; max-height: 38vh; overflow-y: auto;
  }
  .prog-side.open { display: block; }

  /* Header de carga: botón "Cargar proyecto" arriba, CENTRADO y compacto (~35%
     más chico). En móvil NO mostramos el nombre del proyecto. */
  .folder-pick { display: block; }
  .corner-load {
    position: static; width: 100%; max-width: 100%;
    flex-direction: column; align-items: center; gap: 0; margin: 0 0 0.5rem;
  }
  .corner-load .folder-pick {
    width: auto; text-align: center;
    font-size: 0.62rem; padding: 0.4rem 0.85rem;
  }
  .corner-project { display: none; }

  /* Paneles flotantes → hoja a pantalla completa */
  .midi-panel, .prog-panel, .qlink-panel, .info-panel,
  .wave-panel, .song-panel, .vol-panel {
    position: fixed !important; inset: 0 !important;
    left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100dvh !important;
    max-width: none !important; max-height: none !important;
    margin: 0 !important; border-radius: 0 !important;
    transform: none !important; z-index: 200; overflow-y: auto;
    overscroll-behavior: contain;
    /* arriba: safe-area del notch · abajo: alto real de la tab bar + safe-area */
    padding-top: calc(0.6rem + env(safe-area-inset-top));
    padding-bottom: calc(var(--tabbar-h) + 0.6rem);
  }
  /* Program View y Song View: la lista aprovecha TODO el alto de la hoja (scrollea
     la hoja entera) en vez de quedar limitada con espacio vacío abajo. */
  .prog-table-wrap { max-height: none; overflow-y: visible; }
  .song-timeline { max-height: none; overflow-y: visible; }

  /* BPM: sale de la esquina (se cortaba) y va a la fila del play/stop, a la der.
     El desplegable de secuencia baja a su propia fila, quedando DEBAJO del BPM. */
  #tempo { position: static; top: auto; right: auto; margin-left: auto; }
  .transport-row .seq-select { flex: 0 0 100%; }

  /* Tab bar visible, anclada abajo. El padding inferior = safe-area: el fondo se
     extiende bajo la barra de gestos y los botones quedan por encima de ella. */
  .mtabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 250; border-top: 3px solid var(--ink); background: var(--bl);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Sample View móvil: bocina, gesto táctil en la onda y 4x4 de chops. */
  .wave-speaker {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; padding: 0; flex: 0 0 auto;
    background: transparent; color: var(--ink);
    border: 3px solid var(--ink); border-radius: 3px; cursor: pointer;
  }
  .wave-speaker:active { background: var(--ink); color: var(--bl); }
  .wave-canvas { touch-action: none; }   /* el pinch/paneo lo manejamos por JS */
  .wave-chops:not([hidden]) { display: block; margin-top: 0.7rem; }
  .wave-chop-banks { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
  .wave-chop-bank {
    flex: 1 1 0; text-align: center;
    font-family: var(--f-pixel); font-size: 0.72rem;
    padding: 0.35rem 1rem; border: 3px solid var(--ink);
    background: transparent; color: var(--ink); cursor: pointer;
  }
  .wave-chop-bank.act { background: var(--ink); color: var(--bl); }
  .wave-chop-bank { touch-action: manipulation; }
  .wave-chop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
  .wave-chop-pad {
    aspect-ratio: 1; border: 3px solid var(--ink); background: rgba(43,55,8,.04);
    font-family: var(--f-pixel); font-size: 0.5rem; color: var(--ink); cursor: pointer;
    display: flex; align-items: center; justify-content: center; text-align: center; padding: 2px;
    touch-action: manipulation;   /* sin delay de 300ms al tocar */
  }
  .wave-chop-pad.act { background: var(--ink); color: var(--bl); }
  .wave-chop-pad.empty { opacity: 0.25; border-style: dashed; cursor: default; }

  /* Splash adaptado a pantalla chica. */
  .splash-logo { width: clamp(72px, 22vw, 120px); height: auto; }
  .splash-text { font-size: clamp(10px, 3.2vw, 15px); text-align: center; padding: 0 1.5rem; }
}