/* DiscoTK · menú lateral (☰) ordenado. Archivo: css/menu-lateral.css
   Va DESPUÉS de movil.css. Misma condición que el menú de movil.css: en PC no cambia nada.

   Orden del menú, de arriba hacia abajo (de "quién soy" a "a dónde voy"):
     1 · Logo
     2 · Tu nombre ........ tus fichas
     3 · 👥 Gente y chats (con el aviso de mensajes sin leer)
     4 · Instalar · Invitar · Admin   (de dos en dos; el que quede solo ocupa toda la fila)
     5 · 🎶 Salas (tarjeta con las salas por género)
     6 · 🔒 Salas privadas (tarjeta con tus mesas, Invitar y Dejar)
     7 · Salir (al final, para que no se toque sin querer)
   El menú es un contenedor flex que se envuelve: los botones ocultos (Instalar, Admin) simplemente desaparecen
   y los demás se acomodan solos, sin huecos. */
@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){

 /* ---------- base ---------- */
 html #app>header{display:flex!important;flex-wrap:wrap;align-content:flex-start;align-items:center;gap:8px;padding-bottom:28px}
 /* todo lo que no tenga lugar propio va al final y a ancho completo (así cualquier botón nuevo no rompe el orden) */
 html #app>header>*,html #app>header>#ub>*{order:50!important;flex:1 1 100%;min-width:0;margin:0}
 html #app>header .sp,html #app>header>.hbr{display:none!important}

 /* ---------- 1 · logo ---------- */
 html #app>header>.logo{order:1!important;font-size:26px;line-height:1.1;padding:2px 0 10px;border-bottom:1px solid #ff2d9555}

 /* ---------- 2 · nombre y fichas ---------- */
 html #app>header>#ub .who{order:2!important;flex:1 1 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:9px 12px;border-radius:12px;background:#ffffff0f;border:1px solid #ffffff1c;font-weight:700}
 html #app>header>#wal{order:3!important;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;font-size:14px;font-weight:800;border-radius:12px}

 /* ---------- 3 · gente y chats (botón 👥 que crea social.js) ---------- */
 html #app>header>#soc-btn{order:4!important;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;border-radius:12px;font-size:14px;font-weight:700;background:#8a3dff;color:#fff;border-color:#8a3dff}
 html #app>header>#soc-btn::after{content:"Gente y chats";font-size:13px}
 html #app>header>#soc-btn b{top:-6px;right:8px}

 /* ---------- 4 · acciones, de dos en dos ---------- */
 html #app>header>#inst,html #app>header>#share,html #app>header>#ub #adm{flex:1 1 calc(50% - 4px);display:inline-flex;align-items:center;justify-content:center;padding:10px 8px;font-size:13px;border-radius:12px;text-align:center}
 html #app>header>#inst{order:5!important}
 html #app>header>#share{order:6!important}
 html #app>header>#ub #adm{order:7!important}
 /* los que el script esconde con style="display:none" siguen escondidos */
 html #app>header>#inst[style*="display: none"],html #app>header>#inst[style*="display:none"],
 html #app>header>#ub #adm[style*="display: none"],html #app>header>#ub #adm[style*="display:none"]{display:none!important}

 /* ---------- 5 · salas por género (salas.js) ---------- */
 html #app>header>#salasbar{order:20!important;display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:6px;padding:10px;border-radius:14px;background:#ffffff0a;border:1px solid #ffffff18}
 html #app>header>#salasbar[hidden]{display:none!important}
 html #app>header #salasbar .sl-lb{font:800 12px "Bricolage Grotesque",sans-serif;letter-spacing:.3px}
 html #app>header #salasbar .sl-fila{display:flex;flex-wrap:wrap;gap:6px;overflow:visible;padding:0;border-bottom:0}
 html #app>header #salasbar .sl-c{flex:1 1 calc(50% - 6px);min-width:0;top:0;padding:9px 6px;border-radius:10px;border-top-width:3px;font-size:13px;text-align:center;overflow:hidden;text-overflow:ellipsis}

 /* ---------- 6 · salas privadas (mesas.js) ---------- */
 html #app>header>#ub>#mesabar{order:30!important;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px;margin-top:2px;padding:10px;border-radius:14px;background:#ffffff0a;border:1px solid #ffffff18}
 html #app>header>#ub>#mesabar[hidden]{display:none!important}
 html #app>header #mesabar::before{content:"🔒 Salas privadas";flex:0 0 100%;margin:0 0 2px;font:800 12px "Bricolage Grotesque",sans-serif;letter-spacing:.3px}
 html #app>header #mesabar .mt-tabs{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px;overflow:visible;padding:0;max-width:none}
 html #app>header #mesabar .mt-t{flex:1 1 calc(50% - 6px);max-width:none;padding:8px 8px;font-size:13px;text-align:center}
 /* el botón ＋ se explica solo: "＋ Nueva sala o fiesta" a todo el ancho */
 html #app>header #mesabar .mt-t.mas{flex:1 1 100%;font-size:0}
 html #app>header #mesabar .mt-t.mas::after{content:"＋ Nueva sala o fiesta";font-size:13px}
 html #app>header #mesabar .mt-inv:not([hidden]),html #app>header #mesabar .mt-lv:not([hidden]){flex:1 1 calc(50% - 6px);display:inline-block!important;text-align:center;padding:8px 6px;font-size:13px}
 html #app>header #mesabar .mt-inv .mt-it{display:inline!important}
 html #app>header #mesabar .mt-lv{font-size:13px}
 html #app>header #mesabar .mt-lv::before{content:none!important}

 /* ---------- 7 · salir, al final ---------- */
 html #app>header>#ub #out{order:90!important;margin-top:8px;padding:11px 12px;border-radius:12px;font-size:14px;text-align:center;color:#ff8fb8;border:1px solid #ff8fb8aa;background:none}
}