phase iv -ii

static/css/main.css

@@ -2677,28 +2677,37 @@ html {
    Info Modal - Modern Glassmorphism Design
    ======================================== */
 
+/* Native <dialog> element - centered by default, no positioning needed */
 .info-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    border: none;
+    border-radius: 24px;
+    padding: 0;
+    max-width: 500px;
+    width: calc(100% - 2rem);
+    background: transparent;
+}
+
+/* Native ::backdrop pseudo-element replaces manual backdrop div */
+.info-modal::backdrop {
     background: rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.3s ease, visibility 0.3s ease;
-    padding: 1rem;
 }
 
-.info-modal.active {
-    opacity: 1;
-    visibility: visible;
+/* Dialog opening animation - native dialog uses [open] attribute */
+.info-modal[open] {
+    animation: modalFadeIn 0.3s ease;
+}
+
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9) translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
 }
 
 .info-modal-content {
@@ -2707,19 +2716,12 @@ html {
     -webkit-backdrop-filter: blur(20px);
     border-radius: 24px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 100px rgba(39, 174, 96, 0.1);
-    max-width: 500px;
     width: 100%;
     padding: 2.5rem;
     position: relative;
-    transform: scale(0.9) translateY(20px);
-    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
     border: 1px solid rgba(255, 255, 255, 0.8);
 }
 
-.info-modal.active .info-modal-content {
-    transform: scale(1) translateY(0);
-}
-
 .info-modal-close {
     position: absolute;
     top: 1rem;

static/js/main.js

@@ -641,56 +641,17 @@
     }
 
     // =============================================================================
-    // MODALS
+    // MODALS - Using Native <dialog> Element
     // =============================================================================
 
-    // Info Modal Functions
-    window.openInfoModal = function() {
-        const modal = document.getElementById('info-modal');
-        modal.classList.add('active');
-        document.body.style.overflow = 'hidden'; // Prevent scrolling when modal is open
-    };
-
-    window.closeInfoModal = function() {
-        const modal = document.getElementById('info-modal');
-        modal.classList.remove('active');
-        document.body.style.overflow = ''; // Restore scrolling
-    };
-
-    window.closeInfoModalOnBackdrop = function(event) {
-        if (event.target.id === 'info-modal') {
-            window.closeInfoModal();
-        }
-    };
-
-    // PDF Modal Functions
-    window.openPdfModal = function() {
-        const modal = document.getElementById('pdf-modal');
-        modal.classList.add('active');
-        document.body.style.overflow = 'hidden'; // Prevent scrolling when modal is open
-    };
-
-    window.closePdfModal = function() {
-        const modal = document.getElementById('pdf-modal');
-        modal.classList.remove('active');
-        document.body.style.overflow = ''; // Restore scrolling
-    };
-
-    window.closePdfModalOnBackdrop = function(event) {
-        if (event.target.id === 'pdf-modal') {
-            window.closePdfModal();
-        }
-    };
-
-    // Close modals with Escape key
-    function initModalKeyHandlers() {
-        document.addEventListener('keydown', function(event) {
-            if (event.key === 'Escape') {
-                window.closeInfoModal();
-                window.closePdfModal();
-            }
-        });
-    }
+    // Native <dialog> elements handle:
+    // - Open/close with .showModal() and .close()
+    // - Backdrop clicks (via ::backdrop CSS pseudo-element)
+    // - Escape key to close (built-in browser behavior)
+    // - Body scroll prevention (automatic with modal dialogs)
+    // - Focus trapping (automatic accessibility feature)
+    //
+    // No JavaScript needed! All modal logic is now in HTML/CSS.
 
     // =============================================================================
     // ERROR HANDLING
@@ -786,7 +747,6 @@
         initClickOutsideHandler();
         initPreferences();
         initScrollBehavior();
-        initModalKeyHandlers();
         initHTMXHandlers();
     });
 

templates/partials/modals/info-modal.html

@@ -1,8 +1,8 @@
 {{define "info-modal"}}
-<!-- Info Modal -->
-<div id="info-modal" class="info-modal no-print" onclick="closeInfoModalOnBackdrop(event)">
-    <div class="info-modal-content" onclick="event.stopPropagation()">
-        <button class="info-modal-close" onclick="closeInfoModal()" aria-label="Close">
+<!-- Info Modal - Native Dialog -->
+<dialog id="info-modal" class="info-modal no-print">
+    <div class="info-modal-content">
+        <button class="info-modal-close" onclick="document.getElementById('info-modal').close()" aria-label="Close">
             <iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
         </button>
 
@@ -48,5 +48,5 @@
             </a>
         </div>
     </div>
-</div>
+</dialog>
 {{end}}

templates/partials/modals/pdf-modal.html

@@ -1,8 +1,8 @@
 {{define "pdf-modal"}}
-<!-- PDF Export Modal -->
-<div id="pdf-modal" class="info-modal no-print" onclick="closePdfModalOnBackdrop(event)">
-    <div class="info-modal-content" onclick="event.stopPropagation()">
-        <button class="info-modal-close" onclick="closePdfModal()" aria-label="Close">
+<!-- PDF Export Modal - Native Dialog -->
+<dialog id="pdf-modal" class="info-modal no-print">
+    <div class="info-modal-content">
+        <button class="info-modal-close" onclick="document.getElementById('pdf-modal').close()" aria-label="Close">
             <iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
         </button>
 
@@ -21,5 +21,5 @@
             </p>
         </div>
     </div>
-</div>
+</dialog>
 {{end}}

templates/partials/navigation/action-buttons.html

@@ -3,7 +3,7 @@
 <div class="action-buttons-right">
     <button
         class="action-btn pdf-btn"
-        onclick="openPdfModal()"
+        onclick="document.getElementById('pdf-modal').showModal()"
         aria-label="{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}">
         <iconify-icon icon="mdi:download" width="18" height="18"></iconify-icon>
         {{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}

templates/partials/navigation/hamburger-menu.html

@@ -148,7 +148,7 @@
                 <span>{{if eq .Lang "es"}}Acciones{{else}}Actions{{end}}</span>
             </div>
 
-            <button class="menu-action-btn" onclick="openPdfModal()">
+            <button class="menu-action-btn" onclick="document.getElementById('pdf-modal').showModal()">
                 <iconify-icon icon="mdi:download" width="20" height="20"></iconify-icon>
                 <span>{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}</span>
             </button>

templates/partials/widgets/info-button.html

@@ -1,6 +1,6 @@
 {{define "info-button"}}
 <!-- Info Button (Bottom Left) -->
-<button id="info-button" class="info-button no-print" aria-label="{{if eq .Lang "es"}}Información{{else}}Information{{end}}" onclick="openInfoModal()">
+<button id="info-button" class="info-button no-print" aria-label="{{if eq .Lang "es"}}Información{{else}}Information{{end}}" onclick="document.getElementById('info-modal').showModal()">
     <iconify-icon icon="mdi:information-outline" width="24" height="24"></iconify-icon>
 </button>
 {{end}}