/* =============================================================================
   responsivo.css — camada de responsividade para celular
   WMS Distrinox
   -----------------------------------------------------------------------------
   Carregar SEMPRE por último, depois de boostrap.css / styles.css / mystyles.css
   / flash_message.css. Este arquivo só contém regras dentro de @media, então
   NADA muda no desktop (>= 992px). Para desativar tudo, basta remover a linha
   <link> das páginas.

   Por que precisa de !important: as páginas têm largura fixa em atributo
   style= no próprio elemento (ex.: <div class="col-md-3" style="width:250px">).
   Uma regra de folha de estilo só vence um style inline se for !important.

   Escape hatch: adicione a classe "sem-mobile" em qualquer elemento que deva
   manter o layout original no celular.
   ========================================================================== */


/* =============================================================================
   1. CELULAR — até 767px
   ========================================================================== */
@media (max-width: 767px) {

  /* --- base: nada pode estourar a largura da tela --------------------------- */
  html {
    -webkit-text-size-adjust: 100%;   /* impede o iOS de inflar texto sozinho */
    text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  canvas,
  video,
  iframe,
  embed {
    max-width: 100%;
    height: auto;
  }

  .container,
  .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .row {
    margin-left: -6px !important;
    margin-right: -6px !important;
  }


  /* --- grid: anula as larguras fixas em style= inline ----------------------- *
   * As páginas usam só col-md-*, que no Bootstrap 3 só vale a partir de 992px.
   * Abaixo disso as colunas já empilhariam — o que quebra é o style="width:250px"
   * cravado no mesmo div. Aqui a coluna volta a ocupar a linha inteira.        */
  [class*="col-"]:not(.sem-mobile) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* o espaçamento padrão de 30px entre campos gera scroll demais no celular */
  .row-wrap > [class^="col-"]:not(.sem-mobile),
  .row-wrap > [class*=" col-"]:not(.sem-mobile) {
    margin-bottom: 10px !important;
  }


  /* --- campos de formulário ------------------------------------------------ *
   * font-size 16px é obrigatório: abaixo disso o iOS dá zoom automático ao
   * focar o campo e desalinha a tela inteira — problema clássico em conferência
   * de código de barras, onde o campo recebe foco a cada leitura.              */
  .form-control,
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="date"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
    border-radius: 4px !important;
  }

  textarea {
    min-height: 92px !important;
  }

  /* teclado numérico e leitura de código: dá para digitar sem errar */
  input[type="number"],
  input[inputmode="numeric"] {
    font-size: 17px !important;
    letter-spacing: 0.5px;
  }

  .input-group {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .input-group > .form-control,
  .input-group > .input-group-btn,
  .input-group > .input-group-addon {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* rótulos de 11px são ilegíveis em pé no armazém */
  label,
  .control-label {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin: 0 0 4px 0 !important;
    font-weight: 600;
  }


  /* --- botões -------------------------------------------------------------- *
   * As páginas limitam botões a max-width 70–140px e usam margin-top:19px para
   * alinhar com o campo ao lado. No celular o campo já está em cima, então a
   * margem vira buraco e o botão vira alvo pequeno demais para o dedo.
   * 44px é o mínimo recomendado para toque.                                    */
  .btn,
  a.btn,
  button,
  input[type="submit"],
  input[type="button"] {
    max-width: none !important;
    min-height: 46px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    padding: 12px 16px !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    white-space: normal !important;
    vertical-align: top;
  }

  /* dois ou três botões na mesma linha dividem o espaço em vez de estourar */
  [class*="col-"] > .btn,
  [class*="col-"] > a.btn {
    display: inline-block !important;
    width: auto !important;
    min-width: 46%;
    margin-right: 6px !important;
  }

  /* botão sozinho na coluna ocupa a linha toda — mais fácil de acertar */
  [class*="col-"] > .btn:only-child,
  [class*="col-"] > a.btn:only-child {
    width: 100% !important;
    min-width: 0;
    margin-right: 0 !important;
  }


  /* --- menu (flexnav) ------------------------------------------------------ */
  .flexnav-menu-button {
    min-height: 48px !important;
    line-height: 28px !important;
    font-size: 16px !important;
    padding: 10px 14px !important;
  }

  .flexnav li a {
    padding: 14px 15px !important;   /* 48px de altura de toque */
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  .flexnav .touch-button {
    width: 48px !important;
    height: 48px !important;
  }

  header.main .row > [class*="col-"] {
    margin-bottom: 0 !important;
  }

  .login-register {
    padding-left: 0 !important;
    margin-bottom: 0 !important;
    text-align: left;
  }

  .login-register > li {
    display: block !important;
    float: none !important;
  }

  .login-register > li > a {
    display: block !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
  }


  /* --- caixa "Fechar Requisição" (shopping-cart) --------------------------- *
   * É um dropdown absoluto de 250px preso à direita do item de menu. No celular
   * ele fica pendurado fora da tela e cria scroll horizontal. Aqui volta para
   * dentro. O :focus-within faz o toque abrir a caixa — no celular não existe
   * hover, então sem isso o conteúdo dela ficaria inacessível.                 */
  .login-register > li.shopping-cart,
  .shopping-cart {
    position: relative !important;
  }

  .shopping-cart .shopping-cart-box {
    left: auto !important;
    right: 0 !important;
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
  }

  .shopping-cart:focus-within .shopping-cart-box {
    opacity: 1 !important;
    filter: none !important;
    height: auto !important;
    overflow: visible !important;
  }


  /* --- tabelas e listas de resultado --------------------------------------- *
   * Tabela larga rola dentro dela mesma em vez de empurrar a página inteira.   */
  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  table.tabela-quebra {          /* opt-in: deixa a tabela quebrar linha */
    white-space: normal;
  }

  table th,
  table td {
    padding: 8px 10px !important;
    font-size: 14px !important;
  }

  /* lista de códigos usada nas telas de coleta (font-size 10px no original) */
  .list-codigo {
    font-size: 13px !important;
    max-height: none !important;
    flex-wrap: wrap !important;
    line-height: 1.4 !important;
    word-break: break-word;
  }


  /* --- títulos e textos ---------------------------------------------------- */
  h4 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 12px 0 8px !important;
  }

  h5 {
    font-size: 16px !important;
    margin: 10px 0 6px !important;
  }

  /* nenhum texto pode arrastar a página para os lados */
  p,
  span,
  div,
  li,
  .label,
  .alert {
    word-break: break-word;
    overflow-wrap: break-word;
  }


  /* --- mensagens de retorno ------------------------------------------------ */
  .flash-message,
  .form-alert,
  .alert {
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    left: 12px !important;
    right: 12px !important;
    font-size: 14px !important;
    padding: 12px 14px !important;
  }


  /* --- leitor de código de barras (codereader.aspx) ------------------------ */
  #interactive,
  #interactive video,
  #interactive canvas,
  #video-container,
  #video-container video,
  .viewport,
  .viewport video,
  .viewport canvas,
  #preview {
    width: 100% !important;
    max-width: 100% !important;
  }

  #video-container .close-button,
  #video-container .light-button {
    min-width: 88px;
    min-height: 46px !important;
    font-size: 15px !important;
  }

  #barCode {
    min-height: 44px !important;
    font-size: 16px !important;
  }


  /* --- assinatura (sign.aspx / signview.aspx) ------------------------------ *
   * A tela já é feita em vw/vh, mas o canvas de 95vw somado ao botão "Limpar"
   * estoura a linha e o canvas fica cortado à esquerda. Aqui a linha inteira
   * cabe: o botão fica com 44px fixos e o canvas ocupa todo o resto.          */
  .flex-row {
    width: 100% !important;
    max-width: 100% !important;
  }

  .flex-row > .wrapper {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  canvas#signature-pad {
    width: 100% !important;
    height: 50vh !important;
  }

  .clear-btn {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;      /* sem padding aqui: empurraria o botão para fora */
    margin: 0 !important;
  }

  button#clear {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 2px !important;
    margin: 0 !important;
  }

  button#submit,
  .submitenvio {
    width: 100% !important;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
  }
}


/* =============================================================================
   2. CELULAR DEITADO / TELA MUITO BAIXA — até 500px de altura
   Recupera espaço vertical quando o teclado abre.
   ========================================================================== */
@media (max-width: 767px) and (max-height: 500px) {

  .row-wrap > [class^="col-"],
  .row-wrap > [class*=" col-"] {
    margin-bottom: 6px !important;
  }

  .form-control,
  input[type="text"],
  input[type="number"],
  select {
    min-height: 42px !important;
    padding: 8px 10px !important;
  }

  .btn,
  a.btn {
    min-height: 42px !important;
    padding: 9px 14px !important;
  }

  h4 { margin: 6px 0 4px !important; }
}


/* =============================================================================
   3. FAIXA 768–991px (celular deitado, tablet pequeno)
   Nesta faixa col-md-* ainda não vale (só a partir de 992px), então tudo fica
   empilhado e sobra tela. Aqui os campos voltam a caber dois por linha.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {

  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .col-md-1:not(.sem-mobile),
  .col-md-2:not(.sem-mobile),
  .col-md-3:not(.sem-mobile),
  .col-md-4:not(.sem-mobile) {
    width: 50% !important;
    max-width: 50% !important;
    float: left !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .col-md-5:not(.sem-mobile),
  .col-md-6:not(.sem-mobile),
  .col-md-7:not(.sem-mobile),
  .col-md-8:not(.sem-mobile),
  .col-md-9:not(.sem-mobile),
  .col-md-10:not(.sem-mobile),
  .col-md-11:not(.sem-mobile),
  .col-md-12:not(.sem-mobile) {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .form-control,
  input[type="text"],
  input[type="number"],
  select {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    font-size: 16px !important;
  }

  .btn,
  a.btn {
    max-width: none !important;
    min-height: 42px !important;
    font-size: 15px !important;
    padding: 10px 14px !important;
    margin-top: 6px !important;
  }

  label {
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* =============================================================================
   4. IMPRESSÃO — some com menu e botões
   ========================================================================== */
@media print {

  header.main,
  .flexnav,
  .flexnav-menu-button,
  .login-register,
  .btn,
  a.btn,
  button {
    display: none !important;
  }

  .container {
    width: 100% !important;
    max-width: 100% !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }
}


/* =============================================================================
   5. GRADE DE PRODUTOS (PesqProd) — cartões da mesma linha com a mesma altura
   -----------------------------------------------------------------------------
   (05/09/2026) O .product-inner saía do code-behind com height:328px fixo, e as
   colunas col-md-4 são float: duas consequências que apareciam na tela —

     • o cartão de um produto com muitas localizações estourava os 328px e o
       conteúdo de baixo ficava cortado;
     • cada cartão da linha terminava numa altura diferente, então a tarja de
       estoque e os botões Visualizar/Reservas ficavam em níveis diferentes.

   Aqui a linha vira flex: os três cartões esticam juntos até a altura do mais
   alto, o .product-inner cresce com o conteúdo (height:auto) e o rodapé do
   cartão é empurrado para baixo com margin-top:auto, o que deixa estoque e
   botões sempre na mesma altura.
   ========================================================================== */

.grid-produtos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Como col-md-* só tem largura a partir de 992px, a largura de cada faixa é
   declarada aqui — senão o item flex encolheria até o tamanho do texto. */
.grid-produtos > div[class*="col-"] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  float: none;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .grid-produtos > div[class*="col-"] {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: 992px) {
  .grid-produtos > div[class*="col-"] {
    -ms-flex: 0 0 33.3333%;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

.grid-produtos .product-thumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
}

/* height:auto anula o height fixo que vinha inline do code-behind, para o caso
   de alguma cópia antiga do .aspx.cs ainda estar publicada. */
.grid-produtos .product-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  height: auto !important;
  /* O <img> vazio do topo do cartao saiu (correcao 14 na PesqProd.aspx.cs),
     entao o arredondamento das quatro pontas vem para ca. */
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

/* Empurra o rodapé (tarja de estoque + botões + CD/EtqReceber/EtqLoja) para o
   fim do cartão: é isto que mantém a linha nivelada. */
.grid-produtos .product-meta {
  margin-top: auto;
}

/* Reserva a altura de duas linhas de descrição: com isso um produto de nome
   curto não sobe o bloco inteiro em relação ao vizinho. */
.grid-produtos .product-title {
  min-height: 2.6em;
  line-height: 1.3em;
  word-break: break-word;
}

/* A lista de localizações pode vir com dezenas de endereços num produto só.
   Sem limite, esse produto esticava a linha inteira. Aqui ela rola dentro do
   próprio bloco e nada fica escondido. */
.grid-produtos .local-lista {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  max-height: 4.5em;
  overflow-y: auto;
  word-break: break-word;
}

.grid-produtos .product-desciption {
  word-break: break-word;
}

/* Codigo do produto: e' por ele que o conferente procura o item no cartao,
   entao sai maior que a descricao em volta e em negrito. (05/09/2026) */
.grid-produtos .produto-cod {
  color: #444;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4em;
  margin: 6px 0 0 0;
  word-break: break-word;
}

.grid-produtos .produto-cod b {
  font-weight: 700;
  color: #222;
}