/* ============================================================
   BuscaEPI — Loader "Órbita" (SVG + CSS)
   Importado do design system (claude.ai/design a7ad11ad — pages/loader.html,
   variação 3 "Órbita"): a lupa do logotipo percorre um anel que se preenche
   em vermelho, sugerindo progresso sem porcentagem.

   Arquivo separado de main.css de propósito: telas standalone que usam
   blockPage() (relatórios popup, CalculoPrecoMedio, RegistrarSenhaColaborador)
   não carregam main.css. Tokens usam fallback para funcionar sem brand.css.

   Consumido pelo jQuery LoadingOverlay (js/scripts.js → blockPage/unblockPage).
   ============================================================ */

/* ── Lupa base (mesma anatomia do logotipo) ────────────────────── */
.be-lupa          { display: block; overflow: visible; }
.be-lupa__lens    { fill: #ffffff; }
.be-lupa__ring    { fill: none; stroke: var(--be-charcoal, #373435); stroke-width: 9; }
.be-lupa__handle  { stroke: var(--be-charcoal, #373435); stroke-width: 11; stroke-linecap: round; }

/* ── Órbita: anel de progresso + lupa girando sobre o traço ────── */
.be-load-orbit {
    position: relative;
    width: 130px;
    height: 130px;
    flex: 0 0 auto;
}

/* Só o SVG do anel gira -90deg (o arco passa a nascer às 12h).
   A lupa NÃO herda essa regra — por isso o seletor é a classe, não `svg`. */
.be-load-orbit__ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.be-load-orbit__track {
    fill: none;
    stroke: var(--be-line, #e9e6e7);
    stroke-width: 6;
}

.be-load-orbit__arc {
    fill: none;
    stroke: var(--be-red, #b22d30);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 251; /* 2πr, r=40 */
    stroke-dashoffset: 251;
    animation: be-orbitarc 2.4s cubic-bezier(0.5, 0.1, 0.4, 0.95) infinite;
}

@keyframes be-orbitarc {
    0%        { stroke-dashoffset: 251; }
    70%, 100% { stroke-dashoffset: 0; }
}

/* Braço invisível: gira em sincronia com o arco, levando a lupa na ponta. */
.be-load-orbit__arm {
    position: absolute;
    inset: 0;
    animation: be-orbitspin 2.4s cubic-bezier(0.5, 0.1, 0.4, 0.95) infinite;
}

@keyframes be-orbitspin {
    0%        { transform: rotate(0deg); }
    70%, 100% { transform: rotate(360deg); }
}

/* Centro da lente (40,40 de 100 → 16.8px em 42px) alinhado ao traço do
   anel: topo = 65 - 43.33 = 21.7px do container. */
.be-load-orbit__lupa {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 42px;
    height: 42px;
    margin-left: -17px;
}

/* ── Overlay de página (jQuery LoadingOverlay) ─────────────────── */
/* Aplicado via backgroundClass no LoadingOverlaySetup: o plugin cuida de
   posição/tamanho/fade, aqui fica só o acabamento visual do fundo. */
.be-load-backdrop {
    background: rgba(250, 249, 249, 0.86);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.be-load-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.be-load-box__msg {
    margin: 0;
    color: var(--be-ink-soft, #6b6769);
    font-family: var(--be-font, 'Figtree', sans-serif);
    font-size: 14.5px;
    font-weight: var(--be-fw-bold, 700);
    letter-spacing: -0.01em;
    text-align: center;
}

.be-load-box__dots::after {
    content: "";
    animation: be-loaddots 1.4s steps(4, end) infinite;
}

@keyframes be-loaddots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
}

/* ── Acessibilidade: movimento reduzido ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .be-load-orbit__arc,
    .be-load-orbit__arm    { animation-duration: 4s !important; }
    .be-load-box__dots::after { animation: none; content: "…"; }
}