/* css/components.css - componentes (cartoes, campos, tabelas, graficos, portao, sumario, dialogos, consistencia...). Os ajustes @media locais ficam junto do componente: a ordem da cascata e a mesma do index.html original. */
.card,.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:13px 16px;box-shadow:var(--shadow)}
.card{margin-bottom:11px}
.card h3{font-family:var(--font-b);font-size:11.5px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--brand-3);margin-bottom:12px}
.card h3 .h3n{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}

.kpi{border-left:5px solid var(--brand-2);border-radius:var(--rad-s);padding:14px 16px;margin:0}
.kpi .kv{font-size:25px;font-weight:600;color:var(--brand-deep);line-height:1.05;letter-spacing:-.3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi .kv small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.kpi .kl{font-size:12px;color:var(--muted);margin-top:5px;letter-spacing:.3px;line-height:1.3}
.kpi .kd{font-size:11.5px;margin-top:5px;font-weight:600;line-height:1.35}
.kpi.ok{border-left-color:var(--ok)}.kpi.ok .kv{color:var(--ok)}
.kpi.err{border-left-color:var(--err)}.kpi.err .kv{color:var(--err)}
.kpi.warn{border-left-color:var(--warn)}.kpi.warn .kv{color:var(--warn)}
.kpi.gold{border-left-color:var(--gold)}.kpi.gold .kv{color:var(--gold)}
/* cartao de KPI do BI LABOR RURAL (skill lr-dashboards). Usado no Painel de Resultados. */
.g-metricas{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:11px}
.metric-card{
  display: flex;
  flex: 1 1 0%;
  min-width: 0px;
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--petroleo-750);
  background: var(--petroleo-750);
  --bg-currentcolor: #0F6F57;
  position: relative;
  overflow: hidden;
  box-shadow: var(--petroleo-680-a22) 0px 12px 26px;
  border-radius: 18px;
  padding: 14px 16px;
  min-height: 98px;
  box-sizing: border-box;
  color: var(--on-brand);
  cursor: default;
  transform: none !important;
  transition: none !important;
  font-feature-settings: "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.metric-card:hover {
  transform: none !important;
}
.metric-card::after{
  content: "";
  position: absolute;
  z-index: 0;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--petroleo-710);
  pointer-events: none;
}
.metric-icon{
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--brilho-a16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-brand);
  margin-bottom: 2px;
}
.metric-icon svg{width: 17px; height: 17px; display: block;}
.metric-label{
  position: relative;
  z-index: 1;
  font-family:var(--font-b);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--on-brand);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-card strong{
  position: relative;
  z-index: 1;
  font-family: var(--font-d);
  font-size: 22px;
  font-weight: 750;
  color: var(--on-brand);
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.metric-card small{
  position: relative;
  z-index: 1;
  font-family:var(--font-b);
  font-size: 11px;
  font-weight: 500;
  color: var(--petroleo-280);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-card--warning{border:1px solid var(--ambar-260);border-top:4px solid var(--ambar-490);background:linear-gradient(145deg,var(--ambar-010) 8%,var(--ambar-110) 100%);
  box-shadow:0 4px 14px var(--ambar-580-a12);color:var(--laranja-710)}
.metric-card--warning .metric-icon{background:var(--ambar-490-a22);color:var(--laranja-710)}
.metric-card--danger{border:1px solid var(--vermelho-180);border-top:4px solid var(--vermelho-360);background:linear-gradient(145deg,var(--vermelho-010) 8%,var(--vermelho-080) 100%);
  box-shadow:0 4px 14px var(--vermelho-500-a11);color:var(--vermelho-610)}
.metric-card--danger .metric-icon{background:var(--vermelho-360-a22);color:var(--vermelho-610)}
.metric-card--warning::after,.metric-card--danger::after{display:none}
.metric-card--warning strong,.metric-card--danger strong{color:inherit}
@media (max-width:560px){.g-metricas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric-card{padding:10px;column-gap:8px;grid-template-columns:28px minmax(0,1fr)}
  .metric-icon{width:28px;height:28px}.metric-card strong{font-size:16px}
  .metric-label{white-space:normal;font-size:10.5px;line-height:12px;letter-spacing:.3px}}
.kd.up{color:var(--ok)}.kd.dn{color:var(--err)}.kd.mid{color:var(--warn)}.kd.zero{color:var(--muted)}

.gchips{display:flex;flex-wrap:wrap;gap:8px}
.gchip{font-family:var(--font-b);font-size:13px;font-weight:600;letter-spacing:.3px;padding:8px 15px;border-radius:99px;border:1.5px solid var(--line);background:var(--panel);color:var(--brand-3);cursor:pointer;transition:.15s;display:inline-block}
.gchip:hover{border-color:var(--brand-2);background:var(--panel2)}
.gchip.sel{background:var(--brand-fundo);border-color:var(--brand);color:var(--on-brand)}
.gchip:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px}

.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px}
@media(min-width:1024px){
  .pgrid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pgrid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .span2{grid-column:span 2}.span3{grid-column:span 3}
}
@media(min-width:1400px){ .pgrid.c5{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media(min-width:1460px){
  .pgrid.c6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .grid.g-kpi.g7{grid-template-columns:repeat(7,minmax(0,1fr))}
  .grid.g-kpi.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .g-kpi.g7 .kv,.g-kpi.g5 .kv{font-size:21px}
  .g-kpi.g7 .kl,.g-kpi.g5 .kl{font-size:11.3px}
}
.pfield{background:var(--ambar-040);border:1.5px solid var(--ambar-220);border-radius:var(--rad-s);padding:9px 12px;min-width:0}
.pfield .pl{font-size:10px;letter-spacing:.9px;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pfield .pl .edit{font-size:8.5px;background:var(--gold);color:var(--on-brand);border-radius:5px;padding:1px 5px;letter-spacing:.6px}
.pfield .pl .opt{font-size:9px;background:var(--panel2);color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 6px;letter-spacing:.8px}
.pfield .pl .aut{font-size:9px;background:var(--brand-3-fundo);color:var(--on-brand);border-radius:5px;padding:1px 6px;letter-spacing:.8px}
.pfield input,.pfield select{width:100%;border:1px solid var(--ambar-290);border-radius:7px;background:var(--panel);font-family:var(--font-b);font-weight:600;font-size:16px;color:var(--input-ink);padding:7px 10px;font-variant-numeric:tabular-nums;appearance:none}
.pfield select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23b08a2e' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}
.pfield input[type=text],.pfield input[type=date],.pfield select{font-size:16px}
.pfield input:focus,.pfield select:focus{outline:2px solid var(--gold);outline-offset:1px}
.pfield .pb{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.35}
/* ---- Painel de Resultados (v0.9.4.d) ---- */
/* filtros: caixa de selecao com pesquisa do BI LABOR RURAL (LRSelect, js/ui/lr-select.js) */
/* o popup sai da caixa do cartao: nada de cortar o que passa da borda (a regra de celular poe overflow-x:hidden no .card) */
.card:has(.filter-control),.pn-janela{overflow:visible}
.pn-fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:720px}
.filter-control{position:relative;min-width:0;height:48px;padding:6px 12px;display:flex;flex-direction:column;justify-content:center;
  border:1px solid var(--line);border-radius:9px;background:var(--panel2);cursor:pointer;font-family:var(--font-b);
  transition:border-color .15s,box-shadow .15s,background .15s}
.filter-control:hover{border-color:var(--mint);background:var(--panel)}
.filter-control:focus-within,.filter-control.active-popup{border-color:var(--brand-2);background:var(--panel);box-shadow:0 0 0 2px var(--petroleo-750-a14)}
.filter-control.active-popup{z-index:1001}
.filter-control>span{color:var(--brand-2);font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1;margin-bottom:3px;white-space:nowrap}
.filter-control select{display:none}
.select-display-value{color:var(--brand-deep);font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%230F6E56' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center/11px}
.custom-select-popup{position:absolute;top:calc(100% + 6px);left:0;width:max-content;min-width:max(100%,240px);max-width:min(420px,calc(100vw - 32px));max-height:320px;
  z-index:1000;padding:6px;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 28px var(--petroleo-850-a18);opacity:0;visibility:hidden;transform:translateY(-8px);cursor:default;
  transition:opacity .16s,transform .16s,visibility .16s}
.custom-select-popup.open{opacity:1;visibility:visible;transform:none;transition:opacity .16s,transform .16s,visibility 0s}
.pn-fgrid>.filter-control:nth-child(3):not(:only-child) .custom-select-popup{left:auto;right:0}
.custom-select-search-wrap{position:sticky;top:0;z-index:5;padding:2px 2px 6px;margin-bottom:4px;background:var(--panel);border-bottom:1px solid var(--line-soft)}
.custom-select-search-input{width:100%;height:34px;padding:4px 10px;font-family:var(--font-b);font-size:14px;border:1px solid var(--line-soft);border-radius:7px;
  background:var(--panel2);color:var(--brand-deep);outline:none}
.custom-select-search-input:focus{border-color:var(--brand-2);box-shadow:0 0 0 2px var(--petroleo-750-a15)}
.custom-select-options-list{max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:var(--petroleo-280) transparent}
.custom-select-no-results{padding:12px 10px;font-size:13px;color:var(--muted);text-align:center;font-style:italic}
.custom-select-option{padding:9px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:7px;color:var(--brand-deep);
  font-size:13.5px;font-weight:650;white-space:nowrap;cursor:pointer}
.custom-select-option:hover,.custom-select-option.highlighted{background:var(--mint-soft);color:var(--brand);outline:2px solid var(--brand-2);outline-offset:-2px}
.custom-select-option.selected{background:var(--brand-2-fundo);color:var(--on-brand);font-weight:750}
.custom-select-option.selected.highlighted{background:var(--petroleo-820);color:var(--on-brand);outline-color:var(--mint)}
.custom-select-option.is-multi{justify-content:flex-start;gap:8px}
.custom-select-option .multi-check{flex:0 0 auto;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid currentColor;border-radius:4px;font-size:10px;line-height:1;opacity:.85}
.custom-select-option.is-all{margin-bottom:2px;border-bottom:1px solid var(--line);border-radius:7px 7px 0 0}
.custom-select-footer{display:flex;justify-content:flex-end;padding:6px 8px 4px;border-top:1px solid var(--line)}
.custom-select-apply{padding:6px 16px;border:0;border-radius:6px;background:var(--brand-2-fundo);color:var(--on-brand);font-size:13px;font-weight:750;cursor:pointer}

/* ---- tabela de indicadores ----
   As colunas abraçam o conteúdo em vez de esticar até a borda: o número
   fica perto do nome do indicador, que era o problema de leitura.        */
/* blocos lado a lado: cada grupo de indicadores e uma tabela propria, em grade responsiva */
.pn-blocos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:14px;align-items:start;margin-top:4px}
.pn-blocos.largo{grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr))}
/* tabela cruzada: o bloco de resultado (3 colunas de valor) ganha mais largura que os de 1 ou 2 colunas */
@media(min-width:1500px){.pn-blocos.cruz{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.2fr)}}
@media(min-width:1000px) and (max-width:1499px){.pn-blocos.cruz{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn-bloco{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad-s);overflow:hidden;min-width:0}
.pn-bt{background:var(--brand-deep-fundo);color:var(--on-brand);font-size:11.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;padding:9px 12px}
.pn-nota{padding:7px 12px 9px;font-size:11.5px;font-style:italic;color:var(--muted)}
.pn-bloco .pn-rol{margin:0}
.pn-bloco .pn-tab{width:100%}
/* layout fixo: as colunas de valor ficam alinhadas de um bloco para o outro */
.pn-bloco .pn-tab{table-layout:fixed}
.pn-bloco .pn-tab th:first-child{width:var(--pn-w1,34%)}
/* a unidade desce para baixo do nome do indicador: sobra largura para os valores e a variacao */
.pn-bloco .pn-tab th:nth-child(2):not(.num),.pn-bloco .pn-tab td.pn-un{display:none}
.pn-uni{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:1px}
.pn-bloco .pn-tab th.num,.pn-bloco .pn-tab td.num{padding-left:10px;padding-right:10px}
.pn-bloco .pn-tab.var td.num{padding-left:10px}
.pn-bloco .pn-tab.var td.num .pn-cel{gap:8px}
.pn-bloco .pn-var{min-width:38px}
.pn-bloco .pn-tab thead th{background:var(--tab-cab-bg);color:var(--tab-cab-ink);border-left-color:var(--line)}
.pn-tab .pn-v.neg{color:var(--err)}
.pn-rol{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:2px -4px 0}
.pn-tab{border-collapse:collapse;font-size:13.5px;width:auto;min-width:min(100%,430px)}
.pn-tab th,.pn-tab td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left}
.pn-tab thead th{background:var(--brand-fundo);color:var(--on-brand);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.pn-tab thead th.num{text-align:right}
.pn-tab th.num,.pn-tab td.num{text-align:right;white-space:nowrap;
  border-left:1px solid var(--line);padding-left:20px}
.pn-tab thead th.num{border-left-color:var(--brilho-a22)}
.pn-tab .pn-rot{font-weight:500;color:var(--ink)}
.pn-tab .pn-un{color:var(--muted);font-size:11.5px;white-space:nowrap}
.pn-tab .pn-v{font-size:15px;font-weight:600;color:var(--brand-deep);
  font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.pn-tab tbody tr:nth-child(even){background:var(--panel2)}
.pn-tab tbody tr:hover{background:var(--petroleo-110)}
/* na tabela com variação as colunas ficam um pouco mais largas */
.pn-tab.var td.num{padding-left:22px}

/* ---- variação percentual entre colunas ----
   Fica ao lado do valor, numa faixa de largura fixa, para que a coluna de
   números continue alinhada mesmo com variações de tamanhos diferentes.  */
.pn-tab.var td.num .pn-cel{display:inline-flex;align-items:baseline;
  justify-content:flex-end;gap:12px;white-space:nowrap}
.pn-var{display:inline-block;font-size:11.5px;font-weight:700;
  font-variant-numeric:tabular-nums;min-width:46px;text-align:right}
.pn-var.bom{color:var(--ok)}
.pn-var.ruim{color:var(--err)}
.pn-var.neu{color:var(--muted)}
.pn-leg{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:10px 0 2px;
  font-size:11.5px;color:var(--muted)}
.pn-leg span{display:flex;align-items:center;gap:6px}
.pn-leg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.pn-leg i.bom{background:var(--ok)} .pn-leg i.ruim{background:var(--err)}
.pn-leg i.neu{background:var(--muted)}
.pn-leg-nota{font-style:italic}

/* ---- segmentado de critério ---- */
.pn-seg{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.pn-seg button{padding:8px 14px;border:1.5px solid var(--line);background:var(--panel);
  border-radius:var(--rad-s);font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}
.pn-seg button.sel{background:var(--brand-fundo);border-color:var(--brand);color:var(--on-brand);font-weight:600}

/* ---- gráficos ---- */
.pn-graf{margin:14px 0}
.pn-graf svg{width:100%;height:auto;display:block}
.pn-gt{font-size:12.5px;font-weight:600;margin-bottom:4px;color:var(--ink)}
/* três dispersões lado a lado no desktop, empilhadas no celular */
.pn-grade3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:980px){.pn-grade3{grid-template-columns:1fr;gap:6px}}

/* caixa do seletor de janela da Evolução */
.pn-janela{background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--rad-s);padding:12px 13px;margin:2px 0 12px}
.pn-janela .pn-fgrid{max-width:420px;grid-template-columns:repeat(2,minmax(0,1fr))}

/* ========================= CELULAR =========================
   A tabela deixa de ser tabela. Cada indicador vira um cartão com as
   colunas lado a lado, e assim TUDO cabe na largura da tela: a comparação
   entre anos, ou entre estratos, acontece sem rolar para o lado — que é
   justamente o que dá poder de comparação à ferramenta.                  */
@media(max-width:640px){
  /* dois filtros por linha: três empilhados empurravam os dados
     para muito abaixo da dobra no celular                          */
  .pn-fgrid,.pn-janela .pn-fgrid{grid-template-columns:1fr;gap:8px}
  .filter-control{height:46px}
  .pn-fgrid>.filter-control:nth-child(3):not(:only-child) .custom-select-popup{left:0;right:auto}
  .custom-select-popup{min-width:100%}
  .custom-select-search-input{font-size:16px}  /* 16px: o iOS nao da zoom ao focar */
  .pn-rol{overflow:visible;margin:0}

  .pn-tab{display:block;width:100%;min-width:0;font-size:12.5px}
  .pn-tab thead{display:none}
  .pn-tab tbody{display:block}

  .pn-tab tr{display:grid;gap:5px 6px;padding:9px 2px 10px;
    grid-template-columns:repeat(var(--pn-cols,1),minmax(0,1fr));
    border-bottom:1px solid var(--line);background:none!important}
  .pn-tab td{display:block;border:0!important;padding:0;text-align:center}

  .pn-tab td.pn-rot{grid-column:1/-1;font-size:12.5px;font-weight:600;
    color:var(--ink);text-align:left;line-height:1.25}
  .pn-tab td.pn-un{grid-column:1/-1;font-size:10.5px;color:var(--muted);
    text-align:left;margin-bottom:3px}

  .pn-tab td.num{position:relative;padding-top:15px;min-width:0}
  .pn-tab td.num::before{content:attr(data-col);position:absolute;top:0;left:0;right:0;
    font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
    color:var(--gold);text-align:center;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}

  /* numa coluna estreita, valor e variação empilham */
  .pn-tab.var td.num .pn-cel{display:block;text-align:center}
  .pn-tab .pn-v{font-size:14px;display:block;text-align:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pn-var{display:block;min-width:0;text-align:center;font-size:10.5px;margin-top:1px}
  .pn-var.vazio{min-height:13px}

  .pn-uni{display:none}
  .pn-bloco .pn-tab td.pn-un{display:block}
  .pn-bloco .pn-tab{padding:0 10px}
  .pn-bloco .pn-tab tr:last-child{border-bottom:0}

  /* com quatro colunas, a estratificação aperta um pouco mais */
  .pn-tab[style*="--pn-cols:4"] .pn-v{font-size:12.5px}
  .pn-tab[style*="--pn-cols:4"] td.num::before{font-size:8.8px;letter-spacing:.1px}
  .pn-tab[style*="--pn-cols:4"] .pn-var{font-size:9.5px}

  .pn-leg{gap:10px;font-size:11px}
}
.pfield .pbsit{font-size:11.5px;margin-top:5px;line-height:1.4;font-weight:600;color:var(--muted)}
.pfield .pbsit[data-sit="bom"]{color:var(--petroleo-700)}
.pfield .pbsit[data-sit="ruim"]{color:var(--laranja-590)}
.pfield .pb b{color:var(--brand-3)}
.pfield.calc{background:var(--panel2);border-color:var(--line)}
.pfield.calc .pl{color:var(--brand-3)}
.pfield.calc .pv{font-family:var(--font-d);font-weight:600;font-size:20px;color:var(--brand-deep);font-variant-numeric:tabular-nums}

.total-strip{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--rad-s);padding:12px 18px;margin-top:14px;flex-wrap:wrap}
.total-strip .tl{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:600}
.total-strip .tv{font-family:var(--font-d);font-weight:600;font-size:24px;color:var(--brand-deep);font-variant-numeric:tabular-nums}
.total-strip.sec .tv{font-size:19px;color:var(--brand-3)}

.act-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{display:inline-flex;align-items:center;gap:0.5rem;background:var(--brand-fundo);color:var(--on-brand);border:0;font-family:var(--font-b);font-weight:600;font-size:0.8125rem;padding:0.625rem 1.125rem;border-radius:var(--rad-s);cursor:pointer;transition:background-color var(--dur-rapida) var(--ease-elabore),color var(--dur-rapida) var(--ease-elabore),border-color var(--dur-rapida) var(--ease-elabore),transform var(--dur-instant) var(--ease-tatil);letter-spacing:.3px}
.btn:hover{background:var(--brand-deep-fundo);transform:translateY(-1px)}
.btn:active{transform:scale(0.985)}
.btn.ghost{background:var(--panel);color:var(--brand);border:1.5px solid var(--brand-2)}
.btn.ghost:hover{background:var(--panel2)}
.btn.scn-des{background:var(--errbg);color:var(--err);border:1.5px solid var(--errline)}
.btn.scn-fav{background:var(--okbg);color:var(--ok);border:1.5px solid var(--okline)}
.btn.big{font-size:14.5px;padding:13px 24px}
.btn:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px}

table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{background:var(--brand-fundo);color:var(--on-brand);text-align:left;padding:9px 12px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;white-space:nowrap}
table.t th:first-child{border-radius:8px 0 0 0}
table.t th:last-child{border-radius:0 8px 0 0}
table.t td{padding:8px 12px;border-bottom:1px solid var(--line)}
table.t tr:nth-child(even) td{background:var(--verde-020)}
table.t td.num,table.t th.num{text-align:right;font-variant-numeric:tabular-nums}
table.t td.neg{color:var(--err);font-weight:600}
table.t td.pos{color:var(--ok);font-weight:600}
table.t tr.tot td{background:var(--panel2)!important;font-weight:700}
table.t td.me{font-weight:700;color:var(--brand-deep);background:var(--goldbg)!important}
.tscroll{overflow-x:auto}
.lnk-del{background:none;border:0;color:var(--err);font-family:var(--font-b);font-size:11.5px;font-weight:600;cursor:pointer;text-decoration:underline;padding:6px 4px;margin:-6px -4px}
.sem{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.6px;border-radius:6px;padding:2px 8px;white-space:nowrap}
.sem.ok{background:var(--okbg);color:var(--ok);border:1px solid var(--okline)}
.sem.warn{background:var(--warnbg);color:var(--warn);border:1px solid var(--warnline)}
.sem.err{background:var(--errbg);color:var(--err);border:1px solid var(--errline)}
.sem.neu{background:var(--panel2);color:var(--muted);border:1px solid var(--line)}

.vwrap{display:flex;align-items:flex-end;gap:16px;height:270px;padding:14px 6px 0;overflow-x:auto}
.vgrp{flex:1;min-width:96px;display:flex;flex-direction:column;align-items:center;height:100%}
.vbars{position:relative;flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:5px}
.vbars .zline{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.vb{position:relative;width:20px;border-radius:5px 5px 0 0;min-height:2px;transition:height .35s ease}
.vb.me{background:var(--brand-deep-fundo)}.vb.uf{background:var(--brand-2-fundo)}.vb.sup{background:var(--gold)}
.vb .tip{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:9.6px;font-weight:700;color:var(--brand-deep);white-space:nowrap;font-variant-numeric:tabular-nums}
.vbars2{position:relative;flex:1;width:100%;display:flex;flex-direction:column}
.vbars2 .up{display:flex;align-items:flex-end;justify-content:center;position:relative}
.vbars2 .dn{display:flex;align-items:flex-start;justify-content:center;position:relative}
.vbars2 .zl{height:1.5px;background:var(--cinza-250);flex:0 0 auto}
.vbars2 .b{width:34px;position:relative;transition:height .35s ease}
.vbars2 .b.pos{border-radius:5px 5px 0 0}
.vbars2 .b.neg{border-radius:0 0 5px 5px}
.vbars2 .b .tip{position:absolute;left:50%;transform:translateX(-50%);font-size:9.6px;font-weight:700;
  color:var(--brand-deep);white-space:nowrap;font-variant-numeric:tabular-nums}
.vbars2 .b.pos .tip{top:-17px}
.vbars2 .b.neg .tip{bottom:-17px;color:var(--err)}
.vgrp .vl{font-size:10.5px;color:var(--muted);margin-top:9px;text-align:center;line-height:1.25;font-weight:600}
.vgrp .vc{font-size:10px;color:var(--brand-3);font-weight:700;margin-top:3px}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:13px;height:13px;border-radius:4px;display:inline-block}

.ptalhao{border:1px solid var(--line);border-radius:var(--rad-s);padding:14px 16px;background:var(--panel2)}
.ptalhao h4{font-family:var(--font-d);font-size:15px;font-weight:600;color:var(--brand-deep);margin-bottom:2px}
.ptalhao .sub{font-size:11.5px;color:var(--muted);margin-bottom:11px}
.pbar{margin-bottom:9px}
.pbar .l{display:flex;justify-content:space-between;font-size:11.8px;margin-bottom:3px;gap:8px}
.pbar .l b{font-variant-numeric:tabular-nums;white-space:nowrap}
.pbar .trilho{height:7px;background:var(--petroleo-110b);border-radius:4px;overflow:hidden}
.pbar .trilho i{display:block;height:100%;background:var(--brand-2-fundo)}
.pbar.v80 .trilho i{background:var(--brand-deep-fundo)}

.form2{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
@media(min-width:1400px){
  .form2{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .form2.f4{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .form2 .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .form2.f4 .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.grupo{display:flex;align-items:center;gap:12px;margin:17px 0 9px}
.grupo h3{font-family:var(--font-d);font-size:18px;font-weight:600;color:var(--brand-deep);white-space:nowrap}
.grupo i{flex:1;height:2px;background:var(--line);display:block}
.mesgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px;margin-top:8px}
.mesgrid .chk{padding:6px 9px;font-size:12.5px}
.pizza{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.pizza svg{flex:0 0 auto}
.pizza .leg{flex:1;min-width:220px;display:flex;flex-direction:column;gap:7px}
.pizza .leg div{display:flex;align-items:center;gap:9px;font-size:13px}
.pizza .leg b{margin-left:auto;font-variant-numeric:tabular-nums}
.pizza .leg i{width:13px;height:13px;border-radius:4px;flex:0 0 auto}
.chkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-top:8px}
.chk{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--ambar-290);border-radius:7px;padding:8px 11px;font-size:13.5px;cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--brand);flex:0 0 auto}
.chk span{color:var(--ink);font-weight:600}
.chk small{color:var(--muted);font-weight:400}
.switch{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--brand-3);cursor:pointer;margin-top:4px}
.switch input{width:17px;height:17px;accent-color:var(--brand)}

.note{background:var(--warnbg);border:1px solid var(--warnline);border-radius:var(--rad-s);padding:13px 17px;font-size:13px;color:var(--laranja-730);line-height:1.6}
.note b{display:block;margin-bottom:3px;color:var(--warn)}
.note.info{background:var(--panel2);border-color:var(--line);color:var(--ink)}
.note.info b{color:var(--brand-3)}
/* área de soltar a planilha (Importar e exportar); no toque não há arrasto, fica só o botão */
.imp-solta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:18px 14px;
  border:2px dashed var(--line);border-radius:var(--rad-s);color:var(--muted);font-size:13px;text-align:center}
.imp-solta svg{width:22px;height:22px;flex:none}
.imp-solta .imp-solte{display:none}
.imp-solta.arrastando{border-color:var(--brand-3);background:var(--panel2);color:var(--brand-3)}
.imp-solta.arrastando .imp-arraste,.imp-solta.arrastando label{display:none}
.imp-solta.arrastando .imp-solte{display:inline;font-weight:600}
@media (hover:none){
  .imp-solta{border:0;padding:0;justify-content:flex-start}
  .imp-solta svg,.imp-solta .imp-arraste{display:none}
}
.empty{text-align:center;padding:26px 12px;color:var(--muted);font-size:13.5px}
.empty b{display:block;font-family:var(--font-d);font-size:16px;color:var(--ink);margin-bottom:5px;font-weight:600}
details.lista{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow);margin-bottom:11px}
details.lista>summary{display:flex;align-items:center;gap:9px;cursor:pointer;padding:13px 16px;list-style:none;
  font-family:var(--font-b);font-size:11.5px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--brand-3)}
details.lista>summary::-webkit-details-marker{display:none}
details.lista>summary::before{content:"\25B8";color:var(--brand-2);transition:transform .18s;font-size:13px}
details.lista[open]>summary::before{transform:rotate(90deg)}
details.lista>summary .h3n{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
details.lista .lista-b{padding:0 16px 14px}
table.t th[data-sort]{cursor:pointer;user-select:none}
table.t th[data-sort]:hover{background:var(--brand-deep-fundo)}
table.t th .sarrow{font-size:9.5px;opacity:.9}

details.fold{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow);margin-top:26px;overflow:hidden}
details.fold summary{display:flex;align-items:center;cursor:pointer;padding:15px 22px;font-family:var(--font-d);font-weight:600;font-size:15.5px;color:var(--brand);list-style:none;gap:10px}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary::before{content:"▸";color:var(--brand-2);transition:transform .18s}
details.fold[open] summary::before{transform:rotate(90deg)}
details.fold .fold-b{padding:4px 24px 20px;font-size:13.5px;line-height:1.65}
details.fold .fold-b ul{margin:8px 0 8px 20px}
details.fold .fold-b p{margin-bottom:8px}
.formula{background:var(--panel2);border:1px solid var(--line);border-radius:var(--rad-s);padding:10px 15px;font-size:13px;color:var(--brand-deep);margin:8px 0;font-variant-numeric:tabular-nums}


.toast{position:fixed;left:50%;bottom:1.625rem;transform:translateX(-50%) translateY(0.5rem);background:var(--brand-deep-fundo);color:var(--on-brand);padding:0.75rem 1.5rem;border-radius:99px;font-size:0.875rem;font-weight:600;opacity:0;pointer-events:none;transition:transform 200ms var(--ease-elabore),opacity 180ms ease;z-index:9900;max-width:92vw;text-align:center;box-shadow:0 8px 28px var(--petroleo-890-a30)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:760px){
  .wrap{--wrap-pb:60px;padding:0 16px var(--wrap-pb)}
  .navbar .wrap{padding:8px 16px}
  /* no aplicativo instalado o recorte da tela varia de aparelho para aparelho;
     o max() garante folga mesmo quando o navegador nao informa a medida */
  header.top{padding:8px 0 7px;padding-top:calc(8px + max(env(safe-area-inset-top,0px),22px))}
  header.top .wrap{gap:10px;padding:0 12px}
  header.top .logos{padding:4px 8px;gap:7px;border-radius:7px}
  header.top .logos img{height:26px}
  header.top h1{font-size:15px}
  header.top .sub{font-size:10.5px;margin-top:0}
  .wrap{--wrap-pb:34px;padding:0 12px var(--wrap-pb)}
  /* nada de arrastar a tela para o lado */
  .conteudo,.card,section.block{max-width:100%;overflow-x:hidden}
  table.t.cards{width:100%}
  /* folha de secoes: itens mais baixos, cabem todos sem rolar */
  .folha .gchip{min-height:40px;padding:7px 11px;font-size:12.5px}
  #flSecoesLista{gap:5px}
  .block-head h2{font-size:19px}
  .block-head .bh-note{margin-left:0;flex-basis:100%}
  .card,.kpi{padding:14px 15px}
  .kpi .kv{font-size:22px}
  .gchip{font-size:12px;padding:7px 12px}
}
/* ===================== PORTAO DE ENTRADA (v0.2.0) ===================== */
body.trancado header.top,body.trancado .shell,body.trancado footer.ft,
body.trancado .bnav,body.trancado .folha{display:none!important}
body:not(.trancado) #portao{display:none}

/* ===================== JANELAS (seletor de propriedade, pesquisa por documento) ===================== */
.pn-modal{position:fixed;inset:0;z-index:9470;display:flex;align-items:center;justify-content:center;padding:18px}
.pn-modal[hidden]{display:none}
.table-heading .esp{flex:1 1 auto}
.emb{background:var(--panel2);border:1.5px dashed var(--line);border-radius:var(--rad);
  padding:22px 18px;text-align:center;color:var(--muted);font-size:13px;line-height:1.6}
.emb b{display:block;color:var(--brand-deep);font-size:14.5px;margin-bottom:5px}
.ulin{display:flex;align-items:center;gap:11px;flex-wrap:wrap;border:1.5px solid var(--line);
  border-radius:var(--rad-s);padding:10px 13px;margin-bottom:8px;background:var(--panel)}
.ulin .ui{flex:1 1 200px;min-width:0}
.ulin .un{font-size:13.5px;font-weight:600;color:var(--brand-deep);overflow-wrap:anywhere}
.ulin .ue{font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.ulin select{font-family:var(--font-b);font-size:13px;font-weight:600;color:var(--input-ink);
  border:1.5px solid var(--line);border-radius:7px;background:var(--panel);padding:6px 9px}
.pap{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  border-radius:6px;padding:2px 8px;white-space:nowrap}
.pap.admin{background:var(--brand-deep-fundo);color:var(--on-brand)}
.pap.analista{background:var(--brand-3-fundo);color:var(--on-brand)}
.pap.tester{background:var(--gold);color:var(--on-brand)}
.pap.consultor{background:var(--okbg);color:var(--ok);border:1px solid var(--okline)}
.pap.produtor{background:var(--warnbg);color:var(--warn);border:1px solid var(--warnline)}
.pap.cliente{background:var(--panel2);color:var(--muted);border:1px solid var(--line)}

/* ===================== PERGUNTA DE DUAS SAIDAS ===================== */
.dlg{position:fixed;inset:0;z-index:9700;display:flex;align-items:center;justify-content:center;padding:20px}
.dlg[hidden]{display:none}
.dlg-fundo{position:absolute;inset:0;background:var(--petroleo-950-a50)}
.dlg-cx{position:relative;width:100%;max-width:440px;background:var(--panel);border-radius:var(--rad);
  box-shadow:0 18px 60px var(--sombra-a30);padding:22px 22px 18px}
.dlg-tit{font-family:var(--font-d);font-size:17px;font-weight:600;color:var(--brand-deep);margin-bottom:8px}
.dlg-txt{font-size:13px;color:var(--ink);line-height:1.6;margin-bottom:16px}
.dlg-bts{display:flex;flex-direction:column;gap:8px}
.dlg-bts .btn{width:100%;justify-content:center}
.dlg-senha{display:block;width:100%;box-sizing:border-box;height:var(--campo-h);margin-top:12px;padding:0 12px;border:1.5px solid var(--campo-borda);border-radius:var(--rad-s);font:inherit;font-size:14px;color:var(--ink);background:var(--panel)}
.dlg-senha:focus{outline:0;border-color:var(--brand-2);box-shadow:0 0 0 3px var(--mint-soft)}

/* importar / exportar / arquivo: tres cartoes lado a lado */
.grid.g-3ie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:1100px){.grid.g-3ie{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.grid.g-3ie{grid-template-columns:1fr}}

/* tres cartoes de indicador, cada um com os seus quadros lado a lado */
.card.grupo-ind{margin-top:11px}
.card.grupo-ind > h3{font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--brand-deep);margin-bottom:9px}
.grid.gInd{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.gInd .kv{font-size:20px}
.grid.gInd .kl{font-size:11.5px;line-height:1.35}
@media(min-width:1500px){.grid.gInd{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1100px){.grid.gInd{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.grid.gInd{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.grid.gInd{grid-template-columns:1fr}}

/* categorias recolhiveis e apontamentos mais baixos */
.csgrupo > h4{cursor:pointer;user-select:none;padding:7px 10px;border-radius:var(--rad-s);
  background:var(--panel2);margin-bottom:6px}
.csgrupo > h4:hover{background:var(--petroleo-060)}
.csseta{display:inline-block;width:12px;color:var(--brand-2);font-size:11px}
.csit{padding:7px 11px;margin-bottom:5px}
.csit .csq b{font-size:12.5px}
.csit .csq div{font-size:11px;margin-top:1px}
.csit .csacoes .btn{padding:4px 9px;font-size:11.5px}
.csfix{margin-top:6px;padding-top:6px;gap:7px}
.csfix .cf{flex:0 1 118px}
.csfix .cf-obs{flex:1 1 220px;min-width:160px}
.csfix label{font-size:9.5px;margin-bottom:2px}
.csfix input,.csfix select{height:30px;font-size:12px}
.csit.comobs{border-left-style:double;border-left-width:5px}
@media(max-width:640px){.csfix .cf{flex:1 1 44%}.csfix .cf-obs{flex:1 1 100%}}

/* rotulo fixo em cima de cada barra dos graficos de evolucao */
.vbars2 .b{position:relative}
.vbars2 .b .vrot{position:absolute;left:50%;transform:translateX(-50%);
  font-family:var(--font-b);font-size:10.5px;font-weight:700;color:var(--brand-deep);
  white-space:nowrap;pointer-events:none}
.vbars2 .up .b .vrot{bottom:calc(100% + 3px)}
.vbars2 .dn .b .vrot{top:calc(100% + 3px)}
@media(max-width:640px){.vbars2 .b .vrot{font-size:9.5px}}

/* bloco 04: data, colhido, vendido e preco numa linha so */
#b4 .pgrid.c4{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
@media(max-width:900px){#b4 .pgrid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){#b4 .pgrid.c4{grid-template-columns:1fr}}
/* a chave "vendi tudo" nao pode esticar o cartao do vendido */
#b4 .pgrid.c4 .pfield .switch{margin-top:6px;padding:4px 11px 4px 8px;font-size:11.5px}
#b4 .grid.g-2.c-dest{grid-template-columns:1fr 1.4fr}
@media(max-width:680px){#b4 .grid.g-2.c-dest{grid-template-columns:1fr}}

/* os dois registros do bloco 04, lado a lado */
.grid.g-logs{align-items:start}
@media(max-width:1100px){.grid.g-logs{grid-template-columns:1fr}}

/* saldo de cacau em estoque, no bloco 04 */
.estq{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0;
  background:var(--panel2);border:1.5px solid var(--line);border-left:4px solid var(--brand-2);
  border-radius:var(--rad-s);padding:9px 13px}
.estq b{font-size:12.5px;color:var(--brand-deep)}
.estq span{font-size:12px;color:var(--muted);line-height:1.5}
.estq.vazio{border-left-color:var(--line)}
#b4 .pgrid > .pfield.linha-toda{grid-column:1/-1}
/* caixa de sugestoes do elemento de despesa */
.sugbox{position:relative}
.suglista{position:absolute;left:0;right:0;top:100%;z-index:60;margin-top:3px;
  background:var(--panel);border:1.5px solid var(--brand-2);border-radius:var(--rad-s);
  box-shadow:0 10px 30px var(--sombra-a16);max-height:260px;overflow:auto;display:none}
.suglista.on{display:block}
.sugit{padding:9px 12px;font-size:13px;color:var(--ink);cursor:pointer;line-height:1.35;
  border-bottom:1px solid var(--line)}
.sugit:last-child{border-bottom:0}
.sugit:hover,.sugit.sel{background:var(--panel2)}
.sugit b{color:var(--brand-deep)}
.sugit .sugat{display:block;font-size:10.5px;color:var(--muted);margin-top:1px}
.sugnovo{color:var(--gold);font-weight:600}
@media(max-width:680px){.suglista{max-height:44vh}.sugit{padding:11px 12px;font-size:14px}}

/* =============== RECORTE DA TELA NO APLICATIVO INSTALADO ===============
   No navegador a barra do Safari ja protege o topo e o env() volta zero,
   o que esta correto. Instalado na tela de inicio nao ha barra nenhuma e
   o conteudo sobe ate o relogio; em varios iPhones o env() tambem volta
   zero nesse modo. Por isso o piso generoso vale SO quando esta instalado. */
body.app header.top{padding-top:max(env(safe-area-inset-top,0px),46px)}
body.app #portao{padding-top:calc(14px + max(env(safe-area-inset-top,0px),46px))}
body.app .bnav{padding-bottom:calc(10px + max(env(safe-area-inset-bottom,0px),16px))}
@media(min-width:701px){
  body.app header.top{padding-top:env(safe-area-inset-top,0px)}

}


/* =============== FERRAMENTA DE CONSISTENCIA (v0.6.0) =============== */
/* resumo: grid e cards estilizados em css/padrao-elabore.css */
.csgrupo{margin-bottom:14px}
.csgrupo > h4{font-family:var(--font-d);font-size:13px;font-weight:600;color:var(--brand-deep);
  margin:0 0 7px;display:flex;align-items:center;gap:8px}
.csgrupo > h4 .cscount{font-size:11px;font-weight:600;color:var(--muted)}
.csit{border:1.5px solid var(--line);border-left-width:4px;border-radius:var(--rad-s);
  padding:10px 13px;margin-bottom:7px;background:var(--panel)}
.csit.alta{border-left-color:var(--err);background:var(--errbg)}
.csit.media{border-left-color:var(--warn);background:var(--warnbg)}
.csit.baixa{border-left-color:var(--brand-2)}
.csit.aceito{opacity:.55;border-left-color:var(--line);background:var(--panel2)}
.csit .cstop{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.csit .csq{flex:1 1 260px;min-width:0}
.csit .csq b{font-size:13px;color:var(--brand-deep)}
.csit .csq div{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:2px}
.csit .csacoes{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.csit .csacoes .btn{padding:5px 11px;font-size:12px}
.csfix{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-top:9px;
  padding-top:9px;border-top:1px dashed var(--line)}
.csfix label{font-size:10.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:3px}
.csfix .cf{flex:0 1 130px}
.csfix input,.csfix select{width:100%;height:34px;padding:0 8px;font-family:var(--font-b);
  font-size:13px;color:var(--input-ink);border:1.5px solid var(--line);border-radius:7px;background:var(--panel)}
@media(max-width:640px){.csfix .cf{flex:1 1 45%}}

/* =============== GRADE DO LANCAMENTO DE CUSTO (v0.5.3) ===============
   No celular, a ordem do DOM ja e a ordem de preenchimento: data, elemento,
   atividade, rateio, quantidade, unidade, valor.
   Na tela grande, os seis campos cabem numa linha so e o quadro de rateio
   desce para baixo deles — assim nao sobra buraco a direita.            */
.pgrid > .card.linha-toda{grid-column:1/-1}
#b3 .pgrid.c6 > *{order:0}

@media(min-width:681px){
  #b3 .pgrid.c6 > .pfield{order:0}
  #b3 .pgrid.c6 > .card.linha-toda{order:1}
}
@media(min-width:681px) and (max-width:1099px){
  #b3 .pgrid.c6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1100px){
  /* oito colunas: data 1 · elemento 2 · atividade 2 · qtd 1 · unidade 1 · valor 1 */
  #b3 .pgrid.c6{grid-template-columns:repeat(8,minmax(0,1fr))}
  #b3 .pgrid.c6 > .pf-w2{grid-column:span 2}
}
@media(max-width:680px){
  #b3 .pgrid.c6{grid-template-columns:1fr}
}
/* os dois quadros de baixo: destino ocupa mais, repeticao ocupa menos */
#b3 .grid.g-2.c-dest{grid-template-columns:1.35fr 1fr}
@media(max-width:680px){#b3 .grid.g-2.c-dest{grid-template-columns:1fr}}
/* o quadro de rateio nao precisa de altura de cartao inteiro quando fechado */
.card.linha-toda{padding:9px 12px}
.card.linha-toda > h3{margin-bottom:6px}
.pdica{font-size:11px;color:var(--brand-3);margin-top:4px;line-height:1.4;min-height:14px}
.atvlista{max-height:190px;overflow:auto;border:1.5px solid var(--ambar-220);border-radius:var(--rad-s);padding:5px;background:var(--panel)}
.atvlin{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:6px;font-size:12px}
.atvlin:hover{background:var(--panel2)}
.atvlin input[type=checkbox]{width:15px;height:15px;accent-color:var(--brand-2);flex:0 0 auto;margin:0}
.atvlin .atvn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.atvlin input[type=number]{width:62px;height:26px;padding:0 6px;font-size:12px;text-align:right;
  border:1.5px solid var(--line);border-radius:6px;background:var(--panel)}
.atvlin input[type=number]:disabled{opacity:.35}
.atvsoma{font-size:11.5px;font-weight:600;color:var(--muted)}
.atvsoma.ok{color:var(--ok)} .atvsoma.err{color:var(--err)}
.novoel{background:var(--ambar-040);border:1.5px solid var(--ambar-220);border-radius:var(--rad-s);
  padding:9px 12px;margin-top:9px;font-size:12px;color:var(--gold);line-height:1.5}

/* todos os quadros de indicador com a mesma altura */
.kpis{align-items:stretch}
.kpis .kpi{height:100%;display:flex;flex-direction:column;justify-content:flex-start}
.kpis .kpi .kl{margin-top:auto}
.kpis .kpi .kd{min-height:15px}

/* balao de explicacao: aparece ao passar o mouse, e no toque abre por clique */
.tip{position:fixed;z-index:9800;max-width:330px;background:var(--panel);color:var(--ink);
  border:1.5px solid var(--brand-2);border-radius:var(--rad-s);box-shadow:0 10px 34px var(--sombra-a22);
  padding:11px 13px;font-size:12px;line-height:1.55;pointer-events:none;opacity:0;
  transition:opacity .12s}
.tip.on{opacity:1}
.tip b{color:var(--brand-deep)}
.tip .tipt{font-weight:600;color:var(--brand-deep);margin-bottom:4px;font-size:12.5px}

/* botao (i) de explicacao do indicador */
.kinfo{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  margin-left:5px;border-radius:50%;border:1.5px solid var(--brand-2);background:transparent;
  color:var(--brand-2);font-family:var(--font-b);font-size:10.5px;font-weight:700;line-height:1;
  cursor:pointer;vertical-align:middle;padding:0;flex:0 0 auto}
.kinfo:hover{background:var(--brand-2-fundo);color:var(--on-brand)}
.dlg-txt b{color:var(--brand-deep)}

/* subtitulos dos blocos: o titulo ja diz o que e (v0.5.0) */
.bh-note{display:none!important}

/* =============== CAMPOS SEM TEXTO E SEM ROTULO (v0.3.2) ===============
   O tipo do campo e dito pela cor, nao por etiqueta:
     amarelo        = voce preenche
     amarelo claro  = opcional
     cinza          = a ferramenta calcula                                */
.pfield .pb{display:none!important}
.pfield .pbsit{display:none!important}
.pfield .pl .edit,.pfield .pl .opt,.pfield .pl .aut{display:none!important}
.pfield:has(.pl .opt){background:var(--ambar-020);border-color:var(--ambar-150)}
.pfield:has(.pl .opt) .pl{color:var(--ambar-440)}
.pgrid > .pfield:has(.pl .opt){border-left-color:var(--ambar-250)}
/* todos os campos com a mesma altura: rotulo em cima, caixa embaixo */
.pgrid{align-items:stretch}
.pfield{display:flex;flex-direction:column;justify-content:flex-start;padding:8px 11px}
.pfield .pl{margin-bottom:5px;min-height:14px}
.pfield input,.pfield select{height:var(--campo-h);padding:0 10px}
.pfield input[type=date]{padding:0 8px}
.pfield.calc .pv{font-size:19px;line-height:var(--campo-h);min-height:var(--campo-h)}
.card > h3{font-size:15px;margin-bottom:9px}
.card{padding:13px 14px}
/* textos de apresentacao e notas puramente explicativas somem (v0.5.2);
   .note.info.res e resultado (diagnostico, consistencia) e continua na tela */
.card > p{display:none}
.note.info:not(.res){display:none!important}
.kd.zero{display:none}

/* =============== ORDEM DE PREENCHIMENTO (v0.3.1) ===============
   Dentro de cada cartao, o que voce digita vem primeiro; o que a
   ferramenta calcula sozinha vai para o fim. A ordem visual muda sem
   mexer no HTML, usando a propriedade "order" do grid.               */
.pgrid > .pfield{order:1}
.pgrid > .pfield.calc{order:2}
.pgrid > .pfield.calc:first-of-type{position:relative}
.pfield.calc{background:var(--panel2);border-color:var(--line)}
/* trilho verde a esquerda do que precisa ser digitado: guia o olho */
.pgrid > .pfield:not(.calc){border-left:3px solid var(--brand-2)}
.pgrid > .pfield.calc{border-left:3px solid var(--line)}

/* ===================== PAINEL DE SAFRAS ===================== */
#pnSafras{position:fixed;inset:0;z-index:9400;display:flex;align-items:center;justify-content:center;padding:20px}
#pnSafras[hidden]{display:none}
/* o fundo e a caixa valem para TODOS os paineis, nao so o de safras:
   sem isto o painel do PDF saia transparente por cima da tela             */
.pn-fundo{position:absolute;inset:0;background:var(--petroleo-950-a50)}
.pn-cx{position:relative;width:100%;max-width:560px;max-height:calc(86vh / var(--zoom-app));overflow:auto;
  background:var(--panel);border-radius:var(--rad);box-shadow:0 18px 60px var(--sombra-a30);padding:22px}
.pn-cx > h3{font-family:var(--font-d);font-size:18px;font-weight:600;color:var(--brand-deep);margin:0 0 3px}
.pn-sub{font-size:12px;color:var(--muted);margin-bottom:16px;line-height:1.5}
#pnSafras h3{font-family:var(--font-d);font-size:18px;font-weight:600;color:var(--brand-deep);margin:0 0 3px}
#pnSafras .pn-sub{font-size:12px;color:var(--muted);margin-bottom:16px;line-height:1.5}
.sfr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1.5px solid var(--line);
  border-radius:var(--rad-s);padding:11px 13px;margin-bottom:8px;background:var(--panel)}
.sfr.viva{border-color:var(--brand-2);background:var(--panel2)}
.sfr .sfr-i{flex:1 1 180px;min-width:0}
.sfr .sfr-n{font-size:14px;font-weight:600;color:var(--brand-deep)}
.sfr .sfr-d{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.sfr .sfr-b{display:flex;gap:6px;flex-wrap:wrap}
.trava{background:var(--ambar-040);border:1.5px solid var(--ambar-220);border-radius:var(--rad-s);
  padding:10px 14px;margin:12px 0;font-size:12.5px;color:var(--gold);font-weight:600}

/* quadros de destino e repeticao: baixos e alinhados */
.card.sub{padding:10px 12px}
.card.sub > h3{font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:7px}
.card.sub .switch{padding:5px 12px 5px 9px;font-size:12.5px}
.card.sub .pfield{padding:6px 10px}
.c-dest{align-items:start}

/* =============== CHAVES LIGA/DESLIGA VISIVEIS =============== */
.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:999px;padding:6px 14px 6px 10px;
  background:var(--panel2);transition:background .15s,border-color .15s,color .15s}
.switch:hover{border-color:var(--brand-2)}
.switch input[type=checkbox]{width:17px;height:17px;accent-color:var(--brand-2);margin:0;flex:0 0 auto}
.switch:has(input:checked){background:var(--okbg);border-color:var(--ok);color:var(--ok);font-weight:600}

/* =============== ESCOLHA DO QUE COPIAR PARA A SAFRA NOVA =============== */
#pnPdf{position:fixed;inset:0;z-index:9460;display:flex;align-items:center;justify-content:center;padding:18px}
#pnPdf[hidden]{display:none}
#pnPdf .pn-cx{max-width:520px;max-height:calc(88vh / var(--zoom-app));overflow:auto}
#pnCopia{position:fixed;inset:0;z-index:9450;display:flex;align-items:center;justify-content:center;padding:18px}
#pnCopia[hidden]{display:none}
#pnCopia .pn-cx{max-width:620px;max-height:calc(88vh / var(--zoom-app));overflow:auto}
.pc-sec{margin-top:14px}
.pc-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px;font-size:13px}
.pc-cab .sesp{flex:1 1 auto}
.pc-cab .btn{padding:4px 10px;font-size:11.5px}
.pc-lista{border:1.5px solid var(--line);border-radius:var(--rad-s);
  max-height:190px;overflow:auto;padding:6px}
.pc-lin{display:flex;align-items:flex-start;gap:9px;padding:6px 7px;border-radius:7px;cursor:pointer;font-size:13px}
.pc-lin:hover{background:var(--panel2)}
.pc-lin input{margin-top:2px;width:16px;height:16px;accent-color:var(--brand-2);flex:0 0 auto}
.pc-lin .pc-d{font-size:11.5px;color:var(--muted);line-height:1.45}
.pc-vazio{padding:12px;text-align:center;color:var(--muted);font-size:12.5px}

/* =============== MODAL DE NOVIDADES E HISTÓRICO DE VERSÕES =============== */
#pnChangelog{position:fixed;inset:0;z-index:9470;display:flex;align-items:center;justify-content:center;padding:18px}
#pnChangelog[hidden]{display:none}
#pnChangelog .pn-cx{max-width:640px;max-height:calc(88vh / var(--zoom-app));overflow:auto}
.pn-changelog-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;border-bottom:1px solid var(--line-soft);padding-bottom:10px}
.pn-changelog-hdr h3{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--brand-deep);margin:0 0 3px}
.pn-changelog-fechar{background:none;border:0;color:var(--muted);cursor:pointer;padding:4px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}
.pn-changelog-fechar:hover{background:var(--panel2);color:var(--ink)}
.pn-changelog-corpo{display:flex;flex-direction:column;gap:8px}
.pn-changelog-rodape{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.5}
/* uma versao = uma linha no padrao das safras (.sfr); a atual vem aberta e com a borda da marca */
.nov{border:1.5px solid var(--line);border-radius:var(--rad-s);background:var(--panel)}
.nov.atual{border-color:var(--brand-2);background:var(--panel2)}
.nov > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;padding:11px 13px;border-radius:var(--rad-s)}
.nov > summary::-webkit-details-marker{display:none}
.nov > summary::before{content:"";flex:0 0 auto;align-self:center;width:6px;height:6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.nov[open] > summary::before{transform:rotate(45deg)}
.nov > summary:focus-visible{outline:2px solid var(--brand-2);outline-offset:-2px}
.nov-v{font-size:14px;font-weight:600;color:var(--brand-deep)}
.nov-t{font-size:12.5px;color:var(--muted)}
.nov-d{margin-left:auto;font-size:12px;color:var(--muted)}
.nov-corpo{padding:0 13px 12px 29px}
.nov-grupo + .nov-grupo{margin-top:10px}
.nov-grupo h4{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.nov-grupo.novo h4{color:var(--ok)}
.nov-grupo.melhorou h4{color:var(--info)}
.nov-grupo.corrigido h4{color:var(--warn)}
.nov-grupo ul{margin:0;padding-left:18px;font-size:13px;line-height:1.5;color:var(--ink)}
.nov-grupo li + li{margin-top:3px}

/* ===================== FAIXA DE EDICAO ===================== */
.edbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0;
  background:var(--ambar-040);border:1.5px solid var(--ambar-220);border-radius:var(--rad-s);padding:10px 14px}
.edbar b{font-size:13px;color:var(--gold);font-weight:600}
.edbar span{font-size:11.5px;color:var(--muted);line-height:1.5}
.edbar .esp{flex:1 1 auto}


/* ---- tabela do BI LABOR RURAL (LRTable, js/ui/lr-tabela.js): pesquisa por coluna, ordenar, paginar, CSV ---- */
.table-heading{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:8px}
.record-count{color:var(--muted);font-size:12.5px;font-weight:650;white-space:nowrap}
.btn-table-export{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--petroleo-130);border-radius:7px;background:var(--petroleo-030);
  color:var(--brand-2);font-family:var(--font-b);font-size:12.5px;font-weight:650;line-height:1.2;cursor:pointer;transition:background .15s,border-color .15s}
.btn-table-export svg{width:15px;height:15px;display:block}
.btn-table-export:hover{background:var(--mint-soft);border-color:var(--petroleo-280)}
.table-scroll{max-height:calc(70vh / var(--zoom-app));overflow:auto;border:1px solid var(--line-soft);border-radius:8px;background:var(--panel);scrollbar-width:thin;scrollbar-color:var(--petroleo-280) transparent}
.data-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:12.5px;line-height:1.3;font-variant-numeric:tabular-nums}
.data-table th{position:sticky;top:0;z-index:2;padding:7px 8px;color:var(--tab-cab-ink);background:var(--tab-cab-bg);border-bottom:1px solid var(--brand);
  font-size:11.5px;font-weight:650;text-align:left}
.data-table th:hover{background:var(--azul-090);color:var(--brand-2)}
.data-table th.sortable{cursor:pointer;user-select:none}
.data-table th.sortable::after{content:" \2195";opacity:.35;font-size:9.5px}
.data-table th.sort-asc::after{content:" \25B2";opacity:1;color:var(--brand-2);font-size:9.5px}
.data-table th.sort-desc::after{content:" \25BC";opacity:1;color:var(--brand-2);font-size:9.5px}
.data-table td{padding:7px 8px;color:var(--ink);background:var(--panel);border-bottom:1px solid var(--line-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.data-table tbody tr:hover td{background:var(--mint-soft)}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table strong{color:var(--brand-deep);font-weight:700}
.data-table td:last-child{white-space:normal;line-height:1.5}
.data-table td .lnk-del{margin-right:8px}
.data-table td .lnk-del:last-child{margin-right:0}
.empty-cell{padding:18px!important;color:var(--muted)!important;text-align:center}
.col-left{text-align:left!important}.col-center{text-align:center!important}.col-right{text-align:right!important}
.data-table thead tr.table-filter-row th{top:var(--th-h,30px);padding:4px 5px;background:var(--verde-040);border-bottom:1.5px solid var(--line-soft);font-weight:400;cursor:default}
.data-table thead tr.table-filter-row th:hover{background:var(--verde-040)}
.table-col-filter{width:100%;height:26px;padding:2px 7px;font-family:var(--font-b);font-size:12px;color:var(--ink);background:var(--panel);
  border:1px solid var(--line-soft);border-radius:5px;outline:none}
.table-col-filter::placeholder{color:var(--muted);font-size:11.5px}
.table-col-filter:focus{border-color:var(--brand-2);box-shadow:0 0 0 1.5px var(--petroleo-750-a18)}
.col-resizer{position:absolute;top:0;right:0;z-index:10;width:8px;height:100%;display:flex;align-items:center;justify-content:center;cursor:col-resize;user-select:none;touch-action:none}
.col-resizer::after{content:"";display:block;width:2px;height:55%;border-radius:1px;background:var(--sombra-a08);transition:all .15s}
.data-table th:hover .col-resizer::after{background:var(--petroleo-750-a40);height:75%}
.col-resizer:hover::after,.col-resizer.is-active::after{width:3px;height:90%;background:var(--mint)}
body.table-resizing,body.table-resizing *{cursor:col-resize!important;user-select:none!important}
.table-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:8px;padding:8px 4px 0;
  border-top:1px solid var(--line-soft);color:var(--muted);font-size:12.5px;user-select:none}
.pagination-info strong{color:var(--brand-deep);font-weight:700}
.pagination-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pagination-size-wrap{display:flex;align-items:center;gap:6px}
.pagination-size-wrap label{color:var(--muted);font-weight:600}
.pagination-size-select{padding:3px 6px;font-family:var(--font-b);font-size:12.5px;font-weight:600;border:1px solid var(--line-soft);border-radius:5px;background:var(--panel);color:var(--ink);cursor:pointer;outline:none}
.pagination-size-select:hover,.pagination-size-select:focus{border-color:var(--brand-2)}
.pagination-nav{display:flex;align-items:center;gap:3px}
.pagination-btn{min-width:28px;height:28px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-soft);border-radius:5px;
  background:var(--panel);color:var(--ink);font-family:var(--font-b);font-size:12.5px;font-weight:600;cursor:pointer}
.pagination-btn:hover:not(:disabled){background:var(--mint-soft);color:var(--brand);border-color:var(--petroleo-280)}
.pagination-btn.active{background:var(--brand-2-fundo);color:var(--on-brand);border-color:var(--brand-2);font-weight:700}
.pagination-btn:disabled{opacity:.38;cursor:not-allowed;background:transparent}
.pagination-ellipsis{padding:0 3px;color:var(--muted)}