@golstats/gsc-timeline-reports 1.0.0

package/src/components/gsc-timeline.vue

@@ -0,0 +1,3133 @@
+<script setup>
+import { ref, onBeforeUnmount, watch, onMounted, nextTick } from 'vue'
+import axios from 'axios'
+
+// Estado para el rango de minutos seleccionados
+const minStart = ref(0) // Minuto inicial del rango
+const minEnd = ref(96) // Minuto final del rango
+const startTime = ref('1') // Selector de tiempo inicial (1 = primer tiempo, 2 = segundo tiempo)
+const endTime = ref('2') // Selector de tiempo final
+const firstHalfEndMinute = ref(0) // Se actualizará con el valor del endpoint
+const secondHalfStartMinute = ref(45) // Minuto de inicio del segundo tiempo
+const secondHalfEndMinute = ref(96) // Minuto de finalización del segundo tiempo
+
+// Variables para forzar la actualización de la vista
+const leftHandlePosition = ref(0)
+const rightHandlePosition = ref(0)
+const rangeWidth = ref('0px')
+
+// Array que representa todos los minutos del partido
+const timelineMinutes = ref([])
+
+// Emitir eventos
+const emit = defineEmits(['range-change'])
+
+// Definir las props
+const props = defineProps({
+  timelineWidth: {
+    type: Number,
+    required: true,
+    default: 1010,
+  },
+  gameId: {
+    type: Number,
+    required: true,
+  },
+  homeTeam: {
+    type: Number,
+    required: true,
+  },
+  isDefault: {
+    type: Boolean,
+    required: false,
+  },
+  awayTeam: {
+    type: Number,
+    required: true,
+  },
+  token: {
+    type: String,
+    required: true,
+  },
+})
+
+// Crear instancia de axios con la configuración del token
+const axiosInstance = axios.create({
+  headers: {
+    Authorization: `${props.token}`,
+  },
+})
+
+// Lista de eventos (se actualizará con los datos del partido)
+const events = ref([])
+
+// Variables para el arrastre
+let dragging = null // Puede ser 'left', 'right' o null
+const timelineRef = ref(null) // Referencia al elemento timeline
+const isDragging = ref(false) // Estado para el arrastre
+const containerWidth = ref(0)
+const initialWidth = ref(0)
+const hasScrollLeft = ref(false)
+const hasScrollRight = ref(false)
+let isActuallyDragging = false // Para detectar si realmente se está arrastrando
+let dragStartX = 0 // Posición inicial del drag
+const initialHandleIndex = ref(0) // Índice inicial del handle que se está arrastrando
+
+// Variables de control para distinguir cambios manuales vs automáticos
+const isManualTimeChange = ref(false)
+const isIncrementing = ref(false) // Nueva variable para controlar operaciones de incremento/decremento
+
+// Número total de minutos en el timeline
+const minTotal = ref(96)
+
+// Referencia para el contenedor de scroll
+const scrollContainer = ref(null)
+
+// --- NUEVO: Datos dummy para modo default ---
+const dummyEvents = [
+  {
+    minute: 1,
+    match_lapse: 1,
+    event: [
+      {
+        minute: 1,
+        minuteLabel: 'E',
+        icon: 'icon-goal',
+        team: 'local',
+        match_lapse: 1,
+      },
+    ],
+  },
+  {
+    minute: 10,
+    match_lapse: 1,
+    event: [
+      {
+        minute: 10,
+        minuteLabel: 'E',
+        icon: 'icon-red-card',
+        team: 'visitante',
+        match_lapse: 1,
+      },
+    ],
+  },
+  {
+    minute: 45,
+    match_lapse: 1,
+    event: [
+      {
+        minute: 45,
+        minuteLabel: 'E',
+        icon: 'icon-change',
+        team: 'local',
+        match_lapse: 1,
+      },
+    ],
+  },
+  {
+    minute: 55,
+    match_lapse: 2,
+    event: [
+      {
+        minute: 55,
+        minuteLabel: 'E',
+        icon: 'icon-goal',
+        team: 'visitante',
+        match_lapse: 2,
+      },
+    ],
+  },
+  {
+    minute: 90,
+    match_lapse: 2,
+    event: [
+      {
+        minute: 80,
+        minuteLabel: 'E',
+        icon: 'icon-goal',
+        team: 'local',
+        match_lapse: 2,
+      },
+    ],
+  },
+]
+
+// Función para verificar si hay scroll
+function checkScroll() {
+  if (scrollContainer.value) {
+    const container = scrollContainer.value
+    const maxScroll = container.scrollWidth - container.clientWidth
+    const currentScroll = container.scrollLeft
+
+    // Solo mostrar scroll si el contenido es más grande que el contenedor
+    const hasScroll = container.scrollWidth > container.clientWidth
+
+    // Actualizar estados de scroll
+    hasScrollLeft.value = hasScroll && currentScroll > 0
+    hasScrollRight.value = hasScroll && Math.ceil(currentScroll) < Math.floor(maxScroll)
+  }
+}
+
+// Función para actualizar el ancho del contenedor
+function updateContainerWidth() {
+  if (timelineRef.value) {
+    const parentWidth = timelineRef.value.parentElement.clientWidth
+    containerWidth.value = parentWidth
+    // Solo establecemos el ancho inicial una vez
+    if (initialWidth.value === 0) {
+      initialWidth.value = parentWidth - 90
+    }
+    // Verificar scroll después de actualizar el ancho
+    nextTick(() => {
+      checkScroll()
+    })
+  }
+}
+
+// Función para calcular el minuto máximo
+function calculateMaxMinute() {
+  if (events.value.length > 0) {
+    const maxEventMinute = Math.max(...events.value.map((event) => event.minute))
+    minTotal.value = maxEventMinute // Usar el minuto del último evento sin margen adicional
+    // Actualizar el rango seleccionado al minuto final
+    minEnd.value = minTotal.value
+  }
+}
+
+// Función para obtener los datos del partido
+async function fetchGameData() {
+  if (props.isDefault) {
+    // Si es default, usar los eventos dummy
+    timelineMinutes.value = dummyEvents
+    events.value = dummyEvents.map((minute) => minute.event)
+    // Ajustar valores para los handlers y el rango
+    minStart.value = dummyEvents[0].minute
+    minEnd.value = dummyEvents[dummyEvents.length - 1].minute
+    startTime.value = dummyEvents[0].match_lapse.toString()
+    endTime.value = dummyEvents[dummyEvents.length - 1].match_lapse.toString()
+    leftHandlePosition.value = 0
+    rightHandlePosition.value = dummyEvents.length - 1
+    secondHalfEndMinute.value = dummyEvents[dummyEvents.length - 1].minute
+    minTotal.value = dummyEvents[dummyEvents.length - 1].minute
+    updateRangeWidth()
+    return
+  }
+  try {
+    const response = await axiosInstance.get(
+      `https://al2nv2dmkc.execute-api.us-west-2.amazonaws.com/prod/mxm/${props.gameId}`,
+    )
+
+    // Procesar los datos y crear el array de eventos
+    if (response.data && response.data.plays) {
+      // Encontrar el evento de fin del primer tiempo
+      const halfTimeEvent = response.data.plays.find(
+        (event) =>
+          event.event_type_id === 6 &&
+          event.comments?.includes('El árbitro silba el Final del Primer Tiempo'),
+      )
+
+      // Establecer el minuto de finalización del primer tiempo
+      if (halfTimeEvent) {
+        firstHalfEndMinute.value = halfTimeEvent.minute
+      }
+
+      // Calcular el minuto máximo usando todos los eventos
+      const maxEventMinute = Math.max(...response.data.plays.map((event) => event.minute))
+      secondHalfEndMinute.value = maxEventMinute
+      minTotal.value = maxEventMinute
+      minEnd.value = minTotal.value
+
+      // Crear el array de minutos del timeline
+      timelineMinutes.value = []
+
+      // Llenar el primer tiempo (todos los minutos)
+      for (let i = 0; i <= firstHalfEndMinute.value; i++) {
+        const eventsFound = response.data.plays.filter(
+          (e) =>
+            e.minute === i &&
+            e.match_lapse === 1 &&
+            (e.category_id === 9 ||
+              e.category_id === 3 ||
+              e.event_type_id === 1 ||
+              e.category_id === 10 ||
+              e.category_id === 13 ||
+              (e.event_type_id === 6 &&
+                e.comments?.includes('El árbitro silba el Final del Primer Tiempo'))),
+        )
+        const events = []
+        eventsFound.forEach((event) => {
+          events.push({
+            minute: event.minute,
+            minuteLabel: event.event_type_id === 6 ? 'MT' : event.minute.toString(),
+            icon: getEventIcon(event.event_type_id === 1 ? event.event_type_id : event.category_id),
+            team:
+              event.team_id === props.homeTeam
+                ? event.category_id === 13
+                  ? 'visitante'
+                  : 'local'
+                : event.category_id === 13
+                  ? 'local'
+                  : 'visitante',
+            match_lapse: event.match_lapse,
+          })
+        })
+
+        timelineMinutes.value.push({
+          minute: i,
+          match_lapse: 1,
+          event: events.length > 0 ? events : null,
+        })
+      }
+
+      // Llenar el segundo tiempo (todos los minutos)
+      for (let i = secondHalfStartMinute.value; i <= secondHalfEndMinute.value; i++) {
+        const eventsFound = response.data.plays.filter(
+          (e) =>
+            e.minute === i &&
+            e.match_lapse === 2 &&
+            (e.category_id === 9 ||
+              e.category_id === 3 ||
+              e.event_type_id === 1 ||
+              e.category_id === 10 ||
+              e.category_id === 13),
+        )
+        const events = []
+        eventsFound.forEach((event) => {
+          events.push({
+            minute: event.minute,
+            minuteLabel: event.event_type_id === 6 ? 'MT' : event.minute.toString(),
+            icon: getEventIcon(event.event_type_id === 1 ? event.event_type_id : event.category_id),
+            team:
+              event.team_id === props.homeTeam
+                ? event.category_id === 13
+                  ? 'visitante'
+                  : 'local'
+                : event.category_id === 13
+                  ? 'local'
+                  : 'visitante',
+            match_lapse: event.match_lapse,
+          })
+        })
+
+        timelineMinutes.value.push({
+          minute: i,
+          match_lapse: 2,
+          event: events.length > 0 ? events : null,
+        })
+      }
+
+      // Actualizar el array de eventos para mantener compatibilidad
+      events.value = timelineMinutes.value
+        .filter((minute) => minute.event !== null)
+        .map((minute) => minute.event)
+
+      // Establecer valores iniciales correctos para los handlers
+      if (timelineMinutes.value.length > 0) {
+        // Handler izquierdo: primer tiempo, primer minuto
+        const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+        if (firstHalfMinutes.length > 0) {
+          const firstMinute = firstHalfMinutes[0]
+          minStart.value = firstMinute.minute
+          startTime.value = '1'
+          leftHandlePosition.value = timelineMinutes.value.findIndex(
+            (m) => m.minute === firstMinute.minute && m.match_lapse === 1,
+          )
+        }
+
+        // Handler derecho: segundo tiempo, último minuto
+        const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+        if (secondHalfMinutes.length > 0) {
+          const lastMinute = secondHalfMinutes[secondHalfMinutes.length - 1]
+          minEnd.value = lastMinute.minute
+          endTime.value = '2'
+          rightHandlePosition.value = timelineMinutes.value.findIndex(
+            (m) => m.minute === lastMinute.minute && m.match_lapse === 2,
+          )
+        }
+
+        // Calcular el ancho inicial del rango
+        const startIndex = timelineMinutes.value.findIndex(
+          (m) => m.minute === minStart.value && m.match_lapse === parseInt(startTime.value),
+        )
+        const endIndex = timelineMinutes.value.findIndex(
+          (m) => m.minute === minEnd.value && m.match_lapse === parseInt(endTime.value),
+        )
+
+        if (startIndex !== -1 && endIndex !== -1 && startIndex < endIndex) {
+          const totalPositions = timelineMinutes.value.length
+          const startPos = (startIndex / (totalPositions - 1)) * (props.timelineWidth - 40)
+          const endPos = (endIndex / (totalPositions - 1)) * (props.timelineWidth - 40)
+          rangeWidth.value = `${endPos - startPos}px`
+        }
+      }
+    }
+  } catch (error) {
+    console.error('Error al obtener los datos del partido:', error)
+  }
+}
+
+// Función para determinar el icono según el tipo de evento
+function getEventIcon(eventTypeId) {
+  const iconMap = {
+    3: 'icon-goal',
+    1: 'icon-goal',
+    13: 'icon-goal',
+    10: 'icon-change',
+    9: 'icon-red-card',
+    // Agregar más mapeos según sea necesario
+  }
+  return iconMap[eventTypeId] || '' // Por defecto retorna icon-goal
+}
+
+// Observar cambios en el tamaño de la ventana
+onMounted(() => {
+  calculateMaxMinute()
+  updateContainerWidth()
+  fetchGameData()
+
+  // Verificar scroll después de que los datos se hayan cargado
+  nextTick(() => {
+    checkScroll()
+  })
+
+  window.addEventListener('resize', () => {
+    updateContainerWidth()
+  })
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', checkScroll)
+})
+
+// Observar cambios en los eventos para actualizar el scroll
+watch(
+  events,
+  () => {
+    nextTick(() => {
+      checkScroll()
+    })
+  },
+  { deep: true },
+)
+
+// Observar cambios en los valores
+watch(
+  [minStart, minEnd, startTime, endTime],
+  () => {
+    // Solo emitir los valores, sin validación automática
+    handleRangeChange()
+  },
+  { immediate: true },
+)
+
+// Observar cambios en los selectores de tiempo para actualizar los minutos automáticamente
+watch(
+  [startTime],
+  () => {
+    // No ejecutar si estamos incrementando/decrementando o arrastrando
+    if (isIncrementing.value || isDragging.value) return
+
+    // Validar que el tiempo inicial no sea mayor que el tiempo final
+    if (parseInt(startTime.value) > parseInt(endTime.value)) {
+      // Si el tiempo inicial es mayor que el final, ajustar el tiempo final
+      endTime.value = startTime.value
+      isManualTimeChange.value = true
+    }
+
+    // Solo aplicar cambios automáticos si no es un cambio manual
+    if (!isManualTimeChange.value) {
+      if (startTime.value === '1') {
+        // Primer tiempo: ir al primer minuto del primer tiempo
+        const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+        if (firstHalfMinutes.length > 0) {
+          const firstMinute = firstHalfMinutes[0]
+          minStart.value = firstMinute.minute
+
+          // Actualizar la posición del handler izquierdo
+          const startIndex = timelineMinutes.value.findIndex(
+            (m) => m.minute === firstMinute.minute && m.match_lapse === 1,
+          )
+          if (startIndex !== -1) {
+            leftHandlePosition.value = startIndex
+          }
+        }
+      } else if (startTime.value === '2') {
+        // Segundo tiempo: ir al primer minuto del segundo tiempo
+        const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+        if (secondHalfMinutes.length > 0) {
+          const firstMinute = secondHalfMinutes[0]
+          minStart.value = firstMinute.minute
+
+          // Actualizar la posición del handler izquierdo
+          const startIndex = timelineMinutes.value.findIndex(
+            (m) => m.minute === firstMinute.minute && m.match_lapse === 2,
+          )
+          if (startIndex !== -1) {
+            leftHandlePosition.value = startIndex
+          }
+        }
+      }
+    } else {
+      // Es un cambio manual, verificar si el minuto actual es válido
+      if (startTime.value === '1') {
+        const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+        if (firstHalfMinutes.length > 0) {
+          const firstMinute = firstHalfMinutes[0]
+          const lastMinute = firstHalfMinutes[firstHalfMinutes.length - 1]
+
+          // Solo cambiar si el minuto actual no es válido para el primer tiempo
+          if (minStart.value < firstMinute.minute || minStart.value > lastMinute.minute) {
+            minStart.value = firstMinute.minute
+          }
+
+          // Actualizar la posición del handler izquierdo
+          const startIndex = timelineMinutes.value.findIndex(
+            (m) => m.minute === minStart.value && m.match_lapse === 1,
+          )
+          if (startIndex !== -1) {
+            leftHandlePosition.value = startIndex
+          }
+        }
+      } else if (startTime.value === '2') {
+        const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+        if (secondHalfMinutes.length > 0) {
+          const firstMinute = secondHalfMinutes[0]
+          const lastMinute = secondHalfMinutes[secondHalfMinutes.length - 1]
+
+          // Solo cambiar si el minuto actual no es válido para el segundo tiempo
+          if (minStart.value < firstMinute.minute || minStart.value > lastMinute.minute) {
+            minStart.value = firstMinute.minute
+          }
+
+          // Actualizar la posición del handler izquierdo
+          const startIndex = timelineMinutes.value.findIndex(
+            (m) => m.minute === minStart.value && m.match_lapse === 2,
+          )
+          if (startIndex !== -1) {
+            leftHandlePosition.value = startIndex
+          }
+        }
+      }
+    }
+
+    // Resetear la bandera
+    isManualTimeChange.value = false
+
+    // Actualizar el ancho del rango
+    updateRangeWidth()
+  },
+  { immediate: true },
+)
+
+watch(
+  [endTime],
+  () => {
+    // No ejecutar si estamos incrementando/decrementando o arrastrando
+    if (isIncrementing.value || isDragging.value) return
+
+    // Validar que el tiempo final no sea menor que el tiempo inicial
+    if (parseInt(endTime.value) < parseInt(startTime.value)) {
+      // Si el tiempo final es menor que el inicial, ajustar el tiempo inicial
+      startTime.value = endTime.value
+      isManualTimeChange.value = true
+    }
+
+    // Solo aplicar cambios automáticos si no es un cambio manual
+    if (!isManualTimeChange.value) {
+      if (endTime.value === '1') {
+        // Primer tiempo: ir al último minuto del primer tiempo
+        const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+        if (firstHalfMinutes.length > 0) {
+          const lastMinute = firstHalfMinutes[firstHalfMinutes.length - 1]
+          minEnd.value = lastMinute.minute
+
+          // Actualizar la posición del handler derecho
+          const endIndex = timelineMinutes.value.findIndex(
+            (m) => m.minute === lastMinute.minute && m.match_lapse === 1,
+          )
+          if (endIndex !== -1) {
+            rightHandlePosition.value = endIndex
+          }
+        }
+      } else if (endTime.value === '2') {
+        // Segundo tiempo: ir al último minuto del segundo tiempo
+        const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+        if (secondHalfMinutes.length > 0) {
+          const lastMinute = secondHalfMinutes[secondHalfMinutes.length - 1]
+          minEnd.value = lastMinute.minute
+
+          // Actualizar la posición del handler derecho
+          const endIndex = timelineMinutes.value.findIndex(
+            (m) => m.minute === lastMinute.minute && m.match_lapse === 2,
+          )
+          if (endIndex !== -1) {
+            rightHandlePosition.value = endIndex
+          }
+        }
+      }
+    } else {
+      // Es un cambio manual, verificar si el minuto actual es válido
+      if (endTime.value === '1') {
+        const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+        if (firstHalfMinutes.length > 0) {
+          const firstMinute = firstHalfMinutes[0]
+          const lastMinute = firstHalfMinutes[firstHalfMinutes.length - 1]
+
+          // Solo cambiar si el minuto actual no es válido para el primer tiempo
+          if (minEnd.value < firstMinute.minute || minEnd.value > lastMinute.minute) {
+            minEnd.value = lastMinute.minute
+          }
+
+          // Actualizar la posición del handler derecho
+          const endIndex = timelineMinutes.value.findIndex(
+            (m) => m.minute === minEnd.value && m.match_lapse === 1,
+          )
+          if (endIndex !== -1) {
+            rightHandlePosition.value = endIndex
+          }
+        }
+      } else if (endTime.value === '2') {
+        const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+        if (secondHalfMinutes.length > 0) {
+          const firstMinute = secondHalfMinutes[0]
+          const lastMinute = secondHalfMinutes[secondHalfMinutes.length - 1]
+
+          // Solo cambiar si el minuto actual no es válido para el segundo tiempo
+          if (minEnd.value < firstMinute.minute || minEnd.value > lastMinute.minute) {
+            minEnd.value = lastMinute.minute
+          }
+
+          // Actualizar la posición del handler derecho
+          const endIndex = timelineMinutes.value.findIndex(
+            (m) => m.minute === minEnd.value && m.match_lapse === 2,
+          )
+          if (endIndex !== -1) {
+            rightHandlePosition.value = endIndex
+          }
+        }
+      }
+    }
+
+    // Resetear la bandera
+    isManualTimeChange.value = false
+
+    // Actualizar el ancho del rango
+    updateRangeWidth()
+  },
+  { immediate: true },
+)
+
+// Observar cambios en los inputs de minutos para validar y ajustar automáticamente
+watch([minStart], () => {
+  // No ejecutar si estamos incrementando/decrementando o arrastrando
+  if (isIncrementing.value || isDragging.value) return
+
+  // Validar que el minuto esté dentro del rango del tiempo seleccionado
+  if (startTime.value === '1') {
+    const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+    if (firstHalfMinutes.length > 0) {
+      const firstMinute = firstHalfMinutes[0]
+      const lastMinute = firstHalfMinutes[firstHalfMinutes.length - 1]
+
+      if (minStart.value < firstMinute.minute) {
+        minStart.value = firstMinute.minute
+      } else if (minStart.value > lastMinute.minute) {
+        minStart.value = lastMinute.minute
+      }
+
+      // Actualizar la posición del handler izquierdo
+      const startIndex = timelineMinutes.value.findIndex(
+        (m) => m.minute === minStart.value && m.match_lapse === 1,
+      )
+      if (startIndex !== -1) {
+        leftHandlePosition.value = startIndex
+      }
+    }
+  } else if (startTime.value === '2') {
+    const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+    if (secondHalfMinutes.length > 0) {
+      const firstMinute = secondHalfMinutes[0]
+      const lastMinute = secondHalfMinutes[secondHalfMinutes.length - 1]
+
+      if (minStart.value < firstMinute.minute) {
+        minStart.value = firstMinute.minute
+      } else if (minStart.value > lastMinute.minute) {
+        minStart.value = lastMinute.minute
+      }
+
+      // Actualizar la posición del handler izquierdo
+      const startIndex = timelineMinutes.value.findIndex(
+        (m) => m.minute === minStart.value && m.match_lapse === 2,
+      )
+      if (startIndex !== -1) {
+        leftHandlePosition.value = startIndex
+      }
+    }
+  }
+
+  // Validar que el minuto inicial no sea mayor o igual que el minuto final
+  if (startTime.value === endTime.value && minStart.value >= minEnd.value) {
+    // Si están en el mismo tiempo y el minuto inicial es mayor o igual al final, ajustar el final
+    if (endTime.value === '1') {
+      const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+      if (firstHalfMinutes.length > 0) {
+        const lastMinute = firstHalfMinutes[firstHalfMinutes.length - 1]
+        minEnd.value = Math.min(lastMinute.minute, minStart.value + 1)
+      }
+    } else if (endTime.value === '2') {
+      const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+      if (secondHalfMinutes.length > 0) {
+        const lastMinute = secondHalfMinutes[secondHalfMinutes.length - 1]
+        minEnd.value = Math.min(lastMinute.minute, minStart.value + 1)
+      }
+    }
+  }
+
+  // Actualizar el ancho del rango
+  updateRangeWidth()
+})
+
+watch([minEnd], () => {
+  // No ejecutar si estamos incrementando/decrementando o arrastrando
+  if (isIncrementing.value || isDragging.value) return
+
+  // Validar que el minuto esté dentro del rango del tiempo seleccionado
+  if (endTime.value === '1') {
+    const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+    if (firstHalfMinutes.length > 0) {
+      const firstMinute = firstHalfMinutes[0]
+      const lastMinute = firstHalfMinutes[firstHalfMinutes.length - 1]
+
+      if (minEnd.value < firstMinute.minute) {
+        minEnd.value = firstMinute.minute
+      } else if (minEnd.value > lastMinute.minute) {
+        minEnd.value = lastMinute.minute
+      }
+
+      // Actualizar la posición del handler derecho
+      const endIndex = timelineMinutes.value.findIndex(
+        (m) => m.minute === minEnd.value && m.match_lapse === 1,
+      )
+      if (endIndex !== -1) {
+        rightHandlePosition.value = endIndex
+      }
+    }
+  } else if (endTime.value === '2') {
+    const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+
+    if (secondHalfMinutes.length > 0) {
+      const firstMinute = secondHalfMinutes[0]
+      const lastMinute = secondHalfMinutes[secondHalfMinutes.length - 1]
+
+      if (minEnd.value < firstMinute.minute) {
+        minEnd.value = firstMinute.minute
+      } else if (minEnd.value > lastMinute.minute) {
+        minEnd.value = lastMinute.minute
+      }
+
+      // Actualizar la posición del handler derecho
+      const endIndex = timelineMinutes.value.findIndex(
+        (m) => m.minute === minEnd.value && m.match_lapse === 2,
+      )
+      if (endIndex !== -1) {
+        rightHandlePosition.value = endIndex
+      }
+    }
+  }
+
+  // Validar que el minuto final no sea menor o igual que el minuto inicial
+  if (startTime.value === endTime.value && minEnd.value <= minStart.value) {
+    // Si están en el mismo tiempo y el minuto final es menor o igual al inicial, ajustar el inicial
+    if (startTime.value === '1') {
+      const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+      if (firstHalfMinutes.length > 0) {
+        const firstMinute = firstHalfMinutes[0]
+        minStart.value = Math.max(firstMinute.minute, minEnd.value - 1)
+      }
+    } else if (startTime.value === '2') {
+      const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+      if (secondHalfMinutes.length > 0) {
+        const firstMinute = secondHalfMinutes[0]
+        minStart.value = Math.max(firstMinute.minute, minEnd.value - 1)
+      }
+    }
+  }
+
+  // Actualizar el ancho del rango
+  updateRangeWidth()
+})
+
+// Función para calcular la posición en la línea de tiempo
+function getPositionByIndex(index) {
+  const totalPositions = timelineMinutes.value.length
+  if (index < 0 || totalPositions === 0) return '0px'
+  if (totalPositions === 1) return '0px'
+  const position = (index / (totalPositions - 1)) * (props.timelineWidth - 40)
+  return `${position}px`
+}
+
+// Inicia el arrastre de los handles
+function startDrag(handle, event) {
+  event.preventDefault() // Previene selección de texto
+  dragging = handle
+  dragStartX = event.type.includes('touch') ? event.touches[0].clientX : event.clientX
+  isActuallyDragging = false
+
+  // Guardar el índice inicial del handle que se está arrastrando
+  if (handle === 'left') {
+    initialHandleIndex.value = leftHandlePosition.value
+  } else if (handle === 'right') {
+    initialHandleIndex.value = rightHandlePosition.value
+  }
+
+  // Agrega listeners para mouse y touch
+  document.addEventListener('mousemove', onDrag)
+  document.addEventListener('touchmove', onDrag, { passive: false })
+  document.addEventListener('mouseup', stopDrag)
+  document.addEventListener('touchend', stopDrag)
+
+  // Actualiza el estado de arrastre
+  isDragging.value = true
+}
+
+// Función para manejar el arrastre
+function onDrag(event) {
+  if (!dragging) return
+
+  event.preventDefault()
+
+  const currentX = event.type.includes('touch') ? event.touches[0].clientX : event.clientX
+
+  // Detectar si realmente se está arrastrando (movimiento mínimo de 5px)
+  if (!isActuallyDragging) {
+    const dragDistance = Math.abs(currentX - dragStartX)
+    if (dragDistance < 5) {
+      return // No hacer nada si no se ha movido lo suficiente
+    }
+    isActuallyDragging = true
+  }
+
+  const timelineWidth = getTimelineWidth()
+  const totalPositions = timelineMinutes.value.length
+
+  // Calcular el desplazamiento relativo desde la posición inicial
+  const dragOffset = currentX - dragStartX
+  const pixelsPerIndex = timelineWidth / (totalPositions - 1)
+  const indexOffset = Math.round(dragOffset / pixelsPerIndex)
+
+  // Calcular el nuevo índice basado en el índice inicial + el desplazamiento
+  let newIndex = initialHandleIndex.value + indexOffset
+  const clampedIndex = Math.max(0, Math.min(newIndex, totalPositions - 1))
+
+  if (dragging === 'left') {
+    // Para el handler izquierdo, solo verificar que no pase el handler derecho
+    const endIndex = timelineMinutes.value.findIndex(
+      (m) => m.minute === minEnd.value && m.match_lapse === parseInt(endTime.value),
+    )
+
+    // Permitir que el handler izquierdo se mueva libremente, solo bloquear si está muy cerca del derecho
+    if (clampedIndex >= endIndex - 1) {
+      return
+    }
+
+    const selectedMinute = timelineMinutes.value[clampedIndex]
+
+    // Marcar que estamos arrastrando para evitar interferencia de watchers
+    isDragging.value = true
+
+    // Actualizar posición y valores de manera síncrona
+    leftHandlePosition.value = clampedIndex
+    minStart.value = selectedMinute.minute
+    startTime.value = selectedMinute.match_lapse.toString()
+
+    // Marcar como cambio manual para evitar que los watchers interfieran
+    isManualTimeChange.value = true
+  } else if (dragging === 'right') {
+    // Para el handler derecho, solo verificar que no pase el handler izquierdo
+    const startIndex = timelineMinutes.value.findIndex(
+      (m) => m.minute === minStart.value && m.match_lapse === parseInt(startTime.value),
+    )
+
+    // Permitir que el handler derecho se mueva libremente, solo bloquear si está muy cerca del izquierdo
+    if (clampedIndex <= startIndex + 1) {
+      return
+    }
+
+    const selectedMinute = timelineMinutes.value[clampedIndex]
+
+    // Marcar que estamos arrastrando para evitar interferencia de watchers
+    isDragging.value = true
+
+    // Actualizar posición y valores de manera síncrona
+    rightHandlePosition.value = clampedIndex
+    minEnd.value = selectedMinute.minute
+    endTime.value = selectedMinute.match_lapse.toString()
+
+    // Marcar como cambio manual para evitar que los watchers interfieran
+    isManualTimeChange.value = true
+  }
+
+  // Calcular y actualizar el ancho del rango inmediatamente
+  const startIndex = timelineMinutes.value.findIndex(
+    (m) => m.minute === minStart.value && m.match_lapse === parseInt(startTime.value),
+  )
+  const endIndex = timelineMinutes.value.findIndex(
+    (m) => m.minute === minEnd.value && m.match_lapse === parseInt(endTime.value),
+  )
+
+  if (startIndex !== -1 && endIndex !== -1 && startIndex < endIndex) {
+    const totalPositions = timelineMinutes.value.length
+    const startPos = (startIndex / (totalPositions - 1)) * (props.timelineWidth - 40)
+    const endPos = (endIndex / (totalPositions - 1)) * (props.timelineWidth - 40)
+    rangeWidth.value = `${endPos - startPos}px`
+  }
+
+  // Forzar la actualización de la vista
+  nextTick(() => {
+    handleRangeChange()
+  })
+}
+
+// Finaliza el arrastre
+function stopDrag() {
+  if (dragging) {
+    // Solo validar que los valores estén en rangos válidos, sin forzar ajustes
+    if (minStart.value < 0) minStart.value = 0
+    if (minEnd.value > minTotal.value) minEnd.value = minTotal.value
+
+    // Resetear las banderas después de un pequeño delay para permitir que los watchers funcionen
+    nextTick(() => {
+      isDragging.value = false
+      isManualTimeChange.value = false
+    })
+
+    // Emitir los valores finales
+    handleRangeChange()
+  }
+
+  dragging = null
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('touchmove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
+  document.removeEventListener('touchend', stopDrag)
+}
+
+function decrementMinStart() {
+  if (minStart.value > 0) {
+    isIncrementing.value = true // Marcar que estamos decrementando
+
+    let newValue = minStart.value - 1
+    let timeChanged = false
+    let newTime = startTime.value
+
+    // Obtener el primer minuto del tiempo actual desde el array
+    if (startTime.value === '1') {
+      const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+      if (firstHalfMinutes.length > 0) {
+        const firstMinute = firstHalfMinutes[0]
+        if (newValue < firstMinute.minute) {
+          // Si se pasa del primer minuto del primer tiempo, no hacer nada
+          // (no cambiar al segundo tiempo al decrementar)
+          newValue = firstMinute.minute
+        }
+      }
+    } else if (startTime.value === '2') {
+      const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+      if (secondHalfMinutes.length > 0) {
+        const firstMinute = secondHalfMinutes[0]
+        if (newValue < firstMinute.minute) {
+          // Si se pasa del primer minuto del segundo tiempo, cambiar al primer tiempo
+          newTime = '1'
+          timeChanged = true
+          const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+          if (firstHalfMinutes.length > 0) {
+            const lastMinute = firstHalfMinutes[firstHalfMinutes.length - 1]
+            newValue = lastMinute.minute
+          }
+        }
+      }
+    }
+
+    // Actualizar posición y valores de manera síncrona
+    const startIndex = timelineMinutes.value.findIndex(
+      (m) => m.minute === newValue && m.match_lapse === parseInt(newTime),
+    )
+
+    if (startIndex !== -1) {
+      // Actualizar todo de manera síncrona
+      leftHandlePosition.value = startIndex
+      minStart.value = newValue
+
+      if (timeChanged) {
+        startTime.value = newTime
+        isManualTimeChange.value = true
+      }
+
+      // Actualizar el ancho del rango inmediatamente
+      updateRangeWidth()
+    }
+
+    // Resetear la bandera después de un pequeño delay
+    nextTick(() => {
+      isIncrementing.value = false
+    })
+  }
+}
+
+function incrementMinEnd() {
+  if (minEnd.value < minTotal.value) {
+    isIncrementing.value = true // Marcar que estamos incrementando
+
+    let newValue = minEnd.value + 1
+    let timeChanged = false
+    let newTime = endTime.value
+
+    // No permitir que minEnd sea menor o igual a minStart en el mismo tiempo
+    if (newTime === startTime.value && newValue <= minStart.value) {
+      nextTick(() => {
+        isIncrementing.value = false
+      })
+      return
+    }
+
+    // Obtener el último minuto del tiempo actual desde el array
+    if (endTime.value === '1') {
+      const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+      if (firstHalfMinutes.length > 0) {
+        const lastMinute = firstHalfMinutes[firstHalfMinutes.length - 1]
+        if (newValue > lastMinute.minute) {
+          // Si se pasa del último minuto del primer tiempo, cambiar al segundo tiempo
+          newTime = '2'
+          timeChanged = true
+          const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+          if (secondHalfMinutes.length > 0) {
+            const firstMinute = secondHalfMinutes[0]
+            newValue = firstMinute.minute
+          }
+        }
+      }
+    } else if (endTime.value === '2') {
+      const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+      if (secondHalfMinutes.length > 0) {
+        const lastMinute = secondHalfMinutes[secondHalfMinutes.length - 1]
+        if (newValue > lastMinute.minute) {
+          newValue = lastMinute.minute
+        }
+      }
+    }
+
+    // Validar que el nuevo tiempo no sea menor que el tiempo inicial
+    if (parseInt(newTime) < parseInt(startTime.value)) {
+      // Si el nuevo tiempo es menor, ajustar el tiempo inicial
+      startTime.value = newTime
+      isManualTimeChange.value = true
+
+      // Ajustar también el minuto inicial si es necesario
+      if (newTime === '1') {
+        const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+        if (firstHalfMinutes.length > 0) {
+          const firstMinute = firstHalfMinutes[0]
+          if (minStart.value > newValue) {
+            minStart.value = firstMinute.minute
+          }
+        }
+      } else if (newTime === '2') {
+        const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+        if (secondHalfMinutes.length > 0) {
+          const firstMinute = secondHalfMinutes[0]
+          if (minStart.value > newValue) {
+            minStart.value = firstMinute.minute
+          }
+        }
+      }
+    }
+
+    // Actualizar posición y valores de manera síncrona
+    const endIndex = timelineMinutes.value.findIndex(
+      (m) => m.minute === newValue && m.match_lapse === parseInt(newTime),
+    )
+
+    if (endIndex !== -1) {
+      // Actualizar todo de manera síncrona
+      rightHandlePosition.value = endIndex
+      minEnd.value = newValue
+
+      if (timeChanged) {
+        endTime.value = newTime
+        isManualTimeChange.value = true
+      }
+
+      // Actualizar el ancho del rango inmediatamente
+      updateRangeWidth()
+    }
+
+    // Resetear la bandera después de un pequeño delay
+    nextTick(() => {
+      isIncrementing.value = false
+    })
+  }
+}
+
+function decrementMinEnd() {
+  // Verificar si podemos decrementar o cambiar de tiempo
+  let canDecrement = false
+  let newValue = minEnd.value - 1
+  let newTime = endTime.value
+
+  // No permitir que minEnd sea menor o igual a minStart en el mismo tiempo
+  if (newTime === startTime.value && newValue <= minStart.value) {
+    return
+  }
+
+  // Verificar si podemos decrementar en el tiempo actual
+  if (endTime.value === '1') {
+    const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+    if (firstHalfMinutes.length > 0) {
+      const firstMinute = firstHalfMinutes[0]
+      if (newValue >= firstMinute.minute) {
+        canDecrement = true
+      }
+    }
+  } else if (endTime.value === '2') {
+    const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+    if (secondHalfMinutes.length > 0) {
+      const firstMinute = secondHalfMinutes[0]
+      if (newValue >= firstMinute.minute) {
+        canDecrement = true
+      } else {
+        // Si no podemos decrementar en el segundo tiempo, intentar cambiar al primer tiempo
+        const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+        if (firstHalfMinutes.length > 0) {
+          const lastMinute = firstHalfMinutes[firstHalfMinutes.length - 1]
+          newTime = '1'
+          newValue = lastMinute.minute
+          canDecrement = true
+        }
+      }
+    }
+  }
+
+  if (canDecrement) {
+    isIncrementing.value = true // Marcar que estamos decrementando
+
+    let timeChanged = false
+
+    // Si cambiamos de tiempo, marcar como cambio
+    if (newTime !== endTime.value) {
+      timeChanged = true
+    }
+
+    // Actualizar posición y valores de manera síncrona
+    const endIndex = timelineMinutes.value.findIndex(
+      (m) => m.minute === newValue && m.match_lapse === parseInt(newTime),
+    )
+    if (endIndex !== -1) {
+      // Actualizar todo de manera síncrona
+      rightHandlePosition.value = endIndex
+      minEnd.value = newValue
+
+      if (timeChanged) {
+        endTime.value = newTime
+        isManualTimeChange.value = true
+      }
+
+      // Actualizar el ancho del rango inmediatamente
+      updateRangeWidth()
+    }
+
+    // Resetear la bandera después de un pequeño delay
+    nextTick(() => {
+      isIncrementing.value = false
+    })
+  }
+}
+
+// Función para el scroll horizontal
+function scrollLeft() {
+  const scrollContainer = document.querySelector('.timeline-scroll')
+  if (scrollContainer) {
+    const currentScroll = scrollContainer.scrollLeft
+    const newScroll = Math.max(0, currentScroll - 150)
+    scrollContainer.scrollTo({ left: newScroll, behavior: 'smooth' })
+    setTimeout(checkScroll, 300)
+  }
+}
+
+function scrollRight() {
+  const scrollContainer = document.querySelector('.timeline-scroll')
+  if (scrollContainer) {
+    const currentScroll = scrollContainer.scrollLeft
+    const maxScroll = scrollContainer.scrollWidth - scrollContainer.clientWidth
+    const newScroll = Math.min(maxScroll, currentScroll + 150)
+    scrollContainer.scrollTo({ left: newScroll, behavior: 'smooth' })
+    setTimeout(checkScroll, 300)
+  }
+}
+
+// Obtiene el ancho real del timeline
+function getTimelineWidth() {
+  if (!timelineRef.value) return 600 // Valor por defecto
+  return timelineRef.value.getBoundingClientRect().width
+}
+
+// Función para emitir los valores en segundos y minutos
+function handleRangeChange() {
+  const startSeconds = minStart.value * 60
+  const endSeconds = minEnd.value * 60
+  emit('range-change', {
+    start: {
+      minutes: minStart.value,
+      seconds: startSeconds,
+      time: startTime.value,
+      match_lapse: parseInt(startTime.value),
+    },
+    end: {
+      minutes: minEnd.value,
+      seconds: endSeconds,
+      time: endTime.value,
+      match_lapse: parseInt(endTime.value),
+    },
+  })
+}
+
+// Función para actualizar el ancho del rango
+function updateRangeWidth() {
+  const startIndex = timelineMinutes.value.findIndex(
+    (m) => m.minute === minStart.value && m.match_lapse === parseInt(startTime.value),
+  )
+  const endIndex = timelineMinutes.value.findIndex(
+    (m) => m.minute === minEnd.value && m.match_lapse === parseInt(endTime.value),
+  )
+
+  if (startIndex !== -1 && endIndex !== -1 && startIndex < endIndex) {
+    const totalPositions = timelineMinutes.value.length
+    const startPos = (startIndex / (totalPositions - 1)) * (props.timelineWidth - 40)
+    const endPos = (endIndex / (totalPositions - 1)) * (props.timelineWidth - 40)
+    rangeWidth.value = `${endPos - startPos}px`
+  }
+}
+
+function incrementMinStart() {
+  isIncrementing.value = true // Marcar que estamos incrementando
+
+  let newValue = minStart.value + 1
+  let timeChanged = false
+  let newTime = startTime.value
+
+  // No permitir que minStart sea mayor o igual a minEnd en el mismo tiempo
+  if (newTime === endTime.value && newValue >= minEnd.value) {
+    nextTick(() => {
+      isIncrementing.value = false
+    })
+    return
+  }
+
+  // Obtener el último minuto del tiempo actual desde el array
+  if (startTime.value === '1') {
+    const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+    if (firstHalfMinutes.length > 0) {
+      const lastMinute = firstHalfMinutes[firstHalfMinutes.length - 1]
+      if (newValue > lastMinute.minute) {
+        // Si se pasa del último minuto del primer tiempo, cambiar al segundo tiempo
+        newTime = '2'
+        timeChanged = true
+        const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+        if (secondHalfMinutes.length > 0) {
+          const firstMinute = secondHalfMinutes[0]
+          newValue = firstMinute.minute
+        }
+      }
+    }
+  } else if (startTime.value === '2') {
+    const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+    if (secondHalfMinutes.length > 0) {
+      const lastMinute = secondHalfMinutes[secondHalfMinutes.length - 1]
+      if (newValue > lastMinute.minute) {
+        newValue = lastMinute.minute
+      }
+    }
+  }
+
+  // Validar que el nuevo tiempo no sea mayor que el tiempo final
+  if (parseInt(newTime) > parseInt(endTime.value)) {
+    // Si el nuevo tiempo es mayor, ajustar el tiempo final
+    endTime.value = newTime
+    isManualTimeChange.value = true
+
+    // Ajustar también el minuto final si es necesario
+    if (newTime === '1') {
+      const firstHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 1)
+      if (firstHalfMinutes.length > 0) {
+        const lastMinute = firstHalfMinutes[firstHalfMinutes.length - 1]
+        if (minEnd.value < newValue) {
+          minEnd.value = lastMinute.minute
+        }
+      }
+    } else if (newTime === '2') {
+      const secondHalfMinutes = timelineMinutes.value.filter((m) => m.match_lapse === 2)
+      if (secondHalfMinutes.length > 0) {
+        const lastMinute = secondHalfMinutes[secondHalfMinutes.length - 1]
+        if (minEnd.value < newValue) {
+          minEnd.value = lastMinute.minute
+        }
+      }
+    }
+  }
+
+  // Actualizar posición y valores de manera síncrona
+  const startIndex = timelineMinutes.value.findIndex(
+    (m) => m.minute === newValue && m.match_lapse === parseInt(newTime),
+  )
+
+  if (startIndex !== -1) {
+    // Actualizar todo de manera síncrona
+    leftHandlePosition.value = startIndex
+    minStart.value = newValue
+
+    if (timeChanged) {
+      startTime.value = newTime
+      isManualTimeChange.value = true
+    }
+
+    // Actualizar el ancho del rango inmediatamente
+    updateRangeWidth()
+  }
+
+  // Resetear la bandera después de un pequeño delay
+  nextTick(() => {
+    isIncrementing.value = false
+  })
+}
+</script>
+
+<template>
+  <div
+    class="timeline"
+    ref="timelineRef"
+    :class="{ 'is-dragging': isDragging }"
+    :style="{ width: `${containerWidth}px` }"
+  >
+    <!-- Encabezado con inputs para el rango manual -->
+    <div
+      class="timeline-header responsive-header"
+      v-if="false"
+      :class="{
+        'small-screen': containerWidth < 470,
+        'very-small-screen': containerWidth < 420,
+        'extra-small-screen': containerWidth < 370,
+        'mobile-column': containerWidth < 500,
+        'tablet-layout': containerWidth < 800,
+        'mobile-layout': containerWidth < 580,
+      }"
+    >
+      <div class="header-row">
+        <span class="header-title">Considerar eventos del </span>
+      </div>
+      <div class="header-row controls-row">
+        <select v-model="startTime" class="time-select">
+          <option value="1">Primer tiempo</option>
+          <option value="2">Segundo tiempo</option>
+        </select>
+        <div class="input-wrapper">
+          <div class="input-container">
+            <span class="input-label">min</span>
+            <input
+              type="number"
+              v-model="minStart"
+              readonly
+              :min="
+                startTime === '1'
+                  ? timelineMinutes.filter((m) => m.match_lapse === 1)[0]?.minute || 0
+                  : timelineMinutes.filter((m) => m.match_lapse === 2)[0]?.minute || 45
+              "
+              :max="
+                startTime === '1'
+                  ? timelineMinutes.filter((m) => m.match_lapse === 1).slice(-1)[0]?.minute || 45
+                  : timelineMinutes.filter((m) => m.match_lapse === 2).slice(-1)[0]?.minute || 96
+              "
+            />
+            <div class="input-arrows">
+              <button class="arrow-up" @click="incrementMinStart">
+                <svg
+                  width="10"
+                  height="6"
+                  viewBox="0 0 10 6"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M1 5L5 1L9 5"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </button>
+              <button class="arrow-down" @click="decrementMinStart">
+                <svg
+                  width="10"
+                  height="6"
+                  viewBox="0 0 10 6"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M1 1L5 5L9 1"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+        <span class="to-text">al</span>
+        <select v-model="endTime" class="time-select">
+          <option value="1">Primer tiempo</option>
+          <option value="2">Segundo tiempo</option>
+        </select>
+        <div class="input-wrapper">
+          <div class="input-container">
+            <span class="input-label">min</span>
+            <input
+              type="number"
+              v-model="minEnd"
+              readonly
+              :min="
+                endTime === '1'
+                  ? timelineMinutes.filter((m) => m.match_lapse === 1)[0]?.minute || 0
+                  : timelineMinutes.filter((m) => m.match_lapse === 2)[0]?.minute || 45
+              "
+              :max="
+                endTime === '1'
+                  ? timelineMinutes.filter((m) => m.match_lapse === 1).slice(-1)[0]?.minute || 45
+                  : timelineMinutes.filter((m) => m.match_lapse === 2).slice(-1)[0]?.minute || 96
+              "
+            />
+            <div class="input-arrows">
+              <button class="arrow-up" @click="incrementMinEnd">
+                <svg
+                  width="10"
+                  height="6"
+                  viewBox="0 0 10 6"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M1 5L5 1L9 5"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </button>
+              <button class="arrow-down" @click="decrementMinEnd">
+                <svg
+                  width="10"
+                  height="6"
+                  viewBox="0 0 10 6"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M1 1L5 5L9 1"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Contenedor con scroll para móvil -->
+    <div class="timeline-container">
+      <!-- Scroll y flechas ocultos -->
+      <div class="timeline-scroll no-scrollbar" ref="scrollContainer" @scroll="checkScroll">
+        <div class="timeline-bar" :style="{ width: `${timelineWidth}px` }">
+          <!-- Círculos con logos de equipo -->
+          <div class="team-circle team-circle-top">
+            <img
+              :src="
+                props.isDefault
+                  ? 'https://golstatsimages.blob.core.windows.net/todoelfut/lineups/escudo1.png'
+                  : `https://golstatsimages.blob.core.windows.net/teams-80/${props.homeTeam}.png`
+              "
+              alt="Equipo local"
+            />
+          </div>
+          <div class="team-circle team-circle-bottom">
+            <img
+              :src="
+                props.isDefault
+                  ? 'https://golstatsimages.blob.core.windows.net/todoelfut/lineups/escudo2.png'
+                  : `https://golstatsimages.blob.core.windows.net/teams-80/${props.awayTeam}.png`
+              "
+              alt="Equipo visitante"
+            />
+          </div>
+
+          <!-- Línea de tiempo única -->
+          <div class="timeline-line">
+            <div class="line"></div>
+
+            <!-- Marcador inicial fijo (minuto 0) -->
+            <span
+              class="minute-ball minute-ball-initial minute-ball-center"
+              :style="{ left: getPositionByIndex(0) }"
+              >0'</span
+            >
+
+            <!-- Eventos -->
+            <template v-for="(minute, idx) in timelineMinutes">
+              <div
+                v-for="(event, idxEvent) in minute.event"
+                :key="'event-' + idx + '-' + idxEvent"
+                class="event"
+                :style="{
+                  left:
+                    idxEvent === 0
+                      ? getPositionByIndex(idx - 1.5)
+                      : getPositionByIndex(idx - 1.5 + idxEvent * 0.3),
+                }"
+              >
+                <span v-if="event?.team === 'local'" class="event-icon event-icon-top">
+                  <template v-if="event?.icon === 'icon-yellow-card'">
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <rect
+                        x="0.507812"
+                        y="0.375488"
+                        width="22.7873"
+                        height="22.8364"
+                        rx="11.3937"
+                        fill="none"
+                      />
+                      <rect
+                        x="8"
+                        y="7"
+                        width="6.8362"
+                        height="9.13458"
+                        rx="2.28119"
+                        fill="#F7C330"
+                      />
+                    </svg>
+                  </template>
+                  <template v-else-if="event?.icon === 'icon-red-card'">
+                    <svg
+                      width="23"
+                      height="23"
+                      viewBox="0 0 23 23"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <rect width="22.7873" height="22.8364" rx="11.3937" fill="none" />
+                      <rect
+                        x="8"
+                        y="7"
+                        width="6.8362"
+                        height="9.13458"
+                        rx="2.28119"
+                        fill="#E5152D"
+                      />
+                    </svg>
+                  </template>
+                  <template v-else-if="event?.icon === 'icon-goal'">
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 48 48"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <circle fill="none" cx="24" cy="24" r="24" />
+                      <ellipse fill="none" cx="24" cy="24" rx="14.82" ry="14.85" />
+                      <path
+                        fill="#fff"
+                        d="M24.03,36.05c-6.65,0-12.05-5.41-12.05-12.05s5.41-12.05,12.05-12.05,12.05,5.41,12.05,12.05-5.41,12.05-12.05,12.05Zm0-23.1c-6.1,0-11.05,4.96-11.05,11.05s4.96,11.05,11.05,11.05,11.05-4.96,11.05-11.05-4.96-11.05-11.05-11.05Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M27.22,29.38h-6.35c-.22,0-.41-.14-.48-.35l-1.96-6.06c-.07-.21,0-.43,.18-.56l5.14-3.74c.18-.13,.41-.13,.59,0l5.14,3.74c.17,.13,.25,.35,.18,.56l-1.96,6.06c-.07,.21-.26,.35-.48,.35Zm-5.99-1h5.62l1.74-5.37-4.55-3.32-4.55,3.32,1.74,5.37Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M24.06,15.71c-.07,0-.13-.01-.2-.04l-4.38-1.87c-.25-.11-.37-.4-.26-.66,.11-.25,.4-.37,.66-.26l4.18,1.78,4.18-1.78c.25-.11,.55,0,.66,.26,.11,.25,0,.55-.26,.66l-4.38,1.87c-.06,.03-.13,.04-.2,.04Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M12.62,25.37c-.12,0-.23-.04-.33-.12-.21-.18-.23-.5-.05-.71l2.99-3.44-.4-4.54c-.02-.27,.18-.52,.45-.54,.27-.03,.52,.18,.54,.45l.42,4.75c.01,.14-.03,.27-.12,.37l-3.12,3.6c-.1,.11-.24,.17-.38,.17Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M21.37,35.66c-.17,0-.34-.09-.43-.24l-2.34-3.91-4.43-1.02c-.27-.06-.44-.33-.38-.6s.33-.44,.6-.38l4.64,1.07c.13,.03,.25,.11,.32,.23l2.45,4.09c.14,.24,.06,.54-.17,.69-.08,.05-.17,.07-.26,.07Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M26.75,35.66c-.09,0-.18-.02-.26-.07-.24-.14-.31-.45-.17-.69l2.44-4.09c.07-.12,.18-.2,.32-.23l4.63-1.07c.27-.06,.54,.11,.6,.38s-.11,.54-.38,.6l-4.43,1.02-2.33,3.91c-.09,.16-.26,.24-.43,.24Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M35.5,25.37c-.14,0-.28-.06-.38-.17l-3.13-3.6c-.09-.1-.13-.24-.12-.37l.42-4.75c.02-.27,.27-.48,.54-.45,.28,.02,.48,.27,.45,.54l-.4,4.54,2.99,3.44c.18,.21,.16,.52-.05,.71-.09,.08-.21,.12-.33,.12Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M24.05,19.58c-.28,0-.5-.22-.5-.5v-3.87c0-.28,.22-.5,.5-.5s.5,.22,.5,.5v3.87c0,.28-.22,.5-.5,.5Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M29.21,23.47c-.18,0-.35-.1-.44-.26-.13-.24-.04-.55,.2-.68l3.17-1.7c.25-.13,.55-.04,.68,.2,.13,.24,.04,.55-.2,.68l-3.17,1.7c-.08,.04-.16,.06-.24,.06Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M29.2,31.57c-.14,0-.27-.06-.37-.17l-1.96-2.19c-.18-.21-.17-.52,.04-.71,.21-.18,.52-.17,.71,.04l1.96,2.19c.18,.21,.17,.52-.04,.71-.1,.09-.21,.13-.33,.13Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M18.91,31.57c-.12,0-.24-.04-.33-.13-.21-.18-.22-.5-.04-.71l1.96-2.19c.19-.21,.5-.22,.71-.04,.21,.18,.22,.5,.04,.71l-1.96,2.19c-.1,.11-.24,.17-.37,.17Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M18.93,23.32c-.07,0-.15-.02-.22-.05l-3.17-1.55c-.25-.12-.35-.42-.23-.67,.12-.25,.42-.35,.67-.23l3.17,1.55c.25,.12,.35,.42,.23,.67-.09,.18-.26,.28-.45,.28Z"
+                      />
+                    </svg>
+                  </template>
+                  <template v-else-if="event?.icon === 'icon-change'">
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 48 48"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <circle fill="none" cx="24" cy="24" r="24" />
+                      <path
+                        fill="#fff"
+                        d="M31.62,23.86c-.19,0-.37-.07-.52-.21-.3-.29-.31-.76-.03-1.06l2.89-3.04-2.89-3.04c-.29-.3-.27-.77,.03-1.06,.3-.29,.77-.27,1.06,.03l3.39,3.56c.28,.29,.28,.74,0,1.03l-3.39,3.56c-.15,.15-.34,.23-.54,.23Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M34.99,20.31H16.37c-.41,0-.75-.34-.75-.75s.34-.75,.75-.75h18.62c.41,0,.75,.34,.75,.75s-.34,.75-.75,.75Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M16.38,32.75c-.2,0-.4-.08-.54-.23l-3.38-3.56c-.28-.29-.28-.74,0-1.03l3.38-3.56c.28-.3,.76-.31,1.06-.03,.3,.29,.31,.76,.03,1.06l-2.89,3.04,2.89,3.04c.29,.3,.27,.78-.03,1.06-.15,.14-.33,.21-.52,.21Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M31.62,29.19H13c-.41,0-.75-.34-.75-.75s.34-.75,.75-.75H31.62c.41,0,.75,.34,.75,.75s-.34,.75-.75,.75Z"
+                      />
+                    </svg>
+                  </template>
+                  <span v-else :class="event?.icon"></span>
+                </span>
+                <span class="minute-ball minute-ball-center"
+                  >{{ event?.minuteLabel || minute.minute }}'</span
+                >
+                <span v-if="event?.team === 'visitante'" class="event-icon event-icon-bottom">
+                  <template v-if="event?.icon === 'icon-yellow-card'">
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <rect
+                        x="0.507812"
+                        y="0.375488"
+                        width="22.7873"
+                        height="22.8364"
+                        rx="11.3937"
+                        fill="none"
+                      />
+                      <rect
+                        x="8"
+                        y="7"
+                        width="6.8362"
+                        height="9.13458"
+                        rx="2.28119"
+                        fill="#F7C330"
+                      />
+                    </svg>
+                  </template>
+                  <template v-else-if="event?.icon === 'icon-red-card'">
+                    <svg
+                      width="23"
+                      height="23"
+                      viewBox="0 0 23 23"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <rect width="22.7873" height="22.8364" rx="11.3937" fill="none" />
+                      <rect
+                        x="8"
+                        y="7"
+                        width="6.8362"
+                        height="9.13458"
+                        rx="2.28119"
+                        fill="#E5152D"
+                      />
+                    </svg>
+                  </template>
+                  <template v-else-if="event?.icon === 'icon-goal'">
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 48 48"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <circle fill="none" cx="24" cy="24" r="24" />
+                      <ellipse fill="none" cx="24" cy="24" rx="14.82" ry="14.85" />
+                      <path
+                        fill="#fff"
+                        d="M24.03,36.05c-6.65,0-12.05-5.41-12.05-12.05s5.41-12.05,12.05-12.05,12.05,5.41,12.05,12.05-5.41,12.05-12.05,12.05Zm0-23.1c-6.1,0-11.05,4.96-11.05,11.05s4.96,11.05,11.05,11.05,11.05-4.96,11.05-11.05-4.96-11.05-11.05-11.05Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M27.22,29.38h-6.35c-.22,0-.41-.14-.48-.35l-1.96-6.06c-.07-.21,0-.43,.18-.56l5.14-3.74c.18-.13,.41-.13,.59,0l5.14,3.74c.17,.13,.25,.35,.18,.56l-1.96,6.06c-.07,.21-.26,.35-.48,.35Zm-5.99-1h5.62l1.74-5.37-4.55-3.32-4.55,3.32,1.74,5.37Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M24.06,15.71c-.07,0-.13-.01-.2-.04l-4.38-1.87c-.25-.11-.37-.4-.26-.66,.11-.25,.4-.37,.66-.26l4.18,1.78,4.18-1.78c.25-.11,.55,0,.66,.26,.11,.25,0,.55-.26,.66l-4.38,1.87c-.06,.03-.13,.04-.2,.04Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M12.62,25.37c-.12,0-.23-.04-.33-.12-.21-.18-.23-.5-.05-.71l2.99-3.44-.4-4.54c-.02-.27,.18-.52,.45-.54,.27-.03,.52,.18,.54,.45l.42,4.75c.01,.14-.03,.27-.12,.37l-3.12,3.6c-.1,.11-.24,.17-.38,.17Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M21.37,35.66c-.17,0-.34-.09-.43-.24l-2.34-3.91-4.43-1.02c-.27-.06-.44-.33-.38-.6s.33-.44,.6-.38l4.64,1.07c.13,.03,.25,.11,.32,.23l2.45,4.09c.14,.24,.06,.54-.17,.69-.08,.05-.17,.07-.26,.07Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M26.75,35.66c-.09,0-.18-.02-.26-.07-.24-.14-.31-.45-.17-.69l2.44-4.09c.07-.12,.18-.2,.32-.23l4.63-1.07c.27-.06,.54,.11,.6,.38s-.11,.54-.38,.6l-4.43,1.02-2.33,3.91c-.09,.16-.26,.24-.43,.24Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M35.5,25.37c-.14,0-.28-.06-.38-.17l-3.13-3.6c-.09-.1-.13-.24-.12-.37l.42-4.75c.02-.27,.27-.48,.54-.45,.28,.02,.48,.27,.45,.54l-.4,4.54,2.99,3.44c.18,.21,.16,.52-.05,.71-.09,.08-.21,.12-.33,.12Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M24.05,19.58c-.28,0-.5-.22-.5-.5v-3.87c0-.28,.22-.5,.5-.5s.5,.22,.5,.5v3.87c0,.28-.22,.5-.5,.5Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M29.21,23.47c-.18,0-.35-.1-.44-.26-.13-.24-.04-.55,.2-.68l3.17-1.7c.25-.13,.55-.04,.68,.2,.13,.24,.04,.55-.2,.68l-3.17,1.7c-.08,.04-.16,.06-.24,.06Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M29.2,31.57c-.14,0-.27-.06-.37-.17l-1.96-2.19c-.18-.21-.17-.52,.04-.71,.21-.18,.52-.17,.71,.04l1.96,2.19c.18,.21,.17,.52-.04,.71-.1,.09-.21,.13-.33,.13Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M18.91,31.57c-.12,0-.24-.04-.33-.13-.21-.18-.22-.5-.04-.71l1.96-2.19c.19-.21,.5-.22,.71-.04,.21,.18,.22,.5,.04,.71l-1.96,2.19c-.1,.11-.24,.17-.37,.17Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M18.93,23.32c-.07,0-.15-.02-.22-.05l-3.17-1.55c-.25-.12-.35-.42-.23-.67,.12-.25,.42-.35,.67-.23l3.17,1.55c.25,.12,.35,.42,.23,.67-.09,.18-.26,.28-.45,.28Z"
+                      />
+                    </svg>
+                  </template>
+                  <template v-else-if="event?.icon === 'icon-change'">
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 48 48"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <circle fill="none" cx="24" cy="24" r="24" />
+                      <path
+                        fill="#fff"
+                        d="M31.62,23.86c-.19,0-.37-.07-.52-.21-.3-.29-.31-.76-.03-1.06l2.89-3.04-2.89-3.04c-.29-.3-.27-.77,.03-1.06,.3-.29,.77-.27,1.06,.03l3.39,3.56c.28,.29,.28,.74,0,1.03l-3.39,3.56c-.15,.15-.34,.23-.54,.23Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M34.99,20.31H16.37c-.41,0-.75-.34-.75-.75s.34-.75,.75-.75h18.62c.41,0,.75,.34,.75,.75s-.34,.75-.75,.75Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M16.38,32.75c-.2,0-.4-.08-.54-.23l-3.38-3.56c-.28-.29-.28-.74,0-1.03l3.38-3.56c.28-.3,.76-.31,1.06-.03,.3,.29,.31,.76,.03,1.06l-2.89,3.04,2.89,3.04c.29,.3,.27,.78-.03,1.06-.15,.14-.33,.21-.52,.21Z"
+                      />
+                      <path
+                        fill="#fff"
+                        d="M31.62,29.19H13c-.41,0-.75-.34-.75-.75s.34-.75,.75-.75H31.62c.41,0,.75,.34,.75,.75s-.34,.75-.75,.75Z"
+                      />
+                    </svg>
+                  </template>
+                  <span v-else :class="event?.icon"></span>
+                </span>
+              </div>
+            </template>
+            <!-- Marcador final (después de los eventos) -->
+            <span
+              class="minute-ball minute-ball-edge minute-ball-center"
+              :style="{ left: getPositionByIndex(timelineMinutes.length - 1) }"
+              >{{ secondHalfEndMinute }}'</span
+            >
+
+            <!-- Indicador de rango verde (arrastrable) -->
+            <div
+              class="range-indicator"
+              :style="{ left: getPositionByIndex(leftHandlePosition), width: rangeWidth }"
+            >
+              <!-- Handle izquierdo -->
+              <div
+                class="handle left"
+                @mousedown="(e) => startDrag('left', e)"
+                @touchstart="(e) => startDrag('left', e)"
+              >
+                <svg
+                  width="10"
+                  height="6"
+                  viewBox="0 0 12 8"
+                  style="
+                    display: block;
+                    margin: 0 auto;
+                    position: relative;
+                    left: -4.3px;
+                    top: -5.5px;
+                  "
+                  fill="#bfcf4c"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <polygon points="6,8 0,0 12,0" />
+                </svg>
+                <div style="flex: 1"></div>
+                <svg
+                  width="10"
+                  height="6"
+                  viewBox="0 0 12 8"
+                  style="
+                    display: block;
+                    margin: 0 auto;
+                    position: relative;
+                    left: -4.3px;
+                    top: 5.5px;
+                    transform: rotate(180deg);
+                  "
+                  fill="#bfcf4c"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <polygon points="6,8 0,0 12,0" />
+                </svg>
+              </div>
+              <!-- Bolita izquierda -->
+              <span
+                class="range-dot range-dot-left"
+                @mousedown="(e) => startDrag('left', e)"
+                @touchstart="(e) => startDrag('left', e)"
+              ></span>
+              <!-- Línea de rango -->
+              <div class="range-line"></div>
+              <!-- Bolita derecha -->
+              <span
+                class="range-dot range-dot-right"
+                @mousedown="(e) => startDrag('right', e)"
+                @touchstart="(e) => startDrag('right', e)"
+              ></span>
+              <!-- Handle derecho -->
+              <div
+                class="handle right"
+                @mousedown="(e) => startDrag('right', e)"
+                @touchstart="(e) => startDrag('right', e)"
+              >
+                <svg
+                  width="10"
+                  height="6"
+                  viewBox="0 0 12 8"
+                  style="
+                    display: block;
+                    margin: 0 auto;
+                    position: relative;
+                    left: -4.3px;
+                    top: -5.5px;
+                  "
+                  fill="#bfcf4c"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <polygon points="6,8 0,0 12,0" />
+                </svg>
+                <div style="flex: 1"></div>
+                <svg
+                  width="10"
+                  height="6"
+                  viewBox="0 0 12 8"
+                  style="
+                    display: block;
+                    margin: 0 auto;
+                    position: relative;
+                    left: -4.3px;
+                    top: 5.5px;
+                    transform: rotate(180deg);
+                  "
+                  fill="#bfcf4c"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <polygon points="6,8 0,0 12,0" />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Botones de scroll ocultos -->
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.timeline {
+  border-radius: 8px;
+  font-family: Poppins;
+  margin: 0 auto;
+  transition: width 0.3s ease;
+  overflow: hidden;
+}
+
+.timeline-header {
+  color: #fff;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 50px;
+  font-family: Poppins;
+  font-size: 16px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: left;
+}
+
+.timeline-header span {
+  font-family: Poppins-Medium;
+  font-weight: 500;
+  margin-left: 25px;
+}
+
+.timeline-header.small-screen {
+  font-size: 14px;
+  gap: 8px;
+}
+
+.timeline-header.small-screen span {
+  font-size: 14px;
+}
+
+.timeline-header.small-screen .input-wrapper input {
+  width: 45px;
+  height: 28px;
+  font-size: 12px;
+}
+
+.timeline-header.very-small-screen {
+  font-size: 12px;
+  gap: 4px;
+}
+
+.timeline-header.very-small-screen span {
+  font-size: 12px;
+}
+
+.timeline-header.very-small-screen .input-wrapper input {
+  width: 40px;
+  height: 24px;
+  font-size: 11px;
+}
+
+.timeline-header.extra-small-screen {
+  font-size: 11px;
+  gap: 2px;
+}
+
+.timeline-header.extra-small-screen span {
+  font-size: 11px;
+}
+
+.timeline-header.extra-small-screen .input-wrapper input {
+  width: 35px;
+  height: 22px;
+  font-size: 10px;
+}
+
+.timeline-header.extra-small-screen .to-text {
+  margin-left: 10px;
+  margin-top: 1px;
+}
+
+.timeline-header .to-text {
+  margin-left: 7px;
+  margin-right: 7px;
+  color: #fff;
+  font-family: Poppins-Medium;
+  font-size: 16px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: left;
+}
+
+.timeline-header.very-small-screen .to-text {
+  margin-left: 25px;
+  margin-top: 2px;
+  font-size: 12px;
+}
+
+.timeline-header.extra-small-screen .to-text {
+  margin-left: 30px;
+  margin-top: 1px;
+  font-size: 11px;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 85px;
+  height: 31px;
+  border-radius: 4px;
+  background: transparent;
+}
+
+.input-label {
+  position: absolute;
+  left: -20px;
+  color: rgba(255, 255, 255, 0.7);
+  font-family: Poppins-Light !important;
+  font-size: 13px;
+  font-weight: 500;
+  pointer-events: none;
+}
+
+.timeline-header input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
+  font-family: Poppins-Medium;
+  font-size: 13px;
+  font-weight: 500;
+  padding-left: 25px;
+  padding-right: 25px;
+  -moz-appearance: textfield;
+  outline: none;
+  border: solid 1px #505a62;
+}
+
+.timeline-header input:focus {
+  outline: none;
+  border: solid 1px #505a62;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+}
+
+.timeline-header input::-webkit-inner-spin-button,
+.timeline-header input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.input-arrows {
+  position: absolute;
+  right: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  z-index: 1;
+}
+
+.input-arrows button {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: #bfcf4c;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 10px;
+  transition: color 0.2s ease;
+}
+
+.input-arrows button:hover {
+  color: #d4e35c;
+}
+
+.input-arrows button svg {
+  width: 10px;
+  height: 6px;
+}
+
+.timeline-header.small-screen .input-container {
+  width: 65px;
+  height: 28px;
+}
+
+.timeline-header.small-screen .input-label {
+  font-size: 12px;
+  left: 6px;
+}
+
+.timeline-header.small-screen input {
+  font-size: 12px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.timeline-header.very-small-screen .input-container {
+  width: 60px;
+  height: 24px;
+}
+
+.timeline-header.very-small-screen .input-label {
+  font-size: 11px;
+  left: 5px;
+}
+
+.timeline-header.very-small-screen input {
+  font-size: 11px;
+  padding-left: 18px;
+  padding-right: 18px;
+}
+
+.timeline-header.extra-small-screen .input-container {
+  width: 70px;
+  min-width: 65px;
+  height: 26px;
+}
+
+.timeline-header.extra-small-screen .input-label {
+  font-size: 11px;
+  left: 4px;
+}
+
+.timeline-header.extra-small-screen input {
+  font-size: 12px;
+  min-width: 40px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.timeline-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center; /* Centra horizontalmente */
+  width: 100%;
+  overflow: hidden;
+  height: 120px;
+  box-sizing: border-box;
+}
+
+.timeline-scroll {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+.timeline-bar {
+  position: relative;
+  height: 60px;
+  margin: 0 auto;
+  margin-left: 60px;
+  margin-top: 28px;
+  flex-shrink: 0;
+  transition: margin-left 0.3s ease;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+}
+
+.timeline-bar.has-scroll {
+  margin-left: 40px;
+}
+
+.scroll-arrow {
+  position: absolute;
+  top: 85%;
+  transform: translateY(-50%);
+  background: rgba(13, 29, 41, 0.8);
+  border: 1px solid #4b80ae;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #fff;
+  z-index: 10;
+  transition: all 0.2s ease;
+  margin: 0;
+  opacity: 1;
+}
+
+.scroll-left {
+  left: 0;
+}
+
+.scroll-right {
+  right: 0;
+}
+
+.scroll-arrow:hover {
+  background: rgba(13, 29, 41, 0.9);
+  border-color: #5b90be;
+}
+
+.line {
+  position: absolute;
+  top: 50%;
+  left: 48%;
+  width: 98%;
+  height: 2px;
+  background: #3a6081;
+  transform: translate(-50%, -50%);
+  border-radius: 2px;
+}
+.event {
+  position: absolute;
+  left: 0;
+  width: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 2;
+  margin-top: 30px;
+  transition: all 0.3s ease;
+}
+.event-first-half {
+  opacity: 1;
+}
+.event-second-half {
+  opacity: 1;
+}
+.minute-ball-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+}
+.event-icon-top {
+  position: absolute;
+  left: 50%;
+  top: calc(50% - 11px);
+  transform: translate(-50%, -100%);
+}
+.event-icon-bottom {
+  position: absolute;
+  left: 50%;
+  top: calc(50% + 11px);
+  transform: translate(-50%, 0);
+}
+.minute-ball {
+  width: 20px;
+  height: 20px;
+  border-radius: 33.3px;
+  border: solid 1px #4b80ae;
+  background-color: #0d1d29;
+  color: #fff;
+  display: flex;
+  font-family: poppins-Medium;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: bold;
+  margin: 0 auto;
+  transition: all 0.3s ease;
+}
+/* Ejemplo de iconos, reemplaza por tus propios SVG o clases */
+.icon-yellow-card {
+  width: 16px;
+  height: 16px;
+  background: yellow;
+  border-radius: 3px;
+  display: inline-block;
+  border: 1px solid #aaa;
+}
+.icon-goal {
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 50%;
+  display: inline-block;
+  border: 2px solid #0af;
+}
+.icon-red-card {
+  width: 16px;
+  height: 16px;
+  background: red;
+  border-radius: 3px;
+  display: inline-block;
+  border: 1px solid #aaa;
+}
+.icon-var {
+  width: 16px;
+  height: 16px;
+  background: #0af;
+  border-radius: 3px;
+  display: inline-block;
+  border: 1px solid #fff;
+}
+.icon-change {
+  width: 16px;
+  height: 16px;
+  background: #aaa;
+  border-radius: 50%;
+  display: inline-block;
+  border: 2px dashed #fff;
+}
+.range-indicator {
+  position: absolute;
+  top: 34%;
+  height: 20px;
+  cursor: pointer;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  left: 12px;
+  right: 12px;
+}
+.handle {
+  width: 1px;
+  height: 60px;
+  background: #bfcf4c;
+  cursor: pointer;
+  margin: 0 2px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2px 0;
+  touch-action: none;
+  user-select: none;
+  transition: background-color 0.2s ease;
+}
+
+.handle:hover {
+  background: #d4e35c;
+}
+
+.range-line {
+  flex: 1;
+  height: 2px;
+  background: #bfcf4c;
+  margin: 0 -2px;
+}
+.minute-ball-edge {
+  z-index: 4;
+  border: none;
+}
+.minute-ball-initial {
+  z-index: 2;
+  border: 1px solid #4b80ae;
+  background-color: #0d1d29;
+  color: #fff;
+  font-weight: bold;
+  font-size: 10px;
+}
+.minute-ball:not(.minute-ball-edge) {
+  border: solid 1px #4b80ae;
+}
+.range-dot {
+  position: absolute;
+  top: 50%;
+  width: 10px;
+  height: 10px;
+  border-radius: 33.3px;
+  border: solid 1px #bfcf4c;
+  background-color: #bfcf4c;
+  transform: translateY(-50%);
+  z-index: 10;
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+  transition: all 0.2s ease;
+}
+
+.range-dot:hover {
+  background: #d4e35c;
+  border-color: #d4e35c;
+  transform: translateY(-50%) scale(1.1);
+}
+
+.range-dot-left {
+  left: 0;
+  margin-left: 3px;
+  transform: translate(-50%, -50%);
+}
+
+.range-dot-left:hover {
+  background: #d4e35c;
+  border-color: #d4e35c;
+  transform: translate(-50%, -50%) scale(1.1);
+}
+
+.range-dot-right {
+  right: 0;
+  margin-right: 3px;
+  transform: translate(50%, -50%);
+}
+
+.range-dot-right:hover {
+  background: #d4e35c;
+  border-color: #d4e35c;
+  transform: translate(50%, -50%) scale(1.1);
+}
+
+/* Estilos para feedback visual durante el arrastre */
+.timeline.is-dragging {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.timeline.is-dragging * {
+  pointer-events: none;
+}
+
+.timeline.is-dragging .handle,
+.timeline.is-dragging .range-dot {
+  pointer-events: auto;
+  background: #d4e35c;
+  border-color: #d4e35c;
+  cursor: grabbing;
+}
+
+.timeline.is-dragging .range-line {
+  background: #d4e35c;
+}
+
+.team-circle {
+  position: absolute;
+  left: -27px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #0d1d29;
+  border: 1px solid #4b80ae;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+
+.team-circle img {
+  width: 14px;
+  height: 14px;
+  object-fit: contain;
+}
+
+.team-circle-top {
+  top: -5px;
+}
+
+.team-circle-bottom {
+  bottom: -5px;
+}
+
+.time-select {
+  width: 150px;
+  height: 31px;
+  border-radius: 4px;
+  border: solid 1px #505a62;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
+  font-family: Poppins-Medium;
+  font-size: 13px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: normal;
+  margin-right: 8px;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bfcf4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  background-size: 12px;
+  padding-right: 20px;
+  outline: none;
+}
+.time-select:focus {
+  outline: none;
+  border: solid 1px #505a62;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+}
+
+.time-select option {
+  background-color: #0d1d29;
+  color: #fff;
+}
+
+.timeline-header.small-screen .time-select {
+  width: 130px;
+  height: 28px;
+  font-size: 12px;
+}
+
+.timeline-header.very-small-screen .time-select {
+  width: 110px;
+  height: 24px;
+  font-size: 11px;
+  margin-right: 4px;
+}
+
+.timeline-header.extra-small-screen .time-select {
+  width: 100px;
+  height: 22px;
+  font-size: 10px;
+  margin-right: 2px;
+}
+
+.timeline-header.extra-small-screen .time-select option {
+  font-size: 10px;
+}
+
+.timeline-line {
+  position: relative;
+  height: 60px;
+  width: 100%;
+}
+
+/* Eliminar los estilos de las líneas separadas */
+.timeline-line.first-half,
+.timeline-line.second-half {
+  border: none;
+}
+
+/* Eliminar los estilos de los marcadores de minutos */
+.minute-marker {
+  display: none;
+}
+
+.time-separator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: rgba(191, 207, 76, 0.3);
+  z-index: 1;
+}
+
+.time-separator::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #bfcf4c;
+  opacity: 0.5;
+}
+
+/* Estilos para la escala de minutos */
+.minute-scale {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  pointer-events: none;
+}
+
+.minute-label {
+  font-size: 8px;
+  color: rgba(255, 255, 255, 0.5);
+  font-family: Poppins;
+  font-weight: 400;
+  white-space: nowrap;
+  background: rgba(13, 29, 41, 0.8);
+  padding: 1px 3px;
+  border-radius: 2px;
+  border: 1px solid rgba(75, 128, 174, 0.3);
+}
+
+.timeline-header.responsive-header {
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: 8px;
+}
+.header-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.timeline-header.mobile-column {
+  flex-direction: column !important;
+  align-items: center !important;
+  gap: 10px !important;
+  width: 100% !important;
+}
+.timeline-header.mobile-column .header-title {
+  text-align: center !important;
+  font-size: 16px !important;
+  margin: 0 !important;
+  width: 100% !important;
+}
+.timeline-header.mobile-column .header-row {
+  flex-direction: row !important;
+  align-items: center !important;
+  width: 100% !important;
+  gap: 8px !important;
+  justify-content: space-between !important;
+  padding: 0 10px !important;
+}
+.timeline-header.mobile-column .to-text {
+  margin: 0 !important;
+  font-size: 15px !important;
+  text-align: center !important;
+  flex-shrink: 0 !important;
+}
+.timeline-header.mobile-column .input-container {
+  width: 45% !important;
+  min-width: 80px !important;
+  height: 34px !important;
+  position: relative !important;
+  display: flex !important;
+  align-items: center !important;
+}
+.timeline-header.mobile-column input {
+  font-size: 15px !important;
+  min-width: 60px !important;
+  height: 34px !important;
+  padding-left: 25px !important;
+  padding-right: 10px !important;
+  width: 100% !important;
+}
+.timeline-header.mobile-column .input-label {
+  font-size: 13px !important;
+  left: -20px !important;
+  position: absolute !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  pointer-events: none !important;
+}
+.timeline-header.mobile-column .time-select {
+  width: 45% !important;
+  min-width: 120px !important;
+  max-width: none !important;
+  height: 34px !important;
+  font-size: 15px !important;
+  margin: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+.timeline-header.mobile-column .input-wrapper {
+  width: 45% !important;
+  display: flex !important;
+  justify-content: center !important;
+}
+@media (max-width: 470px) {
+  .timeline-header.responsive-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .header-row {
+    flex-direction: row;
+    width: 100%;
+    justify-content: flex-start;
+    gap: 6px;
+  }
+}
+@media (max-width: 420px) {
+  .timeline-header.responsive-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+  .header-row {
+    flex-direction: row;
+    width: 100%;
+    justify-content: flex-start;
+    gap: 4px;
+  }
+}
+@media (max-width: 370px) {
+  .timeline-header.responsive-header {
+    gap: 2px;
+  }
+  .header-row {
+    gap: 2px;
+  }
+}
+@media (max-width: 500px) {
+  .timeline-header.responsive-header {
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+  }
+  .header-row {
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    gap: 8px;
+  }
+  .timeline-header .to-text {
+    margin: 0 0 0 0;
+    font-size: 15px;
+    text-align: center;
+  }
+  .input-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .input-container {
+    width: 90px !important;
+    min-width: 80px;
+    height: 34px !important;
+    font-size: 15px;
+  }
+  .timeline-header input {
+    font-size: 15px !important;
+    min-width: 60px;
+    height: 34px;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .timeline-header .input-label {
+    font-size: 13px !important;
+    left: 2px;
+  }
+  .time-select {
+    width: 100% !important;
+    min-width: 120px;
+    max-width: 180px;
+    height: 34px !important;
+    font-size: 15px !important;
+    margin: 0 auto 0 auto;
+    display: block;
+  }
+}
+
+.timeline-header.small-screen .input-container {
+  width: 80px;
+  height: 30px;
+}
+.timeline-header.small-screen .input-label {
+  font-size: 13px;
+  left: 6px;
+}
+.timeline-header.small-screen input {
+  font-size: 13px;
+  min-width: 50px;
+  height: 30px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.timeline-header.small-screen .time-select {
+  width: 120px;
+  height: 30px;
+  font-size: 13px;
+}
+
+.timeline-header.very-small-screen .input-container {
+  width: 90px;
+  height: 32px;
+}
+.timeline-header.very-small-screen .input-label {
+  font-size: 14px;
+  left: 5px;
+}
+.timeline-header.very-small-screen input {
+  font-size: 14px;
+  min-width: 55px;
+  height: 32px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.timeline-header.very-small-screen .time-select {
+  width: 130px;
+  height: 32px;
+  font-size: 14px;
+}
+
+.timeline-header.extra-small-screen .input-container {
+  width: 100px;
+  min-width: 80px;
+  height: 36px;
+}
+.timeline-header.extra-small-screen .input-label {
+  font-size: 15px;
+  left: 4px;
+}
+.timeline-header.extra-small-screen input {
+  font-size: 15px;
+  min-width: 60px;
+  height: 36px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.timeline-header.extra-small-screen .time-select {
+  width: 140px;
+  height: 36px;
+  font-size: 15px;
+}
+
+.timeline-header.mobile-column {
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+.timeline-header.mobile-column .header-row {
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 8px;
+}
+.timeline-header.mobile-column .to-text {
+  margin: 0;
+  font-size: 15px;
+  text-align: center;
+}
+.timeline-header.mobile-column .input-container {
+  width: 50% !important;
+  min-width: 80px !important;
+  height: 34px !important;
+}
+.timeline-header.mobile-column input {
+  font-size: 15px !important;
+  min-width: 60px !important;
+  height: 34px !important;
+  padding-left: 10px !important;
+  padding-right: 10px !important;
+}
+.timeline-header.mobile-column .input-label {
+  font-size: 13px !important;
+  left: 2px !important;
+}
+.timeline-header.mobile-column .time-select {
+  width: 50% !important;
+  min-width: 120px !important;
+  max-width: 180px !important;
+  height: 34px !important;
+  font-size: 15px !important;
+  margin: 0 !important;
+}
+.timeline-header.mobile-column .input-wrapper {
+  width: 50% !important;
+  display: flex !important;
+  justify-content: center !important;
+}
+.timeline-header.mobile-column input {
+  font-size: 15px !important;
+  min-width: 60px !important;
+  height: 34px !important;
+  padding-left: 35px !important;
+  padding-right: 10px !important;
+  width: 100% !important;
+  outline: none !important;
+}
+.timeline-header.mobile-column input:focus {
+  outline: none !important;
+  border: solid 1px #505a62 !important;
+  box-shadow: none !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+}
+.timeline-header.mobile-column .input-label {
+  font-size: 13px !important;
+  left: -18px !important;
+  position: absolute !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  pointer-events: none !important;
+}
+.timeline-header.mobile-column .time-select:focus {
+  outline: none !important;
+  border: solid 1px #505a62 !important;
+  box-shadow: none !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+}
+
+/* Estilos para pantallas menores a 800px */
+.timeline-header.tablet-layout {
+  flex-direction: column !important;
+  align-items: center !important;
+  gap: 15px !important;
+  width: 100% !important;
+}
+
+.timeline-header.tablet-layout .header-title {
+  text-align: center !important;
+  font-size: 18px !important;
+  margin: 0 !important;
+  width: 100% !important;
+  order: 1 !important;
+}
+
+.timeline-header.tablet-layout .header-row {
+  flex-direction: row !important;
+  align-items: center !important;
+  width: 100% !important;
+  gap: 12px !important;
+  justify-content: center !important;
+  order: 2 !important;
+  flex-wrap: wrap !important;
+}
+
+.timeline-header.tablet-layout .to-text {
+  margin: 0 !important;
+  font-size: 16px !important;
+  text-align: center !important;
+  flex-shrink: 0 !important;
+}
+
+.timeline-header.tablet-layout .input-container {
+  width: 90px !important;
+  min-width: 80px !important;
+  height: 36px !important;
+  position: relative !important;
+  display: flex !important;
+  align-items: center !important;
+}
+
+.timeline-header.tablet-layout input {
+  font-size: 16px !important;
+  min-width: 60px !important;
+  height: 36px !important;
+  padding-left: 25px !important;
+  padding-right: 10px !important;
+  width: 100% !important;
+}
+
+.timeline-header.tablet-layout .input-label {
+  font-size: 14px !important;
+  left: -20px !important;
+  position: absolute !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  pointer-events: none !important;
+}
+
+.timeline-header.tablet-layout .time-select {
+  width: 160px !important;
+  min-width: 140px !important;
+  max-width: none !important;
+  height: 36px !important;
+  font-size: 16px !important;
+  margin: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+.timeline-header.tablet-layout .input-wrapper {
+  width: auto !important;
+  display: flex !important;
+  justify-content: center !important;
+}
+
+.timeline-header.tablet-layout input:focus {
+  outline: none !important;
+  border: solid 1px #505a62 !important;
+  box-shadow: none !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+}
+
+.timeline-header.tablet-layout .time-select:focus {
+  outline: none !important;
+  border: solid 1px #505a62 !important;
+  box-shadow: none !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+}
+
+/* Estilos para pantallas menores a 600px */
+.timeline-header.mobile-layout {
+  flex-direction: column !important;
+  align-items: center !important;
+  gap: 12px !important;
+  width: 100% !important;
+}
+
+.timeline-header.mobile-layout .header-title {
+  text-align: center !important;
+  font-size: 18px !important;
+  margin: 0 !important;
+  width: 100% !important;
+  order: 1 !important;
+}
+
+.timeline-header.mobile-layout .controls-row {
+  flex-direction: column !important;
+  gap: 8px !important;
+  align-items: center !important;
+  order: 2 !important;
+}
+
+.timeline-header.mobile-layout .controls-row .time-select:first-of-type,
+.timeline-header.mobile-layout .controls-row .input-wrapper:first-of-type {
+  order: 1 !important;
+}
+
+.timeline-header.mobile-layout .controls-row .to-text {
+  order: 2 !important;
+  margin: 0 !important;
+  font-size: 16px !important;
+  text-align: center !important;
+  flex-shrink: 0 !important;
+  width: 100% !important;
+}
+
+.timeline-header.mobile-layout .controls-row .time-select:last-of-type,
+.timeline-header.mobile-layout .controls-row .input-wrapper:last-of-type {
+  order: 3 !important;
+}
+
+.timeline-header.mobile-layout .header-row:first-of-type {
+  flex-direction: row !important;
+  align-items: center !important;
+  width: 100% !important;
+  gap: 12px !important;
+  justify-content: center !important;
+  order: 2 !important;
+}
+
+.timeline-header.mobile-layout .header-row:last-of-type {
+  flex-direction: row !important;
+  align-items: center !important;
+  width: 100% !important;
+  gap: 12px !important;
+  justify-content: center !important;
+  order: 3 !important;
+}
+
+.timeline-header.mobile-layout .to-text {
+  margin: 0 !important;
+  font-size: 16px !important;
+  text-align: center !important;
+  flex-shrink: 0 !important;
+}
+
+.timeline-header.mobile-layout .input-container {
+  width: 90px !important;
+  min-width: 80px !important;
+  height: 36px !important;
+  position: relative !important;
+  display: flex !important;
+  align-items: center !important;
+}
+
+.timeline-header.mobile-layout input {
+  font-size: 16px !important;
+  min-width: 60px !important;
+  height: 36px !important;
+  padding-left: 25px !important;
+  padding-right: 10px !important;
+  width: 100% !important;
+}
+
+.timeline-header.mobile-layout .input-label {
+  font-size: 14px !important;
+  left: -20px !important;
+  position: absolute !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  pointer-events: none !important;
+}
+
+.timeline-header.mobile-layout .time-select {
+  width: 160px !important;
+  min-width: 140px !important;
+  max-width: none !important;
+  height: 36px !important;
+  font-size: 16px !important;
+  margin: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+.timeline-header.mobile-layout .input-wrapper {
+  width: auto !important;
+  display: flex !important;
+  justify-content: center !important;
+}
+
+.timeline-header.mobile-layout input:focus {
+  outline: none !important;
+  border: solid 1px #505a62 !important;
+  box-shadow: none !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+}
+
+.timeline-header.mobile-layout .time-select:focus {
+  outline: none !important;
+  border: solid 1px #505a62 !important;
+  box-shadow: none !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+}
+
+.range-indicator,
+.handle,
+.range-dot {
+  display: none !important;
+}
+
+/* Ocultar scroll siempre */
+.timeline-scroll {
+  overflow-x: hidden !important;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.timeline-scroll::-webkit-scrollbar {
+  display: none !important;
+}
+
+.scroll-arrow {
+  display: none !important;
+}
+</style>