/* Guti · produção — o que é só da LEITURA (fichas, saldos, divergências, pendências, cartão, boletim, rastreabilidade, exportação).
   Regras comuns ficam em ../producao.css; aqui entra o específico das telas de ler e conferir.
   Prefixo para classes novas: .leitura- */

/* ── ficha: a transcrição de origem acompanha a rolagem no laptop ── */
.ficha-origem { position: sticky; top: var(--e4); }
@media (max-width: 1000px) { .ficha-origem { position: static; } }

/* o fato, dito grande */
.ficha-fato { font-size: var(--t3); line-height: 1.45; margin: 0 0 var(--e2); }
.ficha-fato .num { font-size: 1.15em; }
.leitura-fato-meta { margin-top: var(--e2); }

/* ── tabelas de painel (tr.velho e tr.total.negativa subiram para producao.css) ── */
.tabela td .sub .estado { margin-top: 2px; }
/* (`.tabela td.n .sub { white-space: normal }` subiu para producao.css no fechamento do ciclo 2:
   a regra não é da leitura, vale para qualquer área que ponha um motivo numa célula numérica) */
/* (a `tr.leitura-linha` — a linha de leitura presa à linha de dado — saiu com a tabela de saldo do
   /fabrica/, que virou um cartão por insumo em 2026-09-05: a leitura é o `.pe-caixa` do cartão.
   Nenhum template do app usa mais a classe, e regra sem dono é regra que engana quem vier depois.) */

/* ── [ciclo 2 · área B] /fabrica/ ──
   A lista de providências deixou de se chamar .faltas (o nome é de templates/_faltas.html, a
   completude da batelada) e passou a ser o componente .pauta do sistema.
   (A pauta VAZIA era o modificador local `.leitura-sem-pauta`; no fechamento do ciclo ela virou
   `.bloco.pauta:has(> .vazio)` no sistema — é comportamento do componente, não desta área.) */
.bloco.pauta .pauta-o-que .codigo { font-size: .95em; }

/* ── [ciclo 2 · área B] /saldos/: o nome do insumo uma vez, os lotes abaixo ──
   Eram dez linhas seguidas repetindo "Polpa sabor da ilha · 200 kg ~ declarado", e no meio delas a
   única que importava. O nome subiu para uma linha de grupo; a primeira célula da linha de dado
   passou a ser o lote, que é o que distingue uma linha da outra. */
tr.leitura-grupo > th {
  text-align: left; font-size: var(--t1); font-weight: 600; color: var(--tinta);
  background: var(--superficie-2); padding: var(--e2) var(--e3);
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha-suave);
}
tr.leitura-grupo:first-child > th { border-top: 0; }
.tabela tr.leitura-grupo:hover > th { background: var(--superficie-2); }

/* ── [ciclo 2 · área B] /contagem/: o mapa do processo, visível ──
   escopo → contar → apurar → decidir → aplicar é a única explicação que a pessoa tem do que vai
   acontecer com ela; vale uma linha inteira, não uma nota de 12 px no canto. */
.leitura-etapas {
  display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3);
  list-style: none; padding: 0; margin: 0 0 var(--e4); font-size: var(--t0); color: var(--apagado);
}
.leitura-etapas > li { display: flex; align-items: baseline; gap: var(--e1); min-width: 0; }
/* a seta é ::after do item que NÃO é o último — assim, quando a linha quebra, ela fica presa ao fim
   da linha de cima e nunca abre a de baixo (é o padrão do `·` da .meta, no sistema §5). */
.leitura-etapas > li:not(:last-child)::after { content: "›"; color: var(--apagado-2); margin-left: var(--e1); }
.leitura-etapas strong { color: var(--tinta-2); font-weight: 600; }

/* o campo da contagem é o de quem conta em pé: grande, e o botão nunca ao lado dele no telefone */
.leitura-contar input[name="quantidade"] { font-size: var(--t3); }

/* ── filtros e contagens acima de uma lista ── */
.leitura-filtros { margin: 0 0 var(--e4); align-items: center; }   /* = .chips.filtros do sistema */

/* ── formulário curto no cabeçalho de página (o período de /movimentos/) ── */
.leitura-periodo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e2); }
.leitura-periodo label { display: flex; flex-direction: column; gap: var(--e1); font-size: var(--t0); color: var(--apagado); }
.leitura-periodo input[type="date"] { width: 11rem; font-size: var(--t1); padding: .35rem .5rem; }

/* ── rastreabilidade: os três sentidos lado a lado, um embaixo do outro no celular ── */
.leitura-sentidos .kv + .kv { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linha-suave); }
@media (max-width: 1240px) { .leitura-sentidos { grid-template-columns: 1fr; } }

/* ── lote: o cabeçalho de cada batelada da corrente ── */
.leitura-elo .leitura-div-cab { margin-bottom: var(--e3); }

/* ── o celular (R1): a linha de grupo e a linha de leitura dentro da tabela-lista ──
   Na lista cada <tr> vira um cartão; a linha de grupo não é um cartão, é um título, e a linha de
   leitura pertence ao cartão de cima — por isso as duas perdem a moldura. */
@media screen and (max-width: 700px) {
  /* o rótulo da tabela-lista herda o `nowrap` da coluna numérica, e um rótulo longo
     ("pelo que ele disse, no momento") passa por cima do valor. O número continua inteiro; o rótulo,
     que é palavra e não número, quebra. Medido em /contagem/<n>/ apurada, a 375 px. */
  .tabela.lista tbody td.n::before { white-space: normal; }
  .tabela.lista tbody tr.leitura-grupo {
    border: 0; border-radius: 0; padding: 0; background: none;
    margin: var(--e4) 0 var(--e2);
  }
  .tabela.lista tbody tr.leitura-grupo > th { display: block; background: none; border: 0; border-bottom: 1px solid var(--linha-forte); padding: 0 0 var(--e1); }
  .tabela.lista tbody tr.leitura-grupo:first-child { margin-top: 0; }
}

/* ── impressão: a ficha e o relatório sem o que é só de tela ── */
@media print {
  tr.leitura-grupo > th { background: none; border-bottom: 1px solid #999; }
  .leitura-outro-dia, .leitura-periodo, .leitura-busca, .leitura-filtros .chip:not(.ativo) { display: none !important; }
  .ficha-origem { position: static; }
  .cartao-diario ol > li.sexta::before { color: #000; }
}

/* ── [ciclo 3 · frente B] /saldos/: a SEGUNDA RÉGUA na linha de grupo (achado D) ──
   A projeção *pela receita* existe só por insumo (a *pelo que ele disse* existe por lote), e por
   isso ela mora na cabeça do insumo e não numa oitava coluna: uma coluna a mais convidaria a somar
   em linha duas réguas que RN-15 proíbe somar. O nome do envelope vem do próprio cálculo — *saldo
   gerencial* quando há marco zero, *variação gerencial* quando não há — e é ele que sai no `.sub`. */
.leitura-grupo-cabeca {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--e1) var(--e4);
}
.leitura-grupo-nome { min-width: 0; }
.leitura-grupo-regua { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1em .45em; font-weight: 400; text-align: right; }
.leitura-grupo-regua > .rotulo { font-size: var(--t-1); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--apagado); }
/* [ciclo 3, passagem final · crítica 4] 17 px, o mesmo degrau do `.num.principal`: este é o número
   que dá nome à tela e o único que o app existe para produzir (decisão 12 do §3). Em 15 px ele saía
   MENOR que a variação de um lote, que é número de contexto — o eixo do dono abaixo do contexto. */
.leitura-grupo-regua .num { font-size: var(--t3); font-weight: 600; }
/* o aposto acompanha o número na mesma linha: era `flex-basis: 100%` e descia sozinho à direita,
   onde se lia como uma segunda legenda concorrendo com o rótulo (crítica 38). */
.leitura-grupo-regua > .sub { flex-basis: auto; }
@media screen and (max-width: 700px) {
  /* no telefone a linha de grupo já é bloco (R1): a régua desce inteira, alinhada à esquerda */
  .leitura-grupo-cabeca { display: block; }
  .leitura-grupo-regua { display: flex; text-align: left; margin-top: var(--e1); }
  .leitura-grupo-regua > .sub { margin-left: 0; }
}

/* ── [ciclo 3 · frente B] a busca dentro da `.barra-lista` (§20.5) ──
   O sistema entrega a barra (busca + chips + contagem) mas não o formato do campo, e o `.linha-unica`
   — que é de bancada — jogava o botão para uma segunda linha só porque o rótulo é oculto. Aqui a
   busca é um bloco curto: campo, botão e o *limpar* na mesma linha, e no telefone a barra inteira.
   PENDÊNCIA: se uma segunda área precisar disto, sobe para o sistema como `.barra-lista > .busca`. */
.barra-lista > .leitura-busca-lista { flex: 0 1 28rem; }
/* dentro da barra quem dá o ritmo é o `gap`: o `margin-bottom` que `.chips.filtros` traz para viver
   sozinha abaixo do cabeçalho desalinha a linha inteira (mesmo raciocínio da decisão 18 do §3). */
.barra-lista > .chips.filtros { margin-bottom: 0; }
.leitura-busca-lista { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.leitura-busca-lista > .campo { flex: 1 1 11rem; min-width: 0; }
.leitura-busca-lista input[type="search"] { width: 100%; }
@media (max-width: 700px) {
  .leitura-busca-lista { width: 100%; }
  .leitura-busca-lista > button { min-height: 44px; }
}
@media print { .leitura-busca-lista { display: none; } }

/* ── [ciclo 3 · frente B] correção que É DO SISTEMA e está aqui só para não editar a §20 ──
   `.rolagem.alta` (§20.2) prende a tabela em 70vh para o cabeçalho ter onde ficar. No telefone isso
   vira uma rolagem DENTRO da rolagem da página — o gesto que mais irrita quem lê em pé, e o
   cabeçalho fixo nem existe lá (na `.tabela.lista` o `thead` some). Abaixo de 700 px a altura solta.
   PEDIDO AO SISTEMA: mover estas duas linhas para o fim da §20.2 de producao.css. */
@media screen and (max-width: 700px) {
  .rolagem.alta { max-height: none; overflow-y: visible; }
}

/* --------------------------------------------------------------------------
   /producao/ · a escolha que cabe na tela (2026-09-08)
   -------------------------------------------------------------------------- */
/* O chip do sistema (§ producao.css) com um rádio de verdade por baixo: sem CSS continuam botões
   de escolha, sem JavaScript o formulário envia igual. `:has` é o que troca a cara ao marcar.

   A ESPECIFICIDADE É EXPLÍCITA DE PROPÓSITO, e custou uma tela feia ao dono antes de eu ver:
   `form.linha label` (0,1,1) manda `display:flex; flex-direction:column; align-self:start` em TODO
   label do formulário, e ganha de `.chip` (0,1,0). Escrever `.escolha` e torcer para o `.chip`
   valer é apostar numa briga que já estava perdida — o chip virava uma pilha de largura total com o
   rádio por cima do nome. Aqui cada propriedade que aquele rule impõe é desfeita por escrito. */
.escolhas { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
form.linha .escolhas > .escolha, .escolhas > .escolha {
  display: inline-flex; flex-direction: row; align-items: center; align-self: auto;
  width: auto; flex: none; gap: .35em; position: relative;
  cursor: pointer; padding: .34rem .8rem; font-size: var(--t1); color: var(--tinta-2);
  user-select: none; transition: background .12s, border-color .12s, color .12s;
}
form.linha .escolhas > .escolha > span, .escolhas > .escolha > span { display: inline; }
form.linha .escolhas > .escolha > input, .escolhas > .escolha > input {
  position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none;
}
.escolhas > .escolha:hover { border-color: var(--marca); color: var(--tinta); background: var(--superficie-2); }
.escolhas > .escolha:has(input:checked) { border-color: var(--marca); color: var(--marca-tinta); background: var(--marca-suave); font-weight: 500; }
/* `--foco` existe «para nunca se confundir com a marca»: focado e escolhido tinham a mesma cor. */
.escolhas > .escolha:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .escolhas > .escolha { transition: none; } }

/* a linha de caixas lê como a frase que a pessoa diria: «120 caixas de Caixa 5 L» */
.producao-caixas { display: flex; flex-direction: column; gap: var(--e3); }
.producao-caixa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }
form.linha .producao-caixa > .quanto, .producao-caixa .quanto { width: 6rem; flex: none; font-size: var(--t3); text-align: right; font-variant-numeric: tabular-nums; }
.producao-caixa .de { color: var(--apagado); font-size: var(--t1); }
/* «isto mudou», em âmbar e nunca em vermelho: quem trocou de sabor não errou nada (bloco 11 do JS) */
form.linha .producao-caixa > .quanto[aria-invalid="true"],
.producao-caixa > .quanto[aria-invalid="true"] { border-color: var(--alerta-linha); background: var(--alerta-suave); }
.producao-registrar .razao { display: inline-flex; }
.producao-registrar .razao input { min-width: 14rem; }
.producao-registrar fieldset { margin: 0; }
.producao-registrar fieldset > details.regras { margin-top: var(--e3); }
form.linha .producao-quando input[type="date"], .producao-quando input[type="date"] { width: auto; min-width: 11rem; flex: none; }
.escolha.atalho { border-style: dashed; }
.escolha.atalho.ativo { border-style: solid; border-color: var(--marca); color: var(--marca-tinta); background: var(--marca-suave); font-weight: 500; }
@media (max-width: 600px) {
  .producao-caixa .quanto { width: 5rem; }
  .producao-caixa .de { flex-basis: 100%; margin-top: calc(var(--e2) * -1); }
}

/* --------------------------------------------------------------------------
   /rastreabilidade/ · a corrente fechada, em barra (2026-09-08)
   -------------------------------------------------------------------------- */
/* A COR NÃO ACUSA NINGUÉM, e é ela que substitui a frase «começa perto de zero: é diagnóstico, não
   desempenho do prestador». `interrompida` é o trecho NÃO PREENCHIDO da barra — o mesmo cinza do
   trilho. Pintá-la de vermelho seria transformar um diagnóstico em nota de desempenho de quem opera
   a fábrica, que é exatamente o que a frase existia para evitar. */
.grau-barra { display: flex; width: 100%; height: 10px; border-radius: 999px; overflow: hidden; background: var(--superficie-2); }
.grau-barra > .faixa { display: block; height: 100%; }
.faixa-completa { background: var(--marca); }
.faixa-parcial { background: color-mix(in srgb, var(--marca) 42%, var(--superficie-2)); }
.faixa-interrompida { background: transparent; }
.grau-parcelas { margin: var(--e3) 0 0; }
.grau-parcelas .chip strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.grau-parcelas a.chip { text-decoration: none; }
.grau-parcelas a.chip:hover { border-color: var(--marca); color: var(--marca-tinta); }
.grau-parcelas .chip.grau-completa::before { content: ""; width: .55em; height: .55em; border-radius: 999px; background: var(--marca); }
.grau-parcelas .chip.grau-parcial::before { content: ""; width: .55em; height: .55em; border-radius: 999px; background: color-mix(in srgb, var(--marca) 42%, var(--superficie-2)); }
.grau-parcelas .chip.grau-interrompida::before { content: ""; width: .55em; height: .55em; border-radius: 999px; border: 1px solid var(--linha); }
/* os elos que faltam são frases curtas: cabem na linha, e poupam abrir a ficha para saber quais são */
.tabela .elos { margin: 0; }
.tabela .elos > li { padding: .15rem 0; color: var(--tinta-2); }
/* o `.pe-caixa` que sobe para ANTES da lista: quando o que ele diz vale para a lista inteira, ele
   se lê antes dela — a nota de rodapé de uma tabela que ainda não se leu chega tarde.

   O modificador chamou-se `.topo` por dez minutos e o `<p>` ficou com 1400 px de altura: `.topo` é
   a classe do CABEÇALHO do app (`base.html`), que é `display:flex` e ocupa a altura da janela.
   Modificador de componente leva o nome do componente junto, ou colide com o resto do sistema. */
.pe-caixa.acima { margin: 0 0 var(--e3); border-top: 0; padding-top: 0; }

/* --------------------------------------------------------------------------
   /pendencias/ · a lista com a ação na linha (2026-09-08)
   -------------------------------------------------------------------------- */
/* A divergência precisa de DECISÃO, e a decisão mora na linha: ir a outra tela para escrever «por
   quê» era o caminho que a fusão desfez. Nada fecha por silêncio — a explicação é obrigatória. */
.pendencia-lista > .pendencia { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4);
                                padding: var(--e3) 0; border-top: 1px solid var(--linha-suave); margin: 0; }
.pendencia-lista > .pendencia:first-child { border-top: 0; padding-top: 0; }
.pendencia-o-que { flex: 1 1 18rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e2); }
.pendencia-o-que .sub { color: var(--apagado); font-size: var(--t0); }
.pendencia-acao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0; flex: 0 1 auto; }
.pendencia-acao input { width: 16rem; min-width: 8rem; font-size: var(--t1); padding: .32rem .5rem; }
@media (max-width: 700px) { .pendencia-acao, .pendencia-acao input { width: 100%; flex-basis: 100%; } }

/* «olhado e sem nada esperando»: conferido e limpo não é o mesmo que não conferido (regra 2), e a
   diferença cabe numa linha — antes eram cinco caixas dizendo «nenhum». */
.pe-lista { margin: var(--e5) 0 0; font-size: var(--t0); color: var(--apagado); line-height: 1.7; }
.pe-lista .limpo { color: var(--tinta-2); }
/* o título de um vazio que não é caixa vazia: há bateladas, o que falta é o consumo delas */
.vazio-c-titulo { margin: 0 0 var(--e3); color: var(--tinta-2); }