/* FILE: wwwroot/css/features/pull-refresh.css
   PURPOSE: Indicador visual do gesto pull-to-refresh.
            Aparece acima da lista quando o utilizador puxa para baixo no topo da página.
   TOKENS:  --pe-atlantico (#0B4F6C), --pe-farol (#FFD166)
   AI-NOTE: Usa CSS custom properties --ptr-progress e --ptr-translate injectadas pelo JS.
            Só visível em mobile (touch). Display:none em desktop via media query. */

.ptr-indicator {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(calc(var(--ptr-translate, 0px) - 56px));
    z-index: 800;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0B4F6C;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: transform .15s ease, opacity .15s ease;

    @media (pointer: coarse) {
        display: flex;
    }
}

.ptr-indicator--active {
    opacity: calc(var(--ptr-progress, 0) * 1);
}

.ptr-indicator--ready {
    background: #FFD166;
}

.ptr-indicator__spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    transform: rotate(calc(var(--ptr-progress, 0) * 270deg));
    transition: transform .1s linear;
}

.ptr-indicator--loading .ptr-indicator__spinner {
    animation: ptr-spin .65s linear infinite;
    transform: none;
}

@keyframes ptr-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ptr-indicator__spinner { animation: none; }
}