/* ==========================================================================================
   Documentação do sistema — árvore à esquerda, leitura à direita.

   Nenhum valor literal: cor, espaço, raio, sombra e duração vêm de design-system.css. Um número
   escrito aqui é um número que a próxima mudança de tema não alcança.
   ========================================================================================== */

.wms-doc {
    display: flex;
    flex-direction: column;
    gap: var(--gap-secao);
    min-height: 0;
}

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

/* Alinhado pela base, e não pelo centro. O campo do Radzen reserva um espaço no topo para o rótulo
   flutuante, então a caixa dele é mais alta que o input visível — e centralizar o botão contra essa
   caixa o deixava alguns pixels acima da linha do input. Pela base os dois encostam na mesma
   régua, que é como se lê uma linha de formulário. Mesmo alinhamento de `.wms-vinculos__novo`. */
.wms-doc__busca {
    display: flex;
    align-items: flex-end;
    gap: var(--espaco-2);
    flex: 1 1 22rem;
    max-width: 38rem;
}

.wms-doc__busca .rz-form-field {
    flex: 1 1 auto;
}

/* Duas colunas em tela larga; empilhado no estreito, com a árvore primeiro — quem chega pelo
   celular precisa escolher a tela antes de ler qualquer coisa. */
.wms-doc__corpo {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    gap: var(--gap-secao);
    align-items: start;
}

@media (max-width: 60rem) {
    .wms-doc__corpo {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------------------------------------
   Árvore
   ------------------------------------------------------------------------------------------ */

.wms-doc-arvore {
    background: var(--cor-fundo-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-1);
    padding: var(--espaco-3);
    position: sticky;
    top: var(--espaco-4);
    max-height: calc(100vh - var(--espaco-7));
    overflow-y: auto;
}

.wms-doc-arvore__aviso {
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-tam-sm);
    margin: 0;
    padding: var(--espaco-2);
}

.wms-doc-arvore__nivel {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* O recuo é do nível de dentro, e não do item: assim a profundidade sai da própria estrutura e
   nenhum nível precisa saber em que altura da árvore está. */
.wms-doc-arvore__nivel .wms-doc-arvore__nivel {
    margin-left: var(--espaco-3);
    padding-left: var(--espaco-2);
    border-left: 1px solid var(--cor-borda);
}

.wms-doc-arvore__item {
    margin: 0;
}

.wms-doc-arvore__grupo {
    display: block;
    padding: var(--espaco-2) var(--espaco-2);
    font-size: var(--fonte-tam-xs);
    font-weight: var(--fonte-peso-forte);
    letter-spacing: var(--fonte-espaco-rotulo);
    text-transform: uppercase;
    color: var(--cor-texto-tenue);
}

.wms-doc-arvore__folha {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-2);
    width: 100%;
    /* Com padding lateral e largura total, sem isto o botão transborda a árvore — que já rola no
       vertical, e passaria a rolar no horizontal também. */
    box-sizing: border-box;
    padding: var(--espaco-2);
    border: 0;
    border-radius: var(--raio-sm);
    background: transparent;
    color: var(--cor-texto);
    font: inherit;
    font-size: var(--fonte-tam-sm);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transicao), color var(--transicao);
}

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

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

.wms-doc-arvore__folha--atual {
    background: var(--cor-primaria-050);
    color: var(--cor-primaria-800);
    font-weight: var(--fonte-peso-medio);
}

.wms-doc-arvore__folha--ausente .wms-doc-arvore__rotulo {
    color: var(--cor-texto-secundario);
}

.wms-doc-arvore__rotulo {
    flex: 1 1 auto;
}

/* Selo com texto, e não só cor: "sem documentação" precisa chegar a quem não distingue as duas. */
.wms-doc-arvore__selo {
    flex: 0 0 auto;
    font-size: var(--fonte-tam-xs);
    padding: 0 var(--espaco-1);
    border-radius: var(--raio-pilula);
    white-space: nowrap;
}

.wms-doc-arvore__selo--ausente {
    color: var(--cor-texto-tenue);
    border: 1px dashed var(--cor-borda-forte);
}

.wms-doc-arvore__selo--rascunho {
    color: var(--cor-primaria-800);
    background: var(--cor-primaria-100);
}

/* ------------------------------------------------------------------------------------------
   Leitura
   ------------------------------------------------------------------------------------------ */

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

.wms-doc-leitura {
    background: var(--cor-fundo-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-1);
    padding: var(--espaco-5);
    display: flex;
    flex-direction: column;
    gap: var(--gap-secao);
}

.wms-doc-leitura__topo {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    padding-bottom: var(--espaco-3);
    border-bottom: 1px solid var(--cor-borda);
}

.wms-doc-leitura__caminho {
    font-size: var(--fonte-tam-xs);
    color: var(--cor-texto-tenue);
    letter-spacing: var(--fonte-espaco-rotulo);
    text-transform: uppercase;
}

.wms-doc-leitura__identidade {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    flex-wrap: wrap;
}

.wms-doc-leitura__titulo {
    margin: 0;
}

.wms-doc-leitura__selo {
    font-size: var(--fonte-tam-xs);
    font-weight: var(--fonte-peso-forte);
    padding: var(--espaco-1) var(--espaco-2);
    border-radius: var(--raio-pilula);
    color: var(--cor-primaria-800);
    background: var(--cor-primaria-100);
}

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

/* O corpo é Markdown renderizado: a formatação vem de dentro dele, então os elementos comuns
   precisam ter aparência definida aqui — sem isto, um documento com tabela sai sem borda e um
   com código sai com a fonte do parágrafo. */
.wms-doc-leitura__corpo {
    line-height: var(--fonte-altura-padrao);
    color: var(--cor-texto);
    overflow-wrap: anywhere;
}

.wms-doc-leitura__corpo > :first-child {
    margin-top: 0;
}

.wms-doc-leitura__corpo h1,
.wms-doc-leitura__corpo h2,
.wms-doc-leitura__corpo h3 {
    margin: var(--espaco-5) 0 var(--espaco-2);
    line-height: var(--fonte-altura-compacta);
}

.wms-doc-leitura__corpo h1 { font-size: var(--fonte-tam-xl); }
.wms-doc-leitura__corpo h2 { font-size: var(--fonte-tam-lg); }
.wms-doc-leitura__corpo h3 { font-size: var(--fonte-tam-md); }

.wms-doc-leitura__corpo p,
.wms-doc-leitura__corpo ul,
.wms-doc-leitura__corpo ol {
    margin: var(--espaco-3) 0;
}

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

.wms-doc-leitura__corpo pre {
    background: var(--cor-fundo-sutil);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    padding: var(--espaco-3);
    /* Rola dentro de si; o corpo da página nunca rola de lado. */
    overflow-x: auto;
}

/* Tabela larga rola dentro do próprio bloco, sem empurrar a página. */
.wms-doc-leitura__corpo table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fonte-tam-sm);
}

.wms-doc-leitura__corpo th,
.wms-doc-leitura__corpo td {
    border: 1px solid var(--cor-borda);
    padding: var(--espaco-2);
    text-align: left;
}

.wms-doc-leitura__corpo th {
    background: var(--cor-fundo-sutil);
    font-weight: var(--fonte-peso-forte);
}

.wms-doc-leitura__rodape {
    font-size: var(--fonte-tam-xs);
    color: var(--cor-texto-tenue);
    padding-top: var(--espaco-3);
    border-top: 1px solid var(--cor-borda);
}

/* ------------------------------------------------------------------------------------------
   Campos documentados
   ------------------------------------------------------------------------------------------ */

.wms-doc-campos__titulo {
    margin: 0 0 var(--espaco-3);
}

.wms-doc-campos__lista {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
    margin: 0;
}

.wms-doc-campo {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    padding: var(--espaco-3);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.wms-doc-campo:hover {
    border-color: var(--cor-borda-forte);
    box-shadow: var(--sombra-1);
}

.wms-doc-campo__rotulo {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-2);
    font-weight: var(--fonte-peso-forte);
    margin: 0;
}

/* Cor de texto secundária, e não cor de status. Os tokens de status deste sistema significam
   estado de mercadoria — liberado, quarentena, avariado —, e emprestar um deles para "campo
   obrigatório" ensinaria a operação a ler a mesma cor com dois sentidos. A distinção aqui vem da
   caixa alta e do espaçamento, que não competem com nenhum outro significado. */
.wms-doc-campo__obrigatorio {
    font-size: var(--fonte-tam-xs);
    font-weight: var(--fonte-peso-normal);
    color: var(--cor-texto-secundario);
    text-transform: uppercase;
    letter-spacing: var(--fonte-espaco-rotulo);
}

.wms-doc-campo__corpo {
    margin: var(--espaco-2) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    font-size: var(--fonte-tam-sm);
}

.wms-doc-campo__corpo p {
    margin: 0;
}

.wms-doc-campo__etiqueta {
    display: block;
    font-size: var(--fonte-tam-xs);
    text-transform: uppercase;
    letter-spacing: var(--fonte-espaco-rotulo);
    color: var(--cor-texto-tenue);
}

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

/* ------------------------------------------------------------------------------------------
   Busca, ausência e convite
   ------------------------------------------------------------------------------------------ */

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

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

.wms-doc-busca__acerto {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    width: 100%;
    /* Mesma razão do botão da árvore: padding lateral com largura total transborda em content-box. */
    box-sizing: border-box;
    text-align: left;
    padding: var(--espaco-3);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-superficie);
    color: var(--cor-texto);
    font: inherit;
    cursor: pointer;
    transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

.wms-doc-busca__acerto:hover {
    border-color: var(--cor-primaria-300);
    box-shadow: var(--sombra-2);
    transform: translateY(-1px);
}

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

.wms-doc-busca__cabecalho {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--espaco-2);
}

.wms-doc-busca__titulo {
    font-weight: var(--fonte-peso-forte);
}

.wms-doc-busca__origem {
    font-size: var(--fonte-tam-xs);
    color: var(--cor-primaria-800);
    background: var(--cor-primaria-100);
    padding: 0 var(--espaco-2);
    border-radius: var(--raio-pilula);
}

.wms-doc-busca__defasado {
    font-size: var(--fonte-tam-xs);
    color: var(--cor-texto-secundario);
    border: 1px dashed var(--cor-borda-forte);
    padding: 0 var(--espaco-1);
    border-radius: var(--raio-pilula);
}

.wms-doc-busca__caminho {
    font-size: var(--fonte-tam-xs);
    color: var(--cor-texto-tenue);
}

.wms-doc-busca__trecho {
    font-size: var(--fonte-tam-sm);
    color: var(--cor-texto-secundario);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wms-doc-busca__corte {
    margin: var(--espaco-3) 0 0;
    font-size: var(--fonte-tam-xs);
    color: var(--cor-texto-tenue);
}

.wms-doc-busca__vazio,
.wms-doc__ausente,
.wms-doc__convite {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--espaco-3);
    padding: var(--espaco-7) var(--espaco-4);
    border: 1px dashed var(--cor-borda-forte);
    border-radius: var(--raio-lg);
    background: var(--cor-fundo-superficie);
}

.wms-doc-busca__vazio-icone,
.wms-doc__ausente-icone,
.wms-doc__convite-icone {
    font-size: var(--fonte-tam-3xl);
    color: var(--cor-texto-tenue);
}

.wms-doc-busca__vazio-texto,
.wms-doc__ausente-texto,
.wms-doc__convite-texto {
    margin: 0;
    max-width: 34rem;
    font-size: var(--fonte-tam-sm);
    color: var(--cor-texto-secundario);
}

/* Todo movimento fica atrás da preferência de quem opera. */
@media (prefers-reduced-motion: reduce) {
    .wms-doc-arvore__folha,
    .wms-doc-campo,
    .wms-doc-busca__acerto {
        transition: none;
    }

    .wms-doc-busca__acerto:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------------------------------------
   Cobertura e manutenção
   ------------------------------------------------------------------------------------------ */

.wms-doc-cobertura {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-3);
}

.wms-doc-cobertura__numero {
    flex: 1 1 8rem;
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    padding: var(--espaco-3);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-superficie);
    box-shadow: var(--sombra-1);
}

/* A lacuna é o número que traz alguém a esta tela; a borda mais forte diz isso sem usar cor de
   status, que neste sistema significa estado de mercadoria. */
.wms-doc-cobertura__numero--lacuna {
    border-color: var(--cor-borda-forte);
    border-left-width: var(--espaco-1);
}

.wms-doc-cobertura__valor {
    font-size: var(--fonte-tam-2xl);
    font-weight: var(--fonte-peso-forte);
    line-height: var(--fonte-altura-compacta);
    font-variant-numeric: tabular-nums;
}

.wms-doc-cobertura__rotulo {
    font-size: var(--fonte-tam-xs);
    text-transform: uppercase;
    letter-spacing: var(--fonte-espaco-rotulo);
    color: var(--cor-texto-secundario);
}

.wms-doc-cobertura__tela {
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------------------------------------
   Campos, no formulário
   ------------------------------------------------------------------------------------------ */

.wms-doc-campos-edicao {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
    padding-top: var(--espaco-4);
    border-top: 1px solid var(--cor-borda);
}

.wms-doc-campos-edicao__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-3);
}

.wms-doc-campos-edicao__titulo {
    margin: 0;
}

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

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

.wms-doc-campos-edicao__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-3);
    padding: var(--espaco-2) var(--espaco-3);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-superficie);
}

.wms-doc-campos-edicao__identidade {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--espaco-2);
    min-width: 0;
}

.wms-doc-campos-edicao__rotulo {
    font-weight: var(--fonte-peso-medio);
}

.wms-doc-campos-edicao__nome {
    font-family: var(--fonte-mono);
    font-size: var(--fonte-tam-xs);
    color: var(--cor-texto-tenue);
}

.wms-doc-campos-edicao__acoes {
    display: flex;
    align-items: center;
    gap: var(--espaco-1);
    flex: 0 0 auto;
}

.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);
}

.wms-formulario__publicacao {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--espaco-3);
    padding-top: var(--espaco-3);
    border-top: 1px solid var(--cor-borda);
}

.wms-formulario__par {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--gap-campo);
}

/* --------------------------------------------------------------------------
   TROCA — exportar e importar a documentação
   -------------------------------------------------------------------------- */

.wms-doc__troca {
  display: flex;
  align-items: flex-end;
  gap: var(--espaco-2);
}

/* As cores daqui são as de **resultado de ação** — sucesso, aviso, erro, informação —, e nunca as de
   `--cor-status-*`. Aquelas significam estado de mercadoria, e quem confere recebimento lê
   verde=liberado e âmbar=quarentena todo dia: emprestá-las para "cria" e "divergente" ensinaria a
   operação a ler a mesma cor com dois sentidos. O arquivo já avisa contra isso duas vezes acima. */

/* --- escolha das telas a exportar --------------------------------------- */

.wms-doc-escolha__resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-sutil);
}

.wms-doc-escolha__contagem {
  font-size: var(--fonte-tam-sm);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto-secundario);
}

.wms-doc-escolha {
  max-height: 24rem;
  overflow-y: auto;
  padding-right: var(--espaco-2);
}

.wms-doc-escolha__nivel,
.wms-doc-escolha__nivel .wms-doc-escolha__nivel {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wms-doc-escolha__nivel .wms-doc-escolha__nivel {
  padding-left: var(--barra-recuo-nivel);
}

.wms-doc-escolha__grupo {
  display: block;
  padding: var(--espaco-2) var(--espaco-1) var(--espaco-1);
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-medio);
  letter-spacing: var(--fonte-espaco-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-tenue);
}

/* Sem `width: 100%`: o rótulo é contêiner flex em fluxo normal e já ocupa a linha inteira. Declarar
   a largura somava padding por fora da caixa e produzia rolagem horizontal dentro de uma lista que
   já rola no vertical. */
.wms-doc-escolha__folha {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-1) var(--espaco-2);
  border-radius: var(--raio-md);
  cursor: pointer;
  transition: background var(--transicao);
}

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

/* Tela sem documento aparece, e não é marcável. Escondê-la produziria uma árvore com buracos, e
   quem procurasse a tela ali concluiria que ela não existe. */
.wms-doc-escolha__folha--vazia {
  cursor: default;
  color: var(--cor-texto-tenue);
}

.wms-doc-escolha__folha--vazia:hover {
  background: transparent;
}

.wms-doc-escolha__vazia-icone {
  font-size: var(--fonte-tam-md);
  color: var(--cor-borda-forte);
}

.wms-doc-escolha__rotulo {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fonte-tam-sm);
}

/* --- envio do arquivo ---------------------------------------------------- */

.wms-importacao__envio {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}

/* 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. */
.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-importacao__campo:hover {
  border-color: var(--cor-primaria-400);
  background: var(--cor-primaria-050);
}

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

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

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

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

/* --- prévia -------------------------------------------------------------- */

.wms-previa__resumo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
}

.wms-previa__conta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-1);
  flex: 1 1 6rem;
  padding: var(--espaco-3);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-superficie);
}

.wms-previa__conta-numero {
  font-size: var(--fonte-tam-2xl);
  font-weight: var(--fonte-peso-medio);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.wms-previa__conta-rotulo {
  font-size: var(--fonte-tam-xs);
  color: var(--cor-texto-tenue);
  text-align: center;
}

.wms-previa__conta--criacao { border-color: var(--cor-sucesso); }
.wms-previa__conta--criacao .wms-previa__conta-numero { color: var(--cor-sucesso); }

.wms-previa__conta--alteracao { border-color: var(--cor-info); }
.wms-previa__conta--alteracao .wms-previa__conta-numero { color: var(--cor-info); }

.wms-previa__conta--inaplicavel { border-color: var(--cor-erro); }
.wms-previa__conta--inaplicavel .wms-previa__conta-numero { color: var(--cor-erro); }

.wms-previa__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  max-height: 28rem;
  overflow-y: auto;
}

.wms-previa__linha {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  padding: var(--espaco-4);
  border: var(--borda-largura) solid var(--cor-borda);
  border-left: 3px solid var(--cor-borda-forte);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-superficie);
  box-shadow: var(--sombra-1);
  animation: wms-cadastro-entra var(--transicao-longa);
}

.wms-previa__linha--criacao { border-left-color: var(--cor-sucesso); }
.wms-previa__linha--alteracao { border-left-color: var(--cor-info); }
.wms-previa__linha--inaplicavel { border-left-color: var(--cor-erro); }

/* O destaque do divergente não depende só de cor: o ícone e a frase dizem a mesma coisa. */
.wms-previa__linha--divergente {
  border-color: var(--cor-aviso);
  background: var(--cor-aviso-fundo);
}

.wms-previa__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espaco-3);
}

.wms-previa__identidade {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  min-width: 0;
}

.wms-previa__icone {
  flex-shrink: 0;
  font-size: var(--fonte-tam-lg);
  color: var(--cor-texto-tenue);
}

.wms-previa__tela {
  display: block;
  font-weight: var(--fonte-peso-medio);
}

.wms-previa__chave {
  display: block;
  font-family: var(--fonte-mono);
  font-size: var(--fonte-tam-xs);
  color: var(--cor-texto-tenue);
}

.wms-previa__selo {
  flex-shrink: 0;
  padding: 0 var(--espaco-2);
  border-radius: var(--raio-pilula);
  font-size: var(--fonte-tam-xs);
  white-space: nowrap;
}

.wms-previa__selo--criacao {
  color: var(--cor-sucesso);
  background: var(--cor-sucesso-fundo);
}

.wms-previa__selo--alteracao {
  color: var(--cor-info);
  background: var(--cor-info-fundo);
}

.wms-previa__selo--inaplicavel {
  color: var(--cor-erro);
  background: var(--cor-erro-fundo);
}

.wms-previa__selo--neutra {
  color: var(--cor-texto-tenue);
  background: var(--cor-fundo-sutil);
}

.wms-previa__divergencia {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  font-size: var(--fonte-tam-sm);
  color: var(--cor-aviso);
}

.wms-previa__divergencia-icone {
  flex-shrink: 0;
  font-size: var(--fonte-tam-lg);
}

.wms-previa__confirmacao {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-2);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-superficie);
  font-size: var(--fonte-tam-sm);
  font-weight: var(--fonte-peso-medio);
  cursor: pointer;
}

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

.wms-previa__grupo {
  border-top: var(--borda-largura) solid var(--cor-borda);
  padding-top: var(--espaco-2);
}

.wms-previa__grupo-titulo {
  font-size: var(--fonte-tam-sm);
  font-weight: var(--fonte-peso-medio);
  cursor: pointer;
  transition: color var(--transicao);
}

.wms-previa__grupo-titulo:hover { color: var(--cor-primaria-500); }

.wms-previa__grupo-titulo--acrescimo { color: var(--cor-sucesso); }
.wms-previa__grupo-titulo--alteracao { color: var(--cor-info); }
.wms-previa__grupo-titulo--remocao { color: var(--cor-erro); }

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

.wms-previa__campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
}

.wms-previa__campo-rotulo {
  font-size: var(--fonte-tam-sm);
  font-weight: var(--fonte-peso-medio);
}

.wms-previa__campo-nome {
  font-family: var(--fonte-mono);
  font-size: var(--fonte-tam-xs);
  color: var(--cor-texto-tenue);
}

/* --- diferença de texto -------------------------------------------------- */

.wms-diferenca {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  font-size: var(--fonte-tam-sm);
}

.wms-diferenca__rotulo {
  font-size: var(--fonte-tam-xs);
  color: var(--cor-texto-tenue);
}

/* Empilha no estreito: dois textos longos lado a lado num celular viram duas colunas de uma palavra
   cada, e comparar deixa de ser possível. */
.wms-diferenca__lados {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--espaco-2);
}

.wms-diferenca__lado {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  padding: var(--espaco-2);
  border-radius: var(--raio-md);
  min-width: 0;
}

.wms-diferenca__lado--atual {
  background: var(--cor-erro-fundo);
}

.wms-diferenca__lado--novo {
  background: var(--cor-sucesso-fundo);
}

.wms-diferenca__legenda {
  font-size: var(--fonte-tam-xs);
  text-transform: uppercase;
  letter-spacing: var(--fonte-espaco-rotulo);
  color: var(--cor-texto-tenue);
}

.wms-diferenca__texto {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.wms-diferenca__texto--vazio {
  font-style: italic;
  color: var(--cor-texto-tenue);
}

.wms-diferenca__seta {
  color: var(--cor-texto-tenue);
}

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

  .wms-diferenca__seta {
    transform: rotate(90deg);
    justify-self: center;
  }
}

/* --- resultado ----------------------------------------------------------- */

.wms-importacao__resultado {
  display: flex;
  flex-direction: column;
  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-2);
  animation: wms-cadastro-entra var(--transicao-longa);
}

.wms-importacao__resultado-topo {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
}

.wms-importacao__resultado-topo > div:first-of-type {
  flex: 1 1 auto;
  min-width: 0;
}

.wms-importacao__resultado-icone {
  font-size: var(--fonte-tam-2xl);
  color: var(--cor-sucesso);
}

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

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

.wms-importacao__linha {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-2) var(--espaco-3);
  border-left: 3px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-sutil);
}

.wms-importacao__linha--criacao { border-left-color: var(--cor-sucesso); }
.wms-importacao__linha--alteracao { border-left-color: var(--cor-info); }
.wms-importacao__linha--pulado { border-left-color: var(--cor-aviso); }
.wms-importacao__linha--inaplicavel { border-left-color: var(--cor-erro); }

.wms-importacao__linha-icone {
  flex-shrink: 0;
  color: var(--cor-texto-tenue);
}

.wms-importacao__linha-texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wms-importacao__linha-tela {
  font-weight: var(--fonte-peso-medio);
  font-size: var(--fonte-tam-sm);
}

.wms-importacao__linha-desfecho {
  font-size: var(--fonte-tam-xs);
  color: var(--cor-texto-secundario);
}

.wms-importacao__linha-motivo {
  font-size: var(--fonte-tam-xs);
  color: var(--cor-texto-tenue);
}

@media (prefers-reduced-motion: reduce) {
  .wms-previa__linha,
  .wms-importacao__resultado {
    animation: none;
  }
}

/* --- data por trecho ----------------------------------------------------- */

/* Discreta de propósito: ela informa, não compete com o texto. O que precisa saltar é a instrução
   de como preencher o campo; a data responde "isto ainda vale?" para quem já desconfia. */
.wms-doc-data {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-normal);
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-tenue);
  white-space: nowrap;
}

.wms-doc-data__icone {
  font-size: var(--fonte-tam-sm);
}

.wms-doc-leitura__carimbo {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding-bottom: var(--espaco-2);
  border-bottom: var(--borda-largura) solid var(--cor-borda);
}

.wms-doc-leitura__carimbo-rotulo {
  font-size: var(--fonte-tam-xs);
  text-transform: uppercase;
  letter-spacing: var(--fonte-espaco-rotulo);
  color: var(--cor-texto-tenue);
}