/* ════════════════════════════════════════════════════════
   BOTÃO-GAUGE  ·  estilo “o3-dash”  ·  versão final
   • herda diâmetro/hover de .scroll-btn
   • fundo transparente p/ arco visível
   • trilha dupla  • arco dégradé
   • halo alerta  • estado completo verde
   • rotação suave enquanto 0 < prog < 100
════════════════════════════════════════════════════════ */

.progress-btn{
    composes: scroll-btn;
    position:relative;
    width:3.15rem; height:3.15rem;
  
    background:transparent;                       /* arco visível     */
    border:var(--border-width) solid var(--gol-orange);
    color:#fff;
  
    /* leve anel externo + sombra profunda */
    box-shadow:
      0 0 0 2px rgba(255,112,8,.35),
      0 1px 2px rgba(0,0,0,.15) inset,
      0 2px 6px rgba(0,0,0,.25);
  }
  .progress-btn:hover{
    box-shadow:
      0 0 0 2px rgba(255,112,8,.35),
      0 0 4px 4px rgba(255,112,8,.25);
  }
  
  /* número no centro */
  .missing-count{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font:800 .9rem/1 'Inter',sans-serif;
    pointer-events:none;
    transition:opacity .15s ease,
                transform .35s cubic-bezier(.55,1.6,.45,.85);
  }
  .progress-btn.clicked .missing-count{ transform:scale(1.15); }
  
  /* anel circular -------------------------------------------------- */
  .prog-ring{ width:100%; height:100%; transform:rotate(-90deg); }
  
  /* trilha cinza */
  .prog-bg{
    fill:none;
    stroke:#e2e8f0;
    stroke-width:4;
  }
  
  /* trilha interna translúcida (clonada via JS) */
  .prog-bg-2{
    fill:none;
    stroke:rgba(255,255,255,.12);
    stroke-width:8;
  }
  
  /* arco de progresso (dégradé radial) */
  .prog-bar{
    fill:none;
    stroke:url(#progGradient);               /* defs injetado pelo JS */
    stroke-width:4;
    stroke-linecap:round;
    transition:stroke-dashoffset .35s cubic-bezier(.45,1.7,.35,1);
  }
  
  /* halo “urgente” – quando faltam ≤ 5 campos */
  .progress-btn.alert{
    box-shadow:
      0 0 0 2px rgba(255,112,8,.35),
      0 0 10px 4px rgba(255,112,8,.55);
  }
  
  /* estado completo (100 %) – fundo verde e arco branco */
  .progress-btn.complete{
    background:linear-gradient(145deg,#22c55e 0%,#16a34a 100%);
    border-color:#22c55e;
    color:#22c55e;
  }
  .progress-btn.complete .prog-bar{ stroke:#fff; }
  .progress-btn.complete::after{
    content:'';position:absolute;inset:0;border-radius:50%;
    box-shadow:0 0 8px 3px rgba(34,197,94,.55);pointer-events:none;
  }
  
  /* rotação suave enquanto parcial */
  @keyframes spin{
    0%  { transform:rotate(-90deg); }
    100%{ transform:rotate(270deg); }
  }
  .progress-btn.spinner .prog-ring{
    animation:spin 8s linear infinite;
  }
  
  /* opcional – esconde a UI horizontal antiga */
  .hide-old-progress .no-print:nth-of-type(1),
  .hide-old-progress .no-print:nth-of-type(2){
    display:none !important;
  }
  
  /* fallback: gradiente se o JS não injetar (não atrapalha) */
  svg defs#progGradient{ display:none; }
  


   /* ===== CONTÊINER & POSICIONAMENTO ===== */
#actionControls{
    position:fixed;
    top:50%; transform:translateY(-50%);
    inset-inline-start:var(--side-offset,1.0rem);
    inset-inline-end:  var(--side-offset,1.0rem);
    display:flex; justify-content:space-between;
    pointer-events:none;           /* cliques só nos botões */
    z-index:1999;                  /* logo abaixo dos scroll-btn */
  }
  
  .action-stack{
    display:flex; flex-direction:column;
    gap:.9rem;                      /* espaçamento vertical */
    pointer-events:auto;
  }
  
  /* oculta na impressão */
  @media print{ #actionControls{ display:none !important; } }
  

  /* ===== 1. Visual “GOL” unificado ===== */
.scroll-btn{
    width:3.15rem; height:3.15rem;
    display:flex; align-items:center; justify-content:center;
    font:900 1.3rem/1 'Inter',sans-serif;
    color:#fff;
    background:var(--gol-orange);
    border:var(--border-width) solid var(--gol-orange-dark);
    border-radius:50%;
    box-shadow:var(--shadow-sm);
    cursor:pointer;
    transition:background .15s,transform .15s,box-shadow .15s;
  }
  .scroll-btn:hover{ background:var(--gol-orange-dark); transform:translateY(-2px); box-shadow:var(--shadow-md); }
  .scroll-btn:active{ transform:translateY(0); box-shadow:var(--shadow-sm); }
  .scroll-btn:focus-visible{ outline:3px solid rgba(255,112,8,.35); outline-offset:2px; }
  
  /* ===== 2. Posicionamento inteligente ===== */
  #scrollControls{
    position:fixed;
    inset-inline:0;
    bottom:calc(3rem + env(safe-area-inset-bottom)); /* ↟ era 2rem – agora 3rem */
    display:flex; justify-content:space-between;
    pointer-events:none;
    z-index:2000;
  }
  #scrollToggle{ margin-left:1.0rem; pointer-events:auto; }
  .stack      { display:flex; flex-direction:column; gap:.8rem; margin-right:1.0rem; pointer-events:auto; }
  
  /* Oculta em impressão */
  @media print{ #scrollControls{ display:none !important; } }