fix: clean one-row mobile header, full nav panel with quick links

- Header mobile: single row — logo (flex:1) + hamburger only.
  Top-bar nav (inbox/PM/publish) and top-bar-right (tags/search) hidden.
- Add panel-quicklinks section at top of hamburger panel: Inbox, PM,
  Publicar, Búsqueda as pill buttons (accessible from panel, not header).
- sidebar-left and sidebar-right inside panel: no background/border,
  flat layout with only a separator line between sections.
- panel-quicklinks hidden on desktop (style.css), visible only in panel.
- OasisMobile.css: panel-quicklink theme colors added.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

nodejs-project/nodejs-project/src/client/assets/styles/mobile.css

@@ -55,102 +55,54 @@ pre, code {
   margin: 6px auto;
 }
 
-/* ---- Header ---- */
+/* ---- Header: una sola fila (logo izquierda, hamburger derecha) ---- */
 .header {
   display: flex !important;
   flex-direction: row !important;
-  flex-wrap: wrap !important;
+  flex-wrap: nowrap !important;
   align-items: center !important;
   width: 100% !important;
-  padding: 2px 4px !important;
+  padding: 4px 8px !important;
-  gap: 0 !important;
+  gap: 4px !important;
+  min-height: 48px !important;
 }
 
-/* top-bar-left ocupa toda la fila y envuelve internamente */
 .top-bar-left {
   display: flex !important;
   flex-direction: row !important;
   align-items: center !important;
-  flex: 0 0 100% !important;      /* fila completa en el header */
+  flex: 1 !important;
-  flex-wrap: wrap !important;
+  flex-wrap: nowrap !important;
-  gap: 2px !important;
+  gap: 4px !important;
-  padding: 0 !important;
+  min-width: 0 !important;
 }
 
-/* Logo + hamburger en la misma fila: logo crece, hamburger se queda a la derecha */
+/* Logo: crece para llenar el espacio sobrante */
 a.logo-icon {
-  flex: 1 !important;             /* crece para llenar espacio, NO 100% */
+  flex: 1 !important;
   display: flex !important;
   align-items: center !important;
-}
+  min-width: 0 !important;
-
-/* Nav (inbox, PM, publish): fila propia debajo del logo+hamburger */
-.top-bar-left nav {
-  flex: 0 0 100% !important;
-  overflow-x: auto !important;
-  scrollbar-width: none !important;
-}
-.top-bar-left nav::-webkit-scrollbar { display: none !important; }
-
-/* top-bar-right (tags, search): fila completa debajo */
-.top-bar-right {
-  display: flex !important;
-  flex-direction: row !important;
-  align-items: center !important;
-  flex: 0 0 100% !important;
-  flex-wrap: nowrap !important;
-  gap: 2px !important;
-  padding: 0 !important;
-  overflow-x: auto !important;
-  scrollbar-width: none !important;
-}
-.top-bar-right::-webkit-scrollbar { display: none !important; }
-
-.top-bar-left nav,
-.top-bar-right nav {
-  display: flex !important;
-}
-
-.top-bar-left nav ul,
-.top-bar-right nav ul {
-  display: flex !important;
-  flex-direction: row !important;
-  flex-wrap: nowrap !important;
-  gap: 2px !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  list-style: none !important;
 }
 
 a.logo-icon img.logo-icon {
   width: 38px !important;
   height: 38px !important;
   display: block !important;
-  margin-right: 4px !important;
+  flex-shrink: 0 !important;
 }
 
-.header nav ul li a,
+/* Ocultar nav del header en móvil — están en el panel hamburger */
-.top-bar-left nav ul li a,
+.top-bar-left nav,
-.top-bar-right nav ul li a {
+.top-bar-right {
-  padding: 3px 4px !important;
+  display: none !important;
-  font-size: 0.72rem !important;
-  min-height: auto !important;
-  border: none !important;
-  white-space: nowrap !important;
-  display: inline-block !important;
-  line-height: 1.2 !important;
-}
-
-/* Ocultar el emoji en los links del header para ahorrar espacio */
-.header nav ul li a .emoji {
-  font-size: 0.85em !important;
-  margin-right: 1px !important;
 }
 
 .oasis-nav-header { font-size: 0.85rem !important; }
 .oasis-nav-list li a {
   font-size: 0.9rem !important;
-  padding: 8px 12px !important;
+  padding: 10px 12px !important;
+  display: block !important;
 }
 
 /* ============================================================
@@ -214,10 +166,12 @@ a.logo-icon img.logo-icon {
   gap: 0 !important;
 }
 
-/* sidebar-panel oculto por defecto; sidebar-left/right visibles DENTRO del panel */
+/* sidebar-panel oculto por defecto */
 .sidebar-panel {
   display: none !important;
 }
+
+/* Dentro del panel: sidebars como bloques planos sin bordes/fondos propios */
 .sidebar-panel .sidebar-left,
 .sidebar-panel .sidebar-right {
   display: block !important;
@@ -225,10 +179,16 @@ a.logo-icon img.logo-icon {
   min-width: unset !important;
   max-width: unset !important;
   width: 100% !important;
+  background: none !important;
   border: none !important;
-  border-bottom: 1px solid #444 !important;
+  padding: 0 !important;
   box-sizing: border-box !important;
 }
+.sidebar-panel .sidebar-right {
+  border-top: 1px solid #444 !important;
+  margin-top: 4px !important;
+  padding-top: 4px !important;
+}
 
 .main-column {
   width: 100% !important;
@@ -266,6 +226,30 @@ a.logo-icon img.logo-icon {
   user-select: none !important;
 }
 
+/* Quick links (inbox, PM, publicar, search) en el panel móvil */
+.panel-quicklinks {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
+  gap: 6px !important;
+  padding: 10px 0 12px 0 !important;
+  border-bottom: 1px solid #444 !important;
+  margin-bottom: 8px !important;
+}
+.panel-quicklink {
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 4px !important;
+  padding: 8px 12px !important;
+  border-radius: 8px !important;
+  font-size: 0.85rem !important;
+  font-weight: 600 !important;
+  text-decoration: none !important;
+  border: 1px solid #555 !important;
+  white-space: nowrap !important;
+  min-height: 36px !important;
+}
+
 .sidebar-panel nav ul {
   display: flex !important;
   flex-direction: column !important;

nodejs-project/nodejs-project/src/client/assets/styles/style.css

@@ -359,6 +359,9 @@ nav ul li a:hover {
 .main-column  { order: 2; }
 .sidebar-right { order: 3; }
 
+/* Quick links only shown in mobile panel */
+.panel-quicklinks { display: none; }
+
 .sidebar-left,
 .sidebar-right {
   background-color: #222;

nodejs-project/nodejs-project/src/client/assets/themes/OasisMobile.css

@@ -330,6 +330,16 @@ a.user-link:focus {
   fill: #FFD700;
 }
 
+.panel-quicklink {
+  background-color: #2a2a2a;
+  color: #FFD700;
+  border-color: #444;
+}
+.panel-quicklink:hover {
+  background-color: #3a3a00;
+  border-color: #FFD700;
+}
+
 .qr-share-btn {
   background-color: #2a2a00;
   color: #FFD700;

nodejs-project/nodejs-project/src/views/main_views.js

@@ -758,6 +758,19 @@ const template = (titlePrefix, ...elements) => {
           label({ for: 'mobile-menu-toggle', class: 'mobile-menu-close' },
             span({ class: 'menu-icon-close' }, '✕'), ' Cerrar'
           ),
+          div(
+            { class: 'panel-quicklinks' },
+            (() => {
+              const inboxCount = sharedState.getInboxCount();
+              const badge = inboxCount > 0 ? span({ class: 'inbox-badge' }, String(inboxCount)) : '';
+              return a({ href: '/inbox', class: 'panel-quicklink' },
+                span({ class: 'emoji' }, '☂'), ' ', i18n.inbox, badge
+              );
+            })(),
+            a({ href: '/pm', class: 'panel-quicklink' }, span({ class: 'emoji' }, 'ꕕ'), ' ', i18n.privateMessage),
+            a({ href: '/publish', class: 'panel-quicklink' }, span({ class: 'emoji' }, '❂'), ' ', i18n.publish),
+            a({ href: '/search', class: 'panel-quicklink' }, span({ class: 'emoji' }, 'ꔅ'), ' ', i18n.searchTitle)
+          ),
           div(
             { class: "sidebar-left" },
             nav(