npm - @golstats/gsc-lineups-reports - Versions diffs - 1.0.9 → 1.1.1 - Mend

@golstats/gsc-lineups-reports 1.0.9 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/README.md +2 -2
package/dist/css/fonts.css +91 -91
package/dist/gsc-lineups-reports.css +1 -1
package/dist/gsc-lineups-reports.es.js +3073 -2773
package/dist/gsc-lineups-reports.umd.js +10 -7
package/dist/images/canchaRPH.svg +30 -30
package/dist/images/events/atajada.svg +56 -56
package/dist/images/events/fin-del-partido.svg +43 -43
package/dist/images/events/fuera-de-lugar.svg +57 -57
package/dist/images/events/gol.svg +48 -48
package/dist/images/events/icn-cambio.svg +6 -6
package/dist/images/events/icn-falta.svg +4 -4
package/dist/images/events/icn-play.svg +3 -3
package/dist/images/events/icn-tarjeta-amarilla.svg +3 -3
package/dist/images/events/icn-tarjeta-roja.svg +3 -3
package/dist/images/events/icn-tiro-a-porteria.svg +36 -36
package/dist/images/events/icn-tiros-de-esquina.svg +18 -18
package/dist/images/events/inicia-el-partido.svg +45 -45
package/dist/images/events/jugada-peligrosa.svg +90 -90
package/dist/images/events/penal-fallado.svg +194 -194
package/dist/images/events/penal-marcado.svg +189 -189
package/dist/images/events/tiempo-agregado.svg +74 -74
package/dist/images/events/tiro-a-porteria.svg +80 -80
package/dist/images/events/var.svg +30 -30
package/package.json +7 -3
package/src/components/Lineup2D/CheckBox.vue +42 -42
package/src/components/Lineup2D/FilterEmpty.vue +48 -48
package/src/components/Lineup2D/Icons.vue +29 -29
package/src/components/Lineup2D/LineupField.vue +274 -274
package/src/components/Lineup2D/LineupFilter.vue +285 -285
package/src/components/Lineup2D/LineupMainHeader.vue +222 -222
package/src/components/Lineup2D/LineupRecentItem.vue +115 -110
package/src/components/Lineup2D/MatchDetails.vue +66 -66
package/src/components/gsc-filter.vue +286 -286
package/src/components/gsc-header-historico-lineup.vue +1070 -1064
package/src/components/gsc-header-postmatch-lineup.vue +1023 -1017
package/src/components/gsc-header-probables-lineup.vue +1050 -1044
package/src/components/gsc-header-recientes-lineup.vue +2343 -2337
package/src/components/gsc-lineup-dosd.vue +3779 -3752
package/src/components/gsc-lineup-main.vue +81 -65
package/src/components/gsc-lineups-reports.vue +10 -0
package/src/components/gsc-lineups.vue +95 -60
package/src/components/gsc-player-card.vue +166 -166
package/src/index.js +4 -4
package/src/main-test.js +42 -0
package/src/types.d.ts +45 -45
package/src/utils/apiUrl.js +33 -0
package/src/utils/imageUrl.js +30 -0
package/src/utils/socketConnection.js +29 -29

package/src/components/gsc-header-recientes-lineup.vue CHANGED Viewed

@@ -1,2337 +1,2343 @@
-<template>
-  <div :class="$style.headerSeccionAlineaciones">
-    <div :class="headerSeccionAlineaciones1Class" id="header-desktop-full">
-      <div :class="$style.groupsLeagueParent">
-        <div :class="$style.groupsLeague">
-          <span>Las alineaciones de este partido </span>
-          <span :class="$style.anNoEstn">aún no están disponibles</span>
-          <span>. Por lo pronto puedes ver alineaciones:</span>
-        </div>
-        <div :class="$style.switchStatesBig" id="switch-lineup">
-          <GscSwitchComponent
-            :buttons="['Historicos', 'Recientes', 'Probables']"
-            :selectedOption="optionSelected"
-            :type="1"
-            width="600px"
-            :arrow="false"
-            borderRadius="32px"
-            height="28px"
-            fontSize="11px;"
-            fontFamily="Poppins-Regular"
-            border-width="1px"
-            border-width-container="0.5px"
-            backgroundOptionDisable="#162533"
-            @input="clickOnSelectOption"
-          />
-        </div>
-      </div>
-      <div :class="$style.matchContainer" id="match-container">
-        <div :class="$style.homeTeamContainer">
-          <div :class="$style.teamContainer">
-            <div :class="$style.imgHomeTeamWrapper">
-              <img
-                :class="$style.imgHomeTeamIcon"
-                alt=""
-                :src="
-                  'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                  gameInfo.home_team +
-                  '.png'
-                "
-              />
-            </div>
-          </div>
-          <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
-        </div>
-        <div :class="$style.teamSwitch" id="switch-team">
-          <GSCSwitchRadio
-            width="41px"
-            height="20px"
-            heightCircle="15px"
-            widthCircle="15px"
-            circle-color-switch="#cbee6b"
-            :text-option-left="gameInfo.home_team_abbreviation"
-            @change="changeSwitchRadio"
-            :text-option-right="gameInfo.away_team_abbreviation"
-            font-color="white"
-            :value-default="teamSelect"
-            :hidden-labels="true"
-          />
-        </div>
-        <div :class="$style.awayTeamContainer">
-          <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
-          <div :class="$style.teamContainer1">
-            <div :class="$style.imgHomeTeamWrapper">
-              <img
-                :class="$style.imgHomeTeamIcon"
-                alt=""
-                :src="
-                  'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                  gameInfo.away_team +
-                  '.png'
-                "
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div :class="$style.matchContainer1" id="match-info-container">
-        <div :class="$style.btnFilterParent">
-          <button :class="$style.btnFilter" id="btn-filters">
-            <div :class="$style.sortParent" @click="openFilter">
-              <img
-                :class="$style.sortIcon"
-                alt=""
-                src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-filter.svg"
-              />
-              <div :class="$style.filtros">Filtros</div>
-            </div>
-            <img
-              :class="$style.shapeIcon"
-              alt=""
-              src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-expand-arrow.svg"
-            />
-            <GSCFilter
-              :item-select="filterObject"
-              :is-open="openfiltervalue"
-              @change="changeFiltersModal"
-              :reset="vDeleteFilter"
-              margin-modal="-83px"
-            />
-          </button>
-          <GSCDropdown
-            @click="clickOnValueFilter"
-            v-if="gameRecientesFilter.length > 0"
-            :key="keyUpdate"
-            :default-item-by-prop="defaultDropItem"
-            :class="$style.btnFilter1"
-            id="btn-filters"
-            :items="matchdaysFinal"
-            @input="changeDropdown"
-            height="32px"
-            width="114px"
-            background-color="rgba(255, 255, 255, 0.05);"
-            color="white"
-            border-width="1"
-            borderColor="rgba(255, 255, 255, 0.2)"
-            border-radius="0px"
-            fontSize="10px"
-            arrowHeight="16"
-            :arrowWidth="16"
-            listHeight="300px"
-            listBackgroundColor="#243a4c"
-            hoverBackgroundColor="#0d1d2a"
-            listItemColor="#FFFFFF"
-            listItemSelectedBackgroundColor="#0d1d2a"
-            listItemSelectedColor="#c3e569"
-            listItemPadding="8px 7px"
-            listBorderColor="rgba(255, 255, 255, 0.1)"
-            listBorderRadius="2px"
-          >
-            <template #default="data">
-              <div class="selector-tournaments">{{ data.selectedItem.name }}</div>
-            </template>
-            <template #availableItem="{ item }">
-              <div>{{ item.name }}</div>
-            </template>
-          </GSCDropdown>
-        </div>
-        <div :class="$style.match">
-          <GSCCarousel
-            @click="clickOnValueCarrousel"
-            v-if="gameRecientesFilter.length > 0"
-            :key="updateCarouselGames"
-            :default-item-by-index="selectedIndexOption"
-            :items="gameRecientesFilter"
-            @input="changeCarouselItem"
-            isMainSlidePriority
-            areSlidesArrowsVisible
-            :areNavigationArrowsVisible="false"
-            slideLeftArrowBackgroundImage="none"
-            slideRightArrowBackgroundImage="none"
-          >
-            <template #default="{ item }">
-              <div :class="$style.selectoritem">
-                <div :class="$style.homeTeam">
-                  <div :class="$style.teamContainer2">
-                    <div :class="$style.manchesterUnited">{{ item.home_team_abbreviation }}</div>
-                    <img
-                      :class="$style.imgHomeTeamIcon"
-                      alt=""
-                      :src="
-                        'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                        item.home_team +
-                        '.png'
-                      "
-                    />
-                  </div>
-                </div>
-                <div :class="$style.scoreContainer1">
-                  <div :class="$style.finalScore">
-                    <div :class="$style.div4" v-if="Object.keys(item).length > 0">
-                      {{ item.score[0] }}
-                    </div>
-                    <div :class="$style.div4">-</div>
-                    <div :class="$style.div4" v-if="Object.keys(item).length > 0">
-                      <template v-if="Array.isArray(item.score)">{{ item.score[1] }}</template>
-                      <template v-else>{{ item.score[4] }}</template>
-                    </div>
-                  </div>
-                  <div :class="$style.manchesterUnited1">
-                    <template v-if="item.home_team_abbreviation == teamSelect">
-                      <template v-if="item.home_match_result == 1">Ganado</template>
-                      <template v-if="item.home_match_result == 2">Perdido</template>
-                      <template v-if="item.home_match_result == 3">Empatado</template>
-                    </template>
-                    <template v-if="item.away_team_abbreviation == teamSelect">
-                      <template v-if="item.visiting_match_result == 1">Ganado</template>
-                      <template v-if="item.visiting_match_result == 2">Perdido</template>
-                      <template v-if="item.visiting_match_result == 3">Empatado</template>
-                    </template>
-                  </div>
-                </div>
-                <div :class="$style.homeTeam">
-                  <div :class="$style.teamContainer2">
-                    <img
-                      :class="$style.imgHomeTeamIcon"
-                      alt=""
-                      :src="
-                        'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                        item.away_team +
-                        '.png'
-                      "
-                    />
-                    <div :class="$style.manchesterUnited">{{ item.away_team_abbreviation }}</div>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </GSCCarousel>
-          <div v-else>
-            <div :class="$style.containernofoundsearchrecientes">
-              <div :class="$style.leyenddeleteshow">
-                No hay resultados con los criterios<br />de búsqueda aplicados.
-              </div>
-              <div :class="$style.btndeletefilters" @click="deleteFilters">
-                Eliminar filtros aplicados
-              </div>
-            </div>
-          </div>
-          <GSCMatchDetails
-            style="margin-top: 30px"
-            v-if="showDetails"
-            :localDetails="localDetails"
-            :foreignDetails="foreignDetails"
-          />
-        </div>
-        <div :class="$style.btnDetails">
-          <div :class="$style.manchesterUnited2" @click="clickShowDetails">
-            <template v-if="showDetails">Ocultar detalles</template
-            ><template v-else>Ver detalles</template>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div :class="headerSeccionAlineaciones2Class" id="header-desktop">
-      <div :class="$style.groupsLeagueParent">
-        <div :class="$style.groupsLeague">
-          <span>Las alineaciones de este partido </span>
-          <span :class="$style.anNoEstn">aún no están disponibles</span>
-          <span>. Por lo pronto puedes ver alineaciones:</span>
-        </div>
-        <div :class="$style.switchStatesBig" id="switch-lineup">
-          <GscSwitchComponent
-            :buttons="['Historicos', 'Recientes', 'Probables']"
-            :selectedOption="optionSelected"
-            :type="1"
-            width="600px"
-            :arrow="false"
-            borderRadius="32px"
-            height="28px"
-            fontSize="11px;"
-            fontFamily="Poppins-Regular"
-            border-width="1px"
-            border-width-container="0.5px"
-            backgroundOptionDisable="#162533"
-            @input="clickOnSelectOption"
-          />
-        </div>
-      </div>
-      <div :class="$style.matchContainer" id="match-container">
-        <div :class="$style.homeTeamContainer">
-          <div :class="$style.teamContainer">
-            <div :class="$style.imgHomeTeamWrapper">
-              <img
-                :class="$style.imgHomeTeamIcon"
-                alt=""
-                :src="
-                  'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                  gameInfo.home_team +
-                  '.png'
-                "
-              />
-            </div>
-          </div>
-          <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
-        </div>
-        <div :class="$style.teamSwitch" id="switch-team">
-          <GSCSwitchRadio
-            width="41px"
-            height="20px"
-            heightCircle="15px"
-            widthCircle="15px"
-            circle-color-switch="#cbee6b"
-            :text-option-left="gameInfo.home_team_abbreviation"
-            @change="changeSwitchRadio"
-            :text-option-right="gameInfo.away_team_abbreviation"
-            font-color="white"
-            :value-default="teamSelect"
-            :hidden-labels="true"
-          />
-        </div>
-        <div :class="$style.awayTeamContainer">
-          <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
-          <div :class="$style.teamContainer1">
-            <div :class="$style.imgHomeTeamWrapper">
-              <img
-                :class="$style.imgHomeTeamIcon"
-                alt=""
-                :src="
-                  'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                  gameInfo.away_team +
-                  '.png'
-                "
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div :class="$style.matchContainer3">
-        <button :class="$style.btnFilter2" id="btn-filters">
-          <div :class="$style.sortParent" @click="openFilter">
-            <img
-              :class="$style.sortIcon"
-              alt=""
-              src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-filter1.svg"
-            />
-            <div :class="$style.filtros">Filtros</div>
-          </div>
-          <img
-            :class="$style.shapeIcon"
-            alt=""
-            src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-expand-arrow1.svg"
-          />
-          <GSCFilter
-            :item-select="filterObject"
-            :is-open="openfiltervalue"
-            @change="changeFiltersModal"
-            margin-modal="-99px"
-          />
-        </button>
-        <GSCDropdown
-          @click="clickOnValueFilter"
-          v-if="gameRecientesFilter.length > 0"
-          :key="keyUpdate"
-          :default-item-by-prop="defaultDropItem"
-          :class="$style.btnFilter1"
-          id="btn-filters"
-          :items="matchdaysFinal"
-          @input="changeDropdown"
-          height="32px"
-          width="114px"
-          background-color="rgba(255, 255, 255, 0.05);"
-          color="white"
-          border-width="1"
-          borderColor="rgba(255, 255, 255, 0.2)"
-          border-radius="0px"
-          fontSize="10px"
-          arrowHeight="16"
-          :arrowWidth="16"
-          listHeight="300px"
-          listBackgroundColor="#243a4c"
-          hoverBackgroundColor="#0d1d2a"
-          listItemColor="#FFFFFF"
-          listItemSelectedBackgroundColor="#0d1d2a"
-          listItemSelectedColor="#c3e569"
-          listItemPadding="8px 7px"
-          listBorderColor="rgba(255, 255, 255, 0.1)"
-          listBorderRadius="2px"
-        >
-          <template #default="data">
-            <div class="selector-tournaments">{{ data.selectedItem.name }}</div>
-          </template>
-          <template #availableItem="{ item }">
-            <div>{{ item.name }}</div>
-          </template>
-        </GSCDropdown>
-        <div :class="$style.btnDetails1">
-          <div :class="$style.manchesterUnited2" @click="clickShowDetails">
-            <template v-if="showDetails">Ocultar detalles</template
-            ><template v-else>Ver detalles</template>
-          </div>
-        </div>
-      </div>
-      <div :class="$style.matchContainer1" id="match-info-container">
-        <div :class="$style.match1">
-          <GSCCarousel
-            v-if="gameRecientesFilter.length > 0"
-            :items="gameRecientesFilter"
-            :key="updateCarouselGames"
-            :default-item-by-index="selectedIndexOption"
-            @input="changeCarouselItem"
-            isMainSlidePriority
-            areSlidesArrowsVisible
-            :areNavigationArrowsVisible="false"
-            slideLeftArrowBackgroundImage="none"
-            slideRightArrowBackgroundImage="none"
-          >
-            <template #default="{ item }">
-              <div :class="$style.selectoritem">
-                <div :class="$style.homeTeam">
-                  <div :class="$style.teamContainer2">
-                    <div :class="$style.manchesterUnited">{{ item.home_team_abbreviation }}</div>
-                    <img
-                      :class="$style.imgHomeTeamIcon"
-                      alt=""
-                      :src="
-                        'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                        item.home_team +
-                        '.png'
-                      "
-                    />
-                  </div>
-                </div>
-                <div :class="$style.scoreContainer1">
-                  <div :class="$style.finalScore">
-                    <div :class="$style.div4" v-if="Object.keys(item).length > 0">
-                      {{ item.score[0] }}
-                    </div>
-                    <div :class="$style.div4">-</div>
-                    <div :class="$style.div4" v-if="Object.keys(item).length > 0">
-                      <template v-if="Array.isArray(item.score)">{{ item.score[1] }}</template>
-                      <template v-else>{{ item.score[4] }}</template>
-                    </div>
-                  </div>
-                  <div :class="$style.manchesterUnited1">
-                    <template v-if="item.home_team_abbreviation == teamSelect">
-                      <template v-if="item.home_match_result == 1">Ganado</template>
-                      <template v-if="item.home_match_result == 2">Perdido</template>
-                      <template v-if="item.home_match_result == 3">Empatado</template>
-                    </template>
-                    <template v-if="item.away_team_abbreviation == teamSelect">
-                      <template v-if="item.visiting_match_result == 1">Ganado</template>
-                      <template v-if="item.visiting_match_result == 2">Perdido</template>
-                      <template v-if="item.visiting_match_result == 3">Empatado</template>
-                    </template>
-                  </div>
-                </div>
-                <div :class="$style.homeTeam">
-                  <div :class="$style.teamContainer2">
-                    <img
-                      :class="$style.imgHomeTeamIcon"
-                      alt=""
-                      :src="
-                        'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                        item.away_team +
-                        '.png'
-                      "
-                    />
-                    <div :class="$style.manchesterUnited">{{ item.away_team_abbreviation }}</div>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </GSCCarousel>
-          <div v-else>
-            <div :class="$style.containernofoundsearchrecientes">
-              <div :class="$style.leyenddeleteshow">
-                No hay resultados con los criterios<br />de búsqueda aplicados.
-              </div>
-              <div :class="$style.btndeletefilters" @click="deleteFilters">
-                Eliminar filtros aplicados
-              </div>
-            </div>
-          </div>
-          <GSCMatchDetails
-            style="margin-top: 30px"
-            v-if="showDetails"
-            :localDetails="localDetails"
-            :foreignDetails="foreignDetails"
-          />
-        </div>
-      </div>
-    </div>
-    <div :class="headerSeccionAlineaciones3Class" id="header-mobile">
-      <div :class="$style.switchStatesBig2" id="switch-lineup">
-        <GscSwitchComponent
-          :buttons="['Historicos', 'Recientes', 'Probables']"
-          :selectedOption="optionSelected"
-          :type="1"
-          width="600px"
-          :arrow="false"
-          borderRadius="32px"
-          height="28px"
-          fontSize="11px;"
-          fontFamily="Poppins-Regular"
-          border-width="1px"
-          border-width-container="0.5px"
-          backgroundOptionDisable="#162533"
-          @input="clickOnSelectOption"
-        />
-      </div>
-      <div :class="$style.containerData">
-        <div :class="$style.manchesterUnited26">Alineación utilizada en:</div>
-        <div :class="$style.matchContainer5" id="match-container">
-          <div :class="$style.homeTeamContainer2">
-            <div :class="$style.teamContainer">
-              <div :class="$style.imgHomeTeamWrapper">
-                <img
-                  :class="$style.imgHomeTeamIcon"
-                  alt=""
-                  :src="
-                    'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                    gameInfo.home_team +
-                    '.png'
-                  "
-                />
-              </div>
-            </div>
-            <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
-          </div>
-          <div :class="$style.teamSwitch" id="switch-team">
-            <GSCSwitchRadio
-              width="41px"
-              height="20px"
-              heightCircle="15px"
-              widthCircle="15px"
-              circle-color-switch="#cbee6b"
-              :text-option-left="gameInfo.home_team_abbreviation"
-              @change="changeSwitchRadio"
-              :text-option-right="gameInfo.away_team_abbreviation"
-              font-color="white"
-              :value-default="teamSelect"
-              :hidden-labels="true"
-            />
-          </div>
-          <div :class="$style.homeTeamContainer2">
-            <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
-            <div :class="$style.teamContainer1">
-              <div :class="$style.imgHomeTeamWrapper">
-                <img
-                  :class="$style.imgHomeTeamIcon"
-                  alt=""
-                  :src="
-                    'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                    gameInfo.away_team +
-                    '.png'
-                  "
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div :class="$style.filtersContainer">
-          <button :class="$style.btnFilter4" id="btn-filters">
-            <div :class="$style.sortParent" @click="openFilter">
-              <img
-                :class="$style.sortIcon"
-                alt=""
-                src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-filter2.svg"
-              />
-              <div :class="$style.filtros2">Filtros</div>
-            </div>
-            <img
-              :class="$style.shapeIcon"
-              alt=""
-              src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-arrow-expand.svg"
-            />
-            <GSCFilter
-              :item-select="filterObject"
-              :is-open="openfiltervalue"
-              @change="changeFiltersModal"
-              margin-modal="-75px"
-            />
-          </button>
-          <GSCDropdown
-            @click="clickOnValueFilter"
-            v-if="gameRecientesFilter.length > 0"
-            :key="keyUpdate"
-            :default-item-by-prop="defaultDropItem"
-            :class="$style.filterMatchday"
-            id="menu-matchday"
-            :items="matchdaysFinal"
-            @input="changeDropdown"
-            height="25px"
-            width="100px"
-            background-color="rgba(255, 255, 255, 0.05);"
-            color="white"
-            border-width="1"
-            borderColor="rgba(255, 255, 255, 0.2)"
-            border-radius="0px"
-            fontSize="10px"
-            arrowHeight="16"
-            :arrowWidth="16"
-            listHeight="300px"
-            listBackgroundColor="#243a4c"
-            hoverBackgroundColor="#0d1d2a"
-            listItemColor="#FFFFFF"
-            listItemSelectedBackgroundColor="#0d1d2a"
-            listItemSelectedColor="#c3e569"
-            listItemPadding="8px 7px"
-            listBorderColor="rgba(255, 255, 255, 0.1)"
-            listBorderRadius="2px"
-          >
-            <template #default="data">
-              <div class="selector-tournaments">{{ data.selectedItem.name }}</div>
-            </template>
-            <template #availableItem="{ item }">
-              <div>{{ item.name }}</div>
-            </template>
-          </GSCDropdown>
-          <div :class="$style.btnDetails2">
-            <div :class="$style.manchesterUnited2" @click="clickShowDetails">
-              <template v-if="showDetails">Ocultar detalles</template
-              ><template v-else>Ver detalles</template>
-            </div>
-          </div>
-        </div>
-        <div :class="$style.matchDetailContainer">
-          <div :class="$style.matchContainer6" id="match-info-container">
-            <div :class="$style.match">
-              <GSCCarousel
-                v-if="gameRecientesFilter.length > 0"
-                :key="updateCarouselGames"
-                :default-item-by-index="selectedIndexOption"
-                :items="gameRecientesFilter"
-                @input="changeCarouselItem"
-                isMainSlidePriority
-                areSlidesArrowsVisible
-                :areNavigationArrowsVisible="false"
-                slideLeftArrowBackgroundImage="none"
-                slideRightArrowBackgroundImage="none"
-              >
-                <template #default="{ item }">
-                  <div :class="$style.selectoritem">
-                    <div :class="$style.homeTeam">
-                      <div :class="$style.teamContainer2">
-                        <div :class="$style.manchesterUnited">
-                          {{ item.home_team_abbreviation }}
-                        </div>
-                        <img
-                          :class="$style.imgHomeTeamIcon"
-                          alt=""
-                          :src="
-                            'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                            item.home_team +
-                            '.png'
-                          "
-                        />
-                      </div>
-                    </div>
-                    <div :class="$style.scoreContainer1">
-                      <div :class="$style.finalScore">
-                        <div :class="$style.div4" v-if="Object.keys(item).length > 0">
-                          {{ item.score[0] }}
-                        </div>
-                        <div :class="$style.div4">-</div>
-                        <div :class="$style.div4" v-if="Object.keys(item).length > 0">
-                          <template v-if="Array.isArray(item.score)">{{ item.score[1] }}</template>
-                          <template v-else>{{ item.score[4] }}</template>
-                        </div>
-                      </div>
-                      <div :class="$style.manchesterUnited1">
-                        <template v-if="item.home_team_abbreviation == teamSelect">
-                          <template v-if="item.home_match_result == 1">Ganado</template>
-                          <template v-if="item.home_match_result == 2">Perdido</template>
-                          <template v-if="item.home_match_result == 3">Empatado</template>
-                        </template>
-                        <template v-if="item.away_team_abbreviation == teamSelect">
-                          <template v-if="item.visiting_match_result == 1">Ganado</template>
-                          <template v-if="item.visiting_match_result == 2">Perdido</template>
-                          <template v-if="item.visiting_match_result == 3">Empatado</template>
-                        </template>
-                      </div>
-                    </div>
-                    <div :class="$style.homeTeam">
-                      <div :class="$style.teamContainer2">
-                        <img
-                          :class="$style.imgHomeTeamIcon"
-                          alt=""
-                          :src="
-                            'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                            item.away_team +
-                            '.png'
-                          "
-                        />
-                        <div :class="$style.manchesterUnited">
-                          {{ item.away_team_abbreviation }}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </template>
-              </GSCCarousel>
-              <div v-else>
-                <div :class="$style.containernofoundsearchrecientes">
-                  <div :class="$style.leyenddeleteshow">
-                    No hay resultados con los criterios<br />de búsqueda aplicados.
-                  </div>
-                  <div :class="$style.btndeletefilters" @click="deleteFilters">
-                    Eliminar filtros aplicados
-                  </div>
-                </div>
-              </div>
-              <GSCMatchDetails
-                style="margin-top: 30px"
-                v-if="showDetails"
-                :localDetails="localDetails"
-                :foreignDetails="foreignDetails"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { GSCDropdown } from '@golstats/gsc-dropdown'
-import '@@/@golstats/gsc-dropdown/dist/style.css'
-import '@@/@golstats/gsc-carousel/dist/style.css'
-import { GSCCarousel } from '@golstats/gsc-carousel'
-import { GscSwitchComponent } from '@golstats/gsc-switch-component'
-import '@@/@golstats/gsc-switch-component/dist/style.css'
-import GSCFilter from './gsc-filter.vue'
-import GSCMatchDetails from './Lineup2D/MatchDetails.vue'
-import { GSCSwitchRadio } from '@golstats/gsc-switch-radio'
-import '@@/@golstats/gsc-switch-radio/dist/style.css'
-export default {
-  components: {
-    GSCCarousel,
-    GscSwitchComponent,
-    GSCDropdown,
-    GSCFilter,
-    GSCSwitchRadio,
-    GSCMatchDetails,
-  },
-  props: {
-    widthSize: {
-      type: Number,
-      default: 0,
-    },
-    optionSelected: {
-      type: String,
-      default: 'Historicos',
-    },
-    selectedOption: {
-      type: String,
-      default: 'Historicos',
-    },
-    gameInfo: {
-      type: Object,
-      default: () => {},
-    },
-    gameRecientes: {
-      type: Array,
-      default: () => [],
-    },
-    matchdaysDefault: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  watch: {
-    optionSelected: {
-      immediate: true,
-      handler: async function (newValue) {
-        if (newValue == 'Recientes') {
-          this.auxISsection = 1
-        }
-      },
-    },
-    gameInfo: {
-      immediate: true,
-      handler: async function (newValue) {
-        try {
-          this.teamSelect = newValue.home_team_abbreviation
-          this.matchFilter()
-        } catch (e) {
-          throw new Error(e)
-        }
-      },
-    },
-    gameRecientes: {
-      immediate: true,
-      handler: async function (newValue) {
-        this.matchFilter()
-      },
-    },
-  },
-  data() {
-    return {
-      playminutes: [],
-      showDetails: false,
-      teamSelect: '',
-      defaultDropItem: {},
-      updateCarouselGames: 0,
-      valLast: {},
-      selectedIndexOption: 0,
-      openfiltervalue: false,
-      vDeleteFilter: false,
-      filterObject: {},
-      coutChange: 0,
-      auxISsection: 0,
-      matchdaysFiltersUpdate: [],
-      gamesFiltersUpdate: [],
-      localDetails: [],
-      keyUpdate: 0,
-      foreignDetails: [],
-    }
-  },
-  computed: {
-    matchdaysFinal() {
-      var matchdaysFinal = []
-      if (typeof this.filterObject.selectedFilterResults !== 'undefined') {
-        if (Object.keys(this.filterObject.selectedFilterResults).length != 3) {
-          if (Object.keys(this.filterObject.selectedFilterResults).length == 2) {
-            if (
-              Object.values(this.filterObject.selectedFilterResults).includes('win') &&
-              Object.values(this.filterObject.selectedFilterResults).includes('draw')
-            ) {
-              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
-                if (this.matchdaysFiltersUpdate[index].match_result == 1) {
-                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
-                }
-              }
-              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
-                if (this.matchdaysFiltersUpdate[index].match_result == 3) {
-                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
-                }
-              }
-            }
-            if (
-              Object.values(this.filterObject.selectedFilterResults).includes('win') &&
-              Object.values(this.filterObject.selectedFilterResults).includes('lose')
-            ) {
-              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
-                if (this.matchdaysFiltersUpdate[index].match_result == 1) {
-                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
-                }
-              }
-              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
-                if (this.matchdaysFiltersUpdate[index].match_result == 2) {
-                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
-                }
-              }
-            }
-            if (
-              Object.values(this.filterObject.selectedFilterResults).includes('lose') &&
-              Object.values(this.filterObject.selectedFilterResults).includes('draw')
-            ) {
-              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
-                if (this.matchdaysFiltersUpdate[index].match_result == 3) {
-                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
-                }
-              }
-              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
-                if (this.matchdaysFiltersUpdate[index].match_result == 2) {
-                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
-                }
-              }
-            }
-          } else {
-            if (this.filterObject.selectedFilterResults[0] == 'win') {
-              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
-                if (this.matchdaysFiltersUpdate[index].match_result == 1) {
-                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
-                }
-              }
-            }
-            if (this.filterObject.selectedFilterResults[0] == 'lose') {
-              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
-                if (this.matchdaysFiltersUpdate[index].match_result == 2) {
-                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
-                }
-              }
-            }
-            if (this.filterObject.selectedFilterResults[0] == 'draw') {
-              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
-                if (this.matchdaysFiltersUpdate[index].match_result == 3) {
-                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
-                }
-              }
-            }
-          }
-        } else {
-          for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
-            matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
-          }
-        }
-      } else {
-        for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
-          matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
-        }
-      }
-      matchdaysFinal.sort((a, b) => b.id - a.id)
-      return matchdaysFinal
-    },
-    gameRecientesFilter() {
-      var gameFilterFinal = []
-      if (typeof this.filterObject.selectedFilterResults !== 'undefined') {
-        if (Object.keys(this.filterObject.selectedFilterResults).length != 3) {
-          if (Object.keys(this.filterObject.selectedFilterResults).length == 2) {
-            if (
-              Object.values(this.filterObject.selectedFilterResults).includes('win') &&
-              Object.values(this.filterObject.selectedFilterResults).includes('draw')
-            ) {
-              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
-                if (
-                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].visiting_match_result == 1) ||
-                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].home_match_result == 1)
-                ) {
-                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
-                }
-              }
-              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
-                if (
-                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].visiting_match_result == 3) ||
-                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].home_match_result == 3)
-                ) {
-                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
-                }
-              }
-            }
-            if (
-              Object.values(this.filterObject.selectedFilterResults).includes('win') &&
-              Object.values(this.filterObject.selectedFilterResults).includes('lose')
-            ) {
-              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
-                if (
-                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].visiting_match_result == 1) ||
-                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].home_match_result == 1)
-                ) {
-                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
-                }
-              }
-              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
-                if (
-                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].visiting_match_result == 2) ||
-                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].home_match_result == 2)
-                ) {
-                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
-                }
-              }
-            }
-            if (
-              Object.values(this.filterObject.selectedFilterResults).includes('lose') &&
-              Object.values(this.filterObject.selectedFilterResults).includes('draw')
-            ) {
-              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
-                if (
-                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].visiting_match_result == 3) ||
-                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].home_match_result == 3)
-                ) {
-                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
-                }
-              }
-              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
-                if (
-                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].visiting_match_result == 2) ||
-                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].home_match_result == 2)
-                ) {
-                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
-                }
-              }
-            }
-          } else {
-            if (this.filterObject.selectedFilterResults[0] == 'win') {
-              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
-                if (
-                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].visiting_match_result == 1) ||
-                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].home_match_result == 1)
-                ) {
-                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
-                }
-              }
-            }
-            if (this.filterObject.selectedFilterResults[0] == 'lose') {
-              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
-                if (
-                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].visiting_match_result == 2) ||
-                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].home_match_result == 2)
-                ) {
-                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
-                }
-              }
-            }
-            if (this.filterObject.selectedFilterResults[0] == 'draw') {
-              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
-                if (
-                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].visiting_match_result == 3) ||
-                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
-                    this.gamesFiltersUpdate[index].home_match_result == 3)
-                ) {
-                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
-                }
-              }
-            }
-          }
-        } else {
-          for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
-            gameFilterFinal.push(this.gamesFiltersUpdate[index])
-          }
-        }
-      } else {
-        for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
-          gameFilterFinal.push(this.gamesFiltersUpdate[index])
-        }
-      }
-      gameFilterFinal.sort((a, b) => a.matchday_id - b.matchday_id)
-      return gameFilterFinal
-    },
-    headerSeccionAlineaciones1Class() {
-      const width = this.widthSize
-      if (width <= 420) {
-        return this.$style.headerSeccionAlineaciones1420
-      } else if (width <= 880) {
-        return this.$style.headerSeccionAlineaciones1880
-      } else if (width <= 1200) {
-        return this.$style.headerSeccionAlineaciones11200
-      } else {
-        return this.$style.headerSeccionAlineaciones1
-      }
-    },
-    headerSeccionAlineaciones2Class() {
-      const width = this.widthSize
-      if (width <= 420) {
-        return this.$style.headerSeccionAlineaciones2420
-      } else if (width <= 540) {
-        return this.$style.headerSeccionAlineaciones2540
-      } else if (width <= 880) {
-        return this.$style.headerSeccionAlineaciones2880
-      } else if (width <= 1200) {
-        return this.$style.headerSeccionAlineaciones21200
-      } else {
-        return this.$style.headerSeccionAlineaciones2
-      }
-    },
-    headerSeccionAlineaciones3Class() {
-      const width = this.widthSize
-      if (width <= 420) {
-        return this.$style.headerSeccionAlineaciones3420
-      } else if (width <= 540) {
-        return this.$style.headerSeccionAlineaciones3540
-      } else if (width <= 880) {
-        return this.$style.headerSeccionAlineaciones3880
-      } else if (width <= 1200) {
-        return this.$style.headerSeccionAlineaciones31200
-      } else {
-        return this.$style.headerSeccionAlineaciones3
-      }
-    },
-  },
-  methods: {
-    clickOnValueFilter() {
-      this.auxISsection = 0
-    },
-    clickOnValueCarrousel() {
-      this.auxISsection = 0
-    },
-    deleteFilters() {
-      this.vDeleteFilter = true
-      setTimeout(() => {
-        this.vDeleteFilter = false
-      }, 200)
-    },
-    clickShowDetails() {
-      this.showDetails = !this.showDetails
-    },
-    matchFilter() {
-      var matchdayFilter = []
-      var gameFilter = []
-      if (Object.keys(this.filterObject).length > 0) {
-        if (Object.keys(this.filterObject.selectedFilterTeam).length != 2) {
-          for (let index = 0; index < this.gameRecientes[this.teamSelect].length; index++) {
-            if (this.filterObject.selectedFilterTeam[0] == 'local') {
-              if (
-                this.gameRecientes[this.teamSelect][index].home_team_abbreviation == this.teamSelect
-              ) {
-                matchdayFilter.push({
-                  name: this.gameRecientes[this.teamSelect][index].matchday_abbreviation.replace(
-                    'M',
-                    'Jornada ',
-                  ),
-                  id: this.gameRecientes[this.teamSelect][index].matchday_id,
-                  match_result: this.gameRecientes[this.teamSelect][index].home_match_result,
-                })
-                gameFilter.push(this.gameRecientes[this.teamSelect][index])
-              }
-            } else {
-              if (
-                this.gameRecientes[this.teamSelect][index].away_team_abbreviation == this.teamSelect
-              ) {
-                matchdayFilter.push({
-                  name: this.gameRecientes[this.teamSelect][index].matchday_abbreviation.replace(
-                    'M',
-                    'Jornada ',
-                  ),
-                  id: this.gameRecientes[this.teamSelect][index].matchday_id,
-                  match_result: this.gameRecientes[this.teamSelect][index].visiting_match_result,
-                })
-                gameFilter.push(this.gameRecientes[this.teamSelect][index])
-              }
-            }
-          }
-        } else {
-          if (this.gameRecientes[this.teamSelect]) {
-            for (let index = 0; index < this.gameRecientes[this.teamSelect].length; index++) {
-              matchdayFilter.push({
-                name: this.gameRecientes[this.teamSelect][index].matchday_abbreviation.replace(
-                  'M',
-                  'Jornada ',
-                ),
-                id: this.gameRecientes[this.teamSelect][index].matchday_id,
-                match_result:
-                  this.gameRecientes[this.teamSelect][index].home_team_abbreviation ==
-                  this.teamSelect
-                    ? this.gameRecientes[this.teamSelect][index].home_match_result
-                    : this.gameRecientes[this.teamSelect][index].visiting_match_result,
-              })
-              gameFilter.push(this.gameRecientes[this.teamSelect][index])
-            }
-          }
-        }
-      } else {
-        if (this.gameRecientes[this.teamSelect]) {
-          for (let index = 0; index < this.gameRecientes[this.teamSelect].length; index++) {
-            matchdayFilter.push({
-              name: this.getRound(this.gameRecientes[this.teamSelect][index].matchday_abbreviation),
-              id: this.gameRecientes[this.teamSelect][index].matchday_id,
-              match_result:
-                this.gameRecientes[this.teamSelect][index].home_team_abbreviation == this.teamSelect
-                  ? this.gameRecientes[this.teamSelect][index].home_match_result
-                  : this.gameRecientes[this.teamSelect][index].visiting_match_result,
-            })
-            gameFilter.push(this.gameRecientes[this.teamSelect][index])
-          }
-        }
-      }
-      this.gamesFiltersUpdate = gameFilter
-      this.matchdaysFiltersUpdate = matchdayFilter
-    },
-    getRound(abrev) {
-      let abrevFormatted = abrev.replace('M', 'Jornada ')
-      abrevFormatted = abrevFormatted.replace('PO1', 'CFI')
-      abrevFormatted = abrevFormatted.replace('PO2', 'CFV')
-      abrevFormatted = abrevFormatted.replace('PO3', 'SFI')
-      abrevFormatted = abrevFormatted.replace('PO4', 'SFV')
-      abrevFormatted = abrevFormatted.replace('PO5', 'FI')
-      abrevFormatted = abrevFormatted.replace('PO6', 'FV')
-      return abrevFormatted
-    },
-    changeFiltersModal(filters) {
-      this.auxISsection = 1
-      this.filterObject = filters
-      this.openfiltervalue = false
-      this.matchFilter()
-      setTimeout(() => {
-        this.keyUpdate += 1
-        this.updateCarouselGames += 1
-      }, 600)
-    },
-    openFilter() {
-      this.openfiltervalue = true
-    },
-    getMinutesData(plays) {
-      this.localDetails = []
-      this.foreignDetails = []
-      for (let index = 0; index < plays.home_goals_minutes.length; index++) {
-        this.localDetails.push({ description: plays.home_goals_minutes[index], icon: 'goal' })
-      }
-      for (let index = 0; index < plays.visiting_goals_minutes.length; index++) {
-        this.foreignDetails.push({ description: plays.visiting_goals_minutes[index], icon: 'goal' })
-      }
-      for (let index = 0; index < plays.home_yellow_cards_minutes.length; index++) {
-        this.localDetails.push({
-          description: plays.home_yellow_cards_minutes[index],
-          icon: 'yellow-card',
-        })
-      }
-      for (let index = 0; index < plays.away_yellow_cards_minutes.length; index++) {
-        this.foreignDetails.push({
-          description: plays.away_yellow_cards_minutes[index],
-          icon: 'yellow-card',
-        })
-      }
-      for (let index = 0; index < plays.home_red_cards_minutes.length; index++) {
-        this.localDetails.push({
-          description: plays.home_red_cards_minutes[index],
-          icon: 'red-card',
-        })
-      }
-      for (let index = 0; index < plays.away_red_cards_minutes.length; index++) {
-        this.foreignDetails.push({
-          description: plays.away_red_cards_minutes[index],
-          icon: 'red-card',
-        })
-      }
-    },
-    changeCarouselItem(val) {
-      setTimeout(() => {
-        if (JSON.stringify(val) !== JSON.stringify(this.valLast)) {
-          if (this.gameRecientesFilter && this.gameRecientesFilter.length > 0) {
-            if (val) {
-              if (val.selectedItem === undefined) {
-                val.selectedItem = this.gameRecientesFilter[this.gameRecientesFilter.length - 1]
-                val.selectedItemIndex = this.gameRecientesFilter.length - 1
-              }
-              this.valLast = val
-              if (this.auxISsection == 1) {
-                this.$emit('input', {
-                  selectedItem: this.gameRecientesFilter[this.gameRecientesFilter.length - 1],
-                  selectedItemIndex: this.gameRecientesFilter.length - 1,
-                })
-                this.getMinutesData(
-                  this.gameRecientesFilter[this.gameRecientesFilter.length - 1].minutes,
-                )
-                this.selectedIndexOption = this.gameRecientesFilter.length - 1
-                this.defaultDropItem = {
-                  propName: 'id',
-                  value: this.gameRecientesFilter[this.gameRecientesFilter.length - 1].matchday_id,
-                }
-              } else {
-                this.$emit('input', val)
-                this.getMinutesData(val.selectedItem.minutes)
-                this.selectedIndexOption = val.selectedItemIndex
-                this.defaultDropItem = { propName: 'id', value: val.selectedItem.matchday_id }
-              }
-              this.keyUpdate += 1
-            }
-          }
-        }
-      }, 200)
-    },
-    changeDropdown(value) {
-      if (this.gameRecientesFilter && this.gameRecientesFilter.length > 0) {
-        if (this.auxISsection == 1) {
-          this.selectedIndexOption = this.gameRecientesFilter.length - 1
-          this.defaultDropItem = {
-            propName: 'id',
-            value: this.gameRecientesFilter[this.gameRecientesFilter.length - 1].matchday_id,
-          }
-        } else {
-          const index = this.gameRecientesFilter.findIndex((x) => x.matchday_id == value.id)
-          if (index != -1) {
-            this.selectedIndexOption = index
-            this.defaultDropItem = {
-              propName: 'id',
-              value: this.gameRecientesFilter[index].matchday_id,
-            }
-          }
-        }
-      }
-    },
-    changeSwitchRadio(val) {
-      this.auxISsection = 1
-      if (typeof val !== 'object') {
-        this.teamSelect = val
-        this.$emit('changeTeam', this.teamSelect)
-        this.updateCarouselGames += 1
-        this.matchFilter()
-      }
-    },
-    clickOnSelectOption(val) {
-      this.$emit('clickOnSelectOption', val)
-    },
-  },
-}
-</script>
-<style module>
-@import '/css/fonts.css';
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap');
-body {
-  margin: 0;
-  line-height: normal;
-}
-:root {
-  /* fonts */
-  --font-poppinsre: Poppins;
-  --font-interre: Inter;
-  /* font sizes */
-  --font-size-4xsre: 9px;
-  --font-size-smre: 14px;
-  --font-size-xsre: 12px;
-  --font-size-base-2re: 15.2px;
-  --font-size-3xsre: 10px;
-  --font-size-2xsre: 11px;
-  /* Colors */
-  --color-gray-100re: #172632;
-  --color-gray-200re: #172531;
-  --color-gray-300re: rgba(255, 255, 255, 0.05);
-  --color-gray-400re: rgba(255, 255, 255, 0.2);
-  --color-gray-500re: rgba(255, 255, 255, 0.3);
-  --color-gray-600re: rgba(255, 255, 255, 0.1);
-  --color-gray-700re: rgba(255, 255, 255, 0.7);
-  --color-goldenrodre: #f7c330;
-  --color-redre: #ff0000;
-  --color-yellowgreen-100re: #cbed6e;
-  --color-yellowgreen-200re: #cbee6b;
-  --color-white: #fff;
-  --color-whitesmokere: #f4f4f4;
-  --color-darkbluere: #0234c5;
-  --color-darkslategrayre: #1e2b36;
-  --color-slategrayre: #56637b;
-  /* Spacing */
-  --sizes-round-corner-round-corner-32re: 32px;
-  --sizes-spacing-space-24re: 24px;
-  /* Gaps */
-  --gap-basere: 16px;
-  --gap-xsre: 12px;
-  --gap-40xlre: 59px;
-  --gap-3xsre: 10px;
-  --gap-4xsre: 9px;
-  --gap-midre: 17px;
-  --gap-minire: 15px;
-  --gap-8xsre: 5px;
-  --gap-4xs-7re: 8.7px;
-  --gap-11xlre: 30px;
-  /* Paddings */
-  --padding-basere: 16px;
-  --padding-5xlre: 24px;
-  --padding-9xsre: 4px;
-  --padding-6xs-5re: 6.5px;
-  --padding-mid-4re: 17.4px;
-  --padding-11xsre: 2px;
-  --padding-3xsre: 10px;
-  --padding-5xsre: 8px;
-  --padding-xsre: 12px;
-  --padding-xlre: 20px;
-  /* Border radiuses */
-  --br-12xsre: 1px;
-  --br-2xs-2re: 10.2px;
-  --br-mid-4re: 17.4px;
-  --br-5xsre: 8px;
-  --br-31xlre: 50px;
-  --br-13xlre: 32px;
-  --br-3xs-6re: 9.6px;
-}
-.containernofoundsearchrecientes {
-  width: 100%;
-  height: 38px;
-  display: inline-block;
-  margin: 0 auto;
-}
-.text-containernofoundsearchrecientes {
-  font-size: 13px;
-  text-align: center;
-  color: rgb(176, 176, 176);
-  line-height: 16px;
-}
-.btn-delete-filters {
-  width: 70%;
-  height: 26px;
-  border-radius: 16px;
-  font-size: 14px;
-  text-align: center;
-  background: rgba(255, 255, 255, 0.2);
-  color: white;
-  margin: 0 auto;
-  line-height: 26px;
-  margin-top: 5px;
-}
-.btn-delete-filters:hover {
-  cursor: pointer;
-  background: rgba(255, 255, 255, 0.5);
-}
-.btndeletefilters {
-  width: 70%;
-  height: 26px;
-  border-radius: 16px;
-  font-size: 14px;
-  text-align: center;
-  background: rgba(255, 255, 255, 0.2);
-  color: white;
-  margin: 0 auto;
-  line-height: 26px;
-  margin-top: 5px;
-}
-.btndeletefilters:hover {
-  cursor: pointer;
-  background: rgba(255, 255, 255, 0.5);
-}
-.leyenddeleteshow {
-  font-size: 13px;
-  text-align: center;
-  color: rgb(176, 176, 176);
-  line-height: 16px;
-}
-.selectoritem {
-  width: 270px;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: center;
-  gap: var(--gap-midre);
-}
-.anNoEstn {
-  font-weight: 500;
-}
-.groupsLeague {
-  position: relative;
-  line-height: 20px;
-}
-.historicas {
-  position: relative;
-  line-height: 20px;
-  opacity: 0.6;
-}
-.switchOption {
-  border-radius: var(--br-13xlre);
-  width: 109px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: var(--padding-3xsre) var(--sizes-spacing-space-24re);
-  box-sizing: border-box;
-}
-.recientes {
-  position: relative;
-  line-height: 20px;
-  font-weight: 600;
-}
-.switchOption1 {
-  border-radius: var(--br-13xlre);
-  background-color: var(--color-darkslategrayre);
-  border: 0.8px solid var(--color-yellowgreen-200re);
-  box-sizing: border-box;
-  width: 107.8px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: var(--padding-3xsre) var(--sizes-spacing-space-24re);
-}
-.switchOption2 {
-  border-radius: var(--sizes-round-corner-round-corner-32re);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: var(--padding-3xsre) var(--sizes-spacing-space-24re);
-}
-.switchStatesBig {
-  border-radius: var(--sizes-round-corner-round-corner-32re);
-  background-color: var(--color-gray-100re);
-  border: 1px solid var(--color-gray-500re);
-  display: inline-block;
-  width: 320px;
-  font-size: var(--font-size-xsre);
-  color: var(--color-white);
-}
-.groupsLeagueParent {
-  align-self: stretch;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--gap-11xlre);
-  text-align: center;
-}
-.imgHomeTeamIcon {
-  position: relative;
-  width: 28px;
-  height: 28px;
-  object-fit: cover;
-}
-.imgHomeTeamWrapper {
-  border-radius: var(--br-31xlre);
-  background-color: var(--color-gray-200re);
-  width: 40px;
-  height: 40px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--padding-3xsre);
-  box-sizing: border-box;
-}
-.teamContainer {
-  border-radius: var(--br-31xlre);
-  border: 1px solid var(--color-darkbluere);
-  box-sizing: border-box;
-  width: 48px;
-  height: 48px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: var(--padding-3xsre);
-}
-.name {
-  position: relative;
-  letter-spacing: 0.31px;
-  line-height: 30.87px;
-  font-weight: 500;
-}
-.homeTeamContainer {
-  flex: 1;
-  border-bottom: 1px solid var(--color-slategrayre);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0px 0px var(--padding-xlre);
-  gap: var(--gap-3xsre);
-}
-.div {
-  position: relative;
-  font-weight: 600;
-}
-.scoreContainer {
-  border-radius: var(--br-mid-4re);
-  background-color: var(--color-gray-600re);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: 6.524074554443359px 17.397533416748047px;
-  gap: var(--gap-4xs-7rere);
-}
-.scoreContainerWrapper {
-  align-self: stretch;
-  width: 323px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  text-align: center;
-  font-size: 15.22px;
-  color: var(--color-white);
-  font-family: var(--font-interre);
-}
-.teamContainer1 {
-  border-radius: var(--br-31xlre);
-  border: 1px solid var(--color-yellowgreen-100re);
-  box-sizing: border-box;
-  width: 48px;
-  height: 48px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: var(--padding-3xsre);
-}
-.awayTeamContainer {
-  flex: 1;
-  border-bottom: 1px solid var(--color-slategrayre);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 0px 0px var(--padding-xlre);
-  gap: var(--gap-3xsre);
-}
-.matchContainer {
-  align-self: stretch;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0px 0px var(--padding-xsre);
-  color: var(--color-whitesmokere);
-}
-.sliderMatchesChild {
-  position: relative;
-  border-radius: 9.55px;
-  width: 7.02px;
-  height: 14.23px;
-}
-.manchesterUnited {
-  position: relative;
-  letter-spacing: -0.01em;
-  line-height: 20.07px;
-  font-weight: 500;
-}
-.sliderMatchesItem {
-  position: relative;
-  border-radius: 9.55px;
-  width: 7.02px;
-  height: 14.24px;
-}
-.sliderMatches {
-  align-self: stretch;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: var(--padding-11xsre) var(--padding-basere);
-  gap: var(--gap-3xsre);
-  text-align: center;
-}
-.sortIcon {
-  position: relative;
-  width: 18px;
-  height: 18px;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-.filtros {
-  position: relative;
-  font-size: var(--font-size-smre);
-  line-height: 24px;
-  font-family: var(--font-poppinsre);
-  color: var(--color-white);
-  text-align: left;
-}
-.sortParent {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: var(--gap-8xsre);
-}
-.shapeIcon {
-  position: relative;
-  width: 8px;
-  height: 4px;
-}
-.btnFilter {
-  cursor: pointer;
-  border: 1px solid var(--color-gray-400re);
-  padding: var(--padding-5xsre) var(--padding-3xsre);
-  background-color: var(--color-gray-300re);
-  border-radius: var(--br-5xsre);
-  box-sizing: border-box;
-  width: 102px;
-  height: 32px;
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-.btnFilter1 {
-  cursor: pointer;
-  border: 1px solid var(--color-gray-400re);
-  background-color: var(--color-gray-300re);
-  border-radius: var(--br-5xsre);
-  box-sizing: border-box;
-  height: 32px;
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-  justify-content: flex-start;
-  gap: var(--gap-3xsre);
-  font-size: 10px;
-}
-.btnFilterParent {
-  width: 225px;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: var(--gap-xsre);
-}
-.backArrowIcon {
-  position: relative;
-  border-radius: 10.21px;
-  width: 7.5px;
-  height: 15.21px;
-}
-.teamContainer2 {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--gap-8xsre);
-}
-.homeTeam {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--gap-minire);
-}
-.div4 {
-  flex: 1;
-  position: relative;
-  font-weight: 600;
-}
-.finalScore {
-  border-radius: var(--br-mid-4re);
-  background-color: var(--color-gray-600re);
-  border: 0.5px solid var(--color-yellowgreen-200re);
-  box-sizing: border-box;
-  width: 70.73px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: 6.524074554443359px 17.397533416748047px;
-  gap: var(--gap-4xs-7rere);
-}
-.manchesterUnited1 {
-  position: relative;
-  font-size: var(--font-size-xsre);
-  font-weight: 500;
-  font-family: var(--font-poppinsre);
-  color: var(--color-gray-700re);
-}
-.scoreContainer1 {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--gap-4xsre);
-  text-align: center;
-  font-size: 15.22px;
-  color: var(--color-white);
-  font-family: var(--font-interre);
-}
-.match {
-  width: 325px;
-  display: inline-block;
-}
-.manchesterUnited2 {
-  position: relative;
-  text-decoration: underline;
-  font-weight: 500;
-  position: absolute;
-  right: 0;
-  cursor: pointer;
-}
-.manchesterUnited2:hover {
-  color: rgba(255, 255, 255, 1);
-}
-.btnDetails {
-  width: 225px;
-  height: 28px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  text-align: right;
-  font-size: var(--font-size-xsre);
-}
-.matchContainer1 {
-  align-self: stretch;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: var(--padding-9xsre) 0px 0px;
-}
-.goalChild {
-  position: relative;
-  width: 8.03px;
-  height: 8.03px;
-}
-.goal {
-  width: 9px;
-  height: 9px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-.manchesterUnited3 {
-  position: relative;
-  letter-spacing: -0.01em;
-  line-height: 19.5px;
-  text-transform: capitalize;
-  font-weight: 500;
-}
-.minuteEvent {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--gap-4xsre);
-}
-.yellowCard {
-  position: relative;
-  border-radius: var(--br-12xsre);
-  background-color: var(--color-goldenrodre);
-  width: 4px;
-  height: 6px;
-}
-.awayTeamEvents {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: var(--gap-3xsre);
-}
-.rectangle {
-  position: relative;
-  border-radius: var(--br-12xsre);
-  background-color: var(--color-redre);
-  width: 4px;
-  height: 6px;
-}
-.homeTeamEvents {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: flex-start;
-  gap: var(--gap-3xsre);
-  text-align: right;
-}
-.totalEvents {
-  display: none;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--gap-40xlre);
-  font-size: var(--font-size-4xsre);
-}
-.headerSeccionAlineaciones1 {
-  align-self: stretch;
-  background-color: var(--color-gray-200re);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0px 48px;
-  gap: var(--gap-basere);
-}
-.sliderMatchesInner {
-  position: relative;
-  border-radius: 9.55px;
-  width: 13.39px;
-  height: 6px;
-}
-.btnFilter2 {
-  cursor: pointer;
-  border: 1px solid var(--color-gray-400re);
-  padding: var(--padding-5xsre) var(--padding-3xsre);
-  background-color: var(--color-gray-300re);
-  border-radius: var(--br-5xsre);
-  box-sizing: border-box;
-  width: 111px;
-  position: relative;
-  height: 32px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-right: 10px;
-}
-.btnDetails1 {
-  width: 111px;
-  height: 28px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-}
-.matchContainer3 {
-  align-self: stretch;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: start;
-  padding: var(--padding-9xsre) 0px 0px;
-  text-align: right;
-  font-size: var(--font-size-xsre);
-}
-.backArrowIcon1 {
-  position: relative;
-  border-radius: 10.21px;
-  width: 14.31px;
-  height: 6.41px;
-}
-.match1 {
-  width: 340px;
-  display: inline-block;
-  margin: 0 auto;
-}
-.headerSeccionAlineaciones2 {
-  align-self: stretch;
-  background-color: var(--color-gray-200re);
-  display: none;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0px var(--padding-5xlre);
-  gap: var(--gap-basere);
-}
-.jugadores2 {
-  position: relative;
-  line-height: 20px;
-  font-weight: 600;
-  opacity: 0.6;
-}
-.switchOption6 {
-  border-radius: var(--sizes-round-corner-round-corner-32re);
-  width: 74px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: var(--padding-3xsre) var(--sizes-spacing-space-24re);
-  box-sizing: border-box;
-}
-.switchOption7 {
-  border-radius: var(--sizes-round-corner-round-corner-32re);
-  background-color: var(--color-darkslategrayre);
-  border: 0.8px solid var(--color-yellowgreen-200re);
-  box-sizing: border-box;
-  width: 74.8px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: var(--padding-3xsre) var(--sizes-spacing-space-24re);
-}
-.switchStatesBig2 {
-  border-radius: var(--sizes-round-corner-round-corner-32re);
-  background-color: var(--color-gray-100re);
-  border: 1px solid var(--color-gray-500re);
-  display: inline-block;
-  width: 280px;
-}
-.manchesterUnited26 {
-  position: relative;
-  font-size: var(--font-size-3xsre);
-  font-weight: 500;
-}
-.homeTeamContainer2 {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--gap-3xsre);
-}
-.vectorIcon {
-  position: relative;
-  width: 15px;
-  height: 15px;
-}
-.teamSwitch {
-  border-radius: 25px;
-  box-sizing: border-box;
-  width: 98px;
-  overflow: hidden;
-  height: 21px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: 0px 3px;
-}
-.matchContainer5 {
-  align-self: stretch;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0px 0px var(--padding-xsre);
-  text-align: left;
-  color: var(--color-whitesmokere);
-}
-.manchesterUnited27 {
-  position: relative;
-  letter-spacing: -0.01em;
-  line-height: 20.07px;
-  font-weight: 500;
-  z-index: 0;
-}
-.sliderMatchesChild1 {
-  position: absolute;
-  margin: 0 !important;
-  top: 14.31px;
-  left: 261.07px;
-  border-radius: 10.21px;
-  width: 14.31px;
-  height: 6.41px;
-  z-index: 1;
-}
-.sliderMatchesChild2 {
-  position: absolute;
-  margin: 0 !important;
-  top: 0.31px;
-  left: 6.41px;
-  border-radius: 10.21px;
-  width: 14.31px;
-  height: 6.41px;
-  z-index: 2;
-}
-.sliderMatches2 {
-  display: none;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: flex-start;
-  padding: var(--padding-11xsre) var(--padding-basere);
-  position: relative;
-  gap: var(--gap-3xsre);
-}
-.filtros2 {
-  position: relative;
-  font-size: var(--font-size-smre);
-  line-height: 24px;
-  font-family: var(--font-poppinsre);
-  color: var(--color-white);
-  text-align: left;
-  display: none;
-}
-.btnFilter4 {
-  cursor: pointer;
-  position: relative;
-  border: 1px solid var(--color-gray-400re);
-  padding: var(--padding-5xsre) var(--padding-3xsre);
-  background-color: var(--color-gray-300re);
-  border-radius: var(--br-5xsre);
-  box-sizing: border-box;
-  width: 60px;
-  height: 32px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-.jornada2 {
-  position: relative;
-  line-height: 9px;
-  font-weight: 600;
-  opacity: 0.6;
-}
-.filterMatchday {
-  border-radius: 4px;
-  border: 1px solid var(--color-gray-500re);
-  box-sizing: border-box;
-  width: 102px;
-  height: 25px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.btnDetails2 {
-  width: 60px;
-  height: 28px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  text-align: right;
-  color: var(--color-gray-700re);
-}
-.filtersContainer {
-  align-self: stretch;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  font-size: var(--font-size-3xsre);
-  color: var(--color-white);
-}
-.matchContainer6 {
-  align-self: stretch;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: center;
-  padding: var(--padding-9xsre) 0px 0px;
-}
-.matchDetailContainer {
-  align-self: stretch;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 14px;
-  text-align: left;
-}
-.containerData {
-  align-self: stretch;
-  border-radius: 9px;
-  background-color: #192632;
-  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  padding: var(--padding-basere) var(--padding-5xlre) 32px;
-  gap: var(--gap-xsre);
-  font-size: var(--font-size-smre);
-  color: var(--color-gray-700re);
-}
-.headerSeccionAlineaciones3 {
-  align-self: stretch;
-  display: none;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--gap-basere);
-  text-align: center;
-  font-size: var(--font-size-2xsre);
-  color: var(--color-white);
-}
-.headerSeccionAlineaciones {
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: 132px;
-  text-align: left;
-  font-size: var(--font-size-smre);
-  color: var(--color-gray-700re);
-  font-family: var(--font-poppinsre);
-}
-.headerSeccionAlineaciones31200 {
-  max-width: 540px;
-  align-self: stretch;
-  display: none;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--gap-basere);
-  text-align: center;
-  font-size: var(--font-size-2xsre);
-  color: var(--color-white);
-}
-.headerSeccionAlineaciones3420 {
-  display: flex;
-  max-width: 540px;
-  align-self: stretch;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--gap-basere);
-  text-align: center;
-  font-size: var(--font-size-2xsre);
-  color: var(--color-white);
-}
-.headerSeccionAlineaciones3880 {
-  display: none;
-  align-self: stretch;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--gap-basere);
-  text-align: center;
-  font-size: var(--font-size-2xsre);
-  color: var(--color-white);
-}
-.headerSeccionAlineaciones3540 {
-  display: flex;
-  min-width: 300px;
-  align-self: stretch;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--gap-basere);
-  text-align: center;
-  font-size: var(--font-size-2xsre);
-  color: var(--color-white);
-}
-.headerSeccionAlineaciones11200 {
-  align-self: stretch;
-  width: auto;
-  max-width: 1089px;
-  align-self: stretch;
-  background-color: var(--color-gray-200re);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0px 48px;
-  gap: var(--gap-basere);
-}
-.headerSeccionAlineaciones1420 {
-  display: none;
-  align-self: stretch;
-  background-color: var(--color-gray-200re);
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0px 48px;
-  gap: var(--gap-basere);
-}
-.headerSeccionAlineaciones1880 {
-  display: none;
-  align-self: stretch;
-  background-color: var(--color-gray-200re);
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0px 48px;
-  gap: var(--gap-basere);
-}
-.headerSeccionAlineaciones21200 {
-  display: none;
-  align-self: stretch;
-  width: auto;
-  max-width: 840px;
-  align-self: stretch;
-  background-color: var(--color-gray-200re);
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0px var(--padding-5xlre);
-  gap: var(--gap-basere);
-}
-.headerSeccionAlineaciones2420 {
-  display: none;
-  align-self: stretch;
-  background-color: var(--color-gray-200re);
-  display: none;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0px var(--padding-5xlre);
-  gap: var(--gap-basere);
-}
-.headerSeccionAlineaciones2880 {
-  display: flex;
-  align-self: stretch;
-  background-color: var(--color-gray-200re);
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0px var(--padding-5xlre);
-  gap: var(--gap-basere);
-}
-.headerSeccionAlineaciones2540 {
-  display: none;
-  align-self: stretch;
-  background-color: var(--color-gray-200re);
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0px var(--padding-5xlre);
-  gap: var(--gap-basere);
-}
-</style>
+<template>
+  <div :class="$style.headerSeccionAlineaciones">
+    <div :class="headerSeccionAlineaciones1Class" id="header-desktop-full">
+      <div :class="$style.groupsLeagueParent">
+        <div :class="$style.groupsLeague">
+          <span>Las alineaciones de este partido </span>
+          <span :class="$style.anNoEstn">aún no están disponibles</span>
+          <span>. Por lo pronto puedes ver alineaciones:</span>
+        </div>
+        <div :class="$style.switchStatesBig" id="switch-lineup">
+          <GscSwitchComponent
+            :buttons="['Historicos', 'Recientes', 'Probables']"
+            :selectedOption="optionSelected"
+            :type="1"
+            width="600px"
+            :arrow="false"
+            borderRadius="32px"
+            height="28px"
+            fontSize="11px;"
+            fontFamily="Poppins-Regular"
+            border-width="1px"
+            border-width-container="0.5px"
+            backgroundOptionDisable="#162533"
+            @input="clickOnSelectOption"
+          />
+        </div>
+      </div>
+      <div :class="$style.matchContainer" id="match-container">
+        <div :class="$style.homeTeamContainer">
+          <div :class="$style.teamContainer">
+            <div :class="$style.imgHomeTeamWrapper">
+              <img
+                :class="$style.imgHomeTeamIcon"
+                alt=""
+                :src="
+                  getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/' +
+                  gameInfo.home_team +
+                  '.png', provider)
+                "
+              />
+            </div>
+          </div>
+          <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
+        </div>
+        <div :class="$style.teamSwitch" id="switch-team">
+          <GSCSwitchRadio
+            width="41px"
+            height="20px"
+            heightCircle="15px"
+            widthCircle="15px"
+            circle-color-switch="#cbee6b"
+            :text-option-left="gameInfo.home_team_abbreviation"
+            @change="changeSwitchRadio"
+            :text-option-right="gameInfo.away_team_abbreviation"
+            font-color="white"
+            :value-default="teamSelect"
+            :hidden-labels="true"
+          />
+        </div>
+        <div :class="$style.awayTeamContainer">
+          <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
+          <div :class="$style.teamContainer1">
+            <div :class="$style.imgHomeTeamWrapper">
+              <img
+                :class="$style.imgHomeTeamIcon"
+                alt=""
+                :src="
+                  getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/' +
+                  gameInfo.away_team +
+                  '.png', provider)
+                "
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div :class="$style.matchContainer1" id="match-info-container">
+        <div :class="$style.btnFilterParent">
+          <button :class="$style.btnFilter" id="btn-filters">
+            <div :class="$style.sortParent" @click="openFilter">
+              <img
+                :class="$style.sortIcon"
+                alt=""
+                src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-filter.svg"
+              />
+              <div :class="$style.filtros">Filtros</div>
+            </div>
+            <img
+              :class="$style.shapeIcon"
+              alt=""
+              src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-expand-arrow.svg"
+            />
+            <GSCFilter
+              :item-select="filterObject"
+              :is-open="openfiltervalue"
+              @change="changeFiltersModal"
+              :reset="vDeleteFilter"
+              margin-modal="-83px"
+            />
+          </button>
+          <GSCDropdown
+            @click="clickOnValueFilter"
+            v-if="gameRecientesFilter.length > 0"
+            :key="keyUpdate"
+            :default-item-by-prop="defaultDropItem"
+            :class="$style.btnFilter1"
+            id="btn-filters"
+            :items="matchdaysFinal"
+            @input="changeDropdown"
+            height="32px"
+            width="114px"
+            background-color="rgba(255, 255, 255, 0.05);"
+            color="white"
+            border-width="1"
+            borderColor="rgba(255, 255, 255, 0.2)"
+            border-radius="0px"
+            fontSize="10px"
+            arrowHeight="16"
+            :arrowWidth="16"
+            listHeight="300px"
+            listBackgroundColor="#243a4c"
+            hoverBackgroundColor="#0d1d2a"
+            listItemColor="#FFFFFF"
+            listItemSelectedBackgroundColor="#0d1d2a"
+            listItemSelectedColor="#c3e569"
+            listItemPadding="8px 7px"
+            listBorderColor="rgba(255, 255, 255, 0.1)"
+            listBorderRadius="2px"
+          >
+            <template #default="data">
+              <div class="selector-tournaments">{{ data.selectedItem.name }}</div>
+            </template>
+            <template #availableItem="{ item }">
+              <div>{{ item.name }}</div>
+            </template>
+          </GSCDropdown>
+        </div>
+        <div :class="$style.match">
+          <GSCCarousel
+            @click="clickOnValueCarrousel"
+            v-if="gameRecientesFilter.length > 0"
+            :key="updateCarouselGames"
+            :default-item-by-index="selectedIndexOption"
+            :items="gameRecientesFilter"
+            @input="changeCarouselItem"
+            isMainSlidePriority
+            areSlidesArrowsVisible
+            :areNavigationArrowsVisible="false"
+            slideLeftArrowBackgroundImage="none"
+            slideRightArrowBackgroundImage="none"
+          >
+            <template #default="{ item }">
+              <div :class="$style.selectoritem">
+                <div :class="$style.homeTeam">
+                  <div :class="$style.teamContainer2">
+                    <div :class="$style.manchesterUnited">{{ item.home_team_abbreviation }}</div>
+                    <img
+                      :class="$style.imgHomeTeamIcon"
+                      alt=""
+                      :src="
+                        getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/' +
+                        item.home_team +
+                        '.png', provider)
+                      "
+                    />
+                  </div>
+                </div>
+                <div :class="$style.scoreContainer1">
+                  <div :class="$style.finalScore">
+                    <div :class="$style.div4" v-if="Object.keys(item).length > 0">
+                      {{ item.score[0] }}
+                    </div>
+                    <div :class="$style.div4">-</div>
+                    <div :class="$style.div4" v-if="Object.keys(item).length > 0">
+                      <template v-if="Array.isArray(item.score)">{{ item.score[1] }}</template>
+                      <template v-else>{{ item.score[4] }}</template>
+                    </div>
+                  </div>
+                  <div :class="$style.manchesterUnited1">
+                    <template v-if="item.home_team_abbreviation == teamSelect">
+                      <template v-if="item.home_match_result == 1">Ganado</template>
+                      <template v-if="item.home_match_result == 2">Perdido</template>
+                      <template v-if="item.home_match_result == 3">Empatado</template>
+                    </template>
+                    <template v-if="item.away_team_abbreviation == teamSelect">
+                      <template v-if="item.visiting_match_result == 1">Ganado</template>
+                      <template v-if="item.visiting_match_result == 2">Perdido</template>
+                      <template v-if="item.visiting_match_result == 3">Empatado</template>
+                    </template>
+                  </div>
+                </div>
+                <div :class="$style.homeTeam">
+                  <div :class="$style.teamContainer2">
+                    <img
+                      :class="$style.imgHomeTeamIcon"
+                      alt=""
+                      :src="
+                        getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/' +
+                        item.away_team +
+                        '.png', provider)
+                      "
+                    />
+                    <div :class="$style.manchesterUnited">{{ item.away_team_abbreviation }}</div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </GSCCarousel>
+          <div v-else>
+            <div :class="$style.containernofoundsearchrecientes">
+              <div :class="$style.leyenddeleteshow">
+                No hay resultados con los criterios<br />de búsqueda aplicados.
+              </div>
+              <div :class="$style.btndeletefilters" @click="deleteFilters">
+                Eliminar filtros aplicados
+              </div>
+            </div>
+          </div>
+          <GSCMatchDetails
+            style="margin-top: 30px"
+            v-if="showDetails"
+            :localDetails="localDetails"
+            :foreignDetails="foreignDetails"
+          />
+        </div>
+        <div :class="$style.btnDetails">
+          <div :class="$style.manchesterUnited2" @click="clickShowDetails">
+            <template v-if="showDetails">Ocultar detalles</template
+            ><template v-else>Ver detalles</template>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div :class="headerSeccionAlineaciones2Class" id="header-desktop">
+      <div :class="$style.groupsLeagueParent">
+        <div :class="$style.groupsLeague">
+          <span>Las alineaciones de este partido </span>
+          <span :class="$style.anNoEstn">aún no están disponibles</span>
+          <span>. Por lo pronto puedes ver alineaciones:</span>
+        </div>
+        <div :class="$style.switchStatesBig" id="switch-lineup">
+          <GscSwitchComponent
+            :buttons="['Historicos', 'Recientes', 'Probables']"
+            :selectedOption="optionSelected"
+            :type="1"
+            width="600px"
+            :arrow="false"
+            borderRadius="32px"
+            height="28px"
+            fontSize="11px;"
+            fontFamily="Poppins-Regular"
+            border-width="1px"
+            border-width-container="0.5px"
+            backgroundOptionDisable="#162533"
+            @input="clickOnSelectOption"
+          />
+        </div>
+      </div>
+      <div :class="$style.matchContainer" id="match-container">
+        <div :class="$style.homeTeamContainer">
+          <div :class="$style.teamContainer">
+            <div :class="$style.imgHomeTeamWrapper">
+              <img
+                :class="$style.imgHomeTeamIcon"
+                alt=""
+                :src="
+                  getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/' +
+                  gameInfo.home_team +
+                  '.png', provider)
+                "
+              />
+            </div>
+          </div>
+          <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
+        </div>
+        <div :class="$style.teamSwitch" id="switch-team">
+          <GSCSwitchRadio
+            width="41px"
+            height="20px"
+            heightCircle="15px"
+            widthCircle="15px"
+            circle-color-switch="#cbee6b"
+            :text-option-left="gameInfo.home_team_abbreviation"
+            @change="changeSwitchRadio"
+            :text-option-right="gameInfo.away_team_abbreviation"
+            font-color="white"
+            :value-default="teamSelect"
+            :hidden-labels="true"
+          />
+        </div>
+        <div :class="$style.awayTeamContainer">
+          <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
+          <div :class="$style.teamContainer1">
+            <div :class="$style.imgHomeTeamWrapper">
+              <img
+                :class="$style.imgHomeTeamIcon"
+                alt=""
+                :src="
+                  getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/' +
+                  gameInfo.away_team +
+                  '.png', provider)
+                "
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div :class="$style.matchContainer3">
+        <button :class="$style.btnFilter2" id="btn-filters">
+          <div :class="$style.sortParent" @click="openFilter">
+            <img
+              :class="$style.sortIcon"
+              alt=""
+              src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-filter1.svg"
+            />
+            <div :class="$style.filtros">Filtros</div>
+          </div>
+          <img
+            :class="$style.shapeIcon"
+            alt=""
+            src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-expand-arrow1.svg"
+          />
+          <GSCFilter
+            :item-select="filterObject"
+            :is-open="openfiltervalue"
+            @change="changeFiltersModal"
+            margin-modal="-99px"
+          />
+        </button>
+        <GSCDropdown
+          @click="clickOnValueFilter"
+          v-if="gameRecientesFilter.length > 0"
+          :key="keyUpdate"
+          :default-item-by-prop="defaultDropItem"
+          :class="$style.btnFilter1"
+          id="btn-filters"
+          :items="matchdaysFinal"
+          @input="changeDropdown"
+          height="32px"
+          width="114px"
+          background-color="rgba(255, 255, 255, 0.05);"
+          color="white"
+          border-width="1"
+          borderColor="rgba(255, 255, 255, 0.2)"
+          border-radius="0px"
+          fontSize="10px"
+          arrowHeight="16"
+          :arrowWidth="16"
+          listHeight="300px"
+          listBackgroundColor="#243a4c"
+          hoverBackgroundColor="#0d1d2a"
+          listItemColor="#FFFFFF"
+          listItemSelectedBackgroundColor="#0d1d2a"
+          listItemSelectedColor="#c3e569"
+          listItemPadding="8px 7px"
+          listBorderColor="rgba(255, 255, 255, 0.1)"
+          listBorderRadius="2px"
+        >
+          <template #default="data">
+            <div class="selector-tournaments">{{ data.selectedItem.name }}</div>
+          </template>
+          <template #availableItem="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </GSCDropdown>
+        <div :class="$style.btnDetails1">
+          <div :class="$style.manchesterUnited2" @click="clickShowDetails">
+            <template v-if="showDetails">Ocultar detalles</template
+            ><template v-else>Ver detalles</template>
+          </div>
+        </div>
+      </div>
+      <div :class="$style.matchContainer1" id="match-info-container">
+        <div :class="$style.match1">
+          <GSCCarousel
+            v-if="gameRecientesFilter.length > 0"
+            :items="gameRecientesFilter"
+            :key="updateCarouselGames"
+            :default-item-by-index="selectedIndexOption"
+            @input="changeCarouselItem"
+            isMainSlidePriority
+            areSlidesArrowsVisible
+            :areNavigationArrowsVisible="false"
+            slideLeftArrowBackgroundImage="none"
+            slideRightArrowBackgroundImage="none"
+          >
+            <template #default="{ item }">
+              <div :class="$style.selectoritem">
+                <div :class="$style.homeTeam">
+                  <div :class="$style.teamContainer2">
+                    <div :class="$style.manchesterUnited">{{ item.home_team_abbreviation }}</div>
+                    <img
+                      :class="$style.imgHomeTeamIcon"
+                      alt=""
+                      :src="
+                        getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/' +
+                        item.home_team +
+                        '.png', provider)
+                      "
+                    />
+                  </div>
+                </div>
+                <div :class="$style.scoreContainer1">
+                  <div :class="$style.finalScore">
+                    <div :class="$style.div4" v-if="Object.keys(item).length > 0">
+                      {{ item.score[0] }}
+                    </div>
+                    <div :class="$style.div4">-</div>
+                    <div :class="$style.div4" v-if="Object.keys(item).length > 0">
+                      <template v-if="Array.isArray(item.score)">{{ item.score[1] }}</template>
+                      <template v-else>{{ item.score[4] }}</template>
+                    </div>
+                  </div>
+                  <div :class="$style.manchesterUnited1">
+                    <template v-if="item.home_team_abbreviation == teamSelect">
+                      <template v-if="item.home_match_result == 1">Ganado</template>
+                      <template v-if="item.home_match_result == 2">Perdido</template>
+                      <template v-if="item.home_match_result == 3">Empatado</template>
+                    </template>
+                    <template v-if="item.away_team_abbreviation == teamSelect">
+                      <template v-if="item.visiting_match_result == 1">Ganado</template>
+                      <template v-if="item.visiting_match_result == 2">Perdido</template>
+                      <template v-if="item.visiting_match_result == 3">Empatado</template>
+                    </template>
+                  </div>
+                </div>
+                <div :class="$style.homeTeam">
+                  <div :class="$style.teamContainer2">
+                    <img
+                      :class="$style.imgHomeTeamIcon"
+                      alt=""
+                      :src="
+                        getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/' +
+                        item.away_team +
+                        '.png', provider)
+                      "
+                    />
+                    <div :class="$style.manchesterUnited">{{ item.away_team_abbreviation }}</div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </GSCCarousel>
+          <div v-else>
+            <div :class="$style.containernofoundsearchrecientes">
+              <div :class="$style.leyenddeleteshow">
+                No hay resultados con los criterios<br />de búsqueda aplicados.
+              </div>
+              <div :class="$style.btndeletefilters" @click="deleteFilters">
+                Eliminar filtros aplicados
+              </div>
+            </div>
+          </div>
+          <GSCMatchDetails
+            style="margin-top: 30px"
+            v-if="showDetails"
+            :localDetails="localDetails"
+            :foreignDetails="foreignDetails"
+          />
+        </div>
+      </div>
+    </div>
+    <div :class="headerSeccionAlineaciones3Class" id="header-mobile">
+      <div :class="$style.switchStatesBig2" id="switch-lineup">
+        <GscSwitchComponent
+          :buttons="['Historicos', 'Recientes', 'Probables']"
+          :selectedOption="optionSelected"
+          :type="1"
+          width="600px"
+          :arrow="false"
+          borderRadius="32px"
+          height="28px"
+          fontSize="11px;"
+          fontFamily="Poppins-Regular"
+          border-width="1px"
+          border-width-container="0.5px"
+          backgroundOptionDisable="#162533"
+          @input="clickOnSelectOption"
+        />
+      </div>
+      <div :class="$style.containerData">
+        <div :class="$style.manchesterUnited26">Alineación utilizada en:</div>
+        <div :class="$style.matchContainer5" id="match-container">
+          <div :class="$style.homeTeamContainer2">
+            <div :class="$style.teamContainer">
+              <div :class="$style.imgHomeTeamWrapper">
+                <img
+                  :class="$style.imgHomeTeamIcon"
+                  alt=""
+                  :src="
+                    getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/' +
+                    gameInfo.home_team +
+                    '.png', provider)
+                  "
+                />
+              </div>
+            </div>
+            <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
+          </div>
+          <div :class="$style.teamSwitch" id="switch-team">
+            <GSCSwitchRadio
+              width="41px"
+              height="20px"
+              heightCircle="15px"
+              widthCircle="15px"
+              circle-color-switch="#cbee6b"
+              :text-option-left="gameInfo.home_team_abbreviation"
+              @change="changeSwitchRadio"
+              :text-option-right="gameInfo.away_team_abbreviation"
+              font-color="white"
+              :value-default="teamSelect"
+              :hidden-labels="true"
+            />
+          </div>
+          <div :class="$style.homeTeamContainer2">
+            <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
+            <div :class="$style.teamContainer1">
+              <div :class="$style.imgHomeTeamWrapper">
+                <img
+                  :class="$style.imgHomeTeamIcon"
+                  alt=""
+                  :src="
+                    getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/' +
+                    gameInfo.away_team +
+                    '.png', provider)
+                  "
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div :class="$style.filtersContainer">
+          <button :class="$style.btnFilter4" id="btn-filters">
+            <div :class="$style.sortParent" @click="openFilter">
+              <img
+                :class="$style.sortIcon"
+                alt=""
+                src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-filter2.svg"
+              />
+              <div :class="$style.filtros2">Filtros</div>
+            </div>
+            <img
+              :class="$style.shapeIcon"
+              alt=""
+              src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-arrow-expand.svg"
+            />
+            <GSCFilter
+              :item-select="filterObject"
+              :is-open="openfiltervalue"
+              @change="changeFiltersModal"
+              margin-modal="-75px"
+            />
+          </button>
+          <GSCDropdown
+            @click="clickOnValueFilter"
+            v-if="gameRecientesFilter.length > 0"
+            :key="keyUpdate"
+            :default-item-by-prop="defaultDropItem"
+            :class="$style.filterMatchday"
+            id="menu-matchday"
+            :items="matchdaysFinal"
+            @input="changeDropdown"
+            height="25px"
+            width="100px"
+            background-color="rgba(255, 255, 255, 0.05);"
+            color="white"
+            border-width="1"
+            borderColor="rgba(255, 255, 255, 0.2)"
+            border-radius="0px"
+            fontSize="10px"
+            arrowHeight="16"
+            :arrowWidth="16"
+            listHeight="300px"
+            listBackgroundColor="#243a4c"
+            hoverBackgroundColor="#0d1d2a"
+            listItemColor="#FFFFFF"
+            listItemSelectedBackgroundColor="#0d1d2a"
+            listItemSelectedColor="#c3e569"
+            listItemPadding="8px 7px"
+            listBorderColor="rgba(255, 255, 255, 0.1)"
+            listBorderRadius="2px"
+          >
+            <template #default="data">
+              <div class="selector-tournaments">{{ data.selectedItem.name }}</div>
+            </template>
+            <template #availableItem="{ item }">
+              <div>{{ item.name }}</div>
+            </template>
+          </GSCDropdown>
+          <div :class="$style.btnDetails2">
+            <div :class="$style.manchesterUnited2" @click="clickShowDetails">
+              <template v-if="showDetails">Ocultar detalles</template
+              ><template v-else>Ver detalles</template>
+            </div>
+          </div>
+        </div>
+        <div :class="$style.matchDetailContainer">
+          <div :class="$style.matchContainer6" id="match-info-container">
+            <div :class="$style.match">
+              <GSCCarousel
+                v-if="gameRecientesFilter.length > 0"
+                :key="updateCarouselGames"
+                :default-item-by-index="selectedIndexOption"
+                :items="gameRecientesFilter"
+                @input="changeCarouselItem"
+                isMainSlidePriority
+                areSlidesArrowsVisible
+                :areNavigationArrowsVisible="false"
+                slideLeftArrowBackgroundImage="none"
+                slideRightArrowBackgroundImage="none"
+              >
+                <template #default="{ item }">
+                  <div :class="$style.selectoritem">
+                    <div :class="$style.homeTeam">
+                      <div :class="$style.teamContainer2">
+                        <div :class="$style.manchesterUnited">
+                          {{ item.home_team_abbreviation }}
+                        </div>
+                        <img
+                          :class="$style.imgHomeTeamIcon"
+                          alt=""
+                          :src="
+                            getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/' +
+                            item.home_team +
+                            '.png', provider)
+                          "
+                        />
+                      </div>
+                    </div>
+                    <div :class="$style.scoreContainer1">
+                      <div :class="$style.finalScore">
+                        <div :class="$style.div4" v-if="Object.keys(item).length > 0">
+                          {{ item.score[0] }}
+                        </div>
+                        <div :class="$style.div4">-</div>
+                        <div :class="$style.div4" v-if="Object.keys(item).length > 0">
+                          <template v-if="Array.isArray(item.score)">{{ item.score[1] }}</template>
+                          <template v-else>{{ item.score[4] }}</template>
+                        </div>
+                      </div>
+                      <div :class="$style.manchesterUnited1">
+                        <template v-if="item.home_team_abbreviation == teamSelect">
+                          <template v-if="item.home_match_result == 1">Ganado</template>
+                          <template v-if="item.home_match_result == 2">Perdido</template>
+                          <template v-if="item.home_match_result == 3">Empatado</template>
+                        </template>
+                        <template v-if="item.away_team_abbreviation == teamSelect">
+                          <template v-if="item.visiting_match_result == 1">Ganado</template>
+                          <template v-if="item.visiting_match_result == 2">Perdido</template>
+                          <template v-if="item.visiting_match_result == 3">Empatado</template>
+                        </template>
+                      </div>
+                    </div>
+                    <div :class="$style.homeTeam">
+                      <div :class="$style.teamContainer2">
+                        <img
+                          :class="$style.imgHomeTeamIcon"
+                          alt=""
+                          :src="
+                            getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/' +
+                            item.away_team +
+                            '.png', provider)
+                          "
+                        />
+                        <div :class="$style.manchesterUnited">
+                          {{ item.away_team_abbreviation }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </GSCCarousel>
+              <div v-else>
+                <div :class="$style.containernofoundsearchrecientes">
+                  <div :class="$style.leyenddeleteshow">
+                    No hay resultados con los criterios<br />de búsqueda aplicados.
+                  </div>
+                  <div :class="$style.btndeletefilters" @click="deleteFilters">
+                    Eliminar filtros aplicados
+                  </div>
+                </div>
+              </div>
+              <GSCMatchDetails
+                style="margin-top: 30px"
+                v-if="showDetails"
+                :localDetails="localDetails"
+                :foreignDetails="foreignDetails"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { GSCDropdown } from '@golstats/gsc-dropdown'
+import '@@/@golstats/gsc-dropdown/dist/style.css'
+import '@@/@golstats/gsc-carousel/dist/style.css'
+import { GSCCarousel } from '@golstats/gsc-carousel'
+import { GscSwitchComponent } from '@golstats/gsc-switch-component'
+import '@@/@golstats/gsc-switch-component/dist/style.css'
+import GSCFilter from './gsc-filter.vue'
+import GSCMatchDetails from './Lineup2D/MatchDetails.vue'
+import { GSCSwitchRadio } from '@golstats/gsc-switch-radio'
+import '@@/@golstats/gsc-switch-radio/dist/style.css'
+import { getImageUrl } from '@/utils/imageUrl'
+export default {
+  components: {
+    GSCCarousel,
+    GscSwitchComponent,
+    GSCDropdown,
+    GSCFilter,
+    GSCSwitchRadio,
+    GSCMatchDetails,
+  },
+  props: {
+    provider: {
+      type: Number,
+      default: 1,
+    },
+    widthSize: {
+      type: Number,
+      default: 0,
+    },
+    optionSelected: {
+      type: String,
+      default: 'Historicos',
+    },
+    selectedOption: {
+      type: String,
+      default: 'Historicos',
+    },
+    gameInfo: {
+      type: Object,
+      default: () => {},
+    },
+    gameRecientes: {
+      type: Array,
+      default: () => [],
+    },
+    matchdaysDefault: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  watch: {
+    optionSelected: {
+      immediate: true,
+      handler: async function (newValue) {
+        if (newValue == 'Recientes') {
+          this.auxISsection = 1
+        }
+      },
+    },
+    gameInfo: {
+      immediate: true,
+      handler: async function (newValue) {
+        try {
+          this.teamSelect = newValue.home_team_abbreviation
+          this.matchFilter()
+        } catch (e) {
+          throw new Error(e)
+        }
+      },
+    },
+    gameRecientes: {
+      immediate: true,
+      handler: async function (newValue) {
+        this.matchFilter()
+      },
+    },
+  },
+  data() {
+    return {
+      playminutes: [],
+      showDetails: false,
+      teamSelect: '',
+      defaultDropItem: {},
+      updateCarouselGames: 0,
+      valLast: {},
+      selectedIndexOption: 0,
+      openfiltervalue: false,
+      vDeleteFilter: false,
+      filterObject: {},
+      coutChange: 0,
+      auxISsection: 0,
+      matchdaysFiltersUpdate: [],
+      gamesFiltersUpdate: [],
+      localDetails: [],
+      keyUpdate: 0,
+      foreignDetails: [],
+    }
+  },
+  computed: {
+    matchdaysFinal() {
+      var matchdaysFinal = []
+      if (typeof this.filterObject.selectedFilterResults !== 'undefined') {
+        if (Object.keys(this.filterObject.selectedFilterResults).length != 3) {
+          if (Object.keys(this.filterObject.selectedFilterResults).length == 2) {
+            if (
+              Object.values(this.filterObject.selectedFilterResults).includes('win') &&
+              Object.values(this.filterObject.selectedFilterResults).includes('draw')
+            ) {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 1) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 3) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+            }
+            if (
+              Object.values(this.filterObject.selectedFilterResults).includes('win') &&
+              Object.values(this.filterObject.selectedFilterResults).includes('lose')
+            ) {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 1) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 2) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+            }
+            if (
+              Object.values(this.filterObject.selectedFilterResults).includes('lose') &&
+              Object.values(this.filterObject.selectedFilterResults).includes('draw')
+            ) {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 3) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 2) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+            }
+          } else {
+            if (this.filterObject.selectedFilterResults[0] == 'win') {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 1) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+            }
+            if (this.filterObject.selectedFilterResults[0] == 'lose') {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 2) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+            }
+            if (this.filterObject.selectedFilterResults[0] == 'draw') {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (this.matchdaysFiltersUpdate[index].match_result == 3) {
+                  matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+                }
+              }
+            }
+          }
+        } else {
+          for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+            matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+          }
+        }
+      } else {
+        for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+          matchdaysFinal.push(this.matchdaysFiltersUpdate[index])
+        }
+      }
+      matchdaysFinal.sort((a, b) => b.id - a.id)
+      return matchdaysFinal
+    },
+    gameRecientesFilter() {
+      var gameFilterFinal = []
+      if (typeof this.filterObject.selectedFilterResults !== 'undefined') {
+        if (Object.keys(this.filterObject.selectedFilterResults).length != 3) {
+          if (Object.keys(this.filterObject.selectedFilterResults).length == 2) {
+            if (
+              Object.values(this.filterObject.selectedFilterResults).includes('win') &&
+              Object.values(this.filterObject.selectedFilterResults).includes('draw')
+            ) {
+              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 1) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 1)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 3) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 3)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+            }
+            if (
+              Object.values(this.filterObject.selectedFilterResults).includes('win') &&
+              Object.values(this.filterObject.selectedFilterResults).includes('lose')
+            ) {
+              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 1) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 1)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 2) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 2)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+            }
+            if (
+              Object.values(this.filterObject.selectedFilterResults).includes('lose') &&
+              Object.values(this.filterObject.selectedFilterResults).includes('draw')
+            ) {
+              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 3) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 3)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+              for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 2) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 2)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+            }
+          } else {
+            if (this.filterObject.selectedFilterResults[0] == 'win') {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 1) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 1)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+            }
+            if (this.filterObject.selectedFilterResults[0] == 'lose') {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 2) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 2)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+            }
+            if (this.filterObject.selectedFilterResults[0] == 'draw') {
+              for (let index = 0; index < this.matchdaysFiltersUpdate.length; index++) {
+                if (
+                  (this.gamesFiltersUpdate[index].away_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].visiting_match_result == 3) ||
+                  (this.gamesFiltersUpdate[index].home_team_abbreviation == this.teamSelect &&
+                    this.gamesFiltersUpdate[index].home_match_result == 3)
+                ) {
+                  gameFilterFinal.push(this.gamesFiltersUpdate[index])
+                }
+              }
+            }
+          }
+        } else {
+          for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
+            gameFilterFinal.push(this.gamesFiltersUpdate[index])
+          }
+        }
+      } else {
+        for (let index = 0; index < this.gamesFiltersUpdate.length; index++) {
+          gameFilterFinal.push(this.gamesFiltersUpdate[index])
+        }
+      }
+      gameFilterFinal.sort((a, b) => a.matchday_id - b.matchday_id)
+      return gameFilterFinal
+    },
+    headerSeccionAlineaciones1Class() {
+      const width = this.widthSize
+      if (width <= 420) {
+        return this.$style.headerSeccionAlineaciones1420
+      } else if (width <= 880) {
+        return this.$style.headerSeccionAlineaciones1880
+      } else if (width <= 1200) {
+        return this.$style.headerSeccionAlineaciones11200
+      } else {
+        return this.$style.headerSeccionAlineaciones1
+      }
+    },
+    headerSeccionAlineaciones2Class() {
+      const width = this.widthSize
+      if (width <= 420) {
+        return this.$style.headerSeccionAlineaciones2420
+      } else if (width <= 540) {
+        return this.$style.headerSeccionAlineaciones2540
+      } else if (width <= 880) {
+        return this.$style.headerSeccionAlineaciones2880
+      } else if (width <= 1200) {
+        return this.$style.headerSeccionAlineaciones21200
+      } else {
+        return this.$style.headerSeccionAlineaciones2
+      }
+    },
+    headerSeccionAlineaciones3Class() {
+      const width = this.widthSize
+      if (width <= 420) {
+        return this.$style.headerSeccionAlineaciones3420
+      } else if (width <= 540) {
+        return this.$style.headerSeccionAlineaciones3540
+      } else if (width <= 880) {
+        return this.$style.headerSeccionAlineaciones3880
+      } else if (width <= 1200) {
+        return this.$style.headerSeccionAlineaciones31200
+      } else {
+        return this.$style.headerSeccionAlineaciones3
+      }
+    },
+  },
+  methods: {
+    getImageUrl,
+    clickOnValueFilter() {
+      this.auxISsection = 0
+    },
+    clickOnValueCarrousel() {
+      this.auxISsection = 0
+    },
+    deleteFilters() {
+      this.vDeleteFilter = true
+      setTimeout(() => {
+        this.vDeleteFilter = false
+      }, 200)
+    },
+    clickShowDetails() {
+      this.showDetails = !this.showDetails
+    },
+    matchFilter() {
+      var matchdayFilter = []
+      var gameFilter = []
+      if (Object.keys(this.filterObject).length > 0) {
+        if (Object.keys(this.filterObject.selectedFilterTeam).length != 2) {
+          for (let index = 0; index < this.gameRecientes[this.teamSelect].length; index++) {
+            if (this.filterObject.selectedFilterTeam[0] == 'local') {
+              if (
+                this.gameRecientes[this.teamSelect][index].home_team_abbreviation == this.teamSelect
+              ) {
+                matchdayFilter.push({
+                  name: this.gameRecientes[this.teamSelect][index].matchday_abbreviation.replace(
+                    'M',
+                    'Jornada ',
+                  ),
+                  id: this.gameRecientes[this.teamSelect][index].matchday_id,
+                  match_result: this.gameRecientes[this.teamSelect][index].home_match_result,
+                })
+                gameFilter.push(this.gameRecientes[this.teamSelect][index])
+              }
+            } else {
+              if (
+                this.gameRecientes[this.teamSelect][index].away_team_abbreviation == this.teamSelect
+              ) {
+                matchdayFilter.push({
+                  name: this.gameRecientes[this.teamSelect][index].matchday_abbreviation.replace(
+                    'M',
+                    'Jornada ',
+                  ),
+                  id: this.gameRecientes[this.teamSelect][index].matchday_id,
+                  match_result: this.gameRecientes[this.teamSelect][index].visiting_match_result,
+                })
+                gameFilter.push(this.gameRecientes[this.teamSelect][index])
+              }
+            }
+          }
+        } else {
+          if (this.gameRecientes[this.teamSelect]) {
+            for (let index = 0; index < this.gameRecientes[this.teamSelect].length; index++) {
+              matchdayFilter.push({
+                name: this.gameRecientes[this.teamSelect][index].matchday_abbreviation.replace(
+                  'M',
+                  'Jornada ',
+                ),
+                id: this.gameRecientes[this.teamSelect][index].matchday_id,
+                match_result:
+                  this.gameRecientes[this.teamSelect][index].home_team_abbreviation ==
+                  this.teamSelect
+                    ? this.gameRecientes[this.teamSelect][index].home_match_result
+                    : this.gameRecientes[this.teamSelect][index].visiting_match_result,
+              })
+              gameFilter.push(this.gameRecientes[this.teamSelect][index])
+            }
+          }
+        }
+      } else {
+        if (this.gameRecientes[this.teamSelect]) {
+          for (let index = 0; index < this.gameRecientes[this.teamSelect].length; index++) {
+            matchdayFilter.push({
+              name: this.getRound(this.gameRecientes[this.teamSelect][index].matchday_abbreviation),
+              id: this.gameRecientes[this.teamSelect][index].matchday_id,
+              match_result:
+                this.gameRecientes[this.teamSelect][index].home_team_abbreviation == this.teamSelect
+                  ? this.gameRecientes[this.teamSelect][index].home_match_result
+                  : this.gameRecientes[this.teamSelect][index].visiting_match_result,
+            })
+            gameFilter.push(this.gameRecientes[this.teamSelect][index])
+          }
+        }
+      }
+      this.gamesFiltersUpdate = gameFilter
+      this.matchdaysFiltersUpdate = matchdayFilter
+    },
+    getRound(abrev) {
+      let abrevFormatted = abrev.replace('M', 'Jornada ')
+      abrevFormatted = abrevFormatted.replace('PO1', 'CFI')
+      abrevFormatted = abrevFormatted.replace('PO2', 'CFV')
+      abrevFormatted = abrevFormatted.replace('PO3', 'SFI')
+      abrevFormatted = abrevFormatted.replace('PO4', 'SFV')
+      abrevFormatted = abrevFormatted.replace('PO5', 'FI')
+      abrevFormatted = abrevFormatted.replace('PO6', 'FV')
+      return abrevFormatted
+    },
+    changeFiltersModal(filters) {
+      this.auxISsection = 1
+      this.filterObject = filters
+      this.openfiltervalue = false
+      this.matchFilter()
+      setTimeout(() => {
+        this.keyUpdate += 1
+        this.updateCarouselGames += 1
+      }, 600)
+    },
+    openFilter() {
+      this.openfiltervalue = true
+    },
+    getMinutesData(plays) {
+      this.localDetails = []
+      this.foreignDetails = []
+      for (let index = 0; index < plays.home_goals_minutes.length; index++) {
+        this.localDetails.push({ description: plays.home_goals_minutes[index], icon: 'goal' })
+      }
+      for (let index = 0; index < plays.visiting_goals_minutes.length; index++) {
+        this.foreignDetails.push({ description: plays.visiting_goals_minutes[index], icon: 'goal' })
+      }
+      for (let index = 0; index < plays.home_yellow_cards_minutes.length; index++) {
+        this.localDetails.push({
+          description: plays.home_yellow_cards_minutes[index],
+          icon: 'yellow-card',
+        })
+      }
+      for (let index = 0; index < plays.away_yellow_cards_minutes.length; index++) {
+        this.foreignDetails.push({
+          description: plays.away_yellow_cards_minutes[index],
+          icon: 'yellow-card',
+        })
+      }
+      for (let index = 0; index < plays.home_red_cards_minutes.length; index++) {
+        this.localDetails.push({
+          description: plays.home_red_cards_minutes[index],
+          icon: 'red-card',
+        })
+      }
+      for (let index = 0; index < plays.away_red_cards_minutes.length; index++) {
+        this.foreignDetails.push({
+          description: plays.away_red_cards_minutes[index],
+          icon: 'red-card',
+        })
+      }
+    },
+    changeCarouselItem(val) {
+      setTimeout(() => {
+        if (JSON.stringify(val) !== JSON.stringify(this.valLast)) {
+          if (this.gameRecientesFilter && this.gameRecientesFilter.length > 0) {
+            if (val) {
+              if (val.selectedItem === undefined) {
+                val.selectedItem = this.gameRecientesFilter[this.gameRecientesFilter.length - 1]
+                val.selectedItemIndex = this.gameRecientesFilter.length - 1
+              }
+              this.valLast = val
+              if (this.auxISsection == 1) {
+                this.$emit('input', {
+                  selectedItem: this.gameRecientesFilter[this.gameRecientesFilter.length - 1],
+                  selectedItemIndex: this.gameRecientesFilter.length - 1,
+                })
+                this.getMinutesData(
+                  this.gameRecientesFilter[this.gameRecientesFilter.length - 1].minutes,
+                )
+                this.selectedIndexOption = this.gameRecientesFilter.length - 1
+                this.defaultDropItem = {
+                  propName: 'id',
+                  value: this.gameRecientesFilter[this.gameRecientesFilter.length - 1].matchday_id,
+                }
+              } else {
+                this.$emit('input', val)
+                this.getMinutesData(val.selectedItem.minutes)
+                this.selectedIndexOption = val.selectedItemIndex
+                this.defaultDropItem = { propName: 'id', value: val.selectedItem.matchday_id }
+              }
+              this.keyUpdate += 1
+            }
+          }
+        }
+      }, 200)
+    },
+    changeDropdown(value) {
+      if (this.gameRecientesFilter && this.gameRecientesFilter.length > 0) {
+        if (this.auxISsection == 1) {
+          this.selectedIndexOption = this.gameRecientesFilter.length - 1
+          this.defaultDropItem = {
+            propName: 'id',
+            value: this.gameRecientesFilter[this.gameRecientesFilter.length - 1].matchday_id,
+          }
+        } else {
+          const index = this.gameRecientesFilter.findIndex((x) => x.matchday_id == value.id)
+          if (index != -1) {
+            this.selectedIndexOption = index
+            this.defaultDropItem = {
+              propName: 'id',
+              value: this.gameRecientesFilter[index].matchday_id,
+            }
+          }
+        }
+      }
+    },
+    changeSwitchRadio(val) {
+      this.auxISsection = 1
+      if (typeof val !== 'object') {
+        this.teamSelect = val
+        this.$emit('changeTeam', this.teamSelect)
+        this.updateCarouselGames += 1
+        this.matchFilter()
+      }
+    },
+    clickOnSelectOption(val) {
+      this.$emit('clickOnSelectOption', val)
+    },
+  },
+}
+</script>
+<style module>
+@import '/css/fonts.css';
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap');
+body {
+  margin: 0;
+  line-height: normal;
+}
+:root {
+  /* fonts */
+  --font-poppinsre: Poppins;
+  --font-interre: Inter;
+  /* font sizes */
+  --font-size-4xsre: 9px;
+  --font-size-smre: 14px;
+  --font-size-xsre: 12px;
+  --font-size-base-2re: 15.2px;
+  --font-size-3xsre: 10px;
+  --font-size-2xsre: 11px;
+  /* Colors */
+  --color-gray-100re: #172632;
+  --color-gray-200re: #172531;
+  --color-gray-300re: rgba(255, 255, 255, 0.05);
+  --color-gray-400re: rgba(255, 255, 255, 0.2);
+  --color-gray-500re: rgba(255, 255, 255, 0.3);
+  --color-gray-600re: rgba(255, 255, 255, 0.1);
+  --color-gray-700re: rgba(255, 255, 255, 0.7);
+  --color-goldenrodre: #f7c330;
+  --color-redre: #ff0000;
+  --color-yellowgreen-100re: #cbed6e;
+  --color-yellowgreen-200re: #cbee6b;
+  --color-white: #fff;
+  --color-whitesmokere: #f4f4f4;
+  --color-darkbluere: #0234c5;
+  --color-darkslategrayre: #1e2b36;
+  --color-slategrayre: #56637b;
+  /* Spacing */
+  --sizes-round-corner-round-corner-32re: 32px;
+  --sizes-spacing-space-24re: 24px;
+  /* Gaps */
+  --gap-basere: 16px;
+  --gap-xsre: 12px;
+  --gap-40xlre: 59px;
+  --gap-3xsre: 10px;
+  --gap-4xsre: 9px;
+  --gap-midre: 17px;
+  --gap-minire: 15px;
+  --gap-8xsre: 5px;
+  --gap-4xs-7re: 8.7px;
+  --gap-11xlre: 30px;
+  /* Paddings */
+  --padding-basere: 16px;
+  --padding-5xlre: 24px;
+  --padding-9xsre: 4px;
+  --padding-6xs-5re: 6.5px;
+  --padding-mid-4re: 17.4px;
+  --padding-11xsre: 2px;
+  --padding-3xsre: 10px;
+  --padding-5xsre: 8px;
+  --padding-xsre: 12px;
+  --padding-xlre: 20px;
+  /* Border radiuses */
+  --br-12xsre: 1px;
+  --br-2xs-2re: 10.2px;
+  --br-mid-4re: 17.4px;
+  --br-5xsre: 8px;
+  --br-31xlre: 50px;
+  --br-13xlre: 32px;
+  --br-3xs-6re: 9.6px;
+}
+.containernofoundsearchrecientes {
+  width: 100%;
+  height: 38px;
+  display: inline-block;
+  margin: 0 auto;
+}
+.text-containernofoundsearchrecientes {
+  font-size: 13px;
+  text-align: center;
+  color: rgb(176, 176, 176);
+  line-height: 16px;
+}
+.btn-delete-filters {
+  width: 70%;
+  height: 26px;
+  border-radius: 16px;
+  font-size: 14px;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  margin: 0 auto;
+  line-height: 26px;
+  margin-top: 5px;
+}
+.btn-delete-filters:hover {
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.5);
+}
+.btndeletefilters {
+  width: 70%;
+  height: 26px;
+  border-radius: 16px;
+  font-size: 14px;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  margin: 0 auto;
+  line-height: 26px;
+  margin-top: 5px;
+}
+.btndeletefilters:hover {
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.5);
+}
+.leyenddeleteshow {
+  font-size: 13px;
+  text-align: center;
+  color: rgb(176, 176, 176);
+  line-height: 16px;
+}
+.selectoritem {
+  width: 270px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--gap-midre);
+}
+.anNoEstn {
+  font-weight: 500;
+}
+.groupsLeague {
+  position: relative;
+  line-height: 20px;
+}
+.historicas {
+  position: relative;
+  line-height: 20px;
+  opacity: 0.6;
+}
+.switchOption {
+  border-radius: var(--br-13xlre);
+  width: 109px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-3xsre) var(--sizes-spacing-space-24re);
+  box-sizing: border-box;
+}
+.recientes {
+  position: relative;
+  line-height: 20px;
+  font-weight: 600;
+}
+.switchOption1 {
+  border-radius: var(--br-13xlre);
+  background-color: var(--color-darkslategrayre);
+  border: 0.8px solid var(--color-yellowgreen-200re);
+  box-sizing: border-box;
+  width: 107.8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-3xsre) var(--sizes-spacing-space-24re);
+}
+.switchOption2 {
+  border-radius: var(--sizes-round-corner-round-corner-32re);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-3xsre) var(--sizes-spacing-space-24re);
+}
+.switchStatesBig {
+  border-radius: var(--sizes-round-corner-round-corner-32re);
+  background-color: var(--color-gray-100re);
+  border: 1px solid var(--color-gray-500re);
+  display: inline-block;
+  width: 320px;
+  font-size: var(--font-size-xsre);
+  color: var(--color-white);
+}
+.groupsLeagueParent {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-11xlre);
+  text-align: center;
+}
+.imgHomeTeamIcon {
+  position: relative;
+  width: 28px;
+  height: 28px;
+  object-fit: cover;
+}
+.imgHomeTeamWrapper {
+  border-radius: var(--br-31xlre);
+  background-color: var(--color-gray-200re);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-3xsre);
+  box-sizing: border-box;
+}
+.teamContainer {
+  border-radius: var(--br-31xlre);
+  border: 1px solid var(--color-darkbluere);
+  box-sizing: border-box;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-3xsre);
+}
+.name {
+  position: relative;
+  letter-spacing: 0.31px;
+  line-height: 30.87px;
+  font-weight: 500;
+}
+.homeTeamContainer {
+  flex: 1;
+  border-bottom: 1px solid var(--color-slategrayre);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0px 0px var(--padding-xlre);
+  gap: var(--gap-3xsre);
+}
+.div {
+  position: relative;
+  font-weight: 600;
+}
+.scoreContainer {
+  border-radius: var(--br-mid-4re);
+  background-color: var(--color-gray-600re);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 6.524074554443359px 17.397533416748047px;
+  gap: var(--gap-4xs-7rere);
+}
+.scoreContainerWrapper {
+  align-self: stretch;
+  width: 323px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+  font-size: 15.22px;
+  color: var(--color-white);
+  font-family: var(--font-interre);
+}
+.teamContainer1 {
+  border-radius: var(--br-31xlre);
+  border: 1px solid var(--color-yellowgreen-100re);
+  box-sizing: border-box;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-3xsre);
+}
+.awayTeamContainer {
+  flex: 1;
+  border-bottom: 1px solid var(--color-slategrayre);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0px 0px var(--padding-xlre);
+  gap: var(--gap-3xsre);
+}
+.matchContainer {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 0px var(--padding-xsre);
+  color: var(--color-whitesmokere);
+}
+.sliderMatchesChild {
+  position: relative;
+  border-radius: 9.55px;
+  width: 7.02px;
+  height: 14.23px;
+}
+.manchesterUnited {
+  position: relative;
+  letter-spacing: -0.01em;
+  line-height: 20.07px;
+  font-weight: 500;
+}
+.sliderMatchesItem {
+  position: relative;
+  border-radius: 9.55px;
+  width: 7.02px;
+  height: 14.24px;
+}
+.sliderMatches {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-11xsre) var(--padding-basere);
+  gap: var(--gap-3xsre);
+  text-align: center;
+}
+.sortIcon {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.filtros {
+  position: relative;
+  font-size: var(--font-size-smre);
+  line-height: 24px;
+  font-family: var(--font-poppinsre);
+  color: var(--color-white);
+  text-align: left;
+}
+.sortParent {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-8xsre);
+}
+.shapeIcon {
+  position: relative;
+  width: 8px;
+  height: 4px;
+}
+.btnFilter {
+  cursor: pointer;
+  border: 1px solid var(--color-gray-400re);
+  padding: var(--padding-5xsre) var(--padding-3xsre);
+  background-color: var(--color-gray-300re);
+  border-radius: var(--br-5xsre);
+  box-sizing: border-box;
+  width: 102px;
+  height: 32px;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.btnFilter1 {
+  cursor: pointer;
+  border: 1px solid var(--color-gray-400re);
+  background-color: var(--color-gray-300re);
+  border-radius: var(--br-5xsre);
+  box-sizing: border-box;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: flex-start;
+  gap: var(--gap-3xsre);
+  font-size: 10px;
+}
+.btnFilterParent {
+  width: 225px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-xsre);
+}
+.backArrowIcon {
+  position: relative;
+  border-radius: 10.21px;
+  width: 7.5px;
+  height: 15.21px;
+}
+.teamContainer2 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-8xsre);
+}
+.homeTeam {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-minire);
+}
+.div4 {
+  flex: 1;
+  position: relative;
+  font-weight: 600;
+}
+.finalScore {
+  border-radius: var(--br-mid-4re);
+  background-color: var(--color-gray-600re);
+  border: 0.5px solid var(--color-yellowgreen-200re);
+  box-sizing: border-box;
+  width: 70.73px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 6.524074554443359px 17.397533416748047px;
+  gap: var(--gap-4xs-7rere);
+}
+.manchesterUnited1 {
+  position: relative;
+  font-size: var(--font-size-xsre);
+  font-weight: 500;
+  font-family: var(--font-poppinsre);
+  color: var(--color-gray-700re);
+}
+.scoreContainer1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-4xsre);
+  text-align: center;
+  font-size: 15.22px;
+  color: var(--color-white);
+  font-family: var(--font-interre);
+}
+.match {
+  width: 325px;
+  display: inline-block;
+}
+.manchesterUnited2 {
+  position: relative;
+  text-decoration: underline;
+  font-weight: 500;
+  position: absolute;
+  right: 0;
+  cursor: pointer;
+}
+.manchesterUnited2:hover {
+  color: rgba(255, 255, 255, 1);
+}
+.btnDetails {
+  width: 225px;
+  height: 28px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  text-align: right;
+  font-size: var(--font-size-xsre);
+}
+.matchContainer1 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: var(--padding-9xsre) 0px 0px;
+}
+.goalChild {
+  position: relative;
+  width: 8.03px;
+  height: 8.03px;
+}
+.goal {
+  width: 9px;
+  height: 9px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.manchesterUnited3 {
+  position: relative;
+  letter-spacing: -0.01em;
+  line-height: 19.5px;
+  text-transform: capitalize;
+  font-weight: 500;
+}
+.minuteEvent {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-4xsre);
+}
+.yellowCard {
+  position: relative;
+  border-radius: var(--br-12xsre);
+  background-color: var(--color-goldenrodre);
+  width: 4px;
+  height: 6px;
+}
+.awayTeamEvents {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-3xsre);
+}
+.rectangle {
+  position: relative;
+  border-radius: var(--br-12xsre);
+  background-color: var(--color-redre);
+  width: 4px;
+  height: 6px;
+}
+.homeTeamEvents {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-start;
+  gap: var(--gap-3xsre);
+  text-align: right;
+}
+.totalEvents {
+  display: none;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-40xlre);
+  font-size: var(--font-size-4xsre);
+}
+.headerSeccionAlineaciones1 {
+  align-self: stretch;
+  background-color: var(--color-gray-200re);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0px 48px;
+  gap: var(--gap-basere);
+}
+.sliderMatchesInner {
+  position: relative;
+  border-radius: 9.55px;
+  width: 13.39px;
+  height: 6px;
+}
+.btnFilter2 {
+  cursor: pointer;
+  border: 1px solid var(--color-gray-400re);
+  padding: var(--padding-5xsre) var(--padding-3xsre);
+  background-color: var(--color-gray-300re);
+  border-radius: var(--br-5xsre);
+  box-sizing: border-box;
+  width: 111px;
+  position: relative;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-right: 10px;
+}
+.btnDetails1 {
+  width: 111px;
+  height: 28px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+}
+.matchContainer3 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: start;
+  padding: var(--padding-9xsre) 0px 0px;
+  text-align: right;
+  font-size: var(--font-size-xsre);
+}
+.backArrowIcon1 {
+  position: relative;
+  border-radius: 10.21px;
+  width: 14.31px;
+  height: 6.41px;
+}
+.match1 {
+  width: 340px;
+  display: inline-block;
+  margin: 0 auto;
+}
+.headerSeccionAlineaciones2 {
+  align-self: stretch;
+  background-color: var(--color-gray-200re);
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0px var(--padding-5xlre);
+  gap: var(--gap-basere);
+}
+.jugadores2 {
+  position: relative;
+  line-height: 20px;
+  font-weight: 600;
+  opacity: 0.6;
+}
+.switchOption6 {
+  border-radius: var(--sizes-round-corner-round-corner-32re);
+  width: 74px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-3xsre) var(--sizes-spacing-space-24re);
+  box-sizing: border-box;
+}
+.switchOption7 {
+  border-radius: var(--sizes-round-corner-round-corner-32re);
+  background-color: var(--color-darkslategrayre);
+  border: 0.8px solid var(--color-yellowgreen-200re);
+  box-sizing: border-box;
+  width: 74.8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-3xsre) var(--sizes-spacing-space-24re);
+}
+.switchStatesBig2 {
+  border-radius: var(--sizes-round-corner-round-corner-32re);
+  background-color: var(--color-gray-100re);
+  border: 1px solid var(--color-gray-500re);
+  display: inline-block;
+  width: 280px;
+}
+.manchesterUnited26 {
+  position: relative;
+  font-size: var(--font-size-3xsre);
+  font-weight: 500;
+}
+.homeTeamContainer2 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-3xsre);
+}
+.vectorIcon {
+  position: relative;
+  width: 15px;
+  height: 15px;
+}
+.teamSwitch {
+  border-radius: 25px;
+  box-sizing: border-box;
+  width: 98px;
+  overflow: hidden;
+  height: 21px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0px 3px;
+}
+.matchContainer5 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 0px var(--padding-xsre);
+  text-align: left;
+  color: var(--color-whitesmokere);
+}
+.manchesterUnited27 {
+  position: relative;
+  letter-spacing: -0.01em;
+  line-height: 20.07px;
+  font-weight: 500;
+  z-index: 0;
+}
+.sliderMatchesChild1 {
+  position: absolute;
+  margin: 0 !important;
+  top: 14.31px;
+  left: 261.07px;
+  border-radius: 10.21px;
+  width: 14.31px;
+  height: 6.41px;
+  z-index: 1;
+}
+.sliderMatchesChild2 {
+  position: absolute;
+  margin: 0 !important;
+  top: 0.31px;
+  left: 6.41px;
+  border-radius: 10.21px;
+  width: 14.31px;
+  height: 6.41px;
+  z-index: 2;
+}
+.sliderMatches2 {
+  display: none;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: var(--padding-11xsre) var(--padding-basere);
+  position: relative;
+  gap: var(--gap-3xsre);
+}
+.filtros2 {
+  position: relative;
+  font-size: var(--font-size-smre);
+  line-height: 24px;
+  font-family: var(--font-poppinsre);
+  color: var(--color-white);
+  text-align: left;
+  display: none;
+}
+.btnFilter4 {
+  cursor: pointer;
+  position: relative;
+  border: 1px solid var(--color-gray-400re);
+  padding: var(--padding-5xsre) var(--padding-3xsre);
+  background-color: var(--color-gray-300re);
+  border-radius: var(--br-5xsre);
+  box-sizing: border-box;
+  width: 60px;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.jornada2 {
+  position: relative;
+  line-height: 9px;
+  font-weight: 600;
+  opacity: 0.6;
+}
+.filterMatchday {
+  border-radius: 4px;
+  border: 1px solid var(--color-gray-500re);
+  box-sizing: border-box;
+  width: 102px;
+  height: 25px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.btnDetails2 {
+  width: 60px;
+  height: 28px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  text-align: right;
+  color: var(--color-gray-700re);
+}
+.filtersContainer {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--font-size-3xsre);
+  color: var(--color-white);
+}
+.matchContainer6 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  padding: var(--padding-9xsre) 0px 0px;
+}
+.matchDetailContainer {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 14px;
+  text-align: left;
+}
+.containerData {
+  align-self: stretch;
+  border-radius: 9px;
+  background-color: #192632;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: var(--padding-basere) var(--padding-5xlre) 32px;
+  gap: var(--gap-xsre);
+  font-size: var(--font-size-smre);
+  color: var(--color-gray-700re);
+}
+.headerSeccionAlineaciones3 {
+  align-self: stretch;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-basere);
+  text-align: center;
+  font-size: var(--font-size-2xsre);
+  color: var(--color-white);
+}
+.headerSeccionAlineaciones {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 132px;
+  text-align: left;
+  font-size: var(--font-size-smre);
+  color: var(--color-gray-700re);
+  font-family: var(--font-poppinsre);
+}
+.headerSeccionAlineaciones31200 {
+  max-width: 540px;
+  align-self: stretch;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-basere);
+  text-align: center;
+  font-size: var(--font-size-2xsre);
+  color: var(--color-white);
+}
+.headerSeccionAlineaciones3420 {
+  display: flex;
+  max-width: 540px;
+  align-self: stretch;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-basere);
+  text-align: center;
+  font-size: var(--font-size-2xsre);
+  color: var(--color-white);
+}
+.headerSeccionAlineaciones3880 {
+  display: none;
+  align-self: stretch;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-basere);
+  text-align: center;
+  font-size: var(--font-size-2xsre);
+  color: var(--color-white);
+}
+.headerSeccionAlineaciones3540 {
+  display: flex;
+  min-width: 300px;
+  align-self: stretch;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-basere);
+  text-align: center;
+  font-size: var(--font-size-2xsre);
+  color: var(--color-white);
+}
+.headerSeccionAlineaciones11200 {
+  align-self: stretch;
+  width: auto;
+  max-width: 1089px;
+  align-self: stretch;
+  background-color: var(--color-gray-200re);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0px 48px;
+  gap: var(--gap-basere);
+}
+.headerSeccionAlineaciones1420 {
+  display: none;
+  align-self: stretch;
+  background-color: var(--color-gray-200re);
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0px 48px;
+  gap: var(--gap-basere);
+}
+.headerSeccionAlineaciones1880 {
+  display: none;
+  align-self: stretch;
+  background-color: var(--color-gray-200re);
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0px 48px;
+  gap: var(--gap-basere);
+}
+.headerSeccionAlineaciones21200 {
+  display: none;
+  align-self: stretch;
+  width: auto;
+  max-width: 840px;
+  align-self: stretch;
+  background-color: var(--color-gray-200re);
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0px var(--padding-5xlre);
+  gap: var(--gap-basere);
+}
+.headerSeccionAlineaciones2420 {
+  display: none;
+  align-self: stretch;
+  background-color: var(--color-gray-200re);
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0px var(--padding-5xlre);
+  gap: var(--gap-basere);
+}
+.headerSeccionAlineaciones2880 {
+  display: flex;
+  align-self: stretch;
+  background-color: var(--color-gray-200re);
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0px var(--padding-5xlre);
+  gap: var(--gap-basere);
+}
+.headerSeccionAlineaciones2540 {
+  display: none;
+  align-self: stretch;
+  background-color: var(--color-gray-200re);
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0px var(--padding-5xlre);
+  gap: var(--gap-basere);
+}
+</style>