/* ============================================================================
   BOTAO PADRAO DO ECOSSISTEMA — aprovado pelo Robson em 15/10/2026 (plataforma de eventos do SINFAC-SP).
   Vale em TODO app novo, nas duas formas: ESFERA (botao de acao com icone, rotulo embaixo) e RETANGULAR (botao esticado, com texto).
   O que muda entre as formas e so o formato; estilo, cor e comportamento sao os mesmos.

   REGRAS DO ESTILO
   1. COR SOLIDA e VIVA: azul e azul, verde e verde, vermelho e vermelho, amarelo e amarelo, roxo e roxo. Nada de cor morna/pastel/translucida.
   2. SEM reflexo branco (nada de mancha de luz no canto ou faixa clara no alto). O acabamento e so um degrade vertical leve, aro claro fino e sombra embaixo.
   3. HALO colorido em volta; a intensidade vem de --brilho-botao. Padrao SUAVE (.35). O app tem um seletor "Brilho dos botoes: Suave / Medio / Intenso"
      (dentro de Aparencia, junto de Tema, Botoes e Cores), salvo no navegador. O brilho mexe SO no halo, nunca na cor do botao.
   4. TEXTO do botao: SEM sombra e contraste legivel. O esticado tem a MESMA cor viva da esfera (variacao D, aprovada 15/10): letra branca, e azul-marinho (#0b1530) so no verde e no amarelo.
   5. Botao DESABILITADO: mesma cor, so mais escura, com o texto branco inteiro (nunca apagado/translucido).
   6. Botao neutro (sem funcao de cor): vidro transparente com aro claro e halo azul fraco; nunca cinza-azulado.
   7. Cor por funcao: azul = principal/navegar, verde = confirmar/aprovar, amarelo/ambar = atencao/imprimir, roxo = ver/comunicar, vermelho = encerrar/risco.
   8. Flat e "Estilo Sympla" (opcoes de Aparencia > Botoes) continuam existindo e tiram halo e relevo.
   9. Teste obrigatorio antes de entregar: varredura de contraste nos 3 temas (claro, moderado, escuro) e conferir no celular (390 px).
   Referencia viva: eventos-plataforma/app/public/css/base.css (fim do arquivo) e js/tema.js (seletor de brilho) e js/tema-boot.js.
   ========================================================================== */

:root { --brilho-botao: .35; }
html[data-brilho="medio"] { --brilho-botao: .65; }
html[data-brilho="vivo"]  { --brilho-botao: 1; }

/* ---------- ESFERA (icone dentro, rotulo embaixo) ---------- */
.btn-esfera { --sol: #1a73ff; display: inline-grid; justify-items: center; gap: 14px; width: 84px; border: 0; background: none; padding: 0; cursor: pointer;
  font: 600 12px/1.25 system-ui, sans-serif; text-align: center; text-decoration: none; color: var(--muted, #5b6785); }
.btn-esfera.azul { --sol: #1a73ff; } .btn-esfera.verde { --sol: #12b76a; } .btn-esfera.amarelo { --sol: #ffa400; }
.btn-esfera.roxo { --sol: #8b3dff; } .btn-esfera.vermelho { --sol: #ff3636; }
.btn-esfera .face { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  border: 2px solid rgba(255,255,255,.6);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sol) 92%, #fff), var(--sol) 52%, color-mix(in srgb, var(--sol) 84%, #000));
  box-shadow: 0 0 calc(8px + 20px * var(--brilho-botao)) calc(1px + 4px * var(--brilho-botao)) color-mix(in srgb, var(--sol) calc(35% + 55% * var(--brilho-botao)), transparent),
              inset 0 -6px 10px rgba(0,0,0,.2), 0 8px 14px -6px rgba(0,0,0,.45);
  transition: transform .12s, filter .15s; }
.btn-esfera .face svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.btn-esfera:hover .face { transform: translateY(-3px); filter: brightness(1.08); }
.btn-esfera:active .face { transform: translateY(1px); filter: brightness(.95); }
.btn-esfera[disabled] { cursor: not-allowed; }
.btn-esfera[disabled] .face { filter: saturate(.8) brightness(.7); }

/* ---------- RETANGULAR (esticado, com texto) ---------- */
/* mesmo matiz da esfera, tom mais fundo para a letra branca passar de 4,5:1 */
.btn-solido { --b1: #1a6bf0; --b2: #1250c4; --bt: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 22px; border-radius: 16px;
  color: var(--bt); text-shadow: none; font: 700 14px system-ui, sans-serif; cursor: pointer; white-space: nowrap;
  border: 1.5px solid rgba(255,255,255,.55);
  background: linear-gradient(180deg, var(--b1), var(--b2));
  box-shadow: 0 0 calc(6px + 16px * var(--brilho-botao)) calc(0px + 3px * var(--brilho-botao)) color-mix(in srgb, var(--b1) calc(30% + 50% * var(--brilho-botao)), transparent),
              inset 0 -4px 8px rgba(0,0,0,.2), 0 8px 14px -8px rgba(0,0,0,.55);
  transition: transform .12s, filter .15s; }
.btn-solido.azul { --b1: #1a6bf0; --b2: #1250c4; --bt: #fff; } .btn-solido.verde { --b1: #12b76a; --b2: #0c9a55; --bt: #0b1530; }
.btn-solido.amarelo { --b1: #ffa400; --b2: #e08700; --bt: #0b1530; } .btn-solido.roxo { --b1: #8b3dff; --b2: #6a22d6; --bt: #fff; } .btn-solido.vermelho { --b1: #d92424; --b2: #b81a1a; --bt: #fff; }
.btn-solido.sm { padding: 8px 15px; font-size: 13px; border-radius: 13px; } .btn-solido.lg { padding: 15px 28px; font-size: 16px; }
.btn-solido:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-solido:active { transform: translateY(1px); filter: brightness(.95); }
.btn-solido[disabled] { cursor: not-allowed; transform: none; filter: none; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--b1) 52%, #000), color-mix(in srgb, var(--b2) 58%, #000));
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.25), 0 4px 10px -6px rgba(0,0,0,.6); }

/* neutro: vidro transparente (Mais, Voltar, Anterior, Cancelar...) */
.btn-vidro { --vc: #1a73ff; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 8px 15px; border-radius: 13px;
  color: #fff; text-shadow: none; font: 700 13px system-ui, sans-serif; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,calc(.35 + .35 * var(--brilho-botao)));
  background: color-mix(in srgb, var(--vc) calc(10% + 22% * var(--brilho-botao)), rgba(255,255,255,.12));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 calc(8px + 18px * var(--brilho-botao)) calc(1px + 3px * var(--brilho-botao)) color-mix(in srgb, var(--vc) calc(70% * var(--brilho-botao)), transparent); }
/* tema claro: letra escura no vidro */
html[data-theme="claro"] .btn-vidro { color: #14213d; background: color-mix(in srgb, var(--vc) calc(8% + 16% * var(--brilho-botao)), rgba(255,255,255,.8)); border-color: rgba(20,33,61,.22); }

/* tema claro: tons mais fundos (contraste) — letras douradas viram marrom-dourado, texto secundario mais escuro */
html[data-theme="claro"] { --gold2: #835305; --muted: #4b5674; }