/* Zenite Operação — o estilo das telas de Produção (Produtos, Cronograma, Contagem), trazidas do app de Gestão no passo 2
   (22/10/2026). Gerado por uma cópia do estilo.css de lá (igual à do ar): primeiro as peças comuns que essas telas usam
   (gaveta, pílulas, cartão de número, chips, avisos, campos), só as regras que não dependem de outra tela; depois o bloco de
   Produção como estava. Daqui em diante é deste app: muda-se AQUI (o app de Gestão não manda mais nestas telas). */

/* ---------------------------------------------------------------- peças comuns (do app de Gestão) */
.sub { color: var(--suave); margin-top: 2px; }
.suave { color: var(--suave); font-size: 13px; line-height: 1.45; }
.nota { color: var(--suave); font-size: 12.5px; line-height: 1.5; }
.neg { color: var(--neg); }
.pos { color: var(--ok); }
.alerta { color: var(--amb); }
.erro { color: var(--neg); font-size: 14px; }
.botao { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin-top: 12px;
  border: 0; border-radius: 10px; background: var(--verde); color: #fff; font: inherit; font-size: 15px;
  font-weight: 600; cursor: pointer; text-decoration: none; }
.botao:hover { background: var(--verde-2); }
.botao:disabled { opacity: .6; cursor: wait; }
.botao-curto { width: auto; padding: 0 22px; }
.botao-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.cab-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.cartao { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px 16px; min-width: 0; }
.cartao > h2, .bloco > h2 { font-size: 13px; font-weight: 600; margin: 0 0 10px; display: flex;
  justify-content: space-between; align-items: baseline; gap: 12px; }
.cartao > .nota { margin-top: 10px; }
.tarefas { margin: 0 -16px; }
.tarefa { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--linha); position: relative; }
.tarefa:first-child { border-top: 0; padding-top: 4px; }
.tarefa b { display: block; font-weight: 600; }
.tarefa small { color: var(--suave); font-size: 12.5px; }
.tarefa .val { font-weight: 600; text-align: right; white-space: nowrap; }
.q { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.q.red { background: var(--neg-bg); color: var(--neg); }
.q.amb { background: var(--amb-bg); color: var(--amb); }
.q.neu { background: var(--neu-bg); color: #4d5b57; }
.q.ok { background: var(--ok-bg); color: var(--ok); }
.acao { font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--borda);
  background: var(--sup); text-decoration: none; white-space: nowrap; color: var(--tinta); }
.acao:hover { background: var(--fundo); }
.cartao.num .cmp { font-size: 12px; font-weight: 500; }
.aviso.ok { background: var(--ok-bg); color: var(--ok); }
.grade-numeros.painel-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gaveta-corpo h3.oculto { font-style: italic; color: var(--suave); }
.marca:disabled { cursor: default; opacity: .5; }
.marca:disabled:hover { border-color: #b7c1bc; }
.gaveta-corpo h3 .marcador { padding: 2px 10px; border-radius: 8px; line-height: 1.6; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--neu-bg); color: #4d5b57;
  white-space: nowrap; }
.chip.red { background: var(--neg-bg); color: var(--neg); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
button.acao { cursor: pointer; font-family: inherit; }
button.acao:disabled { opacity: .6; cursor: wait; }
.acao.perigo { color: var(--neg); border-color: #f0c8c2; }
.acao.perigo:hover { background: var(--neg-bg); }
.chip.amb { background: var(--amb-bg); color: var(--amb); }
.ct-filtros { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.ct-filtros input { flex: 1 1 auto; width: 100%; max-width: 420px; height: 38px; border: 1px solid var(--borda); border-radius: 9px; padding: 0 12px;
  font: inherit; background: var(--sup); color: var(--tinta); }
.ct-filtros input:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(32, 70, 65, .12); }
.acao.alternar { height: 38px; padding: 0 12px; font-weight: 500; flex: none; }
.acao.alternar[aria-pressed="true"] { background: var(--neu-bg); }
.marca { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid #b7c1bc;
  border-radius: 5px; background: var(--sup) center / 12px no-repeat; cursor: pointer; transition: border-color .12s, background-color .12s; }
.marca:hover { border-color: var(--verde); }
.marca:checked { background-color: var(--verde); border-color: var(--verde); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.marca:indeterminate { background-color: var(--verde); border-color: var(--verde); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.marca:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.qtd { color: var(--suave); }
.acao.cheio { background: var(--verde); color: #fff; border-color: var(--verde); }
.acao.cheio:hover { background: var(--verde-2); }
.veu { position: fixed; inset: 0; z-index: 30; background: rgba(12, 20, 18, .28); }
.gaveta { position: fixed; z-index: 31; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--sup);
  border-left: 1px solid var(--borda); box-shadow: -18px 0 40px -20px rgba(0, 0, 0, .35); display: flex; flex-direction: column; }
.gaveta-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--borda); color: var(--suave); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.gaveta-x { width: 34px; height: 34px; border-radius: 8px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--suave); }
.gaveta-x:hover { background: var(--fundo); }
.gaveta-corpo { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.gaveta-corpo h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.gaveta-corpo .grande { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.gaveta-corpo .chip { align-self: flex-start; }
.gaveta-corpo .rot { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); margin-top: 8px; }
.dados { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; }
.dados dt { color: var(--suave); }
.dados dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.acoes-gaveta { display: flex; flex-wrap: wrap; gap: 8px; }
.acoes-gaveta .acao { padding: 9px 12px; font-size: 13px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > span { font-size: 12.5px; font-weight: 600; color: var(--suave); }
.campo small { font-size: 12px; color: var(--suave); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 40px; border: 1px solid var(--borda); border-radius: 9px; padding: 8px 11px;
  font: inherit; font-size: 15px; background: #fbfbfa; color: var(--tinta); }
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(32, 70, 65, .12); background: var(--sup); }
.gaveta-corpo .botao { margin-top: 4px; }
.gaveta-corpo .erro:empty { display: none; }
.controles .alternar { margin-left: auto; }
button.cartao.num { font: inherit; text-align: left; cursor: pointer; width: 100%; }
button.cartao.num:hover { border-color: #c4ccc8; }
.grade-numeros.fx-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.cab-pagina .botao { white-space: nowrap; flex: none; }
.aviso.red { background: var(--neg-bg); color: var(--neg); }
.gaveta-corpo .arq-titulo { overflow-wrap: anywhere; }
.gaveta-corpo .pes-tirar { align-self: flex-start; margin-top: 6px; }
.gaveta-corpo .pes-doc-destino { margin-top: -6px; }
.gaveta-corpo .pes-periodico { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--borda);
  border-radius: 10px; background: #fbfcfa; }
.gaveta-corpo .pes-doc-titulo { overflow-wrap: anywhere; }
.grade-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.cartao.num { display: flex; flex-direction: column; gap: 1px; padding: 10px 14px 12px; border-radius: 10px;
  text-decoration: none; color: var(--tinta); }
a.cartao.num:hover { border-color: #c4ccc8; }
.rotulo { font-size: 12px; font-weight: 500; color: var(--suave); }
.numero { font-size: 19px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.cartao.num .suave { font-size: 12px; }
.aviso { background: var(--amb-bg); color: #6b4a00; border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.5; }
.segmento { display: inline-grid; grid-auto-flow: column; background: #e7eae6; border-radius: 10px; padding: 3px; gap: 2px; flex: none; }
.segmento a, .segmento button { padding: 5px 12px; border-radius: 8px; border: 0; background: none; color: var(--suave);
  font-size: 13px; font-weight: 500; text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap; }
.segmento .ativa { background: var(--sup); color: var(--tinta); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.controles { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; min-width: 0; }
.pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 2px; }
.pills::-webkit-scrollbar { display: none; }
.pill { flex: none; border: 1px solid var(--borda); background: var(--sup); color: var(--tinta); border-radius: 999px;
  padding: 5px 11px; font-size: 13px; font-weight: 500; cursor: pointer; }
.pill:hover { border-color: #c4ccc8; }
.pill.ativa { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.fin-conteudo { display: flex; flex-direction: column; gap: 14px; }
.fin-conteudo > * { min-width: 0; }
.bloco > .suave { margin: -4px 0 10px; }
.bloco > .rol + .suave { margin: 12px 0 0; }
.rodape { margin-top: 16px; }
.barras { display: flex; gap: 4px; align-items: flex-end; overflow-x: auto; padding-bottom: 2px; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--suave); margin-top: 8px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.rol { overflow-x: auto; margin: 0 -16px; }
.receita { color: var(--receita); }
.aviso.neu { background: var(--neu-bg); color: #4d5b57; }
.legenda i.b-previa { background: repeating-linear-gradient(135deg, var(--receita-barra) 0 2px, var(--receita-clara) 2px 4px); }
.pill.previa { border-style: dashed; border-color: #c9b98a; }
.pill.previa.ativa { border-style: solid; border-color: var(--tinta); }
.grade-numeros.pn-hoje-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sub-abas { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.sub-abas[hidden] { display: none; }
.sub-abas a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borda); color: var(--tinta); text-decoration: none;
  font-size: 13px; background: var(--sup); }
.sub-abas a:hover { border-color: var(--verde); }
.sub-abas a.ativo { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }
.chip.fer-acumulados { background: var(--ouro); color: var(--lat); }
.gaveta-corpo .pes-cargo-anterior { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--fundo); font-size: 13.5px;
  overflow-wrap: anywhere; }
.gaveta-corpo .pes-cargo-anterior[hidden], .gaveta-corpo .pes-cargo-escondido[hidden] { display: none; }
.grade-numeros.tx-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
.gaveta-corpo .tx-titulo { overflow-wrap: anywhere; }
.gaveta-corpo .tx-dica-nome { margin-top: -6px; font-size: 12px; line-height: 1.4; color: var(--suave); }
.gaveta-corpo .tx-dica-nome:empty { display: none; }
.gaveta-corpo .acao.tx-outra { height: 42px; }
.gaveta-corpo .tx-exp-situacao { margin-top: -6px; font-size: 12px; line-height: 1.4; color: var(--suave); }
.gaveta-corpo .tx-exp-situacao:empty { display: none; }
.gaveta-corpo .tx-trava { background: #fff3d4; color: #6b4a00; border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.5; }
.gaveta-corpo .tx-sem-completo { margin: 0; }
.gaveta-corpo .tx-nota-pagar { margin: 0; }
.chip.ct-das-taxas { background: #e9f0ed; color: #204641; }
.chip.ct-da-folha { background: #e9f0ed; color: #204641; }
.gaveta-corpo .ct-nota-taxas, .gaveta-corpo .ct-aviso-taxas, .gaveta-corpo .ct-nota-folha, .gaveta-corpo .ct-aviso-folha { margin: 0; }
.campo input.ct-travado, .campo select.ct-travado { background: #f3f4f1; color: #3f4b47; opacity: 1; -webkit-text-fill-color: #3f4b47; }
.grade-numeros.fo-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 4px; }
.gaveta-corpo .fo-gaveta-titulo { overflow-wrap: anywhere; }
.gaveta-corpo .fo-lista { margin: 0; }
.chip.ct-da-guia { background: #e9f0ed; color: #204641; }
.gaveta-corpo .ct-nota-guia, .gaveta-corpo .ct-aviso-guia, .gaveta-corpo .ct-substituiu { margin: 0; }
@media (min-width: 861px) {
  .so-celular { display: none !important; }
}
@media (max-width: 1100px) {
  .grade-numeros.fx-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cab-pagina { align-items: center; margin-bottom: 14px; }
  .cartao { border: 0; border-radius: 20px; padding: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 26px -18px rgba(20, 40, 36, .35); }
  .cartao > h2 { font-size: 15.5px; }
  .grade-numeros.painel-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarefas { margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .tarefa { grid-template-columns: 40px minmax(0, 1fr) auto; background: var(--sup); border-radius: 18px; border-top: 0; padding: 12px 14px; }
  .tarefa:first-child { padding-top: 12px; }
  .q { width: 40px; height: 40px; border-radius: 13px; }
  .tarefa .acao { position: absolute; inset: 0; opacity: 0; border-radius: 18px; }
  .segmento.largo { display: grid; grid-auto-columns: minmax(0, 1fr); background: #e7e3d6; border-radius: 13px; margin-bottom: 12px; }
  .segmento.largo a { padding: 8px; font-size: 14px; }
  .controles { flex-wrap: wrap; }
  .controles .pills { flex: 1 0 100%; margin: 0 -16px; padding: 2px 16px; }
  .segmento { background: #e7e3d6; }
  .pill { padding: 7px 13px; }
  .grade-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-conteudo .cartao.num { border-radius: 18px; padding: 12px 14px; }
  .fin-conteudo .numero { font-size: 17px; }
  .segmento.largo a { padding: 8px 4px; font-size: 13.5px; }
  .ct-filtros input { max-width: none; height: 42px; border-radius: 12px; }
  .ct-filtros:has(#ct-relatorio:not([hidden])) { flex-wrap: wrap; }
  .ct-filtros:has(#ct-relatorio:not([hidden])) input { flex: 1 1 100%; }
  .acao.alternar { height: 42px; border-radius: 12px; }
  .marca { width: 20px; height: 20px; }
  .controles .alternar { margin-left: 0; }
  .gaveta { top: auto; left: 0; width: 100%; max-height: 92vh; max-height: 92dvh; border-left: 0; border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, .45); padding-bottom: env(safe-area-inset-bottom); }
  .veu { background: rgba(12, 20, 18, .45); }
  .gaveta-corpo { padding: 16px 18px 28px; }
  .campo input, .campo select, .campo textarea { font-size: 16px; min-height: 44px; }
  .grade-numeros.pn-hoje-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-numeros.tx-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .grade-numeros.fo-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==== Frente: Produtos (21/10/2026) ====
   Produção › Produtos (produtos.js): janela de comparação, 4 números, divisão por setor, mais vendidos, crescendo/caindo, lista de todos os produtos e a
   ficha na gaveta. Faturamento em verde (--receita-barra); unidades NÃO são receita: barra azul. Cores dos setores fixas (decisão do desenho aprovado).
   Celular (até 860 px): cartões 2 por linha, listas em duas linhas por produto, nada com largura fixa que estoure a tela. */
.prod-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prod-aviso-janela { margin: 0; }
.grade-numeros.prod-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prod-numeros .cartao.num { position: relative; min-width: 0; }
.prod-numeros .cartao.num .suave { white-space: normal; overflow-wrap: anywhere; }
.prod-chip-canto { position: absolute; top: 10px; right: 12px; }
.prod-trilho { display: block; height: 6px; border-radius: 999px; background: var(--linha); overflow: hidden; min-width: 0; }
.prod-trilho-curva { margin-top: 6px; }
.prod-barra { display: block; height: 100%; border-radius: 999px; }
.prod-barra-fat { background: var(--receita-barra); }
.prod-barra-un { background: #5b7aa6; }
.prod-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex: none; }
.prod-s-panificacao { background: #e3b23c; }
.prod-s-salgados { background: #c8683f; }
.prod-s-confeitaria { background: #8e5a8b; }
.prod-s-sem_setor { background: #c4ccc8; }

/* divisão por setor */
.prod-mix + .prod-mix { margin-top: 18px; }
.prod-mix-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.prod-mix-rot { font-size: 12.5px; font-weight: 600; color: var(--suave); }
.prod-mix-total { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.prod-pilha { display: flex; height: 18px; border-radius: 7px; overflow: hidden; background: var(--linha); }
.prod-seg { display: block; height: 100%; min-width: 2px; border-right: 2px solid var(--sup); }
.prod-seg:last-child { border-right: 0; }
.prod-seg-vazio { width: 100%; }
.prod-leg { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 9px; font-size: 12.5px; }
.prod-leg-item { display: flex; align-items: center; gap: 6px; min-width: 0; }
.prod-leg-nome { color: var(--suave); }
.prod-leg-pct { font-weight: 600; }

/* as listas (mais vendidos, crescendo/caindo, todos): uma linha por produto, que é um botão que abre a ficha */
.prod-lista { display: flex; flex-direction: column; margin: 0 -16px; }
.prod-linha { display: grid; align-items: center; gap: 0 12px; width: 100%; padding: 8px 16px; border: 0; border-top: 1px solid var(--linha);
  background: none; font: inherit; color: var(--tinta); text-align: left; cursor: pointer; min-width: 0; }
button.prod-linha:hover { background: #fafbf9; }
.prod-cab { cursor: default; font-size: 11.5px; font-weight: 600; color: var(--suave); background: #fafbf9; border-top: 1px solid var(--borda);
  padding-top: 7px; padding-bottom: 7px; }
.prod-top-linha { grid-template-columns: 26px minmax(0, 1.5fr) minmax(140px, 1.1fr) 84px 74px minmax(130px, 1fr); }
.prod-todos-linha { grid-template-columns: minmax(0, 1.6fr) 80px 74px minmax(150px, 1.1fr) 66px 84px; }
.prod-mov-linha { grid-template-columns: minmax(0, 1fr) auto 62px; }
.prod-linha > span { min-width: 0; }
.prod-c-nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
.prod-nome { overflow-wrap: anywhere; font-weight: 500; }
.prod-c-pos { color: var(--suave); font-size: 12px; }
.prod-c-un, .prod-c-clientes { text-align: right; font-variant-numeric: tabular-nums; }
.prod-c-tend { display: flex; justify-content: flex-start; }
.prod-c-pct { display: flex; align-items: center; gap: 8px; }
.prod-c-pct .prod-trilho { flex: 1 1 auto; }
.prod-pct-num { flex: none; min-width: 40px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.prod-c-cli { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12.5px; }
.prod-cli-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--suave); }
.prod-cli-pct { flex: none; }
.prod-cli-pct.alerta { color: var(--amb); background: var(--amb-bg); padding: 0 6px; border-radius: 5px; }
.prod-parado .prod-nome, .prod-parado .prod-c-ult { color: var(--suave); font-weight: 400; }
.prod-c-ult { font-size: 12.5px; text-align: right; white-space: nowrap; }
.prod-c-de { font-size: 12px; white-space: nowrap; }
.prod-vazio { padding: 4px 0 6px; }
.prod-legenda-top { margin-top: 10px; }
.prod-chip.ok, .prod-chip.red { min-width: 44px; text-align: center; }

/* crescendo e caindo */
.prod-duplo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.prod-duplo > * { min-width: 0; }

/* aviso dos nomes parecidos */
.prod-aviso-nomes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.prod-aviso-nomes > span { flex: 1 1 260px; min-width: 0; }
.prod-conferir { background: var(--sup); }

/* todos os produtos */
.prod-filtros { margin-bottom: 8px; }
.prod-pills { margin-bottom: 8px; }
.prod-todos .prod-lista { margin-top: 4px; }

/* gaveta: sugestões de união e ficha do produto */
.prod-par { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--borda); border-radius: 10px; }
.prod-par-lado { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.prod-par-nome, .prod-nome-topo b { overflow-wrap: anywhere; }
.prod-par-nomes { overflow-wrap: anywhere; }
.prod-sug-erro:empty, .prod-ficha-erro:empty, .prod-unir-erro:empty { display: none; }
.gaveta-corpo .prod-ficha-nome { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.gaveta-corpo .prod-ficha-chips { margin-top: -4px; }
.prod-recado { margin: 0; }
.prod-semanas { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; align-items: end; }
.prod-sem { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.prod-sem-trilho { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 70px; }
.prod-sem-barra { display: block; width: 70%; max-width: 22px; border-radius: 3px 3px 0 0; background: #5b7aa6; min-height: 1px; }
.prod-sem-val { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.prod-sem-lab { font-size: 10.5px; color: var(--suave); white-space: nowrap; }
.prod-precos-rol { overflow-x: auto; margin: 0 -2px; }
table.prod-precos { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.prod-precos th { text-align: right; font-size: 11px; font-weight: 600; color: var(--suave); padding: 5px 6px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
table.prod-precos td { text-align: right; padding: 6px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
table.prod-precos th:first-child, table.prod-precos td:first-child { text-align: left; white-space: normal; overflow-wrap: anywhere; padding-left: 0; }
table.prod-precos tr:last-child td { border-bottom: 0; }
.prod-nomes { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.prod-nome-nota { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border: 1px solid var(--linha); border-radius: 9px; min-width: 0; }
.prod-nome-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prod-nome-info { overflow-wrap: anywhere; }
.prod-separar { align-self: flex-start; margin-top: 4px; }
.prod-picker { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--borda); border-radius: 10px; }
.prod-picker input { width: 100%; height: 40px; border: 1px solid var(--borda); border-radius: 9px; padding: 0 11px; font: inherit; font-size: 15px; background: #fbfbfa; }
.prod-picker-lista { display: flex; flex-direction: column; margin: 0; }
.prod-picker-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 4px; border: 0; border-top: 1px solid var(--linha); background: none;
  font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.prod-picker-item:hover { background: var(--fundo); }

@media (max-width: 1100px) {
  .grade-numeros.prod-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod-duplo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .prod-topo .segmento { display: grid; grid-auto-columns: minmax(0, 1fr); width: 100%; border-radius: 13px; }
  .prod-topo .segmento button { padding: 8px 4px; font-size: 13.5px; }
  .grade-numeros.prod-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod-numeros .numero { font-size: 17px; }
  .prod-chip-canto { top: 12px; right: 12px; }
  .prod-filtros input { max-width: none; height: 42px; border-radius: 12px; }
  .prod-pills { margin-left: -16px; margin-right: -16px; padding: 2px 16px; }
  /* cada produto vira duas linhas: nome e tendência em cima; barra e unidades embaixo (o cliente, na terceira) */
  .prod-cab { display: none; }
  .prod-top-linha { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "pos nome tend" ". pct un" ". cli cli"; row-gap: 5px; padding-top: 11px; padding-bottom: 11px; }
  .prod-top-linha .prod-c-pos { grid-area: pos; }
  .prod-todos-linha { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome tend" "pct un"; row-gap: 5px; padding-top: 11px; padding-bottom: 11px; }
  .prod-linha .prod-c-nome { grid-area: nome; }
  .prod-linha .prod-c-tend { grid-area: tend; justify-self: end; }
  .prod-linha .prod-c-pct { grid-area: pct; }
  .prod-linha .prod-c-un { grid-area: un; text-align: right; }
  .prod-linha .prod-c-un::after { content: " un./sem."; color: var(--suave); font-size: 11.5px; }
  .prod-linha .prod-c-cli { grid-area: cli; }
  .prod-todos-linha .prod-c-clientes, .prod-todos-linha .prod-c-ult { display: none; }
  .prod-mov-linha { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome tend" "de de"; row-gap: 2px; }
  .prod-mov-linha .prod-c-de { grid-area: de; padding-left: 17px; }
  .prod-semanas { gap: 2px; }
  .prod-sem-val { font-size: 10.5px; }
  .prod-precos-rol { margin: 0; }
}

/* ==== Frente: Contagem (21/10/2026) ====
   Produção › Contagem de estoque (contagem.js). Celular primeiro: campo de 22 px (o iPhone dá zoom em campo com menos de 16), alvo de toque de 52 px,
   a lista de um setor por vez e o botão de salvar sempre à vista (acima da barra de abas). Nenhum R$ aqui; o olho troca o campo por bolinhas (type=password) pelo próprio JS.
   22/10/2026 — o visual de Produção › Produtos e do Cronograma (pedido do Diogo: "um padrão geral no app inteiro"): a barra «Contados N de M» (prod-trilho + prod-barra; azul, VERDE quando
   todos têm número — verde é «cumprido», nunca R$), os setores em pílulas na cor deles (a ativa cheia, as outras claras com o quadradinho; «Salgados 3/5»), a lista do setor com a borda
   esquerda na cor dele, o campo VAZIO tracejado (não contou ≠ 0, que é contagem) e o PREENCHIDO cheio na cor do setor, e as contagens anteriores com a pilha por setor (prod-pilha).
   A cor do setor vem pela CLASSE (cr-set-… define --cr-cor; a CSP proíbe style no HTML) e as classes/tokens são os do Cronograma e de Produtos (.cr-pilula, .cr-prog, .prod-s-…): nenhuma cor nova.
   No computador a coluna fica mais larga (960 px), as pílulas em uma linha e a lista em duas colunas (o campo perto do nome). */
#cg-conteudo { max-width: 960px; }
.cg-data-titulo { align-items: center; margin-bottom: 8px; }
.cg-data-titulo > span { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.cg-trocar-botao { flex: none; }
.cg-trocar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.cg-data-campo { height: 40px; border: 1px solid var(--borda); border-radius: 9px; padding: 0 10px; font: inherit; font-size: 16px; background: #fbfbfa; color: var(--tinta); }
.cg-data-campo:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(32, 70, 65, .12); background: var(--sup); }
.cg-prog { margin: 2px 0 0; }
.cg-prog-rotulo { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cg-prog-trilho { height: 10px; }
.cg-status { margin: 8px 0 0; }
.cg-data .aviso { margin-top: 10px; }
.cg-data > .cg-status + .suave { margin-top: 6px; }
.cg-vazio { margin: 0; }
/* os setores: pílulas na cor deles (o cheio da ativa e o quadradinho vêm de .cr-setores .cr-pilula); no celular, três iguais lado a lado (nome em cima, quadradinho + andamento embaixo) */
.cg-setores { flex-wrap: wrap; overflow: visible; }
.cg-pilula-nome { font-weight: 600; }
.cg-pilula-n { font-size: 12.5px; font-weight: 600; color: var(--suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cg-setores .pill.cg-pilula.ativa .cg-pilula-n { color: inherit; }
.cg-setores .pill.cg-pilula.completo:not(.ativa) .cg-pilula-n { color: var(--ok); }
/* a lista do setor aberto: a borda da esquerda na cor do setor */
.cg-lista { padding: 4px 16px; border-left: 4px solid var(--cr-cor); }
.cg-itens { display: flex; flex-direction: column; }
.cg-linha { display: grid; grid-template-columns: minmax(0, 1fr) 132px; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha); }
.cg-linha:first-child { border-top: 0; }
.cg-quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cg-nome { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.cg-ult { font-size: 12px; color: var(--suave); }
.cg-campo { width: 100%; height: 52px; border: 1.5px solid var(--borda); border-radius: 12px; padding: 0 12px; text-align: right; font: inherit; font-size: 22px;
  font-weight: 600; background: #fbfbfa; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cg-campo::placeholder { color: #aab3af; font-weight: 400; }
.cg-campo.vazio { border-style: dashed; border-color: #c4ccc8; background: transparent; }
.cg-campo.preenchido { border-color: var(--cr-cor); background: #fff; background: color-mix(in srgb, var(--cr-cor) 11%, #fff); }
.cg-campo:focus { outline: none; border-style: solid; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(32, 70, 65, .12); background: var(--sup); }
.cg-campo.invalido { border-style: solid; border-color: var(--neg); background: var(--neg-bg); }
.cg-campo:disabled { opacity: .6; }
.cg-valor { display: flex; align-items: center; justify-content: flex-end; height: 46px; padding: 0 12px; border-radius: 12px; font-size: 20px; font-weight: 600;
  font-variant-numeric: tabular-nums; background: #fff; background: color-mix(in srgb, var(--cr-cor) 11%, #fff); }
.cg-valor.vazio { background: transparent; border: 1.5px dashed #c4ccc8; color: #aab3af; font-weight: 400; }
.cg-barra { position: sticky; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--lat); color: #fff;
  border-radius: 12px; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5); }
.cg-msg { flex: 1 1 auto; margin: 0; min-width: 0; font-size: 13px; line-height: 1.35; }
.cg-msg.erro { color: #ffb9b0; font-size: 13px; }
.cg-barra .cg-salvar { flex: none; height: 44px; padding: 0 18px; font-size: 14px; background: var(--ouro); color: #1a2421; border-color: var(--ouro); }
.cg-barra .cg-salvar:hover { background: #f0c351; }
.cg-barra .cg-salvar:disabled { opacity: .6; cursor: wait; }
.cg-hist-lista { display: flex; flex-direction: column; }
.cg-hist-item { display: block; padding: 10px 0; border-top: 1px solid var(--linha); color: var(--tinta); text-decoration: none; font-size: 14px; line-height: 1.4; }
.cg-hist-lista li:first-child .cg-hist-item { border-top: 0; }
.cg-hist-item:hover b { color: var(--verde); text-decoration: underline; }
.cg-hist-item.ativa { color: var(--verde); font-weight: 600; }
.cg-hist-item:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.cg-hist-pilha { height: 8px; border-radius: 4px; margin-top: 6px; }
@media (min-width: 861px) {
  .cg-itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .cg-linha:nth-child(2) { border-top: 0; }
  .cg-barra:has(.cg-msg:empty) { align-self: flex-end; }   /* sem mensagem a barra encolhe ao botão (a faixa escura inteira, vazia, pesa no computador) */
}
@media (max-width: 860px) {
  .cg-lista { padding: 2px 14px; }
  .cg-linha { grid-template-columns: minmax(0, 1fr) 124px; }
  .cg-campo { height: 52px; font-size: 22px; }
  .cg-barra { bottom: calc(80px + env(safe-area-inset-bottom)); border-radius: 16px; }
  .cg-setores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0; }
  .cg-setores .pill.cg-pilula { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "nome nome" "ponto andamento"; align-items: center;
    column-gap: 6px; row-gap: 2px; min-width: 0; padding: 9px 10px; border-radius: 14px; text-align: left; }
  .cg-pilula .prod-ponto { grid-area: ponto; }
  .cg-pilula-nome { grid-area: nome; font-size: 13px; }
  .cg-pilula-n { grid-area: andamento; }
}

/* ==== Frente: Cronograma (21/10/2026) ====
   Produção › Cronograma (cronograma.js). Computador primeiro (tabela larga, a coluna do nome presa à esquerda), e no celular a mesma tabela corre de lado
   DENTRO do cartão (como o DRE), com campos de 16+ px (o iPhone dá zoom em campo menor). Nenhum R$ aqui; o olho troca o campo por bolinhas pelo próprio JS.
   A folha de parede (cr-imp-…) só aparece na impressão: #cr-impressao fica escondido na tela e, ao imprimir A FOLHA (o JS põe a classe cr-imprimindo no body só
   nessa hora), vira a única coisa da página (A4 deitado, no modelo do producao/ferramentas/gerar_folha_setor.py: título, "Setor de …", logo, tabela verde para
   marcar V/X a caneta). Ctrl+P em qualquer outra tela imprime a página normal (sem a classe, nada aqui vale). No celular (≤ 860 px) a tela é uma lista do dia. */
#cr-conteudo { max-width: 1240px; }
.cr-topo { display: flex; flex-direction: column; gap: 10px; }
.cr-semana { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cr-topo .cr-semana-titulo { display: block; margin: 0; font-size: 16px; font-weight: 600; }
.cr-nav { flex: none; width: 40px; height: 36px; padding: 0; font-size: 20px; line-height: 1; }
.cr-esta { margin-left: auto; }
.cr-setores { flex-wrap: wrap; overflow: visible; }
.cr-imprimir { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-sit { display: flex; flex-direction: column; gap: 8px; }
.cr-sit-texto { font-size: 14px; font-weight: 500; }
.cr-sit-aberta { color: var(--amb); font-weight: 600; }
.cr-sit .suave { margin: 0; }
.cr-feriado { margin: 0; }
.cr-obs, .cr-nota { margin: 0; font-size: 13px; color: var(--suave); background: var(--creme); border-radius: 9px; padding: 8px 12px; line-height: 1.5; overflow-wrap: anywhere; }
.cr-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cr-refazer { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; background: var(--fundo); border-radius: 9px; }
.cr-refazer .suave { flex-basis: 100%; }
.cr-msg { margin: 0; font-size: 13.5px; padding: 9px 14px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); }
.cr-msg.erro { background: var(--neg-bg); color: var(--neg); }
.cr-erro-caixa { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cr-bloco > h2 { align-items: center; }
.cr-selo { font-size: 11.5px; font-weight: 600; color: var(--amb); background: var(--amb-bg); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.cr-rol { margin: 0 -16px; }
table.cr-tab { border-collapse: collapse; width: 100%; font-size: 13px; }
.cr-tab th { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--suave); padding: 8px 8px; background: #fafbf9; border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda); white-space: nowrap; }
.cr-tab th.passou { color: var(--tinta); }
.cr-tab td { padding: 7px 8px; border-bottom: 1px solid var(--linha); vertical-align: top; text-align: center; }
.cr-tab th.cr-th-nome, .cr-tab td.cr-nome { text-align: left; position: sticky; left: 0; z-index: 1; background: var(--sup); min-width: 170px; max-width: 240px; padding-left: 16px; white-space: normal; }
.cr-tab th.cr-th-nome { background: #fafbf9; z-index: 2; }
.cr-th-fer { display: block; font-weight: 500; color: var(--amb); }
.cr-tab td.cr-dia { min-width: 88px; }
.cr-tab td.cr-feriado-dia { background: #fffaf0; }
.cr-nome-texto { font-weight: 500; overflow-wrap: anywhere; }
.cr-nome-cat { display: block; font-size: 11px; font-weight: 400; color: var(--suave); }
.cr-mini { display: block; margin-top: 5px; font-size: 11.5px; padding: 3px 8px; }
.cr-obs-cel { margin: 2px auto 0; max-width: 150px; font-size: 11px; font-weight: 400; font-style: italic; color: var(--suave); white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.cr-obs-botao { margin-top: 3px; border: 0; background: none; color: var(--suave); font: inherit; font-size: 11px; font-weight: 400; text-decoration: underline; cursor: pointer; padding: 2px 4px; }
.cr-campo-obs { width: 100%; min-width: 110px; height: 32px; margin-top: 3px; border: 1px solid var(--borda); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 16px;
  background: #fbfbfa; color: var(--tinta); }
.cr-campo-obs:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(32, 70, 65, .12); background: var(--sup); }
.cr-dias { display: flex; flex-direction: column; gap: 10px; }
.cr-dias-pills { flex-wrap: wrap; overflow: visible; }
.cr-chip-dia { padding: 7px 11px; font-size: 13px; }
.cr-dias .acao { align-self: flex-start; }
.bloco > .cr-dia-sub { margin: -4px 0 8px; font-weight: 600; color: var(--tinta); font-size: 13.5px; }
.cr-lista-dia { display: flex; flex-direction: column; }
.cr-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--linha); }
.cr-item:first-child { border-top: 0; }
.cr-item-topo { grid-column: 1; grid-row: 1; min-width: 0; }
.cr-item .cr-dia-item { display: contents; }
.cr-item .cr-plano, .cr-item .cr-feito { grid-column: 2; text-align: right; }
.cr-item .cr-plano { grid-row: 1; min-width: 92px; }
.cr-item .cr-obs-slot, .cr-item .cr-sug-dia, .cr-item > .cr-sug { grid-column: 1 / -1; }
.cr-item .cr-sug-dia { margin-top: 0; white-space: normal; }
.cr-item > .cr-sug { font-size: 12.5px; }
.cr-item .cr-obs-cel { max-width: none; margin: 0; text-align: left; }
.cr-item .cr-campo-obs { margin-top: 0; }
.cr-item .cr-plano::before { content: "Plano "; font-weight: 400; color: var(--suave); font-size: 12px; }
.cr-item .cr-feito::before { content: "Feito "; font-weight: 400; color: var(--suave); font-size: 12px; }
.cr-item .cr-feito:empty, .cr-item .cr-plano:empty { display: none; }
.cr-folha-lista { display: flex; flex-direction: column; gap: 4px; }
.cr-folha-sec { margin: 12px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--suave); }
.cr-folha-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 74px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--linha); }
.cr-folha-cad { font-size: 13px; overflow-wrap: anywhere; }
.cr-folha-item .cr-campo-texto { flex: none; width: 100%; }
.cr-folha-item .cr-campo { width: 100%; }
.cr-campo-texto.invalido { border-color: var(--neg); background: var(--neg-bg); }
.cr-plano { min-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-feito { min-height: 18px; font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }
.cr-feito.x { color: var(--neg); }
.cr-sug-dia { margin-top: 3px; font-size: 11px; color: var(--suave); font-weight: 400; white-space: nowrap; }
.cr-un { display: block; font-size: 10.5px; color: var(--suave); font-weight: 400; text-align: right; }
.cr-previa, .cr-previa .cr-plano { color: var(--suave); font-weight: 500; }
.cr-fora .cr-nome-texto { color: var(--suave); }
.cr-fora-txt { text-align: left; color: var(--suave); font-style: italic; }
.cr-tab td.cr-sem { min-width: 96px; padding-left: 6px; padding-right: 6px; background: #fafbf9; text-align: left; }
.cr-tab td.cr-sug-celula { min-width: 270px; text-align: left; }
.cr-sug-1 { font-weight: 500; }
.cr-sug-2 { margin-top: 2px; font-size: 11.5px; color: var(--suave); }
.cr-sug-fora { color: var(--suave); font-style: italic; font-weight: 400; }
.cr-vazio { text-align: left; color: var(--suave); }
.cr-campo { width: 74px; height: 38px; border: 1px solid var(--borda); border-radius: 9px; padding: 0 9px; text-align: right; font: inherit; font-size: 16px; font-weight: 600;
  background: #fbfbfa; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cr-campo::placeholder { color: #aab3af; font-weight: 400; }
.cr-campo:focus, .cr-select:focus, .cr-area:focus, .cr-campo-texto:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(32, 70, 65, .12); background: var(--sup); }
.cr-campo.invalido { border-color: var(--neg); background: var(--neg-bg); }
.cr-campo:disabled { opacity: .6; }
.cr-campo-feito { text-transform: uppercase; }
.cr-outro { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.cr-select { height: 38px; border: 1px solid var(--borda); border-radius: 9px; padding: 0 10px; font: inherit; font-size: 14px; background: #fbfbfa; color: var(--tinta); max-width: 100%; }
.cr-novo-preparo { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cr-campo-texto { flex: 1 1 240px; min-width: 0; height: 38px; border: 1px solid var(--borda); border-radius: 9px; padding: 0 11px; font: inherit; font-size: 16px; background: #fbfbfa; color: var(--tinta); }
.cr-fora-lista, .cr-rodape-bloco { margin: 10px 0 0; }
.cr-cand-botao { width: 100%; text-align: left; font-size: 13.5px; padding: 9px 12px; }
.cr-cand-lista { display: flex; flex-direction: column; margin-top: 8px; }
.cr-cand-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--linha); }
.cr-cand-nome { flex: 1 1 200px; font-weight: 500; }
.cr-tab-resumo th, .cr-tab-conf th { white-space: normal; }
.cr-tab td.cr-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-kg { display: block; font-size: 10.5px; color: var(--suave); white-space: normal; }
.cr-dif.bateu { color: var(--ok); font-weight: 600; }
.cr-dif.nao-bateu { color: var(--amb); background: var(--amb-bg); font-weight: 700; }
.cr-conf-resumo { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.cr-conf-falta, .cr-conf-nota { margin: 10px 0 0; }
.cr-barra { position: sticky; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; background: var(--lat); color: #fff;
  border-radius: 12px; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5); }
.cr-edicao { display: flex; flex-direction: column; gap: 8px; }
.cr-edicao .suave { margin: 0; }
.cr-area { width: 100%; border: 1px solid var(--borda); border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 14px; background: #fbfbfa; color: var(--tinta); resize: vertical; }
.cr-barra-msg { flex: 1 1 180px; margin: 0; font-size: 13px; line-height: 1.35; min-width: 0; min-height: 18px; }
.cr-barra-msg.erro { color: #ffb9b0; }
.cr-barra-botoes { flex: none; display: flex; gap: 8px; margin-left: auto; }
.cr-barra .acao { height: 40px; }
.cr-barra .cr-salvar { padding: 0 18px; font-size: 14px; background: var(--ouro); color: #1a2421; border-color: var(--ouro); }
.cr-barra .cr-salvar:hover { background: #f0c351; }
.cr-barra .cr-salvar:disabled { opacity: .6; cursor: wait; }
/* "calculando…" dos pré-preparos de um rascunho (o banco faz a conta) e o extra das previsões no porquê da sugestão */
.cr-calculando { font-size: 11.5px; font-weight: 600; color: var(--suave); background: var(--creme); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.cr-sug-extra { margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--amb); }
/* Previsões extras: a lista (uma por linha), o selo de situação e o formulário */
.cr-previsoes { display: flex; flex-direction: column; gap: 8px; }
.cr-previsoes > h2, .cr-previsoes > p { margin: 0; }
.cr-prev-ajuda { font-size: 12.5px; }
.cr-prev-item { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--linha); }
.cr-prev-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-prev-desc { font-weight: 600; overflow-wrap: anywhere; }
.cr-prev-quanto { font-size: 13.5px; font-weight: 600; color: var(--amb); overflow-wrap: anywhere; }
.cr-prev-quando { font-size: 12.5px; color: var(--suave); }
.cr-prev-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.cr-prev-tag { font-size: 11.5px; font-weight: 600; color: var(--suave); background: var(--creme); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.cr-prev-tag.cr-prev-vale { color: var(--ok); background: var(--ok-bg); }
.cr-prev-passada, .cr-prev-encerrada { opacity: .75; }
.cr-prev-encerrar { flex: none; }
.cr-prev-antigas { align-self: flex-start; }
.cr-prev-nova { align-self: flex-start; }
.cr-prev-form { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--fundo); border-radius: 12px; }
.cr-prev-form .cr-campo-texto { flex: none; width: 100%; }
.cr-prev-semanas, .cr-prev-linha, .cr-prev-botoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cr-prev-rotulo { font-size: 13px; color: var(--suave); }
.cr-prev-linha .cr-select { flex: 1 1 220px; }
.cr-prev-linha .cr-campo-texto { flex: 0 1 150px; width: auto; text-align: right; }
.cr-prev-form .cr-select.invalido { border-color: var(--neg); background: var(--neg-bg); }
.cr-prev-mais { align-self: flex-start; }
/* 22/10/2026: o cartão "Incluir no cronograma" (busca no catálogo), "Outros do setor" do feito, "Tirar do cronograma" e o modo das proporções (só a administração) */
.cr-incluir { display: flex; flex-direction: column; gap: 8px; }
.cr-incluir-titulo { margin: 0; font-size: 14px; font-weight: 600; }
.cr-incluir .cr-incluir-dica { margin: 0; font-size: 12.5px; }
.cr-aviso-prop { margin: 0; }
.cr-aviso-prop .cr-mini { display: inline-block; margin: 0 0 0 8px; }
.cr-busca { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--fundo); border-radius: 12px; }
.cr-busca .cr-campo-texto { flex: none; width: 100%; }
.cr-busca-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cr-busca-item { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--linha); }
.cr-busca-item:first-child { border-top: 0; }
.cr-busca-nome { flex: 1 1 220px; font-weight: 500; overflow-wrap: anywhere; }
.cr-busca-info { flex: 1 1 100%; order: 3; font-size: 12px; }
.cr-busca-incluir { flex: none; }
.cr-busca-msg, .cr-busca-mais { margin: 0; font-size: 12.5px; }
.cr-outros { margin-top: 10px; }
.cr-outros-botao { width: 100%; text-align: left; font-size: 13.5px; padding: 9px 12px; }
.cr-outros-dica { margin: 8px 0 0; font-size: 12.5px; }
.cr-mini.cr-tirar { color: var(--suave); }
.cr-prop-sec { margin: 14px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--suave); }
.cr-prop-item { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--linha); }
.cr-prop-fora .cr-prop-nome { color: var(--suave); }
.cr-prop-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.cr-prop-nome { font-weight: 600; overflow-wrap: anywhere; }
.cr-prop-rende { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cr-prop-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-left: 12px; }
.cr-prop-nome-linha { flex: 1 1 180px; font-size: 13.5px; overflow-wrap: anywhere; }
.cr-prop-tirando .cr-prop-nome-linha { text-decoration: line-through; color: var(--suave); }
.cr-prop-un { min-width: 82px; }
.cr-prop-sem { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--amb); background: var(--amb-bg); border-radius: 9px; padding: 6px 10px; align-self: flex-start; }
.cr-prop-dentro-t { margin: 2px 0 0; font-size: 12.5px; }
.cr-prop-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 12px; }
.cr-prop-add:empty { display: none; }
.cr-prop-linha .cr-mini { margin-top: 0; }
/* 22/10/2026 — o visual de Produção › Produtos no Cronograma (pedido do Diogo: "um padrão geral no app inteiro"): pílulas e cartões na cor do setor, barras de progresso e o feito em
   ✓ / vermelho / "a fazer" / +N. A cor do setor vem pela CLASSE (cr-set-SETOR define --cr-cor; a CSP não deixa style no HTML); a largura das barras vai por el.style no JS. As cores
   são as mesmas de Produção › Produtos (.prod-s-…). Verde (--ok) aqui é "cumprido" (fez o plano, barra completa), nunca R$. */
.cr-set-panificacao { --cr-cor: #e3b23c; }
.cr-set-salgados { --cr-cor: #c8683f; }
.cr-set-confeitaria { --cr-cor: #8e5a8b; }
.cr-selo-teste { font-size: 11.5px; font-weight: 600; color: var(--amb); background: var(--amb-bg); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.cr-setores .cr-pilula { display: inline-flex; align-items: center; gap: 7px; }
.cr-setores .cr-pilula .prod-ponto { width: 9px; height: 9px; }
.cr-setores .cr-pilula.ativa { background: var(--cr-cor); border-color: var(--cr-cor); color: #fff; }
.cr-setores .cr-pilula.ativa .prod-ponto { background: #fff; }
.cr-setores .cr-pilula.cr-set-panificacao.ativa { color: #1a2421; }
.cr-setores .cr-pilula.cr-set-panificacao.ativa .prod-ponto { background: #1a2421; }
/* Salgados: a letra branca dava 3,8:1 sobre #c8683f (pede 4,5); a escura #0f1614 dá 4,8:1 (Panificação 8,1:1 · Confeitaria, branca, 5,3:1) */
.cr-setores .cr-pilula.cr-set-salgados.ativa { color: #0f1614; }
.cr-setores .cr-pilula.cr-set-salgados.ativa .prod-ponto { background: #0f1614; }
.grade-numeros.cr-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cr-numeros .cartao.num { min-width: 0; }
.cr-numeros .cartao.num .suave { white-space: normal; overflow-wrap: anywhere; }
.cr-cartao-cor { position: relative; overflow: hidden; }
.cr-cartao-cor::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cr-cor); }
.cr-trilho-cartao { margin: 7px 0 5px; }
.cr-prog { background: var(--cr-cor, #5b7aa6); }
.cr-prog.completa { background: var(--ok); }
.cr-bloco > h2 { justify-content: flex-start; }
.cr-bloco > h2 > .prod-ponto { align-self: center; }
.cr-bloco > h2 > span:nth-of-type(2) { margin-left: auto; }
.cr-feito.ok, .cr-feito.extra { color: var(--ok); }
.cr-feito.abaixo, .cr-feito.x { color: var(--neg); }
.cr-feito.afazer { color: var(--suave); font-weight: 400; font-size: 11.5px; }
.cr-tab td.cr-extra { background: var(--ok-bg); }
.cr-plano:empty::before { content: "—"; color: #c4ccc8; font-weight: 400; }
.cr-sem-num { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-sem-plano { color: var(--suave); font-weight: 500; }
.cr-sem-extra { color: var(--ok); background: var(--ok-bg); border-radius: 6px; padding: 1px 7px; }
.cr-sem .cr-trilho { margin-top: 5px; }
.cr-leg-grade { margin: 10px 0 0; font-size: 12px; }
/* os pré-preparos do dia viram chips na cor do setor (fora do editar o plano, onde a célula é um campo) */
.cr-preparos:not(.cr-editando) td.cr-dia .cr-plano:not(:empty) { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--creme);
  background: color-mix(in srgb, var(--cr-cor) 17%, #fff); }
.cr-preparos:not(.cr-editando) td.cr-dia.cr-previa .cr-plano:not(:empty) { background: var(--creme); }
.cr-item-sem { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.cr-item-sem .suave { flex: none; font-size: 12px; }
.cr-item-sem .cr-trilho { flex: 1 1 auto; }
.cr-item .cr-feito.afazer::before { content: none; }
@media (max-width: 1100px) {
  .grade-numeros.cr-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cr-rol { margin: 0 -14px; }
  .cr-tab th.cr-th-nome, .cr-tab td.cr-nome { min-width: 118px; max-width: 132px; padding-left: 12px; font-size: 12.5px; }
  .cr-tab td.cr-dia { min-width: 82px; }
  .cr-tab td.cr-sug-celula { min-width: 230px; }
  .cr-campo { width: 72px; height: 44px; font-size: 18px; }
  .cr-barra { bottom: calc(80px + env(safe-area-inset-bottom)); border-radius: 16px; }
  .cr-barra-botoes { width: 100%; }
  .cr-barra-botoes .acao { flex: 1; }
  .cr-folha-item { grid-template-columns: minmax(0, 1fr) 74px; }
  .cr-folha-cad { grid-column: 1 / -1; font-weight: 500; }
  .cr-prop-rende { margin-left: 0; }
  .cr-prop-linha, .cr-prop-add { padding-left: 0; }
  .cr-prop-nome-linha { flex-basis: 100%; }
  .cr-busca-incluir { flex: 1 1 100%; }
  .cr-prev-item { flex-direction: column; gap: 8px; }
  .cr-prev-linha .cr-campo-texto { flex: 1 1 120px; }
  .cr-prev-botoes .acao { flex: 1; }
  .cr-setores .cr-pilula { padding: 8px 14px; }
  .cr-semana { gap: 6px; }
  .cr-topo .cr-semana-titulo { font-size: 14.5px; }
  .cr-nav { width: 34px; }
  .cr-select { font-size: 16px; }
  .cr-esta { margin-left: 0; }
}

/* A folha de parede: escondida na tela; ao imprimir, só ela aparece (A4 deitado). */
.cr-impressao { display: none; }
@page folha { size: A4 landscape; margin: 10mm 12mm; }
@media print {
  body.cr-imprimindo > *:not(#cr-impressao) { display: none !important; }
  body.cr-imprimindo { background: #fff !important; }
  body.cr-imprimindo .cr-impressao { display: block !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cr-imp-pag { page: folha; height: 189mm; display: flex; flex-direction: column; break-after: page; page-break-after: always; font-family: Arial, Helvetica, sans-serif; color: #2b2b2b; }
  .cr-imp-pag:last-child { break-after: auto; page-break-after: auto; }
  .cr-imp-cab { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2.5px solid #E0B43C; padding-bottom: 3mm; }
  .cr-imp-cab h1 { margin: 0; font-size: 30px; font-weight: 700; color: #2F5F57; letter-spacing: .2px; }
  .cr-imp-cab h2 { margin: 3mm 0 0; font-size: 19px; font-weight: 700; color: #D9A21B; display: block; }
  .cr-imp-dir { text-align: right; }
  .cr-imp-dir img { height: 15mm; }
  .cr-imp-sem { font-size: 12px; color: #555; margin-top: 1.5mm; }
  .cr-imp-sub { display: flex; justify-content: space-between; font-size: 12px; color: #555; margin: 3mm 0 2.5mm; }
  .cr-imp-tab { width: 100%; border-collapse: collapse; table-layout: fixed; flex: 1; }
  .cr-imp-tab th { background: #2E7A6E; color: #fff; font-size: 16px; font-weight: bold; padding: 0 3mm; height: 12mm; border: 1px solid #cfd8d6; text-align: center; }
  .cr-imp-tab th.nome { text-align: left; width: 31%; }
  .cr-imp-tab td { border: 1px solid #cfd8d6; text-align: center; font-size: 17px; padding: 0 2mm; }
  .cr-imp-tab td.nome { text-align: left; font-size: 15.5px; padding-left: 3mm; }
  .cr-imp-tab tbody tr:nth-child(even) td { background: #F1F4F3; }
  .cr-imp-tab tr.sep td { background: #E4EEEC !important; color: #2F5F57; font-weight: bold; text-align: left; font-size: 15px; padding-left: 3mm; }
  .cr-imp-nota { font-size: 11px; color: #555; margin: 2mm 0 0; }
}