/* Versión web (25-sep-2026): encima de app.css. Sin lo que es de escritorio y usable en el celular. */
#barra-titulo { padding-right:12px; -webkit-app-region:no-drag; }
#btn-compa, #btn-fijar, #aviso-plugins, #aviso-actualizacion { display:none !important; }
#btn-menu { display:none; background:none; border:1px solid var(--linea); border-radius:7px; width:34px; height:28px; font-size:16px; }
@media (max-width: 820px) {
  #btn-menu { display:inline-block; }
  #barra-titulo > span, #nombre-dj, .beta { display:none; }
  #buscador { flex:1; margin-left:0; min-width:0; }
  #lateral { position:fixed; top:38px; bottom:0; left:-270px; width:260px; z-index:45; transition:left .2s; box-shadow:0 0 30px #000a; }
  body.menu-abierto #lateral { left:0; }
  body.menu-abierto #app::after { content:""; position:fixed; inset:38px 0 0 0; background:#0006; z-index:40; }
  #vista { padding:0 12px 24px; }
  .heroe { flex-direction:column; align-items:flex-start; padding:16px; }
  .heroe img { width:140px; height:140px; }
  .heroe h1 { font-size:28px; }
  .cab-pl { flex-direction:column; align-items:flex-start; }
  .cab-pl h1 { font-size:30px; }
  .fila .mono { display:none; }
  .fila .etis span:not(.eti) { display:none; }
  .variaciones { padding-left:12px; }
  .baldosa, .baldosa .caja { width:136px; }
  .baldosa .caja { height:136px; }
  #reproductor { height:70px; padding:0 8px; gap:8px; }
  #app { bottom:70px; }
  .rp-tema { width:auto; flex:1; }
  .rp-tema img { width:42px; height:42px; }
  .rp-der, .rp-linea, .rp-tema a { display:none; }
  .rp-centro { flex:none; }
  .rp-botones { gap:10px; }
  #modal .caja { width:94vw; padding:16px; }
  .aviso-inicio { flex-wrap:wrap; }
}