/* PUXAR PRA RECARREGAR (23/10/2026), par do `static/js/puxar_recarrega.js`.
   Nas três camadas (app, hub, portal): todo token é `--pxr-*` e nasce aqui. */
.pxr {
  --pxr-y: 0px;
  --pxr-p: 0;
  --pxr-fundo: #fff;
  --pxr-ink: #0f6b5c;
  --pxr-borda: rgba(15, 23, 42, .08);
  --pxr-sombra: 0 6px 18px rgba(15, 23, 42, .18);
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) - 44px);
  z-index: 10050;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, var(--pxr-y));
}
@media (prefers-color-scheme: dark) {
  .pxr { --pxr-fundo: #1b2430; --pxr-ink: #5eead4; --pxr-borda: rgba(255, 255, 255, .1); --pxr-sombra: 0 6px 18px rgba(0, 0, 0, .5); }
}
.pxr.is-visivel { opacity: calc(.35 + var(--pxr-p) * .65); }
.pxr.is-voltando { transition: transform .22s ease, opacity .22s ease; }
.pxr.is-carregando { opacity: 1; transition: transform .18s ease; }

.pxr-bola {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pxr-fundo); color: var(--pxr-ink);
  border: 1px solid var(--pxr-borda); box-shadow: var(--pxr-sombra);
}
.pxr-seta { grid-area: 1 / 1; transform: rotate(calc(var(--pxr-p) * 180deg)); transition: transform .12s ease; }
.pxr.is-pronto .pxr-seta { transform: rotate(180deg); }
.pxr-gira { grid-area: 1 / 1; display: none; }
.pxr.is-carregando .pxr-seta { display: none; }
.pxr.is-carregando .pxr-gira { display: grid; place-items: center; }
.pxr-gira .av-escudo { width: 24px; }
/* sem o escudo (avisos.js ausente), um anel girando */
.pxr-gira:empty::before {
  content: ''; width: 20px; height: 20px; border-radius: 50%;
  border: 2.4px solid var(--pxr-borda); border-top-color: var(--pxr-ink);
  animation: pxr-gira .8s linear infinite;
}
@keyframes pxr-gira { to { transform: rotate(360deg); } }