/* ==========================================================================================
   Recebimento — ordem, conferência na doca e alocação. Pensado para tablet: alvo largo, texto
   legível a um braço de distância, um passo por vez.
   Só tokens do design system; nenhum valor literal de cor, fonte ou espaço.
   ========================================================================================== */

/* ------------------------------------------------------------------------------------------
   Linhas previstas da nova ordem
   ------------------------------------------------------------------------------------------ */

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

.wms-recebimento__linha-prevista {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: start;
    gap: var(--espaco-3);
    padding: var(--espaco-3);
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-superficie);
}

.wms-recebimento__linha-campos {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    min-width: 0;
}

.wms-recebimento__sequencia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--alvo-min);
    height: var(--alvo-min);
    border-radius: var(--raio-pilula);
    background: var(--cor-fundo-sutil);
    color: var(--cor-texto-secundario);
    font-weight: var(--fonte-peso-forte);
    font-variant-numeric: tabular-nums;
}

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

/* ------------------------------------------------------------------------------------------
   Página da ordem
   ------------------------------------------------------------------------------------------ */

.wms-recebimento__pendencias {
    margin-bottom: var(--espaco-4);
    padding: var(--espaco-3) var(--espaco-4);
    border: var(--borda-largura) solid var(--cor-aviso);
    border-radius: var(--raio-md);
    background: var(--cor-aviso-fundo);
}

.wms-recebimento__pendencias ul {
    margin: 0;
    padding-left: var(--espaco-4);
}

/* A origem e os complementos: navegação entre ordens do mesmo material, e não alerta — por isso o tom
   neutro, ao contrário das pendências. */
.wms-recebimento__relacionadas {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    margin-bottom: var(--espaco-4);
    padding: var(--espaco-3) var(--espaco-4);
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-superficie);
    box-shadow: var(--sombra-1);
}

.wms-recebimento__relacionadas p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espaco-2);
    margin: 0;
}

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

/* ------------------------------------------------------------------------------------------
   Cartões da conferência e da alocação
   ------------------------------------------------------------------------------------------ */

.wms-recebimento__leitura {
    flex: 1 1 20rem;
}

/* O campo mais lido da operação, em pé e às vezes de luva: não fica abaixo do alvo mínimo. */
.wms-recebimento__leitura .rz-form-field-content {
    min-height: var(--alvo-min);
}

.wms-recebimento__cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: var(--espaco-3);
    margin: 0 0 var(--espaco-4);
    padding: 0;
    list-style: none;
}

.wms-recebimento__cartao {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    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);
    transition: box-shadow var(--transicao), border-color var(--transicao);
}

.wms-recebimento__cartao:hover {
    box-shadow: var(--sombra-2);
}

/* Conferida: some do foco, sem sumir da lista — a pessoa ainda precisa ver que está feita. */
.wms-recebimento__cartao--feito {
    background: var(--cor-fundo-sutil);
    box-shadow: none;
}

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

.wms-recebimento__cartao-titulo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--espaco-1);
    min-width: 0;
    font-size: var(--fonte-tam-md);
}

.wms-recebimento__cartao-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2);
    margin-top: auto;
}

.wms-recebimento__cartao-acoes .rz-button {
    min-height: var(--alvo-min);
}

.wms-recebimento__impedimento {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    margin: 0;
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-tam-sm);
}

/* A linha da outra etapa fica à vista — a pessoa precisa saber que ela existe e onde se conta —, mas recua,
   porque aqui não há o que fazer com ela. */
.wms-recebimento__cartao--outra-etapa {
    background: var(--cor-fundo-sutil);
    box-shadow: none;
}

/* Sobre o chip de status: só a cor é desta indicação, e o cartão é coluna — sem o alinhamento, esticaria. */
.wms-recebimento__outra-etapa {
    align-self: flex-start;
    background: var(--cor-info-fundo);
    color: var(--cor-info);
}

/* O agendamento pode ficar sem linha até a ordem ser gerada: o vazio diz que é permitido, e não que algo sumiu. */
.wms-recebimento__sem-linhas {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    margin: 0 0 var(--espaco-2);
    color: var(--cor-texto-tenue);
    font-size: var(--fonte-tam-sm);
    font-style: italic;
}

.wms-recebimento__resta {
    white-space: nowrap;
    font-size: var(--fonte-tam-lg);
}

/* ------------------------------------------------------------------------------------------
   Contagem
   ------------------------------------------------------------------------------------------ */

.wms-recebimento__o-que-contar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--espaco-2);
    margin: 0 0 var(--espaco-3);
    font-size: var(--fonte-tam-md);
}

.wms-recebimento__parcela {
    display: flex;
    flex-direction: column;
    gap: var(--gap-campo);
    min-width: 0;
    margin: 0 0 var(--espaco-3);
    padding: var(--espaco-3) var(--espaco-4) var(--espaco-4);
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-superficie);
}

/* A quantidade da linha prevista tem largura própria, para as linhas da nova ordem alinharem entre
   si: sem ela, a coluna "auto" seguia o tamanho natural de cada campo numérico. */
.wms-recebimento__quantidade {
    width: 9rem;
}

.wms-recebimento__parcela-acoes {
    display: flex;
    justify-content: flex-end;
}

.wms-recebimento__rodape-da-contagem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-3);
    margin-bottom: var(--espaco-3);
}

.wms-recebimento__parcela legend {
    padding: 0 var(--espaco-1);
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-tam-sm);
}

/* O total fica grande: é o número que a pessoa confere com os olhos antes de confirmar. */
.wms-recebimento__total {
    min-width: 7rem;
    color: var(--cor-texto);
    font-size: var(--fonte-tam-xl);
    font-weight: var(--fonte-peso-forte);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.wms-recebimento__total-geral {
    margin: 0;
    align-self: center;
    font-size: var(--fonte-tam-md);
}

/* ------------------------------------------------------------------------------------------
   Divergência
   ------------------------------------------------------------------------------------------ */

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

.wms-recebimento__divergencia-titulo {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    margin: 0;
    color: var(--cor-erro);
    font-weight: var(--fonte-peso-forte);
}

.wms-recebimento__comparacao {
    width: 100%;
    border-collapse: collapse;
}

.wms-recebimento__comparacao th,
.wms-recebimento__comparacao td {
    padding: var(--espaco-2);
    border-bottom: var(--borda-largura) solid var(--cor-borda);
    text-align: left;
}

.wms-recebimento__comparacao .wms-quantidade {
    text-align: right;
}

.wms-recebimento__comparacao tfoot th,
.wms-recebimento__comparacao tfoot td {
    font-weight: var(--fonte-peso-forte);
}

/* ------------------------------------------------------------------------------------------
   Alocação
   ------------------------------------------------------------------------------------------ */

.wms-recebimento__sugestoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--espaco-2);
    margin: 0 0 var(--espaco-3);
    padding: 0;
    list-style: none;
}

.wms-recebimento__sugestao {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espaco-1);
    width: 100%;
    min-height: calc(var(--alvo-min) * 2);
    padding: var(--espaco-3);
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-superficie);
    color: var(--cor-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

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

.wms-recebimento__sugestao:disabled {
    background: var(--cor-fundo-sutil);
    color: var(--cor-texto-tenue);
    box-shadow: none;
    cursor: not-allowed;
}

.wms-recebimento__sugestao:focus-visible {
    outline: none;
    box-shadow: var(--foco-anel);
}

.wms-recebimento__confirmado {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    margin: 0;
    color: var(--cor-sucesso);
    font-weight: var(--fonte-peso-forte);
}

@media (prefers-reduced-motion: reduce) {
    .wms-recebimento__cartao,
    .wms-recebimento__sugestao {
        transition: none;
    }
}

/* ------------------------------------------------------------------------------------------
   Alocação — uma ordem por bloco: o cabeçalho diz de quem é e quanto falta, os itens vêm embaixo.
   O cabeçalho inteiro é o botão de abrir e fechar, para o alvo de toque ser a linha, e não a seta.
   ------------------------------------------------------------------------------------------ */

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

.wms-alocacao__ordem {
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background: var(--cor-fundo-superficie);
    box-shadow: var(--sombra-1);
    overflow: hidden;
    animation: wms-cadastro-entra var(--transicao-media);
}

.wms-alocacao__ordem-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-3);
    padding: var(--espaco-3) var(--espaco-4);
    background: var(--cor-fundo-sutil);
}

.wms-alocacao__alternar {
    display: flex;
    flex: 1 1 18rem;
    align-items: center;
    gap: var(--espaco-2);
    min-height: var(--alvo-min);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.wms-alocacao__alternar:focus-visible {
    outline: var(--borda-largura-forte) solid var(--cor-primaria-500);
    outline-offset: var(--espaco-1);
    border-radius: var(--raio-sm);
}

.wms-alocacao__seta {
    color: var(--cor-texto-secundario);
    transition: transform var(--transicao);
}

.wms-alocacao__seta--aberta {
    transform: rotate(90deg);
}

.wms-alocacao__identificacao {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wms-alocacao__titulo {
    font-size: var(--fonte-tam-md);
    font-weight: var(--fonte-peso-forte);
}

.wms-alocacao__resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espaco-3);
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-tam-sm);
}

.wms-alocacao__resumo strong {
    color: var(--cor-texto);
}

.wms-alocacao__falta strong {
    font-size: var(--fonte-tam-lg);
}

.wms-alocacao__itens {
    border-top: var(--borda-largura) solid var(--cor-borda);
}

.wms-alocacao__itens .rz-data-grid {
    border: 0;
    border-radius: 0;
}

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

    .wms-alocacao__seta {
        transition: none;
    }
}

/* Filtros das posições no diálogo de alocação: código, zona, prateleira e "só vazias" numa faixa. */
.wms-alocacao__filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    align-items: center;
    gap: var(--gap-campo);
    padding: var(--espaco-3);
    border-radius: var(--raio-md);
    background: var(--cor-fundo-sutil);
}

/* ------------------------------------------------------------------------------------------
   Tipos de recebimento
   ------------------------------------------------------------------------------------------ */

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

.wms-recebimento__comportamentos-do-tipo {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* --------------------------------------------------------------------------
   IMPORTAÇÃO DO XML DA NOTA
   O seletor é o CampoDeArquivo compartilhado; aqui ficam o resultado da leitura e o arquivo que
   o formulário guarda até salvar. Serve ao agendamento e à ordem aberta direto.
   -------------------------------------------------------------------------- */

.wms-nota-xml {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-3);
}

.wms-nota-xml__resultado {
  padding: var(--espaco-3);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-sutil);
}

.wms-nota-xml__titulo {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0;
  font-weight: var(--fonte-peso-medio);
}

.wms-nota-xml__avisos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  margin: var(--espaco-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

.wms-nota-xml__avisos li {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-1);
}

.wms-nota-xml__resultado,
.wms-nota-xml__arquivo {
  animation: wms-nota-xml-surge var(--transicao-media);
}

/* O atalho para baixar o XML guardado, ao lado do número da nota na página do agendamento e da ordem. */
.wms-nota-xml__baixar {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  margin-inline-start: var(--espaco-2);
  font-size: var(--fonte-tam-sm);
  white-space: nowrap;
  color: var(--cor-primaria-600);
  text-decoration: none;
  transition: color var(--transicao);
}

.wms-nota-xml__baixar:hover,
.wms-nota-xml__baixar:focus-visible {
  color: var(--cor-primaria-700);
  text-decoration: underline;
}

.wms-nota-xml__baixar .rzi {
  font-size: 1em;
}

.wms-nota-xml__arquivo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-3);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-sucesso-fundo);
  box-shadow: var(--sombra-1);
  font-size: var(--fonte-tam-sm);
}

.wms-nota-xml__arquivo > .rzi {
  color: var(--cor-sucesso);
}

.wms-nota-xml__arquivo > span {
  flex: 1 1 16rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

@keyframes wms-nota-xml-surge {
  from {
    opacity: 0;
    transform: translateY(var(--espaco-1));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wms-nota-xml__resultado,
  .wms-nota-xml__arquivo {
    animation: none;
  }

  .wms-nota-xml__baixar {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   MÚLTIPLO E AMARRAÇÃO NA LINHA PREVISTA E NA CONTAGEM
   A linha diz em que o material vem e quantos volumes, com a conta e a quebra embaixo. A caixa contada que não é a
   prevista aparece como aviso, com o atalho para registrá-la — sem impedir terminar.
   -------------------------------------------------------------------------- */

.wms-recebimento__previsao {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--espaco-2);
  max-width: 30rem;
}

.wms-recebimento__apresentacao {
  width: 12rem;
}

.wms-recebimento__volumes {
  width: 7rem;
}

.wms-recebimento__conta-dos-volumes {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--espaco-1);
  margin: 0;
  color: var(--cor-texto-secundario);
  font-size: var(--fonte-tam-sm);
  font-variant-numeric: tabular-nums;
  animation: wms-nota-xml-surge var(--transicao-media);
}

.wms-recebimento__previsao .wms-formulario__critica {
  flex-basis: 100%;
  text-align: right;
}

/* No diálogo de mais uma linha, o bloco é o formulário inteiro: alinha à esquerda, como os campos de cima. */
.wms-recebimento__previsao--no-dialogo {
  justify-content: flex-start;
  max-width: none;
}

.wms-recebimento__previsao--no-dialogo .wms-recebimento__conta-dos-volumes {
  justify-content: flex-start;
}

.wms-recebimento__previsao--no-dialogo .wms-formulario__critica {
  text-align: left;
}

.wms-recebimento__volumes-previstos {
  display: block;
  color: var(--cor-texto-secundario);
  font-size: var(--fonte-tam-sm);
  white-space: nowrap;
}

.wms-recebimento__caixa-diferente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-3);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-aviso-fundo);
  box-shadow: var(--sombra-1);
  font-size: var(--fonte-tam-sm);
  animation: wms-nota-xml-surge var(--transicao-media);
}

.wms-recebimento__caixa-diferente > span {
  flex: 1 1 16rem;
  min-width: 0;
}

.wms-apresentacoes-da-doca {
  margin-top: var(--espaco-5);
}

@media (max-width: 40rem) {
  .wms-recebimento__previsao {
    justify-content: flex-start;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wms-recebimento__conta-dos-volumes,
  .wms-recebimento__caixa-diferente {
    animation: none;
  }
}