/* Animações customizadas */
@keyframes pulse-notification {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.notification-card {
    animation: pulse-notification 2s ease-in-out infinite;
}

/* Responsividade melhorada */
@media (max-width: 640px) {
    .container {
        padding: 1rem;
    }
    
    .notification-card {
        flex-direction: column;
        text-align: center;
    }
    
    .notification-card button {
        margin-top: 1rem;
        width: 100%;
    }
}

/* Estados de notificação */
.notification-urgent {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.notification-normal {
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}