@golstats/gsc-lineups-reports 1.0.1

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

@@ -0,0 +1,1873 @@
+<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="/icn-filter.svg" />
+                        <div :class="$style.filtros">Filtros</div>
+                    </div>
+                    <img :class="$style.shapeIcon" alt="" src="/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="/icn-filter1.svg" />
+                    <div :class="$style.filtros">Filtros</div>
+                </div>
+                <img :class="$style.shapeIcon" alt="" src="/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="/icn-filter2.svg" />
+                        <div :class="$style.filtros2">Filtros</div>
+                    </div>
+                    <img :class="$style.shapeIcon" alt="" src="/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>