/* =====================================================================
   beAgri — Sistema de Gestão — novo padrão visual (V.5B.1 → V.5B.2)
   Usado só por /resumo, /sistema e /dashboard nesta etapa — as outras
   47 rotas continuam com o <style> embutido em BASE (web/app.py), sem
   nenhuma relação com este arquivo. Baseado em
   07_Especificacao_Visual_e_Componentes.md e no protótipo
   prototipos_visuais/v3/estilos.css, adaptado às regras e rotas reais
   do sistema. Sem CDN, sem dependência externa.
   ===================================================================== */

:root {
  --verde: #2c5f2d;
  --verde-escuro: #234a24;
  --verde-claro-fundo: #eef5ee;
  --cinza-texto: #1a1a1a;
  --cinza-medio: #555;
  --cinza-claro: #767676;
  --cinza-borda: #e2e6e2;
  --cinza-fundo: #f7f9f7;
  --branco: #ffffff;
  --amarelo-fundo: #fff3cd;
  --amarelo-borda: #ffe08a;
  --amarelo-texto: #7a5c00;
  --vermelho-fundo: #fdeaea;
  --vermelho-borda: #f3c6c2;
  --vermelho-texto: #7a1c17;
  --vermelho-forte: #b3261e;
  --raio: 8px;
  --raio-pequeno: 5px;
  /* Medidas estruturais em rem: acompanham a escala proporcional definida
     logo abaixo, em vez de ficarem cravadas em pixel. */
  --largura-sidebar: 14.75rem;
  --largura-sidebar-recolhida: 3.75rem;
  --altura-cabecalho: 3.5rem;
}

/* ===== Escala proporcional ao monitor (2026-09-22) =====
   "A tela deve adaptar ao tamanho de cada monitor. Deve manter a
   proporcionalidade."

   A medida de base do sistema deixa de ser um número fixo e passa a
   acompanhar a largura da janela. Como praticamente todo tamanho do projeto é
   escrito em `em`/`rem` — letras, espaçamentos, larguras de campo, o menu
   lateral, a altura do cabeçalho —, mudar essa base escala a tela inteira
   junto, na mesma proporção: a mesma tela continua sendo a mesma tela em
   qualquer monitor, só maior ou menor. Nada muda de lugar, nada é escondido.

   Os limites existem por legibilidade: 11px é o piso e 18px é o teto — acima
   disso a tela ocupa mais espaço sem mostrar mais informação. A reta foi
   calibrada em cima de medições reais: 11px numa janela de 911px (monitor de
   1366 com ampliação de 150% no Windows), 12,3px em 1093 (o mesmo a 125%),
   14,2px em 1366 e o teto de 18px a partir de 1920. Entre esses pontos a
   escala é contínua — sem saltos de arranjo.

   O que NÃO escala, de propósito: bordas, contorno de foco e linhas finas,
   que em pixel continuam nítidos em qualquer escala.

   Isto não neutraliza o zoom do navegador nem a ampliação do Windows: os dois
   mudam quanto vale 1px para a página, e a escala se recalcula a partir do
   espaço que de fato sobrou — que é o comportamento desejado. */
/* Corpo das listas (2026-09-23): o tamanho que o responsável fixou como
   referência ao revisar Lançar Documentos. Vive aqui, e não no CSS de um
   módulo, porque vale para qualquer lista longa do sistema. */
:root { --doc-corpo: 0.705rem; }
html {
  font-size: clamp(11px, calc(0.694vw + 4.68px), 18px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Regra global de rolagem (pacote pós-migração, 2026-08-30): a página
     em si nunca rola — só .conteudo (verticalmente) e .sidebar
     (verticalmente, só quando o próprio menu ultrapassa a altura)
     rolam, cada um dentro da própria caixa. Cabeçalho e menu lateral
     ficam sempre visíveis, sem depender de rolar a página inteira. */
  overflow: hidden;
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--cinza-texto);
  background: var(--branco);
}

a { color: var(--verde); }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

/* Link "pular para o conteúdo" — invisível até receber foco por teclado. */
.pular-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--verde-escuro);
  color: var(--branco);
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.9em;
  z-index: 100;
  border-radius: 0 0 6px 0;
  text-decoration: none;
}
.pular-conteudo:focus {
  left: 0;
}

/* ---------------------------------------------------------------------
   Layout raiz: cabeçalho fixo + (sidebar | conteúdo)
   --------------------------------------------------------------------- */
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  /* (T022, 18/10/2026) `clip` em vez de só `hidden`: um contêiner com
     `hidden` ainda é rolado pelo navegador ao seguir uma âncora (#secao-…),
     e isso empurrava o cabeçalho da página para cima. `clip` não rola nunca;
     quem rola continua sendo só a área de conteúdo. */
  overflow: clip;
}

/* ---------------------------------------------------------------------
   Cabeçalho
   --------------------------------------------------------------------- */
.cabecalho {
  min-height: var(--altura-cabecalho);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 8px 16px;
  border-bottom: 1px solid var(--cinza-borda);
  background: var(--branco);
  gap: 12px;
}

.cabecalho-logos {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-espaco {
  width: 34px;
  height: 34px;
  border-radius: var(--raio-pequeno);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68em;
  font-weight: 700;
  color: var(--cinza-claro);
  background: var(--cinza-fundo);
  border: 1px dashed var(--cinza-borda);
  flex-shrink: 0;
}
.logo-espaco.logo-preenchida {
  background: var(--verde);
  color: var(--branco);
  border-style: solid;
  border-color: var(--verde-escuro);
}

/* Identificação do CLIENTE no alto das telas internas (D133, revisão da
   identidade visual): o canto superior esquerdo passou a ser do cliente
   — nome da Organização, já que não existe logo de cliente cadastrado.
   A marca do produto não se repete aqui; ela aparece como marca d'água
   discreta no pé do menu lateral. Nome longo é truncado em vez de
   empurrar o cabeçalho: continua legível e não quebra o layout. */
/* Logotipo do cliente ao lado do nome, no canto superior esquerdo das telas
   internas (D285, T002). Altura fixa, largura limitada, sem deformar
   (object-fit: contain, largura automática); no celular, menor. */
.cabecalho-logo-cliente {
  height: 34px;
  max-width: 120px;
  width: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 600px) {
  .cabecalho-logo-cliente { height: 26px; max-width: 72px; }
}
/* (23/10/2026, pedido do responsável) Com logotipo, só o logotipo, centralizado acima do menu lateral (a largura vem
   do menu, base.js); o nome sai da vista e continua para o leitor de tela. Sem logotipo, o nome como antes.
   *Antes: o logotipo e o nome, lado a lado, à esquerda.* */
.cabecalho-logo-cliente + .cabecalho-nome-cliente { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (min-width: 821px) {
  .cabecalho-logos:has(> .cabecalho-logo-cliente) { box-sizing: border-box; justify-content: center;
    margin-left: -16px; width: var(--sidebar-largura-atual, var(--largura-sidebar)); padding: 0 6px; }
  /* (23/10/2026, pedido do responsável) O maior possível sem aumentar o cabeçalho: a altura toda dele, menos 2 px
     em cima e embaixo (as margens negativas anulam o espaçamento interno de 8 px). Com o menu recolhido, a largura
     do menu limita e o logotipo encolhe sem deformar. */
  .cabecalho-logos > .cabecalho-logo-cliente { max-width: 100%; height: calc(var(--altura-cabecalho) - 4px);
    margin: -6px 0; }
  /* (23/10/2026, pedido do responsável) A data e o relógio mais à esquerda, alinhados com o título da tela: começam
     onde começa a área da tela (a largura do menu + os 3 px da divisória + a folga de 28 px; o vão de 12 px do
     cabeçalho já conta). */
  .cabecalho:has(.cabecalho-logos > .cabecalho-logo-cliente) > .cabecalho-relogio { margin-left: 19px;
    margin-right: auto; }
}

.cabecalho-nome-cliente {
  font-size: 0.95em;
  font-weight: 700;
  color: var(--verde-escuro);
  margin-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}

/* Marca d'água do produto (D133): pequena, de baixa opacidade, no PÉ do
   menu lateral — dentro do fluxo do menu, então nunca cobre dado nem
   controle. Usa o arquivo com canal alfa de verdade, e por isso não
   forma retângulo branco sobre nenhum fundo. `height: auto` preserva a
   proporção do arquivo aprovado. */
.marca-agua {
  margin-top: auto;
  padding: 20px 14px 8px;
}
.marca-agua img {
  display: block;
  width: 96px;
  max-width: 100%;
  height: auto;
  opacity: 0.38;
}
.sidebar.recolhida .marca-agua { display: none; }
/* Telas sem menu lateral (seleção do modo demonstração): mesma marca,
   mesmo canto inferior esquerdo, no fim do conteúdo. */
.marca-agua-solta { margin-top: 28px; padding: 0; }
.marca-agua-solta img { width: 86px; }

.cabecalho-usuario {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Aviso de modo demonstração — elemento visualmente separado da
   identificação do usuário (nunca fundido na mesma frase), Seção 3. */
.modo-demo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.badge-demo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72em;
  background: var(--amarelo-fundo);
  color: var(--amarelo-texto);
  border: 1px solid var(--amarelo-borda);
  font-weight: 700;
  white-space: nowrap;
}
.modo-demo-texto {
  font-size: 0.68em;
  color: var(--cinza-claro);
}

.usuario-info {
  /* D156: nome em cima e perfil embaixo, centralizados entre si, com um
     respiro antes do botão SAIR. */
  text-align: center;
  line-height: 1.25;
  margin-right: 10px;
}
.usuario-nome {
  font-size: 0.86em;
  font-weight: 600;
}
.usuario-perfil {
  font-size: 0.72em;
  color: var(--cinza-medio);
}

.link-trocar-usuario {
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Corpo: sidebar + conteúdo
   --------------------------------------------------------------------- */
.corpo {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  overflow: clip; /* (T022) não rola ao seguir âncora — ver .layout */
}

/* ---------------------------------------------------------------------
   Barra lateral
   --------------------------------------------------------------------- */
.sidebar {
  width: var(--largura-sidebar);
  flex-shrink: 0;
  /* Coluna flexível só para a marca d'água poder ficar no pé (D133):
     `margin-top: auto` nela empurra-a para baixo quando sobra espaço.
     Os itens do menu continuam em bloco, ocupando a largura toda. */
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--cinza-borda);
  background: var(--branco);
  padding: 10px 0;
  transition: width 0.15s ease;
  overflow-x: hidden;
  /* Rolagem própria, só quando o conteúdo do menu ultrapassar a altura
     disponível — nunca força rolagem da página inteira junto. */
  overflow-y: auto;
}
.sidebar.recolhida {
  width: var(--largura-sidebar-recolhida);
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* Divisória arrastável do menu lateral (Pacote G) — clique recolhe/
   expande (mesma ação do botão "Recolher/Expandir menu"), arraste
   ajusta a largura entre um mínimo e um máximo seguros. Semântica de
   separador (role="separator", teclado com as setas), sempre com
   indicador visual de que pode ser arrastada. Em telas estreitas
   (mesmo ponto de corte do JS, 820px) some — lá o controle é só o
   botão, sem exigir arraste. */
.sidebar-resize {
  position: relative;
  flex-shrink: 0;
  width: 6px;
  margin-left: -3px;
  z-index: 5;
  cursor: col-resize;
  border-right: 1px solid var(--cinza-borda);
}
.sidebar-resize:hover,
.sidebar-resize:focus-visible,
.sidebar-resize.arrastando {
  border-right: 2px solid var(--verde);
  outline: none;
}
.sidebar.recolhida + .sidebar-resize { cursor: pointer; }
@media (max-width: 820px) {
  .sidebar-resize { display: none; }
}

.sidebar-alternar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 16px);
  margin: 0 8px 8px;
  padding: 6px 8px;
  background: none;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  font-size: 0.8em;
  color: var(--cinza-medio);
  font-family: inherit;
}
.sidebar-alternar:hover { background: var(--cinza-fundo); }
.sidebar-alternar .icone { font-size: 1.05em; }
.sidebar.recolhida .sidebar-alternar span.rotulo { display: none; }
.sidebar.recolhida .sidebar-alternar { justify-content: center; }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  text-decoration: none;
  color: var(--cinza-texto);
  /* (23/10/2026, pedido do responsável) Letras menores no menu lateral. *Antes: 0,88em.* */
  font-size: 0.78em;
  font-weight: 500;
  border-left: 3px solid transparent;
  white-space: nowrap;
  position: relative;
}
.sidebar-item:hover { background: var(--cinza-fundo); }
.sidebar-item .icone {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-item .icone svg { width: 19px; height: 19px; }
.sidebar.recolhida .sidebar-item span.rotulo { display: none; }
.sidebar.recolhida .sidebar-item { justify-content: center; padding: 9px 0; }

/* Linha de um item do menu: um wrapper transparente do link (a seta de
   expansão saiu com a árvore no fechamento da Fase 01, 2026-09-15). */
.sidebar-item-linha { display: flex; align-items: center; }
.sidebar-item-linha > .sidebar-item { flex: 1; min-width: 0; }
.sidebar-item[aria-current="page"] {
  background: var(--verde-claro-fundo);
  border-left-color: var(--verde);
  font-weight: 700;
  color: var(--verde-escuro);
}
.sidebar-item[aria-current="page"]::after {
  content: "●";
  font-size: 0.55em;
  margin-left: auto;
  color: var(--verde);
}
.sidebar.recolhida .sidebar-item[aria-current="page"]::after { display: none; }

/* Tooltip do modo recolhido — acessível por mouse, teclado e toque.
   Sempre fora do fluxo e com opacidade 0 por padrão (não só quando
   recolhida) — nunca aparece como texto duplicado ao lado do rótulo no
   modo expandido; só fica visível quando a barra está recolhida E o
   item recebe hover/foco.
   `display: none` em `.sidebar:not(.recolhida)` (achado da finalização
   do módulo Sistema, 2026-08-30): mesmo com opacity:0 e fora do fluxo
   (position:absolute), o span ainda contava para a largura ROLÁVEL do
   `.sidebar` (overflow-x:hidden não impede scrollLeft por foco/script,
   só esconde a barra) — focar a nova seta de "Sistema" podia empurrar
   esse scroll e cortar visualmente o próprio texto do menu. No modo
   expandido a tooltip nunca precisa existir de verdade; display:none
   tira por completo do cálculo de layout, sem afetar em nada o
   comportamento (fade por opacity) já usado no modo recolhido. */
.sidebar:not(.recolhida) .sidebar-item .tooltip-recolhido { display: none; }
.sidebar-item .tooltip-recolhido {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--cinza-texto);
  color: var(--branco);
  font-size: 0.78em;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: var(--raio-pequeno);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
  /* Acima do cabecalho e do conteudo: com posicao de janela (ver base.js) a
     dica deixa de ser recortada pela barra, mas passa a disputar camada com
     o resto da pagina. */
  z-index: 60;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-item .tooltip-recolhido { transition: none; }
}
.sidebar.recolhida .sidebar-item:hover .tooltip-recolhido,
.sidebar.recolhida .sidebar-item:focus-visible .tooltip-recolhido {
  opacity: 1;
}

/* V.5B.3 — módulo Sistema como "seção aberta" (usuário numa página
   interna, ex.: Organização/Culturas): mesmo destaque à esquerda do
   item ativo, mas sem o marcador "●" nem aria-current — quem leva
   aria-current é o item do submenu (nunca dois por vez). */
.sidebar-item-secao-ativa {
  background: var(--verde-claro-fundo);
  border-left-color: var(--verde);
  color: var(--verde-escuro);
}

/* ---------------------------------------------------------------------
   Área de conteúdo
   --------------------------------------------------------------------- */
.conteudo {
  flex: 1;
  min-width: 0;
  padding: 20px 28px 60px;
  /* Única rolagem vertical do sistema (regra global, pacote pós-migração
     2026-08-30) — nunca rolagem horizontal aqui; um elemento específico
     que realmente precise (ex.: uma tabela larga) rola só internamente,
     na própria caixa (.tabela-wrap), nunca a área inteira de conteúdo. */
  overflow-y: auto;
  overflow-x: hidden;
}

.breadcrumb {
  font-size: 0.82em;
  color: var(--cinza-medio);
  margin-bottom: 6px;
}
.breadcrumb .atual { color: var(--verde-escuro); font-weight: 700; }
.breadcrumb a { color: var(--cinza-medio); text-decoration: none; }
.breadcrumb a:hover { color: var(--verde-escuro); text-decoration: underline; }
.breadcrumb-separador { margin: 0 3px; color: var(--cinza-claro); }

.titulo-pagina {
  font-size: 1.5em;
  font-weight: 700;
  margin: 2px 0 4px;
  color: var(--cinza-texto);
}

.texto-auxiliar {
  color: var(--cinza-medio);
  font-size: 0.9em;
  margin: 0 0 14px;
  max-width: 68ch;
}

/* Texto de erro/aviso grave inline (fora de uma mensagem flash) —
   Preparação de novo Ciclo (Pacote F) e qualquer outro texto de
   advertência pontual dentro do conteúdo, nunca só cor (o próprio
   texto já é claro). */
.texto-perigo { color: var(--vermelho-texto); font-weight: 600; }

/* Campo de edição inline numa célula de tabela — Preparação de novo
   Ciclo (Pacote F): ocupa a célula inteira, mesmo padrão dos demais
   campos de texto do sistema. */
.pc-prep-campo[hidden] { display: none; }
.pc-prep-campo {
  display: block;
  width: 100%;
  padding: 5px 8px;
  font: inherit;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
}

/* ---------------------------------------------------------------------
   Mensagens (flash do servidor + indicador de estouro)
   --------------------------------------------------------------------- */
.msg {
  padding: 9px 14px;
  border-radius: var(--raio-pequeno);
  font-size: 0.88em;
  margin-bottom: 14px;
  font-weight: 600;
}
.msg-sucesso { background: #e6f4ea; border: 1px solid var(--verde); color: var(--verde-escuro); }
.msg-erro { background: var(--vermelho-fundo); border: 1px solid var(--vermelho-forte); color: var(--vermelho-texto); }
/* Terceira variante, prevista para o item 1.12. Existiam só sucesso
   (verde) e erro (vermelho), e faltava o meio-termo: o aviso que pede
   atenção sem afirmar que algo falhou. A ausência dela já tinha
   obrigado um contorno — o diagnóstico de envios sem desfecho, na tela
   da Organização, precisou virar um quadro neutro porque pintá-lo de
   vermelho faria a cor contradizer um texto que diz "isto não é uma
   falha". Âmbar, e não vermelho, é o que distingue as duas coisas. */
.msg-atencao { background: #fdf6e3; border: 1px solid #d9b45b; color: #6b5310; }

/* ---------------------------------------------------------------------
   Faixa de contexto (V.5B.6A) — identifica Fazenda/Ciclo (ou outro par
   de referência) no topo da tela, com a ação de trocar bem ao lado.
   --------------------------------------------------------------------- */
.faixa-contexto {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--cinza-fundo);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  padding: 10px 14px;
  margin: 14px 0;
}
.faixa-contexto .form-ciclo-referencia { display: inline-flex; align-items: center; gap: 8px; }
.faixa-contexto .form-ciclo-referencia label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88em; }
/* AV-12 — contexto do rateio na árvore do Plano de Contas (só nesta faixa)
   e recuo das Culturas na consulta rápida. */
.pc-contexto-rateio .form-ciclo-referencia { flex-wrap: wrap; }
.pc-contexto-rateio .form-ciclo-referencia,
.pc-contexto-rateio .form-ciclo-referencia label { max-width: 100%; min-width: 0; }
.pc-contexto-rateio select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.pc-consulta-rateio-cultura { padding-left: 1.5em; }

/* ---------------------------------------------------------------------
   Cartões (indicadores)
   --------------------------------------------------------------------- */
.cartoes {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cartao {
  flex: 1;
  min-width: 190px;
  background: var(--cinza-fundo);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 16px 18px;
}
.cartao .rotulo { font-size: 0.8em; color: var(--cinza-medio); margin-bottom: 6px; }
.cartao .valor { font-size: 1.6em; font-weight: 700; }
.cartao.alerta { background: var(--vermelho-fundo); border-color: var(--vermelho-borda); }
.cartao.alerta .valor { color: var(--vermelho-texto); }

/* Variante navegável — mesmo cartão usado como link (ex.: hub de uma
   Fazenda: "Dados cadastrais"/"Culturas/Atividades"), pacote pós-
   migração, 2026-08-30. */
a.cartao {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.cartao:hover { background: var(--branco); border-color: var(--verde); }
a.cartao strong { display: block; color: var(--verde-escuro); margin-bottom: 4px; font-size: 1.05em; }

/* Cartão indisponível (pacote "Cadastrar Fazendas", 2026-08-30) — ex.:
   "Cadastro das Culturas e Áreas (ha)" antes de salvar o Cadastro
   Fiscal. Nunca é um link (sem href/navegação); a explicação é o
   mesmo componente .pc-tooltip-host/.pc-tooltip já usado em toda a
   aplicação — acessível via mouse, teclado (foco) e toque, nunca um
   modal, nunca cobre outro elemento. */
.cartao-indisponivel {
  cursor: default;
  opacity: 0.65;
}
.cartao-indisponivel strong { color: var(--cinza-medio); }

/* Grade de cartões-módulo (pacote de organização visual, 2026-08-30) —
   páginas centrais de entrada por cartões (Cadastros Primários; Plano
   de Contas): sempre 2 colunas com espaço, 1 coluna em telas estreitas
   — grid explícito (não o flex auto-wrap de .cartoes, cujo número de
   colunas varia com a largura de cada cartão). Cartão inteiro clicável
   (a.cartao já garante isso); fundo/borda claros como qualquer
   .cartao, só o hover muda (verde-claro, nunca o branco+borda verde
   padrão de .cartao — pedido explícito, para não parecer o mesmo
   destaque forte de item ativo). Foco visível vem de graça da regra
   global a:focus-visible (topo do arquivo) — nenhuma regra extra
   aqui. */
.cartoes-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 620px) {
  .cartoes-grade { grid-template-columns: 1fr; }
}
a.cartao.cartao-modulo:hover { background: var(--verde-claro-fundo); border-color: var(--verde); }

/* Cartões compactos (2026-09-16: Gestão Patrimonial e Perfis e Autorizações)
   — o mesmo desenho dos cartões de assunto de Poderes do Perfil (D157):
   pequenos, sem texto aberto, distribuídos pela largura disponível. A
   explicação fica no ⓘ. Em Gestão Patrimonial o cartão tem desenho próprio e
   áreas separadas (.cartao-patrimonio, abaixo). */
.cartoes-compactos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cartao-compacto {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  box-sizing: border-box;
  height: 100%;
  padding: 9px 12px;
  background: var(--cinza-fundo);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  color: var(--cinza-texto);
}
.cartao-compacto-titulo { font-weight: 700; font-size: 0.95em; color: var(--verde-escuro); }
/* Sem z-index: um z-index aqui prenderia a dica numa camada abaixo do cabeçalho
   (medido em 2026-09-16). Posicionado e depois do link no documento, o ⓘ já fica
   por cima da camada ::after e recebe o clique. */
.cartao-compacto .pc-icone-explicacao { position: relative; }
.cartao-compacto-acoes { margin-left: auto; }
.cartao-compacto-acoes .botao-secundario { padding-top: 4px; padding-bottom: 4px; }
/* Cartões de Gestão Patrimonial (acabamento visual, 2026-09-17) — só dentro
   de .cartoes-patrimonio; os cartões compactos de outros módulos (Perfis)
   não mudam. Fundo cinza neutro mais escuro que o da página, desenho acima do
   nome, os dois centrados no cartão. Três colunas que não se sobrepõem: faixa
   vazia | área principal (desenho e nome: o link, quando há destino) | ⓘ no
   alto e lápis embaixo. A faixa da esquerda tem a largura da direita, e é
   isso que mantém o nome centrado no cartão. Sem camada por cima de camada:
   cada clique tem uma área só. Altura mínima comum; nome longo quebra linha e
   só a fileira dele cresce. */
.cartoes-compactos.cartoes-patrimonio {
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}
.cartao-compacto.cartao-patrimonio {
  --pt-fundo: #e3e5e3;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 26px;
  align-items: stretch;
  gap: 0;
  min-height: 7.75rem;
  padding: 5px 3px;
  background: var(--pt-fundo);
  border-color: #cfd3cf;
}
.cartao-patrimonio-principal {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 2px;
  border-radius: var(--raio-pequeno);
  color: var(--verde-escuro);
  text-align: center;
  text-decoration: none;
}
.cartao-patrimonio .pt-icone { width: 50px; height: 50px; flex: none; color: var(--verde-escuro); }
/* Desenho enviado pelo Gestor Master (D184): ocupa a mesma caixa do desenho
   do sistema e cabe inteiro nela, sem cortar nem esticar a imagem. */
.cartao-patrimonio .pt-icone-enviado { object-fit: contain; }
/* Envio do desenho no formulário: campo discreto e prévia ao lado, para a
   escolha ser conferida antes de salvar sem tomar espaço da tela. */
.gp-desenho { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.gp-desenho > label { flex: 1 1 260px; }
.gp-desenho input[type="file"] { font-size: 0.85rem; }
.gp-desenho-previa { margin: 0; display: flex; align-items: center; gap: 10px; }
.gp-desenho-previa img,
.gp-desenho-previa .pt-icone {
  width: 50px; height: 50px; object-fit: contain; color: var(--verde-escuro);
  border: 1px solid var(--cinza-borda, #c9cfc9); border-radius: 6px; padding: 3px; background: #fff;
}
.gp-desenho-previa figcaption { font-size: 0.78rem; max-width: 22ch; }
/* Figura da frente esconde o traço da de trás com a cor do fundo do cartão. */
.cartao-patrimonio .pt-mascara { fill: var(--pt-fundo); }
.cartao-patrimonio .cartao-compacto-titulo {
  font-size: 0.8em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
a.cartao-patrimonio-principal:hover .cartao-compacto-titulo { text-decoration: underline; }
.cartao-compacto.cartao-patrimonio:has(a.cartao-patrimonio-principal:hover) { --pt-fundo: #d9e4d9; border-color: var(--verde); }
.cartao-patrimonio-principal:focus-visible { outline: 3px solid #1a73e8; outline-offset: 1px; }
.cartao-patrimonio-lateral {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
/* ⓘ bem pequeno, com área de clique de 24px; sem z-index (ver acima). */
.cartao-patrimonio .pc-icone-explicacao {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 0.82em;
}
/* Lápis: visível sem passar o mouse, discreto, área de clique de 24px. */
.cartao-patrimonio-editar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: var(--cinza-medio);
}
.cartao-patrimonio-editar svg { width: 14px; height: 14px; }
.cartao-patrimonio-editar:hover { color: var(--verde-escuro); background: rgba(255, 255, 255, 0.65); }
.cartao-patrimonio-editar:focus-visible { outline: 3px solid #1a73e8; outline-offset: 1px; }
/* Lixeira da edição de Grupo/Subgrupo: botão só com o desenho, vermelho
   discreto (contorno), entre SALVAR e VOLTAR. */
.pagina-topo-acoes .gp-lixeira {
  min-width: 38px;
  padding-left: 9px;
  padding-right: 9px;
  color: var(--vermelho-texto);
  border-color: var(--vermelho-borda);
}
.pagina-topo-acoes .gp-lixeira svg { width: 16px; height: 16px; display: block; }
.pagina-topo-acoes .gp-lixeira:hover { background: var(--vermelho-fundo); border-color: var(--vermelho-forte); }
/* Nome próprio do módulo: o título de página é MAIÚSCULO por estilo, mas
   "Gestão Patrimonial" é exibido exatamente como escrito. */
.pagina-topo .titulo-pagina.titulo-como-escrito { text-transform: none; }
.cartao-modulo-icone {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: var(--verde-escuro);
  margin-bottom: 8px;
}
.cartao-modulo-icone svg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------------
   Subtítulo de seção (dentro do conteúdo — ex.: "Fazendas"/"Atividades"
   no Dashboard) — nível abaixo do título da página.
   --------------------------------------------------------------------- */
.subtitulo-secao {
  font-size: 1.05em;
  font-weight: 700;
  margin: 22px 0 10px;
  color: var(--cinza-texto);
}

/* ---------------------------------------------------------------------
   Lista de opções (módulo Sistema) — ícone + nome + descrição curta,
   em linha quando houver espaço; nunca um botão de ação (são só links).
   --------------------------------------------------------------------- */
.lista-opcoes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0;
}
.opcao-sistema {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  background: var(--cinza-fundo);
}
.opcao-sistema:hover { border-color: var(--verde); background: var(--verde-claro-fundo); }
.opcao-sistema-icone {
  flex-shrink: 0;
  color: var(--verde-escuro);
  display: inline-flex;
}
.opcao-sistema-icone svg { width: 22px; height: 22px; }
.opcao-sistema-nome {
  font-weight: 700;
  color: var(--verde-escuro);
  flex: 0 0 auto;
}
.opcao-sistema-desc {
  color: var(--cinza-medio);
  font-size: 0.88em;
  flex: 1 1 200px;
}
@media (max-width: 560px) {
  .opcao-sistema { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------------------------------------------------------------------
   Tabela (ex.: Fazendas/Atividades no Dashboard)
   --------------------------------------------------------------------- */
/* Regra global de rolagem (2026-08-30): só horizontal, nunca vertical —
   antes, "overflow-x: auto" sozinho fazia o navegador assumir
   "overflow-y: auto" também (regra do CSS: quando um eixo não é
   "visible", o outro deixa de ser "visible" e também vira "auto",
   mesmo pedindo "overflow-y: visible" explicitamente — o valor
   computado ainda vira "auto", é uma regra da especificação, não um
   bug deste código). Como "auto" só mostra barra quando o conteúdo é
   mesmo mais alto que a caixa, o efeito colateral concreto era outro:
   a própria barra de rolagem HORIZONTAL, quando aparecia, consumia
   ~16px de altura útil da caixa (comportamento normal do navegador),
   deixando a área visível mais baixa que as linhas da tabela — e essa
   diferença de poucos pixels bastava para also acionar uma barra
   vertical indevida. padding-bottom reserva esse espaço com folga, para
   a barra horizontal nunca "roubar" altura das linhas; resultado
   prático: nunca mais aparece rolagem vertical dentro de uma tabela,
   mesmo quando a rolagem horizontal continua sendo necessária como
   último recurso (ver auditoria por tela em
   06_Diretrizes_e_Backlog_Visual.md). */
.tabela-wrap { overflow-x: auto; padding-bottom: 20px; }
/* Dica oculta (posição absoluta, até 260px) não pode inflar a área rolável da
   tabela: sem isto aparece barra lateral com a tabela inteira cabendo na tela
   (medido em Usuários e em Fazendas). Ela entra no layout quando é mostrada. */
.tabela-wrap .pc-tooltip-host:not(.pc-tooltip-aberto):not(:focus-visible) > .pc-tooltip,
.tabela-wrap .pc-tooltip-host.pc-tooltip-fechado > .pc-tooltip { display: none; }
table.tabela {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88em;
}
table.tabela th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--cinza-borda);
  color: var(--cinza-medio);
  font-size: 0.85em;
  font-weight: 700;
  white-space: nowrap;
}
table.tabela td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--cinza-borda);
  vertical-align: middle;
}
table.tabela tr:last-child td { border-bottom: none; }
table.tabela td.tabela-acoes { white-space: nowrap; }
table.tabela td.tabela-acoes a,
table.tabela td.tabela-acoes form { display: inline-block; margin-right: 10px; }
table.tabela td.tabela-acoes form:last-child,
table.tabela td.tabela-acoes a:last-child { margin-right: 0; }

/* Tabela de Fazendas (correção pontual, 2026-08-30, tela isolada —
   não afeta .tabela-wrap/.tabela em nenhuma outra tela): nunca precisa
   de rolagem interna, nem horizontal nem vertical, em nenhuma largura.
   .tabela-wrap sozinho tem overflow-x:auto (regra global de rolagem);
   aqui a rolagem interna é desativada por completo — a tabela ocupa a
   largura disponível e a coluna Ações passa a quebrar linha (em vez de
   nowrap) quando os botões não cabem lado a lado. A única rolagem
   passa a ser a da área central inteira da página (.conteudo), como em
   qualquer outra tela; o menu lateral continua com rolagem própria e
   independente. */
.tabela-wrap.tabela-wrap-fazendas { overflow: visible; padding-bottom: 0; }
table.tabela-fazendas td.tabela-acoes { white-space: normal; }

/* Tabela de Cadastro das Culturas e Áreas (ha) — mesma correção pontual
   acima (2026-08-30, correção posterior), mesmo motivo: `.tabela-wrap`
   sozinho tem overflow-x:auto (regra global de rolagem), o que —
   quando este contêiner acaba esticado pelo layout em flex da área
   central — faz o navegador computar overflow-y como auto também
   (comportamento padrão do CSS quando só um eixo é "visible"),
   abrindo uma barra de rolagem interna vertical minúscula na tabela em
   vez de deixar a tabela crescer e a página inteira (.conteudo) rolar,
   como em qualquer outra tela. Escopado só a esta tabela — não afeta
   .tabela-wrap em nenhuma outra tela. */
.tabela-wrap.tabela-wrap-culturas-fazenda { overflow: visible; padding-bottom: 0; }

/* Tabela de Cadastrar Novo Ciclo — mesma correção pontual acima
   (2026-08-30, correção posterior), mesmo motivo. Escopado só a esta
   tabela — não afeta .tabela-wrap em nenhuma outra tela. */
.tabela-wrap.tabela-wrap-ciclos { overflow: visible; padding-bottom: 0; }
/* D156: com zoom de 125% e menu aberto, os três botões de ação do Ciclo não
   cabiam numa linha e criavam rolagem lateral (medido). Quebram para a linha
   de baixo, como na lista de Fazendas — nenhum botão encolhe nem some. */
.tabela-wrap-ciclos table.tabela td.tabela-acoes { white-space: normal; }
.tabela-wrap-ciclos table.tabela td.tabela-acoes a,
.tabela-wrap-ciclos table.tabela td.tabela-acoes form { margin: 2px 10px 2px 0; }

/* Indicador de situação — nunca só cor (Seção 9 da Diretrizes Visuais);
   sempre com o texto ("Ativa"/"Inativa" etc.) dentro do próprio badge. */
.situacao-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 0.82em;
  font-weight: 600;
}
.situacao-badge.ativa { background: var(--verde-claro-fundo); color: var(--verde-escuro); border: 1px solid var(--verde); }
.situacao-badge.inativa { background: var(--cinza-fundo); color: var(--cinza-medio); border: 1px solid var(--cinza-borda); }

/* Indicador circular de situação (pacote pós-migração, 2026-08-30) —
   substitui o badge com aparência de botão/pílula nas listas onde
   Ativa/Inativa é só informação, nunca uma ação: ponto colorido (nunca
   sozinho — sempre com o texto "Ativa"/"Inativa" ao lado, nunca só
   cor), sem borda/fundo/cursor de botão, tooltip explicando a
   consequência de cada estado (não só repete o nome), focável por
   teclado (tabindex, sem ser link/botão — não deve parecer clicável).
   Mesmo componente em toda tela com esta situação equivalente
   (Fazenda, Cultura, Gleba — Ativa/Inativa "sai de novas operações,
   histórico preservado"); Ciclo (Vigente/Aguardando encerramento/
   Encerrado) tem significado próprio, com 3 estados, e continua com
   .situacao-badge — não é a mesma situação. */
.pc-situacao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88em;
  color: var(--cinza-texto);
  cursor: default;
}
.pc-situacao-ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.pc-situacao-ativa .pc-situacao-ponto { background: var(--verde); }
.pc-situacao-inativa .pc-situacao-ponto { background: var(--vermelho-forte); }

/* Indicador de situação genérico (Lançamentos/Solicitações/Orçamento —
   Pacote B) — mesma ideia do .situacao-badge acima (nunca só cor,
   texto sempre dentro do badge), variante neutra + 2 níveis de alerta
   reaproveitando as cores já usadas em .badge-demo (atenção) e nos
   textos de erro/bloqueio (grave). */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 0.82em;
  font-weight: 600;
  background: var(--cinza-fundo);
  color: var(--cinza-medio);
  border: 1px solid var(--cinza-borda);
  white-space: nowrap;
}
.badge-atencao {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 0.82em;
  font-weight: 600;
  background: var(--amarelo-fundo);
  color: var(--amarelo-texto);
  border: 1px solid var(--amarelo-borda);
}
.badge-grave {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 0.82em;
  font-weight: 600;
  background: var(--vermelho-fundo);
  color: var(--vermelho-texto);
  border: 1px solid var(--vermelho-borda);
}
/* Realce de linha inteira (Orçado × Realizado) — mesmas cores dos badges
   acima, bem mais suaves, só para chamar atenção na varredura visual da
   tabela; o badge na última coluna continua sendo a informação real. */
table.tabela tr.linha-atencao { background: var(--amarelo-fundo); }
table.tabela tr.linha-grave { background: var(--vermelho-fundo); }

/* ---------------------------------------------------------------------
   Formulários (Organização, Culturas — V.5B.3)
   --------------------------------------------------------------------- */
.formulario {
  background: var(--cinza-fundo);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 18px 20px;
  margin: 14px 0;
  max-width: 640px;
}
.formulario-duas-colunas {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr;
  gap: 12px 16px;
  align-items: start;
}
.formulario-duas-colunas label {
  display: contents;
}
.formulario-duas-colunas .rotulo-campo {
  padding-top: 8px;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--cinza-texto);
}
.formulario-duas-colunas .campo-com-ajuda { display: flex; flex-direction: column; gap: 3px; }
.formulario-duas-colunas .acoes-formulario { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .formulario-duas-colunas { grid-template-columns: 1fr; }
  .formulario-duas-colunas .rotulo-campo { padding-top: 0; }
}

.formulario label:not(.formulario-duas-colunas label) {
  display: block;
  margin-bottom: 12px;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--cinza-texto);
}

.formulario input[type="text"],
.formulario input[type="number"],
.formulario input[type="email"],
.formulario input[type="tel"],
.formulario select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 7px 10px;
  font: inherit;
  font-weight: 400;
  color: var(--cinza-texto);
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
}
.formulario input[disabled] { background: var(--cinza-fundo); color: var(--cinza-medio); }

/* Formulário com várias seções e campos lado a lado (Organização —
   ampliação cadastral, 2026-08-30; grade compacta por linha,
   2026-08-30): mais largo que o padrão (até 820px, em vez de 640px)
   por reunir bem mais campos que os formulários simples já
   existentes; .formulario-secao separa blocos por assunto
   (Identificação/Endereço Fiscal/Responsável). Cada
   .formulario-grade-linha é uma grade própria — a proporção de cada
   campo (grade-*) segue a distribuição aprovada (ex.: Logradouro maior
   que Número); em largura intermediária todas caem para 2 colunas
   iguais, em ≤620px para 1 — nenhum campo (nem os "estreitos" como
   Inscrição Estadual/Nome do Responsável) ocupa uma linha inteira
   sozinho em largura normal. Componente reaproveita o
   .formulario/label/input/.ajuda já existentes — só o arranjo em
   grade é novo, nada de CSS de campo duplicado. */
.formulario-largo { max-width: 820px; }
/* Formulário amplo (2026-09-23): para as telas de cadastro com muitos campos,
   que estavam usando menos da metade da largura disponível. A grade de cada
   linha já existe; ela só precisava de espaço. */
.formulario-amplo { max-width: 1240px; font-size: var(--doc-corpo, 0.705rem); }
/* O corpo vem direto da variável: um `inherit` encadeado partia de um
   tamanho já reduzido e chegava menor que a referência. */
.formulario-amplo input, .formulario-amplo select, .formulario-amplo textarea,
.formulario-amplo .campo-rotulo, .formulario-amplo label { font-size: var(--doc-corpo, 0.705rem); }
.formulario-amplo input, .formulario-amplo select { padding: 4px 8px; }
.formulario-secao + .formulario-secao { margin-top: 14px; }
.formulario-secao-titulo {
  margin: 0 0 8px;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  border-bottom: 1px solid var(--cinza-borda);
  padding-bottom: 5px;
}
.formulario-grade-linha {
  display: grid;
  column-gap: 16px;
  align-items: start;
}
.formulario-grade-linha + .formulario-grade-linha { margin-top: 2px; }
.grade-nome-fantasia { grid-template-columns: 1fr 1fr; }
.grade-tipo-doc-ie { grid-template-columns: 25fr 40fr 35fr; }
.grade-logradouro-numero-complemento { grid-template-columns: 50fr 15fr 35fr; }
.grade-cep-bairro-uf-municipio { grid-template-columns: 20fr 30fr 15fr 35fr; }
.grade-responsavel { grid-template-columns: 45fr 25fr 30fr; }
/* Cadastro Fiscal da Fazenda (pacote "Cadastrar Fazendas", 2026-08-30)
   — mesmo componente de grade acima, três linhas próprias: Nome da
   Fazenda + Área total (Área não ocupa espaço excessivo, por isso
   proporção menor); Inscrição Estadual + CNPJ (opcional) lado a lado;
   Estado e Município próximos. Desde D146 (2026-09-13) a antiga linha
   de Responsável/Telefone/E-mail deu lugar a um único contato de texto
   livre — .grade-fazenda-contato, uma coluna só, com a caixa de texto
   na largura inteira e o mesmo acabamento dos campos de uma linha.
   .grade-responsavel continua servindo à Organização. */
.grade-fazenda-nome-area { grid-template-columns: 70fr 30fr; }
.grade-fazenda-ie-cnpj { grid-template-columns: 1fr 1fr; }
.grade-fazenda-uf-municipio { grid-template-columns: 30fr 70fr; }
.grade-fazenda-contato { grid-template-columns: 1fr; }
.formulario .grade-fazenda-contato textarea,
.formulario .pessoa-contato-linha textarea {
  display: block;
  width: 100%;
  min-height: 4.5em;
  margin-top: 4px;
  padding: 7px 10px;
  font: inherit;
  font-weight: 400;
  color: var(--cinza-texto);
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  resize: vertical;
}
/* Largura intermediária: 2 colunas iguais para toda linha, qualquer
   que seja a proporção em largura normal — evita campo isolado
   "sobrando" numa 3ª/4ª coluna estreita demais para o conteúdo. */
@media (max-width: 900px) {
  .grade-nome-fantasia, .grade-tipo-doc-ie, .grade-logradouro-numero-complemento,
  .grade-cep-bairro-uf-municipio, .grade-responsavel,
  .grade-fazenda-nome-area, .grade-fazenda-ie-cnpj, .grade-fazenda-uf-municipio {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .grade-nome-fantasia, .grade-tipo-doc-ie, .grade-logradouro-numero-complemento,
  .grade-cep-bairro-uf-municipio, .grade-responsavel,
  .grade-fazenda-nome-area, .grade-fazenda-ie-cnpj, .grade-fazenda-uf-municipio {
    grid-template-columns: 1fr;
  }
}
/* Espaço vertical reduzido: cada label já tem margin-bottom próprio
   (regra geral de .formulario label, mais abaixo); dentro da grade
   isso já basta como respiro entre linhas — sem duplicar espaçamento. */
.formulario .formulario-grade-linha label { margin-bottom: 6px; }

.ajuda {
  display: block;
  color: var(--cinza-medio);
  font-size: 0.82em;
  margin-top: 3px;
}

/* Rótulo "(opcional)" discreto, dentro da própria linha do rótulo do
   campo — substitui o texto fixo "Opcional." abaixo do campo
   (finalização do módulo Sistema, 2026-08-30, Organização): mesmo
   princípio de não afirmar informação óbvia como frase inteira, só o
   suficiente para diferenciar de um campo obrigatório. */
.rotulo-opcional {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--cinza-claro);
}

/* (D251) Propriedades vinculadas a uma pessoa, com a classificação dela em
   cada uma — "Produtor Rural em terras próprias", "em terras arrendadas",
   "Proprietário de terras". Só nas telas de cadastro: a lista de pessoas, o
   cadastro da pessoa, o Cadastro Fiscal da Fazenda e o Cadastro
   Organizacional. A classificação não é campo; vem do vínculo com a Fazenda. */
.cad-propriedades { list-style: none; margin: 0; padding: 0; }
.cad-propriedades li + li { margin-top: 6px; }
.cad-classificacao { display: block; font-size: 0.85em; font-weight: 400; color: var(--cinza-medio); }
.cad-propriedades-titulo {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--cinza-texto);
}
.cad-propriedades-quadro { margin: 0 0 12px; }
/* Primeiro uso (T001 e T004, 16/10/2026): de onde vêm as pessoas das listas
   do Grupo e da Fazenda, e o caminho para cadastrar a que falta. Ocupa a
   linha inteira da grade, abaixo do campo. */
.org-grupo-orientacao, .fz-papeis-orientacao { grid-column: 1 / -1; margin: 0 0 12px; }
.org-grupo-orientacao .texto-auxiliar, .fz-papeis-orientacao .texto-auxiliar { margin: 0 0 8px; }

/* (D286) O arrendamento na Fazenda: o proprietário da terra com o caminho
   para cadastrá-lo logo abaixo, e os dois anos da vigência lado a lado. */
.fz-proprietario-campo { display: grid; gap: 8px; align-content: start; justify-items: start; }
.fz-proprietario-campo > label { width: 100%; }
.fz-vigencia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
/* (D286) Endereço e contato da pessoa: caixa de texto na largura do campo. */
.pessoa-contato-linha textarea { box-sizing: border-box; }
.org-grupo-como-pessoa { margin: 0 0 12px; }
.org-grupo-como-pessoa > summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }

/* Histórico das alterações do Cadastro Organizacional: seção recolhível,
   fechada ao abrir a tela. O título inteiro — e a seta — abre e recolhe. */
.org-historico-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid var(--cinza-borda);
  padding-bottom: 5px;
}
.org-historico-cabecalho::-webkit-details-marker { display: none; }
.org-historico-cabecalho::before {
  content: "▶";
  font-size: 0.75em;
  color: var(--cinza-medio);
  flex: 0 0 auto;
}
.org-historico[open] > .org-historico-cabecalho::before { content: "▼"; }
.org-historico[open] > .org-historico-cabecalho { margin-bottom: 8px; }
.org-historico-cabecalho .formulario-secao-titulo { margin: 0; border: 0; padding: 0; }
.org-historico-contagem { font-size: 0.8em; color: var(--cinza-claro); }

/* ---------------------------------------------------------------------
   Cabeçalho imóvel e quadro de dados (2026-09-16, revisão da mesma data) —
   a tela tem DUAS áreas. Em cima, o cabeçalho (caminho, título, ajuda,
   VOLTAR, seletores e cadastro), que não se move desde a abertura. Embaixo,
   o quadro de dados, que ocupa o resto da janela e é o único lugar que rola:
   a barra vertical começa abaixo do cabeçalho e pertence só aos registros.
   Nenhuma altura é fixada em pixels — o quadro é o espaço que sobra, e
   se reajusta sozinho ao redimensionar a janela ou recolher o menu.
   Vale para as telas cujo conteúdo tem `.pagina-quadro`; as demais continuam
   com a rolagem única de .conteudo (regra global de 2026-08-30).
   --------------------------------------------------------------------- */
.conteudo:has(> .pagina-quadro) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 10px;
  padding-bottom: 0;
}
.conteudo:has(> .pagina-quadro) > :not(.pagina-quadro) { flex: none; }
.pagina-topo {
  position: relative;
  /* Acima do quadro: a ajuda que abre do cabeçalho passa por cima dos dados. */
  z-index: 20;
  background: var(--branco);
  margin: 0 -28px;
  padding: 8px 28px 10px;
  border-bottom: 1px solid var(--cinza-borda);
}
.pagina-quadro {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  /* Chegar ao fim da lista não passa a rolar a página por fora. */
  overscroll-behavior: contain;
  margin: 0 -28px;
  /* Sem respiro vertical na própria caixa: os nomes das colunas grudam na
     borda de cima e a soma na de baixo, sem fresta por onde as linhas
     apareçam. O respiro fica nos marcadores abaixo, que rolam junto. */
  padding: 0 28px;
  /* Foco por teclado nunca fica escondido atrás dos nomes das colunas nem da
     soma do rodapé: as medidas reais vêm de base.js (initQuadroDados). */
  scroll-padding-top: var(--quadro-topo-fixo, 0px);
  scroll-padding-bottom: var(--quadro-rodape-fixo, 0px);
}
/* Dentro do quadro a tabela não tem caixa própria de rolagem: a rolagem
   vertical E a lateral, quando houver, são do quadro — é o que mantém nomes
   das colunas e dados sempre alinhados, com ou sem barra. */
/* Quadro com tabela começa colado nos nomes das colunas: um respiro antes
   deles faria a linha dos nomes andar alguns pixels até grudar. */
.pagina-quadro:not(:has(thead))::before { content: ""; display: block; height: 10px; }
.pagina-quadro::after { content: ""; display: block; height: 24px; }
.pagina-quadro .tabela-wrap { overflow: visible; padding-bottom: 0; }
/* Número de identificação nunca quebra no meio (medido: "12" virava "1 / 2"
   na lista de Usuários com a tabela ocupando a largura do quadro). */
.pagina-quadro td[data-label="ID"] { white-space: nowrap; }
/* Ajuda ao lado de um subtítulo: o mesmo respiro do ⓘ ao lado do título. */
h2 > .pc-icone-explicacao, .formulario-secao-titulo > .pc-icone-explicacao { margin-left: 8px; font-size: 0.8em; }
/* Dica fechada não ocupa lugar: sem isto, a caixa invisível de uma dica de
   fim de linha alargava o quadro e criava rolagem lateral (medido em 1024 px).
   Ao abrir, base.js a posiciona pela janela. */
.pagina-quadro .pc-tooltip-host:not(.pc-tooltip-aberto):not(:focus-visible) > .pc-tooltip,
.pagina-quadro .pc-tooltip-host.pc-tooltip-fechado > .pc-tooltip { display: none; }
/* (D286, 17/10/2026) O mesmo no cabeçalho da tela: no celular, a dica fechada
   do ⓘ ao lado do título alargava a área principal (Cadastros: 423 px de
   conteúdo em 334), e tocar outro ⓘ fazia a tela correr para o lado. */
.pagina-topo .pc-tooltip-host:not(.pc-tooltip-aberto):not(:focus-visible) > .pc-tooltip,
.pagina-topo .pc-tooltip-host.pc-tooltip-fechado > .pc-tooltip { display: none; }
.pagina-quadro table.tabela { border-collapse: separate; border-spacing: 0; }
/* Nomes das colunas imóveis no alto do quadro, desde a abertura. Bordas
   separadas: com `collapse` o navegador pinta a célula fixa abaixo das
   linhas, e os botões passavam por cima dela (medido em 2026-09-16). */
.pagina-quadro thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--branco);
  box-shadow: inset 0 -2px 0 var(--cinza-borda);
}
/* Soma do rateio sempre à vista, no pé do quadro. */
.pagina-quadro tfoot th,
.pagina-quadro tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--cinza-fundo);
  box-shadow: inset 0 2px 0 var(--cinza-borda);
}
/* Exceção de acessibilidade (base.js marca .quadro-pagina-inteira): só quando
   a janela é tão baixa que, mesmo com o cabeçalho compacto, o quadro não
   mostraria nem os nomes das colunas e dois registros inteiros. Aí a página
   volta a rolar inteira, para nenhum controle ficar inalcançável. */
.conteudo.quadro-pagina-inteira { display: block; overflow-y: auto; }
.conteudo.quadro-pagina-inteira > .pagina-quadro { overflow: visible; }
.pagina-topo-linha {
  display: flex;
  align-items: center;
  /* Título e ajuda juntos à esquerda; as ações vão para a direita pela
     margem automática delas — nunca a ajuda solta na ponta da linha. */
  justify-content: flex-start;
  gap: 8px 12px;
  /* Nunca quebra a linha: um título longo (ex.: Configurar Rateio com zoom de
     125%) quebra o PRÓPRIO texto, e o VOLTAR continua na linha do título. */
  flex-wrap: nowrap;
}
.pagina-topo-linha > * { flex: none; }
.pagina-topo .titulo-pagina {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  /* MAIÚSCULAS por estilo, nunca no texto: o leitor de tela continua
     ouvindo o nome como foi escrito. */
  text-transform: uppercase;
}
.pagina-topo-acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pagina-topo-secao {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 0.9em;
  color: var(--cinza-medio);
}
.pagina-topo-secao .formulario-secao-titulo { margin: 0; }
.pagina-topo .faixa-contexto { margin: 8px 0 0; padding: 6px 12px; gap: 8px 12px; }
.pagina-topo .faixa-contexto .form-ciclo-referencia { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.pagina-topo .faixa-contexto label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.pagina-topo .faixa-contexto select { max-width: 16em; }
.pagina-topo .cartoes { margin: 8px 0 0; gap: 10px; }
.pagina-topo .cartoes .cartao { padding: 8px 12px; }
.pagina-topo .cadastro-progressivo { margin: 0; }
/* Indicador curto de situação, visível no cabeçalho, com o texto longo no ⓘ. */
.pagina-situacao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--cinza-texto);
}
.pagina-situacao-atencao { color: #6b5310; }
/* Situação dentro do formulário (D156 — envio de e-mails): mesma frase curta,
   junto da seção a que se refere. */
.pc-situacao-envio { margin: 4px 0 10px; font-size: 0.92em; }
/* Contexto do rateio em exibição: no máximo duas linhas nas larguras usuais. */
.pc-contexto-compacto {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  margin: 8px 0 0;
  font-size: 0.9em;
}
.pc-contexto-compacto > div { display: inline-flex; gap: 4px; align-items: center; }
.pc-contexto-compacto dt { color: var(--cinza-medio); font-weight: 600; }
.pc-contexto-compacto dt::after { content: ":"; }
.pc-contexto-compacto dd { margin: 0; }
/* Janela baixa: primeiro se tiram espaços do cabeçalho — nunca a letra, que
   acompanha o zoom escolhido por quem usa. */
@media (max-height: 700px) {
  .conteudo:has(> .pagina-quadro) { padding-top: 4px; }
  .conteudo:has(> .pagina-quadro) > .breadcrumb { margin-bottom: 2px; }
  .pagina-topo { padding-top: 4px; padding-bottom: 6px; }
  .pagina-topo-secao { margin-top: 4px; }
  .pagina-topo .faixa-contexto { margin-top: 4px; padding: 4px 10px; }
  .pagina-topo .botao-secundario,
  .pagina-topo button,
  .pagina-topo .cadastro-progressivo-abrir { padding-top: 4px; padding-bottom: 4px; }
  .pagina-topo .cartoes .cartao { padding: 4px 10px; }
  .pagina-quadro::before { height: 6px; }
  .pc-contexto-compacto { margin-top: 4px; }
}
@media (max-width: 820px) {
  .pagina-topo, .pagina-quadro { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
}

/* Formulário em pares (2026-09-23). Antes cada campo ocupava a largura
   inteira do quadro e sobrava metade da tela vazia à direita. */
.formulario-pares {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 10px 20px;
  align-items: start;
  max-width: 980px;
}
.formulario-pares > label { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.formulario-pares > .campo-largura-total { grid-column: 1 / -1; }
.formulario-pares input[type="text"],
.formulario-pares input[type="email"],
.formulario-pares select,
.formulario-pares textarea { width: 100%; }
/* A Justificativa numa linha comprida, como pedido: uma linha de altura, a
   largura toda do quadro. */
.formulario-pares textarea { min-height: 2.2em; resize: vertical; }

/* Ativo/Inativo na linha da Gleba: compactos e discretos, ao lado do
   Editar. A justificativa abre na linha de baixo, com a largura toda. */
.situacao-na-linha { display: inline-flex; gap: 10px; align-items: center; white-space: nowrap;
  margin: 0 6px; font-size: var(--doc-corpo, 0.705rem); }
.situacao-na-linha label { display: inline-flex; gap: 4px; align-items: center; margin: 0;
  font-weight: 400; cursor: pointer; }
.situacao-na-linha input { margin: 0; }
tr.situacao-justificativa > td { background: var(--cinza-fundo); }
tr.situacao-justificativa label { display: flex; flex-direction: column; gap: 3px; margin: 0 0 8px; }
tr.situacao-justificativa input[name="justificativa"] { width: 100%; max-width: 680px; }

/* Contexto numa faixa horizontal: as mesmas informações de antes, sem
   esticar uma tabela de uma coluna pela largura inteira da tela. */
.contexto-compacto { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 10px 0 14px;
  padding: 8px 12px; border: 1px solid var(--cinza-borda); border-radius: var(--raio);
  background: var(--cinza-fundo); font-size: var(--doc-corpo, 0.705rem); }
.contexto-compacto > div { display: flex; flex-direction: column; gap: 1px; }
.contexto-compacto dt { color: var(--cinza-medio); font-weight: 400; }
.contexto-compacto dd { margin: 0; font-weight: 700; }

/* Ação que mora dentro do quadro mas não é gravada pelo SALVAR: separada por
   uma linha fina, para não se confundir com um campo. */
.gleba-subdividir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--cinza-borda); }

.acoes-formulario {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  /* Reorganização responsiva (correção 2026-08-30) — em telas estreitas,
     um item mais largo (ex.: o cadastro progressivo aberto, com um
     formulário inteiro dentro) passa para a linha de baixo em vez de
     forçar rolagem horizontal; pares simples de botões (SALVAR/VOLTAR
     etc.) continuam sempre cabendo numa linha só, nunca quebram. */
  flex-wrap: wrap;
}
/* Cadastro progressivo ao lado de VOLTAR, na mesma linha (correção
   2026-08-30 — Cadastrar Novas Culturas/Cadastrar Novo Ciclo): zera a
   margem vertical própria do .cadastro-progressivo só quando ele é um
   item de .acoes-formulario (o espaçamento entre a linha e o que vem
   antes/depois já é o margin-top do próprio .acoes-formulario). */
.acoes-formulario .cadastro-progressivo { margin: 0; }
/* Posição padronizada do VOLTAR (2026-09-16): sempre à direita da linha de
   ações, em qualquer tela interna. Quem marca é o base.js (initVoltarADireita),
   porque a identificação é pelo texto do botão; sem JavaScript o botão continua
   onde sempre esteve — nada desaparece. */
.acoes-formulario .voltar-direita,
.pp-acoes .voltar-direita { margin-left: auto; }

/* ---------------------------------------------------------------------
   Janela modal real (<dialog>) — Destinar Conta por Cultura (Pacote D).
   Renderiza na camada superior do navegador (fora do fluxo normal do
   documento), nunca desloca a tabela/formulário ao redor; fundo
   escurecido nativo (::backdrop), foco preso dentro dela e Esc
   fechando sozinho — tudo comportamento padrão do elemento <dialog>,
   não simulado. Componente compartilhado — qualquer confirmação em
   janela modal real deve reaproveitar esta mesma classe.
   --------------------------------------------------------------------- */
dialog.pc-modal {
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 18px 20px;
  max-width: min(90vw, 380px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}
dialog.pc-modal::backdrop { background: rgba(0, 0, 0, .45); }
dialog.pc-modal p { margin: 0 0 14px; font-size: 1em; }
/* Modal informativo com lista numerada (correção 2026-09-02, janela
   "Antes de preparar o próximo Ciclo") — primeiro uso de lista dentro
   de um pc-modal; o componente nunca tinha precisado disso antes (só
   confirmações de uma frase). max-height/overflow-y: conteúdo mais
   longo que os modais de confirmação existentes precisa rolar dentro
   da própria caixa em telas baixas, nunca a página por trás. */
dialog.pc-modal { max-height: min(85vh, 520px); overflow-y: auto; }
dialog.pc-modal ol,
dialog.pc-modal ul { margin: 0 0 14px; padding-left: 20px; }
dialog.pc-modal li { margin-bottom: 6px; }
/* flex-wrap (correção 2026-08-30, auditoria de confirmações de
   cancelamento): rótulos mais longos (ex.: "CONFIRMAR CANCELAMENTO")
   podem não caber lado a lado com o botão seguro numa caixa estreita
   (~375px) — sem quebra, os dois estouravam a largura da caixa em vez de
   empilhar. Cada botão continua numa linha só (nowrap já é global); só a
   LINHA quebra quando necessário. Não afeta pares de rótulos curtos
   (ex.: destinar.html), que já cabiam e continuam numa única linha. */
.pc-modal-botoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* Mensagens do servidor (2026-09-16) — classificadas pelo significado.
   Sucesso e informação não abrem faixa: ficam no ⓘ ao lado do título, com
   uma marca discreta até serem lidas (base.js, initMensagens). Erro que pede
   atenção abre o quadro central ATENÇÃO, que só fecha pelo OK (ou Esc) e
   nunca por tempo. O texto continua sendo o mesmo bloco .msg de sempre. */
.pc-mensagens-guardadas { display: none; }
.pc-icone-explicacao.pc-aviso-novo { position: relative; }
.pc-icone-explicacao.pc-aviso-novo::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 2px var(--branco);
}
.pc-tooltip .pc-tooltip-mensagem { display: block; font-weight: 700; margin-bottom: 4px; }
.pc-tooltip .pc-tooltip-mensagem + .pc-tooltip-mensagem { margin-top: -2px; }
.pc-tooltip .pc-tooltip-separador { display: block; border-top: 1px solid rgba(255,255,255,.35); margin: 4px 0; }
dialog.pc-modal.pc-modal-atencao { max-width: min(90vw, 440px); }
dialog.pc-modal-atencao .pc-modal-titulo {
  margin: 0 0 10px;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--vermelho-texto);
}
/* Dentro do quadro a mensagem é texto comum: a faixa colorida saiu. */
dialog.pc-modal-atencao .msg {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 14px;
  font-size: 1em;
  font-weight: 400;
  color: var(--cinza-texto);
}

/* Rateio de Despesas Operacionais/Administrativas — Pacote 2 (D110):
   título de cada etapa e um bloco por Fazenda na Etapa 2, reaproveitando
   os mesmos tokens de cor/borda/raio já usados por .cartao — nunca uma
   paleta nova só para esta tela. */
.pc-rateio-etapa-titulo { margin-top: 28px; margin-bottom: 4px; }
.pc-rateio-fazenda-bloco {
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  background: var(--cinza-fundo);
  padding: 12px 16px 16px;
  margin: 0 0 14px;
  min-width: 0; /* evita que a legend/tabela force o fieldset a estourar a largura do container pai */
}
.pc-rateio-fazenda-bloco legend { font-weight: 700; padding: 0 6px; }
/* .ajuda define display:block explicitamente (acima), o que
   sobrescreve o display:none padrão do atributo `hidden` do próprio
   HTML — mesmo achado já corrigido antes para .pc-prep-campo (Pacote
   F). Os avisos desta tela (Fazenda sem Cultura) usam `hidden` via
   JavaScript para aparecer/desaparecer junto com a Etapa 2 — sem esta
   regra, ficariam sempre visíveis, mesmo com o atributo presente. */
.pc-rateio-fazenda-bloco .ajuda[hidden] { display: none; }

/* ---------------------------------------------------------------------
   Componente global de botão (pacote pós-migração, 2026-08-30) — base
   compartilhada por todas as variações (mesma altura, tipografia,
   borda/raio, preenchimento interno, área mínima de toque ~36px,
   estados hover/foco/pressionado/desabilitado); só cor e ênfase mudam
   por finalidade. Nunca aplicado a links de navegação normais ou a
   itens de breadcrumb — aqueles continuam texto puro, sem esta classe.
   --------------------------------------------------------------------- */
.botao,
.botao-secundario,
.botao-atencao,
.botao-destrutivo,
.formulario button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 700;
  font-size: 0.88em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--raio-pequeno);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
@media (prefers-reduced-motion: reduce) {
  .botao, .botao-secundario, .botao-atencao, .botao-destrutivo,
  .formulario button[type="submit"] { transition: none; }
}

/* Principal — ação primária da tela (Salvar, Confirmar, Lançar...). */
.botao,
.formulario button[type="submit"] {
  color: var(--branco);
  background: var(--verde);
  border-color: var(--verde);
}
.botao:hover,
.formulario button[type="submit"]:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); }

/* Secundária — ação de apoio (Voltar, Cancelar, Editar, Reativar...). */
.botao-secundario {
  color: var(--verde-escuro);
  background: var(--branco);
  border-color: var(--verde);
}
.botao-secundario:hover { background: var(--verde-claro-fundo); }

/* Atenção — muda um estado, reversível, mas vale um segundo olhar
   (Inativar, algumas confirmações de cancelamento). */
.botao-atencao {
  color: var(--amarelo-texto);
  background: var(--amarelo-fundo);
  border-color: var(--amarelo-borda);
}
.botao-atencao:hover { background: var(--branco); border-color: var(--amarelo-texto); }

/* Destrutiva — reservada para ações sem volta fácil (nenhuma no
   sistema hoje é assim de verdade — Cancelar sempre preserva
   histórico — mas o componente fica pronto, para não inventar um
   variante novo se um caso genuíno aparecer). */
.botao-destrutivo {
  color: var(--vermelho-texto);
  background: var(--vermelho-fundo);
  border-color: var(--vermelho-borda);
}
.botao-destrutivo:hover { background: var(--branco); border-color: var(--vermelho-forte); }

/* Inativar e Reativar (2026-09-23, decisão do responsável).
   Inativar em vermelho e Reativar em verde, em todo o sistema. O vermelho
   era reservado ao que não se desfaz; ele passa a marcar "ação forte" —
   inativar continua sendo reversível e não apaga nada. A troca resolve um
   problema real: em telas como a de Fazendas, o amarelo já identificava
   avisos ("Configuração pendente"), e ação e aviso ficavam com a mesma cor
   lado a lado. O amarelo fica para aviso e para ação de atenção que não
   muda situação, como Nova senha. */
/* Os dois papéis na linha: não se excluem, e pelo menos um fica marcado. */
.papeis-na-linha { display: inline-flex; gap: 10px; align-items: center; white-space: nowrap;
  font-size: var(--doc-corpo, 0.705rem); }
.papeis-na-linha label { display: inline-flex; gap: 4px; align-items: center; margin: 0;
  font-weight: 400; cursor: pointer; }
.papeis-na-linha input { margin: 0; }

/* Título de coluna que ordena (2026-09-23). A seta diz qual coluna está
   ordenando e em que sentido — sem ela, a lista muda e não fica claro por
   quê, principalmente ao voltar à tela depois. */
/* O cabecalho PODE quebrar (item 10 do pacote de 2026-09-27). O nowrap
   daqui existia para a seta nao cair sozinha numa linha, mas prendia a
   coluna a largura do titulo inteiro: medido na lista de Documentos, a
   tabela pedia 994px onde havia 921, e a barra horizontal aparecia. A seta
   continua presa a ultima palavra pelo espaco inseparavel do ::after. */
th.ordenavel { cursor: pointer; user-select: none; }
th.ordenavel:hover { color: var(--verde); }
th.ordenavel:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
th.ordenavel::after { content: "\00a0↕"; opacity: 0.35; font-size: 0.9em; }
th.ordenado-crescente::after { content: "\00a0↑"; opacity: 1; color: var(--verde); }
th.ordenado-decrescente::after { content: "\00a0↓"; opacity: 1; color: var(--verde); }

/* Código de cadastro (2026-09-23): 000001, menor, cinza e itálico — o
   mesmo tratamento do nº registro dos documentos. */
.cad-codigo { font-size: var(--doc-corpo, 0.705rem); color: var(--cinza-medio);
  font-style: italic; font-variant-numeric: tabular-nums; white-space: nowrap; }

.botao-inativar {
  color: var(--vermelho-texto);
  background: var(--vermelho-fundo);
  border-color: var(--vermelho-borda);
}
.botao-inativar:hover { background: var(--branco); border-color: var(--vermelho-forte); }
.botao-reativar {
  color: var(--verde);
  background: var(--verde-claro-fundo);
  border-color: var(--verde);
}
.botao-reativar:hover { background: var(--branco); border-color: var(--verde-escuro); }

.botao:active:not(:disabled),
.botao-secundario:active:not(:disabled),
.botao-atencao:active:not(:disabled),
.botao-destrutivo:active:not(:disabled),
.formulario button[type="submit"]:active:not(:disabled) { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .botao:active:not(:disabled), .botao-secundario:active:not(:disabled),
  .botao-atencao:active:not(:disabled), .botao-destrutivo:active:not(:disabled),
  .formulario button[type="submit"]:active:not(:disabled) { transform: none; }
}
.botao:disabled, .botao-secundario:disabled, .botao-atencao:disabled, .botao-destrutivo:disabled,
.formulario button[type="submit"]:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* ---------------------------------------------------------------------
   Cadastro progressivo ("+ Cadastrar..." → revela form → CONFIRMAR/
   Cancelar) — mesmo padrão já usado em Plano de Contas, Ciclo,
   Configuração Operacional e Gleba, agora com aria-expanded, foco no
   primeiro campo ao abrir e Esc para fechar sem gravar (culturas.js).
   --------------------------------------------------------------------- */
.cadastro-progressivo { margin: 18px 0; }
/* Variante "ação discreta de cadastro com +" do componente global de
   botão (mesma base de altura/tipografia/transição das demais — ver
   regra combinada logo acima, junto com .botao/.botao-secundario). */
.cadastro-progressivo-abrir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 700;
  font-size: 0.88em;
  line-height: 1.2;
  text-decoration: none;
  color: var(--verde-escuro);
  background: var(--verde-claro-fundo);
  border: 1px solid var(--verde);
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
@media (prefers-reduced-motion: reduce) { .cadastro-progressivo-abrir { transition: none; } }
.cadastro-progressivo-abrir:active:not(:disabled) { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .cadastro-progressivo-abrir:active:not(:disabled) { transform: none; } }
.cadastro-progressivo-abrir:hover { background: var(--branco); }
.cadastro-progressivo-campos { margin-top: 12px; }
.cadastro-progressivo-campos[hidden] { display: none; }

/* Variante em linha (revelação progressiva sem caixa/fundo) — Ciclos
   ("+ Adicionar próximo Ciclo"), Pacote G: mesmo mecanismo `hidden`
   das demais telas, sem a caixa com fundo/borda usada em
   .cadastro-progressivo-campos (aqui os campos ficam numa linha só,
   ao lado do botão que os revela). */
.cadastro-progressivo-inline { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cadastro-progressivo-inline[hidden] { display: none; }

/* Variante compacta do cadastro progressivo, para uso repetido dentro
   de uma árvore (Plano de Contas) — mesmo mecanismo, botão menor,
   alinhado à esquerda, sem margem vertical grande entre repetições. */
.cadastro-progressivo-compacto { margin: 8px 0; }
.cadastro-progressivo-compacto .cadastro-progressivo-abrir {
  padding: 5px 12px;
  font-size: 0.82em;
}
.cadastro-progressivo-compacto .cadastro-progressivo-campos {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--cinza-fundo);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  max-width: 480px;
}
.cadastro-progressivo-compacto .cadastro-progressivo-campos label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85em;
  font-weight: 600;
}
.cadastro-progressivo-compacto input[type="text"] {
  display: block;
  width: 100%;
  margin-top: 3px;
  padding: 5px 8px;
  font: inherit;
  font-weight: 400;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
}

/* ---------------------------------------------------------------------
   Árvore do Plano de Contas (Custos Diretos — V.5B.5A)
   --------------------------------------------------------------------- */
.pc-arvore { margin-top: 12px; max-width: 900px; }

.pc-nivel-grupo { margin-bottom: 12px; }
/* Grupo nativo nº 1 de Custos Indiretos (D169): linha própria na árvore, com
   o resumo e o caminho para a estrutura de cinco níveis; e o aviso discreto
   enquanto ele ainda não foi criado. */
.pc-nivel-grupo.pc-grupo-nativo > summary.pc-cabecalho .badge { margin-left: 6px; }
.pc-nativo-resumo { padding: 6px 0 0 8px; }
.pc-nativo-resumo p { margin: 0; }
.pc-nativo-pendente { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px;
                      padding: 6px 10px; border: 1px dashed var(--cinza-borda); border-radius: var(--raio-pequeno); }
.pc-nativo-pendente form { margin: 0; }
.pc-nivel-grupo > summary.pc-cabecalho { border-bottom: 1px solid var(--cinza-borda); padding-bottom: 8px; }
.pc-cabecalho {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 7px 0;
}
.pc-cabecalho::-webkit-details-marker { display: none; }
.pc-cabecalho::before {
  content: "▶";
  font-size: 0.75em;
  color: var(--cinza-claro);
  flex: 0 0 auto;
  padding-top: 4px;
}
details[open] > .pc-cabecalho::before { content: "▼"; }

.pc-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.pc-codigo { color: var(--cinza-medio); font-weight: 400; margin-right: 4px; }
.pc-nome-grupo { font-weight: 700; }
.pc-situacao-cancelado {
  color: var(--vermelho-texto);
  font-weight: 600;
  font-size: 0.85em;
  margin-left: 6px;
}

/* Tooltip acessível — mouse (hover), teclado (foco) e leitor de tela
   (aria-label sempre presente, independente do estado visual). Mesmo
   mecanismo já usado no botão de recolher/expandir o menu lateral. */
.pc-tooltip-host { position: relative; }
.pc-tooltip-host > .pc-tooltip {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 30;
  margin-top: 4px;
  width: max-content;
  min-width: 130px;
  max-width: min(260px, calc(100vw - 24px));
  font-size: 0.78em;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  /* Explícito, não herdado — um host com "white-space: nowrap" (ex.:
     .botao-secundario, componente global de botão) senão vazava para
     dentro do tooltip e impedia a quebra de linha, mesmo com
     max-width definido (achado do pacote pós-migração, 2026-08-30,
     item "caixas explicativas sobrepostas"). */
  white-space: normal;
  color: var(--branco);
  background: var(--cinza-texto);
  border-radius: var(--raio-pequeno);
  padding: 5px 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}
@media (prefers-reduced-motion: reduce) {
  /* Sem animação, mas a espera fica: ela é regra de uso, não enfeite. */
  .pc-tooltip-host > .pc-tooltip { transition: opacity 0s ease 0.35s; }
}
/* ABRE POR CLIQUE (2026-09-25, decisão do responsável).

   Passar o mouse deixou de abrir qualquer coisa. Foram três rodadas
   tentando acertar a abertura por passagem — tirar o `:focus-within`, tirar
   o foco por clique, pôr espera de 0,35s —, e a caixa continuava aparecendo
   quando ninguém pedia, na frente de campo e de coluna. O clique acaba com
   a classe inteira do problema: nada aparece sem alguém ter pedido.

   `.pc-tooltip-aberto` é posto pelo JavaScript no clique e retirado quando o
   mouse sai. `:focus-visible` fica para quem navega por teclado — chega por
   TAB, e aí a explicação precisa aparecer sem clique. */
.pc-tooltip-host.pc-tooltip-aberto > .pc-tooltip,
.pc-tooltip-host:focus-visible > .pc-tooltip {
  opacity: 1;
}
/* Fechamento forçado por JavaScript (Esc, rolagem, novo tooltip aberto
   em outro host, navegação) — precisa vencer mesmo :hover/:focus,
   porque nenhum desses eventos por si só "desfaz" o CSS que os
   originou (mover o mouse embora ou perder o foco, sim; apertar Esc
   enquanto o mouse continua parado sobre o controle, não). */
.pc-tooltip-host.pc-tooltip-fechado > .pc-tooltip {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Posicionamento adaptativo (pacote pós-migração, 2026-08-30) —
   substitui a âncora fixa (esquerda/abaixo) por um cálculo em
   JavaScript (initTooltips(), base.js) do espaço realmente livre na
   janela a cada abertura: nunca sai da tela, nunca cobre o próprio
   controle (sempre abre acima OU abaixo, nunca em cima), e evita
   cobrir ações/informações vizinhas quando há outro lado com espaço.
   Sem JavaScript, cai no padrão simples abaixo/à esquerda acima —
   ainda funcional, só sem o ajuste fino. */
.pc-tooltip-host > .pc-tooltip.pc-tooltip-cima {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
}
.pc-tooltip-host > .pc-tooltip.pc-tooltip-esquerda {
  left: auto;
  right: 0;
}

/* Nome clicável — só o Gestor Master vê/usa esta ação; itens
   cancelados nunca renderizam o botão (texto simples), conforme a
   regra de não poder renomear enquanto cancelado. */
.pc-nome-clicavel {
  font: inherit;
  font-weight: inherit;
  color: inherit;
  background: none;
  border: none;
  border-bottom: 1px dashed var(--cinza-claro);
  padding: 0;
  cursor: pointer;
}
.pc-nome-clicavel:hover, .pc-nome-clicavel:focus-visible { border-bottom-color: var(--verde); color: var(--verde-escuro); }

.pc-filhos { margin-left: 20px; padding-left: 12px; border-left: 2px solid var(--cinza-borda); margin-top: 6px; }

/* Redução de poluição visual (2026-08-31, achado durante a validação do
   Pacote 2A) — com algum Subgrupo aberto (nível das Contas visível), os
   cadastros de nível superior ("+ Cadastrar novo Subgrupo" do próprio
   Grupo, "+ Cadastrar novo Grupo" da árvore inteira) somem; "+ Cadastrar
   nova Conta" nunca é afetado (vive dentro do .pc-filhos do próprio
   Subgrupo, que não tem nenhum .pc-nivel-subgrupo como filho direto).
   Puramente visual — nenhuma rota, permissão ou estado de servidor
   muda; os dois botões voltam a aparecer assim que o Subgrupo for
   recolhido (:has() reage ao atributo [open] nativo do <details> em
   tempo real, sem precisar de nenhum JavaScript novo). Mesma regra
   para as 5 Classes, que já compartilham este template/CSS. */
.pc-filhos:has(> .pc-nivel-subgrupo[open]) > .cadastro-progressivo { display: none; }
/* (2026-09-16) O cadastro de Grupo novo passou ao cabeçalho fixo da árvore:
   não precisa mais sumir quando um Subgrupo está aberto — ele nunca fica
   no fim de uma lista longa. */

.pc-linha-conta { padding: 7px 0; border-bottom: 1px solid var(--cinza-borda); }
.pc-linha-conta:last-of-type { border-bottom: none; }

.pc-icone-explicacao {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.05em;
  line-height: 1;
  padding: 0 3px;
  color: var(--verde);
  vertical-align: middle;
}
.pc-icone-explicacao.pc-sem-explicacao { color: var(--cinza-claro); }

/* Padrão do ⓘ (2026-09-19): o balão tem tamanho FIXO e menor, igual em
   qualquer lugar — antes era proporcional ao elemento que o abrigava e
   ficava grande ao lado do título da página. Cada item iniciado por hífen
   fica na própria linha (a quebra vem do texto). Só vale para o ⓘ; os
   balões dos botões e cartões seguem como estão. */
.pc-icone-explicacao > .pc-tooltip {
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: pre-line;
  max-width: min(300px, calc(100vw - 24px));
}

/* Mensagem da última ação (2026-09-19): sucesso e informação ficam num
   sinal próprio ao lado do título — nunca misturados à ajuda do ⓘ —, com a
   mesma marca discreta de "não lida" e sem faixa empurrando a tela. */
.pc-icone-mensagem {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.95em;
  line-height: 1;
  padding: 0 3px;
  color: var(--verde);
  vertical-align: middle;
}
.pc-icone-mensagem > .pc-tooltip { font-size: 0.78rem; line-height: 1.4; max-width: min(300px, calc(100vw - 24px)); }
.pc-icone-mensagem.pc-aviso-novo { position: relative; }
.pc-icone-mensagem.pc-aviso-novo::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 2px var(--branco);
}

/* D102 — ícone de "adicionar Explicação": só Conta, ativa, sem
   Explicação ainda, e só para quem pode editar (Gestor Master, já
   filtrado no template) — visualmente mais discreto que o ícone de
   leitura, para não parecer que já existe algo ali. */
.pc-icone-explicacao-vazia {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.9em;
  line-height: 1;
  padding: 0 3px;
  color: var(--cinza-claro);
  vertical-align: middle;
}
.pc-icone-explicacao-vazia:hover, .pc-icone-explicacao-vazia:focus-visible { color: var(--verde); }

.pc-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.pc-acoes .botao-secundario { font-size: 0.85em; }

/* Formulário de renomear — some por padrão; some o botão do nome
   enquanto o formulário está visível (nunca os dois ao mesmo tempo). */
.pc-rename-form[hidden] { display: none; }
.pc-rename-form { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-rename-input {
  font: inherit;
  font-weight: 700;
  padding: 3px 6px;
  border: 1px solid var(--verde);
  border-radius: var(--raio-pequeno);
  min-width: 160px;
}
/* D102 — campo de Explicação, visível só dentro do formulário de
   renomear de Conta (Grupo/Subgrupo não têm este elemento). */
.pc-rename-explicacao-campo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85em;
  font-weight: 400;
}
.pc-rename-explicacao-input {
  font: inherit;
  font-weight: 400;
  padding: 3px 6px;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  min-width: 220px;
}
.pc-rename-explicacao-contador { color: var(--cinza-claro); font-size: 0.9em; }

/* D105 (sql/33) — campo de Classificação do desembolso, mesmo padrão
   visual do campo de Explicação acima; visível só em Conta. */
.pc-rename-classificacao-campo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85em;
  font-weight: 400;
}
.pc-rename-classificacao-select {
  font: inherit;
  font-weight: 400;
  padding: 3px 6px;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
}
/* Selo Fixo/Variável na árvore — mesma pílula neutra de .badge, só uma
   margem discreta para não colar no ícone de Explicação ao lado. */
.pc-selo-classificacao { margin-left: 2px; }

.pc-rename-acoes[hidden], .pc-rename-confirmacao[hidden] { display: none; }
.pc-rename-acoes, .pc-rename-confirmacao { display: inline-flex; align-items: center; gap: 8px; }
.pc-rename-confirmacao {
  background: var(--cinza-fundo);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  padding: 5px 9px;
  font-size: 0.85em;
}

/* Ações de Cancelar/Reativar/Destinar — mesmo mecanismo de confirmação
   em duas etapas já usado no resto do sistema (<details> nativo,
   acessível por mouse/teclado/toque, sem JavaScript). */
.pc-confirmar-acao { display: inline; }
.pc-confirmar-acao > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
}
.pc-confirmar-acao > summary::-webkit-details-marker { display: none; }
.pc-confirmar-quadro {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--cinza-fundo);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  font-size: 0.85em;
}

@media (max-width: 620px) {
  .pc-linha { gap: 6px; }
  .pc-acoes { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------------
   Responsivo — telas médias/estreitas (768px cai aqui)
   --------------------------------------------------------------------- */
@media (max-width: 820px) {
  .sidebar:not(.recolhida) {
    position: fixed;
    top: var(--altura-cabecalho);
    bottom: 0;
    left: 0;
    z-index: 15;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.12);
  }
  .conteudo { padding: 16px 14px 50px; }
  .cartoes { flex-direction: column; }
  .cartao { min-width: 0; }
  /* Regra global de rolagem — em telas estreitas, cabeçalhos de tabela
     podem quebrar em vez de forçar a coluna a ficar larga; reduz a
     necessidade de rolagem horizontal sem esconder nenhuma informação
     (ver 06_Diretrizes_e_Backlog_Visual.md para a auditoria tela a
     tela). */
  table.tabela th { white-space: normal; }
  table.tabela th, table.tabela td { padding: 7px 8px; }

  /* Tabelas empilhadas em telas estreitas (pacote pós-migração,
     2026-08-30) — para as tabelas que, mesmo com os ajustes acima,
     continuavam precisando de rolagem horizontal (Culturas/Atividades
     por Fazenda, Glebas, Ciclos, Lançamentos): cada linha vira um
     cartão próprio, com rótulo (mesmo texto do cabeçalho da coluna,
     via atributo data-label) ao lado de cada valor — nenhuma coluna
     desaparece, nenhuma fonte encolhe, e a página nunca ganha rolagem
     horizontal própria. Cabeçalho original (<thead>) continua no HTML
     para leitor de tela (position:absolute + clip, nunca display:none
     — que apagaria da árvore de acessibilidade). Componente
     compartilhado: qualquer tabela pode usar, só marcando
     class="tabela tabela-responsiva" e um data-label em cada <td>. */
  .tabela-responsiva thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
  }
  .tabela-responsiva,
  .tabela-responsiva tbody,
  .tabela-responsiva tr,
  .tabela-responsiva td {
    display: block;
    width: 100%;
  }
  .tabela-responsiva tr {
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    margin-bottom: 10px;
    padding: 4px 10px;
  }
  .tabela-responsiva tr:last-child { margin-bottom: 0; }
  .tabela-responsiva td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--cinza-borda);
    text-align: right;
  }
  .tabela-responsiva td:last-child { border-bottom: none; }
  .tabela-responsiva td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 0.82em;
    color: var(--cinza-medio);
    text-align: left;
    flex-shrink: 0;
  }
  .tabela-responsiva td.tabela-acoes {
    justify-content: flex-start;
    flex-wrap: wrap;
    text-align: left;
  }
  .tabela-responsiva td.tabela-acoes::before { display: none; }
}

/* Telas muito estreitas — cabeçalho não pode cortar/sobrepor o nome do
   usuário; a altura passa a se ajustar ao conteúdo, e o nome do sistema
   recolhe primeiro (os 3 espaços de logo continuam legíveis). */
@media (max-width: 480px) {
  .cabecalho-nome-cliente { max-width: 40vw; }
  .usuario-perfil { display: none; }
  .modo-demo-texto { display: none; }
  .logo-espaco { width: 26px; height: 26px; font-size: 0.62em; }
}

/* D114 Pacote 4 — SAIR no cabeçalho é um <button> dentro de um <form>
   POST (encerrar sessão altera estado, então passa por token de
   proteção). Estas regras fazem o botão parecer exatamente o link que
   havia antes, para que nada mude do ponto de vista de quem usa. */
.form-sair { margin: 0; display: inline; }
/* D156: SAIR passa a ser um botão vermelho compacto, texto branco — do tamanho
   do cabeçalho, sem relevo. O foco visível é o do resto do sistema. */
.link-sair {
  font: inherit;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.2;
  color: var(--branco);
  background: var(--vermelho-forte);
  border: 1px solid var(--vermelho-forte);
  border-radius: var(--raio-pequeno);
  padding: 5px 14px;
  cursor: pointer;
  text-decoration: none;
}
.link-sair:hover { background: var(--vermelho-texto); border-color: var(--vermelho-texto); }

/* =====================================================================
   PLANEJAMENTO ORÇAMENTÁRIO — matriz de preenchimento (modelo 2).
   Escopo restrito às classes .orc-*: nenhuma regra global é alterada,
   e nenhuma outra tela muda por causa deste bloco.
   ===================================================================== */
.orc-contexto { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
/* `min-width: 0` nos dois níveis: sem isso o conteúdo de 14 colunas
   empurra os contêineres e quem rola é a PÁGINA — o oposto da regra do
   projeto, que manda a tabela rolar dentro da própria caixa. */
.orc-corpo { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }

/* A lista lateral de Grupos saiu em 2026-09-11 (segunda rodada da
   referência visual): a troca de Grupo passou para a seleção da barra, e
   a largura que a lista ocupava é a que faltava aos doze meses. */

.orc-matriz-area { flex: 1 1 auto; min-width: 0; max-width: 100%; }
/* Totais de CONFERÊNCIA do preenchimento — dois números discretos,
   acima da matriz. Não é painel nem cartão de indicador: é a mesma
   pílula neutra do resto do sistema, com rótulo próprio para que
   ninguém confunda o total do Grupo com o da Classe. */
.orc-totais { display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
              margin-bottom: 8px; }
.orc-total-cartao { display: inline-flex; align-items: baseline; gap: 6px;
                    padding: 4px 10px; border: 1px solid var(--cinza-borda);
                    border-radius: var(--raio-pequeno); background: var(--cinza-fundo); }
.orc-total-rotulo { color: var(--cinza-medio); font-size: 0.85em; }
.orc-total-valor { font-variant-numeric: tabular-nums; }
/* A barra compacta saiu em 2026-09-12: Grupo, pesquisa e o botão de
   sair subiram para as duas linhas do cabeçalho. */
.orc-acoes { display: inline; }

/* A identificação da Conta e o cabeçalho dos meses ficam à vista durante
   a rolagem — é o que a decisão pede, e é o que torna doze colunas
   utilizáveis sem perder de vista de quem é a linha. */
.orc-wrap { max-height: 70vh; overflow: auto; max-width: 100%; }
.orc-matriz thead th { position: sticky; top: 0; z-index: 2; background: #fff; }
/* A identificação da Conta é a única coluna de texto da matriz: ela
   QUEBRA em mais linhas em vez de transbordar. O `white-space: nowrap`
   que .tabela th aplica a todo cabeçalho de linha fazia o nome longo,
   mais o botão do Ciclo anterior e a ajuda, escaparem dos 260px e
   cobrirem o primeiro mês. */
.orc-matriz .orc-col-conta { position: sticky; left: 0; z-index: 1; background: #fff;
                             text-align: left; min-width: var(--orc-col-conta); max-width: var(--orc-col-conta);
                             white-space: normal; overflow-wrap: anywhere; }
/* A segunda coluna fixa começa exatamente onde a primeira termina. */
/* A DIVISÃO entre o que fica parado (Conta + Total do Ciclo) e o que
   rola (setembro a agosto).

   Mora na própria coluna fixa: por isso acompanha a rolagem, e por isso
   se limita à altura da tabela — não há prolongamento pelo espaço vazio
   da página. Como a classe é a mesma no cabeçalho, nas linhas de total,
   nos Subgrupos e nas Contas, ela aparece em todas.

   2px num cinza-esverdeado neutro: a versão de 1px em #cfd6cf ficou
   imperceptível na avaliação. É sombra, e não borda, para não deslocar
   nem duplicar coluna; ela é desenhada FORA da célula, então não cobre
   campo nem o contorno de foco, que a rolagem já mantém a 10px daqui. */
.orc-matriz .orc-col-total { position: sticky; left: var(--orc-col-conta); z-index: 1; background: #fff;
                             min-width: 96px; text-align: right; font-weight: 600;
                             box-shadow: 2px 0 0 #8fa392; }
.orc-matriz thead .orc-col-conta, .orc-matriz thead .orc-col-total { z-index: 3; }
.orc-linha-subgrupo .orc-col-conta, .orc-linha-subgrupo .orc-col-total { background: #f7f9f7; }
.orc-col-mes, .orc-col-total { text-align: right; white-space: nowrap; }
.orc-celula, .orc-soma, .orc-total-linha { text-align: right; }
.orc-valor { width: 88px; text-align: right; border: 1px solid #cfd6cf; border-radius: 4px;
             padding: 3px 5px; font-variant-numeric: tabular-nums; }
.orc-valor:focus { outline: 2px solid #2f6b3f; outline-offset: 1px; }
.orc-somente-leitura, .orc-soma, .orc-total-linha { font-variant-numeric: tabular-nums; }
/* SUBGRUPO — a linha inteira demarcada, discreta mas perceptível:
   fundo neutro do sistema e um traço horizontal acima, que separa um
   Subgrupo do bloco de Contas anterior. A hierarquia fica legível sem
   peso: Classe → Grupo → Subgrupo → Conta. */
.orc-linha-subgrupo { background: var(--cinza-fundo); font-weight: 600; }
.orc-linha-subgrupo th, .orc-linha-subgrupo td { border-top: 2px solid #c4cfc4; }

/* A seta de abrir/recolher: botão de verdade, do tamanho de um alvo de
   toque, sem parecer um botão de ação. */
.orc-abrir { background: none; border: none; padding: 0 6px 0 0; cursor: pointer;
             color: var(--cinza-medio); font-size: 0.9em; line-height: 1; }
.orc-abrir:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 3px; }
.orc-abrir-seta { display: inline-block; min-width: 1em; }

/* AS TRÊS LINHAS DE TOTAL, dentro da matriz e nas mesmas colunas das
   Contas. Elas resumem o que vem ABAIXO, então precisam se distinguir
   das linhas de preenchimento sem virar cartão nem painel. */
.orc-linha-classe, .orc-linha-grupo { font-weight: 700; }
.orc-linha-classe th, .orc-linha-classe td { background: #eef3ee; }
.orc-linha-grupo th, .orc-linha-grupo td { background: #f4f7f4; }
.orc-linha-grupo th, .orc-linha-grupo td { border-bottom: 2px solid #c4cfc4; }
.orc-classe-mes, .orc-grupo-mes { text-align: right; font-variant-numeric: tabular-nums; }
/* O nome do Grupo e o nome curto da Classe QUEBRAM em mais de uma linha:
   com `nowrap` o nome longo era cortado pela largura da coluna, e nome
   cortado é informação escondida. */
.orc-linha-classe .orc-col-conta, .orc-linha-grupo .orc-col-conta {
  white-space: normal; overflow-wrap: anywhere; }
.orc-total-linha { font-weight: 600; }
.orc-codigo { color: #5a6b5a; font-variant-numeric: tabular-nums; margin-right: 6px; }
.orc-anterior, .orc-repetir { margin-left: 8px; background: none; border: none; padding: 0;
                              color: #2f6b3f; text-decoration: underline; cursor: pointer;
                              font-size: 0.85em; }
/* Célula com rascunho ainda não confirmado — sinal discreto, e nunca a
   única informação: a barra de estado diz o mesmo em palavras. */
.orc-pendente { box-shadow: inset 0 0 0 2px #d9b25a; }
.orc-erro { box-shadow: inset 0 0 0 2px #b3452e; }
.orc-linha-anterior td { background: #f4f7f4; font-size: 0.9em; }

/* TELA ESTREITA: doze colunas espremidas seriam ilegíveis. A lista de
   Grupos vira uma faixa rolável no topo, e a matriz continua rolando
   dentro da própria caixa — nunca a página inteira. */
@media (max-width: 820px) {
  .orc-corpo { flex-direction: column; }
  /* As larguras das colunas não são fixadas aqui: quem as define é a
     escala adaptativa, que mede o espaço real e já encolhe as duas
     colunas fixas junto com o resto. Fixá-las de novo aqui desalinharia
     a coluna Total do Ciclo, que gruda exatamente onde a Conta termina. */
}

/* =====================================================================
   PLANEJAMENTO ORÇAMENTÁRIO — referência visual aprovada pelo responsável
   em 2026-09-11 (modelo B ampliado): cabeçalho azul ultramarino,
   Subgrupos verdes, duas primeiras colunas marcadas. Escopo: as classes
   .orc-* e a classe `orc-ampliado`, que só esta tela liga no body.
   ===================================================================== */
.orc-topo, .orc-corpo, .orc-rodape {
  --orc-azul: #14395f;
  --orc-azul-suave: #1f5182;
  --orc-verde-forte: #2c5f2d;
  --orc-verde-suave: #3f7c40;
  --orc-fixa-fundo: #eef2f6;
  --orc-escuro: #23272b;
  --orc-escuro-suave: #333940;
  --orc-col-conta: 240px;
}

/* Cabeçalho: Fazenda à esquerda, identificação ao centro, Ciclo e Classe
   à direita — uma faixa só, para sobrar altura à matriz. */
/* CABEÇALHO EM DUAS LINHAS — desenho pedido pelo responsável em
   2026-09-12. Uma medida de letra só para tudo, e cada linha realmente
   numa linha: rótulo, lista e texto alinhados pela base, sem degraus.

   Linha 1: Fazenda | identificação | sair do modo ampliado.
   Linha 2: Grupo | Classe | Ciclo | pesquisa.

   O formulário de contexto usa `display: contents` para que seus campos
   caiam nas duas linhas da grade sem deixar de ser um formulário. */
.orc-topo { border: 1px solid var(--cinza-borda); border-radius: var(--raio);
            /* Verde bem claro: distingue o cabeçalho principal do resto da
               tela sem competir com a matriz, que é o conteúdo. */
            background: #eef5ee; padding: 6px 12px; margin-bottom: 8px;
            display: grid; align-items: center; gap: 4px 14px;
            grid-template-columns: minmax(190px, auto) minmax(110px, auto)
                                   minmax(110px, auto) minmax(190px, 1fr);
            font-size: 0.8rem; color: var(--cinza-medio); }
.orc-topo-forma { display: contents; }
.orc-topo select, .orc-topo input, .orc-topo button { font-size: 1em; font-family: inherit; }

.orc-topo-fazenda { grid-column: 1; grid-row: 1;
                    display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.orc-topo-rotulo { font-size: 0.86em; letter-spacing: 0.08em;
                   text-transform: uppercase; color: var(--cinza-claro); }
.orc-topo-fazenda select { font-weight: 700; color: var(--cinza-texto);
                           min-width: 0; max-width: 240px; }
.orc-topo-sub { margin: 0; color: var(--cinza-claro); white-space: nowrap; }

.orc-topo-identidade { grid-column: 2 / 4; grid-row: 1; min-width: 0;
                       display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.orc-topo-marca { font-weight: 700; color: var(--verde-escuro); white-space: nowrap; }
.orc-topo-nota { color: var(--cinza-claro); font-size: 0.92em;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.orc-campo-grupo { grid-column: 1; grid-row: 2; }
.orc-campo-classe { grid-column: 2; grid-row: 2; }
.orc-campo-ciclo { grid-column: 3; grid-row: 2; }
.orc-topo-busca { grid-column: 4; grid-row: 2; justify-self: end;
                  display: flex; align-items: center; gap: 6px; min-width: 0; }
.orc-busca-campo { width: 220px; max-width: 40vw; padding: 2px 8px; }
.orc-nota-empresa { grid-column: 1 / -1; grid-row: 3; margin: 2px 0 0;
                    font-size: 0.95em; color: var(--cinza-medio); }
.orc-aplicar { grid-column: 4; grid-row: 3; justify-self: end; }
/* D333 item 12 (03/11/2026): o frete ligado no CT-e ou recibo — as opções uma por linha. */
.doc-frete-destino label, .doc-frete-item:not([hidden]) { display: block; }
.doc-frete-parte { margin-top: 0.5rem; }
.doc-frete-parte select { display: block; max-width: 100%; margin-bottom: 0.5rem; }
/* D327 item 9 (03/11/2026): a compra antecipada — o link que mostra os 6 meses
   antes do Ciclo e, na matriz, esses meses em itálico. */
.orc-antecipados-link { grid-column: 1 / -1; grid-row: 4; justify-self: start; font-size: 0.95em; }
.orc-matriz th.orc-mes-antecipado { font-style: italic; }

/* Rótulo e lista lado a lado, na mesma linha — não mais empilhados. */
.orc-campo { display: inline-flex; flex-direction: row; align-items: baseline; gap: 5px;
             min-width: 0; color: var(--cinza-medio); }
.orc-campo select { color: var(--cinza-texto); min-width: 0; }
.orc-so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
                 overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.orc-grupos[hidden] { display: none; }

/* A matriz: faixa azul do cabeçalho, linha da Classe acima dela, faixas
   verdes de Subgrupo. As duas primeiras colunas recebem o tom mais forte
   de cada faixa, como na referência. */
/* TOTAL DA CLASSE — cinza escuro quase preto, números em branco, com a
   MESMA divisa das outras faixas: tom mais forte nas duas colunas que
   ficam paradas, tom um pouco mais claro a partir dos meses. */
.orc-matriz thead .orc-linha-classe th, .orc-matriz thead .orc-linha-classe td {
  position: sticky; top: 0; z-index: 2; height: 30px;
  background: var(--orc-escuro-suave); color: var(--branco); font-weight: 700; }
.orc-matriz thead .orc-linha-classe th.orc-col-conta,
.orc-matriz thead .orc-linha-classe td.orc-col-total {
  background: var(--orc-escuro); color: var(--branco); }
.orc-matriz thead .orc-cabecalho th { top: var(--orc-topo-2, 30px); background: var(--orc-azul-suave);
  color: var(--branco); font-weight: 600; border-color: #0f2c49; }
.orc-matriz thead .orc-cabecalho th.orc-col-conta,
.orc-matriz thead .orc-cabecalho th.orc-col-total { background: var(--orc-azul); color: var(--branco); }
.orc-matriz thead .orc-col-conta, .orc-matriz thead .orc-col-total { z-index: 4; }
.orc-col-mes { min-width: 88px; }

/* A DIVISA do verde é a mesma do azul: tom forte nas duas colunas que
   ficam paradas (Conta e Total do Ciclo), tom claro a partir dos meses,
   que rolam. A ordem destas duas regras importa — a dos meses precisa
   vir ANTES, senão ela vence também na coluna do Total, que tem as duas
   classes, e a divisa aparece um passo antes do lugar certo. */
/* FAMÍLIAS DE COR, uma por Categoria patrimonial (decisão de 2026-09-21):
   Móveis em verde, Imóveis em roxo, Estáticos em bordô. Bens-Simples fica na
   cor-base, que não foi trocada. Dentro de cada família o tom clareia à
   medida que se desce na hierarquia — é o que diz de que nível é a linha sem
   precisar de legenda.

   A família PADRÃO repete os valores que já estavam em uso, e é a que vale
   para Grupo comum e Custos Diretos: a tela deles não muda. */
.orc-matriz .orc-linha-subgrupo {
  --fam-1: var(--orc-verde-forte); --fam-2: var(--orc-verde-suave);
  --fam-2b: #45804a; --fam-3: #6f9a72; --fam-4: #8fae90; --fam-escuro: #0f2312; }
.orc-matriz .orc-linha-subgrupo.orc-fam-imoveis {
  --fam-1: #4a2c5f; --fam-2: #5f3f7c; --fam-2b: #6b478b; --fam-3: #8f6f9a; --fam-4: #a48fae;
  --fam-escuro: #1d0f2a; }
.orc-matriz .orc-linha-subgrupo.orc-fam-estaticos {
  --fam-1: #5f2c33; --fam-2: #7c3f49; --fam-2b: #8b4752; --fam-3: #9a6f78; --fam-4: #ae8f96;
  --fam-escuro: #2a0f14; }

/* OS DOIS QUADROS. À esquerda ficam código, nome, seta e o Total do Ciclo; à
   direita, os doze meses. A divisão cai depois do Total do Ciclo, e é dita de
   duas maneiras ao mesmo tempo: a esquerda sempre um tom mais forte que a
   direita, dentro da mesma família, e a divisa de 2px que a coluna do Total
   desenha em todas as linhas. As linhas continuam alinhadas: o que muda é a
   cor de fundo, nunca a altura nem a largura. */
.orc-matriz .orc-linha-subgrupo td.orc-soma { background: var(--fam-2); color: var(--branco); }
.orc-matriz .orc-linha-subgrupo th.orc-col-conta,
.orc-matriz .orc-linha-subgrupo td.orc-col-total,
.orc-matriz .orc-linha-subgrupo td.orc-soma.orc-col-total {
  background: var(--fam-1); color: var(--branco); }
.orc-linha-subgrupo .orc-abrir, .orc-linha-subgrupo .orc-abrir-seta { color: var(--branco); }
/* D186: níveis intermediários do Grupo nativo dos Bens. O recuo é o que
   mostra a hierarquia sem inventar cor nova: cada nível entra um pouco mais,
   e o verde vai clareando à medida que se aproxima das Contas. */
.orc-matriz .orc-linha-subgrupo.orc-nivel-2 th.orc-col-conta { padding-left: 26px; }
.orc-matriz .orc-linha-subgrupo.orc-nivel-3 th.orc-col-conta { padding-left: 44px; }
.orc-matriz .orc-linha-subgrupo.orc-nivel-2 th.orc-col-conta,
.orc-matriz .orc-linha-subgrupo.orc-nivel-2 td.orc-col-total,
.orc-matriz .orc-linha-subgrupo.orc-nivel-2 td.orc-soma.orc-col-total { background: var(--fam-2); }
.orc-matriz .orc-linha-subgrupo.orc-nivel-2 td.orc-soma { background: var(--fam-2b); }
.orc-matriz .orc-linha-subgrupo.orc-nivel-3 th.orc-col-conta,
.orc-matriz .orc-linha-subgrupo.orc-nivel-3 td.orc-col-total,
.orc-matriz .orc-linha-subgrupo.orc-nivel-3 td.orc-soma.orc-col-total { background: var(--fam-3); }
.orc-matriz .orc-linha-subgrupo.orc-nivel-3 td.orc-soma { background: var(--fam-4); }
/* LEITURA no nível mais claro. Branco sobre os dois tons finais fica em torno
   de 2,4:1 — não dá para ler valor assim. Nesse nível o texto inverte para o
   tom escuro da própria família, o que sobe o contraste para mais de 8:1 sem
   mexer na escada de tons nem na largura de nada. Vale para nome, código,
   seta e números, inclusive os zeros discretos. */
.orc-matriz .orc-linha-subgrupo.orc-nivel-3 th.orc-col-conta,
.orc-matriz .orc-linha-subgrupo.orc-nivel-3 td.orc-col-total,
.orc-matriz .orc-linha-subgrupo.orc-nivel-3 td.orc-soma,
.orc-matriz .orc-linha-subgrupo.orc-nivel-3 .orc-abrir,
.orc-matriz .orc-linha-subgrupo.orc-nivel-3 .orc-abrir-seta { color: var(--fam-escuro); }
/* O zero clareia só no TEXTO. A marca `orc-zero` fica na própria célula,
   então `opacity` deixaria o FUNDO dela translúcido e mais claro que o do
   nome — foi o defeito apontado na conferência do responsável. */
table.orc-matriz .orc-linha-subgrupo.orc-nivel-3 .orc-zero {
  color: color-mix(in srgb, var(--fam-escuro) 72%, transparent); }

/* ÁRVORES PATRIMONIAIS (2026-09-21, segunda revisão do responsável).
   Tudo abaixo vale só para as linhas com família de cor — as dos dois Grupos
   01, de Custos Indiretos e de Despesas. Grupo comum e Custos Diretos seguem
   com as regras de cima, sem nenhuma mudança.

   COR CONTÍNUA: o quadro dos meses acompanha a cor do quadro dos nomes, na
   mesma linha. A orientação anterior (um tom mais claro à direita) foi
   substituída. */
.orc-matriz .orc-linha-subgrupo[class*="orc-fam-"].orc-nivel-1 td.orc-soma { background: var(--fam-1); }
.orc-matriz .orc-linha-subgrupo[class*="orc-fam-"].orc-nivel-2 td.orc-soma { background: var(--fam-2); }
.orc-matriz .orc-linha-subgrupo[class*="orc-fam-"].orc-nivel-3 td.orc-soma { background: var(--fam-3); }

/* DIVISÓRIA: com a mesma cor dos dois lados, a separação dos quadros fica
   inteira com ela — 3px num tom quase branco, depois do Total do Ciclo. É
   sombra, não borda, como a de antes: não desloca coluna nem muda altura. */
/* DIVISÓRIA DOS QUADROS (revisão de 2026-09-21): contínua do cabeçalho à
   última linha, depois do Total do Ciclo. Três faixas — fio claro, traço
   escuro, fio claro — para aparecer sobre qualquer fundo: nos tons escuros
   aparecem os fios claros, no branco das Contas aparece o traço escuro.
   Vale nos dois Grupos 01 e nos Grupos comuns (a tabela recebe a classe
   no template); Custos Diretos fica com a divisória de antes. */
.orc-matriz.orc-divisa-quadros { --divisa-clara: #ffffff; --divisa-escura: #1c241c; }
/* Desenhada como um elemento junto da célula do Total, e NÃO como sombra: o
   Chrome não pinta box-shadow em célula de tabela com bordas colapsadas, e a
   matriz usa `border-collapse: collapse` — por isso a divisória por sombra
   nunca aparecia (medido nos pixels, 2026-09-21). A célula do Total é fixa
   (sticky), então ela serve de referência para o traço, que acompanha a
   rolagem. Ultrapassa 1px em cima e embaixo para não abrir fresta entre as
   linhas; não recebe clique nem muda largura. */
.orc-matriz.orc-divisa-quadros .orc-col-total { box-shadow: none; }
.orc-matriz.orc-divisa-quadros .orc-col-total::after {
  content: ""; position: absolute; top: -1px; bottom: -1px; right: -5px; width: 5px; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, var(--divisa-clara) 0 1px, var(--divisa-escura) 1px 4px,
                                       var(--divisa-clara) 4px 5px); }
/* Na linha do total da Classe, uma regra mais específica deixava o Total no
   mesmo nível dos meses (2); como os meses vêm depois, cobriam o traço. Nas
   outras linhas fixas do alto o Total já fica acima deles (4). */
.orc-matriz.orc-divisa-quadros thead .orc-linha-classe td.orc-col-total { z-index: 4; }
/* A linha que só DIZ que não há cadastro tem a mesma cor de ponta a ponta:
   o tom claro das colunas fixas vai também sobre os meses. */
.orc-matriz .orc-linha-vazia td { background: var(--orc-fixa-fundo); }
/* Grupo 01 por Bem (2026-09-21): o contexto de cada total, escrito logo
   abaixo do rótulo — a Classe é da Fazenda escolhida; o Grupo, de todas as
   Fazendas. Discreto, na cor da própria linha. */
.orc-matriz .orc-total-contexto { display: block; font-size: 0.78em; font-weight: 400; }
/* Mês com previsão registrada em outra Fazenda (antes da transferência):
   só consulta, com o motivo no ⓘ da Conta. */
.orc-matriz .orc-mes-historico { font-style: italic; }
/* Total Despesas incompleto (D192): valor de Grupo sem rateio vigente fica fora
   da parte da Fazenda, e a linha diz isso em cor de atenção, legível sobre a
   faixa escura; o ⓘ ao lado lista os Grupos. A caixa aberta sobe acima das
   faixas fixas, como nos níveis. */
.orc-matriz .orc-total-pendente { display: block; color: #fac775; font-weight: 600; }
.orc-matriz .orc-total-pendente[hidden] { display: none; }
.orc-matriz .orc-total-pendente .pc-icone-explicacao { color: inherit; padding: 0 1px; }
.orc-matriz .orc-linha-classe > th:has(.pc-tooltip-host:not(.pc-tooltip-fechado):is(.pc-tooltip-aberto, :focus-visible)) {
  z-index: 6; }

/* RESUMO POR FAZENDA do Grupo 01 (2026-09-21). A seta antes do número do
   Grupo tem o mesmo desenho da seta da árvore, na cor da faixa escura. As
   linhas por Fazenda são só leitura, em tom neutro claro — explicam o total
   do Grupo, não são mais um nível da árvore. */
.orc-resumo-abrir { background: none; border: none; padding: 0 6px 0 0; cursor: pointer;
                    color: inherit; font-size: 0.9em; line-height: 1; }
.orc-resumo-abrir:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }
.orc-resumo-seta { display: inline-block; min-width: 1em; }
.orc-matriz .orc-linha-distribuicao th,
.orc-matriz .orc-linha-distribuicao td { background: var(--orc-fixa-fundo); color: var(--cinza-texto);
                                         font-weight: 400; font-variant-numeric: tabular-nums; }
.orc-matriz .orc-linha-distribuicao th.orc-col-conta { padding-left: 26px; }
.orc-matriz .orc-linha-distribuicao .orc-dist-mes { text-align: right; min-width: var(--orc-col-mes); }
.orc-matriz .orc-linha-distribuicao.orc-dist-pendente th,
.orc-matriz .orc-linha-distribuicao.orc-dist-parcial th { font-style: italic; }
/* Diferença entre a distribuição e o total do Grupo: nunca escondida. */
.orc-matriz .orc-linha-distribuicao.orc-dist-diferenca th,
.orc-matriz .orc-linha-distribuicao.orc-dist-diferenca td { color: #8a1f11; font-weight: 600; }

/* O NOME ABRE E RECOLHE (2026-09-21): nos níveis da árvore e no título do
   resumo, o nome aciona a mesma seta. O cursor e o sublinhado ao passar o
   mouse dizem que ele é clicável; o resto da linha não é. */
.orc-matriz .orc-linha-subgrupo .orc-nivel-texto,
.orc-matriz .orc-linha-grupo .orc-nome-acionavel { cursor: pointer; }
.orc-matriz .orc-linha-subgrupo .orc-nivel-texto:hover .orc-nivel-nome,
.orc-matriz .orc-linha-subgrupo .orc-nivel-sem-codigo:hover,
.orc-matriz .orc-linha-grupo .orc-nome-acionavel:hover { text-decoration: underline; }

/* ⓘ DOS NÍVEIS do Grupo 01 (2026-09-21): à direita da área dos nomes, antes
   do Total do Ciclo, na primeira linha do nível; na cor do texto da própria
   faixa (branco nas escuras, o tom escuro da família nas claras) e no tamanho
   da letra do nível. Sem explicação, o ⓘ fica mais discreto, como no cartão. */
/* Preso no alto à direita, na linha do CÓDIGO — curta —, e não flutuando ao
   lado do bloco: flutuando, ele tirava ~16px da largura do nome em todas as
   linhas, e 16 dos 102 níveis passavam a quebrar uma linha a mais (medido a
   1440px). Assim o nome, na linha de baixo, fica com a largura toda. A célula
   do nome é fixa (sticky), então ela é a referência do posicionamento. */
.orc-matriz .orc-linha-subgrupo .orc-nivel-ajuda { position: absolute; top: 3px; right: 2px; line-height: 1; }
.orc-matriz .orc-linha-subgrupo .orc-nivel-ajuda .pc-icone-explicacao { color: inherit; padding: 0 1px; }
.orc-matriz .orc-linha-subgrupo .orc-nivel-ajuda .pc-icone-explicacao.pc-sem-explicacao { color: inherit; opacity: 0.7; }
.orc-matriz .orc-linha-subgrupo .orc-nivel-ajuda .pc-icone-explicacao:focus-visible {
  outline: 2px solid currentColor; outline-offset: 1px; border-radius: 3px; }
.orc-matriz .orc-linha-subgrupo[class*="orc-fam-"].orc-nivel-2 .orc-nivel-ajuda { font-size: max(0.9em, 10px); }
.orc-matriz .orc-linha-subgrupo[class*="orc-fam-"].orc-nivel-3 .orc-nivel-ajuda { font-size: max(0.84em, 9.5px); }
/* Com a caixa do ⓘ aberta, a célula do nome sobe acima das faixas fixas
   (cabeçalho e linha do Grupo, até z-index 4) e das células de nome das
   linhas vizinhas (z-index 1). A caixa fica dentro da camada da própria
   célula; sem isto ela saía cortada por baixo da linha do Grupo quando
   abria para cima (captura de 2026-09-21). Só enquanto a caixa está aberta. */
.orc-matriz .orc-linha-subgrupo > th:has(.orc-nivel-ajuda .pc-tooltip-host:not(.pc-tooltip-fechado):is(.pc-tooltip-aberto, :focus-visible)) {
  z-index: 6; }
/* orc-fio-entre-linhas (2026-09-21): nas árvores patrimoniais, o fio entre
   as linhas tem a mesma cor sob o nome e sob os números. A célula do nome é
   <th> e herdava a borda inferior de 2px das tabelas; com bordas colapsadas
   ela vencia a borda superior da linha de nível só na coluna do nome, e o
   fio saía mais claro ali. Com 1px, como os <td>, vale a borda da linha de
   nível de ponta a ponta. Só alcança linhas com família de cor, a linha
   logo acima delas e as linhas de ausência (que só existem nessas árvores). */
.orc-matriz tbody tr[class*="orc-fam-"] > th,
.orc-matriz tbody tr.orc-linha-vazia > th,
.orc-matriz tbody tr:has(+ tr[class*="orc-fam-"]) > th { border-bottom-width: 1px; }

/* LETRA POR NÍVEL, só no bloco de código e nome. Relativa à fonte da matriz,
   que o JavaScript ajusta pela largura da janela; o piso protege o nível
   mais baixo quando a matriz inteira já está no mínimo. */
.orc-matriz .orc-linha-subgrupo[class*="orc-fam-"].orc-nivel-2 .orc-nivel-texto { font-size: max(0.9em, 10px); }
.orc-matriz .orc-linha-subgrupo[class*="orc-fam-"].orc-nivel-3 .orc-nivel-texto {
  font-size: max(0.84em, 9.5px); font-style: italic; }
/* D186 (aplicada em 2026-09-21): na coluna Conta, o CÓDIGO ocupa a primeira linha, ao lado da setinha,
   e o NOME vem abaixo, alinhado sob o código — a setinha continua valendo para
   o bloco inteiro. Sem travessão: a quebra já separa as duas informações, e o
   nome longo passa a ter a largura toda da coluna para quebrar. Fonte, cores e
   largura da coluna não mudam; só o arranjo das duas informações muda.
   O alinhamento não usa medida da setinha: código e nome ficam dentro de um
   bloco só, que ocupa a largura restante ao lado do botão flutuante — por isso
   nascem na mesma borda esquerda. Calcular a largura da seta erra por alguns
   pixels, porque o glifo é mais largo que o `min-width` dela. */
/* O botão flutua à esquerda e o bloco do texto ocupa o que sobra: é isso que
   mantém a seta na linha do código mesmo quando o nome é longo e o recuo é
   pequeno. Um `inline-block` desceria inteiro nesse caso, deixando a seta
   sozinha na primeira linha — foi o que o navegador mostrou no nível 1. */
.orc-matriz .orc-linha-subgrupo .orc-abrir { float: left; }
.orc-matriz .orc-linha-subgrupo .orc-nivel-texto { display: block; overflow: hidden; }
.orc-matriz .orc-linha-subgrupo .orc-nivel-nome { display: block; }
/* Subgrupo ainda sem Bem: a linha existe para DIZER que está vazio, e não
   recebe digitação nenhuma. */
.orc-matriz .orc-linha-vazia th.orc-col-conta { padding-left: 62px; font-weight: 400; }
/* A frase entra um passo à frente de QUEM a mostra: no Subgrupo sem Bem
   (nível 3) e também no Grupo que ainda não tem Subgrupo (nível 2). */
.orc-matriz .orc-linha-vazia.orc-vazia-n2 th.orc-col-conta { padding-left: 44px; }
.orc-matriz .orc-linha-vazia .texto-auxiliar { font-size: 0.78rem; }
/* Total de Subgrupo sem valor: 0,00 legível, em tom suave. Isso é
   APRESENTAÇÃO do total — não preenche campo nem cria lançamento zero. */
.orc-zero { color: #e3ede3; }  /* sobre a faixa VERDE do Subgrupo; o tom das
   faixas claras fica no bloco da escala adaptativa, mais abaixo */

/* A linha do GRUPO também fica fixa, logo abaixo da faixa azul: ela diz
   de quem é o total que se está lendo, e sumia ao rolar. O ponto onde
   ela para é medido no navegador (as duas linhas acima mudam de altura
   com a escala), com um valor de partida para o caso de o JavaScript não
   rodar. */
.orc-matriz .orc-linha-grupo th, .orc-matriz .orc-linha-grupo td {
  position: sticky; top: var(--orc-topo-3, 58px); z-index: 2; }
/* A linha do GRUPO usa a mesma faixa escura do total da Classe, com a
   mesma divisa de tons: os dois são total, e agora se leem como par. */
.orc-matriz .orc-linha-grupo th, .orc-matriz .orc-linha-grupo td {
  background: var(--orc-escuro-suave); color: var(--branco); }
.orc-matriz .orc-linha-grupo th.orc-col-conta,
.orc-matriz .orc-linha-grupo td.orc-col-total {
  background: var(--orc-escuro); color: var(--branco); z-index: 4; }
/* D333 item 29a (02/11/2026; achado da D189): nos dois Grupos 01 (a tabela recebe orc-tom-unico),
   o cabeçalho azul e as linhas de total (Classe e Grupo) ficam num tom só, de ponta a ponta, como as
   linhas de nível dessas árvores. A divisória depois do Total do Ciclo continua separando os quadros. */
.orc-matriz.orc-tom-unico thead .orc-linha-classe th,
.orc-matriz.orc-tom-unico thead .orc-linha-classe td,
.orc-matriz.orc-tom-unico .orc-linha-grupo th,
.orc-matriz.orc-tom-unico .orc-linha-grupo td { background: var(--orc-escuro); }
.orc-matriz.orc-tom-unico thead .orc-cabecalho th { background: var(--orc-azul); }
.orc-matriz .orc-linha-conta th.orc-col-conta,
.orc-matriz .orc-linha-conta td.orc-col-total { background: var(--orc-fixa-fundo); }
.orc-matriz .orc-linha-anterior td { background: #eef2f6; }

/* Modo ampliado: o cabeçalho e o menu do sistema saem da tela para os
   doze meses caberem. A saída fica na própria barra da tela, alcançável
   pelo teclado; sem JavaScript nada é escondido. */
body.orc-ampliado .cabecalho,
body.orc-ampliado .sidebar,
body.orc-ampliado .sidebar-resize { display: none; }
body.orc-ampliado .conteudo { padding: 10px 14px; }
body.orc-ampliado .titulo-pagina { font-size: 1.1em; margin: 0 0 6px; }
body.orc-ampliado .orc-wrap { max-height: calc(100vh - 190px); }
/* Medido no navegador em 2026-09-11: cada mês ocupava 108px (campo de 88
   mais 20 de espaço lateral), e doze meses pediam 1640px de tabela. No
   modo ampliado o espaço lateral cai para 6px e as duas colunas fixas
   encolhem — a FONTE não muda e o campo continua com 88px, que é o que
   R$ 1.234.567,89 exige por inteiro. Nada é cortado nem escondido. */
/* As larguras deixaram de ser fixas por modo em 2026-09-11: quem as
   calcula é a escala adaptativa, no fim deste arquivo. */

.orc-rodape { display: flex; align-items: center; margin-top: 10px; }
.orc-rodape-logo { height: 26px; width: auto; opacity: 0.85; }

@media (max-width: 900px) {
  .orc-topo-grade { grid-template-columns: 1fr; }
  .orc-topo-identidade { text-align: left; }
  .orc-topo-dir { justify-content: flex-start; }
}

/* =====================================================================
   PLANEJAMENTO ORÇAMENTÁRIO — ESCALA ADAPTATIVA (2026-09-11, segunda
   rodada da referência visual).

   A tela é uma só e abre com o menu do sistema recolhido. Antes de
   desenhar a matriz, o JavaScript mede a largura realmente disponível e
   escolhe a maior fonte em que os DOZE meses cabem juntos, gravando as
   medidas nestas variáveis. O campo de digitação nunca é arbitrado: ele
   é calculado, naquela fonte, a partir do maior valor previsto
   (R$ 1.234.567,89) — por isso nenhuma escala corta número.

   Sem JavaScript valem os valores de partida abaixo, e a tela continua
   utilizável com a rolagem horizontal de antes, Conta e Total do Ciclo
   fixos. Abaixo do piso de legibilidade a rolagem também volta: é
   preferível rolar a ler o que não se lê.
   ===================================================================== */
.orc-corpo {
  --orc-fonte: 13px;
  --orc-col-total: 108px;
  --orc-col-mes: 100px;
  --orc-campo: 88px;
  --orc-recuo: 4px;
}
/* `table.orc-matriz`, e não `.orc-matriz`: a regra geral das tabelas do
   sistema é `table.tabela`, mais específica que uma classe sozinha —
   escrita com menos peso, a escala era calculada e nunca aplicada. */
table.orc-matriz { font-size: var(--orc-fonte); }
table.orc-matriz th, table.orc-matriz td { font-size: inherit;
  padding: 3px var(--orc-recuo); }
table.orc-matriz .orc-col-total { min-width: var(--orc-col-total); max-width: var(--orc-col-total); }
table.orc-matriz .orc-col-mes, table.orc-matriz .orc-celula, table.orc-matriz .orc-soma,
table.orc-matriz .orc-classe-mes, table.orc-matriz .orc-grupo-mes { min-width: var(--orc-col-mes); }
.orc-valor { width: var(--orc-campo); font-size: inherit; padding: 2px 4px; }
.orc-codigo { margin-right: 4px; }
.orc-anterior { margin-left: 6px; font-size: 0.82em; }
.orc-campo-grupo select { max-width: 42vw; }

/* 0,00 nas linhas de total: tom mais suave que o do número cheio, e ainda
   assim legível sobre o fundo de cada faixa. O seletor precisa do mesmo
   peso das regras de cor das faixas — escrito com menos, o tom suave era
   engolido pelo branco do Subgrupo. */
/* Sobrou só a linha da CONTA com fundo claro; Classe e Grupo passaram a
   ter faixa escura, e o tom claro do zero delas fica mais abaixo. */
table.orc-matriz .orc-linha-conta .orc-zero { color: #5c6a76; font-weight: 400; }
table.orc-matriz .orc-linha-subgrupo .orc-zero { color: #f1f7f1; font-weight: 400; }

/* Cabeçalho compacto: a altura economizada aqui é altura de matriz. */
/* A trilha de navegação some junto com o menu: o nome do módulo já está
   no cabeçalho da tela, sob a Fazenda, e repetido no alto ele só tomaria
   altura. Ela volta inteira ao sair do modo ampliado. */
body.orc-ampliado .breadcrumb { display: none; }
body.orc-ampliado .orc-topo { padding: 6px 10px; margin-bottom: 6px; }
body.orc-ampliado .orc-topo-grade { gap: 10px; }
body.orc-ampliado .orc-barra { gap: 8px; margin-bottom: 6px; }

/* =====================================================================
   PLANEJAMENTO ORÇAMENTÁRIO — acabamento pedido pelo responsável
   (2026-09-11, terceira rodada). O princípio é um só: comando pequeno e
   discreto, espaço para o conteúdo — sem que nenhuma informação se
   perca, só mude de lugar.
   ===================================================================== */

/* Lista de Grupos: discreta, e larga o bastante para o nome do Grupo. */
.orc-campo-grupo select { font-weight: 600; padding: 2px 6px; max-width: 30vw; }

/* Saída do modo ampliado: no alto, à DIREITA — onde antes ficavam Classe
   e Ciclo. Pequena e sem peso de ação principal: é a porta de volta ao
   menu, precisa estar sempre alcançável, nunca chamativa. */
.orc-botao-sair { justify-self: end; padding: 3px 10px; font-weight: 600; }
/* Área de aviso: vazia, não ocupa lugar. `.badge` declara `display`, que
   sozinho vence o `hidden` do navegador — sem esta regra sobrava um
   quadro cinza permanente ao lado do botão. */
.orc-estado[hidden] { display: none; }

/* Nome da Conta: menor, e proporcional à escala da matriz — encolhe e
   cresce junto com ela. O número saiu daqui e vive na caixa do ⓘ. */
.orc-nome-conta { font-size: 0.94em; }
.orc-matriz .orc-linha-conta th.orc-col-conta { line-height: 1.25; }
.orc-anterior { display: inline-block; font-size: 0.78em; margin-left: 0; }
.orc-linha-conta .pc-icone-explicacao { font-size: 0.9em; margin: 0 2px 0 4px; }

/* Uma barra de rolagem só: a da matriz. No modo ampliado a tela inteira
   cabe na janela — a altura da caixa é calculada no navegador — e a
   página não rola. O `padding-bottom` que a caixa de tabela do sistema
   usa para afastar a barra horizontal sobra aqui e criava a segunda
   barra. */
/* A trava da rolagem da página só vale quando a janela tem altura para a
   tela caber. Numa janela muito baixa, travar esconderia conteúdo sem
   dar caminho de chegar nele — aí a página volta a rolar. */
@media (min-height: 520px) { body.orc-ampliado { overflow: hidden; } }
body.orc-ampliado .conteudo { padding-bottom: 0; }
.orc-wrap.tabela-wrap { padding-bottom: 0; }
.orc-rodape { margin-top: 6px; }

/* =====================================================================
   PLANEJAMENTO ORÇAMENTÁRIO — coluna da Conta e zeros (2026-09-12).
   ===================================================================== */

/* O nome da Conta ocupa UMA linha. Não cabendo, é cortado com
   reticências — o nome inteiro continua na caixa do ⓘ, junto do número e
   da explicação do cadastro. Altura de linha previsível vale mais aqui
   do que ler o nome inteiro na coluna, e nada se perde. */
.orc-conta-topo { display: flex; align-items: center; gap: 4px; min-width: 0; }
.orc-nome-conta { flex: 1 1 auto; min-width: 0; white-space: nowrap;
                  overflow: hidden; text-overflow: ellipsis; }
/* A consulta do Ciclo anterior fica SEMPRE embaixo do nome, em toda
   Conta — curta ou longa. Antes ela subia para o lado quando o nome era
   curto, e duas Contas vizinhas ficavam com desenhos diferentes. */
.orc-anterior { display: block; margin-left: 0; margin-top: 1px; }

/* Zero no Total do Ciclo da Conta: aparece, em cinza discreto. Nas
   células dos meses, onde se digita, zero e vazio continuam iguais. */
.orc-matriz .orc-linha-conta .orc-zero { color: #5c6a76; font-weight: 400; }

/* =====================================================================
   PLANEJAMENTO ORÇAMENTÁRIO — uma barra de rolagem só (2026-09-12).

   A altura da matriz deixou de ser calculada no JavaScript. Ela é
   consequência do layout: no modo ampliado a área de conteúdo é uma
   coluna, e a caixa da matriz ocupa o que sobra entre o cabeçalho e o
   rodapé. Conta calculada uma vez fica desatualizada quando se abre um
   Subgrupo — foi o que fazia nascer a segunda barra de rolagem. Assim
   não há conta para desatualizar: abrir, recolher, trocar de Grupo,
   mudar o zoom ou o tamanho da janela se ajustam sozinhos.
   ===================================================================== */
body.orc-ampliado .conteudo { display: flex; flex-direction: column; min-height: 0; }
body.orc-ampliado .orc-corpo { flex: 1 1 auto; min-height: 0; }
body.orc-ampliado .orc-matriz-area { display: flex; flex-direction: column;
                                     min-height: 0; height: 100%; }
body.orc-ampliado .orc-wrap { flex: 1 1 auto; min-height: 0; max-height: none; }

/* Lista de Grupos com o MESMO peso de Classe e Ciclo — o tamanho já era
   o mesmo (0,8rem); era o negrito que fazia a lista suspensa do Grupo
   parecer maior. O nome em maiúsculas vem do cadastro do Grupo, no Plano
   de Contas, e não é mexido aqui. */
.orc-campo-grupo select { font-weight: 400; }

/* Zero na faixa escura do total da Classe: claro o bastante para ler. */
table.orc-matriz .orc-linha-classe .orc-zero,
table.orc-matriz .orc-linha-grupo .orc-zero { color: #c9d1d9; font-weight: 400; }

/* =====================================================================
   PLANEJAMENTO ORÇAMENTÁRIO — o espaço de baixo (2026-09-12).

   Medido no navegador: entre o fim da matriz e a borda inferior sobravam
   52 px sem uso — 40 px de margem e 12 px de recheio da faixa técnica do
   modo demonstração, mais o respiro do logo e do topo da área de
   conteúdo. Espaço vazio ali é linha de Conta a menos à vista, então no
   modo ampliado essas folgas encolhem. Fora desta tela nada muda.
   ===================================================================== */
body.orc-ampliado .conteudo { padding-top: 4px; }
body.orc-ampliado .orc-rodape { margin-top: 2px; }

/* =====================================================================
   PLANEJAMENTO ORÇAMENTÁRIO — meses centralizados e a divisa entre as
   linhas paradas (2026-09-12).
   ===================================================================== */

/* O NOME do mês fica centralizado na sua coluna. Os valores continuam
   alinhados à direita, que é como número se lê e se compara. */
table.orc-matriz thead .orc-cabecalho th.orc-col-mes { text-align: center; }

/* Um fio BRANCO bem fino marca a divisa entre as três linhas paradas:
   acima e abaixo da faixa azul dos meses. Ele não é espaço vazio — é a
   própria borda das células, então não rouba altura da matriz nem se
   desfaz quando a tabela rola. */
table.orc-matriz thead .orc-linha-classe th,
table.orc-matriz thead .orc-linha-classe td { border-bottom: 2px solid var(--branco); }
table.orc-matriz thead .orc-cabecalho th { border-top: 2px solid var(--branco);
                                           border-bottom: 2px solid var(--branco); }
table.orc-matriz .orc-linha-grupo th,
table.orc-matriz .orc-linha-grupo td { border-top: 2px solid var(--branco); }

/* =====================================================================
   PLANEJAMENTO ORÇAMENTÁRIO — PAINEL DE VISÃO (2026-09-12).

   A porta do módulo: uma Classe por cartão, com o total do Ciclo, e —
   nas Classes orçadas por Fazenda — um cartão por Fazenda. Só leitura.
   Reaproveita o cabeçalho verde claro da tela de lançamento, para as
   duas se lerem como a mesma tela em dois momentos.
   ===================================================================== */
.orc-painel { display: grid; gap: 12px; margin-bottom: 12px;
              grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.orc-cartao { display: flex; flex-direction: column; gap: 4px;
              border: 1px solid var(--cinza-borda); border-radius: var(--raio);
              background: var(--branco); padding: 12px 14px; text-decoration: none;
              color: inherit; }
/* Cartão que leva a algum lugar reage ao passar o mouse e mostra foco;
   cartão de leitura não finge ser clicável. */
a.orc-cartao:hover { border-color: var(--verde); background: #f7faf7; }
a.orc-cartao:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.orc-cartao-leitura { cursor: default; }

.orc-cartao-rotulo { font-size: 0.82rem; color: var(--cinza-medio); }
.orc-cartao-valor { font-size: 1.5rem; font-weight: 500;
                    font-variant-numeric: tabular-nums; color: var(--cinza-texto); }

/* O total da Classe aberta usa a mesma faixa escura da matriz: é o
   mesmo número, e se lê como o mesmo tipo de informação. */
.orc-cartao-total { border-radius: var(--raio); background: #23272b;
                    padding: 12px 16px; margin-bottom: 12px;
                    display: flex; flex-direction: column; gap: 2px; }
.orc-cartao-total .orc-cartao-rotulo { color: #c9d1d9; }
.orc-cartao-total .orc-cartao-valor { color: var(--branco); font-size: 1.7rem; }

.orc-painel-barra { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.orc-painel-titulo { font-weight: 600; color: var(--cinza-texto); }
.orc-voltar { padding: 3px 12px; font-size: 0.8rem; font-weight: 600; }
.orc-nota-solta { margin: 0 0 12px; }
.orc-campo-ciclo-painel { grid-column: 3; grid-row: 2; }

/* PAINEL / RESUMO DO ORÇAMENTO (D151, 2026-09-14) — desenho do
   responsável: barra com Ciclo, Fazenda e os botões das Classes; um
   quadro de destaque; e três colunas de cartões só de leitura. Tudo com
   prefixo `orc-resumo-`/`orc-painel-`: nada daqui alcança a matriz. */
.orc-painel-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
                   border: 1px solid var(--cinza-borda); border-radius: var(--raio);
                   background: #eef5ee; padding: 6px 12px; margin-bottom: 8px;
                   font-size: 0.85rem; color: var(--cinza-medio); }
.orc-painel-forma { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.orc-painel-campo { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.orc-painel-campo select { font-size: 1em; font-family: inherit; color: var(--cinza-texto);
                           min-width: 0; max-width: 100%; }
.orc-painel-classes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.orc-painel-classe { min-width: 108px; text-align: center; font-weight: 600; }
.orc-painel-classe[disabled] { cursor: not-allowed; opacity: 0.7; }
.orc-painel-em-breve { display: block; font-size: 0.72rem; font-weight: 400; }

.orc-resumo-destaque { border: 2px solid var(--cinza-texto); border-radius: 14px;
                       background: var(--branco); padding: 6px 18px; margin: 0 auto 8px;
                       max-width: 760px; text-align: center; }
.orc-resumo-destaque h2 { margin: 0 0 2px; font-size: 1.1rem; color: var(--cinza-texto); }
.orc-resumo-destaque p { margin: 2px 0; color: var(--cinza-texto); }
.orc-resumo-global strong { font-variant-numeric: tabular-nums; }
.orc-resumo-alcance { font-size: 0.8rem; color: var(--cinza-medio); }

.orc-resumo-colunas { display: grid; gap: 8px 16px; align-items: start;
                      grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .orc-resumo-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.orc-resumo-coluna { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.orc-resumo-coluna .orc-cartao { align-items: center; text-align: center; padding: 6px 12px; }
/* Os quatro quadros das Classes com a mesma altura e o mesmo alinhamento:
   rótulo numa linha só (o ⓘ de Despesas Adm não aumenta a linha). */
.orc-resumo-classe { border-width: 2px; border-color: var(--cinza-texto);
                     box-sizing: border-box; min-height: 4.1rem; justify-content: center; }
.orc-resumo-classe .orc-cartao-rotulo { line-height: 1.2; white-space: nowrap; }
.orc-resumo-classe .pc-icone-explicacao { line-height: 1; vertical-align: baseline; }
.orc-resumo-fazenda { margin: 0 8%; }
/* Parte das Despesas ADM sem rateio vigente (D168): destacada como
   pendência, nunca parecida com um valor distribuído. */
.orc-resumo-pendente { border-style: dashed; border-color: var(--amarelo-borda); background: var(--amarelo-fundo); }
.orc-resumo-pendente .orc-cartao-rotulo, .orc-resumo-pendente .orc-cartao-valor { color: var(--amarelo-texto); }
.orc-resumo-pendente .orc-cartao-rotulo { font-weight: 700; }
.orc-resumo-nota { margin: 0 8%; text-align: center; font-size: 0.85em; }
.orc-resumo-fazenda .orc-cartao-valor { font-size: 1.15rem; }
@media (max-width: 900px) {
  .orc-resumo-colunas { grid-template-columns: 1fr; }
}

/* Custos Diretos (sql/67) — Culturas, Glebas e confirmações das trocas.
   Mesmo cartão e mesmo quadro do painel, só com o conteúdo desta Classe. */
.orc-cd-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.orc-cd-contexto { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; }
.orc-cd-cartoes { display: grid; gap: 14px; margin-top: 16px;
                  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.orc-cd-cartao { align-items: center; justify-content: center; text-align: center; min-height: 86px;
                 text-decoration: none; color: inherit; }
.orc-cd-nome { font-weight: 600; font-size: 1.05rem; }
.orc-cd-area { font-size: 0.95rem; color: var(--cinza-medio); font-variant-numeric: tabular-nums; }
.orc-cd-cartao-bloco { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.orc-cd-inativa { cursor: not-allowed; background: #f4f5f4; opacity: 0.75; }
.orc-cd-consulta { font-size: 0.8rem; text-align: center; }
.orc-cd-quadro { max-width: 640px; margin: 28px auto; padding: 18px 22px; background: var(--branco);
                 border: 2px solid var(--cinza-texto); border-radius: 14px; }
.orc-cd-quadro h2 { margin: 0 0 10px; font-size: 1.1rem; }
.orc-cd-totais { display: grid; grid-template-columns: auto auto; gap: 4px 18px; justify-content: start;
                 font-variant-numeric: tabular-nums; }
.orc-cd-totais dd { margin: 0; font-weight: 600; }
.orc-cd-preparacao { margin-top: 12px; }
.orc-cd-concluir { align-items: center; flex-wrap: wrap; }
.orc-cd-sem-ativas { margin-top: 16px; }
.orc-cd-retirada { display: block; font-size: 0.72rem; color: var(--cinza-medio); }
/* Lista "Orçamento" no cabeçalho da matriz: mesma medida de letra do
   cabeçalho, nome inteiro visível e largura contida — os doze meses
   continuam sendo o conteúdo. */
.orc-cd-orcamento select { font-weight: 600; padding: 1px 4px; max-width: 30vw; text-overflow: ellipsis; }
/* Valores só de leitura nos cartões e na faixa de Custos Diretos: número
   alinhado (algarismos de mesma largura) e sem quebrar no meio do valor. */
.orc-cd-orcado { font-size: 0.9rem; font-weight: 600; color: var(--cinza-texto);
                 font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.orc-cd-total { font-variant-numeric: tabular-nums; }
.orc-cd-total strong { white-space: nowrap; }
.orc-cd-total-nota { font-style: normal; font-weight: 600; white-space: nowrap; color: #6b4a00;
                     background: #fff4d6; border-radius: var(--raio-pequeno); padding: 1px 6px; }
.orc-cd-indisponivel strong { color: var(--cinza-medio); font-weight: 600; }
/* E2: o total distribuído nas partes da subdivisão fica logo abaixo dos
   cartões das partes, com a mesma marcação dos demais totais — nunca
   somado ao que vale hoje. */
.orc-cd-subtotal { margin: 8px 0 0; }
/* E2: separação discreta entre as PARTES em preparação e as Glebas de
   hoje. É uma divisória entre dois blocos de cartões, não um título de
   página — o espaço continua sendo do conteúdo. */
.orc-cd-subtitulo { font-size: 0.95rem; font-weight: 600; color: var(--cinza-texto);
                    margin: 18px 0 0; }
/* Botão auxiliar dentro de uma linha de texto (ex.: "+ mais uma parte" na
   subdivisão): menor que os botões de ação, para não competir com eles. */
.pc-botao-discreto { font-size: 0.8rem; padding: 2px 8px; margin-left: 8px; }
/* E2: escolha entre cadastrar a área total da Cultura (Gleba única) ou as
   áreas por Gleba. Aparece só no cadastro da primeira Gleba; controle
   discreto, sem moldura pesada. */
.pc-escolha { border: 1px solid var(--cinza-borda, #d7d7d7); border-radius: var(--raio-pequeno);
              padding: 8px 10px; margin: 0 0 10px; }
.pc-escolha legend { font-size: 0.85rem; font-weight: 600; padding: 0 4px; }
.pc-escolha label { display: block; font-weight: 400; margin: 2px 0; }
/* Fechamento da Fase 01 (2026-09-15). */
/* Cartão de Gleba: a palavra "Gleba" numa linha acima do nome cadastrado. */
.orc-cd-tipo { font-size: 0.78rem; color: var(--cinza-claro); }
/* Lista de usuários (FF-07): cabeçalho e ações quebram linha e nomes longos
   quebram dentro da célula — sem rolagem lateral em telas comuns. */
/* Lista de Usuários (2026-09-23): a linha cabe em 29px em vez de 99px.
   O que fazia a linha triplicar de altura era a soma de três coisas — letra
   de 15,75px, botões de 36px e a quebra de "Definida", do nome e do login.
   Corpo no mesmo tamanho das demais listas, botões compactos e as colunas
   curtas proibidas de quebrar. A divisória sai do cinza quase invisível. */
table.tabela-usuarios { --usu-divisoria: #c6cfc6; font-size: var(--doc-corpo, 0.705rem); }
table.tabela-usuarios th { white-space: nowrap; font-size: inherit; padding: 5px 8px;
  border-bottom: 2px solid var(--usu-divisoria); }
table.tabela-usuarios td { overflow-wrap: anywhere; font-size: inherit; padding: 4px 8px;
  border-bottom: 1px solid var(--usu-divisoria); vertical-align: middle; }
table.tabela-usuarios tbody tr:last-child td { border-bottom: none; }
/* Estas quatro nunca quebram: são curtas, e quebrá-las é o que fazia a
   linha inteira crescer. O nome e o login continuam podendo quebrar — eles
   é que são longos de verdade. */
table.tabela-usuarios td:first-child,
table.tabela-usuarios .tabela-credencial,
table.tabela-usuarios .tabela-situacao,
table.tabela-usuarios td.tabela-acoes { white-space: nowrap; overflow-wrap: normal; width: 1%; }
table.tabela-usuarios td.tabela-acoes a,
table.tabela-usuarios td.tabela-acoes button {
  font-size: inherit; padding: 2px 8px; line-height: 1.5;
  /* A altura mínima geral dos botões é 36px, pensada para toque. Esta lista
     é de administração e só se usa em computador: 24px continua clicável e é
     o que faz a linha caber numa linha só. Vale só aqui. */
  min-height: 24px;
}
table.tabela-usuarios td.tabela-acoes a,
table.tabela-usuarios td.tabela-acoes form { display: inline-block; margin: 0 4px 0 0; vertical-align: middle; }
table.tabela-usuarios .pc-situacao, table.tabela-usuarios .texto-auxiliar { font-size: inherit; }
/* A dica oculta (posição absoluta, até 260px) ainda ampliava a área rolável
   da tabela e criava a barra lateral mesmo com tudo cabendo: nesta lista,
   ela só entra no layout quando é mostrada (mouse, foco ou toque). */
table.tabela-usuarios .pc-tooltip-host:not(.pc-tooltip-aberto):not(:focus-visible) > .pc-tooltip,
table.tabela-usuarios .pc-tooltip-host.pc-tooltip-fechado > .pc-tooltip { display: none; }

/* =====================================================================
   SISTEMA — repaginação das páginas de configuração (2026-09-12).

   Dentro de Sistema a árvore lateral saiu: a navegação é pelos cartões.
   Isso exige que o cartão seja um alvo claro, com hierarquia legível e
   estado de foco visível — ele deixou de ser um atalho e passou a ser o
   caminho. Branco e cinza muito claro no fundo, verde como cor
   principal, azul ultramarino só num detalhe: o fio que marca o cartão
   quando o mouse ou o teclado chega nele.

   ESCOPO: só `.cartoes-grade`, `.cartao-modulo` e as classes `.sis-*`.
   As duas primeiras existem apenas nos templates de Sistema; o `.cartao`
   genérico, usado em outras telas, não é tocado. O Planejamento
   Orçamentário não usa nenhuma delas — o HTML dele sai idêntico.
   ===================================================================== */

/* Cabeçalho da página: título e uma linha de explicação, sem repetir o
   nome do módulo e sem espaço morto entre eles. */
.sis-topo { margin-bottom: 16px; }
/* O azul ultramarino entra UMA vez, como fio abaixo do título: marca a
   seção sem disputar atenção com o verde dos cartões. */
.sis-titulo { margin-bottom: 6px; padding-bottom: 6px;
              border-bottom: 2px solid #14395f; display: inline-block; }
.sis-linha-fina { margin: 0; color: var(--cinza-medio); font-size: 0.92em; max-width: 70ch; }

/* A grade se adapta à largura: dois ou três cartões por linha em tela
   larga, um em tela estreita, sem encolher a letra. O mínimo de 280px é
   o que mantém título e descrição legíveis em uma ou duas linhas. */
.cartoes-grade {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  /* A largura máxima é o que mantém as linhas EQUILIBRADAS: sem ela, uma
     tela larga põe quatro cartões na primeira linha e deixa um sozinho na
     segunda. Com ela são três e dois, e o texto não estica demais para
     ser lido de uma vez. */
  max-width: 1100px;
}

/* O cartão como alvo de navegação: fundo branco sobre a página clara,
   borda discreta, e uma coluna de ícone que alinha todos os títulos na
   mesma posição, independentemente do tamanho do texto. */
a.cartao.cartao-modulo {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-content: start;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 14px 16px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.cartao-modulo .cartao-modulo-icone { grid-row: 1 / 3; grid-column: 1; margin: 0; align-self: start; }
.cartao-modulo strong { grid-column: 2; margin: 0; font-size: 1em; color: var(--verde-escuro); }
.cartao-modulo .texto-auxiliar { grid-column: 2; margin: 0; line-height: 1.45; }

/* (D286, 17/10/2026) Cartão de Cadastros com a explicação no ⓘ, fora do link
   (um botão dentro de um link não é acessível): a célula segura os dois, e o
   ⓘ fica no canto de cima, à direita, sem cobrir o nome. */
.cartao-celula { position: relative; display: grid; }
.cartao-celula > a.cartao.cartao-modulo { padding-right: 44px; }
.cartao-celula > .pc-icone-explicacao { position: absolute; top: 10px; right: 10px; }

/* O foco de teclado NÃO é redefinido aqui: vale o anel do sistema
   inteiro (topo deste arquivo), que já é forte e igual em toda tela —
   trocar a marcação só nesta página tornaria o teclado inconsistente. O
   que muda no hover é discreto e não compete com ele. */
a.cartao.cartao-modulo:hover { background: #f7faf7; border-color: var(--verde); }

/* Indisponível continua sendo um caminho de verdade — abre a tela que
   explica o motivo —, mas não se anuncia como os demais. */
a.cartao.cartao-modulo.cartao-indisponivel { background: var(--cinza-fundo); opacity: 1; }
.cartao-indisponivel .cartao-modulo-icone { color: var(--cinza-medio); }

@media (max-width: 620px) {
  .cartoes-grade { grid-template-columns: 1fr; }
}

/* ===== Campo recusado, contornado de vermelho (2026-09-22) =====
   Padrão do sistema, não de uma tela: quando uma gravação é recusada, o aviso
   diz o que fazer — um campo por vez, em texto corrido — e o campo em questão
   fica marcado, para a pessoa não ter de procurar onde está o problema.

   A cor não é o único sinal: o campo também recebe aria-invalid, que o leitor
   de tela anuncia, e ganha o foco quando a tela volta. */
/* O `!important` aqui é deliberado, não descuido. Cada módulo define a
   aparência normal dos próprios campos com seletores mais específicos que
   estes (`.doc-form input[type="text"]`, por exemplo) e carregados depois do
   base.css. Sem `!important`, a marca seria aplicada no HTML e não apareceria
   na tela — foi o que aconteceu na primeira medição em Lançar Documentos.
   Esta é uma marca de ESTADO: ela existe para sobrepor a aparência normal do
   campo, em qualquer tela, e sai assim que a pessoa corrige o campo. */
.campo-recusado,
input.campo-recusado,
select.campo-recusado,
textarea.campo-recusado {
  border: 2px solid var(--vermelho-forte) !important;
  background: var(--vermelho-fundo) !important;
  outline: none;
}
.campo-recusado:focus,
.campo-recusado:focus-visible {
  outline: 2px solid var(--vermelho-forte) !important;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   (D287, 17/10/2026, T011/T012/T014) Painel único da Fazenda e cadastro do
   produtor rural. Reaproveita o que já existe — .formulario (campos, rótulos,
   alturas), .botao*, .ajuda, .rotulo-opcional, .formulario-secao-titulo e o
   cabeçalho imóvel (.pagina-topo + .pagina-quadro) —; aqui só a distribuição
   das seções e das linhas de campos, aproveitando a largura do monitor.
   --------------------------------------------------------------------- */
.fz-painel .formulario, .fz-formulario { max-width: 1240px; }
.fz-secao {
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  background: var(--branco);
  margin: 0 0 10px;
}
.fz-secao-cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  cursor: pointer;
  list-style: none;
  background: var(--cinza-fundo);
  border-radius: var(--raio);
}
.fz-secao-cabecalho::-webkit-details-marker { display: none; }
.fz-secao-cabecalho::before {
  content: "▶";
  font-size: 0.75em;
  color: var(--cinza-medio);
  flex: 0 0 auto;
}
.fz-secao[open] > .fz-secao-cabecalho::before { content: "▼"; }
.fz-secao[open] > .fz-secao-cabecalho { border-bottom: 1px solid var(--cinza-borda); border-radius: var(--raio) var(--raio) 0 0; }
.fz-secao-cabecalho:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.fz-secao-titulo { font-weight: 700; font-size: 0.95em; color: var(--cinza-texto); }
.fz-secao-resumo { color: var(--cinza-medio); font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fz-secao-corpo { padding: 14px 16px 16px; }
.fz-campos { border: 0; margin: 0; padding: 0; min-width: 0; }
.fz-bloco { margin-top: 16px; }
.fz-situacao { margin-top: 12px; display: flex; align-items: center; gap: 8px; }
.fz-situacao form { display: flex; align-items: center; gap: 8px; }
.fz-conta-alterar > summary, .fz-conta-nova > summary { cursor: pointer; }
.fz-conta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 0; border-bottom: 1px solid var(--cinza-borda); }
.fz-conta-nova { margin-top: 10px; }
.fz-conta-nova > summary { font-weight: 600; color: var(--verde); }
.fz-largura-total { grid-column: 1 / -1; }
/* Linhas de campos: nomes e endereço com mais espaço; anos, datas, UF e
   campos curtos, menos. */
.fz-grade-fiscal-1 { grid-template-columns: 3fr 1fr; }
.fz-grade-fiscal-2 { grid-template-columns: 1.2fr 1.1fr 0.55fr 1.65fr; }
.fz-grade-pessoa { grid-template-columns: 2.2fr 1fr 1.2fr; }
.fz-grade-contato { grid-template-columns: 1fr 2fr; max-width: 820px; }
.fz-grade-ie-responsavel { grid-template-columns: 1fr 2fr; }
.fz-grade-endereco { grid-template-columns: 1fr 1fr; }
.fz-grade-escolha { grid-template-columns: 2fr 1fr; }
.fz-grade-arrendamento { grid-template-columns: 1fr 1fr 1.4fr; max-width: 980px; }
.fz-grade-conta { display: grid; grid-template-columns: 2fr 0.8fr 0.9fr 1.3fr 1fr 1.6fr; column-gap: 12px; align-items: end; max-width: 1240px; }
.fz-grade-conta label { margin-bottom: 6px; }
.fz-pergunta { border: 0; padding: 0; margin: 0 0 10px; }
.fz-pergunta legend { font-weight: 600; font-size: 0.9em; margin-bottom: 6px; padding: 0; }
.formulario .fz-opcao { display: inline-flex; align-items: center; gap: 6px; margin: 0 18px 0 0; font-weight: 400; }
.formulario .fz-apagar { display: flex; margin-top: 4px; }
.fz-marca { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; }
.fz-marca-previa { max-width: min(320px, 100%); box-sizing: border-box; max-height: 160px; width: auto; height: auto; object-fit: contain; border: 1px solid var(--cinza-borda); border-radius: var(--raio-pequeno); background: var(--branco); padding: 6px; }
.numero { text-align: right; font-variant-numeric: tabular-nums; }
/* Home — modelo do responsável de 22/10/2026 (fim da tarde). Cabeçalho: a data e o relógio, ao lado do nome da
   Organização. Linha da trilha: a faixa de cotações. Palco: no centro, a marca da Organização sobre as marcas das
   Fazendas e, abaixo delas, os climas; no canto inferior direito, a marca beAgri com a identificação e a versão; os
   créditos das fontes no pé. As marcas mantêm a proporção (object-fit: contain) e os tamanhos seguem a ALTURA da
   janela (vh), para caber sem rolagem nem corte a partir de 900 px de largura; abaixo disso a tela empilha e rola
   (limite registrado no 06). Nenhuma marca é fixa: vêm dos cadastros. */
.home-titulo-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cabecalho-relogio { margin: 0 auto 0 clamp(12px, 5vw, 96px); display: flex; align-items: center; gap: 14px;
  font-size: 1.05rem; color: var(--cinza-texto, #4a524a); white-space: nowrap; }
.cabecalho-relogio #cabecalho-data { display: inline-block; }
.cabecalho-relogio #cabecalho-data::first-letter { text-transform: uppercase; }
/* O quadro da hora com fundo branco e um contorno discreto (ajuste do responsável, 22/10/2026). */
.cabecalho-relogio #cabecalho-hora { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1;
  color: var(--cinza-escuro, #1f2a1f); background: #fff; border: 1px solid #dfe4df; border-radius: 6px; padding: 1px 10px; }
.breadcrumb-linha { display: flex; align-items: center; gap: 16px; min-width: 0; margin-bottom: 6px; }
.breadcrumb-linha .breadcrumb { flex: none; margin-bottom: 0; }
/* Na Home, a palavra "Home" da trilha sai da tela (ajuste do responsável, 22/10/2026) — continua para o leitor de
   tela, que segue sabendo onde está. */
.breadcrumb-linha:has(#home-faixa-cotacoes) > .breadcrumb { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.home-faixa-bloco { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.home-faixa-cotacoes { flex: 1 1 auto; min-width: 0; height: 46px; overflow: hidden;
  border-bottom: 2px solid var(--cinza-escuro, #1f2a1f); }
.home-faixa-iframe { width: 100%; height: 46px; border: 0; display: block; background: transparent; }
.home-faixa-indisponivel { margin: 0; line-height: 46px; font-size: .85rem; color: var(--cinza-medio, #6b746b); }
/* O conteúdo da Home é uma coluna flexível e o palco ocupa exatamente o que sobra (sem estimar pela janela); a
   margem de baixo é pequena (a das outras telas, 60 px, sobra para os botões flutuantes delas). */
.conteudo:has(#home-palco) { padding-bottom: 12px; display: flex; flex-direction: column; }
.conteudo:has(#home-palco) > * { flex: none; }
.conteudo:has(#home-palco) > .home-palco { flex: 1 0 auto; }
/* (30/10/2026, pedido do responsável) O fundo da Home no mesmo prateado dos quadros das marcas das Fazendas: as
   mesmas faixas de prata (as cores da lâmina já misturadas ao branco, como ela aparece sobre a marca), paradas.
   *Antes: fundo branco.* A marca da Organização se funde ao prateado (o branco da imagem some no multiply). */
.conteudo:has(#home-palco) {
  background: linear-gradient(115deg, #ffffff 0%, #dcdee0 14%, #f8f8f9 26%, #ffffff 34%, #ced1d4 46%,
                              #eeeff1 58%, #c4c7cb 70%, #f6f7f7 82%, #dcdee0 92%, #ffffff 100%) fixed; }
.conteudo:has(#home-palco) .home-logo-organizacao { mix-blend-mode: multiply; }
/* (30/10/2026, pedido do responsável) A MARCA DA ORGANIZAÇÃO COMO UMA BANDEIRA AO VENTO: a Home desenha a imagem
   original num quadro (canvas), coluna por coluna, cada uma deslocada por uma onda que corre do mastro (à esquerda,
   quase parado) para a ponta (à direita, onde a onda é maior), com um brilho leve nas cristas. A imagem fica no
   lugar (invisível) para o tamanho e o texto alternativo; o quadro multiplica sobre o fundo, como ela (o branco
   some). Sem o quadro (sem canvas), a imagem parada. Quem pediu menos animação vê a marca parada. Sem transform
   nem z-index no bloco, para não isolar a mistura. *Antes, no mesmo dia: um brilho que passava sobre o desenho; e
   faixas verticais em CSS, que deixavam riscos nas emendas.* */
.home-logo-bandeira { --bandeira-py: clamp(6px, 1.2vh, 12px); --bandeira-px: clamp(10px, 1.6vh, 18px);
  position: relative; display: inline-block; line-height: 0; max-width: 60%; }
.home-logo-bandeira > .home-logo-organizacao { max-width: 100%; padding: var(--bandeira-py) var(--bandeira-px); }
.home-logo-bandeira.em-movimento > .home-logo-organizacao { visibility: hidden; }
.home-bandeira-tela { position: absolute; top: var(--bandeira-py); left: var(--bandeira-px);
  width: calc(100% - 2 * var(--bandeira-px)); height: calc(100% - 2 * var(--bandeira-py));
  mix-blend-mode: multiply; pointer-events: none; display: none; }
.home-logo-bandeira.em-movimento > .home-bandeira-tela { display: block; }
/* (30/10/2026, pedido do responsável) As faixas de clima sob as marcas também prateadas, com as faixas de prata dos
   quadros. *Antes: fundo branco.* */
.conteudo:has(#home-palco) .home-clima { background: linear-gradient(115deg, #f8f8f9 0%, #dcdee0 22%, #ffffff 40%, #ced1d4 58%, #eeeff1 76%,
                                          #c4c7cb 100%); }
/* Três colunas: as laterais com a mesma largura (o conjunto fica no centro da área), a da direita guarda a marca
   beAgri no canto de baixo; os créditos numa linha própria, no pé. */
.home-palco { --home-lado: clamp(150px, 17vw, 270px); display: grid; width: 100%; box-sizing: border-box;
  grid-template-columns: var(--home-lado) minmax(0, 1fr) var(--home-lado);
  grid-template-areas: ". conjunto beagri"; grid-template-rows: 1fr;
  column-gap: 16px; row-gap: 6px; padding: clamp(4px, 1.5vh, 16px) 8px 0; }
/* (22/10/2026, ajuste do responsável sobre a captura da tela) O conjunto sobe para logo abaixo dos créditos, com
   espaços menores entre a marca da Organização, os quadros das Fazendas e os climas. */
.home-conjunto { grid-area: conjunto; align-self: start; display: flex; flex-direction: column; align-items: center;
  /* (30/10/2026, pedido do responsável) O conjunto um pouco mais abaixo na tela. *Antes: margin-top clamp(12px, 4vh, 48px).* */
  gap: clamp(8px, 2.2vh, 24px); min-width: 0; margin-top: clamp(28px, 10vh, 110px); }
/* (22/10/2026, ajuste do responsável) Um contorno leve e discreto em volta de cada marca — da Organização e de cada
   Fazenda —, para dar a noção de alinhamento; os quadros das Fazendas têm todos o mesmo tamanho. */
.home-logo-organizacao { display: block; box-sizing: border-box; width: auto; height: clamp(56px, 12vh, 128px);
  max-width: 60%; object-fit: contain; padding: clamp(6px, 1.2vh, 12px) clamp(10px, 1.6vh, 18px);
  /* (22/10/2026, pedido do responsável) Sem o quadro em volta (as marcas das Fazendas mantêm o delas).
     *Antes: border: 1px solid #c9cfc9; border-radius: 6px.* */
  border: 0; background: transparent; }
/* Marcas das Fazendas (linha 1) e climas (linha 2) na MESMA grade: cada coluna tem a largura do que leva (a marca
   ou o clima, o maior — todas iguais, para o conjunto ficar no centro); o clima N fica centrado sob a marca N. As colunas encolhem
   se faltar espaço (minmax(0, …)), sem rolagem lateral. Mais climas que marcas: colunas a mais, na mesma linha. */
.home-grade { display: grid; justify-content: center;
  /* (30/10/2026, pedido do responsável) Quadros das Fazendas menores e mais espaço entre eles, para a marca da
     Organização, maior, no meio — os três mais ou menos do mesmo tamanho (até 320 px de largura cada quadro).
     *Antes: grid-auto-columns: minmax(0, 1fr); column-gap clamp(24px, 5vw, 88px); no mesmo dia, clamp(48px, 10vw,
     176px), clamp(64px, 15vw, 280px) e quadros de até 440 px.* */
  grid-auto-columns: minmax(0, 320px);
  /* (30/10/2026, pedido do responsável) A faixa do clima quase encostada no quadro. *Antes: row-gap clamp(8px, 2vh, 22px).* */
  /* (30/10/2026, pedido do responsável) Ainda mais espaço no meio, para a marca da Organização maior. *Antes, no
     mesmo dia: clamp(64px, 18vw, 340px).* */
  column-gap: clamp(64px, 24vw, 460px); row-gap: 4px; max-width: 100%; }
.home-marcas, .home-climas { display: contents; }
.home-marcas { margin: 0; padding: 0; list-style: none; }
.home-marca { grid-row: 1; box-sizing: border-box; height: clamp(64px, 19vh, 190px); display: flex; align-items: center;
  justify-content: center; min-width: 0; padding: clamp(6px, 1.4vh, 16px) clamp(10px, 1.8vw, 28px);
  border: 1px solid #c9cfc9; border-radius: 6px; background: #fff; }
.home-marca img { height: 100%; width: auto; max-width: min(320px, 100%); object-fit: contain; }
/* O clima: quadro branco, centrado sob a sua marca. */
.home-clima { grid-row: 2; justify-self: center; width: 210px; max-width: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid var(--cinza-borda, #dde3dd); border-radius: 6px;
  padding: clamp(4px, .8vh, 8px) 10px; text-align: center; }
.home-clima p { margin: 0; }
.home-clima-nome { font-weight: 600; font-size: 1.05rem; }
.home-clima-tempo { display: flex; justify-content: center; align-items: center; gap: 6px; }
.home-clima-icone { font-size: 1.4rem; line-height: 1; }
.home-clima-temp { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.home-clima-desc { font-size: .88rem; }
.home-clima-hora { font-size: .72rem; color: var(--cinza-medio, #6b746b); }
.home-clima-indisponivel { font-size: .85rem; color: var(--cinza-medio, #6b746b); padding: 6px 0; }
.home-clima-aviso { text-align: center; }
.home-clima-estado, .home-clima-configurar { margin: 0; font-size: .88rem; color: var(--cinza-medio, #6b746b); }
/* A marca beAgri e a versão: canto inferior direito. *(25/10/2026: centralizadas no pé — ver no fim do arquivo.)* */
.home-beagri { grid-area: beagri; align-self: end; justify-self: end; display: flex; flex-direction: column;
  align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
/* (30/10/2026, pedido do responsável) A marca beAgri um pouco menor. *Antes: height clamp(60px, 15vh, 160px).* */
.home-logo { display: block; width: auto; max-width: 100%; height: clamp(48px, 11vh, 115px); object-fit: contain; }
.home-identificacao { margin: 0; font-size: .82rem; color: var(--cinza-medio, #6b746b); text-align: center; }
.home-compilacao { display: block; font-size: .72rem; font-family: Consolas, "Courier New", monospace; opacity: .75; }
/* Os créditos das fontes: pequenos e em cinza claro, bem discretos (ajuste do responsável, 22/10/2026); os links
   continuam reconhecíveis (sublinhados), na mesma cor. */
.home-creditos { margin: 3px 0 0; font-size: clamp(9px, .62rem, 11px); color: #a3aba3; text-align: right; }
.home-creditos a { color: inherit; text-decoration: underline; text-decoration-color: #c9cfc9; }
@media (max-width: 900px) {
  /* Tela estreita (tablet em pé, celular): uma coluna — o conjunto, a marca beAgri e os créditos — e o conteúdo
     PODE rolar: limite registrado; sem rolagem só a partir de 900 px de largura. A data e a hora continuam no
     cabeçalho, que quebra a linha. */
  .home-palco { grid-template-columns: minmax(0, 1fr); grid-template-areas: "conjunto" "beagri";
    grid-template-rows: none; row-gap: 16px; }
  .home-beagri { justify-self: center; }
  .conteudo:has(#home-palco) > .home-palco { flex: none; }
  .cabecalho-relogio { margin: 0 auto 0 0; font-size: .95rem; }
}
@media (max-width: 560px) {
  .breadcrumb-linha { flex-direction: column; align-items: stretch; gap: 4px; }
  .home-creditos { text-align: left; }
}
@media (max-width: 900px) {
  .fz-grade-fiscal-2, .fz-grade-pessoa, .fz-grade-arrendamento { grid-template-columns: 1fr 1fr; }
  .fz-grade-conta { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 620px) {
  .fz-grade-fiscal-1, .fz-grade-fiscal-2, .fz-grade-pessoa, .fz-grade-contato, .fz-grade-ie-responsavel,
  .fz-grade-endereco, .fz-grade-escolha, .fz-grade-arrendamento, .fz-grade-conta,
  .fz-grade-escolha-pessoa { grid-template-columns: 1fr; }
  .fz-secao-corpo { padding: 12px 10px; }
  .fz-secao-resumo { display: none; }
}
/* (D287) Dentro de uma seção do painel, a própria seção já é o quadro: o
   formulário não desenha outra caixa em volta. */
.fz-secao-corpo .formulario { background: none; border: 0; padding: 0; margin: 0 0 8px; }
.fz-secao-corpo .fz-grade-conta { padding-top: 6px; }
/* O atributo hidden vence o display das grades do painel (dados do produtor
   escolhido, confirmação de apagar o arrendamento, prévia da marca). */
.fz-painel [hidden], .fz-formulario [hidden] { display: none !important; }
.fz-tabela-culturas th.numero, .fz-tabela-culturas td.numero { text-align: right; }
.formulario .fz-pergunta label.fz-opcao, .formulario .fz-campos label.fz-apagar { display: inline-flex; align-items: center; gap: 6px; margin: 0 18px 0 0; font-weight: 400; }

/* (T016–T021, 18/10/2026) Painel simplificado. */
.fz-grade-fiscal-3 { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.fz-grade-escolha-pessoa { grid-template-columns: minmax(0, 2.2fr) minmax(0, 2.2fr); max-width: 980px; }
/* Linha do arrendamento: os três campos alinham pela base, mesmo que um
   rótulo quebre em duas linhas — a quebra não empurra só um campo. */
.fz-grade-arrendamento { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr); max-width: 1040px; align-items: end; }
.fz-grade-arrendamento > label { display: flex; flex-direction: column; justify-content: flex-end; }
.fz-rotulo { display: block; }
/* "Dados bancários": só a seta e o nome; os campos aparecem ao expandir. */
.fz-dados-bancarios > summary { cursor: pointer; font-weight: 600; font-size: 0.9em; color: var(--cinza-texto); padding: 6px 0; display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.fz-dados-bancarios > summary::-webkit-details-marker { display: none; }
/* A seta própria (a do navegador some com o display flex), como nas seções. */
.fz-dados-bancarios > summary::before { content: "▶"; font-size: 0.75em; color: var(--cinza-medio); }
.fz-dados-bancarios[open] > summary::before { content: "▼"; }
.fz-dados-bancarios > summary:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.fz-dados-bancarios[open] > summary { margin-bottom: 4px; }
.fz-dados-bancarios .fz-conta-form { padding: 8px 0 4px; border-bottom: 1px solid var(--cinza-borda); }
.fz-conta-outra { margin-top: 8px; }
.fz-conta-outra > summary { cursor: pointer; font-size: 0.85em; font-weight: 600; color: var(--verde); }
#fz-proprietario-troca { margin: 4px 0 8px; }
@media (max-width: 900px) {
  .fz-grade-arrendamento { grid-template-columns: 1fr 1fr; }
  .fz-grade-arrendamento > label:last-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .fz-grade-arrendamento, .fz-grade-escolha-pessoa { grid-template-columns: 1fr; }
}

/* (T025/T029, 18/10/2026) Produtos e Classes de Produtos */
/* T025 — cadastro de Produto, Serviço e Tributo/Tx. O formulário usa a
   largura do padrão (.fz-formulario, 1240 px) e o mesmo componente de linhas
   (.formulario-grade-linha); aqui só a proporção de cada linha, as marcações
   em linha e a faixa "Incluir unidade". As tabelas da edição (Unidades
   permitidas, Apresentações) ficam na mesma largura do formulário. */
.prod-pagina { max-width: 1240px; }
.prod-formulario .formulario-secao-titulo { margin-top: 16px; }
.prod-formulario .formulario-secao-titulo:first-of-type { margin-top: 0; }
.prod-grade-descricao { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.prod-grade-descricao-natureza { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.2fr) minmax(0, 1fr); }
.prod-grade-classe, .prod-grade-estoque { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prod-grade-nomes { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
/* Natureza em leitura (Serviço e Tributo/Tx): rótulo e caixa com a mesma
   altura dos campos vizinhos. */
.prod-campo-leitura { margin-bottom: 6px; min-width: 0; }
.prod-rotulo { display: block; font-size: 0.9em; font-weight: 600; color: var(--cinza-texto); }
.prod-campo-leitura .doc-leitura { margin-top: 4px; padding: 7px 10px; min-height: 0; }
/* Caixa de marcar com o texto ao lado (controle de estoque, Ativo). O seletor
   vence a regra geral de rótulo do .formulario, que poria a caixa em bloco. */
.formulario.prod-formulario label.prod-marcacao { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 400; }
.prod-marcacao input[type="checkbox"] { margin: 0; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--verde); }
.prod-pagina > .formulario-secao-titulo { margin-top: 18px; }
.prod-linha-incluir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 4px 0 16px; font-size: 0.9em; }
.prod-linha-incluir label { margin: 0; font-weight: 600; color: var(--cinza-texto); }
.prod-linha-incluir select { min-width: min(260px, 100%); max-width: 100%; padding: 7px 10px; font: inherit; color: var(--cinza-texto);
                             background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: var(--raio-pequeno); }
@media (max-width: 900px) {
  .prod-grade-descricao-natureza, .prod-grade-nomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod-grade-descricao-natureza > :first-child, .prod-grade-nomes > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .prod-grade-descricao, .prod-grade-descricao-natureza, .prod-grade-classe, .prod-grade-nomes,
  .prod-grade-estoque { grid-template-columns: minmax(0, 1fr); }
}

/* T029 — Config. Sistema → Classes de Produtos. Na tabela: campos com a
   mesma altura e letra da lista, colunas curtas centradas e os dois botões
   da linha com a mesma largura, para alinharem de uma linha para a outra. */
.cp-tabela td, .cp-tabela-grupos td { vertical-align: middle; }
.cp-tabela th.cp-centro, .cp-tabela td.cp-centro,
.cp-tabela-grupos th.cp-centro, .cp-tabela-grupos td.cp-centro { text-align: center; }
.cp-tabela th.doc-curto, .cp-tabela td.doc-curto { padding-left: 12px; padding-right: 12px; }
.cp-tabela .cp-col-nome { min-width: 14em; }
.cp-tabela td input[type="text"], .cp-tabela-grupos td input[type="text"] {
  box-sizing: border-box; width: 100%; height: 30px; margin: 0; padding: 4px 8px; font: inherit; font-weight: 400;
  color: var(--cinza-texto); background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: var(--raio-pequeno);
}
.cp-tabela input[type="checkbox"], .cp-tabela-grupos input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--verde); cursor: pointer;
}
.cp-contagem { font-variant-numeric: tabular-nums; }
.cp-tabela .cp-acoes-linha { gap: 8px; }
.cp-tabela .cp-acoes-linha .botao-discreto, .cp-tabela-grupos .botao-discreto { min-width: 76px; min-height: 30px; padding: 3px 12px; }

/* A janela "+ Grupo". O seletor tem a mesma força do dialog.pc-modal geral
   e mais uma classe — por isso vence o limite de 380 px dele (a regra antiga,
   só .cp-dlg-grupos, perdia por especificidade). Largura proporcional ao
   monitor com limite, como o cadastro de fornecedor dentro do documento
   (dialog.pc-modal.doc-modal-largo). Topo e rodapé fixos; só o corpo rola. */
dialog.pc-modal.cp-dlg-grupos {
  width: min(760px, calc(100vw - 32px));
  max-width: min(760px, calc(100vw - 32px));
  max-height: min(90vh, 760px);
  padding: 0;
  overflow: hidden;
}
dialog.pc-modal.cp-dlg-grupos[open] { display: flex; flex-direction: column; }
.cp-dlg-grupos [hidden] { display: none !important; }
.cp-dlg-topo { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px 20px 10px; border-bottom: 1px solid var(--cinza-borda); }
.cp-dlg-topo .pc-modal-titulo { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.05em; font-weight: 700; line-height: 1.3;
                                color: var(--cinza-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-dlg-fechar-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
                   padding: 0; font: inherit; font-size: 1.35em; line-height: 1; color: var(--cinza-medio); background: none;
                   border: 1px solid transparent; border-radius: var(--raio-pequeno); cursor: pointer; }
.cp-dlg-fechar-x:hover { background: var(--cinza-fundo); color: var(--cinza-texto); }
.cp-dlg-fechar-x:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.cp-dlg-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 20px; }
.cp-dlg-rodape { flex: 0 0 auto; padding: 10px 20px 14px; border-top: 1px solid var(--cinza-borda); }
.cp-dlg-rodape-normal { display: flex; justify-content: flex-end; }
.cp-dlg-grupos .cp-dlg-confirmar-texto { margin: 0 0 10px; font-size: 0.92em; color: var(--cinza-texto); }
.cp-novo-grupo { margin: 0 0 18px; padding: 10px 12px 12px; background: var(--cinza-fundo); border: 1px solid var(--cinza-borda);
                 border-radius: var(--raio); }
.cp-novo-grupo-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.cp-novo-grupo-form label { margin: 0; font-size: 0.9em; font-weight: 600; color: var(--cinza-texto); }
.cp-novo-grupo-form input[type="text"] { flex: 1 1 16em; min-width: 0; box-sizing: border-box; height: 36px; padding: 4px 8px;
                                         font: inherit; font-size: 0.9em; color: var(--cinza-texto); background: var(--branco);
                                         border: 1px solid var(--cinza-borda); border-radius: var(--raio-pequeno); }
.cp-dlg-grupos .formulario-secao-titulo { margin-bottom: 8px; }
.cp-dlg-grupos .cp-tabela-grupos { width: 100%; }
@media (max-width: 620px) {
  .cp-dlg-topo .pc-modal-titulo { white-space: normal; overflow-wrap: anywhere; }
  .cp-dlg-topo, .cp-dlg-corpo, .cp-dlg-rodape { padding-left: 14px; padding-right: 14px; }
}

/* =====================================================================
   T07 (2026-10-21) — Apontamento de Custo › Produto com estoque
   (apontamento/estoques.html). Só esta tela usa as classes apo-*.
   ---------------------------------------------------------------------
   Causa do defeito: o quadro de cada Fazenda herda de almoxarifado.css o
   `table-layout: fixed`, que tira a largura das colunas da primeira linha.
   Sem <colgroup>, essa linha dava `width: 1%` às colunas de número e de
   ações (1% da tabela, poucos pixels): os títulos "Produtos com saldo" e
   "Valor", sem quebra, passavam um por cima do outro; os botões conferir
   e apontar saíam da caixa e criavam rolagem lateral no quadro; e o
   Estoque ficava com toda a sobra. Agora as larguras são declaradas (o
   mesmo padrão do painel do Almoxarifado), o título pode quebrar linha,
   os botões quebram linha em vez de vazar, e o quadro tem largura máxima
   para os números não ficarem longe do nome do estoque em tela larga.
   Quando o quadro fica estreito — tela pequena, zoom, ou o menu lateral
   expandido e arrastado até 420px —, cada linha vira ficha com rótulo.
   A troca é pela largura do PRÓPRIO quadro (container query), e não só
   pela da janela: o menu lateral muda a área útil sem mudar a janela.
   ===================================================================== */
.alm-fazenda:has(.apo-estoques-tabela) { max-width: 62rem; }
/* "sem saldo" / "R$ … em estoque" não se parte ao meio; quem quebra é o nome. */
.alm-fazenda:has(.apo-estoques-tabela) > summary .alm-fazenda-total { white-space: nowrap; }
.apo-c-estoque  { width: auto; }
.apo-c-produtos { width: 9.5rem; }
.apo-c-valor    { width: 10rem; }
.apo-c-acao     { width: 13rem; }
table.apo-estoques-tabela thead th { white-space: normal; vertical-align: bottom; }
table.apo-estoques-tabela td.alm-col-nome { overflow-wrap: anywhere; }
table.apo-estoques-tabela td.alm-col-acao { white-space: normal; }
.apo-estoques-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 6px;
}
.alm-fazenda-corpo:has(.apo-estoques-tabela) { container-type: inline-size; }
/* 46rem: as três colunas declaradas (32,5rem) e pelo menos ~13rem para o
   nome do estoque, mais os respiros do quadro. Abaixo disso, ficha. */
@container (max-width: 46rem) {
  table.apo-estoques-tabela,
  table.apo-estoques-tabela thead,
  table.apo-estoques-tabela tbody,
  table.apo-estoques-tabela tr,
  table.apo-estoques-tabela th,
  table.apo-estoques-tabela td { display: block; width: auto; }
  table.apo-estoques-tabela colgroup { display: none; }
  table.apo-estoques-tabela thead { position: absolute; left: -9999px; }
  table.apo-estoques-tabela tr {
    border: 1px solid var(--borda, #e2e6ea);
    border-radius: 5px;
    margin-bottom: 6px;
    padding: 4px 6px;
  }
  table.apo-estoques-tabela td,
  table.apo-estoques-tabela td.alm-col-num,
  table.apo-estoques-tabela td.alm-col-centro { text-align: left; padding: 2px 4px; white-space: normal; }
  table.apo-estoques-tabela td[data-rotulo]::before {
    content: attr(data-rotulo) ": ";
    font-size: 0.76rem;
    color: var(--texto-auxiliar, #5a6672);
  }
  .apo-estoques-acoes { justify-content: flex-start; padding-top: 2px; }
}

/* =====================================================================
   T13 (21/10/2026) — NOVA VENDA (Documento de Saída) no padrão de tela.
   Usada só por documentos/saida_formulario.html (classes saida-*).

   O formulário ocupa a largura útil do quadro (sem o teto de 1240 px do
   .fz-formulario). Os campos ficam em linhas flexíveis que quebram sozinhas
   conforme o espaço — menu lateral aberto ou recolhido, qualquer monitor,
   celular —, sem largura fixa e sem rolagem lateral. Cada campo tem a base
   da informação que carrega (número, série, data e valores menores; Cliente,
   Produto, apresentação e Conta de receita maiores) e cresce na proporção
   dela. Cada item vendido é um bloco de duas linhas, todos os campos com
   rótulo à vista. Rótulos e campos no corpo normal do .formulario (nada de
   letra reduzida). Nenhum componente compartilhado é redefinido: os
   seletores começam por .saida-formulario.
   ===================================================================== */
.formulario.fz-formulario.saida-formulario { max-width: none; }
.saida-formulario .saida-linha { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 16px; }
.formulario.saida-formulario .saida-linha > label,
.formulario.saida-formulario .saida-linha > .saida-campo { flex: 1 1 12em; min-width: 0; margin: 0 0 8px; }
.saida-formulario .saida-campo { display: block; font-size: 0.9em; font-weight: 600; color: var(--cinza-texto); }
.saida-formulario .saida-rotulo { display: block; }
/* Largura conforme a informação: base mínima e proporção de crescimento. */
.formulario.saida-formulario .saida-linha > .saida-c-largo    { flex: 3 1 20em; }
.formulario.saida-formulario .saida-linha > .saida-c-medio    { flex: 2 1 14em; }
.formulario.saida-formulario .saida-linha > .saida-c-ciclo    { flex: 1.5 1 13em; }
/* (30/10/2026, pedido do responsável) Operação e Tipo de documento bem menos compridos. */
.formulario.saida-formulario .saida-linha > .saida-c-operacao { flex: 0 1 13em; }
.formulario.saida-formulario .saida-linha > .saida-c-tipo     { flex: 0 1 11em; }
/* (30/10/2026, pedido do responsável) Nº Contrato Vinculado, entre o Tipo de documento e o Nº da Nota Fiscal. */
.formulario.saida-formulario .saida-linha > .saida-c-contrato { flex: 0 1 11.5em; min-width: 0; white-space: nowrap; }
/* Para o Nº Contrato Vinculado caber na mesma linha: a Operação e a Fazenda um pouco menores. */
.formulario.saida-formulario.saida-em-quadros .saida-linha > .saida-c-operacao { flex: 0 1 12em; }
.formulario.saida-formulario.saida-em-quadros .saida-quadro-documento .saida-linha > .saida-c-fazenda { flex: 0 1 14em; }
.formulario.saida-formulario.saida-em-quadros .saida-linha > label[for="saida-numero"] { flex: 0 1 9em; }
/* (30/10/2026, pedido do responsável) Fazenda e Cliente menores; CNPJ e Endereço do cliente na mesma linha. */
.formulario.saida-formulario .saida-linha > .saida-c-fazenda  { flex: 0 1 15em; }
.formulario.saida-formulario .saida-linha > .saida-c-cliente  { flex: 0 1 18em; }
.formulario.saida-formulario .saida-linha > .saida-c-cnpj     { flex: 0 1 16em; }
.formulario.saida-formulario .saida-linha > .saida-c-endereco { flex: 1 1 18em; }
.formulario.saida-formulario .saida-linha > .saida-c-ie       { flex: 0 1 11em; }
.formulario.saida-formulario .saida-linha > .saida-c-bairro   { flex: 0 1 11em; }
.formulario.saida-formulario .saida-linha > .saida-c-municipio { flex: 0 1 13em; }
.formulario.saida-formulario .saida-linha > .saida-c-cep      { flex: 0 0 7.5em; }
.formulario.saida-formulario :is(#saida-endereco, #saida-ie) { background: #eef0ea; color: #333; cursor: default; }
/* (30/10/2026, pedido do responsável) Nº do registro e Data Sist. (automáticos, só leitura); Chave de acesso menor. */
.formulario.saida-formulario .saida-linha > .saida-c-registro { flex: 0 0 8.5em; }
.formulario.saida-formulario .saida-linha > .saida-c-datasist { flex: 0 0 7.5em; }
.formulario.saida-formulario :is(#saida-registro, #saida-data-sist) { background: #eef0ea; color: #333;
  border: 1px solid #8d9a7c; border-radius: 4px; white-space: nowrap; }
.formulario.saida-formulario #saida-registro .saida-leitura-vazia { font-style: italic; color: #666; font-weight: 400; }
/* A Chave de acesso do tamanho dos 44 números (e o rótulo inteiro). */
.formulario.saida-formulario .saida-linha > .saida-c-chave.saida-c-chave { flex: 0 0 auto; }
.formulario.saida-formulario #saida-chave { width: calc(44ch + 18px); max-width: 100%; font-variant-numeric: tabular-nums; }
/* (30/10/2026, pedido do responsável) Letra bem menor na Chave de acesso: o campo encolhe junto (44ch na letra dele) e
   a Fazenda volta à primeira linha. */
.formulario.saida-formulario.saida-em-quadros #saida-chave { font-size: .72em; padding-top: 5px; padding-bottom: 5px; }
.formulario.saida-formulario.saida-em-quadros .saida-linha > .saida-c-curto { flex: 0 1 12em; }
.formulario.saida-formulario.saida-em-quadros .saida-linha > .saida-c-serie { flex: 0 1 7em; }
/* (30/10/2026, pedido do responsável) O que não é editável fica cinza e em itálico, para se diferenciar: Nº do
   registro, Data Sist., Operação e Tipo travados, Inscrição Estadual, Endereço e o Total do item. */
.formulario.saida-formulario.saida-em-quadros :is(#saida-registro, #saida-data-sist, #saida-endereco, #saida-ie,
    select[disabled], input[readonly], .saida-leitura) {
  background: #d4d6d2; color: #444; font-style: italic; cursor: default; }
.formulario.saida-formulario.saida-em-quadros #saida-registro .saida-leitura-vazia { color: #555; }
/* (30/10/2026, pedido do responsável) A nota de venda em quadros: Documento, Itens vendidos, Parcelas a receber,
   Observação — cada um verde, sem borda própria; a moldura preta única envolve todos e os espaços são cinza. */
#conteudo-principal #saida-form.saida-em-quadros { background: none; border: 0; padding: 0; }
#conteudo-principal #saida-form.saida-em-quadros .saida-quadro { background: var(--verde-musgo, #556b2f);
  border: 0; border-radius: 6px; padding: 10px 14px 8px; margin: 0 0 6px; }
/* Uma moldura preta única em volta de todos os quadros; os espaços entre eles em cinza. */
#conteudo-principal #saida-form.saida-em-quadros .saida-moldura { background: #c8cbc4; border: 2px solid #111; border-radius: 8px;
  padding: 6px; margin: 0 0 12px; }
#conteudo-principal #saida-form.saida-em-quadros .saida-moldura > .saida-quadro:last-child { margin-bottom: 0; }
#conteudo-principal #saida-form.saida-em-quadros .saida-quadro > .formulario-secao-titulo:first-child,
#conteudo-principal #saida-form.saida-em-quadros .saida-quadro > .saida-secao-com-ciclo:first-child {
  margin-top: 0; padding-top: 0; border-top: 0; }
#conteudo-principal #saida-form.saida-em-quadros .saida-quadro > .acoes-formulario:last-child { margin-bottom: 2px; }
#conteudo-principal #saida-form.saida-em-quadros > .acoes-formulario .saida-falta { color: #b26a00; }
/* O Ciclo gerencial ao lado do título "Parcelas a receber" (ou do aviso "Sem parcelas"). */
.formulario.saida-formulario .saida-secao-com-ciclo { display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 4px 24px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .32); }
.formulario.saida-formulario .saida-secao-com-ciclo > .formulario-secao-titulo { margin: 0 0 6px; padding: 0;
  border: 0; flex: 0 0 auto; }
.formulario.saida-formulario .saida-secao-com-ciclo > #saida-sem-parcelas { margin: 0 0 6px; flex: 0 1 auto; }
.formulario.saida-formulario .saida-secao-com-ciclo > .saida-c-ciclo { flex: 0 1 24em; min-width: 0; margin: 0 0 6px; }
/* (30/10/2026, regra do responsável) A Conta de receita da nota, na linha do Ciclo gerencial. */
.formulario.saida-formulario .saida-secao-com-ciclo > .saida-c-conta { flex: 0 1 26em; min-width: 0; margin: 0 0 6px; }
/* (30/10/2026, pedido do responsável) O Ciclo gerencial e a Conta de receita no quadro APONTAMENTO, sob o título. */
.formulario.saida-formulario .saida-secao-com-ciclo.saida-apontamento-campos { margin-top: 0; padding-top: 0;
  border-top: 0; }
/* (30/10/2026, pedido do responsável) O + ITEM pequeno, ao lado do título "Itens vendidos". */
.formulario.saida-formulario .saida-titulo-com-acao { align-items: center; gap: 4px 12px; }
.formulario.saida-formulario .saida-titulo-com-acao > .saida-botao-pequeno { margin: 0 0 6px; }
.formulario.saida-formulario .saida-titulo-com-acao > .saida-total-venda { margin: 0 0 6px auto; white-space: nowrap; }
.formulario.saida-formulario .saida-titulo-com-acao > .saida-parcelas-do-contrato-nota { margin: 0 0 6px; }
#saida-parcelas-contrato > #saida-parcelas-contrato-vazio { margin: 0; }
.formulario.saida-formulario button.saida-botao-pequeno { min-height: 0; padding: 3px 10px; font-size: .85em;
  line-height: 1.3; letter-spacing: .02em; }
.saida-formulario .saida-ciclo-aviso { display: block; margin-top: 3px; padding: 3px 8px; border-radius: 4px;
  background: #fdecea; color: #b71c1c; font-weight: 700; font-size: .92em; }
.saida-formulario .saida-ciclo-aviso[hidden] { display: none; }
.formulario.saida-formulario .saida-linha > .saida-c-curto    { flex: 1 1 9em; }
.formulario.saida-formulario .saida-linha > .saida-c-serie    { flex: 0.5 1 8.5em; }
.formulario.saida-formulario .saida-linha > .saida-c-data     { flex: 0 0 11em; }
.formulario.saida-formulario .saida-linha > .saida-c-chave    { flex: 2 1 24em; }
.formulario.saida-formulario .saida-linha > .saida-c-valor    { flex: 1 1 9em; }
.formulario.saida-formulario .saida-linha > .saida-c-producao { flex: 3 1 22em; }
/* Data e observação com o mesmo acabamento dos demais campos (a data era
   um campo pequeno ao lado do rótulo, porque .formulario não estiliza
   input[type=date] nem textarea). */
.formulario.saida-formulario input[type="date"],
.formulario.saida-formulario textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 7px 10px;
  font: inherit;
  font-weight: 400;
  color: var(--cinza-texto);
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
}
.formulario.saida-formulario textarea { resize: vertical; min-height: 3.6em; }
/* (30/10/2026, pedido do responsável) A Observação da nota em uma linha só. */
.formulario.saida-formulario #saida-obs { min-height: 0; }
.saida-formulario .saida-qtd,
.saida-formulario .saida-vu,
.saida-formulario .saida-parcela-valor { text-align: right; font-variant-numeric: tabular-nums; }
/* Total do item: leitura com a altura de um campo, número à direita. */
.saida-formulario .saida-leitura {
  display: block;
  margin-top: 4px;
  padding: 7px 10px;
  font-weight: 400;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  color: var(--cinza-texto);
  background: #f7f9f7;
  border: 1px dashed var(--cinza-borda);
  border-radius: var(--raio-pequeno);
}
/* Itens vendidos: um bloco por item, numerado pela CSS ("+ ITEM" copia o
   primeiro bloco e o número acompanha). */
.saida-formulario .saida-itens-lista { counter-reset: saida-item; display: flex; flex-direction: column; gap: 10px; margin: 0 0 8px; }
.saida-formulario .saida-item {
  counter-increment: saida-item;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 6px 14px 2px;
}
.saida-formulario .saida-item-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--cinza-borda);
}
.saida-formulario .saida-item-numero::before {
  content: "Item " counter(saida-item);
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cinza-medio);
}
/* Produção: o vínculo, a marcação "retirar vínculo" e a Gleba lado a lado,
   quebrando linha quando não cabem. */
.saida-formulario .saida-producao-caixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: 4px;
  min-height: 2.3em;
  font-weight: 400;
}
.saida-formulario .saida-vinculo-texto { color: var(--cinza-medio); }
.formulario.prod-formulario.saida-formulario label.saida-retirar-rotulo { margin: 0; }
.formulario.saida-formulario .saida-producao-caixa select.saida-gleba { flex: 1 1 12em; width: auto; min-width: 0; margin-top: 0; }
/* O que falta para registrar: uma linha curta junto do campo sem opção (a
   orientação completa fica no ⓘ da faixa de situação do topo). */
.saida-formulario .saida-falta { display: block; margin-top: 3px; font-size: 0.95em; font-weight: 400; color: #6b5310; }
.saida-formulario p.saida-falta-secao { margin: 0 0 8px; font-size: 0.9em; }
/* (30/10/2026, pedido do responsável) As parcelas uma ao lado da outra: cada uma num cartão branco, no tom da tabela
   dos itens (faixa verde-clara com o número em cima), e os cartões quebram linha quando não cabem. */
.saida-formulario .saida-parcelas-lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.saida-formulario .saida-parcela { flex: 0 0 12.5em; background: #fff; border: 1px solid var(--cinza-borda);
  border-radius: var(--raio); overflow: hidden; }
#conteudo-principal #saida-form .saida-parcela-topo { display: flex; align-items: center; justify-content: space-between;
  gap: 6px; min-height: 2em; padding: 3px 6px; background: #eef2e8; border-bottom: 2px solid #cfd8c4; color: #2f3d1a;
  font-weight: 800; font-size: .9em; }
#conteudo-principal #saida-form .saida-parcela > label { display: block; margin: 0; padding: 4px 6px 0; color: #2f3d1a;
  font-size: .85em; font-weight: 700; }
#conteudo-principal #saida-form .saida-parcela > label:last-child { padding-bottom: 6px; }
#conteudo-principal #saida-form .saida-parcela-topo .saida-parcela-numero { color: inherit; }
.formulario.saida-formulario .saida-parcela > label > input { display: block; width: 100%; min-width: 0; margin: 2px 0 0;
  font-size: 1.12em; font-weight: 400; }
.saida-formulario .saida-parcela .saida-parcela-valor { text-align: right; }
.saida-formulario .saida-parcelas:not(.saida-linhas-editando) .saida-col-acao { display: none; }
/* (30/10/2026, pedido do responsável) A janela do + PARCELA: número, periodicidade, 1º vencimento e valores. */
.saida-dlg-parcelas { width: min(30rem, calc(100vw - 32px)); }
.saida-dlg-parcelas-campos { display: grid; gap: 12px; margin: 8px 0 4px; }
.saida-dlg-parcelas-campos > label { display: grid; gap: 4px; font-weight: 700; }
.saida-dlg-parcelas-campos > label[hidden] { display: none; }
.saida-dlg-parcelas-campos input[type="number"] { width: 7em; }
.saida-dlg-parcelas-campos input[type="date"] { width: 11em; }
.saida-dlg-parcelas-grupo { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 6px 10px 8px;
  border: 1px solid var(--cinza-borda); border-radius: var(--raio); }
.saida-dlg-parcelas-grupo > legend { padding: 0 4px; font-weight: 700; }
.saida-dlg-parcelas-grupo > label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
/* (30/10/2026) Os botões das parcelas foram para cima; embaixo fica só o aviso da soma, e só quando há aviso. */
#saida-form .saida-quadro-parcelas > .acoes-formulario:has(> #saida-soma-parcelas:empty) { display: none; }
/* (22/10/2026, pedido do responsável) Letra menor em todo o formulário da venda — rótulos, campos, itens, parcelas e
   botões, que acompanham o corpo do formulário; o título da página segue o padrão das telas.
   *Antes: rótulos e campos no corpo normal do .formulario (nada de letra reduzida).* */
.formulario.saida-formulario { font-size: max(11px, .84rem); }
.formulario.saida-formulario .botao, .formulario.saida-formulario .botao-secundario { font-size: .92em; }
.formulario.saida-formulario input[type="text"], .formulario.saida-formulario input[type="date"],
.formulario.saida-formulario select, .formulario.saida-formulario textarea,
.formulario.saida-formulario .saida-leitura { padding: 5px 8px; }
/* Operação e Tipo travados pelo percurso NF-e ▸ Venda de Mercadoria: o campo fica cinza e a linha diz por quê. */
.formulario.saida-formulario select[disabled] { background: var(--cinza-fundo); color: var(--cinza-texto); opacity: 1; }
.saida-formulario .saida-travado { display: block; margin-top: 3px; font-size: .9em; font-weight: 400; color: var(--cinza-medio); }
/* (30/10/2026, pedido do responsável) Letras, números e campos menores na venda, e os itens em forma de tabela (uma
   linha por item, os títulos das colunas em cima), sobre fundo branco como as demais caixas do formulário.
   *Antes: letra em .84rem, campos com 5px 8px, e cada item num bloco de duas linhas.* */
.formulario.saida-formulario { font-size: max(10px, .74rem); }
.formulario.saida-formulario input[type="text"], .formulario.saida-formulario input[type="date"],
.formulario.saida-formulario select, .formulario.saida-formulario textarea,
.formulario.saida-formulario .saida-leitura { padding: 3px 6px; font-size: 1em; }
.formulario.saida-formulario .saida-linha > label, .formulario.saida-formulario .saida-linha > .saida-campo { margin-bottom: 4px; }
.formulario.saida-formulario .formulario-secao-titulo { margin-top: 10px; margin-bottom: 6px; font-size: .95em; }
.saida-formulario .saida-itens-wrap { margin: 0 0 6px; background: #fff; border: 1px solid var(--cinza-borda);
  border-radius: var(--raio); }
.saida-formulario .saida-itens-tabela { width: 100%; border-collapse: separate; border-spacing: 0; }
.saida-formulario .saida-itens-tabela tbody.saida-itens-lista { display: table-row-group; }
.saida-formulario .saida-itens-tabela tr.saida-item { background: transparent; border: 0; padding: 0; }
#conteudo-principal #saida-form .saida-itens-tabela th { background: #eef2e8; color: #2f3d1a; font-size: .9em;
  font-weight: 800; text-align: left; padding: 5px 6px; border-bottom: 2px solid #cfd8c4; white-space: nowrap; }
.saida-formulario .saida-itens-tabela td { padding: 4px 6px; border-bottom: 1px solid #edf0ea; vertical-align: middle; }
.saida-formulario .saida-itens-tabela tbody tr:last-child td { border-bottom: 0; }
.saida-formulario .saida-itens-tabela td :is(input[type="text"], select) { width: 100%; min-width: 0; margin: 0; }
.formulario.prod-formulario.saida-formulario .saida-itens-tabela label.saida-retirar-rotulo { display: inline-flex;
  align-items: center; gap: 4px; white-space: nowrap; }
.saida-formulario .saida-itens-tabela .saida-retirar-marca { width: auto; margin: 0; }
.saida-formulario .saida-itens-tabela .saida-leitura { margin: 0; white-space: nowrap; overflow-wrap: normal; }
.saida-formulario .saida-itens-tabela .saida-col-item { width: 3.2em; text-align: center; }
.saida-formulario .saida-itens-tabela td.saida-col-item .saida-item-numero::before { content: counter(saida-item);
  font-size: 1em; color: #2f3d1a; }
.saida-formulario .saida-itens-tabela .saida-col-produto { min-width: 13em; }
.saida-formulario .saida-itens-tabela .saida-col-conta { min-width: 13em; }
.saida-formulario .saida-itens-tabela .saida-col-num { width: 8em; text-align: right; }
.saida-formulario .saida-itens-tabela .saida-col-acao { width: 1%; text-align: right; }
/* (30/10/2026, pedido do responsável) O Cód. produto (só leitura) e o EXCLUIR, que só aparece no modo EDITAR. */
.saida-formulario .saida-itens-tabela .saida-col-codigo { width: 6.5em; min-width: 6.5em; }
.saida-formulario .saida-codigo { width: 100%; min-width: 0; }
.saida-formulario .saida-itens-tabela:not(.saida-linhas-editando) .saida-col-acao { display: none; }
:is(#saida-editar-itens, #saida-editar-parcelas)[hidden] { display: none; }
.saida-formulario .saida-itens-tabela .saida-producao { min-width: 14em; }
.saida-formulario .saida-itens-tabela .saida-producao-caixa { margin: 0; min-height: 0; gap: 2px 8px; }
/* (30/10/2026, pedido do responsável) O campo selecionado da venda com a borda vermelha, como nos valores do Planejamento. */
.formulario.saida-formulario :is(input:not([type="checkbox"]):not([type="hidden"]), select, textarea):focus {
  outline: none; border-color: #c62828; box-shadow: 0 0 0 2px #c62828, 0 0 0 5px rgba(198, 40, 40, .18); }
.formulario.saida-formulario input[type="checkbox"]:focus-visible { outline: 3px solid #c62828; outline-offset: 2px; }
/* (30/10/2026, pedido do responsável) Os quadros da nota separados por uma divisória leve, e os campos com linha
   (borda) visível. */
.formulario.saida-formulario .formulario-secao-titulo ~ .formulario-secao-titulo {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .32); }
.formulario.saida-formulario :is(input[type="text"], input[type="date"], select, textarea) {
  border: 1px solid #8d9a7c; }
/* (30/10/2026, regra do responsável; sql/194) A coluna Armazém e a janela do ESCOLHER. */
.saida-formulario .saida-itens-tabela .saida-col-armazem { width: 7em; min-width: 7em; }
/* (30/10/2026, pedido do responsável) ESCOLHER menor, e as colunas estreitas com largura fixa: a sobra vai para
   Produto, Conta de receita e Produção, e o espaço entre as colunas fica parelho. */
.formulario.saida-formulario .saida-itens-tabela button.saida-armazem-escolher { min-height: 0; padding: 3px 8px;
  font-size: .85em; line-height: 1.3; letter-spacing: .02em; }
#conteudo-principal #saida-form .saida-itens-tabela :is(th, td) { padding-left: 5px; padding-right: 5px; }
.saida-formulario .saida-itens-tabela .saida-col-num { width: 7em; }
.saida-formulario .saida-itens-tabela .saida-col-unidade { width: 10em; }
/* (31/10/2026, resposta do responsável à pergunta D330 (d)) Em tela grande, a coluna Produto fica do tamanho de um
   nome longo; a sobra vai para as colunas de número. */
@media (min-width: 1100px) {
  .saida-formulario .saida-itens-tabela .saida-col-produto { width: 18em; max-width: 18em; }
  .saida-formulario .saida-itens-tabela .saida-col-produto select { width: 100%; }
  .saida-formulario .saida-itens-tabela .saida-col-num { width: 9em; }
}
#conteudo-principal #saida-form .saida-itens-tabela th:is(.saida-col-armazem, .saida-col-local) { white-space: normal; }
.saida-formulario .saida-armazem-celula { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.saida-formulario .saida-armazem-resumo { font-size: .92em; color: #2f3d1a; }
.saida-formulario .saida-armazem-resumo.saida-armazem-pendente { color: #c62828; font-weight: 700; }
.saida-formulario .saida-armazem-resumo:empty { display: none; }
/* (30/10/2026, pedido do responsável) Local: o nome do Armazém, sem o volume. */
.saida-formulario .saida-itens-tabela .saida-col-local { width: 9.5em; min-width: 9.5em; }
.saida-formulario .saida-armazem-local { width: 100%; min-width: 0; }
.formulario.saida-formulario .saida-armazem-local.saida-armazem-pendente { border-color: #c62828; }
dialog.pc-modal.saida-dlg-armazem { max-width: min(94vw, 640px); }
.saida-dlg-armazem .pc-modal-titulo { margin: 0 0 6px; font-weight: 800; font-size: 1.05em; }
.saida-dlg-armazem .saida-dlg-armazem-item { margin: 0 0 10px; color: #2f3d1a; }
.saida-dlg-armazem .saida-dlg-armazem-tabela { width: 100%; }
.saida-dlg-armazem .saida-dlg-armazem-qtd { width: 9em; text-align: right; }
.saida-dlg-armazem .saida-dlg-armazem-qtd.saida-dlg-armazem-excede { border-color: #c62828; color: #c62828; }
.saida-dlg-armazem .saida-dlg-armazem-aviso { margin: 10px 0 12px; font-weight: 700; color: #2e7d32; }
.saida-dlg-armazem .saida-dlg-armazem-aviso.saida-dlg-armazem-erro { color: #c62828; }
/* (30/10/2026, pedido do responsável) O aviso à esquerda, na linha dos botões. */
.saida-dlg-armazem .saida-dlg-armazem-rodape { align-items: center; margin-top: 12px; }
.saida-dlg-armazem .saida-dlg-armazem-rodape .saida-dlg-armazem-aviso { flex: 1 1 14em; margin: 0; }

/* =====================================================================
   FAIXA DO CABEÇALHO COM A MESMA ALTURA EM TODAS AS TELAS (22/10/2026, pedido do responsável) — a faixa de cima
   (caminho, título e botões) termina sempre no mesmo ponto: a linha divisória fica logo abaixo da linha do título, e
   o que algumas telas tinham a mais dentro da faixa (filtros, a linha "Lançamento: …", a linha de situação) passa para
   logo abaixo da divisória — escolha dele: "abaixo da divisória". O título tem altura de linha fixa (Config. Sistema,
   Cadastros e Apontamentos ficavam 4 px mais altos). Exceção: o Planejamento Orçamentário, que tem cabeçalho próprio.
   *Antes: a divisória ficava no fim da faixa, depois de todas as linhas dela (de 89 a 283 px conforme a tela).*
   ===================================================================== */
.pagina-topo .titulo-pagina { line-height: 1.3; }
.pagina-topo:has(> .pagina-topo-linha) { border-bottom: 0; padding-bottom: 0; }
.pagina-topo > .pagina-topo-linha {
  min-height: 36px;
  margin: 0 -28px;
  padding: 0 28px 10px;
  border-bottom: 1px solid var(--cinza-borda);
}
.pagina-topo > .pagina-topo-linha ~ :last-child { margin-bottom: 10px; }
@media (max-height: 700px) {
  .pagina-topo > .pagina-topo-linha { padding-bottom: 6px; }
}
@media (max-width: 820px) {
  .pagina-topo > .pagina-topo-linha { margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
}

/* (22/10/2026, pedido do responsável) Nas telas com filtros no cabeçalho (Plan. Agrícola, Fluxo de Caixa, Despesas Não
   Operacionais, pesquisa de documentos de Entrada e de Saída, Contas a Pagar, Créditos), os filtros ficam AO LADO do
   título, na mesma linha; os botões continuam à direita, e a divisória vem logo depois dessa linha. O que mais houver
   no cabeçalho (totais, resumo) fica abaixo da divisória. Quando os filtros não cabem ao lado, eles quebram dentro da
   própria linha, antes da divisória. */
.pagina-topo:has(> form.pagina-topo-secao, > form.fin-filtros) {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; padding-bottom: 0; }
.pagina-topo:has(> form.pagina-topo-secao, > form.fin-filtros) > .pagina-topo-linha { display: contents; }
.pagina-topo:has(> form.pagina-topo-secao, > form.fin-filtros) > .pagina-topo-linha > .pagina-topo-acoes {
  order: 2; margin-left: auto; }
.pagina-topo:has(> form.pagina-topo-secao, > form.fin-filtros) > :is(form.pagina-topo-secao, form.fin-filtros) {
  order: 1; flex: 0 1 auto; min-width: 0; margin: 0; }
.pagina-topo:has(> form.pagina-topo-secao, > form.fin-filtros)::after {
  content: ""; order: 3; flex: 0 0 calc(100% + 56px); height: 0; margin: 10px -28px 0;
  border-bottom: 1px solid var(--cinza-borda); }
.pagina-topo:has(> form.pagina-topo-secao, > form.fin-filtros) > :not(.pagina-topo-linha):not(form.pagina-topo-secao):not(form.fin-filtros) {
  order: 4; flex: 0 0 100%; }
@media (max-width: 820px) {
  .pagina-topo:has(> form.pagina-topo-secao, > form.fin-filtros)::after { flex-basis: calc(100% + 28px); margin: 10px -14px 0; }
}

/* Os filtros maiores (pesquisa de documentos, Contas a Pagar, Créditos) ocupam o espaço entre o título e os botões e
   quebram os campos dentro dele, sem descer para baixo do título. */
.pagina-topo:has(> form.pagina-topo-secao, > form.fin-filtros) > :is(form.cad-pesquisa, form.fin-filtros) { flex: 1 1 0; }
/* O título com o fio azul (Config. Sistema, Cadastros, Apontamentos) sem a folga que deixava a faixa 4 px mais alta. */
.pagina-topo .titulo-pagina.sis-titulo { margin-bottom: 0; padding-bottom: 2px; }
/* HOME (22/10/2026, pedido do responsável): a mesma faixa das outras telas — sem a linha escura sob as cotações; os
   créditos (cotações, previsão do tempo, municípios) sobem para o alto da faixa; a divisória cinza no fim dela. */
.home-faixa-cotacoes { border-bottom: 0; }
.home-faixa-bloco > .home-creditos { order: -1; margin: 0 0 4px; }
.breadcrumb-linha:has(#home-faixa-cotacoes) {
  margin: 0 -28px; padding: 0 28px 4px; border-bottom: 1px solid var(--cinza-borda); }
@media (max-width: 820px) {
  .breadcrumb-linha:has(#home-faixa-cotacoes) { margin: 0 -14px; padding: 0 14px 4px; }
}

/* (22/10/2026, pedido do responsável) A faixa com a MESMA altura exata em todas as telas, na medida de Lançar
   Documentos: o caminho e a linha do título têm altura fixa (antes cresciam 1 a 3 px com a letra, conforme a largura
   da janela), e a faixa da Home é calculada com as mesmas medidas. O caminho fica em itálico e cinza, também o item
   atual (antes verde e em negrito). */
:root { --faixa-trilha: 20px; --faixa-linha: 48px; --faixa-fim: 92px; }
#conteudo-principal .breadcrumb { box-sizing: border-box; height: var(--faixa-trilha); line-height: var(--faixa-trilha);
  margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic;
  color: var(--cinza-medio); }
#conteudo-principal .breadcrumb .atual, #conteudo-principal .breadcrumb a { color: var(--cinza-medio); font-style: italic; }
#conteudo-principal .breadcrumb .atual { font-weight: 600; }
.pagina-topo > .pagina-topo-linha { min-height: var(--faixa-linha); }
.pagina-topo .titulo-pagina.sis-titulo { padding-bottom: 0; }
/* A linha do título (border-box) tem 48 px com a folga de baixo e a divisória: a faixa termina a 92 px do alto da área
   (10 + caminho 20 + 6 + 8 + 48). A Home começa 20 px abaixo do alto da área (as outras telas, 10 px) e termina no
   mesmo ponto. */
.breadcrumb-linha:has(#home-faixa-cotacoes) { box-sizing: border-box; overflow: hidden;
  height: calc(var(--faixa-fim) - 20px); }

/* Nas telas com filtros ao lado do título, a linha tem a mesma altura das outras: 48 px menos a folga (10) e a
   divisória (0,67). */
.pagina-topo:has(> form.pagina-topo-secao, > form.fin-filtros) > .pagina-topo-linha > .titulo-pagina {
  min-height: calc(var(--faixa-linha) - 10.667px); display: flex; align-items: center; }

/* (22/10/2026, pedido do responsável) CABEÇALHO COMPACTO (Contas a Pagar): na faixa padrão, sem o título à vista, os
   filtros em duas linhas alinhadas — o nome ao lado de cada campo, em colunas (nome | campo) —, letras e campos
   menores. Os nomes, os ⓘ e a ordem dos campos não mudam. Fica aqui, com a faixa padrão (as alturas são da faixa). */
/* (22/10/2026, pedido do responsável) Sem a faixa cinza no cabeçalho, como as outras telas. *Antes, no mesmo dia: a
   faixa do alto da área até a divisória em cinza suave.* */
.titulo-so-leitor { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* (22/10/2026, depois) Cabeçalho duplo: os filtros saem da 1ª faixa para uma 2ª, logo abaixo, fechada por uma linha
   suave de ponta a ponta (como a divisória da faixa do título). */
.fin-topo-compacto > .fin-faixa-filtros { margin: 0 -28px; padding: 10px 28px; border-bottom: 1px solid var(--cinza-borda);
  /* A mesma altura da 2ª faixa do Financeiro (VENCIMENTOS DETALHADOS): a linha de baixo fica no mesmo ponto nas duas
     telas (201 px do alto da área); os filtros, centralizados nela. */
  box-sizing: border-box; min-height: calc(201.33px - var(--faixa-fim)); display: flex; align-items: center;
  /* (22/10/2026, pedido do responsável) A 2ª faixa em cinza suave, de ponta a ponta. */
  background: #f5f6f5; }
@media (max-width: 820px) { .fin-topo-compacto > .fin-faixa-filtros { margin: 0 -14px; padding: 10px 14px; } }
/* (22/10/2026, pedido do responsável) Filtros maiores: os campos com 26 px de altura e letra de 0,9rem, os nomes a
   0,86rem. *Antes, no mesmo dia: 17 px e 0,74rem, para caberem na 1ª faixa.* */
.fin-topo-compacto .fin-acoes-e-exportar { grid-column: 7 / -1; display: flex; align-items: center; gap: 18px;
  contain: inline-size; /* não alarga as colunas da 1ª linha: ocupa o espaço que as 4 colunas já têm */
  min-width: 0; }
.fin-topo-compacto > .fin-faixa-filtros { position: relative; }
.fin-topo-compacto .fin-exportar-filtros { position: absolute; right: 28px; bottom: 10px; display: flex;
  align-items: center; white-space: nowrap; }
@media (max-width: 820px) { .fin-topo-compacto .fin-exportar-filtros { position: static; margin-top: 8px; }
  /* (23/10/2026) Na tela estreita o Exportar desce para baixo dos filtros (antes ficava espremido ao lado). */
  .fin-topo-compacto > .fin-faixa-filtros { flex-wrap: wrap; }
  .fin-topo-compacto .fin-exportar-filtros { flex-basis: 100%; } }
@media (max-width: 820px) { .fin-topo-compacto .fin-acoes-e-exportar { grid-column: 1 / -1; flex-wrap: wrap; } }
.fin-topo-compacto form.fin-filtros { display: grid; grid-template-columns: repeat(5, max-content minmax(0, max-content));
  grid-auto-rows: 26px; align-items: center; gap: 8px 8px; margin: 0; }
.fin-topo-compacto .fin-campo { display: contents; }
.fin-topo-compacto .fin-campo-rotulo { justify-content: flex-end; font-size: 0.86rem; white-space: nowrap;
  padding-left: 12px; }
.fin-topo-compacto .fin-campo select,
.fin-topo-compacto .fin-campo input[type="text"] { box-sizing: border-box; height: 26px; padding: 0 6px;
  font-size: 0.9rem; line-height: 24px; max-width: 14em; }
.fin-topo-compacto .fin-campo-data input[type="text"] { width: 7.4em; }
.fin-topo-compacto .fin-campo-numero input[type="text"] { width: 9em; }
.fin-topo-compacto .fin-campo-data .doc-campo-com-botoes { display: inline-flex; align-items: center; gap: 3px; }
.fin-topo-compacto .fin-campo-data .doc-botao-icone { width: 26px; height: 26px; min-height: 0; padding: 0; }
.fin-topo-compacto .fin-campo-data .doc-botao-icone svg { width: 15px; height: 15px; }
.fin-topo-compacto .fin-filtros-acoes { padding-left: 12px; gap: 6px; align-items: center; }
.fin-topo-compacto .fin-filtros-acoes .fin-botao-icone { width: 34px; height: 26px; min-height: 0; padding: 0; }
.fin-topo-compacto .fin-filtros-acoes .fin-botao-icone svg { width: 15px; height: 15px; }
.fin-topo-compacto .fin-aviso-filtro { grid-column: 1 / -1; }
/* (23/10/2026, pedido do responsável) O mesmo cabeçalho duplo em Pesquisar histórico de documentos: os filtros da
   consulta de documentos (documentos/_filtros_pesquisa.html) em duas linhas, nome | campo, cinco pares por linha; o
   PESQUISAR e o LIMPAR fecham a 2ª linha. A tela Doc. SAÍDA, que usa os mesmos filtros, continua como estava. */
.doc-topo-duplo #doc-pesquisa { display: grid; grid-template-columns: repeat(5, max-content minmax(0, max-content));
  grid-auto-rows: 26px; align-items: center; gap: 8px 8px; margin: 0; }
.doc-topo-duplo #doc-pesquisa .doc-filtro { display: contents; }
.doc-topo-duplo #doc-pesquisa .cad-pesquisa-rotulo { justify-self: end; font-size: 0.86rem; white-space: nowrap;
  padding-left: 12px; margin: 0; }
.doc-topo-duplo #doc-pesquisa select,
.doc-topo-duplo #doc-pesquisa input[type="text"] { box-sizing: border-box; height: 26px; padding: 0 6px;
  font-size: 0.9rem; line-height: 24px; max-width: 14em; }
.doc-topo-duplo #doc-pesquisa .doc-filtro-data input[type="text"] { width: 7.4em; }
.doc-topo-duplo #doc-pesquisa .doc-campo-com-botoes { display: inline-flex; align-items: center; gap: 3px; }
.doc-topo-duplo #doc-pesquisa .doc-botao-icone { width: 26px; height: 26px; min-height: 0; padding: 0; }
.doc-topo-duplo #doc-pesquisa .doc-botao-icone svg { width: 15px; height: 15px; }
.doc-topo-duplo #doc-pesquisa .doc-filtro-botoes { display: flex; grid-column: 7 / -1; gap: 8px; align-items: center;
  padding-left: 12px; }
/* (23/10/2026) Com o filtro Natureza (Doc. ENTRADA), a 2ª linha tem quatro pares: os botões ficam no último. */
.doc-topo-duplo #doc-pesquisa:has(#doc-f-natureza) .doc-filtro-botoes { grid-column: 9 / -1; }
.doc-topo-duplo #doc-pesquisa .doc-filtro-botoes > * { min-height: 0; height: 28px; padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; }
@media (max-width: 820px) {
  .doc-topo-duplo #doc-pesquisa { grid-template-columns: max-content minmax(0, 1fr); grid-auto-rows: auto; }
  .doc-topo-duplo #doc-pesquisa select,
  .doc-topo-duplo #doc-pesquisa input[type="text"] { max-width: none; width: 100%; }
  .doc-topo-duplo #doc-pesquisa .doc-filtro-botoes,
  .doc-topo-duplo #doc-pesquisa:has(#doc-f-natureza) .doc-filtro-botoes { grid-column: 1 / -1; padding-left: 0; }
}
@media (max-width: 820px) {
  .fin-topo-compacto form.fin-filtros { grid-template-columns: max-content minmax(0, 1fr); grid-auto-rows: auto; }
  .fin-topo-compacto .fin-campo select,
  .fin-topo-compacto .fin-campo input[type="text"] { max-width: none; width: 100%; height: 26px; }
}

/* =====================================================================
   EFEITO HOLOGRÁFICO NAS MARCAS DAS FAZENDAS NA HOME (22/10/2026, pedido do responsável; a marca da Organização fica
   sem ele) — uma lâmina prateada sempre à vista, passando devagar (ver abaixo); com o mouse em cima, ela desliza com o
   mouse, um brilho segue o cursor e a marca inclina de leve. Quem pediu
   menos animação no sistema vê só a lâmina, sem inclinação nem transição.
   ===================================================================== */
.home-holo { position: relative; overflow: hidden; isolation: isolate;
  transition: transform .3s ease, box-shadow .3s ease; }
span.home-holo { display: inline-block; line-height: 0; border-radius: 6px; max-width: 60%; }
span.home-holo > .home-logo-organizacao { max-width: 100%; }
.home-holo::before, .home-holo::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .3s ease; z-index: 1; }
.home-holo::before {
  /* (22/10/2026, pedido do responsável) Só prateado: faixas de prata, do cinza-claro ao branco. *Antes, no mesmo dia:
     as cores da marca da SJB Group; tons claros de verde, amarelo, azul e branco; e, no começo, também rosa e lilás.* */
  background: linear-gradient(115deg, transparent 16%, #c4c8cc 26%, #f4f5f6 34%, #ffffff 40%, #aeb3b8 48%,
                              #e3e6e9 56%, #9da2a8 64%, #f0f1f2 72%, #c4c8cc 82%, transparent 92%);
  background-size: 260% 260%; background-position: var(--holo-x, 50%) var(--holo-y, 50%);
  mix-blend-mode: multiply; }
.home-holo::after {
  background: radial-gradient(circle at var(--holo-x, 50%) var(--holo-y, 50%), rgba(255, 255, 255, .85) 0%,
                              rgba(255, 255, 255, .25) 22%, transparent 48%);
  mix-blend-mode: screen; }
.home-holo:hover { transform: perspective(700px) rotateX(var(--holo-rx, 0deg)) rotateY(var(--holo-ry, 0deg)) scale(1.03);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18), 0 0 0 1px rgba(255, 255, 255, .6) inset; }
/* (22/10/2026, pedido do responsável) Efeito permanente: a lâmina prateada fica sempre à vista e passa devagar sobre a
   marca, de um lado para o outro, sem precisar do mouse; com o mouse em cima, ela e o brilho seguem o cursor e a marca
   inclina. *Antes: só aparecia com o mouse em cima.* */
.home-holo::before { opacity: .6; animation: home-holo-varrer 7s ease-in-out infinite alternate; }
@keyframes home-holo-varrer { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
.home-holo:hover::before { opacity: .6; animation: none; }
.home-holo:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .home-holo, .home-holo::before, .home-holo::after { transition: none; }
  .home-holo::before { animation: none; }
  .home-holo:hover { transform: none; }
}
/* IMPRIMIR SÓ UM QUADRO (22/10/2026, pedido do responsável): a pequena impressora abaixo do quadro, no canto inferior
   direito (botão com data-imprimir, base.js). Na impressão, só o quadro marcado aparece, sem o efeito holográfico e
   sem os ⓘ. */
.imprimir-linha { display: flex; justify-content: flex-end; margin-top: 4px; }
/* Os botões de imprimir e de PDF dentro do quadro, no canto superior direito. */
.quadro-acoes { position: absolute; top: 8px; right: 10px; z-index: 2; display: flex; gap: 6px; }
.botao-imprimir { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px;
  padding: 0; border: 1px solid #c9cfc9; border-radius: 5px; background: #fff; color: #444; cursor: pointer; }
.botao-imprimir:hover, .botao-imprimir:focus-visible { border-color: #2e7d32; color: #2e7d32; }
.botao-imprimir svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
@media print {
  body.imprimindo-area * { visibility: hidden; }
  body.imprimindo-area .area-impressao, body.imprimindo-area .area-impressao * { visibility: visible; }
  body.imprimindo-area .area-impressao { position: absolute; left: 0; top: 0; width: 100%; margin: 0;
    box-shadow: none; transform: none; }
  body.imprimindo-area .area-impressao::before, body.imprimindo-area .area-impressao::after { display: none; }
  body.imprimindo-area .area-impressao .pc-icone-explicacao,
  body.imprimindo-area .area-impressao .quadro-acoes { display: none; }
  /* A folha é estreita: a regra das tabelas que viram cartões no celular (até 760 px) entraria aqui. Na impressão
     do quadro a tabela continua tabela, com as cores da tela. */
  body.imprimindo-area .area-impressao { -webkit-print-color-adjust: exact; print-color-adjust: exact;
    padding: 4mm 5mm; }
  body.imprimindo-area .area-impressao table { display: table !important; width: 100% !important; font-size: 9.5pt; }
  body.imprimindo-area .area-impressao thead { display: table-header-group !important; }
  body.imprimindo-area .area-impressao tbody { display: table-row-group !important; }
  body.imprimindo-area .area-impressao tr { display: table-row !important; border: 0 !important; margin: 0 !important;
    padding: 0 !important; border-radius: 0 !important; background: none !important; }
  body.imprimindo-area .area-impressao th, body.imprimindo-area .area-impressao td { display: table-cell !important;
    padding: 5px 6px !important; border-bottom: 1px solid #d9dfd9 !important; }
  body.imprimindo-area .area-impressao td[data-rotulo]::before { content: none !important; }
}
/* (22/10/2026, pedido do responsável) Variante SUAVE — quadros do Almoxarifado e cartões de Apontar Documentos: a
   lâmina prateada só aparece com o mouse em cima, mais leve, e o elemento não inclina nem cresce; só uma sombra leve. */
.home-holo.holo-suave::before { opacity: 0; animation: none; }
.home-holo.holo-suave:hover::before { opacity: .32; }
.home-holo.holo-suave:hover::after { opacity: .45; }
.home-holo.holo-suave:hover { transform: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }

/* CLIMA SOB CADA MARCA, PASSANDO (22/10/2026, pedido do responsável): o quadro de clima vira uma faixa estreita de uma
   linha, com a largura da marca acima, e a informação do município passa da direita para a esquerda; para ao passar o
   mouse; sem movimento para quem pediu menos animação. */
.home-clima.home-clima-faixa { width: 100%; height: 30px; padding: 0 10px; display: flex; align-items: center;
  overflow: hidden; white-space: nowrap; text-align: left; font-size: clamp(11px, .8rem, 14px); }
.home-clima-trilho { display: inline-flex; animation: home-clima-rolar var(--clima-duracao, 14s) linear infinite; }
.home-clima-faixa:hover .home-clima-trilho { animation-play-state: paused; }
.home-clima-item { display: inline-flex; align-items: center; gap: 8px; padding-right: 48px; }
.home-clima-faixa .home-clima-nome { font-weight: 600; font-size: 1em; color: var(--verde-escuro, #2c5f2d); }
.home-clima-faixa .home-clima-icone { font-size: 1.15em; }
.home-clima-faixa .home-clima-temp { font-size: 1em; font-weight: 600; }
.home-clima-faixa .home-clima-desc { font-size: 1em; }
.home-clima-faixa .home-clima-hora { font-size: .85em; }
.home-clima-faixa .home-clima-indisponivel { padding: 0; font-size: .95em; }
@keyframes home-clima-rolar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .home-clima-trilho { animation: none; }
}

/* HOME — O CAMINHO "Home" À VISTA (22/10/2026, pedido do responsável): como nas outras telas, pequeno, em itálico e
   cinza, no alto da faixa e na mesma altura do caminho delas (a área da Home começa 10 px mais abaixo; a faixa sobe
   esses 10 px). Na mesma linha, à direita, os créditos; embaixo, as cotações. A faixa termina no mesmo ponto das
   outras telas. *Antes: a palavra Home ficava fora da tela, só para o leitor de tela (ajuste do mesmo dia).* */
.breadcrumb-linha:has(#home-faixa-cotacoes) {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: var(--faixa-trilha) minmax(0, 1fr);
  column-gap: 16px; row-gap: 6px; align-items: center;
  margin-top: -10px; height: calc(var(--faixa-fim) - 10px); }
.breadcrumb-linha:has(#home-faixa-cotacoes) > .breadcrumb {
  position: static; width: auto; height: var(--faixa-trilha); margin: 0; padding: 0; overflow: hidden;
  clip: auto; white-space: nowrap; grid-column: 1; grid-row: 1; }
.breadcrumb-linha:has(#home-faixa-cotacoes) > .home-faixa-bloco { display: contents; }
.breadcrumb-linha:has(#home-faixa-cotacoes) .home-creditos { grid-column: 2; grid-row: 1; margin: 0; align-self: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-linha:has(#home-faixa-cotacoes) .home-faixa-cotacoes { grid-column: 1 / -1; grid-row: 2; align-self: center; }
@media (max-width: 900px) {
  .breadcrumb-linha:has(#home-faixa-cotacoes) { display: flex; flex-direction: column; align-items: stretch; height: auto;
    margin-top: 0; }
}

/* (22/10/2026, pedido do responsável) Data e relógio numa peça só, com o mesmo efeito holográfico prata das marcas das
   Fazendas, contínuo de uma ponta à outra: uma caixa branca com uma borda só em volta das duas, sem a caixa própria
   do relógio (que as dividia). *Antes, no mesmo dia: só o relógio tinha o efeito, na caixa dele.* */
.cabecalho-relogio.home-holo { background: #fff; border: 1px solid #dfe4df; border-radius: 6px; padding: 1px 12px; }
.cabecalho-relogio.home-holo #cabecalho-hora { background: transparent; border: 0; padding: 0; }

/* (24/10/2026, pedido do responsável) Planejamento Orçamentário com cabeçalho duplo: o Ciclo e a Fazenda na 2ª faixa
   (fin-faixa-filtros, a de Contas a Pagar), no tamanho dos filtros dela. */
.orc-topo-duplo .orc-painel-forma { font-size: 0.9rem; color: var(--cinza-medio); gap: 8px 22px; }
.orc-topo-duplo .orc-painel-campo select { box-sizing: border-box; height: 26px; padding: 0 6px; font-size: 0.9rem; }
/* (24/10/2026, pedido do responsável) ORÇAR e CONSULTAR logo depois do título, ainda sem função. */
.orc-painel-modos { display: flex; align-items: center; gap: 8px; margin-left: 22px; }
.orc-painel-modo { min-width: 120px; font-weight: 700; letter-spacing: .02em; }
/* (24/10/2026, pedido do responsável) O Ciclo ao lado do CONSULTAR, na 1ª faixa; na 2ª, a Fazenda à esquerda e os
   botões das Classes à direita. */
.orc-topo-duplo .orc-painel-ciclo { margin-left: 22px; font-size: 0.9rem; color: var(--cinza-medio); }
.orc-topo-duplo > .fin-faixa-filtros { gap: 12px 22px; flex-wrap: wrap; }
/* (24/10/2026, pedido do responsável) As Classes à esquerda da 2ª faixa; o formulário, já sem campos à vista (os
   seletores estão na 1ª faixa, ligados a ele pelo atributo form), não ocupa lugar. *Antes, no mesmo dia: à direita.* */
.orc-topo-duplo > .fin-faixa-filtros > #orc-form-painel { display: contents; }
/* (24/10/2026) A Fazenda ao lado do Ciclo, na 1ª faixa. */
.orc-topo-duplo .orc-painel-fazenda { margin-left: 14px; font-size: 0.9rem; color: var(--cinza-medio); }
/* (24/10/2026, pedido do responsável) O desenho do ORÇAR (documento, relógio e lápis) ao lado do nome, no botão. */
.orc-painel-modo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.orc-icone-modo { flex: none; }
/* (24/10/2026) Na janela mais estreita o título não encolhe por baixo dos botões: os controles descem de linha. */
.orc-topo-duplo > .pagina-topo-linha { flex-wrap: wrap; row-gap: 8px; }
.orc-topo-duplo > .pagina-topo-linha > .titulo-pagina { flex: none; }
/* (24/10/2026, pedido do responsável) PLANEJAR / ORÇAR e CONSULTAR do mesmo tamanho: duas colunas iguais, na largura
   do maior; a mesma altura pela linha. */
.orc-painel-modos { display: grid; grid-template-columns: 1fr 1fr; }
/* (24/10/2026, pedido do responsável) A 2ª faixa do Planejamento: o Ciclo e a Fazenda e, ao lado, as Classes; abre pelo
   PLANEJAR ORÇAMENTO. */
.orc-faixa-planejar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.orc-faixa-planejar[hidden] { display: none; }
.orc-topo-duplo .orc-faixa-planejar > #orc-form-painel { display: grid; }
/* (24/10/2026, pedido do responsável) O botão não fica marcado (verde) com a faixa aberta: igual ao CONSULTAR. */
/* (24/10/2026, pedido do responsável) O bloco SELECIONE CICLO E FAZENDA, no modelo dos blocos do Financeiro: o título
   em verde-escuro, centralizado; o Ciclo e a Fazenda um abaixo do outro, na largura do maior; as Classes ao lado. */
.orc-topo-duplo .orc-faixa-planejar { align-items: center; gap: 12px 40px; }
.orc-topo-duplo .orc-faixa-planejar > .orc-bloco-selecao { display: grid; grid-template-columns: max-content;
  justify-items: stretch; gap: 6px; }
.orc-bloco-titulo { justify-self: center; font-size: .85rem; font-weight: 800; letter-spacing: .02em; color: #1f3d1f; }
.orc-bloco-selecao > .orc-painel-campo { display: flex; justify-content: space-between; gap: 10px; }
/* Os dois seletores da mesma largura, alinhados. */
.orc-bloco-selecao > .orc-painel-campo > select { flex: 1 1 auto; }
/* (24/10/2026, pedido do responsável) O bloco SELECIONE A CONTA (CLASSE), ao lado do Ciclo e da Fazenda: o título
   centralizado e, abaixo, os botões das Classes. */
.orc-bloco-classes { display: grid; grid-template-columns: max-content; gap: 6px; align-self: flex-start; }
/* Os dois títulos na mesma altura. */
.orc-topo-duplo .orc-faixa-planejar > .orc-bloco-selecao { align-self: flex-start; }
/* (24/10/2026, pedido do responsável) As Classes em duas linhas: C. Direto e C. Indireto em cima, Despesas e
   Investimentos embaixo; os quatro botões do mesmo tamanho. */
.orc-bloco-classes > .orc-painel-classes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
/* (24/10/2026, pedido do responsável) O desenho da Classe ao lado do nome, no botão. */
.orc-bloco-classes .orc-painel-classe { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.orc-icone-classe { flex: none; }
/* (24/10/2026, pedido do responsável) A 2ª faixa na altura padrão das outras telas (a de Contas a Pagar e do
   Financeiro): os botões das Classes menores, no tamanho das opções do Financeiro (28 px, letra 0,85rem). */
.orc-bloco-classes .orc-painel-classe { min-height: 0; height: 28px; padding: 0 12px; font-size: .85rem;
  min-width: 112px; }
.orc-bloco-classes .orc-icone-classe { width: 17px; height: 17px; }
.orc-bloco-classes > .orc-painel-classes { gap: 5px 8px; }
.orc-topo-duplo .orc-faixa-planejar > .orc-bloco-selecao,
.orc-bloco-classes { gap: 5px; }
/* (25/10/2026, pedido do responsável) A marca beAgri e a versão centralizadas, no pé da Home, abaixo do conjunto da
   Organização e das Fazendas. *Antes: no canto de baixo, à direita (coluna própria).* A tela estreita já as centralizava. */
@media (min-width: 901px) {
  .home-palco { grid-template-areas: ". conjunto ." ". beagri ."; grid-template-rows: 1fr auto; }
  /* (30/10/2026, pedido do responsável) Mais espaço entre os quadros das Fazendas sem estreitá-los: as laterais, vazias
     desde 25/10, ficam menores. *Antes: --home-lado clamp(150px, 17vw, 270px).* */
  .home-palco { --home-lado: clamp(16px, 5vw, 110px); }
  /* (30/10/2026, pedido do responsável) Com duas Fazendas, a marca da Organização no meio, entre os dois quadros,
     centrada na altura deles. *Antes: acima dos quadros.* Com uma, ou com três ou mais, continua acima. */
  .home-conjunto:has(.home-marca:nth-child(2):last-child) { position: relative; }
  /* Sem transform nem z-index: o bloco não pode isolar a mistura (o branco da marca some no multiply, e o brilho
     clareia só o desenho). Centrado pela largura do próprio conteúdo, na altura dos quadros. */
  .home-conjunto:has(.home-marca:nth-child(2):last-child) > .home-logo-bandeira {
    position: absolute; left: 0; right: 0; top: 0; margin-inline: auto; width: fit-content;
    height: clamp(64px, 19vh, 190px); display: flex; align-items: center; }
  .home-conjunto:has(.home-marca:nth-child(2):last-child) > .home-logo-bandeira > .home-logo-organizacao {
    /* (30/10/2026, pedido do responsável) A marca maior que a altura dos quadros, centrada neles. *Antes, no mesmo
       dia: até a altura dos quadros (clamp(64px, 19vh, 190px)).* */
    max-width: calc(clamp(64px, 24vw, 460px) - 24px); height: auto; max-height: clamp(80px, 26vh, 260px); }
  .home-beagri { justify-self: center; }
}

/* (26/10/2026, pedido do responsável) O Painel / Resumo do Orçamento mais apresentável: o global numa faixa verde de
   destaque; cada Classe num cartão com sombra e a cor dela no alto (Custos Diretos verde, Custos Indiretos
   verde-azulado, Despesas Adm vermelho, Investimentos azul — as cores dos botões da faixa de cima), o total e a parte
   do global; as Fazendas como linhas dentro do cartão, nome à esquerda e valor à direita. A ordem das colunas é a das
   Classes, fixa. *Antes: quadros soltos, com borda preta.* */
.orc-topo-duplo > .fin-faixa-filtros > .orc-resumo-destaque {
  max-width: none; margin: 4px 0 14px; padding: 14px 22px; border: 0; border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, #3c5524 0%, #556b2f 60%, #6b8a3a 100%);
  box-shadow: 0 4px 14px rgba(40, 60, 20, .22); }
.orc-topo-duplo > .fin-faixa-filtros > .orc-resumo-destaque h2 { margin: 0 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #dfe9cf; }
.orc-topo-duplo > .fin-faixa-filtros > .orc-resumo-destaque p { color: #eef4e6; }
.orc-topo-duplo > .fin-faixa-filtros > .orc-resumo-destaque .orc-resumo-global { margin-top: 4px; font-size: .9rem; }
.orc-topo-duplo > .fin-faixa-filtros > .orc-resumo-destaque .orc-resumo-global strong { display: block; font-size: 2rem; line-height: 1.15;
  color: #fff; letter-spacing: .01em; }
.orc-topo-duplo > .fin-faixa-filtros > .orc-resumo-destaque .orc-resumo-alcance { color: #dfe9cf; }

.orc-resumo-colunas > .orc-resumo-coluna {
  --orc-cor: #2e7d32; gap: 0; background: var(--branco, #fff); border: 1px solid #dfe4dc;
  border-top: 4px solid var(--orc-cor); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .07); }
.orc-resumo-colunas > .orc-resumo-coluna:nth-child(2) { --orc-cor: #00897b; }
.orc-resumo-colunas > .orc-resumo-coluna:nth-child(3) { --orc-cor: #c62828; }
.orc-resumo-colunas > .orc-resumo-coluna:nth-child(4) { --orc-cor: #1565c0; }
.orc-resumo-colunas > .orc-resumo-coluna > .orc-resumo-classe {
  border: 0; border-radius: 0; background: #f7f9f6; padding: 12px 14px 10px; gap: 2px; }
.orc-resumo-colunas > .orc-resumo-coluna > .orc-resumo-classe .orc-cartao-rotulo {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #4a5548; }
.orc-resumo-colunas > .orc-resumo-coluna > .orc-resumo-classe .orc-cartao-valor {
  font-size: 1.55rem; font-weight: 700; color: var(--orc-cor); }
.orc-resumo-parte { display: flex; align-items: center; gap: 6px; font-size: .68rem; color: #6b7468; }
.orc-resumo-parte progress { width: 70px; height: 6px; border: 0; border-radius: 3px; overflow: hidden;
  background: #e3e8e0; accent-color: var(--orc-cor); appearance: none; -webkit-appearance: none; }
.orc-resumo-parte progress::-webkit-progress-bar { background: #e3e8e0; border-radius: 3px; }
.orc-resumo-parte progress::-webkit-progress-value { background: var(--orc-cor); border-radius: 3px; }
.orc-resumo-parte progress::-moz-progress-bar { background: var(--orc-cor); border-radius: 3px; }
.orc-resumo-colunas > .orc-resumo-coluna > .orc-resumo-fazenda {
  margin: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; text-align: left;
  padding: 8px 14px; border: 0; border-top: 1px solid #eceff0; border-radius: 0; background: transparent; }
.orc-resumo-colunas > .orc-resumo-coluna > .orc-resumo-fazenda .orc-cartao-rotulo { font-size: .78rem; color: #4a5548; }
.orc-resumo-colunas > .orc-resumo-coluna > .orc-resumo-fazenda .orc-cartao-valor { font-size: .95rem; font-weight: 600;
  color: #22301c; font-variant-numeric: tabular-nums; }
.orc-resumo-colunas > .orc-resumo-coluna > .orc-resumo-pendente { background: var(--amarelo-fundo);
  border-top: 1px dashed var(--amarelo-borda); }
.orc-resumo-colunas > .orc-resumo-coluna > .orc-resumo-nota { margin: 6px 14px; text-align: left; }

/* (26/10/2026, pedido do responsável) O resumo verde ocupa a 2ª faixa do cabeçalho, de ponta a ponta; os seletores do
   PLANEJAR ORÇAMENTO abrem abaixo dos cartões, numa caixa cinza suave como era a faixa. */
.orc-topo-duplo > .fin-faixa-filtros > .orc-resumo-destaque { flex: 1 1 100%; margin: 0; }
.orc-planejar-abaixo > .orc-faixa-planejar { margin-top: 16px; padding: 12px 18px; background: #f4f5f3;
  border: 1px solid #e1e5df; border-radius: 10px; }

/* (26/10/2026, pedido do responsável) O subtítulo PLANEJAR ORÇAMENTO, numa linha própria no alto da caixa dos
   seletores, com a linha fina embaixo (como os títulos dos quadros). */
.orc-planejar-abaixo > .orc-faixa-planejar > .orc-faixa-subtitulo {
  flex: 1 1 100%; margin: 0 0 2px; padding-bottom: 4px; font-size: .82rem; font-weight: 800; letter-spacing: .04em;
  color: var(--verde-escuro, #1f3d1f); border-bottom: 1px solid #d5dbd2; }

/* (26/10/2026, pedido do responsável) SELECIONE A CLASSE (CONTA): os quatro botões numa linha só, abaixo do título,
   todos do mesmo tamanho — a altura e a largura do botão PLANEJAR ORÇAMENTO (medidas pela página; sem a medida, 12rem
   por 2.4rem). *Antes: dois por linha, 28px de altura.* */
.orc-planejar-abaixo .orc-bloco-classes > .orc-painel-classes {
  grid-template-columns: repeat(4, var(--orc-botao-largura, 12rem)); gap: 8px; }
.orc-planejar-abaixo .orc-bloco-classes .orc-painel-classe {
  height: var(--orc-botao-altura, 2.4rem); width: 100%; font-size: .9rem; }

/* (26/10/2026, pedido do responsável) O bloco SELECIONE A CLASSE (CONTA) centralizado no espaço ao lado do Ciclo e da
   Fazenda: ocupa o resto da linha, com o título e os botões no meio. */
.orc-planejar-abaixo .orc-faixa-planejar > .orc-bloco-classes { flex: 1 1 auto; display: grid; justify-items: center;
  justify-content: center; }

/* (26/10/2026, pedido do responsável) As imagens dos botões das Classes maiores (1.8em; antes 20px). */
.orc-planejar-abaixo .orc-bloco-classes .orc-painel-classe .orc-icone-classe { width: 1.8em; height: 1.8em; flex: none; }

/* (26/10/2026, pedido do responsável) Efeito ao passar o mouse nos cartões das Classes do painel: o cartão sobe um
   pouco, a sombra fica mais forte, a borda ganha a cor da Classe e o cabeçalho do cartão um tom dela. Sem movimento
   para quem pediu menos animação no sistema. */
.orc-resumo-colunas > .orc-resumo-coluna { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.orc-resumo-colunas > .orc-resumo-coluna > .orc-resumo-classe { transition: background-color .18s ease; }
.orc-resumo-colunas > .orc-resumo-coluna:hover {
  transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0, 0, 0, .14); border-color: var(--orc-cor); }
.orc-resumo-colunas > .orc-resumo-coluna:hover > .orc-resumo-classe {
  background: color-mix(in srgb, var(--orc-cor) 9%, #fff); }
@media (prefers-reduced-motion: reduce) {
  .orc-resumo-colunas > .orc-resumo-coluna { transition: none; }
  .orc-resumo-colunas > .orc-resumo-coluna:hover { transform: none; }
}

/* (26/10/2026, pedido do responsável) Ciclo e Fazenda alinhados: o nome numa coluna da mesma largura e os dois
   seletores começando no mesmo ponto, com a mesma largura. */
.orc-planejar-abaixo .orc-bloco-selecao > .orc-painel-campo {
  display: grid; grid-template-columns: 5.2em 14rem; align-items: center; column-gap: 8px; }
.orc-planejar-abaixo .orc-bloco-selecao > .orc-painel-campo > select { width: 100%; margin: 0; }

/* (26/10/2026, pedido do responsável) SELECIONE CICLO E FAZENDA e SELECIONE A CLASSE (CONTA) com a letra um pouco
   menor (.74rem; antes .85rem). */
.orc-planejar-abaixo .orc-bloco-titulo { font-size: .74rem; }

/* (26/10/2026, pedido do responsável) O subtítulo PLANEJAR ORÇAMENTO um pouco maior e centralizado na caixa; a caixa
   com a borda à vista. */
.orc-planejar-abaixo > .orc-faixa-planejar > .orc-faixa-subtitulo { font-size: .95rem; text-align: center; }
.orc-planejar-abaixo > .orc-faixa-planejar { border: 1.5px solid #9fae98; }

/* (26/10/2026, pedido do responsável) Os seletores de Ciclo e Fazenda menores: letra menor, um pouco mais curtos
   (12rem; antes 14rem) e mais baixos. */
.orc-planejar-abaixo .orc-bloco-selecao > .orc-painel-campo { grid-template-columns: 5.2em 12rem; }
.orc-planejar-abaixo .orc-bloco-selecao > .orc-painel-campo > select { font-size: .8rem; height: 1.75rem; padding: 0 6px; }

/* (26/10/2026, pedido do responsável) "Ciclo" e "Fazenda" alinhados pela direita, junto dos seletores. */
.orc-planejar-abaixo .orc-bloco-selecao > .orc-painel-campo { justify-items: end; }

/* (26/10/2026, pedido do responsável) A linha abaixo de PLANEJAR ORÇAMENTO no verde-azulado do cartão Custos
   Indiretos (#00897b), mais grossa. */
.orc-planejar-abaixo > .orc-faixa-planejar > .orc-faixa-subtitulo { border-bottom: 3px solid #00897b; padding-bottom: 6px; }

/* (26/10/2026, pedido do responsável) Os botões das Classes um pouco mais altos (1,3 vez a altura do PLANEJAR
   ORÇAMENTO) e os desenhos maiores (2.4em; antes 1.8em). */
.orc-planejar-abaixo .orc-bloco-classes .orc-painel-classe { height: calc(var(--orc-botao-altura, 2.4rem) * 1.3); }
.orc-planejar-abaixo .orc-bloco-classes .orc-painel-classe .orc-icone-classe { width: 2.4em; height: 2.4em; }

/* (26/10/2026, pedido do responsável) A linha abaixo de PLANEJAR ORÇAMENTO com as pontas curvas, como a faixa de cor
   do alto dos cartões das Classes: a linha faz a curva e desce um pouco nas duas pontas. */
.orc-planejar-abaixo > .orc-faixa-planejar > .orc-faixa-subtitulo { border-bottom: 0; padding-bottom: 0; }
.orc-planejar-abaixo > .orc-faixa-planejar > .orc-faixa-subtitulo::after {
  content: ""; display: block; height: 7px; margin-top: 6px; border: 3px solid #00897b; border-bottom: 0;
  border-radius: 9px 9px 0 0; }

/* (26/10/2026, pedido do responsável) No cabeçalho, a caixa PLANEJAR ORÇAMENTO fica entre a linha do título e o
   resumo verde, com o mesmo afastamento das laterais. */
.pagina-topo > .orc-planejar-abaixo > .orc-faixa-planejar { margin: 4px 0 10px; }

/* (26/10/2026, pedido do responsável) O lápis antes de PLANEJAR ORÇAMENTO, no título da caixa (o botão do cabeçalho
   saiu). */
.orc-planejar-abaixo > .orc-faixa-planejar > .orc-faixa-subtitulo { display: block; }
.orc-faixa-subtitulo > .orc-faixa-lapis { width: 1.35em; height: 1.35em; margin-right: 8px; vertical-align: -0.28em; }

/* (26/10/2026, pedido do responsável) Nos botões das Classes, o mesmo efeito dos cartões ao passar o mouse: o botão
   sobe um pouco, a sombra fica mais forte, a borda ganha a cor da Classe (a mesma do cartão dela) e o fundo um tom
   dela. Também com o foco do teclado. Sem movimento para quem pediu menos animação. */
.orc-planejar-abaixo .orc-bloco-classes > .orc-painel-classes > .orc-painel-classe {
  --orc-cor: #2e7d32; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease,
  background-color .18s ease; }
.orc-planejar-abaixo .orc-bloco-classes > .orc-painel-classes > .orc-painel-classe:nth-child(2) { --orc-cor: #00897b; }
.orc-planejar-abaixo .orc-bloco-classes > .orc-painel-classes > .orc-painel-classe:nth-child(3) { --orc-cor: #c62828; }
.orc-planejar-abaixo .orc-bloco-classes > .orc-painel-classes > .orc-painel-classe:nth-child(4) { --orc-cor: #1565c0; }
.orc-planejar-abaixo .orc-bloco-classes > .orc-painel-classes > a.orc-painel-classe:is(:hover, :focus-visible) {
  transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0, 0, 0, .14); border-color: var(--orc-cor);
  background: color-mix(in srgb, var(--orc-cor) 9%, #fff); }
@media (prefers-reduced-motion: reduce) {
  .orc-planejar-abaixo .orc-bloco-classes > .orc-painel-classes > .orc-painel-classe { transition: none; }
  .orc-planejar-abaixo .orc-bloco-classes > .orc-painel-classes > a.orc-painel-classe:is(:hover, :focus-visible) {
    transform: none; }
}

/* (26/10/2026, pedido do responsável) O resumo verde: o título como escrito ("Resumo Orçamento Global"), o valor
   grande e, abaixo, o ciclo em minúsculas, cinza e itálico; um efeito leve ao passar o mouse (a sombra cresce e o
   verde clareia um pouco). */
.orc-topo-duplo > .fin-faixa-filtros > .orc-resumo-destaque h2 { text-transform: none; font-size: .95rem; letter-spacing: .03em; }
.orc-topo-duplo > .fin-faixa-filtros > .orc-resumo-destaque .orc-resumo-global { margin-top: 2px; }
.orc-topo-duplo > .fin-faixa-filtros > .orc-resumo-destaque .orc-resumo-ciclo {
  margin: 2px 0 0; font-size: .82rem; font-style: italic; text-transform: lowercase; color: #cfd6c8; }
.orc-topo-duplo > .fin-faixa-filtros > .orc-resumo-destaque {
  transition: box-shadow .2s ease, filter .2s ease, transform .2s ease; }
.orc-topo-duplo > .fin-faixa-filtros > .orc-resumo-destaque:hover {
  box-shadow: 0 8px 22px rgba(40, 60, 20, .32); filter: brightness(1.06); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .orc-topo-duplo > .fin-faixa-filtros > .orc-resumo-destaque { transition: none; }
  .orc-topo-duplo > .fin-faixa-filtros > .orc-resumo-destaque:hover { transform: none; }
}

/* (26/10/2026, pedido do responsável) O cinza de fundo da caixa PLANEJAR ORÇAMENTO um pouco mais escuro (#ebede8;
   antes #f4f5f3). */
.orc-planejar-abaixo > .orc-faixa-planejar { background: #ebede8; }

/* (26/10/2026, pedido do responsável) CONSULTAR ORÇAMENTO (Orçado × Realizado) no padrão novo: o filtro numa linha na
   2ª faixa; as tabelas em quadros com a faixa do título em cima, letras menores, divisórias, linhas alternadas e os
   valores à direita. As classes "tabela" e os selos (.badge, .badge-atencao, .badge-grave) continuam os de sempre. */
.orc-consulta-filtro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; }
.orc-consulta-filtro label { display: grid; gap: 2px; font-size: .74rem; font-weight: 700; color: #33401c; }
.orc-consulta-filtro select, .orc-consulta-filtro input { height: 1.9rem; font-size: .82rem; padding: 0 6px; }
.orc-consulta-filtro select { min-width: 9rem; }
.orc-consulta-filtro .orc-consulta-ano { width: 5.5rem; }
.orc-consulta-filtro .botao { height: 1.9rem; padding: 0 14px; font-size: .78rem; }
/* (29/10/2026, pedido do responsável) O período numa linha própria, logo abaixo das caixas do Ciclo e do Mês de
   referência. *Antes: ao lado do ATUALIZAR.* */
.orc-consulta-periodo { flex-basis: 100%; margin-top: -4px; font-size: .78rem; font-style: italic; color: #5d6b58; }
.orc-consulta-quadro .orc-consulta-titulo {
  margin: 14px 0 0; padding: 6px 10px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--verde-escuro, #33401c); background: #e7ece4; border: 1px solid #d0d8cc; border-bottom: 0;
  border-radius: 6px 6px 0 0; }
.orc-consulta-quadro .orc-consulta-titulo:first-child { margin-top: 4px; }
.orc-consulta-quadro .orc-consulta-tabela { border: 1px solid #d0d8cc; border-radius: 0 0 6px 6px; margin: 0 0 8px; }
.orc-consulta-quadro .orc-consulta-tabela > table { width: 100%; border-collapse: collapse; font-size: .78rem;
  font-variant-numeric: tabular-nums; margin: 0; }
.orc-consulta-quadro .orc-consulta-tabela :is(th, td) { padding: 6px 10px; border-bottom: 1px solid #e3e7e1;
  border-right: 1px solid #eef1ed; vertical-align: middle; }
.orc-consulta-quadro .orc-consulta-tabela :is(th, td):last-child { border-right: 0; }
.orc-consulta-quadro .orc-consulta-tabela thead th { background: #f3f5f2; font-size: .7rem; text-align: left;
  border-bottom: 2px solid #c9d2c4; white-space: nowrap; }
.orc-consulta-quadro .orc-consulta-tabela tbody tr:nth-child(even) { background: #fafbf9; }
.orc-consulta-quadro .orc-consulta-tabela tbody tr:last-child td { border-bottom: 0; }
.orc-consulta-quadro .orc-consulta-tabela .orc-num { text-align: right; white-space: nowrap; }
.orc-consulta-quadro .orc-consulta-tabela .orc-vazio { text-align: center; font-style: italic; color: #6b7468; padding: 14px; }
.orc-consulta-quadro .orc-consulta-tabela .orc-sem-orcamento { font-style: italic; color: #6b7468; }
.orc-consulta-quadro .orc-consulta-tabela :is(.badge, .badge-atencao, .badge-grave) { font-size: .68rem; white-space: nowrap; }

/* (26/10/2026, pedido do responsável) A faixa do título de cada quadro do Orçado x Realizado com os botões de Excel
   e PDF à direita. */
.orc-consulta-quadro .orc-consulta-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 10px; }
.orc-consulta-quadro .orc-consulta-titulo > h2 { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.orc-consulta-quadro .orc-consulta-exportar { display: inline-flex; gap: 6px; }

/* (26/10/2026, pedido do responsável) As telas de Custos Diretos (Culturas, Glebas e confirmação) no visual das telas
   anteriores do Planejamento: a faixa do alto como cabeçalho — "Custos Diretos" como título, a Fazenda, o Ciclo e a
   Cultura em etiquetas, o total em destaque verde — e os cartões como os das Classes: brancos, com a faixa verde de
   Custos Diretos no alto, sombra, o nome em maiúsculas, a área e o orçado separados por uma linha, e o efeito ao
   passar o mouse. Só aparência: a marcação, os textos e os destinos não mudaram. */
.orc-painel-topo.orc-cd-topo { background: var(--branco, #fff); border: 0; border-bottom: 1px solid #dfe4dc;
  border-radius: 0; padding: 4px 0 12px; margin-bottom: 14px; color: #4a5548; }
.orc-cd-topo > .orc-cd-contexto { gap: 8px 10px; align-items: center; }
.orc-cd-topo > .orc-cd-contexto > strong:first-child { font-size: 1.35rem; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; color: #1e1e1e; margin-right: 10px; }
.orc-cd-topo > .orc-cd-contexto > span { display: inline-block; padding: 3px 11px; font-size: .8rem; border-radius: 14px;
  background: #eef1ed; border: 1px solid #dde3da; color: #3d4a38; }
.orc-cd-topo > .orc-cd-contexto > span.orc-cd-total { background: #e7f3e8; border-color: #9fcaa2; color: #1f5a23; }
.orc-cd-topo > .orc-cd-contexto > span.orc-cd-total.orc-cd-indisponivel { background: #f4f5f3; border-color: #dde3da;
  color: #5d6b58; }
.orc-cd-cartoes { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.orc-cd-cartoes > .orc-cd-cartao { --orc-cor: #2e7d32; gap: 2px; padding: 14px 14px 10px; min-height: 0;
  background: var(--branco, #fff); border: 1px solid #dfe4dc; border-top: 4px solid var(--orc-cor); border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; }
.orc-cd-cartoes > .orc-cd-cartao .orc-cd-nome { font-size: .95rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #22301c; }
.orc-cd-cartoes > .orc-cd-cartao .orc-cd-area { font-size: .85rem; }
.orc-cd-cartoes > .orc-cd-cartao .orc-cd-orcado { align-self: stretch; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid #eceff0; font-size: .85rem; color: var(--orc-cor); }
.orc-cd-cartoes > a.orc-cd-cartao:is(:hover, :focus-visible) { transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .14); border-color: var(--orc-cor);
  background: color-mix(in srgb, var(--orc-cor) 7%, #fff); }
.orc-cd-cartoes > .orc-cd-cartao.orc-cd-inativa { --orc-cor: #9aa597; box-shadow: none; }
/* (29/10/2026, pedido do responsável) O card "Área Total" (compilado das Glebas): fundo levemente tingido da cor
   da Cultura e borda tracejada, para se distinguir das Glebas. No Planejar Produção abre os meses (só consulta);
   no Apontar Produção é inerte. */
.orc-cd-cartoes > .orc-cd-cartao.pa-gleba-total { border-style: dashed; border-top-style: solid;
  background: color-mix(in srgb, var(--orc-cor) 6%, #fff); box-shadow: none; }
.orc-cd-cartoes > div.orc-cd-cartao.pa-gleba-total { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .orc-cd-cartoes > .orc-cd-cartao { transition: none; }
  .orc-cd-cartoes > a.orc-cd-cartao:is(:hover, :focus-visible) { transform: none; }
}

/* (26/10/2026, pedido do responsável) O desenho da Cultura na frente do nome, na mesma linha; a área e o orçado
   continuam abaixo, cada um numa linha. */
.orc-cd-cartoes > .orc-cd-cartao:has(> .orc-cd-icone) { flex-direction: row; flex-wrap: wrap; justify-content: center;
  align-items: center; column-gap: 10px; }
.orc-cd-cartoes > .orc-cd-cartao > .orc-cd-icone { display: inline-flex; flex: none; }
.orc-cd-cartoes > .orc-cd-cartao > .orc-cd-icone > svg { width: 2.6rem; height: 2.6rem; }
.orc-cd-cartoes > .orc-cd-cartao:has(> .orc-cd-icone) > :is(.orc-cd-area, .orc-cd-orcado) { flex-basis: 100%; text-align: center; }

/* (26/10/2026, pedido do responsável) Custos Diretos com o cabeçalho duplo: o título e o VOLTAR na 1ª faixa; a
   Fazenda, o Ciclo, a Cultura e os totais em etiquetas na 2ª faixa (cinza). */
.orc-cd-cabecalho .orc-cd-faixa > .orc-cd-contexto { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 10px;
  align-items: center; }
.orc-cd-cabecalho .orc-cd-faixa > .orc-cd-contexto > span { display: inline-block; padding: 4px 12px; font-size: .82rem;
  border-radius: 14px; background: var(--branco, #fff); border: 1px solid #d5dbd2; color: #3d4a38; }
.orc-cd-cabecalho .orc-cd-faixa > .orc-cd-contexto > span.orc-cd-total { background: #e7f3e8; border-color: #9fcaa2;
  color: #1f5a23; }
.orc-cd-cabecalho .orc-cd-faixa > .orc-cd-contexto > span.orc-cd-total.orc-cd-indisponivel { background: #f4f5f3;
  border-color: #dde3da; color: #5d6b58; }
.orc-cd-cabecalho + .msg, .orc-cd-cabecalho ~ .orc-cd-cartoes { margin-top: 14px; }

/* (26/10/2026, pedido do responsável) Cada cartão de Cultura com a sua cor (a faixa do alto, o orçado e o efeito
   ao passar o mouse), combinando com o desenho dela. */
:is(.orc-cd-cartoes, .pa-culturas) > .orc-cd-cor-cafe { --orc-cor: #b3261e; }
:is(.orc-cd-cartoes, .pa-culturas) > .orc-cd-cor-soja { --orc-cor: #6a9b2c; }
:is(.orc-cd-cartoes, .pa-culturas) > .orc-cd-cor-trigo { --orc-cor: #c48a10; }
:is(.orc-cd-cartoes, .pa-culturas) > .orc-cd-cor-milho { --orc-cor: #e0a000; }
:is(.orc-cd-cartoes, .pa-culturas) > .orc-cd-cor-algodao { --orc-cor: #607d8b; }
:is(.orc-cd-cartoes, .pa-culturas) > .orc-cd-cor-cana { --orc-cor: #558b2f; }
:is(.orc-cd-cartoes, .pa-culturas) > .orc-cd-cor-feijao { --orc-cor: #8d4f3a; }
:is(.orc-cd-cartoes, .pa-culturas) > .orc-cd-cor-arroz { --orc-cor: #9e9d24; }
:is(.orc-cd-cartoes, .pa-culturas) > .orc-cd-cor-sorgo { --orc-cor: #a0522d; }
:is(.orc-cd-cartoes, .pa-culturas) > .orc-cd-cor-citros { --orc-cor: #ef6c00; }
:is(.orc-cd-cartoes, .pa-culturas) > .orc-cd-cor-arvore { --orc-cor: #1b5e20; }
:is(.orc-cd-cartoes, .pa-culturas) > .orc-cd-cor-gado { --orc-cor: #795548; }
:is(.orc-cd-cartoes, .pa-culturas) > .orc-cd-cor-outra { --orc-cor: #00897b; }

/* (26/10/2026, pedido do responsável) O subtítulo "Custo Direto" no alto da 2ª faixa, centralizado, como o
   PLANEJAR ORÇAMENTO: em negrito, com a linha de pontas curvas no verde de Custos Diretos; as etiquetas abaixo. */
.orc-cd-cabecalho > .orc-cd-faixa { flex-wrap: wrap; }
.orc-cd-cabecalho .orc-cd-faixa > .orc-cd-faixa-titulo { flex: 1 1 100%; margin: 0 0 4px; font-size: .95rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; text-align: center; color: var(--verde-escuro, #1f3d1f); }
.orc-cd-cabecalho .orc-cd-faixa > .orc-cd-faixa-titulo::after { content: ""; display: block; height: 7px; margin-top: 6px;
  border: 3px solid #2e7d32; border-bottom: 0; border-radius: 9px 9px 0 0; }
.orc-cd-cabecalho .orc-cd-faixa > .orc-cd-contexto { flex: 1 1 100%; justify-content: center; }

/* (26/10/2026, pedido do responsável) A caixa do Custo Direto no molde da caixa PLANEJAR ORÇAMENTO: o mesmo fundo, a
   mesma borda e os mesmos cantos; o título do mesmo tamanho, com o desenho do C. Direto. */
.orc-cd-cabecalho .orc-cd-faixa > .orc-cd-caixa { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 10px;
  padding: 12px 18px; background: #ebede8; border: 1.5px solid #9fae98; border-radius: 10px; }
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-faixa-titulo { flex: 1 1 100%; margin: 0 0 2px; font-size: .95rem;
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: center; color: var(--verde-escuro, #1f3d1f); }
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-faixa-titulo::after { content: ""; display: block; height: 7px; margin-top: 6px;
  border: 3px solid #2e7d32; border-bottom: 0; border-radius: 9px 9px 0 0; }
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-faixa-titulo > .orc-cd-faixa-icone { width: 1.35em; height: 1.35em;
  margin-right: 8px; vertical-align: -0.28em; }
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-contexto { flex: 1 1 100%; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 10px;
  align-items: center; justify-content: center; }
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-contexto > span { display: inline-block; padding: 4px 12px; font-size: .82rem;
  border-radius: 14px; background: var(--branco, #fff); border: 1px solid #d5dbd2; color: #3d4a38; }
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-contexto > span.orc-cd-total { background: #e7f3e8; border-color: #9fcaa2;
  color: #1f5a23; }
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-contexto > span.orc-cd-total.orc-cd-indisponivel { background: #f4f5f3;
  border-color: #dde3da; color: #5d6b58; }

/* (26/10/2026, pedido do responsável) A caixa CUSTO DIRETO com a mesma altura da caixa PLANEJAR ORÇAMENTO (medidas
   em 26/10: 107 px × 171 px numa tela de 2000 px), com o título no alto e as etiquetas no meio do espaço. */
.orc-cd-cabecalho .orc-cd-faixa > .orc-cd-caixa { min-height: 9.5rem; box-sizing: border-box; align-content: flex-start; }
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-contexto { align-self: center; margin-top: auto; margin-bottom: auto; }

/* (26/10/2026, pedido do responsável) Na caixa Custo Direto, à esquerda, o nome da Fazenda (o subtítulo de SELECIONE A
   CLASSE (CONTA)) com a marca dela abaixo; as etiquetas do Ciclo e dos totais no restante, centralizadas. */
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-fazenda { flex: 0 0 auto; min-width: 220px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; padding: 0 12px; }
.orc-cd-cabecalho .orc-cd-fazenda > .orc-cd-fazenda-nome { font-size: .74rem; text-align: center; }
.orc-cd-cabecalho .orc-cd-fazenda > .orc-cd-fazenda-logo { display: block; max-width: 180px; max-height: 64px;
  width: auto; height: auto; object-fit: contain; }
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-fazenda + .orc-cd-contexto { flex: 1 1 0; min-width: 260px; }

/* (26/10/2026, pedido do responsável) O fundo da marca da Fazenda na cor do quadro: a mistura por multiplicação faz o
   branco do arquivo virar o cinza da caixa e mantém o desenho (vale para qualquer marca com fundo claro). */
.orc-cd-cabecalho .orc-cd-fazenda > .orc-cd-fazenda-logo { mix-blend-mode: multiply; }

/* (26/10/2026, pedido do responsável) O resumo da caixa Custo Direto no molde do "Resumo Orçamento Global": o título,
   o valor grande e o ciclo em minúsculas, cinza e itálico — nas cores da caixa cinza. */
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-resumo { flex: 1 1 0; min-width: 260px; align-self: center; text-align: center;
  padding: 4px 12px; border-radius: 10px; transition: background-color .15s ease; }
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-resumo:hover { background: rgba(46, 125, 50, .06); }
.orc-cd-cabecalho .orc-cd-resumo > .orc-cd-resumo-titulo { margin: 0; font-size: .74rem; font-weight: 700;
  color: var(--verde-escuro, #1f3d1f); }
.orc-cd-cabecalho .orc-cd-resumo > .orc-cd-resumo-valor { margin: 2px 0 0; font-size: 2.1rem; line-height: 1.15;
  color: #2e7d32; }
.orc-cd-cabecalho .orc-cd-resumo > .orc-cd-resumo-ciclo { margin: 2px 0 0; font-size: .9rem; font-style: italic;
  color: #6b7466; }
.orc-cd-cabecalho .orc-cd-resumo.orc-cd-indisponivel > .orc-cd-resumo-valor { font-size: 1rem; color: #5d6b58; }
/* Com a marca da Fazenda à esquerda, o resumo fica no centro da caixa: um espaço igual à direita. */
/* (26/10/2026) O espaço igual à direita agora é o bloco do Ciclo. */

/* (26/10/2026, pedido do responsável) A setinha ao lado do nome da Fazenda abre a lista das Fazendas do alcance. */
.orc-cd-cabecalho .orc-cd-troca { position: relative; }
.orc-cd-cabecalho .orc-cd-troca > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: 6px; padding: 2px 6px; border-radius: 6px; }
.orc-cd-cabecalho .orc-cd-troca > summary::-webkit-details-marker { display: none; }
.orc-cd-cabecalho .orc-cd-troca > summary:hover { background: rgba(46, 125, 50, .08); }
.orc-cd-cabecalho .orc-cd-troca > summary:focus-visible { outline: 2px solid #2e7d32; outline-offset: 2px; }
.orc-cd-cabecalho .orc-cd-troca-seta { flex: 0 0 auto; color: #2e7d32; transition: transform .15s ease; }
.orc-cd-cabecalho .orc-cd-troca[open] .orc-cd-troca-seta { transform: rotate(180deg); }
.orc-cd-cabecalho .orc-cd-troca-lista { position: absolute; z-index: 30; top: calc(100% + 4px); left: 50%;
  transform: translateX(-50%); min-width: 220px; margin: 0; padding: 4px 0; list-style: none; text-align: left;
  background: var(--branco, #fff); border: 1px solid #c9d2c5; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.orc-cd-cabecalho .orc-cd-troca-lista a { display: block; padding: 6px 14px; font-size: .85rem; color: #1f3d1f;
  text-decoration: none; white-space: nowrap; }
.orc-cd-cabecalho .orc-cd-troca-lista a:hover, .orc-cd-cabecalho .orc-cd-troca-lista a:focus-visible {
  background: #e7f3e8; }
.orc-cd-cabecalho .orc-cd-troca-lista a[aria-current] { font-weight: 700; color: #2e7d32; }

/* (26/10/2026, pedido do responsável) O nome da Fazenda e o título do resumo na mesma linha: os dois blocos começam no
   alto da caixa, com o mesmo respiro. */
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-fazenda { align-self: flex-start; justify-content: flex-start; padding-top: 0; }
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-resumo { align-self: flex-start; padding-top: 4px; }

/* (26/10/2026, pedido do responsável) O nome da Fazenda (também dentro da setinha de troca) e o título do resumo com a
   mesma letra de SELECIONE A CLASSE (CONTA): o mesmo tamanho, o mesmo negrito e o mesmo verde-escuro. */
.orc-cd-cabecalho .orc-cd-fazenda .orc-cd-fazenda-nome,
.orc-cd-cabecalho .orc-cd-ciclo .orc-cd-ciclo-nome,
.orc-cd-cabecalho .orc-cd-resumo > .orc-cd-resumo-titulo { font-size: .74rem; font-weight: 800; letter-spacing: .02em;
  line-height: 1.4; color: #1f3d1f; }

/* (26/10/2026, pedido do responsável) O Ciclo à direita da caixa, oposto à Fazenda e na mesma linha dela. */
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-ciclo { flex: 0 0 auto; min-width: 220px; align-self: flex-start; display: flex;
  flex-direction: column; align-items: center; padding: 0 12px; }

/* (26/10/2026, pedido do responsável) O ano do Ciclo escolhido num quadro abaixo da seleção: o fundo da caixa, a borda
   da caixa e a altura da marca da Fazenda (64px), para as duas colunas ficarem alinhadas e no mesmo padrão. */
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-ciclo { gap: 6px; }
.orc-cd-cabecalho .orc-cd-ciclo > .orc-cd-ciclo-ano { box-sizing: border-box; height: 64px; min-width: 150px; padding: 0 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; background: #ebede8;
  border: 1.5px solid #9fae98; border-radius: 8px; font-size: 1.45rem; font-weight: 800; letter-spacing: .02em;
  line-height: 1.1; color: #1f3d1f; }
.orc-cd-cabecalho .orc-cd-ciclo-ano > small { font-size: .62rem; font-weight: 600; font-style: italic; letter-spacing: 0;
  color: #6b7466; }

/* (26/10/2026, pedido do responsável) O ano do Ciclo menor e a borda do quadro bem suave. */
.orc-cd-cabecalho .orc-cd-ciclo > .orc-cd-ciclo-ano { font-size: 1.05rem; font-weight: 700; border: 1px solid #d3d9cf; }

/* (26/10/2026, pedido do responsável) Nos cartões de Gleba, "Gleba" numa linha só, acima do desenho e do nome. */
.orc-cd-cartoes > .orc-cd-cartao:has(> .orc-cd-icone) > .orc-cd-tipo { flex-basis: 100%; text-align: center; }

/* Nomes de Gleba são longos: o desenho fica numa linha própria, acima do nome, em todos os cartões por igual. */
.orc-cd-cartoes > .orc-cd-cartao:has(> .orc-cd-tipo):has(> .orc-cd-icone) > :is(.orc-cd-icone, .orc-cd-nome) {
  flex-basis: 100%; justify-content: center; text-align: center; }

/* (26/10/2026, pedido do responsável) Na matriz do orçamento (todas as Classes), os campos editáveis mais visíveis:
   borda mais escura, fundo branco com leve sombra interna e destaque ao passar o mouse; o campo selecionado ganha a
   borda VERMELHA, com um halo suave. *Antes: borda cinza-clara e contorno verde no foco.* */
.orc-valor:not([readonly]):not(:disabled) { background: #fff; border: 1px solid #8d9c88;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); transition: border-color .12s ease, box-shadow .12s ease; }
.orc-valor:not([readonly]):not(:disabled):hover { border-color: #2e7d32; }
.orc-valor:not([readonly]):not(:disabled):focus { outline: none; border-color: #c62828;
  box-shadow: 0 0 0 2px #c62828, 0 0 0 5px rgba(198, 40, 40, .18); }

/* (26/10/2026, pedido do responsável) Planejamento Agrícola no molde de Custo Direto: cada Cultura/Atividade num
   cartão branco com a faixa do alto na cor dela, o desenho antes do nome e o efeito ao passar o mouse. */
.pa-culturas { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.pa-culturas > .pa-cultura { margin: 0; padding: 14px 18px 12px; background: var(--branco, #fff);
  border: 1px solid #dfe4dc; border-top: 4px solid var(--orc-cor, #2e7d32); border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .07); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pa-culturas > .pa-cultura:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
  border-color: var(--orc-cor); }
.pa-culturas > .pa-cultura > .pa-cultura-titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font-size: .95rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #1f3d1f; }
.pa-cultura-titulo > .orc-cd-icone { display: inline-flex; flex: none; }
.pa-cultura-titulo > .orc-cd-icone > svg { width: 2.2rem; height: 2.2rem; }
.pa-culturas > .pa-cultura .pa-totais strong { color: var(--orc-cor); }
@media (prefers-reduced-motion: reduce) {
  .pa-culturas > .pa-cultura { transition: none; }
  .pa-culturas > .pa-cultura:hover { transform: none; }
}
.orc-cd-cabecalho ~ .pagina-quadro .pa-culturas:first-child, .orc-cd-cabecalho + .pagina-quadro { margin-top: 14px; }

/* (26/10/2026, pedido do responsável) A linha R$/ha abaixo do Orçado, nos cartões de Gleba, na cor da Cultura. */
.orc-cd-cartoes > .orc-cd-cartao .orc-cd-por-ha { flex-basis: 100%; align-self: stretch; text-align: center;
  margin-top: 2px; font-size: .8rem; color: var(--orc-cor); }

/* (26/10/2026, pedido do responsável) No Planejamento Agrícola, dentro de uma Cultura, o 2º quadro "Planejamento de
   Produção" no molde da caixa do cabeçalho (o fundo, a borda, o subtítulo e a linha de pontas curvas), com os quadros
   das Glebas dentro. */
.pa-quadro { margin-top: 14px; padding: 12px 18px 18px; background: #f4f6f2; border: 1.5px solid #9fae98;
  border-radius: 10px; }
.pa-quadro > .pa-quadro-titulo { margin: 0; font-size: .95rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; text-align: center; color: #1f3d1f; }
.pa-quadro > .pa-quadro-titulo::after { content: ""; display: block; height: 7px; margin-top: 6px;
  border: 3px solid #2e7d32; border-bottom: 0; border-radius: 9px 9px 0 0; }
.pa-quadro > .orc-cd-cartoes { margin-top: 12px; }
.pa-quadro > .texto-auxiliar { margin: 12px 0 0; text-align: center; }

/* (26/10/2026, pedido do responsável) O subtítulo "Planejar Produção e Faturamento" acima dos quadros das Culturas,
   na letra dos subtítulos das caixas, com a linha verde de pontas curvas. */
.pagina-quadro > .pa-subtitulo { margin: 0; font-size: .95rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; text-align: center; color: #1f3d1f; }
.pagina-quadro > .pa-subtitulo::after { content: ""; display: block; height: 7px; margin-top: 6px;
  border: 3px solid #2e7d32; border-bottom: 0; border-radius: 9px 9px 0 0; }
.pagina-quadro > .pa-subtitulo + .pa-cartoes { margin-top: 12px; }

/* (26/10/2026, pedido do responsável) Planejamento de Produção da Gleba: a tabela de setembro a agosto, com a
   produtividade por hectare para preencher e o volume total calculado embaixo, numa linha verde-clara. */
.pa-quadro > .pp-produto { margin: 12px 0 0; text-align: center; }
.pa-quadro > form > .tabela-wrap { margin-top: 12px; }
.pp-tabela { width: 100%; background: var(--branco, #fff); }
.pp-tabela th[scope="col"] { text-align: right; white-space: nowrap; }
.pp-tabela th[scope="row"] { text-align: right; white-space: nowrap; }
.pp-tabela td { text-align: right; }
.pp-tabela .orc-valor { width: 100%; min-width: 64px; max-width: 96px; }
.pp-tabela .pp-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-tabela .pp-total { font-weight: 700; }
.pp-tabela .pp-linha-volume > * { background: #e7f3e8; color: #1f5a23; font-weight: 600; }
.pa-quadro > form > .acoes-formulario { margin-top: 12px; justify-content: flex-end; }

/* (26/10/2026, pedido do responsável) "Planejar Produção e Faturamento" à esquerda, e os quadros das Culturas dentro
   de um quadro de linha preta suave (no lugar da linha verde de pontas curvas). */
.pa-moldura { padding: 12px 16px 16px; border: 1px solid rgba(0, 0, 0, .22); border-radius: 10px; }
.pa-moldura > .pa-subtitulo { margin: 0; font-size: .95rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; text-align: left; color: #1f3d1f; }
.pa-moldura > .pa-cartoes { margin-top: 12px; }

/* (26/10/2026, pedido do responsável) Uma linha divisória suave entre o título e os quadros das Culturas. */
.pa-moldura > .pa-subtitulo { padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, .18); }
.pa-moldura > .pa-cartoes { margin-top: 14px; }

/* (26/10/2026) O quadro de linha preta suave vale também para o "Planejamento de Produção" das Glebas, fora do
   quadro da página: o mesmo respiro em relação ao cabeçalho; a mensagem sem Glebas no mesmo recuo. */
main > .pa-moldura { margin-top: 14px; }
.pa-moldura > .texto-auxiliar { margin: 12px 0 0; }

/* (26/10/2026, pedido do responsável) A produção esperada no quadro da Gleba, abaixo da área, na cor da Cultura. */
.orc-cd-cartoes > .orc-cd-cartao > .pa-producao { flex-basis: 100%; text-align: center; font-weight: 700; }

/* (26/10/2026, pedido do responsável) Dois resumos lado a lado no centro da caixa, com uma linha suave entre eles. */
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-resumos { flex: 1 1 0; min-width: 300px; align-self: flex-start; display: flex;
  justify-content: center; gap: 0; padding-top: 4px; }
.orc-cd-cabecalho .orc-cd-resumos > .orc-cd-resumo { flex: 1 1 0; max-width: 360px; text-align: center; padding: 0 16px;
  border-radius: 10px; transition: background-color .15s ease; }
.orc-cd-cabecalho .orc-cd-resumos > .orc-cd-resumo:hover { background: rgba(46, 125, 50, .06); }
.orc-cd-cabecalho .orc-cd-resumos > .orc-cd-resumo + .orc-cd-resumo { border-left: 1px solid rgba(0, 0, 0, .15);
  border-radius: 0 10px 10px 0; }

/* (26/10/2026, pedido do responsável) "Produção esperada:" em letra miúda, antes do número. */
.orc-cd-cartoes > .orc-cd-cartao > .pa-producao > small { font-size: .72rem; font-weight: 400; color: #6b7466; }

/* (26/10/2026, pedido do responsável) PLANEJAR VENDAS DA PRODUÇÃO ao lado do título do Planejamento Agrícola. */
.pagina-topo-linha > .pa-acao-titulo { display: inline-flex; align-items: center; margin-left: 16px; margin-right: auto; }

/* (26/10/2026, pedido do responsável) Planejar Vendas da Produção: as escolhas (Cultura, produto) e o preço médio acima
   da tabela; o mês lançado como valor direto aparece travado. */
.pa-moldura > .pv-escolhas { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; }
.pa-moldura > .pv-escolhas:empty { display: none; }
.pv-preco { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }
.pv-preco > label { font-weight: 700; color: #1f3d1f; }
.pv-preco > .orc-valor { width: 140px; }
.pv-tabela .pv-travado { font-size: .75rem; font-style: italic; color: #6b7466; white-space: nowrap; }
.pa-moldura > form > .tabela-wrap { margin-top: 12px; }
.pa-moldura > form > .acoes-formulario { margin-top: 12px; justify-content: flex-end; }
.pa-moldura > form > .pv-excesso { margin: 12px 0 0; }

/* (26/10/2026) O preço médio em reais, alinhado à direita, com espaço para R$ 10.000,00. */
.pv-preco > .orc-valor { width: 160px; text-align: right; }

/* (26/10/2026, pedido do responsável) O PREÇO DE VENDA (orçamento): o subtítulo em letra pequena com a escolha ao lado;
   o campo do preço médio some quando o preço é definido por mês (e a linha dos preços aparece na tabela). */
.pv-preco-modo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }
.pv-preco-modo > .pv-preco-subtitulo { font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #1f3d1f; }
.pv-preco-modo > select { font-size: .85rem; padding: 3px 6px; }
.pv-preco[hidden], .pv-tabela tr[hidden] { display: none; }
.pv-tabela .pv-linha-preco .orc-valor { text-align: right; }
.pv-tabela #pv-preco-media { font-size: .78rem; font-weight: 600; color: #6b7466; }

/* (26/10/2026, pedido do responsável) Na linha do preço, o mês sem volume fica cinza mais escuro e indisponível; o
   preço médio repetido nos meses (só leitura) fica num cinza claro. */
.pv-tabela .pv-preco-mes:disabled { background: #d5d9d2; border-color: #c2c8be; color: transparent; cursor: not-allowed; }
.pv-tabela .pv-preco-mes:disabled::placeholder { color: transparent; }
.pv-tabela .pv-preco-mes[readonly]:not(:disabled) { background: #f1f3ef; color: #3d4a38; }

/* (26/10/2026, pedido do responsável) A observação de cada venda (mês): campo de texto curto na célula (o texto inteiro
   aparece ao passar o mouse); sem volume, cinza e indisponível, como o preço. */
.pv-tabela .pv-obs { box-sizing: border-box; width: 100%; min-width: 64px; max-width: 120px; padding: 2px 4px;
  font-size: .78rem; border: 1px solid #8d9c88; border-radius: 4px; background: #fff; }
.pv-tabela .pv-obs:focus { outline: none; border-color: #c62828; box-shadow: 0 0 0 2px #c62828, 0 0 0 5px rgba(198, 40, 40, .18); }
.pv-tabela .pv-obs:disabled { background: #d5d9d2; border-color: #c2c8be; cursor: not-allowed; }

/* (28/10/2026, D327 itens 7 e 8) Os meses depois do fim do Ciclo (até 6) com a marca "após o Ciclo"; o quadro
   Planejado × Vendido embaixo da tabela, com os números à direita. */
.pv-tabela th.pv-depois-do-ciclo { background: #eef2f7; color: #1f3550; }
.pv-tabela th.pv-depois-do-ciclo small { display: block; font-size: .66rem; font-weight: 600; }
.pa-moldura > #pv-vendido-titulo { margin-top: 18px; }
/* (31/10/2026) O Planejado × Vendido dentro do quadro do Planejamento de Faturamento. */
#pf-quadro > .pf-vendido-titulo { margin-top: 18px; }
.pv-vendido th, .pv-vendido td.pp-num { text-align: right; white-space: nowrap; }
.pv-vendido td small { display: block; }

/* (26/10/2026, pedido do responsável) O HISTÓRICO DO PLANEJAMENTO ao lado do PLANEJAR VENDAS; a tela do histórico em
   quadros de linha preta suave, um embaixo do outro. */
.pagina-topo-linha > .pa-acao-titulo { gap: 10px; }
.pa-moldura + .pa-moldura { margin-top: 16px; }
.pa-moldura > .tabela-wrap { margin-top: 12px; }
.pa-moldura > .pa-totais { margin: 10px 0 0; }
.ph-contexto { display: flex; align-items: center; gap: 8px; margin: 0; color: #3d4a38; }
.ph-contexto > .orc-cd-icone { display: inline-flex; }
.ph-contexto > .orc-cd-icone > svg { width: 1.8rem; height: 1.8rem; }

/* (26/10/2026, pedido do responsável) A setinha de recolher/expandir ao lado do título do histórico. */
.ph-titulo-recolhivel { display: flex; align-items: center; gap: 8px; }
.ph-recolher { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0;
  border: 1px solid #c9d2c5; border-radius: 6px; background: var(--branco, #fff); color: #2e7d32; cursor: pointer; }
.ph-recolher:hover { background: #e7f3e8; }
.ph-recolher:focus-visible { outline: 2px solid #2e7d32; outline-offset: 2px; }
.ph-recolher > svg { transition: transform .15s ease; }
.ph-recolher[aria-expanded="false"] > svg { transform: rotate(-90deg); }

/* (26/10/2026, pedido do responsável) As tabelas do Histórico do Planejamento com cor: cabeçalho verde-claro, linhas
   alternadas, bordas suaves e a linha de TOTAL em destaque. */
.ph-tabela { border: 1px solid #d5dbd2; border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden;
  width: 100%; }
.ph-tabela thead th { background: #e7f3e8; color: #1f5a23; border-bottom: 2px solid #9fcaa2; }
.ph-tabela tbody tr:nth-child(even) > * { background: #f7f9f6; }
.ph-tabela tbody tr:hover > * { background: #eef6ee; }
.ph-tabela tbody td { border-bottom: 1px solid #eceff0; }
.ph-tabela tfoot .ph-total > * { background: #dfeedd; color: #1f3d1f; font-weight: 800; border-top: 2px solid #9fcaa2; }
.ph-tabela tfoot .ph-total > th { text-align: left; text-transform: uppercase; letter-spacing: .03em; font-size: .85rem; }

/* (26/10/2026, pedido do responsável) Excel e PDF abaixo do VOLTAR, no Histórico do Planejamento. */
.pagina-topo-acoes.ph-acoes { flex-direction: column; align-items: flex-end; gap: 6px; }
.ph-acoes > .ph-exportar { display: inline-flex; gap: 6px; }

/* (26/10/2026, pedido do responsável) O ⓘ ao lado do subtítulo dos quadros do Planejamento Agrícola: o texto da
   explicação sem a caixa alta, o negrito e o espaçamento do subtítulo. */
.pa-subtitulo > .pc-icone-explicacao { margin-left: 6px; vertical-align: middle; }
.pa-subtitulo .pc-tooltip { text-transform: none; letter-spacing: normal; font-weight: 400; text-align: left; }

/* (29/10/2026, pedido do responsável) A nota de dinheiro no título do Faturamento orçado: mais larga que alta. */
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-faixa-titulo > .orc-cd-faixa-icone.orc-icone-nota { width: 1.9em; height: 1.2em; }

/* (29/10/2026, pedido do responsável) A entrada do Módulo Agrícola: dois cards lado a lado; o que ainda não tem
   destino fica esmaecido e não reage ao mouse. */
.ma-moldura { margin-top: 14px; }
.ma-cartoes { grid-template-columns: repeat(auto-fill, minmax(16rem, 18rem)); }
.ma-cartao { gap: 8px; }
.ma-cartao-indisponivel { opacity: .6; cursor: default; }
.ma-cartao-indisponivel:hover { transform: none; box-shadow: none; }

/* (29/10/2026, pedido do responsável) Módulo Agrícola: cada opção num cabeçalho inteiro, no estilo da caixa do
   Faturamento orçado — título centralizado com o ícone, a linha verde de pontas curvas, a descrição. */
.ma-faixas { display: grid; gap: 16px; margin-top: 14px; }
.ma-faixa { display: grid; justify-items: center; gap: 10px; padding: 16px 22px 18px; border: 1px solid #c9d0c6;
  border-radius: 10px; background: #edf0ec; color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s; }
a.ma-faixa:hover, a.ma-faixa:focus-visible { border-color: #2e7d32; box-shadow: 0 2px 10px rgba(46, 125, 50, .18); }
.ma-faixa-titulo { display: inline-flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: #1f3d1f; }
.ma-faixa-titulo::after { content: none; }
.ma-faixa::before { content: none; }
.ma-faixa-texto { width: 100%; padding-top: 10px; border-top: 3px solid #2e7d32; border-radius: 6px 6px 0 0;
  text-align: center; font-size: .88rem; color: #4a5547; }
.ma-faixa-indisponivel { opacity: .6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .ma-faixa { transition: none; } }

/* (29/10/2026, pedido do responsável) A colheitadeira passando pelo trigo, à esquerda do título Planejar
   Produção: o campo (trigo), a parte colhida (palha baixa) que cresce atrás da máquina, e a máquina, que anda
   junto com a borda da parte colhida. Sem movimento quando o sistema pede para reduzir. */
.ma-faixa-linha { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 18px; }
.ma-colheita { position: relative; height: 42px; overflow: hidden;
  background: linear-gradient(#8d6e4b, #8d6e4b) bottom / 100% 2px no-repeat; }
.ma-colheita-campo, .ma-colheita-colhido { position: absolute; left: 0; bottom: 2px; }
/* (29/10/2026, pedido do responsável) Sem o trigo em pé: o campo inteiro já colhido, a palha baixa sobre a terra.
   *Antes, no mesmo dia: o trigo à frente da máquina e a palha atrás.* */
.ma-colheita-campo { right: 0; height: 6px;
  background: repeating-linear-gradient(90deg, #b98b2e 0 2px, transparent 2px 5px); }
.ma-colheita-colhido { display: none; }
.ma-colheita-colhido::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: repeating-linear-gradient(90deg, #b98b2e 0 2px, transparent 2px 5px); }
.ma-colheitadeira { position: absolute; bottom: 1px; left: -64px; }
.ma-colheita-colhido { animation: ma-colher 14s linear infinite; }
.ma-colheitadeira { animation: ma-andar 14s linear infinite; }
.ma-palha-solta { animation: ma-palha .6s ease-out infinite; }
@keyframes ma-colher { from { width: 0; } to { width: 100%; } }
@keyframes ma-andar { from { left: -64px; } to { left: calc(100% - 64px); } }
@keyframes ma-palha { from { opacity: .9; transform: translateX(0); } to { opacity: 0; transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .ma-colheita-colhido, .ma-colheitadeira, .ma-palha-solta { animation: none; }
  .ma-colheita-colhido { width: 45%; }
  .ma-colheitadeira { left: calc(45% - 64px); }
}
@media (max-width: 720px) { .ma-faixa-linha { grid-template-columns: 1fr; } .ma-faixa-linha-fim { display: none; } }
/* (29/10/2026, pedido do responsável) As marcas das Fazendas, abaixo da descrição da faixa Planejar Produção. */
/* (29/10/2026, pedido do responsável) Nas extremidades: a primeira marca à esquerda, a última à direita. */
.ma-marcas { width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 14px 28px; padding: 4px 12px 0; }
/* (29/10/2026, pedido do responsável) Maiores e sem o fundo branco: a mistura de cores some com o branco da imagem
   sobre o fundo da faixa (a imagem enviada não muda). */
.ma-marca { height: 96px; width: auto; max-width: 230px; object-fit: contain; mix-blend-mode: multiply; }
.ma-marca-nome { padding: 6px 12px; border: 1px solid #c9d0c6; border-radius: 999px; background: #fff;
  font-size: .8rem; font-weight: 700; color: #33401c; }
/* (29/10/2026, pedido do responsável) À direita do título Planejar Produção, o pasto (uma linha e tracinhos verdes)
   e três touros galopando da direita para a esquerda, em branco com o traço preto: a tira de 6 quadros do galope
   ("Bull running", Grape Tech, LottieFiles, Lottie Simple License — ver img/modulo_agricola/LEIA-ME.txt),
   percorrida quadro a quadro (0,6 s por passada), enquanto cada touro atravessa a faixa no seu ritmo. Parados
   quando o sistema pede para reduzir o movimento. *Antes, no mesmo dia: bezerros desenhados à mão.* */
.ma-pasto { position: relative; height: 42px; overflow: hidden;
  background: linear-gradient(#6a9b2c, #6a9b2c) bottom / 100% 2px no-repeat; }
.ma-pasto-chao { position: absolute; left: 0; right: 0; bottom: 2px; height: 5px;
  background: repeating-linear-gradient(90deg, #7cb342 0 2px, transparent 2px 6px); }
.ma-touro { --ma-touro-l: 68px; position: absolute; bottom: 2px; left: 100%; width: var(--ma-touro-l); height: 38px;
  background: url('../img/modulo_agricola/touro_galope.png') 0 0 / calc(var(--ma-touro-l) * 6) 100% no-repeat;
  animation: ma-touro-passada .6s steps(6) infinite, ma-touro-correr 10s linear infinite; }
.ma-touro-2 { animation-duration: .6s, 12.5s; animation-delay: -.2s, -4.5s; }
.ma-touro-3 { animation-duration: .6s, 8.5s; animation-delay: -.4s, -7s; }
@keyframes ma-touro-passada { to { background-position: calc(var(--ma-touro-l) * -6) 0; } }
@keyframes ma-touro-correr { from { left: 100%; } to { left: calc(var(--ma-touro-l) * -1); } }
@media (prefers-reduced-motion: reduce) {
  .ma-touro { animation: none; }
  .ma-touro-1 { left: 12%; } .ma-touro-2 { left: 44%; } .ma-touro-3 { left: 74%; }
}
/* (29/10/2026, pedido do responsável) A marca de cada Fazenda é o caminho para as culturas dela. */
.ma-marca-link { display: inline-flex; border-radius: 8px; padding: 4px 8px; text-decoration: none;
  transition: background-color .15s, box-shadow .15s; }
.ma-marca-link:hover, .ma-marca-link:focus-visible { background-color: rgba(46, 125, 50, .08);
  box-shadow: 0 0 0 2px #2e7d32; }
@media (prefers-reduced-motion: reduce) { .ma-marca-link { transition: none; } }
/* (29/10/2026, pedido do responsável) A linha verde ocupa a largura toda da faixa. */
.ma-faixa-linha > .ma-faixa-texto { grid-column: 1 / -1; }
/* (29/10/2026, pedido do responsável) O título Planejar Produção sem ícone, centralizado na sua coluna. */
.ma-faixa-linha > .ma-titulo-hifens { justify-self: center; text-align: center; }

/* (29/10/2026, pedido do responsável) Planejar Vendas da Produção: à esquerda do título, a esteira com os saquinhos
   de dinheiro; à direita, outra esteira, no sentido contrário. A faixa continua sem destino: só o aviso "Em preparação" fica esmaecido. */
/* (29/10/2026, pedido do responsável) A esteira rolante, da esquerda para a direita, levando os saquinhos de
   dinheiro; a correia corre na mesma direção, sobre os roletes.
   *Antes, no mesmo dia: moedas e notas soltas.* */
.ma-esteira { position: relative; height: 46px; overflow: hidden; }
/* ma-esteira-discreta (29/10/2026, pedido do responsável): a correia fina e clara, os roletes pequenos; mais
   devagar, no passo dos saquinhos. *Antes, no mesmo dia: a correia escura, de 7 px.* */
.ma-esteira-correia { position: absolute; left: 0; right: 0; bottom: 5px; height: 4px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #c4c8c0 0 10px, #d6d9d3 10px 20px);
  animation: ma-correia .6s linear infinite; }
.ma-esteira-rolos { position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: radial-gradient(circle at 6px 2.5px, #d3d6cf 1.6px, #b9bdb5 2.1px, transparent 2.5px) 0 0 / 26px 5px repeat-x; }
/* (29/10/2026, pedido do responsável) Só os saquinhos, cinco, com espaçamentos todos diferentes (de 1,2 s a 4,3 s
   entre um e outro): os atrasos não se repetem. */
.ma-carga { position: absolute; bottom: 9px; left: -44px; animation: ma-carga-anda 14s linear infinite; }
.ma-carga svg { display: block; }
.ma-carga-2 { animation-delay: -2.9s; }
.ma-carga-3 { animation-delay: -4.1s; }
.ma-carga-4 { animation-delay: -8.4s; }
.ma-carga-5 { animation-delay: -10.4s; }
@keyframes ma-correia { from { background-position: 0 0; } to { background-position: 20px 0; } }
@keyframes ma-carga-anda { from { left: -44px; } to { left: 100%; } }
/* (29/10/2026, pedido do responsável) A esteira da direita: no sentido contrário (da direita para a esquerda), com
   espaçamentos todos diferentes entre si e dos da esquerda. *Antes, no mesmo dia: o gráfico de lucro.* */
.ma-esteira-volta .ma-esteira-correia { animation-direction: reverse; }
.ma-esteira-volta .ma-carga { left: 100%; animation-name: ma-carga-volta; }
.ma-carga-v2 { animation-delay: -3.4s; }
.ma-carga-v3 { animation-delay: -5.7s; }
.ma-carga-v4 { animation-delay: -9.9s; }
.ma-carga-v5 { animation-delay: -11.4s; }
@keyframes ma-carga-volta { from { left: 100%; } to { left: -44px; } }
@media (prefers-reduced-motion: reduce) {
  .ma-carga, .ma-esteira-correia { animation: none; }
  .ma-carga-1 { left: 2%; } .ma-carga-2 { left: 20%; } .ma-carga-3 { left: 28%; } .ma-carga-4 { left: 58%; } .ma-carga-5 { left: 72%; }
  .ma-carga-v1 { left: 92%; } .ma-carga-v2 { left: 72%; } .ma-carga-v3 { left: 56%; } .ma-carga-v4 { left: 26%; } .ma-carga-v5 { left: 15%; }
}
/* (29/10/2026, pedido do responsável) Os cards das culturas de cada Fazenda, abaixo da sua esteira: a 1ª Fazenda
   no quadro da colheitadeira, a 2ª no dos touros. Pequenos, com o ícone, o nome e a cor da cultura no alto. */
.ma-culturas { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 0; }
.ma-cultura { --orc-cor: #2e7d32; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px;
  border: 1px solid #d5dbd2; border-top: 3px solid var(--orc-cor); border-radius: 8px; background: #fff;
  color: #1f3d1f; text-decoration: none; font-size: .8rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); transition: box-shadow .15s, transform .15s; }
.ma-cultura .orc-cd-icone svg { width: 26px; height: 26px; display: block; }
a.ma-cultura:hover, a.ma-cultura:focus-visible { box-shadow: 0 3px 10px rgba(0, 0, 0, .14); transform: translateY(-1px); }
.ma-culturas-vazio { font-size: .8rem; font-style: italic; color: #6b7468; }
@media (prefers-reduced-motion: reduce) { .ma-cultura { transition: none; } a.ma-cultura:hover { transform: none; } }
/* (29/10/2026, pedido do responsável) Planejar Produção em dois quadros independentes, lado a lado, com uma divisa
   branca estreita no meio; cada um com a sua esteira, a linha verde e as culturas da sua Fazenda. */
.ma-quadros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ma-quadro { display: grid; align-content: start; gap: 12px; padding: 16px 22px 18px; border: 1px solid #c9d0c6;
  border-radius: 10px; background: #edf0ec; }
.ma-quadro-linha { display: block; border-top: 3px solid #2e7d32; border-radius: 6px 6px 0 0; }
.ma-quadros > .ma-faixa-texto { grid-column: 1 / -1; }
@media (max-width: 720px) { .ma-quadros { grid-template-columns: 1fr; } }
/* (29/10/2026, pedido do responsável) A tabela da produção de cada Fazenda: os cards das culturas no alto das
   colunas, Planejada / Alcançada / Faturada nas linhas, as colunas separadas por divisórias. */
.ma-tabela-culturas { width: 100%; border-collapse: collapse; font-size: .84rem; }
.ma-tabela-culturas th, .ma-tabela-culturas td { padding: 7px 10px; text-align: center; vertical-align: middle; }
.ma-tabela-culturas th + th, .ma-tabela-culturas td, .ma-tabela-culturas th + td { border-left: 1px solid #c9d0c6; }
.ma-tabela-culturas tbody tr { border-top: 1px solid #dde2da; }
.ma-tabela-culturas .ma-tc-rotulo { text-align: left; white-space: nowrap; font-size: .8rem; font-weight: 700; color: #33401c; }
.ma-tabela-culturas td { font-weight: 600; color: #1f3d1f; white-space: nowrap; }
.ma-tc-card { display: flex; flex-direction: row; justify-content: center; margin: 0; gap: 0; }
/* ma-tc-junto (29/10/2026, pedido do responsável): os cards o mais perto possível dos rótulos (a tabela no
   tamanho do conteúdo, à esquerda), os rótulos alinhados à direita e o ⓘ antes de cada um. */
.ma-tabela-culturas { width: auto; justify-self: start; }
.ma-tabela-culturas .ma-tc-rotulo { text-align: right; }
/* (29/10/2026, pedido do responsável) O ⓘ à esquerda da célula; o rótulo à direita. */
.ma-tabela-culturas .ma-tc-rotulo .pc-icone-explicacao { float: left; margin: 1px 14px 0 0; }
/* (29/10/2026, pedido do responsável) A marca da Fazenda dentro do seu quadro, centralizada acima da tabela. */
.ma-quadro-marca { justify-self: center; }
.ma-quadro-marca .ma-marca { height: 78px; max-width: 210px; }
/* ma-quadros-encaixe (29/10/2026): os dois quadros lado a lado quando cabem, um embaixo do outro quando não. Nunca
   um quadro por cima do outro. */
.ma-quadros { grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.ma-quadro { min-width: 0; }
/* (29/10/2026, pedido do responsável) Os botões acima do quadro de cada Fazenda; os que ainda não têm tela
   ficam à vista, esmaecidos, sem reagir ao clique. */
.ma-coluna { display: grid; align-content: start; gap: 8px; min-width: 0; }
/* (29/10/2026, pedido do responsável) Os 4 botões da mesma largura e altura: quatro colunas iguais, o texto
   centralizado (em tela estreita, duas colunas iguais). */
.ma-botoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ma-botao { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 2.8rem;
  font-size: .72rem; line-height: 1.2; padding: 6px 8px; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 720px) { .ma-botoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ma-botao-inativo { opacity: .5; cursor: not-allowed; pointer-events: none; }
/* ma-botoes-menores (29/10/2026, pedido do responsável): os botões menores e com letra menor; os quatro
   continuam da mesma largura e altura. */
.ma-botoes { grid-template-columns: repeat(4, minmax(0, 8.6rem)); gap: 6px; justify-content: start; }
.ma-botao { min-height: 2.3rem; font-size: .62rem; letter-spacing: .02em; padding: 3px 6px; }
@media (max-width: 720px) { .ma-botoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* (29/10/2026, pedido do responsável) As vendas em dois quadros, como a produção; a tabela dos valores segue a
   tabela da produção (cards no alto, rótulos à direita, ⓘ à esquerda). */
.ma-faixas > .ma-quadros + .ma-quadros { margin-top: 0; }
.ma-tabela-valores td { font-variant-numeric: tabular-nums; }
/* ma-colunas-alinhadas (29/10/2026, pedido do responsável): a tabela de produção e a de vendas com as colunas
   alinhadas — a mesma largura na coluna dos rótulos e em cada coluna de cultura. */
.ma-tabela-culturas { table-layout: fixed; }
.ma-tabela-culturas th.ma-tc-rotulo { width: 14.5rem; box-sizing: border-box; }
.ma-tabela-culturas thead th:not(.ma-tc-rotulo) { width: 9.5rem; box-sizing: border-box; }
/* ma-coluna-marca (29/10/2026, pedido do responsável): a marca da Fazenda no quadro. *A linha preta entre o
   quadro da produção e o das vendas saiu no mesmo dia (ma-quadros-separados).* */
.ma-coluna-marca { justify-self: center; }
.ma-coluna-marca .ma-marca { height: 78px; max-width: 210px; }
.ma-bloco { display: grid; min-width: 0; }
/* ma-quadro-topo (29/10/2026, pedido do responsável, pela imagem de exemplo): em cada metade do quadro, a marca
   à esquerda e, à direita, os botões daquela metade acima da esteira (em tela estreita, um embaixo do outro). */
.ma-quadro-topo { display: flex; align-items: flex-end; gap: 18px; min-width: 0; }
.ma-quadro-topo > .ma-coluna-marca { flex: none; }
.ma-coluna-marca .ma-marca { height: 110px; max-width: 220px; }
.ma-quadro-acoes { flex: 1; min-width: 0; display: grid; gap: 10px; }
.ma-quadro-acoes > .ma-botoes { grid-template-columns: repeat(2, minmax(0, 8.6rem)); justify-content: end; }
@media (max-width: 720px) { .ma-quadro-topo { flex-direction: column; align-items: stretch; }
  .ma-quadro-topo > .ma-coluna-marca { align-self: center; } }
/* ma-quadros-separados (29/10/2026, pedido do responsável): o quadro da produção e o das vendas separados por
   uma pequena divisa em branco, a mesma que separa as duas Fazendas. *Antes, no mesmo dia: juntos, com uma
   linha preta entre eles.* */
.ma-bloco { gap: 10px; }
/* ma-quadro-titulo (29/10/2026, pedido do responsável): as marcas menores; o título do quadro (PRODUÇÃO,
   FATURAMENTO) ao lado da marca, à esquerda dos botões. */
.ma-coluna-marca .ma-marca { height: 76px; max-width: 170px; }
.ma-quadro-cabeca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ma-quadro-titulo { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: .06em; color: #1f3d1f; }
.ma-quadro-cabeca > .ma-botoes { margin-left: auto; }
@media (max-width: 720px) { .ma-quadro-cabeca { flex-wrap: wrap; } .ma-quadro-cabeca > .ma-botoes { margin-left: 0; } }
/* ma-quadro-cabeca-botoes (29/10/2026): ao lado do título, os botões não encolhem. */
.ma-quadro-cabeca > .ma-botoes { flex: none; grid-template-columns: repeat(2, 8.6rem); }
@media (max-width: 720px) { .ma-quadro-cabeca > .ma-botoes { flex: 1 1 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ma-botoes-numa-linha (29/10/2026, pedido do responsável): os botões mais compridos, o nome numa linha só,
   os dois da mesma largura; sem espaço ao lado do título, descem para a linha de baixo. */
.ma-quadro-cabeca { flex-wrap: wrap; row-gap: 8px; }
.ma-quadro-cabeca > .ma-botoes { grid-template-columns: repeat(2, 1fr); }
.ma-quadro-cabeca .ma-botao { white-space: nowrap; overflow-wrap: normal; min-height: 2rem; padding: 4px 14px; }
/* ma-titulo-alinhado (29/10/2026, pedido do responsável): o título na mesma linha dos botões, alinhado com eles;
   com pouco espaço, os botões estreitam e o nome quebra em duas linhas, em vez de descerem. */
.ma-quadro-cabeca { flex-wrap: nowrap; }
.ma-quadro-titulo { flex: none; }
.ma-quadro-cabeca > .ma-botoes { flex: 0 1 auto; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ma-quadro-cabeca .ma-botao { white-space: normal; overflow-wrap: normal; text-wrap: balance; }
@media (max-width: 720px) { .ma-quadro-cabeca { flex-wrap: wrap; } }
/* ma-quadros-alinhados (29/10/2026, pedido do responsável): as colunas das Fazendas dividem as mesmas linhas da
   grade — o quadro de PRODUÇÃO das duas com a mesma altura, os de FATURAMENTO começando na mesma linha. */
#ma-planejar { row-gap: 10px; }
#ma-planejar > .ma-coluna { grid-row: span 2; grid-template-rows: subgrid; gap: 10px; }
#ma-planejar > .ma-coluna > .ma-bloco { display: contents; }
/* (29/10/2026, pedido do responsável) Cada Fazenda numa linha: PRODUÇÃO à esquerda e FATURAMENTO à direita, com as
   mesmas colunas nas duas Fazendas. *Antes, no mesmo dia: uma coluna por Fazenda (as regras acima).* */
#ma-planejar { grid-template-columns: minmax(0, 1fr); }
#ma-planejar > .ma-coluna { grid-row: auto; grid-template-rows: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 720px) { #ma-planejar > .ma-coluna { grid-template-columns: minmax(0, 1fr); } }
/* (29/10/2026, pedido do responsável, pela imagem de exemplo) Em cada quadro: o título na primeira célula do
   cabeçalho da tabela; a tabela num quadro interno, com borda, na largura toda; sem a linha verde entre a esteira e
   a tabela; os botões à direita, acima da esteira. */
#ma-planejar .ma-quadro-linha { display: none; }
#ma-planejar .ma-quadro-cabeca { justify-content: flex-end; }
#ma-planejar .ma-tabela-culturas { width: 100%; justify-self: stretch; background: #fff; border-radius: 8px;
  box-shadow: 0 0 0 2px #8fa889; }
#ma-planejar .ma-tabela-culturas th.ma-tc-titulo { text-align: center; vertical-align: middle; }
#ma-planejar .ma-tc-titulo > .ma-quadro-titulo { margin: 0; font-size: 1.2rem; white-space: nowrap; }
/* (29/10/2026, pedido do responsável) Os cartões das Culturas inertes; na Vale do Sonho, os bois correm da
   esquerda para a direita (o desenho espelhado) e a esteira do dinheiro também. *Antes, no mesmo dia: da direita
   para a esquerda.* */
#ma-planejar .ma-cultura { cursor: default; }
.ma-touro { left: calc(var(--ma-touro-l) * -1); transform: scaleX(-1); animation-name: ma-touro-passada, ma-touro-ida; }
@keyframes ma-touro-ida { from { left: calc(var(--ma-touro-l) * -1); } to { left: 100%; } }
.ma-esteira-volta .ma-esteira-correia { animation-direction: normal; }
.ma-esteira-volta .ma-carga { left: -44px; animation-name: ma-carga-anda; }
/* (29/10/2026, pedido do responsável) Os botões dos quadros em verde musgo ao passar o mouse (os inativos não). */
#ma-planejar a.ma-botao:is(:hover, :focus-visible) { background: #5a6b2e; border-color: #5a6b2e; color: #fff; }
/* (30/10/2026, pedido do responsável) O ESTOQUE PRODUÇÃO AGRÍCOLA, ao lado do título, também em verde musgo. */
#ma-estoque-agricola:is(:hover, :focus-visible) { background: #5a6b2e; border-color: #5a6b2e; color: #fff; }
/* (29/10/2026, pedido do responsável) Um ciclo só por Fazenda, de 14 s: a colheitadeira (ou os bois) atravessa
   o campo de 0 a 60% (8,4 s), com a esteira vazia; ao chegar ao fim, aparecem os saquinhos — 3 juntos e mais 1 —,
   que correm a esteira de 60% a 88% (cada um com o seu atraso, o último saindo antes dos 100%); depois a
   colheitadeira e os bois recomeçam. Quatro saquinhos (o 5º sai). Só com movimento permitido. */
#ma-planejar .ma-carga-5, #ma-planejar .ma-carga-v5 { display: none; }
@media (prefers-reduced-motion: no-preference) {
  #ma-planejar .ma-colheitadeira { animation: ma-ciclo-colheitadeira 14s linear infinite; }
  #ma-planejar .ma-touro { animation: ma-touro-passada .6s steps(6) infinite, ma-ciclo-boi 14s linear infinite both; }
  #ma-planejar .ma-touro-1 { animation-delay: 0s, 0s; }
  #ma-planejar .ma-touro-2 { animation-delay: -.2s, .5s; }
  #ma-planejar .ma-touro-3 { animation-delay: -.4s, 1s; }
  #ma-planejar .ma-carga { opacity: 0; animation: ma-ciclo-dinheiro 14s linear infinite both; }
  #ma-planejar :is(.ma-carga-1, .ma-carga-v1) { animation-delay: 0s; }
  #ma-planejar :is(.ma-carga-2, .ma-carga-v2) { animation-delay: .35s; }
  #ma-planejar :is(.ma-carga-3, .ma-carga-v3) { animation-delay: .7s; }
  #ma-planejar :is(.ma-carga-4, .ma-carga-v4) { animation-delay: 1.6s; }
}
@keyframes ma-ciclo-colheitadeira { 0% { left: -64px; } 60% { left: calc(100% - 64px); }
  100% { left: calc(100% - 64px); } }
@keyframes ma-ciclo-boi { 0% { left: calc(var(--ma-touro-l) * -1); } 52% { left: 100%; } 100% { left: 100%; } }
@keyframes ma-ciclo-dinheiro { 0%, 60% { left: -44px; opacity: 0; } 60.5% { left: -44px; opacity: 1; }
  88% { left: 100%; opacity: 1; } 88.5%, 100% { left: 100%; opacity: 0; } }
/* (29/10/2026, pedido do responsável) O ciclo revisto, 16 s: a colheitadeira atravessa em 8,4 s (52,5%) e some
   pela direita; os três bois saem a 0, 0,5 e 1 s e terminam juntos aos 8,4 s; o dinheiro, 2 s mais devagar
   (5,9 s = 37%), começa aos 8,4 s e o último saquinho (1,6 s depois) sai aos 15,9 s. */
@media (prefers-reduced-motion: no-preference) {
  #ma-planejar .ma-colheitadeira { animation: ma-ciclo2-colheitadeira 16s linear infinite; }
  #ma-planejar .ma-touro-1 { animation: ma-touro-passada .6s steps(6) infinite, ma-ciclo2-boi-1 16s linear infinite; }
  #ma-planejar .ma-touro-2 { animation: ma-touro-passada .6s steps(6) -.2s infinite, ma-ciclo2-boi-2 16s linear infinite; }
  #ma-planejar .ma-touro-3 { animation: ma-touro-passada .6s steps(6) -.4s infinite, ma-ciclo2-boi-3 16s linear infinite; }
  #ma-planejar .ma-carga { animation-name: ma-ciclo2-dinheiro; animation-duration: 16s; }
}
@keyframes ma-ciclo2-colheitadeira { 0% { left: -64px; } 52.5%, 100% { left: 100%; } }
@keyframes ma-ciclo2-boi-1 { 0% { left: calc(var(--ma-touro-l) * -1); } 52.5%, 100% { left: 100%; } }
@keyframes ma-ciclo2-boi-2 { 0%, 3.125% { left: calc(var(--ma-touro-l) * -1); } 52.5%, 100% { left: 100%; } }
@keyframes ma-ciclo2-boi-3 { 0%, 6.25% { left: calc(var(--ma-touro-l) * -1); } 52.5%, 100% { left: 100%; } }
@keyframes ma-ciclo2-dinheiro { 0%, 52.5% { left: -44px; opacity: 0; } 52.8% { left: -44px; opacity: 1; }
  89.5% { left: 100%; opacity: 1; } 90%, 100% { left: 100%; opacity: 0; } }
/* (29/10/2026, pedido do responsável) Dois saquinhos amontoados, o 3º com um espaço pequeno, o 4º com um maior. */
@media (prefers-reduced-motion: no-preference) {
  #ma-planejar :is(.ma-carga-2, .ma-carga-v2) { animation-delay: .15s; }
  #ma-planejar :is(.ma-carga-3, .ma-carga-v3) { animation-delay: .65s; }
  #ma-planejar :is(.ma-carga-4, .ma-carga-v4) { animation-delay: 1.6s; }
}
/* (29/10/2026, pedido do responsável) Ciclo de 18 s: a colheitadeira e os bois atravessam em 10,4 s (57,78%); o
   dinheiro começa aos 10,4 s e atravessa em 5,9 s (32,89%); o último saquinho (1,6 s depois) sai aos 17,9 s. */
@media (prefers-reduced-motion: no-preference) {
  #ma-planejar .ma-colheitadeira { animation: ma-ciclo3-colheitadeira 18s linear infinite; }
  #ma-planejar .ma-touro-1 { animation: ma-touro-passada .6s steps(6) infinite, ma-ciclo3-boi-1 18s linear infinite; }
  #ma-planejar .ma-touro-2 { animation: ma-touro-passada .6s steps(6) -.2s infinite, ma-ciclo3-boi-2 18s linear infinite; }
  #ma-planejar .ma-touro-3 { animation: ma-touro-passada .6s steps(6) -.4s infinite, ma-ciclo3-boi-3 18s linear infinite; }
  #ma-planejar .ma-carga { animation-name: ma-ciclo3-dinheiro; animation-duration: 18s; }
}
@keyframes ma-ciclo3-colheitadeira { 0% { left: -64px; } 57.78%, 100% { left: 100%; } }
@keyframes ma-ciclo3-boi-1 { 0% { left: calc(var(--ma-touro-l) * -1); } 57.78%, 100% { left: 100%; } }
@keyframes ma-ciclo3-boi-2 { 0%, 2.78% { left: calc(var(--ma-touro-l) * -1); } 57.78%, 100% { left: 100%; } }
@keyframes ma-ciclo3-boi-3 { 0%, 5.56% { left: calc(var(--ma-touro-l) * -1); } 57.78%, 100% { left: 100%; } }
@keyframes ma-ciclo3-dinheiro { 0%, 57.78% { left: -44px; opacity: 0; } 58.1% { left: -44px; opacity: 1; }
  90.67% { left: 100%; opacity: 1; } 91%, 100% { left: 100%; opacity: 0; } }
/* orc-cd-ciclo-sem-resumo (29/10/2026, pedido do responsável): caixa de contexto sem resumo no centro — a Fazenda e
   o Ciclo centralizados na caixa, lado a lado. *Antes, no mesmo dia: o Ciclo à direita.* */
.orc-cd-cabecalho .orc-cd-caixa:has(> .orc-cd-fazenda + .orc-cd-ciclo) { justify-content: center; column-gap: 120px; }
/* (29/10/2026, pedido do responsável) A colheitadeira pequena, parada, no título PLANEJAR PRODUÇÃO. */
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-faixa-titulo > .orc-cd-faixa-icone.pa-icone-colheitadeira { width: 2.1em; height: 1.3em; }
/* (29/10/2026, pedido do responsável) O boi parado à direita de PLANEJAR PRODUÇÃO: o primeiro quadro do touro da
   faixa do Módulo Agrícola. */
.pa-icone-boi { display: inline-block; width: 2.5em; height: 1.4em; margin-left: 10px; vertical-align: -0.35em;
  background: url('../img/modulo_agricola/touro_galope.png') 0 0 / calc(2.5em * 6) 100% no-repeat; }
/* (29/10/2026, pedido do responsável) O nome da Fazenda no subtítulo, como no cadastro (sem caixa alta). */
.pa-subtitulo > .pa-subtitulo-fazenda { text-transform: none; }
/* (29/10/2026, pedido do responsável) O título da caixa dentro da Cultura ("Faz. São José Garimpo - Café") como no
   cadastro, sem caixa alta. */
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-faixa-titulo:has(> .pa-titulo-cultura) { text-transform: none; }
/* (29/10/2026, pedido do responsável) O desenho da Cultura (o mesmo dos cartões) no título da caixa, dentro da
   Cultura. */
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-faixa-titulo > span.pa-titulo-cultura { display: inline-block; width: 1.7em; height: 1.7em;
  vertical-align: -0.45em; }
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-faixa-titulo > span.pa-titulo-cultura svg { width: 100%; height: 100%; }
/* (29/10/2026, pedido do responsável) Dentro da Cultura: o boi (gado) antes do título e o desenho da Cultura depois. */
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-faixa-titulo > .pa-icone-boi.pa-boi-antes { margin: 0 8px 0 0; }
.orc-cd-cabecalho .orc-cd-caixa > .orc-cd-faixa-titulo > span.pa-titulo-cultura { margin: 0 0 0 8px; }
/* (29/10/2026, pedido do responsável) A Produtividade Planejada logo abaixo da Produção Planejada, no cartão da
   Gleba, sem uma segunda linha divisória. */
.orc-cd-cartoes > .orc-cd-cartao > .pa-producao + .pa-produtividade { margin-top: 2px; padding-top: 0; border-top: 0; }
/* (29/10/2026, pedido do responsável; sql/190) A linha Apontar Produção, abaixo da Produção planejada, em destaque
   suave; o mês que ainda não chegou, travado. */
.pp-tabela .pp-linha-apontada > th, .pp-tabela .pp-linha-apontada > td { background: #f3f8ee; }
.pp-tabela .pp-linha-apontada > th { font-weight: 700; color: var(--verde-escuro, #1f3d1f); }
.pp-tabela .pp-mes-futuro { display: block; text-align: center; color: #9aa39a; }
/* (29/10/2026, pedido do responsável) A tabela dos meses da Gleba: as colunas com a mesma largura, a linha
   divisória entre elas e os números menores. */
.pp-tabela-meses { table-layout: fixed; }
.pp-tabela-meses thead th:first-child, .pp-tabela-meses th[scope="row"] { width: 190px; }
.pp-tabela-meses th[scope="col"], .pp-tabela-meses td { padding-left: 6px; padding-right: 6px; font-size: .8rem; }
.pp-tabela-meses :is(th, td) + :is(th, td) { border-left: 1px solid #dde3da; }
.pp-tabela-meses .orc-valor { width: 100%; min-width: 0; max-width: none; box-sizing: border-box; font-size: .8rem; }
/* (29/10/2026, pedido do responsável) O campo do mês atual, selecionado ao abrir, com a borda vermelha. */
.pp-tabela-meses input.orc-valor.pp-mes-atual:not([readonly]):not(:disabled) { border: 2px solid #c62828; }
/* (29/10/2026, pedido do responsável) No Apontar Produção, nos cartões: o planejado todo em cinza claro e o
   apontado todo em vermelho. */
.orc-cd-cartoes > .orc-cd-cartao > .pa-producao.pa-apagada,
.orc-cd-cartoes > .orc-cd-cartao > .pa-producao.pa-apagada > small { color: #a9b0a7; }
.orc-cd-cartoes > .orc-cd-cartao > .pa-producao.pa-apontada,
.orc-cd-cartoes > .orc-cd-cartao > .pa-producao.pa-apontada > small { color: #c62828; }
/* (29/10/2026, pedido do responsável) No cabeçalho do Apontar Produção (a caixa com a Produção Apontada): a Área
   Total e a Produção Planejada em cinza; a Produção Apontada continua verde. */
.orc-cd-resumos:has(> [data-rotulo^="Produção apontada"]) > .orc-cd-resumo:not([data-rotulo^="Produção apontada"])
  :is(.orc-cd-resumo-titulo, .orc-cd-resumo-valor, .orc-cd-resumo-valor strong) { color: #a9b0a7; }
/* (29/10/2026, pedido do responsável) O cartão da Cultura no Estoque da Produção: ainda não abre nada, então não
   sobe ao passar o mouse. */
.orc-cd-cartoes > div.orc-cd-cartao.pa-estoque-cartao { cursor: default; }
/* (29/10/2026, pedido do responsável) O Saldo Ciclo anterior, antes do primeiro mês: o nome em duas linhas, se
   precisar, e o número em destaque suave. */
.pp-tabela-meses th.ep-anterior { white-space: normal; line-height: 1.15; }
/* (29/10/2026, pedido do responsável) A Área Total da Cultura: 18 meses e o Total numa linha, com as letras e os
   números o menor possível; os 6 meses depois do Ciclo em azul-acinzentado. */
.pp-tabela-meses.pp-consolidado thead th:first-child, .pp-tabela-meses.pp-consolidado th[scope="row"] { width: 78px; }
.pp-tabela-meses.pp-consolidado :is(th, td) { padding: 5px 4px; font-size: .68rem; }
.pp-tabela-meses.pp-consolidado thead th { font-size: .62rem; }
.pp-tabela-meses.pp-consolidado thead th:first-child { text-align: left; }
.pp-tabela-meses.pp-consolidado th.pv-depois-do-ciclo { background: #eef2f7; color: #1f3550; }
/* (31/10/2026, resposta do responsável à revisão) A tela da Gleba igual à Área Total: nomes curtos e letra menor,
   também nos campos. A coluna dos nomes um pouco mais larga, para "Produção Realizada" e "Armazém" no Apontar. */
.pp-tabela-meses.pp-compacta thead th:first-child, .pp-tabela-meses.pp-compacta th[scope="row"] { width: 96px; }
.pp-tabela-meses.pp-compacta :is(th, td) { padding: 5px 4px; font-size: .68rem; }
.pp-tabela-meses.pp-compacta thead th { font-size: .62rem; }
.pp-tabela-meses.pp-compacta th[scope="row"] { white-space: normal; line-height: 1.15; }
.pp-tabela-meses.pp-compacta .orc-valor, .pp-tabela-meses.pp-compacta select.pp-armazem { font-size: .68rem; padding-left: 3px; padding-right: 3px; }
/* (30/10/2026, pedido do responsável) No Planejamento de Faturamento, só o quadro "Planejamento de Faturamento"
   fica verde: a caixa do alto e o quadro "Planejamento de Produção" em cinza, sem cores (e inertes). */
.pf-cinza { filter: grayscale(1); }
/* (29/10/2026, pedido do responsável) O quadro editável do Planejamento de Faturamento: os rótulos das linhas em
   duas linhas e os campos na letra miúda da tabela. */
#pf-tabela thead th:first-child, #pf-tabela th[scope="row"] { width: 92px; }
#pf-tabela th[scope="row"] { white-space: normal; line-height: 1.15; text-align: left; }
#pf-tabela .orc-valor { font-size: .64rem; padding: 2px 2px; text-align: right; letter-spacing: -.02em; }
#pf-tabela .pv-travado { font-size: .62rem; }
#pf-tabela .pf-linha-fat td, #pf-tabela .pf-linha-preco td.pp-total { font-size: .6rem; letter-spacing: -.01em; }
#pf-form > .pv-excesso { margin: 12px 0 0; }
/* (30/10/2026, pedido do responsável) Colunas mais estreitas, sem a barra de rolagem de baixo. */
#pf-tabela :is(th, td) { padding: 4px 2px; }
#pf-tabela thead th:first-child, #pf-tabela th[scope="row"] { width: 80px; padding-left: 4px; }
#pf-tabela .orc-valor { padding: 2px 1px; min-width: 0; }
#pf-tabela td.pp-total { white-space: nowrap; }
/* (30/10/2026, pedido do responsável) O valor sem o volume de cima: cinza e indisponível. */
#pf-tabela .pf-preco:disabled { background: #d5d9d2; border-color: #c2c8be; color: transparent; cursor: not-allowed; }
#pf-tabela .pf-preco:disabled::placeholder { color: transparent; }
/* (30/10/2026, pedido do responsável) O "$" na frente do campo do valor. */
#pf-tabela .pf-cifrao { display: inline-block; width: 7px; font-size: .6rem; font-weight: 600; color: #3d4a38; }
#pf-tabela .pf-preco { width: calc(100% - 8px); }
#pf-tabela thead th.pp-total { width: 70px; }
/* (30/10/2026, pedido do responsável) As colunas se ajustam ao conteúdo: o mês com valor grande alarga e os
   vazios estreitam, sem barra de rolagem. */
#pf-tabela { table-layout: auto; }
#pf-tabela thead th:first-child, #pf-tabela th[scope="row"] { width: 66px; }
#pf-tabela thead th.pp-total { width: auto; }
#pf-tabela .orc-valor { width: 100%; min-width: 0; }
#pf-tabela .pf-preco { width: calc(100% - 8px); }
/* (30/10/2026, pedido do responsável) Ao lado do título do quadro: a Produção Planejada e o Saldo a Planejar o
   Faturamento, em letra menor; o título no centro. */
.pa-quadro > .pa-quadro-titulo.pf-titulo { display: grid; grid-template-columns: 1fr auto minmax(max-content, 1.4fr);
  align-items: center; }
.pf-titulo .pf-resumo { white-space: nowrap; }
/* (30/10/2026, pedido do responsável) Depois de salvar, as células inertes: os campos sem a moldura de edição. */
/* (30/10/2026, pedido do responsável) O SALVAR/EDITAR na ponta direita da linha do título. */
.pa-quadro .pf-titulo .pf-resumo { display: flex; align-items: center; justify-self: stretch; }
.pa-quadro .pf-titulo .pf-resumo strong { margin-left: 4px; }
.pa-quadro .pf-titulo .pf-resumo strong#pf-saldo { margin-right: 14px; }
.pa-quadro .pf-titulo .pf-resumo .pf-salvar-titulo { margin-left: auto; }
#pf-quadro .pf-ver .orc-valor:not(:disabled) { border-color: transparent; background: transparent; box-shadow: none; }
.pa-quadro > .pa-quadro-titulo.pf-titulo::after { grid-column: 1 / -1; }
.pf-titulo .pf-resumo { justify-self: start; margin-left: 18px; font-size: .72rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: #3d4a38; }
.pf-titulo .pf-resumo strong { font-weight: 800; color: #1f3d1f; white-space: nowrap; }
.pf-titulo .pf-resumo-sep { margin: 0 6px; color: #9fae98; }
/* (31/10/2026) A moeda dos quadros de meses: as células mostram "$" para caber; o título diz "Valores em R$". */
.pf-titulo .pf-moeda { font-size: .72rem; font-weight: 600; color: #5b6b55; white-space: nowrap; }
#ep-quadro .pf-titulo .pf-moeda { margin-right: 12px; }
/* (30/10/2026, pedido do responsável) O SALVAR ao lado do saldo, do tamanho da linha do título. */
.pf-titulo .pf-salvar-titulo { margin-left: 14px; padding: 5px 16px; font-size: .78rem; letter-spacing: .04em;
  vertical-align: middle; }
/* (30/10/2026, pedido do responsável) O valor do saldo em azul (vermelho quando passa da produção). */
.pf-titulo .pf-resumo strong#pf-saldo { color: #1565c0; }
.pf-titulo .pf-resumo strong#pf-saldo.pf-saldo-negativo { color: #c62828; }
/* (30/10/2026, pedido do responsável; sql/193) Estoque da Produção: o Valor/ und estimado (digitado) e o Valor do
   Estoque Estimado; o título no centro e o SALVAR/EDITAR na ponta direita. */
#ep-quadro > .pa-quadro-titulo.pf-titulo { grid-template-columns: 1fr auto 1fr; }
#ep-tabela .orc-valor { width: calc(100% - 8px); min-width: 0; padding: 2px 2px; text-align: right; }
#ep-tabela .pf-cifrao { display: inline-block; width: 7px; font-size: .62rem; font-weight: 600; color: #3d4a38; }
#ep-tabela .ep-preco:disabled { background: #d5d9d2; border-color: #c2c8be; color: transparent; cursor: not-allowed; }
#ep-tabela .ep-preco:disabled::placeholder { color: transparent; }
#ep-tabela td.pp-total, #ep-tabela .ep-linha-valor td { white-space: nowrap; }
/* Sem barra de rolagem: as colunas se ajustam ao conteúdo e a primeira coluna quebra o rótulo em duas linhas. */
#ep-tabela { table-layout: auto; }
#ep-tabela :is(th, td) { padding-left: 3px; padding-right: 3px; }
#ep-tabela thead th:first-child, #ep-tabela th[scope="row"] { width: 130px; }
#ep-tabela th[scope="row"] { white-space: normal; line-height: 1.15; }
#ep-tabela .ep-linha-valor td, #ep-tabela .ep-linha-preco td.pp-total { font-size: .68rem; }
/* (30/10/2026, pedido do responsável) Números e letras da tabela bem menores, e as linhas mais baixas. */
#ep-tabela :is(th, td) { font-size: .62rem; padding-top: 4px; padding-bottom: 4px; }
#ep-tabela thead th { font-size: .6rem; }
#ep-tabela .orc-valor { font-size: .62rem; padding: 1px 2px; height: auto; min-height: 0; }
#ep-tabela .ep-linha-valor td, #ep-tabela .ep-linha-preco td.pp-total { font-size: .58rem; }
#ep-tabela .pf-cifrao { font-size: .55rem; }
/* (30/10/2026, pedido do responsável) O PDF ao lado do SALVAR, na ponta direita do título (o mesmo botão de ícone do
   Financeiro, sem carregar o financeiro.css nesta tela). */
:is(#ep-quadro, #el-quadro) .ep-botao-pdf { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 28px; margin-left: auto; padding: 0; border: 1px solid #c2c8be; border-radius: 4px;
  background: #fff; color: #1f3d1f; text-decoration: none; }
:is(#ep-quadro, #el-quadro) .ep-botao-pdf:hover { background: #eef5ea; border-color: #2e7d32; }
:is(#ep-quadro, #el-quadro) .ep-botao-pdf:focus-visible { outline: 2px solid #2e7d32; outline-offset: 1px; }
:is(#ep-quadro, #el-quadro) .ep-botao-pdf .fin-botao-sigla { font-size: .62rem; font-weight: 700; letter-spacing: .02em; }
#ep-quadro .pf-titulo .pf-resumo .ep-botao-pdf + .pf-salvar-titulo { margin-left: 8px; }
#ep-quadro .ep-ver .orc-valor:not(:disabled) { border-color: transparent; background: transparent; box-shadow: none; }
.pp-tabela-meses td.ep-anterior { font-weight: 600; }
/* (29/10/2026, pedido do responsável; sql/191) A Localização do Estoque: a tabela dos Armazéns/Locais, a linha
   Sem local e o formulário de distribuir. */
.pa-quadro > .tabela-wrap > .el-tabela { max-width: 640px; margin: 12px auto 0; }
.el-tabela .el-sem-local > td { color: #6b7466; font-style: italic; }
/* (30/10/2026, regra do responsável) As vendas abatidas do estoque (armazém não informado), em vermelho; o título do
   Estoque Disponível por Armazém/Local no centro, com o PDF na ponta direita. */
.el-tabela .el-vendas > td, .pa-vender-tabela .el-vendas > td { color: #c62828; }
#el-quadro > .pa-quadro-titulo.pf-titulo { grid-template-columns: 1fr auto 1fr; }
.el-tabela tfoot th, .el-tabela tfoot td { font-weight: 700; }
.pa-quadro > .el-form { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; justify-content: center;
  margin: 16px auto 0; max-width: 640px; }
.pa-quadro > .el-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.pa-quadro > .el-form .el-volume { width: 140px; }
.pa-quadro > .el-form input[name="nome"] { width: 260px; }
/* (29/10/2026, pedido do responsável) No cabeçalho do Estoque da Produção da Cultura (a caixa com o Estoque
   Total): o Estoque Remanescente e o Estoque Ciclo Atual em cinza; o Estoque Total continua verde. */
.orc-cd-resumos:has(> [data-rotulo="Estoque total"]) > .orc-cd-resumo:not([data-rotulo="Estoque total"])
  :is(.orc-cd-resumo-titulo, .orc-cd-resumo-valor, .orc-cd-resumo-valor strong) { color: #a9b0a7; }
/* (29/10/2026, pedido do responsável) Vender Estoque/Produção: a escolha da Fazenda ao lado do título e os
   cartões das Culturas dentro da caixa do cabeçalho. */
.orc-cd-cabecalho .pagina-topo-linha > .pa-troca-titulo { margin-left: 18px; align-self: center; }
/* (29/10/2026, pedido do responsável) O TODAS VENDAS REALIZADAS ao lado da Fazenda. */
.pagina-topo-linha > .pa-botao-vendas { margin-left: 18px; align-self: center; }
/* (31/10/2026, resposta do responsável à revisão) O RELATÓRIO - TODAS VENDAS REALIZADAS volta ao padrão dos
   botões secundários. *Antes (29/10/2026): laranja suave (#fdebd8, borda #e9a868, letra #8a4510).* */
.orc-cd-cabecalho .orc-cd-caixa.pa-caixa-vender > .orc-cd-cartoes { flex: 1 1 100%; margin-top: 10px; }
/* (29/10/2026, pedido do responsável) Vender Estoque/Produção: o cartão da Cultura escolhida marcado e, abaixo
   do cabeçalho, o estoque dela por Armazém/Local. */
.orc-cd-cartoes > a.orc-cd-cartao.pa-cartao-escolhido { border-color: var(--orc-cor); box-shadow: 0 0 0 2px var(--orc-cor); }
main > .pa-quadro#pa-vender-estoque, .pa-quadro#pa-vender-estoque { margin-top: 14px; }
.pa-quadro > .pa-vender-produto { margin: 14px 0 0; text-align: center; font-size: .95rem; font-weight: 600; }
/* (29/10/2026, pedido do responsável) A unidade sempre minúscula, mesmo no título em maiúsculas. */
.pa-quadro-titulo .pa-unidade { text-transform: none; }
/* (29/10/2026, pedido do responsável) Vender Estoque/Produção: cada Produto de Venda num quadro padrão, com a
   tabela tradicional de largura inteira, linhas e a linha do Estoque Total destacada. */
.pa-quadro > .pa-vender-quadros { margin-top: 4px; }
.pa-vender-quadros > .arm-quadro > .arm-secao { text-align: left; }
.pa-vender-quadros .arm-secao .pa-unidade { text-transform: none; }
.pa-vender-quadros .pa-vender-tabela { width: 100%; table-layout: fixed; border: 1px solid #dfe5dc; }
.pa-vender-quadros .pa-vender-tabela :is(th, td) { padding: 8px 12px; border-bottom: 1px solid #e6ebe3; }
.pa-vender-quadros .pa-vender-tabela :is(th, td) + :is(th, td) { border-left: 1px solid #e6ebe3; }
.pa-vender-quadros .pa-vender-tabela thead th { background: #f3f8ee; }
.pa-vender-quadros .pa-vender-tabela tfoot :is(th, td) { background: #eef6ea; font-weight: 800; text-align: left; }
.pa-vender-quadros .pa-vender-tabela .doc-numero { text-align: right; }
/* (29/10/2026, pedido do responsável) O Vol./Qtd. logo ao lado do Armazém; a coluna Ação com os dois botões do mesmo
   tamanho. */
/* (29/10/2026, pedido do responsável) Com o Município ao lado do nome do Armazém. */
/* (29/10/2026, pedido do responsável) Com a Fazenda depois do Município. */
.pa-vender-tabela .pa-col-armazem { width: 34%; }
.pa-vender-tabela .pa-col-municipio { width: 22%; }
.pa-vender-tabela .pa-col-fazenda { width: 26%; }
.pa-vender-tabela .pa-col-volume { width: 18%; }
.pa-vender-tabela.pa-vender-com-acao .pa-col-armazem { width: 21%; }
.pa-vender-tabela.pa-vender-com-acao .pa-col-municipio { width: 13%; }
.pa-vender-tabela.pa-vender-com-acao .pa-col-fazenda { width: 17%; }
.pa-vender-tabela.pa-vender-com-acao .pa-col-volume { width: 11%; }
.pa-vender-tabela.pa-vender-com-acao .pa-col-acao { width: 38%; }
/* (29/10/2026, pedido do responsável) Linhas mais visíveis: a borda geral, as divisas das colunas, a linha dos
   títulos das colunas e as das linhas. */
.pa-vender-quadros .pa-vender-tabela { border-collapse: collapse; border: 2px solid #8fa889; }
.pa-vender-quadros .pa-vender-tabela :is(th, td) { border-bottom: 1px solid #a9bba4; }
.pa-vender-quadros .pa-vender-tabela :is(th, td) + :is(th, td) { border-left: 1px solid #a9bba4; }
.pa-vender-quadros .pa-vender-tabela thead th { border-bottom: 2px solid #8fa889; }
.pa-vender-quadros .pa-vender-tabela tfoot :is(th, td) { border-top: 2px solid #8fa889; border-bottom: 0; }
/* (29/10/2026, pedido do responsável) Os botões de venda em verde musgo. */
.pa-vender-acoes > a.botao-secundario { background: #5a6b2e; border-color: #5a6b2e; color: #fff; }
.pa-vender-acoes > a.botao-secundario:is(:hover, :focus-visible) { background: #48561f; border-color: #48561f;
  color: #fff; }
/* (29/10/2026, pedido do responsável) Tabela tradicional, reutilizável (`tabela-grade`): borda geral, divisas das
   colunas, títulos das colunas destacados, linha entre as linhas, linhas alternadas e o destaque ao passar o mouse.
   Só na tela larga: no celular, a tabela responsiva continua em cartões. Primeira: Documentos de Saída. */
@media (min-width: 761px) {
  table.tabela-grade { border-collapse: collapse; border: 2px solid #8fa889; }
  table.tabela-grade :is(th, td) { padding: 9px 10px; border-bottom: 1px solid #a9bba4; vertical-align: middle; }
  table.tabela-grade :is(th, td) + :is(th, td) { border-left: 1px solid #a9bba4; }
  table.tabela-grade thead th { background: #f3f8ee; border-bottom: 2px solid #8fa889; color: #1f3d1f;
    white-space: nowrap; }
  table.tabela-grade tbody tr:nth-child(even) > td { background: #fafcf8; }
  table.tabela-grade tbody tr:hover > td { background: #eef6ea; }
}
/* (29/10/2026, pedido do responsável) Documentos de Saída: os filtros alinhados em linhas e colunas — cinco pares
   rótulo | campo por linha, os campos da mesma largura, o PESQUISAR e o LIMPAR no 5º par da 2ª linha, as letras
   menores e o Exportar no canto, sem encostar nos campos. Na tela estreita, o arranjo de sempre. */
@media (min-width: 821px) {
  .doc-topo-duplo > .doc-filtros-grade { padding-right: 190px; }
  .doc-topo-duplo .doc-filtros-grade #doc-pesquisa { width: 100%; grid-template-columns: repeat(5, max-content minmax(0, 1fr));
    grid-auto-rows: 28px; gap: 8px 10px; }
  .doc-topo-duplo .doc-filtros-grade #doc-pesquisa .cad-pesquisa-rotulo { font-size: 0.8rem; padding-left: 8px;
    color: #3f4a3b; }
  .doc-topo-duplo .doc-filtros-grade #doc-pesquisa select,
  .doc-topo-duplo .doc-filtros-grade #doc-pesquisa input[type="text"] { width: 100%; max-width: none; height: 28px;
    font-size: 0.82rem; line-height: 26px; }
  .doc-topo-duplo .doc-filtros-grade #doc-pesquisa .doc-campo-com-botoes { display: flex; width: 100%; min-width: 0; }
  .doc-topo-duplo .doc-filtros-grade #doc-pesquisa .doc-filtro-data input[type="text"] { width: auto; flex: 1 1 auto;
    min-width: 0; }
  .doc-topo-duplo .doc-filtros-grade #doc-pesquisa .doc-botao-icone { flex: none; width: 28px; height: 28px; }
  .doc-topo-duplo .doc-filtros-grade #doc-pesquisa .doc-filtro-botoes { grid-column: 9 / -1; padding-left: 8px; }
  .doc-topo-duplo .doc-filtros-grade #doc-pesquisa .doc-filtro-botoes > * { flex: 1 1 0; justify-content: center;
    height: 28px; font-size: 0.78rem; }
  .doc-topo-duplo > .doc-filtros-grade .fin-exportar-filtros { font-size: 0.86rem; }
}
/* (29/10/2026, pedido do responsável) O botão dos Contratos de Vendas marcado quando a lista já está nos contratos. */
#saida-contratos[aria-current="true"] { background: #eef6ea; box-shadow: inset 0 0 0 1px currentColor; }
/* (29/10/2026, pedido do responsável) O NF DE VENDA e o CONTRATOS DE VENDAS lado a lado, do mesmo tamanho; o da lista
   à vista, marcado. */
.saida-botoes-lista { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin-left: 10px; }
.pagina-topo-linha .saida-botoes-lista > .doc-acao-no-titulo { margin-left: 0; display: flex; align-items: center;
  justify-content: center; text-align: center; }
#saida-nfs[aria-current="true"] { background: #eef6ea; box-shadow: inset 0 0 0 1px currentColor; }
@media (max-width: 760px) { .saida-botoes-lista { grid-template-columns: minmax(0, 1fr); margin-left: 0; width: 100%; } }
/* (29/10/2026, pedido do responsável) A Data do Recebimento, quando já entrou, em verde. */
#saida-lista .saida-recebido { color: #2e7d32; font-weight: 600; }
/* (29/10/2026, regra do responsável) A Situação do contrato: Aberto (azul), Em Andamento (amarelo), Concluído (verde);
   Cancelado no vermelho de sempre. */
#saida-lista .saida-sit-aberto { background: #e8eefc; color: #1e3a8a; }
#saida-lista .saida-sit-andamento { background: var(--amarelo-fundo, #fff4d6); color: var(--amarelo-texto, #7a5600); }
#saida-lista .saida-sit-concluido { background: var(--verde-claro-fundo, #e6f4ea); color: var(--verde-escuro, #1f3d1f); }
/* (29/10/2026, regra do responsável) A nota Atrasado, em laranja (À vencer em azul, Recebido em verde). */
#saida-lista .saida-sit-atrasado { background: #fde8d8; color: #9a3412; }
/* (29/10/2026, pedido do responsável) A linha Soma, em destaque, com outra cor. */
#saida-lista tfoot .saida-soma > :is(th, td) { background: #dcefd6; color: #1f3d1f; font-weight: 800;
  border-top: 2px solid #2e7d32; }
#saida-lista tfoot .saida-soma > th { text-align: left; text-transform: uppercase; letter-spacing: .04em; }
/* (29/10/2026, pedido do responsável) As informações das colunas centralizadas (também os números e os valores); os
   títulos das colunas à esquerda. */
@media (min-width: 761px) {
  table.tabela-grade#saida-lista thead th, table.tabela-grade#saida-lista thead th.doc-numero { text-align: left; }
  table.tabela-grade#saida-lista tbody td, table.tabela-grade#saida-lista tbody td.doc-numero,
  table.tabela-grade#saida-lista tfoot td, table.tabela-grade#saida-lista tfoot td.doc-numero { text-align: center; }
}
/* (29/10/2026, pedido do responsável) O detalhe do Documento de Saída: as cores da Situação; as tabelas de dados;
   o quadro das notas que cumprem o contrato em destaque; o título só na impressão (PDF). */
.saida-detalhe .saida-sit-aberto { background: #e8eefc; color: #1e3a8a; }
.saida-detalhe .saida-sit-andamento { background: var(--amarelo-fundo, #fff4d6); color: var(--amarelo-texto, #7a5600); }
.saida-detalhe .saida-sit-concluido { background: var(--verde-claro-fundo, #e6f4ea); color: var(--verde-escuro, #1f3d1f); }
.saida-detalhe .saida-sit-atrasado { background: #fde8d8; color: #9a3412; }
.saida-detalhe table.saida-dados { width: 100%; margin-bottom: 8px; table-layout: fixed; }
.saida-detalhe table.saida-dados thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .03em; }
.saida-detalhe table.saida-dados td { font-size: 0.86rem; }
.saida-detalhe .saida-acima { margin-left: 6px; }
.saida-cumprimento { margin: 12px 0 4px; padding: 12px 14px 14px; border: 2px solid #2e7d32; border-radius: 10px;
  background: #f4faf2; box-shadow: 0 1px 4px rgba(46, 125, 50, .15); }
.saida-cumprimento-titulo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 16px; margin: 0 0 8px; font-size: 1rem; font-weight: 800; color: #1f3d1f; text-transform: uppercase;
  letter-spacing: .03em; }
.saida-cumprimento-resumo { font-size: 0.9rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: #2a3a28; }
.saida-barra { height: 10px; margin: 0 0 10px; border-radius: 6px; background: #dde8d9; overflow: hidden; }
.saida-barra > span { display: block; height: 100%; background: #2e7d32; }
.saida-cumprimento #saida-entregas tfoot :is(th, td) { background: #e3f1df; font-weight: 800; }
.saida-cumprimento .saida-saldo-apos { font-weight: 700; color: #1f3d1f; }
.saida-titulo-impressao { display: none; }
@media print {
  body.imprimindo-area .area-impressao .saida-titulo-impressao { display: block; margin: 0 0 6px; font-size: 13pt; }
  body.imprimindo-area .area-impressao details > summary::marker { content: ""; }
}
/* (29/10/2026, pedido do responsável) Os títulos das colunas com a letra menor, em até duas linhas. */
@media (min-width: 761px) {
  table.tabela-grade#saida-lista thead th { font-size: 0.74rem; line-height: 1.2; white-space: normal;
    padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
}
/* (29/10/2026, pedido do responsável) A tabela compacta: a letra bem menor em todo o quadro; as colunas curtas só com
   a largura do que mostram; o espaço que sobra vai para Documento, Tipo, Modo, Fazenda e Cliente. */
@media (min-width: 761px) {
  table.tabela-grade#saida-lista { font-size: 0.7rem; }
  table.tabela-grade#saida-lista :is(th, td) { padding: 5px 7px; line-height: 1.25; }
  table.tabela-grade#saida-lista thead th { font-size: 0.62rem; }
  table.tabela-grade#saida-lista .texto-auxiliar { font-size: 0.92em; }
  table.tabela-grade#saida-lista .doc-data-menor { font-size: 1em; }
  table.tabela-grade#saida-lista .saida-lancamento { padding: 2px 7px; font-size: 1em; }
  table.tabela-grade#saida-lista .doc-situacao { font-size: 0.95em; padding: 2px 7px; }
  /* (29/10/2026) Com o Nº do Doc. e a Cultura depois do Documento, e sem o Tipo: as curtas são nº registro, as duas
     datas, o Nº do Doc., o Valor do Doc., a Data Venc. Doc., a Situação, a Data do Recebimento e a Ação. */
  /* (29/10/2026, pedido do responsável) A mesma largura de cada coluna nas duas listas (NF de Venda e Contratos):
     largura fixa por coluna, em % (somam 100). *Antes, no mesmo dia: as curtas com width: 1%, que mudava com o
     conteúdo de cada lista.* */
  table.tabela-grade#saida-lista { table-layout: fixed; width: 100%; }
  /* (29/10/2026, pedido do responsável) Mais estreitas: nº registro, Documento, Cultura e Nº; o Vol./Qtd. novo. */
  #saida-lista .saida-col-registro { width: 3.8%; }
  #saida-lista .saida-col-modo { width: 11%; }
  #saida-lista .saida-col-inserido { width: 5.5%; }
  #saida-lista .saida-col-emissao { width: 5.5%; }
  #saida-lista .saida-col-documento { width: 9%; }
  #saida-lista .saida-col-cultura { width: 5%; }
  #saida-lista .saida-col-volume { width: 6.5%; }
  #saida-lista .saida-col-numero { width: 5.2%; }
  #saida-lista .saida-col-fazenda { width: 9%; }
  #saida-lista .saida-col-cliente { width: 11%; }
  #saida-lista .saida-col-valor { width: 7.5%; }
  #saida-lista .saida-col-vencimento { width: 6.5%; }
  #saida-lista .saida-col-situacao { width: 5.5%; }
  #saida-lista .saida-col-recebimento { width: 6%; }
  #saida-lista .saida-col-acao { width: 3%; }
  table.tabela-grade#saida-lista :is(th, td) { overflow-wrap: anywhere; }
  table.tabela-grade#saida-lista tbody td:is(:nth-child(1), :nth-child(3), :nth-child(4), :nth-child(7), :nth-child(11)) {
    white-space: nowrap; }
  table.tabela-grade#saida-lista tbody td > .cad-sub { white-space: normal; min-width: 7em; }
}
/* (29/10/2026) Na tela média, quatro pares por linha, os botões nos dois últimos pares da 3ª linha e o Exportar numa
   linha própria, à direita (com cinco pares, a 1280 px, os campos ficavam com 83 px e a data não cabia). */
@media (min-width: 821px) and (max-width: 1499px) {
  .doc-topo-duplo > .doc-filtros-grade { padding-right: 28px; flex-wrap: wrap; }
  .doc-topo-duplo .doc-filtros-grade #doc-pesquisa { grid-template-columns: repeat(4, max-content minmax(0, 1fr)); }
  .doc-topo-duplo .doc-filtros-grade #doc-pesquisa .doc-filtro-botoes { grid-column: 5 / -1; }
  .doc-topo-duplo > .doc-filtros-grade .fin-exportar-filtros { position: static; flex-basis: 100%;
    justify-content: flex-end; margin-top: 8px; }
}
@media (min-width: 821px) and (max-width: 1499px) {
  .doc-topo-duplo .doc-filtros-grade #doc-pesquisa .doc-filtro-botoes { justify-content: flex-end; }
  .doc-topo-duplo .doc-filtros-grade #doc-pesquisa .doc-filtro-botoes > * { flex: 0 0 150px; }
}
.pa-vender-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 8px; }
.pa-vender-acoes > a { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box;
  margin: 0; text-align: center; white-space: normal; }
/* (29/10/2026, pedido do responsável; sql/191) O cadastro do Armazém: os Produtos de Venda em colunas. */
.arm-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; }
.arm-produtos > .arm-produto { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.formulario .arm-ativo { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
/* (29/10/2026, pedido do responsável; sql/191) A linha Armazém do Apontar Produção: a lista de cada mês. */
.pp-tabela-meses .pp-linha-armazem > th, .pp-tabela-meses .pp-linha-armazem > td { background: #f3f8ee; }
.pp-tabela-meses select.pp-armazem { width: 100%; box-sizing: border-box; font-size: .72rem; padding: 2px; }
/* (29/10/2026, pedido do responsável) O formulário do Armazém em tabela: o rótulo ao lado do campo, em duas
   colunas, e os Produtos de Venda numa tabela. */
.arm-form { max-width: 1100px; margin-top: 14px; padding: 18px 22px; background: var(--branco, #fff);
  border: 1px solid #dfe5dc; border-radius: 10px; }
.arm-form > .pa-subtitulo { margin-top: 18px; }
.arm-form > .pa-subtitulo:first-child { margin-top: 0; }
.arm-form-tabela { width: 100%; border-collapse: collapse; margin-top: 8px; }
.arm-form-tabela th { width: 160px; padding: 8px 12px 8px 0; text-align: right; vertical-align: middle;
  font-weight: 600; white-space: nowrap; }
.arm-form-tabela th .rotulo-opcional { display: block; font-weight: 400; font-size: .75rem; }
.arm-form-tabela td { padding: 6px 16px 6px 0; vertical-align: middle; }
.arm-form-tabela :is(input[type="text"], select, textarea) { width: 100%; box-sizing: border-box; }
.arm-form-tabela td > .rotulo-opcional { display: block; font-size: .75rem; margin-top: 2px; }
.arm-produtos-tabela { margin-top: 8px; }
.arm-produtos-tabela .arm-col-guardar { width: 90px; text-align: center; }
.arm-produtos-tabela label { font-weight: 400; cursor: pointer; }
.arm-produtos-tabela tbody tr:has(input:checked) > td { background: #eef6ea; font-weight: 600; }
/* (29/10/2026, pedido do responsável) O formulário do Armazém em tabelas no modelo padrão, na largura da tela. */
.arm-form.arm-tabela-padrao { max-width: none; }
.arm-tabela-padrao > .arm-secao { margin: 18px 0 6px; font-size: .95rem; font-weight: 800; color: var(--verde-escuro, #1f3d1f);
  text-transform: uppercase; letter-spacing: .03em; }
.arm-tabela-padrao > .arm-secao:first-child { margin-top: 0; }
.arm-tabela-padrao .arm-campos { width: 100%; table-layout: fixed; }
.arm-tabela-padrao .arm-campos th .rotulo-opcional { font-weight: 400; font-size: .75rem; text-transform: none; }
.arm-tabela-padrao .arm-campos .arm-c-largo { width: 34%; }
.arm-tabela-padrao .arm-campos .arm-c-nome { width: 24%; }
.arm-tabela-padrao .arm-campos :is(input[type="text"], select, textarea) { width: 100%; box-sizing: border-box; }
.arm-tabela-padrao .arm-campos td > .rotulo-opcional { display: block; font-size: .75rem; margin-top: 2px; }
.arm-tabela-padrao .arm-produtos-tabela { width: 100%; }
.arm-tabela-padrao .arm-produtos-tabela .arm-col-cultura { width: 12%; }
.arm-tabela-padrao .arm-produtos-tabela td.arm-col-cultura + td.arm-col-guardar,
.arm-tabela-padrao .arm-produtos-tabela th.arm-col-cultura + th.arm-col-guardar { border-left: 1px solid #dde3da; }
.arm-tabela-padrao .arm-produtos-tabela td.arm-marcado { background: #eef6ea; font-weight: 600; }
.arm-tabela-padrao .arm-produtos-tabela tbody tr:has(input:checked) > td { background: none; font-weight: inherit; }
.arm-tabela-padrao .arm-produtos-tabela tbody tr > td.arm-marcado { background: #eef6ea; font-weight: 600; }
/* (29/10/2026, pedido do responsável) O formulário do Armazém em quadros e tabelas: cada parte num quadro. */
.arm-form.arm-tabela-padrao { padding: 0; border: 0; background: none; }
.arm-tabela-padrao > .arm-quadro { margin-top: 14px; padding: 14px 18px 16px; background: var(--branco, #fff);
  border: 1px solid #dfe5dc; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }
.arm-tabela-padrao > .arm-quadro > .arm-secao { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid #e6ebe3;
  font-size: .95rem; font-weight: 800; color: var(--verde-escuro, #1f3d1f); text-transform: uppercase;
  letter-spacing: .03em; }
.arm-tabela-padrao > .arm-quadro > .arm-secao .rotulo-opcional { text-transform: none; font-weight: 400; }
.arm-tabela-padrao > .acoes-formulario { margin-top: 14px; }
/* (29/10/2026, pedido do responsável) Os Tipos de Armazém: cada linha é um formulário (nome, ativo, salvar). */
.arm-tabela-padrao .arm-tipo-linha { padding: 6px 8px; }
.arm-tabela-padrao .arm-tipo-form { display: grid; grid-template-columns: minmax(0, 34%) 1fr 1fr auto; gap: 12px;
  align-items: center; }
.arm-tabela-padrao #arm-tipo-novo { grid-template-columns: minmax(0, 34%) max-content; }
.arm-tabela-padrao .arm-tipo-form input[type="text"] { width: 100%; box-sizing: border-box; }