/* 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; */
    background-color: #ffc107 !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(103.75deg, #33B1EE, #7366FF);
}

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

/* Ajustes para dispositivos móviles */
@media (max-width: 576px) {
    .badge.bg-danger.fs-16 {
        font-size: 13px !important;
        padding: 6px 10px !important;
        text-align: center;
        display: block !important;
    }
}

/** INICIO - Efecto de resaltado (glow) con pulsación custom **/
.box-glow-effect-custom {
    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-custom .badge {
    /* background-color: #ef4444 !important; */
    background-color: #f76412 !important;
    color: white !important;
}

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

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

.box-glow-effect-custom::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    z-index: -1;
    border-radius: 7px;
    background: linear-gradient(103.75deg, #15191a , #5b6466);
}

.box-glow-effect-custom:hover {
    animation-play-state: paused;
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(78, 84, 200, 0.25);
}
/** FIN - Efecto de resaltado (glow) con pulsación custom **/

/** INICIO - Efecto de resaltado (glow) con pulsación en verde **/
.box-glow-effect-green {
    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-green .badge {
    /* background-color: #ef4444 !important; */
    background-color: #34E834 !important;
    color: white !important;
}

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

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

.box-glow-effect-green::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    z-index: -1;
    border-radius: 7px;
    background: linear-gradient(103.75deg, #15191a , #5b6466);
}

.box-glow-effect-green:hover {
    animation-play-state: paused;
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(78, 84, 200, 0.25);
}
/** FIN - Efecto de resaltado (glow) con pulsación en verde **/