From ac3434454bfe711012ad4eb6ab1c669b148b824a Mon Sep 17 00:00:00 2001
From: Nurfog <juan.allende@gmail.com>
Date: Thu, 9 Apr 2026 09:54:38 -0400
Subject: [PATCH] fix(ui): mobile nav menus, light-mode contrast for Combobox,
 AppHeader and globals

- Studio Navbar: add hamburger button + slide-out sidebar for mobile
- Studio Combobox: replace dark-hardcoded colors with light/dark variants
- Experience AppHeader: fix low-contrast borders/text/icons in light mode;
  mobile sidebar now uses bg-white/bg-gray-900 instead of glass-only
- Experience globals.css: glass-card hover visible in light mode;
  scrollbar thumb visible in light mode (rgba black instead of white)
---
 web/experience/src/app/globals.css          |  12 +-
 web/experience/src/components/AppHeader.tsx |  60 ++++-----
 web/studio/src/components/Combobox.tsx      |  20 +--
 web/studio/src/components/Navbar.tsx        | 139 +++++++++++++++++++-
 4 files changed, 187 insertions(+), 44 deletions(-)

diff --git a/web/experience/src/app/globals.css b/web/experience/src/app/globals.css
index 6a7e437..5a0834f 100644
--- a/web/experience/src/app/globals.css
+++ b/web/experience/src/app/globals.css
@@ -60,7 +60,7 @@ body {
 }
 
 .glass-card:hover {
-  @apply border-white/20 bg-white/5;
+  @apply border-black/10 dark:border-white/20 bg-black/5 dark:bg-white/5;
 }
 
 .gradient-text {
@@ -106,10 +106,18 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.12);
   border-radius: 10px;
 }
 
+.dark ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+}
+
 ::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.22);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.2);
 }
\ No newline at end of file
diff --git a/web/experience/src/components/AppHeader.tsx b/web/experience/src/components/AppHeader.tsx
index 7972049..e00dc79 100644
--- a/web/experience/src/components/AppHeader.tsx
+++ b/web/experience/src/components/AppHeader.tsx
@@ -23,7 +23,7 @@ export default function AppHeader() {
     const platformName = branding?.platform_name || branding?.name || 'Academia';
 
     return (
-        <header className="h-16 glass sticky top-0 z-[100] px-4 md:px-6 flex items-center justify-between backdrop-blur-xl bg-gray-50/70 dark:bg-black/40 border-b border-black/5 dark:border-white/5">
+        <header className="h-16 glass sticky top-0 z-[100] px-4 md:px-6 flex items-center justify-between backdrop-blur-xl bg-gray-50/80 dark:bg-black/40 border-b border-black/8 dark:border-white/5">
             <Link href="/" className="flex items-center gap-2 md:gap-5 group" aria-label={`${platformName} - Dashboard`}>
                 <div className={`rounded-lg md:rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-all overflow-hidden relative border border-white/5 ${branding?.logo_variant === 'wide' ? 'w-36 h-9 md:w-56 md:h-12 px-2 bg-white' : 'w-8 h-8 md:w-12 md:h-12'}`}>
                     {branding?.logo_url ? (
@@ -46,13 +46,13 @@ export default function AppHeader() {
 
             <div className="flex items-center gap-4">
                 <nav className="hidden md:flex items-center gap-8 mr-4" aria-label="Navegación principal">
-                    <Link href="/" className="flex items-center gap-2 text-base font-black uppercase tracking-wider transition-colors text-slate-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white">
+                    <Link href="/" className="flex items-center gap-2 text-base font-black uppercase tracking-wider transition-colors text-slate-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white">
                         {t('nav.catalog')}
                     </Link>
-                    <Link href="/my-learning" className="flex items-center gap-2 text-base font-black uppercase tracking-wider transition-colors text-slate-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white">
+                    <Link href="/my-learning" className="flex items-center gap-2 text-base font-black uppercase tracking-wider transition-colors text-slate-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white">
                         {t('nav.myLearning')}
                     </Link>
-                    <Link href="/bookmarks" className="flex items-center gap-2 text-base font-black uppercase tracking-wider transition-colors text-slate-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white">
+                    <Link href="/bookmarks" className="flex items-center gap-2 text-base font-black uppercase tracking-wider transition-colors text-slate-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white">
                         {t('nav.bookmarks')}
                     </Link>
 
@@ -66,14 +66,14 @@ export default function AppHeader() {
                 <div className="flex items-center gap-2 md:gap-4">
                     <NotificationCenter />
 
-                    <div className="hidden sm:flex items-center gap-2 border-l border-white/10 pl-4">
+                    <div className="hidden sm:flex items-center gap-2 border-l border-black/10 dark:border-white/10 pl-4">
                         <Globe size={14} className="text-gray-500" aria-hidden="true" />
                         <select
                             id="language-selector"
                             value={language}
                             onChange={(e) => setLanguage(e.target.value)}
                             aria-label={t('nav.selectLanguage') || 'Select Language'}
-                            className="bg-transparent text-[10px] font-black uppercase tracking-widest text-gray-500 hover:text-white transition-colors focus:outline-none cursor-pointer"
+                            className="bg-transparent text-[10px] font-black uppercase tracking-widest text-gray-600 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors focus:outline-none cursor-pointer"
                         >
                             <option value="en" className="bg-white dark:bg-[#0f1115]">EN</option>
                             <option value="es" className="bg-white dark:bg-[#0f1115]">ES</option>
@@ -83,21 +83,21 @@ export default function AppHeader() {
 
                     <button
                         onClick={toggleTheme}
-                        className="p-2 hover:bg-white/5 rounded-lg text-gray-400 hover:text-white transition-all border-l border-white/10 pl-4"
+                        className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-all border-l border-black/10 dark:border-white/10 pl-4"
                         title={theme === 'dark' ? 'Modo Claro' : 'Modo Oscuro'}
                     >
                         {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
                     </button>
 
-                    <div className="hidden md:flex items-center gap-4 pl-4 border-l border-white/10">
+                    <div className="hidden md:flex items-center gap-4 pl-4 border-l border-black/10 dark:border-white/10">
                         <Link href="/profile" className="flex items-center gap-2 group/profile">
-                            <div className="w-8 h-8 rounded-full bg-white/5 border border-white/10 flex items-center justify-center font-bold text-xs text-blue-400 group-hover/profile:border-blue-500/50 transition-colors">
+                            <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-white/5 border border-gray-300 dark:border-white/10 flex items-center justify-center font-bold text-xs text-blue-600 dark:text-blue-400 group-hover/profile:border-blue-500/50 transition-colors">
                                 {user?.full_name?.charAt(0) || 'U'}
                             </div>
                         </Link>
                         <button
                             onClick={logout}
-                            className="p-2 hover:bg-red-500/10 rounded-full text-gray-400 hover:text-red-400 transition-colors"
+                            className="p-2 hover:bg-red-500/10 rounded-full text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
                             title={t('nav.signOut')}
                             aria-label={t('nav.signOut')}
                         >
@@ -120,46 +120,46 @@ export default function AppHeader() {
             {/* Mobile Sidebar Overlay */}
             {isMenuOpen && (
                 <div
-                    className="fixed inset-0 z-[150] md:hidden bg-black/60 backdrop-blur-sm animate-in fade-in duration-300"
+                    className="fixed inset-0 z-[150] md:hidden bg-black/50 backdrop-blur-sm animate-in fade-in duration-300"
                     onClick={() => setIsMenuOpen(false)}
                 >
                     <div
-                        className="absolute right-0 top-0 bottom-0 w-64 glass border-l border-white/10 p-6 flex flex-col animate-in slide-in-from-right duration-300"
+                        className="absolute right-0 top-0 bottom-0 w-72 bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-white/10 p-6 flex flex-col animate-in slide-in-from-right duration-300 shadow-2xl"
                         role="dialog"
                         aria-modal="true"
                         aria-label="Menú móvil"
                         onClick={(e) => e.stopPropagation()}
                     >
                         <div className="flex justify-between items-center mb-8">
-                            <span className="font-black text-xs uppercase tracking-[0.2em] text-gray-500">Menú</span>
+                            <span className="font-black text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400">Menú</span>
                             <button
                                 onClick={() => setIsMenuOpen(false)}
-                                className="p-2 hover:bg-white/5 rounded-lg"
-                                aria-label="Close menu"
+                                className="p-2 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg text-gray-500 dark:text-gray-400 transition-colors"
+                                aria-label="Cerrar menú"
                             >
                                 <X size={20} />
                             </button>
                         </div>
 
-                        <nav className="flex flex-col gap-6 flex-1" aria-label="Mobile navigation">
+                        <nav className="flex flex-col gap-2 flex-1" aria-label="Mobile navigation">
                             <Link
                                 href="/"
                                 onClick={() => setIsMenuOpen(false)}
-                                className="text-sm font-black uppercase tracking-widest text-gray-300 hover:text-white border-l-2 border-transparent hover:border-blue-500 pl-4 transition-all"
+                                className="text-sm font-black uppercase tracking-widest text-slate-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-white border-l-2 border-transparent hover:border-blue-500 pl-4 py-2 transition-all"
                             >
                                 {t('nav.catalog')}
                             </Link>
                             <Link
                                 href="/my-learning"
                                 onClick={() => setIsMenuOpen(false)}
-                                className="text-sm font-black uppercase tracking-widest text-gray-300 hover:text-white border-l-2 border-transparent hover:border-blue-500 pl-4 transition-all"
+                                className="text-sm font-black uppercase tracking-widest text-slate-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-white border-l-2 border-transparent hover:border-blue-500 pl-4 py-2 transition-all"
                             >
                                 {t('nav.myLearning')}
                             </Link>
                             <Link
                                 href="/bookmarks"
                                 onClick={() => setIsMenuOpen(false)}
-                                className="text-sm font-black uppercase tracking-widest text-gray-300 hover:text-white border-l-2 border-transparent hover:border-blue-500 pl-4 transition-all"
+                                className="text-sm font-black uppercase tracking-widest text-slate-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-white border-l-2 border-transparent hover:border-blue-500 pl-4 py-2 transition-all"
                             >
                                 {t('nav.bookmarks')}
                             </Link>
@@ -167,22 +167,22 @@ export default function AppHeader() {
                                 <Link
                                     href={`/profile/${user.id}`}
                                     onClick={() => setIsMenuOpen(false)}
-                                    className="text-sm font-black uppercase tracking-widest text-blue-400 hover:text-blue-300 border-l-2 border-transparent hover:border-blue-500 pl-4 transition-all"
+                                    className="text-sm font-black uppercase tracking-widest text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 border-l-2 border-transparent hover:border-blue-500 pl-4 py-2 transition-all"
                                 >
                                     MI PORTAFOLIO
                                 </Link>
                             )}
 
-                            <div className="pt-6 mt-6 border-t border-white/5 space-y-4">
-                                <div className="flex items-center justify-between px-4 py-2 rounded-xl bg-white/5">
+                            <div className="pt-6 mt-6 border-t border-gray-100 dark:border-white/5 space-y-4">
+                                <div className="flex items-center justify-between px-4 py-2 rounded-xl bg-gray-100 dark:bg-white/5">
                                     <div className="flex items-center gap-3">
-                                        <Globe size={16} className="text-gray-500" aria-hidden="true" />
+                                        <Globe size={16} className="text-gray-400" aria-hidden="true" />
                                         <select
                                             id="mobile-language-selector"
                                             value={language}
                                             onChange={(e) => setLanguage(e.target.value)}
                                             aria-label={t('nav.selectLanguage') || 'Select Language'}
-                                            className="bg-transparent text-xs font-bold uppercase tracking-widest text-gray-300 focus:outline-none"
+                                            className="bg-transparent text-xs font-bold uppercase tracking-widest text-gray-700 dark:text-gray-300 focus:outline-none"
                                         >
                                             <option value="en" className="bg-white dark:bg-[#0f1115]">English</option>
                                             <option value="es" className="bg-white dark:bg-[#0f1115]">Español</option>
@@ -191,7 +191,7 @@ export default function AppHeader() {
                                     </div>
                                     <button
                                         onClick={toggleTheme}
-                                        className="p-2 hover:bg-white/10 rounded-lg text-gray-400 transition-colors"
+                                        className="p-2 hover:bg-gray-200 dark:hover:bg-white/10 rounded-lg text-gray-500 dark:text-gray-400 transition-colors"
                                     >
                                         {theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
                                     </button>
@@ -199,20 +199,20 @@ export default function AppHeader() {
                             </div>
                         </nav>
 
-                        <div className="pt-6 border-t border-white/5 space-y-4">
+                        <div className="pt-6 border-t border-gray-100 dark:border-white/5 space-y-2">
                             <Link
                                 href="/profile"
                                 onClick={() => setIsMenuOpen(false)}
-                                className="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/5 transition-colors"
+                                className="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-gray-100 dark:hover:bg-white/5 transition-colors"
                             >
-                                <div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center font-bold text-xs text-blue-400" aria-hidden="true">
+                                <div className="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-500/20 flex items-center justify-center font-bold text-xs text-blue-600 dark:text-blue-400" aria-hidden="true">
                                     {user?.full_name?.charAt(0) || 'U'}
                                 </div>
-                                <span className="text-sm font-bold">{user?.full_name || 'Mi Perfil'}</span>
+                                <span className="text-sm font-bold text-gray-800 dark:text-white">{user?.full_name || 'Mi Perfil'}</span>
                             </Link>
                             <button
                                 onClick={logout}
-                                className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-red-400 hover:bg-red-500/10 transition-colors"
+                                className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
                             >
                                 <LogOut size={18} aria-hidden="true" />
                                 <span className="text-sm font-bold">{t('nav.signOut')}</span>
diff --git a/web/studio/src/components/Combobox.tsx b/web/studio/src/components/Combobox.tsx
index 512f754..0716b8a 100644
--- a/web/studio/src/components/Combobox.tsx
+++ b/web/studio/src/components/Combobox.tsx
@@ -45,17 +45,17 @@ export default function Combobox({ options, value, onChange, placeholder = "Sear
                 onClick={() => setIsOpen(!isOpen)}
                 aria-haspopup="listbox"
                 aria-expanded={isOpen}
-                className="flex items-center justify-between w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 cursor-pointer hover:border-white/20 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500/50"
+                className="flex items-center justify-between w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/10 rounded-lg px-4 py-2.5 cursor-pointer hover:border-gray-400 dark:hover:border-white/20 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500/50"
             >
-                <span className={selectedOption ? "text-white" : "text-gray-500"}>
+                <span className={selectedOption ? "text-gray-900 dark:text-white" : "text-gray-400 dark:text-gray-500"}>
                     {selectedOption ? selectedOption.name : placeholder}
                 </span>
-                <ChevronDown size={18} className={`text-gray-500 transition-transform ${isOpen ? "rotate-180" : ""}`} aria-hidden="true" />
+                <ChevronDown size={18} className={`text-gray-400 dark:text-gray-500 transition-transform ${isOpen ? "rotate-180" : ""}`} aria-hidden="true" />
             </button>
 
             {isOpen && (
-                <div className="absolute top-full left-0 right-0 mt-2 z-[110] bg-[#1a1d23] border border-white/10 rounded-lg shadow-2xl overflow-hidden glass-card animate-in fade-in slide-in-from-top-2 duration-200">
-                    <div className="p-2 border-b border-white/5 bg-white/5">
+                <div className="absolute top-full left-0 right-0 mt-2 z-[110] bg-white dark:bg-[#1a1d23] border border-gray-200 dark:border-white/10 rounded-lg shadow-2xl overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200">
+                    <div className="p-2 border-b border-gray-100 dark:border-white/5 bg-gray-50 dark:bg-white/5">
                         <div className="relative">
                             <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" aria-hidden="true" />
                             <input
@@ -65,8 +65,8 @@ export default function Combobox({ options, value, onChange, placeholder = "Sear
                                 aria-autocomplete="list"
                                 aria-expanded="true"
                                 aria-controls="combobox-options"
-                                className="w-full bg-black/20 border-none rounded-md pl-9 pr-4 py-2 text-sm focus:ring-0 placeholder:text-gray-600"
-                                placeholder="Search..."
+                                className="w-full bg-white dark:bg-black/20 border border-gray-200 dark:border-transparent rounded-md pl-9 pr-4 py-2 text-sm text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500/50"
+                                placeholder="Buscar..."
                                 value={search}
                                 onChange={(e) => setSearch(e.target.value)}
                             />
@@ -78,7 +78,7 @@ export default function Combobox({ options, value, onChange, placeholder = "Sear
                         className="max-h-60 overflow-y-auto p-1 custom-scrollbar"
                     >
                         {filteredOptions.length === 0 ? (
-                            <div className="px-4 py-3 text-sm text-gray-500 text-center" role="option" aria-disabled="true">No results found</div>
+                            <div className="px-4 py-3 text-sm text-gray-500 dark:text-gray-500 text-center" role="option" aria-disabled="true">Sin resultados</div>
                         ) : (
                             filteredOptions.map(option => (
                                 <div
@@ -98,7 +98,9 @@ export default function Combobox({ options, value, onChange, placeholder = "Sear
                                             setSearch("");
                                         }
                                     }}
-                                    className={`flex items-center justify-between px-3 py-2 rounded-md cursor-pointer transition-colors outline-none focus:bg-blue-600 focus:text-white ${value === option.id ? "bg-blue-600 text-white" : "hover:bg-white/5 text-gray-300"
+                                    className={`flex items-center justify-between px-3 py-2 rounded-md cursor-pointer transition-colors outline-none focus:bg-blue-600 focus:text-white ${value === option.id
+                                        ? "bg-blue-600 text-white"
+                                        : "hover:bg-gray-100 dark:hover:bg-white/5 text-gray-700 dark:text-gray-300"
                                         }`}
                                 >
                                     <span className="text-sm font-medium">{option.name}</span>
diff --git a/web/studio/src/components/Navbar.tsx b/web/studio/src/components/Navbar.tsx
index 6fdc5ec..c87f343 100644
--- a/web/studio/src/components/Navbar.tsx
+++ b/web/studio/src/components/Navbar.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { useState } from 'react';
 import { useAuth } from '@/context/AuthContext';
 import { useTranslation } from '@/context/I18nContext';
-import { LayoutDashboard, ShieldCheck, LogOut, Settings, Globe, Library, BookOpen, Sun, Moon, ChevronDown, FileQuestion, Webhook, User } from 'lucide-react';
+import { LayoutDashboard, ShieldCheck, LogOut, Settings, Globe, Library, BookOpen, Sun, Moon, ChevronDown, FileQuestion, Webhook, User, Menu, X } from 'lucide-react';
 import { useBranding } from '@/context/BrandingContext';
 import { useTheme } from '@/context/ThemeContext';
 import { getImageUrl } from '@/lib/api';
@@ -19,6 +19,10 @@ const NAV_LINK_ADMIN = "flex items-center gap-2 text-sm font-bold uppercase trac
 // Dropdown menu item
 const DROPDOWN_ITEM = "flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors";
 
+// Mobile sidebar link
+const MOBILE_LINK = "flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-bold uppercase tracking-wide transition-colors text-slate-700 dark:text-gray-300 hover:bg-black/5 dark:hover:bg-white/5 hover:text-blue-600 dark:hover:text-blue-400";
+const MOBILE_LINK_ADMIN = "flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-bold uppercase tracking-wide transition-colors text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-500/10";
+
 export function Navbar() {
     const { t, language, setLanguage } = useTranslation();
     const { user, logout } = useAuth();
@@ -27,6 +31,7 @@ export function Navbar() {
     
     const [coursesOpen, setCoursesOpen] = useState(false);
     const [settingsOpen, setSettingsOpen] = useState(false);
+    const [mobileOpen, setMobileOpen] = useState(false);
 
     const platformName = branding?.platform_name || branding?.name || 'Studio';
 
@@ -55,8 +60,8 @@ export function Navbar() {
                     )}
                 </Link>
 
-                {/* Primary Navigation */}
-                <div className="flex items-center gap-6">
+                {/* Desktop Navigation */}
+                <div className="hidden md:flex items-center gap-6">
                     <div className="flex items-center gap-5">
 
                         {/* Cursos Dropdown */}
@@ -242,7 +247,135 @@ export function Navbar() {
                         </Link>
                     )}
                 </div>
+
+                {/* Mobile: Hamburger button */}
+                <button
+                    onClick={() => setMobileOpen(true)}
+                    className="md:hidden p-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 text-slate-600 dark:text-gray-400 transition-colors"
+                    aria-label="Abrir menú"
+                    aria-expanded={mobileOpen}
+                >
+                    <Menu className="w-5 h-5" />
+                </button>
             </div>
+
+            {/* Mobile Sidebar Overlay */}
+            {mobileOpen && (
+                <div
+                    className="fixed inset-0 z-[150] md:hidden bg-black/50 backdrop-blur-sm animate-in fade-in duration-200"
+                    onClick={() => setMobileOpen(false)}
+                >
+                    <div
+                        className="absolute right-0 top-0 bottom-0 w-72 bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-white/10 flex flex-col animate-in slide-in-from-right duration-300 shadow-2xl"
+                        role="dialog"
+                        aria-modal="true"
+                        aria-label="Menú de navegación"
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        {/* Header */}
+                        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100 dark:border-white/10">
+                            <span className="font-black text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400">Menú</span>
+                            <button
+                                onClick={() => setMobileOpen(false)}
+                                className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 text-gray-500 dark:text-gray-400 transition-colors"
+                                aria-label="Cerrar menú"
+                            >
+                                <X className="w-5 h-5" />
+                            </button>
+                        </div>
+
+                        {/* Nav links */}
+                        <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1">
+                            <p className="px-4 pt-2 pb-1 text-[10px] font-black uppercase tracking-[0.15em] text-gray-400 dark:text-gray-600">Cursos</p>
+                            <Link href="/" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
+                                <LayoutDashboard className="w-4 h-4 shrink-0" /> Listar Cursos
+                            </Link>
+                            <Link href="/library/assets" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
+                                <Library className="w-4 h-4 shrink-0" /> Librería
+                            </Link>
+                            <Link href="/question-bank" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
+                                <FileQuestion className="w-4 h-4 shrink-0" /> Banco de Preguntas
+                            </Link>
+                            <Link href="/test-templates" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
+                                <FileQuestion className="w-4 h-4 shrink-0" /> Plantillas de Pruebas
+                            </Link>
+                            <Link href="/course-templates" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
+                                <BookOpen className="w-4 h-4 shrink-0" /> Plantillas de Curso
+                            </Link>
+
+                            {user?.role === 'admin' && (
+                                <>
+                                    <div className="my-2 border-t border-gray-100 dark:border-white/10" />
+                                    <p className="px-4 pt-2 pb-1 text-[10px] font-black uppercase tracking-[0.15em] text-gray-400 dark:text-gray-600">Administración</p>
+                                    {user.organization_id === '00000000-0000-0000-0000-000000000001' && (
+                                        <Link href="/admin" className={MOBILE_LINK_ADMIN} onClick={() => setMobileOpen(false)}>
+                                            <ShieldCheck className="w-4 h-4 shrink-0" /> Control Global
+                                        </Link>
+                                    )}
+                                    <Link href="/settings/webhooks" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
+                                        <Webhook className="w-4 h-4 shrink-0" /> Webhooks
+                                    </Link>
+                                    <Link href="/settings" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
+                                        <Settings className="w-4 h-4 shrink-0" /> Configuración
+                                    </Link>
+                                </>
+                            )}
+                            {user?.role !== 'admin' && (
+                                <>
+                                    <div className="my-2 border-t border-gray-100 dark:border-white/10" />
+                                    <Link href="/settings" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
+                                        <Settings className="w-4 h-4 shrink-0" /> Configuración
+                                    </Link>
+                                </>
+                            )}
+                            <Link href="/profile" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
+                                <User className="w-4 h-4 shrink-0" /> Perfil
+                            </Link>
+                        </nav>
+
+                        {/* Footer */}
+                        <div className="px-5 py-4 border-t border-gray-100 dark:border-white/10 space-y-3">
+                            {user && (
+                                <div className="flex items-center justify-between">
+                                    <div>
+                                        <p className="text-sm font-bold text-gray-900 dark:text-white leading-tight">{user.full_name}</p>
+                                        <p className="text-xs uppercase tracking-widest font-bold text-gray-400 dark:text-gray-500">{user.role}</p>
+                                    </div>
+                                    <button
+                                        onClick={() => { logout(); setMobileOpen(false); }}
+                                        className="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-500/10 text-gray-400 hover:text-red-500 transition-colors"
+                                        aria-label={t('nav.signOut') || 'Cerrar sesión'}
+                                    >
+                                        <LogOut className="w-4 h-4" />
+                                    </button>
+                                </div>
+                            )}
+                            <div className="flex items-center justify-between">
+                                <button
+                                    onClick={toggleTheme}
+                                    className="flex items-center gap-2 text-sm font-bold text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
+                                >
+                                    {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+                                    {theme === 'dark' ? 'Modo Claro' : 'Modo Oscuro'}
+                                </button>
+                                <div className="flex items-center gap-1.5 text-gray-500">
+                                    <Globe className="w-3.5 h-3.5" />
+                                    <select
+                                        value={language}
+                                        onChange={(e) => setLanguage(e.target.value)}
+                                        aria-label="Idioma"
+                                        className="bg-transparent text-xs font-bold uppercase tracking-widest focus:outline-none cursor-pointer"
+                                    >
+                                        <option value="en" className="bg-white dark:bg-gray-900">EN</option>
+                                        <option value="es" className="bg-white dark:bg-gray-900">ES</option>
+                                        <option value="pt" className="bg-white dark:bg-gray-900">PT</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
         </nav>
     );
 }