/* ==========================================================================
   BOTÕES
   .btn        primário (azul)
   .btn-g      fantasma (transparente com borda)
   .btn.busy   estado carregando (mostra .spin, esconde .arw)
   .arw        seta que desliza no hover
   As cores usam variáveis locais (--bg --fg --bd) para facilitar variações.
   ========================================================================== */
.btn{--bg:var(--interactive);--fg:#fff;--bd:var(--interactive);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:9px;font-size:var(--f-15);font-weight:600;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-base) var(--e-out),
             background var(--t-base) var(--e-out),border-color var(--t-base),color var(--t-base);
  box-shadow:0 1px 2px rgba(0,0,0,.22)}
.btn:hover{--bg:var(--interactive-hover);--bd:var(--interactive-hover);transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,77,184,.24)}
.btn:active{--bg:var(--interactive-active);transform:translateY(0) scale(.99);transition-duration:60ms}
.btn.busy{pointer-events:none;opacity:.72}

.btn-g{--bg:transparent;--fg:var(--text-1);--bd:var(--border-2);box-shadow:none}
.btn-g:hover{--bg:var(--bg-soft);--bd:var(--text-3);box-shadow:none}
.dark .btn-g,.deep .btn-g{--fg:#fff;--bd:var(--border-dark-2)}
.dark .btn-g:hover,.deep .btn-g:hover{--bg:rgba(255,255,255,.08);--bd:rgba(255,255,255,.42)}

.arw{transition:transform var(--t-base) var(--e-out);stroke-width:1.7}
.btn:hover .arw{transform:translateX(4px)}

.btn .spin{display:none;width:14px;height:14px;border:1.8px solid rgba(255,255,255,.32);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn.busy .spin{display:block}.btn.busy .arw{display:none}
@keyframes spin{to{transform:rotate(360deg)}}