@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes overlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes popIn {
    from { opacity: 0; transform: translateY(10px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes twinkle {
    0%, 40%, 60%, 100% { transform: scale(1); }
    50% { transform: scale(0); }
}

@keyframes notif-bounce {
    0%   { transform: translateY(100%); opacity: 0; }
    35%  { transform: translateY(-18%); opacity: 1; }
    55%  { transform: translateY(8%); }
    75%  { transform: translateY(-4%); }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes notif-salir {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(60px) scale(0.92); }
}

@keyframes notif-barra {
    from { width: 100%; }
    to   { width: 0%; }
}

@keyframes scanner-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(91, 141, 239, 0.3); }
    50%      { box-shadow: 0 0 0 12px rgba(91, 141, 239, 0); }
}

@keyframes scanner-laser {
    0%   { top: 0%; }
    50%  { top: 90%; }
    100% { top: 0%; }
}

@keyframes scanner-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ============ WIDGETS JIGGLE (Modo Edición iOS/Android) ============ */
@keyframes widget-jiggle {
    0%   { rotate: -0.28deg; }
    25%  { rotate: 0.25deg; }
    50%  { rotate: -0.22deg; }
    75%  { rotate: 0.28deg; }
    100% { rotate: -0.28deg; }
}

/* ============ DRAWER LATERAL DERECHO ============ */
@keyframes drawerSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0.7;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}