/* =========================================================
   aghtml.css — estilo portado do HTML "AgroGestor", ISOLADO
   sob o wrapper .aghtml para não vazar nas demais seções.
   Usado apenas pelas seções Armazenagem e Patrimonial.
   Variáveis e seletores são todos escopados em .aghtml.
   ========================================================= */

.aghtml{
  --verde:#1B5E20; --verde2:#2E7D32; --verde-claro:#E8F1EA;
  --pos:#2E7D32; --aten:#8A5A10; --neg:#C0392B;
  --txt:#1F2933; --txt2:#6B7280;
  --card:#FFFFFF; --borda:#E3E8E5;
  --raio:13px;
  --sombra:0 1px 2px rgba(16,24,32,.05), 0 1px 1px rgba(16,24,32,.03);
  --sombra2:0 2px 4px rgba(16,24,32,.05), 0 12px 26px -14px rgba(27,94,32,.20);
  font-size:14px; line-height:1.45; color:var(--txt);
  -webkit-font-smoothing:antialiased;
}
.aghtml *{box-sizing:border-box}

/* Cabeçalho de contexto */
.aghtml .ctx{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:18px}
.aghtml .ctx h1{font-family:'Calibri', ui-sans-serif, system-ui, sans-serif; font-size:21px; font-weight:700; letter-spacing:-.015em; margin:0; color:var(--txt)}
.aghtml .ctx .ctxlabel{font-size:12px; background:var(--verde-claro); color:var(--verde); padding:6px 12px; border-radius:20px; font-weight:600}

/* Grids e KPIs */
.aghtml .grid{display:grid; gap:14px}
.aghtml .kpis{grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); margin-bottom:18px}
.aghtml .kpi{background:var(--card); border:1px solid var(--borda); border-radius:var(--raio); padding:15px 16px; box-shadow:var(--sombra); transition:box-shadow .18s ease}
.aghtml .kpi:hover{box-shadow:var(--sombra2)}
.aghtml .kpi .lbl{font-size:12px; color:var(--txt2); margin-bottom:6px}
.aghtml .kpi .val{font-family:'Calibri', ui-sans-serif, system-ui, sans-serif; font-size:21px; font-weight:700; letter-spacing:-.3px; color:var(--txt); font-variant-numeric:tabular-nums}
.aghtml .kpi .sub{font-size:11.5px; color:var(--txt2); margin-top:5px}
.aghtml .kpi .sub.pos{color:var(--pos)} .aghtml .kpi .sub.neg{color:var(--neg)} .aghtml .kpi .sub.aten{color:var(--aten)}

/* Cards */
.aghtml .card{background:var(--card); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra); margin-bottom:16px; overflow:hidden; transition:box-shadow .18s ease}
.aghtml .card:hover{box-shadow:var(--sombra2)}
.aghtml .card .head{padding:14px 16px; border-bottom:1px solid var(--borda); font-weight:600; font-size:14.5px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.aghtml .card .head .hint{font-size:11.5px; color:var(--txt2); font-weight:400}
.aghtml .card .body{padding:16px}

/* Charts */
.aghtml .charts2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.aghtml .chart-wrap{position:relative; height:280px}
.aghtml .chart-wrap.sm{height:230px}

/* Tabelas */
.aghtml .tbl-wrap{overflow-x:auto}
.aghtml table{width:100%; border-collapse:collapse; font-size:13px}
.aghtml thead th{background:var(--verde-claro); color:var(--verde); text-align:left; padding:10px 12px; font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; border-bottom:2px solid var(--verde)}
.aghtml thead th.r{text-align:right}
.aghtml thead th.c{text-align:center}
.aghtml tbody td{padding:10px 12px; border-bottom:1px solid var(--borda); white-space:nowrap}
.aghtml tbody td.r{text-align:right; font-variant-numeric:tabular-nums}
.aghtml tbody td.c{text-align:center; font-variant-numeric:tabular-nums}
.aghtml tbody tr:nth-child(even){background:#FAFBFA}
.aghtml tbody tr:hover{background:var(--verde-claro)}
.aghtml tbody tr.detrow:hover{background:transparent}
.aghtml tfoot td{padding:11px 12px; font-weight:600; border-top:2px solid var(--borda)}
.aghtml tfoot td.r{text-align:right}
.aghtml tfoot td.c{text-align:center}

/* Selos / badges */
.aghtml .selo{display:inline-block; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:600; white-space:nowrap}
.aghtml .selo.verde{background:var(--verde-claro); color:var(--verde)}
.aghtml .selo.azul{background:#E5EEF6; color:#27548A}
.aghtml .selo.amb{background:#FBF1DD; color:var(--aten)}
.aghtml .selo.vermelho{background:#FDECEB; color:#B3261E}
/* Gauntlet, jornada "Saber o que a fazenda tem, de relance", volta 2:
   var(--txt2) (#6B7280) sobre o fundo #EEF0EF deste selo específico
   mede 4,22:1, abaixo dos 4,5:1 exigidos (folga pequena, 0,28). Cor
   fixa só para o selo cinza, escurecida o suficiente para fechar acima
   de 5,3:1 sem mexer no token global --txt2, usado em outros contextos
   onde já pode estar em conformidade. */
.aghtml .selo.cinza{background:#EEF0EF; color:#52596B}
.aghtml .selo.verm{background:#FBE7E4; color:var(--neg)}

/* Abas — alvo de toque mínimo de 44px em qualquer largura (GAUNTLET-UX
   seção 6, veto do auditor de acessibilidade): min-height fixo + flex
   centralizado, em vez de padding vertical sozinho, porque padding
   some visualmente do "alvo clicável" quando o texto tem menos de
   44px de altura de linha. Vale pras 9 abas de Patrimônio e de
   qualquer outra seção .aghtml (Armazenagem, Produção, Planejamento). */
.aghtml .tabs{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--borda); margin-bottom:16px}
.aghtml .tab{min-height:44px; display:inline-flex; align-items:center; padding:9px 14px; cursor:pointer; font-size:13px; color:#4B5563; border-bottom:2px solid transparent; font-weight:500; transition:color .15s ease, border-color .15s ease, background-color .15s ease; border-radius:8px 8px 0 0}
.aghtml .tab:hover{color:var(--txt); background:rgba(27,94,32,.04)}
.aghtml .tab.ativo{color:var(--verde); border-bottom-color:var(--verde); font-weight:600}

/* Chips de navegação (talhão físico x operações de cultura — Produção) */
.aghtml .chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.aghtml .chip{padding:8px 14px; border-radius:20px; cursor:pointer; font-size:12.5px; font-weight:600; background:#EEF0EF; color:var(--txt2); white-space:nowrap; transition:filter .15s ease, transform .15s ease, box-shadow .15s ease}
.aghtml .chip:hover{filter:brightness(0.97); transform:translateY(-1px); box-shadow:0 2px 6px rgba(16,24,32,.10)}
.aghtml .chip.ativo{background:var(--verde); color:#fff}

/* Botões */
.aghtml .btn{font-family:inherit; font-size:13px; font-weight:600; border-radius:9px; padding:9px 15px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid transparent; transition:filter .12s, background .12s}
.aghtml .btn:focus-visible{outline:2px solid var(--verde2); outline-offset:2px}
.aghtml .btn.primary{background:var(--verde); color:#fff}
.aghtml .btn.primary:hover{filter:brightness(1.08)}
.aghtml .btn.sec{background:#fff; color:var(--verde); border-color:var(--borda)}
.aghtml .btn.sec:hover{background:var(--verde-claro)}
.aghtml .btn.sm{padding:7px 12px; font-size:12.5px}
/* MEDIDO (Gauntlet, jornada Patrimônio): botão "✕" de apagar em
   .btn.sm com um só caractere fecha 36px de largura, 8px abaixo do
   alvo de toque mínimo (a altura já batia 44px pela regra base do
   .btn). .danger nunca tinha regra própria — ganha min-width e a cor
   de excluir, consistente com .selo.verm/val-neg do resto do app. */
.aghtml .btn.danger{min-width:44px; background:#fff; color:var(--neg); border-color:#f0c9c5}
.aghtml .btn.danger:hover{background:#FBE7E4}

/* Alertas */
.aghtml .alert{background:#FBF1DD; border:1px solid #ecd9ad; color:#7a5a16; border-radius:var(--raio); padding:13px 16px; font-size:13px; display:flex; gap:11px; align-items:flex-start; margin-bottom:16px}
.aghtml .alert svg{flex:0 0 auto; margin-top:1px}
.aghtml .alert.azul{background:#E9F1F8; border-color:#cadcec; color:#27548A}
.aghtml .alert.verde{background:#E8F1EA; border-color:#BFDCBF; color:#1B5E20}
.aghtml .alert.vermelho{background:#FBEAEA; border-color:#E9C5C5; color:#8A2727}

/* Barra de progresso */
.aghtml .pbar{height:9px; background:#EEF0EF; border-radius:20px; overflow:hidden; min-width:120px}
.aghtml .pbar > div{height:100%; border-radius:20px}

/* Grade de mensagens (A conferir) */
.aghtml .msg-grid{display:grid; gap:13px; grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

/* Layouts auxiliares */
.aghtml .twocol{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.aghtml .dilig-grid{display:grid; grid-template-columns:1fr; gap:14px; align-items:stretch}
.aghtml .dilig-panel{border:1px solid var(--borda); border-radius:10px; padding:12px; background:var(--card); display:flex; flex-direction:column}
.aghtml .dilig-tit{font-weight:600; font-size:13px; margin-bottom:8px; color:var(--txt)}
.aghtml .empty{padding:34px; text-align:center; color:var(--txt2)}
.aghtml .mini-list{list-style:none; margin:0; padding:0}
.aghtml .mini-list li{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--borda); font-size:13px}
.aghtml .mini-list li:last-child{border-bottom:none}
.aghtml .note{font-size:12px; color:var(--txt2); margin-top:10px}
/* font-size 16px (era 13px): campo de formulário abaixo de 16px é vetado
   pelo auditor de acessibilidade do Gauntlet de UX (também evita o zoom
   automático do Safari em iOS). Padding subiu junto pra manter o alvo de
   toque perto de 44px no celular, achado da jornada "Saber o que a
   fazenda tem, de relance" (Patrimônio é a maior consumidora de .inp
   do app: Propriedades, Maquinário, Implementos, Veículos).
   min-height:44px (novo): padding+borda+linha de texto fechavam em 43px
   reais (1px abaixo do mínimo, medido no select "Selecione a máquina"
   da Simulação de Venda) — min-height garante o piso de 44px em
   qualquer <input>/<select> desta classe, no celular e no desktop,
   sem depender da conta de padding/borda bater exato (GAUNTLET-UX
   seção 6, veto do auditor). */
.aghtml .inp{padding:10px 10px; border:1px solid var(--borda); border-radius:8px; font-family:inherit; font-size:16px; color:var(--txt); background:#fff; min-height:44px}
.aghtml .sel{position:relative; display:inline-block}
.aghtml .sel select{appearance:none; border:1px solid var(--borda); background:#fff; border-radius:9px; padding:10px 30px 10px 12px; font-size:16px; color:var(--txt); font-family:inherit; cursor:pointer; max-width:260px; min-height:44px}
.aghtml .sel::after{content:"\25BE"; position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--txt2); pointer-events:none; font-size:12px}
.aghtml details.card > summary{list-style:none}
.aghtml details.card > summary::-webkit-details-marker{display:none}

@media (max-width: 900px){ .aghtml .twocol{grid-template-columns:1fr} }

/* Patrimônio → Resumo completo (tabela "pat-resumo-tbl"): no celular a
   tabela vira lista empilhada, um cartão por linha, cada valor com o
   rótulo da própria coluna na frente — nunca fonte menor tentando caber
   6 colunas, nunca rolagem horizontal (GAUNTLET-UX seção 6, veto do
   auditor de acessibilidade). Célula sem conteúdo (linhas de categoria e
   de total, que só preenchem Item + valor) simplesmente não aparece,
   sem rótulo solto. */
@media (max-width: 760px){
  .aghtml .pat-resumo-tbl thead{ display:none }
  .aghtml .pat-resumo-tbl, .aghtml .pat-resumo-tbl tbody, .aghtml .pat-resumo-tbl tr, .aghtml .pat-resumo-tbl td{ display:block; width:100% }
  .aghtml .pat-resumo-tbl tr{ padding:10px 2px; border-bottom:1px solid var(--borda) }
  .aghtml .pat-resumo-tbl tr:nth-child(even){ background:transparent }
  .aghtml .pat-resumo-tbl td{ border:none; padding:3px 2px; text-align:left !important; white-space:normal }
  .aghtml .pat-resumo-tbl td:empty{ display:none }
  .aghtml .pat-resumo-tbl td[data-rotulo]::before{ content:attr(data-rotulo) ": "; font-weight:600; color:var(--txt2); font-size:11px }
  .aghtml .pat-resumo-tbl td:first-child{ font-weight:700; font-size:14px }
}

/* Patrimônio → tabelas densas (Maquinário, 9 colunas; Implementos, 6
   colunas; Investimentos, até 8 colunas): no celular ELAS JÁ viravam
   cartão via .tabela-cartoes (css/styles.css, abaixo de 640px), mas no
   desktop de trabalho real deste app (sidebar fixa consumindo parte da
   largura da janela) o espaço que sobra pro conteúdo é bem menor que a
   largura da janela, e a tabela seguia larga o bastante pra abrir
   rolagem horizontal escondida dentro de si mesma, achado do auditor
   de acessibilidade (GAUNTLET-UX seção 6), medido com 1200px de
   largura de captura sobrando 848px de área útil de conteúdo.
   Em vez de um segundo @media com outro número mágico de largura de
   JANELA (que erraria de novo assim que a barra lateral mudasse de
   largura), esta variante usa CONTAINER QUERY: reage à largura real do
   próprio contêiner da tabela, não à da janela, então vira cartão
   exatamente quando ela não cabe no espaço disponível, em qualquer
   largura, seja celular, o desktop de 1200px deste projeto, ou
   qualquer outra. Mesma receita de card empilhado do .tabela-cartoes,
   só que pelo contêiner. */
.aghtml .tbl-wrap-fluida{ overflow-x:auto; container-type:inline-size }
@container (max-width: 1300px){
  .aghtml .tabela-cartoes-fluida thead{ display:none }
  .aghtml .tabela-cartoes-fluida, .aghtml .tabela-cartoes-fluida tbody, .aghtml .tabela-cartoes-fluida tr, .aghtml .tabela-cartoes-fluida td{ display:block; width:100% }
  .aghtml .tabela-cartoes-fluida tr{ margin-bottom:10px; padding:10px 12px; border:1px solid var(--borda); border-radius:12px; background:var(--card) }
  .aghtml .tabela-cartoes-fluida tfoot tr{ background:var(--verde-claro) !important }
  .aghtml .tabela-cartoes-fluida td{ display:flex !important; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; padding:4px 0 !important; text-align:right !important; border:0 !important; white-space:normal !important }
  .aghtml .tabela-cartoes-fluida td::before{ content:attr(data-rotulo); font-weight:600; color:var(--txt2); text-align:left; white-space:normal }
  .aghtml .tabela-cartoes-fluida td:empty{ display:none }
  .aghtml .tabela-cartoes-fluida td[data-rotulo="Ações"]{ display:block !important; text-align:left }
  .aghtml .tabela-cartoes-fluida td[data-rotulo="Ações"]::before{ display:block; margin-bottom:8px }
  .aghtml .tabela-cartoes-fluida .acoes-pend{ display:flex; flex-direction:column; gap:8px }
  .aghtml .tabela-cartoes-fluida .acoes-pend button{ width:100% }
}

/* Patrimônio → aba Estoque (tabela "estoque-tbl", as 3 variantes: grãos,
   pecuária por fase e rebanho derivado do cadastro individual): mesmo
   padrão de pat-resumo-tbl acima. No celular a tabela de estoque (5 a 6
   colunas com campo editável em cada uma) nunca cabe ao lado do card
   "Simulação de Venda" nem sozinha — em vez de rolagem horizontal, cada
   linha vira um cartão empilhado com o rótulo da coluna acima do campo
   (rótulo em bloco, não inline, porque o valor costuma ser um <input> ou
   <select> de largura total). GAUNTLET-UX seção 6, veto do auditor. */
@media (max-width: 760px){
  .aghtml .estoque-tbl thead{ display:none }
  .aghtml .estoque-tbl, .aghtml .estoque-tbl tbody, .aghtml .estoque-tbl tr, .aghtml .estoque-tbl td{ display:block; width:100% }
  .aghtml .estoque-tbl tr{ padding:10px 2px; border-bottom:1px solid var(--borda) }
  .aghtml .estoque-tbl tr:nth-child(even){ background:transparent }
  .aghtml .estoque-tbl td{ border:none; padding:5px 2px; text-align:left !important; white-space:normal }
  .aghtml .estoque-tbl td:empty{ display:none }
  .aghtml .estoque-tbl td[data-rotulo]::before{ content:attr(data-rotulo) ": "; display:block; font-weight:600; color:var(--txt2); font-size:11px; margin-bottom:2px }
  .aghtml .estoque-tbl td:first-child{ font-weight:700; font-size:14px }
  .aghtml .estoque-tbl td input, .aghtml .estoque-tbl td select{ width:100% !important; max-width:none !important }
}

/* Patrimônio → aba Estoque: a tabela de estoque e o card "Simulação de
   Venda" de cada atividade sempre empilhados, um sobre o outro — nunca
   lado a lado. A tabela tem 5 a 6 colunas com campo editável em cada
   uma, e não cabe dividindo a largura da tela com o card ao lado sem
   rolagem horizontal em nenhuma largura de desktop realista deste app
   (sidebar fixa de 228px já toma parte da tela). GAUNTLET-UX seção 6. */
.aghtml .estoque-venda-grid{ display:grid; grid-template-columns:1fr; gap:16px }
/* Item de grid tem min-width:auto por padrão, então nunca encolhe abaixo
   do conteúdo mínimo da tabela interna (Fase/Cabeças/@/Preço/Valor) — o
   cartão estourava a trilha de 1fr e nascia rolagem horizontal na tela
   inteira. min-width:0 devolve o corte pro cartão, cuja própria tabela
   interna já rola dentro de si (.tbl-wrap) quando precisa. Cobre tanto o
   filho direto (card da Simulação de Venda) quanto o card aninhado
   dentro do wrapper de estoque. GAUNTLET-UX seção 6, veto do auditor. */
.aghtml .estoque-venda-grid > *,
.aghtml .estoque-venda-grid .card{ min-width:0 }

/* Cartão "hero" no cabeçalho de Patrimônio (aula .vs-hero de
   css/visao-simples.css, reaproveitado): dá respiro extra quando some
   dentro de .aghtml, cujo font-size de base (14px) é menor que o da
   página em que .vs-hero nasceu. Sem tocar em cor nem em token, só no
   espaço em volta. */
.aghtml .vs-hero{ margin-top:14px }

/* Impressão (relatório do módulo Produção): esconde a navegação e os
   controles interativos, deixando só cards, tabelas e KPIs. Regras
   fora do wrapper .aghtml de propósito — a moldura do app não é dele. */
@media print{
  header, #sidebar{display:none !important}
  main{overflow:visible !important; padding:0 !important}
  .aghtml .btn, .aghtml input, .aghtml select, .aghtml .tabs, .aghtml .chips{display:none !important}
  .aghtml .card{break-inside:avoid}
}

/* =========================================================
   Planilha de Finanças Pessoais (fp-*) — grade mensal editável
   com cabeçalho e 1ª coluna fixos (sticky). Escopada em .aghtml.
   ========================================================= */
.aghtml .fp-toolbar{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; background:var(--card); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra); padding:16px 18px; margin-bottom:16px}
.aghtml .fp-toolbar .fp-field{display:flex; flex-direction:column; gap:5px}
.aghtml .fp-toolbar .fp-field > label{font-size:11.5px; color:var(--txt2); font-weight:600; text-transform:uppercase; letter-spacing:.03em}
.aghtml .fp-toolbar .fp-spacer{flex:1 1 auto}

.aghtml .fp-planilha{border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra); background:var(--card); overflow:auto; max-height:70vh; margin-bottom:8px}
.aghtml table.fp-grid{border-collapse:separate; border-spacing:0; width:100%; min-width:820px; font-size:13px}
.aghtml .fp-grid th, .aghtml .fp-grid td{padding:0; white-space:nowrap; border-bottom:1px solid var(--borda)}
/* cabeçalho fixo no topo */
.aghtml .fp-grid thead th{position:sticky; top:0; z-index:3; background:var(--verde-claro); color:var(--verde); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:10px 10px; text-align:right; border-bottom:2px solid var(--verde)}
.aghtml .fp-grid thead th.fp-mes{min-width:70px}
.aghtml .fp-grid thead th.fp-total{min-width:96px}
/* 1ª coluna (nome) fixa à esquerda */
.aghtml .fp-grid .fp-col-nome{position:sticky; left:0; z-index:2; background:var(--card); text-align:left; min-width:190px; box-shadow:1px 0 0 var(--borda)}
.aghtml .fp-grid thead th.fp-col-nome{z-index:4; text-align:left}
.aghtml .fp-grid tbody tr:nth-child(even) .fp-col-nome{background:#FAFBFA}
.aghtml .fp-grid tbody td{padding:3px 8px; text-align:right; font-variant-numeric:tabular-nums; color:var(--txt)}
.aghtml .fp-grid tbody td.fp-total{font-weight:700; padding-right:12px}
.aghtml .fp-grid tbody tr:nth-child(even) td{background:#FAFBFA}
.aghtml .fp-grid tbody tr.fp-row:hover td{background:var(--verde-claro)}
.aghtml .fp-grid tbody tr.fp-row:hover .fp-col-nome{background:var(--verde-claro)}

/* célula editável: input transparente que preenche a célula */
.aghtml .fp-cell{width:100%; min-width:60px; border:1px solid transparent; background:transparent; text-align:right; padding:6px 6px; border-radius:6px; font-family:inherit; font-size:13px; color:var(--txt); font-variant-numeric:tabular-nums; -moz-appearance:textfield}
.aghtml .fp-cell::-webkit-outer-spin-button, .aghtml .fp-cell::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.aghtml .fp-cell:hover{border-color:var(--borda)}
.aghtml .fp-cell:focus{outline:none; border-color:var(--verde2); background:#fff; box-shadow:0 0 0 2px rgba(46,125,50,.12)}
.aghtml .fp-cell.zero{color:#C0C6C2}
.aghtml .fp-nome-inp{width:100%; border:1px solid transparent; background:transparent; font-family:inherit; font-size:13px; font-weight:600; color:var(--txt); padding:6px 6px; border-radius:6px}
.aghtml .fp-nome-inp:hover{border-color:var(--borda)}
.aghtml .fp-nome-inp:focus{outline:none; border-color:var(--verde2); background:#fff}
.aghtml .fp-cat-sel{border:1px solid transparent; background:transparent; font-family:inherit; font-size:12px; color:var(--txt2); padding:3px 4px; border-radius:6px; max-width:150px}
.aghtml .fp-cat-sel:hover{border-color:var(--borda)}
.aghtml .fp-cat-sel:focus{outline:none; border-color:var(--verde2); background:#fff}
/* Livro de lançamentos (fp-ledger): tabela mais estreita, sem coluna fixa. */
.aghtml table.fp-ledger{min-width:0; width:100%; table-layout:fixed}
.aghtml .fp-ledger th:nth-child(1), .aghtml .fp-ledger td:nth-child(1){width:24%}
.aghtml .fp-ledger th:nth-child(2), .aghtml .fp-ledger td:nth-child(2){width:26%}
.aghtml .fp-ledger th:nth-child(3), .aghtml .fp-ledger td:nth-child(3){width:13%}
.aghtml .fp-ledger th:nth-child(4), .aghtml .fp-ledger td:nth-child(4){width:9%}
.aghtml .fp-ledger th:nth-child(5), .aghtml .fp-ledger td:nth-child(5){width:18%}
.aghtml .fp-ledger th:nth-child(6), .aghtml .fp-ledger td:nth-child(6){width:10%}
.aghtml .fp-ledger td{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.aghtml .fp-ledger tbody td{padding:5px 8px}
.aghtml .fp-valor{width:120px; border:1px solid var(--borda); background:#fff; text-align:right; padding:7px 8px; border-radius:7px; font-family:inherit; font-size:13px; color:var(--txt); font-variant-numeric:tabular-nums; -moz-appearance:textfield}
.aghtml .fp-valor::-webkit-outer-spin-button, .aghtml .fp-valor::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.aghtml .fp-valor:focus{outline:none; border-color:var(--verde2); box-shadow:0 0 0 2px rgba(46,125,50,.12)}
.aghtml .fp-ledger .fp-nome-inp{border:1px solid var(--borda); background:#fff}
.aghtml .fp-ledger .fp-cat-sel{border:1px solid var(--borda); background:#fff; color:var(--txt); max-width:200px}
.aghtml .fp-ledger .fp-dia{border:1px solid var(--borda); background:#fff; color:var(--txt)}
.aghtml .fp-ledger tr.fp-sec td{position:static}
.aghtml .fp-grid thead th.fp-dia-th{min-width:52px; text-align:center}
.aghtml .fp-dia{width:44px; border:1px solid transparent; background:transparent; text-align:center; padding:6px 2px; border-radius:6px; font-family:inherit; font-size:12.5px; color:var(--txt2); -moz-appearance:textfield}
.aghtml .fp-dia::-webkit-outer-spin-button, .aghtml .fp-dia::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.aghtml .fp-dia:hover{border-color:var(--borda)}
.aghtml .fp-dia:focus{outline:none; border-color:var(--verde2); background:#fff; color:var(--txt); box-shadow:0 0 0 2px rgba(46,125,50,.12)}

/* linhas de seção (RECEITAS/DESPESAS) e de subtotais/saldo */
.aghtml .fp-grid tr.fp-sec td{background:#EEF3EE; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--verde); padding:9px 10px; text-align:left; position:sticky; z-index:1}
.aghtml .fp-grid tr.fp-sec .fp-col-nome{background:#EEF3EE}
.aghtml .fp-grid tr.fp-sub td{font-weight:700; background:#F4F7F4; border-top:1px solid var(--borda)}
.aghtml .fp-grid tr.fp-sub .fp-col-nome{background:#F4F7F4; font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:.03em; color:var(--txt2); padding:9px 8px}
.aghtml .fp-grid tfoot td{position:sticky; bottom:0; z-index:2; padding:10px 8px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; border-top:2px solid var(--verde)}
.aghtml .fp-grid tfoot tr.fp-saldo td{background:#F0F5F0}
.aghtml .fp-grid tfoot tr.fp-acum td{background:#EAF2EA}
.aghtml .fp-grid tfoot .fp-col-nome{text-align:left; text-transform:uppercase; font-size:11px; letter-spacing:.03em; color:var(--txt2)}
.aghtml .fp-pos{color:var(--pos)} .aghtml .fp-neg{color:var(--neg)}

.aghtml .fp-cellbtn{border:none; background:transparent; cursor:pointer; color:var(--txt2); font-size:13px; padding:4px 6px; border-radius:6px; line-height:1}
.aghtml .fp-cellbtn:hover{background:var(--verde-claro); color:var(--verde)}
.aghtml .fp-cellbtn.del:hover{background:#FBE7E4; color:var(--neg)}
.aghtml .fp-addrow{display:flex; gap:10px; flex-wrap:wrap; margin:2px 0 18px}

@media (max-width: 640px){ .aghtml .fp-planilha{max-height:none} }

/* =========================================================
   Organograma (pes-*) — árvore de cargos em CSS puro, sem
   canvas/lib externa. Técnica clássica de "CSS org chart":
   <ul>/<li> em inline-block + linhas conectoras desenhadas por
   ::before/::after (metade esquerda/direita da linha horizontal
   de cada li, mais o traço vertical de queda). Escopada em
   .aghtml; cada raiz isolada (ciclo/órfão) vira a própria
   <ul class="pes-tree"> separada, sem falsa linha de irmandade.
   ========================================================= */
.aghtml .pes-tree, .aghtml .pes-tree ul{list-style:none; margin:0; padding:0}
.aghtml .pes-tree{display:table; margin:0 auto}
.aghtml .pes-tree ul{display:table; margin:0 auto; padding-top:28px; position:relative}
.aghtml .pes-tree li{display:table-cell; vertical-align:top; text-align:center; position:relative; padding:28px 12px 0 12px}
/* traço vertical de queda + metade da linha horizontal por item */
.aghtml .pes-tree li::before, .aghtml .pes-tree li::after{
  content:''; position:absolute; top:0; right:50%; width:50%; height:28px; border-top:2px solid var(--borda);
}
.aghtml .pes-tree li::after{ right:auto; left:50%; border-left:2px solid var(--borda); }
.aghtml .pes-tree li:only-child::before, .aghtml .pes-tree li:only-child::after{ display:none; }
.aghtml .pes-tree li:only-child{ padding-top:0; }
.aghtml .pes-tree li:first-child::before, .aghtml .pes-tree li:last-child::after{ border:0 none; }
.aghtml .pes-tree li:last-child::before{ border-right:2px solid var(--borda); border-radius:0 6px 0 0; }
.aghtml .pes-tree li:first-child::after{ border-radius:6px 0 0 0; }
.aghtml .pes-tree > li{ padding-top:0 } /* raiz não puxa linha de cima */
.aghtml .pes-tree > li::before, .aghtml .pes-tree > li::after{ display:none }
.aghtml .pes-tree ul::before{ content:''; position:absolute; top:0; left:50%; width:0; height:28px; border-left:2px solid var(--borda); }

/* Caixa do cargo */
.aghtml .pes-box{display:inline-block; min-width:168px; max-width:220px; background:var(--card); border:1px solid var(--borda); border-radius:10px; box-shadow:var(--sombra); padding:10px 12px; text-align:left; cursor:pointer; transition:box-shadow .15s ease, border-color .15s ease}
.aghtml .pes-box:hover{box-shadow:var(--sombra2); border-color:var(--verde2)}
.aghtml .pes-box .pes-cargo{font-weight:700; font-size:12.5px; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.aghtml .pes-box .pes-ocupantes{margin-top:5px; font-size:11.5px; color:var(--txt2); line-height:1.5}
.aghtml .pes-box .pes-ocupantes .pes-vago{color:var(--aten); font-weight:600}
/* Organograma: nó de contexto (ancestral de outra propriedade no filtro)
   e nós do organograma de sucessão. */
.aghtml .pes-box.ctx{opacity:.55; cursor:default}
.aghtml .pes-box.ctx:hover{box-shadow:var(--sombra); border-color:var(--borda)}
.aghtml .pes-box.suc-raiz{background:var(--verde-tinta, #eef5ef); border-color:var(--verde2); cursor:default}
.aghtml .pes-box.suc-nodo{max-width:260px}
.aghtml .pes-tree-wrap{overflow-x:auto; padding:6px 4px 4px}
/* Modo Simples de Gestão de Pessoas: organograma em árvore na tela larga,
   lista recuada no celular (a árvore obrigaria rolagem horizontal). */
.aghtml .pes-org-arvore{padding:10px 4px 6px}
/* No Simples é só leitura: editar cargo continua no modo Completo. */
.aghtml .pes-org-arvore .pes-box{cursor:default}
.aghtml .pes-org-arvore .pes-box:hover{box-shadow:var(--sombra); border-color:var(--borda)}
/* Nome do cargo inteiro, sem reticências: quebra linha e a propriedade
   desce para uma linha própria. Vaga em aberto em âmbar. */
.aghtml .pes-org-arvore .pes-box{max-width:230px}
.aghtml .pes-org-arvore .pes-cargo{white-space:normal; overflow:visible; line-height:1.3}
.aghtml .pes-org-arvore .pes-cargo .hint{display:block; margin-top:2px; font-weight:500; font-size:11.5px; color:var(--txt2)}
.aghtml .pes-org-arvore .pes-box:has(.pes-vago){background:#fff8e8; border-color:#e9c77a}
.aghtml .pes-org-lista{display:none}
@media (max-width:767px){
  .aghtml .pes-org-arvore{display:none}
  .aghtml .pes-org-lista{display:flex}
}
.aghtml .pes-tree + .pes-tree{margin-top:22px; border-top:1px dashed var(--borda); padding-top:22px}

/* Sucessão patrimonial: barra de cobertura + selo por status */
.aghtml .pes-cobertura{height:9px; background:#EEF0EF; border-radius:20px; overflow:hidden; min-width:140px}
.aghtml .pes-cobertura > div{height:100%; border-radius:20px}

/* Toast (overlay global, classe própria p/ não colidir) */
.aghtml-toast{position:fixed; bottom:22px; right:22px; background:#1B5E20; color:#fff; padding:13px 18px; border-radius:11px; box-shadow:0 4px 14px rgba(16,24,32,.18); font-size:13.5px; font-weight:500; z-index:90; display:flex; align-items:center; gap:10px; opacity:0; transform:translateY(12px); transition:opacity .25s, transform .25s; max-width:360px}
.aghtml-toast.show{opacity:1; transform:translateY(0)}

/* Movimento respeitando a preferência do sistema, mesmo padrão de css/styles.css */
@media (prefers-reduced-motion: reduce){
  .aghtml *, .aghtml-toast{ transition:none!important; animation:none!important }
}

/* ── Férias e afastamentos (js/sections/pessoas.ferias.js) ──
   Linha do tempo por dia, 12 meses. Cores: férias #2f7a3b (texto
   branco 5,3:1), férias já gozadas #cfe3cf (texto #0f1f14),
   afastamento #6d4fd0 (texto branco 5,6:1). No celular a linha do
   tempo vira a lista das próximas saídas (sem rolagem horizontal). */
.aghtml .fer-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.aghtml .fer-chip{flex:1;min-width:130px;border:1px solid var(--borda);border-radius:var(--raio);padding:10px 12px;background:#fff}
.aghtml .fer-chip .n{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.aghtml .fer-chip .l{font-size:12px;color:var(--txt2)}
.aghtml .fer-chip.ruim{background:#fdecea;border-color:#f3c3be}.aghtml .fer-chip.ruim .n{color:#b3261e}
.aghtml .fer-chip.aten{background:#fff8e8;border-color:#e9c77a}.aghtml .fer-chip.aten .n{color:#8a5a10}
.aghtml .fer-nav{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;color:var(--txt2)}
.aghtml .fer-nav button{width:32px;height:32px;border-radius:8px;border:1px solid var(--borda);background:#fff;color:var(--txt);font-weight:700}
.aghtml .fer-nav button:hover{background:var(--verde-claro)}
.aghtml .fer-lt{position:relative}
.aghtml .fer-lt-cab,.aghtml .fer-lt-linha{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center}
.aghtml .fer-lt-cab{margin-bottom:6px}
.aghtml .fer-lt-meses{position:relative;height:18px}
.aghtml .fer-lt-meses span{position:absolute;top:0;font-size:11px;color:var(--txt2);padding-left:4px;white-space:nowrap}
.aghtml .fer-lt-meses span.virada{font-weight:700;color:var(--txt)}
.aghtml .fer-lt-linha{margin-bottom:6px}
.aghtml .fer-lt-nome{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aghtml .fer-lt-trilho{position:relative;height:26px;background:#f7f8f6;border-radius:6px;overflow:hidden}
.aghtml .fer-lt-sep{position:absolute;top:0;bottom:0;width:1px;background:#e4e7e2}
.aghtml .fer-lt-hoje{position:absolute;top:0;bottom:0;width:2px;background:#d9a521;z-index:2}
.aghtml .fer-bar{position:absolute;top:3px;bottom:3px;border-radius:5px;border:0;padding:0 6px;display:flex;align-items:center;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;color:#fff;background:#2f7a3b;z-index:1;min-width:4px}
.aghtml button.fer-bar{cursor:pointer}
.aghtml button.fer-bar:hover{filter:brightness(1.1)}
.aghtml .fer-bar.concluida{background:#cfe3cf;color:#0f1f14}
.aghtml .fer-bar.afast{background:#6d4fd0}
.aghtml .fer-leg{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--txt2);margin-top:10px}
.aghtml .fer-leg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.aghtml .fer-lista{display:none;flex-direction:column;gap:8px}
.aghtml .fer-lista-item{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--borda);border-radius:10px;font-size:13px}
.aghtml .fer-venc{margin-top:16px;border-top:1px solid var(--borda);padding-top:12px}
.aghtml .fer-venc-item{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;font-size:13px}
.aghtml .fer-tag{font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap}
.aghtml .fer-tag.vencido{background:#fdecea;color:#b3261e}
.aghtml .fer-tag.vence{background:#fff3dc;color:#8a5a10}
.aghtml .fer-tag.pendente{background:#eef1fb;color:#2f4fa8}
.aghtml .fer-tag.ok{background:#e7f4e3;color:#2e6b2f}
.aghtml .fer-tag.aquisitivo,.aghtml .fer-tag.na{background:#f0f2ee;color:#4f584e}
@media (max-width:767px){
  .aghtml .fer-lt,.aghtml .fer-nav,.aghtml .fer-leg{display:none}
  .aghtml .fer-lista{display:flex}
}
/* Data ao lado de uma barra curta (não cabe dentro). #3d4539 sobre o
   trilho #f7f8f6 mede 10,0:1. */
.aghtml .fer-bar-rot{position:absolute;top:50%;transform:translateY(-50%);font-size:11px;font-weight:600;color:#3d4539;white-space:nowrap;pointer-events:none;z-index:1}

/* ── Paridade de exportação (js/sections/mercado.js, 16/09/2026) ──
   Linha rótulo + campo/valor, remontada com os tokens do app.
   par-destaque marca o "PREÇO NO PORTO" (etapa intermediária);
   par-final marca o resultado (EXW ou o líquido do boi gordo).

   Redesenho de 16/09/2026, terceira rodada (feedback: mesmo depois de
   encolher o espaçamento, a tela ainda pedia rolagem; a linha
   pontilhada solta não lia como grupo; rótulo e valor ficavam longe
   um do outro numa tela larga, porque cada linha esticava por toda a
   largura do card). Cada "seção" do roteiro ("Cotação internacional"
   → "No porto..." → "Câmbio" → "Até a fazenda") virou um BLOCO com
   borda própria (.par-bloco), e os blocos ficam lado a lado num grid
   (.par-blocos) quando a tela é larga — numa tela de desktop comum
   os 3-4 blocos cabem numa fileira só, o que resolve as três coisas
   de uma vez: menos altura total (menos rolagem), separação visual
   real entre grupos (sem precisar de traço pontilhado linha a linha)
   e rótulo/valor próximos, porque a coluna do campo não precisa mais
   caber numa linha que se estica pela página inteira. */
/* Card mais compacto (padding/head menores que o genérico .card),
   escopado só aqui pra não afetar as outras dezenas de cards do app. */
.aghtml .par-card .head{padding:10px 16px}
.aghtml .par-card .body{padding:10px 16px}

.aghtml .par-blocos{display:grid; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); gap:12px; align-items:stretch}
.aghtml .par-bloco{border:1px solid var(--borda); border-radius:10px; padding:10px 14px; background:#fff}
.aghtml .par-bloco-titulo{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--verde); margin-bottom:4px}

.aghtml .par-linha{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 0; flex-wrap:wrap}
.aghtml .par-lbl{font-size:13px; color:var(--txt); font-weight:600; flex:1 1 auto; min-width:0; line-height:1.25}
.aghtml .par-lbl small{display:block; font-size:10.5px; color:var(--txt2); font-weight:400; margin-top:1px}

/* Coluna da direita: largura fixa e igual em toda linha do bloco,
   editável ou calculada, pra parar de parecer "torto" — e estreita
   de propósito, pra caber ao lado do rótulo dentro de um bloco. */
.aghtml .par-campo{flex:0 0 145px; max-width:145px}
.aghtml .par-campo .inp{width:100%; text-align:right; border-radius:0; border-left:none; border-right:none; padding-left:4px; padding-right:4px}
/* Valor calculado (só leitura, não é campo de toque): mais baixo que
   o campo editável de propósito, pra economizar altura de linha sem
   mexer no alvo de toque dos campos que o produtor de fato clica. */
.aghtml .par-valor{width:100%; box-sizing:border-box; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; background:#FAFBFA; border:1px solid var(--borda); border-radius:8px; padding:6px 10px; min-height:32px; color:var(--txt); display:flex; align-items:center; justify-content:flex-end}

/* Setinhas de + e −: pílula única com o campo no meio, botões de
   44px (alvo de toque, aqui sim necessário — é o que o produtor
   clica), fáceis de mirar mesmo sem prática de tela sensível ao
   toque. */
.aghtml .par-stepper{display:flex; align-items:stretch; border:1px solid var(--borda); border-radius:8px; overflow:hidden; background:#fff}
.aghtml .par-step{flex:0 0 32px; min-height:44px; border:none; background:#F3F6F3; color:var(--verde); font-size:17px; font-weight:700; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .12s ease; -webkit-tap-highlight-color:transparent}
.aghtml .par-step:hover{background:var(--verde-claro)}
.aghtml .par-step:active{background:#dbe9dc}
.aghtml .par-step:focus-visible{outline:2px solid var(--verde2); outline-offset:-2px}
.aghtml .par-step-menos{border-right:1px solid var(--borda)}
.aghtml .par-step-mais{border-left:1px solid var(--borda)}

.aghtml .par-destaque{background:var(--verde-claro); border-radius:8px; padding:3px 10px; margin:4px 0}
.aghtml .par-destaque .par-lbl{font-weight:700; color:var(--verde)}
.aghtml .par-destaque .par-valor{background:#fff; font-size:14px; color:var(--verde); border-color:var(--verde2); min-height:32px}
.aghtml .par-final{background:#E8F1EA; border-radius:8px; padding:4px 10px; margin-top:4px}
.aghtml .par-final .par-lbl{font-weight:700; color:var(--pos); font-size:13px}
.aghtml .par-final .par-valor{background:#fff; color:var(--pos); font-size:16px; border-color:var(--pos); min-height:34px}
.aghtml .par-rodape{font-size:11px; color:var(--txt2); text-align:center; margin-top:8px; padding-top:6px; border-top:1px solid var(--borda)}

/* Resultado principal no cabeçalho do card: maior e mais firme que
   o .selo padrão (11.5px), porque é o número que decide a conversa. */
.aghtml .par-headline{font-size:15px; padding:5px 14px; border-radius:8px}

/* Simulador de IBS e CBS (27/09/2026): reaproveita os blocos da
   paridade. Escolhas viram controle segmentado com alvo de toque de
   44px; valores em reais precisam de coluna mais larga que a da
   paridade (R$ 5.000.000,00 não cabe em 145px). */
.aghtml .ibs-escolha{padding:6px 0}
.aghtml .ibs-escolha .par-lbl{margin-bottom:6px}
.aghtml .ibs-seg{flex-wrap:wrap}
.aghtml .ibs-seg button{min-height:44px; font-size:13px}
.aghtml .ibs-campo-largo{flex:0 0 190px; max-width:190px}
.aghtml .ibs-campo-largo .inp{width:100%; text-align:right; border:1px solid var(--borda); border-radius:8px; padding:6px 10px; min-height:44px}
.aghtml .ibs-pagar{background:#FBEAEA}
.aghtml .ibs-pagar .par-lbl{color:var(--neg)}
.aghtml .ibs-pagar .par-valor{color:var(--neg); border-color:var(--neg)}
@media (min-width:641px){
  .aghtml .ibs-blocos .par-linha{flex-wrap:nowrap}
}
/* Aba "Entenda as regras" da Reforma Tributária. */
.aghtml .reg-duas{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(280px,100%), 1fr)); gap:12px}
.aghtml .reg-caixa{border:1px solid var(--borda); border-radius:10px; padding:10px 14px; background:#fff}
.aghtml .reg-caixa-titulo{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--verde); margin-bottom:6px}
.aghtml .reg-caixa ul, .aghtml .reg-lista{list-style:disc; padding-left:20px}
.aghtml .reg-numerada{list-style:decimal}
.aghtml .reg-caixa li, .aghtml .reg-lista li{margin:4px 0}
.aghtml tr.reg-atual td{background:var(--verde-claro)}
.aghtml .rf-pct{display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
.aghtml .rf-pct .inp{width:64px; min-height:44px; text-align:right}
.aghtml table.reg-tabela th, .aghtml table.reg-tabela td{white-space:normal; vertical-align:top}

@media (max-width:640px){
  .aghtml .par-blocos{grid-template-columns:1fr}
  .aghtml .par-linha{gap:8px; padding:6px 0}
  .aghtml .par-campo{flex:1 1 100%; max-width:none}
  .aghtml .ibs-campo-largo{flex:1 1 100%; max-width:none}
}

/* ── Open Finance (js/sections/openfinance*.js) ─────────────── */
.aghtml .of-topo{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px}
.aghtml .of-topo-dir{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.aghtml .of-sub{font-size:13px; color:var(--txt2); margin-top:4px}
.aghtml .of-mini{font-size:12px; color:#52596B; margin-top:2px}
.aghtml .of-neg{color:var(--neg); font-weight:600}
.aghtml .of-nota{font-size:12.5px; color:#52596B; margin:-8px 0 16px}
.aghtml .of-vazio{font-size:13.5px; color:#52596B; padding:6px 0}
.aghtml .of-aviso{align-items:center; justify-content:space-between; flex-wrap:wrap}
.aghtml .of-alerta{align-items:center; justify-content:space-between; gap:12px}
.aghtml .of-alerta:last-child{margin-bottom:0}
.aghtml .of-alerta-txt{flex:1 1 280px}
.aghtml .of-acoes{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px}
.aghtml .of-acoes-linha{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end}
.aghtml .of-chips .chip{border:0; min-height:44px; font-family:inherit; white-space:normal; max-width:100%; text-align:left}
.aghtml .of-perms{display:flex; flex-wrap:wrap; gap:4px}
.aghtml .of-lista{margin:0; padding-left:18px; font-size:13.5px; line-height:1.55}
.aghtml .of-lista li{margin-bottom:6px}
.aghtml .of-passos li{margin-bottom:10px}
.aghtml .of-num-verm{color:var(--neg)}
.aghtml .of-num-amb{color:var(--aten)}
.aghtml .of-legenda{margin-bottom:14px}
.aghtml .of-legenda > summary{cursor:pointer}
.aghtml.of-raiz .charts2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
/* Cartões de indicador do Open Finance: ocupam a largura toda em partes
   iguais (auto-fit, não sobra vão à direita), rótulo curto e o
   valor na mesma altura em todos, com a explicação embaixo. */
.aghtml.of-raiz .kpis{grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr))}
.aghtml.of-raiz .kpi{display:flex; flex-direction:column}
.aghtml.of-raiz .kpi .lbl{line-height:1.3}
/* Em fileira de 6 o cartão é estreito: o rótulo pode quebrar, e todos
   reservam duas linhas para os valores continuarem na mesma altura. */
.aghtml.of-raiz .kpis:has(> .kpi:nth-child(6):last-child) .kpi .lbl{min-height:2.6em}
.aghtml.of-raiz .kpi .sub{margin-top:auto; padding-top:5px}
/* Seis cartões nunca deixam um sozinho na segunda linha: 6 lado a lado
   quando o conteúdo tem largura, senão 3 + 3, e 2 por linha no celular. */
.aghtml.of-raiz .of-corpo{container-type:inline-size}
.aghtml.of-raiz .kpis:has(> .kpi:nth-child(6):last-child){grid-template-columns:repeat(3, minmax(0, 1fr))}
@container (min-width: 1060px){ .aghtml.of-raiz .kpis:has(> .kpi:nth-child(6):last-child){grid-template-columns:repeat(6, minmax(0, 1fr))} }
@container (max-width: 560px){ .aghtml.of-raiz .kpis:has(> .kpi:nth-child(6):last-child){grid-template-columns:repeat(2, minmax(0, 1fr))} }
/* Tabelas do Open Finance (.of-tabela): tabela normal, e cartão
   empilhado só quando o espaço dela fica abaixo de 720px. */
.aghtml .of-tbl-wrap{overflow-x:auto; container-type:inline-size}
.aghtml .of-tabela td .of-mini{white-space:normal}
@container (max-width: 720px){
  .aghtml .of-tabela thead{display:none}
  .aghtml .of-tabela, .aghtml .of-tabela tbody, .aghtml .of-tabela tfoot, .aghtml .of-tabela tr, .aghtml .of-tabela td{display:block; width:100%}
  .aghtml .of-tabela tr{margin-bottom:10px; padding:10px 12px; border:1px solid var(--borda); border-radius:12px; background:var(--card)}
  .aghtml .of-tabela tfoot tr{background:var(--verde-claro) !important}
  .aghtml .of-tabela td{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; padding:4px 0 !important; text-align:right !important; border:0 !important; white-space:normal !important}
  .aghtml .of-tabela td::before{content:attr(data-rotulo); font-weight:600; color:var(--txt2); text-align:left}
  .aghtml .of-tabela td:empty{display:none}
}
/* Linha de produto dentro de uma atividade (Grãos · Soja) no quadro de
   custo por atividade: recuada, com um traço guia. */
.aghtml .of-sub-linha{display:inline-block; padding-left:18px; position:relative; color:var(--txt)}
.aghtml .of-sub-linha::before{content:''; position:absolute; left:4px; top:50%; width:8px; border-top:1px solid #B8C0BA}