/* Máster extendido (#ctrl-view) en el móvil — 2026-10-10. Solo RECOLOCA con media queries:
   ningún control cambia de id ni de comportamiento y tablet/ordenador no cambian (≥ 768 px).
   Vertical de móvil (≤ 767 px de ancho): las dos columnas se disuelven (display:contents) y cada
   bloque pasa a ser un hijo de la columna única; `order` los coloca como la bandeja de la APK
   (native/src/trays/ControllerTray.tsx): launchpad → FX → speed → transporte → chips AUTO →
   BPM → text cues → pantalla completa → color → vídeos → mini → Cast/salida → mezclador.
   El mini conserva la caja con la proporción del programa (js/render/miniMonitorBox.js:
   --ld-program-aspect, tope de media pantalla) pero a todo el ancho, debajo de los vídeos. */
@media (max-width:767px){
  /* Cabecera: lo que no cabe baja de línea, nada se sale. */
  .cv-header{flex-wrap:wrap;gap:6px 8px;padding:8px 12px;}
  .cv-header>div:last-child{flex:1 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end;gap:6px;}
  #cv-spectrum{flex:1 1 90px;min-width:90px;max-width:200px;width:auto;}
  /* Una columna con scroll. */
  .cv-body{display:flex;flex-direction:column;gap:8px;padding:10px 12px;}
  .cv-left,.cv-right{display:contents;}
  /* Los bloques no encogen con la columna (el mini, sin contenido en flujo, se quedaba en 0 px). */
  .cv-left>*,.cv-right>*{flex-shrink:0;}
  .cv-right>.cv-section-label{margin:4px 0 -4px;}
  .cv-left>div:has(>#cv-launchpad){order:1;}
  .cv-left>div:has(>.cv-mfx){order:2;}
  .cv-right>.cv-section-label:has(+.speed-row){order:3;}
  .cv-right>.speed-row{order:4;}
  .cv-transport{order:5;}
  #cv-auto-chips{order:6;}
  .cv-right>.cv-section-label:has(+.m-audio-toggle){order:7;}
  .cv-right>.m-audio-toggle{order:8;}
  .cv-left>div:has(>#cv-text-cues){order:9;}
  .cv-fs-btn{order:10;}
  .cv-left>div:has(>#cv-color-swatches){order:11;}
  .cv-left>div:has(>#cv-vid-pads){order:12;}
  .cv-mm-wrap{order:13;align-self:center;width:min(100%,calc(50vh * var(--ld-program-aspect)));}
  #cv-beat-dots{order:14;align-self:center;}
  #cv-cast{order:15;}
  #cv-ndi{order:16;}
  .cv-right>.cv-section-label:has(+.cv-faders){order:17;}
  .cv-faders{order:18;}
  /* Launchpad: una fila por ánimo = botón de ánimo a toda la altura + 4 pads base en una línea y
     los 4 extra (Pro) en la siguiente; el separador vertical se vuelve la línea entre las dos. */
  #cv-launchpad .lp-group{align-items:stretch;}
  #cv-launchpad .lp-mood{height:auto;width:34px;}
  #cv-launchpad .lp-scenes{flex-wrap:wrap;}
  #cv-launchpad .lp-scenes>.sp{flex:1 1 calc(25% - 3px);min-width:40px;padding:6px 3px 7px;white-space:nowrap;text-overflow:ellipsis;}
  #cv-launchpad .lp-sep{flex:0 0 100%;height:1px;margin:0;}
  /* FX: cuadrícula de 4 por fila; los de performance llevan su chip AUTO debajo (.fx-performance). */
  #ctrl-view .cv-mfx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
  #ctrl-view .cv-mfx>.cv-mfx-btn,#ctrl-view .cv-mfx>.fx-performance{min-width:0;}
  /* Transporte: cuatro botones a lo ancho; si no caben, 2+2. */
  .cv-transport{flex-wrap:wrap;}
  .cv-transport>.cv-tbtn{flex:1 1 72px;min-width:0;justify-content:center;padding:10px 6px;}
  /* Color: 5 por fila para que cada muestra sea tocable. La fila Auto · Tinte · TONO cabe también en
     español (a 360 px «Tinte» la empujaba 2 px fuera): el deslizador no impone su ancho intrínseco. */
  #cv-color-swatches{grid-template-columns:repeat(5,minmax(0,1fr));}
  #cv-sl-hue,#ctrl-view .ctrl:has(>#cv-sl-hue){min-width:0;}
  /* Vídeos: 4 por fila visibles en su carril horizontal. */
  #cv-vid-pads{grid-auto-columns:calc((100% - 15px) / 4);}
  /* Mezclador: los 6 faders caben a lo ancho. */
  .cv-faders{gap:4px;padding:10px 4px;justify-content:space-between;}
  .cv-faders>.cv-fader-row{min-width:0;flex:1 1 0;padding:7px 2px 6px;}
}