/* ============================================================================
   Cantoário WMS — Padrão de tela de cadastro

   Esqueleto visual que todo cadastro do sistema herda: cabeçalho, filtro, grid,
   estados e diálogos. Nenhum valor literal — cor, espaço, tamanho, raio, sombra
   e duração saem de design-system.css.
   ============================================================================ */

.wms-cadastro {
  display: flex;
  flex-direction: column;
  gap: var(--gap-secao);
}

/* A página de formulário — cabeçalho e formulário — centrada e com largura limitada. A listagem
   continua ocupando a tela inteira: grid quer largura; formulário quer linha de leitura. */
.wms-cadastro--centrado {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   CABEÇALHO
   -------------------------------------------------------------------------- */

.wms-cadastro__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  flex-wrap: wrap;
}

.wms-cadastro__identidade {
  /* Cresce para empurrar o que vier depois dela para a direita. Sem isto, o `space-between` do
     topo só acerta quando há exatamente dois filhos: o terceiro — o atalho da documentação —
     jogaria a ação primária para o meio do cabeçalho. */
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  min-width: 0;
}

/* Símbolo da tela num disco: dá âncora visual ao título e repete, em toda tela,
   o ícone que o menu usa para chegar até ela. */
.wms-cadastro__simbolo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--espaco-6);
  height: var(--espaco-6);
  border-radius: var(--raio-pilula);
  background: var(--cor-primaria-100);
  color: var(--cor-primaria-600);
  box-shadow: var(--sombra-marca-1);
}

.wms-cadastro__titulo {
  margin: 0;
  font-weight: var(--fonte-peso-forte);
  letter-spacing: -0.01em;
  color: var(--cor-texto);
}

.wms-cadastro__apoio {
  margin: 0;
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

/* A ação primária fica sempre no mesmo canto, em toda tela de cadastro: quem
   aprende uma tela precisa achar o botão de incluir nas outras sem procurar. */
.wms-cadastro__acao {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   FILTRO
   -------------------------------------------------------------------------- */

/* Alternador de inativos: caixa e rótulo como um item só da faixa.
   Centralizado por conta própria, e não trocando o `align-items` da faixa — os
   campos continuam alinhados pela base, que é onde a linha de escrita deles fica;
   o que precisava sair do rodapé era só este par, que tem metade da altura.
   O alvo mínimo vale para o rótulo também: no galpão se clica de luva. */
.wms-cadastro__alternador {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  align-self: center;
  min-height: var(--alvo-min);
}

.wms-cadastro__alternador label {
  cursor: pointer;
  user-select: none;
}

/* O `align-self: center` acima centraliza na vertical numa barra de filtros, que é linha. Numa
   coluna — os campos do diálogo, uma seção, um campo — ele centralizava na horizontal, e a marcação
   ficava solta no meio do formulário. Ali ela encosta à esquerda, como todo campo. */
.wms-formulario__campos > .wms-cadastro__alternador,
.wms-formulario__campo > .wms-cadastro__alternador,
.wms-formulario__secao > .wms-cadastro__alternador,
.wms-formulario__secao > * > .wms-cadastro__alternador {
  align-self: flex-start;
}

.wms-cadastro__filtros {
  display: flex;
  align-items: flex-end;
  gap: var(--gap-campo);
  flex-wrap: wrap;
  padding: var(--espaco-4);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-superficie);
  box-shadow: var(--sombra-1);
}

/* --------------------------------------------------------------------------
   GRID
   -------------------------------------------------------------------------- */

.wms-cadastro__grid {
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

/* Os tokens de densidade eram declarados e aplicados por `data-densidade`, mas ninguém os
   consumia — o atributo prometia um efeito que não existia, e todo grid nascia no tamanho padrão
   do tema. É aqui que a promessa passa a valer. */
.wms-cadastro__grid .rz-data-grid-data td,
.wms-cadastro__grid .rz-data-grid-data th {
  height: var(--densidade-linha-altura);
  padding: var(--densidade-padding-y) var(--densidade-padding-x);
  font-size: var(--densidade-fonte);
}

/* Situação de cadastro — ativo e inativo. Paleta própria, fora do vocabulário reservado ao status
   de mercadoria: "Liberado" tem significado operacional próprio no estoque, e produto vai mostrar
   as duas coisas na mesma tela. */
.wms-situacao--ativo {
  color: var(--cor-sucesso);
  background: var(--cor-sucesso-fundo);
}

.wms-situacao--inativo {
  color: var(--cor-texto-secundario);
  background: var(--cor-fundo-sutil);
}

/* Cadastro incompleto — existe e ainda não serve. Não é "quarentena", que é estado de mercadoria. */
.wms-situacao--pendente {
  color: var(--cor-aviso);
  background: var(--cor-aviso-fundo);
}

/* Vários marcadores na mesma célula — o produto mostra kit, controlado, lote e validade juntos, e
   a classificação mostra o que ela impõe. Quebra de linha permitida: numa tela estreita é melhor
   a célula crescer do que os marcadores saírem pela lateral e sumirem. */
.wms-marcadores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1);
  align-items: center;
}

/* Etiqueta — a tag do produto. Rótulo livre, não estado: por isso não é `.wms-status`, cujo
   vocabulário de cor é reservado ao que a mercadoria está (liberado, quarentena, vencido). Neutra
   de propósito, para não competir com os indicadores ao lado na mesma célula. */
.wms-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wms-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: var(--espaco-1) var(--espaco-2);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-sutil);
  color: var(--cor-texto-secundario);
  font-size: var(--fonte-tam-xs);
  line-height: var(--fonte-altura-compacta);
  white-space: nowrap;
}

.wms-etiqueta__remover {
  /* O botão de remover é menor que o alvo mínimo de propósito: fica dentro de uma pílula de texto,
     e no alvo mínimo a pílula viraria um botão. A etiqueta inteira tem o alvo. */
  margin: calc(var(--espaco-1) * -1) calc(var(--espaco-1) * -1) calc(var(--espaco-1) * -1) 0;
}

/* Inativo: apagado e em itálico, não só numa cor. Cor sozinha não comunica
   estado neste sistema — vale para linha de grid como vale para chip. */
.wms-cadastro__linha--inativa {
  color: var(--cor-texto-tenue);
  font-style: italic;
}

.wms-cadastro__total {
  margin: 0;
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-tenue);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   ESTADOS — carregando, erro, sem permissão e vazio
   -------------------------------------------------------------------------- */

.wms-cadastro__aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: var(--espaco-5);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-superficie);
  box-shadow: var(--sombra-1);
  color: var(--cor-texto-secundario);
  animation: wms-cadastro-entra var(--transicao-longa);
}

.wms-cadastro__aviso--erro {
  border-color: var(--cor-erro);
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
}

.wms-cadastro__aviso--bloqueio {
  border-color: var(--cor-aviso);
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
}

.wms-cadastro__aviso-icone {
  flex-shrink: 0;
  font-size: var(--fonte-tam-2xl);
}

.wms-cadastro__aviso-titulo {
  margin: 0 0 var(--espaco-2);
  font-weight: var(--fonte-peso-medio);
}

.wms-cadastro__aviso-texto {
  margin: 0;
  font-size: var(--fonte-tam-sm);
  line-height: var(--fonte-altura-padrao);
}

/* Célula de grade cujo valor não existe. Itálico e tom esmaecido dizem "não é um valor"; em branco
   diria "o dado se perdeu", que é outra coisa e manda alguém procurar o que não sumiu. */
.wms-cadastro__ausente {
  font-style: italic;
  color: var(--cor-texto-tenue);
}

.wms-cadastro__vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-7) var(--gap-pagina);
  text-align: center;
}

/* Ícone dentro de um disco: solto sobre o branco ele lê como sobra de layout, e
   esta é a única imagem que o estado vazio tem. */
.wms-cadastro__vazio-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--espaco-7);
  height: var(--espaco-7);
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-sutil);
  box-shadow: var(--sombra-1);
  font-size: var(--fonte-tam-2xl);
  color: var(--cor-texto-tenue);
}

.wms-cadastro__vazio-titulo {
  margin: 0;
  font-size: var(--fonte-tam-lg);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto);
}

.wms-cadastro__vazio-texto {
  margin: 0;
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

@keyframes wms-cadastro-entra {
  from {
    opacity: 0;
    transform: translateY(calc(var(--espaco-2) * -1));
  }
}

/* --------------------------------------------------------------------------
   FORMULÁRIO EM DIÁLOGO
   -------------------------------------------------------------------------- */

.wms-formulario {
  display: flex;
  flex-direction: column;
  gap: var(--gap-secao);
}

.wms-formulario__campos {
  display: flex;
  flex-direction: column;
  gap: var(--gap-campo);
}

/* Crítica de campo. Fica logo abaixo do campo que a originou — quem precisa mudar é ele, e uma
   mensagem no rodapé do formulário obriga a pessoa a procurar qual. */
.wms-formulario__critica {
  margin: calc(var(--espaco-2) * -1) 0 0;
  font-size: var(--fonte-tam-sm);
  line-height: var(--fonte-altura-padrao);
  color: var(--cor-erro);
  animation: wms-cadastro-entra var(--transicao-media);
}

/* Dado que a tela exibe mas ninguém digita — o código gerado pelo sistema, o tipo do parâmetro.
   Vive aqui, junto de `__ajuda` e `__critica`, e não na folha do módulo que primeiro precisou dele:
   as três são a mesma família de texto de apoio do formulário, e separá-las por módulo faz o estilo
   de uma tela depender de outra carregar a folha. */
.wms-formulario__contexto,
.wms-formulario__dica {
  margin: 0;
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

.wms-formulario__dica code {
  font-family: var(--fonte-mono);
  background: var(--cor-fundo-sutil);
  padding: 0 var(--espaco-1);
  border-radius: var(--raio-sm);
}

/* Regra do campo, dita antes da tentativa. Ocupa o mesmo lugar da crítica — quando ela aparece,
   esta some, e o formulário não muda de altura no meio do preenchimento. */
.wms-formulario__ajuda {
  margin: calc(var(--espaco-2) * -1) 0 0;
  font-size: var(--fonte-tam-sm);
  line-height: var(--fonte-altura-padrao);
  color: var(--cor-texto-tenue);
}

/* Consequência que a pessoa precisa ler ANTES de decidir, e não depois de gravar. Hoje é a união
   de permissões ao acumular cargos no mesmo setor. Amarelo de atenção, não vermelho de erro: nada
   está errado, e o caminho segue — o que muda é que ele tem um efeito que não se vê na tela. */
.wms-formulario__aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  padding: var(--espaco-3);
  border: 1px solid var(--cor-aviso);
  border-radius: var(--raio-md);
  background: var(--cor-aviso-fundo);
  font-size: var(--fonte-tam-sm);
  line-height: var(--fonte-altura-padrao);
  color: var(--cor-texto);
}

.wms-formulario__aviso .rz-icon {
  flex: 0 0 auto;
  font-size: var(--fonte-tam-lg);
  color: var(--cor-aviso);
}

/* Bloco que grava sozinho, dentro de um formulário que grava no Salvar — hoje, os vínculos de
   acesso dentro do cadastro de usuário.

   A divisória acima não é enfeite: ela marca onde o Salvar deixa de valer. O que está acima dela
   só é gravado no botão; o que está abaixo já valeu no momento do clique. Sem a separação visual,
   quem cancelasse o formulário esperaria ter desfeito o vínculo que acabou de conceder. */
/* O respiro acima é só o necessário para a divisória não encostar no campo anterior. Era o dobro
   disto, e num formulário de seis seções a soma passava de uma tela de rolagem gasta em ar. Quem
   separa as seções é a linha, não a distância. */
.wms-formulario__secao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--cor-borda);
}

.wms-formulario__secao-titulo {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0;
  font-size: var(--fonte-tam-sm);
  font-weight: var(--fonte-peso-forte);
  letter-spacing: var(--fonte-espaco-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-tenue);
}

.wms-formulario__secao-titulo .rz-icon {
  font-size: var(--fonte-tam-md);
}

/* Bloco de caixas de marcação. Soltas, cada uma virava uma linha do `gap` da coluna e o bloco
   empilhava — dez caixas no cadastro de produto, dez linhas, todas com o rótulo a uma distância
   diferente do campo acima.

   Grade, e não `flex-wrap`: com rótulos de larguras diferentes — "É kit" ao lado de "Exige dupla
   conferência" — a quebra do `wrap` cai em lugar diferente a cada largura de janela, e o olho perde
   a coluna. Aqui as colunas têm largura igual, o número delas diminui conforme o espaço, e o bloco
   começa sempre na mesma margem dos campos acima. */
.wms-formulario__marcacoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--espaco-2) var(--espaco-4);
  align-items: center;
  justify-items: start;
}

/* Dois campos que se leem juntos — nome e login, e-mail e matrícula, início e fim de vigência.
   Em tela estreita voltam a empilhar, porque metade de um campo de data não serve para nada. */
.wms-formulario__par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-campo);
  align-items: start;
}

/* Três ou mais campos curtos na mesma linha — as quatro medidas, os numéricos de saída, os três
   seletores de classificação. Cada linha de formulário custa a altura do campo mais o `gap`, e
   numérico de cinco dígitos ocupando meia tela larga é altura gasta sem informação nenhuma.

   `auto-fit` e não contagem fixa porque o número de campos varia com o que a tela mostra: a
   quantidade máxima só existe para produto controlado, e uma contagem fixa deixaria a lacuna dela
   aberta no meio da linha. Abaixo do mínimo as colunas caem sozinhas, até uma só. */
.wms-formulario__linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--gap-campo);
  align-items: start;
}

/* Célula do par: o campo e a crítica dele andam juntos. Sem este agrupamento, a crítica de um
   vira a terceira célula do grid e desalinha a coluna inteira — o campo da direita sobe uma
   linha e passa a ficar ao lado do erro do vizinho. */
.wms-formulario__campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  min-width: 0;
}

@media (max-width: 40rem) {
  .wms-formulario__par {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   VÍNCULOS DO USUÁRIO
   -------------------------------------------------------------------------- */

.wms-vinculos {
  display: flex;
  flex-direction: column;
  gap: var(--gap-secao);
}

.wms-vinculos__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wms-vinculos__item {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-3);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-superficie);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicao-media), border-color var(--transicao);
}

.wms-vinculos__item:hover {
  border-color: var(--cor-primaria-300);
  box-shadow: var(--sombra-marca-1);
}

.wms-vinculos__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--espaco-6);
  height: var(--espaco-6);
  border-radius: var(--raio-pilula);
  background: var(--cor-primaria-100);
  color: var(--cor-primaria-600);
}

.wms-vinculos__texto {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: var(--fonte-altura-compacta);
}

.wms-vinculos__setor {
  font-size: var(--fonte-tam-md);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto);
}

.wms-vinculos__detalhe {
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

/* A concessão fica separada da lista por uma régua: é onde se escreve, e não onde se lê. */
.wms-vinculos__novo {
  display: flex;
  align-items: flex-end;
  gap: var(--espaco-2);
  flex-wrap: wrap;
  padding-top: var(--espaco-4);
  border-top: var(--borda-largura) solid var(--cor-borda);
}

/* Os quatro campos dividem a linha e o botão fica no tamanho dele. As bases são desiguais de
   propósito: nome de departamento e de cargo são curtos, o motivo é frase. `min-width: 0` porque
   item de flex não encolhe abaixo do conteúdo sem isso, e um deles empurraria o resto para a
   linha de baixo. */
.wms-vinculos__novo > .rz-form-field {
  flex: 1 1 9rem;
  min-width: 0;
}

.wms-vinculos__novo > .rz-form-field:nth-of-type(4) {
  flex: 2 1 12rem;
}

.wms-vinculos__novo > .rz-button {
  flex: 0 0 auto;
}

/* Abaixo disto os cinco não cabem sem virar tira. Dois por linha, e o botão inteiro embaixo. */
@media (max-width: 60rem) {
  .wms-vinculos__novo > .rz-form-field {
    flex: 1 1 calc(50% - var(--espaco-2));
  }

  .wms-vinculos__novo > .rz-button {
    flex: 1 1 100%;
  }
}

/* Marcadores do formulário, lado a lado — tipo do item e visibilidade se leem juntos. */
.wms-formulario__marcadores {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  flex-wrap: wrap;
}

.wms-formulario__marcadores :where(label) {
  margin-right: var(--espaco-4);
}

/* --------------------------------------------------------------------------
   CADASTRO DE MENU — árvore, não grid (design.md D9)
   -------------------------------------------------------------------------- */

.wms-menu__arvore,
.wms-menu__filhos,
.wms-menu__resultados {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O recuo do filho é o que mostra a hierarquia. Vem com uma guia à esquerda porque, a partir do
   terceiro nível, só o espaço já não diz de quem o item pende. */
.wms-menu__filhos {
  margin-top: var(--espaco-2);
  margin-left: var(--espaco-5);
  padding-left: var(--espaco-4);
  border-left: var(--borda-largura) solid var(--cor-borda);
}

.wms-menu__linha,
.wms-menu__resultado {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-3);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-superficie);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicao-media), border-color var(--transicao);
}

.wms-menu__linha:hover,
.wms-menu__resultado:hover {
  border-color: var(--cor-primaria-300);
  box-shadow: var(--sombra-marca-1);
}

/* Inativo apagado e em itálico, além do chip: cor sozinha não comunica estado neste sistema. */
.wms-menu__linha--inativa {
  color: var(--cor-texto-tenue);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   MATRIZ DE PERMISSÃO
   -------------------------------------------------------------------------- */

.wms-permissoes {
  display: flex;
  flex-direction: column;
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-superficie);
  box-shadow: var(--sombra-1);
  overflow-x: auto;
}

.wms-permissoes__cabecalho,
.wms-permissoes__linha {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) repeat(5, 6rem);
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--densidade-padding-y) var(--espaco-4);
  min-height: var(--densidade-linha-altura);
}

.wms-permissoes__cabecalho {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: var(--borda-largura) solid var(--cor-borda);
  background: var(--cor-fundo-sutil);
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-forte);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-tenue);
}

.wms-permissoes__linha {
  border-bottom: var(--borda-largura) solid var(--cor-borda);
  transition: background var(--transicao);
}

.wms-permissoes__linha:last-child {
  border-bottom: none;
}

.wms-permissoes__linha:hover {
  background: var(--cor-primaria-050);
}

/* Concessão que o pai não deixa alcançar. Fundo âmbar porque é engano, não erro: a permissão
   existe e funciona por endereço direto — o que falta é o item aparecer no menu. */
.wms-permissoes__linha--difere {
  background: var(--cor-aviso-fundo);
}

/* O recuo é o que mostra de quem o item pende. Vem de variável em linha porque o nível é dado,
   e não classe: quatro classes fixas seriam quatro regras para a mesma conta. */
.wms-permissoes__item {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  min-width: 0;
  padding-left: calc(var(--recuo, 0) * var(--espaco-5));
}

.wms-permissoes__coluna {
  display: flex;
  justify-content: center;
  text-align: center;
}

/* --------------------------------------------------------------------------
   CAMPO DE ARQUIVO
   -------------------------------------------------------------------------- */

/* O input nativo fica invisível e o rótulo vira a área clicável — mas ele continua no fluxo e
   recebe foco, e é por isso que o realce do foco vai no rótulo. Esconder com display:none tiraria
   o campo do alcance do teclado. Os apelidos `wms-importacao__*` são da importação de
   documentação, que nasceu antes do componente compartilhado e não mudou. */
.wms-campo-de-arquivo,
.wms-importacao__campo {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-5);
  border: var(--borda-largura) dashed var(--cor-borda-forte);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-sutil);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}

.wms-campo-de-arquivo:hover,
.wms-importacao__campo:hover {
  border-color: var(--cor-primaria-400);
  background: var(--cor-primaria-050);
}

.wms-campo-de-arquivo:focus-within,
.wms-importacao__campo:focus-within {
  outline: var(--foco-largura) solid var(--foco-cor);
  outline-offset: 2px;
}

.wms-campo-de-arquivo--desabilitado {
  opacity: 0.6;
  cursor: not-allowed;
}

.wms-campo-de-arquivo--desabilitado:hover {
  border-color: var(--cor-borda-forte);
  background: var(--cor-fundo-sutil);
}

.wms-campo-de-arquivo__icone,
.wms-importacao__campo-icone {
  font-size: var(--fonte-tam-2xl);
  color: var(--cor-primaria-500);
}

.wms-campo-de-arquivo__rotulo,
.wms-importacao__campo-rotulo {
  font-size: var(--fonte-tam-sm);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto-secundario);
}

.wms-campo-de-arquivo__ajuda {
  margin-left: auto;
  font-size: var(--fonte-tam-xs);
  color: var(--cor-texto-tenue);
}

.wms-campo-de-arquivo__entrada,
.wms-importacao__entrada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.wms-campo-de-arquivo--desabilitado .wms-campo-de-arquivo__entrada {
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   FOTOS E ANEXOS DO PRODUTO — as duas listas no fim do cadastro
   -------------------------------------------------------------------------- */

.wms-arquivos-do-produto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--espaco-4);
  align-items: start;
}

.wms-lista-de-arquivos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  padding: var(--espaco-4);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-superficie);
}

.wms-lista-de-arquivos__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  min-height: 2rem;
}

.wms-lista-de-arquivos__titulo {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0;
  font-size: var(--fonte-tam-md);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto);
}

.wms-lista-de-arquivos__contagem {
  padding: var(--espaco-1) var(--espaco-2);
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-sutil);
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto-secundario);
}

/* O que fica à direita do título: a marca de pendência e a contagem, ou o botão de incluir. */
.wms-lista-de-arquivos__marcas {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
}

/* Informação, não alerta: o que está na lista em produto novo entra ao salvar. O azul de
   informação é o mesmo da marca de vitrine, e por isso não é confundido com erro. */
.wms-lista-de-arquivos__pendencia {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: var(--espaco-1) var(--espaco-2);
  border-radius: var(--raio-pilula);
  background: var(--cor-info-fundo);
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-info);
}

.wms-lista-de-arquivos__pendencia .rzi {
  font-size: var(--fonte-tam-md);
}

/* --- fotos: uma linha por foto, com a miniatura à esquerda -------------- */

.wms-lista-de-fotos__lista {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
}

.wms-lista-de-fotos__linha {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-2) var(--espaco-3);
  border-top: var(--borda-largura) solid var(--cor-borda);
  transition: background var(--transicao), opacity var(--transicao);
}

.wms-lista-de-fotos__linha:first-child {
  border-top: 0;
}

.wms-lista-de-fotos__linha:hover {
  background: var(--cor-fundo-sutil);
}

/* A padrão se distingue pela faixa e pela marca em texto: a faixa chama o olho, a marca explica. */
.wms-lista-de-fotos__linha--padrao {
  box-shadow: inset 3px 0 0 var(--cor-primaria-400);
}

.wms-lista-de-fotos__linha--arrastando {
  opacity: 0.5;
}

.wms-lista-de-fotos__linha[draggable="true"] {
  cursor: grab;
}

.wms-lista-de-fotos__ordem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-sutil);
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto-secundario);
}

.wms-lista-de-fotos__imagem {
  display: block;
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  border-radius: var(--raio-md);
  background: var(--cor-fundo-sutil);
}

.wms-lista-de-fotos__imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wms-lista-de-fotos__texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
}

.wms-lista-de-fotos__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto);
}

.wms-lista-de-fotos__marcas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1);
}

.wms-lista-de-fotos__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
}

.wms-lista-de-fotos__marca .rzi {
  font-size: var(--fonte-tam-md);
}

.wms-lista-de-fotos__marca--padrao {
  background: var(--cor-primaria-100);
  color: var(--cor-primaria-700);
}

/* Informação, e não status de estoque: vitrine é atributo de foto, e o verde de "Liberado" é
   reservado à mercadoria. */
.wms-lista-de-fotos__marca--vitrine {
  background: var(--cor-info-fundo);
  color: var(--cor-info);
}

.wms-lista-de-fotos__linha .wms-acoes-da-linha {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   ANEXOS DO PRODUTO
   -------------------------------------------------------------------------- */

.wms-anexos__lista {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
}

.wms-anexos__item {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-4);
  border-top: var(--borda-largura) solid var(--cor-borda);
  transition: background var(--transicao);
}

.wms-anexos__item:first-child {
  border-top: 0;
}

/* Pendente: a faixa de informação diz, sem ler, que a linha ainda não é um registro. */
.wms-anexos__item--pendente {
  box-shadow: inset 3px 0 0 var(--cor-info);
}

.wms-anexos__item:hover {
  background: var(--cor-fundo-sutil);
}

.wms-anexos__icone {
  font-size: var(--fonte-tam-2xl);
  color: var(--cor-primaria-500);
}

.wms-anexos__texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
}

.wms-anexos__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto);
}

.wms-anexos__meta,
.wms-anexos__descricao {
  font-size: var(--fonte-tam-xs);
  color: var(--cor-texto-secundario);
}

.wms-anexos__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
}

.wms-anexos__tipo {
  background: var(--cor-fundo-sutil);
  color: var(--cor-texto-secundario);
}

@media (prefers-reduced-motion: reduce) {
  .wms-lista-de-fotos__linha,
  .wms-anexos__item,
  .wms-campo-de-arquivo,
  .wms-importacao__campo {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   AÇÕES DA LINHA
   -------------------------------------------------------------------------- */

.wms-acoes-da-linha {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--espaco-1);
}

/* Alvo de toque também na linha do grid: o operador pode estar de luva, e ação de linha é onde
   ele mais erra o clique. */
.wms-acoes-da-linha :where(.rz-button) {
  min-width: var(--alvo-min);
  min-height: var(--alvo-min);
}

/* Confirmar à direita, do lado onde o polegar e o olho terminam a leitura. */
.wms-formulario__acoes,
.wms-confirmacao__acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--espaco-3);
  padding-top: var(--espaco-2);
}

/* --------------------------------------------------------------------------
   FORMULÁRIO EM PÁGINA

   O cadastro que não cabe em diálogo — o produto — ganha a mesma moldura que o aviso de bloqueio:
   superfície, borda e sombra, para o formulário não se confundir com o fundo da página. A largura
   é limitada porque campo de texto esticado até a borda de uma tela larga fica ilegível; 72rem é
   o diálogo de 64rem com o respiro que a página tem e o diálogo não.
   -------------------------------------------------------------------------- */

.wms-formulario--pagina {
  padding: var(--espaco-5);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-superficie);
  box-shadow: var(--sombra-1);
  animation: wms-cadastro-entra var(--transicao-longa);
}

/* As ações grudam no rodapé da janela enquanto o formulário rola: com trinta campos, o Salvar
   ficaria a duas telas de distância do campo que a pessoa acabou de preencher. O fundo e a borda
   superior existem para o botão não flutuar sobre o campo que passa por baixo. */
.wms-formulario__acoes--pagina {
  position: sticky;
  bottom: 0;
  margin: 0 calc(var(--espaco-5) * -1) calc(var(--espaco-5) * -1);
  padding: var(--espaco-3) var(--espaco-5);
  border-top: var(--borda-largura) solid var(--cor-borda);
  border-radius: 0 0 var(--raio-lg) var(--raio-lg);
  background: var(--cor-fundo-superficie);
}

@media (prefers-reduced-motion: reduce) {
  .wms-formulario--pagina {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   DETALHE — o registro para ler, em diálogo

   Rótulo e valor por seção, no mesmo desenho da conta da pessoa. Não é formulário desabilitado:
   campo cinza se lê como campo quebrado, e aqui não há o que digitar.
   -------------------------------------------------------------------------- */

.wms-detalhe {
  display: flex;
  flex-direction: column;
  gap: var(--gap-secao);
  outline: none;
}

.wms-detalhe__secao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  padding-top: var(--espaco-4);
  border-top: var(--borda-largura) solid var(--cor-borda);
}

.wms-detalhe__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--espaco-3) var(--espaco-4);
  margin: 0;
}

.wms-detalhe__campos dt {
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wms-detalhe__campos dd {
  margin: var(--espaco-1) 0 0;
  font-size: var(--fonte-tam-md);
  color: var(--cor-texto);
  overflow-wrap: anywhere;
}

.wms-detalhe__texto {
  margin: 0;
  white-space: pre-wrap;
  color: var(--cor-texto);
}

/* --------------------------------------------------------------------------
   CONFIRMAÇÃO
   -------------------------------------------------------------------------- */

.wms-confirmacao {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-4);
  padding-bottom: var(--espaco-4);
}

.wms-confirmacao__simbolo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--espaco-7);
  height: var(--espaco-7);
  border-radius: var(--raio-pilula);
  box-shadow: var(--sombra-1);
}

.wms-confirmacao__simbolo--perigo {
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
}

.wms-confirmacao__simbolo--atencao {
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
}

.wms-confirmacao__corpo {
  min-width: 0;
}

.wms-confirmacao__pergunta {
  margin: 0 0 var(--espaco-2);
  font-size: var(--fonte-tam-lg);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto);
}

.wms-confirmacao__consequencia {
  margin: 0;
  font-size: var(--fonte-tam-sm);
  line-height: var(--fonte-altura-padrao);
  color: var(--cor-texto-secundario);
}

/* O que o registro carrega junto — dependentes, vínculos, uso em outro lugar. É
   o que faz a pessoa decidir com o efeito à vista, em vez de no escuro. */
.wms-confirmacao__detalhes {
  margin: var(--espaco-3) 0 0;
  padding-left: var(--espaco-5);
  font-size: var(--fonte-tam-sm);
  line-height: var(--fonte-altura-padrao);
  color: var(--cor-texto-secundario);
}

/* A justificativa que a trilha vai guardar. Separada do corpo por uma régua: é o que a pessoa
   precisa escrever, e não mais um texto que ela precisa ler. */
.wms-confirmacao__motivo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  padding-top: var(--espaco-4);
  border-top: var(--borda-largura) solid var(--cor-borda);
}

/* --- Marcas do parâmetro de sistema ---------------------------------------------------------

   Paleta própria, pelo mesmo motivo de `wms-situacao`: "sensível" e "sem uso" não são estado de
   mercadoria, e o vocabulário de status do estoque é reservado. */

.wms-parametro__chave {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  align-items: center;
}

/* Alterá-lo muda autorização ou derruba sessão. Cor de aviso, não de erro: nada está errado —
   é uma decisão que precisa ser tomada de olhos abertos. */
.wms-parametro__marca--sensivel {
  color: var(--cor-aviso);
  background: var(--cor-aviso-fundo);
}

/* Nenhum código lê a chave. Discreto de propósito: é informação, não problema — o parâmetro pode
   ter sido cadastrado antes do código que vai consumi-lo.

   Secundário, e não tênue: o tênue é o neutro 500, que o próprio design system registra em 4,33:1
   sobre superfície tingida — abaixo do mínimo da WCAG AA. É o mesmo degrau que
   `.wms-situacao--inativo` usa, duas telas acima, para o mesmo tipo de rótulo apagado. */
.wms-parametro__marca--sem-uso {
  color: var(--cor-texto-secundario);
  background: var(--cor-fundo-sutil);
}

.wms-parametro__marca .rz-icon {
  font-size: var(--fonte-tam-md);
}

/* Agrupa o atalho da documentação com a ação primária, para os dois ficarem juntos à direita em
   vez de espalhados pelo cabeçalho. */
.wms-cadastro__acoes-do-topo {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  flex: 0 0 auto;
}

/* Atalho para a explicação da tela. Discreto de propósito: ele responde uma pergunta que nem
   sempre existe, e competir com a ação primária tiraria peso justamente de quem veio operar. */
.wms-atalho-doc {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: var(--espaco-1) var(--espaco-2);
  border-radius: var(--raio-pilula);
  color: var(--cor-texto-secundario);
  font-size: var(--fonte-tam-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transicao), color var(--transicao);
}

.wms-atalho-doc:hover {
  background: var(--cor-fundo-sutil);
  color: var(--cor-texto);
}

.wms-atalho-doc:focus-visible {
  outline: 2px solid var(--cor-primaria-500);
  outline-offset: 2px;
}

.wms-atalho-doc__icone {
  font-size: var(--fonte-tam-md);
}

@media (prefers-reduced-motion: reduce) {
  .wms-atalho-doc {
    transition: none;
  }
}

/* Duas ou mais ações no topo de uma tela. Envolve para não empurrar o título quando o cabeçalho
   estreita — o `space-between` do bloco de identidade já acerta com dois filhos, e este é o segundo. */
.wms-cadastro__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
}

/* ------------------------------------------------------------------------------------------
   Recusa que cita registros — "estes agendamentos ficariam sem lugar", cada um com o atalho.
   ------------------------------------------------------------------------------------------ */

.wms-recusa__referencias {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fonte-tam-sm);
}

.wms-recusa__referencias a {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    color: var(--cor-primaria-600);
    transition: color var(--transicao);
}

.wms-recusa__referencias a:hover,
.wms-recusa__referencias a:focus-visible {
    color: var(--cor-primaria-800);
}

.wms-dialogo-de-recusa {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-4);
}

.wms-dialogo-de-recusa__cabeca {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-3);
}

.wms-dialogo-de-recusa__cabeca p {
    margin: 0;
}

.wms-dialogo-de-recusa__icone {
    display: inline-flex;
    padding: var(--espaco-2);
    border-radius: var(--raio-pilula);
    background: var(--cor-erro-fundo);
    color: var(--cor-erro);
}

@media (prefers-reduced-motion: reduce) {
    .wms-recusa__referencias a {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   APRESENTAÇÕES DO PRODUTO
   A lista das caixas em que o produto chega, no molde da lista de anexos, e a conta do volume no diálogo.
   -------------------------------------------------------------------------- */

.wms-apresentacoes__rotulo {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  font-weight: var(--fonte-peso-medio);
}

.wms-apresentacoes__item--inativa {
  opacity: 0.6;
}

.wms-apresentacoes__ver-inativas {
  font-size: var(--fonte-tam-sm);
}

.wms-apresentacoes__carregando {
  height: var(--espaco-1);
}

.wms-apresentacao__conta {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0;
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-sutil);
  font-variant-numeric: tabular-nums;
  transition: background var(--transicao);
}