From b48944ef576f406ee8a0579bf9989e50142dea68 Mon Sep 17 00:00:00 2001
From: SITO <sito@ransomsito.ransomsito>
Date: Wed, 29 Apr 2026 01:08:05 +0200
Subject: [PATCH] feat: mobile visual improvements and CSS cleanup

main_views: viewport-fit=cover for notch/home-indicator support
OasisMobile.css: remove full mobile.css duplicate, fix aggressive div border/bg selector,
  add :active feedback on buttons/links, fix user-link overflow with ellipsis,
  QR colors adapted to dark theme
mobile.css: complete rewrite -
  safe-area-inset padding for notch phones
  filter buttons as horizontal scroll row (no more tall vertical stacks)
  inhabitant photos circular with object-fit cover
  post images max-height 60vh to avoid full-screen takeover
  invite-log table horizontal scroll on mobile
  QR lightbox overlay (CSS-only, no JS)
  font-size 14px base (more readable on small screens)
  :active touch feedback on all interactive elements
style.css: circular profile photos, max-height post images, button transitions,
  invite-page centered layout, user-id-qr alignment

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/client/assets/styles/mobile.css       | 777 +++++++++---------
 .../src/client/assets/styles/style.css        |  97 +++
 .../src/client/assets/themes/OasisMobile.css  | 540 ++----------
 .../nodejs-project/src/views/main_views.js    |   5 +-
 4 files changed, 530 insertions(+), 889 deletions(-)

diff --git a/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css b/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css
index 650fccc1..f00828ff 100644
--- a/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css
+++ b/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css
@@ -1,3 +1,8 @@
+/* ============================================================
+   OASIS MOBILE — mobile.css
+   Aplicado solo en pantallas ≤768px via media attribute
+   ============================================================ */
+
 html {
   -webkit-text-size-adjust: 100%;
   box-sizing: border-box;
@@ -9,34 +14,57 @@ html {
 }
 
 body {
-  font-size: 15px;
+  font-size: 14px;
   overflow-x: hidden;
   max-width: 100vw;
+  /* Safe area para notch/home indicator */
+  padding-bottom: env(safe-area-inset-bottom);
 }
 
-img,
-video,
-canvas,
-iframe,
-table {
+/* ---- Safe area en header y footer ---- */
+.header {
+  padding-top: env(safe-area-inset-top) !important;
+  padding-left: env(safe-area-inset-left) !important;
+  padding-right: env(safe-area-inset-right) !important;
+}
+
+footer, .footer {
+  padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
+  padding-left: env(safe-area-inset-left) !important;
+  padding-right: env(safe-area-inset-right) !important;
+}
+
+/* ---- Media generales ---- */
+img, video, canvas, iframe, table {
   max-width: 100% !important;
 }
 
-pre,
-code {
+pre, code {
   white-space: pre-wrap !important;
   word-break: break-word !important;
   overflow-wrap: anywhere !important;
 }
 
+/* ---- Imágenes de posts con altura máxima ---- */
+.post img, .feed-card img, .post-image {
+  max-height: 60vh !important;
+  width: auto !important;
+  max-width: 100% !important;
+  border-radius: 8px !important;
+  display: block;
+  margin: 6px auto;
+}
+
+/* ---- Header ---- */
 .header {
   display: flex !important;
-  flex-direction: column !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
   width: 100% !important;
   max-width: 100% !important;
-  padding: 4px !important;
-  gap: 4px !important;
-  overflow: visible !important;
+  padding: 4px 2px !important;
+  gap: 2px !important;
+  align-items: center !important;
 }
 
 .header-content {
@@ -46,18 +74,39 @@ code {
   max-width: 100% !important;
   padding: 2px !important;
   gap: 4px !important;
-  overflow: visible !important;
 }
 
-.top-bar-left,
-.top-bar-mid,
-.top-bar-right {
+body div.top-bar-left {
+  display: contents !important;
+}
+
+body div.top-bar-left > a.logo-icon {
+  flex: 0 0 100% !important;
+}
+
+body div.top-bar-left > nav,
+body div.top-bar-left > nav > ul,
+body div.top-bar-right,
+body div.top-bar-right nav,
+body div.top-bar-right nav ul {
+  display: contents !important;
+}
+
+body div.top-bar-left nav ul li a,
+body div.top-bar-right nav ul li a {
+  padding: 5px 5px !important;
+  font-size: 0.82rem !important;
+  min-height: auto !important;
+  border: none !important;
+}
+
+.top-bar-left, .top-bar-mid, .top-bar-right {
   display: flex !important;
   flex-direction: column !important;
   width: 100% !important;
   max-width: 100% !important;
   align-items: stretch !important;
-  gap: 6px !important;
+  gap: 4px !important;
 }
 
 .top-bar-left nav ul,
@@ -65,85 +114,76 @@ code {
 .top-bar-right nav ul {
   display: flex !important;
   flex-wrap: wrap !important;
-  gap: 6px !important;
+  gap: 4px !important;
   padding: 0 !important;
   margin: 0 !important;
-  overflow: visible !important;
-}
-
-.top-bar-left nav ul li,
-.top-bar-mid nav ul li,
-.top-bar-right nav ul li {
-  margin: 0 !important;
-}
-
-.top-bar-left nav ul li a,
-.top-bar-mid nav ul li a,
-.top-bar-right nav ul li a {
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  padding: 6px 8px !important;
-  font-size: 0.9rem !important;
-  white-space: nowrap !important;
-}
-
-.search-input,
-.feed-search-input,
-.activity-search-input {
-  width: 100% !important;
-  max-width: 100% !important;
-  min-width: 0 !important;
-  height: 40px !important;
-  font-size: 16px !important;
-}
-
-.main-content {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  gap: 12px !important;
-}
-
-.sidebar-left,
-.sidebar-right,
-.main-column {
-  width: 100% !important;
-  max-width: 100% !important;
-  min-width: 0 !important;
-  padding: 10px !important;
-  border-left: none !important;
-  border-right: none !important;
-}
-
-.sidebar-left {
-  order: 1 !important;
-}
-
-.main-column {
-  order: 3 !important;
-}
-
-.sidebar-right {
-  order: 2 !important;
-}
-
-.sidebar-left nav ul,
-.sidebar-right nav ul {
-  display: flex !important;
-  flex-direction: column !important;
-}
-
-.oasis-nav-header {
-  font-size: 0.85rem !important;
 }
 
+.oasis-nav-header { font-size: 0.85rem !important; }
 .oasis-nav-list li a {
   font-size: 0.9rem !important;
   padding: 8px 12px !important;
 }
 
+/* ---- Layout ---- */
+.main-content {
+  display: flex !important;
+  flex-direction: column !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  gap: 10px !important;
+}
+
+.sidebar-left, .sidebar-right, .main-column {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  padding: 8px !important;
+  border-left: none !important;
+  border-right: none !important;
+}
+
+.sidebar-left { order: 1 !important; }
+.main-column  { order: 3 !important; }
+.sidebar-right { order: 2 !important; }
+
+.sidebar-left nav ul, .sidebar-right nav ul {
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/* ---- Tipografía ---- */
+h1 { font-size: 1.25em !important; }
+h2 { font-size: 1.1em !important; }
+h3 { font-size: 1em !important; }
+
+.small, .time { font-size: 0.78rem !important; }
+
+.created-at {
+  display: block !important;
+  width: 100% !important;
+  white-space: normal !important;
+  word-break: break-word !important;
+  overflow-wrap: anywhere !important;
+  line-height: 1.5 !important;
+  font-size: 0.78rem !important;
+}
+
+.post-meta, .feed-post-meta,
+.feed-row .small, .feed-row .time, .feed-row .created-at {
+  display: block !important;
+  width: 100% !important;
+  white-space: normal !important;
+  word-break: break-word !important;
+  overflow-wrap: anywhere !important;
+}
+
+.post-meta, .feed-post-meta {
+  flex-direction: column !important;
+  gap: 4px !important;
+}
+
+/* ---- Botones y touch targets ---- */
 button,
 input[type="submit"],
 input[type="button"],
@@ -155,35 +195,267 @@ input[type="button"],
 .leave-btn,
 .buy-btn {
   min-height: 44px !important;
-  font-size: 16px !important;
+  font-size: 15px !important;
   white-space: normal !important;
   text-align: center !important;
+  border-radius: 8px !important;
 }
 
-.feed-row,
-.comment-body-row,
-table {
+button:active,
+input[type="submit"]:active,
+.filter-btn:active {
+  opacity: 0.75 !important;
+  transform: scale(0.97) !important;
+}
+
+/* ---- Inputs ---- */
+textarea, input, select {
+  width: 100% !important;
+  max-width: 100% !important;
+  font-size: 16px !important; /* evita zoom automático en iOS */
+}
+
+.search-input, .feed-search-input, .activity-search-input {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  height: 44px !important;
+  font-size: 16px !important;
+}
+
+/* ---- Filtros: scroll horizontal en vez de columna vertical ---- */
+.mode-buttons,
+.mode-buttons-cols,
+.mode-buttons-row,
+.filter-group,
+.filters,
+.inhabitant-action,
+.tribe-mode-buttons {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: nowrap !important;
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  -webkit-overflow-scrolling: touch !important;
+  gap: 6px !important;
+  padding-bottom: 4px !important;
+  scrollbar-width: none !important;
+  width: 100% !important;
+}
+
+.mode-buttons::-webkit-scrollbar,
+.mode-buttons-cols::-webkit-scrollbar,
+.mode-buttons-row::-webkit-scrollbar,
+.filter-group::-webkit-scrollbar,
+.filters::-webkit-scrollbar,
+.inhabitant-action::-webkit-scrollbar {
+  display: none !important;
+}
+
+.mode-buttons form,
+.mode-buttons-cols form,
+.mode-buttons-row form,
+.filter-group form,
+.filters form {
+  flex-shrink: 0 !important;
+  width: auto !important;
+}
+
+.mode-buttons .filter-btn,
+.mode-buttons button,
+.filter-group .filter-btn {
+  width: auto !important;
+  white-space: nowrap !important;
+  padding: 8px 14px !important;
+  min-height: 40px !important;
+}
+
+/* ---- Columnas de filtros del blockexplorer ---- */
+.filter-column {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: nowrap !important;
+  overflow-x: auto !important;
+  gap: 6px !important;
+  flex-shrink: 0 !important;
+}
+
+/* ---- Tablas: scroll horizontal ---- */
+.feed-row, .comment-body-row, table {
   display: block !important;
   width: 100% !important;
   overflow-x: auto !important;
+  -webkit-overflow-scrolling: touch !important;
 }
 
-textarea,
-input,
-select {
-  width: 100% !important;
-  max-width: 100% !important;
-  font-size: 16px !important;
+/* Tabla invite-log: colapsar columnas menos importantes */
+.invite-log-block table td:nth-child(1),
+.invite-log-block table th:nth-child(1) {
+  max-width: 80px !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
 }
 
+/* ---- Galería ---- */
 .gallery {
   display: grid !important;
   grid-template-columns: 1fr 1fr !important;
   gap: 8px !important;
 }
 
-footer,
-.footer {
+/* ---- Cards de inhabitants ---- */
+.inhabitant-card {
+  display: flex !important;
+  flex-direction: column !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  overflow: hidden !important;
+  border-radius: 12px !important;
+  padding: 12px !important;
+}
+
+.inhabitant-left {
+  width: 100% !important;
+  text-align: center !important;
+}
+
+.inhabitant-details { width: 100% !important; }
+
+.inhabitant-photo,
+.inhabitant-photo-details {
+  max-width: 160px !important;
+  width: 160px !important;
+  height: 160px !important;
+  object-fit: cover !important;
+  border-radius: 50% !important;
+  margin: 0 auto !important;
+  display: block !important;
+}
+
+.inhabitants-list, .inhabitants-grid {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 10px !important;
+}
+
+/* user-link: recortar ID largo ---- */
+a.user-link {
+  max-width: 100% !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  display: inline-block !important;
+  font-size: 0.72em !important;
+  padding: 4px 8px !important;
+}
+
+/* ---- QR: lightbox CSS puro para ampliar ---- */
+.qr-code-inline,
+.qr-code-profile {
+  cursor: pointer !important;
+}
+
+/* Wrap en ancla para lightbox sin JS */
+.qr-lightbox-anchor {
+  display: block;
+  width: fit-content;
+  margin: 6px auto;
+}
+
+.qr-lightbox-anchor:target ~ .qr-lightbox-overlay,
+.qr-lightbox-overlay:target {
+  display: flex !important;
+}
+
+.qr-lightbox-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.88);
+  z-index: 9999;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.qr-lightbox-overlay svg {
+  max-width: min(85vw, 85vh) !important;
+  width: 100% !important;
+  height: auto !important;
+}
+
+.qr-code svg {
+  max-width: 180px;
+  width: 100%;
+  height: auto;
+  display: block;
+  margin: 6px auto;
+}
+
+.qr-code-inline svg { max-width: 120px; }
+.qr-code-profile svg { max-width: 150px; }
+
+/* ---- Tribes ---- */
+.tribe-card {
+  display: flex !important;
+  flex-direction: column !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  overflow: hidden !important;
+  border-radius: 12px !important;
+}
+
+.tribe-grid, .tribes-list, .tribes-grid {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 10px !important;
+}
+
+.tribe-card-image, .tribe-card-hero-image {
+  width: 100% !important;
+  max-width: 100% !important;
+  height: 160px !important;
+  object-fit: cover !important;
+}
+
+.tribe-section-nav {
+  overflow-x: auto !important;
+  flex-wrap: nowrap !important;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+.tribe-section-nav::-webkit-scrollbar { display: none; }
+
+.tribe-section-btn {
+  font-size: 11px !important;
+  padding: 6px 10px !important;
+  white-space: nowrap !important;
+}
+
+.tribe-details { flex-direction: column !important; }
+.tribe-side, .tribe-main { width: 100% !important; }
+.tribe-content-grid { grid-template-columns: 1fr !important; }
+.tribe-inhabitants-grid { grid-template-columns: repeat(2, 1fr) !important; }
+.tribe-media-grid { grid-template-columns: repeat(2, 1fr) !important; }
+.tribe-overview-grid { grid-template-columns: 1fr !important; }
+.tribe-content-header { flex-direction: column !important; gap: 8px !important; }
+.tribe-content-filters, .tribe-media-filters { flex-wrap: wrap !important; }
+.tribe-votation-option { flex-direction: column !important; align-items: flex-start !important; }
+
+/* ---- Forum ---- */
+.forum-card { flex-direction: column !important; }
+.forum-score-col, .forum-main-col, .root-vote-col { width: 100% !important; }
+.forum-header-row { flex-direction: column !important; gap: 4px !important; }
+.forum-meta { flex-wrap: wrap !important; gap: 8px !important; }
+.forum-thread-header { flex-direction: column !important; }
+.forum-comment { margin-left: 0 !important; padding-left: 8px !important; }
+.comment-body-row { flex-direction: column !important; }
+.comment-vote-col, .comment-text-col { width: 100% !important; }
+.forum-score-box, .forum-score-form { flex-direction: row !important; justify-content: center !important; }
+.new-message-form textarea, .comment-textarea { width: 100% !important; }
+
+/* ---- Footer ---- */
+footer, .footer {
   display: block !important;
   width: 100% !important;
   max-width: 100% !important;
@@ -197,302 +469,11 @@ footer div {
   gap: 8px !important;
 }
 
-h1 { font-size: 1.35em !important; }
-h2 { font-size: 1.2em !important; }
-h3 { font-size: 1em !important; }
-
-.small,
-.time {
-  font-size: 0.8rem !important;
-}
-
-.created-at {
-  display: block !important;
-  width: 100% !important;
-  white-space: normal !important;
-  word-break: break-word !important;
-  overflow-wrap: anywhere !important;
-  line-height: 1.5 !important;
-  font-size: 0.8rem !important;
-}
-
-.header-content .created-at {
-  display: block !important;
-  flex: 1 1 100% !important;
-  min-width: 0 !important;
-  max-width: 100% !important;
-}
-
-.post-meta,
-.feed-post-meta,
-.feed-row .small,
-.feed-row .time,
-.feed-row .created-at {
-  display: block !important;
-  width: 100% !important;
-  white-space: normal !important;
-  word-break: break-word !important;
-  overflow-wrap: anywhere !important;
-  line-height: 1.4 !important;
-}
-
-.post-meta,
-.feed-post-meta {
-  flex-direction: column !important;
-  gap: 4px !important;
-}
-
-.mode-buttons {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  gap: 8px !important;
-  grid-template-columns: 1fr !important;
-}
-
-.mode-buttons-cols {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  gap: 8px !important;
-}
-
-.mode-buttons-row {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  gap: 8px !important;
-}
-
-.mode-buttons .column,
-.mode-buttons > div {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  gap: 6px !important;
-  grid-template-columns: 1fr !important;
-}
-
-.mode-buttons form {
-  width: 100% !important;
-}
-
-.mode-buttons .filter-btn,
-.mode-buttons button {
-  width: 100% !important;
-}
-
-.filter-group {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  gap: 6px !important;
-}
-
-.filter-group form {
-  width: 100% !important;
-}
-
-.inhabitant-card {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  overflow: hidden !important;
-}
-
-.inhabitant-left {
-  width: 100% !important;
-  text-align: center !important;
-}
-
-.inhabitant-details {
-  width: 100% !important;
-}
-
-.inhabitant-photo,
-.inhabitant-photo-details {
-  max-width: 200px !important;
-  margin: 0 auto !important;
-}
-
-.inhabitants-list,
-.inhabitants-grid {
-  display: flex !important;
-  flex-direction: column !important;
-  gap: 10px !important;
-}
-
-.tribe-card {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  overflow: hidden !important;
-}
-
-.tribe-grid {
-  display: flex !important;
-  flex-direction: column !important;
-  gap: 10px !important;
-  grid-template-columns: 1fr !important;
-}
-
-.tribes-list,
-.tribes-grid {
-  display: flex !important;
-  flex-direction: column !important;
-  gap: 10px !important;
-}
-
-.tribe-card-image {
-  width: 100% !important;
-  max-width: 100% !important;
-}
-
-.tribe-section-nav {
-  overflow-x: auto !important;
-  flex-wrap: nowrap !important;
-  -webkit-overflow-scrolling: touch;
-}
-
-.tribe-section-group {
-  flex-shrink: 0 !important;
-}
-
-.tribe-section-btn {
-  font-size: 11px !important;
-  padding: 4px 8px !important;
-  white-space: nowrap !important;
-}
-
-.tribe-details {
-  flex-direction: column !important;
-}
-
-.tribe-side {
-  width: 100% !important;
-}
-
-.tribe-main {
-  width: 100% !important;
-}
-
-.tribe-content-grid {
-  grid-template-columns: 1fr !important;
-}
-
-.tribe-inhabitants-grid {
-  grid-template-columns: repeat(2, 1fr) !important;
-}
-
-.tribe-media-grid {
-  grid-template-columns: repeat(2, 1fr) !important;
-}
-
-.tribe-overview-grid {
-  grid-template-columns: 1fr !important;
-}
-
-.tribe-mode-buttons {
-  flex-wrap: wrap !important;
-}
-
-.tribe-card-hero-image {
-  height: 180px !important;
-}
-
-.tribe-votation-option {
-  flex-direction: column !important;
-  align-items: flex-start !important;
-}
-
-.tribe-content-header {
-  flex-direction: column !important;
-  gap: 8px !important;
-}
-
-.tribe-content-filters {
-  flex-wrap: wrap !important;
-}
-
-.tribe-media-filters {
-  flex-wrap: wrap !important;
-}
-
-.forum-card {
-  flex-direction: column !important;
-}
-
-.forum-score-col,
-.forum-main-col,
-.root-vote-col {
-  width: 100% !important;
-}
-
-.forum-header-row {
-  flex-direction: column !important;
-  gap: 4px !important;
-}
-
-.forum-meta {
-  flex-wrap: wrap !important;
-  gap: 8px !important;
-}
-
-.forum-thread-header {
-  flex-direction: column !important;
-}
-
-.forum-comment {
-  margin-left: 0 !important;
-  padding-left: 8px !important;
-}
-
-.comment-body-row {
-  flex-direction: column !important;
-}
-
-.comment-vote-col,
-.comment-text-col {
-  width: 100% !important;
-}
-
-.forum-score-box,
-.forum-score-form {
-  flex-direction: row !important;
-  justify-content: center !important;
-}
-
-.new-message-form textarea,
-.comment-textarea {
-  width: 100% !important;
-}
-
-[style*="grid-template-columns: repeat(6"] {
-  grid-template-columns: 1fr !important;
-}
-
-[style*="grid-template-columns: repeat(3"] {
-  grid-template-columns: 1fr !important;
-}
-
-[style*="grid-template-columns:repeat(6"] {
-  grid-template-columns: 1fr !important;
-}
-
-[style*="grid-template-columns:repeat(3"] {
-  grid-template-columns: 1fr !important;
-}
-
-[style*="grid-template-columns: repeat(auto-fit"] {
-  grid-template-columns: 1fr !important;
-}
-
-[style*="grid-template-columns:repeat(auto-fit"] {
-  grid-template-columns: 1fr !important;
-}
-
-[style*="width:50%"] {
-  width: 100% !important;
-}
+/* ---- Overrides de grid inline ---- */
+[style*="grid-template-columns: repeat(6"] { grid-template-columns: 1fr !important; }
+[style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
+[style*="grid-template-columns:repeat(6"]  { grid-template-columns: 1fr !important; }
+[style*="grid-template-columns:repeat(3"]  { grid-template-columns: 1fr !important; }
+[style*="grid-template-columns: repeat(auto-fit"] { grid-template-columns: 1fr !important; }
+[style*="grid-template-columns:repeat(auto-fit"]  { grid-template-columns: 1fr !important; }
+[style*="width:50%"] { width: 100% !important; }
diff --git a/nodejs-project/nodejs-project/src/client/assets/styles/style.css b/nodejs-project/nodejs-project/src/client/assets/styles/style.css
index eca8703e..8b166ec0 100644
--- a/nodejs-project/nodejs-project/src/client/assets/styles/style.css
+++ b/nodejs-project/nodejs-project/src/client/assets/styles/style.css
@@ -4211,3 +4211,100 @@ form {
   font-size: 11px;
   word-break: break-all;
 }
+
+/* ============================================================
+   MEJORAS GENERALES — añadidas en refactor visual
+   ============================================================ */
+
+/* Fotos de perfil circulares */
+.inhabitant-photo-details {
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+/* Imágenes de posts con altura controlada */
+.post img, .feed-card img, .post-image {
+  max-height: 70vh;
+  width: auto;
+  max-width: 100%;
+  border-radius: 8px;
+  display: block;
+  margin: 8px auto;
+}
+
+/* Feedback táctil en botones */
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+.filter-btn:active {
+  opacity: 0.75;
+  transform: scale(0.97);
+  transition: transform 0.1s, opacity 0.1s;
+}
+
+/* Transición suave en botones */
+button, input[type="submit"], input[type="button"], .filter-btn {
+  transition: background-color 0.2s, border-color 0.2s, opacity 0.1s;
+}
+
+/* Filtros: scroll horizontal por defecto */
+.mode-buttons,
+.mode-buttons-cols,
+.inhabitant-action {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+/* Cards con bordes redondeados */
+.inhabitant-card,
+.tribe-card,
+.block,
+.post,
+.forum-card {
+  border-radius: 12px;
+}
+
+/* Invite code con fuente monospace legible */
+.invite-code-text {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 13px;
+  word-break: break-all;
+  padding: 8px 12px;
+  border-radius: 6px;
+  letter-spacing: 0.5px;
+  user-select: all;
+}
+
+/* Sección de invite page más centrada */
+.invite-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+/* user-id-qr mejor alineado en perfil */
+.user-id-qr {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  margin-top: 8px;
+}
+
+.user-id-label {
+  font-size: 10px;
+  font-family: monospace;
+  word-break: break-all;
+  opacity: 0.6;
+  text-align: center;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/nodejs-project/nodejs-project/src/client/assets/themes/OasisMobile.css b/nodejs-project/nodejs-project/src/client/assets/themes/OasisMobile.css
index 688f782f..ba0799e8 100644
--- a/nodejs-project/nodejs-project/src/client/assets/themes/OasisMobile.css
+++ b/nodejs-project/nodejs-project/src/client/assets/themes/OasisMobile.css
@@ -27,6 +27,11 @@ button:hover, input[type="submit"]:hover, input[type="button"]:hover {
   border-color: #666;
 }
 
+button:active, input[type="submit"]:active, input[type="button"]:active {
+  background-color: #555;
+  transform: scale(0.97);
+}
+
 input, textarea, select {
   background-color: #333;
   color: #FFD700;
@@ -93,9 +98,12 @@ article, section {
   margin: 0 auto;
 }
 
-div {
+/* Fondo oscuro solo en contenedores principales, no en TODOS los divs */
+.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 {
   background-color: #1A1A1A;
-  border: 1px solid #333;
 }
 
 div .header-content {
@@ -103,16 +111,17 @@ div .header-content {
 }
 
 ::-webkit-scrollbar {
-  width: 10px;
+  width: 6px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #444;
+  background-color: #555;
   border-radius: 10px;
 }
 
 ::-webkit-scrollbar-track {
-  background-color: #222;
+  background-color: #1A1A1A;
 }
 
 .action-container {
@@ -144,25 +153,26 @@ footer a:hover {
 
 .card {
   border-radius: 16px;
-  padding: 0px 24px 10px 24px; 
+  padding: 0px 24px 10px 24px;
   margin-bottom: 16px;
   color: #FFD600;
   font-family: inherit;
   box-shadow: 0 2px 20px 0 #FFD60024;
+  border: 1px solid #333;
 }
 
 .card-section {
-  border:none;
-  padding: 10px 0 0 16px; 
+  border: none;
+  padding: 10px 0 0 16px;
 }
 
 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-bottom: 0px; 
+  padding-bottom: 0px;
   margin-top: 8px;
-  padding-top: 0px;   
+  padding-top: 0px;
   border: none;
 }
 
@@ -175,7 +185,7 @@ footer a:hover {
 }
 
 .card-footer {
-  margin-top: 6px;  
+  margin-top: 6px;
   font-weight: 500;
   color: #ff9900;
   font-size: 1.07em;
@@ -185,13 +195,11 @@ footer a:hover {
   background: none;
   border: none;
   padding-top: 0;
-  margin-bottom: 6;
 }
 
 .card-body {
-  margin-top: 0; 
-  margin-bottom: 4;
-  padding: 0; 
+  margin-top: 0;
+  padding: 0;
 }
 
 .card-field {
@@ -228,29 +236,38 @@ footer a:hover {
 }
 
 a.user-link {
-  background-color: #FFA500; 
+  background-color: #FFA500;
   color: #000;
-  padding: 8px 16px;
-  border-radius: 5px; 
+  padding: 4px 8px;
+  border-radius: 5px;
   text-align: center;
   font-weight: bold;
-  text-decoration: none; 
+  text-decoration: none;
   display: inline-block;
   border: 2px solid transparent;
-  transition: background-color 0.3s, color 0.3s, border-color 0.3s; 
-  font-size: 0.8em; 
+  transition: background-color 0.2s, color 0.2s;
+  font-size: 0.75em;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 a.user-link:hover {
-  background-color: #FFD700; 
-  border-color: #FFD700; 
-  color: #000; 
-  cursor: pointer; 
+  background-color: #FFD700;
+  border-color: #FFD700;
+  color: #000;
+  cursor: pointer;
+}
+
+a.user-link:active {
+  background-color: #cc8400;
+  transform: scale(0.97);
 }
 
 a.user-link:focus {
-  background-color: #007B9F; 
-  border-color: #007B9F; 
+  background-color: #007B9F;
+  border-color: #007B9F;
   color: #fff;
 }
 
@@ -268,8 +285,8 @@ a.user-link:focus {
 }
 
 .activitySpreadInhabitant2 {
-  background-color: #007B9F; 
-  color: #fff;  
+  background-color: #007B9F;
+  color: #fff;
   padding: 8px 16px;
   border-radius: 5px;
   font-weight: bold;
@@ -279,8 +296,8 @@ a.user-link:focus {
 }
 
 .activityVotePost {
-  background-color: #557d3b; 
-  color: #fff;  
+  background-color: #557d3b;
+  color: #fff;
   padding: 8px 16px;
   border-radius: 5px;
   font-weight: bold;
@@ -288,434 +305,6 @@ a.user-link:focus {
   display: inline-block;
   border: 2px solid transparent;
 }
-html {
-  -webkit-text-size-adjust: 100%;
-  box-sizing: border-box;
-  overflow-x: hidden !important;
-}
-
-*, *::before, *::after {
-  box-sizing: inherit;
-}
-
-body {
-  font-size: 15px;
-  overflow-x: hidden;
-  max-width: 100vw;
-}
-
-img,
-video,
-canvas,
-iframe,
-table {
-  max-width: 100% !important;
-}
-
-pre,
-code {
-  white-space: pre-wrap !important;
-  word-break: break-word !important;
-  overflow-wrap: anywhere !important;
-}
-
-.header {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  padding: 4px !important;
-  gap: 4px !important;
-  overflow: visible !important;
-}
-
-.header-content {
-  display: flex !important;
-  flex-wrap: wrap !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  padding: 2px !important;
-  gap: 4px !important;
-  overflow: visible !important;
-}
-
-.top-bar-left,
-.top-bar-mid,
-.top-bar-right {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  align-items: stretch !important;
-  gap: 6px !important;
-}
-
-.top-bar-left nav ul,
-.top-bar-mid nav ul,
-.top-bar-right nav ul {
-  display: flex !important;
-  flex-wrap: wrap !important;
-  gap: 6px !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  overflow: visible !important;
-}
-
-.top-bar-left nav ul li,
-.top-bar-mid nav ul li,
-.top-bar-right nav ul li {
-  margin: 0 !important;
-}
-
-.top-bar-left nav ul li a,
-.top-bar-mid nav ul li a,
-.top-bar-right nav ul li a {
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  padding: 6px 8px !important;
-  font-size: 0.9rem !important;
-  white-space: nowrap !important;
-}
-
-.search-input,
-.feed-search-input,
-.activity-search-input {
-  width: 100% !important;
-  max-width: 100% !important;
-  min-width: 0 !important;
-  height: 40px !important;
-  font-size: 16px !important;
-}
-
-.main-content {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  gap: 12px !important;
-}
-
-.sidebar-left,
-.sidebar-right,
-.main-column {
-  width: 100% !important;
-  max-width: 100% !important;
-  min-width: 0 !important;
-  padding: 10px !important;
-  border-left: none !important;
-  border-right: none !important;
-}
-
-.sidebar-left {
-  order: 1 !important;
-}
-
-.main-column {
-  order: 3 !important;
-}
-
-.sidebar-right {
-  order: 2 !important;
-}
-
-.sidebar-left nav ul,
-.sidebar-right nav ul {
-  display: flex !important;
-  flex-direction: column !important;
-}
-
-.oasis-nav-header {
-  font-size: 0.85rem !important;
-}
-
-.oasis-nav-list li a {
-  font-size: 0.9rem !important;
-  padding: 8px 12px !important;
-}
-
-button,
-input[type="submit"],
-input[type="button"],
-.filter-btn,
-.create-button,
-.edit-btn,
-.delete-btn,
-.join-btn,
-.leave-btn,
-.buy-btn {
-  min-height: 44px !important;
-  font-size: 16px !important;
-  white-space: normal !important;
-  text-align: center !important;
-}
-
-.feed-row,
-.comment-body-row,
-table {
-  display: block !important;
-  width: 100% !important;
-  overflow-x: auto !important;
-}
-
-textarea,
-input,
-select {
-  width: 100% !important;
-  max-width: 100% !important;
-  font-size: 16px !important;
-}
-
-.gallery {
-  display: grid !important;
-  grid-template-columns: 1fr 1fr !important;
-  gap: 8px !important;
-}
-
-footer,
-.footer {
-  display: block !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  padding: 12px !important;
-  overflow-x: auto !important;
-}
-
-footer div {
-  display: flex !important;
-  flex-direction: column !important;
-  gap: 8px !important;
-}
-
-h1 { font-size: 1.35em !important; }
-h2 { font-size: 1.2em !important; }
-h3 { font-size: 1em !important; }
-
-.small,
-.time {
-  font-size: 0.8rem !important;
-}
-
-.created-at {
-  display: block !important;
-  width: 100% !important;
-  white-space: normal !important;
-  word-break: break-word !important;
-  overflow-wrap: anywhere !important;
-  line-height: 1.5 !important;
-  font-size: 0.8rem !important;
-}
-
-.header-content .created-at {
-  display: block !important;
-  flex: 1 1 100% !important;
-  min-width: 0 !important;
-  max-width: 100% !important;
-}
-
-.post-meta,
-.feed-post-meta,
-.feed-row .small,
-.feed-row .time,
-.feed-row .created-at {
-  display: block !important;
-  width: 100% !important;
-  white-space: normal !important;
-  word-break: break-word !important;
-  overflow-wrap: anywhere !important;
-  line-height: 1.4 !important;
-}
-
-.post-meta,
-.feed-post-meta {
-  flex-direction: column !important;
-  gap: 4px !important;
-}
-
-.mode-buttons {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  gap: 8px !important;
-  grid-template-columns: 1fr !important;
-}
-
-.mode-buttons-cols {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  gap: 8px !important;
-}
-
-.mode-buttons-row {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  gap: 8px !important;
-}
-
-.mode-buttons .column,
-.mode-buttons > div {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  gap: 6px !important;
-  grid-template-columns: 1fr !important;
-}
-
-.mode-buttons form {
-  width: 100% !important;
-}
-
-.mode-buttons .filter-btn,
-.mode-buttons button {
-  width: 100% !important;
-}
-
-.filter-group {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  gap: 6px !important;
-}
-
-.filter-group form {
-  width: 100% !important;
-}
-
-.inhabitant-card {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  overflow: hidden !important;
-}
-
-.inhabitant-left {
-  width: 100% !important;
-  text-align: center !important;
-}
-
-.inhabitant-details {
-  width: 100% !important;
-}
-
-.inhabitant-photo,
-.inhabitant-photo-details {
-  max-width: 200px !important;
-  margin: 0 auto !important;
-}
-
-.inhabitants-list,
-.inhabitants-grid {
-  display: flex !important;
-  flex-direction: column !important;
-  gap: 10px !important;
-}
-
-.tribe-card {
-  display: flex !important;
-  flex-direction: column !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  overflow: hidden !important;
-}
-
-.tribe-grid {
-  display: flex !important;
-  flex-direction: column !important;
-  gap: 10px !important;
-  grid-template-columns: 1fr !important;
-}
-
-.tribes-list,
-.tribes-grid {
-  display: flex !important;
-  flex-direction: column !important;
-  gap: 10px !important;
-}
-
-.tribe-card-image {
-  width: 100% !important;
-  max-width: 100% !important;
-}
-
-.forum-card {
-  flex-direction: column !important;
-}
-
-.forum-score-col,
-.forum-main-col,
-.root-vote-col {
-  width: 100% !important;
-}
-
-.forum-header-row {
-  flex-direction: column !important;
-  gap: 4px !important;
-}
-
-.forum-meta {
-  flex-wrap: wrap !important;
-  gap: 8px !important;
-}
-
-.forum-thread-header {
-  flex-direction: column !important;
-}
-
-.forum-comment {
-  margin-left: 0 !important;
-  padding-left: 8px !important;
-}
-
-.comment-body-row {
-  flex-direction: column !important;
-}
-
-.comment-vote-col,
-.comment-text-col {
-  width: 100% !important;
-}
-
-.forum-score-box,
-.forum-score-form {
-  flex-direction: row !important;
-  justify-content: center !important;
-}
-
-.new-message-form textarea,
-.comment-textarea {
-  width: 100% !important;
-}
-
-[style*="grid-template-columns: repeat(6"] {
-  grid-template-columns: 1fr !important;
-}
-
-[style*="grid-template-columns: repeat(3"] {
-  grid-template-columns: 1fr !important;
-}
-
-[style*="grid-template-columns:repeat(6"] {
-  grid-template-columns: 1fr !important;
-}
-
-[style*="grid-template-columns:repeat(3"] {
-  grid-template-columns: 1fr !important;
-}
-
-[style*="grid-template-columns: repeat(auto-fit"] {
-  grid-template-columns: 1fr !important;
-}
-
-[style*="grid-template-columns:repeat(auto-fit"] {
-  grid-template-columns: 1fr !important;
-}
-
-[style*="width:50%"] {
-  width: 100% !important;
-}
 
 .update-banner {
   background-color: #1a1400;
@@ -732,34 +321,11 @@ h3 { font-size: 1em !important; }
   word-break: break-all !important;
 }
 
-body div.header {
-  flex-direction: row !important;
-  flex-wrap: wrap !important;
-  gap: 2px !important;
-  align-items: center !important;
-  padding: 4px 2px !important;
+/* QR code tema oscuro */
+.qr-code svg rect {
+  fill: #1A1A1A;
 }
 
-body div.top-bar-left {
-  display: contents !important;
-}
-
-body div.top-bar-left > a.logo-icon {
-  flex: 0 0 100% !important;
-}
-
-body div.top-bar-left > nav,
-body div.top-bar-left > nav > ul,
-body div.top-bar-right,
-body div.top-bar-right nav,
-body div.top-bar-right nav ul {
-  display: contents !important;
-}
-
-body div.top-bar-left nav ul li a,
-body div.top-bar-right nav ul li a {
-  padding: 5px 5px !important;
-  font-size: 0.82rem !important;
-  min-height: auto !important;
-  border: none !important;
+.qr-code svg path {
+  fill: #FFD700;
 }
diff --git a/nodejs-project/nodejs-project/src/views/main_views.js b/nodejs-project/nodejs-project/src/views/main_views.js
index 4c8c2358..17af0c82 100644
--- a/nodejs-project/nodejs-project/src/views/main_views.js
+++ b/nodejs-project/nodejs-project/src/views/main_views.js
@@ -686,10 +686,7 @@ const template = (titlePrefix, ...elements) => {
       meta({ name: "description", content: i18n.oasisDescription }),
       meta({
         name: "viewport",
-        content: toAttributes({
-          width: "device-width",
-          "initial-scale": 1
-        })
+        content: "width=device-width, initial-scale=1, viewport-fit=cover"
       })
     ),
     body(