/* VISTA PREVIA DEL PANEL CON LA CABECERA DE sabo.gg (12-nov, chat sabo-precio-11nov; análisis web-entera-12nov, punto 10).
   Se carga DESPUÉS de style.css solo en app-orden.88-198-164-66.sslip.io (nginx la mete con sub_filter); app.sabo.gg no la ve.
   Lo mismo que el orden nuevo de sabo.gg: la barra arriba desde 768 (logo, pestañas, saldo, cuenta y menú), los apartados de la
   sección en una segunda fila, el contenido centrado, y desde 2400 px la página entera ampliada para que en 3840 se lea igual. */
:root{--z:1;}
@media(min-width:2400px){:root{--z:1.25;}html{zoom:1.25;}}
@media(min-width:2880px){:root{--z:1.5;}html{zoom:1.5;}}
@media(min-width:3360px){:root{--z:1.75;}html{zoom:1.75;}}
@media(min-width:3800px){:root{--z:2;}html{zoom:2;}}
@media (min-width:768px){
  .wrap{display:block;padding:0;max-width:none;margin:0;}
  .top{position:sticky;top:var(--demo-h,0px);height:auto;min-height:64px;margin:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 20px;
    padding:0 max(var(--gut),calc((100% - 1240px) / 2));overflow:visible;border-right:0;border-bottom:1px solid var(--line);
    background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);}
  .top > h1{padding:0;}
  .top > h1 svg{height:30px;}
  .top .tabs{flex-direction:row;align-items:center;gap:2px;margin:0;min-height:64px;}
  .top .tabs .tab{min-height:38px;padding:7px 13px;border-radius:999px;font-size:15px;line-height:22px;}
  .top .tabs .tab.act{color:var(--txt);background:rgba(255,255,255,.06);}
  /* los apartados de la sección: una segunda fila, como las secciones de cada juego en las guías */
  #lateral{order:10;flex:0 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin:0 0 8px;}
  #lateral:empty{display:none;}
  #lateral .lat-titulo{margin:0 6px 0 0;padding:0;}
  #lateral a{min-height:36px;padding:4px 10px;}
  .top > .row{order:5;margin:0 0 0 auto;padding:0;border-top:0;flex-wrap:nowrap;align-items:center;}
  #who{flex:0 1 auto;max-width:180px;}
  /* lo que no cabe arriba (Tienda, Studio, Tu material, informe de fallo, Salir) vuelve al botón Menú, que se abre debajo */
  #navBtn{display:inline-flex;order:4;}
  #nav{position:absolute;right:max(var(--gut),calc((100% - 1240px) / 2));top:calc(100% + 4px);order:20;display:none !important;
    min-width:240px;padding:4px;background:var(--card);border:1px solid var(--line-control);border-radius:10px;flex-direction:column;}
  #nav[style*="flex"],#nav[style*="block"]{display:flex !important;}
  #nav a{min-height:40px;padding:0 12px;font-size:15px;color:var(--dek);}
  .top > #topMsg{order:30;flex:0 0 100%;}
  .wrap > .view{max-width:1240px;margin:0 auto;padding:32px var(--gut) 48px;}
}
@media (min-width:1280px){
  .wrap > .view{width:1000px;max-width:100%;padding:32px 0 48px;min-height:calc(100vh / var(--z) - var(--demo-h,0px) - 64px);}
}