/* ══════════════════════════════════════════════════════════
   ANIMATIONS.CSS — Keyframes y transiciones
   ══════════════════════════════════════════════════════════ */

@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse     { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes spin      { to { transform: rotate(360deg); } }

.animate-fade-in    { animation: fadeIn    0.3s ease; }
.animate-fade-in-up { animation: fadeInUp  0.35s ease; }
.animate-slide-left { animation: slideInLeft 0.3s ease; }

/* Badge "running" parpadeante */
.badge-running { animation: pulse 1.6s ease-in-out infinite; }

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, #e8f0eb 25%, #d4e2d8 50%, #e8f0eb 75%);
    background-size: 200% 100%;
    animation: skeleton-wave 1.4s ease-in-out infinite;
    border-radius: var(--radio);
}

@keyframes skeleton-wave {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}