===============================================================
  CAMBIO VISUAL MOVIL — CSS Y LAYOUT
  (commit b48944e)
===============================================================

OBJETIVO:
  Mejorar la experiencia en pantallas moviles (<=768px).
  El proyecto estaba diseñado principalmente para escritorio.
  Los cambios afectan tres archivos CSS.

--------------------------------------------------------------
ARCHIVO 1 — mobile.css (reescrito completo, ~480 lineas)
--------------------------------------------------------------
RUTA: src/client/assets/styles/mobile.css

Este archivo se aplica solo en pantallas moviles via media attribute.
Antes tenia estilos dispersos y faltaban muchas cosas.
Se reescribio completamente.

SAFE AREA (notch / home indicator Android e iOS):
  html { -webkit-text-size-adjust: 100%; }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .header {
    padding-top: env(safe-area-inset-top);
    padding-left/right: env(safe-area-inset-left/right);
  }
  footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  Estas variables CSS solo tienen valor si el meta viewport tiene
  viewport-fit=cover (ver cambio en main_views.js mas abajo).

FONT SIZE BASE:
  body { font-size: 14px; }
  Cabeceras: h1 1.25em, h2 1.1em, h3 1em
  Textos pequeños (.small, .time, .created-at): 0.78rem

LAYOUT:
  .main-content -> flex column (sidebars debajo del contenido)
  .sidebar-left  -> order: 1
  .sidebar-right -> order: 2
  .main-column   -> order: 3
  (el contenido principal queda arriba, sidebars debajo)

  Todos los anchos al 100%, min-width: 0 para evitar overflow.

HEADER:
  .header -> flex row wrap, padding minimo (4px 2px)
  .top-bar-left, .top-bar-right -> display: contents
  (los hijos directos participan en el flex del header)
  nav ul li a -> padding 5px, font-size 0.82rem

BOTONES Y TOUCH TARGETS:
  min-height: 44px (minimo recomendado por Apple HIG / Material)
  font-size: 15px
  :active { opacity: 0.75; transform: scale(0.97); } -> feedback tactil

INPUTS:
  width: 100%, font-size: 16px
  (16px evita el zoom automatico en iOS al enfocar un input)

FILTROS (scroll horizontal):
  .mode-buttons, .filter-group, .filters, .tribe-mode-buttons:
    flex-direction: row
    flex-wrap: nowrap
    overflow-x: auto
    scrollbar-width: none (oculta la scrollbar en Firefox)
  ::-webkit-scrollbar { display: none } (oculta en Chrome/WebKit)
  Cada form dentro: flex-shrink: 0 (no se comprimen)
  Los botones de filtro: white-space: nowrap, padding 8px 14px

  ANTES: los filtros aparecian en columna vertical, ocupando
  media pantalla. DESPUES: fila horizontal scrollable invisible.

IMAGENES DE POSTS:
  .post img, .feed-card img, .post-image:
    max-height: 60vh (no ocupan toda la pantalla)
    width: auto, max-width: 100%
    border-radius: 8px

FOTOS DE USUARIO (circulares):
  .inhabitant-photo, .inhabitant-photo-details:
    width: 160px, height: 160px
    border-radius: 50%
    object-fit: cover
    margin: 0 auto

GALERIA:
  .gallery -> grid 2 columnas (1fr 1fr)

TRIBES:
  .tribe-card-image -> height: 160px, object-fit: cover
  .tribe-section-nav -> overflow-x auto, nowrap (scroll horizontal)
  .tribe-section-btn -> font-size 11px, white-space nowrap
  .tribe-details -> flex column
  .tribe-inhabitants-grid -> 2 columnas
  .tribe-media-grid -> 2 columnas
  .tribe-content-grid / .tribe-overview-grid -> 1 columna

FORUM:
  .forum-card -> flex column
  .forum-comment -> margin-left: 0 (no hay espacio para sangria en movil)
  .comment-body-row -> flex column

TABLAS:
  .feed-row, table -> overflow-x auto (scroll horizontal si es ancha)

QR LIGHTBOX (CSS puro, sin JS):
  .qr-lightbox-anchor -> display block, width fit-content
  .qr-lightbox-overlay -> display: none por defecto
  .qr-lightbox-anchor:target ~ .qr-lightbox-overlay -> display: flex
  El overlay es position: fixed, fondo negro 88% opacidad, z-index 9999
  El SVG dentro: max-width min(85vw, 85vh)

  NOTA: este lightbox usa el selector CSS :target, que se activa
  cuando el hash de la URL coincide con el id del elemento.
  No requiere JavaScript. Para que funcione, el HTML debe tener
  el ancla con href="#id" y el overlay con id="id".

OVERRIDES DE GRID INLINE:
  Hay vistas del proyecto que ponen grid-template-columns directamente
  en el atributo style del HTML. Para sobreescribir en movil:
  [style*="grid-template-columns: repeat(6"] { grid-template-columns: 1fr }
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr }
  [style*="width:50%"] { width: 100% }

--------------------------------------------------------------
ARCHIVO 2 — OasisMobile.css (reescrito, solo theming)
--------------------------------------------------------------
RUTA: src/client/assets/themes/OasisMobile.css

Antes tenia el CSS de mobile.css entero copiado dentro + el theming.
Era ~700 lineas con mucha duplicacion y conflictos.
Se reescribio dejando SOLO el theming de colores.

PALETA DEL TEMA:
  body: background #121212, color #FFD700
  header/footer: background #1F1F1F
  sidebars: background #1A1A1A, border #333
  inputs/select/textarea: background #333, color #FFD700, border #555
  buttons: background #444, color #FFD700
  links: color #FFD700, hover #FFDD44
  tables: background #222, th #333, even rows #2A2A2A

SELECTORES ESPECIFICOS (en vez de div generico):
  Antes habia: div { background-color: #1A1A1A; border: 1px solid #333; }
  Eso pintaba absolutamente TODOS los divs de la pagina de oscuro,
  rompiendo layouts con divs transparentes o con otro fondo.
  Se reemplazo por:
  .block, .post, .card, .tribe-card, .inhabitant-card,
  .action-container, .feed-card, .block-single,
  .invite-page, .wallet-section, .pubs-section,
  .invites-tribes, .snh-invite-box, .invite-log-block

SCROLLBAR:
  ::-webkit-scrollbar -> width/height 6px
  thumb: #555, border-radius 10px
  track: #1A1A1A

user-link (badge de usuario):
  background #FFA500, color #000, bold
  hover: background #FFD700
  active: background #cc8400, scale(0.97)
  focus: background #007B9F (accesibilidad)
  overflow hidden + text-overflow ellipsis (para IDs largos)

QR en tema oscuro:
  .qr-code svg rect -> fill #1A1A1A
  .qr-code svg path -> fill #FFD700
  (por defecto la libreria genera QR con fondo blanco y puntos negros)

--------------------------------------------------------------
ARCHIVO 3 — main_views.js (una linea cambiada)
--------------------------------------------------------------
RUTA: src/views/main_views.js

ANTES:
  meta({ name: 'viewport', content: toAttributes({
    width: 'device-width',
    'initial-scale': 1
  }) })

DESPUES:
  meta({ name: 'viewport', content:
    'width=device-width, initial-scale=1, viewport-fit=cover'
  })

POR QUE IMPORTA viewport-fit=cover:
  Sin esta directiva, env(safe-area-inset-*) siempre devuelve 0.
  Es decir, los paddings de safe area del mobile.css no tienen efecto
  a menos que el viewport tenga viewport-fit=cover.
  Solo afecta a dispositivos con notch, agujero de camara o barra de
  gestos de Android. En dispositivos normales no cambia nada visible.

--------------------------------------------------------------
ARCHIVO 4 — style.css (añadidos al final)
--------------------------------------------------------------
RUTA: src/client/assets/styles/style.css

Se añadieron estilos al FINAL del archivo (no se modifico lo existente):
  - Fotos circulares (border-radius 50%, object-fit cover)
  - .invite-page: flex column, align-items center, max-width 500px
  - .user-id-qr: flex column, align-items center, gap 8px
  - .invite-code-text: font-family monospace, fondo sutil, padding
  - .invite-log-block: padding, border-left 3px solido
  - .invite-status--pending: color naranja
  - .invite-status--used: color verde
  - Transiciones en botones: 0.15s ease

--------------------------------------------------------------
QUE PUEDE GUSTAR
--------------------------------------------------------------
- Filtros de scroll horizontal: gran mejora UX en movil. Los filtros
  ya no ocupan media pantalla.
- Safe area funciona correctamente con viewport-fit=cover.
- OasisMobile.css limpio: ya no sobreescribe todos los divs del DOM.
- Touch targets de 44px: botones faciles de pulsar con el dedo.
- Font-size 16px en inputs: evita el zoom automatico de Safari iOS.
- Fotos circulares consistentes en toda la app.
- El lightbox QR no necesita JavaScript adicional.
- Los cambios son aditivos en style.css (no se toco lo anterior).

--------------------------------------------------------------
QUE PUEDE NO GUSTAR / PUNTOS DE DISCUSION
--------------------------------------------------------------
1. El orden de los sidebars (left=1, main=3, right=2) puede parecer
   raro. La logica es: sidebar izquierda con navegacion primero,
   luego sidebar derecha con info secundaria, luego el feed principal.
   Es discutible, podria ser: left=2, main=1, right=3.

2. display:contents en .top-bar-left y .top-bar-right:
   Hace que el div desaparezca visualmente y sus hijos participen
   en el flex del padre. Es un truco para no reescribir el HTML.
   Tiene soporte amplio en browsers modernos pero puede ser confuso
   al depurar el layout con las devtools.

3. Los overrides de grid inline ([style*="grid-template-columns: repeat(6"])
   son fragiles: dependen de que el string del style en el HTML sea
   exactamente ese. Si hay un espacio de mas o menos, no aplica.
   La solucion correcta seria eliminar los estilos inline del HTML
   y moverlos a clases CSS, pero eso requiere tocar muchas vistas.

4. El header en movil con flex-wrap puede quedar diferente segun
   cuantos elementos de navegacion tenga cada pagina. No hay una
   maqueta fija, el header se adapta al contenido.

5. El cambio de viewport-fit=cover afecta a todas las paginas de la app.
   En dispositivos con notch grande podria mostrar contenido bajo
   el notch si alguna pagina no tiene los paddings de safe area bien
   configurados. Hay que verificar en dispositivo real.
