background borrowed all page, don't just nav

app/static/css/style.css

@@ -121,6 +121,20 @@ h3 {
     visibility: visible;
 }
 
+/* Blur global cuando el menú está abierto */
+body.menu-open .navbar,
+body.menu-open .content-wrapper {
+    filter: blur(15px);
+    pointer-events: none;
+    user-select: none;
+    transition: filter 0.3s ease;
+}
+
+body.menu-open {
+    overflow: hidden;
+    /* Evitar scroll cuando el menú está abierto */
+}
+
 .nav-sidebar {
     position: fixed;
     top: 0;

app/templates/base.html

@@ -39,27 +39,6 @@
                 <i class="fas fa-bars"></i>
             </button>
 
-            <!-- Sidebar Overlay -->
-            <div class="nav-overlay" id="nav-overlay">
-                <div class="nav-sidebar glass">
-                    <button class="close-btn" id="close-btn">&times;</button>
-                    <div class="sidebar-links">
-                        <a href="/" class="nav-item"><i class="fas fa-home"></i> INICIO</a>
-                        <a href="/tutoria" class="nav-item"><i class="fas fa-book"></i> TUTORÍA</a>
-
-                        {% if current_user.is_authenticated %}
-                        <a href="/classroom" class="nav-item"><i class="fas fa-chalkboard-teacher"></i> AULAS</a>
-                        <div style="margin-top: auto; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1rem;">
-                            <a href="/logout" class="nav-item" style="color: #ef4444;"><i
-                                    class="fas fa-sign-out-alt"></i> Salir</a>
-                        </div>
-                        {% else %}
-                        <a href="/login" class="nav-item" style="color: #38bdf8;"><i class="fas fa-sign-in-alt"></i>
-                            Acceder</a>
-                        {% endif %}
-                    </div>
-                </div>
-            </div>
             <div style="display: flex; gap: 1rem; align-items: center;">
                 <!-- Botón para instalar PWA (solo aparece si es instalable) -->
                 <button id="install-btn" class="btn-icon" style="display: none;">
@@ -73,6 +52,28 @@
         </div>
     </nav>
 
+    <!-- Sidebar Overlay - Movido fuera del nav para permitir blur global -->
+    <div class="nav-overlay" id="nav-overlay">
+        <div class="nav-sidebar glass">
+            <button class="close-btn" id="close-btn">&times;</button>
+            <div class="sidebar-links">
+                <a href="/" class="nav-item"><i class="fas fa-home"></i> INICIO</a>
+                <a href="/tutoria" class="nav-item"><i class="fas fa-book"></i> TUTORÍA</a>
+
+                {% if current_user.is_authenticated %}
+                <a href="/classroom" class="nav-item"><i class="fas fa-chalkboard-teacher"></i> AULAS</a>
+                <div style="margin-top: auto; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1rem;">
+                    <a href="/logout" class="nav-item" style="color: #ef4444;"><i class="fas fa-sign-out-alt"></i>
+                        Salir</a>
+                </div>
+                {% else %}
+                <a href="/login" class="nav-item" style="color: #38bdf8;"><i class="fas fa-sign-in-alt"></i>
+                    Acceder</a>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
     <!-- Contenido Principal -->
     <main class="content-wrapper">
         <!-- Mostrar mensajes flash de Flask (Alertas de éxito/error) -->
@@ -167,6 +168,7 @@
 
         function toggleMenu() {
             navOverlay.classList.toggle('active');
+            document.body.classList.toggle('menu-open');
         }
 
         if (hamburgerBtn) hamburgerBtn.addEventListener('click', toggleMenu);