/* UI.SYSTEM.01D — contrato canônico de botões e ações.
   Fonte única estrutural; aliases históricos permanecem durante a migração. */
/* ==========================================================================
   H37.3 — Button Contract / Actions Foundation
   Hierarquia canônica, estados e touch targets. Os aliases históricos
   (.primary, .ghost, .light, .small, .tiny) permanecem compatíveis.
   ========================================================================== */
.btn {
  --btn-height: var(--layout-touch-target);
  --btn-padding-x: var(--space-4);
  --btn-bg: var(--color-brand-600);
  --btn-border: var(--color-brand-600);
  --btn-color: var(--color-on-brand);
  --btn-shadow: 0 10px 22px rgba(110, 142, 115, 0.23);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: var(--btn-height);
  gap: var(--space-2);
  padding: 0 var(--btn-padding-x);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-color);
  -webkit-text-fill-color: var(--btn-color);
  box-shadow: var(--btn-shadow);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-heavy);
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--duration-fast) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard);
}
/* O conteúdo interno nunca deve reintroduzir cor escura sobre um botão tonal. */
.btn > *,
.btn svg,
.btn use {
  color: inherit;
  -webkit-text-fill-color: inherit;
}
.btn svg { fill: currentColor; stroke: currentColor; }
.btn:hover:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}
.btn:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.btn:disabled,
.btn.is-disabled {
  opacity: .48;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}
/* aria-disabled comunica indisponibilidade, mas não remove eventos globalmente.
   Cada módulo decide se o estado deve bloquear fisicamente o controle. */
.btn[aria-disabled="true"] {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Tones */
.btn--primary,
.btn.primary {
  --btn-bg: var(--color-brand-600);
  --btn-border: var(--color-brand-600);
  --btn-color: #fff;
}
.btn--secondary,
.btn.secondary {
  --btn-bg: var(--color-surface);
  --btn-border: var(--color-brand-300);
  --btn-color: var(--color-brand-800);
  --btn-shadow: var(--shadow-xs);
}
.btn--ghost,
.btn.ghost {
  --btn-bg: rgba(255, 253, 249, .82);
  --btn-border: var(--color-border);
  --btn-color: var(--color-text);
  --btn-shadow: none;
}
.btn--subtle,
.btn.light {
  --btn-bg: var(--color-brand-50);
  --btn-border: transparent;
  --btn-color: var(--color-brand-800);
  --btn-shadow: none;
}
.btn--danger,
.btn.danger {
  --btn-bg: var(--color-danger);
  --btn-border: var(--color-danger);
  --btn-color: #fff;
  --btn-shadow: 0 10px 22px rgba(180, 83, 83, .18);
}
.btn--danger.btn--ghost,
.btn.danger.ghost {
  --btn-bg: var(--color-danger-bg);
  --btn-border: rgba(180, 83, 83, .24);
  --btn-color: var(--color-danger);
  --btn-shadow: none;
}

/* Sizes. Aliases históricos permanecem operacionais. */
.btn--sm,
.btn.small,
.btn.tiny {
  --btn-height: 36px;
  --btn-padding-x: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}
.btn.tiny { --btn-height: 32px; --btn-padding-x: 10px; }
.btn--md { --btn-height: var(--layout-touch-target); }
.btn--lg,
.btn.large {
  --btn-height: 50px;
  --btn-padding-x: var(--space-5);
  font-size: var(--font-size-base);
}

/* Conteúdo, ícone e loading. */
.btn__icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
}
.btn--icon-only,
.icon-btn {
  width: var(--layout-touch-target);
  min-width: var(--layout-touch-target);
  padding: 0;
}
.btn[aria-busy="true"],
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn[aria-busy="true"]::after,
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--btn-color);
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.action-group,
.form-actions,
.hero-actions,
.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.action-group--end,
.form-actions,
.page-header-actions { justify-content: flex-end; }

@media (max-width: 640px) {
  .page-header-actions { width: 100%; }
  .page-header-actions .btn { flex: 1 1 auto; }
  .form-actions .btn { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn[aria-busy="true"]::after,
  .btn.is-loading::after { animation-duration: 1.4s; }
}


/* Variantes adicionais previstas pelo Design System. */
.btn--neutral {
  --btn-bg: var(--color-surface-2, #f4eee4);
  --btn-border: var(--color-border);
  --btn-color: var(--color-text);
  --btn-shadow: none;
}
.btn--success {
  --btn-bg: var(--color-success, #55785b);
  --btn-border: var(--color-success, #55785b);
  --btn-color: #fff;
  --btn-shadow: 0 10px 22px rgba(85,120,91,.18);
}
.btn--link {
  --btn-height: auto;
  --btn-padding-x: 0;
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-color: var(--color-brand-800);
  --btn-shadow: none;
  min-height: var(--layout-touch-target);
  border-radius: var(--radius-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn--link:hover:not(:disabled):not([aria-disabled="true"]) {
  transform: none;
  box-shadow: none;
}
.ui-button--icon-only {
  width: var(--layout-touch-target);
  min-width: var(--layout-touch-target);
  height: var(--layout-touch-target);
  padding: 0;
  border-radius: 999px;
}
.ui-button--close {
  --btn-bg: var(--color-brand-500, #f97316);
  --btn-border: var(--color-brand-500, #f97316);
  --btn-color: #fff;
  --btn-shadow: 0 10px 24px rgba(249,115,22,.28);
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: 999px;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font: 950 25px/1 system-ui,sans-serif;
}
.ui-button--close:hover:not(:disabled):not([aria-disabled="true"]) {
  --btn-bg: var(--color-brand-600, #ea580c);
  --btn-border: var(--color-brand-600, #ea580c);
  --btn-color: #fff;
  color: #fff;
  -webkit-text-fill-color: #fff;
  transform: translateY(-1px) scale(1.02);
}
.ui-button--close:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(0) scale(.98);
}
/* Invariante de contraste: todo botão com fundo de marca usa texto branco. */
.btn--primary,
.btn.primary,
.btn--success,
.btn--danger,
.ui-button--brand,
.ui-button--close {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.btn--primary > *,
.btn.primary > *,
.btn--success > *,
.btn--danger > *,
.ui-button--brand > *,
.ui-button--close > * {
  color: inherit;
  -webkit-text-fill-color: inherit;
}
@media(max-width:760px){
  .ui-button--close{top:11px;right:12px;width:44px;min-width:44px;height:44px;min-height:44px}
}