@golstats/gsc-reports 1.0.0

package/src/components/elementsTemplates/ModalGenerarReporte.vue

@@ -0,0 +1,1151 @@
+<template>
+  <div class="modal-overlay" @click.self="$emit('close')">
+    <div class="modal-content">
+      <button class="close-btn" @click="$emit('close')">
+        <img src="/icons/icn-close.svg" alt="Cerrar" />
+      </button>
+      <div class="modal-header">
+        <img src="/icons/icn-report-white.svg" class="icon-title" alt="icono reporte blanco" />
+        <span class="modal-title">Generar reporte</span>
+      </div>
+      <div class="header-separator"></div>
+      <div class="modal-body">
+        <!-- Mostrar mensaje de error cuando ya existe el reporte -->
+        <div v-if="showError409" class="error-message-container">
+          <p class="error-text">
+            Este reporte ya fue generado previamente<br />
+            con este template para el partido seleccionado.
+          </p>
+          <button class="accept-btn" @click="closeModal">Aceptar</button>
+        </div>
+
+        <!-- Mostrar selectores solo cuando no hay error 409 -->
+        <div v-else>
+          <div class="modal-group">
+            <label>1. Elige la liga</label>
+            <div
+              class="select-wrapper custom-dropdown liga-select"
+              tabindex="0"
+              @click="showDropdownLigas = !showDropdownLigas"
+              @blur="showDropdownLigas = false"
+            >
+              <div
+                class="custom-select-display"
+                :class="{ disabled: loading || ligas.length === 0 }"
+              >
+                <template v-if="loading">
+                  <span class="placeholder"
+                    ><span class="loading-spinner select-spinner"></span>Cargando ligas...</span
+                  >
+                </template>
+                <template v-else>
+                  <span v-if="!selectedLiga" class="placeholder">Selecciona la liga</span>
+                  <span v-else>{{ selectedLiga.name }}</span>
+                </template>
+                <span class="select-chevron" :class="{ open: showDropdownLigas }">
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M5 7L8 10L11 7"
+                      stroke="white"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </span>
+              </div>
+              <div v-if="showDropdownLigas && ligas.length > 0" class="custom-select-dropdown">
+                <div
+                  v-for="liga in ligas"
+                  :key="liga.name"
+                  class="custom-select-option"
+                  @mousedown.prevent="selectLiga(liga)"
+                >
+                  {{ liga.name }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-row">
+            <div class="modal-group">
+              <label>2. Elige el torneo</label>
+              <div
+                class="select-wrapper custom-dropdown torneo-select"
+                tabindex="0"
+                @click="showDropdownTorneos = !showDropdownTorneos"
+                @blur="showDropdownTorneos = false"
+              >
+                <div
+                  class="custom-select-display"
+                  :class="{ disabled: !selectedLiga || torneos.length === 0 || loading }"
+                >
+                  <template v-if="loading">
+                    <span class="placeholder"
+                      ><span class="loading-spinner select-spinner"></span>Cargando torneos...</span
+                    >
+                  </template>
+                  <template v-else>
+                    <span v-if="!selectedTorneo" class="placeholder">Elige el torneo</span>
+                    <span v-else>{{ selectedTorneo.name }}</span>
+                  </template>
+                  <span class="select-chevron" :class="{ open: showDropdownTorneos }">
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M5 7L8 10L11 7"
+                        stroke="white"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </div>
+                <div
+                  v-if="showDropdownTorneos && torneos.length > 0 && selectedLiga"
+                  class="custom-select-dropdown"
+                >
+                  <div
+                    v-for="season in torneos"
+                    :key="season.id"
+                    class="custom-select-option"
+                    @mousedown.prevent="selectTorneo(season)"
+                  >
+                    {{ season.name }}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="modal-group">
+              <label>3. Elige la jornada</label>
+              <div
+                class="select-wrapper custom-dropdown jornada-select"
+                tabindex="0"
+                @click="showDropdownJornadas = !showDropdownJornadas"
+                @blur="showDropdownJornadas = false"
+              >
+                <div
+                  class="custom-select-display"
+                  :class="{ disabled: !selectedTorneo || jornadas.length === 0 || loadingJornadas }"
+                >
+                  <template v-if="loadingJornadas">
+                    <span class="placeholder"
+                      ><span class="loading-spinner select-spinner"></span>Cargando
+                      jornadas...</span
+                    >
+                  </template>
+                  <template v-else>
+                    <span v-if="!selectedJornada" class="placeholder">Elige la jornada</span>
+                    <span v-else>{{ selectedJornada.name }}</span>
+                  </template>
+                  <span class="select-chevron" :class="{ open: showDropdownJornadas }">
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M5 7L8 10L11 7"
+                        stroke="white"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </div>
+                <div
+                  v-if="showDropdownJornadas && jornadas.length > 0 && selectedTorneo"
+                  class="custom-select-dropdown"
+                >
+                  <div
+                    v-for="jornada in jornadas"
+                    :key="jornada.id"
+                    class="custom-select-option"
+                    @mousedown.prevent="selectJornada(jornada)"
+                  >
+                    {{ jornada.name }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-group">
+            <label>4. Elige el partido</label>
+            <div
+              class="select-wrapper partido-select"
+              tabindex="0"
+              @click="showDropdownPartidos = !showDropdownPartidos"
+              @blur="showDropdownPartidos = false"
+            >
+              <div
+                class="custom-select-display"
+                :class="{ disabled: !selectedJornada || loadingPartidos }"
+              >
+                <template v-if="loadingPartidos">
+                  <span class="placeholder"
+                    ><span class="loading-spinner select-spinner"></span>Cargando partidos...</span
+                  >
+                </template>
+                <template v-else>
+                  <span v-if="!selectedPartido" class="placeholder">Selecciona el partido</span>
+                  <template v-else>
+                    <img
+                      v-if="selectedPartido.localLogo"
+                      :src="selectedPartido.localLogo"
+                      class="logo-equipo"
+                      alt="local"
+                    />
+                    <span>{{ selectedPartido.label }}</span>
+                    <img
+                      v-if="selectedPartido.visitanteLogo"
+                      :src="selectedPartido.visitanteLogo"
+                      class="logo-equipo"
+                      alt="visitante"
+                    />
+                  </template>
+                </template>
+                <span class="select-chevron" :class="{ open: showDropdownPartidos }">
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M5 7L8 10L11 7"
+                      stroke="white"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </span>
+              </div>
+              <div
+                v-if="showDropdownPartidos && !loadingPartidos && selectedJornada"
+                class="custom-select-dropdown"
+              >
+                <div
+                  v-for="partido in partidos"
+                  :key="partido.label"
+                  class="custom-select-option"
+                  @mousedown.prevent="selectPartido(partido)"
+                >
+                  <img :src="partido.localLogo" class="logo-equipo" alt="local" />
+                  <span>{{ partido.label }}</span>
+                  <img :src="partido.visitanteLogo" class="logo-equipo" alt="visitante" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="header-separator" v-if="!showError409"></div>
+      <div class="modal-footer" v-if="!showError409">
+        <button class="cancel-btn" @click="$emit('close')">Cancelar</button>
+        <button
+          class="next-btn"
+          :disabled="
+            !selectedLiga || !selectedTorneo || !selectedJornada || !selectedPartido || loading
+          "
+          @click="generarReporte"
+        >
+          <span v-if="loading" class="loading-spinner select-spinner"></span>
+          {{ loading ? 'Generando...' : 'Generar' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineEmits, onMounted } from 'vue'
+import axios from 'axios'
+
+const props = defineProps({
+  userId: {
+    type: String,
+    required: true,
+  },
+  token: {
+    type: String,
+    required: true,
+  },
+  templateId: {
+    type: String,
+    required: true,
+  },
+  templateType: {
+    type: String,
+    required: false,
+  },
+})
+
+const emit = defineEmits(['close', 'generar', 'switch-to-reports'])
+
+const ligas = ref([]) // Aquí se guardan los torneos
+const torneos = ref([]) // Aquí se guardan las seasons del torneo seleccionado
+const jornadas = ref([])
+const partidos = ref([])
+
+const selectedLiga = ref('') // Aquí se guarda el torneo seleccionado
+const selectedTorneo = ref('') // Aquí se guarda la season seleccionada
+const selectedJornada = ref('')
+const selectedPartido = ref(null)
+
+const axiosInstance = axios.create({
+  headers: {
+    Authorization: props.token,
+  },
+})
+const showDropdownPartidos = ref(false)
+const loading = ref(false)
+const loadingPartidos = ref(false)
+const loadingJornadas = ref(false)
+const showError409 = ref(false) // Controla la visualización del mensaje de error 409
+const torneosRaw = ref([]) // Aquí se guarda el response.data completo
+const allPartidos = ref([]) // Guardar todos los partidos de la season seleccionada
+
+// Reemplazar los selects de liga, torneo y jornada por dropdowns personalizados:
+// Liga
+const showDropdownLigas = ref(false)
+const showDropdownTorneos = ref(false)
+const showDropdownJornadas = ref(false)
+
+function selectLiga(liga) {
+  selectedLiga.value = liga
+  showDropdownLigas.value = false
+  onLigaChange()
+}
+function selectTorneo(season) {
+  selectedTorneo.value = season
+  showDropdownTorneos.value = false
+  onTorneoChange()
+}
+function selectJornada(jornada) {
+  selectedJornada.value = jornada
+  showDropdownJornadas.value = false
+  onJornadaChange()
+}
+
+// Función para cargar los torneos desde el endpoint
+async function cargarTorneos() {
+  try {
+    loading.value = true
+    const response = await axios.get(
+      'https://kefloixzy1.execute-api.us-west-2.amazonaws.com/prod/gs3/tournaments',
+    )
+
+    if (response.data && Array.isArray(response.data)) {
+      torneosRaw.value = response.data
+      // Extraer los torneos (ligas) del response y ordenarlos por ID
+      ligas.value = response.data
+        .map((item) => item.tournament)
+        .sort((a, b) => {
+          // Si ambos tienen ID, ordenar por ID
+          if (a.order && b.order) {
+            return a.order - b.order
+          }
+          // Si solo uno tiene order, poner el que no tiene order al final
+          if (a.order && !b.order) {
+            return -1
+          }
+          if (!a.order && b.order) {
+            return 1
+          }
+          // Si ninguno tiene ID, mantener el orden original
+          return 0
+        })
+      // NO seleccionar automáticamente ninguna liga
+      selectedLiga.value = ''
+      torneos.value = []
+      selectedTorneo.value = ''
+      jornadas.value = []
+      selectedJornada.value = ''
+      partidos.value = []
+      selectedPartido.value = null
+    }
+  } catch (error) {
+    console.error('Error al cargar torneos:', error)
+    // Fallback con datos de ejemplo
+    ligas.value = [{ name: 'Concacaf Copa Oro' }, { name: 'Liga MX' }, { name: 'MLS' }]
+    torneos.value = []
+    jornadas.value = []
+    selectedLiga.value = ''
+    selectedTorneo.value = ''
+    selectedJornada.value = ''
+    selectedPartido.value = null
+  } finally {
+    loading.value = false
+  }
+}
+
+// Al cambiar la liga/torneo, poblar seasons
+function filtrarSeasonsPorTorneo(torneo) {
+  // Buscar el objeto en torneosRaw
+  const torneoObj = torneosRaw.value.find(
+    (item) => item.tournament && item.tournament.name === torneo.name,
+  )
+  if (torneoObj && Array.isArray(torneoObj.seasons)) {
+    torneos.value = torneoObj.seasons
+    selectedTorneo.value = ''
+    jornadas.value = []
+    selectedJornada.value = ''
+    partidos.value = []
+    selectedPartido.value = null
+  } else {
+    torneos.value = []
+    selectedTorneo.value = ''
+    jornadas.value = []
+    selectedJornada.value = ''
+    partidos.value = []
+    selectedPartido.value = null
+  }
+}
+
+function onLigaChange() {
+  selectedTorneo.value = ''
+  selectedJornada.value = ''
+  selectedPartido.value = null
+  if (selectedLiga.value) {
+    filtrarSeasonsPorTorneo(selectedLiga.value)
+  } else {
+    torneos.value = []
+    jornadas.value = []
+    partidos.value = []
+  }
+}
+
+function onTorneoChange() {
+  loadingJornadas.value = true
+  selectedJornada.value = ''
+  selectedPartido.value = null
+  jornadas.value = []
+  partidos.value = []
+  if (selectedTorneo.value && selectedTorneo.value.id) {
+    // Obtener las related_seasons de la temporada seleccionada
+    const seasonIds = [selectedTorneo.value.id]
+
+    // Si la temporada seleccionada tiene related_seasons, agregarlas
+    if (
+      selectedTorneo.value.related_seasons &&
+      Array.isArray(selectedTorneo.value.related_seasons)
+    ) {
+      const relatedIds = selectedTorneo.value.related_seasons
+        .map((season) => season.id)
+        .filter(Boolean)
+      seasonIds.push(...relatedIds)
+      console.log('relatedIds', relatedIds)
+    }
+
+    cargarPartidosPorSeason(seasonIds)
+  }
+  setTimeout(() => {
+    loadingJornadas.value = false
+  }, 400) // Simula carga
+}
+
+async function cargarPartidosPorSeason(seasonIds) {
+  loadingPartidos.value = true
+  try {
+    // Convertir el array de IDs a string separado por comas
+    const seasonsQueryString = Array.isArray(seasonIds) ? seasonIds.join('&seasons=') : seasonIds
+
+    const response = await axiosInstance.get(
+      `https://qyyibs1w0d.execute-api.us-west-2.amazonaws.com/prod/calendar/gamesBySeason?seasons=${seasonsQueryString}`,
+    )
+    console.log('response.data:: 2', response.data)
+    if (response.data.data && Array.isArray(response.data.data)) {
+      console.log('response.data:: 4ddd', response.data.data)
+
+      // Unir todos los arrays de partidos de todas las temporadas
+      const todosLosPartidos = response.data.data.reduce((acumulador, temporada) => {
+        if (temporada.games && Array.isArray(temporada.games)) {
+          return acumulador.concat(temporada.games)
+        }
+        return acumulador
+      }, [])
+
+      console.log('Todos los partidos unidos:', todosLosPartidos)
+
+      // Guardar todos los partidos
+      allPartidos.value = todosLosPartidos.map((partido) => ({
+        label:
+          partido.label ||
+          `${partido.home_team_acronym || 'Local'} vs ${partido.visiting_team_acronym || 'Visitante'}`,
+        localLogo:
+          'https://golstatsimages.blob.core.windows.net/teams-80/' + partido.home_team + '.png' ||
+          '',
+        visitanteLogo:
+          'https://golstatsimages.blob.core.windows.net/teams-80/' +
+            partido.visiting_team +
+            '.png' || '',
+        ...partido,
+      }))
+
+      // Filtrar partidos según templateType para jornadas válidas
+      let partidosValidos = allPartidos.value
+      if (props.templateType === '2' || props.templateType === 2) {
+        partidosValidos = partidosValidos.filter((p) => p.game_status === 1)
+      } else if (props.templateType === '1' || props.templateType === 1) {
+        partidosValidos = partidosValidos.filter((p) => p.game_status === 4)
+      }
+
+      // Extraer matchdays únicos SOLO de partidos válidos
+      const matchdaysUnicos = [
+        ...new Set(partidosValidos.map((p) => p.matchday_id).filter(Boolean)),
+      ]
+
+      // Llenar jornadas con los objetos matchday únicos y ordenar por matchday_id
+      jornadas.value = matchdaysUnicos
+        .map((id) => {
+          const partido = allPartidos.value.find((p) => p.matchday_id && p.matchday_id === id)
+          return {
+            id,
+            name: partido.matchday_name
+              .replace('Matchday', 'Jornada')
+              .replace('de Final', '')
+              .replace('Playoffs 1', 'Cuartos de Final Ida')
+              .replace('Playoffs 2', 'Cuartos de Final Vuelta')
+              .replace('Playoffs 3', 'Semifinal Ida')
+              .replace('Playoffs 4', 'Semifinal Vuelta')
+              .replace('Playoffs 5', 'Final Ida')
+              .replace('Playoffs 6', 'Final Vuelta'),
+          }
+        })
+        .sort((a, b) => {
+          // Solo ordenar por matchday_id si ambos nombres empiezan con "Jornada"
+          const aIsJornada = a.name.startsWith('Jornada')
+          const bIsJornada = b.name.startsWith('Jornada')
+
+          if (aIsJornada && bIsJornada) {
+            return a.id - b.id // Ordenar jornadas regulares por ID
+          } else if (aIsJornada && !bIsJornada) {
+            return -1 // Las jornadas regulares van primero
+          } else if (!aIsJornada && bIsJornada) {
+            return 1 // Las jornadas regulares van primero
+          } else {
+            return 0 // Mantener orden original para playoffs/finales
+          }
+        })
+      console.log('jornadas: ', jornadas)
+      // NO seleccionar automáticamente ninguna jornada
+      selectedJornada.value = ''
+      partidos.value = []
+      selectedPartido.value = null
+    } else {
+      allPartidos.value = []
+      jornadas.value = []
+      selectedJornada.value = ''
+      partidos.value = []
+      selectedPartido.value = null
+    }
+  } catch (error) {
+    console.error('Error al cargar partidos:', error)
+    allPartidos.value = []
+    jornadas.value = []
+    selectedJornada.value = ''
+    partidos.value = []
+    selectedPartido.value = null
+  } finally {
+    loadingPartidos.value = false
+  }
+}
+
+function onJornadaChange() {
+  selectedPartido.value = null
+  partidos.value = []
+  if (selectedJornada.value && selectedJornada.value.id) {
+    filtrarPartidosPorJornada(selectedJornada.value)
+  }
+}
+
+function filtrarPartidosPorJornada(jornada) {
+  if (!jornada || !jornada.id) {
+    partidos.value = []
+    return
+  }
+  let partidosFiltrados = allPartidos.value.filter((p) => p.matchday_id === jornada.id)
+  if (props.templateType === '2' || props.templateType === 2) {
+    partidosFiltrados = partidosFiltrados.filter((p) => p.game_status === 1)
+  } else if (props.templateType === '1' || props.templateType === 1) {
+    partidosFiltrados = partidosFiltrados.filter((p) => p.game_status === 4)
+  }
+  partidos.value = partidosFiltrados
+}
+
+async function generarReporte() {
+  try {
+    // Mostrar loading
+    loading.value = true
+
+    // Buscar el nombre de la temporada usando el season_id del partido seleccionado
+    let seasonName = ''
+    if (selectedTorneo.value && selectedTorneo.value.name) {
+      seasonName = selectedTorneo.value.name
+    }
+    // Construir el payload
+    const payload = {
+      template_id: props.templateId,
+      user_id: parseInt(props.userId),
+      tournament_id: selectedLiga.value.id || 1,
+      tournament_name: selectedLiga.value.name,
+      season_id: selectedPartido.value.season_id,
+      season_name: seasonName, // Ahora se obtiene correctamente el nombre de la temporada
+      game_id: selectedPartido.value.id || selectedPartido.value.game_id,
+    }
+
+    // Hacer la llamada POST al endpoint
+    const response = await axios.post(
+      `https://m9qip57rsh.execute-api.us-east-2.amazonaws.com/prod/users/${props.userId}/reports`,
+      payload,
+      {
+        headers: {
+          Authorization: props.token,
+          'Content-Type': 'application/json',
+        },
+      },
+    )
+
+    console.log('Reporte generado exitosamente:', response.data)
+
+    // Emitir evento con los datos del reporte generado
+    emit('generar', {
+      liga: selectedLiga.value,
+      torneo: selectedTorneo.value,
+      jornada: selectedJornada.value,
+      partido: selectedPartido.value,
+      reportData: response.data,
+    })
+
+    // Emitir evento para cambiar al tab de reportes
+    emit('switch-to-reports')
+
+    // Cerrar el modal
+    emit('close')
+  } catch (error) {
+    console.error('Error al generar el reporte:', error)
+
+    // Verificar si es error 409 (Report with same template and game already exists)
+    if (error.response && error.response.status === 409) {
+      showError409.value = true
+    } else {
+      // Para otros errores, mostrar alerta genérica
+      alert('Error al generar el reporte. Por favor, intenta de nuevo.')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectPartido(partido) {
+  selectedPartido.value = partido
+  showDropdownPartidos.value = false
+}
+
+function closeModal() {
+  showError409.value = false
+  emit('close')
+}
+
+onMounted(() => {
+  cargarTorneos()
+})
+</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: 368px;
+  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-Regular', 'Montserrat', sans-serif;
+}
+.close-btn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  z-index: 2;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.close-btn:hover {
+  opacity: 0.7;
+}
+.close-btn img {
+  width: 20px;
+  height: 20px;
+}
+.header-separator {
+  width: 100%;
+  height: 1px;
+  border-bottom: dashed 1px #58626b;
+  margin: 12px 0 0 0;
+}
+.modal-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 20px 24px 0 24px;
+}
+.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;
+}
+.modal-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 12px 24px 0 24px;
+  margin-bottom: 17px;
+  margin-top: 5px;
+  gap: 18px;
+}
+.modal-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 5px;
+}
+.modal-row {
+  display: flex;
+  gap: 12px;
+}
+.modal-row .modal-group {
+  flex: 1 1 50%;
+}
+.modal-row select {
+  width: 100%;
+}
+label {
+  font-family: Poppins-Regular;
+  font-size: 10px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: -0.2px;
+  text-align: left;
+  margin-left: 2px;
+  color: rgba(255, 255, 255, 0.6);
+  background: none;
+  background-color: transparent;
+}
+select {
+  background: #2e3b46;
+  border: solid 1px rgba(224, 231, 240, 0.5);
+  border-radius: 6px;
+  color: #fff;
+  font-size: 15px;
+  padding: 8px 28px 8px 12px;
+  font-family: Poppins-Regular;
+  outline: none;
+  transition: border 0.2s;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  position: relative;
+}
+select::-ms-expand {
+  display: none;
+}
+select::after {
+  content: '';
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  right: 17px;
+  width: 16px;
+  height: 16px;
+  transform: translateY(-50%) rotate(0deg);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  background: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 7L8 10L11 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
+    no-repeat center/contain;
+  z-index: 2;
+}
+select:focus::after {
+  transform: translateY(-50%) rotate(180deg);
+  background: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 7L8 10L11 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
+    no-repeat center/contain;
+}
+.modal-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 18px;
+  margin-top: 13px;
+  padding: 0 24px 12px 24px;
+}
+.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: 64px;
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+  border: solid 0.8px #cbee6b;
+  background-color: rgba(255, 255, 255, 0.06);
+  font-family: Poppins-Medium;
+  font-size: 14.9px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.2;
+  letter-spacing: -0.45px;
+  text-align: center;
+  color: #fff;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.next-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.next-btn:not(:disabled):hover {
+  background: #cbee6b;
+  color: #232e39;
+}
+
+/* Wrapper para el select y la flecha */
+.select-wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.select-wrapper select {
+  width: 100%;
+  padding-right: 28px;
+  background: #2e3b46;
+  border: solid 1px rgba(224, 231, 240, 0.5);
+  border-radius: 6px;
+  color: #fff;
+  font-size: 15px;
+  font-family: Poppins-Regular;
+  outline: none;
+  transition: border 0.2s;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+.select-wrapper select:focus,
+select:focus {
+  border: solid 1px rgba(224, 231, 240, 0.5) !important;
+  box-shadow: none !important;
+}
+.select-chevron {
+  position: absolute;
+  right: 17px;
+  top: 50%;
+  transform: translateY(-50%) rotate(0deg);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+.select-chevron svg {
+  display: block;
+}
+.select-chevron.open {
+  transform: translateY(-50%) rotate(180deg);
+}
+
+.partido-select {
+  position: relative;
+  user-select: none;
+}
+.custom-select-display {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: #2e3b46;
+  border: solid 1px rgba(224, 231, 240, 0.5);
+  border-radius: 6px;
+  color: #fff;
+  font-size: 15px;
+  font-family: Poppins-Regular;
+  padding: 8px 17px 8px 12px;
+  cursor: pointer;
+  min-height: 38px;
+  position: relative;
+  transition: border 0.2s;
+  width: 180px;
+  min-width: 180px;
+  max-width: 180px;
+  box-sizing: border-box;
+}
+.custom-select-display:focus,
+.custom-select-display:active {
+  outline: none;
+}
+.partido-select {
+  width: 100%;
+}
+.custom-select-dropdown {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  background: #2e3b46;
+  border: solid 0.35px rgba(224, 231, 240, 0.1);
+  border-radius: 0 0 6px 6px;
+  z-index: 10;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  max-height: 220px; /* Limita la altura del dropdown */
+  overflow-y: auto; /* Habilita scroll vertical */
+  scrollbar-width: thin;
+  scrollbar-color: #cbee6b #2e3b46;
+}
+
+/* Scrollbar para navegadores Webkit */
+.custom-select-dropdown::-webkit-scrollbar {
+  width: 8px;
+  background: #2e3b46;
+  border-radius: 6px;
+}
+.custom-select-dropdown::-webkit-scrollbar-thumb {
+  background: #cbee6b;
+  border-radius: 6px;
+  min-height: 24px;
+}
+.custom-select-dropdown::-webkit-scrollbar-thumb:hover {
+  background: #b6d94c;
+}
+.custom-select-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 15px;
+  font-family: Poppins-Regular;
+  color: #fff;
+  transition: background 0.2s;
+  background: none;
+  border: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+.custom-select-option:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+.logo-equipo {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+  border-radius: 0;
+  background: none;
+}
+.placeholder {
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 15px;
+  font-family: Poppins-Regular;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.custom-select-display span,
+.custom-select-display .placeholder {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 204px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.select-wrapper select:disabled,
+.custom-select-display.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: #3a4754;
+  border-color: #58626b;
+}
+
+.custom-select-display.disabled {
+  pointer-events: none;
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 40px 20px;
+  color: #fff;
+  font-family: Poppins-Regular;
+  font-size: 14px;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(255, 255, 255, 0.1);
+  border-top: 3px solid #cbee6b;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Spinner más pequeño para los selectores */
+.loading-spinner.select-spinner {
+  width: 18px;
+  height: 18px;
+  border-width: 2px;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+/* Agrego clases específicas para los selectores de liga y partidos */
+.select-wrapper.liga-select .custom-select-display,
+.select-wrapper.partido-select .custom-select-display {
+  width: 320px;
+  min-width: 320px;
+  max-width: 320px;
+}
+
+/* Dejo el ancho de 180px por defecto para los demás selectores */
+.custom-select-display {
+  width: 154px;
+  min-width: 154px;
+  max-width: 154px;
+}
+
+/* Solo los selectores de torneo y jornada tendrán el texto truncado a 100px */
+.select-wrapper.torneo-select .custom-select-display span,
+.select-wrapper.torneo-select .custom-select-display .placeholder,
+.select-wrapper.jornada-select .custom-select-display span,
+.select-wrapper.jornada-select .custom-select-display .placeholder {
+  max-width: 100px !important;
+}
+
+/* Estilos para el mensaje de error 409 */
+.error-message-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 40px 2px;
+  gap: 30px;
+}
+
+.error-icon {
+  font-size: 48px;
+  margin-bottom: 10px;
+}
+
+.error-text {
+  font-family: Poppins-Regular;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #fff;
+  margin: 0;
+  margin-top: -15px;
+  max-width: 280px;
+}
+
+.accept-btn {
+  background: #cbee6b;
+  border: none;
+  border-radius: 64px;
+  color: #232e39;
+  font-family: Poppins-Medium;
+  font-size: 14.9px;
+  font-weight: 500;
+  padding: 8px 24px;
+  cursor: pointer;
+  transition: background 0.2s;
+  min-width: 100px;
+}
+
+.accept-btn:hover {
+  background: #b6d94c;
+}
+</style>