.j-btn[data-v-c15b9b45] {
  font-family: var(--font-body, 'Nunito', sans-serif);
  font-weight: 800;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast, 0.2s ease);
  white-space: nowrap;
  user-select: none;
}
.j-btn[data-v-c15b9b45]:hover:not(:disabled) { transform: translateY(-2px);
}
.j-btn[data-v-c15b9b45]:active:not(:disabled) { transform: translateY(0);
}
.j-btn[data-v-c15b9b45]:disabled { opacity: 0.55; cursor: not-allowed;
}

/* Sizes */
.j-btn--sm[data-v-c15b9b45]   { padding: 8px 14px;  font-size: 15px; min-height: var(--button-height-sm, 44px);
}
.j-btn--md[data-v-c15b9b45]   { padding: 10px 16px; font-size: 15px; min-height: var(--button-height, 48px);
}
.j-btn--lg[data-v-c15b9b45]   { padding: 14px 20px; font-size: 16px; min-height: var(--button-height-lg, 52px);
}
.j-btn--hero[data-v-c15b9b45] {
  padding: 20px 28px;
  font-size: 18px;
  min-height: 68px;
  border-radius: var(--radius-md, 14px);
  box-shadow: 0 8px 24px rgba(94, 134, 184, 0.28);
  letter-spacing: -0.01em;
}
.j-btn--hero[data-v-c15b9b45]:hover:not(:disabled) { box-shadow: 0 16px 40px rgba(94, 134, 184, 0.35);
}

/* Variants — herdam a paleta Névoa (--primary, --primary-deep, --primary-soft, --risk) */
.j-btn--primary[data-v-c15b9b45] {
  background: var(--primary, #5E86B8);
  color: #fff;
}
.j-btn--primary[data-v-c15b9b45]:hover:not(:disabled) { background: var(--primary-deep, #46679A);
}
.j-btn--secondary[data-v-c15b9b45] {
  background: var(--bg-surface, #fff);
  color: var(--text-primary, #1E293B);
  border-color: var(--border, #E1E8F1);
}
.j-btn--secondary[data-v-c15b9b45]:hover:not(:disabled) {
  background: var(--primary-soft, #EAF0F8);
  border-color: var(--primary, #5E86B8);
  color: var(--primary-deep, #46679A);
}
.j-btn--ghost[data-v-c15b9b45] {
  background: transparent;
  color: var(--text-primary, #1E293B);
}
.j-btn--ghost[data-v-c15b9b45]:hover:not(:disabled) { background: var(--primary-soft, #EAF0F8);
}
.j-btn--danger[data-v-c15b9b45] {
  background: rgba(169, 121, 123, 0.12);
  color: var(--risk, #A9797B);
}
.j-btn--danger[data-v-c15b9b45]:hover:not(:disabled) { background: var(--risk, #A9797B); color: #fff;
}
.j-btn--block[data-v-c15b9b45] { width: 100%;
}

/* Spinner */
.j-btn__spinner[data-v-c15b9b45] {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: j-spin-c15b9b45 0.6s linear infinite;
}
@keyframes j-spin-c15b9b45 {
to { transform: rotate(360deg);
}
}
/* CadenceAI Design Tokens - App Fluido */

:root {
  /* ===== Paleta Névoa Clean (monocromática azul-cinza) ===== */
  --bg-primary: #F4F7FB;
  --bg-surface: #fff;
  --bg-soft: #F8FBFE;

  --border: #E1E8F1;
  --border-light: #ECF1F7;

  --text-primary: #1E293B;
  --text-secondary: #475569;
  --text-muted: #55617B;
  --text-faint: #8996A8;

  /* ===== Cores Primárias ===== */
  --primary: #5E86B8;
  --primary-deep: #46679A;
  --primary-soft: #EAF0F8;
  --primary-faint: #3A5B94;

  /* ===== Exceções (risco + confirmação) ===== */
  --risk: #A9797B;
  --risk-light: rgba(169, 121, 123, 0.55);
  --success: #16a34a;
  --success-light: #F0F6F1;
  --success-text: #3E6B4A;

  /* ===== WhatsApp ===== */
  --whatsapp-bg: #EDF1EC;
  --whatsapp-text: #3E4A3E;

  /* ===== Donut (estatísticas) ===== */
  --donut-primary: #5E86B8;
  --donut-secondary: #C9A47E;
  --donut-tertiary: #B58C8C;

  /* ===== Tipografia ===== */
  --font-heading: 'Baloo 2', 'Arial Rounded MT Bold', 'Nunito', Arial, sans-serif;
  --font-body: 'Nunito', Arial, sans-serif;

  --text-h1: 28px;
  --text-h2: 24px;
  --text-h3: 19px;
  --text-h4: 17.5px;
  --text-body-lg: 17.5px;
  --text-body: 16px;
  --text-body-sm: 15.5px;
  --text-label: 14.5px;
  --text-caption: 13px;
  --text-tiny: 12px;

  /* ===== Espaçamento ===== */
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-full: 999px;

  --gap-xs: 8px;
  --gap-sm: 10px;
  --gap-md: 14px;
  --gap-lg: 16px;
  --gap-xl: 20px;

  /* ===== Componentes ===== */
  --button-height: 48px;
  --button-height-lg: 52px;
  --button-height-sm: 44px;

  /* ===== Transições ===== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.34s ease;
  --transition-slow: 0.5s ease;
}

/* ===== Tipografia Base ===== */
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--text-h1);
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
}

h4 {
  font-size: var(--text-h4);
}

/* ===== Componentes Globais ===== */
button {
  font-family: var(--font-body);
  font-weight: 800;
  transition: all var(--transition-fast);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
}

button:hover {
  transform: translateY(-2px);
}

button:active {
  transform: translateY(0);
}

/* ===== Card Base ===== */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--gap-lg);
}

.card-pad-lg {
  padding: var(--gap-xl);
}

/* ===== Botões ===== */
.btn {
  min-height: var(--button-height);
  padding: 13px 20px;
  font-size: var(--text-body-sm);
  border-radius: var(--radius-sm);
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-deep);
  box-shadow: 0 8px 20px rgba(94, 134, 184, 0.3);
}

.btn-secondary {
  background: var(--bg-surface);
  border: 1.5px solid var(--primary);
  color: var(--primary-faint);
}

.btn-secondary:hover {
  background: var(--primary-soft);
}

.btn-ghost {
  background: none;
  border: none;
  color: var(--primary-faint);
}

.btn-ghost:hover {
  color: var(--primary-deep);
}

/* ===== Gradientes ===== */
.gradient-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #fff;
}

.gradient-success {
  background: linear-gradient(135deg, var(--success), var(--success-text));
  color: #fff;
}

/* ===== Utilidades ===== */
.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-muted {
  color: var(--text-muted);
}

.text-faint {
  color: var(--text-faint);
}

.text-risk {
  color: var(--risk);
}

.text-success {
  color: var(--success-text);
}

.gap-xs { gap: var(--gap-xs); }
.gap-sm { gap: var(--gap-sm); }
.gap-md { gap: var(--gap-md); }
.gap-lg { gap: var(--gap-lg); }
.gap-xl { gap: var(--gap-xl); }

/* ===== Padding ===== */
.p-xs { padding: var(--gap-xs); }
.p-sm { padding: var(--gap-sm); }
.p-md { padding: var(--gap-md); }
.p-lg { padding: var(--gap-lg); }
.p-xl { padding: var(--gap-xl); }

/* ===== Margin ===== */
.mb-xs { margin-bottom: var(--gap-xs); }
.mb-sm { margin-bottom: var(--gap-sm); }
.mb-md { margin-bottom: var(--gap-md); }
.mb-lg { margin-bottom: var(--gap-lg); }
.mb-xl { margin-bottom: var(--gap-xl); }

/* ===== Responsividade ===== */
@media (max-width: 768px) {
  :root {
    --text-h1: 24px;
    --text-h2: 20px;
  }
}

@media (max-width: 480px) {
  :root {
    --text-h1: 22px;
    --text-h2: 18px;
  }
}