/* ============================================================================
   Cantoário WMS — Tokens do design system

   Ponto único de mudança visual do sistema. Cor, fonte, espaçamento, tamanho,
   raio e sombra saem daqui.

   Marca: azul #12428C sobre branco. Identidade monocromática — o logo não tem
   cor secundária. A escala --cor-primaria-* é derivada do azul da marca
   (hsl 216°, 77%), variando só a luminosidade.

   O azul da marca é reservado para AÇÃO e NAVEGAÇÃO. Nunca é cor de status de
   mercadoria — senão linha selecionada e chip de status se confundem no grid.

   Uso: importar antes do tema do Radzen e depois sobrescrever as variáveis do
   Radzen em design-system.radzen.css.

   Regra: nenhum componente declara cor, tamanho ou espaçamento literal.
   Se um valor não existe aqui, ele é criado aqui — não no componente.
   ============================================================================ */

/* --------------------------------------------------------------------------
   Open Sans, servida pela própria aplicação.

   Arquivo único: a Open Sans é fonte variável, e um só woff2 cobre a faixa de
   peso inteira — três arquivos separados seriam três vezes o mesmo binário.

   Nada de CDN. O sistema opera em galpão, e fonte de origem externa é ponto de
   falha sem dono: cai a rede de fora e a interface troca de fonte no meio de
   uma conferência.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --------------------------------------------------------------------------
     MARCA — Cantoário
     -------------------------------------------------------------------------- */
  --cor-marca: #12428c;
  --cor-marca-contraste: #ffffff;

  /* --------------------------------------------------------------------------
     PRIMÁRIA — ação, seleção, foco, navegação
     Derivada do azul da marca: hsl(216, 77%, L)
     -------------------------------------------------------------------------- */
  --cor-primaria-900: #081c3b;
  --cor-primaria-800: #0b2956;
  --cor-primaria-700: #0e3671;
  --cor-primaria-600: #103c7e;
  --cor-primaria-500: #12428c; /* a marca */
  --cor-primaria-400: #2b5eab;
  --cor-primaria-300: #668fcc;
  --cor-primaria-200: #b8ccea;
  /* Degrau intermediário: sobre a superfície 050 da barra lateral, o 100 quase
     não se destaca, e o item ativo é a principal pista de "onde estou". */
  --cor-primaria-150: #d6e5fa;
  --cor-primaria-100: #e6eef9;
  --cor-primaria-050: #f3f6fc;

  /* --------------------------------------------------------------------------
     NEUTROS — superfície, borda, texto
     -------------------------------------------------------------------------- */
  --cor-neutra-900: #14181d;
  --cor-neutra-800: #262d35;
  --cor-neutra-700: #3a424d;
  /* Degrau para texto de apoio sobre superfície tingida: o 500 dá 4,33:1 sobre a barra lateral,
     abaixo do mínimo da WCAG AA. Este dá 6,1:1 e continua lendo como secundário. */
  --cor-neutra-600: #545e69;
  --cor-neutra-500: #6b7580;
  --cor-neutra-400: #98a1aa;
  --cor-neutra-300: #c3c9d0;
  --cor-neutra-200: #dfe3e8;
  --cor-neutra-100: #f1f3f5;
  --cor-neutra-050: #f8f9fa;
  --cor-neutra-000: #ffffff;

  /* Papéis semânticos dos neutros — use estes, não o número direto */
  --cor-fundo-pagina: var(--cor-neutra-050);
  --cor-fundo-superficie: var(--cor-neutra-000);
  --cor-fundo-elevado: var(--cor-neutra-000);
  --cor-fundo-sutil: var(--cor-neutra-100);
  --cor-borda: var(--cor-neutra-200);
  --cor-borda-forte: var(--cor-neutra-300);
  --cor-texto: var(--cor-neutra-900);
  --cor-texto-secundario: var(--cor-neutra-700);
  --cor-texto-tenue: var(--cor-neutra-500);
  --cor-texto-invertido: var(--cor-neutra-000);

  /* --------------------------------------------------------------------------
     STATUS DE ESTOQUE

     Cada status tem exatamente uma cor no sistema inteiro. O operador que
     confere no recebimento e o que separa precisam ler o mesmo chip da mesma
     forma.

     Cor NUNCA é o único sinal. Todo status aparece com rótulo em texto, e
     ícone quando o espaço permitir — daltonismo e monitor descalibrado
     existem no galpão.
     -------------------------------------------------------------------------- */
  --cor-status-liberado: #1b7f4b;
  --cor-status-liberado-fundo: #e6f4ec;

  --cor-status-quarentena: #b7791f;
  --cor-status-quarentena-fundo: #fdf3e2;

  /* Ciano, deliberadamente afastado do azul da marca. Ver nota no cabeçalho. */
  --cor-status-inspecao: #0e7490;
  --cor-status-inspecao-fundo: #e3f2f6;

  --cor-status-reprovado: #b02a2a;
  --cor-status-reprovado-fundo: #fbeaea;

  --cor-status-vencido: #8a1c3b;
  --cor-status-vencido-fundo: #f9e7ec;

  --cor-status-bloqueado: #4a5159;
  --cor-status-bloqueado-fundo: #eceef0;

  --cor-status-avariado: #c2591a;
  --cor-status-avariado-fundo: #fdeee3;

  --cor-status-devolvido: #6b4fa8;
  --cor-status-devolvido-fundo: #f0ecf9;

  /* --------------------------------------------------------------------------
     FEEDBACK — resultado de ação, não estado de mercadoria
     -------------------------------------------------------------------------- */
  --cor-sucesso: #1b7f4b;
  --cor-sucesso-fundo: #e6f4ec;
  --cor-aviso: #b7791f;
  --cor-aviso-fundo: #fdf3e2;
  --cor-erro: #b02a2a;
  --cor-erro-fundo: #fbeaea;
  --cor-info: var(--cor-primaria-500);
  --cor-info-fundo: var(--cor-primaria-100);

  /* --------------------------------------------------------------------------
     TIPOGRAFIA

     Open Sans, a fonte da interface. Empacotada em wwwroot/fonts e servida pela
     própria aplicação — nenhum recurso vem de CDN: o sistema opera em galpão, e
     fonte de fora é ponto de falha sem dono.

     A pilha de reserva existe para o instante entre a página e a fonte carregar,
     e para a máquina que por algum motivo não a receba.

     Código, lote, posição e quantidade continuam em --fonte-mono, com numeral
     tabular. Não é preferência: sem largura fixa de dígito a coluna desalinha, e
     é aí que o conferente escorrega de linha.
     -------------------------------------------------------------------------- */
  --fonte-base: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas,
    "Liberation Mono", monospace;

  --fonte-tam-xs: 0.75rem;   /* 12px — legenda, rodapé de tabela */
  --fonte-tam-sm: 0.8125rem; /* 13px — grid em densidade de operação */
  --fonte-tam-md: 0.875rem;  /* 14px — corpo padrão */
  --fonte-tam-lg: 1rem;      /* 16px — formulário confortável */
  --fonte-tam-xl: 1.25rem;   /* 20px — título de seção */
  --fonte-tam-2xl: 1.5rem;   /* 24px — título de página */
  --fonte-tam-3xl: 2rem;     /* 32px — número em destaque no painel */

  --fonte-peso-normal: 400;
  --fonte-peso-medio: 500;
  --fonte-peso-forte: 600;

  --fonte-altura-compacta: 1.25;
  --fonte-altura-padrao: 1.5;

  /* Rótulo em caixa alta precisa de respiro entre letras: sem ele, maiúscula colada vira bloco e
     custa a ser lida em pé, na frente de uma prateleira. Só para caixa alta — em texto normal,
     este valor separa palavra. */
  --fonte-espaco-rotulo: 0.1em;

  /* --------------------------------------------------------------------------
     ESPAÇAMENTO — escala de 4px
     -------------------------------------------------------------------------- */
  --espaco-0: 0;
  --espaco-1: 0.25rem; /*  4px */
  --espaco-2: 0.5rem;  /*  8px */
  --espaco-3: 0.75rem; /* 12px */
  --espaco-4: 1rem;    /* 16px */
  --espaco-5: 1.5rem;  /* 24px */
  --espaco-6: 2rem;    /* 32px */
  --espaco-7: 3rem;    /* 48px */

  /* Gaps nomeados por uso */
  --gap-campo: var(--espaco-3);   /* entre campos de um formulário */
  --gap-secao: var(--espaco-5);   /* entre blocos de uma página   */
  --gap-pagina: var(--espaco-6);  /* margem interna da página     */

  /* --------------------------------------------------------------------------
     CASCA — barra lateral, cabeçalho e camadas

     A barra recolhida tem exatamente a largura de um alvo de toque: recolhida,
     o ícone continua clicável de luva.
     -------------------------------------------------------------------------- */
  /* Superfície da barra lateral. Levemente azulada e mais escura que a página:
     separa o menu do conteúdo pelo tom, sem precisar de traço. O azul da marca
     continua significando só ação e navegação — que é a regra do próprio design
     system. Trocar a barra inteira de tom é mudar estas linhas. */
  --barra-fundo: var(--cor-primaria-050);
  --barra-borda: var(--cor-neutra-200);
  --barra-texto: var(--cor-neutra-800);
  /* O nome da empresa é o elemento mais forte da barra: no claro ele carrega o azul da
     marca; no escuro, branco puro — o azul sobre superfície escura deixaria de ser marca
     e passaria a ser texto apagado. */
  --barra-marca-nome: var(--cor-primaria-700);
  /* Não é --cor-texto-tenue: aquele tom foi calibrado sobre branco e não alcança 4,5:1 sobre a
     superfície da barra. Aqui vive o texto dos três estados obrigatórios — carregando, erro e
     nenhum item —, que é justamente onde contraste baixo custa caro. */
  --barra-texto-suave: var(--cor-neutra-600);
  --barra-secao-texto: var(--cor-neutra-600);
  --barra-icone: var(--cor-neutra-700);
  --barra-busca-fundo: var(--cor-primaria-100);
  --barra-item-hover: var(--cor-primaria-100);
  --barra-ativo-fundo: var(--cor-primaria-150);
  --barra-ativo-texto: var(--cor-primaria-800);
  --barra-ativo-marca: var(--cor-primaria-600);

  --barra-largura: 17.5rem;            /* 280px */
  --barra-largura-recolhida: 4rem;     /*  64px — igual a --alvo-min + folga */
  --barra-recuo-nivel: var(--espaco-4); /* recuo acumulado por nível da árvore */
  /* Cantos totalmente arredondados: o item ativo vira pílula, e é a pílula — não
     um traço na lateral — que marca onde a pessoa está.
     A altura é o alvo de toque mínimo, e não mais que isso: com uma dezena de
     itens na coluna, cada pixel a mais por linha é rolagem que o menu não
     precisa ter. Baixar daqui esbarra na regra de alvo mínimo do design system. */
  --barra-item-altura: var(--alvo-min); /*  44px */
  --barra-item-raio: var(--raio-pilula);
  --barra-item-recuo: var(--espaco-2); /* folga da pílula até a borda da barra */
  /* A legenda da seção é rótulo pequeno em caixa alta, no azul da navegação: ela
     separa assunto sem competir com o item, que é o que a pessoa veio procurar.
     O peso mora aqui porque passa de --fonte-peso-forte, que para em 600. */
  --barra-legenda-peso: 700;
  --barra-legenda-texto: var(--cor-primaria-600);
  --marca-simbolo: 2.75rem;            /*  44px — o símbolo é o que sobra recolhida */
  --marca-simbolo-portal: 4rem;        /*  64px — na entrada a marca é o assunto da tela */
  --marca-agua: 26rem;                 /* marca-d'água do portal de entrada */
  --editor-altura: 20rem;              /* 320px — área de escrita do editor de conteúdo */
  --topo-altura: 3.5rem;               /*  56px */
  --painel-largura: 24rem;             /* 384px — notificações e conta */

  /* Camadas. Números baixos e espaçados: sobreposição de tela vem do Radzen,
     que usa faixa própria bem acima desta. */
  --camada-conteudo: 1;
  --camada-topo: 10;
  --camada-barra: 20;
  --camada-painel: 30;

  /* --------------------------------------------------------------------------
     RAIO E BORDA
     -------------------------------------------------------------------------- */
  --raio-sm: 2px;
  --raio-md: 4px;
  --raio-lg: 8px;
  --raio-pilula: 999px;

  --borda-largura: 1px;
  --borda-largura-forte: 2px;

  /* --------------------------------------------------------------------------
     SOMBRA — três níveis, nada além disso
     -------------------------------------------------------------------------- */
  --sombra-1: 0 1px 2px rgba(20, 24, 29, 0.08);
  --sombra-2: 0 2px 8px rgba(20, 24, 29, 0.12);
  --sombra-3: 0 8px 24px rgba(20, 24, 29, 0.16);

  /* Elevação tingida de azul, para uso sobre superfície da marca — sombra neutra
     sobre fundo azulado acinzenta e a peça parece suja. */
  --sombra-marca-1: 0 1px 2px rgba(18, 66, 140, 0.12);
  --sombra-marca-2: 0 4px 12px rgba(18, 66, 140, 0.18);

  /* --------------------------------------------------------------------------
     FOCO — acessibilidade

     O operador navega muito mais por teclado que por mouse. O anel de foco é
     obrigatório e não pode ser removido em nenhum componente.
     -------------------------------------------------------------------------- */
  --foco-cor: var(--cor-primaria-500);
  --foco-anel: 0 0 0 3px rgba(18, 66, 140, 0.35);
  --foco-largura: 2px;

  /* --------------------------------------------------------------------------
     ALVO DE TOQUE — mínimo confortável para uso com luva
     -------------------------------------------------------------------------- */
  --alvo-min: 44px;

  /* --------------------------------------------------------------------------
     DENSIDADE — padrão

     Três densidades, aplicadas via [data-densidade] no elemento pai.
     Ver blocos abaixo.
     -------------------------------------------------------------------------- */
  --densidade-linha-altura: 40px;
  --densidade-fonte: var(--fonte-tam-md);
  --densidade-padding-x: var(--espaco-3);
  --densidade-padding-y: var(--espaco-2);

  /* --------------------------------------------------------------------------
     MOVIMENTO

     Três durações e uma curva só, para o sistema inteiro se mover do mesmo
     jeito. A curva desacelera no fim: o elemento chega ao lugar em vez de
     parar de repente.

     Movimento aqui orienta — mostra o que abriu, de onde saiu, o que respondeu
     ao clique. Nada de laço, nada de repetição infinita, nada que atrase a
     resposta de uma tela de operação.
     -------------------------------------------------------------------------- */
  --curva: cubic-bezier(0.2, 0, 0, 1);
  --transicao: 120ms var(--curva);        /* troca de cor, realce, foco   */
  --transicao-media: 200ms var(--curva);  /* deslocamento, escala, rotação */
  --transicao-longa: 280ms var(--curva);  /* entrada de painel e diálogo   */

  /* A única cadência de repetição do sistema, e ela tem um caso só: o cursor que pisca enquanto uma
     resposta é composta palavra por palavra. É a exceção ao "nada de repetição infinita" acima, e
     existe porque a alternativa é pior — sem o pulso, uma pausa do modelo entre duas frases é
     indistinguível do fim da resposta, e quem espera não sabe se pode ir embora.

     Um segundo, e não menos: mais rápido vira ruído no canto do olho de quem está lendo o texto que
     aparece ao lado. Fica atrás de `prefers-reduced-motion` como todo o resto. */
  --cadencia-pulso: 1s;
}

/* ============================================================================
   TEMA ESCURO

   O tema inteiro se resolve aqui, e por isso ele existe: nenhum componente
   declara cor literal, então trocar a escala troca o sistema todo — inclusive
   o Radzen, que consome estes mesmos tokens por design-system.radzen.css.

   A base é o azul da marca, não cinza: o fundo profundo é o mesmo azul-marinho
   do símbolo (#031229), e a escala neutra é tingida de 216° para o sistema não
   ficar com duas famílias de azul disputando.

   Duas escalas se invertem de papel:
   - neutra: 000 passa a ser a superfície mais escura e 900 o texto mais claro.
   - primária: 050–200 continuam sendo "fundo tênue" e 500–800 "ação", só que
     agora o fundo tênue é azul profundo e a ação é azul claro. Inverter os
     números quebraria todo componente que já os usa pelo papel.
   ============================================================================ */

[data-tema="escuro"] {
  color-scheme: dark;

  /* Neutros tingidos de azul-marinho. Mesma matiz da marca. */
  --cor-neutra-000: #061529;
  --cor-neutra-050: #041123;
  --cor-neutra-100: #0a1f3a;
  --cor-neutra-200: #14304f;
  --cor-neutra-300: #22456b;
  --cor-neutra-400: #4a6a91;
  --cor-neutra-500: #7e97b5;
  /* Apoio sobre superfície escura: precisa de 6:1 para continuar lendo como
     secundário sem virar ruído. */
  --cor-neutra-600: #9fb3cb;
  --cor-neutra-700: #c2d0e0;
  --cor-neutra-800: #dde6f0;
  --cor-neutra-900: #f2f6fa;

  /* Primária: o papel de cada degrau é o mesmo; o que muda é o lado da escala. */
  --cor-primaria-900: #cfe0f7;
  --cor-primaria-800: #a9c7ee;
  --cor-primaria-700: #2f68b8;
  --cor-primaria-600: #3b74c4;
  --cor-primaria-500: #4a83d1;
  --cor-primaria-400: #6c9ddd;
  --cor-primaria-300: #8fb6e7;
  --cor-primaria-200: #1d3f6d;
  --cor-primaria-150: #193a63;
  --cor-primaria-100: #14314f;
  --cor-primaria-050: #0d2440;

  /* Texto sobre superfície saturada continua branco: o botão primário e a coluna
     da marca seguem sendo azul, e inverter isto apagaria o rótulo deles. */
  --cor-texto-invertido: #ffffff;
  --cor-marca-contraste: #ffffff;

  /* Status: a matiz é a mesma — a leitura do chip não pode mudar com o tema —,
     clareada para ler sobre superfície escura, e o fundo do chip vira tinta
     escura em vez de pastel, que sobre fundo escuro brilharia. */
  --cor-status-liberado: #4ade80;
  --cor-status-liberado-fundo: #0f2e1f;
  --cor-status-quarentena: #e8b45c;
  --cor-status-quarentena-fundo: #33260d;
  --cor-status-inspecao: #4bb8d4;
  --cor-status-inspecao-fundo: #0d2c36;
  --cor-status-reprovado: #f08a8a;
  --cor-status-reprovado-fundo: #3a1616;
  --cor-status-vencido: #e8809d;
  --cor-status-vencido-fundo: #35111d;
  --cor-status-bloqueado: #a8b3bd;
  --cor-status-bloqueado-fundo: #232a31;
  --cor-status-avariado: #f0a06a;
  --cor-status-avariado-fundo: #37200f;
  --cor-status-devolvido: #b39ce0;
  --cor-status-devolvido-fundo: #241c38;

  --cor-sucesso: #4ade80;
  --cor-sucesso-fundo: #0f2e1f;
  --cor-aviso: #e8b45c;
  --cor-aviso-fundo: #33260d;
  --cor-erro: #f08a8a;
  --cor-erro-fundo: #3a1616;
  --cor-info: var(--cor-primaria-400);
  --cor-info-fundo: var(--cor-primaria-100);

  /* Barra lateral: o azul da marca com rótulo branco, que é o pedido. */
  --barra-fundo: #082041;
  --barra-borda: #14304f;
  --barra-texto: #eaf1f9;
  --barra-marca-nome: #ffffff;
  --barra-texto-suave: #9fb3cb;
  --barra-secao-texto: #9fb3cb;
  /* Um degrau mais claro que no tema claro, e não o mesmo --cor-primaria-600: no
     escuro ele vira #3b74c4, que sobre este fundo dá 3,4:1 — abaixo do mínimo de
     4,5:1 para texto deste corpo. O 400 sobe para 5,7:1 sem sair da família. */
  --barra-legenda-texto: var(--cor-primaria-400);
  --barra-icone: #c2d0e0;
  --barra-busca-fundo: #0d2b52;
  --barra-item-hover: #10345f;
  --barra-ativo-fundo: #17457a;
  --barra-ativo-texto: #ffffff;
  --barra-ativo-marca: #6c9ddd;

  /* Sombra sobre fundo escuro é sombra de verdade, não véu cinza. */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 2px 8px rgba(0, 0, 0, 0.5);
  --sombra-3: 0 8px 24px rgba(0, 0, 0, 0.6);
  --sombra-marca-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --sombra-marca-2: 0 4px 12px rgba(0, 0, 0, 0.55);

  --foco-anel: 0 0 0 3px rgba(107, 157, 221, 0.45);
}

/* ============================================================================
   DENSIDADE

   Tela de operação (conferência, separação, saldo) é densa: cabe mais linha
   sem rolagem e o operador enxerga o contexto inteiro.
   Tela de cadastro e configuração respira.

   Os valores nomeiam a forma, e não o uso: a densidade deixou de ser escolha do
   contexto e passou a ser preferência da pessoa, que a define para o sistema
   inteiro em Minha conta. "operacao" descrevia onde a densidade era usada, e
   viraria um nome sem referente na tela onde a escolha é feita.
   ============================================================================ */

[data-densidade="compacta"] {
  --densidade-linha-altura: 32px;
  --densidade-fonte: var(--fonte-tam-sm);
  --densidade-padding-x: var(--espaco-2);
  --densidade-padding-y: var(--espaco-1);
}

[data-densidade="confortavel"] {
  --densidade-linha-altura: 48px;
  --densidade-fonte: var(--fonte-tam-lg);
  --densidade-padding-x: var(--espaco-4);
  --densidade-padding-y: var(--espaco-3);
}

/* ============================================================================
   BASE
   ============================================================================ */

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: var(--fonte-base);
  font-size: var(--fonte-tam-md);
  line-height: var(--fonte-altura-padrao);
  color: var(--cor-texto);
  background-color: var(--cor-fundo-pagina);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: var(--foco-largura) solid var(--foco-cor);
  outline-offset: 2px;
  box-shadow: var(--foco-anel);
}

/* O sistema se move de propósito, mas movimento não é obrigatório: quem pediu
   menos animação no sistema operacional recebe a mesma interface parada. Vale
   para vestibular sensível e para máquina fraca de galpão, onde animação que
   engasga atrapalha mais do que orienta. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   UTILITÁRIOS DE DOMÍNIO

   São poucos de propósito. Utilitário genérico vira Tailwind caseiro e
   espalha decisão visual pelo markup.
   ============================================================================ */

/* Texto que só o leitor de tela recebe — legenda de fieldset, rótulo de ação por
   ícone. `display: none` não serve: o que some da tela some também da leitura. */
.wms-oculta-visualmente {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* Código, lote, posição e quantidade. Numeral tabular alinha a coluna e o
   operador confere caractere a caractere sem escorregar de linha. */
.wms-codigo,
.wms-quantidade {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

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

/* Chip de status. A classe modificadora define a cor; o texto do rótulo é
   sempre renderizado junto. */
.wms-status {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: var(--espaco-1) var(--espaco-2);
  border-radius: var(--raio-pilula);
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-medio);
  line-height: var(--fonte-altura-compacta);
  white-space: nowrap;
}

.wms-status--liberado {
  color: var(--cor-status-liberado);
  background: var(--cor-status-liberado-fundo);
}
.wms-status--quarentena {
  color: var(--cor-status-quarentena);
  background: var(--cor-status-quarentena-fundo);
}
.wms-status--inspecao {
  color: var(--cor-status-inspecao);
  background: var(--cor-status-inspecao-fundo);
}
.wms-status--reprovado {
  color: var(--cor-status-reprovado);
  background: var(--cor-status-reprovado-fundo);
}
.wms-status--vencido {
  color: var(--cor-status-vencido);
  background: var(--cor-status-vencido-fundo);
}
.wms-status--bloqueado {
  color: var(--cor-status-bloqueado);
  background: var(--cor-status-bloqueado-fundo);
}
.wms-status--avariado {
  color: var(--cor-status-avariado);
  background: var(--cor-status-avariado-fundo);
}
.wms-status--devolvido {
  color: var(--cor-status-devolvido);
  background: var(--cor-status-devolvido-fundo);
}

/* Validade próxima do vencimento. O prazo do alerta vem de parâmetro de
   sistema; aqui fica só a aparência. */
.wms-validade--alerta {
  color: var(--cor-aviso);
  font-weight: var(--fonte-peso-forte);
}

.wms-validade--vencida {
  color: var(--cor-status-vencido);
  font-weight: var(--fonte-peso-forte);
}

/* ============================================================================
   IMPRESSÃO — romaneio, ficha de contagem, espelho
   ============================================================================ */

@media print {
  body {
    background: var(--cor-neutra-000);
    font-size: var(--fonte-tam-sm);
  }

  .wms-nao-imprimir {
    display: none !important;
  }
}