/* ====================================================================== *
 *  CENTRIU ONE — PRIMITIVAS
 *
 *  Todo valor vem de token (`--one-*`). Nenhum #hex, nenhum px de raio,
 *  nenhum ms de transição escrito aqui — é a regra DS-5, e é o que mantém
 *  a identidade trocável em um arquivo só.
 * ====================================================================== */

/* O documento é do Advisor OS: sem a margem padrão do navegador. A casca é
 * sangrada (a barra lateral encosta na borda), e a margem de 8px deixava um
 * vão e, na largura estreita, um scroll horizontal de 8px. */
body {
  margin: 0;
}

.one-root {
  font-family: var(--one-font-sans);
  font-size: var(--one-text-body);
  line-height: var(--one-leading-normal);
  color: var(--one-text);
  background: var(--one-surface-page);
  /* Toda a One usa numeral tabular. Uma coluna de dinheiro em que a
     largura muda com o dígito é uma coluna que dança ao atualizar. */
  font-variant-numeric: tabular-nums;
}

/* ── Foco: uma regra só, para tudo ─────────────────────────────────── */

.one-root :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--one-focus-ring-width) solid var(--one-focus-ring-color);
  outline-offset: var(--one-focus-ring-offset);
  border-radius: var(--one-radius-sm);
}

/* ── Tipografia ────────────────────────────────────────────────────── */

.one-text {
  margin: 0;
}
.one-text--display {
  font-family: var(--one-font-display);
  font-size: var(--one-text-display-lg);
  line-height: var(--one-leading-tight);
  letter-spacing: var(--one-tracking-tight);
  font-weight: var(--one-weight-bold);
}
.one-text--heading-lg {
  font-size: var(--one-text-heading-lg);
  line-height: var(--one-leading-snug);
  font-weight: var(--one-weight-semibold);
}
.one-text--heading-md {
  font-size: var(--one-text-heading-md);
  line-height: var(--one-leading-snug);
  font-weight: var(--one-weight-semibold);
}
.one-text--heading-sm {
  font-size: var(--one-text-heading-sm);
  line-height: var(--one-leading-snug);
  font-weight: var(--one-weight-semibold);
}
.one-text--body {
  font-size: var(--one-text-body);
}
.one-text--body-sm {
  font-size: var(--one-text-body-sm);
}
.one-text--label {
  font-size: var(--one-text-label);
  font-weight: var(--one-weight-medium);
}
.one-text--micro {
  font-size: var(--one-text-micro);
}
.one-text--eyebrow {
  font-size: var(--one-text-micro);
  font-weight: var(--one-weight-semibold);
  letter-spacing: var(--one-tracking-caps);
  text-transform: uppercase;
}
.one-text--secondary {
  color: var(--one-text-secondary);
}
.one-text--muted {
  color: var(--one-text-muted);
}
.one-text--measure {
  max-width: var(--one-measure);
}

/* ── Layout ────────────────────────────────────────────────────────── */

.one-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--one-space-4);
  max-width: 80rem;
  /* `border-box`: com `content-box`, o `width: 100%` somava o padding e a
   * coluna estourava a viewport em 12–16 px — scroll horizontal em toda tela que
   * usa `Container` (Carteira, Formação, Suporte, Método, Arquitetura,
   * Proposta). Encontrado na auditoria de jornada (Prompt 39). */
  box-sizing: border-box;
}
.one-container--narrow {
  max-width: 48rem;
}
.one-container--wide {
  max-width: 96rem;
}

.one-stack {
  display: flex;
  flex-direction: column;
  gap: var(--one-space-4);
}
.one-stack--tight {
  gap: var(--one-space-2);
}
.one-stack--loose {
  gap: var(--one-space-8);
}

.one-row {
  display: flex;
  align-items: center;
  gap: var(--one-space-3);
  flex-wrap: wrap;
}
.one-row--between {
  justify-content: space-between;
}
.one-row--tight {
  gap: var(--one-space-2);
}

.one-grid {
  display: grid;
  gap: var(--one-space-4);
  grid-template-columns: repeat(var(--one-grid-cols, 1), minmax(0, 1fr));
}
@media (max-width: 48rem) {
  .one-grid {
    grid-template-columns: 1fr;
  }
}

.one-divider {
  height: 1px;
  border: 0;
  background: var(--one-border-subtle);
  margin-block: var(--one-space-4);
}

/* ── Superfícies ───────────────────────────────────────────────────── */

.one-card {
  background: var(--one-surface);
  border: 1px solid var(--one-border);
  border-radius: var(--one-radius);
  padding: var(--one-space-5);
  box-shadow: var(--one-shadow-sm);
}
.one-card--sunken {
  background: var(--one-surface-sunken);
  box-shadow: none;
}
.one-card--raised {
  background: var(--one-surface-raised);
  box-shadow: var(--one-shadow-raised);
}
.one-card--flat {
  box-shadow: none;
}
.one-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--one-space-3);
  margin-bottom: var(--one-space-3);
}

.one-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--one-space-1);
}
.one-kpi__rotulo {
  font-size: var(--one-text-label);
  color: var(--one-text-secondary);
  font-weight: var(--one-weight-medium);
}
.one-kpi__valor {
  font-size: var(--one-text-metric);
  font-weight: var(--one-weight-bold);
  line-height: var(--one-leading-tight);
  letter-spacing: var(--one-tracking-tight);
}
.one-kpi__rodape {
  display: flex;
  align-items: center;
  gap: var(--one-space-2);
  flex-wrap: wrap;
  margin-top: var(--one-space-1);
}

/* ── Botão ─────────────────────────────────────────────────────────── */

.one-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--one-space-2);
  font-family: inherit;
  font-size: var(--one-text-body-sm);
  font-weight: var(--one-weight-medium);
  line-height: 1;
  padding: var(--one-space-3) var(--one-space-4);
  border-radius: var(--one-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--one-motion) var(--one-easing),
    border-color var(--one-motion) var(--one-easing);
}
.one-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.one-button--primary {
  background: var(--one-brand-interactive);
  color: var(--one-brand-on);
}
.one-button--primary:hover:not(:disabled) {
  background: var(--one-brand-interactive-hover);
}
.one-button--secondary {
  background: var(--one-surface);
  color: var(--one-text);
  border-color: var(--one-border-strong);
}
.one-button--secondary:hover:not(:disabled) {
  border-color: var(--one-border-active);
}
.one-button--ghost {
  background: transparent;
  color: var(--one-text-secondary);
}
.one-button--ghost:hover:not(:disabled) {
  background: var(--one-surface-sunken);
  color: var(--one-text);
}
.one-button--danger {
  background: var(--one-danger);
  color: var(--one-brand-on);
}
.one-button--sm {
  padding: var(--one-space-2) var(--one-space-3);
  font-size: var(--one-text-label);
}
.one-button--block {
  width: 100%;
}

/* ── Campos ────────────────────────────────────────────────────────── */

.one-field {
  display: flex;
  flex-direction: column;
  gap: var(--one-space-1);
}
.one-field__rotulo {
  font-size: var(--one-text-label);
  font-weight: var(--one-weight-medium);
  color: var(--one-text);
}
.one-field__obrigatorio {
  color: var(--one-danger);
  margin-left: var(--one-space-1);
}
.one-field__ajuda {
  font-size: var(--one-text-micro);
  color: var(--one-text-muted);
}
.one-field__erro {
  font-size: var(--one-text-micro);
  color: var(--one-danger);
  font-weight: var(--one-weight-medium);
}

.one-input,
.one-select,
.one-textarea {
  font-family: inherit;
  font-size: var(--one-text-body-sm);
  color: var(--one-text);
  background: var(--one-surface);
  border: 1px solid var(--one-border-strong);
  border-radius: var(--one-radius-sm);
  padding: var(--one-space-3);
  width: 100%;
}
.one-textarea {
  min-height: 6rem;
  resize: vertical;
}
.one-input[aria-invalid="true"],
.one-select[aria-invalid="true"],
.one-textarea[aria-invalid="true"] {
  border-color: var(--one-danger);
}
.one-input:disabled,
.one-select:disabled,
.one-textarea:disabled {
  background: var(--one-surface-sunken);
  color: var(--one-text-muted);
}

.one-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--one-space-2);
  font-size: var(--one-text-body-sm);
  cursor: pointer;
}
.one-check input {
  margin-top: 0.15em;
  accent-color: var(--one-brand-interactive);
}

.one-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--one-space-2);
  cursor: pointer;
}
.one-switch__trilho {
  width: 2.25rem;
  height: 1.25rem;
  border-radius: var(--one-radius-full);
  background: var(--one-border-strong);
  position: relative;
  transition: background var(--one-motion) var(--one-easing);
  flex: none;
}
.one-switch__botao {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--one-radius-full);
  background: var(--one-palette-ink-0);
  transition: transform var(--one-motion) var(--one-easing);
}
.one-switch[data-ligado="true"] .one-switch__trilho {
  background: var(--one-brand-interactive);
}
.one-switch[data-ligado="true"] .one-switch__botao {
  transform: translateX(1rem);
}

/* ── Badge, status ─────────────────────────────────────────────────── */

.one-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--one-space-1);
  font-size: var(--one-text-micro);
  font-weight: var(--one-weight-medium);
  padding: 0.125rem var(--one-space-2);
  border-radius: var(--one-radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
}
.one-badge--neutro {
  background: var(--one-surface-sunken);
  color: var(--one-text-secondary);
  border-color: var(--one-border);
}
.one-badge--info {
  background: var(--one-info-soft);
  color: var(--one-info);
  border-color: var(--one-info-border);
}
.one-badge--sucesso {
  background: var(--one-success-soft);
  color: var(--one-success);
  border-color: var(--one-success-border);
}
.one-badge--aviso {
  background: var(--one-warning-soft);
  color: var(--one-warning);
  border-color: var(--one-warning-border);
}
.one-badge--perigo {
  background: var(--one-danger-soft);
  color: var(--one-danger);
  border-color: var(--one-danger-border);
}

.one-status {
  display: inline-flex;
  align-items: center;
  gap: var(--one-space-2);
  font-size: var(--one-text-body-sm);
}
.one-status__ponto {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--one-radius-full);
  flex: none;
}

/* ── Origem do dado ────────────────────────────────────────────────── */

/* O crachá carrega FRASE, não rótulo: "calculado · lançamentos do Ledger já
   conferidos por uma segunda pessoa" tem ~60 caracteres. Com `nowrap` ele fixava
   uma largura mínima de ~340px, e essa largura subia pela grade dos KPIs até
   empurrar a página inteira — 67px de rolagem horizontal a 390px, medidos. A
   origem do dado é obrigatória por tipo (ver `business-values.tsx`), então
   encurtar o texto não é opção: quebrar linha é. */
.one-source {
  display: inline-flex;
  align-items: center;
  gap: var(--one-space-1);
  font-size: var(--one-text-micro);
  font-weight: var(--one-weight-medium);
  padding: 0.0625rem var(--one-space-2);
  border-radius: var(--one-radius-sm);
  white-space: normal;
}
/* Dentro de tabela, o crachá volta a uma linha só. A tabela já mora num
   contentor que rola por dentro (`.one-table-wrap`), então aqui `nowrap` não
   empurra a página — e deixá-lo quebrar produzia coluna estreita e alta, com a
   frase em seis linhas. Cada contexto tem o comportamento que lhe cabe. */
.one-table .one-source {
  white-space: nowrap;
}
.one-source--calculated {
  background: var(--one-source-calculated-soft);
  color: var(--one-source-calculated);
}
.one-source--verified {
  background: var(--one-source-verified-soft);
  color: var(--one-source-verified);
}
.one-source--declared {
  background: var(--one-source-declared-soft);
  color: var(--one-source-declared);
}
.one-source--external {
  background: var(--one-source-external-soft);
  color: var(--one-source-external);
}

/* ── Evidência ─────────────────────────────────────────────────────── */

.one-evidence {
  display: inline-flex;
  align-items: center;
  gap: var(--one-space-1);
  font-size: var(--one-text-micro);
  font-weight: var(--one-weight-medium);
  padding: 0.0625rem var(--one-space-2);
  border-radius: var(--one-radius-sm);
}
.one-evidence--presente {
  background: var(--one-evidence-present-soft);
  color: var(--one-evidence-present);
}
.one-evidence--ausente {
  background: var(--one-evidence-absent-soft);
  color: var(--one-evidence-absent);
}
.one-evidence--alinhamento {
  background: var(--one-evidence-alignment-soft);
  color: var(--one-evidence-alignment);
}

/* ── Números de negócio ────────────────────────────────────────────── */

/* `flex-wrap: wrap` põe o crachá de origem ABAIXO do número quando não cabe ao
   lado, em vez de espremer os dois. Sem isso, com o crachá podendo quebrar
   linha, o valor perdia a disputa por espaço e "R$ 900,00" saía em duas linhas
   — trocar rolagem lateral por número partido não é conserto. */
.one-money,
.one-percent {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--one-space-2);
  font-variant-numeric: tabular-nums;
}
/* Valor monetário não quebra, nunca: "R$ 1.234,56" partido em duas linhas se lê
   como dois números. É o único texto aqui que prefere transbordar a quebrar. */
.one-money__valor {
  font-weight: var(--one-weight-semibold);
  white-space: nowrap;
}
.one-money--negativo .one-money__valor {
  color: var(--one-danger);
}
.one-money--grande .one-money__valor {
  font-size: var(--one-text-metric-sm);
}

/* ── Cobertura (ADR-014) ───────────────────────────────────────────── */

.one-score {
  display: flex;
  flex-direction: column;
  gap: var(--one-space-1);
}
.one-score__valor {
  font-size: var(--one-text-metric-sm);
  font-weight: var(--one-weight-bold);
  font-variant-numeric: tabular-nums;
}
.one-score__cobertura {
  display: flex;
  align-items: center;
  gap: var(--one-space-2);
  font-size: var(--one-text-micro);
  color: var(--one-text-secondary);
}
.one-score__barra {
  width: 4rem;
  height: 0.25rem;
  border-radius: var(--one-radius-full);
  background: var(--one-coverage-track);
  overflow: hidden;
  flex: none;
}
.one-score__preenchimento {
  height: 100%;
  background: var(--one-coverage-fill);
}
.one-score--parcial .one-score__preenchimento {
  background: var(--one-coverage-partial);
}
.one-score--parcial .one-score__cobertura {
  color: var(--one-coverage-partial);
  font-weight: var(--one-weight-medium);
}

/* ── Gate ──────────────────────────────────────────────────────────── */

.one-gate {
  border: 1px solid var(--one-border);
  border-radius: var(--one-radius);
  background: var(--one-surface);
  overflow: hidden;
}
.one-gate__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--one-space-3);
  padding: var(--one-space-4) var(--one-space-5);
  border-bottom: 1px solid var(--one-border-subtle);
}
.one-gate__corpo {
  padding: var(--one-space-4) var(--one-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--one-space-4);
}
.one-gate__acao {
  padding: var(--one-space-4) var(--one-space-5);
  background: var(--one-surface-sunken);
  border-top: 1px solid var(--one-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--one-space-2);
}
/**
 * O aviso do U-28. Fica NO MESMO bloco da ação e é referenciado por
 * `aria-describedby` do botão: quem usa leitor de tela ouve o aviso junto
 * com o rótulo do botão, não numa região distante da página.
 */
.one-gate__aviso {
  font-size: var(--one-text-micro);
  color: var(--one-text-secondary);
  line-height: var(--one-leading-snug);
}
.one-gate__requisito {
  display: flex;
  align-items: flex-start;
  gap: var(--one-space-2);
  font-size: var(--one-text-body-sm);
}
.one-gate__requisito[data-cumprido="false"] {
  color: var(--one-text-secondary);
}

.one-gate-status {
  display: inline-flex;
  align-items: center;
  gap: var(--one-space-2);
  font-size: var(--one-text-body-sm);
  font-weight: var(--one-weight-medium);
}
.one-gate-status__marca {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--one-radius-full);
  flex: none;
}

/* ── Auditoria ─────────────────────────────────────────────────────── */

.one-audit-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--one-space-1);
  font-size: var(--one-text-micro);
  color: var(--one-audit);
  background: var(--one-audit-soft);
  border: 1px solid var(--one-audit-border);
  border-radius: var(--one-radius-sm);
  padding: 0.0625rem var(--one-space-2);
}

/* ── Tabela ────────────────────────────────────────────────────────── */

/* `contain: paint` não é enfeite: sem ele a tabela larga vazava para o rolamento
   da RAIZ mesmo com `overflow-x: auto` aqui — 215px de rolagem lateral a 390px,
   e trocar `auto` por `hidden` não mudava nada. Só a contenção de pintura
   segurava. O que ela declara é o que este elemento já promete ser: uma caixa
   que rola por dentro e não pinta fora de si. */
.one-table-wrap {
  overflow-x: auto;
  contain: paint;
  border: 1px solid var(--one-border);
  border-radius: var(--one-radius);
  background: var(--one-surface);
}
.one-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--one-text-body-sm);
}
.one-table th {
  text-align: left;
  font-size: var(--one-text-label);
  font-weight: var(--one-weight-semibold);
  color: var(--one-text-secondary);
  padding: var(--one-space-3) var(--one-space-4);
  border-bottom: 1px solid var(--one-border);
  white-space: nowrap;
}
.one-table td {
  padding: var(--one-space-3) var(--one-space-4);
  border-bottom: 1px solid var(--one-border-subtle);
  vertical-align: top;
}
.one-table tr:last-child td {
  border-bottom: 0;
}
.one-table__numerico {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Abas, passos, linha do tempo ──────────────────────────────────── */

.one-tabs {
  display: flex;
  gap: var(--one-space-1);
  border-bottom: 1px solid var(--one-border);
}
.one-tabs__aba {
  font-family: inherit;
  font-size: var(--one-text-body-sm);
  font-weight: var(--one-weight-medium);
  color: var(--one-text-secondary);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--one-space-3) var(--one-space-4);
  cursor: pointer;
}
.one-tabs__aba[aria-selected="true"] {
  color: var(--one-text);
  border-bottom-color: var(--one-border-active);
}

.one-stepper {
  display: flex;
  gap: var(--one-space-2);
  flex-wrap: wrap;
}
.one-stepper__passo {
  display: flex;
  align-items: center;
  gap: var(--one-space-2);
  font-size: var(--one-text-body-sm);
  color: var(--one-text-secondary);
}
.one-stepper__passo[data-estado="atual"] {
  color: var(--one-text);
  font-weight: var(--one-weight-semibold);
}
.one-stepper__marca {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--one-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--one-text-micro);
  border: 1px solid var(--one-border-strong);
  flex: none;
}
.one-stepper__passo[data-estado="concluido"] .one-stepper__marca {
  background: var(--one-success-soft);
  border-color: var(--one-success-border);
  color: var(--one-success);
}
.one-stepper__passo[data-estado="atual"] .one-stepper__marca {
  background: var(--one-brand-soft);
  border-color: var(--one-brand-soft-border);
  color: var(--one-brand-on-soft);
}

.one-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--one-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.one-timeline__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--one-space-3);
}
.one-timeline__marca {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--one-radius-full);
  background: var(--one-border-strong);
  margin-top: 0.4em;
}
.one-timeline__quando {
  font-size: var(--one-text-micro);
  color: var(--one-text-muted);
}

/* ── Estados: EMPTY ≠ ERROR ≠ UNAVAILABLE ──────────────────────────── *
 *
 *  Três blocos, não três textos do mesmo. A diferença é visual, semântica
 *  e de `role`: só o erro e a indisponibilidade são `role="alert"`, porque
 *  só eles são notícia. "Nada aqui ainda" não é notícia.               */

.one-estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--one-space-2);
  padding: var(--one-space-10) var(--one-space-5);
  border-radius: var(--one-radius);
  border: 1px dashed var(--one-border);
}
.one-estado__titulo {
  font-size: var(--one-text-heading-sm);
  font-weight: var(--one-weight-semibold);
}
.one-estado__texto {
  font-size: var(--one-text-body-sm);
  color: var(--one-text-secondary);
  max-width: 42ch;
}
.one-estado--vazio {
  color: var(--one-empty);
  background: var(--one-empty-soft);
}
.one-estado--erro {
  color: var(--one-danger);
  background: var(--one-danger-soft);
  border-style: solid;
  border-color: var(--one-danger-border);
}
.one-estado--indisponivel {
  color: var(--one-unavailable);
  background: var(--one-unavailable-soft);
  border-style: solid;
  border-color: var(--one-unavailable-border);
}
.one-estado__detalhe {
  font-size: var(--one-text-micro);
  font-family: var(--one-font-mono);
  color: var(--one-text-muted);
}

/* ── Carregando e esqueleto ────────────────────────────────────────── */

.one-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--one-space-2);
  font-size: var(--one-text-body-sm);
  color: var(--one-text-secondary);
}
.one-loading__giro {
  width: 1rem;
  height: 1rem;
  border-radius: var(--one-radius-full);
  border: 2px solid var(--one-border-strong);
  border-top-color: var(--one-brand-interactive);
  animation: one-girar 700ms linear infinite;
  flex: none;
}
@keyframes one-girar {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .one-loading__giro {
    animation: none;
  }
}

.one-skeleton {
  background: var(--one-surface-sunken);
  border-radius: var(--one-radius-sm);
  min-height: 1em;
}

/* ── Alerta e aviso flutuante ──────────────────────────────────────── */

.one-alert {
  display: flex;
  flex-direction: column;
  gap: var(--one-space-1);
  padding: var(--one-space-4);
  border-radius: var(--one-radius);
  border: 1px solid;
  font-size: var(--one-text-body-sm);
}
.one-alert--info {
  background: var(--one-info-soft);
  border-color: var(--one-info-border);
  color: var(--one-on-soft);
}
.one-alert--sucesso {
  background: var(--one-success-soft);
  border-color: var(--one-success-border);
  color: var(--one-on-soft);
}
.one-alert--aviso {
  background: var(--one-warning-soft);
  border-color: var(--one-warning-border);
  color: var(--one-on-soft);
}
.one-alert--perigo {
  background: var(--one-danger-soft);
  border-color: var(--one-danger-border);
  color: var(--one-on-soft);
}
.one-alert__titulo {
  font-weight: var(--one-weight-semibold);
}

.one-toast {
  background: var(--one-surface-raised);
  border: 1px solid var(--one-border);
  border-radius: var(--one-radius);
  box-shadow: var(--one-shadow-raised);
  padding: var(--one-space-3) var(--one-space-4);
  font-size: var(--one-text-body-sm);
  max-width: 26rem;
}
.one-toast-regiao {
  position: fixed;
  right: var(--one-space-4);
  bottom: var(--one-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--one-space-2);
  z-index: var(--one-z-toast);
}

/* ── Sobreposições ─────────────────────────────────────────────────── */

.one-overlay {
  position: fixed;
  inset: 0;
  background: var(--one-overlay);
}
.one-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--one-z-dialog);
  display: grid;
  place-items: center;
  padding: var(--one-space-4);
}
.one-dialog__painel {
  position: relative;
  background: var(--one-surface-raised);
  border-radius: var(--one-radius-lg);
  box-shadow: var(--one-shadow-raised);
  padding: var(--one-space-6);
  width: min(34rem, 100%);
  max-height: 85vh;
  overflow-y: auto;
}
.one-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--one-z-drawer);
}
.one-drawer__painel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(28rem, 100%);
  background: var(--one-surface-raised);
  border-left: 1px solid var(--one-border);
  box-shadow: var(--one-shadow-raised);
  padding: var(--one-space-6);
  overflow-y: auto;
}

.one-tooltip {
  position: relative;
  display: inline-flex;
}
.one-tooltip__balao {
  position: absolute;
  bottom: calc(100% + var(--one-space-2));
  left: 50%;
  transform: translateX(-50%);
  background: var(--one-surface-inverse);
  color: var(--one-text-on-inverse);
  font-size: var(--one-text-micro);
  padding: var(--one-space-2) var(--one-space-3);
  border-radius: var(--one-radius-sm);
  white-space: nowrap;
  z-index: var(--one-z-tooltip);
}

/* ── Utilitário de acessibilidade ──────────────────────────────────── */

.one-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}