/* Controle de peso: lançamento (pesagens.html) e relatório (analise.html).
   Fica por cima de ds/odara-tokens.css e ds/odara-ui.css, que são cópia de
   odara-os/arquitetura/padroes/. Nenhuma cor nova: vermelho sobre areia,
   preto para texto, o verde provisório só em estado de sucesso, e o estado
   sempre escrito, nunca só pintado (design.md, seção 8).

   As outras telas do app (indicadores da produção) ainda usam o shared.css
   antigo. Estas duas não carregam ele. */

* { box-sizing: border-box; }
/* O atributo hidden tem que vencer o display das classes (grid, flex). */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--fg1);
  font-family: var(--font-body); font-weight: var(--peso-corpo);
  font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
a { color: var(--fg1); }
:focus-visible { outline: 2px solid var(--od-vermelho); outline-offset: 2px; }

/* ── Cabeçalho: areia-2, sol no canto, wordmark oficial ── */
.pe-topo { position: relative; overflow: hidden; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.pe-topo::after {
  content: ''; position: absolute; top: -110px; right: -70px; width: 240px; height: 240px;
  border-radius: var(--radius-pill); background: var(--od-amarelo); opacity: .4; pointer-events: none;
}
.pe-topo-in {
  position: relative; z-index: 1; max-width: var(--teto-conteudo); margin: 0 auto;
  padding: var(--s-4) var(--s-6); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
}
.pe-marca { display: flex; align-items: center; gap: var(--s-4); }
.pe-marca img { height: 18px; width: auto; display: block; }
.pe-titulo { margin: 0; font-size: 26px; font-weight: var(--w-light); letter-spacing: -.02em; line-height: 1; }
.pe-titulo b { font-weight: var(--w-heavy); }
.pe-nav { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.pe-nav a, .pe-nav button {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-4);
  border-radius: var(--radius-pill); border: 1px solid transparent; background: none;
  color: var(--fg2); font-size: var(--fs-body-s); font-weight: var(--w-medium); text-decoration: none; cursor: pointer;
}
.pe-nav a:hover, .pe-nav button:hover { border-color: var(--line-strong); }
.pe-nav a.ativo { background: var(--od-vermelho); color: var(--fg-on-loud); font-weight: var(--w-demibold); }
.pe-quem { font-size: var(--fs-body-s); color: var(--fg3); padding: 0 var(--s-2); }

.pe-conteudo { max-width: var(--teto-conteudo); margin: 0 auto; padding: var(--s-5) var(--s-6) var(--s-8); }
@media (max-width: 820px) {
  .pe-topo-in, .pe-conteudo { padding-left: var(--s-4); padding-right: var(--s-4); }
  .pe-titulo { font-size: 22px; }
}

/* ── Blocos ── */
.pe-bloco { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--s-5); }
.pe-bloco + .pe-bloco { margin-top: var(--s-4); }
.pe-bloco-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-4); flex-wrap: wrap; }
.pe-bloco-h h2 { margin: 0; font-size: var(--fs-h4); font-weight: var(--w-demibold); letter-spacing: -.01em; }
.pe-bloco-h .pe-dica { margin: 0; }
.pe-dica { color: var(--fg3); font-size: var(--fs-body-s); font-weight: var(--w-medium); }
.pe-vazio { color: var(--fg3); font-size: var(--fs-body-s); margin: var(--s-3) 0; }

/* ── Lançamento: duas colunas no largo, uma no tablet em pé ── */
.pe-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s-4); align-items: start; }
@media (max-width: 980px) { .pe-grade { grid-template-columns: 1fr; } }

/* Escolha grande: o que vai pesar */
.pe-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-2); }
.pe-opcao {
  min-height: 64px; padding: var(--s-3) var(--s-4); border-radius: var(--radius-md);
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--fg1);
  font-size: var(--fs-body-l); font-weight: var(--w-demibold); cursor: pointer; text-align: center;
  transition: background var(--dur-hover) var(--ease), transform var(--dur-toque) var(--ease);
}
.pe-opcao small { display: block; font-size: var(--fs-caption); font-weight: var(--w-medium); color: var(--fg3); margin-top: 2px; }
.pe-opcao:active { transform: scale(.98); }
.pe-opcao.sel { background: var(--od-vermelho); border-color: var(--od-vermelho); color: var(--fg-on-loud); }
.pe-opcao.sel small { color: var(--fg-on-loud); opacity: .85; }

.pe-pilulas { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pe-pilula {
  min-height: var(--toque); min-width: 64px; padding: 0 var(--s-5); border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--fg1);
  font-size: var(--fs-body); font-weight: var(--w-demibold); cursor: pointer;
}
.pe-pilula.sel { background: var(--fg1); border-color: var(--fg1); color: var(--od-areia); }
.pe-campo-linha { display: grid; grid-template-columns: 110px 1fr; gap: var(--s-3); align-items: center; margin-top: var(--s-4); }
.pe-campo-linha > .od-rotulo-mini { margin: 0; }
@media (max-width: 560px) { .pe-campo-linha { grid-template-columns: 1fr; gap: var(--s-2); } }

.pe-produto { display: flex; gap: var(--s-3); align-items: center; }
.pe-produto select { flex: 1; }
.pe-qn { font-family: var(--font-condensed); font-weight: var(--w-bold); font-size: 22px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pe-detalhe { margin-top: var(--s-3); font-size: var(--fs-body-s); color: var(--fg2); display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.pe-link { background: none; border: none; padding: 0 var(--s-1); min-height: 32px; color: var(--fg1); text-decoration: underline; font-size: var(--fs-body-s); font-weight: var(--w-demibold); cursor: pointer; }
.pe-mais { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }

/* Os cinco pesos: grandes, centralizados, numeral condensado */
.pe-pesos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }
.pe-peso {
  width: 100%; min-height: 72px; text-align: center;
  font-family: var(--font-condensed); font-weight: var(--w-bold); font-size: 32px; font-variant-numeric: tabular-nums;
  background: var(--bg); color: var(--fg1); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.pe-peso:focus { outline: none; border-color: var(--line-strong); box-shadow: 0 0 0 3px rgba(238, 39, 55, .22); }
.pe-peso::placeholder { color: var(--fg4); font-weight: var(--w-medium); font-size: 20px; }
.pe-peso.ruim { border-color: var(--st-erro); box-shadow: 0 0 0 3px rgba(238, 39, 55, .22); }
@media (max-width: 560px) { .pe-peso { font-size: 24px; min-height: 60px; } }
.pe-aviso { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); font-size: var(--fs-body-s); font-weight: var(--w-demibold); }
.pe-aviso--erro { background: rgba(238, 39, 55, .1); color: var(--st-erro); }
.pe-aviso--alerta { background: var(--st-atencao); color: var(--fg-on-sun); }
.pe-aviso--ok { background: rgba(46, 125, 92, .14); color: var(--st-sucesso); }
.pe-aviso .pe-link { color: inherit; }
.pe-registrar { width: 100%; margin-top: var(--s-4); }
.pe-progresso { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: var(--s-3); flex-wrap: wrap; }
.pe-trilho { flex: 1; min-width: 120px; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.pe-trilho i { display: block; height: 100%; background: var(--od-vermelho); transition: width var(--dur-painel) var(--ease); }

/* Painel ao vivo: um número grande, um veredito */
.pe-grande { font-family: var(--font-condensed); font-weight: var(--w-heavy); font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; }
.pe-grande small { font-size: 26px; font-weight: var(--w-bold); margin-left: 4px; }
.pe-sub { color: var(--fg2); font-size: var(--fs-body); margin-top: var(--s-1); }
.pe-veredito { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }
.pe-veredito .od-selo { font-size: var(--fs-body-s); padding: 6px 14px; }
.pe-criterios { margin: var(--s-3) 0 0; padding: 0; list-style: none; font-size: var(--fs-body-s); color: var(--fg2); }
.pe-criterios li { padding: 2px 0; }
.pe-criterios b { font-weight: var(--w-demibold); color: var(--fg1); }
.pe-sep { border: none; border-top: 1px solid var(--line); margin: var(--s-4) 0; }

/* Cartas em SVG */
.pe-carta { width: 100%; height: auto; display: block; }
.pe-carta .pe-serie { fill: none; stroke: var(--od-vermelho); stroke-width: 2; stroke-linejoin: round; }
.pe-carta .pe-ponto { fill: var(--od-vermelho); stroke: var(--bg-alt); stroke-width: 1.5; }
.pe-carta .pe-ponto--antes { fill: var(--fg3); }
.pe-carta .pe-ponto--alerta { fill: var(--od-vermelho); stroke: var(--fg1); stroke-width: 2.5; }
.pe-carta .pe-lim { stroke: var(--fg1); stroke-width: 1; stroke-dasharray: 5 4; }
.pe-carta .pe-lc { stroke: var(--fg3); stroke-width: 1; }
.pe-carta .pe-ref { stroke: var(--od-amarelo); stroke-width: 2.5; stroke-dasharray: 8 4; }
.pe-carta .pe-ref-erro { stroke: var(--od-vermelho); stroke-width: 2; stroke-dasharray: 4 3; }
.pe-carta .pe-ref-media { stroke: var(--fg1); stroke-width: 2; }
.pe-carta .pe-barra { fill: var(--od-vermelho); opacity: .75; }
.pe-carta .pe-eixo { font-family: var(--font-condensed); font-size: 13px; fill: var(--fg3); }
.pe-carta .pe-lim-txt { font-family: var(--font-condensed); font-size: 13px; font-weight: 600; fill: var(--fg2); }
.pe-carta-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); margin: var(--s-4) 0 var(--s-1); flex-wrap: wrap; }
.pe-carta-h h3 { margin: 0; font-size: var(--fs-body); font-weight: var(--w-demibold); }

/* Tabelas */
.pe-tabela-rola { overflow-x: auto; }
.od-tabela td.od-num, .od-tabela th.od-num { white-space: nowrap; }
.od-tabela tr.pe-desfeito td { color: var(--fg4); text-decoration: line-through; }
.od-tabela tr.pe-clicavel { cursor: pointer; }
.od-tabela th.pe-ordena { cursor: pointer; user-select: none; }
.od-tabela th.pe-ordena:hover { color: var(--fg1); }
.od-tabela .od-btn { min-height: 36px; padding: 0 var(--s-3); }
.pe-produto-nome { font-weight: var(--w-demibold); }
.od-tabela.pe-compacta th, .od-tabela.pe-compacta td { padding: var(--s-2) 6px; }
.od-tabela td.pe-nome-col { min-width: 190px; }
.pe-produto-cod { display: block; font-size: var(--fs-caption); color: var(--fg3); }

/* Relatório */
.pe-filtros { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-end; }
.pe-filtros > div { min-width: 140px; }
.pe-filtros .od-campo { min-height: 40px; }
.pe-chk { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--toque); font-size: var(--fs-body-s); cursor: pointer; }
.pe-chk input { width: 20px; height: 20px; accent-color: var(--od-vermelho); }
.od-kpis { margin: var(--s-4) 0; }
.pe-kpi { cursor: pointer; text-align: left; border: 1px solid var(--line); font: inherit; color: inherit; }
.pe-kpi:hover { box-shadow: var(--shadow-md); }
.pe-kpi .od-kpi-valor small { font-size: 22px; margin-left: 2px; }
.pe-kpi-mais { font-size: var(--fs-caption); color: var(--fg2); margin-top: var(--s-2); }
.pe-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-4); }
.pe-legenda { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-caption); color: var(--fg2); margin-top: var(--s-1); }
.pe-legenda i { display: inline-block; width: 18px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 6px; }

@media print {
  .pe-topo, .pe-nav, .od-btn, .pe-filtros { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Relatório de auditoria (08/10/2026): ações do detalhe, leitura e o limite da média no histograma. */
.pe-acoes-doc { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.pe-leitura { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.pe-leitura li { position: relative; padding-left: 22px; font-size: var(--fs-body-s); color: var(--fg2); }
.pe-leitura li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 10px; height: 10px; border-radius: 999px; background: var(--fg3); }
.pe-leitura--ok::before { background: var(--st-sucesso) !important; }
.pe-leitura--erro::before { background: var(--od-vermelho) !important; }
.pe-leitura--alerta::before { background: var(--od-amarelo) !important; }
.pe-carta .pe-ref-kS { stroke: var(--od-laranja); stroke-width: 2; stroke-dasharray: 2 3; }

/* ── 09/10/2026: balanças, tara, documento em popup e passe de usabilidade ── */

/* Impressão do documento aberto em popup (analise.html, imprimir()). */
#area-impressao { display: none; }
@media print {
  body.imprimindo > *:not(#area-impressao) { display: none !important; }
  body.imprimindo #area-impressao { display: block; }
  body.imprimindo { background: #FFF7EB; }
}
.od-popup .doc { padding: var(--s-2) var(--s-1); }

/* Passos numerados do lançamento: diz em que ordem fazer. */
.pe-passo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-right: var(--s-3); border-radius: 999px;
  background: var(--od-vermelho); color: var(--fg-on-loud);
  font-family: var(--font-condensed); font-weight: 800; font-size: 16px; vertical-align: 2px;
}

/* Abertura de tela: uma frase do que a tela é. */
.pe-intro { margin: 0 0 var(--s-5); max-width: 72ch; }
.pe-intro h2 { margin: 0 0 var(--s-2); font-size: 28px; font-weight: 300; letter-spacing: -.02em; }
.pe-intro p { margin: 0; color: var(--fg2); }

/* Avisos */
.pe-aviso--neutro { background: var(--bg); border: 1px solid var(--line); color: var(--fg2); font-weight: var(--w-medium); }
.pe-vazio-grande { display: grid; gap: var(--s-1); padding: var(--s-6); text-align: center; border: 1px dashed rgba(0,0,0,.2); border-radius: var(--radius-md); color: var(--fg3); }
.pe-vazio-grande b { color: var(--fg1); font-weight: var(--w-demibold); }

/* Cartões de balança */
.pe-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-4); }
.pe-cartao { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); box-shadow: var(--shadow-sm); }
.pe-cartao--inativo { opacity: .6; }
.pe-cartao-h { display: flex; justify-content: space-between; gap: var(--s-3); align-items: flex-start; }
.pe-cartao-h h3 { margin: 0; font-size: var(--fs-h4); font-weight: var(--w-demibold); }
.pe-cartao-h .pe-dica { margin: 2px 0 0; }
.pe-dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); margin: 0; }
.pe-dl dt { font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg3); font-weight: var(--w-demibold); }
.pe-dl dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.pe-cartao-acoes { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: auto; }

/* Formulários em popup */
.pe-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.pe-form .pe-dica { display: block; margin-top: var(--s-1); font-size: var(--fs-caption); }
.pe-form-rodape { display: flex; justify-content: flex-end; margin-top: var(--s-5); }

/* Tara do lote no lançamento */
.pe-tara-entrada { display: flex; gap: var(--s-2); }
.pe-tara-campo { max-width: 240px; font-family: var(--font-condensed); font-size: 20px; font-weight: var(--w-bold); }
.pe-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.pe-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-family: var(--font-condensed); font-weight: var(--w-bold); font-size: 14px; font-variant-numeric: tabular-nums; }
.pe-chip button { width: 26px; height: 26px; border-radius: 999px; border: none; background: transparent; color: var(--fg3); cursor: pointer; font-size: 18px; line-height: 1; }
.pe-chip button:hover { background: rgba(238, 39, 55, .1); color: var(--od-vermelho); }
.pe-tara-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
.pe-tara-numeros div { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s-2) var(--s-3); }
.pe-tara-numeros b { display: block; font-family: var(--font-condensed); font-size: 22px; font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; }
.pe-tara-numeros span { font-size: var(--fs-caption); color: var(--fg3); }

/* Passe de usabilidade: campos e textos um pouco maiores e mais respiro. */
.pe-bloco { padding: var(--s-5) var(--s-5) var(--s-6); }
.pe-bloco + .pe-bloco { margin-top: var(--s-5); }
.pe-dica { line-height: 1.5; }
.pe-detalhe { line-height: 1.6; }
.pe-nav a, .pe-nav button { min-height: 40px; }
.od-tabela.pe-compacta td { font-size: 14px; }
@media (max-width: 560px) { .pe-tara-entrada { flex-direction: column; } .pe-tara-campo { max-width: none; } .pe-dl { grid-template-columns: 1fr; } }

/* ── 09/10/2026 (2): lançar em popup, coleta posterior, acompanhamento ── */

/* Botões grandes da tela de lançamento */
.pe-botoes-grandes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); margin: 0 0 var(--s-6); }
.pe-acao-grande { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--s-6); min-height: 120px; border-radius: var(--radius-lg); border: 1.5px solid var(--line-strong); background: var(--bg-alt); color: var(--fg1); cursor: pointer; text-align: left; font: inherit; transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.pe-acao-grande b { font-size: 26px; font-weight: var(--w-bold); letter-spacing: -.01em; line-height: 1.1; }
.pe-acao-grande span { color: var(--fg2); font-size: var(--fs-body); }
.pe-acao-grande:hover { border-color: var(--fg1); transform: translateY(-1px); }
.pe-acao-grande:focus-visible { outline: 3px solid var(--od-amarelo); outline-offset: 2px; }
.pe-acao-grande--primaria { background: var(--od-vermelho); border-color: var(--od-vermelho); color: var(--fg-on-loud); }
.pe-acao-grande--primaria span { color: var(--fg-on-loud); opacity: .9; }
.pe-acao-grande--primaria:hover { border-color: var(--od-preto); }

/* Conteúdo dos popups */
.pe-popup-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.pe-sec + .pe-sec { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.pe-sec-h { display: flex; align-items: center; margin: 0 0 var(--s-3); font-size: var(--fs-h4); font-weight: var(--w-demibold); }
.pe-sec-linha { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.pe-sec--painel { background: var(--bg-alt); border-radius: var(--radius-md); padding: var(--s-5); }
.pe-popup-grade .pe-sec--painel { position: sticky; top: 0; }

/* Abas do popup de coleta posterior */
.pe-abas { display: flex; gap: var(--s-2); margin: 0 0 var(--s-5); border-bottom: 1px solid var(--line); }
.pe-aba { padding: var(--s-3) var(--s-4); border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; font-weight: var(--w-demibold); color: var(--fg2); cursor: pointer; min-height: 44px; }
.pe-aba.sel { color: var(--fg1); border-bottom-color: var(--od-vermelho); }
.pe-post-grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.pe-form--post { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pe-form-largo { grid-column: 1 / -1; }
.pe-grade-pesos td { padding: 3px 4px; }
.pe-cel { min-height: 40px; width: 72px; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.pe-cel--hora { width: 76px; text-align: left; }
.pe-cel.ruim { border-color: var(--od-vermelho); background: rgba(238, 39, 55, .06); }
.pe-x { width: 32px; height: 32px; border-radius: 999px; border: 0; background: transparent; color: var(--fg3); font-size: 20px; cursor: pointer; }
.pe-x:hover { background: rgba(238, 39, 55, .1); color: var(--od-vermelho); }
.pe-foto-entrada { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.pe-foto { width: 100%; max-height: 520px; object-fit: contain; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--bg-alt); margin-bottom: var(--s-4); }
.pe-passos-planilha p { max-width: 80ch; color: var(--fg2); margin-top: 0; }

/* Balanças e tara */
.pe-como { margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--radius-md); background: var(--bg); border: 1px solid var(--line); }
.pe-como summary { cursor: pointer; font-weight: var(--w-demibold); }
.pe-como ol { margin: var(--s-3) 0; padding-left: var(--s-5); line-height: 1.55; }
.pe-como li + li { margin-top: var(--s-2); }
.pe-tara-grande b { display: block; font-family: var(--font-condensed); font-size: 36px; font-weight: var(--w-heavy); line-height: 1; }
.pe-tara-grande span { color: var(--fg3); font-size: var(--fs-caption); }
.pe-opcoes--3 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: var(--s-2); }
.pe-resultado { display: grid; gap: var(--s-2); justify-items: start; padding: var(--s-4) 0; }
.pe-resultado p { margin: 0; }

/* Acompanhamento */
.pe-filtros--acomp { display: flex; gap: var(--s-5); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--s-5); }
.pe-lotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--s-4); }
.pe-lote { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border-radius: var(--radius-md); background: var(--bg); border: 1px solid var(--line); border-left-width: 6px; }
.pe-lote--agir { border-left-color: var(--st-erro); }
.pe-lote--atencao { border-left-color: var(--st-atencao); }
.pe-lote--oportunidade { border-left-color: var(--od-dark); }
.pe-lote--ok { border-left-color: var(--st-sucesso); }
.pe-lote--espera { border-left-color: var(--line-strong); }
.pe-lote-h { display: flex; justify-content: space-between; gap: var(--s-3); align-items: flex-start; }
.pe-lote-h h3 { margin: 2px 0 0; font-size: var(--fs-h4); font-weight: var(--w-demibold); line-height: 1.2; }
.pe-lote-h h3 small { font-weight: var(--w-regular); color: var(--fg3); font-size: var(--fs-body-s); }
.pe-lote-h .pe-dica { margin: 4px 0 0; }
.pe-etapa { font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg3); font-weight: var(--w-demibold); }
.pe-vivo { color: var(--st-sucesso); }
.pe-selo-agir { background: var(--st-erro); color: var(--fg-on-loud); }
.pe-selo-atencao { background: var(--st-atencao); color: var(--fg-on-sun); }
.pe-selo-oportunidade { background: var(--od-dark); color: var(--fg-on-dark); }
.pe-selo-ok { background: rgba(46, 125, 92, .14); color: var(--st-sucesso); }
.pe-selo-espera { background: var(--bg-alt); color: var(--fg2); }
.pe-rec { display: grid; gap: 4px; padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); line-height: 1.45; }
.pe-rec b { font-size: var(--fs-body-l); }
.pe-rec--agir { background: rgba(238, 39, 55, .1); }
.pe-rec--atencao { background: rgba(255, 184, 28, .22); }
.pe-rec--oportunidade { background: var(--bg-alt); }
.pe-rec--ok { background: rgba(46, 125, 92, .1); }
.pe-rec--espera { background: var(--bg-alt); color: var(--fg2); }
.pe-rec-extra { font-size: var(--fs-body-s); color: var(--fg2); }
.pe-num-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.pe-num-grade div { background: var(--bg-alt); border-radius: var(--radius-sm); padding: var(--s-2) var(--s-3); }
.pe-num-grade b { display: block; font-family: var(--font-condensed); font-size: 21px; font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pe-num-grade span { font-size: var(--fs-caption); color: var(--fg3); line-height: 1.25; display: block; }
.pe-faixa-ok { fill: rgba(46, 125, 92, .07); }
.pe-alerta-l { stroke: var(--od-amarelo); stroke-width: 1.2; stroke-dasharray: 4 4; }

@media (max-width: 900px) {
  .pe-popup-grade, .pe-post-grade { grid-template-columns: 1fr; }
  .pe-popup-grade .pe-sec--painel { position: static; }
  .pe-lotes { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .pe-num-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pe-acao-grande b { font-size: 22px; } }
.pe-sec-h #n-subgrupo { margin-left: .3em; }
.pe-lote-h .od-selo { white-space: nowrap; flex-shrink: 0; }

/* ── 09/10/2026 (3): filtros do relatório ── */
.pe-filtro-datas { display: flex; gap: var(--s-3); }
.pe-filtro-resumo { margin: var(--s-4) 0 0; color: var(--fg2); font-size: var(--fs-body-s); }
.pe-filtro-resumo b { color: var(--fg1); }
#f-op, #f-produto { min-width: 220px; }

/* ── Acompanhamento, versão 2: cartões clicáveis e detalhe em popup ── */
.pe-acomp-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-5); }
.pe-acomp-barra { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; margin: 0 0 var(--s-4); }
.pe-gravado { margin-bottom: var(--s-4); font-weight: var(--w-demibold); }
.pe-resumo-dia { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-6); }
.pe-resumo-item { padding: 6px 14px; border-radius: 999px; background: var(--bg-alt); color: var(--fg2); font-size: var(--fs-body-s); }
.pe-resumo-item b { color: var(--fg1); font-family: var(--font-condensed); font-size: 18px; font-weight: var(--w-heavy); }
.pe-resumo--agir { background: rgba(238, 39, 55, .12); }
.pe-resumo--atencao { background: rgba(255, 184, 28, .28); }
.pe-resumo--oportunidade { background: var(--od-dark); color: var(--fg-on-dark); }
.pe-resumo--oportunidade b { color: var(--fg-on-dark); }
.pe-resumo--ok { background: rgba(46, 125, 92, .12); }
.pe-linha-sec + .pe-linha-sec { margin-top: var(--s-7); }
.pe-linha-titulo { margin: 0 0 var(--s-4); font-size: var(--fs-h3); font-weight: var(--w-light); letter-spacing: -.01em; }
.pe-lotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-4); }
button.pe-lote { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border-radius: var(--radius-lg); background: var(--bg-alt); border: 1px solid var(--line); border-top: 5px solid var(--line-strong); border-left-width: 1px; text-align: left; font: inherit; color: var(--fg1); cursor: pointer; transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
button.pe-lote:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
button.pe-lote:focus-visible { outline: 3px solid var(--od-amarelo); outline-offset: 2px; }
.pe-lote--agir { border-top-color: var(--st-erro) !important; }
.pe-lote--atencao { border-top-color: var(--st-atencao) !important; }
.pe-lote--oportunidade { border-top-color: var(--od-dark) !important; }
.pe-lote--ok { border-top-color: var(--st-sucesso) !important; }
.pe-lote-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.pe-lote-nome { font-size: var(--fs-h4); font-weight: var(--w-demibold); line-height: 1.2; }
.pe-lote-nome small { font-weight: var(--w-regular); color: var(--fg3); font-size: var(--fs-body-s); }
.pe-lote-meio { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3); }
.pe-lote-num b { font-family: var(--font-condensed); font-size: 48px; font-weight: var(--w-heavy); line-height: .9; letter-spacing: -.01em; }
.pe-lote-num small { font-family: var(--font-condensed); font-size: 20px; font-weight: var(--w-bold); margin-left: 2px; }
.pe-lote-num span { display: block; margin-top: 4px; color: var(--fg2); font-size: var(--fs-body-s); }
.pe-spark { width: 150px; height: 46px; flex-shrink: 0; }
.pe-spark--vazio { display: flex; align-items: center; justify-content: center; color: var(--fg3); font-size: var(--fs-caption); }
.pe-spark-faixa { fill: rgba(46, 125, 92, .1); }
.pe-spark-alvo { stroke: var(--fg3); stroke-width: 1; stroke-dasharray: 3 3; }
.pe-spark-linha { fill: none; stroke: var(--od-vermelho); stroke-width: 2; stroke-linejoin: round; }
.pe-spark-ponto { fill: var(--od-vermelho); }
.pe-lote-rec { font-weight: var(--w-demibold); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--bg); }
.pe-lote--agir .pe-lote-rec { background: rgba(238, 39, 55, .1); color: var(--st-erro); }
.pe-lote--atencao .pe-lote-rec { background: rgba(255, 184, 28, .22); }
.pe-lote--ok .pe-lote-rec { background: rgba(46, 125, 92, .1); color: var(--st-sucesso); }
.pe-lote-pe { display: flex; flex-wrap: wrap; gap: 4px var(--s-3); color: var(--fg3); font-size: var(--fs-caption); }
.pe-lote-pe .pe-vivo { font-weight: var(--w-demibold); }
.pe-lote-pe .pe-vivo::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--st-sucesso); margin-right: 5px; vertical-align: 1px; }
/* Detalhe do lote */
.pe-det-topo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-4); align-items: stretch; }
.pe-rec--grande { padding: var(--s-4) var(--s-5); gap: var(--s-2); justify-items: start; }
.pe-rec--grande b { font-size: var(--fs-h4); }
.pe-det-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.pe-det-numeros div { background: var(--bg-alt); border-radius: var(--radius-sm); padding: var(--s-3) var(--s-4); }
.pe-det-numeros b { display: block; font-family: var(--font-condensed); font-size: 28px; font-weight: var(--w-heavy); line-height: 1.05; font-variant-numeric: tabular-nums; }
.pe-det-numeros span { display: block; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg3); font-weight: var(--w-demibold); margin-top: 2px; }
.pe-det-numeros small { display: block; color: var(--fg2); font-size: var(--fs-caption); margin-top: 2px; }
.pe-det-sec { margin-top: var(--s-6); }
.pe-det-sec h3 { margin: 0 0 var(--s-2); font-size: var(--fs-h4); font-weight: var(--w-demibold); }
.pe-det-sec h3 + svg, .pe-det-sec .pe-carta { margin-top: var(--s-2); }
.pe-det-acoes { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pe-popup-coluna { max-width: none; }
@media (max-width: 760px) { .pe-det-topo { grid-template-columns: 1fr; } .pe-spark { width: 110px; } .pe-lote-num b { font-size: 40px; } }

a.od-btn, a.od-btn:hover { text-decoration: none; }

/* Subgrupo de 10 (09/10/2026): dez campos em duas linhas de cinco. */
.pe-pesos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pe-pesos-linha { font-family: var(--font-condensed); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pe-grade-pesos .pe-cel { width: 66px; padding: 6px; }

/* Documento: escolha da versão para cliente externo */
.pe-doc-acoes { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.pe-doc-acoes .pe-chk { font-weight: var(--w-demibold); }

/* ── Acompanhamento, versão 3 (09/10/2026): painel para ver tudo de uma vez ── */
.pe-conteudo--painel { max-width: 1800px; }
.pe-painel-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
.pe-painel-titulo { margin: 0; font-size: var(--fs-h3); font-weight: var(--w-light); letter-spacing: -.01em; }
.pe-painel-acoes { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.pe-resumo-botao { border: 0; font: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.pe-painel { display: grid; grid-template-columns: repeat(var(--colunas, 3), minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.pe-painel--uma .pe-coluna-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pe-coluna { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.pe-coluna-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 0; border-bottom: 3px solid var(--line-strong); background: none; font: inherit; color: var(--fg1); cursor: pointer; text-align: left; }
.pe-coluna-h:hover .pe-coluna-nome { text-decoration: underline; }
.pe-coluna-h--agir { border-bottom-color: var(--st-erro); }
.pe-coluna-h--atencao { border-bottom-color: var(--st-atencao); }
.pe-coluna-h--oportunidade { border-bottom-color: var(--od-dark); }
.pe-coluna-h--ok { border-bottom-color: var(--st-sucesso); }
.pe-coluna-nome { font-size: var(--fs-h4); font-weight: var(--w-bold); }
.pe-coluna-info { font-size: var(--fs-caption); color: var(--fg3); }
.pe-coluna-cartoes { display: flex; flex-direction: column; gap: var(--s-2); }
button.pe-card { display: grid; gap: 4px; padding: var(--s-3) var(--s-4); border-radius: var(--radius-md); background: var(--bg-alt); border: 1px solid var(--line); border-left: 6px solid var(--line-strong); text-align: left; font: inherit; color: var(--fg1); cursor: pointer; min-width: 0; transition: box-shadow var(--dur-1) var(--ease); }
button.pe-card:hover { box-shadow: var(--shadow-md); }
button.pe-card:focus-visible { outline: 3px solid var(--od-amarelo); outline-offset: 2px; }
.pe-card--agir { border-left-color: var(--st-erro); background: rgba(238, 39, 55, .06); }
.pe-card--atencao { border-left-color: var(--st-atencao); }
.pe-card--oportunidade { border-left-color: var(--od-dark); }
.pe-card--ok { border-left-color: var(--st-sucesso); }
.pe-card-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.pe-card-topo .od-selo { white-space: nowrap; flex-shrink: 0; }
.pe-card-nome { font-weight: var(--w-demibold); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-card-meio { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s-3); align-items: end; }
.pe-card-num { grid-row: 1 / 3; }
.pe-card-num b { font-family: var(--font-condensed); font-size: 40px; font-weight: var(--w-heavy); line-height: .9; }
.pe-card-num small { font-family: var(--font-condensed); font-size: 16px; font-weight: var(--w-bold); margin-left: 1px; }
.pe-card-delta { font-size: var(--fs-caption); color: var(--fg2); }
.pe-card .pe-spark { width: 100%; height: 34px; }
.pe-card-rec { font-size: var(--fs-body-s); font-weight: var(--w-demibold); }
.pe-card--agir .pe-card-rec { color: var(--st-erro); }
.pe-card--ok .pe-card-rec { color: var(--st-sucesso); }
.pe-card-pe { display: flex; gap: 2px var(--s-3); flex-wrap: wrap; font-size: var(--fs-caption); color: var(--fg3); }
.pe-card-pe .pe-vivo { font-weight: var(--w-demibold); }
.pe-card-pe .pe-vivo::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--st-sucesso); margin-right: 4px; vertical-align: 1px; }
/* Modo painel (tela cheia): some o cabeçalho */
body.pe-modo-painel .pe-topo { display: none; }
body.pe-modo-painel .pe-conteudo--painel { max-width: none; padding-top: var(--s-4); }
@media (max-width: 1000px) { .pe-painel { grid-template-columns: 1fr; } }
/* Detalhe: botão da chance, séries históricas, linha */
.pe-det-botao { text-align: left; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-alt); padding: var(--s-3) var(--s-4); font: inherit; color: var(--fg1); cursor: pointer; }
.pe-det-botao b { display: block; font-family: var(--font-condensed); font-size: 28px; font-weight: var(--w-heavy); line-height: 1.05; }
.pe-det-botao span { display: block; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg3); font-weight: var(--w-demibold); margin-top: 2px; }
.pe-det-botao small { display: block; color: var(--fg2); font-size: var(--fs-caption); margin-top: 2px; text-decoration: underline dotted; }
.pe-series { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-3); }
.pe-serie-bloco { background: var(--bg-alt); border-radius: var(--radius-sm); padding: var(--s-3); }
.pe-serie-bloco h4 { margin: 0 0 var(--s-1); font-size: var(--fs-body-s); font-weight: var(--w-demibold); }
.pe-serie-hist { width: 100%; height: auto; }
.pe-ponto--hoje { fill: var(--od-vermelho); stroke: var(--fg1); stroke-width: 1.5; }
.pe-ponto-valor { font-family: var(--font-condensed); font-size: 10px; font-weight: var(--w-bold); fill: var(--fg1); }
.pe-ponto-valor--antes { fill: var(--fg3); font-weight: var(--w-regular); }
.pe-ponto-valor--hoje { fill: var(--od-vermelho); font-size: 11px; }
.pe-linha-lote-h { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2); }
.pe-linha-lote-h h3 { margin: 2px 0 0; }
.pe-linha-lote-num { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: var(--fs-body-s); color: var(--fg2); }
.pe-linha-lote-num b { font-family: var(--font-condensed); font-size: 18px; color: var(--fg1); }
.pe-linha-lote + .pe-linha-lote { border-top: 1px solid var(--line); padding-top: var(--s-5); }
/* Memorial de cálculo */
.pe-memorial h4 { margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-body); font-weight: var(--w-bold); }
.pe-memorial p { line-height: 1.55; }
.pe-memorial-pior td { background: rgba(255, 184, 28, .22); }
/* Cartões lado a lado dentro de cada coluna quando cabe: o painel inteiro
   numa tela de 1920 × 1080 sem rolar. */
.pe-coluna-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s-2); }
.pe-card-num b { font-size: 34px; }
.pe-card .pe-spark { height: 28px; }
.pe-serie-hist .pe-eixo { font-size: 10px; }
.pe-serie-hist .pe-lim-txt { font-size: 10px; }

/* ── Relatório sem rolagem lateral (João, 09/10/2026) ─────────────────
   As tabelas cabem na largura: o detalhe vai embaixo do valor, o
   cabeçalho quebra linha e as colunas de apoio somem em tela estreita
   (pe-col-m abaixo de 900 px, pe-col-s abaixo de 600 px). */
.od-tabela th { white-space: normal; }
.od-tabela.pe-tabela-cabe td.od-num { white-space: normal; }
.od-tabela.pe-tabela-cabe td.od-num .pe-produto-cod { white-space: nowrap; }
.od-tabela td.pe-nome-col { min-width: 0; }
.pe-so-estreito { display: none; }
.pe-txt-alerta { color: var(--st-erro); }
@media (max-width: 900px) { .pe-col-m { display: none; } }
@media (max-width: 600px) {
  .pe-col-s { display: none; }
  .pe-so-estreito { display: block; }
  .od-tabela.pe-compacta th, .od-tabela.pe-compacta td, .od-tabela.pe-tabela-cabe th, .od-tabela.pe-tabela-cabe td { padding: var(--s-2) 4px; }
  .od-tabela.pe-compacta td, .od-tabela.pe-tabela-cabe td { font-size: 13px; }
  .od-popup .od-campo { min-width: 0; }
  .doc table { table-layout: fixed; }
  .doc th, .doc td { padding: 3px 2px; font-size: 9.5px; word-break: break-word; }
}
@media (max-width: 600px) {
  .pe-filtro-datas { flex-direction: column; }
  .pe-filtro-datas .od-campo, #f-op, #f-produto { width: 100%; min-width: 0; }
  .od-tabela.pe-tabela-cabe td.od-num .pe-produto-cod { white-space: normal; }
  .od-tabela th.pe-ordena { letter-spacing: .02em; }
  .od-popup td .od-campo[data-c] { width: 62px !important; padding-left: 6px; padding-right: 4px; }
}
@media (max-width: 600px) { .od-popup .od-tabela .pe-chk { font-size: 12px; gap: 4px; } }

/* ── Configurações do peso (09/10/2026) ── */
.pe-regra { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.pe-form--regra { grid-template-columns: 1fr; }
.pe-campo-pct { display: flex; align-items: center; gap: var(--s-2); }
.pe-campo-pct .od-campo { max-width: 110px; font-family: var(--font-condensed); font-size: 22px; font-weight: var(--w-bold); }
.pe-campo-pct span { font-weight: var(--w-bold); }
.pe-regra-lista { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-2); line-height: 1.5; }
.pe-regra-lista .od-selo { margin-right: var(--s-2); }
.pe-prod-barra { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-2); }
.pe-prod-barra #pr-busca { max-width: 280px; }
.pe-prod-acoes-lote { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.pe-col-marca { width: 36px; text-align: center; }
.pe-col-marca input { width: 18px; height: 18px; }
.od-tabela tr.pe-sujo td { background: rgba(255, 184, 28, .14); }
.pe-faixa { display: inline-flex; gap: 4px; }
.pe-tabela-cabe .pe-cel { width: 72px; min-height: 36px; padding: 4px 6px; text-align: right; }
.pe-tabela-cabe select.pe-cel { width: 70px; text-align: left; }
.pe-salvar-fixo { position: sticky; bottom: var(--s-3); z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius-md); background: var(--bg-dark); color: var(--fg-on-dark); box-shadow: var(--shadow-md); }
.pe-salvar-fixo span { margin-right: auto; }
/* Seleção de lotes no relatório */
.pe-selecao { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin: 0 0 var(--s-2); font-size: var(--fs-body-s); }
.pe-selecao select.od-campo { width: auto; min-height: 36px; padding: 4px 8px; }
.pe-btn-liberar { margin-top: 6px; min-height: 32px !important; }
@media (max-width: 760px) { .pe-regra { grid-template-columns: minmax(0, 1fr); } }
.pe-barra { fill: rgba(238, 39, 55, .55); }
.pe-barra--hoje { fill: var(--od-vermelho); }
.pe-card-op { font-size: var(--fs-caption); font-weight: var(--w-demibold); color: var(--fg1); background: var(--bg); border-radius: 999px; padding: 2px 10px; justify-self: start; }
.pe-card-op--sem { color: var(--fg3); font-weight: var(--w-regular); }
@media (max-width: 600px) {
  .pe-tabela-cabe .pe-col-marca { width: 22px; padding-left: 2px !important; padding-right: 2px !important; }
  .pe-tabela-cabe .od-btn { padding: 0 8px; min-height: 32px; font-size: 13px; }
}

/* ── Visual enxuto (João, 09/10/2026) ─────────────────────────────────
   Nas telas de consulta e configuração o corpo cai para 14 px e os
   controles para 32 a 36 px: o filtro do relatório cabe em duas linhas em
   vez de ocupar a tela. Vale só dentro de .pe-conteudo e do cabeçalho; os
   popups de lançamento seguem com o toque grande do operador. */
.pe-topo-in { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.pe-titulo { font-size: 22px; }
.pe-nav a, .pe-nav button { min-height: 32px; padding: 0 var(--s-3); font-size: 13px; }
.pe-conteudo { padding-top: var(--s-4); font-size: var(--fs-body-s); }
.pe-conteudo .od-rotulo { font-size: 12px; margin-bottom: 2px; }
.pe-conteudo .od-campo { min-height: 34px; padding: 4px var(--s-3); font-size: 14px; }
.pe-conteudo .od-btn { min-height: 34px; padding: 0 var(--s-4); font-size: 14px; }
.pe-conteudo .pe-pilulas { gap: 4px; }
.pe-conteudo .pe-pilula { min-height: 30px; min-width: 0; padding: 0 var(--s-3); font-size: 13px; font-weight: var(--w-medium); }
.pe-conteudo .pe-chk { min-height: 30px; font-size: 13px; }
.pe-conteudo .pe-chk input { width: 16px; height: 16px; }
.pe-conteudo .pe-dica { font-size: 13px; }
.pe-bloco { padding: var(--s-4); }
.pe-bloco + .pe-bloco { margin-top: var(--s-3); }
.pe-bloco-h { margin-bottom: var(--s-3); }
.pe-bloco-h h2 { font-size: 18px; }
.pe-intro { margin-bottom: var(--s-4); }
.pe-intro h2 { font-size: 22px; margin-bottom: var(--s-1); }
.pe-intro p { font-size: 14px; }
.pe-filtros { gap: var(--s-3) var(--s-5); }
.pe-filtros > div { min-width: 0; }
.pe-filtros .od-campo { min-height: 32px; }
.pe-filtros #f-produto { width: 200px; }
.pe-filtros #f-op { width: 190px; }
.pe-filtro-datas .od-campo { width: 150px; }
.pe-filtro-resumo { font-size: 13px; margin: var(--s-2) 0 0; }
.pe-conteudo .od-kpis { gap: var(--s-3); --kpi-min: 180px; margin: var(--s-3) 0; }
.pe-conteudo .od-kpis > .od-card { padding: var(--s-3); }
.pe-conteudo .od-kpi-valor { font-size: 30px; }
.pe-conteudo .od-tabela th, .pe-conteudo .od-tabela td { padding: var(--s-2); }
.pe-conteudo .od-tabela td { font-size: 13px; }
.pe-cartao { padding: var(--s-4); gap: var(--s-3); }
.pe-cartao-h h3 { font-size: 17px; }
.pe-campo-pct .od-campo { font-size: 18px; max-width: 90px; }
.pe-tabela-cabe .pe-cel { min-height: 30px; }
/* Acompanhamento: título, resumo e colunas mais baixos */
.pe-painel-titulo { font-size: 22px; }
.pe-resumo-dia { margin-bottom: var(--s-4); }
.pe-resumo-item { padding: 3px 10px; font-size: 13px; }
.pe-resumo-item b { font-size: 16px; }
.pe-coluna-nome { font-size: 17px; }
.pe-card-nome { font-size: 14px; }
.pe-card-num b { font-size: 30px; }
.pe-card-rec { font-size: 13px; }
/* Ícone da etapa: produto final em vermelho, semielaborado em cinza */
.pe-etapa { display: inline-flex; align-items: center; gap: 5px; }
.pe-ic { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pe-ic .pe-ic-cheio { fill: currentColor; stroke: none; }
.pe-ic--final { color: var(--od-vermelho); }
.pe-ic--biscoito, .pe-ic--combinacao { color: var(--fg2); }
.pe-coluna-grupo { margin: var(--s-3) 0 0; padding: 0 var(--s-3) 2px; border-bottom: 1px dashed var(--line-strong); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: var(--w-demibold); color: var(--fg3); }
.pe-coluna-cartoes--semi button.pe-card { background: var(--bg); }
/* Configurações: o critério da liberação explicado antes dos campos */
.pe-criterio { max-width: 90ch; margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--od-vermelho); background: var(--bg); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.55; }
.pe-criterio p { margin: 0 0 var(--s-2); }
.pe-criterio .pe-link { padding: 0; min-height: 28px; }
.pe-exemplo { max-width: 420px; }
.pe-bloco-h #busca, .pe-prod-barra #pr-busca { width: 240px; }
@media (max-width: 600px) { .pe-bloco-h #busca, .pe-prod-barra #pr-busca { width: 100%; } }
@media (max-width: 600px) { .pe-exemplo { table-layout: fixed; } .pe-exemplo th { letter-spacing: .02em; } .pe-exemplo th, .pe-exemplo td { padding: 6px 4px; } .pe-exemplo .od-selo { padding: 2px 8px; } }

/* Histórico do produto: barra clicável e os lançamentos do dia escolhido */
.pe-barra-g { cursor: pointer; outline: none; }
.pe-barra-alvo { fill: transparent; }
.pe-barra-g:hover .pe-barra-alvo, .pe-barra-g:focus-visible .pe-barra-alvo { fill: rgba(0, 0, 0, .05); }
.pe-barra-g--sel .pe-barra-alvo { fill: rgba(255, 184, 28, .28); }
.pe-barra-g--sel .pe-barra { fill: var(--fg1); }
.pe-barra-g--sel .pe-ponto-valor { fill: var(--fg1); font-weight: var(--w-heavy); }
.pe-hist-dia:empty { display: none; }
.pe-hist-dia { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-left: 4px solid var(--od-amarelo); border-radius: var(--radius-sm); background: var(--bg); }
.pe-hist-dia-h { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2); }
.pe-hist-dia-h h4 { margin: 0; font-size: 15px; font-weight: var(--w-bold); }
.pe-hist-dia-h .od-btn { min-height: 32px; font-size: 13px; padding: 0 var(--s-3); }
.pe-hist-dia-num { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); margin-bottom: var(--s-2); font-size: 13px; color: var(--fg2); }
.pe-hist-dia-num b { font-family: var(--font-condensed); font-size: 16px; color: var(--fg1); font-variant-numeric: tabular-nums; }
.pe-hist-dia .pe-pesos-linha { white-space: normal; }
/* Dia com muitos subgrupos: a tabela rola por dentro e o gráfico fica à vista */
.pe-hist-tabela { max-height: 320px; overflow-y: auto; overflow-x: hidden; }
.pe-hist-tabela thead th { position: sticky; top: 0; z-index: 1; }
/* Celular: as ações do popup descem pra baixo do título, e o X fica no canto */
@media (max-width: 600px) {
  .od-popup-topo { flex-wrap: wrap; }
  .od-popup-topo-txt { flex: 1 1 calc(100% - 64px); }
  .od-popup-acoes { order: 3; flex: 1 1 100%; flex-wrap: wrap; gap: var(--s-2); }
  .od-popup-acoes .od-btn { min-height: 36px; font-size: 14px; padding: 0 var(--s-3); }
}

/* ── 13/10/2026: laudo com seções escolhidas, etapas por família, lançamento em sequência ── */
.pe-doc-campos { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-alt); }
.pe-doc-campos summary { cursor: pointer; font-weight: var(--w-demibold); font-size: 14px; }
.pe-doc-campos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px var(--s-4); margin-top: var(--s-2); }
.pe-doc-campos .pe-chk { min-height: 30px; font-size: 13px; }
.pe-doc-campos .pe-chk:has(input:disabled) { opacity: .5; }
.pe-doc-campos .pe-dica { margin: var(--s-2) 0 0; font-size: 12px; }
.pe-etapa-chk { min-height: 26px !important; font-size: 12px !important; margin-bottom: 2px; }
.pe-etapa-chk input { width: 15px !important; height: 15px !important; }
.pe-gravado { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.pe-gravado .od-btn { min-height: 36px; font-size: 14px; }
/* Balança no passo 2 do lançamento: escolhida antes dos pesos, trocável */
.pe-balanca-linha { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; margin: 0 0 var(--s-3); }
.pe-balanca-linha > .od-rotulo-mini { margin: 0; }
@media (max-width: 560px) { .pe-balanca-linha { grid-template-columns: 1fr; gap: var(--s-2); } }
/* Balanças em tabela (13/10/2026) */
.pe-tabela-bal td { vertical-align: middle; }
.pe-tabela-bal tr.pe-inativa td { color: var(--fg3); }
.pe-acoes-bal { text-align: right; }
@media (min-width: 1100px) { .pe-acoes-bal { white-space: nowrap; } }
.pe-acoes-bal .od-btn { min-height: 30px; padding: 0 var(--s-3); font-size: 13px; margin-right: var(--s-1); }
.pe-acoes-bal .pe-link { min-height: 28px; font-size: 13px; }
@media (max-width: 760px) { .pe-acoes-bal { white-space: normal; text-align: left; } .pe-acoes-bal .pe-link { display: inline-block; } }
.pe-hist-h { margin: var(--s-4) 0 var(--s-2); font-size: 15px; font-weight: var(--w-bold); }
.pe-hist-h:first-child { margin-top: 0; }
/* Verificação com corpo de prova */
.pe-verif-leituras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.pe-verif-leitura { font-family: var(--font-condensed); font-size: 20px; font-weight: var(--w-bold); text-align: center; }
.pe-verif-previa { margin-top: var(--s-3); min-height: 28px; font-size: 14px; display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.pe-balanca-linha { grid-template-columns: 110px minmax(0, 1fr); }
.pe-balanca-linha #balanca-situacao { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
@media (max-width: 560px) { .pe-balanca-linha #balanca-situacao { grid-column: 1; } }
@media (max-width: 600px) {
  .pe-tabela-bal .od-selo, #lista-corpos .od-selo { white-space: normal; display: inline-block; }
  .pe-acoes-bal .od-btn { display: block; width: 100%; margin: 0 0 4px; }
  .pe-tabela-bal td.pe-nome-col .pe-produto-cod { white-space: normal; }
}

/* ── Administração do peso (14/10/2026) ── */
.od-btn--perigo { background: var(--st-erro); color: var(--fg-on-loud); }
.od-btn--perigo:hover { opacity: .85; }
.pe-abas-admin { margin: var(--s-4) 0 var(--s-3); }
.pe-saude-topo { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-radius: var(--radius-md); border-left: 6px solid var(--st-sucesso); background: var(--bg-alt); margin-bottom: var(--s-3); }
.pe-saude-topo b { font-size: 18px; }
.pe-saude-topo span { color: var(--fg2); font-size: 13px; }
.pe-saude--atencao { border-left-color: var(--st-atencao); }
.pe-saude--agir { border-left-color: var(--st-erro); }
.pe-saude-lista { display: grid; gap: var(--s-2); }
.pe-saude-q { background: var(--bg-alt); border: 1px solid var(--line); border-left: 5px solid var(--st-sucesso); border-radius: var(--radius-md); padding: var(--s-2) var(--s-4); }
.pe-saude-q--atencao { border-left-color: var(--st-atencao); }
.pe-saude-q--agir { border-left-color: var(--st-erro); }
.pe-saude-q summary { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; padding: var(--s-1) 0; flex-wrap: wrap; }
.pe-saude-q summary b { flex: 1; font-size: 15px; }
.pe-saude-n { color: var(--fg3); font-size: 13px; }
.pe-saude-q .pe-dica { margin: var(--s-1) 0 var(--s-2); }
.pe-saude-txt { display: block; margin-top: 2px; font-size: 13px; }
.pe-grade-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-2); margin-bottom: var(--s-3); }
.pe-grade-dados > div { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s-2) var(--s-3); }
.pe-grade-dados span { display: block; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg3); font-weight: var(--w-demibold); }
.pe-grade-dados b { display: block; font-size: 15px; }
.pe-grade-dados small { display: block; color: var(--fg2); font-size: 12px; }
.pe-admin-acoes { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.pe-admin-acoes .od-btn { min-height: 34px; font-size: 14px; }
.pe-admin-sg td.pe-suspeito { background: rgba(238, 39, 55, .14); color: var(--st-erro); font-weight: var(--w-bold); }
.pe-admin-sg tr.pe-marcado td { background: rgba(255, 184, 28, .2); }
.pe-admin-sg tr.pe-suspeito-linha td { font-size: 12px; color: var(--st-erro); border-top: 0; padding-top: 0; }
.pe-admin-sg tr.pe-desfeito td { color: var(--fg3); text-decoration: line-through; }
.pe-admin-sg tr.pe-desfeito td.pe-acoes-bal { text-decoration: none; }
.pe-admin-log { margin: 0 0 var(--s-2); font-size: 13px; line-height: 1.5; }
.pe-pesos--admin { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pe-admin-peso { display: grid; gap: 2px; font-size: 12px; color: var(--fg3); font-weight: var(--w-demibold); }
.pe-admin-peso .od-campo { font-family: var(--font-condensed); font-size: 18px; font-weight: var(--w-bold); text-align: center; }
.pe-admin-peso .od-campo.ruim { border-color: var(--st-erro); background: rgba(238, 39, 55, .06); }
.pe-admin-dif { margin-top: var(--s-3); font-size: 14px; }
@media (max-width: 560px) { .pe-pesos--admin { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Recebimento (fabricante externo): NF digitada quando não está na lista */
.pe-nf-manual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); margin-top: var(--s-2); }
@media (max-width: 560px) { .pe-nf-manual { grid-template-columns: 1fr; } }

/* ── Quem está pesando (passo 1 do lançamento) ── */
.pe-quem-campo { max-width: 520px; min-height: 52px; font-size: 18px; }
.pe-quem-campo.ruim { border-color: var(--st-erro); box-shadow: 0 0 0 3px rgba(238, 39, 55, .22); }
.pe-quem-lista { margin-top: var(--s-3); }
.pe-quem-lista .pe-pilula { min-height: 48px; font-size: 16px; }