@golstats/gsc-reports 1.0.75 → 1.0.76

package/src/components/elementsTemplates/ModalConfigurarContenido.vue

@@ -1,1229 +1,1250 @@
-<template>
-  <div class="modal-overlay">
-    <div class="modal-content">
-      <!-- Botón de cerrar removido -->
-
-      <div class="modal-header">
-        <div class="header-left">
-          <img
-            src="https://golstatsimages.blob.core.windows.net/reports-images/icn-report-white.svg"
-            class="icon-title"
-            alt="icono reporte blanco"
-          />
-          <span class="modal-title"
-            >Generar reporte&nbsp; - &nbsp; <span class="prepartido-text">Prepartido</span></span
-          >
-        </div>
-        <div class="step-counter">
-          Paso {{ currentStep === 0 ? 1 : currentStep }} de {{ totalSteps }}
-        </div>
-      </div>
-      <div class="header-separator"></div>
-      <div class="modal-body" :class="{ transitioning: isTransitioning }">
-        <!-- Paso 0: Configuración inicial de opciones -->
-        <div v-if="currentStep === 0" class="step-content">
-          <!-- Sección Fortalezas - Solo se muestra si existen Fortalezas en el template -->
-          <div v-if="hasFortalezas" class="content-section">
-            <h3 class="section-title">Fortalezas</h3>
-            <div class="title-separator"></div>
-            <p class="section-description">
-              Este template contiene {{ fortalezasCounts.equipo }} visualizaciones de Fortalezas de
-              tu equipo y {{ fortalezasCounts.rival }} de tu rival. ¿Cómo prefieres que se agregue
-              este contenido?
-            </p>
-            <div class="content-separator"></div>
-            <div class="radio-group">
-              <label class="radio-option">
-                <input
-                  type="radio"
-                  name="fortalezas"
-                  value="automatico"
-                  v-model="fortalezasOption"
-                />
-                <span class="radio-custom"></span>
-                <span class="radio-label">Automáticamente</span>
-              </label>
-              <label class="radio-option">
-                <input type="radio" name="fortalezas" value="manual" v-model="fortalezasOption" />
-                <span class="radio-custom"></span>
-                <span class="radio-label">Manualmente</span>
-              </label>
-            </div>
-          </div>
-
-          <!-- Separador removido -->
-
-          <!-- Sección Tiros de esquina - OCULTA POR EL MOMENTO -->
-          <!-- <div v-if="hasCorners" class="content-section">
-            <h3 class="section-title">Tiros de esquina</h3>
-            <div class="title-separator"></div>
-            <p class="section-description">
-              Este template contiene 10 visualizaciones de Tiros de esquina de tu equipo. ¿Cómo
-              prefieres que se agregue este contenido?
-            </p>
-            <div class="content-separator"></div>
-            <div class="radio-group">
-              <label class="radio-option">
-                <input
-                  type="radio"
-                  name="tiros-esquina"
-                  value="automatico"
-                  v-model="tirosEsquinaOption"
-                />
-                <span class="radio-custom"></span>
-                <span class="radio-label">Automáticamente</span>
-              </label>
-              <label class="radio-option">
-                <input
-                  type="radio"
-                  name="tiros-esquina"
-                  value="manual"
-                  v-model="tirosEsquinaOption"
-                />
-                <span class="radio-custom"></span>
-                <span class="radio-label">Manualmente</span>
-              </label>
-            </div>
-          </div> -->
-        </div>
-
-        <!-- Pasos dinámicos renderizados por clave -->
-        <!-- Usamos v-show en lugar de v-if para mantener los componentes montados y preservar el estado -->
-        <template v-if="fortalezasCounts.equipo > 0">
-          <div v-show="buildStepMap()[currentStep] === 'fortalezasEquipo'" class="step-content">
-            <FortalezasView
-              key="fortalezas-equipo"
-              v-model="selectedFortalezasEquipo"
-              team-initials="AME"
-              :season-id="1772"
-              :team-id="props.partido?.local || props.partido?.home_team"
-              :rival-team-id="props.partido?.visita || props.partido?.visiting_team"
-              :token="props.token"
-              title="Fortalezas a favor de mi equipo"
-              :total-fortalezas="fortalezasCounts.equipo"
-              ref="fortalezasEquipoRef"
-            />
-          </div>
-        </template>
-
-        <template v-if="fortalezasCounts.rival > 0">
-          <div v-show="buildStepMap()[currentStep] === 'fortalezasRival'" class="step-content">
-            <FortalezasView
-              key="fortalezas-rival"
-              v-model="selectedFortalezasRival"
-              team-initials="RIV"
-              :season-id="1772"
-              :team-id="props.partido?.visita || props.partido?.visiting_team"
-              :rival-team-id="props.partido?.local || props.partido?.home_team"
-              :token="props.token"
-              title="Fortalezas a favor del rival"
-              :total-fortalezas="fortalezasCounts.rival"
-              ref="fortalezasRivalRef"
-            />
-          </div>
-        </template>
-
-        <div v-if="buildStepMap()[currentStep] === 'cornersEquipo'" class="step-content">
-          <TirosEsquinaView
-            v-model="selectedCornersEquipo"
-            :rival="false"
-            team-initials="AME"
-            title="Tiros de esquina en contra de mi equipo"
-            team-logo-url="https://golstatsimages.blob.core.windows.net/teams-80/2.png"
-            ref="cornersEquipoRef"
-          />
-        </div>
-
-        <div v-if="buildStepMap()[currentStep] === 'cornersRival'" class="step-content">
-          <TirosEsquinaView
-            v-model="selectedCornersRival"
-            :rival="true"
-            team-initials="RIV"
-            title="Tiros de esquina en contra del rival"
-            team-logo-url="https://golstatsimages.blob.core.windows.net/teams-80/1.png"
-            ref="cornersRivalRef"
-          />
-        </div>
-      </div>
-      <div class="header-separator"></div>
-      <div class="modal-footer">
-        <button class="back-btn" @click="goBack">
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M10 12L6 8L10 4"
-              stroke="white"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-          Regresar
-        </button>
-        <div class="footer-actions">
-          <button v-if="currentStep === 0" class="cancel-btn" @click="closeModal">Cancelar</button>
-          <button
-            v-if="currentStep === 1 || currentStep === 2"
-            class="cancel-btn"
-            @click="autocompletar"
-          >
-            Autocompletar
-          </button>
-          <button
-            class="next-btn"
-            :class="{ disabled: !canContinue }"
-            :disabled="!canContinue"
-            @click="continueToNext"
-          >
-            {{
-              currentStep === 0
-                ? fortalezasOption === 'automatico'
-                  ? 'Finalizar'
-                  : 'Siguiente'
-                : currentStep === totalSteps
-                  ? 'Finalizar'
-                  : 'Siguiente'
-            }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Modal de confirmación para regresar al paso 0 -->
-  <div v-if="showConfirmDialog" class="modal-overlay" @click.self="cancelGoBack">
-    <div class="modal-content confirm-dialog">
-      <div class="modal-header">
-        <div class="header-left">
-          <span class="modal-title">Confirmación</span>
-        </div>
-      </div>
-      <div class="header-separator"></div>
-      <div class="modal-body">
-        <div class="step-content">
-          <h3 class="confirm-dialog-title">¿Estás seguro de regresar?</h3>
-          <p class="confirm-dialog-message">Se perderá la información seleccionada</p>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <div class="footer-actions">
-          <button class="cancel-btn" @click="cancelGoBack">Cancelar</button>
-          <button class="next-btn" @click="confirmGoBackToStep0">Confirmar</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, defineEmits, computed, nextTick } from 'vue'
-import FortalezasView from './FortalezasView.vue'
-import TirosEsquinaView from './TirosEsquinaView.vue'
-
-const emit = defineEmits(['close', 'back', 'next'])
-
-// Props para controlar el número de pasos
-const props = defineProps({
-  hasRival: {
-    type: Boolean,
-    default: true,
-  },
-  token: {
-    type: String,
-    required: true,
-  },
-  template: {
-    type: Object,
-    required: false,
-    default: null,
-  },
-  team: {
-    type: Number,
-    required: false,
-    default: null,
-  },
-  partido: {
-    type: Object,
-    required: false,
-    default: null,
-  },
-})
-
-// Función para verificar si existe un componente Fortalezas en el template
-function tieneComponenteFortalezas() {
-  if (!props.template || !props.template.pages) {
-    return false
-  }
-
-  // Iterar sobre todas las pages del template
-  for (const page of props.template.pages) {
-    // Verificar si la page tiene components
-    if (page.components && Array.isArray(page.components)) {
-      // Buscar si existe algún componente con name === 'Fortalezas' o id === 15
-      const tieneFortalezas = page.components.some(
-        (component) => component.name === 'Fortalezas' || component.id === 15,
-      )
-      if (tieneFortalezas) {
-        return true
-      }
-    }
-  }
-
-  return false
-}
-
-// Función para contar Fortalezas del equipo propio y del rival
-function contarFortalezas() {
-  if (!props.template || !props.template.pages) {
-    return { equipo: 0, rival: 0, total: 0 }
-  }
-
-  let countEquipo = 0
-  let countRival = 0
-
-  // Iterar sobre todas las pages del template
-  for (const page of props.template.pages) {
-    // Verificar si la page tiene components
-    if (page.components && Array.isArray(page.components)) {
-      // Filtrar componentes Fortalezas
-      const componentesFortalezas = page.components.filter(
-        (component) => component.name === 'Fortalezas' || component.id === 15,
-      )
-
-      // Para cada componente Fortalezas, verificar dynamicFilters
-      for (const component of componentesFortalezas) {
-        // Verificar si tiene dynamicFilters y es un array
-        if (component.dynamicFilters && Array.isArray(component.dynamicFilters)) {
-          // Verificar la posición 1 (que es un array)
-          if (component.dynamicFilters[1]) {
-            // Consultar la posición 0 para determinar si es equipo propio (1) o rival (2)
-            if (component.dynamicFilters[0] === 1) {
-              countEquipo += component.dynamicFilters[1]
-            } else if (component.dynamicFilters[0] === 2) {
-              countRival += component.dynamicFilters[1]
-            }
-          }
-        }
-      }
-    }
-  }
-
-  return {
-    equipo: countEquipo,
-    rival: countRival,
-    total: countEquipo + countRival,
-  }
-}
-
-// Computed para verificar si tiene Fortalezas
-const hasFortalezas = computed(() => tieneComponenteFortalezas())
-
-// Computed para obtener los conteos de Fortalezas
-const fortalezasCounts = computed(() => contarFortalezas())
-
-// const hasCorners = false // OCULTO POR EL MOMENTO
-// Estado del modal
-const currentStep = ref(0) // 0 = configuración inicial, luego pasos dinámicos
-const isTransitioning = ref(false)
-
-// Modal de confirmación para regresar al paso 0
-const showConfirmDialog = ref(false)
-
-// Opciones seleccionadas para cada sección
-const fortalezasOption = ref('manual')
-const tirosEsquinaOption = ref('manual')
-
-// Selecciones por vista
-const selectedFortalezasEquipo = ref([])
-const selectedFortalezasRival = ref([])
-const selectedCornersEquipo = ref([])
-const selectedCornersRival = ref([])
-
-// Calcular el número total de pasos
-const totalSteps = computed(() => {
-  let steps = 0
-
-  // Pasos de Fortalezas
-  if (hasFortalezas.value && fortalezasOption.value === 'manual') {
-    // Si hay fortalezas de equipo, agregar paso 1
-    if (fortalezasCounts.value.equipo > 0) {
-      steps += 1
-    }
-    // Si hay fortalezas de rival, agregar paso (será 2 si hay equipo, 1 si no hay)
-    if (fortalezasCounts.value.rival > 0) {
-      steps += 1
-    }
-  }
-
-  // Pasos de Tiros de esquina - OCULTOS POR EL MOMENTO
-  // if (tirosEsquinaOption.value === 'manual') {
-  //   steps += props.hasRival ? 2 : 1
-  // }
-
-  return Math.max(steps, 1)
-})
-
-// Verificar si se puede continuar al siguiente paso
-const canContinue = computed(() => {
-  if (currentStep.value === 0) {
-    // Si no hay Fortalezas, no se puede continuar (tirosEsquina está oculto)
-    if (!hasFortalezas.value) {
-      return false
-    }
-    // Puede continuar si está en automático o en manual
-    return fortalezasOption.value === 'automatico' || fortalezasOption.value === 'manual'
-  }
-  const stepMap = buildStepMap()
-  const key = stepMap[currentStep.value]
-
-  if (key === 'fortalezasEquipo') {
-    const ref = fortalezasEquipoRef.value
-    if (!ref) return false
-    const selected = selectedFortalezasEquipo.value.length
-    const totalRequerido = fortalezasCounts.value.equipo
-    // Obtener el total de fortalezas disponibles del componente
-    const totalDisponibles = ref.fortalezasData?.length || 0
-
-    // Puede continuar si:
-    // 1. Selecciona el total exacto requerido
-    // 2. O si no hay suficientes disponibles, selecciona todos los disponibles
-    return (
-      selected === totalRequerido ||
-      (totalDisponibles > 0 && totalDisponibles < totalRequerido && selected === totalDisponibles)
-    )
-  }
-
-  if (key === 'fortalezasRival') {
-    const ref = fortalezasRivalRef.value
-    if (!ref) return false
-    const selected = selectedFortalezasRival.value.length
-    const totalRequerido = fortalezasCounts.value.rival
-    // Obtener el total de fortalezas disponibles del componente
-    const totalDisponibles = ref.fortalezasData?.length || 0
-
-    // Puede continuar si:
-    // 1. Selecciona el total exacto requerido
-    // 2. O si no hay suficientes disponibles, selecciona todos los disponibles
-    return (
-      selected === totalRequerido ||
-      (totalDisponibles > 0 && totalDisponibles < totalRequerido && selected === totalDisponibles)
-    )
-  }
-
-  // Pasos de corners ocultos
-  // if (key === 'cornersEquipo') return selectedCornersEquipo.value.length > 0
-  // if (key === 'cornersRival') return selectedCornersRival.value.length > 0
-  return false
-})
-
-function buildStepMap() {
-  const order = []
-
-  // Solo agregar pasos de Fortalezas si existen en el template y está en modo manual
-  if (hasFortalezas.value && fortalezasOption.value === 'manual') {
-    // Si hay fortalezas de equipo, agregar paso de equipo
-    if (fortalezasCounts.value.equipo > 0) {
-      order.push('fortalezasEquipo')
-    }
-    // Si hay fortalezas de rival, agregar paso de rival
-    if (fortalezasCounts.value.rival > 0) {
-      order.push('fortalezasRival')
-    }
-  }
-
-  // Pasos de Tiros de esquina - OCULTOS POR EL MOMENTO
-  // if (tirosEsquinaOption.value === 'manual') {
-  //   order.push('cornersEquipo')
-  //   if (props.hasRival) order.push('cornersRival')
-  // }
-
-  const map = {}
-  order.forEach((k, idx) => {
-    map[idx + 1] = k // pasos empiezan en 1
-  })
-  return map
-}
-
-// Referencias a los componentes
-const fortalezasEquipoRef = ref(null)
-const fortalezasRivalRef = ref(null)
-const cornersEquipoRef = ref(null)
-const cornersRivalRef = ref(null)
-
-function closeModal() {
-  emit('close')
-}
-
-function goBack() {
-  if (currentStep.value > 1) {
-    // Si estamos en paso 2 o superior, solo regresar sin borrar selecciones
-    currentStep.value--
-  } else if (currentStep.value === 1) {
-    // Si estamos en paso 1 y vamos al paso 0, mostrar modal de confirmación
-    // Verificar si hay selecciones antes de mostrar el modal
-    const tieneSelecciones =
-      selectedFortalezasEquipo.value.length > 0 || selectedFortalezasRival.value.length > 0
-
-    if (tieneSelecciones) {
-      showConfirmDialog.value = true
-    } else {
-      // Si no hay selecciones, regresar directamente
-      currentStep.value--
-    }
-  } else {
-    // Si estamos en paso 0, emitir evento back
-    emit('back')
-  }
-}
-
-function confirmGoBackToStep0() {
-  // Limpiar todas las selecciones
-  selectedFortalezasEquipo.value = []
-  selectedFortalezasRival.value = []
-  selectedCornersEquipo.value = []
-  selectedCornersRival.value = []
-
-  // Cerrar el modal de confirmación
-  showConfirmDialog.value = false
-
-  // Regresar al paso 0
-  currentStep.value--
-}
-
-function cancelGoBack() {
-  // Cerrar el modal de confirmación sin hacer nada
-  showConfirmDialog.value = false
-}
-
-async function continueToNext() {
-  if (currentStep.value === 0) {
-    // Validar que al menos una opción esté seleccionada
-    if (!canContinue.value) {
-      return
-    }
-
-    // Si está en automático, finalizar directamente sin construir payload
-    if (fortalezasOption.value === 'automatico') {
-      // Emitir evento sin payload de strengths (se generarán automáticamente)
-      emit('next', {
-        fortalezas: fortalezasOption.value,
-        tirosEsquina: tirosEsquinaOption.value,
-        selectedFortalezasEquipo: [],
-        selectedFortalezasRival: [],
-        strengthsPayload: {}, // Payload vacío para modo automático
-      })
-      return
-    }
-
-    // Si es manual, avanzar al siguiente paso
-    // Animar transición
-    isTransitioning.value = true
-    setTimeout(() => {
-      currentStep.value++
-      isTransitioning.value = false
-    }, 300)
-  } else if (currentStep.value < totalSteps.value) {
-    // Avanzar al siguiente paso
-    isTransitioning.value = true
-    setTimeout(() => {
-      currentStep.value++
-      isTransitioning.value = false
-    }, 300)
-  } else {
-    // Esperar un tick para asegurar que los refs estén disponibles
-    await nextTick()
-
-    // Construir el payload de fortalezas antes de emitir
-    const strengthsPayload = buildStrengthsPayload()
-    console.log('Estructura de strengths emitida:', JSON.stringify(strengthsPayload, null, 2))
-
-    // Emitir evento con las opciones seleccionadas y el payload de fortalezas
-    emit('next', {
-      fortalezas: fortalezasOption.value,
-      tirosEsquina: tirosEsquinaOption.value,
-      selectedFortalezasEquipo: selectedFortalezasEquipo.value,
-      selectedFortalezasRival: selectedFortalezasRival.value,
-      strengthsPayload,
-    })
-  }
-}
-
-// Función para construir el payload de fortalezas según la estructura requerida
-function buildStrengthsPayload() {
-  console.log('=== INICIANDO buildStrengthsPayload ===')
-  console.log('Template:', props.template)
-  console.log('Template pages:', props.template?.pages)
-
-  if (!props.template || !props.template.pages) {
-    console.warn('No hay template o pages')
-    return {}
-  }
-
-  const payload = {}
-
-  console.log('selectedFortalezasEquipo:', selectedFortalezasEquipo.value)
-  console.log('selectedFortalezasRival:', selectedFortalezasRival.value)
-  console.log('fortalezasEquipoRef:', fortalezasEquipoRef.value)
-  console.log('fortalezasRivalRef:', fortalezasRivalRef.value)
-
-  // Verificar si los refs están disponibles
-  let equipoRef = fortalezasEquipoRef.value
-  let rivalRef = fortalezasRivalRef.value
-
-  // Debug detallado de los refs
-  if (equipoRef) {
-    console.log('equipoRef keys:', Object.keys(equipoRef))
-    console.log('equipoRef.fortalezasRawData:', equipoRef.fortalezasRawData)
-    console.log('equipoRef.fortalezasRawData type:', typeof equipoRef.fortalezasRawData)
-
-    // Verificar si es un ref (tiene .value)
-    let rawDataEquipo = equipoRef.fortalezasRawData
-    if (rawDataEquipo && typeof rawDataEquipo === 'object' && 'value' in rawDataEquipo) {
-      console.log('⚠️ fortalezasRawData es un ref, usando .value')
-      rawDataEquipo = rawDataEquipo.value
-    }
-
-    console.log('rawDataEquipo después de verificar ref:', rawDataEquipo)
-    console.log('rawDataEquipo is array:', Array.isArray(rawDataEquipo))
-    if (Array.isArray(rawDataEquipo)) {
-      console.log('rawDataEquipo length:', rawDataEquipo.length)
-      if (rawDataEquipo.length > 0) {
-        console.log('Primer elemento equipoRef:', rawDataEquipo[0])
-      }
-    }
-  } else {
-    console.error('❌ equipoRef NO está disponible')
-  }
-
-  if (rivalRef) {
-    console.log('rivalRef keys:', Object.keys(rivalRef))
-    console.log('rivalRef.fortalezasRawData:', rivalRef.fortalezasRawData)
-    console.log('rivalRef.fortalezasRawData type:', typeof rivalRef.fortalezasRawData)
-
-    // Verificar si es un ref (tiene .value)
-    let rawDataRival = rivalRef.fortalezasRawData
-    if (rawDataRival && typeof rawDataRival === 'object' && 'value' in rawDataRival) {
-      console.log('⚠️ fortalezasRawData es un ref, usando .value')
-      rawDataRival = rawDataRival.value
-    }
-
-    console.log('rawDataRival después de verificar ref:', rawDataRival)
-    console.log('rawDataRival is array:', Array.isArray(rawDataRival))
-    if (Array.isArray(rawDataRival)) {
-      console.log('rawDataRival length:', rawDataRival.length)
-      if (rawDataRival.length > 0) {
-        console.log('Primer elemento rivalRef:', rawDataRival[0])
-      }
-    }
-  } else {
-    console.error('❌ rivalRef NO está disponible')
-  }
-
-  // Si los refs no están disponibles, podría ser que los componentes estén ocultos con v-show
-  if (!equipoRef && selectedFortalezasEquipo.value.length > 0) {
-    console.warn('⚠️ Ref de equipo no disponible, pero hay selecciones')
-  }
-  if (!rivalRef && selectedFortalezasRival.value.length > 0) {
-    console.warn('⚠️ Ref de rival no disponible, pero hay selecciones')
-  }
-
-  // Obtener todas las fortalezas seleccionadas ordenadas por su orden de selección
-  const fortalezasEquipoOrdenadas = getOrderedStrengths(selectedFortalezasEquipo.value, equipoRef)
-  const fortalezasRivalOrdenadas = getOrderedStrengths(selectedFortalezasRival.value, rivalRef)
-
-  console.log('fortalezasEquipoOrdenadas:', fortalezasEquipoOrdenadas)
-  console.log('fortalezasRivalOrdenadas:', fortalezasRivalOrdenadas)
-
-  // Contadores para rastrear qué fortalezas ya se han asignado
-  let indexEquipo = 0
-  let indexRival = 0
-
-  // Iterar sobre todas las páginas del template
-  props.template.pages.forEach((page, pageIndex) => {
-    const pageNumber = pageIndex + 1 // Los índices de página empiezan en 1
-    console.log(`\n=== Página ${pageNumber} ===`)
-    console.log('Page components:', page.components)
-
-    // Verificar si la página tiene components
-    if (page.components && Array.isArray(page.components)) {
-      // Buscar componentes Fortalezas
-      page.components.forEach((component, componentIndex) => {
-        if (component.name === 'Fortalezas' || component.id === 15) {
-          const componentNumber = componentIndex + 1 // Los índices de componente empiezan en 1
-          console.log(`\n--- Componente ${componentNumber} (Fortalezas) ---`)
-          console.log('Component:', component)
-          console.log('dynamicFilters:', component.dynamicFilters)
-
-          // Verificar dynamicFilters para determinar tipo y cantidad
-          if (component.dynamicFilters && Array.isArray(component.dynamicFilters)) {
-            const teamType = component.dynamicFilters[0] // 1 = equipo, 2 = rival
-            const cantidadRequerida = component.dynamicFilters[1] || 0 // Cantidad de fortalezas necesarias
-
-            console.log(
-              `Tipo: ${teamType === 1 ? 'Equipo' : 'Rival'}, Cantidad requerida: ${cantidadRequerida}`,
-            )
-
-            // Obtener las fortalezas según el tipo
-            let fortalezasAsignar = []
-            let fortalezasOrdenadas = []
-            let teamId = props.team
-
-            if (teamType === 1) {
-              // Fortalezas de equipo
-              fortalezasOrdenadas = fortalezasEquipoOrdenadas
-              console.log(
-                `Equipo: Total ordenadas=${fortalezasOrdenadas.length}, index=${indexEquipo}, cantidad requerida=${cantidadRequerida}`,
-              )
-              // Tomar las siguientes N fortalezas (donde N = cantidadRequerida)
-              if (fortalezasOrdenadas.length > indexEquipo) {
-                fortalezasAsignar = fortalezasOrdenadas.slice(
-                  indexEquipo,
-                  indexEquipo + cantidadRequerida,
-                )
-                console.log(
-                  `Index equipo: ${indexEquipo}, tomando ${fortalezasAsignar.length} fortalezas de ${fortalezasOrdenadas.length} disponibles`,
-                )
-              } else {
-                console.warn(
-                  `No hay suficientes fortalezas de equipo. Disponibles: ${fortalezasOrdenadas.length}, Necesarias desde índice: ${indexEquipo}`,
-                )
-              }
-              indexEquipo += cantidadRequerida
-              teamId = props.partido?.local || props.partido?.home_team || props.team
-            } else if (teamType === 2) {
-              // Fortalezas de rival
-              fortalezasOrdenadas = fortalezasRivalOrdenadas
-              console.log(
-                `Rival: Total ordenadas=${fortalezasOrdenadas.length}, index=${indexRival}, cantidad requerida=${cantidadRequerida}`,
-              )
-              // Tomar las siguientes N fortalezas (donde N = cantidadRequerida)
-              if (fortalezasOrdenadas.length > indexRival) {
-                fortalezasAsignar = fortalezasOrdenadas.slice(
-                  indexRival,
-                  indexRival + cantidadRequerida,
-                )
-                console.log(
-                  `Index rival: ${indexRival}, tomando ${fortalezasAsignar.length} fortalezas de ${fortalezasOrdenadas.length} disponibles`,
-                )
-              } else {
-                console.warn(
-                  `No hay suficientes fortalezas de rival. Disponibles: ${fortalezasOrdenadas.length}, Necesarias desde índice: ${indexRival}`,
-                )
-              }
-              indexRival += cantidadRequerida
-              teamId = props.partido?.visita || props.partido?.visiting_team
-            }
-
-            console.log('fortalezasAsignar:', fortalezasAsignar)
-
-            // Si hay fortalezas para asignar, agregarlas al payload
-            if (fortalezasAsignar.length > 0) {
-              // Inicializar la estructura si no existe
-              if (!payload[pageNumber]) {
-                payload[pageNumber] = {}
-              }
-              if (!payload[pageNumber][componentNumber]) {
-                payload[pageNumber][componentNumber] = []
-              }
-
-              // Agregar las fortalezas con su información completa
-              fortalezasAsignar.forEach((strength, index) => {
-                payload[pageNumber][componentNumber].push({
-                  team_id: teamId,
-                  ranking_type: strength.ranking_type || 1,
-                  precondition_id: strength.precondition_id || null,
-                  order: index + 1,
-                  name: strength.name,
-                  category_type: strength.category_type || 1,
-                  total: strength.total || 0,
-                  is_relevant: strength.is_relevant || 0,
-                  league_ranking: strength.league_ranking || 0,
-                  categories: Array.isArray(strength.categories)
-                    ? strength.categories
-                    : [strength.categories],
-                  team_contribution: strength.team_contribution || 0,
-                })
-              })
-              console.log(`✓ Agregadas ${fortalezasAsignar.length} fortalezas al payload`)
-            } else {
-              console.warn('No hay fortalezas para asignar a este componente')
-            }
-          } else {
-            console.warn('Componente no tiene dynamicFilters válido')
-          }
-        }
-      })
-    }
-  })
-
-  console.log('\n=== PAYLOAD FINAL ===')
-  console.log(JSON.stringify(payload, null, 2))
-  return payload
-}
-
-// Función auxiliar para obtener las fortalezas en el mismo orden que fueron seleccionadas
-// Los IDs ya vienen en el orden correcto, solo necesitamos obtener los objetos completos
-function getOrderedStrengths(selectedIds, fortalezasViewRef) {
-  console.log('=== getOrderedStrengths INICIO ===')
-  console.log('selectedIds (orden de selección):', selectedIds)
-  console.log('fortalezasViewRef existe?:', !!fortalezasViewRef)
-
-  if (!selectedIds || selectedIds.length === 0) {
-    console.warn('No hay IDs seleccionados')
-    return []
-  }
-
-  if (!fortalezasViewRef) {
-    console.warn('Ref no disponible')
-    return []
-  }
-
-  // Obtener fortalezasRawData, verificando si es un ref
-  let fortalezasRawData = fortalezasViewRef.fortalezasRawData
-  if (!fortalezasRawData) {
-    console.warn('fortalezasRawData no está disponible en el ref')
-    return []
-  }
-
-  // Si es un ref, acceder a su .value
-  if (fortalezasRawData && typeof fortalezasRawData === 'object' && 'value' in fortalezasRawData) {
-    console.log('⚠️ fortalezasRawData es un ref, accediendo a .value')
-    fortalezasRawData = fortalezasRawData.value
-  }
-
-  if (!Array.isArray(fortalezasRawData)) {
-    console.warn('fortalezasRawData no es un array:', typeof fortalezasRawData, fortalezasRawData)
-    return []
-  }
-
-  if (fortalezasRawData.length === 0) {
-    console.warn('fortalezasRawData está vacío')
-    return []
-  }
-
-  console.log('fortalezasRawData length:', fortalezasRawData.length)
-  console.log('Primeras 2 fortalezas raw:', fortalezasRawData.slice(0, 2))
-
-  // Obtener las fortalezas en el mismo orden que fueron seleccionadas (sin reordenar)
-  // El orden ya está dado por selectedIds, solo necesitamos buscar y devolver el objeto completo
-  const selectedStrengths = selectedIds
-    .map((id) => {
-      console.log(`Buscando ID: ${id} (tipo: ${typeof id})`)
-
-      // Buscar en los datos raw por categories (que es el id que usamos)
-      const strength = fortalezasRawData.find((item) => {
-        // Comparar tanto como número como string
-        const match =
-          item.categories === id ||
-          item.categories === Number(id) ||
-          String(item.categories) === String(id)
-        if (!match && fortalezasRawData.indexOf(item) < 3) {
-          console.log(
-            `  Comparando: item.categories=${item.categories} (${typeof item.categories}) vs id=${id} (${typeof id})`,
-          )
-        }
-        return match
-      })
-
-      if (strength) {
-        console.log(`✓ Encontrada: ${strength.name} (categories: ${strength.categories})`)
-        return strength
-      }
-
-      console.warn(`✗ No encontrada con categories = ${id}, intentando por id`)
-      // Intentar buscar también por id si categories no funciona
-      const strengthById = fortalezasRawData.find(
-        (item) => item.id === id || item.id === Number(id) || String(item.id) === String(id),
-      )
-      if (strengthById) {
-        console.log(`✓ Encontrada por id: ${strengthById.name}`)
-        return strengthById
-      }
-
-      console.error(`✗✗ No se encontró fortaleza con id/categories = ${id}`)
-      return null
-    })
-    .filter(Boolean) // Filtrar los que no se encontraron
-
-  console.log(
-    `selectedStrengths (${selectedStrengths.length} de ${selectedIds.length} encontradas):`,
-    selectedStrengths,
-  )
-  console.log('=== getOrderedStrengths FIN ===')
-  return selectedStrengths
-}
-
-function autocompletar() {
-  const stepMap = buildStepMap()
-  const key = stepMap[currentStep.value]
-  if (key === 'fortalezasEquipo' && fortalezasEquipoRef.value)
-    return fortalezasEquipoRef.value.autocompletar()
-  if (key === 'fortalezasRival' && fortalezasRivalRef.value)
-    return fortalezasRivalRef.value.autocompletar()
-  if (key === 'cornersEquipo' && cornersEquipoRef.value)
-    return cornersEquipoRef.value.autocompletar()
-  if (key === 'cornersRival' && cornersRivalRef.value) return cornersRivalRef.value.autocompletar()
-}
-</script>
-
-<style scoped>
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.45);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 3300;
-}
-
-.modal-content {
-  width: 464px;
-  background: #2e3b46;
-  border-radius: 10px;
-  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.18);
-  padding: 0;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  font-family: 'Poppins-Medium', 'Montserrat', sans-serif;
-}
-
-/* Estilos del botón de cerrar removidos */
-
-.header-separator {
-  width: 100%;
-  height: 1px;
-  border-bottom: dashed 1px #58626b;
-  margin: 12px 0 0 0;
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px 0 24px;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.step-counter {
-  font-family: Poppins-Medium;
-  font-size: 12px;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.icon-title {
-  width: 16px;
-  height: 16px;
-}
-
-.modal-title {
-  font-family: Poppins-Medium;
-  font-size: 14px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: normal;
-  text-align: left;
-  color: #fff;
-}
-
-.prepartido-text {
-  font-family: 'Poppins-Regular', 'BebasNeue', sans-serif;
-  font-weight: 400;
-  opacity: 0.7;
-  letter-spacing: 1px;
-}
-
-.modal-body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 12px 24px 0 24px;
-  margin-bottom: 17px;
-  margin-top: 5px;
-  gap: 0;
-  position: relative;
-  overflow: hidden;
-}
-
-.step-content {
-  transition: transform 0.3s ease-in-out;
-}
-
-.modal-body.transitioning .step-content {
-  transform: translateX(-100%);
-}
-
-.fortalezas-view {
-  transform: translateX(100%);
-  animation: slideIn 0.3s ease-in-out forwards;
-}
-
-@keyframes slideIn {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-.content-section {
-  background: none;
-  border: solid 1px rgba(255, 255, 255, 0.4);
-  padding: 12px 20px 20px 20px;
-  margin-bottom: 0;
-  border-radius: 8px;
-}
-
-.content-section:first-child {
-  margin-bottom: 20px;
-}
-
-.title-separator {
-  width: 100%;
-  height: 1px;
-  border-top: 1px dashed rgba(255, 255, 255, 0.3);
-  margin: 8px 0 12px 0;
-  margin-left: -20px;
-  margin-right: -20px;
-  width: calc(100% + 40px);
-}
-
-.content-separator {
-  width: 100%;
-  height: 1px;
-  border-top: 1px dashed rgba(255, 255, 255, 0.3);
-  margin: 12px 0 16px 0;
-  margin-left: -20px;
-  margin-right: -20px;
-  width: calc(100% + 40px);
-}
-
-.section-title {
-  font-family: Poppins-Medium;
-  font-size: 14px;
-  font-weight: 600;
-  opacity: 0.9;
-  color: #fff;
-  margin: 0 0 12px 0;
-}
-
-.section-description {
-  font-family: Poppins-Regular;
-  font-size: 12px;
-  line-height: 1.4;
-  opacity: 0.7;
-  color: #fff;
-  margin: 0 0 13px 0;
-}
-
-.radio-group {
-  display: flex;
-  gap: 24px;
-  justify-content: center;
-}
-
-.radio-option {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.radio-option input[type='radio'] {
-  display: none;
-}
-
-.radio-custom {
-  width: 20px;
-  height: 20px;
-  border: 1px solid #fff;
-  border-radius: 50%;
-  position: relative;
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-}
-
-.radio-option input[type='radio']:checked + .radio-custom {
-  border-color: #fff; /* mantiene el aro blanco */
-  background-color: transparent; /* sin relleno, solo punto central */
-}
-
-.radio-option input[type='radio']:checked + .radio-custom::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 10px;
-  height: 10px;
-  background-color: #cbee6b; /* punto verde */
-  border-radius: 50%;
-}
-
-/* Cuando el radio está seleccionado, la etiqueta pierde la opacidad */
-.radio-option input[type='radio']:checked + .radio-custom + .radio-label {
-  opacity: 0.9;
-}
-
-.radio-label {
-  font-family: Poppins-Regular;
-  font-size: 13px;
-  color: #fff;
-  opacity: 0.7;
-}
-
-/* Estilos del separador removidos */
-
-.modal-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 24px 12px 24px;
-  margin-top: 13px;
-}
-
-.footer-actions {
-  display: flex;
-  align-items: center;
-}
-
-.back-btn {
-  background: none;
-  border: none;
-  color: #fff;
-  font-size: 14px;
-  font-family: Poppins-Medium;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-  opacity: 0.7;
-  padding: 8px 0;
-  transition: opacity 0.2s;
-}
-
-.back-btn:hover {
-  opacity: 1;
-}
-
-.cancel-btn {
-  background: none;
-  border: none;
-  color: #b0bec5;
-  font-size: 14.9px;
-  font-family: Poppins-Medium;
-  height: 30px;
-  border-radius: 64px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 0 18px;
-  transition: color 0.2s;
-  text-decoration: underline;
-}
-
-.cancel-btn:hover {
-  color: #fff;
-}
-
-.next-btn {
-  width: 107px;
-  height: 30px;
-  border-radius: 79.2px;
-  -webkit-backdrop-filter: blur(19.8px);
-  backdrop-filter: blur(19.8px);
-  border: solid 1px #cbee6b;
-  background-color: rgba(255, 255, 255, 0.06);
-  font-family: Poppins-Medium;
-  font-size: 14.9px;
-  font-weight: 500;
-  color: #fff;
-  cursor: pointer;
-  transition: background 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.next-btn:hover {
-  background-color: rgba(255, 255, 255, 0.12);
-}
-
-.next-btn.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.next-btn.disabled:hover {
-  background-color: rgba(255, 255, 255, 0.06);
-}
-
-/* Estilos para el modal de confirmación */
-.confirm-dialog {
-  width: 380px;
-  max-width: 90%;
-}
-
-/* Asegurar que el overlay del modal de confirmación esté por encima del modal principal */
-.modal-overlay:has(.confirm-dialog) {
-  z-index: 3400;
-}
-
-.confirm-dialog .modal-header {
-  justify-content: center;
-}
-
-.confirm-dialog .modal-body {
-  text-align: center;
-}
-
-.confirm-dialog-title {
-  font-family: Poppins-Medium;
-  font-size: 16px;
-  font-weight: 500;
-  color: #fff;
-  margin: 0 0 12px 0;
-  text-align: center;
-}
-
-.confirm-dialog-message {
-  font-family: Poppins-Regular;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.7);
-  margin: 0;
-  text-align: center;
-  line-height: 1.5;
-}
-
-.confirm-dialog .modal-footer {
-  justify-content: center;
-}
-
-.confirm-dialog .footer-actions {
-  width: 100%;
-  justify-content: center;
-  gap: 12px;
-}
-
-/* Estilos para la vista de fortalezas movidos al componente FortalezasView.vue */
-</style>
+<template>
+  <div class="modal-overlay">
+    <div class="modal-content">
+      <!-- Botón de cerrar removido -->
+
+      <div class="modal-header">
+        <div class="header-left">
+          <img
+            src="https://golstatsimages.blob.core.windows.net/reports-images/icn-report-white.svg"
+            class="icon-title"
+            alt="icono reporte blanco"
+          />
+          <span class="modal-title"
+            >Generar reporte&nbsp; - &nbsp; <span class="prepartido-text">Prepartido</span></span
+          >
+        </div>
+        <div class="step-counter">
+          Paso {{ currentStep === 0 ? 1 : currentStep }} de {{ totalSteps }}
+        </div>
+      </div>
+      <div class="header-separator"></div>
+      <div class="modal-body" :class="{ transitioning: isTransitioning }">
+        <!-- Paso 0: Configuración inicial de opciones -->
+        <div v-if="currentStep === 0" class="step-content">
+          <!-- Sección Fortalezas - Solo se muestra si existen Fortalezas en el template -->
+          <div v-if="hasFortalezas" class="content-section">
+            <h3 class="section-title">Fortalezas</h3>
+            <div class="title-separator"></div>
+            <p class="section-description">
+              Este template contiene {{ fortalezasCounts.equipo }} visualizaciones de Fortalezas de
+              tu equipo y {{ fortalezasCounts.rival }} de tu rival. ¿Cómo prefieres que se agregue
+              este contenido?
+            </p>
+            <div class="content-separator"></div>
+            <div class="radio-group">
+              <label class="radio-option">
+                <input
+                  type="radio"
+                  name="fortalezas"
+                  value="automatico"
+                  v-model="fortalezasOption"
+                />
+                <span class="radio-custom"></span>
+                <span class="radio-label">Automáticamente</span>
+              </label>
+              <label class="radio-option">
+                <input type="radio" name="fortalezas" value="manual" v-model="fortalezasOption" />
+                <span class="radio-custom"></span>
+                <span class="radio-label">Manualmente</span>
+              </label>
+            </div>
+          </div>
+
+          <!-- Separador removido -->
+
+          <!-- Sección Tiros de esquina - OCULTA POR EL MOMENTO -->
+          <!-- <div v-if="hasCorners" class="content-section">
+            <h3 class="section-title">Tiros de esquina</h3>
+            <div class="title-separator"></div>
+            <p class="section-description">
+              Este template contiene 10 visualizaciones de Tiros de esquina de tu equipo. ¿Cómo
+              prefieres que se agregue este contenido?
+            </p>
+            <div class="content-separator"></div>
+            <div class="radio-group">
+              <label class="radio-option">
+                <input
+                  type="radio"
+                  name="tiros-esquina"
+                  value="automatico"
+                  v-model="tirosEsquinaOption"
+                />
+                <span class="radio-custom"></span>
+                <span class="radio-label">Automáticamente</span>
+              </label>
+              <label class="radio-option">
+                <input
+                  type="radio"
+                  name="tiros-esquina"
+                  value="manual"
+                  v-model="tirosEsquinaOption"
+                />
+                <span class="radio-custom"></span>
+                <span class="radio-label">Manualmente</span>
+              </label>
+            </div>
+          </div> -->
+        </div>
+
+        <!-- Pasos dinámicos renderizados por clave -->
+        <!-- Usamos v-show en lugar de v-if para mantener los componentes montados y preservar el estado -->
+        <template v-if="fortalezasCounts.equipo > 0">
+          <div v-show="buildStepMap()[currentStep] === 'fortalezasEquipo'" class="step-content">
+            <FortalezasView
+              key="fortalezas-equipo"
+              v-model="selectedFortalezasEquipo"
+              team-initials="AME"
+              :season-id="1772"
+              :team-id="props.partido?.local || props.partido?.home_team"
+              :rival-team-id="props.partido?.visita || props.partido?.visiting_team"
+              :token="props.token"
+              title="Fortalezas a favor de mi equipo"
+              :total-fortalezas="fortalezasCounts.equipo"
+              ref="fortalezasEquipoRef"
+            />
+          </div>
+        </template>
+
+        <template v-if="fortalezasCounts.rival > 0">
+          <div v-show="buildStepMap()[currentStep] === 'fortalezasRival'" class="step-content">
+            <FortalezasView
+              key="fortalezas-rival"
+              v-model="selectedFortalezasRival"
+              team-initials="RIV"
+              :season-id="1772"
+              :team-id="props.partido?.visita || props.partido?.visiting_team"
+              :rival-team-id="props.partido?.local || props.partido?.home_team"
+              :token="props.token"
+              title="Fortalezas a favor del rival"
+              :total-fortalezas="fortalezasCounts.rival"
+              ref="fortalezasRivalRef"
+            />
+          </div>
+        </template>
+
+        <div v-if="buildStepMap()[currentStep] === 'cornersEquipo'" class="step-content">
+          <TirosEsquinaView
+            v-model="selectedCornersEquipo"
+            :rival="false"
+            team-initials="AME"
+            title="Tiros de esquina en contra de mi equipo"
+            team-logo-url="https://golstatsimages.blob.core.windows.net/teams-80/2.png"
+            ref="cornersEquipoRef"
+          />
+        </div>
+
+        <div v-if="buildStepMap()[currentStep] === 'cornersRival'" class="step-content">
+          <TirosEsquinaView
+            v-model="selectedCornersRival"
+            :rival="true"
+            team-initials="RIV"
+            title="Tiros de esquina en contra del rival"
+            team-logo-url="https://golstatsimages.blob.core.windows.net/teams-80/1.png"
+            ref="cornersRivalRef"
+          />
+        </div>
+      </div>
+      <div class="header-separator"></div>
+      <div class="modal-footer">
+        <button class="back-btn" @click="goBack">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10 12L6 8L10 4"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          Regresar
+        </button>
+        <div class="footer-actions">
+          <button v-if="currentStep === 0" class="cancel-btn" @click="closeModal">Cancelar</button>
+          <button
+            v-if="currentStep === 1 || currentStep === 2"
+            class="cancel-btn"
+            @click="autocompletar"
+          >
+            Autocompletar
+          </button>
+          <button
+            class="next-btn"
+            :class="{ disabled: !canContinue }"
+            :disabled="!canContinue"
+            @click="continueToNext"
+          >
+            {{
+              currentStep === 0
+                ? fortalezasOption === 'automatico'
+                  ? 'Finalizar'
+                  : 'Siguiente'
+                : currentStep === totalSteps
+                  ? 'Finalizar'
+                  : 'Siguiente'
+            }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal de confirmación para regresar al paso 0 -->
+  <div v-if="showConfirmDialog" class="modal-overlay" @click.self="cancelGoBack">
+    <div class="modal-content confirm-dialog">
+      <div class="modal-header">
+        <div class="header-left">
+          <span class="modal-title">Confirmación</span>
+        </div>
+      </div>
+      <div class="header-separator"></div>
+      <div class="modal-body">
+        <div class="step-content">
+          <h3 class="confirm-dialog-title">¿Estás seguro de regresar?</h3>
+          <p class="confirm-dialog-message">Se perderá la información seleccionada</p>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <div class="footer-actions">
+          <button class="cancel-btn" @click="cancelGoBack">Cancelar</button>
+          <button class="next-btn" @click="confirmGoBackToStep0">Confirmar</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineEmits, computed, nextTick } from 'vue'
+import FortalezasView from './FortalezasView.vue'
+import TirosEsquinaView from './TirosEsquinaView.vue'
+
+const emit = defineEmits(['close', 'back', 'next'])
+
+// Props para controlar el número de pasos
+const props = defineProps({
+  hasRival: {
+    type: Boolean,
+    default: true,
+  },
+  token: {
+    type: String,
+    required: true,
+  },
+  template: {
+    type: Object,
+    required: false,
+    default: null,
+  },
+  team: {
+    type: Number,
+    required: false,
+    default: null,
+  },
+  partido: {
+    type: Object,
+    required: false,
+    default: null,
+  },
+})
+
+// Función para verificar si existe un componente Fortalezas en el template
+function tieneComponenteFortalezas() {
+  if (!props.template || !props.template.pages) {
+    return false
+  }
+
+  // Iterar sobre todas las pages del template
+  for (const page of props.template.pages) {
+    // Verificar si la page tiene components
+    if (page.components && Array.isArray(page.components)) {
+      // Buscar si existe algún componente con name === 'Fortalezas' o id === 15
+      const tieneFortalezas = page.components.some(
+        (component) => component.name === 'Fortalezas' || component.id === 15,
+      )
+      if (tieneFortalezas) {
+        return true
+      }
+    }
+  }
+
+  return false
+}
+
+// Función para contar Fortalezas del equipo propio y del rival
+function contarFortalezas() {
+  console.log(
+    '5555555555555555 Nuevo Valor al crear fortalezas:: : : :: : : : :: : : :',
+    props.template,
+  )
+  if (!props.template || !props.template.pages) {
+    return { equipo: 0, rival: 0, total: 0 }
+  }
+  console.log('Nuevo Valor al crear fortalezas:: : : :: : : : :: : : :', props.template)
+
+  let countEquipo = 0
+  let countRival = 0
+
+  // Iterar sobre todas las pages del template
+  for (const page of props.template.pages) {
+    console.log('page 11 5555555555555555555555555555555555 ', page)
+    // Verificar si la page tiene components
+    if (page.components && Array.isArray(page.components)) {
+      console.log('page entro')
+      // Filtrar componentes Fortalezas
+      const componentesFortalezas = page.components.filter(
+        (component) =>
+          component.componentName === 'GSCStrengths' ||
+          component.id === 15 ||
+          component.name === 'Fortalezas',
+      )
+      console.log(
+        'componentesFortalezas componentesFortalezas componentesFortalezas',
+        componentesFortalezas,
+      )
+      // Para cada componente Fortalezas, verificar dynamicFilters
+      for (const component of componentesFortalezas) {
+        // Verificar si tiene dynamicFilters y es un array
+        if (component.dynamicFilters && Array.isArray(component.dynamicFilters)) {
+          // Verificar la posición 1 (que es un array)
+          if (component.dynamicFilters[1]) {
+            // Consultar la posición 0 para determinar si es equipo propio (1) o rival (2)
+            if (component.dynamicFilters[0] === 1) {
+              countEquipo += component.dynamicFilters[1]
+            } else if (component.dynamicFilters[0] === 2) {
+              countRival += component.dynamicFilters[1]
+            } else {
+              if (component.dynamicFilters[0] === 3) {
+                if (component.filterMultiple.isHomeTeam) {
+                  countEquipo += component.dynamicFilters[1]
+                } else {
+                  countRival += component.dynamicFilters[1]
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return {
+    equipo: countEquipo,
+    rival: countRival,
+    total: countEquipo + countRival,
+  }
+}
+
+// Computed para verificar si tiene Fortalezas
+const hasFortalezas = computed(() => tieneComponenteFortalezas())
+
+// Computed para obtener los conteos de Fortalezas
+const fortalezasCounts = computed(() => contarFortalezas())
+
+// const hasCorners = false // OCULTO POR EL MOMENTO
+// Estado del modal
+const currentStep = ref(0) // 0 = configuración inicial, luego pasos dinámicos
+const isTransitioning = ref(false)
+
+// Modal de confirmación para regresar al paso 0
+const showConfirmDialog = ref(false)
+
+// Opciones seleccionadas para cada sección
+const fortalezasOption = ref('manual')
+const tirosEsquinaOption = ref('manual')
+
+// Selecciones por vista
+const selectedFortalezasEquipo = ref([])
+const selectedFortalezasRival = ref([])
+const selectedCornersEquipo = ref([])
+const selectedCornersRival = ref([])
+
+// Calcular el número total de pasos
+const totalSteps = computed(() => {
+  let steps = 0
+
+  // Pasos de Fortalezas
+  if (hasFortalezas.value && fortalezasOption.value === 'manual') {
+    // Si hay fortalezas de equipo, agregar paso 1
+    if (fortalezasCounts.value.equipo > 0) {
+      steps += 1
+    }
+    // Si hay fortalezas de rival, agregar paso (será 2 si hay equipo, 1 si no hay)
+    if (fortalezasCounts.value.rival > 0) {
+      steps += 1
+    }
+  }
+
+  // Pasos de Tiros de esquina - OCULTOS POR EL MOMENTO
+  // if (tirosEsquinaOption.value === 'manual') {
+  //   steps += props.hasRival ? 2 : 1
+  // }
+
+  return Math.max(steps, 1)
+})
+
+// Verificar si se puede continuar al siguiente paso
+const canContinue = computed(() => {
+  if (currentStep.value === 0) {
+    // Si no hay Fortalezas, no se puede continuar (tirosEsquina está oculto)
+    if (!hasFortalezas.value) {
+      return false
+    }
+    // Puede continuar si está en automático o en manual
+    return fortalezasOption.value === 'automatico' || fortalezasOption.value === 'manual'
+  }
+  const stepMap = buildStepMap()
+  const key = stepMap[currentStep.value]
+
+  if (key === 'fortalezasEquipo') {
+    const ref = fortalezasEquipoRef.value
+    if (!ref) return false
+    const selected = selectedFortalezasEquipo.value.length
+    const totalRequerido = fortalezasCounts.value.equipo
+    // Obtener el total de fortalezas disponibles del componente
+    const totalDisponibles = ref.fortalezasData?.length || 0
+
+    // Puede continuar si:
+    // 1. Selecciona el total exacto requerido
+    // 2. O si no hay suficientes disponibles, selecciona todos los disponibles
+    return (
+      selected === totalRequerido ||
+      (totalDisponibles > 0 && totalDisponibles < totalRequerido && selected === totalDisponibles)
+    )
+  }
+
+  if (key === 'fortalezasRival') {
+    const ref = fortalezasRivalRef.value
+    if (!ref) return false
+    const selected = selectedFortalezasRival.value.length
+    const totalRequerido = fortalezasCounts.value.rival
+    // Obtener el total de fortalezas disponibles del componente
+    const totalDisponibles = ref.fortalezasData?.length || 0
+
+    // Puede continuar si:
+    // 1. Selecciona el total exacto requerido
+    // 2. O si no hay suficientes disponibles, selecciona todos los disponibles
+    return (
+      selected === totalRequerido ||
+      (totalDisponibles > 0 && totalDisponibles < totalRequerido && selected === totalDisponibles)
+    )
+  }
+
+  // Pasos de corners ocultos
+  // if (key === 'cornersEquipo') return selectedCornersEquipo.value.length > 0
+  // if (key === 'cornersRival') return selectedCornersRival.value.length > 0
+  return false
+})
+
+function buildStepMap() {
+  const order = []
+
+  // Solo agregar pasos de Fortalezas si existen en el template y está en modo manual
+  if (hasFortalezas.value && fortalezasOption.value === 'manual') {
+    // Si hay fortalezas de equipo, agregar paso de equipo
+    if (fortalezasCounts.value.equipo > 0) {
+      order.push('fortalezasEquipo')
+    }
+    // Si hay fortalezas de rival, agregar paso de rival
+    if (fortalezasCounts.value.rival > 0) {
+      order.push('fortalezasRival')
+    }
+  }
+
+  // Pasos de Tiros de esquina - OCULTOS POR EL MOMENTO
+  // if (tirosEsquinaOption.value === 'manual') {
+  //   order.push('cornersEquipo')
+  //   if (props.hasRival) order.push('cornersRival')
+  // }
+
+  const map = {}
+  order.forEach((k, idx) => {
+    map[idx + 1] = k // pasos empiezan en 1
+  })
+  return map
+}
+
+// Referencias a los componentes
+const fortalezasEquipoRef = ref(null)
+const fortalezasRivalRef = ref(null)
+const cornersEquipoRef = ref(null)
+const cornersRivalRef = ref(null)
+
+function closeModal() {
+  emit('close')
+}
+
+function goBack() {
+  if (currentStep.value > 1) {
+    // Si estamos en paso 2 o superior, solo regresar sin borrar selecciones
+    currentStep.value--
+  } else if (currentStep.value === 1) {
+    // Si estamos en paso 1 y vamos al paso 0, mostrar modal de confirmación
+    // Verificar si hay selecciones antes de mostrar el modal
+    const tieneSelecciones =
+      selectedFortalezasEquipo.value.length > 0 || selectedFortalezasRival.value.length > 0
+
+    if (tieneSelecciones) {
+      showConfirmDialog.value = true
+    } else {
+      // Si no hay selecciones, regresar directamente
+      currentStep.value--
+    }
+  } else {
+    // Si estamos en paso 0, emitir evento back
+    emit('back')
+  }
+}
+
+function confirmGoBackToStep0() {
+  // Limpiar todas las selecciones
+  selectedFortalezasEquipo.value = []
+  selectedFortalezasRival.value = []
+  selectedCornersEquipo.value = []
+  selectedCornersRival.value = []
+
+  // Cerrar el modal de confirmación
+  showConfirmDialog.value = false
+
+  // Regresar al paso 0
+  currentStep.value--
+}
+
+function cancelGoBack() {
+  // Cerrar el modal de confirmación sin hacer nada
+  showConfirmDialog.value = false
+}
+
+async function continueToNext() {
+  if (currentStep.value === 0) {
+    // Validar que al menos una opción esté seleccionada
+    if (!canContinue.value) {
+      return
+    }
+
+    // Si está en automático, finalizar directamente sin construir payload
+    if (fortalezasOption.value === 'automatico') {
+      // Emitir evento sin payload de strengths (se generarán automáticamente)
+      emit('next', {
+        fortalezas: fortalezasOption.value,
+        tirosEsquina: tirosEsquinaOption.value,
+        selectedFortalezasEquipo: [],
+        selectedFortalezasRival: [],
+        strengthsPayload: {}, // Payload vacío para modo automático
+      })
+      return
+    }
+
+    // Si es manual, avanzar al siguiente paso
+    // Animar transición
+    isTransitioning.value = true
+    setTimeout(() => {
+      currentStep.value++
+      isTransitioning.value = false
+    }, 300)
+  } else if (currentStep.value < totalSteps.value) {
+    // Avanzar al siguiente paso
+    isTransitioning.value = true
+    setTimeout(() => {
+      currentStep.value++
+      isTransitioning.value = false
+    }, 300)
+  } else {
+    // Esperar un tick para asegurar que los refs estén disponibles
+    await nextTick()
+
+    // Construir el payload de fortalezas antes de emitir
+    const strengthsPayload = buildStrengthsPayload()
+    console.log('Estructura de strengths emitida:', JSON.stringify(strengthsPayload, null, 2))
+
+    // Emitir evento con las opciones seleccionadas y el payload de fortalezas
+    emit('next', {
+      fortalezas: fortalezasOption.value,
+      tirosEsquina: tirosEsquinaOption.value,
+      selectedFortalezasEquipo: selectedFortalezasEquipo.value,
+      selectedFortalezasRival: selectedFortalezasRival.value,
+      strengthsPayload,
+    })
+  }
+}
+
+// Función para construir el payload de fortalezas según la estructura requerida
+function buildStrengthsPayload() {
+  console.log('=== INICIANDO buildStrengthsPayload ===')
+  console.log('Template:', props.template)
+  console.log('Template pages:', props.template?.pages)
+
+  if (!props.template || !props.template.pages) {
+    console.warn('No hay template o pages')
+    return {}
+  }
+
+  const payload = {}
+
+  console.log('selectedFortalezasEquipo:', selectedFortalezasEquipo.value)
+  console.log('selectedFortalezasRival:', selectedFortalezasRival.value)
+  console.log('fortalezasEquipoRef:', fortalezasEquipoRef.value)
+  console.log('fortalezasRivalRef:', fortalezasRivalRef.value)
+
+  // Verificar si los refs están disponibles
+  let equipoRef = fortalezasEquipoRef.value
+  let rivalRef = fortalezasRivalRef.value
+
+  // Debug detallado de los refs
+  if (equipoRef) {
+    console.log('equipoRef keys:', Object.keys(equipoRef))
+    console.log('equipoRef.fortalezasRawData:', equipoRef.fortalezasRawData)
+    console.log('equipoRef.fortalezasRawData type:', typeof equipoRef.fortalezasRawData)
+
+    // Verificar si es un ref (tiene .value)
+    let rawDataEquipo = equipoRef.fortalezasRawData
+    if (rawDataEquipo && typeof rawDataEquipo === 'object' && 'value' in rawDataEquipo) {
+      console.log('⚠️ fortalezasRawData es un ref, usando .value')
+      rawDataEquipo = rawDataEquipo.value
+    }
+
+    console.log('rawDataEquipo después de verificar ref:', rawDataEquipo)
+    console.log('rawDataEquipo is array:', Array.isArray(rawDataEquipo))
+    if (Array.isArray(rawDataEquipo)) {
+      console.log('rawDataEquipo length:', rawDataEquipo.length)
+      if (rawDataEquipo.length > 0) {
+        console.log('Primer elemento equipoRef:', rawDataEquipo[0])
+      }
+    }
+  } else {
+    console.error('❌ equipoRef NO está disponible')
+  }
+
+  if (rivalRef) {
+    console.log('rivalRef keys:', Object.keys(rivalRef))
+    console.log('rivalRef.fortalezasRawData:', rivalRef.fortalezasRawData)
+    console.log('rivalRef.fortalezasRawData type:', typeof rivalRef.fortalezasRawData)
+
+    // Verificar si es un ref (tiene .value)
+    let rawDataRival = rivalRef.fortalezasRawData
+    if (rawDataRival && typeof rawDataRival === 'object' && 'value' in rawDataRival) {
+      console.log('⚠️ fortalezasRawData es un ref, usando .value')
+      rawDataRival = rawDataRival.value
+    }
+
+    console.log('rawDataRival después de verificar ref:', rawDataRival)
+    console.log('rawDataRival is array:', Array.isArray(rawDataRival))
+    if (Array.isArray(rawDataRival)) {
+      console.log('rawDataRival length:', rawDataRival.length)
+      if (rawDataRival.length > 0) {
+        console.log('Primer elemento rivalRef:', rawDataRival[0])
+      }
+    }
+  } else {
+    console.error('❌ rivalRef NO está disponible')
+  }
+
+  // Si los refs no están disponibles, podría ser que los componentes estén ocultos con v-show
+  if (!equipoRef && selectedFortalezasEquipo.value.length > 0) {
+    console.warn('⚠️ Ref de equipo no disponible, pero hay selecciones')
+  }
+  if (!rivalRef && selectedFortalezasRival.value.length > 0) {
+    console.warn('⚠️ Ref de rival no disponible, pero hay selecciones')
+  }
+
+  // Obtener todas las fortalezas seleccionadas ordenadas por su orden de selección
+  const fortalezasEquipoOrdenadas = getOrderedStrengths(selectedFortalezasEquipo.value, equipoRef)
+  const fortalezasRivalOrdenadas = getOrderedStrengths(selectedFortalezasRival.value, rivalRef)
+
+  console.log('fortalezasEquipoOrdenadas:', fortalezasEquipoOrdenadas)
+  console.log('fortalezasRivalOrdenadas:', fortalezasRivalOrdenadas)
+
+  // Contadores para rastrear qué fortalezas ya se han asignado
+  let indexEquipo = 0
+  let indexRival = 0
+
+  // Iterar sobre todas las páginas del template
+  props.template.pages.forEach((page, pageIndex) => {
+    const pageNumber = pageIndex + 1 // Los índices de página empiezan en 1
+    console.log(`\n=== Página ${pageNumber} ===`)
+    console.log('Page components:', page.components)
+
+    // Verificar si la página tiene components
+    if (page.components && Array.isArray(page.components)) {
+      // Buscar componentes Fortalezas
+      page.components.forEach((component, componentIndex) => {
+        if (component.name === 'Fortalezas' || component.id === 15) {
+          const componentNumber = componentIndex + 1 // Los índices de componente empiezan en 1
+          console.log(`\n--- Componente ${componentNumber} (Fortalezas) ---`)
+          console.log('Component:', component)
+          console.log('dynamicFilters:', component.dynamicFilters)
+
+          // Verificar dynamicFilters para determinar tipo y cantidad
+          if (component.dynamicFilters && Array.isArray(component.dynamicFilters)) {
+            const teamType = component.dynamicFilters[0] // 1 = equipo, 2 = rival
+            const cantidadRequerida = component.dynamicFilters[1] || 0 // Cantidad de fortalezas necesarias
+
+            console.log(
+              `Tipo: ${teamType === 1 ? 'Equipo' : 'Rival'}, Cantidad requerida: ${cantidadRequerida}`,
+            )
+
+            // Obtener las fortalezas según el tipo
+            let fortalezasAsignar = []
+            let fortalezasOrdenadas = []
+            let teamId = props.team
+
+            if (teamType === 1) {
+              // Fortalezas de equipo
+              fortalezasOrdenadas = fortalezasEquipoOrdenadas
+              console.log(
+                `Equipo: Total ordenadas=${fortalezasOrdenadas.length}, index=${indexEquipo}, cantidad requerida=${cantidadRequerida}`,
+              )
+              // Tomar las siguientes N fortalezas (donde N = cantidadRequerida)
+              if (fortalezasOrdenadas.length > indexEquipo) {
+                fortalezasAsignar = fortalezasOrdenadas.slice(
+                  indexEquipo,
+                  indexEquipo + cantidadRequerida,
+                )
+                console.log(
+                  `Index equipo: ${indexEquipo}, tomando ${fortalezasAsignar.length} fortalezas de ${fortalezasOrdenadas.length} disponibles`,
+                )
+              } else {
+                console.warn(
+                  `No hay suficientes fortalezas de equipo. Disponibles: ${fortalezasOrdenadas.length}, Necesarias desde índice: ${indexEquipo}`,
+                )
+              }
+              indexEquipo += cantidadRequerida
+              teamId = props.partido?.local || props.partido?.home_team || props.team
+            } else if (teamType === 2) {
+              // Fortalezas de rival
+              fortalezasOrdenadas = fortalezasRivalOrdenadas
+              console.log(
+                `Rival: Total ordenadas=${fortalezasOrdenadas.length}, index=${indexRival}, cantidad requerida=${cantidadRequerida}`,
+              )
+              // Tomar las siguientes N fortalezas (donde N = cantidadRequerida)
+              if (fortalezasOrdenadas.length > indexRival) {
+                fortalezasAsignar = fortalezasOrdenadas.slice(
+                  indexRival,
+                  indexRival + cantidadRequerida,
+                )
+                console.log(
+                  `Index rival: ${indexRival}, tomando ${fortalezasAsignar.length} fortalezas de ${fortalezasOrdenadas.length} disponibles`,
+                )
+              } else {
+                console.warn(
+                  `No hay suficientes fortalezas de rival. Disponibles: ${fortalezasOrdenadas.length}, Necesarias desde índice: ${indexRival}`,
+                )
+              }
+              indexRival += cantidadRequerida
+              teamId = props.partido?.visita || props.partido?.visiting_team
+            }
+
+            console.log('fortalezasAsignar:', fortalezasAsignar)
+
+            // Si hay fortalezas para asignar, agregarlas al payload
+            if (fortalezasAsignar.length > 0) {
+              // Inicializar la estructura si no existe
+              if (!payload[pageNumber]) {
+                payload[pageNumber] = {}
+              }
+              if (!payload[pageNumber][componentNumber]) {
+                payload[pageNumber][componentNumber] = []
+              }
+
+              // Agregar las fortalezas con su información completa
+              fortalezasAsignar.forEach((strength, index) => {
+                payload[pageNumber][componentNumber].push({
+                  team_id: teamId,
+                  ranking_type: strength.ranking_type || 1,
+                  precondition_id: strength.precondition_id || null,
+                  order: index + 1,
+                  name: strength.name,
+                  category_type: strength.category_type || 1,
+                  total: strength.total || 0,
+                  is_relevant: strength.is_relevant || 0,
+                  league_ranking: strength.league_ranking || 0,
+                  categories: Array.isArray(strength.categories)
+                    ? strength.categories
+                    : [strength.categories],
+                  team_contribution: strength.team_contribution || 0,
+                })
+              })
+              console.log(`✓ Agregadas ${fortalezasAsignar.length} fortalezas al payload`)
+            } else {
+              console.warn('No hay fortalezas para asignar a este componente')
+            }
+          } else {
+            console.warn('Componente no tiene dynamicFilters válido')
+          }
+        }
+      })
+    }
+  })
+
+  console.log('\n=== PAYLOAD FINAL ===')
+  console.log(JSON.stringify(payload, null, 2))
+  return payload
+}
+
+// Función auxiliar para obtener las fortalezas en el mismo orden que fueron seleccionadas
+// Los IDs ya vienen en el orden correcto, solo necesitamos obtener los objetos completos
+function getOrderedStrengths(selectedIds, fortalezasViewRef) {
+  console.log('=== getOrderedStrengths INICIO ===')
+  console.log('selectedIds (orden de selección):', selectedIds)
+  console.log('fortalezasViewRef existe?:', !!fortalezasViewRef)
+
+  if (!selectedIds || selectedIds.length === 0) {
+    console.warn('No hay IDs seleccionados')
+    return []
+  }
+
+  if (!fortalezasViewRef) {
+    console.warn('Ref no disponible')
+    return []
+  }
+
+  // Obtener fortalezasRawData, verificando si es un ref
+  let fortalezasRawData = fortalezasViewRef.fortalezasRawData
+  if (!fortalezasRawData) {
+    console.warn('fortalezasRawData no está disponible en el ref')
+    return []
+  }
+
+  // Si es un ref, acceder a su .value
+  if (fortalezasRawData && typeof fortalezasRawData === 'object' && 'value' in fortalezasRawData) {
+    console.log('⚠️ fortalezasRawData es un ref, accediendo a .value')
+    fortalezasRawData = fortalezasRawData.value
+  }
+
+  if (!Array.isArray(fortalezasRawData)) {
+    console.warn('fortalezasRawData no es un array:', typeof fortalezasRawData, fortalezasRawData)
+    return []
+  }
+
+  if (fortalezasRawData.length === 0) {
+    console.warn('fortalezasRawData está vacío')
+    return []
+  }
+
+  console.log('fortalezasRawData length:', fortalezasRawData.length)
+  console.log('Primeras 2 fortalezas raw:', fortalezasRawData.slice(0, 2))
+
+  // Obtener las fortalezas en el mismo orden que fueron seleccionadas (sin reordenar)
+  // El orden ya está dado por selectedIds, solo necesitamos buscar y devolver el objeto completo
+  const selectedStrengths = selectedIds
+    .map((id) => {
+      console.log(`Buscando ID: ${id} (tipo: ${typeof id})`)
+
+      // Buscar en los datos raw por categories (que es el id que usamos)
+      const strength = fortalezasRawData.find((item) => {
+        // Comparar tanto como número como string
+        const match =
+          item.categories === id ||
+          item.categories === Number(id) ||
+          String(item.categories) === String(id)
+        if (!match && fortalezasRawData.indexOf(item) < 3) {
+          console.log(
+            `  Comparando: item.categories=${item.categories} (${typeof item.categories}) vs id=${id} (${typeof id})`,
+          )
+        }
+        return match
+      })
+
+      if (strength) {
+        console.log(`✓ Encontrada: ${strength.name} (categories: ${strength.categories})`)
+        return strength
+      }
+
+      console.warn(`✗ No encontrada con categories = ${id}, intentando por id`)
+      // Intentar buscar también por id si categories no funciona
+      const strengthById = fortalezasRawData.find(
+        (item) => item.id === id || item.id === Number(id) || String(item.id) === String(id),
+      )
+      if (strengthById) {
+        console.log(`✓ Encontrada por id: ${strengthById.name}`)
+        return strengthById
+      }
+
+      console.error(`✗✗ No se encontró fortaleza con id/categories = ${id}`)
+      return null
+    })
+    .filter(Boolean) // Filtrar los que no se encontraron
+
+  console.log(
+    `selectedStrengths (${selectedStrengths.length} de ${selectedIds.length} encontradas):`,
+    selectedStrengths,
+  )
+  console.log('=== getOrderedStrengths FIN ===')
+  return selectedStrengths
+}
+
+function autocompletar() {
+  const stepMap = buildStepMap()
+  const key = stepMap[currentStep.value]
+  if (key === 'fortalezasEquipo' && fortalezasEquipoRef.value)
+    return fortalezasEquipoRef.value.autocompletar()
+  if (key === 'fortalezasRival' && fortalezasRivalRef.value)
+    return fortalezasRivalRef.value.autocompletar()
+  if (key === 'cornersEquipo' && cornersEquipoRef.value)
+    return cornersEquipoRef.value.autocompletar()
+  if (key === 'cornersRival' && cornersRivalRef.value) return cornersRivalRef.value.autocompletar()
+}
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 3300;
+}
+
+.modal-content {
+  width: 464px;
+  background: #2e3b46;
+  border-radius: 10px;
+  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.18);
+  padding: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  font-family: 'Poppins-Medium', 'Montserrat', sans-serif;
+}
+
+/* Estilos del botón de cerrar removidos */
+
+.header-separator {
+  width: 100%;
+  height: 1px;
+  border-bottom: dashed 1px #58626b;
+  margin: 12px 0 0 0;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px 0 24px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.step-counter {
+  font-family: Poppins-Medium;
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.icon-title {
+  width: 16px;
+  height: 16px;
+}
+
+.modal-title {
+  font-family: Poppins-Medium;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: normal;
+  text-align: left;
+  color: #fff;
+}
+
+.prepartido-text {
+  font-family: 'Poppins-Regular', 'BebasNeue', sans-serif;
+  font-weight: 400;
+  opacity: 0.7;
+  letter-spacing: 1px;
+}
+
+.modal-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 12px 24px 0 24px;
+  margin-bottom: 17px;
+  margin-top: 5px;
+  gap: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.step-content {
+  transition: transform 0.3s ease-in-out;
+}
+
+.modal-body.transitioning .step-content {
+  transform: translateX(-100%);
+}
+
+.fortalezas-view {
+  transform: translateX(100%);
+  animation: slideIn 0.3s ease-in-out forwards;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.content-section {
+  background: none;
+  border: solid 1px rgba(255, 255, 255, 0.4);
+  padding: 12px 20px 20px 20px;
+  margin-bottom: 0;
+  border-radius: 8px;
+}
+
+.content-section:first-child {
+  margin-bottom: 20px;
+}
+
+.title-separator {
+  width: 100%;
+  height: 1px;
+  border-top: 1px dashed rgba(255, 255, 255, 0.3);
+  margin: 8px 0 12px 0;
+  margin-left: -20px;
+  margin-right: -20px;
+  width: calc(100% + 40px);
+}
+
+.content-separator {
+  width: 100%;
+  height: 1px;
+  border-top: 1px dashed rgba(255, 255, 255, 0.3);
+  margin: 12px 0 16px 0;
+  margin-left: -20px;
+  margin-right: -20px;
+  width: calc(100% + 40px);
+}
+
+.section-title {
+  font-family: Poppins-Medium;
+  font-size: 14px;
+  font-weight: 600;
+  opacity: 0.9;
+  color: #fff;
+  margin: 0 0 12px 0;
+}
+
+.section-description {
+  font-family: Poppins-Regular;
+  font-size: 12px;
+  line-height: 1.4;
+  opacity: 0.7;
+  color: #fff;
+  margin: 0 0 13px 0;
+}
+
+.radio-group {
+  display: flex;
+  gap: 24px;
+  justify-content: center;
+}
+
+.radio-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.radio-option input[type='radio'] {
+  display: none;
+}
+
+.radio-custom {
+  width: 20px;
+  height: 20px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  position: relative;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.radio-option input[type='radio']:checked + .radio-custom {
+  border-color: #fff; /* mantiene el aro blanco */
+  background-color: transparent; /* sin relleno, solo punto central */
+}
+
+.radio-option input[type='radio']:checked + .radio-custom::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 10px;
+  height: 10px;
+  background-color: #cbee6b; /* punto verde */
+  border-radius: 50%;
+}
+
+/* Cuando el radio está seleccionado, la etiqueta pierde la opacidad */
+.radio-option input[type='radio']:checked + .radio-custom + .radio-label {
+  opacity: 0.9;
+}
+
+.radio-label {
+  font-family: Poppins-Regular;
+  font-size: 13px;
+  color: #fff;
+  opacity: 0.7;
+}
+
+/* Estilos del separador removidos */
+
+.modal-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 24px 12px 24px;
+  margin-top: 13px;
+}
+
+.footer-actions {
+  display: flex;
+  align-items: center;
+}
+
+.back-btn {
+  background: none;
+  border: none;
+  color: #fff;
+  font-size: 14px;
+  font-family: Poppins-Medium;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  opacity: 0.7;
+  padding: 8px 0;
+  transition: opacity 0.2s;
+}
+
+.back-btn:hover {
+  opacity: 1;
+}
+
+.cancel-btn {
+  background: none;
+  border: none;
+  color: #b0bec5;
+  font-size: 14.9px;
+  font-family: Poppins-Medium;
+  height: 30px;
+  border-radius: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0 18px;
+  transition: color 0.2s;
+  text-decoration: underline;
+}
+
+.cancel-btn:hover {
+  color: #fff;
+}
+
+.next-btn {
+  width: 107px;
+  height: 30px;
+  border-radius: 79.2px;
+  -webkit-backdrop-filter: blur(19.8px);
+  backdrop-filter: blur(19.8px);
+  border: solid 1px #cbee6b;
+  background-color: rgba(255, 255, 255, 0.06);
+  font-family: Poppins-Medium;
+  font-size: 14.9px;
+  font-weight: 500;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.next-btn:hover {
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+.next-btn.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.next-btn.disabled:hover {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+/* Estilos para el modal de confirmación */
+.confirm-dialog {
+  width: 380px;
+  max-width: 90%;
+}
+
+/* Asegurar que el overlay del modal de confirmación esté por encima del modal principal */
+.modal-overlay:has(.confirm-dialog) {
+  z-index: 3400;
+}
+
+.confirm-dialog .modal-header {
+  justify-content: center;
+}
+
+.confirm-dialog .modal-body {
+  text-align: center;
+}
+
+.confirm-dialog-title {
+  font-family: Poppins-Medium;
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+  margin: 0 0 12px 0;
+  text-align: center;
+}
+
+.confirm-dialog-message {
+  font-family: Poppins-Regular;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.7);
+  margin: 0;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.confirm-dialog .modal-footer {
+  justify-content: center;
+}
+
+.confirm-dialog .footer-actions {
+  width: 100%;
+  justify-content: center;
+  gap: 12px;
+}
+
+/* Estilos para la vista de fortalezas movidos al componente FortalezasView.vue */
+</style>