/* ============================================================
   ANIMACIONES CENTRALIZADAS
   Inventario TX
   ============================================================
   Todos los keyframes del proyecto en un solo archivo.
   ============================================================ */

/* ── SALTO ──────────────────────────────────────────────
   Para botones de accion (proceder, confirmar)
   Uso: .saltando { animation: salto 0.6s ease; }
   ─────────────────────────────────────────────────────── */
@keyframes salto {
    0%, 100% { transform: translateY(0); }
    25%      { transform: translateY(-7px); }
    50%      { transform: translateY(0); }
    75%      { transform: translateY(-3px); }
}

/* ── DESLIZAR ENTRADA ───────────────────────────────────
   Para cards, items de lista, modales
   ─────────────────────────────────────────────────────── */
@keyframes deslizar-entrada {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── DESLIZAR NOTIFICACION ──────────────────────────────
   Para notificaciones toast que entran desde la derecha
   ─────────────────────────────────────────────────────── */
@keyframes deslizar-notificacion {
    from {
        opacity: 0;
        transform: translateX(110%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── DESLIZAR SALIDA ─────────────────────────────────────
   Para notificaciones toast que salen hacia la derecha
   ─────────────────────────────────────────────────────── */
@keyframes deslizar-salida {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(110%);
    }
}

/* ── PULSO ──────────────────────────────────────────────
   Para spinners de carga, iconos de estado
   ─────────────────────────────────────────────────────── */
@keyframes pulso {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.08); opacity: 0.7; }
}

/* ── PULSO_EXTENDIDO ─────────────────────────────────────
   Para botones con efecto de expansion
   ─────────────────────────────────────────────────────── */
@keyframes pulso-extendido {
    0% { box-shadow: 0 0 0 0 currentColor; }
    70% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── BRILLO ─────────────────────────────────────────────
   Efecto de barrido de luz en botones premium
   ─────────────────────────────────────────────────────── */
@keyframes brillo {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ── SKELETON ───────────────────────────────────────────
   Animacion de carga para placeholders
   ─────────────────────────────────────────────────────── */
@keyframes skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── APARECER ───────────────────────────────────────────
   Fade in simple
   ─────────────────────────────────────────────────────── */
@keyframes aparecer {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── APARECER_ESCALA ─────────────────────────────────────
   Fade in con escala (para modals y dropdowns)
   ─────────────────────────────────────────────────────── */
@keyframes aparecer-escala {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── GIRAR ──────────────────────────────────────────────
   Rotacion continua para spinners
   ─────────────────────────────────────────────────────── */
@keyframes girar {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── REBOTAR ───────────────────────────────────────────
   Indicador de scroll (flecha hacia abajo)
   ─────────────────────────────────────────────────────── */
@keyframes rebotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(10px); }
}

/* ── SACUDIR ────────────────────────────────────────────
   Para indicar error en campos de formulario
   ─────────────────────────────────────────────────────── */
@keyframes sacudir {
    0%, 100% { transform: translateX(0); }
    10%, 50%, 90% { transform: translateX(-5px); }
    30%, 70% { transform: translateX(5px); }
}

/* ── LEVANTAR ───────────────────────────────────────────
   Para hover en cards (elevacion)
   ─────────────────────────────────────────────────────── */
@keyframes levantar {
    0% { transform: translateY(0); box-shadow: var(--shadow-sm); }
    100% { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
}

/* ── CONTADOR ───────────────────────────────────────────
   Para animacion de numeros incrementando
   ─────────────────────────────────────────────────────── */
@keyframes contador {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── BADGE_PULSO ─────────────────────────────────────────
   Indicador de status activo (punto verde parpadeante)
   ─────────────────────────────────────────────────────── */
@keyframes badge-pulso {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* ── ESCALONAR_ENTRADA ───────────────────────────────────
   Para lista de items con entrada escalonada
   ─────────────────────────────────────────────────────── */
@keyframes escalar-entrada {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ── SPINNER_LINEA ──────────────────────────────────────
   Para spinner de carga con linea girando
   ─────────────────────────────────────────────────────── */
@keyframes spinner-linea {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── RIPPLE ─────────────────────────────────────────────
   Efecto de onda al hacer clic en botones
   ─────────────────────────────────────────────────────── */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* ── MODAL_BACKDROP ─────────────────────────────────────
   Fade in del backdrop del modal
   ─────────────────────────────────────────────────────── */
@keyframes modal-backdrop-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── MODAL_ENTRADA ─────────────────────────────────────
   Slide up + scale para modals
   ─────────────────────────────────────────────────────── */
@keyframes modal-entrada {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── TAB_ENTRADA ────────────────────────────────────────
   Fade in rapido para tabs
   ─────────────────────────────────────────────────────── */
@keyframes tab-entrada {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── GRADIENT_SHIFT ─────────────────────────────────────
   Cambio suave de gradiente (shimmer effect)
   ─────────────────────────────────────────────────────── */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── SPINNER_GIRAR ──────────────────────────────────────
   Spinner de tres puntos girando
   ─────────────────────────────────────────────────────── */
@keyframes spinner-girar {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* ── CLASES DE UTILIDAD ───────────────────────────────── */
.aparecer           { animation: aparecer var(--transition-normal) both; }
.deslizar-entrada   { animation: deslizar-entrada var(--transition-normal) both; }
.saltando           { animation: salto 0.6s ease; }
.girando            { animation: girar 1s linear infinite; }
.pulsando           { animation: pulso 1.5s ease-in-out infinite; }
.sacudiendo         { animation: sacudir 0.4s ease; }
.rebotando          { animation: rebotar 1.5s ease infinite; }
.escalar-entrada    { animation: escalar-entrada var(--transition-normal) both; }

/* Duraciones personalizables */
.deslizar-rapido    { animation-duration: var(--transition-fast) !important; }
.deslizar-lento     { animation-duration: var(--transition-slow) !important; }

/* Delays para entrada escalonada */
.delay-1  { animation-delay: 0.05s; }
.delay-2  { animation-delay: 0.10s; }
.delay-3  { animation-delay: 0.15s; }
.delay-4  { animation-delay: 0.20s; }
.delay-5  { animation-delay: 0.25s; }

/* Pausar animaciones */
.pausar             { animation-play-state: paused; }

/* ── REDUCE MOTION ──────────────────────────────────────
   Desactiva animaciones si el usuario prefiere movimiento reducido
   ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}