/* OficinaFlow Design System — Buttons */
.of-btn,
.primary-action,
.secondary-action,
.danger-action,
.primary-button,
.secondary-button,
.wo-btn,
.est-btn {
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--font-size-secondary);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.of-btn:hover,
.primary-action:hover,
.secondary-action:hover,
.danger-action:hover,
.primary-button:hover,
.secondary-button:hover,
.wo-btn:hover,
.est-btn:hover { text-decoration: none; }

.of-btn:focus-visible,
.primary-action:focus-visible,
.secondary-action:focus-visible,
.danger-action:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible,
.wo-btn:focus-visible,
.est-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.of-btn:disabled,
.of-btn[aria-disabled="true"],
.primary-action:disabled,
.secondary-action:disabled,
.danger-action:disabled,
.primary-button:disabled,
.secondary-button:disabled,
.wo-btn:disabled,
.est-btn:disabled {
  opacity: .45;
  pointer-events: none;
  cursor: not-allowed;
}

/* CTA principal: âmbar é a única cor de ação, conforme direção visual. */
.of-btn--primary,
.primary-action,
.primary-button,
.wo-btn.primary,
.est-btn.primary {
  background: var(--amber);
  border-color: var(--amber);
  color: #2D210D;
}

.of-btn--primary:hover,
.primary-action:hover,
.primary-button:hover,
.wo-btn.primary:hover,
.est-btn.primary:hover {
  background: #D89534;
  border-color: #D89534;
}

.of-btn--secondary,
.secondary-action,
.secondary-button,
.wo-btn.secondary,
.est-btn.secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.of-btn--secondary:hover,
.secondary-action:hover,
.secondary-button:hover,
.wo-btn.secondary:hover,
.est-btn.secondary:hover {
  background: var(--gray-bg);
  border-color: #D5D9E0;
}

.of-btn--ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.of-btn--ghost:hover { background: var(--gray-bg); color: var(--text); }

.of-btn--danger,
.danger-action {
  background: var(--surface);
  border-color: #F1C4C0;
  color: var(--red-text);
}

.of-btn--danger:hover,
.danger-action:hover { background: var(--red-bg); border-color: #E9AAA5; }

.of-btn--sm,
.primary-action.compact,
.secondary-action.compact,
.danger-action.compact {
  min-height: var(--control-height-sm);
  padding-inline: var(--space-3);
  font-size: var(--font-size-secondary);
}

.of-btn--lg { min-height: var(--control-height-lg); padding-inline: var(--space-5); font-size: var(--font-size-body); }
.of-btn--icon { width: var(--control-height); padding: 0; }
.of-btn--icon.of-btn--sm { width: var(--control-height-sm); }

.of-btn .of-icon,
.primary-action .of-icon,
.secondary-action .of-icon,
.danger-action .of-icon {
  width: var(--icon-control);
  height: var(--icon-control);
}