refactor: move zoom toggle to hamburger menu and make close button subtle

- Moved "Zoom" button from action bar to hamburger menu under "Acciones Rápidas"
- Close button (X) now grey/subtle by default (opacity: 0.7)
- Close button turns red only on hover for clear indication
- Updated JavaScript to reference show-zoom-menu-btn instead of show-zoom-btn
- Added preventDefault to showZoomControl to prevent link navigation

static/css/main.css

@@ -3501,10 +3501,10 @@ html {
     right: -8px;
     width: 24px;
     height: 24px;
-    background: rgba(220, 53, 69, 0.9);
+    background: rgba(128, 128, 128, 0.6); /* Subtle grey */
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
-    color: white;
+    color: rgba(255, 255, 255, 0.8); /* Light grey icon */
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -3512,10 +3512,13 @@ html {
     padding: 0;
     transition: all 0.2s ease;
     z-index: 1;
+    opacity: 0.7; /* Subtle by default */
 }
 
 .zoom-close-btn:hover {
-    background: rgba(220, 53, 69, 1);
+    background: rgba(220, 53, 69, 0.9); /* Red on hover */
+    color: white; /* White icon on hover */
+    opacity: 1; /* Fully visible on hover */
     transform: scale(1.1);
     box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
 }

static/js/main.js

@@ -485,7 +485,7 @@
      */
     function hideZoomControl() {
         const zoomControl = document.getElementById('zoom-control');
-        const showButton = document.getElementById('show-zoom-btn');
+        const showButton = document.getElementById('show-zoom-menu-btn');
 
         if (zoomControl) {
             zoomControl.style.display = 'none';
@@ -493,16 +493,18 @@
         }
 
         if (showButton) {
-            showButton.style.display = 'inline-flex';
+            showButton.style.display = 'block';
         }
     }
 
     /**
      * Show zoom control and hide menu button (global function for onclick)
      */
-    window.showZoomControl = function() {
+    window.showZoomControl = function(event) {
+        if (event) event.preventDefault(); // Prevent default link behavior
+
         const zoomControl = document.getElementById('zoom-control');
-        const showButton = document.getElementById('show-zoom-btn');
+        const showButton = document.getElementById('show-zoom-menu-btn');
 
         if (zoomControl) {
             zoomControl.style.display = 'flex';
@@ -521,13 +523,13 @@
         if (isMobileView()) return; // Always hidden on mobile
 
         const zoomControl = document.getElementById('zoom-control');
-        const showButton = document.getElementById('show-zoom-btn');
+        const showButton = document.getElementById('show-zoom-menu-btn');
         const isVisible = localStorage.getItem('cv-zoom-visible');
 
         // Default to visible if not set
         if (isVisible === 'false') {
             if (zoomControl) zoomControl.style.display = 'none';
-            if (showButton) showButton.style.display = 'inline-flex';
+            if (showButton) showButton.style.display = 'block';
         } else {
             if (zoomControl) zoomControl.style.display = 'flex';
             if (showButton) showButton.style.display = 'none';

templates/index.html

@@ -174,15 +174,6 @@
 
             <!-- Right: Action buttons -->
             <div class="action-buttons-right">
-                <button
-                    id="show-zoom-btn"
-                    class="action-btn zoom-toggle-btn"
-                    onclick="showZoomControl()"
-                    style="display: none;"
-                    aria-label="{{if eq .Lang "es"}}Mostrar control de zoom{{else}}Show zoom control{{end}}">
-                    <iconify-icon icon="mdi:magnify" width="18" height="18"></iconify-icon>
-                    {{if eq .Lang "es"}}Zoom{{else}}Zoom{{end}}
-                </button>
                 <button
                     class="action-btn pdf-btn"
                     onclick="openPdfModal()"
@@ -274,6 +265,10 @@
                     <iconify-icon icon="mdi:arrow-expand-all" width="20" height="20"></iconify-icon>
                     <span>{{if eq .Lang "es"}}Expandir Todo{{else}}Expand All{{end}}</span>
                 </a>
+                <a href="#" id="show-zoom-menu-btn" class="menu-item menu-item-action" onclick="showZoomControl(event)" style="display: none;">
+                    <iconify-icon icon="mdi:magnify" width="20" height="20"></iconify-icon>
+                    <span>{{if eq .Lang "es"}}Zoom{{else}}Zoom{{end}}</span>
+                </a>
             </div>
 
             <!-- View Controls in menu (visible only on mobile < 900px) -->