Fix 3D viewer header bar structure and z-index to make btnBack clickable on mobile touch screens

frontend/viewer.html

@@ -403,18 +403,18 @@
     </div>
 
     <!-- 2. Interactive model viewer (shown when active) -->
-    <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;">
+    <div id="viewer-container" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9999; background: #121214;">
+        <!-- Viewer Header Control Overlay -->
+        <div id="viewerHeaderBar" style="position: absolute; top: 0; left: 0; right: 0; z-index: 10000; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: rgba(18, 18, 20, 0.9); border-bottom: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);">
+            <button id="btnBackToGallery" style="background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; z-index: 10001;">
                 ⬅ 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;">
+            <button id="btnDownloadViewerFBX" style="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; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); display: flex; align-items: center; gap: 6px; z-index: 10001;">
                 ⬇ Descargar FBX
             </button>
         </div>
 
-        <div id="loading-overlay">
+        <div id="loading-overlay" style="z-index: 9999;">
             <div class="spinner"></div>
             <div id="loading-text" style="font-size: 0.9rem; color: #a1a1aa;">Cargando archivo 3D...</div>
         </div>
@@ -427,7 +427,7 @@
             shadow-intensity="1" 
             auto-rotate 
             interaction-prompt="auto"
-            style="width: 100%; height: 100%;">
+            style="width: 100%; height: 100%; padding-top: 50px; box-sizing: border-box;">
         </model-viewer>
     </div>
 
@@ -446,6 +446,7 @@
         const galleryGrid = document.getElementById('gallery-grid');
 
         function exitViewerToGallery() {
+            console.log("[Viewer] Exiting 3D viewer mode");
             viewerContainer.style.display = 'none';
             viewer.src = '';
             
@@ -484,19 +485,16 @@
 
         // Back button to list models
         if (btnBack) {
-            btnBack.addEventListener('click', (e) => {
-                e.stopPropagation();
-                exitViewerToGallery();
-            });
-            btnBack.addEventListener('touchend', (e) => {
-                e.stopPropagation();
+            btnBack.onclick = function(e) {
+                if (e) e.stopPropagation();
                 exitViewerToGallery();
-            });
+            };
         }
 
         const btnDownloadViewerFBX = document.getElementById('btnDownloadViewerFBX');
         if (btnDownloadViewerFBX) {
-            btnDownloadViewerFBX.addEventListener('click', () => {
+            btnDownloadViewerFBX.onclick = function(e) {
+                if (e) e.stopPropagation();
                 if (!currentViewerUrl) return;
                 let fbxUrl = currentViewerUrl;
                 if (fbxUrl.endsWith('.glb')) {
@@ -508,7 +506,7 @@
                 document.body.appendChild(a);
                 a.click();
                 document.body.removeChild(a);
-            });
+            };
         }
 
         // Load 3D model in viewer