/* ==========================================================================
   CPM Vision 2.0 — buttons.css
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  height: 40px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
}

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }

.btn:disabled,
.btn.is-disabled {
  opacity: .45;
  pointer-events: none;
}

/* --- Variantes -------------------------------------------------------------- */
.btn--primary {
  background: var(--primary);
  color: var(--text-on-primary);
  box-shadow: var(--shadow-inset);
}
.btn--primary:hover  { background: var(--primary-hover); }
.btn--primary:active { background: var(--primary-active); }

.btn--secondary {
  background: var(--bg-hover);
  border-color: var(--border);
  color: var(--text);
}
.btn--secondary:hover { background: var(--bg-elevated); border-color: var(--border-strong); }

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

.btn--success { background: var(--success); color: #06210F; font-weight: var(--fw-semibold); }
.btn--success:hover { background: #16A34A; color: #fff; }

.btn--warning { background: var(--warning); color: #241A00; font-weight: var(--fw-semibold); }
.btn--warning:hover { background: #D97706; color: #fff; }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #DC2626; }

/* Perigo discreto — o padrão para "Excluir" em linha de tabela. */
.btn--danger-soft {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(239, 68, 68, .25);
}
.btn--danger-soft:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* --- Tamanhos --------------------------------------------------------------- */
.btn--sm  { height: 32px; padding: 0 var(--sp-2); font-size: var(--fs-sm); border-radius: 8px; }
.btn--lg  { height: 48px; padding: 0 var(--sp-4); font-size: var(--fs-md); }
.btn--block { width: 100%; }

/* Botão só de ícone (ações de linha de tabela) */
.btn--icon { width: 32px; height: 32px; padding: 0; }
.btn--icon svg { width: 16px; height: 16px; }

/* --- Grupo ------------------------------------------------------------------ */
.btn-group { display: inline-flex; gap: var(--sp-1); }

/* --- Carregando ------------------------------------------------------------- */
.btn.is-loading { pointer-events: none; color: transparent; position: relative; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: var(--r-pill);
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }