===============================================================
  CAMBIO: MENU HAMBURGER + NAVEGACION MOVIL
  Fecha: 2026-05-01
===============================================================

--------------------------------------------------------------
PROBLEMA QUE SE RESOLVIA
--------------------------------------------------------------
En movil las dos sidebars (izquierda y derecha) ocupaban espacio
y hacian el layout inutilizable. El contenido principal quedaba
comprimido o directamente fuera de pantalla.

Ademas los links de navegacion (inbox, PM, publicar, buscar)
estaban en el header pero sin espacio para verse bien.

--------------------------------------------------------------
SOLUCION: MENU HAMBURGER PURO CSS
--------------------------------------------------------------
Sin JavaScript. Mecanismo: checkbox oculto + selector CSS ~

  input#mobile-menu-toggle (primer hijo de body)
  #mobile-menu-toggle:checked ~ .main-content .sidebar-panel {
    display: block; position: fixed; ...
  }

El checkbox esta antes de .main-content en el DOM, por lo que
el selector general sibling (~) puede alcanzarlo.

--------------------------------------------------------------
ESTRUCTURA HTML (main_views.js ~linea 693)
--------------------------------------------------------------

  body
    input#mobile-menu-toggle.mobile-menu-checkbox  <- oculto siempre
    div.header
      div.top-bar-left
        a.logo-icon (logo 38px)
        label.mobile-menu-btn [☰/✕]  <- toggle
        nav > ul (inbox, PM, publicar) <- oculto en movil
      div.top-bar-right
        nav > ul (tags, search)  <- oculto en movil
      div.panel-quicklinks       <- VISIBLE en movil (2a fila header)
        a.panel-quicklink [☂ Inbox]
        a.panel-quicklink [ꕕ PM]
        a.panel-quicklink [❂ Publicar]
        a.panel-quicklink [ꔅ Buscar]
    div.main-content
      div.sidebar-panel           <- DRAWER hamburger
        label.mobile-menu-close [✕ Cerrar]
        div.sidebar-left
          nav > ul > navGroups:
            Personal (perfil, cv, agenda, wallet, modules, settings)
            Content (mentions, latest, threads, topics, popular, multiverse)
            Governance (inhabitants, tribes, parliament, courts)
            Office (votations, events, tasks, reports)
            Tools (AI, stats, blockexplorer, cipher, legacy)
        div.sidebar-right
          nav > ul > navGroups:
            Network (activity, trending, opinions, forum, invites, peers)
            Creative (feed, pixelia)
            Economy (banking, market, jobs...) <- solo si modulos activos
            Media (audios, bookmarks, docs, images, videos)
      main.main-column  <- contenido principal
    label.mobile-menu-backdrop  <- capa oscura cierra el menu al tocar

--------------------------------------------------------------
CSS DESKTOP (style.css)
--------------------------------------------------------------
  .sidebar-panel { display: contents; }
  /* display:contents hace que el div sea transparente —
     sus hijos actuan como flex items directos de .main-content */

  /* Orden visual: izquierda | contenido | derecha */
  .sidebar-left  { order: 1; }
  .main-column   { order: 2; }
  .sidebar-right { order: 3; }

  .panel-quicklinks { display: none; }  /* oculto en desktop */

--------------------------------------------------------------
CSS MOVIL (mobile.css)
--------------------------------------------------------------
  /* Header: una sola fila */
  .header { flex-wrap: wrap; }
  .top-bar-left { flex: 1; flex-wrap: nowrap; }
  .top-bar-left nav, .top-bar-right { display: none; }

  /* Segunda fila del header: quick links */
  .panel-quicklinks {
    flex: 0 0 100%;  /* fila completa */
    display: flex; flex-wrap: nowrap; overflow-x: auto;
  }
  .panel-quicklink {
    border-radius: 20px; padding: 7px 12px;
    border: 1px solid #555; white-space: nowrap;
  }

  /* Sidebars ocultas por defecto */
  .sidebar-panel { display: none; }
  .sidebar-panel .sidebar-left,
  .sidebar-panel .sidebar-right { display: block; background: none; border: none; }

  /* Panel abierto */
  #mobile-menu-toggle:checked ~ .main-content .sidebar-panel {
    display: block; position: fixed;
    top: 0; left: 0;
    width: 82vw; max-width: 320px; height: 100vh;
    overflow-y: auto; z-index: 200;
  }

  /* Botones de grupo en el panel */
  .sidebar-panel .oasis-nav-header {
    border-radius: 12px; padding: 11px 14px;
    font-weight: 700; font-size: 0.92rem;
  }

--------------------------------------------------------------
THEMING (OasisMobile.css)
--------------------------------------------------------------
  .panel-quicklink            -> background #2a2a2a, color #FFD700
  .sidebar-panel .oasis-nav-header -> background #252500, color #FFD700
  #mobile-menu-toggle:checked ~ .main-content .sidebar-panel
                              -> background #1A1A1A

--------------------------------------------------------------
COMPORTAMIENTO ACORDEON EN EL PANEL
--------------------------------------------------------------
  Los grupos de nav usan el mismo mecanismo de acordeon que
  el desktop (input[type=checkbox] + label). En movil:
  - Grupos colapsados por defecto al abrir el panel
  - Tap en el header del grupo lo expande
  - Flecha ▾ rota 180° cuando esta abierto
  - No hay forzado de expansion (se elimino el override de max-height)

  CSS nativo (style.css):
    .oasis-nav-list { max-height: 0; overflow: hidden; }
    .oasis-nav-toggle:checked + .oasis-nav-header + .oasis-nav-list {
      max-height: 1000px;
    }

--------------------------------------------------------------
QR EN PUBS (invites_view.js)
--------------------------------------------------------------
  renderPubTable convertida a async.
  Por cada pub: QRCode.toString(pubItem.key, {type:'svg'})
  Mostrado con <details>/<summary> igual que el perfil y tribes.
  Solo visible cuando hay pubs conectados (gossip.json no vacio).

--------------------------------------------------------------
NOTAS
--------------------------------------------------------------
  - Economy group no aparece -> modulos banking/market/jobs desactivados
    Se activan en /modules -> aparecen automaticamente
  - El selector ~ funciona porque el checkbox es el primer hijo de body
    y .main-content es su sibling (hermano) posterior
  - display:contents tiene soporte 96%+ (todos los navegadores modernos)
  - Sin JavaScript en ninguna parte del menu hamburger ni acordeon