/* ============================================================================
   BOTÕES DE VIDRO COM ESFERA (referências aprovadas pelo Robson, 02/11/2026)
   1) .pilula-esfera  = pílula de vidro escuro com esfera de ícone à esquerda (Contas em Dia: "Veja funcionando", "Baixar o e-book",
                        "Falar com o Doutor Conta"). Origem: contasemdia.plataformafacil.com.br (.btn.vidro, aprovado em 19/10/2026).
   2) .esfera-vidro   = esfera de vidro com ícone e rótulo embaixo (Hub, painel.plataformafacil.com.br: "Atualizar", "Recuperar").
   3) .pilula-seg     = seletor segmentado em pílula (cardapiozapzap.plataformafacil.com.br/comece: "Cadastrar meu negócio | Seja um vendedor").
   4) .link-seta      = "Abrir →" colorido (cards do Hub).
   Cor por função via --c (trio RGB): verde 18 183 106 · azul 26 115 255 · roxo 124 77 255 · âmbar 245 166 35 · vermelho 235 64 52.
   Respeita --brilho-botao (menu Aparência). Funciona nos 3 temas (a pílula é escura por natureza; no tema claro ganha sombra mais suave).
   Uso: <a class="pilula-esfera" style="--c:18 183 106"><span class="es"><svg>…</svg></span>Texto</a>
   ========================================================================== */
/* 1) PÍLULA COM ESFERA */
.pilula-esfera { --c: 18 183 106; display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 56px; padding: 7px 24px 7px 8px;
  font-family: inherit; font-weight: 800; font-size: 1rem; line-height: 1.1; color: #fff; text-decoration: none; cursor: pointer; border: 1.5px solid rgba(255,255,255,.5); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 45%), linear-gradient(180deg, rgb(var(--c) / .62), #0b1a22 130%), #0d2230;
  background-blend-mode: normal, normal, normal;
  box-shadow: 0 0 calc(10px + 18px * var(--brilho-botao, .35)) 2px rgb(var(--c) / calc(.25 + .3 * var(--brilho-botao, .35))), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -8px 12px rgba(0,0,0,.28), 0 10px 16px -8px rgba(0,0,0,.5);
  transition: transform .15s ease, filter .15s ease; }
.pilula-esfera .es { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1.5px solid rgba(255,255,255,.7);
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.55), rgba(255,255,255,.1) 52%, rgba(255,255,255,.04)), rgb(var(--c) / .4);
  box-shadow: inset 0 -4px 6px rgba(0,0,0,.25), 0 0 10px rgb(var(--c) / .5); }
.pilula-esfera .es svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pilula-esfera:hover { filter: brightness(1.1); transform: translateY(-2px); }
.pilula-esfera:active { transform: translateY(1px); filter: brightness(.96); }
.pilula-esfera:focus-visible, .esfera-vidro:focus-visible { outline: 3px solid #e2c48a; outline-offset: 3px; }
.pilula-esfera:disabled, .pilula-esfera[aria-disabled="true"] { filter: brightness(.7); cursor: not-allowed; }
.pilula-esfera.verde { --c: 18 183 106; } .pilula-esfera.azul { --c: 26 115 255; } .pilula-esfera.roxo { --c: 124 77 255; }
.pilula-esfera.ambar { --c: 245 166 35; color: #1b1300; } .pilula-esfera.ambar .es svg { stroke: #1b1300; } .pilula-esfera.vermelho { --c: 235 64 52; }
.pilula-esfera.sm { min-height: 44px; padding: 5px 18px 5px 6px; font-size: .92rem; } .pilula-esfera.sm .es { width: 32px; height: 32px; } .pilula-esfera.sm .es svg { width: 16px; height: 16px; }
.pilula-esfera.bloco { display: flex; width: 100%; }

/* 2) ESFERA DE VIDRO COM RÓTULO EMBAIXO (Hub) */
.esfera-vidro { --c: 26 115 255; display: inline-grid; justify-items: center; gap: 6px; width: 84px; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font-family: inherit; font-weight: 700; font-size: .78rem; line-height: 1.2; text-decoration: none; }
.esfera-vidro .es { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.55);
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.5), rgba(255,255,255,.06) 55%), radial-gradient(circle at 50% 100%, rgb(var(--c) / .9), rgb(var(--c) / .55) 70%), #0c1626;
  box-shadow: 0 0 calc(8px + 16px * var(--brilho-botao, .35)) rgb(var(--c) / calc(.3 + .3 * var(--brilho-botao, .35))), inset 0 -6px 10px rgba(0,0,0,.3), 0 8px 14px -8px rgba(0,0,0,.6); transition: transform .15s, filter .15s; }
.esfera-vidro .es svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.esfera-vidro:hover .es { transform: translateY(-2px); filter: brightness(1.12); } .esfera-vidro:active .es { transform: translateY(1px); }
.esfera-vidro.ambar { --c: 245 166 35; } .esfera-vidro.verde { --c: 18 183 106; } .esfera-vidro.roxo { --c: 124 77 255; } .esfera-vidro.vermelho { --c: 235 64 52; }

/* 3) SELETOR SEGMENTADO EM PÍLULA */
.pilula-seg { --c: 14 124 112; display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgb(var(--c) / .16); border: 2px solid rgba(255,255,255,.7); backdrop-filter: blur(8px); }
.pilula-seg > * { padding: 12px 24px; border: 0; border-radius: 999px; background: none; color: inherit; font-family: inherit; font-weight: 800; font-size: 1rem; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.pilula-seg > [aria-pressed="true"], .pilula-seg > .ativo { background: rgb(var(--c)); color: #fff; box-shadow: 0 6px 14px -6px rgb(var(--c) / .8); }

/* 4) LINK COM SETA */
.link-seta { --c: 245 166 35; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: rgb(var(--c)); text-decoration: none; }
.link-seta::after { content: "→"; transition: transform .15s; } .link-seta:hover::after { transform: translateX(4px); }
.link-seta.verde { --c: 18 183 106; }
@media (max-width: 520px) { .pilula-esfera.grande { display: flex; width: 100%; } }