.hover-button {
    background: #222;
    color: #fff;
    transition: transform 0.2s cubic-bezier(.4,2,.7,1), background 0.2s, color 0.2s;
}
.hover-button:hover {
    transform: scale(1.1);
    background: #4bbee7;
    color: #fff;
}

/* Hover para el badge verde (partidos y eventos) */
.hover-button:hover ~ .badge-green {
    transform: scale(1.1) translateX(7px);
    transition: transform 0.2s cubic-bezier(.4,2,.7,1);
    box-shadow: 0 0 20px #5FFF92, 0 0 5px #5FFF92;
}

/* Hover para el badge morado (timelines) */
.hover-button:hover ~ .badge-purple {
    transform: scale(1.1) translateX(7px);
    transition: transform 0.2s cubic-bezier(.4,2,.7,1);
    box-shadow: 0 0 20px #D059FF, 0 0 5px #D059FF;
}

/* Mantener los badges fijos y no interactuables */
.badge-green,
.badge-purple {
    pointer-events: none;
}

.hover-button.active-tab {
    background: #63C5DA;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}




/* Estilo para el botón activo */
.active-button {
    transform: scale(1.1); /* Mantén el tamaño agrandado */
    transition: transform 0.2s ease-in-out; /* Suaviza la transición */
    text-decoration: none !important; /* Elimina el subrayado por defecto */
    border-bottom: 2px solid white !important; /* Crea un subrayado más grueso */
    padding-bottom: 2px; /* Añade espacio entre el texto y la línea de subrayado */
}