Fix mobile creator layout overlap, add mobile logout handler, and redesign user credit capsules

frontend/viewer.html

@@ -154,6 +154,13 @@
             box-sizing: border-box;
         }
 
+        #creator-container {
+            flex: 1;
+            padding: 70px 20px 20px 20px !important;
+            overflow-y: auto;
+            box-sizing: border-box;
+        }
+
         .gallery-title {
             font-size: 1.35rem;
             font-weight: 700;
@@ -256,6 +263,7 @@
         <span class="logo">23DFactory Mobile</span>
         <div style="display: flex; gap: 8px; align-items: center;">
             <button id="btnOpenCreator" style="background: #7c3aed; color: #fff; border: none; padding: 6px 12px; border-radius: 8px; font-weight: 700; font-size: 0.8rem; cursor: pointer; display: none;">➕ Crear</button>
+            <button id="btnMobLogout" style="background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.25); color: #ef4444; padding: 6px 10px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; cursor: pointer; display: none;">Salir</button>
             <a href="/" class="btn-close">Ir al inicio</a>
         </div>
     </header>
@@ -266,10 +274,13 @@
     <div id="gallery-container">
         <div>
             <h2 class="gallery-title">Tu Biblioteca 3D</h2>
-            <div id="mobUserCredits" style="display: none; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 0.85rem; color: #a1a1aa; font-weight: 500; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); padding: 8px 12px; border-radius: 8px; width: fit-content;">
-                <span>👤 <strong id="mobUsername" style="color: #fff;">-</strong></span>
-                <span style="color: rgba(255,255,255,0.15);">|</span>
-                <span style="color: #ffeb3b;">🪙 <strong id="mobCredits">-</strong> Créditos</span>
+            <div id="mobUserCredits" style="display: none; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 0.8rem;">
+                <span style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); padding: 5px 10px; border-radius: 20px; color: #fff; display: inline-flex; align-items: center; gap: 4px; font-weight: 600;">
+                    👤 <span id="mobUsername">-</span>
+                </span>
+                <span style="background: rgba(255, 235, 59, 0.05); border: 1px solid rgba(255, 235, 59, 0.2); padding: 5px 10px; border-radius: 20px; color: #ffeb3b; display: inline-flex; align-items: center; gap: 4px; font-weight: 600;">
+                    🪙 <span id="mobCredits">-</span> Créditos
+                </span>
             </div>
             <p class="gallery-desc">Selecciona uno de tus modelos para visualizar en 3D interactivo y proyectar en tu habitación usando AR.</p>
         </div>
@@ -282,7 +293,7 @@
     </div>
 
     <!-- 3. Mobile Creator Container (hidden by default) -->
-    <div id="creator-container" style="display: none; flex-direction: column; padding: 16px; box-sizing: border-box; max-width: 600px; margin: 0 auto; width: 100%;">
+    <div id="creator-container" style="display: none; flex-direction: column; max-width: 600px; margin: 0 auto; width: 100%;">
         <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
             <div>
                 <h2 style="font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 700; margin: 0;">Crear Modelo 3D</h2>
@@ -838,11 +849,15 @@
                         const mobUsername = document.getElementById('mobUsername');
                         const mobCredits = document.getElementById('mobCredits');
                         const mobCreatorCreditsVal = document.getElementById('mobCreatorCreditsVal');
+                        const btnMobLogout = document.getElementById('btnMobLogout');
+                        const btnOpenCreator = document.getElementById('btnOpenCreator');
                         
                         if (mobUsername) mobUsername.textContent = data.username;
                         if (mobCredits) mobCredits.textContent = data.credits || 0;
                         if (mobCreatorCreditsVal) mobCreatorCreditsVal.textContent = data.credits || 0;
                         if (mobUserCredits) mobUserCredits.style.display = 'flex';
+                        if (btnMobLogout) btnMobLogout.style.display = 'block';
+                        if (btnOpenCreator) btnOpenCreator.style.display = 'block';
                     }
                 }
             } catch (err) {
@@ -850,6 +865,23 @@
             }
         }
 
+        // Logout handler
+        const btnMobLogout = document.getElementById('btnMobLogout');
+        if (btnMobLogout) {
+            btnMobLogout.addEventListener('click', async () => {
+                if (confirm('¿Estás seguro de que deseas cerrar sesión?')) {
+                    try {
+                        const response = await fetch('/api/logout', { method: 'POST' });
+                        if (response.ok) {
+                            window.location.reload();
+                        }
+                    } catch (e) {
+                        console.error("Error logging out:", e);
+                    }
+                }
+            });
+        }
+
         // Routing Logic
         if (modelUrl) {
             loadModelInViewer(modelUrl);