@keyframes upFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes softFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card, .container-auth, .container-welcome {
    animation: upFadeIn 0.35s ease-out both;
}
.card ~ .card {
    animation-delay: 0.08s;
}

.btn-detalle, .btn-back, .btn-welcome, .logout-btn, .btn-primary {
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-detalle:hover, .btn-back:hover, .btn-welcome:hover, .logout-btn:hover, .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

table tbody tr {
    transition: background 0.15s ease;
}

.empty-state-icon {
    animation: upFadeIn 0.4s ease-out both;
}

#userMenu {
    animation: softFadeIn 0.15s ease-out both;
}
#vigentes, #vencidas {
    animation: upFadeIn 0.25s ease-out both;
}

/* Overlay de carga al navegar a detalle/documentos */
@keyframes spin { to { transform: rotate(360deg); } }

#loadingOverlay {
    position: fixed; inset: 0; z-index: 2000;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(2px);
}
#loadingOverlay.activo { display: flex; }
#loadingOverlay .spinner {
    width: 48px; height: 48px;
    border: 4px solid var(--y-accent-soft);
    border-top-color: var(--y-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}