/* ============================================================
   Camada de aplicação — Sistema de Gestão Integrada do Grupo Arbolt
   Carregada por <link> DEPOIS de arbolt.css. Só tokens --arb-*.
   ============================================================

   O Arbolt Design System v1.2.0 cobre a página: tipografia, cor, componentes,
   dados. Ele **não** cobre a casca de um sistema de gestão — lateral de 22
   módulos, barra superior, salto entre telas —, e é isso que mora aqui, junto
   do punhado de utilitários que o app repete e o manual não nomeia.

   A direção desta folha tem nome: **bancada**. A tela é uma bancada de trabalho
   industrial — fundo Aço Polido, papel branco por cima, cromo escuro na lateral
   (Solda, nos dois temas) e um único acento Verde Prumo, gasto no lugar que
   responde à pergunta da tela. Tudo o mais é neutro e quieto: a hierarquia vem
   de tom, de traço e de tipografia, nunca de mais cor.

   As regras do manual valem inteiras neste arquivo:
     · nunca cor literal — só papel semântico (`--arb-marca`, nunca `--arb-verde-600`);
     · Verde Prumo não é texto no escuro — `--arb-marca` para texto, `--arb-marca-fill` para preenchimento;
     · cor nunca é o único portador de informação;
     · foco visível nunca é removido.

   Ordem das folhas no <head>, e ela importa:
     /design-system/fonts.css      as três faces da marca
     /design-system/arbolt.css     o sistema (4 camadas, 356 tokens)
     /estilos/aplicacao.css        esta folha, a última

   Ela é a última de propósito: o que precisa **ganhar** do sistema mora aqui.
   Uma folha importada pelo `layout.tsx` não serviria — o Next injeta a folha
   do layout antes dos `<link>` do `<head>`, e o sistema passaria por cima.

   Índice
     0. A página inteira
     1. A casca: lateral, barra superior e área principal
     2. Barra superior: sessão, salto e menu em tela estreita
     3. Progresso de navegação
     4. Cabeçalho de página e ritmo vertical
     5. Listagem: barra de filtro, tabela e rodapé
     6. Abas que navegam
     7. Utilitários que o app repete e o manual não nomeia
     8. Formulário e diálogo
     9. Indicadores, listas de valores e cartões de módulo
    10. Esqueleto de carregamento
    11. Telas soltas: entrada, não encontrado, erro, em configuração; a janela do wizard
    12. Tela estreita e alvo de toque
    13. Impressão */

/* ==========================================================================================
   0. A página inteira
   ========================================================================================== */

/*
 * `.arb-raiz` do sistema dá fundo, cor e tipografia ao `<body>`, mas não zera a `margin` — o
 * `body { margin: 0 }` do manual mora no bloco de demonstração que ele manda não copiar. Sem isso
 * ficam os 8px do navegador em toda a volta, e como o `<html>` não tem fundo, o que aparece nessa
 * faixa (e na sobra do overscroll) é o branco do navegador, não o Aço Polido da tela.
 */
html {
  background-color: var(--arb-bg-canvas);
}
.arb-raiz {
  margin: 0;
  min-height: 100vh;
}

/* ==========================================================================================
   1. A casca: lateral, barra superior e área principal
   ========================================================================================== */

/*
 * `minmax(0, 1fr)` na coluna de conteúdo, e não `1fr`: um track `1fr` tem `min-width: auto`
 * e não encolhe abaixo do conteúdo — basta uma tabela larga para esticar a página inteira.
 *
 * A largura da lateral é uma variável porque ela tem dois estados. Recolhida, ela fica com 3,5rem —
 * só o símbolo e os ícones —, e o estado é carimbado no `<html>` pelo script do `<head>`, antes da
 * primeira pintura, pelo mesmo mecanismo do tema: quem recolheu não vê a lateral abrir e fechar a
 * cada navegação.
 */
.arb-app {
  display: grid;
  grid-template-columns: var(--arb-app-lateral) minmax(0, 1fr);
  grid-template-rows: var(--arb-app-topo) 1fr;
  grid-template-areas: "lateral topo" "lateral principal";
  min-height: 100vh;
  --arb-app-lateral: 16rem;
  --arb-app-topo: 3.5rem;
  transition: grid-template-columns var(--arb-dur-padrao) var(--arb-ease-padrao);
}
html[data-lateral="recolhida"] .arb-app {
  --arb-app-lateral: 3.5rem;
}

/*
 * A lateral é **cromo**, não conteúdo — e tem uma cor por tema, resolvida nas variáveis `--arb-lat-*`
 * abaixo, nunca escrita nos componentes.
 *
 * **Tema claro: Verde Prumo.** A lateral é a âncora da marca na tela, e sobre o verde o texto vai em
 * branco: 5,3:1 no item em repouso (Verde Prumo × branco), mais no item aberto, que ganha um fundo um
 * degrau mais escuro (Solda a 28 %) e o fio branco na partida. O logo vai em Aço Polido, como o manual
 * manda para fundo Verde Prumo.
 *
 * **Tema escuro: Solda.** Contra Ferro Fundido nenhum verde da rampa passa de 2,4:1 e o item aberto sumia;
 * sobre Solda o item em repouso fica a 9,6:1 e o fio Verde Prumo a 3,7:1. Quando a página segue o sistema
 * operacional, a lateral segue junto.
 *
 * `data-tema="escuro"` continua no elemento para os componentes do sistema dentro dela (rótulo, botão)
 * resolverem os papéis do escuro por cascata.
 */
.arb-lateral,
.arb-gaveta-menu {
  /* claro (padrão): Verde Prumo com branco por cima */
  --arb-lat-bg: var(--arb-marca-fill);
  --arb-lat-fg: var(--arb-neutro-0);
  --arb-lat-fg-mudo: color-mix(in srgb, var(--arb-neutro-0) 88%, transparent);
  --arb-lat-fg-sutil: color-mix(in srgb, var(--arb-neutro-0) 66%, transparent);
  --arb-lat-fio: color-mix(in srgb, var(--arb-neutro-0) 18%, transparent);
  --arb-lat-hover: color-mix(in srgb, var(--arb-neutro-0) 12%, transparent);
  --arb-lat-ativo-bg: color-mix(in srgb, var(--arb-solda) 28%, transparent);
  --arb-lat-ativo-fio: var(--arb-neutro-0);
  --arb-lat-ativo-icone: var(--arb-neutro-0);
  --arb-lat-secao: color-mix(in srgb, var(--arb-neutro-0) 72%, transparent);
  --arb-lat-secao-ativa: var(--arb-neutro-0);
}
html[data-tema="escuro"] .arb-lateral,
html[data-tema="escuro"] .arb-gaveta-menu {
  /* escuro: Solda, como antes */
  --arb-lat-bg: var(--arb-solda);
  --arb-lat-fg: var(--arb-aco-polido);
  --arb-lat-fg-mudo: var(--arb-concreto);
  --arb-lat-fg-sutil: var(--arb-viga);
  --arb-lat-fio: var(--arb-borda-sutil);
  --arb-lat-hover: var(--arb-bg-hover);
  --arb-lat-ativo-bg: var(--arb-marca-sutil-bg);
  --arb-lat-ativo-fio: var(--arb-marca-fill);
  --arb-lat-ativo-icone: var(--arb-marca-sutil-fg);
  --arb-lat-secao: var(--arb-viga);
  --arb-lat-secao-ativa: var(--arb-marca);
}
@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) .arb-lateral,
  html:not([data-tema="claro"]) .arb-gaveta-menu {
    --arb-lat-bg: var(--arb-solda);
    --arb-lat-fg: var(--arb-aco-polido);
    --arb-lat-fg-mudo: var(--arb-concreto);
    --arb-lat-fg-sutil: var(--arb-viga);
    --arb-lat-fio: var(--arb-borda-sutil);
    --arb-lat-hover: var(--arb-bg-hover);
    --arb-lat-ativo-bg: var(--arb-marca-sutil-bg);
    --arb-lat-ativo-fio: var(--arb-marca-fill);
    --arb-lat-ativo-icone: var(--arb-marca-sutil-fg);
    --arb-lat-secao: var(--arb-viga);
    --arb-lat-secao-ativa: var(--arb-marca);
  }
}
.arb-lateral {
  grid-area: lateral;
  background: var(--arb-lat-bg);
  color: var(--arb-lat-fg);
  border-right: 1px solid var(--arb-lat-fio);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.arb-lateral__marca {
  height: var(--arb-app-topo);
  display: flex;
  align-items: center;
  padding: 0 var(--arb-esp-4);
  border-bottom: 1px solid var(--arb-lat-fio);
  flex-shrink: 0;
}
.arb-lateral__marca img {
  max-width: 100%;
}
.arb-lateral__simbolo {
  display: none;
}
/*
 * O corpo do menu rola sozinho; marca e rodapé ficam sempre à vista. E o rótulo da seção gruda no
 * topo enquanto a lista rola: com 22 módulos em cinco blocos, saber em que bloco se está é o que
 * poupa o passeio de cima a baixo à procura do item.
 */
.arb-lateral__corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  padding-bottom: var(--arb-esp-2);
}
.arb-lateral__secao {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--arb-lat-bg);
  padding: var(--arb-esp-4) var(--arb-esp-4) var(--arb-esp-1);
}
.arb-lateral__secao .arb-rotulo {
  color: var(--arb-lat-secao);
}
.arb-lateral__secao .arb-rotulo::before {
  color: var(--arb-lat-fg-sutil);
}
.arb-lateral__secao.is-ativa .arb-rotulo {
  color: var(--arb-lat-secao-ativa);
}
.arb-lateral__rodape {
  margin-top: auto;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--arb-esp-2);
  padding: var(--arb-esp-3) var(--arb-esp-3) var(--arb-esp-3) var(--arb-esp-4);
  border-top: 1px solid var(--arb-lat-fio);
}
.arb-lateral__versao {
  font-family: var(--arb-font-detalhe);
  font-size: var(--arb-tam-mono-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arb-lat-fg-sutil);
  line-height: 1.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.arb-menu-lateral {
  list-style: none;
  margin: 0;
  padding: 0 var(--arb-esp-2);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.arb-menu-lateral__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--arb-esp-3);
  padding: 0 var(--arb-esp-3) 0 calc(var(--arb-esp-3) - 2px);
  height: 2.25rem;
  border-radius: var(--arb-raio-sm);
  border-left: 2px solid transparent;
  color: var(--arb-lat-fg-mudo);
  font-size: var(--arb-tam-body-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--arb-dur-rapido) var(--arb-ease-padrao), color var(--arb-dur-rapido);
}
.arb-menu-lateral__item svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}
.arb-menu-lateral__texto {
  overflow: hidden;
  text-overflow: ellipsis;
}
.arb-menu-lateral__item:hover {
  background: var(--arb-lat-hover);
  color: var(--arb-lat-fg);
  text-decoration: none;
}
/*
 * O item aberto: fundo da marca em tom sutil, fio de Verde Prumo na partida, peso maior e o ícone
 * em Verde Sálvia. São quatro portadores além da cor — quem não distingue o verde ainda vê o fio e
 * o peso. Verde Prumo **não** é texto no escuro (3,25:1); por isso o texto vai em Aço Polido.
 */
.arb-menu-lateral__item[aria-current="page"] {
  background: var(--arb-lat-ativo-bg);
  color: var(--arb-lat-fg);
  font-weight: 600;
  border-left-color: var(--arb-lat-ativo-fio);
}
.arb-menu-lateral__item[aria-current="page"] svg {
  color: var(--arb-lat-ativo-icone);
}
/*
 * Os submódulos de um item — cada tela que ele abre.
 *
 * O fio contínuo à esquerda é o que diz "isto pende daquilo" sem indentação exagerada: recuar 1rem e
 * mais nada faria uma lista de itens levemente tortos. O fio custa 1px e resolve a leitura.
 *
 * O item com um submódulo aberto fica em `data-ramo="ativo"`: aceso, mas sem `aria-current="page"` —
 * a página é o submódulo, e duas marcas de "você está aqui" na mesma lateral não ajudam ninguém.
 */
.arb-menu-lateral__subs {
  list-style: none;
  margin: 1px 0 var(--arb-esp-1);
  padding: 0 0 0 calc(var(--arb-esp-3) + 0.5rem);
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 1px solid var(--arb-lat-fio);
  margin-left: calc(var(--arb-esp-3) + 0.5rem);
}
.arb-menu-lateral__sub {
  display: flex;
  align-items: center;
  padding: 0 var(--arb-esp-2);
  height: 1.875rem;
  border-radius: var(--arb-raio-sm);
  color: var(--arb-lat-fg-mudo);
  font-size: var(--arb-tam-body-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--arb-dur-rapido) var(--arb-ease-padrao), color var(--arb-dur-rapido);
}
.arb-menu-lateral__sub:hover {
  background: var(--arb-lat-hover);
  color: var(--arb-lat-fg);
  text-decoration: none;
}
.arb-menu-lateral__sub[aria-current="page"] {
  background: var(--arb-lat-ativo-bg);
  color: var(--arb-lat-fg);
  font-weight: 600;
}
.arb-menu-lateral__item[data-ramo="ativo"] {
  color: var(--arb-lat-fg);
  border-left-color: var(--arb-lat-ativo-fio);
}
.arb-menu-lateral__item[data-ramo="ativo"] svg {
  color: var(--arb-lat-ativo-icone);
}
.arb-menu-lateral__conta {
  margin-left: auto;
  font-family: var(--arb-font-detalhe);
  font-size: var(--arb-tam-mono-xs);
  color: var(--arb-lat-fg-sutil);
}
/* O foco dentro da lateral: anel branco sobre o verde, anel da marca sobre Solda — sempre visível. */
.arb-lateral :focus-visible,
.arb-gaveta-menu :focus-visible {
  box-shadow: 0 0 0 2px var(--arb-lat-bg), 0 0 0 4px var(--arb-lat-fg);
}

/*
 * Recolhida: 3,5rem, só símbolo e ícones. O nome do módulo continua no `title` de cada item, e a
 * seção vira um fio — a lista inteira continua alcançável, só perde a legenda. O botão do rodapé
 * é o único controle, e ele explica no `aria-label` o que vai fazer.
 */
html[data-lateral="recolhida"] .arb-lateral__marca {
  padding: 0;
  justify-content: center;
}
html[data-lateral="recolhida"] .arb-lateral__logo {
  display: none;
}
html[data-lateral="recolhida"] .arb-lateral__simbolo {
  display: block;
}
html[data-lateral="recolhida"] .arb-lateral__secao {
  padding: var(--arb-esp-2) var(--arb-esp-3) var(--arb-esp-2);
}
html[data-lateral="recolhida"] .arb-lateral__secao .arb-rotulo {
  display: none;
}
html[data-lateral="recolhida"] .arb-lateral__secao::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--arb-lat-fio);
}
html[data-lateral="recolhida"] .arb-lateral__corpo > div:first-child .arb-lateral__secao::after {
  display: none;
}
html[data-lateral="recolhida"] .arb-menu-lateral {
  padding: 0 var(--arb-esp-1);
}
html[data-lateral="recolhida"] .arb-menu-lateral__item {
  justify-content: center;
  gap: 0;
  padding: 0 2px 0 0;
}
html[data-lateral="recolhida"] .arb-menu-lateral__texto,
html[data-lateral="recolhida"] .arb-menu-lateral__conta,
html[data-lateral="recolhida"] .arb-lateral__versao {
  display: none;
}
/* Recolhida são 3,5rem: um submódulo vira um retângulo sem nome. Some, e volta ao expandir. */
html[data-lateral="recolhida"] .arb-menu-lateral__subs {
  display: none;
}
html[data-lateral="recolhida"] .arb-lateral__rodape {
  justify-content: center;
  padding: var(--arb-esp-3) 0;
}
/* O botão que recolhe e expande — só tem sentido onde a lateral existe. */
.arb-lateral__recolher {
  width: 1.875rem;
  height: 1.875rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--arb-lat-fio);
  border-radius: var(--arb-raio-sm);
  background: transparent;
  color: var(--arb-lat-fg-mudo);
  cursor: pointer;
}
.arb-lateral__recolher:hover {
  background: var(--arb-lat-hover);
  color: var(--arb-lat-fg);
  border-color: var(--arb-lat-fg-sutil);
}
.arb-lateral__recolher svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.arb-topo {
  grid-area: topo;
  position: sticky;
  top: 0;
  z-index: var(--arb-z-sticky);
  height: var(--arb-app-topo);
  background: var(--arb-bg-superficie);
  border-bottom: 1px solid var(--arb-borda-sutil);
  display: flex;
  align-items: center;
  gap: var(--arb-esp-3);
  padding: 0 var(--arb-esp-6);
}
.arb-topo__vao {
  flex: 1;
}
/* Um fio vertical separando os controles da sessão do resto da barra. */
.arb-topo__divisor {
  width: 1px;
  height: 1.375rem;
  background: var(--arb-borda-sutil);
  flex: 0 0 auto;
}

/*
 * A área principal tem ritmo próprio: os blocos de primeiro nível (cabeçalho, abas, indicadores,
 * cartão da lista, ressalvas) se separam por `gap`, e não por margem escrita em cada tela. É o que
 * tira 265 `marginTop` das páginas e faz toda tela respirar igual.
 */
/*
 * **Largura total, sem teto.** O `--arb-largura-max` de 90rem é medida de página de leitura; num sistema
 * de gestão ele só produzia sobra — em 1920px o conteúdo parava 224px antes da borda enquanto a barra
 * superior ia até o fim, duas réguas discordando na mesma coluna. Aqui a tela é a medida.
 *
 * Quem precisa de medida de leitura continua pedindo por conta própria: `.arb-medida-texto` e o resumo do
 * cabeçalho de página têm teto em `ch`, que é o que limita **texto corrido**. Largura de tabela e largura
 * de parágrafo são problemas diferentes e não se resolvem com o mesmo número.
 */
.arb-principal {
  grid-area: principal;
  display: flex;
  flex-direction: column;
  gap: var(--arb-esp-5);
  padding: var(--arb-esp-6) var(--arb-esp-6) var(--arb-esp-10);
  width: 100%;
  min-width: 0;
}
.arb-principal:focus {
  outline: none;
}
/* O `Indisponivel` só existe quando há aviso; vazio, ele não pode abrir um vão no ritmo. */
.arb-principal > :empty {
  display: none;
}

/*
 * O atalho para o conteúdo. `.arb-sr` esconde sempre, inclusive sob foco — e um atalho de
 * teclado que ninguém enxerga ao chegar nele não é atalho, é armadilha.
 */
.arb-pular {
  position: fixed;
  left: var(--arb-esp-3);
  top: -8rem;
  z-index: var(--arb-z-toast);
  padding: var(--arb-esp-3);
  background: var(--arb-bg-superficie);
  color: var(--arb-fg);
  border: 1px solid var(--arb-borda-forte);
  border-radius: var(--arb-raio-sm);
  text-decoration: none;
  transition: top var(--arb-dur-rapido) var(--arb-ease-saida);
}
.arb-pular:focus-visible,
.arb-pular:focus {
  top: var(--arb-esp-3);
}

/* ==========================================================================================
   2. Barra superior: sessão, salto e menu em tela estreita
   ========================================================================================== */

.arb-popover {
  position: relative;
  display: flex;
  align-items: center;
}
.arb-popover__painel {
  position: absolute;
  top: calc(100% + var(--arb-esp-2));
  right: 0;
  min-width: 17rem;
  z-index: var(--arb-z-overlay);
}
.arb-popover__cabecalho,
.arb-popover__bloco {
  padding: var(--arb-esp-2) var(--arb-esp-3);
  display: flex;
  flex-direction: column;
  gap: var(--arb-esp-1);
}
.arb-avatar--botao {
  border: 0;
  cursor: pointer;
  font-family: var(--arb-font-detalhe);
  font-weight: 600;
}
.arb-avatar--botao:hover {
  background: var(--arb-marca-fill);
  color: var(--arb-fg-sobre-marca);
}

/* O tema e a densidade das tabelas, no menu da sessão: mesmo desenho, dois campos. */
.arb-tema,
.arb-densidade {
  display: flex;
  flex-direction: column;
  gap: var(--arb-esp-1);
  border: 0;
  padding: 0;
  margin: 0;
}
.arb-tema .arb-seg,
.arb-densidade .arb-seg {
  width: 100%;
}

/*
 * A empresa da barra superior. Um `<select>` pequeno com o ícone de prédio à esquerda; quando a escolha
 * não é o grupo, a borda toma a cor de acento — a pessoa precisa **ver** que está numa empresa só, porque
 * toda lista da tela passa a ser só dela.
 */
.arb-empresa {
  display: flex;
  align-items: center;
  gap: var(--arb-esp-1);
  flex: 0 1 auto;
  min-width: 0;
}
.arb-empresa__rotulo {
  display: inline-flex;
  color: var(--arb-fg-mudo);
}
.arb-empresa__campo {
  max-width: 18rem;
  min-width: 9rem;
  text-overflow: ellipsis;
}
.arb-empresa.is-empresa .arb-empresa__campo {
  border-color: var(--arb-borda-marca);
  box-shadow: inset 0 0 0 1px var(--arb-marca);
}
.arb-empresa.is-empresa .arb-empresa__rotulo {
  color: var(--arb-marca);
}

/* O botão que está "ligado" dentro de um grupo — a opção de tema em uso, o corte selecionado. */
.arb-btn.is-ativo {
  background: var(--arb-marca-sutil-bg);
  color: var(--arb-marca-sutil-fg);
  font-weight: 700;
}

/* O gatilho do salto rápido parece um campo de busca, porque é o que ele abre. */
.arb-salto__gatilho {
  display: inline-flex;
  align-items: center;
  gap: var(--arb-esp-2);
  height: 2rem;
  padding: 0 var(--arb-esp-2) 0 var(--arb-esp-3);
  background: var(--arb-bg-afundado);
  border: 1px solid var(--arb-borda-sutil);
  border-radius: var(--arb-raio-md);
  color: var(--arb-fg-mudo);
  font-family: var(--arb-font-legibilidade);
  font-size: var(--arb-tam-body-sm);
  cursor: pointer;
  min-width: 13rem;
}
.arb-salto__gatilho:hover {
  border-color: var(--arb-borda-forte);
  color: var(--arb-fg);
}
.arb-salto__gatilho span {
  flex: 1;
  text-align: left;
}
.arb-salto__gatilho kbd {
  font-family: var(--arb-font-detalhe);
  font-size: var(--arb-tam-mono-xs);
  color: var(--arb-fg-sutil);
  border: 1px solid var(--arb-borda-sutil);
  border-radius: var(--arb-raio-xs);
  padding: 0 0.35em;
  background: var(--arb-bg-superficie);
}
.arb-salto {
  position: fixed;
  inset: 12vh auto auto 50%;
  transform: translateX(-50%);
  width: min(34rem, calc(100vw - 2rem));
  max-height: 76vh;
  padding: 0;
  background: var(--arb-bg-elevado);
  border: 1px solid var(--arb-borda);
  border-radius: var(--arb-raio-lg);
  box-shadow: var(--arb-sombra-4);
  color: var(--arb-fg);
  z-index: var(--arb-z-modal);
  overflow: hidden;
}
.arb-salto__campo {
  display: flex;
  align-items: center;
  gap: var(--arb-esp-2);
  padding: var(--arb-esp-2) var(--arb-esp-3);
  border-bottom: 1px solid var(--arb-borda-sutil);
  color: var(--arb-fg-mudo);
}
.arb-salto__campo .arb-entrada {
  border: 0;
  background: none;
  padding: 0;
  height: 2.25rem;
  font-size: var(--arb-tam-body-lg);
}
.arb-salto__campo .arb-entrada:focus {
  box-shadow: none;
  outline: none;
}
.arb-salto__lista {
  list-style: none;
  margin: 0;
  padding: var(--arb-esp-1);
  max-height: 22rem;
  overflow-y: auto;
}
.arb-salto__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--arb-esp-3);
  padding: 0 var(--arb-esp-3);
  height: 2.25rem;
  border-radius: var(--arb-raio-sm);
  color: var(--arb-fg);
  font-size: var(--arb-tam-body-sm);
  text-decoration: none;
}
.arb-salto__item.is-ativo,
.arb-salto__item:hover {
  background: var(--arb-marca-sutil-bg);
  color: var(--arb-marca-sutil-fg);
  text-decoration: none;
}
.arb-salto__vazio {
  padding: var(--arb-esp-4) var(--arb-esp-3);
  color: var(--arb-fg-mudo);
  font-size: var(--arb-tam-body-sm);
}

/* O véu que fecha ao clicar fora — do salto, da gaveta de menu e da confirmação. */
.arb-veu {
  position: fixed;
  inset: 0;
  z-index: var(--arb-z-overlay);
  background: var(--arb-bg-overlay);
  border: 0;
  padding: 0;
  cursor: default;
  backdrop-filter: blur(2px);
}

/* A gaveta com o menu, para onde a lateral não cabe. É a mesma lateral, solta da grade. */
.arb-gaveta-menu {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(16rem, 84vw);
  background: var(--arb-lat-bg);
  color: var(--arb-lat-fg);
  z-index: var(--arb-z-modal);
  overflow-y: auto;
  box-shadow: var(--arb-sombra-4);
  animation: arb-gaveta-entra var(--arb-dur-padrao) var(--arb-ease-saida);
}
@keyframes arb-gaveta-entra {
  from {
    transform: translateX(-100%);
  }
}
.arb-gaveta-menu__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--arb-app-topo, 3.5rem);
  padding: 0 var(--arb-esp-3) 0 var(--arb-esp-4);
  border-bottom: 1px solid var(--arb-lat-fio);
}
.arb-gaveta-menu__topo .arb-rotulo {
  color: var(--arb-lat-secao);
}
.arb-gaveta-menu__topo .arb-btn {
  color: var(--arb-lat-fg-mudo);
}
/* Dentro da gaveta a lateral nunca está recolhida, mesmo que a preferência diga que sim. */
.arb-gaveta-menu .arb-lateral__secao .arb-rotulo,
.arb-gaveta-menu .arb-menu-lateral__texto,
.arb-gaveta-menu .arb-menu-lateral__conta {
  display: inline-flex;
}
.arb-gaveta-menu .arb-lateral__secao::after {
  display: none;
}
.arb-gaveta-menu .arb-menu-lateral__item {
  justify-content: flex-start;
  gap: var(--arb-esp-3);
  padding: 0 var(--arb-esp-3) 0 calc(var(--arb-esp-3) - 2px);
}
.arb-sem-rolagem {
  overflow: hidden;
}

/* ==========================================================================================
   3. Progresso de navegação
   ========================================================================================== */

/*
 * A faixa fina no topo, do primeiro clique até a página nova pintar. Ela não mede nada: navegação
 * por `<a>` de verdade não tem progresso conhecido, e fingir uma porcentagem seria mentir. O que ela
 * diz é "estou indo".
 */
.arb-progresso-rota {
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 0;
  z-index: var(--arb-z-toast);
  background: var(--arb-marca-fill);
  opacity: 0;
  pointer-events: none;
}
.arb-progresso-rota.is-ativo {
  opacity: 1;
  animation: arb-progresso-rota 12s var(--arb-ease-saida) forwards;
}
@keyframes arb-progresso-rota {
  0% {
    width: 0;
  }
  12% {
    width: 32%;
  }
  40% {
    width: 58%;
  }
  100% {
    width: 82%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .arb-progresso-rota.is-ativo {
    animation: none;
    width: 40%;
  }
}

/* ==========================================================================================
   4. Cabeçalho de página e ritmo vertical
   ========================================================================================== */

/*
 * O cabeçalho de toda tela: contexto em rótulo técnico, título na face de destaque, o resumo de uma
 * linha e as ações primárias à direita, sobre um fio. Ele não é cartão — fica direto sobre a bancada,
 * e é o fio embaixo que o separa do que vem depois. O título sobe um degrau (headline-sm) porque é a
 * única linha da tela que se lê antes de qualquer número.
 */
.arb-cabeca-pg {
  gap: var(--arb-esp-3);
  padding-bottom: var(--arb-esp-4);
  border-bottom: 1px solid var(--arb-borda);
}
.arb-cabeca-pg .arb-titulo {
  font-size: var(--arb-tam-headline-sm);
  font-weight: 700;
  letter-spacing: var(--arb-track-display);
  line-height: 1.08;
  text-wrap: balance;
}
.arb-cabeca-pg__resumo {
  margin: 0;
  max-width: 68ch;
  font-size: var(--arb-tam-body-sm);
  color: var(--arb-fg-mudo);
  text-wrap: pretty;
}
.arb-cabeca-pg-linha {
  align-items: flex-end;
}
.arb-cabeca-pg-linha > .arb-cluster {
  padding-bottom: 2px;
}
/*
 * Cabeçalho seguido de subnavegação: as abas do módulo pegam o fio do cabeçalho, em vez de
 * desenhar um segundo fio logo abaixo.
 */
.arb-principal > .arb-cabeca-pg:has(+ .arb-abas) {
  border-bottom: 0;
  padding-bottom: 0;
}
.arb-principal > .arb-cabeca-pg + .arb-abas {
  margin-top: calc(var(--arb-esp-5) * -1 + var(--arb-esp-2));
}

/* ==========================================================================================
   5. Listagem: barra de filtro, tabela e rodapé
   ========================================================================================== */

/*
 * Os controles do sistema são `width: 100%` — certo dentro de um campo de formulário, errado
 * dentro de uma barra: como item flex, cada um tomaria a linha inteira, e a tela abriria com
 * cinco linhas de filtro antes do primeiro dado.
 */
.arb-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--arb-esp-2);
}
.arb-filtros__campos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--arb-esp-2);
  flex: 1 1 auto;
  min-width: 0;
}
.arb-filtros__acoes {
  display: flex;
  align-items: center;
  gap: var(--arb-esp-1);
  flex: 0 0 auto;
}
.arb-filtros__campos > .arb-entrada,
.arb-filtros__campos > select.arb-entrada,
.arb-linha > .arb-entrada,
.arb-linha > select.arb-entrada {
  width: auto;
  min-width: 9rem;
  max-width: 18rem;
}
/* O rótulo de um filtro vem colado ao controle — não é campo de formulário. */
.arb-filtros__campos .arb-campo {
  flex-direction: row;
  align-items: center;
  gap: var(--arb-esp-2);
}

/* A busca é uma linha só: lupa, campo e botão. */
.arb-busca {
  display: flex;
  align-items: center;
  gap: var(--arb-esp-2);
  position: relative;
}
.arb-busca .arb-entrada {
  flex: 1 1 12rem;
  width: auto;
  min-width: 0;
}
.arb-busca > svg {
  flex: 0 0 auto;
  color: var(--arb-fg-mudo);
}

.arb-tabela-barra {
  display: flex;
  align-items: center;
  gap: var(--arb-esp-2);
  padding: var(--arb-esp-3) var(--arb-esp-4);
  border-bottom: 1px solid var(--arb-borda-sutil);
  flex-wrap: wrap;
}
/* Abas dentro da barra da tabela: o fio delas é o da barra, não um segundo. */
.arb-tabela-barra > .arb-abas {
  border-bottom: 0;
  margin-bottom: calc(var(--arb-esp-3) * -1);
}
.arb-tabela-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--arb-esp-3);
  flex-wrap: wrap;
}

/*
 * **A rolagem é do corpo da tabela, não da página.** O cabeçalho é `sticky` e só gruda se o
 * container rolar: com a página rolando, quem percorre uma lista de trezentos compromissos
 * perde os títulos das colunas na terceira linha. Tabela curta não chega ao teto e fica como
 * sempre foi.
 */
.arb-tabela-rolagem {
  overflow: auto;
  max-height: var(--arb-tabela-altura, calc(100dvh - 18rem));
  min-height: 0;
  scrollbar-width: thin;
  /* Sombra nas pontas que só aparece quando há coluna fora da vista — o aviso de que rola. */
  background:
    linear-gradient(to right, var(--arb-bg-superficie) 30%, transparent) left center / 2rem 100%
    no-repeat,
    linear-gradient(to left, var(--arb-bg-superficie) 30%, transparent) right center / 2rem 100%
    no-repeat,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--arb-fg) 14%, transparent), transparent)
    left center / 0.75rem 100% no-repeat,
    radial-gradient(
      farthest-side at 100% 50%,
      color-mix(in srgb, var(--arb-fg) 14%, transparent),
      transparent
    )
    right center / 0.75rem 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.arb-tabela-caixa--alta {
  --arb-tabela-altura: calc(100dvh - 10rem);
}
.arb-tabela thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--arb-bg-sutil);
  box-shadow: inset 0 -1px 0 var(--arb-borda);
}
/* Dentro de um cartão, a caixa da tabela não desenha borda nem raio próprios: o cartão já os tem. */
.arb-card-midia > .arb-tabela-caixa {
  border: 0;
  border-radius: 0;
}
/*
 * A margem negativa do kit sangra a mídia até a borda de cima do cartão — o que só vale quando ela é a
 * primeira coisa dele. Depois de um `CartaoCabecalho` ela subia 24px por cima do cabeçalho, e a linha de
 * títulos da tabela cobria o subtítulo do cartão. Aqui ela continua sangrando dos lados, e não sobe.
 */
.arb-card-midia:not(:first-child) {
  margin-top: 0;
  border-radius: 0;
}

/*
 * A coluna de ações fica fixa à direita: numa tabela de doze colunas ela mora atrás da rolagem
 * horizontal, e esconder botão de linha até o hover não existe para teclado nem para dedo.
 */
.arb-tabela .arb-col-acoes {
  position: sticky;
  right: 0;
  z-index: 1;
  width: 1%;
  white-space: nowrap;
  background: var(--arb-bg-superficie);
  box-shadow: inset 1px 0 0 var(--arb-borda-sutil);
}
.arb-tabela thead th.arb-col-acoes {
  background: var(--arb-bg-sutil);
  z-index: 3;
}
.arb-tabela tbody tr:hover .arb-col-acoes {
  background: var(--arb-bg-hover);
}
.arb-tabela .arb-col-acoes > .arb-cluster {
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.arb-tabela .arb-col-acoes .arb-btn {
  white-space: nowrap;
}

/*
 * O menu das ações que não cabem na linha — mesmo painel flutuante do seletor de módulo
 * (`.arb-modulo__lista`), preso à célula de ações em vez da lateral. A célula é `position: sticky`
 * (regra acima) e cria o próprio contexto de empilhamento: um `z-index` alto só no painel não basta
 * enquanto o cabeçalho fixo (`.arb-tabela thead th`) tiver `z-index` maior no MESMO contexto — por isso
 * o `:has()` também sobe o da célula, e só enquanto o menu dela está aberto.
 */
.arb-acoes-menu {
  position: relative;
  display: inline-block;
}
/* Mesmo par defensivo de `.arb-modulo__gatilho` e `.arb-acordeao summary`: o marcador nativo do
   <summary> some em todo motor, não só nos que já respeitam o `display` trocado pelo `.arb-btn`. */
.arb-acoes-menu > summary {
  list-style: none;
}
.arb-acoes-menu > summary::-webkit-details-marker {
  display: none;
}
.arb-tabela .arb-col-acoes:has(> .arb-acoes-menu[open]) {
  z-index: var(--arb-z-sticky);
}
.arb-acoes-menu__lista {
  position: absolute;
  z-index: var(--arb-z-sticky);
  top: calc(100% + var(--arb-esp-1));
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
  padding: var(--arb-esp-1);
  gap: 1px;
  background: var(--arb-bg-elevado);
  color: var(--arb-fg);
  border: 1px solid var(--arb-borda);
  border-radius: var(--arb-raio-md);
  box-shadow: var(--arb-sombra-4);
}
.arb-acoes-menu__lista .arb-form-inline {
  width: 100%;
}
.arb-acoes-menu__lista .arb-btn {
  width: 100%;
  justify-content: flex-start;
}
/* O `<summary>` estilizado como botão não pode perder o anel de foco (regra 3: foco nunca é removido). */
.arb-acoes-menu > summary:focus-visible {
  outline: 2px solid var(--arb-marca);
  outline-offset: 2px;
}
/*
 * `.arb-tabela-rolagem` corta (`overflow: auto`) o que sai da área visível — é o preço da rolagem do
 * corpo, que fica. Numa lista curta (1-2 linhas, o caso comum de /faturamento/medicoes filtrada), o
 * container nem chega perto do teto de altura: ele encolhe para caber só o conteúdo, e não sobra folga
 * nem acima nem abaixo do gatilho — testado no navegador com 1 e 2 linhas, o painel saía cortado dos
 * dois lados. Em vez de escolher lado por uma pista de DOM que não sabe onde está a rolagem, o
 * container ganha a MESMA altura do teto normal enquanto qualquer menu dele está aberto — quem já bate
 * o teto (lista longa) não muda de tamanho (o `min-height` empata com o `max-height` de sempre); quem
 * não bate (lista curta) passa a ter a folga toda abaixo do gatilho.
 */
.arb-tabela-rolagem:has(.arb-acoes-menu[open]) {
  min-height: var(--arb-tabela-altura, calc(100dvh - 18rem));
}
/*
 * A folga do `min-height` acima nasce ABAIXO do conteúdo (que continua ancorado no topo) — então só
 * faz sentido abrir para cima quando a linha também não está entre as primeiras, senão o painel troca
 * de corte: sai por cima em vez de por baixo. `:not(:nth-of-type(-n+3))` garante isso — numa lista de
 * até 6 linhas nenhuma conta como "das últimas 3 e não das 3 primeiras" ao mesmo tempo, e todas ficam
 * com o `min-height` sozinho. Numa lista rolada até o fim (o caso que sobra sem solução completa em CSS
 * puro: não há como saber, só na folha de estilo, se sobra espaço numa posição de rolagem que ainda vai
 * mudar), as últimas linhas seguem abrindo para cima.
 */
.arb-tabela tbody tr:nth-last-of-type(-n + 3):not(:nth-of-type(-n + 3)) .arb-acoes-menu__lista {
  top: auto;
  bottom: calc(100% + var(--arb-esp-1));
}
/* Linha sob o ponteiro: com doze colunas o olho perde a linha no meio do caminho. */
.arb-tabela tbody tr:hover td {
  background: var(--arb-bg-hover);
}
.arb-tabela--zebra tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--arb-bg-sutil) 55%, transparent);
}
/* A primeira coluna também fixa: sem ela, rolar é perder de quem é a linha. */
.arb-tabela--ancorada tbody td:first-child,
.arb-tabela--ancorada thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--arb-bg-superficie);
  box-shadow: inset -1px 0 0 var(--arb-borda-sutil);
}
.arb-tabela--ancorada thead th:first-child {
  background: var(--arb-bg-sutil);
  z-index: 3;
}
/* Célula com duas linhas (descrição + código) é o padrão das listas. */
.arb-tabela td .arb-pilha--xs {
  gap: 0.1rem;
}
.arb-tabela .arb-td-mono {
  font-family: var(--arb-font-detalhe);
  font-size: var(--arb-tam-mono-xs);
  color: var(--arb-fg-mudo);
}

/* Densidade da linha: o sistema tem uma só; listagem longa e conferência pedem as outras duas. */
.arb-tabela--compacta th,
.arb-tabela--compacta td {
  padding-block: var(--arb-esp-2);
}
.arb-tabela--confortavel th,
.arb-tabela--confortavel td {
  padding-block: var(--arb-esp-4);
}
/*
 * A densidade escolhida pela pessoa (menu da sessão) ganha da que a tela pediu: o carimbo no `<html>`
 * vem do script do `<head>`, antes da primeira pintura, e a especificidade maior é de propósito.
 */
:root[data-densidade="compacta"] .arb-tabela th,
:root[data-densidade="compacta"] .arb-tabela td {
  padding-block: var(--arb-esp-2);
}
:root[data-densidade="confortavel"] .arb-tabela th,
:root[data-densidade="confortavel"] .arb-tabela td {
  padding-block: var(--arb-esp-4);
}
.arb-tabela tfoot td {
  background: var(--arb-bg-sutil);
  border-top: 1px solid var(--arb-borda);
  font-weight: 600;
}

/*
 * **Célula não quebra; coluna declarada como texto, sim.** Uma descrição como "Cabos, eletrodutos e
 * disjuntores — NF 118842" em cinco linhas faz a tela que mostrava vinte lançamentos mostrar quatro.
 * Quem precisa quebrar declara `quebra: true` na coluna.
 */
.arb-tabela th,
.arb-tabela td {
  white-space: nowrap;
}
.arb-tabela .arb-td-quebra {
  white-space: normal;
  min-width: 14rem;
}

/*
 * Link dentro de tabela não é link de texto corrido: o sublinhado aparece no hover e no foco, que é
 * quando ele informa alguma coisa.
 */
.arb-tabela a {
  color: inherit;
  text-decoration: none;
}
.arb-tabela a:hover,
.arb-tabela a:focus-visible {
  color: var(--arb-marca);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* O estado vazio ganha um ícone discreto acima do título — o sinal de que a caixa está vazia de
   propósito, e não em branco por erro. */
.arb-vazio > svg {
  color: var(--arb-fg-sutil);
}

/*
 * A ficha de um registro. O sistema resolve `.arb-dl` como grade automática de 11rem, que é o
 * certo para um painel; a ficha de compromisso e o detalhe de medição pedem contagem fixa de
 * colunas, e a lista longa pede uma só.
 */
.arb-dl--1 {
  grid-template-columns: minmax(0, 1fr);
}
.arb-dl--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.arb-dl--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.arb-dl dd {
  overflow-wrap: anywhere;
}

/* ==========================================================================================
   6. Abas que navegam
   ========================================================================================== */

/*
 * O sistema desenha `.arb-abas > button`, e as abas daqui são `<a>`: aba que troca de página é
 * link, não `role="tab"` — prometer painel na mesma página a um leitor de tela e depois navegar
 * é pior do que não prometer nada. Mesmo desenho, elemento certo.
 */
.arb-abas > a {
  display: inline-flex;
  align-items: center;
  gap: var(--arb-esp-2);
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 0 var(--arb-esp-3);
  border-bottom: 2px solid transparent;
  font-family: var(--arb-nav-item-fonte);
  font-size: var(--arb-tam-mono-xs);
  letter-spacing: var(--arb-nav-item-track);
  text-transform: uppercase;
  color: var(--arb-nav-item-fg);
  text-decoration: none;
  transition: color var(--arb-dur-rapido) var(--arb-ease-padrao);
}
.arb-abas > a:hover {
  color: var(--arb-fg);
  text-decoration: none;
}
.arb-abas > a[aria-current="page"] {
  color: var(--arb-fg);
  font-weight: 600;
  border-bottom-color: var(--arb-marca);
}
/* `overflow-x: auto` torna o eixo Y `auto` também, e a sobra de sub-pixel da borda inferior
   desenha uma seta de rolagem vertical em cima de cada barra de abas. */
.arb-abas {
  overflow-y: hidden;
  align-items: flex-end;
  scrollbar-width: thin;
}

/* ==========================================================================================
   7. Utilitários que o app repete e o manual não nomeia
   ========================================================================================== */

.arb-pilha--xs {
  gap: var(--arb-esp-1);
}
.arb-pilha--sm {
  gap: var(--arb-esp-2);
}
.arb-pilha--lg {
  gap: var(--arb-esp-6);
}
/* O irmão horizontal da pilha: etiquetas e botões pequenos que devem quebrar linha. */
.arb-cluster {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--arb-esp-2);
}
.arb-cluster--xs {
  gap: var(--arb-esp-1);
}
.arb-linha--entre {
  justify-content: space-between;
}
/*
 * Espaço acima de um bloco. Dentro de `.arb-principal` os blocos já se separam por `gap`; estas
 * classes servem ao que fica **dentro** de um cartão ou de um formulário e precisa de um respiro
 * que o pai não dá.
 */
.arb-espaco-acima {
  margin-top: var(--arb-esp-4);
}
.arb-espaco-acima--xs {
  margin-top: var(--arb-esp-2);
}
.arb-espaco-acima--sm {
  margin-top: var(--arb-esp-3);
}
.arb-espaco-acima--lg {
  margin-top: var(--arb-esp-6);
}
/* Dentro da área principal o `gap` já separa: a margem viraria espaço duplo. */
.arb-principal > .arb-espaco-acima,
.arb-principal > .arb-espaco-acima--xs,
.arb-principal > .arb-espaco-acima--sm,
.arb-principal > .arb-espaco-acima--lg {
  margin-top: 0;
}
.arb-sem-margem {
  margin: 0;
}
.arb-lista-nua {
  list-style: none;
  padding: 0;
  margin: 0;
}
.arb-fg-mudo {
  color: var(--arb-fg-mudo);
}
.arb-fg-sutil {
  color: var(--arb-fg-sutil);
}
.arb-caption {
  font-size: var(--arb-tam-caption);
}
.arb-txt-sm {
  font-size: var(--arb-tam-body-sm);
}
.arb-txt-dir {
  text-align: right;
}
.arb-txt-centro {
  text-align: center;
}
.arb-num {
  font-variant-numeric: tabular-nums lining-nums;
}
/* Valor técnico em linha corrida, sem a caixa do `.arb-mono` do sistema. */
.arb-mono-nu {
  font-family: var(--arb-font-detalhe);
  font-variant-numeric: tabular-nums;
}
.arb-truncar {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arb-rolagem-x {
  overflow-x: auto;
}
.arb-largura-total {
  width: 100%;
}
.arb-medida-texto {
  max-width: 70ch;
}
.arb-respiro {
  padding: var(--arb-esp-4);
}
.arb-espaco-abaixo--sm {
  margin-bottom: var(--arb-esp-3);
}
.arb-quebra-qualquer {
  overflow-wrap: anywhere;
}
.arb-altura-total {
  height: 100%;
}
.arb-so-estreito {
  display: none;
}
/* Um link que herda a cor do texto — para envolver um cartão ou uma linha inteira. */
.arb-link-nu {
  color: inherit;
  text-decoration: none;
}
.arb-link-nu:hover {
  text-decoration: none;
}

/* ==========================================================================================
   8. Formulário e diálogo
   ========================================================================================== */

/* Grade de formulário em 12 colunas — a ficha de compromisso tem trinta campos. */
.arb-form-grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--arb-esp-4);
}
.arb-form-grade > .arb-campo {
  grid-column: span 12;
}
.arb-campo--3 {
  grid-column: span 3;
}
.arb-campo--4 {
  grid-column: span 4;
}
.arb-campo--6 {
  grid-column: span 6;
}
.arb-campo--8 {
  grid-column: span 8;
}
@media (max-width: 52rem) {
  .arb-campo--3,
  .arb-campo--4,
  .arb-campo--6,
  .arb-campo--8 {
    grid-column: span 12;
  }
}
/* Prefixo e sufixo fixos: `R$` antes do valor, `%` depois da alíquota. */
.arb-grupo-entrada {
  display: flex;
  align-items: stretch;
}
.arb-grupo-entrada > .arb-entrada {
  border-radius: 0;
  min-width: 0;
}
.arb-grupo-entrada > :first-child {
  border-start-start-radius: var(--arb-raio-md);
  border-end-start-radius: var(--arb-raio-md);
}
.arb-grupo-entrada > :last-child {
  border-start-end-radius: var(--arb-raio-md);
  border-end-end-radius: var(--arb-raio-md);
}
.arb-grupo-entrada__adorno {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--arb-esp-3);
  background: var(--arb-bg-afundado);
  border: 1px solid var(--arb-borda);
  color: var(--arb-fg-mudo);
  font-family: var(--arb-font-detalhe);
  font-size: var(--arb-tam-mono-xs);
  white-space: nowrap;
}
.arb-grupo-entrada__adorno + .arb-entrada {
  border-inline-start: 0;
}
.arb-entrada + .arb-grupo-entrada__adorno {
  border-inline-start: 0;
}
.arb-entrada--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.arb-entrada--mono {
  font-family: var(--arb-font-detalhe);
}
.arb-entrada--sm {
  height: 2rem;
  font-size: var(--arb-tam-body-sm);
}
/* O formulário de uma linha (ação de tabela) não pode abrir bloco. */
.arb-form-inline {
  display: inline;
}

/*
 * O diálogo aberto pela URL é `<dialog open>` renderizado, não `showModal()`: a URL é que
 * decide se ele existe. Sem `position`, o elemento fica com o `absolute` da folha do navegador
 * e cai no fluxo do documento — a tela escurece e o formulário some abaixo da dobra.
 */
.arb-dialogo {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-height: min(calc(100dvh - 2 * var(--arb-esp-6)), 52rem);
  width: calc(100vw - 2 * var(--arb-esp-4));
  color: var(--arb-fg);
  /* Aberto por renderização (`open`), e não por `showModal()`: fica fora da camada superior, e o `.arb-veu`
     fixo que vem antes dele o cobria inteiro. */
  z-index: var(--arb-z-modal);
}
/*
 * O `max-height` acima só corta se alguém rolar por dentro. Bloco com `overflow` visível não rola, e o
 * `overflow-y: auto` do corpo não valia sem altura que o limitasse: o formulário alto passava da janela e o
 * botão de enviar ficava fora dela, num elemento fixo — inalcançável (achado #4 da AT-2c, "Criar ticket").
 * Coluna flexível: a cabeça fica, o corpo encolhe (`min-height: 0`) e rola, as ações grudam embaixo.
 * `[open]`, porque `display` sem ele sobreporia o `display: none` do `<dialog>` fechado.
 */
.arb-dialogo[open] {
  display: flex;
  flex-direction: column;
}
.arb-dialogo__corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--arb-esp-6) var(--arb-esp-5);
}
/* Com formulário longo, o botão que confirma fica sempre alcançável. */
.arb-dialogo-acoes {
  position: sticky;
  bottom: 0;
  background: var(--arb-bg-elevado);
}
/*
 * O diálogo do sistema é de confirmação: uma pergunta curta e dois botões. O desta aplicação é de
 * **escrita** — a ficha de compromisso tem trinta campos —, e por isso ele ganha cabeça própria,
 * corpo que rola e uma largura maior.
 */
.arb-dialogo--largo {
  max-width: 48rem;
}
.arb-dialogo-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--arb-esp-3);
  padding: var(--arb-esp-6) var(--arb-esp-6) var(--arb-esp-3);
}
.arb-dialogo--largo,
.arb-dialogo:has(.arb-dialogo__corpo) {
  padding: 0;
}
.arb-dialogo--estreito .arb-dialogo-acoes {
  padding: var(--arb-esp-4) var(--arb-esp-6) var(--arb-esp-6);
  margin-top: 0;
}
/* O título do aviso: o sistema desenha o corpo, e o `strong` dele é o que carrega o peso. */
.arb-toast-tit {
  font-weight: 600;
  font-size: var(--arb-tam-body-sm);
  color: var(--arb-fg);
}
.arb-toast p {
  margin: 0;
  font-size: var(--arb-tam-caption);
  color: var(--arb-fg-mudo);
}

/* ==========================================================================================
   9. Indicadores, listas de valores e cartões de módulo
   ========================================================================================== */

/*
 * A escala do número olha para a **largura do cartão**, não para a da janela: seis indicadores
 * numa faixa dão 180px cada, e a mesma janela com três dá 380px. Medir em `vw` acerta um caso e
 * erra o outro — e valor monetário quebrado no meio é valor lido errado.
 */
.arb-kpi {
  container-type: inline-size;
  padding: var(--arb-esp-4) var(--arb-esp-5);
  justify-content: space-between;
}
.arb-kpi-val {
  font-size: clamp(var(--arb-tam-title-sm), 9.5cqi, var(--arb-tam-headline));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arb-kpis--estreito {
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
}
.arb-kpis--largo {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
/*
 * O tom do indicador: uma faixa na borda de partida. Ele nunca viaja sozinho — quem o usa também
 * muda o ícone da variação, porque cor não informa quem não a distingue.
 */
.arb-kpi--marca {
  border-inline-start: 3px solid var(--arb-marca-fill);
}
.arb-kpi--alerta {
  border-inline-start: 3px solid var(--arb-alerta-borda);
}
.arb-kpi--erro {
  border-inline-start: 3px solid var(--arb-erro-borda);
}
.arb-kpi-var--sobe {
  color: var(--arb-sucesso-fg);
}
.arb-kpi-var--desce {
  color: var(--arb-erro-fg);
}

/*
 * **O indicador-herói: exatamente um por tela.** É o número que responde à pergunta do título, e
 * por isso ele é o único lugar em que a marca aparece como superfície — a placa com o degradê
 * assinatura (Ferro Fundido → Verde Prumo), chanfro no canto e o grafismo Arbolt Lines quase
 * invisível ao fundo. Os outros indicadores viram apoio: mesma tipografia, sem placa.
 *
 * `data-tema="escuro"` no elemento faz o texto, o rótulo e a seta resolverem os papéis do tema
 * escuro por cascata — não há uma cor escrita à mão aqui. O número é o `.arb-heroi-val` do
 * sistema, na face de legibilidade, com algarismo proporcional (o tabular deixa "121" frouxo em
 * corpo grande).
 */
.arb-kpi--heroi {
  border: 0;
  box-shadow: none;
  background-image: var(--arb-gradiente-prumo);
  background-color: var(--arb-bg-afundado);
  --arb-chanfro-atual: var(--arb-chanfro-md);
  clip-path: polygon(
    0 0,
    calc(100% - var(--arb-chanfro-atual)) 0,
    100% var(--arb-chanfro-atual),
    100% 100%,
    0 100%
  );
  padding: var(--arb-esp-5) var(--arb-esp-6);
  gap: var(--arb-esp-4);
  overflow: hidden;
  isolation: isolate;
}
.arb-kpi--heroi::after {
  content: "";
  position: absolute;
  right: -6rem;
  bottom: -9rem;
  width: 22rem;
  height: 22rem;
  background: url("/design-system/grafismos/lines__aco-polido.svg") center / contain no-repeat;
  opacity: 0.1;
  pointer-events: none;
  z-index: -1;
}
.arb-kpi--heroi .arb-kpi-rot {
  color: var(--arb-marca);
}
.arb-kpi--heroi .arb-kpi-nota {
  color: var(--arb-fg-mudo);
}
.arb-kpi--heroi .arb-kpi-val {
  font-size: clamp(var(--arb-tam-headline), 11cqi, 3.75rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  color: var(--arb-fg);
}
.arb-kpi--heroi .arb-kpi-var {
  font-size: var(--arb-tam-body-sm);
}
.arb-kpi--heroi .arb-kpi-var--sobe,
.arb-kpi--heroi .arb-kpi-var--desce {
  color: var(--arb-fg);
}
.arb-kpi--heroi .arb-kpi-un {
  color: var(--arb-fg-mudo);
}
/*
 * A faixa do painel: a placa à esquerda com 3/5 da largura e os indicadores de apoio em grade de
 * duas colunas à direita. Em tela estreita empilha, com a placa por cima.
 */
.arb-painel-indicadores {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--arb-esp-4);
  align-items: stretch;
}
.arb-painel-indicadores__apoio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--arb-esp-4);
}
.arb-painel-indicadores__apoio > .arb-kpi {
  padding: var(--arb-esp-3) var(--arb-esp-4);
}
.arb-painel-indicadores__apoio > .arb-kpi .arb-kpi-val {
  font-size: clamp(var(--arb-tam-title-sm), 10cqi, var(--arb-tam-title));
}
/* Cartões de índice de módulo e as grades de cartões em geral. */
.arb-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--arb-esp-4);
}

/*
 * A lista de rótulo e valor — o que o painel, a ficha e o relatório repetem: uma linha por item,
 * rótulo à esquerda com o contexto em nota, valor em mono à direita, fio entre as linhas. Não é
 * tabela porque não tem colunas a comparar; é uma lista que se lê de cima a baixo.
 */
.arb-lista-valores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.arb-lista-valores > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--arb-esp-4);
  padding: var(--arb-esp-3) 0;
  border-bottom: 1px solid var(--arb-borda-sutil);
  font-size: var(--arb-tam-body-sm);
}
.arb-lista-valores > li:first-child {
  padding-top: 0;
}
.arb-lista-valores > li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.arb-lista-valores__rotulo {
  min-width: 0;
  color: var(--arb-fg);
}
.arb-lista-valores__contexto {
  font-size: var(--arb-tam-caption);
  color: var(--arb-fg-mudo);
}
.arb-lista-valores__valor {
  font-family: var(--arb-font-detalhe);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
  color: var(--arb-fg);
}
.arb-lista-valores__valor--sucesso {
  color: var(--arb-sucesso-fg);
}
.arb-lista-valores__valor--alerta {
  color: var(--arb-alerta-fg);
}
.arb-lista-valores__valor--erro {
  color: var(--arb-erro-fg);
}
/* O cabeçalho de um cartão que é um quadro do painel: fio embaixo, ação à direita. */
.arb-card--quadro {
  padding: 0;
  gap: 0;
}
.arb-card--quadro > .arb-card-cabeca {
  padding: var(--arb-esp-4) var(--arb-esp-5);
  border-bottom: 1px solid var(--arb-borda-sutil);
  background: var(--arb-bg-sutil);
  border-radius: calc(var(--arb-card-raio) - 1px) calc(var(--arb-card-raio) - 1px) 0 0;
  align-items: center;
}
.arb-card--quadro > .arb-card-cabeca .arb-titulo--sm {
  font-size: var(--arb-tam-body);
}
.arb-card--quadro > .arb-card-corpo {
  padding: var(--arb-esp-4) var(--arb-esp-5);
}
.arb-card--quadro > .arb-card-midia {
  margin: 0;
  border-radius: 0 0 calc(var(--arb-card-raio) - 1px) calc(var(--arb-card-raio) - 1px);
}

/*
 * As ressalvas — a base dos números. Quietas mas presentes: cartão afundado com um fio neutro na
 * partida e o ícone de informação. Não é alerta: nada está errado, é o que ficou fora do número.
 */
.arb-ressalvas {
  display: flex;
  gap: var(--arb-esp-3);
  align-items: flex-start;
  padding: var(--arb-esp-4) var(--arb-esp-5);
  background: var(--arb-bg-sutil);
  border: 1px solid var(--arb-borda-sutil);
  border-inline-start: 3px solid var(--arb-borda-forte);
  border-radius: var(--arb-raio-md);
}
.arb-ressalvas > svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--arb-fg-mudo);
}
.arb-ressalvas__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--arb-esp-1);
  min-width: 0;
}
.arb-ressalvas__corpo > p {
  margin: 0;
  font-size: var(--arb-tam-caption);
  color: var(--arb-fg-mudo);
  line-height: 1.55;
}

/*
 * O cartão de um módulo na página-índice: ícone do módulo, nome, a linha que diz o que a tela
 * resolve e a seta. O cartão inteiro é o link. No hover a borda vira marca — é o único movimento.
 */
.arb-cartao-modulo {
  display: flex;
  gap: var(--arb-esp-4);
  align-items: flex-start;
  height: 100%;
  padding: var(--arb-esp-5);
  background: var(--arb-card-bg);
  border: 1px solid var(--arb-card-borda);
  border-radius: var(--arb-card-raio);
  box-shadow: var(--arb-card-sombra);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--arb-dur-rapido) var(--arb-ease-padrao);
}
.arb-cartao-modulo:hover {
  border-color: var(--arb-borda-marca);
  text-decoration: none;
}
.arb-cartao-modulo__icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--arb-raio-md);
  background: var(--arb-marca-sutil-bg);
  color: var(--arb-marca-sutil-fg);
}
.arb-cartao-modulo__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--arb-esp-1);
  min-width: 0;
  flex: 1;
}
.arb-cartao-modulo__titulo {
  margin: 0;
  font-family: var(--arb-font-destaque);
  font-weight: 700;
  font-size: var(--arb-tam-body);
  letter-spacing: var(--arb-track-titulo);
  color: var(--arb-fg);
}
.arb-cartao-modulo__resumo {
  margin: 0;
  font-size: var(--arb-tam-body-sm);
  color: var(--arb-fg-mudo);
  text-wrap: pretty;
}
.arb-cartao-modulo__seta {
  flex: 0 0 auto;
  color: var(--arb-fg-sutil);
  margin-top: 2px;
  transition: transform var(--arb-dur-rapido) var(--arb-ease-padrao), color var(--arb-dur-rapido);
}
.arb-cartao-modulo:hover .arb-cartao-modulo__seta {
  color: var(--arb-marca);
  transform: translateX(3px);
}

/* Os chips de perfil do painel: o que está aberto em sólido, os outros em contorno. */
.arb-perfis {
  display: flex;
  gap: var(--arb-esp-2);
  flex-wrap: wrap;
}
.arb-perfis > a {
  text-decoration: none;
}
.arb-perfis > a:hover .arb-badge {
  border-color: var(--arb-borda-marca);
  color: var(--arb-marca);
}

/* Gráfico em linha: legenda antes do desenho, e o desenho ocupa a largura do cartão. */
.arb-graf-tela > svg {
  height: auto;
}
.arb-graf-tela text {
  font-family: var(--arb-font-detalhe);
  fill: var(--arb-grafico-eixo-fg);
}
/* A chave de uma série em linha na legenda: um traço de 2px, não um retângulo. */
.arb-chave--linha {
  height: 0;
  border-radius: 0;
  border-top: 2px solid var(--arb-serie-1);
}

/* ==========================================================================================
   10. Esqueleto de carregamento
   ========================================================================================== */

/*
 * Entre o clique e o HTML novo, a casca aparece na hora e o corpo mostra a forma do que vem:
 * um cabeçalho, uma faixa de indicadores e um cartão. Não é a forma exata da tela de destino —
 * é a promessa de que ela vem, no lugar da tela imóvel.
 */
.arb-esqueleto {
  display: flex;
  flex-direction: column;
  gap: var(--arb-esp-5);
}
.arb-esqueleto__cabeca {
  display: flex;
  flex-direction: column;
  gap: var(--arb-esp-3);
  padding-bottom: var(--arb-esp-4);
  border-bottom: 1px solid var(--arb-borda);
}
.arb-esqueleto .arb-osso {
  height: 0.875rem;
}
.arb-esqueleto__faixa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--arb-esp-4);
}
.arb-esqueleto__faixa > .arb-card {
  gap: var(--arb-esp-3);
  min-height: 6.5rem;
  justify-content: space-between;
}
.arb-esqueleto__linhas {
  display: flex;
  flex-direction: column;
  gap: var(--arb-esp-3);
  padding: var(--arb-esp-5);
}

/* ==========================================================================================
   11. Telas soltas: entrada, não encontrado, erro
   ========================================================================================== */

/*
 * A tela de entrada é onde a marca fala mais alto, porque é a única sem sistema por trás. Dois
 * painéis: à esquerda a marca — o degradê raiz (Antracito → Verde Prumo escuro), o grafismo raiz_1
 * e a headline em Mona Sans caixa alta; à direita a entrada, quieta, com um único botão. Não há
 * campo de senha: o acesso é pelo Entra ID.
 */
.arb-entrar {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
}
.arb-entrar__marca {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--arb-esp-10);
  padding: var(--arb-esp-12) var(--arb-esp-12);
  background-image: var(--arb-gradiente-raiz);
  background-color: var(--arb-bg-afundado);
  isolation: isolate;
}
.arb-entrar__marca::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--arb-marca-fill);
}
.arb-entrar__grafismo {
  position: absolute;
  right: -14rem;
  top: -8rem;
  width: 56rem;
  max-width: none;
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
}
/* O grafismo é o único filho que fica atrás: os demais sobem para a frente dele. */
.arb-entrar__marca > :not(.arb-entrar__grafismo) {
  position: relative;
}
.arb-entrar__headline {
  margin: 0;
  font-family: var(--arb-font-destaque);
  font-weight: 700;
  font-size: var(--arb-tam-display-sm);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--arb-fg);
  max-width: 16ch;
}
.arb-entrar__texto {
  margin: 0;
  max-width: 46ch;
  font-size: var(--arb-tam-body);
  line-height: 1.6;
  color: var(--arb-fg-mudo);
}
.arb-entrar__empresas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--arb-esp-2) var(--arb-esp-3);
  max-width: 60ch;
  list-style: none;
  margin: 0;
  padding: 0;
}
.arb-entrar__empresas > li {
  font-family: var(--arb-font-detalhe);
  font-size: var(--arb-tam-mono-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--arb-fg-mudo);
  border: 1px solid var(--arb-borda);
  padding: var(--arb-esp-1) var(--arb-esp-3);
}
.arb-entrar__painel {
  display: flex;
  flex-direction: column;
  padding: var(--arb-esp-8) var(--arb-esp-8);
  background: var(--arb-bg-superficie);
}
.arb-entrar__topo {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--arb-esp-2);
}
.arb-entrar__corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--arb-esp-7, 1.75rem);
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
}
.arb-entrar__corpo .arb-titulo {
  font-size: var(--arb-tam-title);
}
.arb-entrar__nota {
  margin: 0;
  font-family: var(--arb-font-detalhe);
  font-size: var(--arb-tam-mono-xs);
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--arb-fg-sutil);
}
.arb-entrar__ajuda {
  display: flex;
  gap: var(--arb-esp-3);
  align-items: flex-start;
  padding: var(--arb-esp-3) var(--arb-esp-4);
  background: var(--arb-bg-sutil);
  border: 1px solid var(--arb-borda-sutil);
  border-inline-start: 3px solid var(--arb-borda-forte);
  border-radius: var(--arb-raio-md);
}
.arb-entrar__ajuda > svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--arb-fg-mudo);
}
.arb-entrar__ajuda > p {
  margin: 0;
  font-size: var(--arb-tam-caption);
  color: var(--arb-fg-mudo);
  line-height: 1.55;
}
.arb-entrar__rodape {
  display: flex;
  justify-content: center;
}

/*
 * As telas sem casca — não encontrado e erro. Centradas, com o símbolo da marca em cima e um
 * cartão só. Não são de cartão gigante: o que se lê é o título e as duas saídas.
 */
.arb-pagina-solta {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--arb-esp-6);
}
.arb-pagina-solta__caixa {
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: var(--arb-esp-5);
}
.arb-pagina-solta__caixa > .arb-card {
  gap: var(--arb-esp-4);
}
.arb-pagina-solta__marca {
  display: flex;
  align-items: center;
  gap: var(--arb-esp-3);
}

/*
 * A janela do wizard de inicialização (AR-16). Não é a casca: enquanto o sistema não abre, nenhuma tela
 * de negócio responde, e um menu de trinta itens trancados não informa. A janela tem uma barra com a
 * marca e a sessão, a trilha das etapas à esquerda (a `.arb-passos` do sistema, em pé) e a etapa em curso
 * no centro — ou, quando o administrador abre uma tela de trabalho de dentro do wizard, essa tela, com a
 * faixa que diz em que etapa ele está e como volta.
 *
 * O corpo tem teto de largura, ao contrário de `.arb-principal`: wizard é leitura e formulário curto, não
 * tabela de doze colunas.
 */
.arb-wizard {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.arb-wizard__topo {
  position: sticky;
  top: 0;
  z-index: var(--arb-z-sticky);
  height: 3.5rem;
  display: flex;
  align-items: center;
  gap: var(--arb-esp-3);
  padding: 0 var(--arb-esp-6);
  background: var(--arb-bg-superficie);
  border-bottom: 1px solid var(--arb-borda-sutil);
}
.arb-wizard__marca {
  display: flex;
  align-items: center;
  gap: var(--arb-esp-3);
}
.arb-wizard__contagem {
  font-family: var(--arb-font-detalhe);
  font-size: var(--arb-tam-mono-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--arb-fg-mudo);
  white-space: nowrap;
}
.arb-wizard__corpo {
  flex: 1;
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  width: 100%;
  max-width: 88rem;
  margin: 0 auto;
}
.arb-wizard__passos {
  padding: var(--arb-esp-8) var(--arb-esp-6);
  border-inline-end: 1px solid var(--arb-borda-sutil);
}
.arb-passos--vertical {
  flex-direction: column;
  gap: var(--arb-esp-4);
  overflow: visible;
}
.arb-passos--vertical > li {
  flex: 0 0 auto;
}
/* O título da etapa é link quando ela já foi (ou está sendo) feita; o `b` segue a cor do estado. */
.arb-wizard__passos a {
  color: inherit;
  text-decoration: none;
}
.arb-wizard__passos a:hover > b,
.arb-wizard__passos a:focus-visible > b {
  text-decoration: underline;
}
.arb-passos > li[data-estado] .arb-passos-txt > a > b {
  color: var(--arb-fg);
}
/* `.arb-principal` carrega `grid-area: principal`, que não existe nesta grade — sem o `auto`, o item cai numa
   linha implícita e o conteúdo abre abaixo do topo da trilha. */
.arb-wizard__principal {
  grid-area: auto;
  padding: var(--arb-esp-8) var(--arb-esp-8) var(--arb-esp-12);
}
.arb-wizard__faixa {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--arb-esp-3);
  padding: var(--arb-esp-3) var(--arb-esp-4);
  background: var(--arb-marca-sutil-bg);
  border: 1px solid var(--arb-borda-sutil);
  border-inline-start: 3px solid var(--arb-marca-fill);
  border-radius: var(--arb-raio-md);
  font-size: var(--arb-tam-body-sm);
}
.arb-wizard__faixa > svg {
  flex: 0 0 auto;
  color: var(--arb-marca);
}
.arb-wizard__faixa > span {
  flex: 1 1 20rem;
}
/* O rodapé de uma etapa: anterior à esquerda, o que avança à direita, sobre um fio. */
.arb-wizard__rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--arb-esp-3);
  padding-top: var(--arb-esp-5);
  border-top: 1px solid var(--arb-borda);
}
@media (max-width: 64rem) {
  .arb-wizard__corpo {
    grid-template-columns: minmax(0, 1fr);
  }
  .arb-wizard__passos {
    padding: var(--arb-esp-4) var(--arb-esp-6);
    border-inline-end: 0;
    border-bottom: 1px solid var(--arb-borda-sutil);
  }
  .arb-passos--vertical {
    flex-direction: row;
    overflow-x: auto;
  }
  .arb-passos--vertical > li {
    flex: 1 0 11rem;
  }
  .arb-wizard__principal {
    padding: var(--arb-esp-6) var(--arb-esp-6) var(--arb-esp-10);
  }
}

/* ==========================================================================================
   12. Tela estreita e alvo de toque
   ========================================================================================== */

/*
 * Item de grade encolhe até a trilha. O `1fr` da `.arb-grade--2` é `minmax(auto, 1fr)`: sem isto, a coluna
 * fica com o mínimo do conteúdo do item mais largo — uma tabela, que não quebra —, e a página inteira rola
 * para o lado no telefone (roteiro de 29/09/2026, em 390 px: o ticket media 717, o editor de fluxo 451, o
 * desempenho 428). A tabela já rola dentro da própria caixa (`.arb-tabela-rolagem`).
 */
.arb-grade > * {
  min-width: 0;
}

@media (max-width: 64rem) {
  /* A lateral sai e a gaveta entra no lugar dela — 22 módulos não podem ficar inalcançáveis. */
  .arb-app,
  html[data-lateral="recolhida"] .arb-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "topo" "principal";
  }
  .arb-lateral {
    display: none;
  }
  .arb-so-estreito {
    display: inline-flex;
  }
  .arb-topo {
    padding: 0 var(--arb-esp-3);
    gap: var(--arb-esp-2);
  }
  .arb-principal {
    padding: var(--arb-esp-4);
    gap: var(--arb-esp-4);
  }
  /* A trilha cede espaço antes dos controles: ela informa, eles agem. */
  .arb-trilha {
    overflow: hidden;
    max-width: 40vw;
  }
  .arb-trilha li:not([aria-current]) {
    display: none;
  }
  /* O contexto do cabeçalho é rótulo em mono, desenhado para não quebrar; aqui ele precisa. */
  .arb-cabeca-pg .arb-rotulo {
    white-space: normal;
  }
  .arb-salto__gatilho {
    min-width: 0;
    width: 2rem;
    justify-content: center;
    padding: 0;
  }
  .arb-empresa__campo {
    min-width: 0;
    max-width: 11rem;
  }
  .arb-salto__gatilho span,
  .arb-salto__gatilho kbd {
    display: none;
  }
  .arb-topo__divisor {
    display: none;
  }
  .arb-tabela-rolagem {
    max-height: var(--arb-tabela-altura, calc(100dvh - 12rem));
  }
  .arb-painel-indicadores {
    grid-template-columns: minmax(0, 1fr);
  }
  .arb-entrar {
    grid-template-columns: minmax(0, 1fr);
  }
  .arb-entrar__marca {
    padding: var(--arb-esp-8) var(--arb-esp-6);
    gap: var(--arb-esp-8);
    min-height: 18rem;
  }
  .arb-entrar__headline {
    font-size: var(--arb-tam-headline);
  }
  .arb-entrar__empresas {
    display: none;
  }
}

@media (max-width: 48rem) {
  /* Duas colunas de 170px num telefone não cabem nem separadas em rótulo e valor. */
  .arb-dl,
  .arb-dl--2,
  .arb-dl--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Quatro etapas com nome inteiro pedem mais que 375px; em telefone, duas por linha. */
  .arb-passos {
    flex-wrap: wrap;
  }
  .arb-passos > li {
    flex: 1 1 45%;
    min-width: 0;
  }
  .arb-painel-indicadores__apoio {
    grid-template-columns: minmax(0, 1fr);
  }
  .arb-entrar__painel {
    padding: var(--arb-esp-6) var(--arb-esp-5);
  }
}

/*
 * Alvo de toque. Os controles pequenos do sistema têm 28 a 32px — confortável no mouse, e no
 * dedo é a diferença entre aprovar o compromisso certo e o de baixo. Onde o ponteiro é grosso,
 * o que cresce é a área de acerto, não a aparência.
 */
@media (pointer: coarse) {
  .arb-btn--sm,
  .arb-entrada--sm {
    min-height: 2.5rem;
  }
  .arb-menu-lateral__item {
    height: 2.75rem;
  }
  .arb-abas > a {
    padding-top: var(--arb-esp-3);
    padding-bottom: var(--arb-esp-4);
  }
}

/*
 * O número do sino tem de parecer um aviso, não uma nota de rodapé — a contagem discreta do menu
 * lateral, colada ao ícone, se perde justamente onde a única razão de existir é ser vista.
 */
.arb-sino-conta {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(30%, -20%);
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: var(--arb-raio-full);
  background: var(--arb-erro-fg);
  color: var(--arb-neutro-0);
  font-family: var(--arb-font-detalhe);
  font-size: var(--arb-tam-mono-xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--arb-bg-superficie);
}
.arb-topo a:has(.arb-sino-conta) {
  position: relative;
  overflow: visible;
}

/* A trilha da barra superior é uma linha só: ela situa, não descreve. */
.arb-trilha {
  white-space: nowrap;
}

/* ==========================================================================================
   13. Impressão
   ========================================================================================== */

/*
 * Relatório, ficha de compromisso e espelho de medição são impressos e anexados a processo.
 * Papel não tem menu: vai o conteúdo, com as tabelas inteiras — a altura de rolagem, que na
 * tela é virtude, no papel cortaria a lista no meio.
 */

/* =====================================================================
   A gaveta de detalhe rola por dentro (correção de UX, VD-01)

   O kit faz a coluna certa em `.arb-gaveta[open]` — e a gaveta do front é um `<aside>`, que nunca tem
   `[open]`. Resultado: o corpo não era item flex, `flex: 1` não valia nada, e o conteúdo crescia **para
   fora** da gaveta em vez de rolar dentro dela. Numa ficha curta ninguém via; na do comercial, com
   orçamento, tributos e linha do tempo, o fim da gaveta ficava inalcançável.

   `min-height: 0` é a outra metade: sem ele, um item flex não encolhe abaixo do próprio conteúdo, e a
   rolagem continuaria não acontecendo mesmo com a coluna no lugar.
   ===================================================================== */

aside.arb-gaveta {
  display: flex;
  flex-direction: column;
  /* O `<dialog>` do kit sobe pela camada superior; o `<aside>` não, e o `.arb-veu` fixo que vem antes dele
     (z de overlay) o cobria inteiro — gaveta escurecida e clique no formulário fechando a gaveta. */
  z-index: var(--arb-z-modal);
}

aside.arb-gaveta > .arb-gaveta-corpo {
  min-height: 0;
}

/* =====================================================================
   O seletor de módulo (VD-01)

   São mais de cem telas, e ninguém trabalha em todas. O seletor fica no topo da lateral, sob a marca,
   porque é ele que explica a lista que vem depois: uma lateral filtrada sem dizer por quê parece quebrada.

   É `<details>` puro — abre e fecha sem JavaScript, e cada opção é um botão de envio de um formulário
   nativo. Recolhida, a lateral mostra só o ícone, como faz com os itens do menu.
   ===================================================================== */

.arb-lateral__modulo {
  flex-shrink: 0;
  padding: var(--arb-esp-2) var(--arb-esp-3);
  border-bottom: 1px solid var(--arb-lat-fio);
}

.arb-modulo {
  position: relative;
}

.arb-modulo__gatilho {
  display: flex;
  align-items: center;
  gap: var(--arb-esp-2);
  width: 100%;
  padding: var(--arb-esp-2);
  border-radius: var(--arb-raio-sm);
  color: var(--arb-lat-fg);
  cursor: pointer;
  list-style: none;
  transition: background var(--arb-dur-rapido) var(--arb-ease-padrao);
}

.arb-modulo__gatilho::-webkit-details-marker {
  display: none;
}

.arb-modulo__gatilho:hover {
  background: var(--arb-lat-hover);
}

.arb-modulo__gatilho:focus-visible {
  outline: 2px solid var(--arb-lat-ativo-fio);
  outline-offset: 2px;
}

.arb-modulo__texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
  text-align: left;
}

.arb-modulo__rotulo {
  font-family: var(--arb-font-detalhe);
  font-size: var(--arb-tam-mono-xs);
  letter-spacing: var(--arb-track-titulo);
  text-transform: uppercase;
  color: var(--arb-lat-fg-sutil);
}

.arb-modulo__nome {
  font-size: var(--arb-tam-body-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Aberto, o painel flutua sobre o menu: empurrar a lista para baixo faria o item que a pessoa procura
   sair da tela justamente no momento em que ela está procurando por ele. */
.arb-modulo__lista {
  position: absolute;
  z-index: var(--arb-z-sticky);
  top: calc(100% + var(--arb-esp-1));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: var(--arb-esp-1);
  gap: 1px;
  background: var(--arb-bg-elevado);
  color: var(--arb-fg);
  border: 1px solid var(--arb-borda);
  border-radius: var(--arb-raio-md);
  box-shadow: var(--arb-sombra-4);
}

.arb-modulo__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--arb-esp-2);
  text-align: left;
  border: 0;
  border-radius: var(--arb-raio-sm);
  background: none;
  color: inherit;
  cursor: pointer;
}

.arb-modulo__item:hover {
  background: var(--arb-bg-hover);
}

.arb-modulo__item:focus-visible {
  outline: 2px solid var(--arb-marca);
  outline-offset: -2px;
}

/* O módulo corrente leva a barra da marca à esquerda — cor nunca é o único portador (regra 4). */
.arb-modulo__item[aria-current="true"] {
  background: var(--arb-marca-sutil-bg);
  box-shadow: inset 2px 0 0 var(--arb-marca-fill);
}

.arb-modulo__item-nome {
  font-size: var(--arb-tam-body-sm);
  font-weight: 600;
}

.arb-modulo__resumo {
  font-size: var(--arb-tam-caption);
  color: var(--arb-fg-mudo);
  white-space: normal;
}

html[data-lateral="recolhida"] .arb-lateral__modulo {
  padding: var(--arb-esp-2) var(--arb-esp-1);
}

html[data-lateral="recolhida"] .arb-modulo__gatilho {
  justify-content: center;
  padding: var(--arb-esp-2) 0;
}

html[data-lateral="recolhida"] .arb-modulo__texto,
html[data-lateral="recolhida"] .arb-modulo__gatilho > svg:last-child {
  display: none;
}

html[data-lateral="recolhida"] .arb-modulo__lista {
  left: 0;
  right: auto;
  width: 16rem;
}

/* =====================================================================
   O funil comercial (VD-01)

   Colunas lado a lado, uma por etapa, com rolagem horizontal própria — e **não** a página inteira rolando
   para o lado. Cada cartão diz o que a negociação vale, com quem está e quando vence; o resto é do
   detalhe, que abre na gaveta sem sair do funil.

   Não há arrastar-e-soltar: mover é um botão que chama a server action, porque a mudança de etapa tem
   regra (motivo de perda, data de acompanhamento) e precisa de resposta do servidor. Um cartão que se
   move na tela e volta sozinho é pior do que um botão que pergunta.
   ===================================================================== */

.arb-funil {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15.5rem, 1fr);
  gap: var(--arb-esp-3);
  overflow-x: auto;
  padding-bottom: var(--arb-esp-2);
  scrollbar-width: thin;
}

.arb-funil__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--arb-esp-2);
  min-width: 0;
  padding: var(--arb-esp-3);
  background: var(--arb-bg-sutil);
  border: 1px solid var(--arb-borda-sutil);
  border-radius: var(--arb-card-raio);
}

/*
 * A coluna recebendo um cartão: fio da marca em volta e fundo um tom acima.
 *
 * O alvo precisa ser óbvio **antes** de soltar — largar o cartão e descobrir depois em que coluna ele caiu
 * é o defeito clássico de quadro que se arrasta. Por isso o realce é da coluna inteira, e não de uma
 * linha fina entre cartões: o funil move de etapa, não reordena dentro dela.
 *
 * A coluna que vai **perguntar** (perda, envio, ganho) usa traço interrompido, não uma cor diferente:
 * o traço diz "aqui abre um formulário" para quem não distingue a cor, e o texto da coluna vazia repete
 * a mesma coisa por escrito.
 */
.arb-funil__coluna.is-alvo {
  background: var(--arb-bg-hover);
  border-color: var(--arb-marca-fill);
  box-shadow: 0 0 0 1px var(--arb-marca-fill) inset;
}
.arb-funil__coluna.is-alvo--pergunta {
  border-style: dashed;
  box-shadow: none;
}

/* A etapa de desfecho ganho ganha o fio da marca no topo: é a coluna que responde à pergunta da tela. */
.arb-funil__coluna--ganha {
  border-top: 2px solid var(--arb-marca-fill);
}

.arb-funil__coluna--perdida {
  border-top: 2px solid var(--arb-borda-forte);
}

.arb-funil__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--arb-esp-2);
}

.arb-funil__titulo {
  font-size: var(--arb-tam-body-sm);
  font-weight: 600;
  margin: 0;
}

.arb-funil__conta {
  font-family: var(--arb-font-detalhe);
  font-size: var(--arb-tam-mono-xs);
  color: var(--arb-fg-mudo);
}

.arb-funil__total {
  font-family: var(--arb-font-detalhe);
  font-size: var(--arb-tam-body-sm);
  font-variant-numeric: tabular-nums;
  color: var(--arb-fg);
  margin: 0;
}

.arb-funil__cartoes {
  display: flex;
  flex-direction: column;
  gap: var(--arb-esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * O cartão que se arrasta.
 *
 * `cursor: grab` é o único aviso de que ele é arrastável antes de alguém tentar — um cartão que se move
 * sem dizer que se move não é descoberto. A proposta já convertida não tem `draggable`, e o cursor dela
 * continua o padrão: o funil acabou para ela, e fingir o contrário seria convidar para um movimento que a
 * API recusa.
 *
 * Arrastando, o cartão fica translúcido em vez de sumir: o vazio que ele deixa é a referência de onde ele
 * estava, e quem desistir no meio do gesto sabe para onde voltar.
 */
.arb-funil__cartao {
  display: flex;
  flex-direction: column;
  gap: var(--arb-esp-1);
  padding: var(--arb-esp-3);
  background: var(--arb-card-bg);
  border: 1px solid var(--arb-card-borda);
  border-radius: var(--arb-raio-md);
  box-shadow: var(--arb-card-sombra);
}

.arb-funil__cartao[draggable="true"] {
  cursor: grab;
}
.arb-funil__cartao.is-arrastando {
  opacity: 0.45;
  cursor: grabbing;
}
/* Quem pediu menos movimento não ganha transição nenhuma — o arrastar continua funcionando igual. */
@media (prefers-reduced-motion: reduce) {
  .arb-funil__cartao,
  .arb-funil__coluna {
    transition: none;
  }
}

.arb-funil__cartao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--arb-esp-2);
  font-family: var(--arb-font-detalhe);
  font-size: var(--arb-tam-mono-xs);
  color: var(--arb-fg-mudo);
}

.arb-funil__escopo {
  font-size: var(--arb-tam-body-sm);
  font-weight: 600;
  margin: 0;
  overflow-wrap: anywhere;
}

.arb-funil__cliente {
  font-size: var(--arb-tam-caption);
  color: var(--arb-fg-mudo);
  overflow-wrap: anywhere;
}

/* `wrap` e `nowrap` juntos: numa coluna estreita o valor e a margem passam a ocupar duas linhas em vez de
   partirem "R$ 96.000,00" no meio — que é o que acontecia em telefone, com o "R$" sozinho em cima. */
.arb-funil__numeros {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--arb-esp-1) var(--arb-esp-2);
  font-variant-numeric: tabular-nums;
}

.arb-funil__valor {
  font-family: var(--arb-font-detalhe);
  font-size: var(--arb-tam-body);
  font-weight: 600;
  white-space: nowrap;
}

.arb-funil__margem {
  font-family: var(--arb-font-detalhe);
  font-size: var(--arb-tam-mono-xs);
  color: var(--arb-fg-mudo);
}

.arb-funil__margem--baixa {
  color: var(--arb-alerta-fg);
}

.arb-funil__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--arb-esp-1);
  padding-top: var(--arb-esp-1);
  border-top: 1px solid var(--arb-borda-sutil);
}

.arb-funil__vazio {
  font-size: var(--arb-tam-caption);
  color: var(--arb-fg-mudo);
  padding: var(--arb-esp-3) 0;
  margin: 0;
}

/* =====================================================================
   A caixa de entrada do atendimento (AT-1c)

   A lista das conversas à esquerda e a conversa aberta à direita, lado a lado a partir de 1024 px; abaixo
   disso, uma embaixo da outra — é assim que o atendente externo trabalha pelo navegador do celular (spec
   AT §4.8). A conversa aberta é `?conversa=<id>` na URL, como todo diálogo do sistema.
   ===================================================================== */

.arb-caixa-entrada {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--arb-esp-4);
  align-items: start;
}

.arb-caixa-entrada--aberta {
  grid-template-columns: minmax(20rem, 2fr) minmax(0, 3fr);
}

@media (max-width: 1023px) {
  .arb-caixa-entrada--aberta {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =====================================================================
   A conversa aberta (AT-1c)

   O histórico em balões: o que o cliente escreveu à esquerda, o que saiu à direita, a nota interna à direita
   com borda tracejada (e a palavra "Nota interna" no alto — cor nunca é o único portador), e o que o
   sistema registrou ao centro, pequeno. Mensagem que não saiu ganha a borda de erro e a frase do motivo.
   ===================================================================== */

.arb-conversa__mensagens {
  list-style: none;
  margin: 0;
  padding: var(--arb-esp-3);
  display: flex;
  /* column-reverse com o DOM em ordem decrescente (mais nova primeiro — painel-conversa.tsx): visualmente a
     lista continua crescente, mas a rolagem 0 do navegador cai no fim visual, e a tela abre já mostrando a
     mensagem mais recente sem esperar JavaScript de rolagem. */
  flex-direction: column-reverse;
  gap: var(--arb-esp-2);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--arb-bg-sutil);
  border-radius: var(--arb-raio-md);
}

.arb-mensagem {
  max-width: 75%;
  display: flex;
  flex-direction: column;
  gap: var(--arb-esp-1);
  padding: var(--arb-esp-2) var(--arb-esp-3);
  border: 1px solid var(--arb-borda-sutil);
  border-radius: var(--arb-raio-md);
  background: var(--arb-bg-superficie);
}

.arb-mensagem--entrada {
  align-self: flex-start;
}

.arb-mensagem--saida {
  align-self: flex-end;
  background: var(--arb-marca-sutil-bg);
  border-color: var(--arb-borda-marca);
}

.arb-mensagem--nota {
  align-self: flex-end;
  background: var(--arb-alerta-bg);
  border-style: dashed;
  border-color: var(--arb-alerta-borda);
}

.arb-mensagem--sistema {
  align-self: center;
  max-width: none;
  background: none;
  border: none;
  font-size: var(--arb-tam-caption);
  color: var(--arb-fg-mudo);
}

.arb-mensagem--falhou {
  border-color: var(--arb-erro-borda);
}

.arb-mensagem__meta {
  font-size: var(--arb-tam-caption);
  color: var(--arb-fg-mudo);
}

.arb-mensagem__corpo {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.arb-conversa .arb-card-corpo {
  min-width: 0;
}

@media print {
  .arb-lateral,
  .arb-topo,
  .arb-pular,
  .arb-progresso-rota,
  .arb-toasts,
  .arb-filtros__acoes,
  .arb-paginacao,
  .arb-cabeca-pg-linha .arb-cluster,
  .arb-abas,
  .arb-veu {
    display: none !important;
  }
  .arb-app {
    display: block;
  }
  .arb-principal {
    padding: 0;
  }
  .arb-tabela-rolagem {
    overflow: visible;
    max-height: none;
    background: none;
  }
  .arb-tabela thead th {
    position: static;
  }
  .arb-tabela .arb-col-acoes {
    display: none;
  }
  .arb-card,
  .arb-tabela-caixa,
  .arb-kpi {
    box-shadow: none;
    break-inside: avoid;
  }
  .arb-kpi--heroi {
    background: none;
    border: 1px solid var(--arb-borda);
    clip-path: none;
  }
  .arb-tabela tbody tr {
    break-inside: avoid;
  }
}

/* =====================================================================
   Editor de fluxo (AT-3c, AR-164)

   O `@xyflow/react` entra só com a folha estrutural (`base.css`, sem cor): a aparência é esta, em tokens. As
   variáveis `--xy-*` são o jeito que a biblioteca oferece de trocar a cor do fundo, da ligação, da porta e dos
   controles. O desenho ao lado do painel a partir de 1024 px; abaixo disso, um embaixo do outro.
   ===================================================================== */

.arb-editor-fluxo {
  display: flex;
  flex-direction: column;
  gap: var(--arb-esp-3);
  --xy-background-color: var(--arb-bg-sutil);
  --xy-background-pattern-dots-color-default: var(--arb-borda);
  --xy-edge-stroke-default: var(--arb-borda-forte);
  --xy-edge-stroke-selected-default: var(--arb-marca);
  --xy-edge-label-background-color-default: var(--arb-bg-superficie);
  --xy-edge-label-color-default: var(--arb-fg-mudo);
  --xy-handle-background-color-default: var(--arb-marca-fill);
  --xy-handle-border-color-default: var(--arb-bg-superficie);
  --xy-controls-button-background-color-default: var(--arb-bg-superficie);
  --xy-controls-button-background-color-hover-default: var(--arb-bg-hover);
  --xy-controls-button-color-default: var(--arb-fg);
  --xy-controls-button-border-color-default: var(--arb-borda);
}

/*
 * O rótulo da ligação ("Escolheu um setor", "Não entendeu", "sim", "não"). O `base.css` **não** pinta o rótulo:
 * o fundo (`.react-flow__edge-textbg`) e o texto (`.react-flow__edge-text`) só recebem `fill` no `style.css`,
 * que não entra — e SVG sem `fill` é preto. Preto sobre preto: no roteiro de 29/09/2026 cada rótulo era um
 * bloco sólido, ilegível. As variáveis `--xy-edge-label-*` acima só valem para quem as lê; quem as lê é isto.
 */
.react-flow__edge-textbg {
  fill: var(--arb-bg-superficie);
}

.react-flow__edge-text {
  fill: var(--arb-fg-mudo);
  font-size: var(--arb-tam-caption);
}

.arb-editor-fluxo__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--arb-esp-2);
}

.arb-editor-fluxo__corpo {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr);
  gap: var(--arb-esp-4);
  align-items: start;
}

@media (max-width: 1023px) {
  .arb-editor-fluxo__corpo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.arb-editor-fluxo__tela {
  height: 34rem;
  border: 1px solid var(--arb-borda);
  border-radius: var(--arb-raio-md);
  background: var(--arb-bg-sutil);
  overflow: hidden;
}

.arb-editor-fluxo__lateral {
  display: flex;
  flex-direction: column;
  gap: var(--arb-esp-3);
  max-height: 34rem;
  overflow-y: auto;
}

.arb-no-fluxo {
  display: flex;
  flex-direction: column;
  gap: var(--arb-esp-1);
  min-width: 12rem;
  max-width: 16rem;
  padding: var(--arb-esp-2) var(--arb-esp-3);
  background: var(--arb-bg-superficie);
  color: var(--arb-fg);
  border: 1px solid var(--arb-borda);
  border-radius: var(--arb-raio-md);
  font-size: var(--arb-tam-caption);
}

.arb-no-fluxo--inicio {
  border-color: var(--arb-borda-marca);
  border-width: 2px;
}

.arb-no-fluxo--erro {
  border-color: var(--arb-erro-borda);
  background: var(--arb-erro-bg);
}

.arb-no-fluxo--selecionado {
  outline: 2px solid var(--arb-foco-cor);
  outline-offset: 2px;
}

.arb-no-fluxo__tipo {
  font-family: var(--arb-font-detalhe);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--arb-fg-mudo);
}

.arb-no-fluxo__resumo {
  overflow-wrap: anywhere;
}

.arb-no-fluxo__problemas {
  color: var(--arb-erro-fg);
  font-weight: 600;
}