/* Botão padrão (.btn = variante "secondary" do design system) + .primary
   (gradiente azul + glow, pra UMA ação principal por tela).
   Espelha components/core/Button.jsx da Ally Design System — mesmos
   tokens de raio/sombra/glow, só que em CSS puro (o projeto usa Jinja2,
   não React). Se precisar de mais variantes (outline/ghost), seguir o
   mesmo padrão: só trocar background/border/box-shadow. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* só o vertical bateu exato com a escala --space-* (Fase 5, 2026-08-07)
     - 14px horizontal e o gap de 7px ficam como estão de propósito
     (ajuste fino visual, não é um valor "esquecido" do grid de 4px; a
     escala nomeada é pra ONDE o valor já é redondo, não pra forçar tudo
     a virar múltiplo de 4). */
  padding: var(--space-2) 14px;
  /* cilindro/cápsula (pedido do usuário 2026-08-07: "por que outros
     botões e campos do Ally não estão no modo apple como cilindros
     arredondados?") - antes só .btn.primary usava --radius-full, o botão
     padrão (secundário/ghost) ficava com o --radius-md antigo (cantos
     arredondados, não cápsula). Agora TODO botão do sistema usa o mesmo
     raio total, então .btn.primary não precisa mais sobrescrever isso
     (ver abaixo). */
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover:not(:disabled) { background: var(--bg-card-hov); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.btn svg                  { width: 14px; height: 14px; }
.btn:disabled             { opacity: 0.5; cursor: not-allowed; }

/* variante primária: reservada pra ação principal, MESMO visual em
   qualquer lugar do sistema (inclusive dentro de modal - ver
   components/modal.css, que herda direto daqui).

   2026-08-14 (pedido do usuário, urgente - "volte esse botao
   imediatamente... eu quero q o segundo fique igual ao primeiro em todo o
   ally", comparando o "Executar" do card de automação (pílula vazada
   azul-marinho) com o "Rodar" do modal (gradiente azul vertical antigo)):
   o visual "pílula vazada" que já existia SÓ no botão "Executar" dos
   cards de automação (automacoes.css, história completa no comentário de
   `.autom-lista--grid .autom-disparar` lá) virou o padrão de TODO
   `.btn.primary` do sistema - login, Rodar (modal de disparo), Confirmar
   normal, Filtrar, etc. Preenchimento azul-marinho (#1D2B52) + borda em
   conic-gradient concentrada na base/lateral direita, mesma técnica de 2
   backgrounds empilhados (fill em padding-box, degradê em border-box).
   Cor fixa (não token) de propósito - só essa variante usa esse tom. */
.btn.primary {
  background-image:
    linear-gradient(#1D2B52, #1D2B52),
    conic-gradient(from 0deg at center,
      transparent 0deg 75deg,
      rgba(133, 175, 255, 0.65) 120deg 210deg,
      transparent 255deg 360deg);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1px solid transparent;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25), 0 -8px 18px rgba(0, 0, 0, 0.20);
}
.btn.primary:hover:not(:disabled) {
  background-image:
    linear-gradient(#243866, #243866),
    conic-gradient(from 0deg at center,
      transparent 0deg 75deg,
      rgba(133, 175, 255, 0.65) 120deg 210deg,
      transparent 255deg 360deg);
  color: #fff;
}

/* Tema claro: mesma adaptação que já existia só pro botão "Executar" -
   fundo azul claro, borda em degradê branca (o azul "sumia" contra o
   próprio fundo azulado no claro). */
[data-theme="light"] .btn.primary {
  background-image:
    linear-gradient(#F5F9FF, #F5F9FF),
    conic-gradient(from 0deg at center,
      transparent 0deg,
      transparent 90deg,
      rgba(255, 255, 255, 0.95) 165deg,
      transparent 240deg,
      transparent 360deg);
  border-width: 1px;
  color: var(--blue-500);
  box-shadow: 0 10px 24px rgba(10, 14, 26, 0.12), 0 -8px 18px rgba(10, 14, 26, 0.08);
}
[data-theme="light"] .btn.primary:hover:not(:disabled) {
  background-image:
    linear-gradient(#EAF1FF, #EAF1FF),
    conic-gradient(from 0deg at center,
      transparent 0deg,
      transparent 90deg,
      rgba(255, 255, 255, 0.95) 165deg,
      transparent 240deg,
      transparent 360deg);
  color: var(--blue-700);
  box-shadow: 0 10px 24px rgba(10, 14, 26, 0.14), 0 -8px 18px rgba(10, 14, 26, 0.10);
}

/* variante de perigo: pra ação destrutiva (ex: "Confirmar" num diálogo de
   exclusão, ver #confirm-ok em base.html) - de propósito NÃO usa o
   gradiente/glow do .primary (isso sinalizaria "ação principal recomendada",
   o oposto do que se quer aqui) nem vira azul (pedido do usuário 2026-08-07
   foi só sobre AÇÕES normais - uma ação destrutiva continuar vermelha é
   intencional, mantém o sinal visual de "isso é perigoso"). Mesmo peso
   visual discreto que já existia antes (fundo/borda vermelho claro, texto
   vermelho) só que como componente reutilizável em vez de classes Tailwind
   soltas no HTML - herda a cápsula do .btn base normalmente. */
.btn.danger {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger);
}
.btn.danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 20%, transparent);
}

/* variante fantasma: pra ação secundária dentro de uma telinha (ex: "Cancelar"
   ao lado de um botão .primary) — sem fundo/sombra, só o texto e a borda. */
.btn.ghost {
  background: transparent;
  border-color: var(--border);
  box-shadow: none;
  color: var(--text-faint);
}
.btn.ghost:hover:not(:disabled) {
  background: var(--bg-card-hov);
  color: var(--text);
}