/* ============================================================
   css/telas/pedidos.css — CSS da área "pedidos".

   DE ONDE VEM: o mock aprovado tem um bloco inteiro chamado
   "LOTE C", com todos os seletores prefixados ".lc-". Lote C é
   exatamente este conjunto de quatro áreas — pedidos · cliente ·
   entrada · semlogin —, e as peças dele são compartilhadas pelas
   quatro. Elas são declaradas AQUI, UMA VEZ SÓ, com o prefixo
   ".lc-" do mock: o prefixo já isola (nenhuma outra área do site
   usa ".lc-"), e declarar quatro cópias prefixadas por área é
   justamente o padrão que faz duas cópias divergirem.
   As regras que mexem em peça da BASE vêm prefixadas por área,
   como o README manda.

   NENHUM NÚMERO NOVO DE ESCALA: altura, raio, letra e folga são
   os medidos no mock (escala compacta v.A). Nenhuma cor crua:
   tudo sai de css/tokens.css.
   ============================================================ */

/* ---------- atalho de volta, no topo da ficha --------------- */
.lc-volta{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex:0 0 auto}
.lc-esq{transform:scaleX(-1)}
.lc-volta-tx{font-size:12.5px;color:var(--acao-texto);font-weight:500;
  background:none;border:0;font-family:inherit;cursor:pointer;padding:0;
  min-height:28px}
.lc-volta-tx:focus-visible,.lc-ord:focus-visible{outline:2px solid var(--foco);
  outline-offset:2px}

/* ---------- título de coluna que ordena --------------------
   É o <th> da base; o botão não muda altura, letra nem cor. */
.lc-ord{display:inline-flex;align-items:center;gap:5px;background:none;border:0;
  font:inherit;font-family:var(--fonte-mono);font-size:11px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--txt-apoio);cursor:pointer;padding:0;
  text-align:left}
.lc-ord.on{color:var(--txt-forte)}
.lc-seta{width:12px;height:12px;color:var(--txt-forte)}
.lc-seta.sobe{transform:rotate(180deg)}

/* ---------- campo de busca do cabeçalho do painel ----------
   A mesma medida do .buscam da base (28 px, raio 7, letra
   11,5), com campo de verdade dentro. */
.lc-busca{height:28px;width:152px;border:1px solid var(--borda-controle);
  border-radius:7px;display:inline-flex;align-items:center;gap:7px;padding:0 9px;
  background:var(--fundo-campo);flex:0 0 auto}
.lc-busca .i{width:13px;height:13px;color:var(--txt-apoio);flex:0 0 auto}
.lc-busca input{border:0;background:none;font:inherit;font-size:11.5px;
  color:var(--txt-forte);width:100%;min-width:0;outline:none;padding:0;
  -webkit-appearance:none;appearance:none}
.lc-busca input::placeholder{color:var(--txt-fraco)}
.lc-busca input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.lc-busca:focus-within{border-color:var(--foco);box-shadow:0 0 0 1px var(--foco)}
.lc-busca-larga{width:176px;white-space:nowrap}

/* ---------- aba que não é tabela: painel com corpo rolável -- */
.lc-pane{overflow-y:auto;padding:14px}
.lc-pane .subcartao{margin-bottom:4px}
.lc-pane-pares{padding:0 4px}
.lc-pane-lista{padding:0 4px}
.lc-pane-lista .bt.off{opacity:.45}
.lc-subcab{font-family:var(--fonte-mono);font-size:11.5px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--txt-apoio);font-weight:400;
  margin:16px 0 7px;padding-bottom:6px;border-bottom:1px solid var(--borda-sutil)}
.lc-pane>.lc-subcab:first-child,.lc-pane>.faixa+.lc-subcab{margin-top:2px}

/* ---------- linha de documento, com o selo de liberação ----- */
.lc-doc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 0}
.lc-doc+.lc-doc{border-top:1px solid var(--borda-sutil);margin-top:5px;padding-top:7px}
.lc-doc .cf{flex:1 1 150px;min-width:0}
.lc-doc .bt{height:24px;font-size:11px;padding:0 8px}

/* ---------- atalhos entre telas irmãs ----------------------- */
.lc-irmas{margin-top:14px;flex:0 0 auto}
.lc-irmas .col{display:flex;flex-direction:column;gap:2px}
.lc-irmas .atalho{margin-top:6px;cursor:pointer}
.lc-irmas .atalho .i{width:12px;height:12px;color:var(--acao-texto)}

/* o .atalho da base é um <span>; nestas áreas ele também é botão,
   para quem usa teclado alcançar — mesma cara, mesma altura */
.area-pedidos .atalho,.area-cliente .atalho,.area-entrada .atalho{
  background:none;border:0;font:inherit;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;color:var(--acao-texto);
  font-size:11.5px;font-weight:500;min-height:24px}
.area-pedidos .atalho .i,.area-cliente .atalho .i,.area-entrada .atalho .i{
  width:13px;height:13px;color:var(--acao-texto)}
.area-pedidos .atalho:focus-visible,.area-cliente .atalho:focus-visible,
.area-entrada .atalho:focus-visible{outline:2px solid var(--foco);outline-offset:2px}

/* ---------- a chave de liga e desliga (Trava de input) ------ */
.lc-ajuste{display:flex;align-items:center;gap:12px;padding:2px 0 14px;
  border-bottom:1px solid var(--borda-sutil);margin-bottom:6px}
.lc-chave{width:32px;height:18px;border-radius:var(--r-pilula);flex:0 0 auto;
  background:var(--fundo-card);border:1px solid var(--borda-controle);
  position:relative;cursor:pointer;padding:0}
.lc-chave::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;
  border-radius:50%;background:var(--borda-controle);transition:left .12s linear}
.lc-chave.on{background:var(--acao);border-color:var(--acao-escuro)}
.lc-chave.on::after{left:16px;background:var(--sobre-acento)}
.lc-chave:disabled{cursor:default;opacity:.45}
.lc-chave:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.lc-ajuste-tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.lc-ajuste-tx b{font-size:13px;font-weight:600;color:var(--txt-forte)}
.lc-ajuste-tx i{font-size:11.5px;color:var(--txt-apoio);line-height:1.4}
.lc-ajuste-pares{padding:0 4px}

/* ---------- corpo de painel que cresce (a nota fica no pé) -- */
.lc-cresce{flex:1 1 auto;min-height:0}

/* ---------- o rodapé do cartão de resumo encosta no pé -------
   Medido a 1440 px: a grade iguala a ALTURA dos quatro cartões,
   mas o .kpi da base não é coluna, e por isso a faixa de atalho
   do cartão de legenda curta parava no meio, deixando um vão
   branco embaixo. O cartão vira coluna e a faixa desce. Nenhuma
   medida muda: é só para onde a sobra vai. */
.area-pedidos .kpi,.area-cliente .kpi,.area-entrada .kpi{
  display:flex;flex-direction:column}
.area-pedidos .kpi .cima,.area-cliente .kpi .cima,.area-entrada .kpi .cima{
  flex:1 1 auto}
.area-pedidos .kpi .baixo,.area-cliente .kpi .baixo,.area-entrada .kpi .baixo{
  flex:0 0 auto}

/* ============================================================
   REGRAS QUE TOCAM PEÇA DA BASE — prefixadas por área, como o
   README manda. São os três acertos que o mock já fazia no
   bloco "JUNÇÃO DOS LOTES", agora só dentro destas áreas.
   ============================================================ */

/* 1. .etq é inline-flex e come o espaço antes do .fx: ele volta
      como regra, não como texto */
.area-pedidos .etq+.fx,.area-pedidos .fx+.etq,.area-pedidos .etq+.etq,
.area-cliente .etq+.fx,.area-cliente .fx+.etq,.area-cliente .etq+.etq,
.area-entrada .etq+.etq,.area-semlogin .etq+.etq{margin-left:6px}

/* 2. .pares .par da base tem 52 px de altura mínima, o que deixa
      a aba mais alta que as outras listas. Volta à altura de
      linha do resto (44 px), que é a do mock aprovado */
.area-pedidos .pares .par,.area-cliente .pares .par{min-height:44px}

/* 3. painel que se mede pelo conteúdo não encolhe. A base só tem
      dois casos (.crescer e o da grade de altura cravada) */
.area-pedidos .comdados>.painel:not(.crescer):not(.lado),
.area-cliente .comdados>.painel:not(.crescer):not(.lado),
.area-cliente .lc-espaco>.painel,
.area-pedidos .la-pilha>.painel{flex:0 0 auto}
.area-pedidos .la-pilha>.painel>.tabwrap,
.area-cliente .comdados>.painel>.tabwrap{flex:0 0 auto;overflow:visible}

/* 4. linha de lista que abre algo mostra que é clicável */
.area-pedidos .pcorpo.lista>[data-ir],
.area-cliente .pcorpo.lista>[data-doc]{cursor:pointer}
.area-cliente .pcorpo.lista>[data-doc]:hover{background:var(--fundo-alt)}

/* 5. a barra do gesto (.barraflutua) tem 960 px de largura mínima
      na base, e a base só a desflutua a 860 px. Entre 860 e 1180
      ela estourava a lâmina de lado: aqui ela encosta nas margens
      em vez de crescer. (A 860 px a base já faz o resto.) */
@media (max-width:1180px){
  .area-pedidos .barraflutua{min-width:0;left:16px;right:16px;transform:none;width:auto}
}

/* ---------- lugar celular: só o que a base ainda não faz -----
   A base já cuida de alvo de 44 px, cabeçalho de painel que
   quebra, .barraflutua que para de flutuar, .duplo e .la-duplo
   em uma coluna e tabela que vira cartão. A escala NÃO sobe. */
@media (max-width:860px){
  .area-pedidos .lc-pane,.area-cliente .lc-pane{padding:12px}
  .area-pedidos .lc-pane .subcartao,.area-cliente .lc-pane .subcartao{
    flex-direction:column;gap:10px}
  .area-pedidos .lc-pane .subcartao .div,
  .area-cliente .lc-pane .subcartao .div{width:auto;height:1px}
  .area-pedidos .lc-busca,.area-cliente .lc-busca,.area-entrada .lc-busca{
    height:44px;width:100%}
  .area-pedidos .lc-ajuste{flex-wrap:wrap;row-gap:8px}
  .area-pedidos .lc-ajuste-tx{flex:1 1 180px}
  /* a célula de ação do cartão respira em vez de empilhar botão
     colado em legenda */
  .area-pedidos .acoesl,.area-cliente .acoesl{row-gap:8px}
  .area-pedidos .acoesl .bt,.area-cliente .acoesl .bt{height:auto;min-height:44px}
}

/* ============================================================
   REMENDO MEDIDO — o @media de 860 px da BASE está anulado.

   O QUE SE MEDIU (05/10, nas 13 telas desta etapa, a 390 e 768 px):
   css/componentes.css é carregado DEPOIS de css/base.css e
   redefine, SEM media query e com a mesma especificidade, 20 dos
   seletores que o @media (max-width:860px) da base ajusta. O que
   vem depois ganha, e por isso o ajuste de celular da base nunca
   entra. Medido: a 390 px os cartões de resumo ficavam em QUATRO
   colunas de 77 px, com o conteúdo cortado pelo overflow:hidden
   do painel — não havia rolagem lateral porque o desenho estava
   sendo CORTADO, o que é pior.

   Seletores anulados: .kpis · .kpi .cima · .kpi .val · .duplo ·
   .grade22 · .painel.crescer · .painel>.cab · .painel>.cab .dir ·
   .tab · .tabwrap · .grupobt · .grupobt .gb · .notap ·
   .barraflutua · .bf-dir · .canvas · .palco · .rosca · .busca ·
   .seletor · .seletor select.

   O CONSERTO DE VERDADE é de arquivo compartilhado, e não é desta
   etapa: ou componentes.css ganha o próprio @media, ou a ordem
   dos dois arquivos muda no index.html. PEDIDO REGISTRADO no fim
   da etapa. Enquanto isso, as regras abaixo repõem OS MESMOS
   VALORES da base, só dentro das quatro áreas desta etapa. Nenhum
   número novo: tudo copiado de css/base.css @media 860.
   ============================================================ */
@media (max-width:860px){
  .area-pedidos .kpis,.area-cliente .kpis,.area-entrada .kpis,.area-semlogin .kpis{
    grid-template-columns:1fr 1fr;gap:10px}
  .area-pedidos .kpi .cima,.area-cliente .kpi .cima,.area-entrada .kpi .cima{
    padding:13px 12px 12px}
  .area-pedidos .kpi .val,.area-cliente .kpi .val,.area-entrada .kpi .val{font-size:21px}
  .area-pedidos .kpi .cont2 b,.area-cliente .kpi .cont2 b{font-size:21px}
  .area-pedidos .duplo,.area-cliente .duplo{grid-template-columns:1fr;height:auto}
  .area-pedidos .painel.crescer,.area-cliente .painel.crescer,
  .area-entrada .painel.crescer{min-height:0}
  .area-pedidos .painel>.cab,.area-cliente .painel>.cab,.area-entrada .painel>.cab{
    height:auto;min-height:44px;flex-wrap:wrap;padding:8px 12px;row-gap:6px}
  .area-pedidos .painel>.cab .dir,.area-cliente .painel>.cab .dir,
  .area-entrada .painel>.cab .dir{margin-left:0;flex-wrap:wrap;row-gap:6px}
  .area-pedidos .tabwrap,.area-cliente .tabwrap,.area-entrada .tabwrap{
    overflow-x:auto;overflow-y:hidden;padding:0;-webkit-overflow-scrolling:touch}
  .area-pedidos .grupobt,.area-cliente .grupobt,.area-entrada .grupobt{flex-wrap:wrap}
  .area-pedidos .grupobt .gb,.area-cliente .grupobt .gb,
  .area-entrada .grupobt .gb{white-space:nowrap}
  .area-pedidos .notap,.area-cliente .notap,.area-entrada .notap{padding:10px 12px}
  .area-pedidos .barraflutua{position:static;transform:none;min-width:0;
    flex-wrap:wrap;row-gap:10px;margin-top:14px;left:auto;right:auto;
    width:auto;box-shadow:none}
  .area-pedidos .bf-dir{margin-left:0}
}

/* ============================================================
   ALVO DE TOQUE DE 44 PX — o piso do Estilos v.A §1.2.
   Medido a 390 e 768 px: o que ficava abaixo eram peças de
   marcação da base usadas como botão (o <a> da faixa, o .atalho
   do pé do painel) e as peças desta etapa (o atalho de volta, a
   chave da trava, o campo de busca). Tudo prefixado por área.
   ============================================================ */
@media (max-width:860px){
  /* o campo de busca: o rótulo cresce, e o campo cresce com ele */
  .area-pedidos .lc-busca input,.area-cliente .lc-busca input,
  .area-entrada .lc-busca input{align-self:stretch;height:auto}
  /* o atalho de volta */
  .area-pedidos .lc-volta-tx,.area-cliente .lc-volta-tx{min-height:44px}
  .area-pedidos .lc-volta .bt.quad,.area-cliente .lc-volta .bt.quad{width:44px}
  /* o atalho do pé do painel e o de telas irmãs */
  .area-pedidos .notap .atalho,.area-cliente .notap .atalho,
  .area-pedidos .lc-irmas .atalho{min-height:44px}
  /* O ATALHO ESCRITO DENTRO DA FAIXA é link em texto corrido: pôr
     44 px de altura nele abriria um buraco no meio da frase. O que
     cresce é a ÁREA DE TOQUE, por um pseudoelemento — o desenho e
     a entrelinha ficam exatamente onde estavam. */
  .area-pedidos .faixa a,.area-cliente .faixa a,.area-entrada .faixa a{
    position:relative}
  .area-pedidos .faixa a::after,.area-cliente .faixa a::after,
  .area-entrada .faixa a::after{content:"";position:absolute;left:0;right:0;
    top:50%;transform:translateY(-50%);height:44px}
  /* a chave da trava: o BOTÃO passa a medir 44 x 44 e o desenho
     continua o do mock — a pílula de 32 x 18 é desenhada dentro,
     centrada. Mesma cara, alvo de dedo de verdade. */
  .area-pedidos .lc-chave{width:44px;height:44px;background:none;border:0;
    border-radius:var(--r-ctrl)}
  .area-pedidos .lc-chave::before{content:"";position:absolute;left:6px;top:13px;
    width:32px;height:18px;border-radius:var(--r-pilula);box-sizing:border-box;
    background:var(--fundo-card);border:1px solid var(--borda-controle)}
  .area-pedidos .lc-chave.on::before{background:var(--acao);
    border-color:var(--acao-escuro)}
  .area-pedidos .lc-chave::after{left:8px;top:15px}
  .area-pedidos .lc-chave.on::after{left:22px}
}

/* ============================================================
   CARTÃO DE TABELA NO CELULAR ESTREITO — medido a 390 px.
   O .tab.vira-cartao da base põe o rótulo da coluna e TODO o
   conteúdo da célula na MESMA linha (cada <span> é um item de
   flex). Com duas ou três peças por célula — como as desta área,
   que carregam contagem, selo e motivo —, a linha passava da
   borda do cartão. Aqui o rótulo sobe para a própria linha e as
   peças empilham. Nenhuma medida de letra muda.
   ============================================================ */
@media (max-width:560px){
  .area-pedidos .tab.vira-cartao td,.area-cliente .tab.vira-cartao td,
  .area-entrada .tab.vira-cartao td{flex-wrap:wrap;row-gap:4px}
  .area-pedidos .tab.vira-cartao td::before,
  .area-cliente .tab.vira-cartao td::before,
  .area-entrada .tab.vira-cartao td::before{flex:0 0 100%;margin-bottom:1px}
  .area-pedidos .tab.vira-cartao td>*,.area-cliente .tab.vira-cartao td>*,
  .area-entrada .tab.vira-cartao td>*{flex:1 1 100%;min-width:0}
  .area-pedidos .cob.mini b,.area-cliente .cob.mini b{min-width:0;width:auto}
  .area-pedidos .acoesl .legl,.area-cliente .acoesl .legl{max-width:none}
}

/* ============================================================
   A marca "a validar no mock" é nowrap na base, e o texto desta
   etapa é longo: nestas áreas ela quebra em vez de passar da
   borda. Medido a 1440 px, em Produtos e em Serviço contratado.
   ============================================================ */
.area-pedidos .la-val,.area-cliente .la-val,
.area-entrada .la-val,.area-semlogin .la-val{white-space:normal;height:auto;
  min-height:19px;padding:2px 6px;line-height:1.35;max-width:100%}