/**
 * ds-componentes.css — os componentes do Design System do Vertix.
 *
 * Tudo aqui tem o prefixo `ds-`, e isso não é estética: `vx-` já era usado
 * pelo card de Stories (`vertix-boneco.js` injeta `.vx-card` e `.vx-chip`
 * globais) e pelo paywall do painel (`.vx-btn`). Um prefixo novo garante que
 * carregar este arquivo não muda nada que não o use.
 *
 * Nenhum valor solto: toda cor, raio, espaço e tamanho vem de `ds-tokens.css`
 * ou, para a cor de ação, de `tema.css` (`--brand-*`). A vitrine viva de tudo
 * isto é `/design-system.html`.
 *
 * Os comportamentos (folha, toast, confirmação, vibração, esqueleto com
 * atraso) moram em `js/vertix-ui.js`.
 */

/* =====================================================================
   Tipografia — os quatro níveis
   ===================================================================== */
.ds-display { font-size: var(--ds-display-tam); line-height: var(--ds-display-alt); font-weight: var(--ds-display-peso); letter-spacing: var(--ds-display-esp); }
.ds-titulo  { font-size: var(--ds-titulo-tam);  line-height: var(--ds-titulo-alt);  font-weight: var(--ds-titulo-peso);  letter-spacing: var(--ds-titulo-esp); }
.ds-corpo   { font-size: var(--ds-corpo-tam);   line-height: var(--ds-corpo-alt);   font-weight: var(--ds-corpo-peso); }
.ds-legenda { font-size: var(--ds-legenda-tam); line-height: var(--ds-legenda-alt); font-weight: var(--ds-legenda-peso); }
.ds-display, .ds-titulo, .ds-corpo, .ds-legenda { margin: 0; }
.ds-texto-2 { color: var(--ds-texto-2); }
.ds-texto-3 { color: var(--ds-texto-3); }
.ds-enfase { font-weight: 500; }
.ds-num { font-variant-numeric: tabular-nums; }

/* =====================================================================
   Ícone — Lucide, via sprite (`/img/icones.svg`)
   A cor vem do texto em volta; a espessura, daqui.
   ===================================================================== */
.ds-i {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  vertical-align: -0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.ds-i--p { width: 16px; height: 16px; }
.ds-i--m { width: 20px; height: 20px; }
.ds-i--g { width: 24px; height: 24px; }

/* =====================================================================
   Foco — um anel só, em todo componente
   ===================================================================== */
.ds-btn:focus-visible, .ds-btn-icone:focus-visible, .ds-chip:focus-visible,
.ds-seg__opcao:focus-visible, .ds-linha:focus-visible, .ds-tabbar__item:focus-visible,
.ds-switch input:focus-visible + .ds-switch__trilho {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* =====================================================================
   Botão
   ===================================================================== */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-esp-2);
  min-height: var(--ds-alvo-toque); padding: 0 var(--ds-esp-4);
  border: 0; border-radius: var(--ds-raio-controle);
  font-family: var(--ds-fonte); font-size: var(--ds-corpo-tam); font-weight: 500; line-height: 1;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  background: var(--ds-superficie-2); color: var(--ds-texto);
  transition: background-color var(--ds-dur-toque) var(--ds-curva), transform var(--ds-dur-toque) var(--ds-curva), opacity var(--ds-dur-toque);
  -webkit-tap-highlight-color: transparent;
}
.ds-btn:active { transform: scale(0.98); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.ds-btn--primario { background: var(--brand-primary); color: var(--ds-texto-sobre-cor); }
.ds-btn--primario:hover { background: var(--brand-primary-dark); }
.ds-btn--secundario { background: var(--ds-superficie-2); color: var(--ds-texto); }
.ds-btn--secundario:hover { background: var(--ds-superficie-3); }
.ds-btn--fantasma { background: transparent; color: var(--ds-texto); box-shadow: inset 0 0 0 1px var(--ds-linha-forte); }
.ds-btn--fantasma:hover { background: var(--ds-superficie-2); }
.ds-btn--perigo { background: var(--ds-perigo); color: var(--ds-texto-sobre-cor); }
.ds-btn--perigo-suave { background: var(--ds-perigo-suave); color: var(--ds-perigo); }
.ds-btn--texto { background: none; color: var(--brand-primary); padding: 0 var(--ds-esp-1); }
.ds-btn--p { min-height: 36px; padding: 0 var(--ds-esp-3); font-size: var(--ds-legenda-tam); border-radius: 10px; }
.ds-btn--g { min-height: 52px; font-weight: 600; border-radius: 14px; }
.ds-btn--bloco { display: flex; width: 100%; }

.ds-btn-icone {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: var(--ds-alvo-toque); height: var(--ds-alvo-toque);
  border: 0; border-radius: var(--ds-raio-controle); cursor: pointer;
  background: var(--ds-superficie-2); color: var(--ds-texto);
  transition: background-color var(--ds-dur-toque) var(--ds-curva);
  -webkit-tap-highlight-color: transparent;
}
.ds-btn-icone:hover { background: var(--ds-superficie-3); }
.ds-btn-icone--limpo { background: transparent; }
.ds-btn-icone--limpo:hover { background: var(--ds-superficie-2); }
.ds-btn-icone--redondo { border-radius: 50%; }

/* =====================================================================
   Campo
   ===================================================================== */
.ds-campo { display: grid; gap: var(--ds-esp-2); min-width: 0; }
.ds-campo__rotulo { font-size: var(--ds-legenda-tam); line-height: var(--ds-legenda-alt); font-weight: 500; color: var(--ds-texto-2); }
.ds-entrada {
  display: flex; align-items: center; gap: var(--ds-esp-3);
  min-height: 48px; padding: 0 var(--ds-esp-4);
  border-radius: var(--ds-raio-controle);
  background: var(--ds-superficie); box-shadow: inset 0 0 0 1px var(--ds-linha-forte);
  color: var(--ds-texto-3);
  transition: box-shadow var(--ds-dur-toque) var(--ds-curva);
}
[data-tema="escuro"] .ds-entrada { background: var(--ds-superficie-2); box-shadow: inset 0 0 0 1px var(--ds-linha); }
.ds-entrada:focus-within { box-shadow: inset 0 0 0 1.5px var(--brand-primary), 0 0 0 4px rgba(var(--brand-primary-rgb), 0.14); color: var(--ds-texto-2); }
.ds-entrada input, .ds-entrada select, .ds-entrada textarea {
  flex: 1; min-width: 0; height: 100%; min-height: 46px;
  border: 0; outline: 0; background: transparent; padding: 0;
  font-family: var(--ds-fonte); font-size: var(--ds-corpo-tam); color: var(--ds-texto);
}
.ds-entrada textarea { padding: var(--ds-esp-3) 0; resize: vertical; }
.ds-entrada input::placeholder, .ds-entrada textarea::placeholder { color: var(--ds-texto-3); }
.ds-campo__dica { font-size: var(--ds-legenda-tam); line-height: var(--ds-legenda-alt); color: var(--ds-texto-3); }
.ds-campo__erro { font-size: var(--ds-legenda-tam); line-height: var(--ds-legenda-alt); color: var(--ds-perigo); }
.ds-campo--erro .ds-entrada { box-shadow: inset 0 0 0 1.5px var(--ds-perigo); }
/* Ação dentro do campo (mostrar senha, limpar): encosta na borda direita
   sem perder os 44px de alvo de toque. */
.ds-entrada .ds-btn-icone { margin-right: calc(-1 * var(--ds-esp-3)); color: var(--ds-texto-3); }
.ds-entrada .ds-btn-icone:hover { color: var(--ds-texto); }

/* =====================================================================
   Controle segmentado
   ===================================================================== */
.ds-seg { display: flex; gap: 2px; padding: 3px; border-radius: var(--ds-raio-controle); background: var(--ds-superficie-2); }
.ds-seg__opcao {
  flex: 1; min-height: 36px; padding: 0 var(--ds-esp-3);
  border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  font-family: var(--ds-fonte); font-size: var(--ds-legenda-tam); font-weight: 500; color: var(--ds-texto-2);
  transition: background-color var(--ds-dur-base) var(--ds-curva), color var(--ds-dur-base) var(--ds-curva);
}
.ds-seg__opcao.ativo, .ds-seg__opcao[aria-pressed="true"], .ds-seg__opcao[aria-selected="true"] {
  background: var(--ds-superficie); color: var(--ds-texto); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
}
[data-tema="escuro"] .ds-seg__opcao.ativo, [data-tema="escuro"] .ds-seg__opcao[aria-pressed="true"], [data-tema="escuro"] .ds-seg__opcao[aria-selected="true"] { background: var(--ds-superficie-3); }

/* =====================================================================
   Lista agrupada e linha
   ===================================================================== */
.ds-lista { display: flex; flex-direction: column; border-radius: var(--ds-raio-card); background: var(--ds-superficie); overflow: hidden; }
.ds-lista--contorno { box-shadow: var(--ds-sombra-0); }
/* `box-sizing` explícito: `width: 100%` mais o padding estourava a lista pela
   direita quando a linha é um <div>. Num <button> não aparecia, porque o
   navegador já dá border-box a botão -- e as telas não zeram box-sizing. */
.ds-linha {
  display: flex; align-items: center; gap: var(--ds-esp-3); box-sizing: border-box;
  min-height: 56px; padding: var(--ds-esp-3) var(--ds-esp-4);
  width: 100%; border: 0; background: transparent; text-align: left; color: inherit;
  font-family: var(--ds-fonte); font-size: var(--ds-corpo-tam);
}
.ds-linha + .ds-linha { box-shadow: inset 0 1px 0 var(--ds-linha); }
button.ds-linha, a.ds-linha { cursor: pointer; text-decoration: none; transition: background-color var(--ds-dur-toque) var(--ds-curva); }
button.ds-linha:hover, a.ds-linha:hover { background: var(--ds-superficie-2); }
.ds-linha__icone { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--ds-superficie-2); color: var(--ds-texto); }
.ds-linha__corpo { flex: 1; min-width: 0; }
.ds-linha__titulo { display: block; font-size: var(--ds-corpo-tam); line-height: var(--ds-corpo-alt); font-weight: 500; color: var(--ds-texto); overflow-wrap: anywhere; }
.ds-linha__meta { display: block; font-size: var(--ds-legenda-tam); line-height: var(--ds-legenda-alt); color: var(--ds-texto-2); }
.ds-linha__fim { flex-shrink: 0; color: var(--ds-texto-3); display: flex; align-items: center; gap: var(--ds-esp-2); }

/* =====================================================================
   Card — só onde agrupar ajuda; nunca um dentro do outro
   ===================================================================== */
.ds-card { background: var(--ds-superficie); border-radius: var(--ds-raio-card); padding: var(--ds-esp-4); }
.ds-card--contorno { box-shadow: var(--ds-sombra-0); }

/* =====================================================================
   Métrica e faixa de métricas
   ===================================================================== */
.ds-metrica { display: grid; align-content: start; gap: var(--ds-esp-1); min-width: 0; }
.ds-metrica__rotulo { display: flex; align-items: center; gap: var(--ds-esp-2); font-size: var(--ds-legenda-tam); line-height: var(--ds-legenda-alt); font-weight: 500; color: var(--ds-texto-2); }
.ds-metrica__valor { font-size: var(--ds-display-tam); line-height: var(--ds-display-alt); font-weight: var(--ds-display-peso); letter-spacing: var(--ds-display-esp); font-variant-numeric: tabular-nums; color: var(--ds-texto); }
.ds-metrica__valor small { font-size: var(--ds-legenda-tam); font-weight: 500; letter-spacing: 0; color: var(--ds-texto-3); }
.ds-faixa { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.ds-faixa > * + * { padding-left: var(--ds-esp-6); box-shadow: inset 1px 0 0 var(--ds-linha); }
.ds-faixa > * { padding-right: var(--ds-esp-6); }
@media (max-width: 600px) {
  .ds-faixa { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-esp-4) 0; }
  .ds-faixa > * { padding-right: var(--ds-esp-4); }
  .ds-faixa > * + * { padding-left: 0; box-shadow: none; }
  .ds-faixa > *:nth-child(even) { padding-left: var(--ds-esp-4); box-shadow: inset 1px 0 0 var(--ds-linha); }
}

/* =====================================================================
   Anel (o SVG sai de vertixUI.anel) e barra de progresso
   ===================================================================== */
.ds-anel { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; }
.ds-anel svg { display: block; transform: rotate(-90deg); }
.ds-anel__trilho { stroke: var(--ds-superficie-3); }
.ds-anel__valor { stroke: var(--ds-anel-cor, var(--brand-primary)); transition: stroke-dashoffset var(--ds-dur-folha) var(--ds-curva); }
.ds-anel__rotulo { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--ds-legenda-tam); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ds-texto); }

.ds-progresso { display: flex; gap: 2px; height: 6px; border-radius: var(--ds-raio-pilula); background: var(--ds-superficie-3); overflow: hidden; }
.ds-progresso > i { display: block; height: 100%; background: var(--brand-primary); transition: width var(--ds-dur-folha) var(--ds-curva); }
.ds-progresso > i:first-child { border-radius: var(--ds-raio-pilula) 0 0 var(--ds-raio-pilula); }
.ds-progresso > i:last-child { border-radius: 0 var(--ds-raio-pilula) var(--ds-raio-pilula) 0; }
.ds-progresso--g { height: 8px; }

/* =====================================================================
   Perfil de zonas (blocos de treino estruturado)
   ===================================================================== */
.ds-zonas { display: flex; align-items: flex-end; gap: 2px; height: 36px; }
.ds-zonas > i { display: block; min-width: 3px; border-radius: 3px 3px 1px 1px; }
.ds-zonas > i[data-z="1"] { background: var(--ds-zona-1); }
.ds-zonas > i[data-z="2"] { background: var(--ds-zona-2); }
.ds-zonas > i[data-z="3"] { background: var(--ds-zona-3); }
.ds-zonas > i[data-z="4"] { background: var(--ds-zona-4); }
.ds-zonas > i[data-z="5"] { background: var(--ds-zona-5); }

/* =====================================================================
   Estado: ponto, selo e marcador de modalidade
   ===================================================================== */
.ds-ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ds-texto-3); }
.ds-ponto--sucesso { background: var(--ds-sucesso); }
.ds-ponto--aviso { background: var(--ds-aviso); }
.ds-ponto--perigo { background: var(--ds-perigo); }

.ds-selo {
  display: inline-flex; align-items: center; gap: var(--ds-esp-1);
  min-height: 24px; padding: 0 10px; border-radius: var(--ds-raio-pilula);
  font-size: var(--ds-legenda-tam); font-weight: 500; white-space: nowrap;
  background: var(--ds-superficie-2); color: var(--ds-texto-2);
}
.ds-selo--sucesso { background: var(--ds-sucesso-suave); color: var(--ds-sucesso); }
.ds-selo--aviso { background: var(--ds-aviso-suave); color: var(--ds-aviso); }
.ds-selo--perigo { background: var(--ds-perigo-suave); color: var(--ds-perigo); }
.ds-selo--marca { background: rgba(var(--brand-primary-rgb), 0.12); color: var(--brand-primary); }

.ds-marcador { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ds-legenda-tam); font-weight: 500; color: var(--ds-texto-2); }
.ds-marcador::before { content: ""; width: 6px; height: 6px; border-radius: 2px; flex-shrink: 0; background: var(--ds-marcador-cor, var(--ds-texto-3)); }
/* `data-mod` recebe a CATEGORIA (vertixTreino.categoriaDoTipo), nunca o tipo cru. */
.ds-marcador[data-mod="musculacao"] { --ds-marcador-cor: var(--ds-mod-musculacao); }
.ds-marcador[data-mod="cardio"] { --ds-marcador-cor: var(--ds-mod-cardio); }

/* =====================================================================
   Chip selecionável
   ===================================================================== */
.ds-chips { display: flex; flex-wrap: wrap; gap: var(--ds-esp-2); }
.ds-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--ds-raio-controle);
  font-family: var(--ds-fonte); font-size: var(--ds-corpo-tam); font-weight: 500;
  background: var(--ds-superficie-2); color: var(--ds-texto); cursor: pointer;
  transition: background-color var(--ds-dur-toque) var(--ds-curva), color var(--ds-dur-toque) var(--ds-curva);
}
.ds-chip small { font-size: var(--ds-legenda-tam); font-weight: 400; color: var(--ds-texto-2); }
.ds-chip.ativo, .ds-chip[aria-pressed="true"] { background: var(--ds-texto); color: var(--ds-fundo); }
.ds-chip.ativo small, .ds-chip[aria-pressed="true"] small { color: inherit; opacity: 0.7; }

/* =====================================================================
   Interruptor (sobre um input checkbox de verdade)
   ===================================================================== */
.ds-switch { position: relative; display: inline-flex; flex-shrink: 0; width: 51px; height: 31px; cursor: pointer; }
.ds-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ds-switch__trilho { position: absolute; inset: 0; border-radius: var(--ds-raio-pilula); background: var(--ds-superficie-3); transition: background-color var(--ds-dur-base) var(--ds-curva); pointer-events: none; }
.ds-switch__trilho::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); transition: transform var(--ds-dur-base) var(--ds-curva); }
.ds-switch input:checked + .ds-switch__trilho { background: var(--ds-sucesso); }
.ds-switch input:checked + .ds-switch__trilho::after { transform: translateX(20px); }

/* =====================================================================
   Avatar
   ===================================================================== */
.ds-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--ds-superficie-3); color: var(--ds-texto); font-size: var(--ds-legenda-tam); font-weight: 600; }
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-avatar--p { width: 32px; height: 32px; }
.ds-avatar--g { width: 88px; height: 88px; font-size: var(--ds-titulo-tam); }

/* =====================================================================
   Folha (bottom sheet) — diálogo central a partir de 768px
   ===================================================================== */
.ds-veu {
  position: fixed; inset: 0; z-index: 900; background: var(--ds-veu);
  opacity: 0; pointer-events: none; transition: opacity var(--ds-dur-folha) var(--ds-curva);
}
.ds-veu.aberto { opacity: 1; pointer-events: auto; }
.ds-folha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 901;
  display: flex; flex-direction: column;
  max-width: 560px; max-height: 92vh; max-height: 92dvh; margin: 0 auto;
  border-radius: var(--ds-raio-folha) var(--ds-raio-folha) 0 0;
  background: var(--ds-superficie); color: var(--ds-texto); box-shadow: var(--ds-sombra-2);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(104%); visibility: hidden;
  transition: transform var(--ds-dur-folha) var(--ds-curva), visibility 0s linear var(--ds-dur-folha);
}
[data-tema="escuro"] .ds-folha { background: #12161E; }
.ds-folha.aberta { transform: translateY(0); visibility: visible; transition: transform var(--ds-dur-folha) var(--ds-curva), visibility 0s; }
.ds-folha__alca { width: 36px; height: 5px; margin: var(--ds-esp-2) auto 0; border-radius: 3px; background: var(--ds-superficie-3); flex-shrink: 0; touch-action: none; cursor: grab; }
.ds-folha__cabecalho { display: flex; align-items: center; gap: var(--ds-esp-2); padding: var(--ds-esp-3) var(--ds-margem-celular) var(--ds-esp-2); flex-shrink: 0; }
.ds-folha__cabecalho .ds-titulo { flex: 1; min-width: 0; }
.ds-folha__corpo { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--ds-esp-2) var(--ds-margem-celular) var(--ds-esp-6); display: flex; flex-direction: column; gap: var(--ds-esp-4); }
.ds-folha__rodape { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--ds-esp-2); padding: var(--ds-esp-3) var(--ds-margem-celular) var(--ds-esp-6); }
@media (min-width: 768px) {
  .ds-folha {
    top: 50%; bottom: auto; left: 50%; right: auto; width: min(480px, calc(100vw - 48px)); max-height: 86vh;
    border-radius: var(--ds-raio-card); margin: 0;
    transform: translate(-50%, -46%); opacity: 0;
    transition: transform var(--ds-dur-base) var(--ds-curva), opacity var(--ds-dur-base) var(--ds-curva), visibility 0s linear var(--ds-dur-base);
  }
  .ds-folha.aberta { transform: translate(-50%, -50%); opacity: 1; transition: transform var(--ds-dur-base) var(--ds-curva), opacity var(--ds-dur-base) var(--ds-curva), visibility 0s; }
  .ds-folha--larga { width: min(640px, calc(100vw - 48px)); }
  .ds-folha__alca { display: none; }
  .ds-folha__cabecalho { padding-top: var(--ds-esp-6); }
}

/* Confirmação: folha pequena, centrada no conteúdo */
.ds-confirmacao__cabeca { display: grid; justify-items: center; text-align: center; gap: var(--ds-esp-2); padding-top: var(--ds-esp-4); }
.ds-confirmacao__icone { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--ds-esp-2); border-radius: 18px; background: var(--ds-superficie-2); color: var(--ds-texto-2); }
.ds-confirmacao__icone--perigo { background: var(--ds-perigo-suave); color: var(--ds-perigo); }

/* =====================================================================
   Toast
   ===================================================================== */
.ds-toasts {
  position: fixed; z-index: 1000; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + var(--ds-esp-4));
  display: flex; flex-direction: column; align-items: center; gap: var(--ds-esp-2);
  padding: 0 var(--ds-esp-4); pointer-events: none;
}
.ds-toast {
  display: flex; align-items: center; gap: var(--ds-esp-3);
  width: 100%; max-width: 420px; padding: var(--ds-esp-3) var(--ds-esp-4); border-radius: 16px;
  background: var(--ds-texto); color: var(--ds-fundo); box-shadow: var(--ds-sombra-2);
  font-family: var(--ds-fonte); font-size: var(--ds-corpo-tam); line-height: var(--ds-corpo-alt);
  pointer-events: auto; transform: translateY(-12px); opacity: 0;
  transition: transform var(--ds-dur-base) var(--ds-curva), opacity var(--ds-dur-base) var(--ds-curva);
}
[data-tema="escuro"] .ds-toast { background: #1D232E; color: var(--ds-texto); }
.ds-toast.visivel { transform: translateY(0); opacity: 1; }
.ds-toast__texto { flex: 1; min-width: 0; }
.ds-toast__acao { border: 0; background: none; padding: var(--ds-esp-1) var(--ds-esp-2); margin: calc(-1 * var(--ds-esp-1)) 0; cursor: pointer; font-family: var(--ds-fonte); font-size: var(--ds-legenda-tam); font-weight: 600; color: var(--brand-primary); }
[data-tema="escuro"] .ds-toast__acao, .ds-toast__acao { min-height: 32px; }
.ds-toast--sucesso .ds-i { color: var(--ds-sucesso); }
.ds-toast--aviso .ds-i { color: var(--ds-aviso); }
.ds-toast--perigo .ds-i { color: var(--ds-perigo); }

/* =====================================================================
   Esqueleto
   ===================================================================== */
.ds-esqueleto { position: relative; overflow: hidden; border-radius: var(--ds-raio-chip); background: var(--ds-superficie-2); }
.ds-esqueleto::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: ds-brilho 1.4s ease-in-out infinite;
}
[data-tema="escuro"] .ds-esqueleto::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); }
@keyframes ds-brilho { to { transform: translateX(100%); } }
.ds-esqueleto-lista { display: flex; flex-direction: column; }
.ds-esqueleto-linha { display: flex; align-items: center; gap: var(--ds-esp-4); padding: var(--ds-esp-4) 0; }
.ds-esqueleto-linha__corpo { flex: 1; display: grid; gap: var(--ds-esp-2); }

/* =====================================================================
   Critérios (regra de senha, checklist de formulário)
   A lista inteira fica visível desde o começo: quem digita precisa saber o
   que falta, e não descobrir no erro depois de enviar.
   ===================================================================== */
.ds-criterios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-esp-2); }
.ds-criterios li { display: flex; align-items: center; gap: var(--ds-esp-2); font-size: var(--ds-legenda-tam); line-height: var(--ds-legenda-alt); color: var(--ds-texto-3); }
.ds-criterios li.ok { color: var(--ds-sucesso); }

/* =====================================================================
   Estado vazio
   ===================================================================== */
.ds-vazio { display: grid; justify-items: center; gap: var(--ds-esp-2); padding: var(--ds-esp-8) var(--ds-esp-4); text-align: center; }
.ds-vazio__icone { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--ds-esp-2); border-radius: 18px; background: var(--ds-superficie-2); color: var(--ds-texto-2); }
.ds-vazio__icone--sucesso { background: var(--ds-sucesso-suave); color: var(--ds-sucesso); }
.ds-vazio__icone--aviso { background: var(--ds-aviso-suave); color: var(--ds-aviso); }
.ds-vazio__icone--marca { background: rgba(var(--brand-primary-rgb), 0.12); color: var(--brand-primary); }
.ds-vazio__texto { max-width: 36ch; color: var(--ds-texto-2); }
.ds-vazio__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-esp-2); margin-top: var(--ds-esp-2); }

/* =====================================================================
   Barra de abas
   ===================================================================== */
.ds-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; padding: var(--ds-esp-2) var(--ds-esp-2) calc(var(--ds-esp-2) + env(safe-area-inset-bottom, 0px));
  background: rgba(245, 246, 248, 0.86); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 var(--ds-linha);
}
[data-tema="escuro"] .ds-tabbar { background: rgba(7, 9, 12, 0.84); }
.ds-tabbar__item {
  flex: 1; display: grid; justify-items: center; gap: var(--ds-esp-1);
  min-height: var(--ds-alvo-toque); padding: var(--ds-esp-1) 0; border: 0; background: none; cursor: pointer;
  font-family: var(--ds-fonte); font-size: var(--ds-legenda-tam); line-height: 16px; font-weight: 500; color: var(--ds-texto-3);
  -webkit-tap-highlight-color: transparent;
}
.ds-tabbar__item .ds-i { width: 24px; height: 24px; }
.ds-tabbar__item.ativo, .ds-tabbar__item[aria-current="page"] { color: var(--ds-texto); }
.ds-tabbar__item.ativo .ds-i, .ds-tabbar__item[aria-current="page"] .ds-i { color: var(--brand-primary); }

/* =====================================================================
   Movimento reduzido: só opacidade, sem deslocamento nem brilho
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ds-btn, .ds-folha, .ds-folha.aberta, .ds-toast, .ds-anel__valor, .ds-progresso > i { transition-property: opacity, visibility !important; }
  .ds-btn:active { transform: none; }
  .ds-folha { transform: none; opacity: 0; }
  .ds-folha.aberta { transform: none; opacity: 1; }
  .ds-toast { transform: none; }
  .ds-esqueleto::after { animation: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
  .ds-folha, .ds-folha.aberta { transform: translate(-50%, -50%); }
}