@golstats/gsc-top-player 1.0.0

package/src/components/comparative/gsc-head-titles.vue

@@ -0,0 +1,1482 @@
+<template>
+  <div ref="myDivRef">
+    <div v-if="type == 0" :class="headTitlesClassAvanced" id="container-titles">
+      <!-- jugador -->
+      <div :class="containerLeftTitlesClass" id="container-left-titles">
+        <div :class="positionClass">Pos.</div>
+        <div :class="playerClass">Jugador</div>
+      </div>
+      <div :class="containerRightTitlesClassAdvanced" id="container-right-titles">
+        <div :class="$style.block01Titles">
+          <div :class="$style.teamTitle" v-if="elementSize.width > 540">Equipo</div>
+          <div :class="$style.positionTitle" v-if="elementSize.width > 730">Posición</div>
+          <div :class="$style.ageTitle" v-if="elementSize.width > 960">edad</div>
+          <div :class="$style.ageTitle" v-if="elementSize.width > 960">País</div>
+          <div :class="$style.playedGamesTitle" v-if="elementSize.width > 540">
+            <p :class="$style.partidos">Partidos</p>
+            <p :class="$style.partidos">Jugados</p>
+          </div>
+          <div :class="$style.playedMinutesTitle" v-if="elementSize.width > 635">
+            <p :class="$style.partidos">Minutos</p>
+            <p :class="$style.partidos">Jugados</p>
+          </div>
+        </div>
+        <div :class="block02TitlesClass">
+          <div :class="$style.containesOptionsTitles">
+            <div :class="$style.mon" v-if="elementSize.width > 960">Total</div>
+            <div :class="mon1Class">Videos</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="type == 1" :class="templateTablaProductividadType1Class">
+      <!-- equipo -->
+      <div :class="headTitlesType1Class" id="container-titles">
+        <div :class="containerLeftTitlesClassTeam" id="container-left-titles">
+          <div :class="positionType1Class">Pos.</div>
+          <div :class="teamType1Class">Equipo</div>
+        </div>
+        <div :class="containerRightType1ClassAvanced">
+          <div :class="frecuenciaWrapperType1Class">
+            <div :class="frecuenciaType1Class" v-if="elementSize.width > 540">Frecuencia</div>
+          </div>
+          <div :class="promedioEstePartidoWrapperType1Class" v-if="elementSize.width > 960">
+            <div :class="promedioEstePartidoType1Class">
+              <p :class="$style.promedioPartidoType1">Promedio partido</p>
+              <p :class="$style.promedioPartidoType1">este Torneo</p>
+            </div>
+          </div>
+          <div :class="promedioPartidosWrapperType1Class" v-if="elementSize.width > 1086">
+            <div :class="$style.promedioPartidosType1">
+              <p :class="$style.promedioPartidoType1">Promedio partido<br />Torneo anterior</p>
+            </div>
+          </div>
+          <div :class="partidosJugadosWrapperType1Class" v-if="elementSize.width > 770">
+            <div :class="$style.partidosJugadosType1">
+              <p :class="$style.promedioPartidoType1">Partidos <br />Jugados</p>
+            </div>
+          </div>
+        </div>
+        <div :class="containesOptionsTitlesType1Class">
+          <div :class="monType1Class" v-if="elementSize.width > 680">total</div>
+          <div :class="videosType1Class">Videos</div>
+        </div>
+      </div>
+    </div>
+    <div v-if="type == 2" :class="headTitlesClassAvanced" id="container-titles">
+      <!-- scouting -->
+      <div :class="containerLeftTitlesClass" id="container-left-titles">
+        <div :class="positionClass">Pos.</div>
+        <div :class="playerClass">Jugador</div>
+      </div>
+      <div :class="containerRightTitlesClassAdvanced" id="container-right-titles">
+        <div :class="$style.block01Titles">
+          <div :class="$style.teamTitle" v-if="elementSize.width > 540">Equipo</div>
+          <div :class="$style.positionTitle" v-if="elementSize.width > 730">Posición</div>
+          <div :class="$style.ageTitle" v-if="elementSize.width > 960">edad</div>
+          <div :class="$style.ageTitle" v-if="elementSize.width > 960">País</div>
+          <div :class="$style.playedGamesTitle" v-if="elementSize.width > 540">
+            <p :class="$style.partidos">Partidos</p>
+            <p :class="$style.partidos">Jugados</p>
+          </div>
+          <div :class="$style.playedMinutesTitle" v-if="elementSize.width > 635">
+            <p :class="$style.partidos">Minutos</p>
+            <p :class="$style.partidos">Jugados</p>
+          </div>
+          <div :class="$style.playedMinutesTitle" v-if="elementSize.width > 635">
+            <p :class="$style.partidos">Liga</p>
+          </div>
+        </div>
+        <div :class="block02TitlesClass">
+          <div :class="$style.containesOptionsTitles">
+            <div :class="mon1ScoutingClass">Videos</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+import useElementSize from './useElementSize'
+export default {
+  components: {},
+  computed: {
+    icnIconType1Class() {
+      const width = this.elementSize.width
+      if (width <= 400) {
+        return this.$style.icnIconType1400
+      } else if (width <= 420) {
+        return this.$style.icnIconType1420
+      } else {
+        return this.$style.icnIconType1
+      }
+    },
+    videosType1Class() {
+      const width = this.elementSize.width
+      if (width <= 400) {
+        return this.$style.videosType1400
+      } else if (width <= 420) {
+        return this.$style.videosType1420
+      } else if (width <= 540) {
+        return this.$style.videosType1540
+      } else if (width <= 600) {
+        return this.$style.videosType1600
+      } else if (width <= 680) {
+        return this.$style.videosType1680
+      } else {
+        return this.$style.videosType1
+      }
+    },
+    monType1Class() {
+      const width = this.elementSize.width
+      if (width <= 680) {
+        return this.$style.monType1680
+      } else if (width <= 960) {
+        return this.$style.monType1960
+      } else {
+        return this.$style.monType1
+      }
+    },
+    block02TitlesType1Class() {
+      const width = this.elementSize.width
+      if (width <= 350) {
+        return this.$style.block02TitlesType1350
+      } else if (width <= 680) {
+        return this.$style.block02TitlesType1680
+      } else {
+        return this.$style.block02TitlesType1
+      }
+    },
+    containesOptionsTitlesType1Class() {
+      const width = this.elementSize.width
+      if (width <= 400) {
+        return this.$style.containesOptionsTitlesType1400
+      } else if (width <= 690) {
+        return this.$style.containesOptionsTitlesType1690
+      } else if (width <= 730) {
+        return this.$style.containesOptionsTitlesType1730
+      } else if (width <= 768) {
+        return this.$style.containesOptionsTitlesType1768
+      } else {
+        return this.$style.containesOptionsTitlesType1
+      }
+    },
+    partidosJugadosWrapperType1Class() {
+      const width = this.elementSize.width
+      if (width <= 770) {
+        return this.$style.promedioPartidosWrapperType1770
+      } else if (width <= 790) {
+        return this.$style.partidosJugadosWrapperType1790
+      } else if (width <= 830) {
+        return this.$style.partidosJugadosWrapperType1830
+      } else if (width <= 860) {
+        return this.$style.partidosJugadosWrapperType1860
+      } else if (width <= 880) {
+        return this.$style.partidosJugadosWrapperType1880
+      } else if (width <= 930) {
+        return this.$style.partidosJugadosWrapperType1930
+      } else if (width <= 960) {
+        return this.$style.partidosJugadosWrapperType1960
+      } else if (width <= 1086) {
+        return this.$style.partidosJugadosWrapperType11086
+      } else if (width <= 1140) {
+        return this.$style.partidosJugadosWrapperType11140
+      } else if (width <= 1170) {
+        return this.$style.partidosJugadosWrapperType11170
+      } else if (width <= 1180) {
+        return this.$style.partidosJugadosWrapperType11180
+      } else if (width <= 1200) {
+        return this.$style.partidosJugadosWrapperType11200
+      } else {
+        return this.$style.partidosJugadosWrapperType1
+      }
+    },
+    promedioPartidosWrapperType1Class() {
+      const width = this.elementSize.width
+      if (width <= 960) {
+        return this.$style.promedioPartidosWrapperType1960
+      } else if (width <= 1086) {
+        return this.$style.promedioPartidosWrapperType11086
+      } else {
+        return this.$style.promedioPartidosWrapperType1
+      }
+    },
+
+    partidosJugadosType1Class() {
+      const width = this.elementSize.width
+      if (width <= 960) {
+        return this.$style.partidosJugadosType1960
+      } else {
+        return this.$style.partidosJugadosType1
+      }
+    },
+    templateTablaProductividadType1Class() {
+      const width = this.elementSize.width
+      if (width <= 400) {
+        return this.$style.templateTablaProductividadType1400
+      } else {
+        return this.$style.templateTablaProductividadType1
+      }
+    },
+    promedioEstePartidoType1Class() {
+      const width = this.elementSize.width
+      if (width <= 960) {
+        return this.$style.promedioEstePartidoType1960
+      } else {
+        return this.$style.promedioEstePartidoType1
+      }
+    },
+    headTitlesType1Class() {
+      const width = this.elementSize.width
+      if (width <= 350) {
+        return this.$style.headTitlesType1350
+      } else if (width <= 400) {
+        return this.$style.headTitlesType1400
+      } else if (width <= 420) {
+        return this.$style.headTitlesType1420
+      } else if (width <= 460) {
+        return this.$style.headTitlesType1460
+      } else if (width <= 540) {
+        return this.$style.headTitlesType1540
+      } else if (width <= 680) {
+        return this.$style.headTitlesType1680
+      } else {
+        return this.$style.headTitlesType1
+      }
+    },
+    headTitlesClassAvanced() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.headTitlesAvanced420
+      } else if (width <= 460) {
+        return this.$style.headTitlesAvanced460
+      } else if (width <= 540) {
+        return this.$style.headTitlesAvanced540
+      } else if (width <= 620) {
+        return this.$style.headTitlesAvanced620
+      } else if (width <= 960) {
+        return this.$style.headTitlesAvanced960
+      } else {
+        return this.$style.headTitlesAvanced
+      }
+    },
+    containerLeftTitlesClass() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.containerLeftTitles420
+      } else if (width <= 620) {
+        return this.$style.containerLeftTitles620
+      } else {
+        return this.$style.containerLeftTitles
+      }
+    },
+    containerLeftTitlesClassTeam() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.containerLeftTitlesTeam420
+      } else if (width <= 620) {
+        return this.$style.containerLeftTitlesTeam620
+      } else if (width <= 680) {
+        return this.$style.containerLeftTitlesTeam680
+      } else if (width <= 768) {
+        return this.$style.containerLeftTitlesTeam768
+      } else if (width <= 860) {
+        return this.$style.containerLeftTitlesTeam860
+      } else if (width <= 960) {
+        return this.$style.containerLeftTitlesTeam960
+      } else if (width <= 1090) {
+        return this.$style.containerLeftTitlesTeam1090
+      } else if (width <= 1180) {
+        return this.$style.containerLeftTitlesTeam1180
+      } else {
+        return this.$style.containerLeftTitlesTeam
+      }
+    },
+    icnIconClass() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.icnIcon420
+      } else if (width <= 960) {
+        return this.$style.icnIcon960
+      } else {
+        return this.$style.icnIcon
+      }
+    },
+    mon1Class() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.mon1420
+      } else if (width <= 620) {
+        return this.$style.mon1620
+      } else {
+        return this.$style.mon1
+      }
+    },
+    mon1ScoutingClass() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.mon1420
+      } else if (width <= 960) {
+        return this.$style.mon1Scouting960
+      } else {
+        return this.$style.mon1Scouting
+      }
+    },
+    promedioEstePartidoWrapperType1Class() {
+      const width = this.elementSize.width
+      if (width <= 1086) {
+        return this.$style.promedioEstePartidoWrapperType11086
+      } else if (width <= 1090) {
+        return this.$style.promedioEstePartidoWrapperType11090
+      } else if (width <= 1200) {
+        return this.$style.promedioEstePartidoWrapperType11200
+      } else {
+        return this.$style.promedioEstePartidoWrapperType1
+      }
+    },
+    frecuenciaWrapperType1Class() {
+      const width = this.elementSize.width
+      if (width <= 680) {
+        return this.$style.frecuenciaWrapperType1680
+      } else {
+        return this.$style.frecuenciaWrapperType1
+      }
+    },
+    frecuenciaType1Class() {
+      const width = this.elementSize.width
+      if (width <= 540) {
+        return this.$style.frecuenciaType1540
+      } else {
+        return this.$style.frecuenciaType1
+      }
+    },
+    positionType1Class() {
+      const width = this.elementSize.width
+      if (width <= 400) {
+        return this.$style.positionType1400
+      } else {
+        return this.$style.positionType1
+      }
+    },
+    containerRightType1ClassAvanced() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.containerRightTypeAvanced1420
+      } else {
+        return this.$style.containerRightTypeAvanced1
+      }
+    },
+    containerRightTitlesType1Class() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.containerRightTitlesType1420
+      } else {
+        return this.$style.containerRightTitlesType1
+      }
+    },
+    teamType1Class() {
+      const width = this.elementSize.width
+      if (width <= 400) {
+        return this.$style.teamType1400
+      } else {
+        return this.$style.teamType1
+      }
+    },
+    playerClass() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.player420
+      } else {
+        return this.$style.player
+      }
+    },
+    positionClass() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.position420
+      } else {
+        return this.$style.position
+      }
+    },
+    containerRightTitlesClassAdvanced() {
+      const width = this.elementSize.width
+      if (width <= 960) {
+        return this.$style.containerRightTitlesAdvanced960
+      } else {
+        return this.$style.containerRightTitlesAdvanced
+      }
+    },
+    block02TitlesClass() {
+      const width = this.elementSize.width
+      if (width <= 620) {
+        return this.$style.block02Titles960
+      } else {
+        return this.$style.block02Titles
+      }
+    }
+  },
+  setup() {
+    const myDivRef = ref('myDivRef')
+    const { elementSize } = useElementSize(myDivRef)
+    return {
+      myDivRef,
+      elementSize
+    }
+  },
+  props: {
+    type: {
+      type: Number,
+      default: 0 //type: 0: jugador, 1: equipo: 2 : scouting
+    },
+    background: {
+      type: String,
+      default: '#172531'
+    },
+    height: {
+      type: String,
+      default: '71px'
+    },
+    heightTeam: {
+      type: String,
+      default: '65px'
+    },
+    fontColor: {
+      type: String,
+      default: '#FFFFFF'
+    },
+    fontSize: {
+      type: String,
+      default: '12px'
+    },
+    fontFamily: {
+      type: String,
+      default: 'Poppins-Regular'
+    }
+  },
+  watch: {},
+  data: () => ({}),
+  async created() {},
+
+  methods: {}
+}
+</script>
+
+<style module>
+@import '/css/fonts.css';
+
+body {
+  margin: 0;
+  line-height: normal;
+}
+
+:root {
+  /* fonts */
+  --font-poppinshead: 'Poppins-Regular';
+  --font-montserrathead: 'Poppins-Bold';
+
+  /* font sizes */
+  --font-size-3xshead: 10px;
+  --font-size-xshead: 12px;
+  --font-size-2xshead: 11px;
+
+  /* Colors */
+  --color-gray-100head: #172531;
+  --color-gray-200head: rgba(255, 255, 255, 0.16);
+  --color-gray-300head: rgba(255, 255, 255, 0.08);
+  --color-whitehead: #fff;
+  --color-whitesmokehead: #f4f4f4;
+  --color-darkslategrayhead: #183143;
+  --color-darkslategray-100head: #183143;
+
+  /* Gaps */
+  --gap-13xlhead: 32px;
+  --gap-0head: 0px;
+  --gap-5xlhead: 24px;
+  --gap-basehead: 16px;
+  --gap-19xlhead: 8px;
+  --gap-3xshead: 10px;
+  --gap-6xshead: 7px;
+  --gap-5xshead: 8px;
+  --gap-9xlhead: 28px;
+  --gap-9xshead: 4px;
+  --gap-xshead: 12px;
+  --gap-midhead: 17px;
+  --gap-xlhead: 20px;
+
+  /* Paddings */
+  --padding-xlhead: 0px;
+  --padding-lghead: 18px;
+  --padding-9xlhead: 28px;
+  --padding-xshead: 12px;
+  --padding-9xshead: 4px;
+  --padding-4xs: 9px;
+  --padding-29xl: 48px;
+  --padding-base: 16px;
+
+  /* Border radiuses */
+  --br-45xl: 64px;
+}
+
+/* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */
+/* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */
+/* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */
+.containerLeftTitles {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 15px;
+  width: 272px;
+}
+.containerLeftTitles420 {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 15px;
+  width: 275px;
+}
+.containerLeftTitles620 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-basehead);
+  width: 275px;
+}
+/*aqui aqui*/
+.containerLeftTitlesTeam {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 15px;
+  width: 272px;
+}
+.containerLeftTitlesTeam1180 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  gap: 15px;
+  width: 258px;
+}
+.containerLeftTitlesTeam1090 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 15px;
+  width: 258px;
+}
+.containerLeftTitlesTeam960 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 15px;
+  width: 264px;
+}
+.containerLeftTitlesTeam860 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 15px;
+  width: 33.5%;
+}
+.containerLeftTitlesTeam768 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 15px;
+  width: 264px;
+}
+.containerLeftTitlesTeam680 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 15px;
+  width: 250px;
+}
+.containerLeftTitlesTeam620 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-basehead);
+  width: 250px;
+}
+.containerLeftTitlesTeam420 {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 15px;
+  width: 205px;
+}
+
+.headTitlesAvanced {
+  align-self: stretch;
+  background-color: v-bind(background);
+  display: flex;
+  height: v-bind(height);
+  flex-direction: row;
+  padding: var(--padding-xlhead) var(--padding-lghead) var(--padding-xlhead) var(--padding-lghead);
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-13xlhead);
+  text-align: right;
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+}
+.headTitlesAvanced960 {
+  gap: var(--gap-0head);
+  align-self: stretch;
+  background-color: v-bind(background);
+  display: flex;
+  height: v-bind(height);
+  flex-direction: row;
+  padding: var(--padding-xshead) var(--padding-lghead) var(--padding-base) var(--padding-9xlhead);
+  align-items: center;
+  justify-content: flex-start;
+  text-align: left;
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+}
+.headTitlesAvanced420 {
+  align-self: stretch;
+  gap: var(--gap-0head);
+  background-color: v-bind(background);
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: var(--padding-xshead);
+  padding-right: var(--padding-xshead);
+  box-sizing: border-box;
+
+  display: flex;
+  height: v-bind(height);
+  flex-direction: row;
+  padding: var(--padding-xshead) var(--padding-lghead) var(--padding-base) var(--padding-9xlhead);
+
+  text-align: left;
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+}
+.headTitlesAvanced540 {
+  align-self: stretch;
+  background-color: v-bind(background);
+  transform: rotate(0deg);
+  border-radius: 0px;
+  display: flex;
+  height: v-bind(height);
+  flex-direction: row;
+  padding: var(--padding-xshead) var(--padding-lghead) var(--padding-base) var(--padding-9xlhead);
+
+  text-align: left;
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+}
+.headTitlesAvanced460 {
+  align-self: stretch;
+  background-color: v-bind(background);
+  gap: var(--gap-0head);
+  border-radius: 0px;
+  display: flex;
+  height: v-bind(height);
+  flex-direction: row;
+  padding: var(--padding-xshead) var(--padding-lghead) var(--padding-base) var(--padding-9xlhead);
+
+  text-align: left;
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+}
+.headTitlesAvanced620 {
+  align-self: stretch;
+  background-color: v-bind(background);
+  border-radius: 0px;
+  display: flex;
+
+  height: v-bind(height);
+
+  padding: var(--padding-xshead) var(--padding-lghead) var(--padding-base) var(--padding-9xlhead);
+
+  text-align: left;
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+}
+.position {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  flex-shrink: 0;
+  text-align: center;
+}
+.position420 {
+  font-size: var(--font-size-2xshead);
+}
+.player {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 206px;
+  flex-shrink: 0;
+  text-align: left;
+  left: 20px;
+}
+.player420 {
+  font-size: var(--font-size-2xshead);
+}
+
+.containerRightTypeAvanced1 {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-evenly;
+}
+.containerRightTitlesAdvanced {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  /*      gap: var(--gap-9xlhead); */
+  text-align: center;
+}
+.containerRightTitlesAdvanced960 {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-0head);
+  text-align: center;
+}
+.block02Titles {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--gap-5xlhead);
+  /*        padding-right:17px; */
+}
+.block02Titles620 {
+  gap: var(--gap-basehead);
+}
+
+.mon1Scouting {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 190px;
+  flex-shrink: 0;
+}
+
+.mon1Scouting960 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 130px;
+  flex-shrink: 0;
+}
+.mon1 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 130px;
+  flex-shrink: 0;
+}
+.mon1420 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 90px;
+  flex-shrink: 0;
+  font-size: var(--font-size-2xshead);
+}
+.mon1620 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 120px;
+  flex-shrink: 0;
+  flex: 1;
+}
+.icnIcon {
+  position: relative;
+  width: 10px;
+  height: 5px;
+}
+.icnIcon960 {
+  position: relative;
+  width: 10px;
+  height: 5px;
+  display: flex;
+}
+.icnIcon420 {
+  display: none;
+}
+
+.teamTitle {
+  flex: 1;
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  text-align: left;
+  left: 10px;
+}
+
+.positionTitle {
+  flex: 1;
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+}
+
+.ageTitle {
+  flex: 1;
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+}
+
+.partidos {
+  margin: 0;
+}
+
+.playedGamesTitle {
+  flex: 1;
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 17px;
+  font-weight: 600;
+  font-family: v-bind(fontFamily);
+  color: v-bind(fontColor);
+}
+
+.playedMinutesTitle {
+  flex: 1;
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 17px;
+  font-weight: 600;
+  font-family: v-bind(fontFamily);
+  color: v-bind(fontColor);
+}
+.block01Titles {
+  flex: 1;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.mon {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  width: 60px;
+  display: inline-block;
+  flex-shrink: 0;
+}
+.containesOptionsTitles {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  /*      gap: var(--gap-19xlhead); */
+}
+.templateTablaProductividadType1 {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+}
+.templateTablaProductividadType1400 {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+  min-width: 320px;
+}
+
+.headTitlesType1 {
+  align-self: stretch;
+  background-color: v-bind(background);
+  height: v-bind(heightTeam);
+  display: flex;
+  flex-direction: row;
+  padding: var(--padding-xshead) var(--padding-lghead) 16px var(--padding-lghead);
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  /*      gap: var(--gap-xlhead); */
+  z-index: 0;
+}
+.headTitlesType1420 {
+  background-color: v-bind(background);
+  height: v-bind(heightTeam);
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 0;
+  gap: var(--gap-0head);
+  height: auto !important;
+  padding: 9.3px 0px 9.3px 0px !important;
+  padding-left: var(--padding-xshead) !important;
+  padding-right: var(--padding-xshead) !important;
+}
+.headTitlesType1400 {
+  background-color: v-bind(background);
+  height: v-bind(heightTeam);
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 0;
+  gap: var(--gap-0head);
+  height: auto !important;
+  padding: 9.3px 0px 9.3px 0px !important;
+  padding-left: var(--padding-xshead) !important;
+  padding-right: var(--padding-xshead) !important;
+}
+.headTitlesType1540 {
+  background-color: v-bind(background);
+  height: v-bind(heightTeam);
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  padding: var(--padding-xshead) var(--padding-lghead) 16px var(--padding-9xlhead);
+  align-items: center;
+  justify-content: flex-start;
+  z-index: 0;
+  transform: rotate(0deg);
+  border-radius: 0px;
+}
+.headTitlesType1460 {
+  background-color: v-bind(background);
+  height: v-bind(heightTeam);
+  align-self: stretch;
+  display: flex;
+  padding: var(--padding-xshead) var(--padding-lghead) 16px var(--padding-9xlhead);
+  flex-direction: row;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: flex-start;
+  z-index: 0;
+  gap: var(--gap-0head);
+  border-radius: 0px;
+}
+.headTitlesType1680 {
+  background-color: v-bind(background);
+  height: v-bind(heightTeam);
+  align-self: stretch;
+  display: flex;
+  padding: var(--padding-xshead) var(--padding-lghead) 16px var(--padding-9xlhead);
+  flex-direction: row;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: flex-start;
+  z-index: 0;
+  border-radius: 0px;
+}
+.headTitlesType1350 {
+  background-color: v-bind(background);
+
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-around;
+  z-index: 0;
+  gap: var(--gap-0head);
+  padding: 9.3px 0px 9.3px 0px !important;
+  padding-left: var(--padding-xshead) !important;
+  box-sizing: border-box;
+}
+.positionType1 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 49px;
+  flex-shrink: 0;
+}
+.positionType1400 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 49px;
+  flex-shrink: 0;
+  font-size: var(--font-size-2xshead);
+}
+.teamType1 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 169px;
+  flex-shrink: 0;
+}
+.teamType1400 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 169px;
+  flex-shrink: 0;
+  font-size: var(--font-size-2xshead);
+}
+.frecuenciaType1 {
+  flex: 1;
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  text-align: center;
+}
+.frecuenciaType1540 {
+  display: none;
+}
+/* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */
+/* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */
+/* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */ /* CSS NUEVO */
+
+/* type 1* */
+
+.containerLeftTitlesType1 {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-5xlhead);
+}
+
+.frecuenciaWrapperType1 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: fit-content !important;
+  flex: 1;
+}
+.frecuenciaWrapperType1680 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: fit-content !important;
+}
+.promedioPartidoType1 {
+  margin: 0;
+  text-align: center;
+}
+.promedioEstePartidoType1 {
+  flex: 1;
+  position: relative;
+  letter-spacing: 0.2px;
+  text-align: center;
+  text-transform: capitalize;
+  font-weight: 600;
+}
+.promedioEstePartidoType1960 {
+  display: none;
+  text-align: center;
+}
+.promedioEstePartidoWrapperType1 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+}
+.promedioEstePartidoWrapperType11200 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.promedioEstePartidoWrapperType11090 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+  align-items: center;
+  line-height: 16px;
+  justify-content: center;
+  flex: 1;
+}
+.promedioEstePartidoWrapperType11086 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.promedioPartidosType1 {
+  flex: 1;
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+}
+.promedioPartidosWrapperType1 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.promedioPartidosWrapperType1960 {
+  display: none;
+}
+.promedioPartidosWrapperType11086 {
+  display: none;
+}
+.partidosJugadosType1 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+}
+.partidosJugadosType1960 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: flex;
+}
+.partidosJugadosWrapperType1 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.partidosJugadosWrapperType11200 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.partidosJugadosWrapperType11180 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.partidosJugadosWrapperType11170 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.partidosJugadosWrapperType11140 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.partidosJugadosWrapperType11086 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.partidosJugadosWrapperType1960 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.partidosJugadosWrapperType1880 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.partidosJugadosWrapperType1860 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.partidosJugadosWrapperType1830 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.partidosJugadosWrapperType1790 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.partidosJugadosWrapperType1930 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.partidosJugadosWrapperType1770 {
+  display: none;
+}
+.block01TitlesType1 {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-9xlhead);
+}
+.monType1 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 64px;
+  flex-shrink: 0;
+}
+.monType1960 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 64px;
+  flex-shrink: 0;
+  display: flex;
+}
+.monType1680 {
+  display: none;
+}
+.videosType1 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 145px;
+  flex-shrink: 0;
+  text-align: center;
+}
+.videosType1680 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 90px;
+  text-align: center;
+}
+.videosType1600 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 90px;
+  text-align: center;
+}
+.videosType1540 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 90px;
+  text-align: center;
+}
+.videosType1420 {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 90px;
+  text-align: center;
+}
+.videosType1400 {
+  font-size: var(--font-size-2xshead);
+  position: relative;
+  letter-spacing: 0.2px;
+  text-transform: capitalize;
+  font-weight: 600;
+  display: inline-block;
+  width: 90px;
+  text-align: center;
+  flex-shrink: 0;
+  font-size: var(--font-size-2xshead);
+}
+.containesOptionsTitlesType1 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-19xlhead);
+  margin-left: 12px;
+}
+.containesOptionsTitlesType1768 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-19xlhead);
+}
+.containesOptionsTitlesType1730 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-19xlhead);
+}
+.containesOptionsTitlesType1690 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-19xlhead);
+}
+.icnIconType1 {
+  position: relative;
+  width: 10px;
+  height: 5px;
+  opacity: 0;
+}
+.icnIconType1420 {
+  position: relative;
+  width: 10px;
+  height: 5px;
+  opacity: 0;
+  display: flex;
+}
+.icnIconType1400 {
+  display: none;
+}
+
+.block02TitlesType1 {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--gap-5xlhead);
+}
+.block02TitlesType1680 {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--gap-0head);
+}
+.block02TitlesType1350 {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--gap-0head);
+}
+.containerRightTitlesType1 {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-9xlhead);
+  text-align: center;
+}
+.containerRightTitlesType1420 {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-0head);
+  text-align: center;
+}
+</style>