fix: version 2.4.0 -- menu lateral como drawer en celular

En pantallas angostas (<=768px) el sidebar arranca oculto y se abre
como panel superpuesto desde el boton de hamburguesa, con fondo
oscuro detras y cierre automatico al navegar o tocar afuera. El
escritorio no se toca: sigue igual que siempre.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/app/AppShell.jsx

@@ -16,8 +16,11 @@ import { getUpdateStatus } from '../services/updater.js';
 
 const EMPTY_PASSWORD_FORM = { currentPassword: '', newPassword: '', confirmPassword: '' };
 
+const MOBILE_BREAKPOINT = 768;
+
 export default function AppShell() {
   const [navMode, setNavMode] = useState('expanded');
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
   const { user, logout } = useAuth();
   const { t, theme, setTheme, lang, setLang, pushToast, openDialog } = useUi();
   const navigate = useNavigate();
@@ -54,8 +57,19 @@ export default function AppShell() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // En celular el boton de hamburguesa abre/cierra el drawer superpuesto (mobileNavOpen); en
+  // escritorio, sigue alternando el riel expandido/compacto de siempre -- son dos estados
+  // independientes para no tocar el comportamiento de escritorio ya existente.
   function toggleNav() {
-    setNavMode((m) => (m === 'expanded' ? 'compact' : 'expanded'));
+    if (window.innerWidth <= MOBILE_BREAKPOINT) {
+      setMobileNavOpen((v) => !v);
+    } else {
+      setNavMode((m) => (m === 'expanded' ? 'compact' : 'expanded'));
+    }
+  }
+
+  function closeMobileNav() {
+    setMobileNavOpen(false);
   }
 
   async function handleNotificationClick(notification) {
@@ -92,7 +106,8 @@ export default function AppShell() {
 
   return (
     <div className="app-shell">
-      <NavigationView mode={navMode} />
+      <NavigationView mode={navMode} mobileOpen={mobileNavOpen} onNavigate={closeMobileNav} />
+      <div className={`nav-backdrop ${mobileNavOpen ? 'visible' : ''}`} onClick={closeMobileNav} />
       <div className="content-column">
         <div className="topbar">
           <div className="topbar-left">