/* ===========================================================================
   estoque.css — o que e SO deste sistema.
   ---------------------------------------------------------------------------
   Saiu de dentro do index.html em 10/set/2026, e o motivo foi um defeito real:
   o rascunho povoado (`_rascunho-povoado.html`) dizia no proprio comentario
   que era "o sistema com outros dados -- o CSS e o mesmo arquivo". Nao era.
   O index tinha 187 linhas de estilo proprio que o rascunho nunca teve, entao
   o andaime desenhava uma tela que nao existe, e aprovar nele nao provava nada.

   Agora sao dois <link> para ESTE arquivo. Copiar o bloco para o rascunho
   resolveria hoje e divergiria calado depois -- a mesma doenca do hub-ui.css
   copiado a mao, que ja deixou o Contratos rodando uma versao velha.

   A biblioteca compartilhada continua em /hub/v1/. Aqui mora so o que e do
   Estoque: a trava, a esteira, a caixinha de quantidade, o cartao do pedido.
   =========================================================================== */
  /* Este arquivo so acrescenta o que a biblioteca NAO tem. Onde ela tem peca,
     a peca dela e usada -- .tabela, .modal, .selo, .campo, .btn, .recado,
     .so-leitor, h2.cartao-titulo. Inventar equivalente proprio foi o que
     deixou o Estoque com outra cara em 07/set.

     Tres pecas quase viraram invencao minha hoje e nao viraram:
       .recado  ja existe, mas a posicao fixa mora no PAI .recados
       .dupla   ja existe e e OUTRA coisa (layout com painel de 356px)
       .so-leitor  ja e o rotulo que so o leitor de tela le
     Procurar antes de escrever achou as tres. */

  /* ------------------------------------------------------ a fileira de acao
     Busca larga + botoes, numa linha so, colada no topo do miolo. A busca ja
     nasce com o cursor dentro: chegou material, bipa; procurando peca, bipa. */
  .acoes-topo{ display:flex; align-items:end; gap:9px; margin-bottom:12px; flex-wrap:wrap; }
  .acoes-topo .f-busca{ flex:1; min-width:220px; }

  /* ------------------------------------------- o quadro: lugares + a lista
     Estoque e a pergunta "o que eu tenho e ONDE esta". Por isso o lugar e
     uma coluna permanente, e nao um filtro escondido num menu. */
  .quadro{ display:grid; grid-template-columns:206px minmax(0,1fr);
           border:1px solid var(--borda); border-radius:var(--raio-cx);
           background:var(--papel); overflow:hidden; }
  @media (max-width:760px){
    /* no celular a coluna vira uma faixa que rola de lado, para nao comer
       metade da tela numa lista que e navegacao, nao conteudo */
    .quadro{ grid-template-columns:1fr; }
    .lugares{ border-right:0; border-bottom:1px solid var(--borda);
              display:flex; gap:4px; overflow-x:auto; padding:8px; }
    .lugares h2, .lugares .n, .lugares .rail-vazio{ display:none; }
    .lugares button{ width:auto; white-space:nowrap; }
  }

  .lugares{ border-right:1px solid var(--borda); background:var(--fundo); padding:8px 6px; }
  /* h2, e nao h3: o titulo da tela e h1 e pular de h1 para h3 e violacao de
     ordem de cabecalho. Nasceu exatamente ao acrescentar o h1 por cima de uma
     estrutura que ja usava h3 -- e o defeito mais facil de criar consertando
     o defeito anterior. */
  .lugares h2{ font:600 10px Inter,sans-serif; letter-spacing:.09em; text-transform:uppercase;
               color:var(--texto-3); padding:9px 8px 5px; margin:0; }
  .lugares button{ display:flex; width:100%; align-items:center; gap:7px; appearance:none;
                   border:0; background:transparent; color:var(--texto); cursor:pointer;
                   text-align:left; font:400 13.5px Inter,sans-serif; padding:6px 8px;
                   border-radius:7px; min-height:24px; }
  .lugares button:hover{ background:var(--papel); }
  .lugares button[aria-current="true"]{ background:var(--roxo); color:#fff; font-weight:500; }
  .lugares .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lugares .n{ margin-left:auto; font:500 11.5px Inter,sans-serif;
               font-variant-numeric:tabular-nums; color:var(--texto-3); }
  .lugares button[aria-current="true"] .n{ color:rgba(255,255,255,.82); }
  .lugares .ico{ width:14px; text-align:center; opacity:.75; flex:0 0 auto; }
  .lugares .rail-vazio{ font-size:12px; color:var(--texto-3); padding:2px 9px 6px; margin:0; }

  /* A lista e densa de proposito: o Sidney recusou o desenho anterior por
     "muito espacado". A peca .tabela da biblioteca respira 10px em cima e
     embaixo; aqui a linha e mais baixa, e so aqui. */
  .quadro .tabela th, .quadro .tabela td{ padding:7px 12px; }
  .quadro .tabela{ min-width:760px; }
  .fraco{ color:var(--texto-3); }
  .rodape-n{ display:flex; gap:15px; padding:8px 12px; border-top:1px solid var(--borda);
             background:var(--fundo); font-size:12px; color:var(--texto-2); flex-wrap:wrap; }

  /* dois campos lado a lado. NAO usa .dupla: aquela e o layout de pagina com
     painel lateral de 356px, e usa-la aqui esmagaria o segundo campo. */
  .dupla-c{ display:grid; grid-template-columns:1fr 1fr; gap:0 13px; }
  @media (max-width:520px){ .dupla-c{ grid-template-columns:1fr; } }

  /* ------------------------------------------------------------ a janelinha
     Base .modal da biblioteca. O que se acrescenta e so a divisao em topo,
     corpo e pe -- a janela do Estoque tem passo e rodape com dica, e a peca
     nua nao tem onde por isso. */
  .modal{ padding:0; }
  .jan-topo{ display:flex; align-items:baseline; gap:9px; padding:13px 16px;
             border-bottom:1px solid var(--borda); }
  .jan-topo h2{ font:600 15.5px Sora,Inter,sans-serif; margin:0; }
  .jan-passo{ margin-left:auto; font:500 11.5px Inter,sans-serif; color:var(--texto-3); }
  .jan-corpo{ padding:15px 16px; }
  .jan-pe{ display:flex; gap:9px; align-items:center; padding:12px 16px; margin:0;
           border-top:1px solid var(--borda); background:var(--fundo); flex-wrap:wrap; }
  .jan-pe .dir{ margin-left:auto; display:flex; gap:9px; }
  .resumo{ font-size:12.5px; color:var(--texto-2); background:var(--fundo);
           border:1px solid var(--borda); border-radius:9px; padding:9px 11px; margin-bottom:13px; }
  .resumo b{ color:var(--texto); font-weight:600; }

  /* ------------------------------------------- o contador dos dez seriais
     "Diz que sao dez e o sistema exige os dez." O contador e a cara dessa
     regra. A trava DE VERDADE esta no banco, em entrada_material -- esta aqui
     e gentileza, para a pessoa ver antes de tentar. Se um dia divergirem,
     quem vale e o banco. */
  .contador{ display:flex; align-items:center; gap:10px; margin-bottom:8px;
             font-size:12.5px; color:var(--texto-2); }
  .contador .num{ margin-left:auto; font:600 14px Sora,Inter,sans-serif;
                  font-variant-numeric:tabular-nums; color:var(--roxo); }
  .barrinha{ height:5px; border-radius:3px; background:var(--borda);
             overflow:hidden; margin-bottom:12px; }
  .barrinha i{ display:block; height:100%; background:var(--roxo); border-radius:3px;
               transition:width .15s ease-out; }
  .bip{ display:flex; gap:7px; margin-bottom:10px; }
  .bip input{ flex:1; font:500 14.5px Inter,sans-serif; letter-spacing:.4px;
              border:2px solid var(--roxo); border-radius:9px; }
  .lista-s{ list-style:none; margin:0 0 11px; padding:0; border:1px solid var(--borda);
            border-radius:9px; max-height:168px; overflow-y:auto; }
  .lista-s li{ display:flex; align-items:center; gap:9px; padding:5px 11px; font-size:12.5px;
               border-bottom:1px solid var(--borda); }
  .lista-s li:last-child{ border-bottom:0; }
  .lista-s .i{ width:19px; color:var(--texto-3); font-size:11px;
               font-variant-numeric:tabular-nums; flex:0 0 auto; }
  .lista-s .v{ font-variant-numeric:tabular-nums; letter-spacing:.3px; }
  .lista-s .esp{ color:var(--texto-3); font-style:italic; }
  .lista-s .selo{ margin-left:auto; }
  .pilha-2{ display:flex; gap:7px; margin-bottom:11px; flex-wrap:wrap; }
  .pilha-2 .btn{ flex:1; min-width:132px; }


  /* ------------------------------------------------ a ficha e a linha do tempo
     .btn-perigo, .campo-linha, .selo, .trava e .modal sao da biblioteca. O que
     esta aqui e so o que ela nao tem. */
  .ficha-cx{ display:grid; grid-template-columns:auto 1fr; gap:5px 14px; font-size:12.5px;
             background:var(--fundo); border:1px solid var(--borda); border-radius:9px;
             padding:10px 12px; margin-bottom:13px; align-items:baseline; }
  .linha-t{ list-style:none; margin:0; padding:0; font-size:12.5px; }
  .linha-t li{ display:grid; grid-template-columns:52px 1fr; gap:10px; padding:6px 0;
               border-bottom:1px solid var(--borda); align-items:baseline; }
  .linha-t li:last-child{ border-bottom:0; }
  .linha-t .q{ color:var(--texto-3); font-variant-numeric:tabular-nums; font-size:11.5px; }

  /* A LINHA DA TABELA E A PORTA DA FICHA. Ela precisa parecer clicavel e
     precisa ser alcancavel pelo teclado -- por isso tabindex no <tr> e um
     estado de foco visivel, senao so quem usa mouse abre a ficha. */
  .clicavel{ cursor:pointer; }
  .clicavel:hover td{ background:var(--roxo-tenue); }
  .clicavel:focus-visible{ outline:2px solid var(--roxo); outline-offset:-2px; }

  /* a escolha entre apagar e dar baixa: alvo grande, com o exemplo embaixo */
  .escolha{ display:flex; gap:9px; align-items:flex-start; padding:9px 10px; cursor:pointer;
            border:1px solid var(--borda); border-radius:9px; font-size:13px; }
  .escolha:hover{ border-color:var(--roxo); }
  .escolha input{ width:auto; min-height:auto; margin-top:2px; flex:0 0 auto; }
  .escolha b{ font-weight:600; }
  .escolha .ex{ display:block; color:var(--texto-2); font-size:12px; margin-top:3px; font-weight:400; }
  .escolha-off{ opacity:.55; cursor:not-allowed; }
  .escolha-off:hover{ border-color:var(--borda); }
  .escolha + .trava{ margin-top:7px; }

  /* o lapis ao lado do nome da marca, na coluna de lugares */
  .lug-linha{ display:flex; gap:2px; align-items:center; }
  .lug-linha > button:first-child{ flex:1; min-width:0; }
  .lapis{ appearance:none; border:0; background:transparent; color:var(--texto-3);
          cursor:pointer; border-radius:6px; padding:6px 7px; font-size:12px;
          min-height:24px; flex:0 0 auto; }
  .lapis:hover{ background:var(--papel); color:var(--roxo); }

  /* A frase que fecha a conta. role="status" no HTML: quem nao ve precisa
     ouvir "faltam 7" a cada bipe, senao chega no fim sem saber que faltava. */
  /* ------------------------------------------------ o cartao de um pedido
     A fila de pedidos NAO e uma tabela: cada pedido tem cabecalho proprio
     (quem pediu, para onde, ha quanto tempo) e uma lista dentro. Numa tabela
     isso vira uma linha que nao cabe e um "ver mais" a mais para tocar.
     `.quadro` da biblioteca e um layout de duas colunas -- este aqui e' so a
     moldura, entao tem nome proprio em vez de torcer aquele. */
  /* ------------------------------------- celula de duas linhas numa tabela
     NAO usar `.chave` aqui. A biblioteca tem DUAS regras com esse nome: a
     celula-chave da tabela (`.tabela .chave`) e o INTERRUPTOR (`.chave`, com
     `line-height:0`). Um `<td class="chave">` com duas linhas herda o
     line-height do interruptor e as duas linhas desenham UMA SOBRE A OUTRA --
     visto na tela em 10/set/2026, com o nome da peca e a categoria empilhados
     no mesmo pixel. O `white-space:nowrap` da celula ainda por cima impede a
     quebra. Esta classe da o peso e a cor da celula-chave sem nada disso. */
  .chave-duas{ font-weight:var(--peso-forte); color:var(--texto);
               line-height:1.35; white-space:normal; }

  .quadro-simples{ border:1px solid var(--borda); border-radius:var(--raio-cx);
                   background:var(--papel); padding:13px 14px; }

  /* A caixinha de quantidade. Alinhada a direita e com digitos tabulares
     porque a coluna e para SOMAR com o olho: 3 embaixo de 12 embaixo de 6. */
  .qtd-cx{ width:74px; text-align:right; font-variant-numeric:tabular-nums;
           border:1px solid var(--borda); border-radius:7px; padding:7px 9px;
           background:var(--papel); color:var(--texto); font:600 14px Inter,sans-serif; }
  .qtd-cx:focus-visible{ outline:2px solid var(--roxo); outline-offset:1px; }

  .trava{ font-size:12px; border-radius:8px; padding:7px 10px;
          background:var(--a1-bg); color:var(--a1); }
  .trava-ok{ background:var(--ok-bg); color:var(--ok); }
  .trava-aten{ background:var(--a3-bg); color:var(--a3); }

/* ------------------------------------------ a linha da tela de separar
   NAO e tabela. A janela tem 460px; uma tabela de tres colunas com campo de
   digitacao empurrava a coluna "Separou" para fora -- e ela e a unica em que a
   pessoa DIGITA. Visto na tela em 10/set/2026, duas vezes: cortou com quatro
   colunas e cortou de novo com tres. Bloco empilhado cabe em qualquer largura,
   que e o que uma tela de balcao em tablet precisa. */
.item-sep{ border:1px solid var(--borda); border-radius:var(--raio-cx);
           padding:11px 12px; margin-bottom:8px; background:var(--papel); }
.item-sep:last-of-type{ margin-bottom:0; }
.sep-topo{ display:flex; align-items:flex-start; justify-content:space-between;
           gap:12px; margin-bottom:2px; }
.sep-num{ display:flex; align-items:center; gap:8px; white-space:nowrap;
          font-variant-numeric:tabular-nums; }
.sep-num .pediu{ font-size:12.5px; color:var(--texto-2); }

/* ---------------------------------------- o alvo de marcar uma peca
   A caixa nativa tem 18x18px. A regra da casa aceita alvo menor que 24px
   SO quando o controle esta dentro de um rotulo, porque ai o rotulo estende
   o alvo -- e aqui nao havia rotulo nenhum: os 18px eram tudo. Medido em
   11/set/2026, depois de "nao consigo marcar os itens".
   O rotulo agora ocupa a celula inteira (48x55px), e a caixa continua sendo
   o que se ve. Nao muda o desenho; muda o que da para acertar com o dedo. */
.cx-cel{ display:inline-flex; align-items:center; justify-content:center;
         padding:11px 13px; margin:-11px -13px; cursor:pointer; }
.cx-cel:focus-within{ outline:2px solid var(--roxo); outline-offset:-2px; border-radius:8px; }