/* ═══════════════════════════════════════════════════════════════════════════ FRONTERA · LAYOUT DO SISTEMA Um arquivo. Toda tela o inclui; nenhuma redefine o que está aqui. POR QUE UM ARQUIVO SÓ Antes cada tela carregava suas regras. Ao acertar uma, as outras divergiam — e dentro do mesmo arquivo chegamos a ter quatro blocos para o mesmo botão e cinco pontos de corte diferentes, disputando entre si. Mudar o padrão passa a ser mudar UM lugar. A REGRA: se está aqui, a tela não redefine. Se a tela precisa de algo próprio, escreve DEPOIS do include e com nome próprio — nunca sobrescrevendo .btn, .navBtn, .topo ou as variáveis. ═══════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;600&display=swap'); /* ── A PALETA · sai da logomarca ──────────────────────────────────────── #113218 folha escura · #4F6754 folha clara · #902A29 cereja. O verde de TRABALHO é #155D32: a folha com mais luz, mesmo matiz, 7,4:1 sobre o papel. O #12b981 antigo dava 2,4:1 e falhava. */ :root{ --papel:#F6F7F4; --carta:#FFFFFF; --campo:#FFFFFF; --linha:#E0E4DF; --linha-2:#EEF1ED; --linha-3:#CBD2CB; /* faixa de cabecalho de tabela — um degrau abaixo do --linha-2 */ --thead:#D6DED4; --tinta:#14201B; --tinta-2:#5C6B64; --tinta-3:#6B7A74; --verde:#155D32; --verde-2:#0F4525; --verde-lv:#E8EFE9; --verde-md:#4F6754; /* a série SECUNDÁRIA de gráfico (manual, sequeiro, safra baixa) */ --verde-cl:#7FA98A; --cereja:#902A29; --cereja-lv:#F7ECEC; --ambar:#A16207; --ambar-lv:#FDF6E7; /* apelidos, para telas que usam os nomes antigos */ --bg-1:#F6F7F4;--bg-2:#F6F7F4;--bg-3:#F6F7F4; --card:#FFFFFF;--card-2:#FAFBF9;--stroke:#E0E4DF;--stroke-strong:#CBD2CB; --text:#14201B;--muted:#5C6B64;--muted-2:#6B7A74; --primary:#155D32;--primary-dark:#0F4525;--primary-ink:#FFFFFF; --accent-text:#155D32;--accent-lv:#E8EFE9;--danger:#902A29;--warning:#A16207; --success:#155D32;--card-hover:#F1F5F1; --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:16px; --radius-md:10px;--radius-lg:14px;--radius-xl:16px; --sombra:0 1px 2px rgba(20,32,27,.06),0 1px 3px rgba(20,32,27,.04); --shadow:0 1px 2px rgba(20,32,27,.06),0 1px 3px rgba(20,32,27,.04); --ring:0 0 0 3px rgba(21,93,50,.13); --sans:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial; --mono:'IBM Plex Mono',ui-monospace,monospace; --font:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial; /* O PONTO DE CORTE do sistema é 680px. Usar 760 numa tela e 680 noutra faz as duas divergirem na faixa entre os dois — onde caem telefone deitado e tablet. */ } *,*::before,*::after{box-sizing:border-box} html,body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%} body{margin:0;padding:0;background:var(--papel);color:var(--tinta); font-family:var(--sans);font-size:15px;line-height:1.5; -webkit-font-smoothing:antialiased; padding-bottom:env(safe-area-inset-bottom)} button,input,select,textarea{font:inherit;color:inherit} a{color:inherit;text-decoration:none} /* ── O CABEÇALHO ─────────────────────────────────────────────────────── Uma FAIXA de ponta a ponta, fora do conteúdo, separada pela borda inferior. Dentro de um cartão ele se emenda com o resto — e isso é estrutura, não aparência. */ .topo{background:var(--carta);border-bottom:2px solid var(--verde); padding-top:env(safe-area-inset-top)} .topoIn{max-width:1280px;margin:0 auto;padding:12px 20px;min-height:78px; display:flex;align-items:center;position:relative} /* A marca é absolute: no celular ela volta ao fluxo, senão os botões passam por cima dela — absolute não ocupa espaço. */ .marca{position:absolute;left:50%;transform:translateX(-50%);line-height:0} .marca svg{display:block;height:auto;width:clamp(184px,26vw,252px)} .navEsq{margin-right:auto} .navDir{margin-left:auto} /* ── O CONTEÚDO ─────────────────────────────────────────────────────── minmax(0,1fr) prende a coluna à largura do pai: sem isso, um item largo (uma tabela) estica a coluna e leva todos os irmãos junto. */ .pag{max-width:1280px;margin:0 auto;padding:24px 20px 90px; display:grid;grid-template-columns:minmax(0,1fr);gap:14px} .pag > *{min-width:0;max-width:100%} /* ── A ESCALA DE BOTÃO · três tamanhos, três papéis ──────────────────── navBtn 36px · 12,5px o CABEÇALHO — presença na barra, texto que não compete com a marca btn 34px · 13px AÇÃO NA PÁGINA — o texto é o que se lê btnSm 30px · 12,5px AÇÃO DENTRO DE UM BLOCO Branco, não transparente: transparente some sobre o branco do cabeçalho e não se distingue sobre o cinza da página. */ .navBtn{display:inline-flex;align-items:center;justify-content:center;gap:6px; height:36px;min-height:0;padding:0 14px;border-radius:var(--r); border:1px solid var(--verde);background:var(--carta);color:var(--verde); font-size:12.5px;font-weight:600;cursor:pointer; white-space:nowrap;transition:background .12s} .navBtn:hover{background:var(--verde-lv)} .navBtn.p{background:var(--verde);color:#fff} .navBtn.p:hover{background:var(--verde-2)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px; height:34px;min-height:0;padding:0 13px;border-radius:var(--r); border:1px solid var(--verde);background:var(--carta);color:var(--verde); font-size:13px;font-weight:600;cursor:pointer; white-space:nowrap;transition:.12s} .btn:hover{background:var(--verde-lv)} .btn:focus-visible,.navBtn:focus-visible{outline:2px solid var(--verde);outline-offset:2px} .btnP{background:var(--verde-lv);border:1.5px solid var(--verde); color:var(--verde);font-weight:600} .btnP:hover{background:#DCE7DE;border-color:var(--verde-2);color:var(--verde-2)} .btnP.grava{background:var(--verde);border-color:var(--verde);color:#fff} .btnP.grava:hover{background:var(--verde-2);border-color:var(--verde-2);color:#fff} .btnD{background:var(--carta);color:var(--cereja);border-color:#E4CACA} .btnD:hover{background:var(--cereja-lv);border-color:var(--cereja)} .btnSm{height:30px;padding:0 11px;font-size:12.5px} .btn:disabled{opacity:.45;cursor:not-allowed} /* ── A BARRA DE AÇÕES ───────────────────────────────────────────────── Botões de larguras diferentes lado a lado parecem ter pesos diferentes. Largura igual, e no celular dividem a tela. */ .acoes,.actions-bar{display:flex;gap:8px;justify-content:center;align-items:center; flex-wrap:nowrap;margin:0 0 12px} .acoes .btn{flex:1 1 0;min-width:0;max-width:190px} /* A barra de ACOES sao controles (Filtros, Imprimir): ficam do tamanho do texto, centrados. Esticar da a eles peso de acao principal, e no celular um botao de borda a borda parece campo de formulario. O alvo do dedo vem da ALTURA (34px no celular), nao da largura. */ .actions-bar .btn{flex:0 0 auto;width:auto;max-width:none} /* Botao sozinho nao estica: flex:1 mandaria ocupar a barra inteira. */ .acoes .btn:only-child,.actions-bar .btn:only-child{flex:0 0 auto} /* ── TIPOGRAFIA ─────────────────────────────────────────────────────── A cor diz QUEM FALA: verde o sistema, tinta o dado, cinza o apoio. */ h1,.title{margin:0;font-size:24px;font-weight:600;letter-spacing:-.022em; color:var(--verde);line-height:1.2;text-align:center; background:transparent;border:0;padding:4px 2px 10px} h2,.secTit{font-size:14px;font-weight:600;color:var(--verde)} h3{font-size:13.5px;font-weight:600;color:var(--verde)} .ident,.subtitulo,.subtitle{font-size:14.5px;font-weight:600;color:var(--tinta); text-align:center;padding:0 2px 14px;background:transparent} .hint,.sub,.small,.nota,.dica{font-size:11.5px;color:var(--tinta-2);line-height:1.5} label{display:block;margin-bottom:5px;color:var(--verde);font-weight:600;font-size:11.5px} /* ── SUPERFÍCIES · página cinza, blocos brancos ─────────────────────── É o contraste que faz cartões e tabelas se destacarem. Sem ele, tudo vira uma superfície só e as bordas fazem todo o trabalho. */ .card,.box,.side,.panel,.section,.tblBox{background:var(--carta); border:1px solid var(--linha-3);border-radius:var(--r-lg);box-shadow:var(--sombra)} /* ── CAMPOS ───────────────────────────────────────────────────────── */ input,select,textarea{background:var(--campo);border:1px solid #B9CDBE; border-radius:var(--r);color:var(--tinta);padding:0 11px;height:38px} textarea{height:auto;min-height:56px;padding:9px 11px} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--verde); box-shadow:var(--ring)} /* Rolar a página com o cursor sobre um campo numérico ALTERA o valor. Num cadastro de área isso corrompe dado em silêncio — use onwheel="this.blur()" em todo input de número. */ /* ── FILTRO ─────────────────────────────────────────────────────────── Fundo transparente: o painel já está sobre o cinza, e um retângulo branco ali cria cartão dentro de cartão. Os CAMPOS ficam brancos. */ .filtros{background:transparent;border:1px solid var(--linha); border-radius:var(--r-lg);padding:14px;margin-bottom:12px; display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:11px;align-items:end} .filtros.oculto{display:none} .filtros input,.filtros select,.filtros textarea{background:var(--carta);width:100%} .filtros .f{min-width:0} /* ── TABELAS ────────────────────────────────────────────────────────── Tabela larga rola DENTRO da própria caixa. Sem overflow, as últimas colunas ficam invisíveis — não cortadas. */ .tblBox{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0} .tblBox table{width:100%;border-collapse:collapse;font-size:13.5px} .tblBox th{font-size:10.5px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--verde);background:var(--papel); padding:10px 12px;border-bottom:1px solid var(--linha);text-align:center} .tblBox td{padding:11px 12px;border-bottom:1px solid var(--linha-3); color:var(--tinta);text-align:center} /* Só a primeira coluna de texto à esquerda: nomes de comprimento variável leem melhor alinhados; números comparam melhor centrados. */ .tblBox td:first-child{text-align:left} .tblBox th{text-align:center} .tblBox tbody tr:hover td{background:#FBFCFA} .tblBox tfoot td{background:var(--papel);font-weight:600; border-top:2px solid var(--linha-3)} /* Cinza LÊ, branco DIGITA — em tabela de edição, a faixa marca onde se pode escrever, que é o que falta saber ao chegar. */ .tblBox td:has(input),.tblBox td:has(select){background:var(--carta)} /* ── AVISO ────────────────────────────────────────────────────────── */ /* ── AJUDA POR BLOCO ─────────────────────────────────────────────── */ .ajuda{margin:0 0 8px} .ajuda>summary{list-style:none;cursor:pointer;width:22px;height:22px; display:inline-grid;place-items:center;border-radius:50%; border:1.5px solid var(--verde);color:var(--verde); font-size:12px;font-weight:700;font-family:var(--sans);line-height:1; transition:background .12s} .ajuda>summary::-webkit-details-marker{display:none} .ajuda>summary:hover{background:var(--verde-lv)} .ajuda[open]>summary{background:var(--verde);color:#fff;border-color:var(--verde)} .ajuda>div{margin-top:8px;padding:12px 14px;border-radius:var(--r); background:var(--verde-lv);border:1px solid var(--linha-3); font-size:12.5px;color:var(--tinta-2);line-height:1.6} .ajuda>div b{color:var(--tinta)} @media print{.ajuda{display:none!important}} .toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:90; padding:11px 18px;border-radius:var(--r);font-size:13.5px;font-weight:500; box-shadow:0 8px 26px rgba(20,32,27,.16);display:none;max-width:min(92vw,520px)} .toast.on{display:block} .toast.ok{background:var(--verde);color:#fff} .toast.err{background:var(--cereja);color:#fff} /* ═══ CELULAR · o corte é 680px ════════════════════════════════════ */ @media(max-width:680px){ body{font-size:16px} .topoIn{padding:12px 16px;min-height:0;flex-wrap:wrap; justify-content:center;gap:9px} .marca{position:static;transform:none;order:-1;width:100%; text-align:center;margin-bottom:4px} .marca svg{width:clamp(196px,64vw,258px);margin:0 auto} .navEsq,.navDir{flex:1;min-width:0;margin:0;display:flex} /* No celular a borda engrossa: o botao ocupa metade da largura e 1px se perde na escala do dedo. E o rótulo longo ("← Todas as recomendações") CORTA com reticências em vez de passar por cima do vizinho. */ .navBtn{flex:1 1 0;min-width:0;justify-content:center;height:34px;border-width:1.5px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block; line-height:32px;text-align:center;padding:0 10px} .btn{border-width:1.5px} .pag{padding:20px 16px 96px} h1,.title{font-size:19px} .acoes .btn{max-width:none;height:34px} .actions-bar .btn{height:34px;flex:0 0 auto;width:auto} .acoes .btn:only-child,.actions-bar .btn:only-child{max-width:none;width:auto;flex:0 0 auto} .filtros,.pnGrid,.f-grid,.filters-grid{grid-template-columns:1fr!important} .filter-actions{justify-content:stretch} .filter-actions .btn{flex:1} .filtros .f,.pnGrid .f{width:100%} } @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ═══════════════════════════════════════════════════════════════════════ * SEÇÃO 42 · O DESENHO DAS TELAS DE PLANEJAMENTO * * Estas regras estavam COPIADAS em três a sete telas cada. Toda conversão * nova exigia lembrar quais copiar — e foi assim que o .jaTop nasceu sem * grid, o .formPanel.open sumiu e o .painelProd ficou sem estilo, cada um * custando uma rodada de correção. * * Aqui elas ficam uma vez. A próxima tela as herda ao incluir este arquivo, * e mudar uma cor é uma linha em vez de sete. * ═══════════════════════════════════════════════════════════════════════ */ .execModalFoot{padding:11px 15px;border-top:1px solid var(--linha); background:var(--papel);display:flex;justify-content:flex-end;gap:10px} .execComo{margin-top:9px;padding-top:9px;border-top:1px solid var(--linha)} .execComoTit{font-size:10px;font-weight:600;text-transform:uppercase; letter-spacing:.04em;color:var(--verde);margin-bottom:3px} .filter-actions{display:flex;gap:8px;justify-content:flex-end} .execModalHead .sub{font-size:12px;color:var(--tinta-2);line-height:1.5} .pnSub{font-size:12px;color:var(--tinta-2);margin-bottom:12px;line-height:1.5} .lote .tNome{font-weight:600;font-size:13px;color:var(--tinta); display:block;line-height:1.25} .recSub{font-size:11.5px;color:var(--tinta-2);margin-top:2px} .statusTag{font-size:9.5px;font-weight:600;padding:3px 8px;border-radius:999px; text-transform:uppercase;letter-spacing:.04em;margin-left:6px} .btn-danger:hover{background:var(--cereja-lv)} .msg.ok{color:var(--verde)} .recHead{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center; padding:11px 14px;background:var(--linha-2);border-bottom:1px solid var(--linha)} .acao{display:flex;gap:10px;justify-content:center;flex-wrap:wrap; align-items:center;margin-top:16px} /* Pendente é CINZA: existe e não começou. Âmbar é só o que está em curso. */ .statusTag.pend{background:var(--linha-2);color:var(--tinta-2); border:1px solid var(--linha)} .statusTag.curso{background:var(--ambar-lv);color:var(--ambar); border:1px solid #E8D2A0} .statusTag.late{background:var(--cereja-lv);color:var(--cereja); border:1px solid #E4CACA} .btn-success:hover{background:#DCE7DE} .secLb{font-size:10.5px;font-weight:600;text-transform:uppercase; letter-spacing:.04em;color:var(--verde);margin:14px 0 7px;padding-top:11px; border-top:1px solid var(--linha)} .rodape .cont b{color:var(--tinta);font-weight:500} .campo label{display:block;font-size:10.5px;color:var(--verde); text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;font-weight:600} .execForm .f{display:flex;flex-direction:column} .tSel.on{border-color:var(--verde);background:var(--verde);color:#fff} .modalOverlay.show{display:flex} /* align-items:end alinhava pelo RODAPÉ do grupo: quem tinha .hint embaixo ficava mais alto que os vizinhos, e o campo saía da linha (21/09/2026 — 12 telas têm hint no filtro). Agora os campos alinham pelo topo e a dica fica na linha de baixo, sem empurrar nada; só a barra de botões continua colada embaixo, que é onde ela sempre esteve. */ .filters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;align-items:start} .filters-grid .filter-actions{align-self:end} .filters-grid .hint{margin-top:5px} /* A tabela de talhões do card quando não há talhão: uma linha só, com o que falta e o caminho, em vez de tabela vazia (21/09/2026). Serve às três telas do bloco — aplicações, correção e serviços. */ .semTalhoes td{padding:14px} .semTalhoes .msg{margin:0} .rascunhoActions{display:flex;gap:8px} .pnTit{font-size:14px;font-weight:600;color:var(--verde);margin-bottom:2px} .execBar{flex:1;max-width:90px;height:8px;background:var(--linha); border-radius:10px;overflow:hidden} .execText.done{color:var(--verde)} table.rc th{background:var(--thead);font-size:10px;color:var(--verde); text-transform:uppercase;letter-spacing:.05em;font-weight:600; padding:7px 6px;text-align:center} .execForm{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:9px;margin-top:9px} .btnMini{height:28px;padding:0 10px;font-size:11px;border-radius:var(--r-sm)} /* ── O ÚLTIMO RECURSO NÃO SE VESTE DE BOTÃO (24/09/2026) ────────────────── Corrigir e estornar aparecem lado a lado no extrato, e têm peso MUITO diferente: corrigir muda o que está errado e deixa o resto de pé; estornar apaga a nota inteira e não volta. Dois botões iguais convidam ao clique errado — quem tem pressa clica no que está mais à mão, não no que pensou. Então o destrutivo vira LINK: sem fundo, sem borda, menor, na cor do erro. Quem chega nele chegou de propósito. */ .linkPerigo{background:none;border:0;padding:2px 0;font-size:11.5px; color:var(--cereja);text-decoration:underline;cursor:pointer;font-family:inherit} .linkPerigo:hover{color:#6E1F1F} .jaNome span{color:var(--tinta-2);font-size:11.5px} .pnGrid .f{display:flex;flex-direction:column;min-width:0} .rodape{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px} .lote tfoot td:first-child{text-align:left;font-family:var(--sans); color:var(--verde);text-transform:uppercase;font-size:10.5px; letter-spacing:.05em} .painelNova{position:relative;z-index:5; border:1px solid rgba(21,93,50,.35);background:rgba(21,93,50,.06); border-radius:var(--r-lg);padding:14px 16px;margin-bottom:16px} .execModalHead h3{margin:0 0 5px;font-size:16px;font-weight:600;color:var(--verde)} .execItem.done{border-color:var(--linha-3);background:var(--verde-lv)} .filter-group select{width:100%} .filters{display:none;margin-bottom:14px;padding:14px; border-radius:var(--r-lg);border:1px solid var(--linha-3)} .jaTop:hover{background:var(--verde-lv)} .filtroAtivo{font-size:12px;color:var(--tinta-2);background:var(--linha-2); border:1px solid var(--linha);border-radius:var(--r-sm);padding:4px 10px; display:table;margin:0 auto 14px} .execFill{height:100%;background:var(--verde-md);border-radius:10px; transition:width .3s} .pnAcao{display:flex;gap:8px;margin-top:14px} .msg.err{color:var(--cereja)} .painelNova.oculto{display:none} .jaNome b{font-weight:600;color:var(--tinta)} table.rc select{text-align:left} .execForm input,.execForm select{height:34px;padding:0 9px;font-size:12px} .recTit{font-size:13.5px;font-weight:600;color:var(--tinta)} .recBody{padding:13px 14px} .execDone{font-size:11.5px;color:var(--tinta-2);margin-top:6px;line-height:1.6} table.rc td:first-child{text-align:left} .execAviso{padding:10px 18px;border-bottom:1px solid var(--linha);font-size:12px; background:var(--ambar-lv);color:var(--ambar);line-height:1.5} .execFill.complete{background:var(--verde)} .tSel:disabled{cursor:not-allowed;border-color:var(--linha-3); background:var(--verde-lv);color:var(--verde)} .btn-danger{background:var(--carta);border-color:var(--cereja);color:var(--cereja)} .rodape .cont{font-family:var(--mono);font-size:12px;color:var(--tinta-2); margin-right:auto} .jaQtd{font-family:var(--mono);font-size:11.5px;color:var(--tinta-2); font-variant-numeric:tabular-nums;white-space:nowrap} .recNum{display:inline-flex;align-items:center;justify-content:center; min-width:24px;height:24px;padding:0 6px;border-radius:var(--r-sm); background:var(--verde-lv);color:var(--verde);font-family:var(--mono); font-size:10.5px;font-weight:600;margin-right:8px} #blocoLista.oculto{display:none} .execFill.partial{background:var(--ambar)} .lote thead th:first-child{z-index:4;background:var(--thead)} /* texto centrado — nasceu local no estoque_view e passou a servir tambem o empresas_admin (25/09), entao subiu para ca */ .centro{text-align:center} .msg{margin-top:12px;font-size:13px;display:none} table.rc tfoot td{border-top:2px solid var(--linha-3);font-weight:600; padding-top:8px;background:var(--thead)} .filters.show{display:block} .resumoCard{background:var(--carta);border:1px solid var(--linha-3); border-radius:var(--r-lg);padding:14px;text-align:center} .msg.show{display:block} .execModalHead .closeBtn{background:none;border:0;color:var(--tinta-2); font-size:22px;cursor:pointer;padding:2px 8px;border-radius:var(--r-sm); flex-shrink:0} .jaExec{font-size:10.5px;font-weight:600;color:var(--verde)} .execModal{background:var(--carta);border:1px solid var(--linha-3); border-radius:var(--r-lg);box-shadow:0 12px 40px rgba(20,32,27,.18); width:100%;max-width:640px;max-height:90vh;display:flex; flex-direction:column;overflow:hidden} .execModalHead .closeBtn:hover{background:var(--linha-2);color:var(--tinta)} .lote tbody tr:nth-child(even) td, .lote tbody tr:nth-child(even) td:first-child{background:var(--linha-2)} .acao .btn:only-child{flex:0 0 auto} .lote .tSub{font-size:10.5px;color:var(--tinta-3)} table.rc td{padding:5px 6px;border-top:1px solid var(--linha); vertical-align:middle;text-align:center} .execItem .nome{font-weight:600;font-size:13px;color:var(--tinta)} .totProd{font-family:var(--mono);font-weight:600;color:var(--verde); font-variant-numeric:tabular-nums} .execLoading{text-align:center;color:var(--tinta-2);padding:20px;font-size:12.5px} .execItem{border:1px solid var(--linha-3);background:var(--carta); border-radius:var(--r);padding:11px 13px} .filtroAtivo a{color:var(--verde);text-decoration:underline;margin-left:6px; cursor:pointer} .execModalBody{padding:13px 15px;overflow-y:auto;display:flex; flex-direction:column;gap:9px} .vzOk{font-size:9.5px;color:var(--verde);display:block;margin-top:1px} table.rc select,table.rc input{width:100%;height:32px;padding:0 7px; font-size:12px;text-align:center} .section{background:transparent;border:0;padding:0;box-shadow:none} .jaTop{display:grid;grid-template-columns:88px 1fr auto auto auto;gap:10px; align-items:center;padding:10px 13px;cursor:pointer;font-size:12.5px} .rec.edit .recHead{background:var(--ambar-lv)} .btn-success{background:var(--verde-lv);border-color:var(--verde);color:var(--verde)} .campo .dica{font-size:10.5px;color:var(--tinta-3);margin-top:3px;line-height:1.35} .campo select,.campo input{width:100%;height:36px;font-size:12.5px} table.rc tr.exec td{background:var(--verde-lv)} .pnGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;align-items:start} .resumoCard .label{font-size:11.5px;color:var(--verde);margin-top:4px; font-weight:600} .execText{font-family:var(--mono);font-size:11px;font-weight:600; color:var(--tinta-2);white-space:nowrap;font-variant-numeric:tabular-nums} .filter-group label{display:block;font-size:11px;font-weight:600; color:var(--verde);margin-bottom:5px;text-transform:uppercase; letter-spacing:.04em} table.rc tr.fora td.selCel{opacity:1} .acao .btn,.acao select{flex:1 1 auto;max-width:230px} .secTit,.section-title{font-size:11.5px;font-weight:600;text-transform:uppercase; letter-spacing:.05em;color:var(--verde);margin:22px 0 10px;padding-bottom:8px; text-align:center;border-bottom:1px solid var(--linha)} .tSel{width:26px;height:26px;border-radius:var(--r-sm); border:1px solid var(--linha-3);background:var(--carta);cursor:pointer; font-size:12px;line-height:1;color:var(--tinta-2);padding:0} .pgBar .pgInfo{font-size:12.5px;color:var(--tinta-2)} .jaPer{font-size:11px;font-weight:600;color:var(--verde);letter-spacing:.03em} /* a linha de botões do card, nas três telas do bloco. Era um style inline em cada uma, e o seletor :last-child caía no span oculto de correção/serviços */ .jaAcoes{display:flex;gap:5px} /* o editor dentro do card (R18-10): abre no lugar do detalhe de leitura, e o card aberto se destaca do resto da lista enquanto se edita */ .jaEdit{border-top:1px solid var(--linha);padding:10px 12px;background:var(--papel)} .jaL.editando{border-color:var(--verde);box-shadow:0 0 0 2px var(--verde-lv)} .vazio{padding:34px 20px;text-align:center;color:var(--tinta-2);font-size:13.5px} .statusTag.exec{background:var(--verde-lv);color:var(--verde); border:1px solid var(--linha-3)} .linha3{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px} .rec.edit .recNum{background:#F5E6C8;color:var(--ambar)} .box{border:1px solid var(--linha-3);border-radius:var(--r-lg); padding:14px 16px;background:var(--carta);font-size:12.5px; color:var(--tinta-2);line-height:1.7;margin-top:14px} .resumoCard .valor{font-family:var(--mono);font-size:26px;font-weight:500; color:var(--tinta);line-height:1.1;font-variant-numeric:tabular-nums} .med b{color:var(--tinta);font-weight:500} .resumoCards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px; margin-bottom:14px} .execModalHead{padding:16px 18px;border-bottom:1px solid var(--linha); background:var(--papel);display:flex;align-items:flex-start; justify-content:space-between;gap:12px} .jaDet{display:none;padding:11px 13px;border-top:1px solid var(--linha); background:var(--papel)} .vazio b{color:var(--tinta)} .pgBar a[aria-disabled=true]{opacity:.45;pointer-events:none} .jaDet.open{display:block} .execItem .plan{font-size:11.5px;color:var(--tinta-2);margin-top:4px} .execForm label{font-size:10px;color:var(--verde);text-transform:uppercase; letter-spacing:.04em;font-weight:600;margin-bottom:4px} .execItemActions{display:flex;justify-content:flex-end;margin-top:9px} .pgBar{display:flex;align-items:center;justify-content:center;gap:12px; padding:14px 0 0;flex-wrap:wrap} .med{font-family:var(--mono);font-size:11.5px;color:var(--tinta-2); font-variant-numeric:tabular-nums} /* ── vocabulário comum: aviso de erro, estado vazio, caixa de tabela ──── Estas três aparecem em DOZE telas, cada uma com a sua cópia e cores um pouco diferentes. Não entraram na primeira leva porque as versões divergiram entre si — e era justamente a divergência o problema. */ .alertErr{margin:0 0 14px;padding:14px;border-radius:var(--r); background:var(--cereja-lv);border:1px solid #E4CACA;color:var(--cereja)} .emptyState{padding:40px 20px;text-align:center;color:var(--tinta-2)} .emptyState p{margin:8px 0 0;font-size:13px} .tableWrap,.table-wrapper,.tblWrap{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ═══════════════════════════════════════════════════════════════════════ * SEÇÃO 43 · RELATÓRIOS — a tela e o papel * * Cinco relatórios, cinco blocos de impressão: o mesmo cabeçalho virando * assinatura copiado três vezes, cada um com o seu cinza no th, a sua faixa * no subtítulo e a sua orientação travada. A tela mostrava uma coisa e o * papel outra. * * O PAPEL É A TELA. Mesma identificação sem faixa, mesmo cabeçalho verde, * mesmas etiquetas. O que muda no papel é só o que o papel exige: some o que * se clica, a fonte vai para pt, a tabela repete o cabeçalho e não parte a * linha. * * Classe antiga ao lado da nova no mesmo seletor: as telas migram sem pressa, * e nenhuma precisa redefinir. * ═══════════════════════════════════════════════════════════════════════ */ /* ── "gerado em" · a data do relatório, sob a identificação ─────────── */ .geradoEm,.info-geracao{font-size:12px;color:var(--tinta-2);text-align:center; padding:0 2px 14px;margin-top:-10px} .muted{color:var(--tinta-2);font-size:12px} /* ── ETIQUETA DE ESTADO · cinza não começou, âmbar em curso, verde feito, cereja atrasado. Nunca outra cor: azul para "em andamento" fazia o papel dizer uma coisa e a tela outra. ────────────────────────────── */ .badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px; border-radius:999px;border:1px solid var(--linha);background:var(--linha-2); color:var(--tinta-2);font-size:11px;font-weight:600;white-space:nowrap; text-transform:uppercase;letter-spacing:.03em} .badge-gray{background:var(--linha-2);border-color:var(--linha);color:var(--tinta-2)} .badge-warn{background:var(--ambar-lv);border-color:#E8D2A0;color:var(--ambar)} .badge-ok{background:var(--verde-lv);border-color:var(--linha-3);color:var(--verde)} .badge-late{background:var(--cereja-lv);border-color:#E4CACA;color:var(--cereja)} /* ── PREVISTO × REALIZADO · dentro de ±10% é verde, fora é cereja ────── */ .variacao{font-size:10px;font-weight:600;padding:2px 6px;border-radius:8px; margin-left:4px;white-space:nowrap} .var-positive{background:var(--verde-lv);color:var(--verde)} .var-negative{background:var(--cereja-lv);color:var(--cereja)} .total-variacao{display:inline-flex;align-items:center;gap:6px} /* ── A TABELA DE RELATÓRIO ────────────────────────────────────────────── Cabeçalho em --thead, célula 9px 12px, SEM ZEBRA: num relatório a leitura é por coluna, e a faixa alternada compete com o número. O fio mais escuro abre cada bloco de colunas (previsto | realizado). */ .tblRel,table.rel,.compact-table{width:100%;border-collapse:collapse; font-size:13px;background:var(--carta);border:1px solid var(--linha)} .tblRel th,table.rel th,.compact-table th{background:var(--thead);color:var(--verde); font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em; padding:9px 12px;text-align:center;white-space:nowrap;border:1px solid var(--linha)} .tblRel td,table.rel td,.compact-table td{padding:9px 12px;border:1px solid var(--linha); text-align:center;vertical-align:middle;background:var(--carta)} .tblRel td:first-child,table.rel td:first-child,.compact-table td:first-child{text-align:left} .tblRel tfoot td,table.rel tfoot td,.compact-table tfoot td{background:var(--thead); font-weight:600;font-variant-numeric:tabular-nums} .colBloco,.border-left,.col-realizado-first{border-left:2px solid var(--linha-3)!important} /* ── O CARTÃO DE UM PLANEJAMENTO no relatório (aplicação, nutrição, O.S.) */ .rec-card,.ordem-card{border:1px solid var(--linha-3);border-radius:var(--r-lg); background:var(--carta);margin-bottom:16px;overflow:hidden} .rec-header{padding:12px 16px;background:var(--thead);border-bottom:1px solid var(--linha-3); display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .rec-header-left{display:flex;flex-direction:column;gap:4px} .rec-header-right{display:flex;align-items:center;gap:10px} .rec-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .rec-title{font-weight:600;font-size:14px;color:var(--tinta)} .rec-subtitle{font-size:12.5px;color:var(--tinta-2)} .rec-body{padding:14px 16px;background:var(--carta)} .rec-obs{margin-top:12px;font-size:12px;color:var(--tinta-2)} /* o botão de abrir a execução, no cabeçalho do cartão */ .btn-executar{height:28px;padding:0 12px;font-size:12px;border-radius:999px} .talhao-status{font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:4px} .talhao-status.executado{color:var(--verde)} .talhao-status.pendente{color:var(--tinta-2)} .talhao-status.atrasado{color:var(--cereja)} /* ── AS ABAS de módulo (Todos · Via Folha · Via Solo · Herbicida) ──────── */ .module-tabs{display:flex;border-bottom:1px solid var(--linha-3);overflow-x:auto; -webkit-overflow-scrolling:touch;margin-bottom:14px} .module-tab{flex:1;min-width:80px;padding:10px;text-align:center;white-space:nowrap; font-size:12px;font-weight:600;color:var(--tinta-2); border-bottom:3px solid transparent;transition:.12s} .module-tab:hover{color:var(--tinta);background:var(--verde-lv)} .module-tab.active{color:var(--verde);border-bottom-color:var(--verde)} /* ── O CONVITE · relatório abre vazio, e diz o que escolher ─────────────── */ .convite{padding:34px 20px;text-align:center;color:var(--tinta-2);font-size:13.5px; border:1px dashed var(--linha-3);border-radius:var(--r-lg);background:var(--carta)} .convite b,.convite strong{color:var(--tinta)} .warnBox{background:var(--ambar-lv);border:1px solid #E8D2A0;color:var(--ambar); border-radius:var(--r-lg);padding:12px 14px} .debug-box{background:var(--linha-2);border:1px solid var(--linha);border-radius:var(--r); padding:12px;margin-bottom:16px;font-size:11px;font-family:var(--mono)} /* ═══ O PAPEL ══════════════════════════════════════════════════════════ @page SÓ com margem. `size` trava a orientação no diálogo: a tabela larga pede paisagem, o resumo pede retrato, e só quem imprime sabe qual. O cabeçalho do navegador (data, URL) se desliga no diálogo — nenhum CSS o remove sem cortar a margem de todas as páginas. */ @media print{ @page{margin:8mm 10mm} *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important} html,body{background:#fff!important} body{font-size:10pt!important;padding:0!important;margin:0!important} /* fora do papel: o que se clica e o que recorta */ .navEsq,.navDir,.navBtn,.btn,button,.filters,.filtros,.actions-bar,.acoes, .filtroAtivo,.module-tabs,.debug-box,.soTela,.painelNova,.toast, .rascunhoBanner{display:none!important} /* o cabeçalho vira a assinatura: a marca centrada, o fio verde embaixo */ .topo{background:#fff!important;border-bottom:2px solid var(--verde)!important; padding:0 0 8px!important;margin:0 0 10px!important;box-shadow:none!important} .topoIn{display:block!important;padding:0!important;min-height:0!important} .marca{position:static!important;transform:none!important;display:block!important} .marca svg{width:180px!important;height:auto!important;margin:0 auto!important} .pag{max-width:100%!important;padding:0!important;gap:8px!important} h1,.title{font-size:15pt!important;padding:0 0 4px!important} .ident,.subtitulo,.subtitle{font-size:11pt!important;padding-bottom:4px!important} .geradoEm,.info-geracao{font-size:8.5pt!important;margin-top:0!important;padding-bottom:8px!important} /* superfície: sem sombra; o que é um bloco não se parte */ .card,.box,.section,.tblBox,.rec-card,.ordem-card,.resumoCard,.stat{box-shadow:none!important} .rec-card,.ordem-card,.resumoCard,.stat{break-inside:avoid} h2,h3,.secTit,.section-title,.rec-header{break-after:avoid} /* a tabela: cabeçalho a cada página, linha inteira, nada rolando */ table{font-size:8.5pt!important} thead{display:table-header-group} tfoot{display:table-footer-group} tr{break-inside:avoid} th{position:static!important} .tblRel th,.tblRel td,table.rel th,table.rel td, .compact-table th,.compact-table td{padding:4px 6px!important} .tblBox,.tableWrap,.table-wrapper,.tblWrap{overflow:visible!important} .badge{font-size:7.5pt!important;padding:1px 6px!important} .quebraAntes{break-before:page} canvas,svg{max-width:100%} } /* ═══════════════════════════════════════════════════════════════════════ * SEÇÃO 44 · TELAS DE PLANEJAMENTO — o que ainda estava copiado nas três * * Aplicações, correção e ordens de serviço repetiam estas regras, idênticas, * em duas ou três cópias cada. Saíram das telas em 16/09/2026, junto com o * formulário antigo de painel único. Painel de produtos e resumo da pilha * vão presos ao bloco pai (.painelProd, .resumoBox): vazões e a calculadora * avulsa usam .ppGrid e .resumoGrid com outro desenho. * ═══════════════════════════════════════════════════════════════════════ */ .painelProd{border:1px solid var(--linha-3);background:var(--carta); border-radius:var(--r-lg);padding:12px 14px;margin-bottom:8px} .painelProd .ppVazio{font-size:12px;color:var(--tinta-3);text-align:center;padding:6px} .painelProd .ppGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:7px} .painelProd .ppItem{display:flex;justify-content:space-between;align-items:baseline;gap:8px; padding:8px 10px;border-radius:var(--r-sm);background:var(--papel); border:1px solid var(--linha);font-size:12px} .painelProd .ppItem .n{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;color:var(--tinta)} .painelProd .ppItem .q{font-family:var(--mono);font-weight:600;color:var(--verde); font-variant-numeric:tabular-nums;white-space:nowrap} .painelProd .ppItem small{display:block;font-size:10px;color:var(--tinta-3);font-weight:400} .jaL{border:1px solid var(--linha-3);background:var(--carta); border-radius:var(--r);margin-bottom:6px;overflow:hidden} .rec{border:1px solid var(--linha-3);background:var(--carta); border-radius:var(--r-lg);margin-bottom:14px;overflow:hidden} .rec.edit{border-color:#E0C88A} table.rc{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed} table.rc tr.fora td{opacity:.40} .rascunhoBanner{display:flex;align-items:center;justify-content:space-between; gap:12px;flex-wrap:wrap;padding:12px 14px;margin-bottom:12px; border-radius:var(--r);background:var(--ambar-lv); border:1px solid #E8D2A0;color:var(--ambar);font-size:13px} .btnCadProd:hover{background:#DCE7DE} .execProgress{display:flex;align-items:center;gap:8px;justify-content:center} .modalOverlay{position:fixed;inset:0;background:rgba(20,32,27,.45); display:none;align-items:center;justify-content:center;padding:16px;z-index:60} .execItem .topo{display:flex;justify-content:space-between;align-items:center; gap:8px;background:transparent;border:0;padding:0;min-height:0} .count-bar{padding:10px 0;font-size:13px;color:var(--tinta-2);display:flex; gap:12px;align-items:center;justify-content:center;flex-wrap:wrap} table.listagem{width:100%;border-collapse:collapse;font-size:13.5px; min-width:1000px} table.listagem th{background:var(--thead);color:var(--verde);font-size:10.5px; font-weight:600;text-transform:uppercase;letter-spacing:.05em; position:sticky;top:0;z-index:2} table.listagem td{padding:5px 6px;text-align:center; border-top:1px solid var(--linha);vertical-align:middle} table.listagem td:first-child{text-align:left} table.listagem th{text-align:center} table.listagem th:first-child{text-align:left} .ctr,table.rc th.ctr,table.listagem th.ctr{text-align:center} table.listagem tbody tr:nth-child(even) td{background:var(--linha-2)} table.listagem tbody tr:hover td{background:var(--verde-lv)} .cellGrupo{text-align:center} .cellGrupo .grupoNome{font-weight:600;font-size:12.5px;color:var(--tinta)} .cellGrupo .propriedadeNome{color:var(--tinta-2);font-size:11px} .pill{display:inline-block;padding:3px 10px;border-radius:999px; font-size:10.5px;font-weight:600;background:var(--linha-2); border:1px solid var(--linha);color:var(--tinta-2)} .pill-alerta{background:var(--cereja-lv);border-color:#E4CACA;color:var(--cereja)} .pill-ok{background:var(--verde-lv);border-color:var(--linha-3);color:var(--verde)} .execCell{min-width:120px} /* a mesma célula quando o bloco é o card: correção e serviços usavam a regra, só a correção a declarava (achado pelo tools/conferir_classes.py) */ .execCelBloco{min-width:120px} .resumoBox{margin-top:14px;padding:12px;background:var(--linha-2); border-radius:var(--r);border:1px solid var(--linha)} .resumoBox .resumoGrid{display:flex;gap:20px;flex-wrap:wrap;font-size:13px; align-items:center} .resumoBox .resumoItem{display:flex;align-items:center;gap:6px;color:var(--tinta-2)} .resumoBox .resumoItem.destaque span{font-family:var(--mono);font-size:18px; font-weight:600;color:var(--verde)} .pagination{display:flex;align-items:center;justify-content:center;gap:8px; padding:14px 0 0;flex-wrap:wrap} .pagination .pageBtn{height:34px;padding:0 13px;border-radius:var(--r); background:var(--carta);border:1.5px solid var(--verde);color:var(--verde); font-weight:600;font-size:13px;cursor:pointer;min-width:40px; text-align:center;font-family:inherit} .pagination .pageBtn:hover:not(.active):not(:disabled){background:var(--verde-lv)} .pagination .pageBtn.active{background:var(--verde);color:#fff; border-color:var(--verde)} .pagination .pageBtn:disabled{opacity:.4;cursor:not-allowed} .pagination .pageInfo{font-size:12.5px;color:var(--tinta-2);padding:0 12px} .prodModal{max-width:460px;display:flex;flex-direction:column;overflow:hidden} .prodModalBody{padding:18px 20px;display:grid;gap:14px} .prodModalBody .field{display:flex;flex-direction:column;gap:6px} .prodModalBody .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .btnCadProd{height:32px;padding:0 12px;border-radius:var(--r-sm); border:1.5px solid var(--verde);background:var(--verde-lv); color:var(--verde);font-weight:600;font-size:12px;cursor:pointer; white-space:nowrap;display:none;margin-top:6px;align-self:flex-start; align-items:center;justify-content:center;font-family:inherit} @media (max-width:680px){ .jaTop{grid-template-columns:1fr auto;gap:6px} .jaPer{grid-column:1/-1} .tblRolar{overflow-x:auto} table.rc{min-width:560px} } @media(max-width:800px){ .resumoCards{grid-template-columns:repeat(2,1fr)} } /* ═══════════════════════════════════════════════════════════════════════ * SEÇÃO 45 · VOCABULÁRIO QUE AS TELAS CONVERTIDAS REPETIAM (16/09/2026) * * Na conversão de cadastros, estoque, cotação, orçamento, custos e colheita, * cada tela trouxe a sua cópia destas regras — idênticas. Uma vez aqui. * ═══════════════════════════════════════════════════════════════════════ */ /* o atributo hidden sempre esconde — .filtroAtivo (display:table), .btn e .field declaram display e venciam o hidden */ [hidden]{display:none!important} /* número de tabela: dígitos de largura fixa, sem quebrar */ .num{font-variant-numeric:tabular-nums;white-space:nowrap} .tblRel td.txt{text-align:left;white-space:normal} /* linha de GRUPO e de SUBTOTAL dentro de tabela de relatório */ .tblRel tr.grp td{background:var(--linha-2);color:var(--verde);font-size:10.5px;font-weight:600; text-transform:uppercase;letter-spacing:.05em;text-align:left} .tblRel tr.sub td{font-weight:600;border-top:2px solid var(--linha-3)} /* campo de formulário em quadro (modal) e grade de trabalho */ .field{display:flex;flex-direction:column} .field label{display:block;font-size:10.5px;color:var(--verde);text-transform:uppercase; letter-spacing:.04em;margin-bottom:5px;font-weight:600} .control{width:100%;height:36px;padding:0 11px;border-radius:var(--r);border:1px solid #B9CDBE; background:var(--campo);color:var(--tinta);font-size:12.5px;font-family:inherit;outline:none} .control:focus{border-color:var(--verde);box-shadow:var(--ring)} .control:disabled{opacity:.55;cursor:not-allowed;background:var(--linha-2)} select.control{appearance:none;padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23155D32' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center} textarea.control{height:auto;min-height:76px;padding:10px 12px;resize:vertical} .btn-primary{background:var(--verde);border-color:var(--verde);color:#fff} .btn-primary:hover{background:var(--verde-2);border-color:var(--verde-2);color:#fff} /* caixa de marcar ao lado dos filtros */ .chk{display:flex;align-items:center;gap:7px;height:38px;margin:0;color:var(--tinta); font-size:13px;font-weight:500;cursor:pointer} .chk input{padding:0;width:16px;height:16px;accent-color:var(--verde)} /* aba de módulo feita com