/* ============================================ */
/* 🔔 Banner de Notificaciones Push */
/* Estilos y animaciones para el banner flotante */
/* ============================================ */

/* Animación de entrada (desde abajo) */
@keyframes slideInUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Animación de salida (hacia abajo) */
@keyframes slideOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100px);
        opacity: 0;
    }
}

/* Hover effects para los botones del banner */
#push-notification-banner button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

#push-notification-banner button:active {
    transform: scale(0.98);
}

/* Responsive: en móviles, que ocupe más ancho */
@media (max-width: 768px) {
    #push-notification-banner {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        max-width: none !important;
    }
}