/* Sistema de notificaciones modal global - CSS */

/* Animaciones para iconos */
@keyframes drawIcon {
    0% {
        stroke-dasharray: 0 100;
    }
    100% {
        stroke-dasharray: 100 0;
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Efectos aplicables */
.modal-shake {
    animation: shake 0.5s ease-in-out;
}

.icon-pulse {
    animation: pulse 1s ease-in-out infinite;
}

/* Reducir animaciones para accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .modal-shake,
    .icon-pulse {
        animation: none;
    }
    
    @keyframes drawIcon {
        to { stroke-dasharray: 100 0; }
    }
}