/* sg-btn — GERADO por `manage.py port_card_css` (design/card_ports.py).
 * Não editar à mão.
 * Base do botão oficial, byte a byte do <style> de components/core/button.card.html (bundle
 * 8cd72241, ZIP 48ebf484759c), que por sua vez espelha components/core/Button.jsx: 5 variantes
 * (--primary/--secondary/--tint/--ghost/--danger), 3 tamanhos (--sm/md/--lg), --iconOnly,
 * .is-loading e [disabled]. Todo .sg-btn declara uma variante. Os 10 comportamentos NÃO moram
 * aqui: vêm do eixo data-btn-fx em ds/tokens/component-variants.css, carregado antes — a mesma
 * ordem de cascata do card. O `1.2s` do prefers-reduced-motion é do card e fica literal, mas
 * não chega a valer: no mesmo media query o ds para toda animação de `[data-btn-fx] .sg-btn svg`
 * com !important, então o spinner fica parado em movimento reduzido (desvio do bundle). */
  .sg-btn{
    --_h: var(--control-h); --_px: var(--control-pad-x);
    display:inline-flex; align-items:center; justify-content:center; gap:var(--control-gap);
    height:var(--_h); padding:0 var(--_px); box-sizing:border-box;
    font-family:var(--font-display); font-size:var(--control-font); font-weight:var(--weight-medium);
    line-height:1; letter-spacing:var(--tracking-tight); white-space:nowrap;
    border:1px solid transparent; border-radius:var(--radius-md); cursor:pointer;
    position:relative; user-select:none; text-decoration:none; -webkit-tap-highlight-color:transparent;
    transition: background-color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                transform var(--duration-instant) var(--ease-spring);
  }
  .sg-btn svg{ width:17px; height:17px; flex:none; }
  .sg-btn:focus-visible{ outline:none; box-shadow:0 0 0 var(--ring-width) var(--ring); }
  .sg-btn:active:not([disabled]){ transform: translateY(0.5px) scale(0.985); }
  .sg-btn[disabled], .sg-btn[aria-disabled="true"]{ cursor:not-allowed; opacity:.55; box-shadow:none; transform:none; }
  .sg-btn--sm{ --_h:var(--control-h-sm); --_px:var(--control-pad-x-sm); font-size:var(--text-sm); }
  .sg-btn--sm svg{ width:15px; height:15px; }
  .sg-btn--lg{ --_h:var(--control-h-lg); --_px:calc(var(--control-pad-x) + 4px); font-size:var(--text-md); }
  .sg-btn--iconOnly{ width:var(--_h); padding:0; }

  .sg-btn--primary{ background:var(--primary); color:var(--on-primary); box-shadow:var(--shadow-xs); }
  .sg-btn--primary:hover:not([disabled]){ background:var(--primary-hover); }
  .sg-btn--primary:active:not([disabled]){ background:var(--primary-active); }

  .sg-btn--secondary{ background:var(--surface); color:var(--text); border-color:var(--border-strong); box-shadow:var(--shadow-xs); }
  .sg-btn--secondary:hover:not([disabled]){ background:var(--surface-hover); border-color:var(--gray-400); }
  .sg-btn--secondary:active:not([disabled]){ background:var(--surface-sunken); }

  .sg-btn--tint{ background:var(--primary-bg); color:var(--primary-text); border-color:var(--primary-border); }
  .sg-btn--tint:hover:not([disabled]){ background:color-mix(in srgb, var(--primary) 14%, var(--surface)); }

  .sg-btn--ghost{ background:transparent; color:var(--text-muted); }
  .sg-btn--ghost:hover:not([disabled]){ background:var(--surface-hover); color:var(--text); }
  .sg-btn--ghost:active:not([disabled]){ background:var(--surface-sunken); }

  .sg-btn--danger{ background:var(--negative); color:var(--negative-on); box-shadow:var(--shadow-xs); }
  .sg-btn--danger:hover:not([disabled]){ background:color-mix(in srgb, var(--negative) 84%, black); }
  .sg-btn--danger:active:not([disabled]){ background:color-mix(in srgb, var(--negative) 72%, black); }
  .sg-btn--danger:focus-visible{ box-shadow:0 0 0 var(--ring-width) var(--ring-error); }

  .sg-btn.is-loading{ color:transparent !important; pointer-events:none; }
  .sg-btn .sg-btn__spin{ position:absolute; inset:0; display:grid; place-items:center; color:currentColor; }
  .sg-btn.is-loading .sg-btn__spin{ color: var(--on-primary); }
  .sg-btn--secondary.is-loading .sg-btn__spin,
  .sg-btn--ghost.is-loading .sg-btn__spin,
  .sg-btn--tint.is-loading .sg-btn__spin{ color: var(--primary); }
  .sg-btn__spin svg{ animation: sg-spin var(--duration-slower) linear infinite; }
  @keyframes sg-spin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){ .sg-btn__spin svg{ animation-duration: 1.2s; } }