@import url("/static/css/tokens.css");
@import url("/static/css/fontes.css");

/* ============================================================
   Drematech Comercial — receitas de componente
   Os tokens vivem em tokens.css, compartilhado entre sistemas.
   Nenhuma cor é escrita aqui; tudo passa por --ds-* ou --theme-*.
   ============================================================ */

/* ── base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ds-surface-page);
  color: var(--ds-text-primary);
  font-family: var(--theme-font-sans);
  font-size: var(--theme-font-size-body-m);
  line-height: var(--theme-line-height-relaxed);
  -webkit-font-smoothing: antialiased;
}

/* brilho ambiente atrás do conteúdo, dá profundidade ao navy */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: var(--theme-ambient-image), var(--theme-ambient-glow);
  background-size: cover, auto;
  background-position: center top, 0 0;
  background-repeat: no-repeat, no-repeat;
  opacity: var(--theme-ambient-opacity);
  z-index: 0;
}

a { color: var(--ds-text-brand); text-decoration: none; }
a:hover { color: var(--theme-brand-400); }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); border-radius: var(--theme-radius-sm); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── styles/recipes/type ──────────────────────────────────── */
.ds-type-display {
  font-family: var(--theme-font-display);
  font-size: var(--theme-font-size-display);
  font-weight: var(--theme-font-weight-black);
  line-height: var(--theme-line-height-tight);
  letter-spacing: -0.035em;
}
.ds-type-display-lg {
  font-family: var(--theme-font-display);
  font-size: var(--theme-font-size-display-lg);
  font-weight: var(--theme-font-weight-black);
  line-height: 1;
  letter-spacing: -0.04em;
}
.ds-type-heading-l {
  font-family: var(--theme-font-display);
  font-size: var(--theme-font-size-heading-l);
  font-weight: var(--theme-font-weight-bold);
  line-height: var(--theme-line-height-snug);
  letter-spacing: -0.025em;
}
.ds-type-heading-m {
  font-family: var(--theme-font-display);
  font-size: var(--theme-font-size-2xl);
  font-weight: var(--theme-font-weight-bold);
  line-height: var(--theme-line-height-snug);
  letter-spacing: -0.015em;
}
.ds-type-heading-s {
  font-family: var(--theme-font-display-light);
  font-size: var(--theme-font-size-xl);
  font-weight: var(--theme-font-weight-normal);
  line-height: var(--theme-line-height-snug);
  letter-spacing: -0.01em;
}
.ds-type-body-m { font-size: var(--theme-font-size-body-m); }
.ds-type-body-s { font-size: var(--theme-font-size-body-s); line-height: var(--theme-line-height-normal); }
.ds-type-caption {
  font-size: var(--theme-font-size-caption);
  font-weight: var(--theme-font-weight-medium);
  letter-spacing: 0.01em;
}
.ds-type-label {
  font-size: var(--theme-font-size-sm);
  font-weight: var(--theme-font-weight-semibold);
  line-height: 1;
}
.ds-type-mono {
  font-family: var(--theme-font-mono);
  font-size: var(--theme-font-size-body-s);
  font-weight: var(--theme-font-weight-medium);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.ds-text-muted { color: var(--ds-text-muted); }
.ds-text-brand { color: var(--ds-text-brand); }
.ds-text-accent { color: var(--ds-text-accent); }

/* eyebrow — caption em caixa alta acima de um título */
.ds-eyebrow {
  font-size: var(--theme-font-size-caption);
  font-weight: var(--theme-font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
}


/* ── layout: header fixo + conteúdo (adaptação desktop) ───── */
/* O Fusion pinaria também um footer de ação. Num CRM de mesa o
   footer não existe: as ações vivem dentro dos cards. */
.ds-app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ds-surface-glass-strong);
  backdrop-filter: blur(var(--ds-glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur-strong));
  border-bottom: 1px solid var(--ds-border-glass);
  box-shadow: var(--ds-glass-inner-highlight);
}
.ds-app-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--theme-spacing-sm) var(--theme-spacing-screen-padding);
  display: flex;
  align-items: center;
  gap: var(--theme-spacing-lg);
}
.ds-app-header__inner .ds-navigation-tab { margin-left: auto; }
.ds-app-header__inner .ds-tema { margin-left: var(--theme-spacing-sm); }
.ds-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--theme-spacing-sm);
  white-space: nowrap;
  text-decoration: none;
  color: var(--ds-text-primary);
}
.ds-brand__marca { height: 2.1rem; width: auto; display: block; }
.ds-brand__marca--escuro { display: none; }
:root[data-theme="dark"] .ds-brand__marca--claro { display: none; }
:root[data-theme="dark"] .ds-brand__marca--escuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-brand__marca--claro { display: none; }
  :root:not([data-theme="light"]) .ds-brand__marca--escuro { display: block; }
}
.ds-brand__area {
  font-family: var(--theme-font-display);
  font-weight: var(--theme-font-weight-bold);
  font-size: var(--theme-font-size-body-m);
  letter-spacing: -0.02em;
  color: var(--ds-text-brand);
  padding-left: var(--theme-spacing-sm);
  border-left: 1px solid var(--ds-border-default);
}

/* alternador de tema */
.ds-tema {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--theme-radius-full);
  border: 1px solid var(--ds-border-default);
  background: transparent;
  color: var(--ds-text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color var(--theme-motion-fast),
              border-color var(--theme-motion-fast),
              background var(--theme-motion-fast);
}
.ds-tema:hover {
  color: var(--ds-color-brand);
  border-color: var(--ds-border-brand);
  background: var(--ds-surface-hover-soft);
}
.ds-tema__lua { display: none; }
:root[data-theme="dark"] .ds-tema__sol { display: none; }
:root[data-theme="dark"] .ds-tema__lua { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-tema__sol { display: none; }
  :root:not([data-theme="light"]) .ds-tema__lua { display: block; }
}

main {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--theme-spacing-xl) var(--theme-spacing-screen-padding) var(--theme-spacing-3xl);
}

.ds-stack { display: flex; flex-direction: column; gap: var(--theme-spacing-lg); }
.ds-stack-sm { display: flex; flex-direction: column; gap: var(--theme-spacing-sm); }
.ds-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--theme-spacing-md); flex-wrap: wrap;
}
.ds-grid { display: grid; gap: var(--theme-spacing-md); }

/* ── styles/recipes/navigation-tab ────────────────────────── */
.ds-navigation-tab {
  display: flex;
  background: var(--ds-surface-glass-strong);
  border-radius: var(--theme-radius-xl);
  padding: var(--theme-spacing-xs);
  border: 1px solid var(--ds-border-glass-highlight);
  gap: var(--theme-spacing-2xs);
}
.ds-navigation-tab__item {
  display: flex;
  align-items: center;
  gap: var(--theme-spacing-xs);
  padding: var(--theme-spacing-sm) var(--theme-spacing-md);
  min-height: 2.75rem;
  border-radius: var(--theme-radius-lg);
  font-size: var(--theme-font-size-body-s);
  font-weight: var(--theme-font-weight-medium);
  color: var(--ds-text-secondary);
  cursor: pointer;
  transition: color var(--theme-motion-fast), background var(--theme-motion-fast),
              box-shadow var(--theme-motion-fast);
  border: none;
  background: none;
  white-space: nowrap;
}
.ds-navigation-tab__item:hover {
  color: var(--ds-text-primary);
  background: var(--ds-surface-hover-soft);
  text-decoration: none;
}
.ds-navigation-tab__item--active {
  background: var(--ds-surface-brand);
  color: var(--ds-text-on-brand);
  font-weight: var(--theme-font-weight-semibold);
  box-shadow: var(--theme-shadow-glow-brand);
}
.ds-navigation-tab__item--active:hover {
  background: var(--ds-color-brand-strong);
  color: var(--theme-black);
}
.ds-navigation-tab__item i { font-size: var(--theme-font-size-lg); }

/* ── styles/recipes/surface ───────────────────────────────── */
.ds-surface-card {
  background: var(--ds-surface-card);
  border-radius: var(--theme-radius-md);
  border: 1px solid var(--ds-border-subtle);
  box-shadow: var(--theme-shadow-elevation-card);
}
.ds-glass-card {
  position: relative;
  overflow: hidden;
  background: var(--ds-surface-glass);
  backdrop-filter: blur(var(--ds-glass-blur));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
  border-radius: var(--theme-radius-lg);
  border: 1px solid var(--ds-border-glass);
  box-shadow: var(--ds-glass-inner-highlight), var(--ds-glass-glow);
  padding: var(--theme-spacing-md);
}
/* captação de luz na borda superior, como vidro fosco real */
.ds-glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%,
              var(--ds-border-glass-highlight-strong) 50%, transparent 100%);
  pointer-events: none;
}
.ds-glass-card--strong {
  background: var(--ds-surface-glass-strong);
  backdrop-filter: blur(var(--ds-glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur-strong));
  border-color: var(--ds-border-glass-strong);
}
.ds-glass-card__title {
  font-family: var(--theme-font-display-light);
  font-size: var(--theme-font-size-body-l);
  font-weight: var(--theme-font-weight-normal);
  letter-spacing: -0.01em;
}
.ds-glass-card__subtitle {
  font-size: var(--theme-font-size-body-s);
  color: var(--ds-text-muted);
}

/* ── styles/recipes/section-header ────────────────────────── */
.ds-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--theme-spacing-md) 0 var(--theme-spacing-sm);
}
.ds-section-header__title {
  font-family: var(--theme-font-display-light);
  font-size: var(--theme-font-size-body-l);
  font-weight: var(--theme-font-weight-normal);
  letter-spacing: -0.01em;
}
.ds-section-header__action {
  font-size: var(--theme-font-size-body-s);
  font-weight: var(--theme-font-weight-semibold);
  color: var(--ds-text-brand);
  cursor: pointer;
}


/* ── styles/recipes/primary-button ────────────────────────── */
/* Regra do sistema: botão é sempre mustard gold. Sem variante
   vermelha, verde ou cinza. O rótulo comunica a intenção. */
.ds-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--theme-spacing-sm);
  height: 3.25rem;
  padding: 0 var(--theme-spacing-lg);
  border: none;
  border-radius: var(--theme-radius-2xl);
  background: var(--ds-surface-brand);
  color: var(--ds-text-on-brand);
  font-family: var(--theme-font-sans);
  font-size: var(--theme-font-size-body-m);
  font-weight: var(--theme-font-weight-semibold);
  cursor: pointer;
  box-shadow: var(--theme-shadow-glow-brand);
  transition: background var(--theme-motion-fast),
              box-shadow var(--theme-motion-fast),
              transform var(--theme-motion-fast);
}
.ds-primary-button:hover {
  background: var(--theme-brand-400);
  box-shadow: var(--theme-shadow-glow-brand-strong);
}
.ds-primary-button:active { transform: scale(0.98); }
.ds-primary-button:focus-visible {
  outline: none;
  box-shadow: var(--theme-shadow-glow-brand), var(--ds-focus-ring);
}
.ds-primary-button[disabled] { opacity: 0.38; cursor: not-allowed; box-shadow: none; }
.ds-primary-button--full { width: 100%; }

/* ── styles/recipes/secondary-button ──────────────────────── */
.ds-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--theme-spacing-sm);
  height: 3.25rem;
  padding: 0 var(--theme-spacing-lg);
  border: 1.5px solid var(--ds-border-brand);
  border-radius: var(--theme-radius-2xl);
  background: transparent;
  color: var(--ds-color-brand-strong);
  font-family: var(--theme-font-sans);
  font-size: var(--theme-font-size-body-m);
  font-weight: var(--theme-font-weight-semibold);
  cursor: pointer;
  transition: background var(--theme-motion-fast),
              border-color var(--theme-motion-fast),
              transform var(--theme-motion-fast);
}
.ds-secondary-button:hover {
  background: var(--ds-surface-brand-subtle);
  border-color: var(--ds-color-brand);
  color: var(--ds-color-brand);
  text-decoration: none;
}
.ds-secondary-button:active { transform: scale(0.98); }
.ds-secondary-button--full { width: 100%; }

/* Adaptação desktop: altura reduzida para ações inline dentro de
   tabelas e formulários densos. Mantém cor, raio e feedback. */
.ds-primary-button--compact,
.ds-secondary-button--compact {
  height: 2.5rem;
  padding: 0 var(--theme-spacing-md);
  font-size: var(--theme-font-size-body-s);
  border-radius: var(--theme-radius-xl);
}
.ds-primary-button--compact { box-shadow: var(--theme-shadow-glow-brand); }

/* ── styles/recipes/text-input ────────────────────────────── */
.ds-field { display: flex; flex-direction: column; }
.ds-field__label {
  display: block;
  margin-bottom: var(--theme-spacing-xs);
  font-size: var(--theme-font-size-body-s);
  font-weight: var(--theme-font-weight-medium);
  color: var(--ds-text-muted);
}
.ds-field__control,
input:not([type="submit"]), select, textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--theme-spacing-md);
  border-radius: var(--theme-radius-md);
  background: var(--ds-surface-card);
  border: 1.5px solid var(--ds-border-subtle);
  color: var(--ds-text-primary);
  font-family: var(--theme-font-sans);
  font-size: var(--theme-font-size-body-m);
  transition: border-color var(--theme-motion-fast), box-shadow var(--theme-motion-fast);
}
textarea {
  min-height: 5.5rem;
  padding: var(--theme-spacing-sm) var(--theme-spacing-md);
  resize: vertical;
  line-height: var(--theme-line-height-relaxed);
}
input::placeholder, textarea::placeholder { color: var(--ds-text-disabled); }
input:focus, select:focus, textarea:focus {
  border-color: var(--ds-color-brand);
  box-shadow: 0 0 0 3px var(--ds-color-brand-glow-subtle);
  outline: none;
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ds-text-muted) 50%),
                    linear-gradient(135deg, var(--ds-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--theme-spacing-xl);
}
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }

.ds-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--theme-spacing-sm);
  align-items: end;
}


/* ── styles/recipes/status-badge ──────────────────────────── */
.ds-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--theme-spacing-xs);
  padding: var(--theme-spacing-xs) var(--theme-spacing-sm);
  border-radius: var(--theme-radius-full);
  font-size: var(--theme-font-size-caption);
  font-weight: var(--theme-font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  background: var(--theme-bg-tertiary);
  color: var(--ds-text-muted);
  border: 1px solid var(--ds-border-subtle);
}
.ds-status-badge--brand {
  background: var(--ds-surface-brand-subtle);
  color: var(--theme-brand-600);
  border-color: var(--ds-border-brand);
}
.ds-status-badge--success {
  background: var(--theme-green-50);
  color: var(--theme-green-600);
  border-color: var(--ds-border-success);
}
.ds-status-badge--pending {
  background: var(--theme-amber-50);
  color: var(--theme-amber-600);
  border-color: var(--ds-border-warning);
}
.ds-status-badge--danger {
  background: var(--theme-red-50);
  color: var(--theme-red-600);
  border-color: var(--ds-border-danger);
}
.ds-status-badge--info {
  background: var(--theme-blue-50);
  color: var(--theme-blue-500);
  border-color: var(--ds-border-info);
}
.ds-status-badge--accent {
  background: var(--theme-accent-50);
  color: var(--theme-accent-600);
  border-color: var(--ds-border-accent);
}
.ds-status-badge__dot {
  width: 7px; height: 7px;
  border-radius: var(--theme-radius-full);
  background: currentColor;
}

/* ── styles/recipes/transaction-row ───────────────────────── */
/* Aqui o "transaction" é um auto de infração: um fato com data,
   valor e situação. A anatomia do componente serve igual. */
.ds-transaction-row {
  display: flex;
  align-items: center;
  gap: var(--theme-spacing-md);
  padding: var(--theme-spacing-md) var(--theme-spacing-sm);
  border-radius: var(--theme-radius-sm);
  margin: 0 calc(-1 * var(--theme-spacing-sm));
  transition: background var(--theme-motion-fast);
}
.ds-transaction-row:hover { background: var(--ds-surface-hover); }
.ds-transaction-row__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--theme-radius-full);
  flex-shrink: 0;
  font-size: var(--theme-font-size-xl);
  background: var(--theme-bg-tertiary);
  color: var(--ds-text-muted);
  border: 1px solid var(--ds-border-subtle);
}
.ds-transaction-row__icon-wrapper--debit {
  background: var(--theme-brand-50);
  color: var(--ds-color-brand);
  border-color: var(--ds-border-brand);
}
.ds-transaction-row__icon-wrapper--credit {
  background: var(--theme-green-50);
  color: var(--ds-color-success);
  border-color: var(--ds-border-success);
}
.ds-transaction-row__icon-wrapper--pending {
  background: var(--theme-amber-50);
  color: var(--ds-color-warning);
  border-color: var(--ds-border-warning);
}
.ds-transaction-row__icon-wrapper--danger {
  background: var(--theme-red-50);
  color: var(--ds-color-danger);
  border-color: var(--ds-border-danger);
}
.ds-transaction-row__content { flex: 1; min-width: 0; }
.ds-transaction-row__title {
  font-size: var(--theme-font-size-body-m);
  font-weight: var(--theme-font-weight-medium);
}
.ds-transaction-row__subtitle {
  font-size: var(--theme-font-size-body-s);
  color: var(--ds-text-muted);
  margin-top: var(--theme-spacing-2xs);
}
.ds-transaction-row__amount-wrapper { text-align: right; flex-shrink: 0; }
.ds-transaction-row__amount {
  font-family: var(--theme-font-mono);
  font-size: var(--theme-font-size-body-m);
  font-weight: var(--theme-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.ds-transaction-row__status {
  font-size: var(--theme-font-size-caption);
  color: var(--ds-text-muted);
  margin-top: var(--theme-spacing-2xs);
}

/* ── styles/recipes/list-item ─────────────────────────────── */
.ds-list-item {
  display: flex;
  align-items: center;
  gap: var(--theme-spacing-md);
  padding: var(--theme-spacing-sm);
  border-radius: var(--theme-radius-sm);
  margin: 0 calc(-1 * var(--theme-spacing-sm));
  transition: background var(--theme-motion-fast);
  color: inherit;
}
.ds-list-item:hover { background: var(--ds-surface-hover); text-decoration: none; color: inherit; }
.ds-list-item__leading {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--theme-radius-full);
  flex-shrink: 0;
  font-size: var(--theme-font-size-xl);
  background: var(--ds-surface-brand-subtle);
  color: var(--ds-color-brand);
  border: 1px solid var(--ds-border-brand);
}
.ds-list-item__leading--accent {
  background: var(--ds-surface-accent-subtle);
  color: var(--ds-color-accent);
  border-color: var(--ds-border-accent);
}
.ds-list-item__leading--danger {
  background: var(--ds-surface-danger-subtle);
  color: var(--ds-color-danger);
  border-color: var(--ds-border-danger);
}
.ds-list-item__content { flex: 1; min-width: 0; }
.ds-list-item__title {
  font-size: var(--theme-font-size-body-m);
  font-weight: var(--theme-font-weight-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-list-item__subtitle {
  font-size: var(--theme-font-size-body-s);
  color: var(--ds-text-muted);
}
.ds-list-item__trailing { flex-shrink: 0; display: flex; align-items: center; gap: var(--theme-spacing-sm); }


/* ── styles/recipes/progress-bar ──────────────────────────── */
.ds-progress-bar__track {
  width: 100%;
  height: 0.375rem;
  background: var(--theme-bg-tertiary);
  border-radius: var(--theme-radius-full);
  overflow: hidden;
}
.ds-progress-bar__fill {
  display: block;
  height: 100%;
  border-radius: var(--theme-radius-full);
  background: var(--ds-color-brand);
  box-shadow: 0 0 8px var(--ds-color-brand-glow);
  transition: width var(--theme-motion-smooth);
}
.ds-progress-bar--accent .ds-progress-bar__fill {
  background: var(--ds-color-accent);
  box-shadow: 0 0 8px var(--theme-accent-glow);
}
.ds-progress-bar__label-row {
  display: flex; justify-content: space-between;
  margin-bottom: var(--theme-spacing-xs);
  font-size: var(--theme-font-size-body-s);
}
.ds-progress-bar__label { color: var(--ds-text-muted); }
.ds-progress-bar__value { font-weight: var(--theme-font-weight-semibold); font-variant-numeric: tabular-nums; }

/* ── styles/recipes/empty-state ───────────────────────────── */
.ds-empty-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: var(--theme-spacing-2xl) var(--theme-spacing-xl);
}
.ds-empty-state__icon {
  display: flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem;
  border-radius: var(--theme-radius-full);
  background: var(--ds-surface-brand-subtle);
  border: 1px solid var(--ds-border-brand);
  color: var(--ds-color-brand);
  font-size: var(--theme-font-size-2xl);
  margin-bottom: var(--theme-spacing-lg);
}
.ds-empty-state__title {
  font-family: var(--theme-font-display);
  font-size: var(--theme-font-size-xl);
  font-weight: var(--theme-font-weight-bold);
  letter-spacing: -0.01em;
  margin-bottom: var(--theme-spacing-sm);
}
.ds-empty-state__description {
  font-size: var(--theme-font-size-body-m);
  color: var(--ds-text-muted);
  max-width: 30rem;
}

/* ── tabela (adaptação desktop do list-item) ──────────────── */
/* O Fusion não tem tabela: é mobile. A fila de 30 leads pede uma,
   então ela herda superfície, borda, tipografia e hover do sistema. */
.ds-table-wrap {
  background: var(--ds-surface-card);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--theme-radius-md);
  box-shadow: var(--theme-shadow-elevation-card);
  overflow-x: auto;
}
table { border-collapse: collapse; width: 100%; }
th, td {
  text-align: left;
  padding: var(--theme-spacing-sm) var(--theme-spacing-md);
  border-bottom: 1px solid var(--ds-border-subtle);
  vertical-align: middle;
}
th {
  font-size: var(--theme-font-size-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
  font-weight: var(--theme-font-weight-semibold);
  white-space: nowrap;
  background: var(--ds-surface-table-head);
}
td { font-size: var(--theme-font-size-body-s); }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--theme-motion-fast); }
tbody tr:hover { background: var(--ds-surface-hover); }
td.ds-num {
  font-family: var(--theme-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* score — o número é sempre o elemento de maior peso da linha */
.ds-score {
  font-family: var(--theme-font-display);
  font-size: var(--theme-font-size-lg);
  font-weight: var(--theme-font-weight-black);
  letter-spacing: -0.03em;
  color: var(--ds-color-brand);
  font-variant-numeric: tabular-nums;
}

/* ── métricas (balance display adaptado) ──────────────────── */
.ds-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--theme-spacing-sm);
}
.ds-metric {
  background: var(--ds-surface-glass);
  backdrop-filter: blur(var(--ds-glass-blur));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
  border: 1px solid var(--ds-border-glass);
  border-radius: var(--theme-radius-lg);
  padding: var(--theme-spacing-md);
  box-shadow: var(--ds-glass-inner-highlight);
}
.ds-metric__value {
  font-family: var(--theme-font-display);
  font-size: var(--theme-font-size-2xl);
  font-weight: var(--theme-font-weight-black);
  letter-spacing: -0.035em;
  line-height: var(--theme-line-height-tight);
  font-variant-numeric: tabular-nums;
}
.ds-metric__label {
  font-size: var(--theme-font-size-caption);
  color: var(--ds-text-muted);
  margin-top: var(--theme-spacing-2xs);
}
.ds-metric--brand .ds-metric__value { color: var(--ds-color-brand); }
.ds-metric--accent .ds-metric__value { color: var(--ds-color-accent); }

/* ── funil (kanban) ───────────────────────────────────────── */
.ds-funil {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: var(--theme-spacing-sm);
  overflow-x: auto;
  padding-bottom: var(--theme-spacing-sm);
}
.ds-funil__coluna {
  background: var(--ds-surface-glass);
  backdrop-filter: blur(var(--ds-glass-blur));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
  border: 1px solid var(--ds-border-glass);
  border-radius: var(--theme-radius-lg);
  padding: var(--theme-spacing-sm);
  min-height: 8rem;
}
.ds-funil__titulo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--theme-spacing-sm);
  padding: var(--theme-spacing-xs) var(--theme-spacing-xs) var(--theme-spacing-sm);
  font-family: var(--theme-font-display-light);
  font-size: var(--theme-font-size-body-s);
}
.ds-card-mini {
  display: block;
  background: var(--ds-surface-card);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--theme-radius-md);
  padding: var(--theme-spacing-sm);
  margin-bottom: var(--theme-spacing-xs);
  color: inherit;
  transition: transform var(--theme-motion-fast), border-color var(--theme-motion-fast),
              box-shadow var(--theme-motion-fast);
}
.ds-card-mini:hover {
  transform: translateY(-2px);
  border-color: var(--ds-border-glass-strong);
  box-shadow: var(--theme-shadow-md);
  text-decoration: none; color: inherit;
}
.ds-card-mini__nome {
  display: block;
  font-size: var(--theme-font-size-body-s);
  font-weight: var(--theme-font-weight-medium);
}
.ds-card-mini__meta {
  display: flex; align-items: center; gap: var(--theme-spacing-xs);
  flex-wrap: wrap;
  font-size: var(--theme-font-size-caption);
  color: var(--ds-text-muted);
  margin-top: var(--theme-spacing-2xs);
}

/* ── timeline (histórico do lead) ─────────────────────────── */
.ds-timeline { list-style: none; margin: 0; padding: 0; }
.ds-timeline li {
  position: relative;
  border-left: 1px solid var(--ds-border-default);
  padding: 0 0 var(--theme-spacing-md) var(--theme-spacing-md);
}
.ds-timeline li::before {
  content: "";
  position: absolute;
  left: -4.5px; top: 6px;
  width: 8px; height: 8px;
  border-radius: var(--theme-radius-full);
  background: var(--ds-color-brand);
  box-shadow: 0 0 8px var(--ds-color-brand-glow);
}
.ds-timeline__quando {
  font-size: var(--theme-font-size-caption);
  color: var(--ds-text-muted);
  display: flex; align-items: center; gap: var(--theme-spacing-xs); flex-wrap: wrap;
}