JSON preguntas corregido

components/ButtonCTA.vue

@@ -46,6 +46,11 @@ export default {
         "bg-surface cursor-not-allowed text-accent/50 border border-accent/50 rounded-lg":
           this.color === "surface" && this.disabled,
 
+        "border border-accent focus:border-surface hover:bg-accent hover:border-surface hover:text-surface text-accent focus:text-accent rounded-lg":
+          this.color === "transparent" && !this.disabled,
+        "bg-accent/55 border border-accent/10 cursor-not-allowed text-white rounded-lg":
+          this.color === "accent" && this.disabled,
+
       };
     }
   },

components/FormSlice.vue

@@ -1,11 +1,11 @@
 <template>
-  <section class="flex flex-1 sm:items-center justify-center pt-10 pb-[60px] px-4 sm:p-4">
+  <section class="flex flex-1 sm:items-center justify-center pt-10 pb-[60px] px-4 sm:p-4 bg-mapamundi">
     <div 
       class="rounded-2xl px-4 sm:px-10 py-12 w-full max-w-2xl"
       :class="{
-        'bg-surface text-white': type === 'welcome',
         'bg-surface text-white h-fit': type === 'question',
-        'bg-[#82DBDF] text-surface': type === 'feedback'
+        'bg-surface text-white': type === 'welcome' || (type === 'feedback' && (id !== 'P1-F4-1' || id !== 'P2-F4-1')),
+        'bg-[#82DBDF] text-surface': type === 'feedback' && (id === 'P1-F4-1' || id === 'P2-F4-1'),
       }">
       <slot />
     </div>
@@ -17,6 +17,10 @@
 export default {
   //components: { FullscreenButton },
   props: {
+    id: {
+      type: String,
+      default: ""
+    },
     type: {
       type: String,
       default: "default"
@@ -38,7 +42,7 @@ export default {
 </script>
 
 <style>
-section {
+.bg-mapamundi {
   background-image: url('/assets/img/mapamundi-fondo.png');
   background-size: cover;
   background-position: center;

components/InputAttach.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label for="file-upload" class="block text-sm text-gray-900">
+    <label for="file-upload" class="block text-sm ">
       <p class="mb-2">{{ label }}</p>
       <div class="flex justify-between items-center p-2 cursor-pointer rounded-md bg-white outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-indigo-600 hover:text-indigo-500">
         <span v-if="file && file.name" class="text-sm text-gray-500">{{ file.name }}</span>

components/InputCheckbox.vue

@@ -7,7 +7,7 @@
       class="w-4 h-4 text-indigo-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
     <label 
     for="default-checkbox" 
-    class="ms-2 text-sm text-gray-900 dark:text-gray-300"
+    class="ms-2 text-sm dark:text-gray-300"
     >{{ label }}</label>
   </div>
 </template>

components/InputEmail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="space-y-2">
-    <label for="mail" class="block text-sm text-gray-900 dark:text-white">{{ label }} <span>{{ required ? '*' : '' }}</span></label>
+    <label for="mail" class="block text-sm">{{ label[langcode] }} <span>{{ required ? '*' : '' }}</span></label>
     <div class="mt-2 h-10 flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600 dark:bg-white/5 dark:outline-gray-600 dark:has-[input:focus-within]:outline-indigo-500">
       <img src="@/assets/svg/mail.svg" alt="" class="h-5 w-5" />
       <input 
@@ -9,7 +9,7 @@
         type="text" 
         name="mail" 
         class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500" 
-        :placeholder="placeholder" 
+        :placeholder="placeholder[langcode]" 
       />
     </div>
     <p v-if="error" class="mt-2 text-sm text-error dark:text-error">{{ error }}</p>
@@ -17,11 +17,12 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 export default {
   props: {
-    label: { type: String, required: true },
+    label: { type: Object, default: () => ({}) },
     required: { type: Boolean, default: true },
-    placeholder: { type: String, default: '' },
+    placeholder: { type: Object, default: () => ({}) },
   },
   emits: ['input-value'],
   data() {
@@ -30,6 +31,9 @@ export default {
       error: ''
     }
   },
+  computed: {
+   ...mapGetters(["langcode"]),
+  },
   watch: {
     email(newVal) {
       this.error = '';
@@ -42,7 +46,10 @@ export default {
       if (pattern.test(String(email).toLowerCase())) {
         this.$emit('input-value', email);
       } else {
-        this.error = "Por favor, introduce un correo electrónico válido.";
+        this.error = {
+          es: 'Por favor, introduce una dirección de correo electrónico válida.',
+          pt: 'Por favor, introduza um endereço de e-mail válido.',
+        };
       }
     }
   }

components/InputRadio.vue

@@ -3,27 +3,35 @@
     v-if="label" 
     class="mb-4 font-medium"
   >
-    <p class="mb-2 block">{{ label }} <span v-if="required" class="text-red-500">*</span></p>
+    <p class="mb-2 block">{{ label[langcode] }} <span v-if="required" class="text-white">*</span></p>
-  </div>
-
-  <div 
-    v-for="(opt, index) in options" :key="`${opt.value}-radio-${index}`" 
-    class="flex items-center gap-2 mb-4 bg-white hover:bg-accent/20 pl-2 outline-1 -outline-offset-1 outline-gray-300 rounded-md cursor-pointer">
-    <input 
-      :id="`radio-` + opt.label" 
-      v-model="picked" 
-      type="radio" 
-      :value="opt"
-    />
-    <label :for="`radio-` + opt.label" class="cursor-pointer w-full py-2 pr-2">{{ opt.label }}</label>
   </div>
+  <section class="flex flex-wrap gap-2 md:gap-4">
+    <div 
+      v-for="(opt, index) in options" :key="`${opt.value}-radio-${index}`" 
+      class="relative "
+      >
+      <input 
+        :id="`radio-` + opt.label[langcode]" 
+        v-model="picked" 
+        type="radio" 
+        :value="opt"
+        class="absolute opacity-0 peer"
+      />
+      <label 
+      :for="`radio-` + opt.label[langcode]" 
+      class="cursor-pointer w-full py-2 pr-2 text-sm flex items-center gap-2 bg-accent hover:bg-muted peer-checked:bg-muted text-surface pl-2 outline-1  -outline-offset-1 outline-gray-300 rounded-md">
+      {{ opt.label[langcode] }}</label>
+    </div>
+  </section>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   props: {
     type: { type: String, default: 'radio' },
-    label: { type: String, default: '' },
+    label: { type: Object, default: () => ({}) },
     options: { type: Array, default: () => [] },
     required: { type: Boolean, default: false }
   },
@@ -33,6 +41,9 @@ export default {
       picked: ''
     }
   },
+  computed: {
+    ...mapGetters(["langcode"]),
+  },
   watch: {
     picked(newVal) {
       //////console.log('radio', newVal);

components/InputText.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="space-y-2">
-    <label for="text" class="block text-sm text-gray-900">{{label}} <span>{{ required ? '*' : '' }}</span></label>
+    <label for="text" class="block text-sm">{{ label[langcode]}} <span>{{ required ? '*' : '' }}</span></label>
     <div class="h-10 flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600">
       <input 
         id="text" 
         type="text" 
         name="text" 
-        :placeholder="placeholder"
+        :placeholder="placeholder[langcode]"
         class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500" 
         :required="required"
         :value="modelValue"
@@ -17,11 +17,12 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 export default {
   props: {
     label: {
-      type: String,
+      type: Object,
-      required: true
+      default: () => ({})
     },
     required: {
       type: Boolean,
@@ -32,11 +33,14 @@ export default {
       default: ''
     },
     placeholder: {
-      type: String,
+      type: Object,
-      default: 'Input'
+      default: () => ({})
     }
   },
   emits: ['input-value'],
+  computed: {
+   ...mapGetters(["langcode"]),
+  },
   methods: {
     updateValue(event) {
       this.$emit('input-value', event.target.value)

components/SliceEnd.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="pdf-content" class="space-y-4">
+  <div id="pdf-content" class="space-y-4 bg-surface">
     <h2 class="text-xl font-semibold text-center">{{ data.title }}</h2>
     <p class="text-center text-muted">{{ data.subtitle }}</p>
     <div class="text-center">

components/SliceFeedback.vue

@@ -1,20 +1,21 @@
 <template>
   <div class="flex flex-col justify-center items-start space-y-4">
     <h1 class="text-3xl font-bold">
-      {{ data.title }}
+      {{data.id}} • {{ data.title[langcode]}}
     </h1>
-    <p class="text-sm" v-html="feedbackText"></p>
+    <p class="text-sm" v-html="data.subtitle[langcode]"></p>
     <button-CTA
       color="accent"
       class="ml-auto"
       @click="$emit('next')"
     >
-      {{ data.button }}
+      {{ data.button[langcode] }}
     </button-CTA>
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 export default {
   props: {
     data: {
@@ -30,6 +31,9 @@ export default {
       feedbackText: ""
     }
   },
+  computed: {
+    ...mapGetters(['langcode'])
+  },
   mounted() {
     this.generateFeedbackText();
   },

components/SliceQuestion.vue

@@ -1,50 +1,58 @@
 <template>
   <div class="space-y-6">
-    <form class="" @submit.prevent="handleSubmit">
+    <form @submit.prevent="handleSubmit">
-      <!-- <p class="text-sm text-muted">
-        Pregunta {{ currentIndex + 1 }} de {{ total }}
-      </p> -->
       <div class="flex flex-col gap-4">
-        <div class="flex gap-2">
+        <!-- Cabecera de sección -->
+        <!-- <div class="flex gap-2">
           <img src="../public/icono-bravioo.svg" alt="logo-bravio" class="h-6 w-6 object-cover" />
           <div class="flex flex-col gap-1">
             <h2 class="text-xl font-semibold">{{ data.section.title[langcode] }}</h2>
-            <p v-if="data.section.description" class="text-muted text-xs">{{ data.section.description[langcode] }}</p>
+            <p v-if="data.section.description[langcode]" class="text-muted text-xs">
+              {{ data.section.description[langcode] }}
+            </p>
           </div>
-        </div>
+        </div> -->
-        <div class="flex flex-col gap-1">
+        <h1>{{ data.id }}</h1>
+        <!-- Título de pregunta -->
+        <div v-if="data.question" class="flex gap-2">
+          <img src="../public/icono-bravioo.svg" alt="logo-bravio" class="h-6 w-6 object-cover" />
           <h3 class="text-base font-semibold">{{ data.question.title[langcode] }}</h3>
-          <p v-if="data.question.description" class="text-muted text-xs">{{ data.question.description[langcode] }}</p>
         </div>
-        <!-- <p v-if="data.question.recommendation" class="w-fit text-xs bg-[#AFE3D2] px-3 py-1 rounded-3xl"><strong>Recomendado:</strong> {{ data.question.recommendation[langcode] }}</p> -->
+        <p v-if="data.question.description[langcode]" class="text-muted text-xs">
+          {{ data.question.description[langcode] }}
+        </p>
       </div>
 
-      <template v-if="inputComponent">
+      <!-- Render dinámico de inputs -->
-        <component
+      <div class="space-y-4 mt-4">
-          :is="inputComponent"
+        <div
-          :key="data.question.id"
+          v-for="(input, idx) in data.inputs"
-          v-bind="inputProps"
+          :key="idx"
-          :required="data.input.required || false"
+          class="flex flex-col gap-2"
-          @input-value="localValue = $event"
-        />
-      </template>
-
-      <div class="flex justify-start gap-4 mt-6">
-        <button-CTA
-          color="transparent"
-          @click="$emit('previous')"
         >
-          Atrás
+          <!-- <label class="font-medium text-sm">{{ input.label[langcode] }}</label> -->
-        </button-CTA>
+
+          <component
+            :is="resolveComponent(input.type)"
+            :key="data.id + '-' + input.label[langcode] + '-' + idx"
+            v-bind="input"
+            :required="input.required || false"
+            @input-value="updateValue($event)"
+          />
+        </div>
+      </div>
+
+      <!-- Botones navegación -->
+      <div class="flex justify-end gap-4 mt-6">
+        <!-- <button-CTA color="transparent" @click="$emit('previous')">Atrás</button-CTA> -->
         <button-CTA
           color="accent"
-          :disabled="localValue ? false : true"
+          :disabled="!isValid"
-          @click="$emit('next', localValue)"
+          @click="$emit('next', values)"
         >
-          Siguiente
+          Continuar
         </button-CTA>
       </div>
-      
     </form>
   </div>
 </template>
@@ -61,6 +69,7 @@ import InputAttach from "@/components/InputAttach.vue"
 import InputTelephone from "@/components/InputTelephone.vue"
 import InputUrl from "@/components/InputUrl.vue"
 import RangeInputs from "@/components/RangeInputs.vue"
+
 export default {
   components: {
     InputText,
@@ -74,6 +83,7 @@ export default {
     InputUrl,
     RangeInputs
   },
+
   props: {
     data: { type: Object, required: true },
     currentIndex: { type: Number, default: 0 },
@@ -84,14 +94,36 @@ export default {
 
   data() {
     return {
-      localValue: null
+      values: {}, // aquí se guardan los valores de todos los inputs
     }
   },
 
   computed: {
-    ...mapGetters(['langcode']),
+    ...mapGetters(["langcode"]),
-    inputComponent() {
+    isValid() {
-      switch (this.data.input.type) {
+      const totalInputs = this.data.inputs.length
+      //console.log("totalInputs -----------", totalInputs, this.values)
+      if (totalInputs === 1) {
+        // Si solo hay un input, comprobar que values solo tiene un valor
+        const isNotEmpty = this.values !== null &&
+          typeof this.values === "object" &&
+          !Array.isArray(this.values) &&
+          Object.keys(this.values).length > 0
+        //console.log("isValid 1 Input -----------", isNotEmpty)
+        return isNotEmpty
+      } else if (totalInputs > 1) {
+        // Si hay múltiples inputs, comprobar que values existen dentro de data.inputs
+        const filled = Object.values(this.values).length
+        //console.log("isValid Varios Inputs -----------", { totalInputs, filled })
+        return filled === totalInputs
+      }
+      return false
+    },
+  },
+
+  methods: {
+    resolveComponent(type) {
+      switch (type) {
         case "text": return "InputText"
         case "email": return "InputEmail"
         case "textarea": return "InputTextarea"
@@ -105,15 +137,30 @@ export default {
         default: return "InputText"
       }
     },
-    inputProps() {
+
-      return this.data.input
+    updateValue(value) {
-    }
+      //console.log("updateValue recibido →", value)
-  },
+      // Si el valor es un objeto pero no tiene id, lo mergeamos directamente
-  
+      if (value && typeof value === "object") {
-  methods: {
+        this.values = { ...this.values, ...value }
+      } 
+      // Si es un valor simple, lo guardamos en una key genérica o incremental
+      else if (typeof value !== "object") {
+        // Lo agregamos al objeto values con una key genérica
+        const key = Object.keys(this.values).length + 1
+        this.values = { ...this.values, [key]: value }
+      }
+
+      //console.log("updateValue →", this.values)
+    },
+
     handleSubmit() {
-      this.$emit("answer", { id: this.data.question, value: this.localValue })
+      this.$emit("answer", {
-      this.$emit("next", this.localValue)
+        id: this.data.id,
+        value: this.values
+      })
+      this.$emit("next", this.values)
+      this.values = {} // resetear valores después de enviar
     }
   }
 }

pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <FormSlice :type="currentSlice.type">
+  <FormSlice :id="currentSlice.id" :type="currentSlice.type">
     <template v-if="currentSliceComponent">
       <transition name="fade" mode="out-in">
         <component
@@ -103,6 +103,7 @@ export default {
     },
 
     goToNext(event) {
+      console.log("Evento recibido para ir al siguiente slice:", event)
       if (this.currentSlice.type === "question" && event !== undefined) {
         const answerObj = {
           sectionId: this.currentSlice.section.id,
@@ -116,7 +117,7 @@ export default {
       }
 
       const nextConfig = this.currentSlice.next
-      //console.log("Navegando desde slice:", this.currentSliceId, "con configuración next:", nextConfig)
+      console.log("Navegando desde slice:", this.currentSliceId, "con configuración next:", nextConfig)
       if (!nextConfig) {
         ////console.log("Encuesta finalizada", this.answers)
         return
@@ -128,13 +129,15 @@ export default {
         previousSlices.push(this.currentSliceId)
         localStorage.setItem('previous-slices', JSON.stringify(previousSlices))
       }
-
+      
       if (typeof nextConfig === "string") {
         // Navegación lineal
+        console.log("--- Navegación LINEAL (string) al slice:", nextConfig)
         this.currentSliceId = nextConfig
       } else if (typeof nextConfig === "object") {
         // Navegación condicional por valor de respuesta
-        const nextSlice = nextConfig[event]
+      console.log("--- Navegación CONDICIONAL (object) al slice:", nextConfig)
+        const nextSlice = nextConfig[event.value]
         if (nextSlice) {
           this.currentSliceId = nextSlice
         } else {