Replace separate username text and exit button with a single highlighted user menu pill and dropdown menu

frontend/app.js

@@ -2867,6 +2867,24 @@ if (creditsModal) {
     });
 }
 
+// User Profile Menu Dropdown Toggle
+const userMenuBtn = document.getElementById('userMenuBtn');
+const userDropdownMenu = document.getElementById('userDropdownMenu');
+
+if (userMenuBtn && userDropdownMenu) {
+    userMenuBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const isVisible = userDropdownMenu.style.display === 'block';
+        userDropdownMenu.style.display = isVisible ? 'none' : 'block';
+    });
+
+    document.addEventListener('click', (e) => {
+        if (!userMenuBtn.contains(e.target) && !userDropdownMenu.contains(e.target)) {
+            userDropdownMenu.style.display = 'none';
+        }
+    });
+}
+
 // Mobile QR Viewer Modal handlers
 if (viewOnMobileBtn) {
     viewOnMobileBtn.addEventListener('click', () => {

frontend/index.html

@@ -41,17 +41,22 @@
                 <h1 class="logo-text">23D<span>Factory</span></h1>
             </div>
             <div class="header-actions" id="userHeaderActions" style="display: none; align-items: center; gap: 0.75rem;">
-                <button id="headerCreditsBtn" class="btn btn-secondary" style="padding: 0.35rem 0.65rem; font-size: 0.75rem; border-color: rgba(255, 235, 59, 0.3); color: #ffeb3b; background: rgba(255, 235, 59, 0.05); display: flex; align-items: center; gap: 0.35rem; font-weight: 600; cursor: pointer; border-radius: 12px;" title="Tienda de créditos">
+                <button id="headerCreditsBtn" class="btn btn-secondary" style="padding: 0.35rem 0.75rem; font-size: 0.8rem; border-color: rgba(255, 235, 59, 0.3); color: #ffeb3b; background: rgba(255, 235, 59, 0.08); display: flex; align-items: center; gap: 0.35rem; font-weight: 700; cursor: pointer; border-radius: 20px; box-shadow: 0 0 10px rgba(255, 235, 59, 0.1);" title="Tienda de créditos">
                     <span>🪙 <span id="headerCreditsText">0</span> Créditos</span>
                 </button>
-                <span id="headerUsernameText" style="font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.35rem;">
-                    <i data-lucide="user" style="width: 14px; height: 14px; color: var(--primary-light);"></i>
-                    <span style="font-weight: 500;">Invitado</span>
-                </span>
-                <button class="btn btn-secondary" id="logoutBtn" style="padding: 0.35rem 0.65rem; font-size: 0.75rem; border-color: rgba(244, 67, 54, 0.3); color: #f44336; background: rgba(244, 67, 54, 0.05);" title="Cerrar Sesión">
-                    <i data-lucide="log-out" style="width: 13px; height: 13px;"></i>
-                    <span>Salir</span>
-                </button>
+                <div style="position: relative;">
+                    <button id="userMenuBtn" class="user-menu-btn" style="background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(167, 139, 250, 0.15)); border: 1px solid rgba(167, 139, 250, 0.5); color: #ffffff; padding: 0.4rem 0.85rem; border-radius: 20px; font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);" title="Menú de usuario">
+                        <i data-lucide="user" style="width: 15px; height: 15px; color: #a78bfa;"></i>
+                        <span id="headerUsernameText">Invitado</span>
+                        <i data-lucide="chevron-down" style="width: 14px; height: 14px; color: rgba(255,255,255,0.7); margin-left: 2px;"></i>
+                    </button>
+                    <div id="userDropdownMenu" class="user-dropdown-menu" style="display: none; position: absolute; top: calc(100% + 8px); right: 0; background: #161622; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 6px; box-shadow: 0 10px 25px rgba(0,0,0,0.6); z-index: 1000; min-width: 150px;">
+                        <button id="logoutBtn" style="width: 100%; text-align: left; background: transparent; border: none; color: #ef4444; padding: 8px 12px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background 0.2s;">
+                            <i data-lucide="log-out" style="width: 15px; height: 15px;"></i>
+                            <span>Salir</span>
+                        </button>
+                    </div>
+                </div>
             </div>
         </header>