.notification-card {
    background-color: #f5f5f5; /* Blanco grisáceo suave */
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
    opacity: 1;
    transform: translateX(0);
    animation: slideIn 0.7s ease forwards;
}

.alert-success .icon-wrapper { background-color: rgba(34, 197, 94, 0.1) !important; }
.alert-error .icon-wrapper { background-color: rgba(239, 68, 68, 0.1) !important; }
.alert-warning .icon-wrapper { background-color: rgba(234, 179, 8, 0.1) !important; }
.alert-info .icon-wrapper { background-color: rgba(37, 99, 235, 0.1) !important; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes progress {
    from { width: 100% }
    to { width: 0% }
}

.progress-bar {
    animation: progress 10s linear forwards;
}