Frontend (v1.0.98):

Formulario mejorado (App.jsx):

Selector de pregunta padre SIEMPRE disponible para cualquier tipo
Selector de condición opcional (solo si el padre es boolean/single_choice)
Indicadores visuales claros:
Verde: "Esta subpregunta aparecerá SIEMPRE"
Azul: "⚡ Condición aplicada"
Visualización distinguible:

Badge verde 📎 para subpreguntas siempre visibles
Badge azul ⚡ para subpreguntas condicionales
Texto explicativo debajo de cada subpregunta

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "checklist-frontend",
   "private": true,
-  "version": "1.0.97",
+  "version": "1.0.98",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/public/service-worker.js

@@ -1,6 +1,6 @@
 // Service Worker para PWA con detección de actualizaciones
 // IMPORTANTE: Actualizar esta versión cada vez que se despliegue una nueva versión
-const CACHE_NAME = 'ayutec-v1.0.97';
+const CACHE_NAME = 'ayutec-v1.0.98';
 const urlsToCache = [
   '/',
   '/index.html'

frontend/src/App.jsx

@@ -1692,32 +1692,17 @@ function QuestionsManagerModal({ checklist, onClose }) {
                   />
                 </div>
 
-                {/* Pregunta Condicional - Subpreguntas Anidadas hasta 5 niveles */}
+                {/* Subpreguntas y Preguntas Condicionales - Anidadas hasta 5 niveles */}
                 <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                   <h4 className="text-sm font-semibold text-blue-900 mb-3">
-                    ⚡ Pregunta Condicional - Subpreguntas Anidadas (hasta 5 niveles)
+                    📋 Subpreguntas y Preguntas Condicionales (hasta 5 niveles)
                   </h4>
-                  {/* Solo permitir condicionales para boolean y single_choice */}
-                  {(() => {
-                    const currentType = formData.options?.type || formData.type
-                    const allowConditional = ['boolean', 'single_choice'].includes(currentType)
                   
-                    if (!allowConditional) {
+                  <div className="space-y-4">
-                      return (
+                    {/* Selector de pregunta padre - SIEMPRE disponible */}
-                        <div className="p-3 bg-gray-50 rounded-lg border border-gray-200">
-                          <p className="text-sm text-gray-600">
-                            ℹ️ Las preguntas condicionales solo están disponibles para tipos <strong>Boolean</strong> y <strong>Opción Única</strong>
-                          </p>
-                        </div>
-                      )
-                    }
-                    
-                    return (
-                      <>
-                        <div className="grid grid-cols-2 gap-4">
                     <div>
                       <label className="block text-sm font-medium text-gray-700 mb-1">
-                              Pregunta padre
+                        Pregunta padre (opcional)
                       </label>
                       <select
                         value={formData.parent_question_id || ''}
@@ -1734,7 +1719,7 @@ function QuestionsManagerModal({ checklist, onClose }) {
                             // Permitir cualquier pregunta que no sea esta misma
                             // y que tenga depth_level < 5 (para no exceder límite)
                             const depth = q.depth_level || 0
-                                  return depth < 5
+                            return depth < 5 && (!editingQuestion || q.id !== editingQuestion.id)
                           })
                           .map(q => {
                             const depth = q.depth_level || 0
@@ -1749,58 +1734,65 @@ function QuestionsManagerModal({ checklist, onClose }) {
                         }
                       </select>
                       <p className="text-xs text-gray-500 mt-1">
-                              Esta pregunta aparecerá solo si se cumple la condición de la pregunta padre
+                        Si seleccionas una pregunta padre, esta pregunta se mostrará como subpregunta debajo de ella
                       </p>
                     </div>
-                          <div>
+
-                            <label className="block text-sm font-medium text-gray-700 mb-1">
+                    {/* Condición - Solo si hay padre y el padre es boolean/single_choice */}
-                              Mostrar si la respuesta es:
-                            </label>
-                            <select
-                              value={formData.show_if_answer}
-                              onChange={(e) => setFormData({ ...formData, show_if_answer: e.target.value })}
-                              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 bg-white"
-                              disabled={!formData.parent_question_id}
-                            >
-                              <option value="">Seleccione...</option>
                     {formData.parent_question_id && (() => {
                       const parentQ = questions.find(q => q.id === formData.parent_question_id)
                       if (!parentQ) return null
                       
-                                // Leer opciones del nuevo formato
                       const config = parentQ.options || {}
                       const parentType = config.type || parentQ.type
+                      const isConditionalParent = ['boolean', 'single_choice'].includes(parentType)
                       
-                                // Para boolean o single_choice, mostrar las opciones configuradas
+                      if (!isConditionalParent) {
-                                if ((parentType === 'boolean' || parentType === 'single_choice') && config.choices) {
+                        return (
-                                  return config.choices.map((choice, idx) => (
+                          <div className="p-3 bg-green-50 rounded-lg border border-green-200">
-                                    <option key={idx} value={choice.value}>
+                            <p className="text-sm text-green-800">
-                                      {choice.label}
+                              ✓ Esta subpregunta aparecerá <strong>SIEMPRE</strong> debajo de la pregunta padre seleccionada
-                                    </option>
-                                  ))
-                                }
-                                
-                                // Compatibilidad con tipos antiguos
-                                if (parentType === 'pass_fail') {
-                                  return [
-                                    <option key="pass" value="pass">✓ Pasa</option>,
-                                    <option key="fail" value="fail">✗ Falla</option>
-                                  ]
-                                } else if (parentType === 'good_bad') {
-                                  return [
-                                    <option key="good" value="good">✓ Bueno</option>,
-                                    <option key="bad" value="bad">✗ Malo</option>
-                                  ]
-                                }
-                                
-                                return <option disabled>Tipo de pregunta no compatible</option>
-                              })()}
-                            </select>
-                            <p className="text-xs text-gray-500 mt-1">
-                              La pregunta solo se mostrará con esta respuesta específica
                             </p>
                           </div>
+                        )
+                      }
+                      
+                      return (
+                        <div>
+                          <label className="block text-sm font-medium text-gray-700 mb-1">
+                            ⚡ Condición (opcional) - Mostrar si la respuesta es:
+                          </label>
+                          <select
+                            value={formData.show_if_answer || ''}
+                            onChange={(e) => setFormData({ ...formData, show_if_answer: e.target.value || null })}
+                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 bg-white"
+                          >
+                            <option value="">Siempre visible (sin condición)</option>
+                            {config.choices ? (
+                              config.choices.map((choice, idx) => (
+                                <option key={idx} value={choice.value}>
+                                  Solo si es: {choice.label}
+                                </option>
+                              ))
+                            ) : (
+                              // Compatibilidad con tipos antiguos
+                              parentType === 'pass_fail' ? [
+                                <option key="pass" value="pass">Solo si es: ✓ Pasa</option>,
+                                <option key="fail" value="fail">Solo si es: ✗ Falla</option>
+                              ] : [
+                                <option key="good" value="good">Solo si es: ✓ Bueno</option>,
+                                <option key="bad" value="bad">Solo si es: ✗ Malo</option>
+                              ]
+                            )}
+                          </select>
+                          <p className="text-xs text-gray-500 mt-1">
+                            {formData.show_if_answer 
+                              ? '⚡ Se mostrará SOLO cuando la respuesta del padre coincida' 
+                              : '✓ Se mostrará SIEMPRE debajo de la pregunta padre'}
+                          </p>
                         </div>
+                      )
+                    })()}
 
                     {/* Indicador de profundidad */}
                     {formData.parent_question_id && (() => {
@@ -1809,7 +1801,7 @@ function QuestionsManagerModal({ checklist, onClose }) {
                       const newDepth = parentDepth + 1
                       
                       return (
-                            <div className={`mt-3 p-2 rounded ${newDepth >= 5 ? 'bg-red-50 border border-red-200' : 'bg-blue-100'}`}>
+                        <div className={`p-2 rounded ${newDepth >= 5 ? 'bg-red-50 border border-red-200' : 'bg-blue-100'}`}>
                           <p className="text-xs">
                             📊 <strong>Profundidad:</strong> Nivel {newDepth} de 5 máximo
                             {newDepth >= 5 && ' ⚠️ Máximo alcanzado'}
@@ -1817,9 +1809,7 @@ function QuestionsManagerModal({ checklist, onClose }) {
                         </div>
                       )
                     })()}
-                      </>
+                  </div>
-                    )
-                  })()}
                 </div>
 
                 {/* AI Prompt - Solo visible si el checklist tiene IA habilitada */}
@@ -1979,15 +1969,22 @@ function QuestionsManagerModal({ checklist, onClose }) {
                               <div className="flex-1">
                                 <div className="flex items-center gap-2">
                                   {isSubQuestion && (
-                                    <span className="text-xs bg-blue-200 text-blue-800 px-2 py-1 rounded">
+                                    <span className={`text-xs px-2 py-1 rounded ${
-                                      ⚡ Condicional
+                                      question.show_if_answer 
+                                        ? 'bg-blue-200 text-blue-800' 
+                                        : 'bg-green-200 text-green-800'
+                                    }`}>
+                                      {question.show_if_answer ? '⚡ Condicional' : '📎 Subpregunta'}
                                     </span>
                                   )}
                                   <p className="text-gray-900">{question.text}</p>
                                 </div>
                                 {isSubQuestion && parentQuestion && (
-                                  <p className="text-xs text-blue-600 mt-1">
+                                  <p className={`text-xs mt-1 ${question.show_if_answer ? 'text-blue-600' : 'text-green-600'}`}>
-                                    → Aparece si <strong>#{question.parent_question_id}</strong> es <strong>{question.show_if_answer}</strong>
+                                    {question.show_if_answer 
+                                      ? `→ Aparece si #${question.parent_question_id} es ${question.show_if_answer}`
+                                      : `→ Siempre visible debajo de #${question.parent_question_id}`
+                                    }
                                   </p>
                                 )}
                                 <div className="flex gap-4 mt-2 text-sm text-gray-600">
@@ -4416,11 +4413,16 @@ function InspectionModal({ checklist, existingInspection, user, onClose, onCompl
         // If no parent, always visible
         if (!q.parent_question_id) return true
         
-        // Check parent answer
+        // If has parent but NO condition (show_if_answer is null/empty), always show if parent was answered
+        if (!q.show_if_answer) {
+          const parentAnswer = answers[q.parent_question_id]
+          return !!parentAnswer  // Show if parent has any answer
+        }
+        
+        // If has parent AND condition, check if parent answer matches
         const parentAnswer = answers[q.parent_question_id]
         if (!parentAnswer) return false
         
-        // Show if parent answer matches trigger
         return parentAnswer.value === q.show_if_answer
       })
       .sort((a, b) => a.order - b.order) // Mantener orden del backend