frontend/src/App.jsx

@@ -2490,13 +2490,32 @@ function InspectionModal({ checklist, user, onClose, onComplete }) {
   const currentQuestion = visibleQuestions[currentQuestionIndex]
 
   // Barra de navegación de preguntas
+  // Paginación para la barra de preguntas
+  const QUESTIONS_PER_PAGE = 8;
+  const [questionPage, setQuestionPage] = useState(0);
+  const totalPages = Math.ceil(visibleQuestions.length / QUESTIONS_PER_PAGE);
+  const startIdx = questionPage * QUESTIONS_PER_PAGE;
+  const endIdx = startIdx + QUESTIONS_PER_PAGE;
+  const visibleBlock = visibleQuestions.slice(startIdx, endIdx);
+
   const QuestionNavigator = () => (
-    <div className="flex flex-wrap gap-2 mb-6 justify-center">
-      {visibleQuestions.map((q, idx) => {
-        const answered = answers[q.id]?.value
+    <div className="flex items-center gap-2 mb-6 justify-center">
+      {/* 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`}
+        title="Anterior"
+      >
+        &#8592;
+      </button>
+      {/* Números de preguntas */}
+      {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 style = '';
-        if (idx === currentQuestionIndex) {
+        if (globalIdx === currentQuestionIndex) {
           style = 'bg-blue-900 text-white border-blue-900 scale-110';
         } else if (answered) {
           style = 'bg-green-700 text-white border-green-800';
@@ -2506,16 +2525,25 @@ function InspectionModal({ checklist, user, onClose, onComplete }) {
         return (
           <button
             key={q.id}
-            onClick={() => goToQuestion(idx)}
+            onClick={() => goToQuestion(globalIdx)}
             className={`${base} ${style} hover:bg-blue-700 hover:border-blue-700`}
-            title={`Pregunta ${idx + 1}${answered ? ' (respondida)' : ''}`}
+            title={`Pregunta ${globalIdx + 1}${answered ? ' (respondida)' : ''}`}
           >
-            {idx + 1}
+            {globalIdx + 1}
           </button>
-        )
+        );
       })}
+      {/* Flecha derecha */}
+      <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`}
+        title="Siguiente"
+      >
+        &#8594;
+      </button>
     </div>
-  )
+  );
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">