/* Efecto de resaltado (glow) con pulsación */
@keyframes pulse-effect {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-5px) scale(1.02);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

/* Efecto de pulsación para botones */
@keyframes button-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Efecto de pulsación para botones success */
@keyframes success-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.pulse-button {
    position: relative;
    animation: button-pulse 1.5s ease-in-out infinite;
}

.pulse-button::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(218, 165, 32, 0.4);
    border-radius: inherit;
    animation: ripple 1.5s ease-in-out infinite;
    z-index: -1;
}

.pulse-success {
    position: relative;
    animation: success-pulse 1.5s ease-in-out infinite;
}

.pulse-success::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(40, 167, 69, 0.4);
    border-radius: inherit;
    animation: success-ripple 1.5s ease-in-out infinite;
    z-index: -1;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.15);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes success-ripple {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.15);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.pulse-button:hover,
.pulse-success:hover {
    animation-play-state: paused;
}

.pulse-button:hover::before,
.pulse-success:hover::before {
    animation-play-state: paused;
}

/* Mantener los colores originales en hover */
.btn-success.pulse-success:hover {
    background-color: #28a745 !important;
    color: white !important;
}

.box-glow-effect {
    position: relative;
    background: #6366f1;
    box-shadow: 0 0 20px rgba(78, 84, 200, 0.15);
    transition: all 0.3s ease;
    animation: pulse-effect 2s ease-in-out infinite;
    border: 2px solid transparent;
    background-clip: padding-box;
    color: white;
}

.box-glow-effect .badge {
    background-color: #ef4444 !important;
    color: white !important;
}

.box-glow-effect .text-dark-gray,
.box-glow-effect .text-base-color {
    color: white !important;
}

.box-glow-effect del {
    color: rgba(255, 255, 255, 0.7);
}

.box-glow-effect::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    z-index: -1;
    border-radius: 7px;
    background: linear-gradient(45deg, #4e54c8, #8f94fb);
}

.box-glow-effect:hover {
    animation-play-state: paused;
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(78, 84, 200, 0.25);
}