@charset "UTF-8";

/* =============================================================================
   wms-tema.css — Tema Corredor
   Distrinox / DXInfo — 05/09/2026

   O QUE É
     Uma folha de estilo que vai POR CIMA do Bootstrap 3 que as telas já
     carregam. Não depende de nenhuma mudança no HTML. Para tirar o tema de uma
     tela, basta remover o <link> dela — nada mais volta atrás.

   ONDE ENTRA (sempre por ÚLTIMO, depois do responsivo.css):
     <link rel="stylesheet" href="wms-tema.css" />

   A REGRA DO TEMA
     A cor mais forte da tela diz em qual base você está gravando. As três
     unidades (Ribeirão azul, Itajaí amarelo, Jardinópolis vermelho) e os quatro
     estados de separação são as ÚNICAS coisas saturadas. Botões, cabeçalho,
     menu e tabelas ficam em grafite. Escrever contagem na base errada é um erro
     que este sistema já cometeu; o visual ajuda a não repetir.

   SOBRE OS !important
     As telas têm style="" no próprio HTML — larguras fixas (width: 300px),
     max-width de botão (max-width:80px), margin-top: 20px. Estilo inline vence
     qualquer folha, então as poucas propriedades que brigam com ele levam
     !important. Cada um está marcado com "/* inline *​/" e existe só por isso.
     Se um dia os style="" saírem do HTML, esses !important podem sair junto.

   FONTES
     Hospedadas em assets/fonts/ de propósito: o aparelho do conferente pode
     não ter internet no galpão, e link para Google Fonts falharia calado.
   ============================================================================= */


/* =============================================================================
   1. FONTES
   ========================================================================== */

@font-face {
  font-family: 'Barlow WMS';
  src: url('assets/fonts/barlow-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow WMS';
  src: url('assets/fonts/barlow-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow WMS';
  src: url('assets/fonts/barlow-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Cond WMS';
  src: url('assets/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Cond WMS';
  src: url('assets/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono WMS';
  src: url('assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono WMS';
  src: url('assets/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}


/* =============================================================================
   2. TOKENS
   ========================================================================== */

:root {
  --wms-fonte:      'Barlow WMS', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --wms-fonte-cond: 'Barlow Cond WMS', 'Arial Narrow', var(--wms-fonte);
  --wms-fonte-cod:  'Plex Mono WMS', ui-monospace, Consolas, 'Courier New', monospace;

  --wms-fundo:      #EDEFEE;
  --wms-papel:      #FFFFFF;
  --wms-tinta:      #16211F;
  --wms-tinta-2:    #5C6B68;
  --wms-tinta-3:    #8A9794;
  --wms-linha:      #DCE1DF;
  --wms-chrome:     #16211F;
  --wms-chrome-2:   #243330;
  --wms-foco:       #0E5C63;

  --wms-ok:         #2E7D5B;  --wms-ok-bg:   #E9F2ED;
  --wms-andando:    #0E5C63;  --wms-and-bg:  #E7EFEF;
  --wms-erro:       #C0392B;  --wms-erro-bg: #FAECEA;
  --wms-atencao:    #B26A00;  --wms-aten-bg: #FBF1DF; /* ocre: distinto do amarelo de Itajai */

  /* Versoes CLARAS das mesmas matizes, para quando o botao fica sobre a
     faixa escura. Mesma cor, outra luminosidade. */
  --wms-ok-claro:      #79D2A6;
  --wms-atencao-claro: #F2B85C;
  --wms-andando-claro: #7FC9CE;
  --wms-erro-claro:    #FF9E94;

  /* A InsColeta e' a tela do canhoto de entrega — outro dominio, nao
     enderecamento de gondola. Ganha matiz propria: ameixa. Nao colide com
     nenhuma das tres unidades nem com os outros verbos. */
  --wms-coleta:        #6B4A7A;
  --wms-coleta-claro:  #C0A2CE;
  --wms-feito:      #98A3A0;  --wms-feito-bg:#F3F5F4;

  /* Altura de toque. 46px é o mínimo confortável com luva. */
  --wms-toque: 46px;
}


/* =============================================================================
   3. BASE
   ========================================================================== */

body {
  background: var(--wms-fundo);
  color: var(--wms-tinta);
  font-family: var(--wms-fonte);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.global-wrap { background: var(--wms-fundo); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wms-fonte-cond);
  font-weight: 700;
  color: var(--wms-tinta);
  letter-spacing: .01em;
}

h1 { font-size: 32px; }
h2 { font-size: 27px; }
h3 { font-size: 23px; }
h4 { font-size: 21px; margin-top: 4px; }
h5 { font-size: 17px; }

/* Foco visível: no coletor a navegação por teclado do leitor depende disso. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--wms-foco);
  outline-offset: 2px;
}


/* =============================================================================
   4. FAIXA DO USUÁRIO (.top-main-area) + ETIQUETA DA UNIDADE
   ========================================================================== */

.top-main-area {
  background: var(--wms-chrome);
  color: #fff;
  padding: 10px 0 12px;
  border-bottom: 0;
}

.top-main-area label {
  font-family: var(--wms-fonte-cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-bottom: 3px;
}

.top-main-area p {
  color: rgba(255,255,255,.86);
  font-size: 13px;
  margin: 6px 0 0;
}

/* O "Local" e a etiqueta da unidade ficam lado a lado, sem quebrar. */
.top-main-area p b { display: inline-block; vertical-align: middle; }

/* A etiqueta vem do PageBase com as cores em style="" — as cores ficam como
   estão de propósito. Aqui só ganha corpo, para ser lida de relance. */
.top-main-area p b > span[style] {
  font-family: var(--wms-fonte-cond) !important;   /* inline */
  font-size: 12px !important;                      /* inline */
  font-weight: 700 !important;                     /* inline */
  letter-spacing: .09em !important;                /* inline */
  text-transform: uppercase;
  padding: 3px 9px !important;                     /* inline */
  border-radius: 2px !important;                   /* inline */
  line-height: 1.55 !important;                    /* inline */
}

/* LOGO
   Duas situacoes diferentes, e o mesmo max-height servia mal as duas:

   - LOGIN (index.aspx): o logo esta sozinho num col-md-12 e e' a unica marca
     da tela; o HTML pede height:80px no style="". O cap generico de 34px
     esmagava para menos da metade. Aqui ele fica com o tamanho que o autor
     pediu.
   - TELAS INTERNAS: o logo divide a barra com usuario, unidade e menu, e a
     barra e' compacta. 40px e' o teto.

   OBSERVACAO: o assets/img/logo.png tem FUNDO BRANCO, entao sobre a barra
   escura ele aparece como uma placa branca. Nao da' para resolver por CSS —
   precisa de um PNG com fundo transparente. */
.top-main-area .col-md-12 .logo img { max-height: none; width: auto; }
.top-main-area .logo img { max-height: 40px; width: auto; }

/* As telas de coleta (coletaprodIt, coletasaldo, coletaprodcodp, prodreserva)
   trazem o fundo das duas faixas em style="": um cinza #6b6a6ed0 na faixa do
   usuario e um azul-marinho #2A416B na faixa dos botoes. Estilo inline vence a
   folha, entao os seletores miram exatamente esses dois valores. Ficam sendo
   duas faixas, como sao hoje: a de cima identifica quem/onde, a de baixo e' a
   barra de acao. */
.top-main-area[style*="6b6a6e"] { background-color: var(--wms-chrome) !important; }   /* inline */
.top-main-area[style*="2A416B"],
.top-main-area[style*="2a416b"] {
  background-color: var(--wms-chrome-2) !important;                                    /* inline */
  border-top: 1px solid rgba(255,255,255,.10);
}

/* O texto da faixa do usuario vem em Courier no style="" da propria div. */
.top-main-area > .container > .row > div[style*="Courier"] {
  font-family: var(--wms-fonte-cod) !important;   /* inline */
  font-size: 13px !important;                     /* inline */
  color: rgba(255,255,255,.86) !important;        /* inline */
}

/* =============================================================================
   5. MENU (header.main + .flexnav)
   ========================================================================== */

header.main {
  background: var(--wms-chrome-2);
  border: 0;
  border-top: 1px solid rgba(255,255,255,.10);
  box-shadow: none;
}

.flexnav-menu-button {
  background: transparent;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 3px;
  color: #fff;
  font-family: var(--wms-fonte-cond);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  min-height: var(--wms-toque);
  line-height: 44px;
  padding: 0 16px;
}

.nav-pills.flexnav { background: transparent; }

.nav-pills.flexnav > li > a,
.flexnav > li > a {
  background: transparent;
  border-radius: 0;
  color: rgba(255,255,255,.84);
  font-family: var(--wms-fonte-cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 13px 15px;
  border-bottom: 3px solid transparent;
  min-height: var(--wms-toque);
}

.nav-pills.flexnav > li > a:hover,
.flexnav > li > a:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}

/* A página atual: PageBase.MenuEstatico() marca com class="active" */
.nav-pills.flexnav > li > a.active,
.nav-pills.flexnav > li.active > a,
.flexnav > li > a.active,
.flexnav > li.active > a {
  background: transparent;
  color: #fff;
  border-bottom-color: #fff;
}


/* =============================================================================
   6. FORMULÁRIOS
   ========================================================================== */

label {
  font-family: var(--wms-fonte-cond);
  font-size: 12px !important;      /* inline: as telas trazem font-size:11px */
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--wms-tinta-2);
  margin-bottom: 4px !important;   /* inline: as telas trazem margin:0px */
}

.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  height: var(--wms-toque);
  border: 1.5px solid var(--wms-linha);
  border-radius: 3px;
  background: var(--wms-papel);
  color: var(--wms-tinta);
  font-family: var(--wms-fonte);
  font-size: 16px;   /* 16px evita o zoom automático do iOS ao focar */
  padding: 0 12px;
  box-shadow: none;
}

textarea.form-control { height: auto; padding: 10px 12px; }

.form-control:focus {
  border-color: var(--wms-foco);
  box-shadow: 0 0 0 3px rgba(14,92,99,.16);
  outline: none;
}

.form-control::placeholder { color: var(--wms-tinta-3); }

/* Campos de código, quantidade e localização em monoespaçada: são lidos
   dígito a dígito e conferidos contra a etiqueta. */
input#vbusca, input#vbuscad, input#vbuscadi, input#vqtdprod,
input#vqtde, input#txtqtd, input#logbase,
input[type="number"].form-control {
  font-family: var(--wms-fonte-cod);
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* Some com as setinhas do input number: no coletor elas só atrapalham e
   dão meio toque errado. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

.input-group { margin-bottom: 8px; }


/* =============================================================================
   7. BOTÕES
   -----------------------------------------------------------------------------
   A cor do botão vem da paleta e diz O QUE ELE FAZ — não é enfeite:

     grafite   ação principal e navegação      .btn / .btn-primary   (47 usos)
     verde     confirma, grava, avança         .btn-success           (9 usos)
     ocre      atenção, inventário, locais     .btn-warning          (11 usos)
     petróleo  secundário, exportar, listar    .btn-info              (1 uso)
     vermelho  destrutivo, sair, remover       .btn-danger            (6 usos)
     branco    neutro                          .btn-default

   O ocre (#B26A00) é escuro de propósito: o amarelo de Itajaí (#F0AD4E) fica
   reservado para a etiqueta de unidade, e dois amarelos na mesma tela
   confundiriam "estou na base de Itajaí" com "botão de atenção".

   POR QUE TANTO !important AQUI
     O assets/css/styles.css declara "color: #fff !important" em .btn-info,
     .btn-success, .btn-warning, .btn-danger e .btn-inverse. Declaração
     !important só perde para outra !important, então uma regra normal deste
     arquivo NUNCA venceria — era o que deixava botão branco sobre branco. Os
     !important daqui existem para empatar e ganhar por vir depois.
   ========================================================================== */

.btn {
  min-height: var(--wms-toque);
  max-width: none !important;   /* inline: quase todo botão traz max-width:70~140px */
  padding: 0 14px !important;   /* inline */
  border-radius: 3px;
  border: 1.5px solid transparent;
  font-family: var(--wms-fonte-cond);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 43px;
  white-space: nowrap;
  box-shadow: none;
  text-shadow: none;
  background-color: var(--wms-tinta);
  border-color: var(--wms-tinta);
  color: #fff !important;
}

.btn:active { transform: translateY(1px); }

/* Cada variante: fundo da paleta, texto branco. */
.btn-primary  { background-color: var(--wms-tinta)   !important; border-color: var(--wms-tinta)   !important; color: #fff !important; }
.btn-success  { background-color: var(--wms-ok)      !important; border-color: var(--wms-ok)      !important; color: #fff !important; }
.btn-warning  { background-color: var(--wms-atencao) !important; border-color: var(--wms-atencao) !important; color: #fff !important; }
.btn-info     { background-color: var(--wms-andando) !important; border-color: var(--wms-andando) !important; color: #fff !important; }
.btn-danger   { background-color: var(--wms-erro)    !important; border-color: var(--wms-erro)    !important; color: #fff !important; }

/* Neutro: o único vazado. */
.btn-default {
  background-color: var(--wms-papel) !important;
  border-color: var(--wms-tinta) !important;
  color: var(--wms-tinta) !important;
}

/* Escurece no toque, sem trocar a matiz. */
.btn:hover, .btn:focus { filter: brightness(.88); }
.btn-default:hover, .btn-default:focus {
  filter: none;
  background-color: var(--wms-tinta) !important;
  color: #fff !important;
}

.btn-sm, .btn-xs {
  min-height: 38px;
  line-height: 35px;
  font-size: 13.5px;
  padding: 0 13px !important;   /* inline */
}

/* Botão dentro de linha de tabela (a lupa, o play, a tesoura): alvo quadrado. */
.table .btn, .table a.btn {
  padding: 0 12px !important;   /* inline */
  min-height: 38px;
  line-height: 35px;
  font-size: 13.5px;
}

/* -----------------------------------------------------------------------------
   Botões com a cor cravada no style="" do HTML ou do code-behind. Cada seletor
   mira o valor exato e traz a cor para a paleta em vez de neutralizar: o autor
   original quis distinguir essas ações, e a distinção continua — agora com as
   cores do sistema.
   -------------------------------------------------------------------------- */

/* "remover" das telas de endereçamento */
.btn[style*="cc1010"] {
  width: auto !important;                            /* inline */
  background-color: var(--wms-erro) !important;      /* inline */
  border-color: var(--wms-erro) !important;
  color: #fff !important;
}
/* "carregar locais" (darkorchid) e "Baixar Movimentação" (mediumslateblue) */
.btn[style*="darkorchid"],
.btn[style*="mediumslateblue"] {
  background-color: var(--wms-andando) !important;   /* inline */
  border-color: var(--wms-andando) !important;
  color: #fff !important;
}
/* "resetar locais" (chocolate) */
.btn[style*="chocolate"] {
  background-color: var(--wms-atencao) !important;   /* inline */
  border-color: var(--wms-atencao) !important;
  color: #fff !important;
}


/* -----------------------------------------------------------------------------
   COR POR VERBO — o que a ação faz com o dado
   -----------------------------------------------------------------------------
   Quase todo botão do sistema é .btn-primary (47 dos 74 usos), então a classe
   sozinha deixaria tudo grafite. O destino do link, porém, diz exatamente o que
   a tela faz — e isso dá para ler no CSS, sem tocar no HTML:

     petróleo   CONSULTA, só lê             queryprod, coletasaldo, PesqProd…
     verde      CRIA registro novo          insprodadress
     ameixa     COLETA / canhoto            InsColeta
     ocre       ALTERA o que já existe      changeprodadress, inventprodadress
     vermelho   REMOVE                      removeprodadress
     grafite    a operação central          pedsepar, coletaprod

   A regra vale no sistema inteiro, não só no menu da logística: o botão que
   leva para "Remover Produto - Endereço" fica vermelho em qualquer tela que o
   ofereça. Como mira o href, um link novo para uma dessas telas já nasce com a
   cor certa.
   -------------------------------------------------------------------------- */

/* consulta — só lê */
.btn[href*="queryprod"],
.btn[href*="coletasaldo"],
.btn[href*="PesqProd"],
.btn[href*="prodreserva"],
.btn[href*="DetProdN"] {
  background-color: var(--wms-andando) !important;   /* inline */
  border-color: var(--wms-andando) !important;
  color: #fff !important;
}

/* cria — insere registro novo */
.btn[href*="insprodadress"] {
  background-color: var(--wms-ok) !important;        /* inline */
  border-color: var(--wms-ok) !important;
  color: #fff !important;
}

/* coleta / canhoto de entrega — domínio próprio, matiz própria */
.btn[href*="InsColeta"],
.btn[href*="inscoleta"] {
  background-color: var(--wms-coleta) !important;    /* inline */
  border-color: var(--wms-coleta) !important;
  color: #fff !important;
}

/* altera — mexe no que já existe */
.btn[href*="changeprodadress"],
.btn[href*="inventprodadress"],
.btn[href*="insprodcnt"] {
  background-color: var(--wms-atencao) !important;   /* inline */
  border-color: var(--wms-atencao) !important;
  color: #fff !important;
}

/* remove — apaga */
.btn[href*="removeprodadress"] {
  background-color: var(--wms-erro) !important;      /* inline */
  border-color: var(--wms-erro) !important;
  color: #fff !important;
}

/* A operação central do CD fica grafite: é o caminho que o conferente usa o
   dia inteiro, e grafite é o que menos cansa. */
.btn[href*="pedsepar"],
.btn[href*="coletaprod"] {
  background-color: var(--wms-tinta) !important;     /* inline */
  border-color: var(--wms-tinta) !important;
  color: #fff !important;
}

/* -----------------------------------------------------------------------------
   BARRA DE AÇÃO DAS TELAS DE COLETA
   -----------------------------------------------------------------------------
   O HTML põe um botão por <div class="col-md-1">. Essa coluna é 8,33% a partir
   de 992px — estreita demais para um botão de 46px de altura, então ele
   transborda e encosta no vizinho; abaixo de 992px o col-md-* não tem largura,
   vira bloco e os botões empilham, comendo a tela do conferente.

   inline-block com largura automática resolve os dois casos: ficam lado a lado
   com respiro, e quebram linha sozinhos quando não couberem. Vale em qualquer
   largura, para a barra se comportar igual no monitor e no coletor.
   -------------------------------------------------------------------------- */
.top-main-area .col-md-1 {
  display: inline-block !important;   /* inline */
  float: none !important;             /* inline: o responsivo.css força float:none no celular */
  width: auto !important;             /* inline: e width:100% */
  max-width: none !important;         /* inline */
  vertical-align: top;
  padding: 0 !important;              /* inline */
  margin: 6px 8px 6px 0 !important;   /* inline */
}
.top-main-area .col-md-1 .btn { width: auto; }
.top-main-area .row { overflow: hidden; }

/* -----------------------------------------------------------------------------
   E a cor na barra escura.
   Fundo sólido escuro (petróleo, ocre, grafite) sobre a faixa grafite fica
   ilegível, então aqui o botão é vazado. Mas vazado TODO EM BRANCO apaga a
   distinção: "recarregar" e "carregar locais" viravam o mesmo botão, e são
   coisas diferentes.

   A saída é a borda e o texto levarem a cor da função. As cores da paleta são
   escuras de propósito — foram escolhidas para fundo claro — então sobre a
   faixa entram as versões CLARAS das mesmas matizes, declaradas nos tokens
   --wms-*-claro. A matiz é a mesma; muda só a luminosidade.

   Esta regra vem depois das de cor por verbo de propósito: precisa vencê-las.
   -------------------------------------------------------------------------- */
.top-main-area .btn {
  background-color: transparent !important;   /* inline */
  border-color: rgba(255,255,255,.45) !important;
  color: #fff !important;
}
.top-main-area .btn-success {
  border-color: var(--wms-ok-claro) !important;
  color: var(--wms-ok-claro) !important;
}
.top-main-area .btn-warning {
  border-color: var(--wms-atencao-claro) !important;
  color: var(--wms-atencao-claro) !important;
}
.top-main-area .btn-info {
  border-color: var(--wms-andando-claro) !important;
  color: var(--wms-andando-claro) !important;
}
.top-main-area .btn-danger {
  border-color: var(--wms-erro-claro) !important;
  color: var(--wms-erro-claro) !important;
}

.top-main-area .btn[href*="InsColeta"],
.top-main-area .btn[href*="inscoleta"] {
  border-color: var(--wms-coleta-claro) !important;
  color: var(--wms-coleta-claro) !important;
}

/* Ao tocar, inverte: a cor vira o fundo e o texto escurece. */
.top-main-area .btn:hover,
.top-main-area .btn:focus {
  background-color: #fff !important;          /* inline */
  border-color: #fff !important;
  color: var(--wms-tinta) !important;
  filter: none;
}
.top-main-area .btn-success:hover, .top-main-area .btn-success:focus {
  background-color: var(--wms-ok-claro) !important;      /* inline */
  border-color: var(--wms-ok-claro) !important;
  color: var(--wms-tinta) !important;
}
.top-main-area .btn-warning:hover, .top-main-area .btn-warning:focus {
  background-color: var(--wms-atencao-claro) !important; /* inline */
  border-color: var(--wms-atencao-claro) !important;
  color: var(--wms-tinta) !important;
}
.top-main-area .btn-info:hover, .top-main-area .btn-info:focus {
  background-color: var(--wms-andando-claro) !important; /* inline */
  border-color: var(--wms-andando-claro) !important;
  color: var(--wms-tinta) !important;
}
.top-main-area .btn-danger:hover, .top-main-area .btn-danger:focus {
  background-color: var(--wms-erro) !important;          /* inline */
  border-color: var(--wms-erro) !important;
  color: #fff !important;
}

/* =============================================================================
   7b. SELETOR DE TIPO DE BUSCA (PesqProd)
   -----------------------------------------------------------------------------
   As quatro opcoes (Codigo / Ean / Local / Descricao) vivem num .list-codigo
   com display:flex e SEM flex-wrap, dentro de um col-md-3. Nao cabem: a ultima
   saia cortada pelo campo de busca ao lado. Aqui elas quebram em duas linhas e
   ganham corpo de toque — 10px era pequeno demais para o dedo com luva.
   ========================================================================== */

.list-codigo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-height: none;
  gap: 2px 12px;
  font-family: var(--wms-fonte-cond);
  font-size: 13px;
}

.list-codigo .l-radio { margin: 2px 0; padding: 4px 2px; min-height: 32px; }

.list-codigo .l-radio span {
  font-family: var(--wms-fonte-cond);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--wms-tinta-2);
  padding: 0 4px;
}

.list-codigo .l-radio input:checked + span,
.list-codigo .l-radio input:checked ~ span { color: var(--wms-tinta); }

/* O ponto marcado usava #6743ee, que nao e' da paleta. */
.list-codigo .l-radio input:checked { box-shadow: inset 0 0 0 4px var(--wms-tinta); }


/* =============================================================================
   8. TABELAS
   ========================================================================== */

.table {
  background: var(--wms-papel);
  border: 1px solid var(--wms-linha);
  border-radius: 3px;
  margin-bottom: 12px;
  font-size: 14px;
}

.table > tbody > tr > td,
.table > thead > tr > th {
  border-top: 1px solid var(--wms-linha);
  padding: 10px 10px;
  vertical-align: middle;
}

.table > tbody > tr:first-child > td { border-top: 0; }

/* Cabeçalho: a primeira linha vem com class="active" do code-behind. */
.table > tbody > tr.active:first-child > td,
.table > thead > tr > th {
  background: var(--wms-fundo);
  font-family: var(--wms-fonte-cond);
  font-size: 12.5px !important;   /* inline: o code-behind põe font-size:14px */
  font-weight: 700 !important;    /* inline */
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wms-tinta-2);
  border-bottom: 1px solid var(--wms-linha);
}

/* Estado da separação: faixa à esquerda em vez de fundo chapado. Dá para
   varrer a lista sem ler o texto.
   (07/09/2026) A faixa passou de 4px para 6px nos estados que estao NA MAO DE
   ALGUEM — em separacao e pausado —, e o pausado ganhou cor propria: antes ele
   dividia a classe "info" com o "em separacao" e as duas linhas saiam iguais. */
.table > tbody > tr.success  > td:first-child { box-shadow: inset 4px 0 0 var(--wms-ok); }
.table > tbody > tr.info     > td:first-child { box-shadow: inset 6px 0 0 var(--wms-andando); }
.table > tbody > tr.warning  > td:first-child { box-shadow: inset 6px 0 0 var(--wms-atencao); }
.table > tbody > tr.danger   > td:first-child { box-shadow: inset 4px 0 0 var(--wms-erro); }

.table > tbody > tr.success  > td { background: var(--wms-ok-bg); }
.table > tbody > tr.info     > td { background: var(--wms-and-bg); }
.table > tbody > tr.warning  > td { background: var(--wms-aten-bg); }
.table > tbody > tr.danger   > td { background: var(--wms-erro-bg); }

/* A ETIQUETA DE ESTADO
   A faixa da esquerda resolve de longe, mas na coluna StatSep o texto saía
   igual ao resto da linha. Aqui ele vira etiqueta: quem está parado aparece
   sozinho na tela. Só "pausado" e "em separação" levam destaque forte — os
   outros estados ficam discretos de propósito, senão nada se destaca. */
.table td.wms-stat span {
  display: inline-block;
  font-family: var(--wms-fonte-cond);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 3px;
}

/* PAUSADO: parou e está esperando alguém. É o único cheio — chapado, para
   puxar o olho antes de qualquer outra linha. */
.table td.wms-stat span.wms-stat-pausado {
  color: #FFFFFF;
  background: var(--wms-atencao);
}

/* EM SEPARAÇÃO: está andando. Contornado, não cheio: presente sem competir
   com o pausado. */
.table td.wms-stat span.wms-stat-separando {
  color: var(--wms-andando);
  box-shadow: inset 0 0 0 1.5px var(--wms-andando);
}

/* Os demais ficam discretos de propósito. Se tudo se destaca, nada se
   destaca. */
.table td.wms-stat span.wms-stat-aseparar { color: var(--wms-ok); padding-left: 0; padding-right: 0; }
.table td.wms-stat span.wms-stat-erro     { color: var(--wms-erro); padding-left: 0; padding-right: 0; }
.table td.wms-stat span.wms-stat-pronto   { color: var(--wms-tinta-3); font-weight: 400; padding-left: 0; padding-right: 0; }

/* A primeira linha "active" é o cabeçalho; as demais são "Finalizado". */
.table > tbody > tr.active:not(:first-child) > td { background: var(--wms-feito-bg); }
.table > tbody > tr.active:not(:first-child) > td:first-child { box-shadow: inset 4px 0 0 var(--wms-feito); }

.table .text-color td { color: var(--wms-tinta); }

/* Números e códigos alinhados. */
.table td { font-variant-numeric: tabular-nums; }

.table-responsive { border: 0; }


/* =============================================================================
   9. CARTÕES DE PRODUTO (PesqProd)
   -----------------------------------------------------------------------------
   A grade em si já é flex pelo responsivo.css; aqui é só o acabamento.
   ========================================================================== */

.grid-produtos .product-thumb {
  border: 1px solid var(--wms-linha);
  box-shadow: none;
  border-radius: 3px;
  text-align: left;
}
.grid-produtos .product-thumb:hover { box-shadow: 0 1px 3px rgba(0,0,0,.10); }

.grid-produtos .product-inner { padding: 12px 13px 13px; border-radius: 3px; }

.grid-produtos .product-title {
  font-family: var(--wms-fonte);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  min-height: 2.6em;
}

.grid-produtos .produto-cod {
  font-family: var(--wms-fonte-cod);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.grid-produtos .local-lista {
  font-family: var(--wms-fonte-cod);
  font-size: 11.5px;
  line-height: 1.65;
  border-left: 2px solid var(--wms-linha);
  padding-left: 8px;
  font-variant-numeric: tabular-nums;
}

.grid-produtos .product-price {
  background: var(--wms-chrome);
  border-radius: 2px;
  font-family: var(--wms-fonte-cond);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}

.grid-produtos .product-actions-list { border-top: 1px dashed var(--wms-linha); }


/* =============================================================================
   10. PAGINAÇÃO
   ========================================================================== */

/* O prefixo "ul" não é enfeite: o styles.css escreve
   "ul.pagination li.active a", que tem um elemento a mais e vencia o seletor
   sem ele. Com o mesmo peso, quem carrega por último ganha — e este arquivo é
   o último. */
ul.pagination > li > a,
ul.pagination > li > span {
  min-width: 38px;
  min-height: 38px;
  line-height: 36px;
  text-align: center;
  border: 1px solid var(--wms-linha);
  background: var(--wms-papel);
  color: var(--wms-tinta-2);
  font-family: var(--wms-fonte-cod);
  font-size: 13px;
  border-radius: 3px;
  margin: 0 2px;
  font-variant-numeric: tabular-nums;
}

ul.pagination > li.active > a,
ul.pagination > li.active > span {
  background: var(--wms-tinta);
  border-color: var(--wms-tinta);
  color: #fff;
}

ul.pagination > li.disabled > a {
  border-color: transparent;
  background: transparent;
  color: var(--wms-tinta-3);
}


/* =============================================================================
   11. RODAPÉ
   ========================================================================== */

footer.main,
footer.main .footer-copyright {
  background: var(--wms-chrome);
  color: rgba(255,255,255,.55);
  border: 0;
}
footer.main .footer-copyright p { color: rgba(255,255,255,.55); font-size: 12.5px; }
/* O <img> do rodape traz width:100px no style="". Com um max-height por cima,
   o navegador aplica a largura cravada E corta a altura — a imagem sai
   ESMAGADA, nao reduzida. O width:auto devolve a proporcao; quem manda no
   tamanho passa a ser so' a altura. */
footer.main img {
  max-height: 30px;
  width: auto !important;   /* inline */
  height: auto;
  opacity: .75;
}

/* A faixa de contato do login traz background-color:#203864 no style="". */
footer.main .footer-top-area[style] {
  background-color: var(--wms-chrome-2) !important;   /* inline */
  color: rgba(255,255,255,.86) !important;            /* inline */
  padding: 18px 0;
}
footer.main .footer-top-area b {
  font-family: var(--wms-fonte-cond);
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}


/* =============================================================================
   12. CELULAR — o aparelho do conferente
   -----------------------------------------------------------------------------
   O responsivo.css já cuida das quebras de coluna; aqui é o que o tema
   acrescenta em cima disso.
   ========================================================================== */

@media (max-width: 767px) {

  body { font-size: 15px; }

  h4 { font-size: 20px; }

  /* Larguras fixas do HTML antigo (width:300px, width:160px, width:90px)
     estouram a tela do celular. */
  .container .col-md-3[style],
  .container .col-md-4[style],
  .container .col-md-6[style] {
    width: 100% !important;      /* inline */
    max-width: 100% !important;  /* inline */
    margin-right: 0 !important;  /* inline */
    margin-left: 0 !important;   /* inline */
  }

  /* O margin-top:20px que alinhava o botão com o campo ao lado não faz
     sentido quando o botão cai para a linha de baixo. */
  .btn[style] { margin-top: 8px !important; }   /* inline */

  /* Botão sozinho na linha ocupa a linha: alvo grande, sem mira. */
  .row-wrap > div > .btn,
  .row > div > .btn { width: 100%; }

  /* Dois botões lado a lado continuam lado a lado. */
  .row-wrap > div > .btn + .btn,
  .row > div > .btn + .btn { width: calc(50% - 4px); }
  .row-wrap > div > .btn:has(+ .btn),
  .row > div > .btn:has(+ .btn) { width: calc(50% - 4px); }

  /* Nem toda tabela das telas está dentro de .table-responsive; sem isto a
     de 4+ colunas empurra a página inteira para o lado no celular. */
  .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13.5px;
  }
  .table > tbody { display: table; width: 100%; }
  .table > tbody > tr > td { padding: 9px 8px; }

  .top-main-area { padding: 8px 0 10px; }
  .top-main-area .col-md-3 { padding-left: 12px; padding-right: 12px; }

}

/* Larguras fixas de container de botão também apertam no monitor, depois que o
   botão ganhou altura de toque. */
@media (min-width: 768px) {
  .row-wrap > div[style*="width: 160px"],
  .row > div[style*="width: 160px"] {
    width: auto !important;   /* inline */
    white-space: nowrap;
  }
}


/* =============================================================================
   13. AVISO DE "PROCESSANDO" (assets/js/wms-aguarde.js)
   -----------------------------------------------------------------------------
   A busca da pedsepar roda com CommandTimeout de 360s. Sem aviso, o conferente
   clica de novo achando que não pegou — e cada clique dispara outra consulta
   pesada. O painel só aparece depois de 300ms, para postback rápido não piscar.
   ========================================================================== */

/* (07/09/2026) Aqui estava "inset: 0", que e' atalho novo: Chrome 87 (fim de
   2020), Safari 14.1, Samsung Internet 14. Coletor e celular mais antigo
   simplesmente IGNORA a linha inteira — e um position:fixed sem top/left fica
   na posicao estatica dele, que e' o fim do <body>: o fundo escuro nao cobre
   nada e a caixa vai parar depois do rodape, fora da tela. No desktop, com
   navegador novo, funcionava. Escrito por extenso funciona em tudo. */
.wms-aguarde {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(22, 33, 31, .55);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}

.wms-aguarde.on { display: flex; }

.wms-aguarde-cx {
  background: var(--wms-papel);
  border-radius: 4px;
  padding: 26px 34px 24px;
  min-width: 230px;
  max-width: 82vw;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 14px 40px rgba(0,0,0,.28);
}

.wms-aguarde-giro {
  width: 38px;
  height: 38px;
  margin: 0 auto 16px;
  border: 3px solid var(--wms-linha);
  border-top-color: var(--wms-tinta);
  border-radius: 50%;
  animation: wms-gira .8s linear infinite;
}

@keyframes wms-gira { to { transform: rotate(360deg); } }

.wms-aguarde-txt {
  font-family: var(--wms-fonte-cond);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wms-tinta);
  line-height: 1.25;
}

/* (07/09/2026) A entrada do painel é ANIMAÇÃO, não temporizador de JavaScript.
   O iOS congela os timers da página assim que a navegação começa: o
   setTimeout que segurava 300ms para postback rápido não piscar nunca
   disparava, e o painel jamais aparecia no iPhone. Animação de CSS roda no
   compositor e continua andando com o JavaScript parado.
   (08/09/2026) A ENTRADA NÃO TEM MAIS ANIMAÇÃO NENHUMA, e isso é deliberado.
   Antes havia um fade — primeiro com 250ms de espera, depois só 120ms. Medido
   no navegador: no instante em que o postback dispara, dois quadros depois de
   o painel ser ligado, a opacidade ainda estava em ZERO. O navegador pintava,
   só que pintava transparente — e no iOS não há segunda chance de pintar
   depois que a navegação começa. Por isso o painel aparece cheio, de uma vez.
   O preço é postback rápido mostrar o aviso por um instante. É melhor do que
   não avisar nada. */

/* Os segundos correndo são o que diz que a tela não travou, numa consulta que
   pode levar minutos.
   (07/09/2026) Deixaram de ser escritos por setInterval e viraram uma FITA:
   uma coluna com um número por linha, rolada por @keyframes em passos de um
   segundo. Pelo mesmo motivo da animação acima — no iPhone o intervalo
   congela, a animação não.
   As alturas em pixel abaixo são o que faz a conta fechar: cada <span> tem
   18px, são 241 deles (0s..240s), e o keyframe sobe 240 x 18 = 4320px em 240
   passos. Mexeu numa, mexa nas outras. */
.wms-aguarde-seg {
  font-family: var(--wms-fonte-cod);
  font-size: 13px;
  color: var(--wms-tinta-3);
  font-variant-numeric: tabular-nums;
  margin-top: 7px;
  height: 18px;
  overflow: hidden;
}

.wms-aguarde-fita { animation: wms-conta 240s steps(240) forwards; }

.wms-aguarde-fita span {
  display: block;
  height: 18px;
  line-height: 18px;
}

@keyframes wms-conta { to { transform: translateY(-4320px); } }

/* Quem pediu menos movimento no aparelho não leva giro nenhum. */
@media (prefers-reduced-motion: reduce) {
  .wms-aguarde-giro { animation: none; border-top-color: var(--wms-linha); }
  .wms-aguarde { backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* O giro pode sair; a CONTAGEM não — sem ela o número não anda. */
}

@media print { .wms-aguarde { display: none !important; } }


/* =============================================================================
   14. IMPRESSÃO
   ========================================================================== */

@media print {
  .top-main-area, header.main, footer.main, .btn, .pagination { display: none !important; }
  body { background: #fff; color: #000; font-size: 12px; }
  .table { border-color: #999; }
}