frontend/src/App.jsx

@@ -2489,6 +2489,34 @@ function InspectionModal({ checklist, user, onClose, onComplete }) {
   const visibleQuestions = getVisibleQuestions()
   const currentQuestion = visibleQuestions[currentQuestionIndex]
 
+  // Barra de navegación de preguntas
+  const QuestionNavigator = () => (
+    <div className="flex flex-wrap gap-2 mb-6 justify-center">
+      {visibleQuestions.map((q, 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) {
+          style = 'bg-blue-900 text-white border-blue-900 scale-110';
+        } else if (answered) {
+          style = 'bg-green-700 text-white border-green-800';
+        } else {
+          style = 'bg-gray-700 text-white border-gray-900';
+        }
+        return (
+          <button
+            key={q.id}
+            onClick={() => goToQuestion(idx)}
+            className={`${base} ${style} hover:bg-blue-700 hover:border-blue-700`}
+            title={`Pregunta ${idx + 1}${answered ? ' (respondida)' : ''}`}
+          >
+            {idx + 1}
+          </button>
+        )
+      })}
+    </div>
+  )
+
   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">
@@ -2683,6 +2711,8 @@ function InspectionModal({ checklist, user, onClose, onComplete }) {
 
           {step === 2 && currentQuestion && (
             <div className="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">
                   Sección: <strong>{currentQuestion.section}</strong>