readme: capturas y dibujos nuevos, sin Karvan

- capturas de un nodo de prueba con contenido de acampada: lanzador, tribus,
  votacion de semaforo, modulos, ajustes, barra, salas y el tema del dev
- portada y esquema de la interfaz al dia; dos esquemas nuevos: como va la
  rama encima de Oasis y como funcionan las llamadas
- el README cuenta las novedades de esta version y explica la rama

Arreglos que salieron al hacer las capturas:
- el boton de No molestar del Telefono ocupaba una fila entera arriba de cada
  pagina; ahora va en la barra de arriba, junto al avatar
- Ajustes marcaba English aunque el idioma fuera otro (settings_view se queda
  con el idioma del arranque): el selector lo lee al pintar
- barras de la votacion juntas y con las etiquetas en el mismo tipo
- Personalizar la barra: una fila por atajo, sin sangria

src/client/assets/styles/mobile_ux.css

@@ -469,3 +469,40 @@ body .main-content { min-height: calc(100dvh - 300px); }
 .main-column .search-filters-row > table.search-filters-table { flex: 0 0 auto !important; }
 .main-column .pm-card div.pm-actions.pm-actions { width: auto !important; max-width: max-content; display: inline-flex !important; vertical-align: top; }
 .main-column .pm-card .pm-info-table tr:nth-child(1) td, .main-column .pm-card .pm-info-table tr:nth-child(1) a { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; text-align: left !important; }
+
+/* ---------- el interruptor Abierto / No molestar del Telefono del dev ---------- */
+/* salia centrado en una fila propia arriba de cada pagina (unos 60px); va en la
+   barra de arriba, junto al avatar */
+form.oasis-phone-state {
+  position: fixed !important; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 62px; z-index: 1001;
+  margin: 0 !important; padding: 0 !important; width: auto !important;
+}
+form.oasis-phone-state .oasis-phone-state-btn {
+  width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; margin: 0 !important;
+  display: inline-flex !important; align-items: center; justify-content: center;
+  border-radius: 50% !important; box-shadow: none !important; font-size: 20px !important;
+}
+.oasis-mobile-topbar .omt-menus { padding-right: 46px; }
+
+/* barras de la votacion: juntas, y las etiquetas del dev (CONFUNDIDO, SEGUIR
+   MAYORIA) en el mismo tipo que las nuestras (Si, No) */
+.main-column div.vote-bar { margin: 0 !important; padding: 0 !important; min-height: 0 !important; gap: 4px 10px !important; }
+.main-column .vote-bar > * { margin: 0 !important; }
+.main-column .vote-bar-meter { height: 12px !important; min-height: 0 !important; }
+.main-column .vote-bar-label { text-transform: lowercase; }
+.main-column .vote-bar-label::first-letter { text-transform: uppercase; }
+
+/* personalizar la barra de abajo: una fila por atajo, como el resto de listas */
+.main-column .bb-manage-list, .main-column .bb-pick-grid { display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: stretch !important; }
+.main-column .bb-manage-list form, .main-column .bb-pick-grid form { margin: 0 !important; width: 100% !important; }
+.main-column button.bb-manage-btn, .main-column button.bb-pick-btn {
+  width: 100% !important; min-height: 52px !important; margin: 0 !important; padding: 8px 14px !important;
+  display: flex !important; align-items: center; gap: 12px; justify-content: flex-start !important;
+  font-family: var(--ux-text) !important; font-weight: 700 !important; font-size: 16px !important;
+  text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important;
+}
+.main-column .bb-manage-btn .bb-manage-lbl, .main-column .bb-pick-btn .bb-pick-lbl { flex: 1 1 auto; text-align: left; }
+.main-column .bb-manage-btn .bb-manage-x { color: var(--ux-danger) !important; font-size: 18px; }
+.main-column .bb-manage h3, .main-column .bb-manage-add h3 { font-size: 20px !important; margin: 18px 0 10px !important; }
+.main-column a.bb-manage-done { display: block !important; width: 100% !important; margin-top: 18px !important; text-align: center; }
+.main-column div.bb-manage, .main-column div.bb-manage-add, .main-column div.bb-manage-list, .main-column div.bb-pick-grid { padding: 0 !important; margin: 0 !important; border: 0 !important; }

src/views/mobile_ui.js

@@ -119,9 +119,14 @@ const settingsOrder = (parts) => {
 // cada idioma un boton que se aplica al tocarlo (antes desplegable y otro boton)
 const LANGS = [['Español', 'es'], ['Català', 'ca'], ['Euskara', 'eu'], ['Galego', 'gl'], ['English', 'en'], ['Français', 'fr'],
   ['Português', 'pt'], ['Italiano', 'it'], ['Deutsch', 'de'], ['Русский', 'ru'], ['العربية', 'ar'], ['हिन्दी', 'hi'], ['中文', 'zh']];
-const languagePick = (selected) => form({ action: '/language', method: 'post', class: 'lang-pick' },
-  ...LANGS.map(([name, code]) => button({ type: 'submit', name: 'language', value: code, class: code === selected ? 'lang-chip is-current' : 'lang-chip', lang: code }, name))
-);
+// el idioma se lee al pintar: settings_view desestructura selectedLanguage al cargar y
+// se queda con el valor de entonces (siempre "en")
+const languagePick = () => {
+  const selected = require('./main_views').getLanguage();
+  return form({ action: '/language', method: 'post', class: 'lang-pick' },
+    ...LANGS.map(([name, code]) => button({ type: 'submit', name: 'language', value: code, class: code === selected ? 'lang-chip is-current' : 'lang-chip', lang: code }, name))
+  );
+};
 
 // ---------- acciones de tarjeta ----------
 

src/views/settings_view.js

@@ -148,7 +148,7 @@ const settingsView = (params) => {
       div({ class: "tags-header" },
         h2(i18n.language),
         p(i18n.languageDescription),
-        isMobile ? mobileUi.languagePick(selectedLanguage) : form(
+        isMobile ? mobileUi.languagePick() : form(
           { action: "/language", method: "post" },
           select({ name: "language" }, [
             languageOption("English", "en"),