/* ===========================
   BLOCO 1 - BASE DE BOTÕES KAHPRIME
   =========================== */

:root {
  /* Raio padrão dos botões (estilo React/Vue) */
  --kp-radius-pill: 999px;
  --kp-radius-lg: 16px;

  /* Sombra suave para botões */
  --kp-btn-shadow-soft: 0 4px 12px rgba(15, 23, 42, 0.12);
  --kp-btn-shadow-soft-hover: 0 6px 18px rgba(15, 23, 42, 0.18);

  /* Anel de foco (acessibilidade) */
  --kp-btn-focus-ring: 0 0 0 2px rgba(59, 130, 246, 0.18);
}

/* Base para TODOS os .btn (Bootstrap + KahPrime) */
.btn {
  border-radius: var(--kp-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;

  font-weight: 500;
  letter-spacing: 0.01em;

  padding: 0.45rem 0.95rem;
  font-size: 0.9rem;
  line-height: 1.25;

  border-width: 1px;
  border-style: solid;

  box-shadow: var(--kp-btn-shadow-soft);

  cursor: pointer;
  user-select: none;
  text-decoration: none !important;

  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}

/* Estados comuns */
.btn:hover {
  box-shadow: var(--kp-btn-shadow-soft-hover);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
  box-shadow: var(--kp-btn-shadow-soft);
}

/* Foco acessível, estilo componente moderno */
.btn:focus-visible {
  outline: none;
  box-shadow:
    var(--kp-btn-shadow-soft),
    var(--kp-btn-focus-ring);
}

/* Tamanhos */
.btn-sm {
  padding: 0.25rem 0.65rem;
  font-size: 0.8rem;
}

.btn-lg {
  padding: 0.65rem 1.2rem;
  font-size: 1rem;
}

/* Classe utilitária para qualquer elemento clicável
   que você queira estilizar como botão (a, div, span) */
.kp-clickable {
  border-radius: var(--kp-radius-pill);
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.kp-clickable:hover {
  transform: translateY(-1px);
  box-shadow: var(--kp-btn-shadow-soft-hover);
}
.kp-clickable:active {
  transform: translateY(0);
  box-shadow: var(--kp-btn-shadow-soft);
}

/* ===========================
   BLOCO 2 - VARIANTES DE BOTÕES
   ESTILO REACT/VUE PARA O KAHPRIME
   =========================== */

/* ---------- PRIMARY ---------- */
.btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1e3a8a;
  color: #fff;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  border-color: #1e3a8a;
}
.btn-primary:active {
  background: #1e40af;
  border-color: #1e3a8a;
}

/* ---------- SECONDARY ---------- */
.btn-secondary {
  background: #64748b;
  border-color: #475569;
  color: #fff;
}
.btn-secondary:hover {
  background: #475569;
}
.btn-secondary:active {
  background: #334155;
}

/* ---------- OUTLINE PRIMARY ---------- */
.btn-outline-primary {
  color: #1d4ed8;
  border-color: #1d4ed8;
  background: transparent;
}
.btn-outline-primary:hover {
  background: rgba(37, 99, 235, 0.1);
}
.btn-outline-primary:active {
  background: rgba(37, 99, 235, 0.2);
}

/* ---------- OUTLINE SECONDARY ---------- */
.btn-outline-secondary {
  color: #475569;
  border-color: #475569;
  background: transparent;
}
.btn-outline-secondary:hover {
  background: rgba(100, 116, 139, 0.1);
}
.btn-outline-secondary:active {
  background: rgba(100, 116, 139, 0.2);
}

/* ---------- GHOST (estilo React/Vue) ---------- */
.btn-ghost {
  background: transparent;
  color: #1e293b;
  border-color: transparent;
}
.btn-ghost:hover {
  background: rgba(0, 0, 0, 0.06);
}
.btn-ghost:active {
  background: rgba(0, 0, 0, 0.12);
}

/* ---------- DANGER ---------- */
.btn-danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  border-color: #7f1d1d;
  color: #fff;
}
.btn-danger:hover {
  background: linear-gradient(135deg, #b91c1c, #991b1b);
}
.btn-danger:active {
  background: #7f1d1d;
}

/* ---------- SUCCESS ---------- */
.btn-success {
  background: linear-gradient(135deg, #16a34a, #15803d);
  border-color: #14532d;
  color: #fff;
}
.btn-success:hover {
  background: linear-gradient(135deg, #15803d, #166534);
}
.btn-success:active {
  background: #14532d;
}


/* ===========================
   BLOCO 3 - ESTADOS ESPECIAIS
   =========================== */

/* ---------- BOTÃO DESABILITADO ---------- */
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ---------- BOTÃO "LOADING" (com spinner interno) ----------
   Basta adicionar a classe .is-loading no botão.
   Exemplo de HTML:
   <button class="btn btn-primary is-loading">Salvar</button>
*/
.btn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.9;
}

.btn.is-loading > span,
.btn.is-loading > i,
.btn.is-loading > svg {
  opacity: 0.0; /* Esconde o conteúdo enquanto carrega */
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-top-color: rgba(255, 255, 255, 0.1);
  animation: kp-btn-spin 0.65s linear infinite;
}

@keyframes kp-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Versão loading para botões outline/ghost com fundo claro */
.btn-outline-primary.is-loading::after,
.btn-outline-secondary.is-loading::after,
.btn-ghost.is-loading::after {
  border-color: rgba(15, 23, 42, 0.75);
  border-top-color: rgba(15, 23, 42, 0.15);
}

/* ---------- FORMAS ESPECIAIS ---------- */

/* Força pill total (caso você queira sobrescrever algo pontual) */
.btn-pill {
  border-radius: var(--kp-radius-pill) !important;
}

/* Botão mais quadrado (útil para ícones) */
.btn-square {
  border-radius: var(--kp-radius-lg);
  padding: 0.55rem;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Versão só com ícone e espaçamento menor */
.btn-icon {
  border-radius: var(--kp-radius-pill);
  padding: 0.35rem 0.55rem;
  width: auto;
  min-width: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}