/* Work View Design System - ponto de entrada unico.
   Quem consome linka SO este arquivo:
     <link rel="stylesheet" href="_content/WorkView.DesignSystem/ds.css?v=..." />
   e envolve o conteudo numa raiz com a classe `ds-scope`.
   Ver design-system/README.md (mapa) e DESIGN.md (contrato).

   ESTE ARQUIVO E GERADO: e a concatenacao, NA ORDEM, dos arquivos listados em
   DesignSystemBundleTests.Partes. Nao edite aqui — edite a parte e rode o teste, que
   reprova quando o pacote sai de sincronia e diz o que fazer.

   Por que concatenado e nao @import: o consumidor versiona o link com ?v= para o
   navegador nao servir folha velha depois de um deploy, e @import NAO herda essa
   versao — os oito arquivos importados vinham do cache, incluindo o de tokens. O
   sintoma foi a paleta nova de contraste nao chegar na tela mesmo com o servidor
   servindo o arquivo certo. Concatenado, uma versao cobre tudo (e e uma requisicao
   em vez de nove). */

/* ==== ds-tokens.css ==== */
/* ==========================================================================
   Work View Design System - tokens
   Gerado a partir de "WorK View Design System/tokens/*.css" (dump do Claude Design).
   UNICA mudanca em relacao ao original: os tokens sao declarados em `.ds-scope`
   no lugar de `:root`, e o tema escuro em `.ds-scope[data-theme="dark"]`.
   Motivo: o app ja tem variaveis proprias em wwwroot/app.css com nomes que
   colidem (--border-strong, --text-faint). Escopar preserva as telas atuais
   exatamente como estao - ver DESIGN.md, secao "Escopo".
   Valores: nao mexer aqui sem atualizar DESIGN.md, que e o contrato.
   ========================================================================== */

/* ---- tokens/fonts.css ---- */
/* Urbanist — the brand typeface named in the WorK View style sheet.
   Served from Google Fonts. Weights in use: 300 Light, 400 Regular, 600 SemiBold. */
@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

.ds-scope{
  --font-sans:"Urbanist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Urbanist",ui-sans-serif,system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---- tokens/colors.css ---- */
.ds-scope{
  /* ---- Brand base ---------------------------------------------------- */
  --wv-green:#75FB90;          /* the one brand colour. Always carries BLACK text. */
  --wv-green-100:#E9FEEE;
  --wv-green-200:#CFFDD9;
  --wv-green-300:#A9FCBB;
  --wv-green-500:#75FB90;
  --wv-green-600:#43EE69;      /* hover / pressed fill only, never text */
  --wv-green-900:#0B3F1A;      /* ink on green tints */

  --wv-black:#000000;
  --wv-gray-900:#141415;
  --wv-gray-800:#1E1E20;
  --wv-gray-700:#5C5B5E;
  --wv-gray-600:#6E6D70;       /* acrescentado: a escala do dump pulava de 500 para 700,
                                  e faltava um degrau para o texto fraco do tema claro ter
                                  contraste. 4,80:1 sobre o cartao claro, 4,51 sobre o canvas. */
  --wv-gray-500:#AAA9AB;       /* style-sheet "Gray" */
  --wv-gray-400:#C6C5C8;
  --wv-gray-300:#DBDADD;       /* style-sheet "Light gray" */
  --wv-gray-200:#E7E6E9;
  --wv-gray-100:#F0F0F1;       /* canvas */
  --wv-gray-50:#F7F7F8;        /* card on canvas */
  --wv-gray-75:#F2F2F2;        /* anel de foco no tema escuro (decisao de Gustavo, 2026-09-23) */
  --wv-white:#FFFFFF;

  /* ---- Semantic accents (used sparingly, only as small fills) --------- */
  --wv-red:#FF5A52;
  --wv-red-100:#FFE8E7;
  --wv-amber:#FFD666;
  --wv-lilac:#CFCDF7;          /* neutral series colour in bar/area charts */

  /* ---- Semantic aliases: LIGHT (default) ------------------------------ */
  --surface-canvas:var(--wv-gray-100);
  --surface-card:var(--wv-gray-50);
  --surface-raised:var(--wv-white);
  --surface-sunken:var(--wv-gray-200);
  --surface-inverse:var(--wv-black);
  --surface-accent:var(--wv-green);
  --surface-accent-soft:var(--wv-green-100);

  --text-strong:var(--wv-black);
  --text-body:var(--wv-gray-900);
  /* Contraste medido, nao escolhido de olho (ver ContrasteDeTextoTests):
     gray-500 sobre o cartao claro dava 2,19:1 e gray-400 dava 1,60:1 — todo o texto
     secundario do tema claro era ilegivel, inclusive o menu. O dump nao tinha esse
     problema porque nasceu escuro; virou defeito quando o claro passou a ser o padrao. */
  --text-muted:var(--wv-gray-700);   /* 6,30:1 no cartao */
  --text-faint:var(--wv-gray-600);   /* 4,80:1 no cartao */
  --text-on-accent:var(--wv-black);
  --text-on-inverse:var(--wv-white);
  --text-link:var(--wv-black);
  --text-link-hover:var(--wv-gray-700);

  --border-hairline:var(--wv-gray-200);
  --border-default:var(--wv-gray-300);
  --border-strong:var(--wv-gray-400);
  --border-inverse:#2A2A2C;
  --border-focus:var(--wv-black);

  --chart-1:var(--wv-green);
  --chart-2:var(--wv-black);
  --chart-3:var(--wv-gray-400);
  --chart-4:var(--wv-lilac);
  --chart-grid:var(--wv-gray-200);

  --state-positive:var(--wv-green);
  --state-negative:var(--wv-red);
  --state-warning:var(--wv-amber);
  /* Acrescentados na feature identidade-visual (T-240): o app inteiro precisa de
     estado INFORMATIVO e de fundo suave por estado - selo, faixa de aviso, linha
     destacada. O dump so tinha as tres cores cheias acima, e sem estes tokens as
     telas continuariam com rgba() literal. Ver DESIGN.md. */
  --state-info:var(--wv-lilac);
  --state-positive-soft:var(--wv-green-100);
  --state-negative-soft:var(--wv-red-100);
  --state-warning-soft:#FFF6DF;
  --state-info-soft:#EFEEFD;
  --state-neutral-soft:var(--wv-gray-200);
  /* Preenchimento do acento no hover e no press, como par do --surface-accent:
     quem troca o acento (acento por tenant, T-243) troca os dois juntos. */
  --surface-accent-hover:var(--wv-green-600);

  --overlay-scrim:rgba(0,0,0,.28);
  --glass-blur:blur(18px); /* @kind other */
}

/* ---- Semantic aliases: DARK ------------------------------------------ */
.ds-scope[data-theme="dark"]{
  --surface-canvas:var(--wv-black);
  --surface-card:var(--wv-gray-900);
  --surface-raised:var(--wv-gray-800);
  --surface-sunken:#0A0A0B;
  --surface-inverse:var(--wv-white);
  --surface-accent:var(--wv-green);
  --surface-accent-soft:rgba(117,251,144,.14);

  --text-strong:var(--wv-white);
  --text-body:#EDEDEE;
  /* No escuro o problema era so do nivel fraco: gray-700 sobre o cartao escuro dava
     2,73:1. Nenhum cinza serve aos DOIS temas (o melhor equilibrio possivel da 4,14),
     entao cada tema aponta para o degrau que funciona nele — igual ao que --text-strong
     ja fazia. Custo: o texto secundario do escuro fica um pouco mais claro que antes. */
  --text-muted:var(--wv-gray-400);   /* 10,71:1 no cartao */
  --text-faint:var(--wv-gray-500);   /*  7,87:1 no cartao */
  --text-on-accent:var(--wv-black);
  --text-on-inverse:var(--wv-black);
  --text-link:var(--wv-white);
  --text-link-hover:var(--wv-gray-300);

  --border-hairline:#242426;
  --border-default:#2E2E31;
  --border-strong:#3A3A3E;
  --border-inverse:var(--wv-gray-300);
  --border-focus:var(--wv-gray-75);  /* era o verde: o anel nao acompanha mais o acento */

  --chart-3:var(--wv-gray-700);
  --chart-grid:#242426;

  /* Os fundos suaves de estado ficam translucidos no escuro: no claro eles sao
     tintas quase brancas, que no preto virariam manchas. */
  --state-positive-soft:rgba(117,251,144,.16);
  --state-negative-soft:rgba(255,90,82,.18);
  --state-warning-soft:rgba(255,214,102,.18);
  --state-info-soft:rgba(207,205,247,.18);
  --state-neutral-soft:rgba(170,169,171,.16);

  --overlay-scrim:rgba(0,0,0,.6);
}

/* ---- tokens/typography.css ---- */
.ds-scope{
  /* Scale. The brand sheet specifies H1 36 / Title 24 / Body 12.
     12px is the dashboard-dense body size; 14px is the default for
     everything outside dense data views. */
  --fs-display:56px;
  --fs-h1:36px;
  --fs-h2:28px;
  --fs-title:24px;
  --fs-lg:18px;
  --fs-md:16px;
  --fs-body:14px;
  --fs-sm:13px;
  --fs-dense:12px;
  --fs-micro:11px;

  --lh-tight:1.06;    /* @kind other */
  --lh-snug:1.2;      /* @kind other */
  --lh-normal:1.45;   /* @kind other */
  --lh-loose:1.6;     /* @kind other */

  --fw-light:300;     /* @kind other */
  --fw-regular:400;   /* @kind other */
  --fw-medium:500;    /* @kind other */
  --fw-semibold:600;  /* @kind other */

  --tracking-display:-0.02em; /* @kind other */
  --tracking-normal:0em;      /* @kind other */
  /* ALL-CAPS card eyebrows */
  --tracking-label:0.08em;    /* @kind other */

  /* Role aliases */
  --type-display:var(--fw-light) var(--fs-display)/var(--lh-tight) var(--font-display);
  --type-h1:var(--fw-semibold) var(--fs-h1)/var(--lh-snug) var(--font-display);
  --type-h2:var(--fw-light) var(--fs-h2)/var(--lh-snug) var(--font-display);
  --type-title:var(--fw-regular) var(--fs-title)/var(--lh-snug) var(--font-sans);
  --type-body:var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans);
  --type-dense:var(--fw-regular) var(--fs-dense)/var(--lh-normal) var(--font-sans);
  --type-label:var(--fw-regular) var(--fs-micro)/1.2 var(--font-sans);
  --type-metric:var(--fw-regular) var(--fs-h1)/1 var(--font-display);
}

/* ---- tokens/spacing.css ---- */
.ds-scope{
  --space-0:0px;
  --space-1:2px;
  --space-2:4px;
  --space-3:6px;
  --space-4:8px;
  --space-5:10px;
  --space-6:12px;
  --space-7:16px;
  --space-8:20px;
  --space-9:24px;
  --space-10:32px;
  --space-11:40px;
  --space-12:48px;
  --space-13:64px;
  --space-14:80px;
  --space-15:120px;

  /* Layout */
  --gutter-page:24px;
  --gutter-page-lg:40px;
  --gap-card:16px;
  --pad-card:20px;
  --pad-card-lg:24px;
  --topbar-h:56px;
  --tabbar-h:64px;
  --control-h-sm:28px;
  --control-h:36px;
  --control-h-lg:44px;
  --tile:40px;          /* the square icon tile that runs through the whole UI */
  --tile-sm:32px;
  --tile-lg:48px;
  --hit-min:44px;       /* mobile minimum target */
  --content-max:1440px;
}

/* ---- tokens/radius.css ---- */
.ds-scope{
  --radius-xs:6px;
  --radius-sm:10px;    /* icon tiles, small chips */
  --radius-md:14px;    /* inputs, buttons, segmented tracks */
  --radius-lg:18px;    /* cards */
  --radius-xl:24px;    /* panels, sheets, phone-width cards */
  --radius-2xl:32px;
  --radius-pill:999px;
  --radius-tile:10px;
}

/* ---- tokens/elevation.css ---- */
.ds-scope{
  /* Shadows are wide, low-opacity and neutral — never coloured, never tight. */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:0 2px 8px rgba(0,0,0,.05);
  --shadow-md:0 10px 28px rgba(0,0,0,.06);
  --shadow-lg:0 24px 60px rgba(0,0,0,.08);
  --shadow-pop:0 18px 48px rgba(0,0,0,.14);
  --shadow-inset-hairline:inset 0 0 0 1px var(--border-hairline);
  --glow-accent:0 0 0 6px rgba(117,251,144,.22);
  --ring-focus:0 0 0 2px var(--surface-canvas),0 0 0 4px var(--border-focus);
}

.ds-scope[data-theme="dark"]{
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 2px 8px rgba(0,0,0,.55);
  --shadow-md:0 10px 28px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px rgba(0,0,0,.7);
  --shadow-pop:0 18px 48px rgba(0,0,0,.8);
}

/* ---- tokens/motion.css ---- */
.ds-scope{
  --dur-instant:80ms;   /* @kind other */
  --dur-fast:140ms;     /* @kind other */
  --dur-base:200ms;     /* @kind other */
  --dur-slow:320ms;     /* @kind other */
  --dur-sheet:420ms;    /* @kind other */

  --ease-out:cubic-bezier(.22,.61,.36,1);      /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1);       /* @kind other */
  --ease-entrance:cubic-bezier(.16,1,.3,1);    /* @kind other */

  --transition-control:background-color var(--dur-fast) var(--ease-out),
                       border-color var(--dur-fast) var(--ease-out),
                       color var(--dur-fast) var(--ease-out),
                       box-shadow var(--dur-fast) var(--ease-out),
                       transform var(--dur-fast) var(--ease-out); /* @kind other */
}

@media (prefers-reduced-motion:reduce){
  .ds-scope{--dur-instant:0ms; /* @kind other */ --dur-fast:0ms; /* @kind other */ --dur-base:0ms; /* @kind other */ --dur-slow:0ms; /* @kind other */ --dur-sheet:0ms; /* @kind other */}
}

/* ==== ds-base.css ==== */
/* ==========================================================================
   Work View Design System - base e estados
   Adaptado de "WorK View Design System/tokens/base.css". O original estiliza
   `body` e `a` globalmente; aqui tudo vive dentro de `.ds-scope` para nao
   alterar nenhuma tela existente do app (ver DESIGN.md, secao "Escopo").

   A camada de ESTADOS (hover, press, focus, disabled, selected) nao existia em
   CSS no dump - estava descrita em prosa no readme.md dele. Foi implementada
   aqui, literalmente como a prosa manda, para que cada componente portado tenha
   os estados de verdade e nao so a aparencia parada.
   ========================================================================== */

:where(.ds-scope),
:where(.ds-scope) *,
:where(.ds-scope) *::before,
:where(.ds-scope) *::after { box-sizing: border-box; }

.ds-scope {
  background: var(--surface-canvas);
  color: var(--text-body);
  font: var(--type-body);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Paginas de referencia abrem com a classe no <html>: ai o fundo tem de pintar a janela toda. */
html.ds-scope, html.ds-scope body { margin: 0; background: var(--surface-canvas); }

:where(.ds-scope) h1, :where(.ds-scope) h2, :where(.ds-scope) h3,
:where(.ds-scope) h4, :where(.ds-scope) p, :where(.ds-scope) figure { margin: 0; }

:where(.ds-scope) a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
:where(.ds-scope) a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* `:where()` de proposito: o original do dump escrevia isto no nivel do elemento
   (`button,input,...`), que perde de qualquer classe de componente. Escopar com
   `.ds-scope ` cru inverteria a cascata e faria esta regra ganhar de
   `.ds-button--acento`, apagando a cor de todo controle. `:where()` escopa sem
   somar especificidade. */
:where(.ds-scope) button, :where(.ds-scope) input,
:where(.ds-scope) select, :where(.ds-scope) textarea { font: inherit; color: inherit; }
:where(.ds-scope) ::selection { background: var(--wv-green); color: var(--wv-black); }

/* Foco: anel preto de 2px deslocado 2px (verde no tema escuro). Sempre visivel
   para quem navega por teclado - o readme do dump proibe suprimir. */
:where(.ds-scope) :focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* ---- Tipos utilitarios do dump ---- */
.ds-eyebrow {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ds-metric {
  font: var(--type-metric);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
}

/* ==========================================================================
   Estados compartilhados
   ========================================================================== */

/* Controles: transicao unica, press encolhe para 0.98, disabled 38% sem mudar cor. */
.ds-control {
  transition: var(--transition-control);
  cursor: pointer;
  border: 1px solid transparent;
}
.ds-control:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.98); }
.ds-control:disabled,
.ds-control[aria-disabled="true"] { opacity: .38; cursor: not-allowed; transform: none; }

/* Carregando: o controle continua no lugar, sem trocar de cor, e nao aceita clique. */
.ds-control[data-loading="true"] { cursor: progress; }
.ds-spinner {
  width: 1em; height: 1em; flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: ds-spin 700ms linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ds-spinner { animation-duration: 0s; } }

/* Erro: a hairline vira vermelha; o texto de erro vem abaixo, nunca dentro do campo. */
.ds-field-error { color: var(--state-negative); font: var(--type-label); margin-top: var(--space-2); }

/* Selecionado: preenchimento preto com conteudo branco. Nunca verde - e o unico
   sinal de selecao do sistema inteiro (nav, abas, tags, side nav).

   Qualificado com `.ds-scope ` de proposito, e nao escrito como `.ds-selected` solto:
   os componentes definem a propria cor em regras de uma classe (`.ds-tabs__aba`), que
   vem DEPOIS deste arquivo no ds.css e, com a mesma especificidade, venceriam - o item
   selecionado ficava cinza sobre transparente em vez de branco sobre preto. Uma classe
   a mais aqui resolve sem `!important`. */
.ds-scope .ds-selected { background: var(--surface-inverse); color: var(--text-on-inverse); }

/* ==== components/core.css ==== */
/* ==========================================================================
   Work View Design System - grupo core
   Porta de "WorK View Design System/components/core/*.jsx" (dump). Estados
   (hover/press/foco/desabilitado) que ja vem de .ds-control e do :focus-visible
   global (ds-base.css) nao sao redeclarados aqui - so o que e proprio de cada
   componente. Ver design-system/CONTRATO-PORTE.md para as regras gerais.
   ========================================================================== */

/* ---- Icon (DsIcon.razor) --------------------------------------------------
   Bloco inline, alinhado ao texto, cor por heranca (currentColor) e tamanho
   vindo do font-size que o proprio DsIcon aplica inline. */
.ds-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: none;
  color: inherit;
}
.ds-icon svg { width: 1em; height: 1em; display: block; }

/* ---- Wordmark -------------------------------------------------------------
   So dois tons (preto/branco). Gap e tamanho do ponto sao proporcionais ao
   font-size (em), igual ao dump computava a partir de `size`; so o raio do
   ponto era um valor solto no dump e vira o token mais proximo (ver comentario
   na propria regra, abaixo). */
.ds-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
  font: var(--fw-semibold) 1em/1 var(--font-display);
  letter-spacing: -0.01em;
}
.ds-wordmark--claro { color: var(--wv-black); }
.ds-wordmark--escuro { color: var(--wv-white); }
/* O raio do ponto era um valor solto no dump (nao proporcional ao tamanho, ao
   contrario do gap e da largura/altura acima); vira o token de raio mais
   proximo disponivel na escala. */
.ds-wordmark__ponto {
  width: 0.42em;
  height: 0.42em;
  border-radius: var(--radius-xs);
  background: var(--wv-green);
  flex: 0 0 auto;
}

/* ---- Button ---------------------------------------------------------------
   Hover/press seguem o readme: acento escurece para --wv-green-600, solido
   sobe para --wv-gray-800, contorno escurece a borda, fantasma ganha lavagem
   --surface-sunken. Sem fade de opacidade, sem sombra aparecendo no hover. */
.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font: var(--fw-medium) var(--fs-body)/1 var(--font-sans);
  white-space: nowrap;
}
.ds-button--bloco { display: flex; width: 100%; }

.ds-button--pequeno { height: var(--control-h-sm); padding: 0 var(--space-6); gap: var(--space-3); font-size: var(--fs-dense); border-radius: var(--radius-sm); }
.ds-button--medio   { height: var(--control-h);    padding: 0 var(--space-7); gap: var(--space-4); font-size: var(--fs-body); }
.ds-button--grande  { height: var(--control-h-lg); padding: 0 var(--space-8); gap: var(--space-4); font-size: var(--fs-md); }

.ds-button--acento { background: var(--surface-accent); color: var(--text-on-accent); }
.ds-button--acento:hover, .ds-button--acento:active { background: var(--wv-green-600); }

.ds-button--solido { background: var(--surface-inverse); color: var(--text-on-inverse); }
.ds-button--solido:hover, .ds-button--solido:active { background: var(--wv-gray-800); }

.ds-button--contorno { background: var(--surface-raised); color: var(--text-strong); border-color: var(--border-default); }
.ds-button--contorno:hover, .ds-button--contorno:active { border-color: var(--border-strong); }

.ds-button--fantasma { background: transparent; color: var(--text-body); }
.ds-button--fantasma:hover, .ds-button--fantasma:active { background: var(--surface-sunken); }

/* Perigo: a acao destrutiva (Excluir, Remover, Parar). Nao veio do dump, que nao
   previa tom destrutivo; entrou na onda 5 porque tres telas registraram excecao
   por falta dele e uma quarta tentou imitar vermelho com estilo em linha — o que
   apaga o hover, porque estilo em linha vence :hover. Reproduz o .btn-danger que
   o app ja desenhava: so-texto em repouso, tinta suave e contorno no hover. */
.ds-button--perigo { background: transparent; color: var(--state-negative); border-color: transparent; }
.ds-button--perigo:hover, .ds-button--perigo:active {
  background: var(--state-negative-soft);
  border-color: var(--state-negative);
}

/* ---- IconButton ------------------------------------------------------------
   Largura/altura chegam por estilo em linha (Tamanho e continuo, 40/32/44
   conforme o contexto) - so a forma e os tons vivem aqui. */
.ds-icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-tile);
  flex: none;
}

.ds-icon-button--contorno { background: var(--surface-raised); color: var(--text-strong); border-color: var(--border-hairline); }
.ds-icon-button--contorno:hover, .ds-icon-button--contorno:active { border-color: var(--border-strong); }

.ds-icon-button--acento { background: var(--surface-accent); color: var(--text-on-accent); }
.ds-icon-button--acento:hover, .ds-icon-button--acento:active { background: var(--wv-green-600); }

.ds-icon-button--solido { background: var(--surface-inverse); color: var(--text-on-inverse); }
.ds-icon-button--solido:hover, .ds-icon-button--solido:active { background: var(--wv-gray-800); }

.ds-icon-button--fantasma { background: transparent; color: var(--text-muted); }
.ds-icon-button--fantasma:hover, .ds-icon-button--fantasma:active { background: var(--surface-sunken); }

/* O offset do dump tinha valores soltos ligeiramente diferentes para topo e
   direita; --space-4 e o token exato para um deles e o mais proximo disponivel
   para o outro. */
.ds-icon-button__notificacao {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--wv-red);
}

/* ---- IconTile ---------------------------------------------------------------
   Nao e controle (sem onClick no .d.ts): so aparencia, sem estados de
   interacao. Largura/altura/font-size chegam por estilo em linha (Tamanho
   e continuo, ver DsIconTile.razor). */
.ds-icon-tile-group { display: inline-flex; align-items: stretch; gap: var(--space-4); }

.ds-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-tile);
  font-family:var(--font-sans);
  font-weight: var(--fw-medium);
  line-height: 1;
  flex: none;
}
.ds-icon-tile--acento { background: var(--surface-accent); color: var(--wv-black); }
.ds-icon-tile--escuro { background: var(--wv-black); color: var(--wv-white); }
.ds-icon-tile--cinza  { background: var(--wv-gray-500); color: var(--wv-white); }
.ds-icon-tile--quieto { background: var(--surface-raised); color: var(--text-strong); border-color: var(--border-hairline); }

.ds-icon-tile__rotulo {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-7);
  border-radius: var(--radius-tile);
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  color: var(--text-strong);
  font: var(--fw-regular) var(--fs-body)/1 var(--font-sans);
  white-space: nowrap;
}

/* ---- Badge ------------------------------------------------------------------
   Selo pequeno e fixo, sem estado de interacao (nao e controle). "Escura" e
   sobreposicao do dump ("dark": preto/branco), aplicada depois da intencao
   para vencer no empate de especificidade. */
.ds-badge {
  display: inline-flex;
  align-items: center;
  height: var(--space-8);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font: var(--fw-medium) var(--fs-micro)/1 var(--font-sans);
  white-space: nowrap;
}
.ds-badge--neutra       { background: var(--surface-sunken); color: var(--text-body); }
.ds-badge--positiva     { background: var(--wv-green); color: var(--wv-black); }
.ds-badge--negativa     { background: var(--wv-red); color: var(--wv-white); }
.ds-badge--alerta       { background: var(--wv-amber); color: var(--wv-black); }
.ds-badge--informativa  { background: var(--wv-lilac); color: var(--wv-black); }
.ds-badge--escura       { background: var(--wv-black); color: var(--wv-white); }

/* ---- Tag ----------------------------------------------------------------
   Selecionado usa a classe utilitaria .ds-selected (ds-base.css) - preto com
   conteudo branco, nunca verde. O botao de remover e um ds-control de verdade
   (foco, press e disabled vem de graca). */
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--space-10);
  padding: 0 var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-body);
  border: 1px solid var(--border-hairline);
  font: var(--fw-regular) var(--fs-sm)/1 var(--font-sans);
  transition: var(--transition-control);
  white-space: nowrap;
}
.ds-tag.ds-selected { border-color: transparent; }

.ds-tag__remover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  opacity: .6;
  border-radius: var(--radius-xs);
}
.ds-tag__remover:hover, .ds-tag__remover:active { opacity: 1; }

/* ---- Card -----------------------------------------------------------------
   Campo cinza sobre o canvas, raio generoso, sem borda. "Inverso" e "acento"
   sao holofote/destaque - no maximo um por tela (regra de uso, nao imposta em
   CSS). O gap do dump nao tinha token exato: as duas opcoes mais proximas da
   escala empatavam em distancia, optado pela mais generosa para nao apertar
   o cabecalho. */
.ds-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  min-width: 0;
  border-radius: var(--radius-lg);
  padding: var(--pad-card);
}
.ds-card--padrao  { background: var(--surface-card); color: var(--text-body); }
.ds-card--elevado { background: var(--surface-raised); color: var(--text-body); box-shadow: var(--shadow-sm); }
.ds-card--inverso { background: var(--surface-inverse); color: var(--text-on-inverse); }
.ds-card--acento  { background: var(--surface-accent); color: var(--wv-black); }

.ds-card__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.ds-card__eyebrow { color: var(--text-muted); }
.ds-card--inverso .ds-card__eyebrow { color: var(--wv-gray-500); }
.ds-card__acoes { display: flex; align-items: center; gap: var(--space-3); }

/* ---- Avatar -----------------------------------------------------------------
   Quadrado arredondado (nao circulo). Largura/altura/raio/font-size chegam
   por estilo em linha (Tamanho e continuo, ver DsAvatar.razor). */
.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  font-family:var(--font-sans);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--wv-black);
}
.ds-avatar--acento { background: var(--wv-green); }
.ds-avatar--neutro { background: var(--surface-sunken); }
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- AvatarGroup ------------------------------------------------------------
   A capsula preta: avatares colados (raio composto em cada DsAvatar) mais uma
   palavra de acao. Gap e padding do dump tem token exato na escala. */
.ds-avatar-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-tile);
  background: var(--surface-inverse);
}
.ds-avatar-group__acao {
  padding: 0 var(--space-6);
  color: var(--wv-white);
  font: var(--fw-regular) var(--fs-body)/1 var(--font-sans);
  white-space: nowrap;
}

/* ==== components/forms.css ==== */
/* ==========================================================================
   Work View Design System - grupo forms
   Portado de "WorK View Design System/components/forms/*.jsx". Todo valor sai
   de token (ver CONTRATO-PORTE.md). Duas correcoes deliberadas em relacao ao
   dump: Checkbox e Switch marcados usam preto/branco no lugar do verde do
   dump original, porque selecionado no sistema e sempre preto com conteudo
   branco, nunca verde (readme.md, "Hover and press" -> "Selected").
   ========================================================================== */

/* ---- Rotulo e wrapper compartilhados por Input e Select ---- */
.ds-input-wrap {
  display: flex;
  flex-direction: column;
  /* gap: 6 no dump */
  gap: var(--space-3);
  min-width: 0;
}
.ds-input-label {
  font: var(--fw-medium) var(--fs-sm)/1 var(--font-sans);
  color: var(--text-body);
}

/* ==========================================================================
   Input
   ========================================================================== */
.ds-input {
  display: flex;
  align-items: center;
  /* gap: 8 no dump */
  gap: var(--space-4);
  min-width: 0;
  height: var(--control-h);
  /* padding lateral: 12 no dump */
  padding: 0 var(--space-6);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  transition: var(--transition-control);
}
.ds-input--sm { height: var(--control-h-sm); }
.ds-input--lg { height: var(--control-h-lg); }

.ds-input:hover:not(.ds-input--desabilitado):not(.ds-input--somente-leitura):not(.ds-input--erro) {
  border-color: var(--border-strong);
}
.ds-input:focus-within { box-shadow: var(--ring-focus); }
/* o anel de foco fica no campo inteiro, nao so no texto */
.ds-input__campo:focus-visible { box-shadow: none; }

.ds-input--erro { border-color: var(--state-negative); }
/* desabilitado: opacidade reduzida, sem trocar de cor */
.ds-input--desabilitado { opacity: .38; pointer-events: none; }
.ds-input--somente-leitura { background: var(--surface-sunken); cursor: default; }

.ds-input__icone { display: inline-flex; flex: 0 0 auto; color: var(--text-muted); }
.ds-input__campo {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: var(--type-body);
  color: var(--text-strong);
}
.ds-input__campo::placeholder { color: var(--text-faint); }
.ds-input__campo:disabled { cursor: not-allowed; }

.ds-input__dica {
  font: var(--fw-regular) var(--fs-dense)/1.4 var(--font-sans);
  color: var(--text-muted);
}

/* ==========================================================================
   SearchField - botao redondo destacado + campo sem caixa
   ========================================================================== */
.ds-search-field {
  display: flex;
  align-items: center;
  /* gap: 10 no dump */
  gap: var(--space-5);
  min-width: 0;
}
.ds-search-field__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 36 quadrado no dump, igual a --control-h */
  width: var(--control-h);
  height: var(--control-h);
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  color: var(--text-strong);
  transition: var(--transition-control);
}
.ds-search-field:hover .ds-search-field__botao { border-color: var(--border-strong); }
.ds-search-field:focus-within .ds-search-field__botao { border-color: var(--border-focus); }
.ds-search-field:focus-within { box-shadow: var(--ring-focus); border-radius: var(--radius-pill); }
.ds-search-field__campo:focus-visible { box-shadow: none; }

.ds-search-field--desabilitado { opacity: .38; pointer-events: none; }

.ds-search-field__campo {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: var(--type-dense);
  color: var(--text-strong);
}
.ds-search-field__campo::placeholder { color: var(--text-faint); }

/* ==========================================================================
   Select - nativo, vestido para casar com o Input
   ========================================================================== */
.ds-select {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.ds-select:hover:not(.ds-select--desabilitado):not(.ds-select--erro) .ds-select__campo {
  border-color: var(--border-strong);
}
.ds-select--erro .ds-select__campo { border-color: var(--state-negative); }
.ds-select--desabilitado { opacity: .38; pointer-events: none; }

.ds-select__campo {
  appearance: none;
  width: 100%;
  height: var(--control-h);
  /* padding direito no dump ficava a 36, espaco livre pro chevron; aqui arredondado
     para --space-10, mais perto da folga real (12 do chevron + 16 do icone) */
  padding: 0 var(--space-10) 0 var(--space-6);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  font: var(--type-body);
  color: var(--text-strong);
  outline: none;
  cursor: pointer;
  transition: var(--transition-control);
}
.ds-select--sm .ds-select__campo { height: var(--control-h-sm); }
.ds-select--lg .ds-select__campo { height: var(--control-h-lg); }
.ds-select__campo:disabled { cursor: not-allowed; }

.ds-select__seta {
  position: absolute;
  /* deslocamento direito: 12 no dump */
  right: var(--space-6);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
}

/* ==========================================================================
   Checkbox - quadrado; marcado e preto com marca branca (nunca verde)
   ========================================================================== */
.ds-checkbox {
  display: inline-flex;
  align-items: center;
  /* gap: 10 no dump */
  gap: var(--space-5);
}
.ds-checkbox__input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }

.ds-checkbox__caixa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* caixa 20 quadrada no dump */
  width: var(--space-8);
  height: var(--space-8);
  flex: 0 0 auto;
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  color: var(--text-on-inverse);
  transition: var(--transition-control);
}
.ds-checkbox:hover .ds-checkbox__caixa { border-color: var(--border-strong); }

/* Marcado e VERDE com o traco preto, nao preto: Checkbox.prompt.md e Checkbox.jsx
   do dump pedem --surface-accent. A regra "selecionado nunca e verde" do readme vale
   para SELECAO DE NAVEGACAO (tile, aba, tag, side nav), que e outra coisa. */
.ds-checkbox__caixa--marcada {
  background: var(--surface-accent);
  border-color: transparent;
  color: var(--text-on-accent);
}
/* hover do acento escurece para o verde de press, como todo controle de acento */
.ds-checkbox:hover .ds-checkbox__caixa--marcada { background: var(--wv-green-600); }

.ds-checkbox__input:focus-visible + .ds-checkbox__caixa { box-shadow: var(--ring-focus); }

.ds-checkbox__rotulo { font: var(--type-body); color: var(--text-body); }

/* ==========================================================================
   Radio - ponto preenchido; tambem serie de grafico via CorPonto
   ========================================================================== */
.ds-radio {
  display: inline-flex;
  align-items: center;
  /* gap: 8 no dump */
  gap: var(--space-4);
}
.ds-radio__input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }

.ds-radio__ponto {
  /* ponto 12 de diametro no dump */
  width: var(--space-6);
  height: var(--space-6);
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: transparent;
  /* espessura de traco no dump era intermediaria; nao existe token de */
  /* espessura, arredondada para a hairline do sistema */
  border: 1px solid var(--border-strong);
  transition: var(--transition-control);
}
.ds-radio:hover .ds-radio__ponto { border-color: var(--text-muted); }

.ds-radio__ponto--marcado {
  background: var(--wv-black);
  border-color: var(--wv-black);
}
.ds-radio:hover .ds-radio__ponto--marcado { background: var(--wv-gray-800); border-color: var(--wv-gray-800); }

.ds-radio__input:focus-visible + .ds-radio__ponto { box-shadow: var(--ring-focus); }

.ds-radio__rotulo { font: var(--type-dense); color: var(--text-muted); }
.ds-radio__rotulo--marcado { color: var(--text-strong); }

/* ==========================================================================
   Switch - trilho preto com bolinha branca quando ligado (nunca verde)
   ========================================================================== */
.ds-switch {
  display: inline-flex;
  align-items: center;
  /* gap: 10 no dump */
  gap: var(--space-5);
}
.ds-switch__input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }

.ds-switch__trilho {
  position: relative;
  /* trilho 40 por 24 no dump */
  width: var(--space-11);
  height: var(--space-9);
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  transition: background-color var(--dur-base) var(--ease-out);
}
.ds-switch:hover .ds-switch__trilho { background: var(--border-strong); }

/* Ligado e trilho VERDE com bolinha preta (Switch.prompt.md e Switch.jsx do dump). */
.ds-switch__trilho--marcado { background: var(--surface-accent); }
.ds-switch:hover .ds-switch__trilho--marcado { background: var(--wv-green-600); }

.ds-switch__bolinha {
  position: absolute;
  /* inset de encaixe no dump era pequeno o bastante para virar --space-1 */
  top: var(--space-1);
  left: var(--space-1);
  /* bolinha do dump ficava perto de --space-8, arredondada pra baixo */
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--wv-white);
  box-shadow: var(--shadow-xs);
  transition: left var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.ds-switch__trilho--marcado .ds-switch__bolinha {
  left: calc(100% - var(--space-1) - var(--space-8));
  background: var(--text-on-accent);
}

.ds-switch__input:focus-visible + .ds-switch__trilho { box-shadow: var(--ring-focus); }

.ds-switch__rotulo { font: var(--type-body); }

/* ==========================================================================
   SegmentedControl - sublinhado, nunca pilula preenchida
   ========================================================================== */
.ds-segmented-control {
  display: flex;
  align-items: center;
  /* gap intermediario no dump, arredondado para --space-7 */
  gap: var(--space-7);
}

.ds-segmented-control__item {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  /* padding vertical do dump equivale a --space-1 */
  padding: var(--space-1) 0;
  font: var(--fw-regular) var(--fs-dense)/1.4 var(--font-sans);
  color: var(--text-muted);
  transition: var(--transition-control);
}
.ds-segmented-control--sm .ds-segmented-control__item { font-size: var(--fs-micro); }

.ds-segmented-control__item:hover:not(:disabled) { color: var(--text-body); }

.ds-segmented-control__item--marcado {
  color: var(--text-strong);
  border-bottom-color: var(--text-strong);
}

/* ==== components/navigation.css ==== */
/* ==========================================================================
   Work View Design System - grupo navigation
   Porta de "WorK View Design System/components/navigation/*.jsx" (dump do
   Claude Design) para os seis componentes Razor em design-system/Components/Navigation/.

   Todo valor vem de var(--token) de ds-tokens.css. Onde o dump tinha um numero
   solto sem token exato, o comentario ao lado registra a escolha (CONTRATO-PORTE.md,
   regra 1). Hover, press (.ds-control, escala 0.98), foco visivel e desabilitado
   (38% de opacidade) vem das classes utilitarias de ds-base.css - aqui so o que
   e proprio de cada componente do grupo.
   ========================================================================== */

/* ---- TopNav ---- */
/* Transparente sobre o canvas por padrao: sem barra branca, sem borda inferior,
   fixa no topo ao rolar (README do dump, "Spacing and layout"). */
.ds-topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  height: var(--topbar-h);
  padding: 0 var(--space-8);
  min-width: 0;
  position: sticky;
  top: 0;
  z-index: 1; /* @kind other - so precisa ficar acima do conteudo da pagina, sem escala de camadas no dump */
}
.ds-topnav--claro { background: transparent; }
.ds-topnav--escuro { background: var(--wv-black); }
.ds-topnav__esquerda { flex: 0 0 auto; }
.ds-topnav__centro { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; }
.ds-topnav__direita { display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; }

/* ---- NavTileBar ---- */
/* Navegacao primaria: tiles quadrados so-icone, o ativo preto solido (.ds-selected). */
.ds-navtilebar { display: flex; align-items: center; gap: var(--space-3); }
.ds-navtilebar__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-tile);
  background: var(--surface-raised);
  color: var(--text-strong);
  border-color: var(--border-hairline);
}
.ds-navtilebar__tile:hover:not(:disabled):not(.ds-selected) { border-color: var(--border-strong); }
.ds-navtilebar__tile.ds-selected { border-color: transparent; }
/* Preto "levanta" um tom no hover (README, "Press"). Sem novo literal de cor:
   brightness escurece o preto (tema claro) e o branco selecionado do tema escuro por igual. */
.ds-navtilebar__tile.ds-selected:hover:not(:disabled) { filter: brightness(.9); }

/* ---- Breadcrumb ---- */
/* Trilha 12px acima do titulo da pagina, so leitura - sem link, sem selecao. */
.ds-breadcrumb { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.ds-breadcrumb__separador { font: var(--type-dense); color: var(--text-faint); }
.ds-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--space-3); font: var(--type-dense); color: var(--text-muted); }

/* ---- Tabs ---- */
/* Trilho cinza com pilula preta na aba ativa. */
.ds-tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.ds-tabs__aba {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h-sm); /* 28px: mais perto dos 30px do dump que --control-h (36px) */
  padding: 0 var(--space-7); /* 16px: mais perto dos 14px do dump que --space-6 (12px) */
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: var(--fw-medium) var(--fs-sm)/1 var(--font-sans);
}
.ds-tabs__aba:hover:not(:disabled):not(.ds-selected) { background: var(--surface-raised); color: var(--text-strong); }

/* ---- SideNav ---- */
/* Navegacao vertical com rotulo - configuracoes e gaveta do celular, nao o dashboard principal. */
.ds-sidenav {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  /* 232px: largura fixa do dump, sem token de layout equivalente em ds-tokens.css
     (--content-max e --topbar-h/--tabbar-h sao os unicos precedentes de medida fixa nomeada). */
  --sidenav-w: 232px;
  width: var(--sidenav-w);
  padding: var(--space-7);
  min-width: 0;
}
.ds-sidenav__grupo { display: flex; flex-direction: column; gap: var(--space-2); }
.ds-sidenav__grupo-titulo {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 var(--space-5) var(--space-3);
}
.ds-sidenav__item {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--tile); /* 40px: mais perto dos 38px do dump que --control-h (36px); --tile e a unidade estrutural do sistema */
  padding: 0 var(--space-5);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-body);
  font: var(--fw-regular) var(--fs-body)/1 var(--font-sans);
  text-align: left;
  text-decoration: none; /* zera sublinhado quando o item vira <a> (item com Href) */
  width: 100%;
}
.ds-sidenav__item:hover:not(:disabled):not([aria-disabled="true"]):not(.ds-selected) { background: var(--surface-sunken); }
.ds-sidenav__item-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-sidenav__rodape { margin-top: auto; }

/* ---- MobileTabBar ---- */
/* Barra fixa no rodape do celular, mesma linguagem de tile do NavTileBar; alvo minimo 44px (--hit-min). */
.ds-mobiletabbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--space-2);
  height: var(--tabbar-h);
  padding: 0 var(--space-6);
  background: var(--surface-raised);
  border-top: 1px solid var(--border-hairline);
}
.ds-mobiletabbar__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hit-min);
  height: var(--hit-min);
  border-radius: var(--radius-tile);
  background: transparent;
  color: var(--text-muted);
}
.ds-mobiletabbar__tile:hover:not(:disabled):not(.ds-selected) { background: var(--surface-sunken); }
.ds-mobiletabbar__tile.ds-selected:hover:not(:disabled) { filter: brightness(.9); }

/* ==== components/data.css ==== */
/* ==========================================================================
   Work View Design System - grupo "data"
   MetricValue, StatCard, SeriesLegend, BarChart, ProgressBar, DonutGauge, DataTable.
   Porte de "WorK View Design System/components/data/*.jsx" para os componentes Razor em
   design-system/Components/Data/. Ver design-system/CONTRATO-PORTE.md para as regras gerais.

   Convencao de arredondamento: onde o valor original do dump caia exatamente entre dois
   tokens de --space-* (empate de distancia, exemplo: 14 pixels entre --space-6 (12) e
   --space-7 (16)), a escolha foi pelo token menor, preservando a densidade do dump. Marcado
   pontualmente abaixo so onde relevante.
   ========================================================================== */

/* ---- MetricValue ---- */
.ds-metric-value { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ds-metric-value--esquerda { align-items: flex-start; }
.ds-metric-value--centro { align-items: center; }

.ds-metric-value__linha { display: inline-flex; align-items: center; gap: var(--space-5); }

.ds-metric-value__valor {
  font: var(--fw-regular) var(--fs-h1) / 1 var(--font-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
}
/* Tamanho: pequeno usa fs-title, medio usa fs-h1, grande usa fs-display, como sm/md/lg do
   dump. Nunca negrito - o tamanho da fonte acima e que carrega a enfase (prompt original do
   MetricValue: "Never bold a metric. The size carries the emphasis."). */
.ds-metric-value--pequeno .ds-metric-value__valor { font-size: var(--fs-title); }
.ds-metric-value--medio .ds-metric-value__valor { font-size: var(--fs-h1); }
.ds-metric-value--grande .ds-metric-value__valor { font-size: var(--fs-display); }

.ds-metric-value__legenda { font: var(--type-dense); color: var(--text-muted); }

/* Delta: mesma pilula do Badge (altura --space-8, padding lateral --space-4), so que local ao
   grupo data - o grupo core ainda nao existe neste worktree. */
.ds-metric-value__delta {
  display: inline-flex;
  align-items: center;
  height: var(--space-8);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font: var(--fw-medium) var(--fs-micro) / 1 var(--font-sans);
}
.ds-metric-value__delta--positiva { background: var(--wv-green); color: var(--wv-black); }
.ds-metric-value__delta--negativa { background: var(--wv-red); color: var(--wv-white); }
.ds-metric-value__delta--neutra { background: var(--surface-sunken); color: var(--text-body); }
.ds-metric-value__delta--alerta { background: var(--wv-amber); color: var(--wv-black); }
/* "Informativa" faz as vezes do tom "dark" do dump (preenchimento preto, texto branco), que
   nao tem par exato em IntencaoDs - ver comentario no .razor. */
.ds-metric-value__delta--informativa { background: var(--wv-black); color: var(--wv-white); }

/* ---- StatCard ---- */
/* O cartao em si (fundo, raio, padding, tom) e do DsCard, e o seletor de periodo e do
   DsSegmentedControl: aqui fica so o que e proprio do StatCard, a linha que poe a metrica
   e o seletor lado a lado. Uma versao de cada componente, nunca duas. */
.ds-stat-card__linha-metrica {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-7);
  flex-wrap: wrap;
}

/* ---- SeriesLegend ---- */
/* Espacamento entre itens: mesma convencao de arredondamento do topo do arquivo. */
.ds-series-legend { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.ds-series-legend--esquerda { justify-content: flex-start; }
.ds-series-legend--centro { justify-content: center; }
.ds-series-legend--direita { justify-content: flex-end; }

.ds-series-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-dense); color: var(--text-muted); }
/* Marcador: o dump usava um tamanho sem token exato (empate entre --space-4 e --space-5) -
   escolhido --space-4, mais proximo do "ponto" tipografico de 8. */
.ds-series-legend__marcador {
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  flex: 0 0 auto;
}

/* ---- BarChart ---- */
/* Sem biblioteca de grafico: div/span com flex, igual ao dump. So a altura anima (readme,
   "Animation": "Charts animate height only"). */
.ds-bar-chart { margin: 0; display: flex; min-width: 0; }
.ds-bar-chart__corpo { display: flex; gap: var(--space-5); flex: 1; min-width: 0; }
.ds-bar-chart__eixo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font: var(--fw-regular) var(--fs-micro) / 1 var(--font-sans);
  color: var(--text-faint);
  flex: 0 0 auto;
}
.ds-bar-chart__area { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ds-bar-chart__barras { display: flex; align-items: flex-end; border-bottom: 1px solid var(--chart-grid); }
.ds-bar-chart__barra {
  flex: 1;
  /* minimo de largura para a barra nao sumir com muitos pontos: o dump usava 1, sem token
     exato disponivel abaixo de --space-1; arredondado para --space-1 (regra do contrato). */
  min-width: var(--space-1);
  /* raio de 1px: literal explicitamente permitido pela regra do contrato de porte (hairline) */
  border-radius: 1px;
  transition: height var(--dur-slow) var(--ease-out);
}
.ds-bar-chart__rotulos { display: flex; justify-content: space-between; font: var(--fw-regular) var(--fs-micro) / 1 var(--font-sans); color: var(--text-muted); }

.ds-bar-chart__vazio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.ds-bar-chart__vazio-texto { font: var(--type-dense); color: var(--text-muted); }

/* ---- ProgressBar ---- */
.ds-progress-bar { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.ds-progress-bar__legenda { display: flex; justify-content: space-between; font: var(--type-dense); color: var(--text-muted); }
.ds-progress-bar__valor-legenda { color: var(--text-strong); }
/* Raio do trilho: o dump usava um raio pequeno sem token exato; --radius-xs e o disponivel
   mais proximo. */
.ds-progress-bar__trilho {
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  overflow: hidden;
}
.ds-progress-bar__preenchimento {
  height: 100%;
  border-radius: var(--radius-xs);
  transition: width var(--dur-slow) var(--ease-out);
}
.ds-progress-bar__preenchimento--acento { background: var(--surface-accent); }
.ds-progress-bar__preenchimento--escuro { background: var(--wv-black); }
.ds-progress-bar__preenchimento--neutro { background: var(--wv-gray-400); }

/* ---- DonutGauge ---- */
.ds-donut-gauge { position: relative; }
.ds-donut-gauge--acento { color: var(--wv-green); }
.ds-donut-gauge--mono { color: var(--text-strong); }

/* Raio de cada marca: afastamento e espessura batem exato com --space-7 e --space-1. */
.ds-donut-gauge__raio {
  position: absolute;
  left: 50%;
  bottom: var(--space-7);
  width: var(--space-1);
  transform-origin: 50% 100%;
}
.ds-donut-gauge__marca { display: block; width: var(--space-1); border-radius: 1px; background: var(--border-default); }
.ds-donut-gauge__marca--acesa { background: currentColor; }

.ds-donut-gauge__leitura { position: absolute; inset: auto 0 0; text-align: center; }
.ds-donut-gauge__valor { font: var(--fw-regular) var(--fs-h1) / 1 var(--font-display); color: inherit; }
.ds-donut-gauge__legenda { font: var(--type-dense); color: var(--text-muted); margin-top: var(--space-2); }

.ds-donut-gauge__vazio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; }
.ds-donut-gauge__vazio-texto { font: var(--type-dense); color: var(--text-muted); }

/* ---- DataTable ---- */
.ds-data-table { width: 100%; overflow-x: auto; min-width: 0; }
.ds-data-table__tabela { width: 100%; border-collapse: collapse; font: var(--type-body); }

/* Cabecalho com folga acima e 12 px (2026-09-23): com padding-top 0 e 11 px ele ficava colado
   na borda do cartao e espremido — visto na aba Analitico de Relatorios. */
.ds-data-table__cabecalho {
  text-align: left;
  padding: var(--space-6) var(--space-6) var(--space-5);
  font: var(--type-label);
  font-size: var(--fs-dense);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--border-hairline);
}
.ds-data-table__cabecalho--direita { text-align: right; }
.ds-data-table__cabecalho--centro { text-align: center; }

.ds-data-table__linha { transition: background-color var(--dur-fast) var(--ease-out); }
.ds-data-table__linha--clicavel { cursor: pointer; }
.ds-data-table__linha--clicavel:hover { background: var(--surface-sunken); }
.ds-data-table__linha--selecionada,
.ds-data-table__linha--selecionada:hover { background: var(--surface-inverse); color: var(--text-on-inverse); }
.ds-data-table__linha--selecionada .ds-data-table__celula { border-bottom-color: var(--border-inverse); }

/* Padding vertical da celula: mesma convencao de arredondamento do topo do arquivo. */
.ds-data-table__celula {
  text-align: left;
  padding: var(--space-6) var(--space-6);
  border-bottom: 1px solid var(--border-hairline);
  color: var(--text-body);
  vertical-align: middle;
}
.ds-data-table__celula--direita { text-align: right; }
.ds-data-table__celula--centro { text-align: center; }

.ds-data-table__linha-vazia .ds-data-table__celula-vazia,
.ds-data-table__celula-vazia {
  padding: var(--space-11) var(--space-6);
  text-align: center;
  color: var(--text-muted);
  font: var(--type-dense);
  border-bottom: none;
}

.ds-data-table__esqueleto {
  display: block;
  height: var(--space-6);
  width: 60%;
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  animation: ds-data-table-pulso calc(var(--dur-slow) * 4) var(--ease-in-out) infinite;
}
@keyframes ds-data-table-pulso {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-data-table__esqueleto { animation: none; }
}

/* ==== components/feedback.css ==== */
/* ==========================================================================
   Work View Design System - grupo feedback
   Porta InsightCallout, Tooltip, Dialog, Toast e EmptyState de
   "WorK View Design System/components/feedback/*.jsx". Todo valor sai de
   var(--token); onde o dump tinha um numero solto sem token exato, o valor foi
   arredondado para o token da escala mais proximo (comentado ponto a ponto) ou,
   quando nao ha escala nenhuma para aquilo (largura maxima de contepudo,
   z-index), mantido como literal com o motivo anotado.
   ========================================================================== */

/* ---- InsightCallout ------------------------------------------------------ */

.ds-insight-callout {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-3);
  /* 260: largura maxima de conteudo, nao espacamento - nao ha token nessa faixa,
     por isso composta em calc() a partir de --space-15 e --space-8 (120*2+20). */
  max-width: calc(var(--space-15) * 2 + var(--space-8));
  /* padding do dump era "12px 14px"; 12 e exato (--space-6), 14 fica entre
     --space-6 (12) e --space-7 (16) - arredondado para --space-7. */
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  position: relative;
  font: var(--type-body);
}

.ds-insight-callout__dispensar {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  background: none;
  border: none;
  border-radius: var(--radius-xs);
  padding: var(--space-1);
  color: var(--text-faint);
}
.ds-insight-callout__dispensar:hover { background: var(--surface-sunken); color: var(--text-muted); }

.ds-insight-callout__cabecalho { display: inline-flex; align-items: center; gap: var(--space-4); }

.ds-insight-callout__valor {
  /* fw-regular fs-md/1 font-display no dump: composto porque nao ha alias --type-*
     nesse tamanho; "/1" segue o mesmo padrao ja usado em --type-metric. */
  font: var(--fw-regular) var(--fs-md)/1 var(--font-display);
  color: var(--text-strong);
}

.ds-insight-callout__delta {
  display: inline-flex;
  align-items: center;
  height: var(--space-8);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font: var(--fw-medium) var(--fs-micro)/1 var(--font-sans);
}
.ds-insight-callout__delta--positiva { background: var(--state-positive); color: var(--text-on-accent); }
.ds-insight-callout__delta--negativa { background: var(--state-negative); color: var(--wv-white); }
.ds-insight-callout__delta--neutra { background: var(--surface-sunken); color: var(--text-body); }
.ds-insight-callout__delta--alerta { background: var(--state-warning); color: var(--wv-black); }
.ds-insight-callout__delta--informativa { background: var(--wv-lilac); color: var(--wv-black); }
/* delta escura: reaproveita .ds-selected (preto/branco), o "dark" do dump. */

.ds-insight-callout__texto { font: var(--type-dense); color: var(--text-muted); }

/* ---- Tooltip -------------------------------------------------------------- */

.ds-tooltip { position: relative; display: inline-flex; }

.ds-tooltip__rotulo {
  position: absolute;
  z-index: 40; /* sem token de camada no dump; 40 e o valor original */
  white-space: nowrap;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-xs);
  background: var(--wv-black);
  color: var(--wv-white);
  /* fw-regular fs-micro/1.2 font-sans do dump e exatamente --type-label. */
  font: var(--type-label);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.ds-tooltip--cima .ds-tooltip__rotulo { bottom: calc(100% + var(--space-4)); left: 50%; transform: translateX(-50%); }
.ds-tooltip--baixo .ds-tooltip__rotulo { top: calc(100% + var(--space-4)); left: 50%; transform: translateX(-50%); }
.ds-tooltip--esquerda .ds-tooltip__rotulo { right: calc(100% + var(--space-4)); top: 50%; transform: translateY(-50%); }
.ds-tooltip--direita .ds-tooltip__rotulo { left: calc(100% + var(--space-4)); top: 50%; transform: translateY(-50%); }

/* Sem JS: hover do mouse e foco por teclado (:focus-within cobre o controle filho
   que recebe o foco, ja que o conteudo do tooltip e opaco a este componente). */
.ds-tooltip:hover .ds-tooltip__rotulo,
.ds-tooltip:focus-within .ds-tooltip__rotulo { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) { .ds-tooltip__rotulo { transition-duration: 0ms; } }

/* ---- Dialog ---------------------------------------------------------------- */

.ds-dialog__cena {
  position: fixed;
  inset: 0;
  z-index: 60; /* sem token de camada no dump; 60 e o valor original */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-9);
  background: var(--overlay-scrim);
  backdrop-filter: var(--glass-blur);
}

.ds-dialog {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding: var(--space-9);
  /* raio 24 e regra do contrato visual para dialogos (readme.md). */
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-pop);
}

.ds-dialog__cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-7); }

.ds-dialog__titulos { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.ds-dialog__titulo { font: var(--type-title); color: var(--text-strong); }

.ds-dialog__descricao { font: var(--type-body); color: var(--text-muted); }

.ds-dialog__fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tile-sm);
  height: var(--tile-sm);
  flex: none;
  background: none;
  border: none;
  padding: 0;
  border-radius: var(--radius-tile);
  color: var(--text-muted);
}
.ds-dialog__fechar:hover { background: var(--surface-sunken); color: var(--text-strong); }

.ds-dialog__rodape { display: flex; justify-content: flex-end; gap: var(--space-4); }

.ds-dialog__acao {
  height: var(--control-h);
  padding: 0 var(--space-7);
  border: none;
  border-radius: var(--radius-md);
  font: var(--fw-medium) var(--fs-body)/1 var(--font-sans);
}
.ds-dialog__acao--fantasma { background: none; color: var(--text-body); }
.ds-dialog__acao--fantasma:hover { background: var(--surface-sunken); }
.ds-dialog__acao--solido { background: var(--surface-inverse); color: var(--text-on-inverse); }
.ds-dialog__acao--solido:hover { background: var(--wv-gray-800); }

/* ---- Toast ------------------------------------------------------------------ */

.ds-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-9);
  transform: translateX(-50%);
  z-index: 70; /* sem token de camada no dump; acima do conteudo, abaixo do dialogo */
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  font: var(--type-body);
  animation: ds-toast-entrar var(--dur-base) var(--ease-out);
}
.ds-toast--saindo { animation: ds-toast-sair var(--dur-base) var(--ease-out) forwards; }

.ds-toast--neutra { background: var(--surface-inverse); color: var(--text-on-inverse); }
.ds-toast--positiva { background: var(--state-positive); color: var(--text-on-accent); }
.ds-toast--negativa { background: var(--state-negative); color: var(--wv-white); }
.ds-toast--alerta { background: var(--state-warning); color: var(--wv-black); }
/* Informativa reaproveita o lilas (--wv-lilac), a quarta cor de grafico do
   sistema: nao ha token de "informativo" dedicado no dump. */
.ds-toast--informativa { background: var(--wv-lilac); color: var(--wv-black); }

.ds-toast__mensagem { min-width: 0; }

.ds-toast__dispensar {
  display: inline-flex;
  background: none;
  border-radius: var(--radius-xs);
  padding: var(--space-1);
  color: inherit;
}
.ds-toast__dispensar:hover { background: color-mix(in srgb, var(--wv-black) 12%, transparent); }

@keyframes ds-toast-entrar {
  from { opacity: 0; transform: translate(-50%, var(--space-4)); }
  to { opacity: 1; transform: translateX(-50%); }
}
@keyframes ds-toast-sair {
  from { opacity: 1; transform: translateX(-50%); }
  to { opacity: 0; transform: translate(-50%, var(--space-4)); }
}
@media (prefers-reduced-motion: reduce) {
  .ds-toast, .ds-toast--saindo { animation-duration: 0ms; }
}

/* ---- EmptyState --------------------------------------------------------------- */

.ds-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  padding: var(--space-12) var(--space-9);
}

.ds-empty-state__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-tile);
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.ds-empty-state__titulo {
  /* fw-regular fs-lg/1.3 font-display no dump; 1.3 arredondado para --lh-snug (1.2),
     a linha do sistema mais proxima. */
  font: var(--fw-regular) var(--fs-lg)/var(--lh-snug) var(--font-display);
  color: var(--text-strong);
}

.ds-empty-state__descricao {
  font: var(--type-body);
  color: var(--text-muted);
  /* 320: largura maxima de conteudo, mesma logica do maxWidth do InsightCallout;
     composta em calc() a partir de --space-14 (80*4). */
  max-width: calc(var(--space-14) * 4);
}

/* ==== components/ai.css ==== */
/* ==========================================================================
 * Work View Design System - grupo ai
 * Porta AskBar de "WorK View Design System/components/ai/AskBar.jsx". Fixa a
 * 28 do rodape, centralizada, largura maxima 560: os dois valores sem token
 * exato do componente (a escala --space-* pula de 24 para 32; nao ha token de
 * largura maxima nessa faixa), por isso compostos em calc() a partir de
 * tokens existentes (comentado em cada regra). O fundo `rgba(84,84,84,.86)`
 * tambem nao tem token - e o unico lugar do sistema com essa transparencia
 * (readme.md, "Transparency and blur"), citado em prosa, nao em variavel.
 * ========================================================================== */

.ds-ask-bar {
  position: fixed;
  left: 50%;
  /* 28 = --space-9 (24) + --space-2 (4): fora da escala --space-* como valor
   * unico, por isso composto em calc() em vez de literal. */
  bottom: calc(var(--space-9) + var(--space-2));
  transform: translateX(-50%);
  z-index: 50; /* sem token de camada no dump */
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 560 = --space-15 (120) * 4 + --space-14 (80): mesma logica do bottom acima. */
  max-width: calc(var(--space-15) * 4 + var(--space-14));
  padding: var(--space-3);
  border-radius: var(--radius-md);
  /* readme.md, "Transparency and blur": reservado para a barra do assistente e
   * o scrim de dialogo. Sem token - o valor exato vem de prosa, nao de variavel. */
  background: rgba(84, 84, 84, .86);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-pop);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.ds-ask-bar--desabilitada {
  /* mesmo numero literal de .ds-control:disabled em ds-base.css - nao ha token
   * de opacidade desabilitada, e a barra inteira (nao um controle isolado)
   * precisa ficar assim. */
  opacity: .38;
  pointer-events: none;
}

.ds-ask-bar__sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  /* padding do dump: os tres valores sao exatos em --space-1, --space-1,
   * --space-4. */
  padding: var(--space-1) var(--space-1) var(--space-4);
}

.ds-ask-bar__sugestao {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  /* altura do dump ficava entre --space-8 (20) e --control-h-sm (28) -
   * arredondada para --control-h-sm, a altura de controle pequeno do sistema. */
  height: var(--control-h-sm);
  padding: 0 var(--space-3) 0 var(--space-5);
  border: none;
  border-radius: var(--radius-xs);
  /* rgba(255,255,255,.14) sem token - e um verniz translucido sobre a propria
   * barra translucida, nao um dos dois usos reservados de blur/transparencia. */
  background: color-mix(in srgb, var(--wv-white) 14%, transparent);
  color: var(--wv-white);
  font: var(--fw-regular) var(--fs-micro)/1 var(--font-sans);
}
.ds-ask-bar__sugestao:hover { background: color-mix(in srgb, var(--wv-white) 22%, transparent); }

.ds-ask-bar__sugestao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  /* raio do dump era um numero solto sem var(): arredondado para --radius-xs,
   * o menor raio da escala. */
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--wv-white) 18%, transparent); /* sem token, mesmo motivo do chip acima */
}

.ds-ask-bar__form {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--wv-black);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
/* Foco: o unico brilho colorido do sistema fora do lancador da IA (DESIGN.md /
 * readme.md, "Shadows"). */
.ds-ask-bar__form:focus-within { box-shadow: var(--glow-accent); }

.ds-ask-bar__lancador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* tile do dump ficava entre --tile-sm e --tile - arredondado para --tile, a
   * unidade que e a assinatura do sistema (readme.md). */
  width: var(--tile);
  height: var(--tile);
  flex: none;
  border-radius: var(--radius-tile);
  background: var(--surface-accent);
  color: var(--text-on-accent);
}

.ds-ask-bar__campo {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--wv-white);
  font: var(--type-body);
  text-align: center;
}
.ds-ask-bar__campo::placeholder { color: var(--wv-gray-500); }
/* O campo pode desabilitar sozinho durante o envio (Enviando), sem que a barra
 * inteira esteja em estado desabilitado - neutraliza o esmaecimento nativo do
 * navegador para o esmaecimento vir so da barra quando for o caso. */
.ds-ask-bar__campo:disabled { opacity: 1; cursor: not-allowed; }

.ds-ask-bar__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tile); /* mesmo arredondamento do lancador acima */
  height: var(--tile);
  flex: none;
  border-radius: var(--radius-tile);
  background: color-mix(in srgb, var(--wv-white) 8%, transparent); /* sem token, mesmo motivo dos chips */
  color: var(--wv-white);
}

@media (prefers-reduced-motion: reduce) {
  .ds-ask-bar, .ds-ask-bar__form { transition-duration: 0ms; }
}