/* Estilos só da área "producao" (ordens de produção). O padrão geral está em app.css — use as classes de lá primeiro.
   Tudo aqui começa com .op- (tela) ou .opi- (OP impressa) para não mexer nas outras telas. */

/* tabela encostada nas bordas de cartão sem espaço (sem vazar para os lados) */
.op-pagina .cartao.sem-espaco > .tabela-caixa { margin: 0; }
/* lupa da busca sem cobrir o texto (em app.css o padding de .barra input apaga o de .busca input) */
.op-pagina .busca input { padding-left: 44px; }
/* etiqueta "Entrada" (etiquetaMovimento) herda o estilo de campo .entrada de app.css (largura 100%, altura 46px, borda) */
.op-pagina .etiqueta.entrada { width: auto; min-height: 0; border: 0; }
/* etapa "Aguardando envase" (laranja claro: diferente de planejada/azul, em fabricação/amarelo e concluída/verde) */
.etiqueta.op-envase { background: #fde4d6; color: #7a2e0b; }

/* 7 abas (etapas) numa linha só no computador */
.op-pagina .abas button { padding: 10px 14px; }
/* filtro por receita/produto na barra da lista */
.op-pagina .barra .op-filtro { flex: 0 1 300px; min-width: 200px; }

/* faixa de situação no topo (igual ao layout aprovado: rótulo + etiqueta, separados por linha) */
.op-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; padding: 14px 20px; }
.op-faixa-item { display: flex; align-items: center; gap: 10px; font-size: 16px; padding: 4px 22px; border-left: 1px solid var(--borda); }
.op-faixa-item:first-child { padding-left: 0; border-left: 0; }
.op-faixa-item .rot { color: var(--texto); }
.op-faixa-item .fraco { color: var(--texto-3); font-size: 14px; }
.op-faixa-acao { margin-left: auto; padding-left: 20px; }

/* formulário com o rótulo ao lado do campo (2 colunas) */
.op-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.campo.op-linha { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 16px; }
.campo.op-linha > label { font-size: 16px; font-weight: 400; color: var(--texto); }
.campo.op-linha.alto { align-items: start; }
.campo.op-linha.alto > label { padding-top: 11px; }
.campo.op-linha textarea { min-height: 46px; }
.campo.op-linha .dica { display: block; margin-top: 4px; }
/* escolha "Por receita" x "Por produto" */
.op-modo .btn { min-height: 36px; }
.op-modo .btn:disabled { opacity: .45; }

/* quantidade com a unidade ao lado */
.op-qtd { display: flex; align-items: center; gap: 10px; }
.op-qtd input { flex: 1 1 auto; min-width: 0; }
.op-qtd span { color: var(--texto-2); font-size: 16px; min-width: 22px; }
/* escolha da unidade (L, KG, UN) ao lado do campo, o produto das unidades (2 L, 5 L) e a conversão embaixo */
.op-qtd select.op-un { flex: 0 0 88px; width: 88px; padding-left: 12px; padding-right: 8px; font-weight: 600; }
.op-qtd-de { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.op-qtd-de[hidden] { display: none; }
.op-qtd-de > span { color: var(--texto-2); font-size: 16px; }
.op-qtd-de select { flex: 1 1 auto; min-width: 0; }
.op-conv { margin-top: 6px; font-size: 15px; color: var(--texto); line-height: 1.4; }
.op-conv:empty { display: none; }
.op-conv b { font-size: 16px; }
.op-conv .fraco { color: var(--texto-3); font-size: 14px; }
.op-conv-aviso, .op-conv-erro { display: block; margin-top: 4px; padding: 5px 10px; border-radius: var(--raio); font-size: 14px; }
.op-conv-aviso { background: var(--amarelo-claro); border: 1px solid #f0d98a; color: var(--amarelo-texto); }
.op-conv-erro { margin-top: 0; background: var(--vermelho-claro); border: 1px solid #f3b9b9; color: #8a1c1c; }

/* aviso amarelo (produto sem fórmula, receita sem produto...) */
.op-aviso {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--amarelo-claro); border: 1px solid #f0d98a; color: var(--amarelo-texto);
  border-radius: var(--raio); padding: 12px 16px; font-size: 15px;
}
.op-aviso svg { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 1px; }
.op-aviso a { color: var(--amarelo-texto); font-weight: 600; text-decoration: underline; margin-left: 4px; }
.op-consumo > .tabela-caixa > .op-aviso { margin: 0 20px 20px; }
.op-consumo > .op-aviso { margin: 0 0 4px; }
.op-envase-aviso { padding: 16px 0 0; }
.modal .op-aviso { margin-top: 6px; }
#conferir > .op-aviso { margin-top: 4px; }
.op-aviso.critico { background: var(--vermelho-claro); border-color: #f3b9b9; color: #8a1c1c; }
.op-aviso.critico a { color: #8a1c1c; }

/* pontos "Conferir: ..." da receita (nova OP) */
.op-conferir { margin-top: 8px; border: 1px solid #f0d98a; background: var(--amarelo-claro); color: var(--amarelo-texto); border-radius: var(--raio); padding: 10px 16px; font-size: 15px; }
.op-conferir summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.op-conferir summary svg { width: 20px; height: 20px; flex: 0 0 20px; }
.op-conferir ul { margin: 8px 0 2px; padding-left: 22px; }
.op-conferir li + li { margin-top: 4px; }

/* etapas: visto dentro da bola verde */
.op-etapas .bola svg { width: 20px; height: 20px; }
.op-cancelada { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--texto-2); }

/* resumo da OP (rótulo em cima, valor embaixo) */
.op-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; }
.op-resumo .rot, .op-obs .rot, .op-rendimento .rot, .op-cq-situacao .rot { display: block; font-size: 14px; color: var(--texto-2); margin-bottom: 2px; }
.op-resumo .val { display: block; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.op-obs { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borda); }
.op-obs > div { white-space: pre-line; font-size: 15px; }

/* detalhe: conteúdo + linha do tempo ao lado */
.lado-a-lado.op-lado { grid-template-columns: minmax(0, 1fr) 340px; margin-bottom: 20px; }
.op-lado .pilha > .cartao { margin-bottom: 0; }

/* real diferente do previsto */
.op-diferente { color: #9a6700; }

/* envase: rendimento */
.op-rendimento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 20px; padding: 16px 0 0; border-top: 1px solid var(--borda); margin-top: 20px; }
.op-rendimento .val { display: block; font-size: 17px; font-weight: 700; }
.op-consumo > .tabela-caixa + .op-rendimento { margin-top: 20px; }

/* controle de qualidade: situação */
.op-cq-situacao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin-bottom: 16px; }
.op-cq-situacao .val { display: block; font-size: 16px; font-weight: 600; }
.op-cq-situacao > p { grid-column: 1 / -1; }

/* linha do tempo das etapas */
.op-tempo { list-style: none; margin: 0; padding: 0; }
.op-tempo li { position: relative; padding: 0 0 18px 28px; }
.op-tempo li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--verde); }
.op-tempo li::after { content: ""; position: absolute; left: 9px; top: 21px; bottom: 1px; width: 2px; background: var(--borda); }
.op-tempo li:last-child { padding-bottom: 0; }
.op-tempo li:last-child::after { display: none; }
.op-tempo li.alerta::before { background: var(--vermelho); }
.op-tempo li.futuro::before { background: var(--branco); border: 2px solid var(--borda-forte); width: 8px; height: 8px; }
.op-tempo-titulo { font-weight: 700; font-size: 15px; line-height: 1.3; }
.op-tempo li.futuro .op-tempo-titulo { color: var(--texto-3); font-weight: 600; }
.op-tempo-quem { font-size: 14px; color: var(--texto-2); }
.op-tempo-det { font-size: 14px; color: var(--texto-2); margin-top: 2px; overflow-wrap: anywhere; }
.op-tempo-usu { font-size: 12px; color: var(--texto-3); }

/* textos de apoio */
.op-menor { font-size: 13px; font-weight: 400; }
.cartao.sem-espaco > .op-dica { margin: -6px 0 14px; padding: 0 20px; }
.op-dica { font-size: 14px; color: var(--texto-3); }
.op-dica-modal { margin: 4px 0 10px; font-size: 14px; color: var(--texto-3); }
/* fim da fabricação: NR lido do rótulo da matéria-prima (verde) ou NR que não é desta OP (vermelho) */
.op-aviso-nr { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--raio); font-size: 14px; font-weight: 600; }
.op-aviso-nr.ok { background: var(--verde-claro); border: 1px solid #b9e2c8; color: #14532d; }
.op-aviso-nr.erro { background: var(--vermelho-claro); border: 1px solid #f3b9b9; color: #8a1c1c; }

/* janelas das etapas */
.op-janela-cabeca {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px;
  background: var(--cabecalho-tabela); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; margin-bottom: 16px;
}
.op-janela-cabeca .rot { display: block; font-size: 13px; color: var(--texto-2); }
.op-janela-cabeca b { font-size: 16px; overflow-wrap: anywhere; }
.op-operador { margin-bottom: 18px; }
.op-operador-linha { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.op-operador-linha input {
  flex: 0 1 340px; min-height: 56px; font-size: 22px; font-weight: 600; letter-spacing: 1px;
  border: 2px solid var(--azul); background: #f2f7fd; color: var(--azul-escuro);
}
.op-operador-linha input::placeholder { font-size: 16px; font-weight: 400; letter-spacing: 0; }
.op-operador-nome { font-size: 17px; font-weight: 700; }
.op-operador-nome.ok { color: var(--verde); }
.op-operador-nome.erro { color: var(--vermelho); }

/* janela de concluir / fim da fabricação: consumo real editável */
.op-tabela-real .op-qtd { justify-content: flex-end; }
.op-tabela-real input.entrada { flex: 0 0 130px; width: 130px; }
.op-tabela-real .op-qtd span { min-width: 28px; text-align: left; }
.op-tabela-real input.op-nr { width: 150px; }

/* janela de envase */
.op-tabela-envase .op-qtd { justify-content: flex-end; }
.op-tabela-envase input.entrada { flex: 0 0 110px; width: 110px; }
.op-envase-conta { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 12px 14px; margin-top: 12px; background: var(--cabecalho-tabela); border: 1px solid var(--borda); border-radius: var(--raio); }
.op-envase-conta .rot { display: block; font-size: 13px; color: var(--texto-2); }
.op-envase-conta b { font-size: 18px; }
.op-envase-emb { margin-top: 10px; font-size: 14px; color: var(--texto-2); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.op-envase-emb:empty { display: none; }
.op-emb.falta b { color: var(--vermelho); }
.op-parcial { margin-top: 16px; font-weight: 600; }

/* janela do controle de qualidade */
.op-tabela-cq input.entrada { min-width: 140px; }
.op-tabela-cq input[type=checkbox] { width: 22px; height: 22px; }
.op-cq-decisao { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 18px; }
.op-cq-decisao .botoes { margin-top: 8px; gap: 24px; }
.op-cq-decisao input[type=radio] { width: 20px; height: 20px; }

/* ficha de produção da OP por produto (A4) */
.op-ficha .doc-itens { margin-bottom: 6mm; }
.op-ficha .doc-itens td { height: 36px; }
.op-ficha .doc-itens .op-cod { font-size: 12px; color: #444; }
.op-ficha .op-col-pesado { width: 24%; }
.op-ficha .op-col-visto { width: 10%; }
.op-ficha-registro td { height: 42px; }
.op-ficha-registro td.op-unidade { text-align: right; color: #444; }
.op-ficha .op-obs-doc { white-space: pre-line; }
.op-assinatura { justify-content: flex-end; }
.op-assinatura div { flex: 0 0 50%; }
.op-ficha-aviso {
  border: 2px solid var(--vermelho); color: var(--vermelho); text-align: center;
  font-size: 18px; font-weight: 800; padding: 6px; margin: -2mm 0 6mm;
}

/* =====================================================================
   OP impressa (OP por receita) — cópia do documento da fábrica
   (layouts/modelo-op-pagina1.png + página 2 dos .docx): A4, margens de 1,27 cm, cabeçalho de gestão
   da qualidade em toda página. As páginas são montadas no JS medindo o conteúdo (Página X de Y):
   por isso o espaço entre blocos é só margin-top (nada de margin-bottom, que a medida não enxerga).
   ===================================================================== */
.opi-medidor { position: absolute; left: -10000px; top: 0; visibility: hidden; pointer-events: none; }
.opi-folhas { zoom: var(--opi-zoom, 1); }
.opi-pagina {
  box-sizing: border-box; width: 210mm; height: 297mm; padding: 6mm 12.7mm 12.7mm; margin: 0 auto 24px;
  background: #fff; border: 1px solid var(--borda); color: #000;
  font-family: Arial, Helvetica, sans-serif; font-size: 8pt; line-height: 1.3;
  display: flex; flex-direction: column; overflow: hidden;
}
.opi-corpo { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flow-root; }
.opi-corpo > :first-child { margin-top: 0 !important; }
.opi-pagina table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.opi-pagina td, .opi-pagina th { border: 1px solid #000; }
.opi-pagina p { margin: 0; }

/* cabeçalho */
.opi-cab { flex: 0 0 auto; margin-bottom: 4.5mm; }
.opi-cab td { padding: 1mm 2mm; vertical-align: middle; }
.opi-cab-logo { width: 37mm; height: 20mm; text-align: center; }
.opi-cab-logo img { display: block; height: 17.5mm; width: auto; margin: 0 auto; }
.opi-cab-titulo { text-align: center; font-size: 11pt; font-weight: 700; }
.opi-cab-info { width: 36mm; font-size: 7.5pt; line-height: 1.3; }
.opi-cab-op { padding: 1mm 2mm !important; }
.opi-cab-op-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 12mm; }
.opi-cab-num { font-size: 8pt; }
.opi-cab-num b { font-size: 10pt; }
.opi-cab-nome { text-align: center; font-size: 11pt; font-weight: 700; padding: 0 4mm; }
.opi-barras { justify-self: end; text-align: center; line-height: 1; }
.opi-barras svg { display: block; margin: 0 auto; }
.opi-barras-txt { font-family: Consolas, "Courier New", monospace; font-size: 7pt; letter-spacing: .5px; margin-top: .6mm; }

/* tabela da OP (OP Nº, produto, lote...) */
.opi-op td { padding: 1mm 1.5mm; height: 10mm; vertical-align: top; }
.opi-op .c1 { width: 20%; }
.opi-op .c2 { width: 23%; }
.opi-op .c3 { width: 33%; }
.opi-op .c4 { width: 24%; }
.opi-rot { display: block; font-size: 7.5pt; text-transform: uppercase; }
.opi-val { display: block; font-size: 8.5pt; overflow-wrap: anywhere; }
.opi-val.forte { font-weight: 700; font-size: 10pt; }
.opi-ate { font-size: 7.5pt; }

/* textos e checklists */
.opi-sec { font-weight: 700; font-size: 8pt; margin-top: 4mm !important; }
.opi-check { font-size: 7.5pt; margin-top: 2.2mm !important; text-transform: uppercase; }
.opi-sn { white-space: nowrap; margin-left: 2mm; }
.opi-tit-leve { font-size: 7.5pt; margin-top: 4mm !important; text-transform: uppercase; }
.opi-sub { text-transform: none; font-weight: 400; }
.opi-nowrap { white-space: nowrap; }

/* RESP. / ASSINATURA */
.opi-resp { margin-top: 2.5mm; }
.opi-resp td { width: 50%; padding: 1mm 1.5mm; height: 8mm; vertical-align: top; }
.opi-resp .opi-val { font-weight: 700; margin-top: .6mm; }
.opi-resp .opi-eletronica { font-weight: 400; font-size: 7.5pt; }

/* matéria-prima */
.opi-mp { margin-top: 3mm; }
.opi-mp th { font-weight: 400; font-size: 7.5pt; padding: 1mm; text-align: center; vertical-align: top; }
.opi-mp td { padding: .6mm 1.5mm; height: 6.2mm; font-size: 9pt; vertical-align: middle; }
.opi-mp-nome { text-align: center; text-transform: uppercase; }
.opi-mp-nr { text-align: center; font-weight: 700; }
.opi-real { font-size: 7.5pt; }

/* instrução de trabalho */
.opi-instr { margin: 1.5mm 0 0; padding: 0 0 0 7mm; list-style: none; font-size: 9pt; line-height: 1.3; }
.opi-instr li { margin-top: .6mm; padding-left: 7mm; text-indent: -7mm; }
.opi-num { display: inline-block; width: 7mm; text-indent: 0; }

/* ocorrências em linhas pontilhadas */
.opi-ocorr { margin-top: 4mm; }
.opi-linha-pont { border-bottom: 1px dotted #000; height: 5mm; }
.opi-linha-pont.preenchida { height: auto; min-height: 5mm; font-size: 8.5pt; padding-top: 1mm; }

/* controle de qualidade */
.opi-cq { margin-top: 3mm; }
.opi-cq th, .opi-cq td { padding: 1mm 1.5mm; font-size: 7.5pt; }
.opi-cq th { font-weight: 700; text-align: center; }
.opi-cq td { height: 6.5mm; }
.opi-cq th:nth-child(1) { width: 21%; }
.opi-cq th:nth-child(2) { width: 16%; }
.opi-cq th:nth-child(3) { width: 27%; }
.opi-cq th:nth-child(4) { width: 22%; }
.opi-cq th:nth-child(5) { width: 14%; }
.opi-cq td.centro { text-align: center; font-weight: 700; }
.opi-equip { display: flex; justify-content: space-between; gap: 6mm; font-size: 7.5pt; margin-top: 1.6mm; text-transform: uppercase; }

/* envase: quantidade por tamanho */
.opi-qtd-emb { display: flex; align-items: flex-end; flex-wrap: wrap; }
.opi-tam { display: inline-flex; align-items: flex-end; gap: 1mm; margin-left: 8mm; }
.opi-preenche { display: inline-block; min-width: 24mm; border-bottom: 1px dotted #000; text-align: center; font-weight: 700; font-size: 9pt; line-height: 1.1; }

.opi-cancelada { border: 2px solid #c00; color: #c00; text-align: center; font-weight: 800; font-size: 13pt; padding: 1.5mm; }
.opi-cancelada + * { margin-top: 3mm; }

/* telas menores */
@media screen and (max-width: 1100px) {
  .op-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lado-a-lado.op-lado { grid-template-columns: 1fr; }
  .op-rendimento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 860px) {
  .op-form { grid-template-columns: 1fr; }
  .campo.op-linha { grid-template-columns: 1fr; gap: 6px; }
  .campo.op-linha.alto > label { padding-top: 0; }
  .op-faixa-item { padding: 4px 20px 4px 0; border-left: 0; }
  .op-faixa-acao { margin-left: 0; padding-left: 0; width: 100%; }
  .op-faixa-acao .btn { width: 100%; min-height: 46px; font-size: 16px; }
  .op-resumo { grid-template-columns: 1fr; }
  .op-rendimento, .op-cq-situacao, .op-janela-cabeca { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-cq-decisao { grid-template-columns: 1fr; }
  .op-pagina .barra .op-filtro { flex: 1 1 100%; }
  .cartao-titulo { flex-wrap: wrap; }
  .op-modo { margin-left: 0 !important; width: 100%; }
  .op-modo .btn { flex: 1 1 0; white-space: normal; text-align: center; }
  .op-operador-linha input { flex: 1 1 100%; }
}

/* impressão: só as folhas, tamanho real, uma por página */
@media print {
  .opi-folhas { zoom: 1 !important; }
  .opi-pagina { margin: 0; border: 0; break-after: page; page-break-after: always; }
  .opi-pagina:last-child { break-after: auto; page-break-after: auto; }
}