html.puxar-atualizar-ativo,
html.puxar-atualizar-ativo body {
    overscroll-behavior-y: contain;
}

.puxar-atualizar {
    position: fixed;
    top: calc(var(--refresh-top, 0px) + 8px);
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--bs-border-color, #ddd);
    border-radius: 50%;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-primary, #16643d);
    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
    transform: translate(-50%, -60px);
    opacity: 0;
    pointer-events: none;
    z-index: 1025;
}

.puxar-atualizar.visivel {
    transform: translate(-50%, var(--refresh-distance, 0px));
    opacity: 1;
}

.puxar-atualizar-roda {
    transform: rotate(var(--refresh-angle, 0deg));
}

.puxar-atualizar.pronto {
    color: var(--bs-success, #198754);
}

.puxar-atualizar.a-atualizar .puxar-atualizar-roda {
    animation: puxar-atualizar-rodar .7s linear infinite;
}

@keyframes puxar-atualizar-rodar {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .puxar-atualizar.a-atualizar .puxar-atualizar-roda {
        animation: none;
    }
}