/* DiscoTK · diseño MÓVIL con menú lateral (☰).
   Va DESPUÉS de boliche.css y admin.css. Solo actúa en teléfono vertical (misma condición Q_TEL que usa js/panel.js).
   Actúa en teléfono vertical y en teléfono girado (bloque final). En PC no cambia nada: todo lo de aquí está dentro del @media y los elementos nuevos
   (#mv-top, #mv-bg, #mv-close, #mv-info) están ocultos fuera de él.
   js/movil.js mide el video y deja su posición en las variables --vi-t/l/w/h/b/r para colocar lo que va encima. */

#mv-top,#mv-bg,#mv-close,#mv-info,#mv-px,#mv-vert{display:none}
/* "↺ Vertical": solo aparece si la app giró la pantalla a horizontal con el botón del video */
html.mv-paisaje #mv-vert{display:flex;position:fixed;z-index:90;top:3px;left:50%;transform:translateX(-50%);align-items:center;gap:4px;padding:3px 10px;
 border:1px solid #8a3dffaa;border-radius:99px;background:#8a3dff88;color:#fff;font:700 11px "Bricolage Grotesque",system-ui,sans-serif;cursor:pointer}
@media (orientation:portrait){html.mv-paisaje #mv-vert{display:none}}

/* El menú lateral (☰), la barra mínima y las capas sobre el video valen para teléfono vertical Y para teléfono girado.
   Teléfono girado = horizontal + bajito + pantalla táctil (así una ventana chica de PC con ratón no entra aquí). */
@media (max-width:799px) and (orientation:portrait),(max-width:799px) and (min-height:601px),(max-width:560px),(orientation:landscape) and (max-height:520px) and (pointer:coarse){

 /* ---------- barra mínima de arriba: ☰ · logo ........ fichas ---------- */
 #app>#mv-top{display:flex;align-items:center;gap:6px;flex:none;position:relative;z-index:3;background:var(--bar);color:#fff;
  padding:calc(2px + env(safe-area-inset-top,0px)) 8px 2px;border-bottom:1px solid #ff2d9577;box-shadow:0 1px 10px #ff2d9533}
 #mv-top .logo{font-size:16px;line-height:1;white-space:nowrap}
 #mv-burger{flex:none;width:30px;height:24px;padding:0;border:1px solid #ffffff22;border-radius:8px;background:#ffffff1f;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
 #mv-burger i{display:block;width:14px;height:2px;border-radius:2px;background:#fff}
 #mv-wal{flex:none;padding:2px 9px;font-size:11px;line-height:1.2;background:#b8f23a;color:#0f2a05;box-shadow:0 0 8px #b8f23a88}
 #mv-wal[hidden]{display:none}

 /* ---------- el encabezado de siempre pasa a ser el menú lateral ---------- */
 #app>header{position:fixed;top:0;bottom:0;left:0;width:min(86vw,340px);max-width:none;z-index:75;overflow-y:auto;overscroll-behavior:contain;
  align-content:flex-start;padding:calc(16px + env(safe-area-inset-top,0px)) 12px 18px;
  background:var(--bar);border-bottom:0;border-right:1px solid #ff2d9577;box-shadow:none;
  transform:translateX(-105%);visibility:hidden;transition:transform .24s ease,visibility 0s linear .24s}
 html.mv-open #app>header{transform:none;visibility:visible;box-shadow:0 0 30px #ff2d9566;transition:transform .24s ease,visibility 0s}
 #app>#mv-bg{position:fixed;inset:0;z-index:74;background:#000b}
 #app>#mv-bg:not([hidden]){display:block}
 #app>#mv-close{position:fixed;z-index:76;top:calc(10px + env(safe-area-inset-top,0px));left:min(calc(86vw + 8px),348px,calc(100vw - 46px));
  width:38px;height:38px;padding:0;border:1px solid #ff2d9577;border-radius:50%;background:var(--sf);color:#fff;font-size:22px;line-height:1;cursor:pointer}
 #app>#mv-close:not([hidden]){display:block}
 /* con el menú abierto, lo que va por encima de la app se esconde para no pintarse sobre el menú (incluido el botón Bailar) */
 html.mv-open #disco,html.mv-open #fr-cv,html.mv-open #vid,
 html.mv-open [id*="bailar" i],html.mv-open [class*="bailar" i],.mv-oculto{visibility:hidden!important}

 /* ---------- zona de video: video a todo el ancho; la caja de sonido queda como franja debajo ---------- */
 #app>#pz.pz:not(.min){max-height:none}
 #app #pz.pz:not(.min) #plbody{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:0;padding:2px 8px 5px;margin-top:0;align-items:start}
 #app #pz.pz:not(.min) .vwrap{grid-column:1!important;grid-row:1!important;width:100%;max-width:none;margin:0;align-self:start}
 #app #pz.pz:not(.min) #radio:not(.exp){grid-column:1!important;grid-row:2!important;align-self:stretch;contain:none;min-height:0;height:auto;max-height:30dvh;
  margin:3px 32px 0 0;padding:3px;gap:0;border-color:#3a2160;box-shadow:none}   /* sin el borde/brillo turquesa */
 #app #vt-row{margin:0!important}   /* la fila de debajo del video ya no deja hueco (los botones 📺/🔊 ahora flotan) */
 #app #pz.dj #vt-row{margin-top:3px!important}
 /* espacio reservado mientras la caja está abierta en grande (lo crea panel.js con grid-column:2) */
 #app #plbody>div:not([class]):not([id]){grid-column:1!important;grid-row:2!important}

 /* ---------- cosas encima del video (posición exacta la calcula js/movil.js) ---------- */
 #app #vfl{display:none!important}   /* sin el cuadrito de video flotante */
 /* "Sonido y video" (y su flecha ▾ para contraer) en la esquina de arriba a la izquierda; la fila de arriba desaparece */
 #app>#pz.pz:not(.min)>.pbar{display:contents}
 html #app #pz.pz:not(.min) #pl-t{position:fixed;z-index:4;left:calc(var(--vi-l,8px) + 6px);top:calc(var(--vi-t,60px) + 6px);
  width:24px;height:24px;padding:0;border-radius:50%;background:#000a;color:var(--tx);font-size:12px;display:flex;align-items:center;justify-content:center}
 html #app #pz.pz:not(.min) #plbar{position:fixed;z-index:4;left:calc(var(--vi-l,8px) + 34px);top:calc(var(--vi-t,60px) + 6px);
  max-width:44vw;padding:3px 9px;border-radius:99px;background:#000a;font-size:11px;line-height:1.2;pointer-events:none}
 /* "Cabina libre" / nombre del DJ: esquina de arriba a la derecha */
 html #app #pz.pz:not(.min) #dj-tag{position:fixed!important;z-index:4;left:auto!important;transform:none!important;
  right:calc(var(--vi-r,8px) + 44px)!important;top:calc(var(--vi-t,60px) + 6px)!important;max-width:40vw!important;
  padding:3px 9px!important;border-radius:99px!important;background:#000a!important}
 /* esconder reproductor (📺) y silencio (🔊): flotantes en el borde izquierdo del video; en pantallas chicas pasan a la derecha */
 html #app #pz.pz:not(.min) #rb,html #app #pz.pz:not(.min) #mt{position:fixed!important;z-index:4;left:calc(var(--vi-l,8px) + 6px);right:auto}
 html #app #pz.pz:not(.min) #rb,html #app #pz.pz:not(.min) #mt{background:#8a3dff88!important;border:1px solid #8a3dffaa;box-shadow:none!important;
  opacity:0;pointer-events:none;transition:opacity .35s}
 html.mv-ov #app #pz.pz:not(.min) #rb,html.mv-ov #app #pz.pz:not(.min) #mt{opacity:1;pointer-events:auto}
 html.mv-ov #app #pz.pz:not(.min) #rb.off{opacity:.55}
 html #app #pz.pz:not(.min) #rb{top:calc(var(--vi-t,60px) + var(--vi-h,170px)/2 - 33px)}
 html #app #pz.pz:not(.min) #mt{top:calc(var(--vi-t,60px) + var(--vi-h,170px)/2 + 3px)}
 /* título de lo que suena: abajo del video, aparece unos segundos y se va */
 #app>#mv-info{display:block;position:fixed;z-index:4;left:var(--vi-l,8px);width:var(--vi-w,300px);top:var(--vi-b,230px);transform:translateY(-100%);
  padding:22px 10px 6px;border-radius:0 0 12px 12px;background:linear-gradient(to top,#000d,#0000);color:#fff;
  pointer-events:none;opacity:0;transition:opacity .35s}
 #app>#mv-info.on{opacity:1}
 #app>#pz.min~#mv-info{display:none}
 #mv-info b{display:block;font-size:12.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #000}
 #mv-info small{display:block;font-size:11px;line-height:1.2;color:#d8c9ee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #000}
 #mv-info small[hidden]{display:none}
 #app #dj-cap{display:none!important}   /* su texto ahora sale encima del video */

 /* botón ⛶ del video (lo crea dj.js): ahora lleva la app a pantalla horizontal (versión de PC); icono dibujado aquí */
 #app #vz-btn{width:30px;height:30px;top:6px;right:6px;border-radius:10px;font-size:0}
 #app #vz-btn::before{content:"";display:block;width:20px;height:20px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='9' width='20' height='11' rx='2'/%3E%3Cpath d='M18 13v3'/%3E%3Cpath d='M7 5a8 8 0 0 1 10 0'/%3E%3Cpath d='M17 2v3h-3'/%3E%3C/svg%3E")}
 /* botón nuevo del panel: esconde/muestra el panel (usa lo mismo que hacía el ⛶), en el extremo derecho de la franja */
 #app #plbody>#mv-px{display:flex;position:absolute;z-index:3;right:8px;bottom:5px;width:28px;height:36px;padding:0;align-items:center;justify-content:center;
  border:1px solid #8a3dffaa;border-radius:10px;background:#8a3dff88;color:#fff;font-size:13px;line-height:1;cursor:pointer}
 /* con el panel escondido, el botón queda en la esquina de abajo a la derecha del video para poder volver a mostrarlo */
 body.vz-grande #app #plbody>#mv-px{bottom:9px;width:26px;height:26px;border-radius:8px}
 body.vz-grande #mv-info{padding-right:40px}

 /* ---------- franja de botones (Rockola, Karaoke, Micrófono, Ser DJ): más chicos, sin emojis ---------- */
 html.rk-menu #app #radio:not(.exp) #rk-menu{flex-direction:row;height:auto;gap:4px}
 html.rk-menu #app #radio:not(.exp) #rk-menu button{flex:1 1 0;min-width:0;min-height:28px;flex-wrap:wrap;align-content:center;gap:0 3px;
  white-space:normal;text-align:center;line-height:1.15;padding:3px 2px;font-size:10.5px;border-radius:10px}
 #rk-menu button .rk-pr{justify-content:center;font-size:10px}
}

/* ===== TELÉFONO GIRADO: video grande a la izquierda (65%) · chat a la derecha (35%) =====
   Se apoya en el bloque de arriba (menú ☰, capas sobre el video) y solo cambia la distribución:
   - izquierda: #pz (video arriba; debajo, la caja de sonido con Rockola/Karaoke/Micro/Ser DJ ocupa el alto que sobra del 16:9)
   - derecha: barra mínima (☰ + fichas), franja de avisos, chat y barra de escribir
   - el encabezado de siempre queda como menú lateral (logo, Instalar, Invitar, Admin, Salir, usuario, salas, mesas). */
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
 html #app{display:grid!important;grid-template-columns:minmax(0,65fr) minmax(0,35fr);grid-template-rows:auto auto minmax(0,1fr) auto;
  width:100%!important;max-width:none!important;margin:0!important;border:0!important;height:100vh;height:100dvh;
  padding:0 env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px)}
 html #app::before{content:none}
 html #app>#mv-top{grid-column:2;grid-row:1}
 html #app>.fr{grid-column:2;grid-row:2}
 html #app>#chat{grid-column:2;grid-row:3;min-height:0}
 html #app>#f{grid-column:2;grid-row:4;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
 html #app>#pz.pz{grid-column:1;grid-row:1/span 4;display:flex;flex-direction:column;min-height:0;height:100%;max-height:none;overflow:hidden;
  border-bottom:0;border-left:0;border-right:1px solid #ff2d9555}
 html #app>#pz.pz.min{height:auto;align-self:start;border-bottom:1px solid var(--bd)}

 /* video: todo el ancho de su columna (65%), sin pasar del alto de la pantalla menos un mínimo para los controles */
 html #app #pz.pz:not(.min) #plbody{flex:1;min-height:0;grid-template-rows:auto minmax(0,1fr);padding:0 6px 6px;margin-top:0}
 html #app #pz.pz:not(.min) .vwrap{max-width:min(100%,calc((100dvh - 78px)*1.7778));margin:0 auto}
 /* la caja de sonido rellena el espacio que queda debajo del video y se desplaza sola */
 html #app #pz.pz:not(.min) #radio:not(.exp){max-height:none;height:auto;align-self:stretch;overflow-y:auto}

 /* ⛶ no hace falta (ya está girado): el botón de esconder/mostrar panel (▾) sigue */
 html #app #vz-btn{display:none!important}
 /* "↺ Vertical": abajo, junto al botón del panel */
 html.mv-paisaje #mv-vert{top:auto;bottom:8px;left:auto;right:calc(35% + 44px);transform:none}
}

/* teléfonos angostos: los botones flotantes del video van a la derecha */
@media ((max-width:799px) and (orientation:portrait),(max-width:799px) and (min-height:601px),(max-width:560px)) and (max-width:400px){
 html #app #pz.pz:not(.min) #rb,html #app #pz.pz:not(.min) #mt{left:auto;right:calc(var(--vi-r,8px) + 6px)}
}