/* =========================================================
   Componente: Botao (variantes, estados, loading, tamanhos)
   Uso: <button class="btn-cf btn-primary-cf">...</button>
   ========================================================= */

.btn-cf {
  --btn-bg: var(--bg-muted);
  --btn-fg: var(--text-primary);
  --btn-border: var(--border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-base);
  line-height: 1;
  padding: 0.65rem 1.15rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out);
}
.btn-cf:hover { filter: brightness(0.97); }
.btn-cf:active { transform: translateY(1px); }
.btn-cf:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--indigo-200);
}
.btn-cf:disabled, .btn-cf.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* Variantes */
.btn-primary-cf {
  --btn-bg: var(--indigo-600);
  --btn-fg: #fff;
  --btn-border: transparent;
  box-shadow: var(--shadow-brand);
}
.btn-primary-cf:hover { --btn-bg: var(--indigo-700); filter: none; }

.btn-gradient-cf {
  --btn-fg: #fff;
  --btn-border: transparent;
  background: var(--gradient-brand);
  box-shadow: var(--shadow-brand);
}
.btn-gradient-cf:hover { filter: brightness(1.06); }

.btn-outline-cf {
  --btn-bg: transparent;
  --btn-fg: var(--indigo-600);
  --btn-border: var(--indigo-600);
}
.btn-ghost-cf {
  --btn-bg: transparent;
  --btn-fg: var(--text-secondary);
  --btn-border: transparent;
}
.btn-ghost-cf:hover { --btn-bg: var(--bg-surface-hover); --btn-fg: var(--text-primary); }

.btn-danger-cf {
  --btn-bg: var(--falta);
  --btn-fg: #fff;
  --btn-border: transparent;
}
.btn-success-cf {
  --btn-bg: var(--presente);
  --btn-fg: #fff;
  --btn-border: transparent;
}

/* Tamanhos */
.btn-sm-cf { padding: 0.4rem 0.8rem; font-size: var(--text-sm); }
.btn-lg-cf { padding: 0.85rem 1.5rem; font-size: var(--text-md); border-radius: var(--radius-md); }
.btn-block-cf { width: 100%; }
.btn-icon-cf { padding: 0.6rem; width: 42px; height: 42px; }

/* Estado loading */
.btn-cf.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn-cf.is-loading::after {
  content: '';
  position: absolute;
  width: 1.05em;
  height: 1.05em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--btn-fg);
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }