up

assets/css/styles.css

@@ -140,6 +140,53 @@ body {
     transition: margin-left 0.3s ease;
 }
 
+/* Responsive behavior: collapse sidebar on small screens */
+@media (max-width: 991.98px) {
+    .sidebar {
+        transform: translateX(-100%);
+        width: 220px;
+        left: 0;
+        transition: transform 0.25s ease;
+        box-shadow: none;
+    }
+
+    .sidebar.open {
+        transform: translateX(0);
+        box-shadow: 2px 0 20px rgba(0,0,0,0.2);
+        z-index: 1200;
+    }
+
+    .main-content {
+        margin-left: 0;
+    }
+
+    /* Overlay used to block background when sidebar open */
+    .sidebar-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0,0.35);
+        z-index: 1100;
+        display: none;
+    }
+
+    /* Make header actions wrap to avoid overflow */
+    .content-header {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .header-actions {
+        margin-top: 8px;
+    }
+}
+
+/* Desktop: ensure sidebar visible */
+@media (min-width: 992px) {
+    .sidebar { transform: translateX(0); }
+}
 .content-header {
     background: white;
     padding: 20px 30px;

index.php

@@ -84,6 +84,10 @@ try {
                 </small>
             </div>
             <div class="header-actions">
+                <!-- Sidebar toggle (visible en pantallas pequeñas) -->
+                <button id="sidebar-toggle" class="btn btn-light d-md-none me-2" title="Abrir menú">
+                    <i class="fas fa-bars"></i>
+                </button>
                 <div class="status-badge">
                     <span class="status-dot status-online"></span>
                     <span class="status-text">En línea</span>
@@ -1133,6 +1137,56 @@ try {
 
         document.addEventListener('DOMContentLoaded', () => {
             try { NotificationManager.init(); } catch(e) { console.error('NotificationManager init failed', e); }
+
+            // Sidebar toggle logic for responsive/mobile
+            const sidebar = document.querySelector('.sidebar');
+            const toggleBtn = document.getElementById('sidebar-toggle');
+            let overlayEl = null;
+
+            function ensureOverlay() {
+                if (!overlayEl) {
+                    overlayEl = document.createElement('div');
+                    overlayEl.className = 'sidebar-overlay';
+                    document.body.appendChild(overlayEl);
+                    overlayEl.addEventListener('click', closeSidebar);
+                }
+            }
+
+            function openSidebar() {
+                if (!sidebar) return;
+                sidebar.classList.add('open');
+                document.body.classList.add('sidebar-open');
+                ensureOverlay();
+                overlayEl.style.display = 'block';
+            }
+
+            function closeSidebar() {
+                if (!sidebar) return;
+                sidebar.classList.remove('open');
+                document.body.classList.remove('sidebar-open');
+                if (overlayEl) overlayEl.style.display = 'none';
+            }
+
+            if (toggleBtn) {
+                toggleBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    if (sidebar && sidebar.classList.contains('open')) {
+                        closeSidebar();
+                    } else {
+                        openSidebar();
+                    }
+                });
+            }
+
+            // Close sidebar on Escape
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape') closeSidebar();
+            });
+
+            // Close sidebar when navigating in main content on small screens
+            document.querySelector('.main-content')?.addEventListener('click', () => {
+                if (window.innerWidth < 992) closeSidebar();
+            });
         });
     </script>
 </body>