@golstats/gsc-reports 1.0.73 → 1.0.74

package/src/components/elementsTemplates/FortalezasView.vue

@@ -0,0 +1,1193 @@
+<template>
+  <div class="fortalezas-view">
+    <div class="fortalezas-header">
+      <div class="team-logo-container">
+        <img
+          :src="computedTeamLogoUrl"
+          :alt="`Logo ${teamInitials}`"
+          class="team-logo"
+          @error="onLogoError"
+        />
+      </div>
+      <div class="header-content">
+        <h3 class="fortalezas-title">{{ title }}</h3>
+        <p class="fortalezas-description">
+          Este template contiene {{ totalFortalezas }} visualizaciones de Fortalezas. Selecciona las
+          deseadas.
+        </p>
+      </div>
+    </div>
+
+    <div class="fortalezas-container">
+      <!-- Categorías - Segmented control -->
+      <div class="categorias-tabs segmented">
+        <div
+          class="segmented-highlight"
+          :style="{
+            width: `calc(100% / ${categorias.length})`,
+            left: `calc(${categorias.indexOf(categoriaActiva)} * (100% / ${categorias.length}))`,
+          }"
+        ></div>
+        <button
+          v-for="categoria in categorias"
+          :key="categoria"
+          class="categoria-tab"
+          :class="{ active: categoriaActiva === categoria }"
+          @click="selectCategoria(categoria)"
+        >
+          {{ categoria }}
+        </button>
+      </div>
+
+      <!-- Lista de fortalezas -->
+      <div class="fortalezas-list">
+        <!-- Estado de carga -->
+        <div v-if="isLoading" class="loading-state">
+          <div class="loading-spinner"></div>
+          <p class="loading-text">Cargando fortalezas...</p>
+        </div>
+
+        <!-- Estado de error -->
+        <div v-else-if="error" class="error-state">
+          <p class="error-text">Error al cargar las fortalezas: {{ error }}</p>
+          <button @click="fetchFortalezas" class="retry-button">Reintentar</button>
+        </div>
+
+        <!-- Lista de fortalezas -->
+        <div
+          v-else
+          v-for="fortaleza in fortalezasFiltradas"
+          :key="fortaleza.id"
+          class="fortaleza-item"
+          :class="{
+            selected: selectedFortalezas.includes(fortaleza.id),
+            disabled:
+              !selectedFortalezas.includes(fortaleza.id) &&
+              selectedFortalezas.length >= totalFortalezas,
+          }"
+          @click="toggleFortaleza(fortaleza.id)"
+        >
+          <div
+            class="fortaleza-checkbox"
+            @click.stop="
+              !selectedFortalezas.includes(fortaleza.id) &&
+              selectedFortalezas.length >= totalFortalezas
+                ? null
+                : toggleFortaleza(fortaleza.id)
+            "
+          >
+            <input
+              type="checkbox"
+              :checked="selectedFortalezas.includes(fortaleza.id)"
+              :disabled="
+                !selectedFortalezas.includes(fortaleza.id) &&
+                selectedFortalezas.length >= totalFortalezas
+              "
+              class="checkbox-input"
+              @click.stop="
+                !selectedFortalezas.includes(fortaleza.id) &&
+                selectedFortalezas.length >= totalFortalezas
+                  ? null
+                  : toggleFortaleza(fortaleza.id)
+              "
+            />
+            <span v-if="selectedFortalezas.includes(fortaleza.id)" class="selection-number">
+              {{ selectionOrderMap[fortaleza.id] }}
+            </span>
+          </div>
+          <div class="fortaleza-badge">{{ fortaleza.value }}</div>
+          <div class="fortaleza-content">
+            <div class="fortaleza-name">{{ fortaleza.name }}</div>
+            <div class="fortaleza-ranking">
+              <span>{{ fortaleza.ranking }}</span>
+              <img
+                src="https://golstatsimages.blob.core.windows.net/golstats2-tournaments/1.png"
+                alt="Liga"
+                class="league-logo"
+                @error="onLeagueLogoError"
+              />
+              <div class="separator"></div>
+              <div class="category-indicator">
+                <div class="category-dot" :style="{ backgroundColor: fortaleza.color }"></div>
+                <span>{{ fortaleza.category }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer con contador y carrusel -->
+    <div class="fortalezas-footer">
+      <!-- Contador izquierdo - solo si hay fortalezas seleccionadas -->
+      <div v-if="selectedFortalezas.length > 0" class="counter-section">
+        <div class="counter-text">{{ selectedFortalezas.length }}/{{ totalFortalezas }}</div>
+      </div>
+
+      <!-- Carrusel derecho - solo si hay fortalezas seleccionadas -->
+      <div v-if="selectedFortalezas.length > 0" class="carousel-section">
+        <div class="carousel-container" ref="carouselContainerRef">
+          <button v-if="showLeftArrow" class="carousel-arrow left" @click="scrollLeft">‹</button>
+          <div class="carousel-track" ref="carouselTrackRef" :style="carouselTrackStyle">
+            <div
+              v-for="fortaleza in selectedFortalezasData"
+              :key="fortaleza.id"
+              class="footer-pill"
+            >
+              <div class="footer-badge">{{ fortaleza.value }}</div>
+              <div class="footer-content">
+                <div class="footer-name">{{ fortaleza.name }}</div>
+                <div class="footer-ranking">
+                  <span>{{ fortaleza.ranking }}</span>
+                  <img
+                    src="https://golstatsimages.blob.core.windows.net/golstats2-tournaments/1.png"
+                    alt="Liga"
+                    class="footer-league-logo"
+                    @error="onLeagueLogoError"
+                  />
+                  <div class="footer-separator"></div>
+                  <div class="footer-category-indicator">
+                    <div
+                      class="footer-category-dot"
+                      :style="{ backgroundColor: fortaleza.color }"
+                    ></div>
+                    <span>{{ fortaleza.category }}</span>
+                  </div>
+                </div>
+              </div>
+              <button class="pill-remove-btn" @click="removeFortaleza(fortaleza.id)">×</button>
+            </div>
+          </div>
+          <!-- Flecha derecha -->
+          <button v-if="showRightArrow" class="carousel-arrow right" @click="scrollRight">›</button>
+        </div>
+      </div>
+
+      <!-- Mensaje cuando no hay fortalezas seleccionadas - full width -->
+      <div v-else class="empty-message-full">
+        <span class="empty-text"
+          >{{ selectedFortalezas.length }} de {{ totalFortalezas }} Fortalezas agregadas</span
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
+
+const props = defineProps({
+  teamInitials: {
+    type: String,
+    default: 'CA',
+  },
+  title: {
+    type: String,
+    default: 'Fortalezas a favor de mi equipo',
+  },
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  teamLogoUrl: {
+    type: String,
+    required: false,
+    default: null,
+  },
+  seasonId: {
+    type: [String, Number],
+    required: true,
+  },
+  teamId: {
+    type: [String, Number],
+    required: true,
+  },
+  token: {
+    type: String,
+    required: true,
+  },
+  totalFortalezas: {
+    type: Number,
+    default: 15,
+  },
+  rivalTeamId: {
+    type: [String, Number],
+    required: false,
+    default: null,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+// Computed para generar la URL del logo basándose en teamId
+const computedTeamLogoUrl = computed(() => {
+  // Si se proporciona teamLogoUrl explícitamente, usarlo
+  if (props.teamLogoUrl) {
+    return props.teamLogoUrl
+  }
+  // Si no, generar la URL basándose en teamId
+  if (props.teamId) {
+    return `https://golstatsimages.blob.core.windows.net/teams-80/${props.teamId}.png`
+  }
+  // Fallback
+  return 'https://golstatsimages.blob.core.windows.net/teams-80/2.png'
+})
+
+// Fortalezas seleccionadas
+const selectedFortalezas = ref([...props.modelValue])
+const selectionOrderMap = reactive({})
+
+// Estados para la carga de datos
+const isLoading = ref(false)
+const error = ref(null)
+
+// Watch para sincronizar modelValue con selectedFortalezas
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    // Asegurarse de que sea un array válido
+    if (Array.isArray(newValue)) {
+      // Solo actualizar si hay cambios para evitar loops
+      const currentIds = JSON.stringify([...selectedFortalezas.value].sort())
+      const newIds = JSON.stringify([...newValue].sort())
+
+      if (currentIds !== newIds) {
+        selectedFortalezas.value = [...newValue]
+        // Reiniciar el mapa de orden
+        Object.keys(selectionOrderMap).forEach((key) => delete selectionOrderMap[key])
+        // Inicializar mapa de orden con las selecciones
+        selectedFortalezas.value.forEach((id, idx) => {
+          selectionOrderMap[id] = idx + 1
+        })
+      }
+    }
+  },
+  { immediate: true, deep: true },
+)
+
+// Carrusel de fortalezas seleccionadas
+const carouselScrollLeft = ref(0)
+const carouselContainerRef = ref(null)
+const carouselTrackRef = ref(null)
+const containerWidth = ref(0)
+const trackWidth = ref(0)
+
+// Medir tamaños para overflow
+function measureCarousel() {
+  const container = carouselContainerRef.value
+  const track = carouselTrackRef.value
+  containerWidth.value = container ? container.clientWidth : 0
+  trackWidth.value = track ? track.scrollWidth : 0
+}
+
+// Calcular overflow y mostrar flechas
+const maxScroll = computed(() => Math.max(0, trackWidth.value - containerWidth.value))
+
+const showLeftArrow = computed(() => carouselScrollLeft.value > 0)
+const showRightArrow = computed(() => carouselScrollLeft.value < maxScroll.value)
+
+// Función para scroll hacia la derecha
+function scrollRight() {
+  const next = Math.min(maxScroll.value, carouselScrollLeft.value + 200)
+  carouselScrollLeft.value = next
+}
+
+function scrollLeft() {
+  const next = Math.max(0, carouselScrollLeft.value - 200)
+  carouselScrollLeft.value = next
+}
+
+let carouselResizeHandler = null
+
+onMounted(() => {
+  measureCarousel()
+  const onResize = () => measureCarousel()
+  window.addEventListener('resize', onResize)
+  carouselResizeHandler = onResize
+  console.log('FetchFortalezas')
+  // Cargar fortalezas al montar el componente
+  fetchFortalezas()
+})
+
+onBeforeUnmount(() => {
+  if (carouselResizeHandler) {
+    window.removeEventListener('resize', carouselResizeHandler)
+    carouselResizeHandler = null
+  }
+})
+
+// Re-medir cuando cambia el contenido seleccionado
+watch(
+  () => selectedFortalezas.value.slice(),
+  async () => {
+    await nextTick()
+    measureCarousel()
+  },
+  { deep: true },
+)
+
+// Recargar fortalezas cuando cambien seasonId, teamId o token
+watch(
+  () => [props.seasonId, props.teamId, props.token],
+  () => {
+    fetchFortalezas()
+  },
+  { immediate: false },
+)
+
+// Datos de fortalezas seleccionadas ordenadas por número
+const selectedFortalezasData = computed(() => {
+  return selectedFortalezas.value
+    .map((id) => fortalezasData.value.find((f) => f.id === id))
+    .filter(Boolean)
+    .sort((a, b) => selectionOrderMap[a.id] - selectionOrderMap[b.id])
+})
+
+// Estilo del track del carrusel
+const carouselTrackStyle = computed(() => {
+  return {
+    transform: `translateX(-${carouselScrollLeft.value}px)`,
+  }
+})
+
+// Datos de fortalezas obtenidos del API (formato transformado para el componente)
+const fortalezasData = ref([])
+// Datos originales del API para enviar al endpoint
+const fortalezasRawData = ref([])
+
+// Función para obtener fortalezas desde el endpoint
+async function fetchFortalezas() {
+  if (!props.seasonId || !props.teamId) {
+    console.warn('seasonId y teamId son requeridos para obtener las fortalezas')
+    return
+  }
+
+  isLoading.value = true
+  error.value = null
+
+  try {
+    const url = `https://5c9xc3gwh2.execute-api.us-east-2.amazonaws.com/prod/strengths/seasons/${props.seasonId}/teams/${props.teamId}`
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        Authorization: `${props.token}`,
+        'Content-Type': 'application/json',
+      },
+    })
+
+    if (!response.ok) {
+      throw new Error(`Error al obtener fortalezas: ${response.status} ${response.statusText}`)
+    }
+
+    const data = await response.json()
+    console.log('data: ', data)
+
+    // Guardar los datos originales del API
+    fortalezasRawData.value = data.strengths || []
+
+    // Mapear los datos del API al formato esperado por el componente
+    fortalezasData.value = data.strengths.map((item) => ({
+      id: item.categories,
+      name: item.name,
+      value: item.total,
+      category:
+        item.category_type == 1 ? 'Ofensiva' : item.category_type == 2 ? 'Posesion' : 'Defensiva',
+      ranking: `#${item.league_ranking} en la liga`,
+      color: getCategoryColor(item.category_type || 'General'),
+    }))
+
+    // Actualizar categorías después de cargar los datos
+    updateCategorias()
+  } catch (err) {
+    console.error('Error al cargar fortalezas:', err)
+    error.value = err.message
+    // Mantener datos vacíos en caso de error
+    fortalezasData.value = []
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Función para obtener color según la categoría
+function getCategoryColor(category) {
+  const colorMap = {
+    1: '#4CAF50',
+    3: '#2196F3',
+    2: '#00BCD4',
+    General: '#9C27B0',
+  }
+  return colorMap[category] || '#9C27B0'
+}
+
+// Categorías dinámicas basadas en los datos del API
+const categorias = ref(['Todos'])
+const categoriaActiva = ref('Todos')
+
+// Actualizar categorías cuando se cargan los datos
+function updateCategorias() {
+  const uniqueCategories = [...new Set(fortalezasData.value.map((f) => f.category))]
+  categorias.value = ['Todos', ...uniqueCategories]
+}
+
+// Filtrar fortalezas por categoría
+const fortalezasFiltradas = computed(() => {
+  if (categoriaActiva.value === 'Todos') {
+    return fortalezasData.value
+  }
+  return fortalezasData.value.filter((f) => f.category === categoriaActiva.value)
+})
+
+function toggleFortaleza(fortalezaId) {
+  const index = selectedFortalezas.value.indexOf(fortalezaId)
+  if (index > -1) {
+    // deseleccionar: quitar del array y mantener números sin reordenar
+    selectedFortalezas.value.splice(index, 1)
+    delete selectionOrderMap[fortalezaId]
+  } else {
+    // Validar que no se exceda el máximo de visualizaciones permitidas
+    if (selectedFortalezas.value.length >= props.totalFortalezas) {
+      return // No permitir seleccionar más del máximo
+    }
+
+    // seleccionar: asignar el número más bajo disponible
+    const total = fortalezasData.value.length
+    const usedNumbers = new Set(Object.values(selectionOrderMap))
+
+    // encontrar el primer número disponible (1, 2, 3, ...)
+    let nextNumber = 1
+    while (usedNumbers.has(nextNumber) && nextNumber <= total) {
+      nextNumber++
+    }
+
+    selectionOrderMap[fortalezaId] = nextNumber
+    selectedFortalezas.value.push(fortalezaId)
+  }
+  emit('update:modelValue', selectedFortalezas.value)
+}
+
+function selectCategoria(categoria) {
+  categoriaActiva.value = categoria
+}
+
+function removeFortaleza(fortalezaId) {
+  const index = selectedFortalezas.value.indexOf(fortalezaId)
+  if (index > -1) {
+    selectedFortalezas.value.splice(index, 1)
+    delete selectionOrderMap[fortalezaId]
+    emit('update:modelValue', selectedFortalezas.value)
+  }
+}
+
+function autocompletar() {
+  const total = fortalezasData.value.length
+  const alreadySelected = new Set(selectedFortalezas.value)
+  const usedNumbers = new Set(Object.values(selectionOrderMap))
+
+  // números faltantes 1..total que no están usados
+  const missingNumbers = []
+  for (let n = 1; n <= total; n++) {
+    if (!usedNumbers.has(n)) missingNumbers.push(n)
+  }
+  // orden ascendente para asignar secuencialmente
+  missingNumbers.sort((a, b) => a - b)
+
+  // ids que faltan por seleccionar, en el orden ACTUAL visible (arriba -> abajo)
+  const remainingIds = fortalezasFiltradas.value
+    .map((f) => f.id)
+    .filter((id) => !alreadySelected.has(id))
+
+  // Calcular cuántos se pueden agregar sin exceder el máximo
+  const maxPermitido = props.totalFortalezas
+
+  for (const id of remainingIds) {
+    // Verificar que no se exceda el máximo
+    if (selectedFortalezas.value.length >= maxPermitido) {
+      break
+    }
+
+    const num = missingNumbers.shift()
+    if (num === undefined) break
+    selectionOrderMap[id] = num
+    selectedFortalezas.value.push(id)
+  }
+
+  emit('update:modelValue', selectedFortalezas.value)
+}
+
+function onLogoError() {
+  console.warn('Error loading team logo, falling back to initials')
+}
+
+function onLeagueLogoError() {
+  console.warn('Error loading league logo')
+}
+
+// Exponer función autocompletar para uso externo
+// Exponer datos para que el componente padre pueda acceder
+defineExpose({
+  fortalezasData,
+  fortalezasRawData,
+  selectedFortalezas,
+  selectionOrderMap,
+  autocompletar,
+})
+</script>
+
+<style scoped>
+.fortalezas-view {
+  width: 100%;
+}
+
+.fortalezas-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.team-logo-container {
+  width: 64px;
+  height: 64px;
+  border-radius: 12px;
+  background-color: rgba(255, 255, 255, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  flex-shrink: 0;
+}
+
+.team-logo {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+  object-fit: contain;
+  background: transparent;
+}
+
+.header-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.fortalezas-title {
+  font-family: Poppins-Medium;
+  font-size: 14px;
+  font-weight: 500;
+  opacity: 0.8;
+  color: #fff;
+  margin: 0;
+}
+
+.fortalezas-description {
+  font-family: Poppins-Regular;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.5);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.fortalezas-container {
+  border-radius: 8px;
+  border: solid 1px rgba(224, 231, 240, 0.3);
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 10px;
+}
+
+/* Segmented control styles */
+.categorias-tabs.segmented {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  border: 1px solid rgba(224, 231, 240, 0.3);
+  border-radius: 999px;
+  padding: 0;
+  overflow: hidden;
+}
+
+.segmented-highlight {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 999px;
+  border: 1px solid #cbee6b;
+  pointer-events: none;
+  transition:
+    left 220ms ease,
+    width 220ms ease;
+}
+
+.categorias-tabs.segmented .categoria-tab {
+  position: relative;
+  flex: 1 1 0;
+  background: transparent;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  padding: 8px 12px;
+  font-family: Poppins-Regular;
+  font-size: 12px;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.categorias-tabs.segmented .categoria-tab.active {
+  color: #fff;
+}
+
+.categorias-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.categoria-tab {
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: transparent;
+  color: rgba(255, 255, 255, 0.7);
+  font-family: Poppins-Regular;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.categoria-tab.active {
+  border-color: #cbee6b;
+  background: rgba(203, 238, 107, 0.1);
+  color: #cbee6b;
+}
+
+.categoria-tab:hover {
+  border-color: #cbee6b;
+  color: #cbee6b;
+}
+
+.fortalezas-list {
+  max-height: 260px;
+  overflow-y: auto;
+  margin-bottom: 20px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.3) #2e3b46;
+}
+
+.fortalezas-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.fortalezas-list::-webkit-scrollbar-track {
+  background: #2e3b46;
+  border-radius: 3px;
+}
+
+.fortalezas-list::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+}
+
+.fortaleza-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  margin-bottom: 8px;
+  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
+}
+
+/* Opacidad por defecto cuando no está seleccionado */
+.fortaleza-item :is(.fortaleza-name, .fortaleza-ranking, .fortaleza-badge) {
+  opacity: 0.7;
+}
+
+/* Al seleccionar se restaura a 1 */
+.fortaleza-item.selected :is(.fortaleza-name, .fortaleza-ranking, .fortaleza-badge) {
+  opacity: 1;
+}
+
+.fortaleza-item:last-child {
+  border-bottom: none;
+}
+
+.fortaleza-item.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.fortaleza-item.disabled .fortaleza-checkbox {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.fortaleza-item.disabled .checkbox-input {
+  cursor: not-allowed;
+}
+
+.fortaleza-item.selected {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.fortaleza-checkbox {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.checkbox-input {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.checkbox-input:checked {
+  background: #cbee6b;
+  border-color: #cbee6b;
+}
+
+.selection-number {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #000;
+  font-size: 12px;
+  font-weight: bold;
+  font-family: Poppins-Bold;
+  pointer-events: none;
+}
+
+.fortaleza-badge {
+  width: 54px;
+  height: 54px;
+  padding: 6px 8px;
+  box-shadow: 0 12.4px 49.8px 0 rgba(0, 0, 0, 0.08);
+  border-style: solid;
+  border-width: 1px;
+  border: 8px;
+  border-image-source: linear-gradient(
+    138deg,
+    rgba(255, 255, 255, 0.2) 2%,
+    rgba(255, 255, 255, 0.1) 14%,
+    rgba(255, 255, 255, 0) 77%,
+    rgba(255, 255, 255, 0.2) 100%
+  );
+  border-image-slice: 1;
+  background-blend-mode: color-dodge;
+  background-image:
+    linear-gradient(to bottom, rgba(50, 50, 50, 0), rgba(50, 50, 50, 0)),
+    linear-gradient(
+      138deg,
+      rgba(255, 255, 255, 0.2) 2%,
+      rgba(255, 255, 255, 0.1) 14%,
+      rgba(255, 255, 255, 0) 77%,
+      rgba(255, 255, 255, 0.2) 100%
+    );
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Poppins-SemiBold;
+  border-radius: 10.4px;
+  font-size: 20.7px;
+  font-weight: 600;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.fortaleza-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.fortaleza-name {
+  font-family: Poppins-Regular;
+  font-size: 13px;
+  color: #fff;
+  margin-bottom: 4px;
+  line-height: 1.3;
+}
+
+.fortaleza-ranking {
+  font-family: Poppins-Regular;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.6);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.league-logo {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  object-fit: contain;
+}
+
+.separator {
+  width: 1px;
+  height: 12px;
+  background-color: rgba(255, 255, 255, 0.3);
+  margin: 0 6px;
+}
+
+.category-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.category-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.category-indicator span {
+  font-family: Poppins-Regular;
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Footer con contador y carrusel */
+.fortalezas-footer {
+  display: flex;
+  gap: 16px;
+  margin-top: 20px;
+  width: 100%;
+}
+
+.counter-section {
+  width: 59px;
+  height: 68px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  padding: 12px;
+  border-radius: 8px;
+  border: solid 1px rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+.counter-text {
+  font-family: Poppins-Regular;
+  font-size: 12px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.33;
+  letter-spacing: 1.2px;
+  text-align: center;
+  color: #fff;
+}
+
+.carousel-section {
+  flex: 1;
+  width: 332px;
+  height: 72px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 16px;
+  border-radius: 8px;
+  position: relative;
+}
+
+.carousel-container {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.carousel-track {
+  display: flex;
+  gap: 8px;
+  transition: transform 0.3s ease;
+  min-width: max-content;
+  height: 100%;
+  align-items: center;
+  z-index: 1;
+}
+
+.footer-pill {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  background: rgba(255, 255, 255, 0.05);
+  flex-shrink: 0;
+  height: fit-content;
+  min-width: 250px;
+  position: relative;
+}
+
+.footer-pill:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.footer-pill .footer-badge {
+  width: 54px;
+  height: 54px;
+  padding: 6px 8px;
+  border-radius: 10.4px;
+  box-shadow: 0 12.4px 49.8px 0 rgba(0, 0, 0, 0.08);
+  border-image-slice: 1;
+  background-blend-mode: color-dodge;
+  background-image:
+    linear-gradient(to bottom, rgba(50, 50, 50, 0), rgba(50, 50, 50, 0)),
+    linear-gradient(
+      138deg,
+      rgba(255, 255, 255, 0.2) 2%,
+      rgba(255, 255, 255, 0.1) 14%,
+      rgba(255, 255, 255, 0) 77%,
+      rgba(255, 255, 255, 0.2) 100%
+    );
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Poppins-SemiBold;
+  font-size: 20.7px;
+  font-weight: 600;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.footer-pill .footer-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.footer-pill .footer-name {
+  font-family: Poppins-Medium;
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  margin-bottom: 4px;
+  line-height: 1.3;
+}
+
+.footer-pill .footer-ranking {
+  font-family: Poppins-Regular;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.6);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.footer-pill .footer-league-logo {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  object-fit: contain;
+}
+
+.footer-pill .footer-separator {
+  width: 1px;
+  height: 12px;
+  background-color: rgba(255, 255, 255, 0.3);
+  margin: 0 6px;
+}
+
+.footer-pill .footer-category-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.footer-pill .footer-category-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.footer-pill .footer-category-indicator span {
+  font-family: Poppins-Regular;
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.pill-remove-btn {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 18px;
+  font-weight: bold;
+  cursor: pointer;
+  padding: 0;
+  margin-left: auto;
+  line-height: 1;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+  width: 20px;
+  height: 20px;
+  margin-top: -40px;
+  margin-right: -8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pill-remove-btn:hover {
+  opacity: 1;
+  color: #fff;
+}
+
+.carousel-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: bold;
+  transition: all 0.2s ease;
+  z-index: 2;
+}
+
+.carousel-arrow:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.carousel-arrow.right {
+  right: 8px;
+}
+.carousel-arrow.left {
+  left: 8px;
+}
+
+.empty-message-full {
+  width: 100%;
+  height: 72px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 12px;
+  border-radius: 8px;
+  background-color: rgba(255, 255, 255, 0.05);
+  position: relative;
+}
+
+.empty-text {
+  font-family: Poppins-Regular;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
+  width: 100%;
+}
+
+/* Estados de carga y error */
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  gap: 16px;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-top: 3px solid #cbee6b;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-text {
+  font-family: Poppins-Regular;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.7);
+  margin: 0;
+}
+
+.error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  gap: 16px;
+}
+
+.error-text {
+  font-family: Poppins-Regular;
+  font-size: 14px;
+  color: #ff6b6b;
+  margin: 0;
+  text-align: center;
+}
+
+.retry-button {
+  background: #cbee6b;
+  color: #000;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-family: Poppins-Medium;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.retry-button:hover {
+  background: #b8d85a;
+}
+</style>