@golstats/gsc-reports 1.0.0 → 1.0.2

package/src/components/thumbnails-reports/AnalisisPostMatchType3.vue

@@ -1,463 +1,463 @@
-<template>
-  <div class="prematch-bg">
-    <!-- Escudos de fondo -->
-    <div class="background-shields">
-      <div class="shield-left">
-        <img
-          :src="
-            'https://golstatsimages.blob.core.windows.net/teams-150/' +
-            report.game.home_team +
-            '.png'
-          "
-          alt="Escudo local"
-        />
-      </div>
-      <div class="shield-right">
-        <img
-          :src="
-            'https://golstatsimages.blob.core.windows.net/teams-150/' +
-            report.game.visiting_team +
-            '.png'
-          "
-          alt="Escudo visitante"
-        />
-      </div>
-    </div>
-
-    <div class="title">Análisis <span class="highlight">Postmatch</span></div>
-    <div class="subtitle">
-      <span class="jornada">Jornada {{ traducirJornada(report.game.matchday_name) }}</span>
-      <span class="fecha"> - {{ formatDate(report.game.date_time_utc) }}</span>
-    </div>
-    <div class="teams-row">
-      <div class="team team-local">
-        <div class="team-header">
-          <span class="escudo-svg">
-            <img
-              width="55px"
-              :src="
-                'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                report.game.home_team +
-                '.png'
-              "
-            />
-          </span>
-          <div class="score">{{ report.game.score[0] }}</div>
-        </div>
-        <div class="players-list">
-          <!-- Todos los eventos del equipo local -->
-          <div
-            v-for="(event, index) in homeEvents"
-            :key="`home-event-${index}`"
-            class="player-item"
-          >
-            <span class="player-name">{{ event }}&nbsp;</span>
-            <span class="player-icon">
-              <!-- Icono de gol -->
-              <svg
-                width="12"
-                height="12"
-                viewBox="0 0 20 20"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
-                  stroke="white"
-                  stroke-width="1.36665"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
-                  stroke="white"
-                  stroke-width="1.36665"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </span>
-          </div>
-          <!-- Indicador de más eventos para equipo local -->
-          <div v-if="hasMoreHomeEvents" class="more-events-indicator">
-            <span class="more-events-text">...</span>
-          </div>
-        </div>
-      </div>
-
-      <div class="divider-line">
-        <div class="dotted-line"></div>
-      </div>
-
-      <div class="team team-visitor">
-        <div class="team-header">
-          <div class="score">{{ report.game.score[1] }}</div>
-          <span class="escudo-svg">
-            <img
-              width="55px"
-              :src="
-                'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                report.game.visiting_team +
-                '.png'
-              "
-            />
-          </span>
-        </div>
-        <div class="players-list">
-          <!-- Todos los eventos del equipo visitante -->
-          <div
-            v-for="(event, index) in visitingEvents"
-            :key="`visiting-event-${index}`"
-            class="player-item"
-          >
-            <span class="player-icon">
-              <!-- Icono de gol -->
-              <svg
-                width="12"
-                height="12"
-                viewBox="0 0 20 20"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
-                  stroke="white"
-                  stroke-width="1.36665"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
-                  stroke="white"
-                  stroke-width="1.36665"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </span>
-            <span class="player-name">
-              {{ extraerMinutosYNombre(event).minutos }}&nbsp;<span
-                v-if="extraerMinutosYNombre(event).nombre"
-              >
-                {{ extraerMinutosYNombre(event).nombre }}</span
-              >
-            </span>
-          </div>
-          <!-- Indicador de más eventos para equipo visitante -->
-          <div v-if="hasMoreVisitingEvents" class="more-events-indicator">
-            <span class="more-events-text">...</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { formatDate } from '../../utils/dateUtils.js'
-import { computed } from 'vue'
-
-function traducirJornada(jornada) {
-  if (!jornada) return ''
-  return jornada
-    .replace('Matchday', 'J')
-    .replace('de Final', '')
-    .replace('Playoffs 1', 'CFI')
-    .replace('Playoffs 2', 'CFV')
-    .replace('Playoffs 3', 'SI')
-    .replace('Playoffs 4', 'SV')
-    .replace('Playoffs 5', 'FI')
-    .replace('Playoffs 6', 'FV')
-}
-// Aquí puedes agregar props si quieres que los nombres de equipos y jornada sean dinámicos
-const props = defineProps({
-  report: {
-    type: Object,
-    default: () => ({}),
-  },
-})
-
-// Debug: ver qué datos llegan
-console.log('Props report: ', props.report)
-console.log('Game minutes: ', props.report?.game?.report_minutes)
-
-// Función para obtener todos los eventos del equipo local limitados a 5
-const homeEvents = computed(() => {
-  // Ahora los eventos ya vienen en el formato correcto, solo mostrar los primeros 5
-  return (props.report?.game?.report_minutes?.home_goals_minutes || []).slice(0, 5)
-})
-
-// Función para obtener todos los eventos del equipo visitante limitados a 5
-const visitingEvents = computed(() => {
-  // Ahora los eventos ya vienen en el formato correcto, solo mostrar los primeros 5
-  return (props.report?.game?.report_minutes?.visiting_goals_minutes || []).slice(0, 5)
-})
-
-// Función para extraer minutos y nombre para el visitante
-function extraerMinutosYNombre(evento) {
-  // Buscar todos los patrones de minutos (ej: 62', 90 + 4')
-  const minutos = Array.from(evento.matchAll(/\d+\s*\+*\s*\d*'/g))
-    .map((m) => m[0])
-    .join(', ')
-  // El nombre es lo que queda antes del primer minuto
-  const nombreMatch = evento.match(/^(.*?)\s*\d+'/)
-  const nombre = nombreMatch ? ' ' + nombreMatch[1].trim() : ''
-  return { minutos, nombre }
-}
-
-// Funciones computadas para verificar si hay más de 5 eventos
-const hasMoreHomeEvents = computed(() => {
-  const totalEvents = props.report?.game?.report_minutes?.home_goals_minutes?.length || 0
-  return totalEvents > 5
-})
-
-const hasMoreVisitingEvents = computed(() => {
-  const totalEvents = props.report?.game?.report_minutes?.visiting_goals_minutes?.length || 0
-  return totalEvents > 5
-})
-</script>
-
-<style scoped>
-.prematch-bg {
-  width: 100%;
-  height: 222px;
-  /* height: 100vh; */
-  background: url('/images/background-postmatch-template-01.jpg');
-  background-size: cover;
-  background-repeat: no-repeat;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.background-shields {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.shield-left {
-  position: absolute;
-  left: -80px;
-  top: 50%;
-  transform: translateY(-50%);
-  opacity: 0.09;
-}
-
-.shield-left img {
-  width: 170px;
-  height: 170px;
-  object-fit: contain;
-}
-
-.shield-right {
-  position: absolute;
-  right: -80px;
-  top: 50%;
-  transform: translateY(-50%);
-  opacity: 0.09;
-}
-
-.shield-right img {
-  width: 170px;
-  height: 170px;
-  object-fit: contain;
-}
-
-.header {
-  padding: 24px 32px;
-}
-
-.logo {
-  height: 40px;
-}
-
-.main-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  /* Elimina el margin-top para centrar verticalmente */
-}
-
-.title {
-  font-size: 0.8rem;
-  color: #fff;
-  font-family: Poppins-Regular;
-  position: relative;
-  z-index: 2;
-}
-
-.highlight {
-  font-family: Poppins-Bold;
-  color: #fff;
-}
-
-.subtitle {
-  font-family: Poppins-Regular;
-  margin-top: -8px;
-  font-size: 1.1rem;
-  color: #e0e0e0;
-  position: relative;
-  z-index: 2;
-}
-
-.jornada {
-  font-family: Poppins-Medium;
-  color: #fff;
-  font-size: 0.4rem;
-  line-height: 2.2;
-  letter-spacing: 0.2px;
-  opacity: 0.8;
-}
-
-.fecha {
-  font-family: Poppins-Regular;
-  color: #e0e0e0;
-  opacity: 0.8;
-  line-height: 2.2;
-  letter-spacing: 0.2px;
-  font-size: 0.4rem;
-}
-
-.teams-row {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 15px;
-  margin-top: 10px;
-  position: relative;
-  z-index: 2;
-}
-
-.team {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 8px;
-  min-height: 120px;
-}
-
-.team-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.divider-line {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  height: 60px;
-  margin-top: 0;
-}
-
-.dotted-line {
-  width: 2px;
-  height: 60px;
-  background: repeating-linear-gradient(
-    to bottom,
-    #fff 0,
-    #fff 4px,
-    transparent 4px,
-    transparent 8px
-  );
-  opacity: 0.5;
-}
-
-.escudo-svg {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 55px;
-  height: 55px;
-}
-
-.players-list {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  align-items: center;
-}
-
-/* Alinear eventos del equipo local hacia la derecha */
-.team-local .players-list {
-  align-items: flex-end;
-}
-
-/* Alinear eventos del equipo visitante hacia la izquierda */
-.team-visitor .players-list {
-  align-items: flex-start;
-}
-
-.player-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 0.35rem;
-  color: #fff;
-  font-family: Poppins-Regular;
-}
-
-.player-name {
-  font-size: 0.35rem;
-  color: #fff;
-  font-family: Poppins-Regular;
-}
-
-.player-time {
-  font-size: 0.35rem;
-  color: #fff;
-  font-family: Poppins-Regular;
-}
-
-.player-icon svg {
-  width: 8px;
-  height: 8px;
-}
-
-.score {
-  font-size: 2.5rem;
-  font-family: BebasNeue-Bold;
-  font-weight: 700;
-  color: #fff;
-  margin: 0;
-  letter-spacing: 1px;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-/* Estilos específicos para el equipo visitante */
-.team-visitor .player-item {
-  /* El orden ya está correcto en el HTML: icono-minuto-nombre */
-}
-
-/* Estilos para el indicador de más eventos */
-.more-events-indicator {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 2px;
-}
-
-.more-events-text {
-  font-size: 0.4rem;
-  color: #fff;
-  font-family: Poppins-Regular;
-  opacity: 0.8;
-}
-</style>
+<template>
+  <div class="prematch-bg">
+    <!-- Escudos de fondo -->
+    <div class="background-shields">
+      <div class="shield-left">
+        <img
+          :src="
+            'https://golstatsimages.blob.core.windows.net/teams-150/' +
+            report.game.home_team +
+            '.png'
+          "
+          alt="Escudo local"
+        />
+      </div>
+      <div class="shield-right">
+        <img
+          :src="
+            'https://golstatsimages.blob.core.windows.net/teams-150/' +
+            report.game.visiting_team +
+            '.png'
+          "
+          alt="Escudo visitante"
+        />
+      </div>
+    </div>
+
+    <div class="title">Análisis <span class="highlight">Postmatch</span></div>
+    <div class="subtitle">
+      <span class="jornada">Jornada {{ traducirJornada(report.game.matchday_name) }}</span>
+      <span class="fecha"> - {{ formatDate(report.game.date_time_utc) }}</span>
+    </div>
+    <div class="teams-row">
+      <div class="team team-local">
+        <div class="team-header">
+          <span class="escudo-svg">
+            <img
+              width="55px"
+              :src="
+                'https://golstatsimages.blob.core.windows.net/teams-80/' +
+                report.game.home_team +
+                '.png'
+              "
+            />
+          </span>
+          <div class="score">{{ report.game.score[0] }}</div>
+        </div>
+        <div class="players-list">
+          <!-- Todos los eventos del equipo local -->
+          <div
+            v-for="(event, index) in homeEvents"
+            :key="`home-event-${index}`"
+            class="player-item"
+          >
+            <span class="player-name">{{ event }}&nbsp;</span>
+            <span class="player-icon">
+              <!-- Icono de gol -->
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 20 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
+                  stroke="white"
+                  stroke-width="1.36665"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
+                  stroke="white"
+                  stroke-width="1.36665"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </span>
+          </div>
+          <!-- Indicador de más eventos para equipo local -->
+          <div v-if="hasMoreHomeEvents" class="more-events-indicator">
+            <span class="more-events-text">...</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="divider-line">
+        <div class="dotted-line"></div>
+      </div>
+
+      <div class="team team-visitor">
+        <div class="team-header">
+          <div class="score">{{ report.game.score[1] }}</div>
+          <span class="escudo-svg">
+            <img
+              width="55px"
+              :src="
+                'https://golstatsimages.blob.core.windows.net/teams-80/' +
+                report.game.visiting_team +
+                '.png'
+              "
+            />
+          </span>
+        </div>
+        <div class="players-list">
+          <!-- Todos los eventos del equipo visitante -->
+          <div
+            v-for="(event, index) in visitingEvents"
+            :key="`visiting-event-${index}`"
+            class="player-item"
+          >
+            <span class="player-icon">
+              <!-- Icono de gol -->
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 20 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
+                  stroke="white"
+                  stroke-width="1.36665"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
+                  stroke="white"
+                  stroke-width="1.36665"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </span>
+            <span class="player-name">
+              {{ extraerMinutosYNombre(event).minutos }}&nbsp;<span
+                v-if="extraerMinutosYNombre(event).nombre"
+              >
+                {{ extraerMinutosYNombre(event).nombre }}</span
+              >
+            </span>
+          </div>
+          <!-- Indicador de más eventos para equipo visitante -->
+          <div v-if="hasMoreVisitingEvents" class="more-events-indicator">
+            <span class="more-events-text">...</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { formatDate } from '../../utils/dateUtils.js'
+import { computed } from 'vue'
+
+function traducirJornada(jornada) {
+  if (!jornada) return ''
+  return jornada
+    .replace('Matchday', 'J')
+    .replace('de Final', '')
+    .replace('Playoffs 1', 'CFI')
+    .replace('Playoffs 2', 'CFV')
+    .replace('Playoffs 3', 'SI')
+    .replace('Playoffs 4', 'SV')
+    .replace('Playoffs 5', 'FI')
+    .replace('Playoffs 6', 'FV')
+}
+// Aquí puedes agregar props si quieres que los nombres de equipos y jornada sean dinámicos
+const props = defineProps({
+  report: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+// Debug: ver qué datos llegan
+console.log('Props report: ', props.report)
+console.log('Game minutes: ', props.report?.game?.report_minutes)
+
+// Función para obtener todos los eventos del equipo local limitados a 5
+const homeEvents = computed(() => {
+  // Ahora los eventos ya vienen en el formato correcto, solo mostrar los primeros 5
+  return (props.report?.game?.report_minutes?.home_goals_minutes || []).slice(0, 5)
+})
+
+// Función para obtener todos los eventos del equipo visitante limitados a 5
+const visitingEvents = computed(() => {
+  // Ahora los eventos ya vienen en el formato correcto, solo mostrar los primeros 5
+  return (props.report?.game?.report_minutes?.visiting_goals_minutes || []).slice(0, 5)
+})
+
+// Función para extraer minutos y nombre para el visitante
+function extraerMinutosYNombre(evento) {
+  // Buscar todos los patrones de minutos (ej: 62', 90 + 4')
+  const minutos = Array.from(evento.matchAll(/\d+\s*\+*\s*\d*'/g))
+    .map((m) => m[0])
+    .join(', ')
+  // El nombre es lo que queda antes del primer minuto
+  const nombreMatch = evento.match(/^(.*?)\s*\d+'/)
+  const nombre = nombreMatch ? ' ' + nombreMatch[1].trim() : ''
+  return { minutos, nombre }
+}
+
+// Funciones computadas para verificar si hay más de 5 eventos
+const hasMoreHomeEvents = computed(() => {
+  const totalEvents = props.report?.game?.report_minutes?.home_goals_minutes?.length || 0
+  return totalEvents > 5
+})
+
+const hasMoreVisitingEvents = computed(() => {
+  const totalEvents = props.report?.game?.report_minutes?.visiting_goals_minutes?.length || 0
+  return totalEvents > 5
+})
+</script>
+
+<style scoped>
+.prematch-bg {
+  width: 100%;
+  height: 222px;
+  /* height: 100vh; */
+  background: url('/images/background-postmatch-template-01.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.background-shields {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.shield-left {
+  position: absolute;
+  left: -80px;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.09;
+}
+
+.shield-left img {
+  width: 170px;
+  height: 170px;
+  object-fit: contain;
+}
+
+.shield-right {
+  position: absolute;
+  right: -80px;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.09;
+}
+
+.shield-right img {
+  width: 170px;
+  height: 170px;
+  object-fit: contain;
+}
+
+.header {
+  padding: 24px 32px;
+}
+
+.logo {
+  height: 40px;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* Elimina el margin-top para centrar verticalmente */
+}
+
+.title {
+  font-size: 0.8rem;
+  color: #fff;
+  font-family: Poppins-Regular;
+  position: relative;
+  z-index: 2;
+}
+
+.highlight {
+  font-family: Poppins-Bold;
+  color: #fff;
+}
+
+.subtitle {
+  font-family: Poppins-Regular;
+  margin-top: -8px;
+  font-size: 1.1rem;
+  color: #e0e0e0;
+  position: relative;
+  z-index: 2;
+}
+
+.jornada {
+  font-family: Poppins-Medium;
+  color: #fff;
+  font-size: 0.4rem;
+  line-height: 2.2;
+  letter-spacing: 0.2px;
+  opacity: 0.8;
+}
+
+.fecha {
+  font-family: Poppins-Regular;
+  color: #e0e0e0;
+  opacity: 0.8;
+  line-height: 2.2;
+  letter-spacing: 0.2px;
+  font-size: 0.4rem;
+}
+
+.teams-row {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 15px;
+  margin-top: 10px;
+  position: relative;
+  z-index: 2;
+}
+
+.team {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+  min-height: 120px;
+}
+
+.team-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.divider-line {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  height: 60px;
+  margin-top: 0;
+}
+
+.dotted-line {
+  width: 2px;
+  height: 60px;
+  background: repeating-linear-gradient(
+    to bottom,
+    #fff 0,
+    #fff 4px,
+    transparent 4px,
+    transparent 8px
+  );
+  opacity: 0.5;
+}
+
+.escudo-svg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 55px;
+  height: 55px;
+}
+
+.players-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: center;
+}
+
+/* Alinear eventos del equipo local hacia la derecha */
+.team-local .players-list {
+  align-items: flex-end;
+}
+
+/* Alinear eventos del equipo visitante hacia la izquierda */
+.team-visitor .players-list {
+  align-items: flex-start;
+}
+
+.player-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.35rem;
+  color: #fff;
+  font-family: Poppins-Regular;
+}
+
+.player-name {
+  font-size: 0.35rem;
+  color: #fff;
+  font-family: Poppins-Regular;
+}
+
+.player-time {
+  font-size: 0.35rem;
+  color: #fff;
+  font-family: Poppins-Regular;
+}
+
+.player-icon svg {
+  width: 8px;
+  height: 8px;
+}
+
+.score {
+  font-size: 2.5rem;
+  font-family: BebasNeue-Bold;
+  font-weight: 700;
+  color: #fff;
+  margin: 0;
+  letter-spacing: 1px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+/* Estilos específicos para el equipo visitante */
+.team-visitor .player-item {
+  /* El orden ya está correcto en el HTML: icono-minuto-nombre */
+}
+
+/* Estilos para el indicador de más eventos */
+.more-events-indicator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 2px;
+}
+
+.more-events-text {
+  font-size: 0.4rem;
+  color: #fff;
+  font-family: Poppins-Regular;
+  opacity: 0.8;
+}
+</style>