✅ Mejoras de Responsividad Móvil (v1.0.86)

Sidebar
✅ Oculto por defecto en móvil (window.innerWidth < 1024px)
✅ Overlay oscuro cuando está abierto en móvil (se cierra al tocar fuera)
✅ Deslizable desde la izquierda con transiciones suaves
✅ Siempre visible en desktop (lg: breakpoint)
Header
✅ Botón hamburguesa visible solo en móvil (lg:hidden)
✅ Logo escalable: 50px en móvil → 70px en desktop
✅ Título oculto en móvil para ahorrar espacio
✅ Indicador de sección: icono solo en móvil, texto completo en desktop
✅ Padding adaptable: 3px móvil → 4px tablet → 8px desktop
Contenido Principal
✅ Sin margin-left en móvil (el sidebar es overlay)
✅ Padding responsive: 3px → 4px → 6px según tamaño
✅ Border-radius adaptable: xl en móvil → 2xl en desktop
Modal de Inspección
✅ Ancho completo en móvil con padding mínimo (2px)
✅ Título responsive: lg (móvil) → xl (tablet) → 2xl (desktop)
✅ Altura máxima: 95vh móvil → 90vh desktop
Navegador de Preguntas
✅ Botones más pequeños en móvil: 7px/8px círculos
✅ Overflow horizontal con scroll para muchas preguntas
✅ Números responsive: texto sm en móvil → lg en desktop
✅ Gaps reducidos: 1px móvil → 2px desktop
Botones de Navegación
✅ Solo flechas en móvil (← →)
✅ Texto completo en desktop ("← Anterior", "Siguiente →")
✅ Padding y texto adaptables: text-sm móvil → text-base desktop
✅ Mejor uso del espacio horizontal
Formularios
✅ Espaciado adaptive: space-y-3 móvil → space-y-6 desktop
✅ Labels y texto responsive: xs → sm → base
✅ Banner de modo IA con wrap en móvil
La interfaz ahora es completamente funcional en móviles sin scroll horizontal, con todos los elementos accesibles y legibles! 📱✨

frontend/src/Sidebar.jsx

@@ -1,6 +1,20 @@
 export default function Sidebar({ user, activeTab, setActiveTab, sidebarOpen, setSidebarOpen, onLogout }) {
   return (
-    <aside className={`bg-gradient-to-b from-gray-900 via-indigo-950 to-purple-950 text-white transition-all duration-300 ${sidebarOpen ? 'w-64' : 'w-16'} flex flex-col fixed h-full z-10 shadow-2xl`}>
+    <>
+      {/* Overlay para cerrar sidebar en móvil */}
+      {sidebarOpen && (
+        <div 
+          className="fixed inset-0 bg-black/50 z-20 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+      
+      {/* Sidebar */}
+      <aside className={`bg-gradient-to-b from-gray-900 via-indigo-950 to-purple-950 text-white transition-all duration-300 flex flex-col fixed h-full shadow-2xl
+        ${sidebarOpen ? 'w-64' : 'w-16'}
+        ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
+        z-30 lg:z-10
+      `}>
       {/* Sidebar Header */}
       <div className={`p-4 flex items-center ${sidebarOpen ? 'justify-between' : 'justify-center'} border-b border-indigo-800/50`}>
         {sidebarOpen && (
@@ -13,7 +27,7 @@ export default function Sidebar({ user, activeTab, setActiveTab, sidebarOpen, se
         )}
         <button
           onClick={() => setSidebarOpen(!sidebarOpen)}
-          className="p-2 rounded-lg hover:bg-indigo-800/50 transition"
+          className="p-2 rounded-lg hover:bg-indigo-800/50 transition lg:block"
           title={sidebarOpen ? 'Ocultar sidebar' : 'Mostrar sidebar'}
         >
           {sidebarOpen ? '☰' : '☰'}
@@ -150,5 +164,6 @@ export default function Sidebar({ user, activeTab, setActiveTab, sidebarOpen, se
         </button>
       </div>
     </aside>
+    </>
   )
 }