/* ============================================================================
   border-ds-components.css — COMPONENTS (cap.3) do DS da border ltd.
   Moléculas: composições de base components + tokens.
   Depende de border-ds.css + border-ds-base.css. Ordem de import:
       border-ds.css → border-ds-base.css → border-ds-components.css → border-ds-dataviz.css
   Namespace `.ds-*`. Fiel ao Figma (dABtuxiOaVOpSwgBhrwkEj).
   ============================================================================ */

/* ── AVATAR ───────────────────────────────────────────────────────────────
   Identidade visual de uma pessoa/conta. 3 tipos (photo/initials/icon) ×
   5 tamanhos (XS20 SM24 MD32 LG48 XL64). Circular (radius pill).             */
.ds-avatar {
  --avatar-size: 32px; --avatar-font: 13px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--avatar-size); height: var(--avatar-size);
  border-radius: var(--radius-pill, 999px); overflow: hidden; flex: none;
  /* Avatar não tem família própria no Figma → tokens existentes via var() */
  background: var(--color-bg-muted); color: var(--color-text-helper);
  font-family: var(--font-family-sans); font-weight: var(--font-weight-medium); font-size: var(--avatar-font);
  line-height: 1; user-select: none;
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-avatar svg { width: 60%; height: 60%; }
.ds-avatar--initials { background: var(--color-text); color: var(--color-text-inverse); }
.ds-avatar--xs { --avatar-size: 20px; --avatar-font: 9px; }
.ds-avatar--sm { --avatar-size: 24px; --avatar-font: 11px; }
.ds-avatar--md { --avatar-size: 32px; --avatar-font: 13px; }
.ds-avatar--lg { --avatar-size: 48px; --avatar-font: 18px; }
.ds-avatar--xl { --avatar-size: 64px; --avatar-font: 24px; }
.ds-avatar__status {
  position: absolute; right: 0; bottom: 0; width: 30%; height: 30%;
  background: var(--color-surface-accent);
  border: 2px solid var(--color-bg); border-radius: 50%;
}

/* ── CARD ─────────────────────────────────────────────────────────────────
   Agrupa conteúdo relacionado numa superfície elevada. Raio large, sombra
   soft, padding na escala. Variantes: default/highlight(verde)/dark/flat.     */
.ds-card {
  display: flex; flex-direction: column;
  padding: var(--spacing-inset-md, 32px);
  background: var(--color-background-card-default);
  border: 1px solid var(--color-border-card-default);
  border-radius: var(--radius-large, 8px);
  box-shadow: var(--shadow-soft);
}
/* hierarquia por ritmo: eyebrow (rótulo) → título (dominante) → corpo (apoio) → ação (separada) */
.ds-card__eyebrow { font-family: var(--font-family-sans); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-helper); margin: 0 0 14px; }
.ds-card__eyebrow--row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }  /* eyebrow + indicador (Tag) alinhado à direita */
.ds-card__title { font-family: var(--font-family-sans); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); line-height: 1.22; letter-spacing: -0.01em; color: var(--color-neutral-darkest); margin: 0 0 10px; }
.ds-card__body { font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: 1.55; color: var(--color-text-sub); margin: 0; }
.ds-card__action { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; font-family: var(--font-family-sans); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: var(--color-text); text-decoration: none; align-self: flex-start; }
.ds-card__action::after { content: '→'; transition: transform .15s var(--ease, ease); }
.ds-card__action:hover::after { transform: translateX(4px); }
.ds-card--highlight { background: var(--color-background-card-highlight); border-color: transparent; }
.ds-card--dark { background: var(--color-background-card-dark); border-color: transparent; }
.ds-card--highlight .ds-card__eyebrow, .ds-card--highlight .ds-card__title, .ds-card--highlight .ds-card__body, .ds-card--highlight .ds-card__action,
.ds-card--dark .ds-card__eyebrow, .ds-card--dark .ds-card__title, .ds-card--dark .ds-card__body, .ds-card--dark .ds-card__action {
  color: var(--color-text-inverse);
}
.ds-card--flat { background: var(--color-background-card-flat); border-color: var(--color-border-card-flat); box-shadow: none; }
.ds-card--flat .ds-card__eyebrow { color: var(--color-neutral-darkest); }

/* ── TABS ─────────────────────────────────────────────────────────────────
   Alterna seções na mesma tela. Uma aba ativa por vez, sublinhado primary
   2px. Inativas em text-dim, clicáveis. Gap small (24px).                     */
.ds-tabs {
  display: flex; gap: var(--spacing-inline-xxs, 24px);
  border-bottom: 1px solid var(--color-border);
}
.ds-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 0 0 var(--spacing-stack-mini, 12px); margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: 1.2;
  color: var(--color-text-helper);
  transition: color .15s var(--ease, ease), border-color .15s var(--ease, ease);
}
.ds-tab:hover { color: var(--color-neutral-darkest); border-bottom-color: var(--color-border-strong); }  /* sublinhado leve = preview do ativo */
/* foco = anel-duplo do DS (Button=ref; padrão WCAG da auditoria de a11y) */
.ds-tab:focus-visible { outline: none; border-radius: 2px; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
.ds-tab[aria-selected="true"], .ds-tab.is-active {
  color: var(--color-neutral-darkest); font-weight: var(--font-weight-medium);
  border-bottom-color: var(--color-background-tabs-underline-line);  /* sublinhado ativo (Figma: Tabs/underline/line) */
}
.ds-tab:disabled { color: var(--color-neutral-principal); cursor: not-allowed; }

/* ── DROPDOWN (select) ─────────────────────────────────────────────────────
   Dropdown customizado do DS. Lista de <option> nativa não é estilizável, então
   o JS enhanceSelect() esconde o <select> (que segue fonte de verdade: value +
   change) e desenha trigger + listbox.                                        */
.ds-select { position: relative; display: inline-block; min-width: 160px; }
.ds-select > select { display: none; }            /* nativo escondido, presente p/ value/change */
.ds-select__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: 48px; box-sizing: border-box; padding: 0 var(--spacing-inset-xs, 16px);
  /* trigger fechado — no Figma o campo reusa o Input: background/input/enabled (branco), NÃO bg-muted */
  background: var(--color-background-input-enabled); border: 1.5px solid var(--color-border-dropdown-field-closed-dropdown);
  border-radius: var(--radius-medium, 4px); color: var(--color-text);
  font-family: var(--font-family-sans); font-size: var(--font-size-md); line-height: 1.3; text-align: left; cursor: pointer;
  transition: border-color .15s var(--ease, ease);
}
/* aberto (Figma: State=Open) — borda 2px neutral-darkest + bg branco.
   SEM hover azul: o Figma não tem estado hover; o azul é só o anel de foco do teclado. */
.ds-select[data-open="true"] .ds-select__trigger { border-width: 2px; border-color: var(--color-neutral-darkest); background: var(--color-bg); }
/* foco = anel-duplo do DS (igual ao combo-box abaixo e ao Button=ref); o nó do Figma
   ainda mostra anel único deslocado — débito de parity a propagar pro Figma. */
.ds-select__trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
.ds-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-select__chevron { flex: 0 0 auto; width: 16px; height: 16px; color: var(--color-icon-dropdown-closed-dropdown); transition: transform .18s var(--ease, ease); }
.ds-select[data-open="true"] .ds-select__chevron { transform: rotate(180deg); }
.ds-select__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; min-width: 100%; margin: 0;
  /* Figma: <ul> sem padding — as opções vão de borda a borda; raio 2px */
  padding: 0; list-style: none; background: var(--color-background-dropdown-menu-open-dropdown);
  border: 1px solid var(--color-border-dropdown-menu-open-dropdown); border-radius: 2px;
  box-shadow: var(--shadow-medium); max-height: 280px; overflow-y: auto;
  animation: ds-select-in .16s var(--ease, ease);
}
.ds-select__menu[hidden] { display: none; }
@keyframes ds-select-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ds-select__option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-inline-nano, 8px);
  /* Figma: <li> de borda a borda (sem raio), padding 8/12, texto body 16/1.55 */
  padding: var(--spacing-stack-nano, 8px) var(--spacing-inset-mini, 12px); color: var(--color-text);
  font-family: var(--font-family-sans); font-size: var(--font-size-md); line-height: 1.55; cursor: pointer; white-space: nowrap;
}
/* Figma: hover/ativo E selecionada usam o mesmo fundo muted */
.ds-select__option:hover, .ds-select__option[data-active="true"], .ds-select__option[aria-selected="true"] { background: var(--color-background-dropdown-option-open-dropdown); }
/* selecionada = negrito (ajustado no Figma) + check */
.ds-select__option[aria-selected="true"] { font-weight: var(--font-weight-bold); }
.ds-select__check { flex: 0 0 auto; width: 16px; height: 16px; opacity: 0; color: var(--color-icon-dropdown-check-open-dropdown); }
.ds-select__option[aria-selected="true"] .ds-select__check { opacity: 1; }
.ds-select--sm { min-width: 0; }
/* small alinhado à régua densa do sistema (--sm = 40px, font sm), igual a .ds-input--sm/.ds-numberinput--sm.
   O Figma não tem variante small de Dropdown (só o campo de 48px) — esta é extensão de app denso. */
.ds-select--sm .ds-select__trigger { height: 40px; padding: 0 var(--spacing-inset-mini, 12px); font-size: var(--font-size-sm); }
/* disabled (Figma: dropdown/field/disabled-dropdown) — texto cai p/ neutral-principal (sem token de fg próprio) */
.ds-select__trigger:disabled { cursor: not-allowed; background: var(--color-background-dropdown-field-disabled-dropdown); border-color: var(--color-border-dropdown-field-disabled-dropdown); color: var(--color-neutral-principal); }
.ds-select__trigger:disabled:hover { border-color: var(--color-border-dropdown-field-disabled-dropdown); }
/* estados de campo — a borda do trigger muda; o helper acompanha via .ds-field */
.ds-select.is-error   .ds-select__trigger { background: var(--color-background-dropdown-field-error-dropdown); border-color: var(--color-border-dropdown-field-error-dropdown); }
.ds-select.is-warning .ds-select__trigger { background: var(--color-background-dropdown-field-warning-dropdown); border-color: var(--color-border-dropdown-field-warning-dropdown); }
.ds-select.is-readonly .ds-select__trigger { background: var(--color-background-dropdown-field-readonly-dropdown); border-color: var(--color-border-dropdown-field-readonly-dropdown); color: var(--color-text); cursor: default; }
.ds-select.is-readonly .ds-select__trigger:hover { border-color: var(--color-border-dropdown-field-readonly-dropdown); }
.ds-select.is-readonly .ds-select__chevron { display: none; }

/* COMBO-BOX — input de texto no lugar do value + botão limpar (×). Digita p/ filtrar. */
.ds-select__input {
  flex: 1 1 auto; min-width: 0; border: none; background: none; outline: none; padding: 0;
  font-family: var(--font-family-sans); font-size: var(--font-size-sm); color: var(--color-text); }
.ds-select__input::placeholder { color: var(--color-neutral-principal); }
.ds-select__clear {
  appearance: none; flex: none; width: 18px; height: 18px; display: grid; place-content: center;
  margin: 0 2px; padding: 0; border: none; background: none; border-radius: 50%;
  /* botão limpar (Figma: dropdown/icon/clear/open-combo-box → text-sub) */
  color: var(--color-icon-dropdown-clear-open-combo-box); cursor: pointer;
}
.ds-select__clear svg { width: 13px; height: 13px; }
.ds-select__clear:hover { color: var(--color-neutral-darkest); }
.ds-select__clear[hidden] { display: none; }
.ds-select__empty { padding: 10px; color: var(--color-text-helper); font-size: var(--font-size-sm); font-style: italic; }
/* combo aberto (Figma: dropdown/field/open-combo-box → stroke-focus) */
.ds-select--combo .ds-select__trigger:focus-within { outline: none; border-color: var(--color-border-dropdown-field-open-combo-box); box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }

/* MULTISELECT — cada opção tem checkbox; a marca é o box, não o fundo. */
.ds-select__box {
  flex: none; width: 16px; height: 16px; display: grid; place-content: center;
  /* box do multiselect (Figma: dropdown/box/open-multiselect → border-strong, bg) */
  border: 1.5px solid var(--color-border-dropdown-box-open-multiselect); border-radius: var(--radius-small, 2px);
  background: var(--color-background-dropdown-box-open-multiselect);
}
.ds-select__box::before {
  content: ''; width: 9px; height: 9px; transform: scale(0);
  background: var(--color-text-inverse);
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 18%, 84% 4%, 38% 70%);
  transition: transform .1s var(--ease, ease);
}
.ds-select--multi .ds-select__option { justify-content: flex-start; gap: 10px; }
.ds-select--multi .ds-select__option[aria-selected="true"] { background: transparent; font-weight: var(--font-weight-regular); }
.ds-select--multi .ds-select__option[aria-selected="true"]:hover { background: var(--color-background-dropdown-option-open-multiselect); }
.ds-select--multi .ds-select__option[aria-selected="true"] .ds-select__box { background: var(--color-brand-primary); border-color: var(--color-brand-primary); }
.ds-select--multi .ds-select__option[aria-selected="true"] .ds-select__box::before { transform: scale(1); }

/* ── BANNER (alert) ─────────────────────────────────────────────────────────
   Mensagem de feedback no nível da página/seção (≠ Toast efêmero). Tint
   funcional + barra de acento + ícone obrigatório (nunca só por cor) + texto
   escuro AA. Variantes: info(neutro)/success/warning/danger.                  */
.ds-banner {
  display: flex; align-items: center; gap: var(--spacing-inline-mini, 12px);     /* Figma 169:101: conteúdo items-center */
  padding: var(--spacing-inset-xs, 16px);                                       /* Figma: 16 em volta */
  border: 1px solid transparent; border-left-width: 4px;                        /* Figma: barra 4px */
  border-radius: var(--radius-large, 8px);                                      /* Figma: radius/large */
  font-family: var(--font-family-sans); font-size: var(--font-size-sm); line-height: 1.5;
  color: var(--color-text-primary);
}
.ds-banner__icon { flex: none; width: 24px; height: 24px; }
.ds-banner__icon svg { width: 100%; height: 100%; display: block; }
.ds-banner__icon i { font-size: 24px; line-height: 1; }
.ds-banner__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-stack-micro, 2px); }   /* Figma 169:104: coluna, gap 2px */
.ds-banner__title { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.22; color: var(--color-text-primary); margin: 0; }
.ds-banner__text { margin: 0; font-family: var(--font-family-caption, var(--font-family-sans)); font-size: var(--font-size-xs); line-height: 1.45; color: var(--color-text-sub); }
/* ação = botão ghost (h40, px16/py8, 16px bold) à direita — Figma 809:125 */
.ds-banner__action { display: inline-flex; flex: none; align-items: center; gap: var(--spacing-inline-nano, 8px); height: 40px; margin: 0; padding: var(--spacing-stack-nano, 8px) var(--spacing-inline-xxxs, 16px); border: none; border-radius: var(--radius-medium, 4px); background: var(--color-background-button-ghost-enabled); font-family: var(--font-family-button); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.2; color: var(--color-text-primary); text-decoration: none; white-space: nowrap; cursor: pointer; }
.ds-banner__action:hover { background: var(--color-background-button-ghost-hover); }
.ds-banner__close {
  appearance: none; flex: none; width: 36px; height: 36px; padding: 0; margin: 0;
  display: grid; place-content: center; background: none; border: none; border-radius: var(--radius-small, 2px);
  color: var(--color-text-helper); cursor: pointer;
}
.ds-banner__close svg { width: 20px; height: 20px; }
.ds-banner__close i { font-size: 20px; line-height: 1; }
.ds-banner__close:hover { color: var(--color-neutral-darkest); }
.ds-banner__close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
/* tint + barra + ícone por intenção — tokens por-componente (espelho do Figma) */
/* LOW CONTRAST (padrão) — fundo tint claro, texto escuro */
.ds-banner--info    { background: var(--color-background-banner-neutral-low); border-color: var(--color-border-banner-neutral-low); border-left-color: var(--color-background-banner-bar-neutral-low); }
.ds-banner--info    .ds-banner__icon { color: var(--color-icon-banner-neutral-low); }
.ds-banner--success { background: var(--color-background-banner-success-low); border-color: var(--color-border-banner-success-low); border-left-color: var(--color-background-banner-bar-success-low); }
.ds-banner--success .ds-banner__icon { color: var(--color-icon-banner-success-low); }
.ds-banner--warning { background: var(--color-background-banner-warning-low); border-color: var(--color-border-banner-warning-low); border-left-color: var(--color-background-banner-bar-warning-low); }
.ds-banner--warning .ds-banner__icon { color: var(--color-icon-banner-warning-low); }
.ds-banner--danger  { background: var(--color-background-banner-error-low); border-color: var(--color-border-banner-error-low); border-left-color: var(--color-background-banner-bar-error-low); }
.ds-banner--danger  .ds-banner__icon { color: var(--color-icon-banner-error-low); }
/* BRAND — superfície de acento (verde pinheiro), ícone e texto inverso */
.ds-banner--brand { background: var(--color-background-banner-brand-low); border-color: transparent; border-left-color: var(--color-background-banner-bar-brand-low); color: var(--color-text-on-accent); }
.ds-banner--brand .ds-banner__icon { color: var(--color-icon-banner-brand-low); }
/* HIGH CONTRAST — fundo escuro (surface-dark), texto inverso; usa .ds-banner--high + variante de severidade */
.ds-banner--high { color: var(--color-text-inverse); }
.ds-banner--high .ds-banner__title { color: var(--color-text-inverse); }
.ds-banner--high .ds-banner__action { color: var(--color-text-inverse); }
.ds-banner--high .ds-banner__action:hover { background: rgba(255,255,255,.12); }
.ds-banner--high .ds-banner__text { color: var(--color-text-inverse); opacity: 0.85; }
.ds-banner--high .ds-banner__close { color: var(--color-text-inverse); opacity: 0.7; }
.ds-banner--high .ds-banner__close:hover { opacity: 1; }
.ds-banner--info.ds-banner--high    { background: var(--color-background-banner-neutral-high); border-color: var(--color-border-banner-neutral-high); border-left-color: var(--color-background-banner-bar-neutral-high); }
.ds-banner--info.ds-banner--high    .ds-banner__icon { color: var(--color-icon-banner-neutral-high); }
.ds-banner--success.ds-banner--high { background: var(--color-background-banner-success-high); border-color: var(--color-border-banner-success-high); border-left-color: var(--color-background-banner-bar-success-high); }
.ds-banner--success.ds-banner--high .ds-banner__icon { color: var(--color-icon-banner-success-high); }
.ds-banner--warning.ds-banner--high { background: var(--color-background-banner-warning-high); border-color: var(--color-border-banner-warning-high); border-left-color: var(--color-background-banner-bar-warning-high); }
.ds-banner--warning.ds-banner--high .ds-banner__icon { color: var(--color-icon-banner-warning-high); }
.ds-banner--danger.ds-banner--high  { background: var(--color-background-banner-error-high); border-color: var(--color-border-banner-error-high); border-left-color: var(--color-background-banner-bar-error-high); }
.ds-banner--danger.ds-banner--high  .ds-banner__icon { color: var(--color-icon-banner-error-high); }

/* ── MENU ────────────────────────────────────────────────────────────────────
   Lista flutuante de AÇÕES disparada por um gatilho (≠ Dropdown, que pega valor).
   Itens com ícone, selecionável (✓), submenu (›), divisor e ação danger (Sair).  */
.ds-menu-wrap { position: relative; display: inline-block; }
.ds-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 220px;
  margin: 0; padding: 6px; list-style: none;
  background: var(--color-background-menu-enabled); border: 1px solid var(--color-border-menu-enabled);
  border-radius: var(--radius-medium, 4px); box-shadow: var(--shadow-medium);
  animation: ds-select-in .16s var(--ease, ease);
}
.ds-menu[hidden] { display: none; }
.ds-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 9px 10px; border: none; background: none; border-radius: var(--radius-small, 2px);
  font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: 1.2;
  color: var(--color-text); text-align: left; text-decoration: none; cursor: pointer;
}
.ds-menu__item:hover { background: var(--color-background-menu-item-enabled); }
.ds-menu__item:focus-visible { outline: none; background: var(--color-background-menu-item-enabled); box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
.ds-menu__ico { flex: none; width: 18px; height: 18px; display: grid; place-content: center; color: var(--color-icon-menu-submenu-enabled); }
.ds-menu__ico svg { width: 100%; height: 100%; }
.ds-menu__check { flex: none; width: 16px; height: 16px; opacity: 0; color: var(--color-icon-menu-check-enabled); }
.ds-menu__item[aria-checked="true"] .ds-menu__check { opacity: 1; }
.ds-menu__sub { flex: none; margin-left: auto; color: var(--color-icon-menu-submenu-enabled); }
.ds-menu__shortcut { margin-left: auto; font-size: var(--font-size-xs); color: var(--color-text-helper); }
.ds-menu__label { padding: 8px 10px 4px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-helper); }
.ds-menu__sep { height: 1px; margin: 6px 4px; background: var(--color-background-menu-divider-enabled); border: none; }
.ds-menu__item--danger { color: var(--color-danger); }
.ds-menu__item--danger .ds-menu__ico { color: var(--color-danger); }
.ds-menu__item:disabled, .ds-menu__item[aria-disabled="true"] { color: var(--color-neutral-principal); cursor: not-allowed; }
.ds-menu__item:disabled:hover { background: none; }

/* ── POPOVER ─────────────────────────────────────────────────────────────────
   Painel contextual ancorado a um gatilho, com seta apontando pra fora. 4 direções.
   Conteúdo rico: título + corpo + ação (≠ Tooltip, que é só dica curta).         */
.ds-popover-wrap { position: relative; display: inline-block; }
.ds-popover {
  position: absolute; z-index: 50; width: 320px; padding: var(--spacing-inset-xs, 16px);
  display: flex; flex-direction: column; gap: var(--spacing-stack-nano, 8px);   /* Figma 587:12: column, gap stack/nano */
  background: var(--color-background-popover); border: 1px solid var(--color-border-popover);
  border-radius: var(--radius-medium, 4px); box-shadow: var(--shadow-medium);
  animation: ds-select-in .16s var(--ease, ease);
}
.ds-popover[hidden] { display: none; }
.ds-popover--bottom { top: calc(100% + 10px); left: 0; }
.ds-popover--top    { bottom: calc(100% + 10px); left: 0; }
.ds-popover--right  { left: calc(100% + 10px); top: 0; }
.ds-popover--left   { right: calc(100% + 10px); top: 0; }
.ds-popover::before { content: ''; position: absolute; width: 12px; height: 12px; background: var(--color-background-popover-arrow); border: 1px solid var(--color-border-popover); transform: rotate(45deg); }
.ds-popover--bottom::before { top: -7px; left: 20px; border-right: none; border-bottom: none; }
.ds-popover--top::before    { bottom: -7px; left: 20px; border-left: none; border-top: none; }
.ds-popover--right::before  { left: -7px; top: 18px; border-right: none; border-top: none; }
.ds-popover--left::before   { right: -7px; top: 18px; border-left: none; border-bottom: none; }
.ds-popover__header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-inline-nano, 8px); }   /* Figma 587:13: items center, gap inline/nano */
.ds-popover__title { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.22; color: var(--color-text); margin: 0; }
/* botão fechar = icon button escuro (bg #212121, ícone branco 16px), círculo 24px — Figma 4024:3450 */
.ds-popover__close { appearance: none; flex: none; width: 24px; height: 24px; padding: 0; display: grid; place-content: center; background: var(--color-background-button-icon-enabled); border: none; border-radius: var(--radius-pill, 999px); color: var(--color-icon-button-icon-enabled); cursor: pointer; }
.ds-popover__close svg { width: 16px; height: 16px; }
.ds-popover__close i { font-size: 16px; line-height: 1; }
.ds-popover__close:hover { background: var(--color-background-button-icon-hover); }
.ds-popover__close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
.ds-popover__body { font-family: var(--font-family-sans); font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-text-sub); margin: 0; }
/* ação = link bold flush (sem padding/altura, 16px, cor text/primary), seta animada — Figma 808:33 */
.ds-popover__action { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--spacing-inline-nano, 8px); margin: 0; padding: 0; border: none; background: none; font-family: var(--font-family-button); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.2; color: var(--color-text-primary); text-decoration: none; cursor: pointer; }
.ds-popover__action::after { content: '→'; transition: transform .15s var(--ease, ease); }
.ds-popover__action:hover::after { transform: translateX(4px); }

/* ── TABLE ──────────────────────────────────────────────────────────────────
   Dados tabulares: card + cabeçalho de coluna (bg-muted, overline) + linhas
   densas. Compõe Avatar e Tag. Fiel ao Figma (2096:3).
   Estrutura: <div class="ds-table">[<div class="ds-table__head">…</div>]<table>…</table></div>
   Coluna numérica = th/td.num (direita); coluna de data = td.ds-table__date (mono). */
.ds-table {
  background: var(--color-bg);
  color: var(--color-text);                           /* cor base herdada — classes de célula (ex.: positivo/negativo) sobrescrevem */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium, 4px);
  overflow: hidden;                                   /* clipa os cantos do <table> interno */
}
/* cabeçalho opcional do card (título + subtítulo + ação) */
.ds-table__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-inline-xxs, 24px);
  padding: 20px var(--spacing-inset-sm, 24px) 18px;
}
.ds-table__title { margin: 0; font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.22; color: var(--color-text); }
.ds-table__sub   { margin: 3px 0 0; font-family: var(--font-family-caption); font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); line-height: 1.45; color: var(--color-text-helper); }
.ds-table__action { font-family: var(--font-family-sans); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); line-height: 1.2; color: var(--color-text); text-decoration: none; white-space: nowrap; }

.ds-table table { width: 100%; border-collapse: collapse; }
/* cabeçalho de coluna */
.ds-table thead th {
  background: var(--color-bg-muted);
  font-family: var(--font-family-overline); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs); line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-helper); text-align: left; white-space: nowrap;
  padding: 10px var(--spacing-inset-sm, 24px);
}
/* linhas densas + divisória */
.ds-table tbody td {
  padding: 14px var(--spacing-inset-sm, 24px);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-family-sans); font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm); line-height: 1.2;
  vertical-align: middle;
}
.ds-table tbody tr:last-child td { border-bottom: none; }
/* hover de linha (tabela de dados) — não afeta GRUPO/total (já são bg-muted) */
.ds-table tbody tr:hover td { background: var(--color-bg-muted); }
/* coluna numérica → direita + mono + sem quebra (números tabulares alinham por dígito; estilo `data` do DS) */
.ds-table th.num, .ds-table td.num { text-align: right; white-space: nowrap; }
.ds-table td.num { font-family: var(--font-family-mono); }
/* variante numérica/financeira: alinha tudo à direita por padrão (1ª col à esquerda), como uma tabela de números.
   Extensão p/ apps densos — o Figma Table é geral (esquerda + .num); aqui a maioria das colunas é número. */
.ds-table--num th, .ds-table--num td { text-align: right; }
.ds-table--num th:first-child, .ds-table--num td:first-child { text-align: left; }
/* coluna de data → mono, cor auxiliar */
.ds-table td.ds-table__date { font-family: var(--font-family-mono); font-weight: var(--font-weight-regular); line-height: 1.6; color: var(--color-text-helper); }
/* tabela larga: rolagem horizontal mantendo os cantos arredondados */
.ds-table--scroll { overflow-x: auto; }
/* célula cliente: avatar + (nome forte / id auxiliar) */
.ds-table__cliente { display: flex; align-items: center; gap: 10px; }
.ds-table__id { display: block; margin-top: 2px; font-family: var(--font-family-caption); font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); line-height: 1.45; color: var(--color-text-helper); }
/* linha de grupo (ex.: mês) e de total — extensão p/ tabelas densas de dados */
.ds-table tbody tr.ds-table__group td {
  background: var(--color-bg-muted); font-family: var(--font-family-overline); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-helper);
}
.ds-table tbody tr.ds-table__total td { font-weight: var(--font-weight-bold); color: var(--color-text); background: var(--color-bg-muted); }

/* ── KPI / Stat card (Figma 1287:69) ────────────────────────────────────────
   Card de indicador: linha de topo (chip de ícone + Delta), rótulo overline,
   valor grande (ds-h4) e sparkline opcional. Compõe o .ds-delta já existente.
   Slots opcionais: __top/__chip/__spark e __sub (linha auxiliar). Tudo o que
   não for preenchido simplesmente não aparece — serve tanto o KPI rico do
   dashboard quanto o KPI enxuto (rótulo + valor + auxiliar) dos apps densos.
   Extensão de app denso: --sm (valor ds-h5, p/ grades com muitos cards). */
.ds-stat {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-medium, 4px);
  padding: 18px var(--spacing-inset-sm, 20px);
}
/* topo: chip de ícone (esquerda) + Delta (direita) */
.ds-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.ds-stat__chip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--color-bg-muted); color: var(--color-text);
}
.ds-stat__chip svg, .ds-stat__chip img { width: 20px; height: 20px; display: block; }
/* rótulo overline (.ds-overline) */
.ds-stat__label {
  margin: 0; font-family: var(--font-family-overline); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs); line-height: 1.2; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-helper);
}
/* valor grande (.ds-h4) */
.ds-stat__value {
  margin: 0; font-family: var(--font-family-headings); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl); line-height: 1.18; letter-spacing: -0.005em; color: var(--color-text);
}
/* linha auxiliar (descrição curta abaixo do valor) */
.ds-stat__sub {
  margin: 0; font-family: var(--font-family-caption); font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs); line-height: 1.45; color: var(--color-text-helper);
}
/* sparkline ocupa a largura, altura fixa do Figma */
.ds-stat__spark { width: 100%; height: 34px; }
.ds-stat__spark svg { display: block; width: 100%; height: 100%; }
/* densa: valor menor (ds-h5) p/ grades com muitos KPIs */
.ds-stat--sm .ds-stat__value { font-size: var(--font-size-xl); line-height: 1.2; letter-spacing: 0; }
/* hero: card escuro de ênfase (KPI manchete) — extensão além do KPI branco do Figma,
   usada por board + financeiro. Usa tokens BASE (não apelidos) p/ ser portável e passar
   o audit de tokens; --sidebar-fg/-muted são só apelidos destes. */
.ds-stat--hero { background: var(--color-surface-dark); border-color: var(--color-surface-dark); color: var(--color-text-inverse); }
.ds-stat--hero .ds-stat__label, .ds-stat--hero .ds-stat__sub { color: var(--color-text-inverse-muted); }
.ds-stat--hero .ds-stat__value { color: var(--color-text-inverse); }

/* ── BREADCRUMB ───────────────────────────────────────────────────────────────
   Trilha de navegação hierárquica. Itens-link em --color-text (verde da marca),
   separador "/" auxiliar, último item = página atual (Medium, neutral-darkest,
   sem link). Sem tokens próprios no Figma → genéricos (padrão Avatar). (265:129) */
.ds-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-inline-nano, 8px); margin: 0; padding: 0; list-style: none; }
.ds-breadcrumb__item { display: inline-flex; align-items: center; padding: 2px; font-family: var(--font-family-sans); font-size: var(--font-size-md); line-height: 1.3; color: var(--color-text); text-decoration: none; border-radius: 2px; }
.ds-breadcrumb__item:hover { text-decoration: underline; text-underline-offset: 2px; }
.ds-breadcrumb__item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
.ds-breadcrumb__sep { flex: none; font-size: var(--font-size-sm); line-height: 1; color: var(--color-text-helper); user-select: none; }
/* item atual = página em que se está (Figma: Medium 14, neutral-darkest, não é link) */
.ds-breadcrumb__current { display: inline-flex; align-items: center; padding: 2px; font-family: var(--font-family-sans); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); line-height: 1.3; color: var(--color-neutral-darkest); }

/* ── PAGINATION ───────────────────────────────────────────────────────────────
   Navegação entre páginas de uma lista. Células 36×36 (raio medium), página ativa
   em bg da marca + texto inverso (Medium); setas prev/next + reticências. Rodapé
   opcional "itens por página" (reusa .ds-select--sm) + range. Fiel ao Figma (262:137). */
.ds-pagination { display: flex; align-items: center; gap: var(--spacing-inline-xxs, 24px); flex-wrap: wrap; }
.ds-pagination__nav { display: flex; align-items: center; gap: var(--spacing-inline-nano, 8px); margin: 0; padding: 0; list-style: none; }
.ds-pagination__page {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; box-sizing: border-box; padding: 0;
  appearance: none; background: none; border: none; border-radius: var(--radius-medium, 4px);
  font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: 1;
  color: var(--color-text); text-decoration: none; cursor: pointer;
  transition: background .12s var(--ease, ease), color .12s var(--ease, ease);
}
.ds-pagination__page:hover { background: var(--color-bg-muted); }
.ds-pagination__page:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
/* página atual (Figma: bg pages-enabled = marca, texto inverso, Medium) */
.ds-pagination__page[aria-current="page"], .ds-pagination__page.is-active {
  background: var(--color-background-pagination-pages-enabled); color: var(--color-text-inverse); font-weight: var(--font-weight-medium);
}
.ds-pagination__page[aria-current="page"]:hover { background: var(--color-background-pagination-pages-enabled); }
.ds-pagination__page:disabled, .ds-pagination__page[aria-disabled="true"] { color: var(--color-neutral-principal); cursor: not-allowed; }
.ds-pagination__page:disabled:hover { background: none; }
.ds-pagination__page svg { width: 16px; height: 16px; color: var(--color-icon-pagination-enabled); }
.ds-pagination__ellipsis { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--color-text-helper); user-select: none; }
/* rodapé: itens por página + range */
.ds-pagination__meta { display: flex; align-items: center; gap: var(--spacing-inline-xxxs, 16px); }
.ds-pagination__label, .ds-pagination__range { font-family: var(--font-family-sans); font-size: var(--font-size-xs); line-height: 1.2; color: var(--color-text-sub); white-space: nowrap; }
.ds-pagination__divider { flex: none; width: 1px; height: 20px; background: var(--color-background-pagination-divider-enabled); }

/* ── TOAST ────────────────────────────────────────────────────────────────────
   Notificação efêmera (≠ Banner, que fica na página). Card ESCURO p/ todos os tons
   (só o ponto muda de cor), título Bold + mensagem + legenda de tempo, botão fechar.
   Tons: info/success/warning/danger. Fiel ao Figma (363:3). Reusa ds-select-in.    */
.ds-toast {
  display: flex; align-items: center; gap: var(--spacing-inline-mini, 12px);                /* Figma 363:3: items-center */
  width: 380px; max-width: 100%; box-sizing: border-box;
  padding: var(--spacing-stack-mini, 12px) var(--spacing-inset-xs, 16px);
  background: var(--color-background-toast-info); border-radius: var(--radius-large, 8px);
  box-shadow: var(--shadow-medium); color: var(--color-text-inverse);
  animation: ds-select-in .16s var(--ease, ease);
}
.ds-toast__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-background-toast-dot-info); }
.ds-toast__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-stack-micro, 2px); }
.ds-toast__title { font-family: var(--font-family-sans); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); line-height: 1.5; margin: 0; }
.ds-toast__msg { font-family: var(--font-family-caption, var(--font-family-sans)); font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); line-height: 1.45; color: inherit; margin: 0; }
.ds-toast__time { font-family: var(--font-family-caption, var(--font-family-sans)); font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); line-height: 1.45; color: var(--color-text-disabled, var(--color-neutral-principal)); margin: 0; }
.ds-toast__close {
  appearance: none; flex: none; width: 32px; height: 32px; padding: 0;
  display: grid; place-content: center; background: rgba(255,255,255,.12); border: none; border-radius: 50%;
  color: var(--color-text-inverse); cursor: pointer;
}
.ds-toast__close svg { width: 16px; height: 16px; }
.ds-toast__close i { font-size: 16px; line-height: 1; }
.ds-toast__close:hover { background: rgba(255,255,255,.2); }
.ds-toast__close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface-dark), 0 0 0 4px var(--color-focus-ring); }
/* tons — bg sempre escuro (token por tom, espelho do Figma); o ponto carrega a cor */
.ds-toast--info    { background: var(--color-background-toast-info); }
.ds-toast--info    .ds-toast__dot { background: var(--color-background-toast-dot-info); }
.ds-toast--success { background: var(--color-background-toast-success); }
.ds-toast--success .ds-toast__dot { background: var(--color-background-toast-dot-success); }
.ds-toast--warning { background: var(--color-background-toast-warning); }
.ds-toast--warning .ds-toast__dot { background: var(--color-background-toast-dot-warning); }
.ds-toast--danger  { background: var(--color-background-toast-error); }
.ds-toast--danger  .ds-toast__dot { background: var(--color-background-toast-dot-error); }

/* ── TOOLTIP ──────────────────────────────────────────────────────────────────
   Dica curta ancorada a um gatilho (≠ Popover, que tem conteúdo rico). Card escuro,
   texto 12 inverso, seta apontando pra fora. 4 direções. Fiel ao Figma (365:3).     */
.ds-tooltip-wrap { position: relative; display: inline-block; }
.ds-tooltip {
  position: absolute; z-index: 60; max-width: 240px; width: max-content; padding: var(--spacing-stack-nano, 8px) var(--spacing-inset-mini, 10px);
  background: var(--color-background-tooltip-top); border-radius: var(--radius-medium, 4px);
  color: var(--color-text-inverse); font-family: var(--font-family-sans); font-size: var(--font-size-xs); line-height: 1.35;
  box-shadow: var(--shadow-soft);
  /* escondido por padrão; revela no hover/foco do gatilho (sem JS). Respeita reduced-motion. */
  opacity: 0; visibility: hidden; transition: opacity .14s var(--ease, ease), visibility .14s var(--ease, ease);
}
.ds-tooltip-wrap:hover > .ds-tooltip, .ds-tooltip-wrap:focus-within > .ds-tooltip { opacity: 1; visibility: visible; }
/* forçar visível (demos/doc): .ds-tooltip.is-open */
.ds-tooltip.is-open { opacity: 1; visibility: visible; }
.ds-tooltip[hidden] { display: none; }
.ds-tooltip::before { content: ''; position: absolute; width: 10px; height: 10px; background: var(--color-background-tooltip-arrow-top); transform: rotate(45deg); }
.ds-tooltip--top    { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.ds-tooltip--top::before    { bottom: -5px; left: 50%; margin-left: -5px; }
.ds-tooltip--bottom { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.ds-tooltip--bottom::before { top: -5px; left: 50%; margin-left: -5px; }
.ds-tooltip--left   { right: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.ds-tooltip--left::before   { right: -5px; top: 50%; margin-top: -5px; }
.ds-tooltip--right  { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.ds-tooltip--right::before  { left: -5px; top: 50%; margin-top: -5px; }

/* ── EMPTY STATE ──────────────────────────────────────────────────────────────
   Estado vazio: o que aparece quando não há conteúdo. Ilustração circular +
   título + descrição + ação (reusa .ds-btn). Centralizado. Fiel ao Figma (374:3). */
.ds-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-stack-xxxs, 16px);
  padding: var(--spacing-stack-md, 48px); text-align: center;
}
.ds-empty__figure {
  display: grid; place-content: center; width: 72px; height: 72px; border-radius: 50%;
  background: var(--color-background-empty-state-illustration-enabled); color: var(--color-text-helper);
}
.ds-empty__figure svg { width: 32px; height: 32px; }
.ds-empty__title { margin: 0; font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-2xl); line-height: 1.18; letter-spacing: -0.01em; color: var(--color-neutral-darkest); }
.ds-empty__text { margin: 0; max-width: 42ch; font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: 1.55; color: var(--color-text-sub); }
.ds-empty__action { margin-top: var(--spacing-stack-nano, 8px); }

/* ── ACCORDION ────────────────────────────────────────────────────────────────
   Lista de seções expansíveis. Cabeçalho clicável (título Bold + chevron que gira)
   + painel. Itens separados por hairline. 3 tamanhos (só o padding do cabeçalho
   muda: SM12 / MD16 / LG24). Fiel ao Figma (372:3). Foco anel-duplo no cabeçalho.  */
/* Figma 3333:156: grupo = card com borda + cantos arredondados; itens com divisória;
   header/painel com padding 16 (MD). NÃO é mais flush. Hover = bg-muted. */
.ds-accordion { background: var(--color-background-accordion-md); border: 1px solid var(--color-border-accordion-md); border-radius: var(--radius-medium, 4px); overflow: hidden; }
.ds-accordion__item { border-bottom: 1px solid var(--color-border-accordion-item-md); }
.ds-accordion__item:last-child { border-bottom: none; }
.ds-accordion__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-inline-mini, 12px);
  width: 100%; box-sizing: border-box; padding: var(--spacing-inset-xs, 16px);
  appearance: none; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.22; color: var(--color-text);
  transition: background .15s var(--ease, ease);
}
.ds-accordion__header:hover { background: var(--color-bg-muted); }
.ds-accordion__header:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-bg), inset 0 0 0 4px var(--color-focus-ring); }
.ds-accordion__chevron { flex: none; width: 16px; height: 16px; color: var(--color-icon-accordion-md); transition: transform .18s var(--ease, ease); }
.ds-accordion__item[open] .ds-accordion__chevron, .ds-accordion__item.is-open .ds-accordion__chevron { transform: rotate(180deg); }
.ds-accordion__panel { padding: 0 var(--spacing-inset-xs, 16px) var(--spacing-inset-xs, 16px); font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: 1.55; color: var(--color-text-sub); }
.ds-accordion__panel[hidden] { display: none; }
/* tamanhos — respiro vertical do cabeçalho (Figma: SM12 / MD16 / LG24), horizontal 16 */
.ds-accordion--sm .ds-accordion__header { padding: var(--spacing-stack-mini, 12px) var(--spacing-inset-xs, 16px); }
.ds-accordion--lg .ds-accordion__header { padding: var(--spacing-stack-xxs, 24px) var(--spacing-inset-xs, 16px); }

/* ── STEPPER (quantity) ───────────────────────────────────────────────────────
   Seletor de quantidade: − [valor] +. Caixa com borda + divisores entre células.
   3 tamanhos (MD=base: célula 40 / SM 32 / LG 48). Estado disabled. Fiel ao Figma
   (277:3 — "Quantity stepper"). Foco INSET (a caixa clipa os cantos).               */
.ds-stepper {
  --step-cell: 40px; --step-val: 52px; --step-icon: 20px;
  display: inline-flex; align-items: stretch; height: var(--step-cell);
  background: var(--color-background-stepper-md-default);
  border: 1px solid var(--color-border-stepper-md-default); border-radius: var(--radius-medium, 4px);
  overflow: hidden;
}
.ds-stepper__btn {
  appearance: none; flex: none; width: var(--step-cell); display: grid; place-content: center;
  background: none; border: none; cursor: pointer; color: var(--color-icon-stepper-md-default);
  font-family: var(--font-family-sans); font-size: var(--step-icon); line-height: 1; user-select: none;
  transition: background .12s var(--ease, ease);
}
.ds-stepper__btn:hover { background: var(--color-bg-muted); }
.ds-stepper__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-focus-ring); }
.ds-stepper__value {
  flex: none; width: var(--step-val); display: grid; place-content: center;
  border-left: 1px solid var(--color-background-stepper-divider-md-default);
  border-right: 1px solid var(--color-background-stepper-divider-md-default);
  font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); color: var(--color-text);
}
.ds-stepper__value input { width: 100%; border: none; background: none; outline: none; text-align: center; font: inherit; color: inherit; padding: 0; -moz-appearance: textfield; }
.ds-stepper__value input::-webkit-outer-spin-button, .ds-stepper__value input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* tamanhos (Figma: SM 32/44/18·14 — MD 40/52/20·15 — LG 48/60/22·16) */
.ds-stepper--sm { --step-cell: 32px; --step-val: 44px; --step-icon: 18px; }
.ds-stepper--lg { --step-cell: 48px; --step-val: 60px; --step-icon: 22px; }
.ds-stepper--lg .ds-stepper__value { font-size: var(--font-size-md); }
/* disabled — bg-muted, borda fraca, ícones helper, divisores fracos */
.ds-stepper.is-disabled { background: var(--color-background-stepper-md-disabled); border-color: var(--color-border-stepper-md-disabled); }
.ds-stepper.is-disabled .ds-stepper__btn { color: var(--color-icon-stepper-md-disabled); cursor: not-allowed; }
.ds-stepper.is-disabled .ds-stepper__btn:hover { background: none; }
.ds-stepper.is-disabled .ds-stepper__value { border-color: var(--color-background-stepper-divider-md-disabled); color: var(--color-text-helper); }

/* ── DIALOG (modal) ───────────────────────────────────────────────────────────
   Janela modal sobre scrim. Header (título + fechar) + corpo + ações. Largura por
   tamanho (MD=base 480 / SM 380 / LG 600). Botões reusam .ds-btn: cancelar=ghost,
   confirmar=primary (tom danger → confirmar=destructive). Fiel ao Figma (355:3).   */
.ds-dialog {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: var(--spacing-inset-xs, 16px); background: var(--color-background-overlay);
  animation: ds-dialog-fade .16s var(--ease, ease);
}
.ds-dialog[hidden] { display: none; }
@keyframes ds-dialog-fade { from { opacity: 0; } to { opacity: 1; } }
.ds-dialog__window {
  --dlg-w: 480px; width: var(--dlg-w); max-width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: var(--spacing-stack-xxxs, 16px);
  padding: var(--spacing-inset-sm, 24px);
  background: var(--color-background-dialog-window-default-md);
  border-radius: var(--radius-large, 8px); box-shadow: var(--shadow-medium);
  animation: ds-select-in .18s var(--ease, ease);
}
.ds-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-inline-mini, 12px); }   /* Figma 355:5: items-center */
.ds-dialog__title { margin: 0; font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); line-height: 1.2; color: var(--color-text-primary); }
.ds-dialog__close {
  appearance: none; flex: none; width: 32px; height: 32px; padding: 0; display: grid; place-content: center;
  background: var(--color-border); border: none; border-radius: 50%; color: var(--color-text); cursor: pointer;
}
.ds-dialog__close svg { width: 16px; height: 16px; }
.ds-dialog__close i { font-size: 16px; line-height: 1; }
.ds-dialog__close:hover { filter: brightness(0.88); }
.ds-dialog__close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
.ds-dialog__body { margin: 0; font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: 1.55; color: var(--color-text-sub); }
.ds-dialog__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-inline-mini, 12px); margin-top: var(--spacing-stack-nano, 8px); }
/* ícone opcional de tom (Figma: icon-dialog → text-helper); danger usa --color-danger via override no markup */
.ds-dialog__icon { flex: none; width: 24px; height: 24px; color: var(--color-icon-dialog-default-md); }
.ds-dialog__icon--danger { color: var(--color-danger); }
/* tamanhos — só a largura da janela muda */
.ds-dialog--sm .ds-dialog__window { --dlg-w: 380px; }
.ds-dialog--lg .ds-dialog__window { --dlg-w: 600px; }

/* ── PRODUCT CARD ─────────────────────────────────────────────────────────────
   Cartão de produto da vitrine (PLP). Mídia 1:1 + selos + título + avaliação
   (estrelas) + preço (atual Bold / antigo riscado) + ação (reusa .ds-btn). Largura
   pelo grid. Fiel ao Figma (266:3).                                               */
.ds-product {
  display: flex; flex-direction: column; position: relative; width: 100%; box-sizing: border-box;
  background: var(--color-background-product-card-enabled);
  border: 1px solid var(--color-border-product-card-enabled);
  border-radius: var(--radius-large, 8px); overflow: hidden;
}
.ds-product__media { position: relative; aspect-ratio: 1 / 1; background: var(--color-background-product-card-image-enabled); display: grid; place-content: center; color: var(--color-text-helper); overflow: hidden; }
.ds-product__media img { width: 100%; height: 100%; object-fit: cover; }
.ds-product__badges { position: absolute; top: var(--spacing-stack-mini, 12px); left: var(--spacing-stack-mini, 12px); display: flex; gap: var(--spacing-inline-nano, 8px); }
.ds-product__body { display: flex; flex-direction: column; gap: var(--spacing-stack-nano, 8px); padding: var(--spacing-inset-xs, 16px); }
.ds-product__title { margin: 0; font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: 1.3; color: var(--color-text); }
.ds-product__rating { display: flex; align-items: center; gap: var(--spacing-inline-quarck, 4px); }
.ds-product__stars { display: inline-flex; gap: 2px; color: var(--color-background-product-card-star-enabled); }
.ds-product__stars svg { width: 13px; height: 13px; }
.ds-product__count { font-family: var(--font-family-sans); font-size: var(--font-size-xs); color: var(--color-text-helper); }
.ds-product__price { display: flex; align-items: baseline; gap: var(--spacing-inline-nano, 8px); }
.ds-product__price-now { font-family: var(--font-family-sans); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); color: var(--color-text); }
.ds-product__price-old { font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); color: var(--color-text-helper); text-decoration: line-through; }
.ds-product__action { margin-top: var(--spacing-stack-nano, 8px); }

/* ── CART ITEM ────────────────────────────────────────────────────────────────
   Linha de item no carrinho. Miniatura 88 + info (título/atributo/preço unit) +
   ações (quantidade [reusa .ds-stepper--sm] + subtotal + remover). Divisória
   inferior. Fiel ao Figma (307:3).                                               */
.ds-cart-item {
  display: flex; align-items: center; gap: var(--spacing-inline-xxxs, 16px);
  padding: var(--spacing-stack-xxxs, 16px) 0; border-bottom: 1px solid var(--color-border-cart-item-enabled);
}
.ds-cart-item__thumb { flex: none; width: 88px; height: 88px; display: grid; place-content: center; background: var(--color-background-cart-item-thumbnail-enabled); border-radius: var(--radius-medium, 4px); color: var(--color-text-helper); overflow: hidden; }
.ds-cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ds-cart-item__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-stack-nano, 8px); }
.ds-cart-item__title { margin: 0; font-family: var(--font-family-sans); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.25; color: var(--color-text); }
.ds-cart-item__attr { font-family: var(--font-family-sans); font-size: var(--font-size-xs); color: var(--color-text-helper); }
.ds-cart-item__unit { font-family: var(--font-family-sans); font-size: var(--font-size-sm); color: var(--color-text-sub); }
.ds-cart-item__actions { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-stack-mini, 12px); }
.ds-cart-item__subtotal { font-family: var(--font-family-sans); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); color: var(--color-text); }
.ds-cart-item__remove { display: inline-flex; align-items: center; gap: var(--spacing-inline-quarck, 4px); appearance: none; background: none; border: none; padding: 2px; font-family: var(--font-family-sans); font-size: var(--font-size-sm); color: var(--color-text); cursor: pointer; border-radius: 2px; }
.ds-cart-item__remove svg { width: 16px; height: 16px; }
.ds-cart-item__remove:hover { text-decoration: underline; }
.ds-cart-item__remove:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }

/* ── CARD IMAGE ───────────────────────────────────────────────────────────────
   Cartão de conteúdo com mídia: imagem + eyebrow + título + descrição + ação.
   Orientação vertical (mídia no topo) / horizontal (mídia à esquerda); "cover"
   controla a proporção da mídia (SM 16:9 / MD 4:3 / LG 1:1). Fiel ao Figma (630:3). */
.ds-card-image {
  display: flex; flex-direction: column; background: var(--color-bg);
  border: 1px solid var(--color-border-product-card-image-enabled);
  border-radius: var(--radius-medium, 4px); overflow: hidden;
  box-shadow: var(--shadow-soft);                                          /* Figma 630:3: shadow/soft */
}
.ds-card-image__media { aspect-ratio: 16 / 9; display: grid; place-content: center; background: var(--color-background-product-card-image-enabled); color: var(--color-text-helper); overflow: hidden; }
.ds-card-image__media img { width: 100%; height: 100%; object-fit: cover; }
.ds-card-image--cover-md .ds-card-image__media { aspect-ratio: 4 / 3; }
.ds-card-image--cover-lg .ds-card-image__media { aspect-ratio: 1 / 1; }
/* Figma 630:6: corpo coluna, gap stack/nano 8px, padding 16; títulos sem margem (gap manda) */
.ds-card-image__body { display: flex; flex-direction: column; gap: var(--spacing-stack-nano, 8px); padding: var(--spacing-inset-xs, 16px); }
.ds-card-image__eyebrow { margin: 0; font-family: var(--font-family-overline); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-sub); }
.ds-card-image__title { margin: 0; font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.22; color: var(--color-text); }
.ds-card-image__text { margin: 0; font-family: var(--font-family-caption, var(--font-family-sans)); font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); line-height: 1.45; color: var(--color-text-sub); }
/* "Ler mais →" = link bold sublinhado 16px (cor text/primary) — Figma 807:65 */
.ds-card-image__action { margin-top: auto; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); text-decoration: underline; color: var(--color-text-primary); }
/* horizontal: mídia à esquerda, corpo à direita */
.ds-card-image--horizontal { flex-direction: row; }
.ds-card-image--horizontal .ds-card-image__media { aspect-ratio: auto; flex: none; width: 40%; }
.ds-card-image--horizontal .ds-card-image__body { flex: 1 1 auto; justify-content: center; }

/* ── SEARCH BAR ───────────────────────────────────────────────────────────────
   Campo de busca: input com lupa (leading) + limpar (×) + botão "Buscar" (reusa
   .ds-btn). Campo 48px, borda 1.5px (régua de campo do DS). Tokens genéricos de
   input. Fiel ao Figma (249:7).                                                   */
.ds-search { display: flex; align-items: stretch; gap: var(--spacing-inline-nano, 8px); }
.ds-search__field {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--spacing-inline-nano, 8px);
  height: 48px; box-sizing: border-box; padding: 0 var(--spacing-inset-mini, 12px);
  background: var(--color-background-input-enabled); border: 1.5px solid var(--color-border-input-enabled);
  border-radius: var(--radius-medium, 4px); transition: border-color .15s var(--ease, ease);
}
.ds-search__field:focus-within { border-color: var(--color-neutral-darkest); box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
/* lupa = 16px, TRAILING (à direita) — Figma 249:8 */
.ds-search__icon { flex: none; order: 3; display: grid; place-content: center; width: 16px; height: 16px; color: var(--color-text-helper); }
.ds-search__icon i { font-size: 16px; line-height: 1; }
.ds-search__icon svg { width: 16px; height: 16px; }
.ds-search__input { order: 1; flex: 1 1 auto; min-width: 0; border: none; background: none; outline: none; padding: 0; font-family: var(--font-family-sans); font-size: var(--font-size-md); color: var(--color-text); }
.ds-search__input::placeholder { font-family: var(--font-family-input-text, var(--font-family-sans)); font-style: italic; color: var(--color-text-helper); }
.ds-search__clear { appearance: none; order: 2; flex: none; width: 18px; height: 18px; display: grid; place-content: center; padding: 0; border: none; background: none; border-radius: 50%; color: var(--color-text-sub); cursor: pointer; }
.ds-search__clear svg { width: 13px; height: 13px; }
.ds-search__clear:hover { color: var(--color-neutral-darkest); }
.ds-search__clear[hidden] { display: none; }

/* ── FILTERS ──────────────────────────────────────────────────────────────────
   Painel de filtros (PLP). Cabeçalho + chips de filtros ativos (removíveis) +
   seções (rótulo overline + opções que reusam .ds-check/.ds-radio) + faixa de
   preço (range duplo). Divisórias entre seções. Fiel ao Figma (339:3).            */
.ds-filters {
  display: flex; flex-direction: column; gap: var(--spacing-stack-xxxs, 16px);
  padding: var(--spacing-inset-xs, 16px);
  background: var(--color-background-filters-enabled);
  border: 1px solid var(--color-border-filters-enabled); border-radius: var(--radius-large, 8px);
}
.ds-filters__header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-inline-mini, 12px); }
.ds-filters__title { margin: 0; font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.25; color: var(--color-text); }
.ds-filters__clear { appearance: none; background: none; border: none; padding: 2px; font-family: var(--font-family-sans); font-size: var(--font-size-md); color: var(--color-text-link); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; border-radius: 2px; }   /* Figma 339:5: Link verde text/link */
.ds-filters__clear:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
/* chips de filtros ativos (removíveis) */
.ds-filters__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-inline-nano, 8px); margin: 0; padding: 0; list-style: none; }
/* chip = Tag Filter canônica: caixa-alta 12px, tracking, pílula tint — Figma 425:7 */
.ds-filters__chip { display: inline-flex; align-items: center; gap: var(--spacing-inline-micro, 2px); padding: 2px 3px 2px 10px; background: var(--color-background-filters-chip-enabled); border: 1px solid var(--color-border-filters-chip-enabled); border-radius: var(--radius-pill, 999px); font-family: var(--font-family-sans); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-primary); }
.ds-filters__chip-remove { appearance: none; flex: none; width: 20px; height: 20px; display: grid; place-content: center; padding: 0; border: none; border-radius: 50%; background: var(--color-neutral-dark); color: var(--color-text-inverse); cursor: pointer; }
.ds-filters__chip-remove svg { width: 14px; height: 14px; }
.ds-filters__chip-remove i { font-size: 14px; line-height: 1; }
.ds-filters__divider { height: 1px; margin: 0; border: none; background: var(--color-background-filters-divider-enabled); }
/* seções */
.ds-filters__section { display: flex; flex-direction: column; gap: var(--spacing-stack-mini, 12px); }
.ds-filters__label { margin: 0; font-family: var(--font-family-overline); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-helper); }
.ds-filters__options { display: flex; flex-direction: column; gap: var(--spacing-stack-nano, 8px); margin: 0; padding: 0; list-style: none; }
/* faixa de preço — range duplo (scaffold visual; posição dos handles via inline/JS) */
.ds-filters__range { display: flex; flex-direction: column; gap: var(--spacing-stack-nano, 8px); }
.ds-filters__range-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-family-sans); font-size: var(--font-size-xs); color: var(--color-text-sub); }
.ds-filters__track { position: relative; height: 4px; margin: 10px var(--spacing-inline-nano, 8px); border-radius: var(--radius-pill, 999px); background: var(--color-background-filters-track-enabled); }
.ds-filters__track-active { position: absolute; top: 0; height: 100%; border-radius: var(--radius-pill, 999px); background: var(--color-background-filters-track-active-enabled); }
.ds-filters__handle { position: absolute; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); background: var(--color-background-filters-handle-enabled); border: 2px solid var(--color-border-filters-handle-enabled); border-radius: 50%; cursor: pointer; }
.ds-filters__handle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
.ds-filters__range-ends { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-family-sans); font-size: var(--font-size-xs); color: var(--color-text-helper); }

/* ── GLOBAL HEADER ────────────────────────────────────────────────────────────
   Cabeçalho do site: logo + nav horizontal à esquerda, ações à direita (busca,
   Entrar [.ds-btn], carrinho com contador). 72px, hairline inferior. Tokens
   genéricos. Fiel ao Figma (346:3).                                              */
.ds-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-inline-xs, 32px);
  height: 72px; box-sizing: border-box; padding: 0 var(--spacing-inset-md, 32px);
  background: var(--color-bg); border-bottom: 1px solid var(--color-border);
}
.ds-header__brand { display: flex; align-items: center; gap: var(--spacing-inline-xxs, 24px); }
.ds-header__logo { display: block; height: 24px; }
.ds-header__nav { display: flex; align-items: center; gap: var(--spacing-inline-xs, 32px); }
.ds-header__link { padding: 2px; font-family: var(--font-family-sans); font-size: var(--font-size-md); line-height: 1.3; color: var(--color-text-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; border-radius: 2px; }
.ds-header__link:hover { text-decoration-thickness: 2px; }
.ds-header__link.is-active, .ds-header__link[aria-current="page"] { font-weight: var(--font-weight-medium); }
.ds-header__link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
.ds-header__actions { display: flex; align-items: center; gap: var(--spacing-inline-xxs, 24px); }
.ds-header__icon-btn { appearance: none; flex: none; width: 40px; height: 40px; display: grid; place-content: center; padding: 0; background: none; border: none; border-radius: 50%; color: var(--color-text); cursor: pointer; }
.ds-header__icon-btn svg { width: 20px; height: 20px; }
.ds-header__icon-btn i { font-size: 20px; line-height: 1; }
.ds-header__icon-btn:hover { background: var(--color-bg-muted); }
.ds-header__icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
.ds-header__cart { position: relative; display: inline-flex; align-items: center; gap: var(--spacing-inline-nano, 8px); color: var(--color-text); text-decoration: none; }
.ds-header__cart svg { width: 22px; height: 22px; }
.ds-header__cart i { font-size: 22px; line-height: 1; }
.ds-header__cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; font-family: var(--font-family-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); line-height: 1; color: var(--color-text); background: var(--color-brand-tertiary-lightest, #DBE4D6); border-radius: var(--radius-pill, 999px); }

/* ── FOOTER ───────────────────────────────────────────────────────────────────
   Rodapé do site: superfície escura. Topo (marca + colunas de links) + divisória
   + base (copyright + legal). Fiel ao Figma (349:3).                             */
.ds-footer {
  display: flex; flex-direction: column; gap: var(--spacing-stack-sm, 40px);
  padding: var(--spacing-stack-lg, 56px) var(--spacing-stack-xl, 64px) var(--spacing-inset-md, 32px);
  background: var(--color-background-footer-enabled); color: var(--color-text-inverse);
}
.ds-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacing-stack-sm, 40px); }
.ds-footer__brand { display: flex; flex-direction: column; gap: var(--spacing-stack-mini, 12px); }
.ds-footer__col { display: flex; flex-direction: column; gap: var(--spacing-stack-mini, 12px); }
.ds-footer__label { margin: 0; font-family: var(--font-family-overline); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-inverse-muted); }
.ds-footer__link { padding: 2px; font-family: var(--font-family-sans); font-size: var(--font-size-md); line-height: 1.3; color: var(--color-text-inverse); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; border-radius: 2px; }
.ds-footer__link:hover { text-decoration-thickness: 2px; }
.ds-footer__link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface-dark), 0 0 0 4px var(--color-focus-ring-inverse); }
.ds-footer__divider { height: 1px; margin: 0; border: none; background: var(--color-background-footer-divider-enabled); opacity: 0.24; }
.ds-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-inline-xxs, 24px); }
.ds-footer__copy { font-family: var(--font-family-sans); font-size: var(--font-size-xs); color: var(--color-text-inverse-muted); }
.ds-footer__legal { display: flex; gap: var(--spacing-inline-xxs, 24px); }

/* ── SIDE NAVIGATION ──────────────────────────────────────────────────────────
   Barra lateral de app (escura, 240px, altura cheia). COMPÕE .ds-navitem (base):
   logo + seções rotuladas + itens + spacer + divisória + bloco de usuário
   (Avatar + nome/papel). Fiel ao Figma (2151:6).                                 */
.ds-sidenav {
  display: flex; flex-direction: column; gap: var(--spacing-stack-quarck, 4px);
  width: 240px; box-sizing: border-box; height: 100%; min-height: 0;
  padding: 28px var(--spacing-inset-xs, 16px) 20px;
  background: var(--color-surface-dark); color: var(--color-text-inverse);
}
.ds-sidenav__logo { display: block; height: 22px; margin: 0 4px var(--spacing-stack-xxs, 24px); }
.ds-sidenav__section { padding: var(--spacing-stack-xxxs, 16px) var(--spacing-inset-mini, 12px) 6px; font-family: var(--font-family-overline); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-inverse-muted); }
.ds-sidenav .ds-navitem { width: 100%; }
.ds-sidenav__spacer { flex: 1 1 auto; }
.ds-sidenav__divider { height: 1px; margin: var(--spacing-stack-nano, 8px) 0; border: none; background: var(--color-text-inverse); opacity: 0.16; }
.ds-sidenav__user { display: flex; align-items: center; gap: 10px; padding: var(--spacing-stack-mini, 12px) var(--spacing-inset-nano, 8px) 4px; }
.ds-sidenav__user-name { font-family: var(--font-family-sans); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); line-height: 1.2; color: var(--color-text-inverse); }
.ds-sidenav__user-role { font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); line-height: 1.2; color: var(--color-text-inverse-muted); }

/* ── FORM ─────────────────────────────────────────────────────────────────────
   Cartão de formulário: título + campos (reusam .ds-field/.ds-input da base) +
   ação de envio (.ds-btn). __row = campos lado a lado. Fiel ao Figma (297:2).     */
.ds-form {
  display: flex; flex-direction: column; gap: var(--spacing-stack-xxxs, 16px);
  padding: var(--spacing-inset-md, 32px);
  background: var(--color-background-form-enabled);
  border: 1px solid var(--color-border-form-enabled); border-radius: var(--radius-large, 8px);
}
.ds-form__title { margin: 0 0 var(--spacing-stack-nano, 8px); font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.25; color: var(--color-text); }
.ds-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-inline-xxxs, 16px); }
.ds-form__actions { display: flex; align-items: center; gap: var(--spacing-inline-mini, 12px); margin-top: var(--spacing-stack-nano, 8px); }

/* ── DRAWER ───────────────────────────────────────────────────────────────────
   Painel deslizante a partir de uma borda. Scrim (modal) + painel. 4 direções
   (right/left/bottom/top) × 3 tamanhos. Header (título + fechar) + corpo + ações
   (.ds-btn). Modo non-modal = sem scrim. Fiel ao Figma (613:3).                   */
.ds-drawer { position: fixed; inset: 0; z-index: 100; display: flex; background: var(--color-background-overlay); animation: ds-dialog-fade .16s var(--ease, ease); }
.ds-drawer[hidden] { display: none; }
.ds-drawer--non-modal { background: none; pointer-events: none; }
.ds-drawer--non-modal .ds-drawer__panel { pointer-events: auto; }
.ds-drawer__panel {
  --drawer-size: 360px; display: flex; flex-direction: column; gap: var(--spacing-stack-mini, 12px);
  box-sizing: border-box; padding: var(--spacing-inset-xs, 16px);
  background: var(--color-background-drawer); box-shadow: var(--shadow-medium);
  animation: ds-drawer-in .2s var(--ease, ease);
}
/* animação edge-anchored: cada direção desliza desde a borda onde está ancorada */
@keyframes ds-drawer-in-right  { from { transform: translateX(100%); }  to { transform: none; } }
@keyframes ds-drawer-in-left   { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes ds-drawer-in-bottom { from { transform: translateY(100%); }  to { transform: none; } }
@keyframes ds-drawer-in-top    { from { transform: translateY(-100%); } to { transform: none; } }
/* direções: right/left = altura cheia, largura --drawer-size; bottom/top = largura cheia, altura --drawer-size */
.ds-drawer--right  { justify-content: flex-end; }
.ds-drawer--right  .ds-drawer__panel { width: var(--drawer-size); height: 100%; animation-name: ds-drawer-in-right; }
.ds-drawer--left   { justify-content: flex-start; }
.ds-drawer--left   .ds-drawer__panel { width: var(--drawer-size); height: 100%; animation-name: ds-drawer-in-left; }
.ds-drawer--bottom { align-items: flex-end; }
.ds-drawer--bottom .ds-drawer__panel { width: 100%; height: var(--drawer-size); animation-name: ds-drawer-in-bottom; }
.ds-drawer--top    { align-items: flex-start; }
.ds-drawer--top    .ds-drawer__panel { width: 100%; height: var(--drawer-size); animation-name: ds-drawer-in-top; }
/* tamanhos */
.ds-drawer--sm .ds-drawer__panel { --drawer-size: 260px; }
.ds-drawer--lg .ds-drawer__panel { --drawer-size: 480px; }
.ds-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-inline-mini, 12px); }
.ds-drawer__title { margin: 0; font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); line-height: 1.2; color: var(--color-text); }
.ds-drawer__close { appearance: none; flex: none; width: 32px; height: 32px; padding: 0; display: grid; place-content: center; background: var(--color-border); border: none; border-radius: 50%; color: var(--color-text); cursor: pointer; }
.ds-drawer__close svg { width: 16px; height: 16px; }
.ds-drawer__close i { font-size: 16px; line-height: 1; }
.ds-drawer__close:hover { filter: brightness(0.88); }
.ds-drawer__close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
.ds-drawer__body { font-family: var(--font-family-sans); font-size: var(--font-size-md); line-height: 1.55; color: var(--color-text-sub); }
.ds-drawer__spacer { flex: 1 1 auto; }
.ds-drawer__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-inline-nano, 8px); }   /* Figma 613:12: ações à direita */

/* ── DATE PICKER ──────────────────────────────────────────────────────────────
   Calendário pop-up de um campo de data (o campo reusa .ds-input com ícone de
   calendário). Cabeçalho (mês + prev/next) + grade 7 col (dias da semana + dias);
   dia selecionado em círculo escuro, hoje com anel de acento. Fiel ao Figma (565:138). */
.ds-datepicker {
  width: 280px; box-sizing: border-box; padding: var(--spacing-inset-xs, 16px);
  background: var(--color-background-date-picker); border: 1px solid var(--color-border);
  border-radius: var(--radius-medium, 4px); box-shadow: var(--shadow-medium);
  animation: ds-select-in .16s var(--ease, ease);
}
.ds-datepicker__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-stack-nano, 8px); }
.ds-datepicker__month { font-family: var(--font-family-sans); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); color: var(--color-text); }
.ds-datepicker__navbtn { appearance: none; width: 28px; height: 28px; display: grid; place-content: center; background: none; border: none; border-radius: var(--radius-small, 2px); color: var(--color-text-sub); cursor: pointer; }
.ds-datepicker__navbtn:hover { background: var(--color-bg-muted); }
.ds-datepicker__navbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
.ds-datepicker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ds-datepicker__weekday { display: grid; place-content: center; height: 24px; font-family: var(--font-family-sans); font-weight: var(--font-weight-medium); font-size: var(--font-size-xs); color: var(--color-text-helper); }
.ds-datepicker__day { appearance: none; aspect-ratio: 1 / 1; display: grid; place-content: center; background: none; border: none; border-radius: 50%; font-family: var(--font-family-sans); font-size: var(--font-size-sm); color: var(--color-text); cursor: pointer; }
.ds-datepicker__day:hover { background: var(--color-bg-muted); }
.ds-datepicker__day:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
.ds-datepicker__day.is-outside { color: var(--color-neutral-principal); }
.ds-datepicker__day.is-today { box-shadow: inset 0 0 0 1px var(--color-border-date-picker-today); }
.ds-datepicker__day.is-selected { background: var(--color-background-date-picker-selected); color: var(--color-text-inverse); }
.ds-datepicker__day.is-selected:hover { background: var(--color-background-date-picker-selected); }
.ds-datepicker__day:disabled { color: var(--color-neutral-principal); cursor: not-allowed; }

/* ── FILE UPLOADER ────────────────────────────────────────────────────────────
   Zona de upload com borda tracejada: ícone + CTA + meta. Estados active (arraste,
   acento), error (danger). Lista de arquivos enviados com status. Fiel ao Figma (571:9). */
.ds-uploader { display: flex; flex-direction: column; gap: var(--spacing-stack-nano, 8px); }
.ds-uploader__zone {
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-stack-nano, 8px);
  padding: var(--spacing-inset-sm, 24px) var(--spacing-inset-xs, 16px); text-align: center;
  background: var(--color-background-file-uploader); border: 1px dashed var(--color-border-file-uploader);
  border-radius: var(--radius-medium, 4px); cursor: pointer; transition: border-color .12s var(--ease, ease), background .12s var(--ease, ease);
}
.ds-uploader__zone:hover, .ds-uploader__zone.is-active { background: var(--color-background-file-uploader-active); border-color: var(--color-border-file-uploader-active); }
.ds-uploader__zone:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
.ds-uploader__zone.is-error { border-color: var(--color-border-file-uploader-error); }
.ds-uploader__icon { width: 24px; height: 24px; color: var(--color-text-sub); }
.ds-uploader__cta { font-family: var(--font-family-sans); font-size: var(--font-size-md); line-height: 1.55; color: var(--color-text-sub); }   /* Figma 571:7: 16px */
.ds-uploader__meta { font-family: var(--font-family-sans); font-size: var(--font-size-sm); color: var(--color-text-sub); }                   /* Figma 571:8: 14px */
/* lista de arquivos */
.ds-uploader__file { display: flex; align-items: center; gap: var(--spacing-inline-nano, 8px); padding: var(--spacing-stack-nano, 8px) var(--spacing-inset-mini, 12px); border: 1px solid var(--color-border); border-radius: var(--radius-medium, 4px); }
.ds-uploader__file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-family-sans); font-size: var(--font-size-sm); color: var(--color-text); }
.ds-uploader__file-size { flex: none; font-family: var(--font-family-sans); font-size: var(--font-size-xs); color: var(--color-text-helper); }
.ds-uploader__file--success .ds-uploader__file-icon { color: var(--color-icon-file-uploader-success); }
.ds-uploader__file--error { border-color: var(--color-border-file-uploader-error); }
.ds-uploader__file--error .ds-uploader__file-icon { color: var(--color-icon-file-uploader-error); }

/* ── VOICE BLOCK ──────────────────────────────────────────────────────────────
   Bloco de citação da voz da marca. Frase em serif itálico (reusa o estilo
   .ds-voice da base) + assinatura + aspas. 3 temas: green (verde bordado),
   light (claro com borda), inline (barra de acento à esquerda). Fiel ao Figma (287:2). */
.ds-voice-block {
  display: flex; flex-direction: column; gap: var(--spacing-stack-xxxs, 16px);
  padding: var(--spacing-stack-lg, 56px); border-radius: var(--radius-large, 8px);
  background: var(--color-background-voice-accent); color: var(--color-text-inverse);
}
.ds-voice-block__quote { margin: 0; font-family: var(--font-family-voice); font-style: italic; font-weight: var(--font-weight-regular); font-size: var(--font-size-2xl); line-height: 1.3; color: inherit; }
.ds-voice-block__cite { font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); letter-spacing: 0.08em; text-transform: uppercase; color: inherit; opacity: 0.8; font-style: normal; }
.ds-voice-block__mark { width: 48px; height: auto; color: currentColor; opacity: 0.5; }
/* tema claro — fundo bg + borda, texto escuro */
.ds-voice-block--light { background: var(--color-background-voice-light); border: 1px solid var(--color-border-voice-light); color: var(--color-text); }
/* tema inline — sem card, barra de acento à esquerda */
.ds-voice-block--inline { padding: var(--spacing-inset-nano, 8px) 0 var(--spacing-inset-nano, 8px) var(--spacing-inset-sm, 24px); border-radius: 0; border-left: 4px solid var(--color-background-voice-bar-inline); background: none; color: var(--color-text); }
.ds-voice-block--inline .ds-voice-block__quote { font-size: var(--font-size-xl); }

/* ── CARD PLAN ────────────────────────────────────────────────────────────────
   Cartão de plano (pricing): nome + preço (valor grande / período) + descrição +
   lista de recursos (check verde) + ação (.ds-btn). --featured = plano em destaque
   (borda de marca). Tokens genéricos. Fiel ao Figma (2050:234).                   */
.ds-card-plan {
  display: flex; flex-direction: column; gap: var(--spacing-stack-xxs, 24px);
  padding: var(--spacing-inset-md, 32px); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-medium, 4px);
}
.ds-card-plan__name { margin: 0; font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); line-height: 1.2; color: var(--color-text); }
.ds-card-plan__price { display: flex; align-items: baseline; gap: var(--spacing-inline-quarck, 4px); }
.ds-card-plan__amount { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-3xl); line-height: 1.1; letter-spacing: -0.01em; color: var(--color-text); }
.ds-card-plan__period { font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); color: var(--color-text-sub); }
.ds-card-plan__desc { margin: 0; font-family: var(--font-family-sans); font-size: var(--font-size-sm); line-height: 1.45; color: var(--color-text-sub); }
.ds-card-plan__features { display: flex; flex-direction: column; gap: var(--spacing-stack-mini, 12px); margin: 0; padding: 0; list-style: none; }
.ds-card-plan__feature { display: flex; align-items: flex-start; gap: var(--spacing-inline-nano, 8px); font-family: var(--font-family-sans); font-size: var(--font-size-sm); line-height: 1.45; color: var(--color-text); }
.ds-card-plan__check { flex: none; width: 20px; height: 20px; color: var(--color-success); }
.ds-card-plan__check svg { width: 100%; height: 100%; }
.ds-card-plan__spacer { flex: 1 1 auto; }
.ds-card-plan__action { margin-top: var(--spacing-stack-nano, 8px); }
/* destaque — plano recomendado (Figma: Featured=True) */
.ds-card-plan--featured { border-width: 2px; border-color: var(--color-brand-primary); box-shadow: var(--shadow-soft); }

/* ── CARD MOCKUP ──────────────────────────────────────────────────────────────
   Visual do cartão da marca (decorativo): superfície escura + brilho verde +
   logo + contactless + número + nome/validade + bandeira. 3 bandeiras (slot).
   Fiel ao Figma (2133:193). Radius 16 literal (acima da escala do DS).            */
.ds-card-mockup {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  width: 360px; max-width: 100%; aspect-ratio: 360 / 220; box-sizing: border-box;
  padding: var(--spacing-inset-sm, 24px); border-radius: 16px; overflow: hidden;
  background: var(--color-brand-primary); color: var(--color-text-inverse);
}
.ds-card-mockup__sheen { position: absolute; top: -80px; right: -60px; width: 260px; height: 260px; border-radius: 50%; background: var(--color-surface-accent); opacity: 0.55; filter: blur(2px); pointer-events: none; }
.ds-card-mockup__top, .ds-card-mockup__bottom { position: relative; display: flex; align-items: center; justify-content: space-between; }
.ds-card-mockup__logo { height: 18px; }
.ds-card-mockup__number { position: relative; font-family: var(--font-family-sans); font-weight: var(--font-weight-medium); font-size: var(--font-size-xl); letter-spacing: 0.12em; }
.ds-card-mockup__meta { display: flex; flex-direction: column; gap: 2px; }
.ds-card-mockup__name, .ds-card-mockup__valid { font-family: var(--font-family-sans); font-weight: var(--font-weight-medium); font-size: var(--font-size-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.ds-card-mockup__valid { color: var(--color-text-inverse-muted); }
.ds-card-mockup__flag { flex: none; height: 28px; }

/* ── SAVED CARD ───────────────────────────────────────────────────────────────
   Linha de cartão de pagamento salvo: bandeira + número mascarado + validade à
   esquerda; tag "Principal" (.ds-tag) + ações (.ds-link Editar/Remover) à direita.
   Tokens genéricos. Fiel ao Figma (2121:13).                                      */
.ds-saved-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-inline-xxs, 24px);
  padding: var(--spacing-inset-sm, 24px); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-medium, 4px);
}
.ds-saved-card__brand { display: flex; align-items: center; gap: var(--spacing-inline-xxs, 24px); }
.ds-saved-card__flag { flex: none; display: inline-flex; align-items: center; padding: 6px 10px; background: var(--color-brand-primary); color: var(--color-text-inverse); border-radius: var(--radius-medium, 4px); font-family: var(--font-family-sans); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); letter-spacing: 0.04em; }
.ds-saved-card__number { font-family: var(--font-family-sans); font-size: var(--font-size-md); color: var(--color-text); }
.ds-saved-card__exp { font-family: var(--font-family-sans); font-size: var(--font-size-sm); color: var(--color-text-helper); }
.ds-saved-card__actions { display: flex; align-items: center; gap: var(--spacing-inline-xxs, 24px); }

/* ── PROGRESS INDICATOR (Steps) ─────────────────────────────────────────────
   Wizard de passos — progresso em fluxos lineares (checkout, onboarding, wizard).
   3 estados por passo: Concluído (✓) · Atual (índice negrito) · Pendente (índice leve).
   Conectores entre passos. Layout horizontal padrão; vertical (.ds-steps--vertical).
   Tokens: --color-background-step-done/current/pending, --color-border-step-pending,
   --color-icon-step-done, --color-background-step-connector.
   Verdade visual: Figma 524:54 (file dABtuxiOaVOpSwgBhrwkEj).                   */
.ds-steps {
  display: flex; list-style: none; margin: 0; padding: 0;
  align-items: flex-start;
}
.ds-steps__step {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  position: relative; gap: var(--spacing-stack-nano, 8px);
}
/* conector horizontal: de centro-do-step-anterior até centro-deste (z-index 0, atrás do node) */
.ds-steps__step + .ds-steps__step::before {
  content: ''; position: absolute;
  top: 11px;             /* centro vertical do node 24px (12 − metade da linha 2px) */
  left: -50%; right: 50%; /* de centro-anterior a centro-atual (steps flex:1 = larguras iguais) */
  height: 2px;
  background: var(--color-background-step-connector);
  z-index: 0;
}
.ds-steps__node {
  position: relative; z-index: 1; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-pill, 999px); box-sizing: border-box;
  /* PENDENTE (padrão) — fundo branco, borda cinza, índice escuro */
  background: var(--color-background-step-pending); border: 1.5px solid var(--color-border-step-pending);
  color: var(--color-text-primary);
  font-family: var(--font-family-label, var(--font-family-sans)); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs); line-height: 1; letter-spacing: 0.08em;
}
.ds-steps__label {
  font-family: var(--font-family-sans); font-size: var(--font-size-xs); line-height: 1.45;
  color: var(--color-text-secondary); text-align: center; max-width: 80px;
}
/* CONCLUÍDO — fundo escuro, checkmark branco via pseudo-elemento */
.ds-steps__step--done .ds-steps__node {
  background: var(--color-background-step-done); border-color: var(--color-background-step-done);
  color: var(--color-icon-step-done);
}
.ds-steps__step--done .ds-steps__node::before {
  content: ''; display: block;
  width: 9px; height: 5px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}
/* ATUAL — fundo escuro, índice branco (1:1 com Figma: label não muda por estado) */
.ds-steps__step--current .ds-steps__node {
  background: var(--color-background-step-current); border-color: var(--color-background-step-current);
  color: var(--color-text-inverse);
}
/* foco = anel-duplo do DS */
.ds-steps__node:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
/* VERTICAL — coluna única, steps em linha; conector = barra vertical acima do node */
.ds-steps--vertical { flex-direction: column; gap: 0; align-items: flex-start; }
.ds-steps--vertical .ds-steps__step {
  flex: none; flex-direction: row; align-items: center;
  gap: var(--spacing-inline-mini, 12px);
}
.ds-steps--vertical .ds-steps__step + .ds-steps__step { padding-top: var(--spacing-stack-xxs, 24px); }
.ds-steps--vertical .ds-steps__step + .ds-steps__step::before {
  top: 0; bottom: auto; left: 11px; right: auto; /* 11 = center do node 24px − metade da linha 2px */
  width: 2px; height: var(--spacing-stack-xxs, 24px);
}
.ds-steps--vertical .ds-steps__label { text-align: left; max-width: none; }

/* ── TABLE ──────────────────────────────────────────────────────────────────
   Tabela de dados em card: header (título + ação opcional), thead (rótulos de
   coluna em superfície muted) e linhas de dados. Compõe .ds-avatar (cliente) e
   .ds-tag (status). Texto à esquerda; valores e datas à direita.
   Verdade visual: Figma 2096:2 (file dABtuxiOaVOpSwgBhrwkEj).                   */
.ds-table {
  border: 1px solid var(--color-border); border-radius: var(--radius-medium, 4px);
  background: var(--color-bg); overflow: hidden; width: 100%;
}
/* header do card (opcional) — título + subtítulo à esquerda, ação à direita */
.ds-table__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--spacing-inline-xxs, 24px);
  padding: var(--spacing-stack-xxxs, 16px) var(--spacing-inline-xxs, 24px);
}
.ds-table__title { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.3; color: var(--color-text); }
.ds-table__sub { font-size: var(--font-size-xs); color: var(--color-text-helper); margin-top: 2px; }
.ds-table__action { flex: none; } /* recebe um .ds-link */
/* grade */
.ds-table__grid { width: 100%; border-collapse: collapse; }
.ds-table__grid th, .ds-table__grid td {
  padding: 14px var(--spacing-inline-xxs, 24px); text-align: left; vertical-align: middle;
}
.ds-table__grid thead th {
  background: var(--color-bg-muted);
  border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
  font-family: var(--font-family-label); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-helper); white-space: nowrap;
}
.ds-table__grid tbody td { border-top: 1px solid var(--color-border); font-size: var(--font-size-sm); color: var(--color-text); }
.ds-table__grid tbody tr:first-child td { border-top: none; } /* o thead já fecha com border-bottom */
/* alinhamentos */
.ds-table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-table__num--strong { font-weight: var(--font-weight-bold); }
.ds-table__date { text-align: right; font-family: var(--font-family-mono); color: var(--color-text-helper); white-space: nowrap; }
/* célula de cliente: avatar + nome/id empilhados */
.ds-table__user { display: flex; align-items: center; gap: var(--spacing-inline-mini, 12px); }
.ds-table__user-text { display: flex; flex-direction: column; }
.ds-table__user-name { font-size: var(--font-size-sm); color: var(--color-text); line-height: 1.3; }
.ds-table__user-id { font-size: var(--font-size-xs); color: var(--color-text-helper); line-height: 1.3; }

/* ── CHAPTER NAV (prev/next, estilo Carbon) ────────────────────────────────
   Pager de capítulos: 2 células com hairline (gap 1px sobre fundo border) +
   top border. Usado por ds + brandbook. Título em bold.                       */
.chnav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 64px; border-top: 1px solid var(--color-border); background: var(--color-border); }
.chnav__card { display: flex; flex-direction: column; gap: 6px; padding: 24px 20px; text-decoration: none; color: var(--color-text); background: var(--color-bg); transition: background .12s var(--ease, ease); }
.chnav__card:hover { background: var(--color-bg-muted); }
.chnav__card--next { text-align: right; align-items: flex-end; }
.chnav__card--empty { pointer-events: none; }
.chnav__k { font-family: var(--font-family-mono); font-size: var(--font-size-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-helper); }
.chnav__t { font-family: var(--font-family-headings); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: 1.3; }