Redesign 3D viewer mode: hide top tab bar, remove AR button, add Volver and Descargar FBX overlay buttons

frontend/viewer.html

@@ -403,7 +403,17 @@
     </div>
 
     <!-- 2. Interactive model viewer (shown when active) -->
-    <div id="viewer-container">
+    <div id="viewer-container" style="display: none; position: relative; width: 100%; height: calc(100vh - 60px);">
+        <!-- Viewer Controls Overlay -->
+        <div id="viewerControlsOverlay" style="position: absolute; top: 12px; left: 12px; right: 12px; z-index: 999; display: flex; justify-content: space-between; align-items: center; pointer-events: none;">
+            <button id="btnBackToGallery" style="pointer-events: auto; background: rgba(20, 20, 28, 0.85); border: 1px solid rgba(255, 255, 255, 0.15); color: #ffffff; padding: 8px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; cursor: pointer; backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.4); display: flex; align-items: center; gap: 6px;">
+                ⬅ Volver
+            </button>
+            <button id="btnDownloadViewerFBX" style="pointer-events: auto; background: linear-gradient(135deg, #10b981, #059669); border: none; color: #ffffff; padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; cursor: pointer; backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); display: flex; align-items: center; gap: 6px;">
+                ⬇ Descargar FBX
+            </button>
+        </div>
+
         <div id="loading-overlay">
             <div class="spinner"></div>
             <div id="loading-text" style="font-size: 0.9rem; color: #a1a1aa;">Cargando archivo 3D...</div>
@@ -412,27 +422,19 @@
         <model-viewer 
             id="viewer"
             src="" 
-            ar 
-            ar-modes="webxr scene-viewer quick-look" 
             camera-controls 
             touch-action="pan-y"
             shadow-intensity="1" 
             auto-rotate 
-            interaction-prompt="auto">
-            
-            <button slot="ar-button" id="ar-button">
-                ⚡ Proyectar en AR (Cámara)
-            </button>
-            
-            <div id="ar-prompt">
-                Mueve tu celular para detectar el suelo
-            </div>
+            interaction-prompt="auto"
+            style="width: 100%; height: 100%;">
         </model-viewer>
     </div>
 
     <script>
         const urlParams = new URLSearchParams(window.location.search);
         const modelUrl = urlParams.get('model');
+        let currentViewerUrl = '';
         
         const galleryContainer = document.getElementById('gallery-container');
         const viewerContainer = document.getElementById('viewer-container');
@@ -444,20 +446,50 @@
         const galleryGrid = document.getElementById('gallery-grid');
 
         // Back button to list models
-        btnBack.addEventListener('click', () => {
-            viewerContainer.style.display = 'none';
-            btnBack.style.display = 'none';
-            appHeader.style.display = 'flex';
-            galleryContainer.style.display = 'flex';
-            viewer.src = '';
-        });
+        if (btnBack) {
+            btnBack.addEventListener('click', () => {
+                viewerContainer.style.display = 'none';
+                if (appHeader) appHeader.style.display = 'flex';
+                const mobNavigation = document.getElementById('mobNavigation');
+                if (mobNavigation) mobNavigation.style.display = 'flex';
+                if (galleryContainer) galleryContainer.style.display = 'flex';
+                const mobGalleryHeader = document.getElementById('mobGalleryHeader');
+                const mobFilterTabs = document.getElementById('mobFilterTabs');
+                if (mobGalleryHeader) mobGalleryHeader.style.display = 'block';
+                if (mobFilterTabs) mobFilterTabs.style.display = 'flex';
+                if (navTabGallery) setMobNavActive(navTabGallery);
+                viewer.src = '';
+            });
+        }
+
+        const btnDownloadViewerFBX = document.getElementById('btnDownloadViewerFBX');
+        if (btnDownloadViewerFBX) {
+            btnDownloadViewerFBX.addEventListener('click', () => {
+                if (!currentViewerUrl) return;
+                let fbxUrl = currentViewerUrl;
+                if (fbxUrl.endsWith('.glb')) {
+                    fbxUrl = fbxUrl.replace('.glb', '.fbx');
+                }
+                const a = document.createElement('a');
+                a.href = fbxUrl;
+                a.download = fbxUrl.split('/').pop();
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+            });
+        }
 
         // Load 3D model in viewer
         function loadModelInViewer(url) {
-            galleryContainer.style.display = 'none';
-            appHeader.style.display = 'none';
+            currentViewerUrl = url;
+            const mobNavigation = document.getElementById('mobNavigation');
+            if (mobNavigation) mobNavigation.style.display = 'none';
+            if (galleryContainer) galleryContainer.style.display = 'none';
+            const creatorContainerEl = document.getElementById('creator-container');
+            if (creatorContainerEl) creatorContainerEl.style.display = 'none';
+            if (appHeader) appHeader.style.display = 'none';
+            
             viewerContainer.style.display = 'block';
-            btnBack.style.display = 'block';
             
             overlay.style.display = 'flex';
             overlay.style.opacity = 1;