From 45ad650bac40e14fc703429acd992baafd3022a4 Mon Sep 17 00:00:00 2001
From: ronalds <ronalds@rshtech.com.py>
Date: Sun, 30 Nov 2025 22:59:38 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20Mejoras=20de=20Responsividad=20M?=
 =?UTF-8?q?=C3=B3vil=20(v1.0.86)=20Sidebar=20=E2=9C=85=20Oculto=20por=20de?=
 =?UTF-8?q?fecto=20en=20m=C3=B3vil=20(window.innerWidth=20<=201024px)=20?=
 =?UTF-8?q?=E2=9C=85=20Overlay=20oscuro=20cuando=20est=C3=A1=20abierto=20e?=
 =?UTF-8?q?n=20m=C3=B3vil=20(se=20cierra=20al=20tocar=20fuera)=20=E2=9C=85?=
 =?UTF-8?q?=20Deslizable=20desde=20la=20izquierda=20con=20transiciones=20s?=
 =?UTF-8?q?uaves=20=E2=9C=85=20Siempre=20visible=20en=20desktop=20(lg:=20b?=
 =?UTF-8?q?reakpoint)=20Header=20=E2=9C=85=20Bot=C3=B3n=20hamburguesa=20vi?=
 =?UTF-8?q?sible=20solo=20en=20m=C3=B3vil=20(lg:hidden)=20=E2=9C=85=20Logo?=
 =?UTF-8?q?=20escalable:=2050px=20en=20m=C3=B3vil=20=E2=86=92=2070px=20en?=
 =?UTF-8?q?=20desktop=20=E2=9C=85=20T=C3=ADtulo=20oculto=20en=20m=C3=B3vil?=
 =?UTF-8?q?=20para=20ahorrar=20espacio=20=E2=9C=85=20Indicador=20de=20secc?=
 =?UTF-8?q?i=C3=B3n:=20icono=20solo=20en=20m=C3=B3vil,=20texto=20completo?=
 =?UTF-8?q?=20en=20desktop=20=E2=9C=85=20Padding=20adaptable:=203px=20m?=
 =?UTF-8?q?=C3=B3vil=20=E2=86=92=204px=20tablet=20=E2=86=92=208px=20deskto?=
 =?UTF-8?q?p=20Contenido=20Principal=20=E2=9C=85=20Sin=20margin-left=20en?=
 =?UTF-8?q?=20m=C3=B3vil=20(el=20sidebar=20es=20overlay)=20=E2=9C=85=20Pad?=
 =?UTF-8?q?ding=20responsive:=203px=20=E2=86=92=204px=20=E2=86=92=206px=20?=
 =?UTF-8?q?seg=C3=BAn=20tama=C3=B1o=20=E2=9C=85=20Border-radius=20adaptabl?=
 =?UTF-8?q?e:=20xl=20en=20m=C3=B3vil=20=E2=86=92=202xl=20en=20desktop=20Mo?=
 =?UTF-8?q?dal=20de=20Inspecci=C3=B3n=20=E2=9C=85=20Ancho=20completo=20en?=
 =?UTF-8?q?=20m=C3=B3vil=20con=20padding=20m=C3=ADnimo=20(2px)=20=E2=9C=85?=
 =?UTF-8?q?=20T=C3=ADtulo=20responsive:=20lg=20(m=C3=B3vil)=20=E2=86=92=20?=
 =?UTF-8?q?xl=20(tablet)=20=E2=86=92=202xl=20(desktop)=20=E2=9C=85=20Altur?=
 =?UTF-8?q?a=20m=C3=A1xima:=2095vh=20m=C3=B3vil=20=E2=86=92=2090vh=20deskt?=
 =?UTF-8?q?op=20Navegador=20de=20Preguntas=20=E2=9C=85=20Botones=20m=C3=A1?=
 =?UTF-8?q?s=20peque=C3=B1os=20en=20m=C3=B3vil:=207px/8px=20c=C3=ADrculos?=
 =?UTF-8?q?=20=E2=9C=85=20Overflow=20horizontal=20con=20scroll=20para=20mu?=
 =?UTF-8?q?chas=20preguntas=20=E2=9C=85=20N=C3=BAmeros=20responsive:=20tex?=
 =?UTF-8?q?to=20sm=20en=20m=C3=B3vil=20=E2=86=92=20lg=20en=20desktop=20?=
 =?UTF-8?q?=E2=9C=85=20Gaps=20reducidos:=201px=20m=C3=B3vil=20=E2=86=92=20?=
 =?UTF-8?q?2px=20desktop=20Botones=20de=20Navegaci=C3=B3n=20=E2=9C=85=20So?=
 =?UTF-8?q?lo=20flechas=20en=20m=C3=B3vil=20(=E2=86=90=20=E2=86=92)=20?=
 =?UTF-8?q?=E2=9C=85=20Texto=20completo=20en=20desktop=20("=E2=86=90=20Ant?=
 =?UTF-8?q?erior",=20"Siguiente=20=E2=86=92")=20=E2=9C=85=20Padding=20y=20?=
 =?UTF-8?q?texto=20adaptables:=20text-sm=20m=C3=B3vil=20=E2=86=92=20text-b?=
 =?UTF-8?q?ase=20desktop=20=E2=9C=85=20Mejor=20uso=20del=20espacio=20horiz?=
 =?UTF-8?q?ontal=20Formularios=20=E2=9C=85=20Espaciado=20adaptive:=20space?=
 =?UTF-8?q?-y-3=20m=C3=B3vil=20=E2=86=92=20space-y-6=20desktop=20=E2=9C=85?=
 =?UTF-8?q?=20Labels=20y=20texto=20responsive:=20xs=20=E2=86=92=20sm=20?=
 =?UTF-8?q?=E2=86=92=20base=20=E2=9C=85=20Banner=20de=20modo=20IA=20con=20?=
 =?UTF-8?q?wrap=20en=20m=C3=B3vil=20La=20interfaz=20ahora=20es=20completam?=
 =?UTF-8?q?ente=20funcional=20en=20m=C3=B3viles=20sin=20scroll=20horizonta?=
 =?UTF-8?q?l,=20con=20todos=20los=20elementos=20accesibles=20y=20legibles!?=
 =?UTF-8?q?=20=F0=9F=93=B1=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json    |   2 +-
 frontend/src/App.jsx     | 111 +++++++++++++++++++++++----------------
 frontend/src/Sidebar.jsx |  19 ++++++-
 3 files changed, 85 insertions(+), 47 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index fea65ec..b3631f7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "checklist-frontend",
   "private": true,
-  "version": "1.0.85",
+  "version": "1.0.86",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 960484f..b87d18c 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -178,7 +178,8 @@ function DashboardPage({ user, setUser }) {
   const [loading, setLoading] = useState(true)
   const [activeTab, setActiveTab] = useState('checklists')
   const [activeInspection, setActiveInspection] = useState(null)
-  const [sidebarOpen, setSidebarOpen] = useState(true)
+  // Sidebar cerrado por defecto en móvil
+  const [sidebarOpen, setSidebarOpen] = useState(window.innerWidth >= 1024)
   const [logoUrl, setLogoUrl] = useState(null);
   useEffect(() => {
     const fetchLogo = async () => {
@@ -293,34 +294,43 @@ function DashboardPage({ user, setUser }) {
       />
 
       {/* Main Content */}
-      <div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarOpen ? 'ml-64' : 'ml-16'}`}>
+      <div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarOpen ? 'lg:ml-64' : 'lg:ml-16'}`}>
         {/* Header */}
         <header className="bg-gradient-to-r from-indigo-600 to-purple-600 shadow-lg">
-          <div className="px-4 sm:px-6 lg:px-8 py-4">
-            <div className="flex items-center justify-between">
+          <div className="px-3 sm:px-4 lg:px-8 py-3 sm:py-4">
+            <div className="flex items-center justify-between gap-2">
+              {/* Botón hamburguesa (solo móvil) */}
+              <button
+                onClick={() => setSidebarOpen(!sidebarOpen)}
+                className="lg:hidden p-2 rounded-lg bg-white/10 hover:bg-white/20 transition"
+                aria-label="Menú"
+              >
+                <span className="text-white text-2xl">☰</span>
+              </button>
+
               {/* Logo y Nombre del Sistema */}
-              <div className="flex items-center gap-3">
+              <div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
                 {logoUrl ? (
-                  <img src={logoUrl} alt="Logo" className="h-[70px] w-[203px] object-contain bg-white rounded-xl shadow-lg" />
+                  <img src={logoUrl} alt="Logo" className="h-[50px] w-[145px] sm:h-[70px] sm:w-[203px] object-contain bg-white rounded-lg sm:rounded-xl shadow-lg flex-shrink-0" />
                 ) : (
-                  <div className="h-[70px] w-[203px] bg-white rounded-xl flex items-center justify-center shadow-lg text-gray-400">Sin logo</div>
+                  <div className="h-[50px] w-[145px] sm:h-[70px] sm:w-[203px] bg-white rounded-lg sm:rounded-xl flex items-center justify-center shadow-lg text-gray-400 text-xs flex-shrink-0">Sin logo</div>
                 )}
-                <div>
-                  <h1 className="text-2xl font-bold text-white">AYUTEC</h1>
+                <div className="hidden sm:block">
+                  <h1 className="text-xl sm:text-2xl font-bold text-white">AYUTEC</h1>
                   <p className="text-xs text-indigo-200">Sistema Inteligente de Inspecciones</p>
                 </div>
               </div>
 
               {/* Sección Activa */}
-              <div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-lg border border-white/20">
-                <span className="text-2xl">
+              <div className="hidden sm:flex items-center gap-2 sm:gap-3 bg-white/10 backdrop-blur-sm px-3 sm:px-4 py-2 rounded-lg border border-white/20">
+                <span className="text-xl sm:text-2xl">
                   {activeTab === 'checklists' && '📋'}
                   {activeTab === 'inspections' && '🔍'}
                   {activeTab === 'users' && '👥'}
                   {activeTab === 'reports' && '📊'}
                   {activeTab === 'settings' && '⚙️'}
                 </span>
-                <span className="text-white font-semibold">
+                <span className="text-white font-semibold text-sm sm:text-base">
                   {activeTab === 'checklists' && 'Checklists'}
                   {activeTab === 'inspections' && 'Inspecciones'}
                   {activeTab === 'users' && 'Usuarios'}
@@ -328,14 +338,24 @@ function DashboardPage({ user, setUser }) {
                   {activeTab === 'settings' && 'Configuración'}
                 </span>
               </div>
+              {/* Indicador móvil (solo icono) */}
+              <div className="sm:hidden flex items-center justify-center w-10 h-10 bg-white/10 backdrop-blur-sm rounded-lg border border-white/20">
+                <span className="text-xl">
+                  {activeTab === 'checklists' && '📋'}
+                  {activeTab === 'inspections' && '🔍'}
+                  {activeTab === 'users' && '👥'}
+                  {activeTab === 'reports' && '📊'}
+                  {activeTab === 'settings' && '⚙️'}
+                </span>
+              </div>
             </div>
           </div>
         </header>
 
         {/* Content */}
-        <div className="flex-1 p-6">
-          <div className="bg-white rounded-2xl shadow-xl overflow-hidden h-full border border-indigo-100">
-            <div className="p-6">
+        <div className="flex-1 p-3 sm:p-4 lg:p-6">
+          <div className="bg-white rounded-xl sm:rounded-2xl shadow-xl overflow-hidden h-full border border-indigo-100">
+            <div className="p-3 sm:p-4 lg:p-6">
               {loading ? (
                 <div className="text-center py-12">
                   <div className="text-gray-500">Cargando datos...</div>
@@ -4534,12 +4554,12 @@ function InspectionModal({ checklist, existingInspection, user, onClose, onCompl
   const visibleBlock = visibleQuestions.slice(startIdx, endIdx);
 
   const QuestionNavigator = () => (
-    <div className="flex items-center gap-2 mb-6 justify-center">
+    <div className="flex items-center gap-1 sm:gap-2 mb-4 sm:mb-6 justify-center overflow-x-auto pb-2">
       {/* Flecha izquierda */}
       <button
         onClick={() => setQuestionPage((p) => Math.max(0, p - 1))}
         disabled={questionPage === 0}
-        className={`w-8 h-8 rounded-full border flex items-center justify-center text-xl font-bold transition-all select-none bg-gray-700 text-white border-gray-900 shadow-lg disabled:opacity-40 disabled:cursor-not-allowed`}
+        className={`w-7 h-7 sm:w-8 sm:h-8 rounded-full border flex items-center justify-center text-lg sm:text-xl font-bold transition-all select-none bg-gray-700 text-white border-gray-900 shadow-lg disabled:opacity-40 disabled:cursor-not-allowed flex-shrink-0`}
         title="Anterior"
       >
         &#8592;
@@ -4548,7 +4568,7 @@ function InspectionModal({ checklist, existingInspection, user, onClose, onCompl
       {visibleBlock.map((q, idx) => {
         const globalIdx = startIdx + idx;
         const answered = answers[q.id]?.value;
-        let base = 'w-10 h-10 rounded-full border shadow-lg flex items-center justify-center text-lg font-bold transition-all select-none';
+        let base = 'w-8 h-8 sm:w-10 sm:h-10 rounded-full border shadow-lg flex items-center justify-center text-sm sm:text-lg font-bold transition-all select-none flex-shrink-0';
         let style = '';
         if (globalIdx === currentQuestionIndex) {
           style = 'bg-blue-900 text-white border-blue-900 scale-110';
@@ -4572,7 +4592,7 @@ function InspectionModal({ checklist, existingInspection, user, onClose, onCompl
       <button
         onClick={() => setQuestionPage((p) => Math.min(totalPages - 1, p + 1))}
         disabled={questionPage >= totalPages - 1}
-        className={`w-8 h-8 rounded-full border flex items-center justify-center text-xl font-bold transition-all select-none bg-gray-700 text-white border-gray-900 shadow-lg disabled:opacity-40 disabled:cursor-not-allowed`}
+        className={`w-7 h-7 sm:w-8 sm:h-8 rounded-full border flex items-center justify-center text-lg sm:text-xl font-bold transition-all select-none bg-gray-700 text-white border-gray-900 shadow-lg disabled:opacity-40 disabled:cursor-not-allowed flex-shrink-0`}
         title="Siguiente"
       >
         &#8594;
@@ -4581,17 +4601,17 @@ function InspectionModal({ checklist, existingInspection, user, onClose, onCompl
   );
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
-        <div className="p-6">
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4">
+      <div className="bg-white rounded-lg w-full max-w-4xl max-h-[95vh] sm:max-h-[90vh] overflow-y-auto">
+        <div className="p-3 sm:p-4 lg:p-6">
           {/* Header */}
-          <div className="flex justify-between items-center mb-4">
-            <h2 className="text-2xl font-bold text-gray-900">
+          <div className="flex justify-between items-start gap-2 mb-3 sm:mb-4">
+            <h2 className="text-lg sm:text-xl lg:text-2xl font-bold text-gray-900 leading-tight">
               Nueva Inspección: {checklist.name}
             </h2>
             <button
               onClick={onClose}
-              className="text-gray-400 hover:text-gray-600 text-2xl"
+              className="text-gray-400 hover:text-gray-600 text-2xl sm:text-3xl flex-shrink-0"
             >
               ×
             </button>
@@ -4599,22 +4619,22 @@ function InspectionModal({ checklist, existingInspection, user, onClose, onCompl
 
           {/* AI Mode Banner */}
           {checklist.ai_mode !== 'off' && (
-            <div className={`mb-4 p-3 rounded-lg border ${
+            <div className={`mb-3 sm:mb-4 p-2 sm:p-3 rounded-lg border ${
               checklist.ai_mode === 'full' 
                 ? 'bg-purple-50 border-purple-200' 
                 : 'bg-blue-50 border-blue-200'
             }`}>
-              <div className="flex items-center gap-2">
-                <span className="text-xl">🤖</span>
-                <div>
-                  <p className={`text-sm font-medium ${
+              <div className="flex items-start gap-2">
+                <span className="text-lg sm:text-xl flex-shrink-0">🤖</span>
+                <div className="min-w-0 flex-1">
+                  <p className={`text-xs sm:text-sm font-medium ${
                     checklist.ai_mode === 'full' ? 'text-purple-900' : 'text-blue-900'
                   }`}>
                     {checklist.ai_mode === 'full' ? 'Modo AUTOCOMPLETADO activado' : 'Modo ASISTIDO activado'}
                   </p>
                   <p className={`text-xs ${
                     checklist.ai_mode === 'full' ? 'text-purple-700' : 'text-blue-700'
-                  }`}>
+                  } mt-1`}>
                     {checklist.ai_mode === 'full' 
                       ? 'El sistema completará automáticamente las respuestas al cargar documentos. Revisa y ajusta si es necesario.' 
                       : 'El sistema sugerirá observaciones al cargar documentos.'}
@@ -4786,25 +4806,25 @@ function InspectionModal({ checklist, existingInspection, user, onClose, onCompl
           )}
 
           {step === 2 && currentQuestion && (
-            <div className="space-y-6">
+            <div className="space-y-3 sm:space-y-4 lg:space-y-6">
               {/* Barra de navegación de preguntas */}
               <QuestionNavigator />
-              <div className="bg-gray-50 p-4 rounded-lg">
-                <div className="text-sm text-gray-600 mb-1">
+              <div className="bg-gray-50 p-3 sm:p-4 rounded-lg">
+                <div className="text-xs sm:text-sm text-gray-600 mb-1">
                   Sección: <strong>{currentQuestion.section}</strong>
                 </div>
-                <h3 className="text-lg font-semibold text-gray-900">
+                <h3 className="text-base sm:text-lg font-semibold text-gray-900 leading-tight">
                   {currentQuestion.text}
                 </h3>
                 {currentQuestion.points > 0 && (
-                  <div className="text-sm text-blue-600 mt-1">
+                  <div className="text-xs sm:text-sm text-blue-600 mt-1">
                     Puntos: {currentQuestion.points}
                   </div>
                 )}
                 {console.log('Current question:', currentQuestion.id, 'Type:', currentQuestion.type, 'Answer:', answers[currentQuestion.id])}
               </div>
 
-              <div className="space-y-4">
+              <div className="space-y-3 sm:space-y-4">
                 {/* Answer input based on type - NO mostrar para photo_only */}
                 {currentQuestion.options?.type !== 'photo_only' && (
                   <div>
@@ -4944,7 +4964,7 @@ function InspectionModal({ checklist, existingInspection, user, onClose, onCompl
                 )}
               </div>
 
-              <div className="flex gap-3 pt-4">
+              <div className="flex gap-2 sm:gap-3 pt-3 sm:pt-4 border-t">
                 <button
                   type="button"
                   onClick={() => {
@@ -4954,9 +4974,10 @@ function InspectionModal({ checklist, existingInspection, user, onClose, onCompl
                     }
                   }}
                   disabled={currentQuestionIndex === 0}
-                  className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="px-3 sm:px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base"
                 >
-                  ← Anterior
+                  <span className="hidden sm:inline">← Anterior</span>
+                  <span className="sm:hidden">←</span>
                 </button>
                 
                 {currentQuestionIndex < getVisibleQuestions().length - 1 ? (
@@ -4977,9 +4998,10 @@ function InspectionModal({ checklist, existingInspection, user, onClose, onCompl
                       saveAnswer(currentQuestion.id)
                       goToQuestion(currentQuestionIndex + 1)
                     }}
-                    className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
+                    className="flex-1 px-3 sm:px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm sm:text-base"
                   >
-                    Siguiente →
+                    <span className="hidden sm:inline">Siguiente →</span>
+                    <span className="sm:hidden">→</span>
                   </button>
                 ) : (
                   <button
@@ -4999,9 +5021,10 @@ function InspectionModal({ checklist, existingInspection, user, onClose, onCompl
                       saveAnswer(currentQuestion.id)
                       proceedToSignatures()
                     }}
-                    className="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"
+                    className="flex-1 px-3 sm:px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm sm:text-base"
                   >
-                    Completar y Firmar →
+                    <span className="hidden sm:inline">Completar y Firmar →</span>
+                    <span className="sm:hidden">✓ Firmar</span>
                   </button>
                 )}
               </div>
diff --git a/frontend/src/Sidebar.jsx b/frontend/src/Sidebar.jsx
index 9bb85a0..71ba19a 100644
--- a/frontend/src/Sidebar.jsx
+++ b/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>
+    </>
   )
 }