/* ============================================================================
   border-ds-base.css — BASE COMPONENTS (cap.2) do DS da border ltd.
   Os átomos: construídos direto de tokens, sem compor outros componentes.
   Depende de border-ds.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).
   ============================================================================ */

/* ── BUTTON ───────────────────────────────────────────────────────────────
   Ação primária do sistema. Estados: enabled/hover/active/focus/disabled
   (foco = anel-duplo, Button é a referência de foco do DS).                  */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--spacing-inline-nano, 8px);
  padding: 8px var(--spacing-inset-xs, 16px);
  min-height: 48px;                          /* = Figma; ≥ alvo de toque WCAG 2.5.5 (44px) */
  border: 1px solid transparent;
  border-radius: var(--radius-medium, 4px);
  font-family: var(--font-family-sans); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .18s var(--ease, ease), color .18s var(--ease, ease), border-color .18s var(--ease, ease);
}
.ds-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-stroke-button-primary-focus);
}
.ds-btn:disabled, .ds-btn[aria-disabled="true"] {
  cursor: not-allowed; background: var(--color-background-button-primary-disabled);
  color: var(--color-icon-button-primary-disabled); border-color: transparent;
}
/* Primary — preto da marca */
.ds-btn--primary { background: var(--color-background-button-primary-enabled); color: var(--color-icon-button-primary-enabled); }
.ds-btn--primary:hover { background: var(--color-background-button-primary-hover); }
.ds-btn--primary:active { background: var(--color-background-button-primary-active); }
/* CTA — verde-pinheiro, ação de conversão */
.ds-btn--cta { background: var(--color-background-button-cta-enabled); color: var(--color-icon-button-cta-enabled); }
.ds-btn--cta:hover { background: var(--color-background-button-cta-hover); }
.ds-btn--cta:active { background: var(--color-background-button-cta-active); }
/* Secondary — contorno */
.ds-btn--secondary { background: var(--color-background-button-secondary-enabled); color: var(--color-icon-button-secondary-enabled); border-color: var(--color-stroke-button-secondary-enabled); }
.ds-btn--secondary:hover { background: var(--color-background-button-secondary-hover); }
.ds-btn--secondary:active { background: var(--color-background-button-secondary-active); }
/* Ghost — sem superfície */
.ds-btn--ghost { background: var(--color-background-button-ghost-enabled); color: var(--color-icon-button-ghost-enabled); }
.ds-btn--ghost:hover { background: var(--color-background-button-ghost-hover); }
.ds-btn--ghost:active { background: var(--color-background-button-ghost-active); }
/* Destructive — ação irreversível */
.ds-btn--destructive { background: var(--color-background-button-destructive-enabled); color: var(--color-icon-button-destructive-enabled); }
.ds-btn--destructive:hover { background: var(--color-background-button-destructive-hover); }
.ds-btn--destructive:active { background: var(--color-background-button-destructive-active); }
/* Tamanhos */
.ds-btn--xs { min-height: 0; padding: 6px var(--spacing-inset-mini, 12px); font-size: var(--font-size-sm); }  /* denso (tabelas/ações de desktop); sem piso de toque — exceção consciente ao alvo WCAG, que é p/ mobile */
.ds-btn--sm { min-height: 40px; padding: 8px var(--spacing-inset-xs, 16px); font-size: var(--font-size-sm); }
.ds-btn--lg { min-height: 52px; padding: 14px var(--spacing-inset-md, 32px); }
.ds-btn--full { width: 100%; }

/* ── TAG ──────────────────────────────────────────────────────────────────
   Etiqueta funcional (status/categoria/contagem). Caixa-alta, tracking
   aberto, pill. A cor comunica significado — nunca decorativa.                */
.ds-tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--radius-pill, 999px);
  /* tipografia = text style "label-tag" do DS (= .ds-label-tag: família label, bold,
     xs/12px, tracking 0,04em, caixa-alta) — estilo próprio da família de indicadores
     (Tag + Delta), tracking mais apertado que o "label" pra aliviar o peso do caixa-alta.
     line-height 1 aqui porque a pílula controla a altura (24px). */
  font-family: var(--font-family-label); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs);
  line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  background: var(--color-tag-neutral-bg); color: var(--color-tag-neutral-fg);
}
.ds-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ds-tag--neutral { background: var(--color-tag-neutral-bg); color: var(--color-tag-neutral-fg); }
.ds-tag--neutral .ds-tag__dot { color: var(--color-tag-neutral-fg); }
.ds-tag--success { background: var(--color-tag-success-bg); color: var(--color-tag-success-fg); }
.ds-tag--danger  { background: var(--color-tag-danger-bg); color: var(--color-tag-danger-fg); }
.ds-tag--warning { background: var(--color-tag-warning-bg); color: var(--color-tag-warning-fg); }
.ds-tag--brand   { background: var(--color-tag-brand-bg); color: var(--color-tag-brand-fg); }

/* ── Tipos interativos ─────────────────────────────────────────────────────
   Conforme o componente Tag no Figma (50:2 / 228:82):
   • Filtro      — pílula com tint do tom + bolinha SÓLIDA (cor "remove" do tom)
                   com × branco dentro, sempre visível. Vale em todas as cores.
   • Selecionável— SEMPRE neutral (#E0E0E0); marcada mostra ✓ + borda.
   • Operacional — SEMPRE neutral (#E0E0E0) + seta → (clicável).
   Foco = anel-duplo claro do DS (respiro branco + anel #0011FF).            */
button.ds-tag { appearance: none; font: inherit; font-family: var(--font-family-label); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs);
  letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }

/* Filtro — o × vive numa bolinha sólida na cor principal do tom (= currentColor
   do texto da tag); neutral é a exceção: usa neutral-dark #3D3D3D. × sempre branco. */
.ds-tag--filter { padding-right: 3px; }
.ds-tag__remove {
  flex: none; display: inline-grid; place-content: center;
  width: 20px; height: 20px; padding: 0; margin-left: 2px;
  border: 0; border-radius: 50%;
  color: inherit;                                 /* botão não herda cor por padrão */
  background: currentColor;                       /* cor principal do tom */
  cursor: pointer; transition: filter .12s var(--ease, ease);
}
.ds-tag--neutral .ds-tag__remove { background: var(--color-tag-neutral-fg); }
.ds-tag__remove svg { width: 11px; height: 11px; display: block; stroke: var(--color-text-inverse); }
.ds-tag__remove:hover { filter: brightness(1.2); }
.ds-tag__remove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring);
}

/* Selecionável — sempre neutral; marcada mostra ✓ + borda escura. */
button.ds-tag--select {
  border: 1px solid transparent;
  background: var(--color-tag-neutral-bg);
  color: var(--color-tag-neutral-fg);
}
.ds-tag--select .ds-tag__check { flex: none; width: 13px; height: 13px; display: none; margin-left: 2px; }
.ds-tag--select .ds-tag__check svg { width: 13px; height: 13px; display: block; }
.ds-tag--select:hover { filter: brightness(.97); }
.ds-tag--select[aria-pressed="true"] { border-color: var(--color-tag-neutral-fg); }
.ds-tag--select[aria-pressed="true"] .ds-tag__check { display: block; }
.ds-tag--select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring);
}

/* Operacional — sempre neutral; seta → indica que dispara ação / abre detalhe. */
button.ds-tag--action {
  border: 0;
  background: var(--color-tag-neutral-bg);
  color: var(--color-tag-neutral-fg);
}
.ds-tag__arrow { flex: none; width: 14px; height: 14px; margin-left: 2px; }
.ds-tag__arrow svg { width: 14px; height: 14px; display: block; }
.ds-tag--action:hover { filter: brightness(.97); }
.ds-tag--action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring);
}

/* ── INPUT (field) ────────────────────────────────────────────────────────
   Rótulo visível acima + campo + ajuda/erro abaixo. Raio md, borda contida,
   foco = borda preta + anel 2px com offset (WCAG 2.2).                        */
.ds-field { display: flex; flex-direction: column; gap: var(--spacing-stack-nano, 8px); }
.ds-field__label { font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); color: var(--color-text-sub); }
.ds-input {
  width: 100%; height: 48px; box-sizing: border-box; padding: 0 var(--spacing-inset-xs, 16px);
  border: 1.5px solid var(--color-border-input-enabled);
  border-radius: var(--radius-medium, 4px); background: var(--color-background-input-enabled);
  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);
  transition: border-color .15s var(--ease, ease), box-shadow .15s var(--ease, ease);
}
/* placeholder = text style input-placeholder (Helvetica Neue Custom itálico, text-helper);
   font-size: inherit p/ acompanhar o tamanho do campo (denso usa sm) */
.ds-input::placeholder { font-family: var(--font-family-sans); font-style: italic; font-weight: var(--font-weight-regular); font-size: inherit; line-height: 1.3; color: var(--color-text-helper); }
/* ── Variantes densas/numéricas (apps densos) — extensão além do form-size do Figma ──
   --sm: campo de formulário compacto (40px); --xs: input inline de tabela/grade (32px);
   --num: numérico (mono, à direita, numerais tabulares) — moeda/quantidade. */
.ds-input--sm { height: 40px; padding: 0 var(--spacing-inset-mini, 12px); }
.ds-input--xs { height: 32px; padding: 0 9px; font-size: var(--font-size-sm); }
.ds-input--num { font-family: var(--font-family-mono); text-align: right; font-variant-numeric: tabular-nums; }
.ds-input:focus-visible {
  outline: none; border-color: var(--color-border-input-filled);
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring);
}
.ds-input--filled { border-color: var(--color-border-input-filled); }
.ds-input--error { border-color: var(--color-border-input-error); }
.ds-input--warning { border-color: var(--color-border-input-warning); }
.ds-input:read-only { background: var(--color-background-input-readonly); border-color: var(--color-border-input-readonly); }
.ds-input:disabled {
  background: var(--color-background-input-disabled); border-color: var(--color-border-input-disabled);
  color: var(--color-icon-input-disabled); cursor: not-allowed;
}
.ds-field__help { font-family: var(--font-family-sans); font-size: var(--font-size-xs); color: var(--color-text-helper); }
.ds-field__help--error { color: var(--color-danger); }
.ds-field__help--warning { color: var(--color-feedback-warning-dark); }
.ds-field--sm .ds-input { height: 40px; }

/* ── CHECKBOX ─────────────────────────────────────────────────────────────
   Seleção múltipla (0..n). O <input> nativo segue fonte de verdade; pinta-se
   direto via appearance:none. Estados: enabled/hover/checked/indeterminate/
   focus(anel-duplo)/disabled. Caixa quadrada, raio small.                    */
.ds-choice { display: inline-flex; align-items: flex-start; gap: var(--spacing-inline-nano, 8px); cursor: pointer; user-select: none; }
.ds-choice__label { font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: 1.45; color: var(--color-text); padding-top: 1px; }
.ds-check, .ds-radio {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 20px; height: 20px; display: grid; place-content: center;
  border: 1.5px solid var(--color-border-checkbox-off);
  background: var(--color-background-checkbox-off); cursor: pointer;
  transition: background .15s var(--ease, ease), border-color .15s var(--ease, ease);
}
.ds-check { border-radius: var(--radius-small, 2px); }
.ds-radio { border: 1.5px solid var(--color-border-radio-off); background: var(--color-background-radio-off); border-radius: 50%; }
.ds-choice:hover .ds-check:not(:disabled) { border-color: var(--color-border-input-filled); }
.ds-choice:hover .ds-radio:not(:disabled) { border-color: var(--color-border-radio-on); }
.ds-check::before {                                  /* glifo de check, escala 0→1 */
  content: ''; width: 12px; height: 12px; transform: scale(0);
  background: var(--color-icon-checkbox-on);
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 18%, 84% 4%, 38% 70%);
  transition: transform .12s var(--ease, ease);
}
.ds-check:checked::before { transform: scale(1); }
.ds-check:indeterminate::before { transform: scale(1); clip-path: none; width: 10px; height: 2px; border-radius: 1px; }
.ds-radio::before {                                  /* ponto central */
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-background-radio-ellipse-on); transform: scale(0);
  transition: transform .12s var(--ease, ease);
}
.ds-radio:checked::before { transform: scale(1); }
.ds-check:checked, .ds-check:indeterminate {
  background: var(--color-background-checkbox-on); border-color: var(--color-background-checkbox-on);
}
.ds-radio:checked {
  background: var(--color-background-radio-on); border-color: var(--color-border-radio-on);
}
.ds-check:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-border-checkbox-focus); }
.ds-radio:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-border-radio-focus); }
.ds-check:disabled { cursor: not-allowed; background: var(--color-background-checkbox-disabled); border-color: var(--color-border-checkbox-disabled); }
.ds-radio:disabled { cursor: not-allowed; background: var(--color-background-radio-disabled); border-color: var(--color-border-radio-disabled); }
.ds-check:disabled:checked, .ds-check:disabled:indeterminate, .ds-radio:disabled:checked { background: var(--color-border); border-color: var(--color-border); }
.ds-choice:has(:disabled) { cursor: not-allowed; }
.ds-choice:has(:disabled) .ds-choice__label { color: var(--color-neutral-principal); }

/* ── SWITCH ───────────────────────────────────────────────────────────────
   Liga/desliga um estado com efeito imediato (não precisa confirmar). Trilho
   pill + botão deslizante. On = verde-pinheiro (superfície ativa).            */
.ds-switch {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; position: relative;
  width: 44px; height: 24px; border-radius: var(--radius-pill, 999px);
  background: var(--color-background-switch-track-off); cursor: pointer;
  transition: background .18s var(--ease, ease);
}
.ds-switch::before {                                 /* botão deslizante */
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--color-background-switch-thumb-off);
  box-shadow: var(--shadow-soft);
  transition: transform .18s var(--ease, ease);
}
/* hover sutil — mesmo idioma da Tag select/action (brightness), p/ afetar trilho on/off
   sem inventar token novo; alinha o Switch aos outros Selectors (check/radio têm hover) */
.ds-switch:hover:not(:disabled) { filter: brightness(0.96); }
.ds-switch:checked { background: var(--color-background-switch-track-on); }
.ds-switch:checked::before { transform: translateX(20px); background: var(--color-background-switch-thumb-on); }
.ds-switch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
.ds-switch:disabled { cursor: not-allowed; background: var(--color-background-switch-track-disabled); }
.ds-switch:disabled::before { box-shadow: none; background: var(--color-background-switch-thumb-disabled); }

/* ── LINK ─────────────────────────────────────────────────────────────────
   Âncora inline. Sublinhado é a affordance; nunca comunique link só por cor.
   Estados: default/hover(traço 2px)/visited/focus(anel-duplo).                */
.ds-link {
  color: var(--color-text-link); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
  border-radius: 2px; transition: color .15s var(--ease, ease), text-decoration-thickness .15s var(--ease, ease);
}
.ds-link:hover { color: var(--color-brand-tertiary-hover); text-decoration-thickness: 2px; }
.ds-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-border-link-focus-light); text-decoration: none; }
.ds-link:visited { color: var(--color-text-link); }
.ds-link--muted { color: var(--color-text-sub); text-decoration-color: var(--color-border-strong); }
.ds-link--muted:hover { color: var(--color-neutral-darkest); }
.ds-link--inverse, .ds-link--inverse:visited { color: var(--color-text-inverse); }
.ds-link--inverse:focus-visible { box-shadow: 0 0 0 2px var(--color-surface-dark), 0 0 0 4px var(--color-border-link-focus-dark); }
.ds-link--standalone { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--font-weight-medium); text-decoration: none; }
.ds-link--standalone::after { content: '→'; transition: transform .15s var(--ease, ease); }
.ds-link--standalone:hover { text-decoration: none; }
.ds-link--standalone:hover::after { transform: translateX(4px); }

/* ── DELTA ────────────────────────────────────────────────────────────────
   Pílula de variação de KPI: seta de direção (↑/↓) + valor com sinal
   (+12,4% / −5%). Tint claro + texto escuro, formato pill. Três tons:
   positivo (success), negativo (danger), neutro. Acompanha um KPI; estática
   (informa, não recebe ação). A direção (seta+sinal) reforça a cor — nunca
   comunique a variação só por matiz. Tipo = "label-tag" (= .ds-label-tag), IGUAL à Tag:
   família de indicadores compartilha forma e tipografia (sans bold 12, numerais tabulares). */
.ds-delta {
  display: inline-flex; align-items: center; gap: var(--spacing-inline-quarck, 4px);
  height: 24px; padding: 0 10px;
  border-radius: var(--radius-pill, 999px);
  /* text style label-tag: família label, bold, xs/12px, tracking 0,04em, caixa-alta */
  font-family: var(--font-family-label); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--color-neutral-light);
  color: var(--color-neutral-dark);
}
.ds-delta__icon { width: 14px; height: 14px; flex: none; margin-left: -2px; }
/* Positivo — variação favorável (success) */
.ds-delta--positivo {
  background: var(--color-feedback-success-lightest);
  color: var(--color-feedback-success-principal);
}
/* Negativo — variação desfavorável (danger) */
.ds-delta--negativo {
  background: var(--color-feedback-danger-lightest);
  color: var(--color-feedback-danger-principal);
}
/* Neutro — sem variação relevante (≈0) ou direção indiferente */
.ds-delta--neutro {
  background: var(--color-neutral-light);
  color: var(--color-neutral-dark);
}
/* ── IMAGE ────────────────────────────────────────────────────────────────
   Mídia com proporção travada e placeholder. O contêiner reserva o espaço
   (aspect-ratio) antes da imagem carregar — sem salto de layout (CLS). A
   <img> preenche cobrindo (object-fit:cover). Sem imagem, mostra o fundo
   muted + ícone de imagem. Raio opcional; variante circle para 1:1.          */
.ds-image {
  position: relative; display: block; overflow: hidden;
  width: 100%; aspect-ratio: 1 / 1;                 /* default 1:1; ratio via modifier */
  background: var(--color-background-image-placeholder);
  border-radius: var(--radius-none, 0px);
}
/* placeholder — ícone de imagem centrado, visível enquanto não há <img> por cima.
   currentColor herda o tom helper; a <img> de verdade fica acima e tampa.      */
.ds-image::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--ds-image-ph);
  background-repeat: no-repeat; background-position: center;
  background-size: clamp(28px, 22%, 56px);
  color: var(--color-text-helper);
  pointer-events: none;
}
/* a imagem real cobre o contêiner inteiro e fica acima do placeholder */
.ds-image > img {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.ds-image > img[hidden] { display: none; }          /* permite estado "só placeholder" */

/* Proporções — espelham as 5 variantes do Figma */
.ds-image--1-1  { aspect-ratio: 1 / 1; }
.ds-image--4-3  { aspect-ratio: 4 / 3; }
.ds-image--16-9 { aspect-ratio: 16 / 9; }
.ds-image--3-4  { aspect-ratio: 3 / 4; }
.ds-image--21-9 { aspect-ratio: 21 / 9; }

/* Raio opcional */
.ds-image--rounded { border-radius: var(--radius-large, 8px); }
.ds-image--circle  { border-radius: var(--radius-pill, 999px); }  /* use só com 1:1 */

/* object-fit alternativo — peça inteira sem corte (catálogo sobre fundo muted) */
.ds-image--contain > img { object-fit: contain; }
/* ── SKELETON ─────────────────────────────────────────────────────────────
   Placeholder de carregamento: blocos cinza que prenunciam o conteúdo real,
   com um brilho deslizante (shimmer) sinalizando atividade. Três formas —
   linha de texto, bloco e círculo (avatar). Respeita prefers-reduced-motion:
   sem shimmer, fica em cinza estático. Construído só de tokens + @keyframes. */
.ds-skeleton {
  display: block; flex: none;
  background-color: var(--color-background-skeleton-base);
  border-radius: var(--radius-medium, 4px);
  /* shimmer: faixa branca translúcida varrendo da esquerda p/ direita */
  background-image: linear-gradient(
    90deg,
    var(--color-transparent, rgba(0,0,0,0)) 0%,
    rgba(255,255,255,0.65) 50%,
    var(--color-transparent, rgba(0,0,0,0)) 100%);
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: -150% 0;
  animation: ds-skeleton-shimmer 1.4s var(--ease, ease) infinite;
}
@keyframes ds-skeleton-shimmer {
  to { background-position: 150% 0; }
}
/* Formas (Shape= do Figma) */
.ds-skeleton--text   { height: 16px; width: 100%; border-radius: var(--radius-small, 2px); }
.ds-skeleton--block  { height: 120px; width: 100%; border-radius: var(--radius-medium, 4px); }
.ds-skeleton--circle { width: 40px; height: 40px; border-radius: var(--radius-pill, 999px); }
/* Linha curta — última linha de um parágrafo (largura reduzida) */
.ds-skeleton--short  { width: 60%; }
/* Tamanhos de círculo (espelham os tamanhos do Avatar) */
.ds-skeleton--circle.ds-skeleton--xs { width: 20px; height: 20px; }
.ds-skeleton--circle.ds-skeleton--sm { width: 28px; height: 28px; }
.ds-skeleton--circle.ds-skeleton--lg { width: 56px; height: 56px; }
.ds-skeleton--circle.ds-skeleton--xl { width: 64px; height: 64px; }
/* Agrupador de linhas de texto (parágrafo) */
.ds-skeleton-lines { display: flex; flex-direction: column; gap: var(--spacing-stack-mini, 12px); }
/* Composição lado-a-lado (avatar + texto) — preset List */
.ds-skeleton-media { display: flex; align-items: flex-start; gap: var(--spacing-inline-mini, 12px); }
.ds-skeleton-media__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-stack-nano, 8px); }
/* Cartão — bloco de imagem + linhas (preset Card) */
.ds-skeleton-card { display: flex; flex-direction: column; gap: var(--spacing-stack-xxxs, 16px); }
/* prefers-reduced-motion: sem varredura, cinza estático e chapado (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  .ds-skeleton { animation: none; background-image: none; }
}
/* ── SPINNER ──────────────────────────────────────────────────────────────
   Carregamento indeterminado: anel girando com gap. Tamanhos sm/md/lg e
   contexto claro/escuro. Acessível: role=status + aria-label; respeita
   prefers-reduced-motion (deixa de girar e mantém o anel estático).
   Construído só de tokens + conic/border-mask; sem JS.                       */
.ds-spinner {
  display: inline-block; flex: none; box-sizing: border-box;
  width: var(--ds-spinner-size, 24px); height: var(--ds-spinner-size, 24px);
  border-radius: var(--radius-pill, 999px);
  /* trilho (anel apagado) + arco (cor plena), recortado num anel via mask */
  border: var(--ds-spinner-stroke, 2.5px) solid var(--ds-spinner-track, var(--color-border));
  border-top-color: var(--ds-spinner-arc, var(--color-icon-spinner-light));
  animation: ds-spin .7s linear infinite;
  vertical-align: middle;
}
/* Tamanhos — espessura proporcional ao diâmetro */
.ds-spinner--sm { --ds-spinner-size: 16px; --ds-spinner-stroke: 2px; }
.ds-spinner--md { --ds-spinner-size: 24px; --ds-spinner-stroke: 2.5px; }
.ds-spinner--lg { --ds-spinner-size: 32px; --ds-spinner-stroke: 3px; }
/* Contexto claro (padrão) — arco no preto da marca sobre trilho neutro */
.ds-spinner--light { --ds-spinner-track: var(--color-border); --ds-spinner-arc: var(--color-icon-spinner-light); }
/* Contexto escuro — arco branco sobre trilho de branco apagado (fundo escuro) */
.ds-spinner--dark { --ds-spinner-track: rgba(255,255,255,0.24); --ds-spinner-arc: var(--color-icon-spinner-dark); }
/* Sobre superfície verde da marca */
.ds-spinner--brand { --ds-spinner-track: rgba(255,255,255,0.28); --ds-spinner-arc: var(--color-icon-spinner-dark); }
@keyframes ds-spin { to { transform: rotate(360deg); } }
/* Bloco rótulo+spinner (carregamento de página/seção) */
.ds-spinner-block { display: inline-flex; align-items: center; gap: var(--spacing-inline-nano, 8px); }
.ds-spinner-block__label { font-family: var(--font-family-sans); font-size: var(--font-size-sm); color: var(--color-text-helper); }
/* Acessibilidade do movimento — sem rotação para quem pede menos animação */
@media (prefers-reduced-motion: reduce) {
  .ds-spinner { animation: none; }
}
/* ── PROGRESS BAR ───────────────────────────────────────────────────────────
   Progresso linear: determinado (width %) ou indeterminado (animação).
   Trilho + preenchimento. role=progressbar + aria-valuenow/min/max no <div>
   externo. Rótulo/percentual opcionais. Cor de feedback nunca sozinha —
   acompanhe sempre de rótulo textual.                                         */
.ds-progress { display: flex; flex-direction: column; gap: var(--spacing-stack-nano, 8px); width: 100%; }
.ds-progress__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--spacing-inline-nano, 8px);
}
/* label = estilo label (caixa-alta, bold, xs, tracking) — Figma 522:44 "CARREGANDO" */
.ds-progress__label {
  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.2;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text);
}
.ds-progress__value {
  font-family: var(--font-family-mono, monospace); font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); line-height: 1.2;
  color: var(--color-text-sub); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Trilho */
.ds-progress__track {
  position: relative; width: 100%; height: 6px; overflow: hidden;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-background-progress-bar-track);
}
.ds-progress--lg .ds-progress__track { height: 10px; }
/* Preenchimento determinado — width inline (style="--ds-progress:62%") */
.ds-progress__fill {
  height: 100%; width: var(--ds-progress, 0%);
  border-radius: inherit;
  background: var(--color-background-progress-bar-fill-default);
  transition: width .4s var(--ease, ease);
}
/* Intenções do preenchimento */
.ds-progress--accent  .ds-progress__fill { background: var(--color-surface-accent); }
.ds-progress--success .ds-progress__fill { background: var(--color-background-progress-bar-fill-success); }
.ds-progress--error   .ds-progress__fill { background: var(--color-background-progress-bar-fill-error); }
/* Indeterminado — fragmento desliza no trilho (animação CSS, sem JS) */
.ds-progress--indeterminate .ds-progress__fill {
  width: 40%; transition: none;
  animation: ds-progress-slide 1.5s ease-in-out infinite;
}
@keyframes ds-progress-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}
@media (prefers-reduced-motion: reduce) {
  .ds-progress__fill { transition: none; }
  .ds-progress--indeterminate .ds-progress__fill { animation: none; width: 100%; opacity: .5; }
}
/* ── TEXTAREA (field multilinha) ───────────────────────────────────────────
   Mesma anatomia do Input (.ds-field label+campo+ajuda), porém multilinha:
   altura maior, resize vertical, contador de caracteres opcional na linha do
   rótulo. Reusa .ds-field / .ds-field__label / .ds-field__help do Input.
   Estados: default / focus / filled / error / warning / read-only / disabled. */
.ds-field__labelrow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--spacing-inline-nano, 8px);
}
.ds-field__count {
  font-family: var(--font-family-mono, monospace); font-size: var(--font-size-xs); line-height: 1.45;
  color: var(--color-text-helper); flex: none; font-variant-numeric: tabular-nums;
}
.ds-field__count--over { color: var(--color-danger); }
.ds-textarea {
  width: 100%; min-height: 104px; resize: vertical;
  padding: var(--spacing-inset-mini, 12px) var(--spacing-inset-xs, 16px);
  border: 1.5px solid var(--color-border-textarea-default);
  border-radius: var(--radius-medium, 4px); background: var(--color-background-textarea-default);
  font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: 1.5;
  color: var(--color-text);
  transition: border-color .15s var(--ease, ease), box-shadow .15s var(--ease, ease);
}
.ds-textarea::placeholder { font-family: var(--font-family-sans); font-style: italic; font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: 1.3; color: var(--color-text-helper); }
.ds-textarea:focus-visible {
  outline: none; border-color: var(--color-border-textarea-focus);
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring);
}
.ds-textarea--filled { border-color: var(--color-border-textarea-filled); }
.ds-textarea--error { border-color: var(--color-border-textarea-error); }
.ds-textarea--warning { border-color: var(--color-border-textarea-warning); }
.ds-textarea:read-only {
  background: var(--color-background-textarea-readonly); border-color: var(--color-border-textarea-readonly);
  resize: none;
}
.ds-textarea:disabled {
  background: var(--color-background-textarea-disabled); border-color: var(--color-border-textarea-disabled);
  color: var(--color-neutral-principal); cursor: not-allowed; resize: none;
}
.ds-field--sm .ds-textarea { min-height: 80px; }
/* ── NAV ITEM ─────────────────────────────────────────────────────────────
   Item de navegação do rail escuro: ícone + label, com chevron no Group e
   indentação no Sub-item. Vive sobre superfície escura (.ds-navrail).
   Estados via CSS: :hover / :focus-visible / .is-active (aria-current).
   Foco = anel-duplo com anel INVERSO (#5a9bff) por estar sobre fundo escuro. */
.ds-navrail {
  display: flex; flex-direction: column; gap: var(--spacing-stack-quarck, 4px);
  padding: var(--spacing-inset-mini, 12px);
  background: var(--color-surface-dark);
  border-radius: var(--radius-large, 8px);
}
.ds-navitem {
  display: flex; align-items: center; gap: 10px;
  width: 220px; box-sizing: border-box;
  padding: 9px var(--spacing-inset-mini, 12px);
  border-radius: 6px;                                /* Figma 2184:13: radius 6 */
  font-family: var(--font-family-tab, var(--font-family-sans)); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: 1.2;
  color: var(--color-text-inverse-muted);  /* default: apagado sobre escuro */
  text-decoration: none; white-space: nowrap; text-align: left; cursor: pointer;   /* left p/ o Group (<button> centraliza por padrão) */
  background: transparent; border: 0;
  transition: background .15s var(--ease, ease), color .15s var(--ease, ease);
}
.ds-navitem__icon { flex: none; width: 20px; height: 20px; display: grid; place-content: center; color: currentColor; }
.ds-navitem__icon svg { width: 20px; height: 20px; display: block; }
.ds-navitem__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-navitem__chevron { flex: none; width: 16px; height: 16px; color: currentColor; transition: transform .18s var(--ease, ease); }
.ds-navitem__chevron svg { width: 16px; height: 16px; display: block; }
/* Hover — superfície sutil + texto pleno (branco) */
.ds-navitem:hover, .ds-navitem.is-hover { background: rgba(255,255,255,.06); color: var(--color-text-inverse); }
/* Active — superfície de descanso + label em Medium branco (página atual) */
.ds-navitem.is-active, .ds-navitem[aria-current="page"] {
  background: var(--color-neutral-dark);
  color: var(--color-text-inverse); font-weight: var(--font-weight-medium);
}
/* Focus — anel-duplo INVERSO (respiro = superfície escura, anel = focus-inverse) */
.ds-navitem:focus-visible, .ds-navitem.is-focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-surface-dark), 0 0 0 4px var(--color-focus-ring-inverse);
  color: var(--color-text-inverse);
}
/* Group — pai com filhos; chevron à direita. Aberto gira o chevron */
.ds-navitem--group .ds-navitem__chevron { margin-left: auto; }
.ds-navitem--group[aria-expanded="true"] .ds-navitem__chevron { transform: rotate(180deg); }
/* Sub-item — indentado sob o pai, sem ícone, densidade levemente menor */
.ds-navitem--sub { padding-top: 6px; padding-bottom: 6px; padding-left: 42px; }
/* Disabled — apagado, sem alvo */
.ds-navitem[aria-disabled="true"] { color: var(--color-neutral-principal); cursor: not-allowed; background: transparent; }

/* Cache-bust automático: editar este arquivo recalcula o ?v= no <head> do
   index.html (hash de conteúdo via bump-cache.py, disparado por hook/serve). */

/* ── CONTENT SWITCHER (segmented control) ───────────────────────────────────
   Alterna entre 2–4 visões mutuamente exclusivas. Fiel ao Figma (577:57).     */
.ds-switcher {
  display: inline-flex; align-items: stretch; height: 40px;
  border: 1px solid var(--color-border-content-switcher);
  border-radius: var(--radius-none, 0px);
  background: var(--color-background-content-switcher); overflow: hidden;
}
.ds-switcher__seg {
  appearance: none; flex: 1 0 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-inline-nano, 8px);
  padding: 0 var(--spacing-inline-mini, 12px);
  border: 0; border-left: 1px solid var(--color-border-content-switcher);
  margin: 0; background: var(--color-background-content-switcher);
  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); white-space: nowrap; cursor: pointer;
  transition: background .15s var(--ease, ease), color .15s var(--ease, ease);
}
.ds-switcher__seg:first-child { border-left: 0; }
.ds-switcher__seg:hover { background: var(--color-bg-muted); }
.ds-switcher__seg:active { background: var(--color-border); }
.ds-switcher__seg[aria-checked="true"], .ds-switcher__seg.is-selected {
  background: var(--color-background-content-switcher-selected); color: var(--color-text-inverse); font-weight: var(--font-weight-medium);
}
.ds-switcher__seg[aria-checked="true"]:hover, .ds-switcher__seg.is-selected:hover { background: var(--color-background-content-switcher-selected); }
.ds-switcher__seg:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-focus-ring); z-index: 1; }
.ds-switcher--sm { height: 32px; }
.ds-switcher--lg { height: 48px; }
.ds-switcher--full { display: flex; width: 100%; }
.ds-switcher[aria-disabled="true"] { border-color: var(--color-border); }
.ds-switcher[aria-disabled="true"] .ds-switcher__seg, .ds-switcher__seg:disabled {
  cursor: not-allowed; background: var(--color-background-content-switcher-disabled); color: var(--color-neutral-principal);
  border-left-color: var(--color-border); font-weight: var(--font-weight-regular);
}
.ds-switcher[aria-disabled="true"] .ds-switcher__seg:first-child, .ds-switcher__seg:disabled:first-child { border-left: 0; }

/* ── NUMBER INPUT (campo numérico com stepper) ──────────────────────────────
   Herda a régua do Input; difere em valor mono + steppers. Fiel ao Figma 550:2. */
.ds-numberinput {
  position: relative; display: flex; align-items: stretch; width: 100%; height: 48px;
  border: 1.5px solid var(--color-border-input-enabled); border-radius: var(--radius-medium, 4px);
  background: var(--color-background-input-enabled);
  transition: border-color .15s var(--ease, ease), box-shadow .15s var(--ease, ease);
}
.ds-numberinput__field {
  flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: transparent; outline: none;
  padding: 0 var(--spacing-inset-xs, 16px);
  font-family: var(--font-family-mono, "Roboto Mono", monospace); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: 1.3;
  color: var(--color-text); font-variant-numeric: tabular-nums;
}
/* placeholder em sans itálico (input-placeholder) — sobrescreve o mono do campo; valor digitado segue mono */
.ds-numberinput__field::placeholder { font-family: var(--font-family-sans); font-style: italic; font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: 1.3; color: var(--color-text-helper); }
.ds-numberinput__field::-webkit-outer-spin-button, .ds-numberinput__field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ds-numberinput__field[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ds-numberinput__steppers { flex: none; display: flex; flex-direction: column; width: 28px; align-self: stretch; border-left: 1px solid var(--color-border); }
.ds-numberinput__step {
  flex: 1 1 50%; display: grid; place-content: center; width: 100%; padding: 0; border: 0; background: transparent;
  color: var(--color-neutral-dark); cursor: pointer; transition: background .12s var(--ease, ease), color .12s var(--ease, ease);
}
.ds-numberinput__step:first-child { border-bottom: 1px solid var(--color-border); }
.ds-numberinput__step svg { width: 14px; height: 14px; display: block; }
.ds-numberinput__step:hover { background: var(--color-bg-muted); color: var(--color-neutral-darkest); }
.ds-numberinput__step:active { background: var(--color-border); }
.ds-numberinput__step:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-bg), inset 0 0 0 4px var(--color-focus-ring); }
.ds-numberinput:focus-within { border-color: var(--color-border-input-filled); box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
.ds-numberinput--filled { border-color: var(--color-border-input-filled); }
.ds-numberinput--error  { border-color: var(--color-border-input-error); }
.ds-numberinput--warning{ border-color: var(--color-border-input-warning); }
.ds-numberinput--readonly { background: var(--color-background-input-readonly); border-color: var(--color-border-input-readonly); }
.ds-numberinput--readonly .ds-numberinput__step { color: var(--color-icon-input-disabled); cursor: not-allowed; pointer-events: none; }
.ds-numberinput--disabled, .ds-numberinput:has(.ds-numberinput__field:disabled) { background: var(--color-background-input-disabled); border-color: var(--color-border-input-disabled); }
.ds-numberinput--disabled .ds-numberinput__field, .ds-numberinput__field:disabled { color: var(--color-icon-input-disabled); cursor: not-allowed; }
.ds-numberinput--disabled .ds-numberinput__step { color: var(--color-icon-input-disabled); cursor: not-allowed; pointer-events: none; }
.ds-numberinput--sm { height: 40px; }
.ds-numberinput--lg { height: 56px; }

/* ── PHONE INPUT (field de telefone) ────────────────────────────────────────
   Seletor de DDI + número numa caixa só. Herda a régua do Input. Fiel ao 1009:2. */
.ds-phoneinput {
  display: flex; align-items: stretch; width: 100%; height: 48px;
  border: 1.5px solid var(--color-border-input-enabled); border-radius: var(--radius-medium, 4px);
  background: var(--color-background-input-enabled); overflow: hidden;
  transition: border-color .15s var(--ease, ease), box-shadow .15s var(--ease, ease);
}
.ds-phoneinput__country {
  flex: none; display: inline-flex; align-items: center; gap: var(--spacing-inline-nano, 8px);
  padding-left: var(--spacing-inset-mini, 12px); padding-right: var(--spacing-inset-nano, 8px);
  border: 0; border-right: 1px solid var(--color-border); background: transparent; cursor: pointer;
  font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); line-height: 1.45;
  color: var(--color-text); white-space: nowrap;
}
.ds-phoneinput__flag { flex: none; width: 22px; height: 16px; border-radius: 2px; background: var(--color-border); background-size: cover; background-position: center; }
.ds-phoneinput__ddi { font-variant-numeric: tabular-nums; }
.ds-phoneinput__chevron { flex: none; width: 16px; height: 16px; display: block; color: var(--color-icon-input-enabled); transition: transform .18s var(--ease, ease); }
.ds-phoneinput__chevron svg { width: 16px; height: 16px; display: block; }
.ds-phoneinput__country[aria-expanded="true"] .ds-phoneinput__chevron { transform: rotate(180deg); }
.ds-phoneinput__number {
  flex: 1 1 auto; min-width: 0; width: 100%; border: 0; outline: none; background: transparent;
  padding: 0 var(--spacing-inset-mini, 12px);
  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-phoneinput__number::placeholder { font-family: var(--font-family-sans); font-style: italic; font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: 1.3; color: var(--color-text-helper); }
.ds-phoneinput:focus-within, .ds-phoneinput--focus { border-color: var(--color-border-input-filled); box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring); }
.ds-phoneinput--filled { border-color: var(--color-border-input-filled); }
.ds-phoneinput--error { border-color: var(--color-border-input-error); }
.ds-phoneinput--warning { border-color: var(--color-border-input-warning); }
.ds-phoneinput--readonly { background: var(--color-background-input-readonly); border-color: var(--color-border-input-readonly); }
.ds-phoneinput--readonly .ds-phoneinput__country, .ds-phoneinput--readonly .ds-phoneinput__number { cursor: default; }
.ds-phoneinput--disabled { background: var(--color-background-input-disabled); border-color: var(--color-border-input-disabled); cursor: not-allowed; }
.ds-phoneinput--disabled .ds-phoneinput__country, .ds-phoneinput--disabled .ds-phoneinput__number { color: var(--color-icon-input-disabled); cursor: not-allowed; pointer-events: none; }
.ds-phoneinput--disabled .ds-phoneinput__chevron { color: var(--color-icon-input-disabled); }

/* ── SLIDER ──────────────────────────────────────────────────────────────────
   Faixa contínua min/max. Single = <input type=range> nativo; Range = 2 alças. Fiel ao 562:2. */
.ds-slider { display: flex; flex-direction: column; gap: var(--spacing-stack-nano, 8px); width: 100%; }
.ds-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-inline-nano, 8px); }
.ds-slider__label { 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-sub); }
.ds-slider__value { font-family: var(--font-family-mono, "Roboto Mono", monospace); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: 1.2; color: var(--color-neutral-darkest); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-slider__row { display: flex; align-items: center; gap: var(--spacing-inline-mini, 12px); }
.ds-slider__minmax { flex: none; font-family: var(--font-family-mono, "Roboto Mono", monospace); font-size: var(--font-size-xs); line-height: 1.2; color: var(--color-text-helper); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-range { --ds-slider: 50%; -webkit-appearance: none; appearance: none; margin: 0; flex: 1 1 auto; min-width: 0; width: 100%; height: 16px; background: transparent; cursor: pointer; }
.ds-range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill, 999px); background: linear-gradient(to right, var(--color-background-slider-fill) 0 var(--ds-slider), var(--color-background-slider-track) var(--ds-slider) 100%); }
.ds-range::-moz-range-track { height: 4px; border-radius: var(--radius-pill, 999px); background: var(--color-background-slider-track); }
.ds-range::-moz-range-progress { height: 4px; border-radius: var(--radius-pill, 999px); background: var(--color-background-slider-fill); }
.ds-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; border: 0; background: var(--color-background-slider-handle); cursor: pointer; }
.ds-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 0; background: var(--color-background-slider-handle); cursor: pointer; }
.ds-range:focus-visible { outline: none; }
.ds-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-stroke-slider-focus); }
.ds-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-stroke-slider-focus); }
.ds-slider--sm .ds-range::-webkit-slider-runnable-track { height: 2px; }
.ds-slider--sm .ds-range::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -6px; }
.ds-slider--sm .ds-range::-moz-range-track, .ds-slider--sm .ds-range::-moz-range-progress { height: 2px; }
.ds-slider--sm .ds-range::-moz-range-thumb { width: 14px; height: 14px; }
.ds-range:disabled { cursor: not-allowed; }
.ds-range:disabled::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--color-background-slider-handle-disabled) 0 var(--ds-slider), var(--color-background-slider-track) var(--ds-slider) 100%); }
.ds-range:disabled::-webkit-slider-thumb { background: var(--color-background-slider-handle-disabled); cursor: not-allowed; }
.ds-range:disabled::-moz-range-progress { background: var(--color-background-slider-handle-disabled); }
.ds-range:disabled::-moz-range-thumb { background: var(--color-background-slider-handle-disabled); }
.ds-slider--disabled .ds-slider__label, .ds-slider--disabled .ds-slider__value, .ds-slider--disabled .ds-slider__minmax { color: var(--color-neutral-principal); }
.ds-slider__track { position: relative; flex: 1 1 auto; min-width: 0; height: 16px; display: flex; align-items: center; }
.ds-slider__track::before { content: ''; position: absolute; left: 0; right: 0; height: 4px; border-radius: var(--radius-pill, 999px); background: var(--color-background-slider-track); }
.ds-slider__track::after { content: ''; position: absolute; left: var(--ds-from, 0%); right: calc(100% - var(--ds-to, 100%)); height: 4px; border-radius: var(--radius-pill, 999px); background: var(--color-background-slider-fill); }
.ds-slider__thumb { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 50%; border: 0; padding: 0; background: var(--color-background-slider-handle); cursor: pointer; }
.ds-slider__thumb:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-stroke-slider-focus); }
.ds-slider--sm .ds-slider__track::before, .ds-slider--sm .ds-slider__track::after { height: 2px; }
.ds-slider--sm .ds-slider__thumb { width: 14px; height: 14px; }
.ds-slider--disabled .ds-slider__track::after { background: var(--color-background-slider-handle-disabled); }
.ds-slider--disabled .ds-slider__thumb { background: var(--color-background-slider-handle-disabled); cursor: not-allowed; }