/* A letra da casa, servida daqui e não do Google.
   ------------------------------------------------------------------------------------------
   Buscar a folha do fonts.googleapis.com custava **966 ms antes do primeiro desenho** em toda
   tela, no celular em 4G (medido em 23/09 com o Lighthouse): 1,1 KB de CSS que valem dois DNS,
   dois TLS e dois handshakes com um servidor de fora. Servida daqui, a fonte vem pela conexão
   que já está aberta.

   É o arquivo variável: um só cobre os pesos 400 a 800, em vez de um por peso. O `latin` dá
   conta do português inteiro — acento, cedilha e til estão todos no U+0000-00FF —, e o
   `latin-ext` só desce se alguém escrever um nome com letra que não existe por aqui. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fontes/jakarta-latin.woff2?v=1) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
                 U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fontes/jakarta-latin-ext.woff2?v=1) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* TerraContábil — design "dashbord v2", aprovado pelo Saulo em 21/09/2026, com o acerto visual
   de 05/10/2026 (esboço e fotos em docs/leituras/2026-10-05-esboco-visual/).
   Mockup de referência: docs/mockups/2026-09-21-financeiro-dashbord-v2.html

   O que manda no desenho:
   - Fundo cinza do aplicativo; tudo o que é conteúdo é **cartão branco flutuante**. A sombra
     tem três degraus: 1 = o que se aperta (botão, campo); 2 = o cartão; 3 = o que flutua
     (menu de ações, modal, a janela de espera).
   - O menu lateral é uma **cápsula branca** que flutua sobre o fundo, não uma barra colada.
   - **Preto é agir** (--tinta): item ativo do menu, aba ativa, botão principal — um botão
     cheio por tela. **O verde da casa é o único destaque** (--acento): link, foco do teclado,
     linha selecionada, a espera da IA. Verde, âmbar, vermelho e azul só dizem estado (pílula,
     aviso) e o dinheiro que entra; o que sai fica em preto, e o vermelho fica para vencido,
     erro e cancelado (respostas do Saulo, 05/10).
   - A pirâmide da letra: título e números grandes (22 a 26 px, peso forte); título de cartão e
     texto de tabela (14 a 16 px); rótulo, legenda e cabeçalho (12 a 13 px, num cinza que passa
     no AA, 4,5:1 ou mais). Nada abaixo de 12 px.
   - Números em `tabular-nums`, sempre: coluna de dinheiro que dança é coluna que engana.

   Os nomes de classe são os mesmos de antes, de propósito: nenhum template precisou mudar
   por causa do CSS. O que mudou de marcação está em `base.html` e na lista do Financeiro. */
:root {
  /* a letra: tudo ~10% maior que em 21/09 (o que ele via no Chrome a 110%); nada abaixo de 12 px */
  --fs-legenda: 12px;      /* pílula, legenda, kpi-sub, seção do menu */
  --fs-rotulo: 13px;       /* cabeçalho de tabela, rótulo de campo, botão pequeno */
  --fs-corpo: 14px;        /* texto, célula de tabela, campo, menu */
  --fs-cartao: 16px;       /* título de cartão */
  --fs-titulo: 22px;       /* título da página */
  --fs-numero: 26px;       /* os números grandes */

  --fundo:        #F2F4F7;   /* o cinza do aplicativo */
  --superficie:   #F8F9FB;   /* bloco recuado */
  --papel:        #FFFFFF;
  /* o texto em três tons, todos AA sobre o branco */
  --tinta:        #121316;   /* 18,6:1 */
  --tinta2:       #1E2025;
  --texto-2:      #475467;   /* 7,7:1 — rótulo, cabeçalho de tabela */
  --texto-3:      #5F6673;   /* 5,8:1 — legenda (o #7C828D de antes dava 3,9:1; o #9AA0AB, 2,6:1) */
  --suave:        var(--texto-3);
  --suave2:       var(--texto-2);
  --cinza-claro:  #F0F2F5;
  /* a borda volta a separar o que a sombra fraca não separava */
  --linha:        #E4E7EC;
  --linha2:       #D0D5DD;
  --borda-campo:  #C9CED6;

  /* UMA cor de destaque: o verde da casa */
  --acento:             #1E6B34;   /* 6,6:1 sobre o branco */
  --acento-forte:       #17552A;
  --acento-fundo:       #EDF6EE;   /* a linha selecionada */
  --acento-fundo-forte: #E2F0E4;   /* a linha selecionada sob o mouse */
  --acento-anel:        rgba(30, 107, 52, .28);
  --verde:        var(--acento);
  --verde-claro:  #2E7D32;
  --verde-escuro: #1B3A27;
  --faixa-verde:  linear-gradient(135deg,#1B5E20 0%,#3E8E41 100%);

  /* estados: o tom de TEXTO (AA) e o de fundo; --ok e --critica puros ficam para barra e bolinha */
  --ok: #16A34A;          --ok-texto: #067647;       --ok-fundo: #ECFDF3;       --ok-borda: #ABEFC6;
  --critica: #E5484D;     --critica-texto: #B42318;  --critica-fundo: #FEF3F2;  --critica-borda: #FECDCA;
  --atencao: #F79009;     --atencao-texto: #B54708;  --atencao-fundo: #FFFAEB;  --atencao-borda: #FEDF89;
  --informativa: #2E90FA; --info-texto: #175CD3;     --info-fundo: #EFF8FF;     --info-borda: #B2DDFF;

  /* a sombra em três degraus */
  --sombra-1: 0 1px 2px rgba(16, 24, 40, .07);
  --sombra-2: 0 0 0 1px rgba(16, 24, 40, .045), 0 1px 2px rgba(16, 24, 40, .05), 0 6px 16px -6px rgba(16, 24, 40, .10);
  --sombra-3: 0 0 0 1px rgba(16, 24, 40, .05), 0 6px 12px -4px rgba(16, 24, 40, .08), 0 20px 40px -12px rgba(16, 24, 40, .22);
  --sombra:       var(--sombra-2);
  --sombra-alta:  var(--sombra-3);

  /* canto menos redondo: com a letra pequena, os 22 px davam cara de aplicativo de celular */
  --raio:         14px;
  --raio-cartao:  16px;
  --raio-pilula:  10px;
  --raio-capsula: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0; padding: 10px; gap: 12px; display: flex; min-height: 100vh;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-corpo); line-height: 1.5; color: var(--tinta); background: var(--fundo);
}
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: var(--fs-titulo); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 2px; }
h2 { font-size: var(--fs-cartao); font-weight: 700; margin: 18px 0 8px; }
.suave { color: var(--suave); }
.txt-critica { color: var(--critica-texto); font-weight: 600; }
.txt-atencao { color: var(--atencao-texto); font-weight: 600; }
.txt-ok { color: var(--ok-texto); font-weight: 600; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* o foco do teclado sempre à vista: o anel verde, afastado 2 px */
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---- menu lateral: a cápsula branca flutuante ---- */
.menu {
  width: 226px; flex: none; background: var(--papel); border-radius: var(--raio-capsula);
  box-shadow: var(--sombra); border: 0;
  padding: 18px 10px; display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 10px; align-self: flex-start; max-height: calc(100vh - 20px);
  overflow-y: auto; scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none; }
.marca { display: flex; align-items: center; gap: 10px; padding: 0 8px; color: var(--tinta); }
.marca:hover { text-decoration: none; }
/* depois de `.marca span`, senão o seletor de tipo ganha e o selo perde cor e forma */
.marca .marca-icone {
  width: 40px; height: 40px; border-radius: 50%; background: var(--tinta); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15); flex: none;
}
.marca .marca-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: #fff; flex: none; }
.marca strong { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.marca span { display: block; font-size: var(--fs-legenda); color: var(--texto-3); font-weight: 500; }

/* o produtor de quem se está cuidando */
.menu .produtor {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px;
  padding: 11px 12px; display: flex; gap: 9px; align-items: flex-start;
}
.menu .produtor .avatar { background: var(--faixa-verde); width: 30px; height: 30px; font-size: 12px; }
.menu .produtor .quem-info strong { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--tinta); }
.menu .produtor .quem-info span { display: block; font-size: var(--fs-legenda); color: var(--suave); font-weight: 500; }
.menu .produtor a { color: var(--acento); font-weight: 700; display: inline; }
.menu .produtor .pilula { display: inline-block; margin: 6px 0 4px; }

.menu nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menu .secao {
  padding: 12px 12px 5px; font-size: var(--fs-legenda); font-weight: 800; color: var(--texto-3);
  letter-spacing: .09em; text-transform: uppercase;
}
.menu nav a {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; color: var(--texto-2); transition: .18s;
}
.menu nav a svg { width: 17px; height: 17px; flex: none; opacity: .8; }
.menu nav a:hover { background: #F2F4F7; color: var(--tinta); text-decoration: none; }
/* ativo = pílula escura, como .d2-nav-item.active do design */
.menu nav a.ativo { background: var(--tinta); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .2), 0 4px 10px -4px rgba(16, 24, 40, .45); }
.menu nav a.ativo svg { opacity: 1; }
/* o número do menu: neutro (o laranja #FF5722 com letra branca dava 3,3:1 a 9 px) */
.conta { margin-left: auto; background: #E4E7EC; color: var(--tinta); border-radius: 99px; padding: 1px 7px; font-size: var(--fs-legenda); font-weight: 700; }
.menu nav a.ativo .conta { background: rgba(255, 255, 255, .2); color: #fff; }
/* ---- o menu do produtor em áreas (opção 4 do mockup de 22/09) ----
   Cada área é um <details>: a da página atual abre; fechada, a área é uma linha com o número. */
.menu nav details.area > summary {
  list-style: none; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px;
  font-size: 13.5px; font-weight: 650; color: var(--tinta); cursor: pointer; user-select: none; transition: .18s;
}
.menu nav details.area > summary::-webkit-details-marker { display: none; }
.menu nav details.area > summary svg { width: 17px; height: 17px; flex: none; opacity: .8; }
.menu nav details.area > summary:hover { background: #F2F4F7; }
.menu nav details.area > summary .seta {
  margin-left: auto; width: 6px; height: 6px; border-right: 1.5px solid #98A2B3; border-bottom: 1.5px solid #98A2B3;
  transform: rotate(-45deg); transition: transform .15s; flex: none;
}
.menu nav details.area > summary .conta + .seta { margin-left: 8px; }
.menu nav details.area[open] > summary .seta { transform: rotate(45deg); }
.menu nav details.area[open] > summary .conta { display: none; }   /* aberta, o número está no item */
.menu nav details.area .area-itens {
  display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px 14px; padding: 2px 0 2px 6px; border-left: 2px solid #EEF0F3;
}
.menu nav details.area .area-itens a { font-size: 13px; padding: 7px 8px; gap: 8px; }
body.menu-retraido .menu nav details.area > summary { justify-content: center; padding-left: 0; padding-right: 0; font-size: 0; }
body.menu-retraido .menu nav details.area > summary .seta,
body.menu-retraido .menu nav details.area > summary .conta { display: none; }
body.menu-retraido .menu nav details.area .area-itens { margin-left: 0; padding-left: 0; border-left: 0; }
/* retraído, o item da área também vira só ícone: a regra de cima (mais específica) mantinha a
   letra e o texto quebrava no trilho de 58px — o defeito que ele viu em 22/09 */
body.menu-retraido .menu nav details.area .area-itens a { font-size: 0; padding: 6px 0; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .menu nav details.area > summary .seta { transition: none; } }

/* o rodapé do menu: quem está usando o sistema */
.quem {
  margin-top: auto; padding: 11px 12px 2px; border-top: 1px solid var(--cinza-claro);
  display: flex; gap: 9px; align-items: flex-start;
}
.avatar {
  width: 30px; height: 30px; background: var(--tinta); border-radius: 50%; display: flex;
  align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 12px; flex: none;
}
.quem-info strong { color: var(--tinta); font-size: 13px; font-weight: 700; display: block; }
.quem-info span { color: var(--suave); font-size: var(--fs-legenda); display: block; }
.quem-info a, .quem-info .como-link { color: var(--suave); font-size: var(--fs-legenda); display: block; margin-top: 1px; font-weight: 600; }
.quem-info a:hover, .quem-info .como-link:hover { color: var(--tinta); text-decoration: none; }
/* alvo de 24 px no computador (WCAG 2.5.8): os três links empilhados do rodapé do menu */
.quem-info a, .quem-info .como-link { display: flex; align-items: center; min-height: 24px; min-width: 24px; margin-top: 0; }
.como-link { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-legenda); cursor: pointer; text-align: left; }

/* ---- barra superior e conteúdo ---- */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
/* A barra de cima não é mais uma faixa branca colada: é uma linha solta sobre o fundo cinza,
   com a busca e o sino à direita, como no mockup. */
.topo { display: flex; align-items: center; gap: 12px; min-height: 48px; flex-wrap: wrap; }
/* a tela que não preenche o bloco do título não deixa um buraco na linha */
.topo-pagina:empty { display: none; }
.topo-pagina h1 { font-size: var(--fs-titulo); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.topo-pagina .trilha { margin-bottom: 2px; }
.topo-pagina p { margin: 2px 0 0; font-size: 13px; color: var(--texto-3); }
.topo-direita { display: flex; align-items: center; gap: 10px; flex: none; }
.selo-plano { background: var(--papel); box-shadow: var(--sombra); color: var(--suave); font-size: var(--fs-legenda); font-weight: 800; padding: 6px 13px; border-radius: 99px; }
main { flex: 1; min-width: 0; }

/* ---- atalhos (Ctrl+K): a cápsula branca de busca do mockup ---- */
.cmd-wrap { position: relative; flex: 1 1 auto; max-width: 380px; min-width: 200px; margin-left: auto; z-index: 10; }
.cmd-input-box {
  position: relative; display: flex; align-items: center; gap: 8px; background: var(--papel);
  border-radius: 30px; box-shadow: var(--sombra); padding: 8px 10px 8px 36px;
}
.topo input.cmd-input {
  border: 0; outline: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 500;
  flex: 1; min-width: 0; color: var(--tinta); padding: 0; width: auto; box-shadow: none;
}
.topo input.cmd-input::placeholder { color: #667085; font-weight: 500; }
.cmd-icn { position: absolute; left: 14px; color: var(--suave); pointer-events: none; display: flex; align-items: center; }
.cmd-kbdtip {
  font: inherit; font-size: var(--fs-legenda); font-weight: 700; color: var(--suave); background: var(--cinza-claro);
  border-radius: 8px; padding: 3px 7px; border: 0; flex: none; white-space: nowrap;
}
.cmd-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--papel);
  border: 1px solid var(--linha); border-radius: 16px; box-shadow: var(--sombra-alta);
  z-index: 200; display: none; overflow: hidden; padding: 6px;
}
.cmd-results.open { display: block; }
.cmd-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; cursor: pointer; color: inherit; }
.cmd-item:hover, .cmd-item.focused { background: var(--superficie); text-decoration: none; }
.cmd-cat { font-size: var(--fs-legenda); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 99px; white-space: nowrap; flex: none; }
.cmd-lbl { font-size: 13.5px; font-weight: 600; }
.cmd-empty { padding: 14px; font-size: 13px; color: var(--suave); text-align: center; }

/* o sino das pendências: círculo branco flutuante. O número continua vermelho: é o único
   alarme da tela */
.botao-circulo {
  width: 40px; height: 40px; border-radius: 50%; background: var(--papel); box-shadow: var(--sombra);
  display: flex; align-items: center; justify-content: center; position: relative; flex: none;
  border: 0; cursor: pointer; color: var(--tinta);
}
.botao-circulo:hover { text-decoration: none; }
.botao-circulo svg { width: 17px; height: 17px; }
.botao-circulo .ponto {
  position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; padding: 0 3px;
  border-radius: 99px; background: var(--critica-texto); color: #fff; font-size: 10px; font-weight: 800;
  border: 1.5px solid #fff; display: flex; align-items: center; justify-content: center;
}

/* ---- cabeçalho de página, cartões, avisos ---- */
.trilha { color: var(--texto-3); font-size: 12.5px; font-weight: 500; margin-bottom: 2px; }
.trilha a { color: var(--texto-3); display: inline-block; padding: 4px 0; }   /* alvo de toque de 24 px */
.cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.cabecalho h1 { font-size: var(--fs-titulo); font-weight: 800; }
.cabecalho p { margin: 0; color: var(--texto-3); font-size: var(--fs-corpo); max-width: 720px; }
.acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.caixa, .card { background: var(--papel); border: 0; border-radius: var(--raio-cartao); box-shadow: var(--sombra); padding: 20px 22px; }
.caixa + .caixa { margin-top: 16px; }
.caixa h2:first-child { margin-top: 0; }
.vazio { color: var(--texto-3); padding: 40px; text-align: center; background: var(--papel); border: 0; border-radius: var(--raio-cartao); box-shadow: var(--sombra); font-size: var(--fs-corpo); }

/* Aviso: cartão com faixa de cor e ícone, não um retângulo rosa com texto solto.
   O ícone entra pelo ::before para nenhuma tela precisar repetir marcação. */
.aviso {
  position: relative; display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 18px 13px 46px; border-radius: 12px; margin: 0 0 12px;
  background: var(--info-fundo); border: 1px solid var(--info-borda); border-left: 4px solid var(--informativa);
  color: var(--tinta); font-size: 13.5px; line-height: 1.55; box-shadow: none;
}
.aviso a { text-decoration: underline; text-underline-offset: 2px; }
.aviso::before {
  content: ""; position: absolute; left: 16px; top: 14px; width: 18px; height: 18px;
  background: var(--info-texto); flex: none;
  -webkit-mask: var(--icone) center/contain no-repeat; mask: var(--icone) center/contain no-repeat;
  --icone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>');
}
.aviso.erro { background: var(--critica-fundo); border-color: var(--critica-borda); border-left-color: var(--critica); }
.aviso.erro::before {
  background: var(--critica-texto);
  --icone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M10.3 3.9L1.8 18a2 2 0 001.7 3h17a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>');
}
.aviso strong { font-weight: 700; }

/* ---- KPI (.d2-metric-tile) ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.kpi-grid.duas { grid-template-columns: repeat(2, 1fr); }
.kpi-grid.cinco { grid-template-columns: repeat(5, 1fr); }   /* o caixa da fazenda e o pessoal */
/* o número não é clicável: sem sombra que cresce no mouse, para não fingir que é */
.kpi {
  background: var(--papel); border: 0; border-radius: var(--raio-cartao); padding: 18px 20px;
  box-shadow: var(--sombra); color: inherit; display: flex; flex-direction: column; gap: 6px;
}
.kpi:hover { text-decoration: none; }
.kpi-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-icone {
  width: 30px; height: 30px; border-radius: 50%; background: #F2F4F7; flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--texto-2);
}
.kpi-icone svg { width: 15px; height: 15px; }
.kpi-rotulo { font-size: 13px; font-weight: 600; color: var(--texto-2); text-transform: none; letter-spacing: 0; margin-bottom: 2px; }
/* Nas listas (Financeiro, Notas) os números acompanham a tela: 22 px no monitor de 1366, até
   26 px no grande — o assunto ali é a lista, e os cinco cabem numa linha só. No Resumo (e no
   painel do grupo), mais abaixo, eles são o assunto e ficam com 26 px sempre. */
.kpi-valor {
  font-size: clamp(20px, 1.6vw, var(--fs-numero)); font-weight: 750; letter-spacing: -.025em; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap;
}
.kpi-valor.ok { color: var(--ok-texto); }
/* .err é o que está errado (vencida, com erro, cancelada); o dinheiro que sai não usa: fica em tinta */
.kpi-valor.err { color: var(--critica-texto); }
.kpi-sub { font-size: var(--fs-legenda); color: var(--texto-3); font-weight: 500; margin-top: 2px; line-height: 1.35; }
.kpi-sub.alerta { color: var(--critica-texto); font-weight: 650; }

/* ---- botões ----
   Três degraus: o PRINCIPAL (preto, com relevo e sombra — um por tela), o COMUM (branco, borda e
   sombra curta) e o FANTASMA (sem moldura: o "limpar" dos filtros e o "Fechar" dos modais).
   Sobem 1 px no mouse e descem no clique; o foco do teclado ganha o anel verde; o desligado
   fica apagado. O azul do Importar (28/09) saiu: dois botões cheios lado a lado brigavam. */
.botao, .btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; line-height: 1.25; vertical-align: middle; cursor: pointer; font-family: inherit;
  background: #fff; color: var(--tinta); border: 1px solid var(--linha2); white-space: nowrap;
  box-shadow: var(--sombra-1);
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.botao:hover, .btn:hover {
  background: #fff; border-color: #B3BAC5; text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 10px -3px rgba(16, 24, 40, .14);
  transform: translateY(-1px);
}
.botao:active, .btn:active { transform: translateY(0); box-shadow: inset 0 1px 2px rgba(16, 24, 40, .12); background: #F8F9FB; }
.botao svg, .btn svg { width: 15px; height: 15px; flex: none; }
/* o principal é quase-preto, como o .d2-btn-dark do design, com relevo */
.botao.primario, .btn-primary {
  background: linear-gradient(180deg, #2C3038 0%, #121316 100%); border-color: #121316; color: #fff;
  padding: 9px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(16, 24, 40, .25), 0 4px 12px -3px rgba(16, 24, 40, .40);
}
.botao.primario:hover, .btn-primary:hover {
  background: linear-gradient(180deg, #3A3F48 0%, #1E2025 100%); border-color: #1E2025;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 4px rgba(16, 24, 40, .22), 0 10px 20px -6px rgba(16, 24, 40, .45);
}
.botao.primario:active, .btn-primary:active { background: #121316; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
.botao:disabled, .botao[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.botao.pequeno, .btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
.botao.perigo { color: var(--critica-texto); }
.botao.perigo:hover { background: var(--critica-fundo); border-color: var(--critica-borda); }
/* o fantasma: o "limpar" dos filtros e o "Fechar" dos modais */
.filtros-notas > a.botao, dialog.modal .modal-topo > .botao.pequeno {
  background: none; border-color: transparent; box-shadow: none; color: var(--texto-2);
}
.filtros-notas > a.botao:hover, dialog.modal .modal-topo > .botao.pequeno:hover {
  background: #F2F4F7; transform: none; box-shadow: none; color: var(--tinta);
}
form.em-linha, details.em-linha { display: inline-block; vertical-align: top; }
details.em-linha[open] { display: block; white-space: normal; text-align: left; margin-bottom: 6px; }
/* o menu de ações flutua: não empurra a linha nem vira bloco */
details.menu-acoes.em-linha, details.menu-acoes.em-linha[open] {
  display: inline-block; margin-bottom: 0; vertical-align: middle;
}
details > summary.botao { list-style: none; }
details > summary.botao::-webkit-details-marker { display: none; }

/* ---- fila ---- */
.linha-fila {
  display: grid; grid-template-columns: 14px 1fr auto 52px; gap: 14px; align-items: center;
  background: var(--papel); border: 0; border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 14px 18px; margin-bottom: 10px; color: inherit;
}
.linha-fila:hover { box-shadow: var(--sombra-3); text-decoration: none; }
.linha-fila strong { display: block; font-size: 15px; font-weight: 700; }
.linha-fila small { color: var(--suave); font-size: var(--fs-legenda); }
.linha-fila .total { font-size: 24px; font-weight: 750; letter-spacing: -.025em; text-align: right; font-variant-numeric: tabular-nums; }
.bolinha { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.bolinha.critica { background: var(--critica); }
.bolinha.atencao { background: var(--atencao); }
.bolinha.informativa { background: var(--informativa); }

/* selos (.d2-status-tag): fundo lavado, borda e o texto no tom escuro da cor, que passa no AA */
.pilula, .badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-legenda); font-weight: 600; line-height: 1.35;
  background: #F2F4F7; color: var(--texto-2); border: 1px solid #E4E7EC;
}
.pilula.critica, .badge-fora { background: var(--critica-fundo); color: var(--critica-texto); border-color: var(--critica-borda); }
.pilula.atencao, .badge-atencao, .pilula.tributavel { background: var(--atencao-fundo); color: var(--atencao-texto); border-color: var(--atencao-borda); }
.pilula.ok, .badge-ok, .pilula.atividade_rural { background: var(--ok-fundo); color: var(--ok-texto); border-color: var(--ok-borda); }
.badge-info, .pilula.dedutivel, .pilula.parte { background: var(--info-fundo); color: var(--info-texto); border-color: var(--info-borda); }
.quem-ico { display: inline-flex; vertical-align: middle; margin-right: 5px; color: var(--suave); }
.quem-ico svg { width: 13px; height: 13px; }
.uf-chip { display: inline-block; background: var(--cinza-claro); border-radius: 6px; padding: 1px 6px; font-size: var(--fs-legenda); color: var(--suave2); margin-left: 4px; font-weight: 700; }

/* ---- tabelas: a tabela é o cartão (.d2-card-transactions + .d2-tx-table) ----
   `border-collapse: separate` e sem `overflow: hidden`: era o recorte da tabela que escondia
   o menu flutuante da linha. O canto arredondado é das células das pontas. */
.tabela {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--papel);
  border: 0; border-radius: var(--raio-cartao); box-shadow: var(--sombra);
}
.tabela tr:first-child th:first-child, .tabela tr:first-child td:first-child { border-top-left-radius: var(--raio-cartao); }
.tabela tr:first-child th:last-child, .tabela tr:first-child td:last-child { border-top-right-radius: var(--raio-cartao); }
.tabela tr:last-child td:first-child { border-bottom-left-radius: var(--raio-cartao); }
.tabela tr:last-child td:last-child { border-bottom-right-radius: var(--raio-cartao); }
/* a linha da âncora (#l-..., #n-...) de volta depois de responder a IA (28/09): um respiro em
   cima, para ela não colar na borda da janela */
.tabela tr[id] { scroll-margin-top: 24px; }
/* a linha que o link abriu (o produtor da pendência na opção do Funrural, 02/10) */
.tabela tr:target td { background: var(--superficie); }
.tabela th {
  padding: 12px 12px 10px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--texto-2);
  text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--linha); background: #F9FAFB;
  white-space: nowrap;
}
.tabela td { padding: 11px 10px; border-bottom: 1px solid #EEF0F3; font-size: var(--fs-corpo); vertical-align: middle; }
.tabela th:first-child, .tabela td:first-child { padding-left: 20px; }
.tabela th:last-child, .tabela td:last-child { padding-right: 20px; }
/* até 1440 px as células apertam: com a letra maior, o Financeiro rolava 18 px de lado a 1366 (Otimizador, 05/10).
   Sem caixa com rolagem em volta da tabela: ela cortaria o menu "…" das últimas linhas. */
@media (max-width: 1440px) {
  .tabela td, .tabela th { padding-left: 7px; padding-right: 7px; }
  .tabela th:first-child, .tabela td:first-child { padding-left: 16px; }
  .tabela th:last-child, .tabela td:last-child { padding-right: 16px; }
}
.tabela tr:hover td { background: #F8F9FB; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela small { color: var(--texto-3); display: block; font-size: var(--fs-legenda); font-weight: 500; margin-top: 1px; }
/* o "vencido" embaixo da data: o `.tabela small` cinza ganhava do vermelho */
.tabela small.txt-critica { color: var(--critica-texto); font-weight: 650; }
.tabela td strong { font-weight: 700; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
/* o link da célula (data, número da nota) em tinta, verde no mouse: verde em toda linha era
   mais uma cor brigando com o valor. O número do documento não parte em duas linhas. */
.tabela td > a:not(.botao):not(.suave) { color: var(--tinta); }
.tabela td > a:not(.botao):hover { color: var(--acento); }
.celula-doc .doc strong, .tabela td > a > strong { white-space: nowrap; }
/* o subtítulo de um grupo de linhas (aba Inscrições: um por documento, esboço de 02/10/2026) */
.tabela tr.grupo td, .tabela tr.grupo:hover td { padding-top: 12px; padding-bottom: 6px; background: #F9FAFB;
  font-size: 12.5px; font-weight: 700; color: var(--texto-2); border-bottom: 1px solid var(--linha); }
/* a linha da IA (o <style> das listas a pinta de âmbar a 12,5 px): o texto sobe para 13,5 px */
table.tabela tr.ia-linha td { font-size: 13.5px; padding-top: 6px; padding-bottom: 10px; }
.sem-quebra { white-space: nowrap; }
.tabela-vinculos td.nome { min-width: 200px; }
.tabela-vinculos td.botoes { text-align: left; }
.tabela-vinculos details.em-linha[open] { margin-top: 6px; }
/* a, button e summary com a mesma altura e a mesma linha de base */
td.botoes > * { vertical-align: middle; }
td.botoes > * + * { margin-left: 4px; }

/* A LINHA SELECIONADA, inteira: fundo verde-claro, a faixa verde à esquerda e a borda de baixo
   mais forte. Só CSS (`:has`), sem JavaScript: vale onde a caixinha do lote existe —
   Financeiro, Notas, Duplicados, Conciliação e os tributos do LCDPR. A linha da IA que mora
   embaixo dela vai junto. */
.tabela tr:has(input[name="ids"]:checked) > td { background: var(--acento-fundo); border-bottom-color: #CFE5D3; }
.tabela tr:has(input[name="ids"]:checked) > td:first-child { box-shadow: inset 4px 0 0 var(--acento); }
.tabela tr:has(input[name="ids"]:checked):hover > td { background: var(--acento-fundo-forte); }
.tabela tr:has(input[name="ids"]:checked) + tr.ia-linha > td { background: var(--acento-fundo); box-shadow: inset 4px 0 0 var(--acento); }
.tabela tr:has(input[name="ids"]:checked) td strong { color: var(--acento-forte); }

/* o dinheiro: entra verde-escuro, como no extrato do banco; sai em tinta (resposta 2 do Saulo, 05/10) */
.valor { font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.valor.entrada { color: var(--ok-texto); }
.valor.saida { color: var(--tinta); }
.tabela td.num.txt-ok { font-weight: 650; }
/* riscado e ainda legível (4,97:1); o #A8AEB9 de antes dava 2,2:1 */
.tabela tr.riscado td, .tabela tr.cancelada td { color: #667085; }
.tabela tr.riscado td { text-decoration: line-through; }

/* O quadradinho do tipo de documento (.d2-activity-icon): tom claro com o desenho na cor — a
   categoria continua lá, sem as onze cores cheias pintarem a coluna inteira (05/10). */
.celula-doc { display: flex; align-items: center; gap: 9px; }
.centro .celula-doc { justify-content: center; }
.icone-doc {
  width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center;
  justify-content: center; flex: none;
  background: color-mix(in srgb, var(--cor-doc, #8A8F98) 14%, #fff);
  color: color-mix(in srgb, var(--cor-doc, #8A8F98) 72%, #000);
}
.icone-doc svg { width: 15px; height: 15px; }
/* uma cor por grupo do plano, as do painel de ícones dele (21/09); a classe vem de `icones.da_conta` */
.icone-doc.verde { --cor-doc: #27AE60; }          /* receitas */
.icone-doc.verde_escuro { --cor-doc: #3F8F4A; }   /* pecuária */
.icone-doc.marrom { --cor-doc: #B9571C; }         /* produção agrícola */
.icone-doc.azul { --cor-doc: #1F7BE0; }           /* administrativas */
.icone-doc.azul_escuro { --cor-doc: #3F51B5; }    /* logística */
.icone-doc.amarelo { --cor-doc: #D9A404; }        /* utilidades */
.icone-doc.vermelho { --cor-doc: #E53935; }       /* tributos e taxas */
.icone-doc.roxo { --cor-doc: #8B3FE0; }           /* financeiro */
.icone-doc.rosa { --cor-doc: #F0468A; }           /* pessoas e o pessoal */
.icone-doc.laranja { --cor-doc: #F28A1E; }        /* patrimônio, máquinas e veículos */
.icone-doc.cinza { --cor-doc: #8A8F98; }          /* outros, transferência, cancelado */
.cod { font-family: ui-monospace, Consolas, monospace; font-size: 13px; font-weight: 700; }

/* ---- filtros ---- */
.filtros { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.filtros a {
  padding: 6px 13px; border: 1px solid var(--linha2); border-radius: var(--raio-pilula);
  font-size: 13px; font-weight: 700; color: var(--tinta); background: var(--papel);
}
.filtros a.ativo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.filtros a:hover { text-decoration: none; background: #F4F5F8; }
.filtros a.ativo:hover { background: var(--tinta2); }
.busca { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.busca input { max-width: 340px; }

/* ---- formulários ---- */
main form.caixa, main details.novo form { max-width: 760px; }
input[type=date], input[type=month], input[name=cep], input[name=numero], input[name=telefone], input[name=percentual],
input[name=participacao], input[name=area_total_ha], input[name=uf], select[name=uf],
select[name=tipo], select[name=tipo_exploracao] { max-width: 220px; }
input[name=parcelas] { max-width: 90px; }          /* quase sempre 1: não precisa da coluna inteira */
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.grade.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px 16px; align-items: end; margin-bottom: 10px; }
.linha .botao { margin-bottom: 1px; }
[data-linhas] > .botao { margin-top: 2px; }
[data-participantes].individual [data-adicionar], [data-participantes].individual [data-remover] { display: none; }
.campo { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-corpo); min-width: 0; }
.campo.largo { grid-column: 1 / -1; }
.campo > span { color: var(--texto-2); font-size: 12.5px; font-weight: 600; letter-spacing: 0; }
.campo i { color: var(--critica-texto); font-style: normal; }
.campo small { color: var(--texto-3); font-size: var(--fs-legenda); font-weight: 500; }
.campo small.erro, .erro-solto { color: var(--critica-texto); font-weight: 700; }
/* o campo é branco, com borda que se vê e a sombra curta do que se aperta */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=month], input[type=search],
input[type=number], input[type=file], input[type=datetime-local], select, textarea {
  font: inherit; font-size: var(--fs-corpo); font-weight: 500; padding: 8px 12px; border: 1px solid var(--borda-campo);
  border-radius: 10px; background-color: #fff; color: var(--tinta); width: 100%;
  outline: none; box-shadow: var(--sombra-1); transition: border-color .15s, box-shadow .15s;
}
/* a seta do <select> desenhada, para não depender da do sistema */
select {
  appearance: none; -webkit-appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6673' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
}
input:focus, select:focus, textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-anel); }
input:disabled, select:disabled { background-color: #F2F4F7; color: var(--texto-3); box-shadow: none; }
input::placeholder { color: #667085; font-weight: 500; }
.com-erro input, .com-erro select { border-color: var(--critica); }
.marcar { display: flex; gap: 8px; align-items: center; font-size: var(--fs-corpo); font-weight: 600; }
.marcar input { flex: none; }
/* A lista de sugestões da busca, desenhada pelo `tela.js`. O `<datalist>` do navegador
   sumia dentro do `<label>` e mudava de cara em cada um; esta é a mesma em todo lugar,
   inclusive dentro de um `<dialog>`. O `.campo` que a contém precisa ser a âncora. */
.campo, .campo-com-botao { position: relative; }
/* `position: fixed`, com o lugar calculado pelo `tela.js` a partir do campo: presa ao campo
   (`absolute`) ela era cortada pelo `overflow` do modal e o fazia rolar. */
/* a largura é a do nome mais comprido, entre a do campo e o teto que o `tela.js` põe */
.sugestoes {
  position: fixed; z-index: 1000; margin: 0; padding: 5px; width: max-content;
  list-style: none; max-height: 260px; overflow-y: auto; background: var(--papel);
  border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra-alta);
}
.sugestoes li {
  padding: 7px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sugestoes li:hover, .sugestoes li.marcado { background: var(--acento-fundo); }
.sugestoes:empty { display: none; }

/* campo com um botão colado: o seletor toma a linha e o botão fica do tamanho do texto */
.campo-com-botao { display: flex; gap: 8px; align-items: stretch; }
.campo-com-botao > select, .campo-com-botao > input { flex: 1; min-width: 0; }
.campo-com-botao > .botao { flex: none; }
/* texto que só o leitor de tela lê: a caixinha de rádio de uma tabela precisa dizer o que é */
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* uma parcela por linha: número, vencimento, o quanto dela e o tirar */
.linha-parcela {
  display: flex; align-items: center; gap: 10px; padding: 4px 0;
  border-bottom: 1px solid var(--cinza-claro);
}
.linha-parcela:last-child { border-bottom: 0; }
.linha-parcela > span:first-child { min-width: 46px; font-size: 13px; font-weight: 700; }
.linha-parcela > input { flex: 0 1 180px; min-width: 0; }
.linha-parcela > span:nth-child(3) { flex: 1; font-size: 13.5px; font-variant-numeric: tabular-nums; }
/* "Meus dados": o logo de hoje (ou o círculo TC) ao lado do campo de arquivo */
.logo-atual { display: flex; align-items: flex-end; gap: 16px; }
.logo-atual img { height: 56px; }
.logo-atual .campo { flex: 1; }
.logo-atual .marca-icone { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--tinta); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; }
.rodape-form { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- passos ---- */
.passos-cabecalho { display: flex; gap: 4px; list-style: none; padding: 3px 6px; margin: 0 0 16px; flex-wrap: wrap; background: var(--superficie); border-radius: 30px; align-self: flex-start; width: fit-content; }
.passos-cabecalho li { padding: 6px 14px; border-radius: 20px; color: var(--suave); font-size: 13px; font-weight: 700; cursor: pointer; }
.passos-cabecalho li.atual { background: var(--tinta); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.passos-cabecalho li.feito { color: var(--verde); }
.passo h2:first-child { margin-top: 0; }
/* Em passos aparece uma seção por vez e não há o que separar. Sem eles — editar, Lançar de
   dentro da nota, o 422 que volta — as três ficam uma embaixo da outra e **coladas**: o `<h2>`
   que antes as separava saiu junto com o cabeçalho numerado. */
form:not([data-passos]) .passo + .passo { margin-top: 20px; }

/* Campo que é só uma caixinha de marcar não tem rótulo em cima, então ele subia e encostava
   no de cima. Ganha a altura do rótulo, para a caixinha cair na linha dos outros controles. */
.grade > .campo > .marcar:first-child { margin-top: 24px; }
.grade > .campo > .marcar + small { margin-top: 3px; }

/* ---- ficha ---- */
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; align-items: start; }
/* Os quadros "Quem explora": estavam numa grade de quatro colunas fixas, e cada um crescia
   conforme o nome da fazenda quebrava em uma ou duas linhas — a linha da Soma ficava em altura
   diferente em cada quadro. Agora a grade se ajusta ao número de quadros, o título reserva
   duas linhas e a Soma é empurrada para o pé do cartão, onde todas se encontram. */
.grade-quadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.grade-quadros > .caixa + .caixa { margin-top: 0; }   /* senão os quadros vizinhos descem 12px (aba Propriedades) */
.quadro-soma { display: flex; flex-direction: column; }
.quadro-soma h3 { margin: 0 0 8px; font-size: var(--fs-legenda); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); min-height: 2.4em; }
.quadro-soma .l.total { margin-top: auto; }
.caixa .l { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; font-size: var(--fs-corpo); }
.caixa .l small { display: block; color: var(--suave); font-size: var(--fs-legenda); }
.quadro-soma .l.total { border-top: 1px solid var(--linha); margin-top: 6px; padding-top: 8px; font-weight: 700; }
.quadro-soma p { margin: 8px 0 0; font-size: var(--fs-legenda); color: var(--suave); }
/* Ficha: duas colunas de rótulo | valor, alinhadas em linhas, como uma folha de dados */
.dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
.dados > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid #F2F4F7; }
.dados > div:nth-last-child(-n+2) { border-bottom: 0; }
.dados dt { font-size: var(--fs-legenda); font-weight: 800; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.dados dd { margin: 0; font-size: var(--fs-corpo); }
@media (max-width: 1100px) { .dados { grid-template-columns: 1fr; } .dados > div:nth-last-child(-n+2) { border-bottom: 1px solid #F2F4F7; } .dados > div:last-child { border-bottom: 0; } }
details.novo { margin-top: 12px; }
details.novo > summary { cursor: pointer; color: var(--verde); font-weight: 700; list-style: none; font-size: var(--fs-corpo); }
details.novo > summary::before { content: "+ "; }
details.novo[open] > summary { margin-bottom: 12px; }

/* ---- modal ---- */
dialog.modal { border: 0; border-radius: 18px; padding: 0; width: min(820px, 94vw); max-height: 92vh; overflow: auto; box-shadow: var(--sombra-3); }
dialog.modal::backdrop { background: rgba(16, 24, 40, .45); backdrop-filter: blur(2px); }
dialog.modal .modal-topo { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px 0; }
dialog.modal .modal-topo h2 { margin: 0; font-size: 18px; font-weight: 800; }
dialog.modal form.caixa, dialog.modal div.caixa { border: 0; box-shadow: none; padding: 16px 24px 24px; max-width: none; }

/* ---- páginas sem menu (erro, termo, entrada do dono; a de entrar está mais embaixo) ---- */
.pagina-solta { display: flex; padding: 0; gap: 0; }
.painel-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--fundo); }
.cartao-entrada { width: 100%; max-width: 400px; display: grid; gap: 16px; }
.cartao-entrada h1 { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.cartao-entrada .sub { font-size: 12.5px; color: var(--suave); margin: 0 0 8px; }
.cartao-entrada .botao { justify-content: center; padding: 11px 14px; }
/* Termo de uso (25/09/2026): a página inteira rola, o texto começa no alto */
.painel-form.painel-termo { align-items: flex-start; }
.cartao-termo { width: 100%; max-width: 760px; display: grid; gap: 14px; }
.cartao-termo > .marca { padding: 0; }
.termo-texto { font-size: 16px; line-height: 1.6; padding: 24px 28px; }
.termo-texto h2 { font-size: 19px; margin: 0 0 12px; }
.termo-texto h3 { font-size: 17px; font-weight: 800; margin: 22px 0 6px; }
.termo-texto p { margin: 0 0 10px; }
.termo-aceite { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.termo-aceite .marcar { flex: 1 1 220px; margin: 0; }
.termo-aceite .aviso { flex-basis: 100%; margin: 0; }
.termo-aceite .como-link { font-size: 12.5px; font-weight: 600; color: var(--suave); padding: 8px 4px; }

/* plano de contas: árvore com <details> */
.arvore details.no > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: var(--fs-corpo); }
.arvore details.no > summary::-webkit-details-marker { display: none; }
.arvore details.no > summary::before { content: "▸"; color: var(--suave); width: 12px; font-size: 12px; }
.arvore details.no[open] > summary::before { content: "▾"; }
.arvore .folha { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 30px; font-size: var(--fs-corpo); border-radius: 8px; }
.arvore .filhos { margin-left: 22px; border-left: 1px solid var(--linha); padding-left: 4px; }
.arvore .nome { flex: 1; }
.arvore summary:hover, .arvore .folha:hover { background: var(--superficie); }
.arvore .acoes-no { white-space: nowrap; }
.arvore .acoes-no form { display: inline; }
.arvore .codigo, .tabela td.codigo { font-family: ui-monospace, Consolas, monospace; font-size: 13px; font-weight: 700; color: var(--suave); min-width: 96px; }
/* as cores das pílulas da classificação estão com as outras pílulas, lá em cima */
/* a parte do produtor na linha rateada do Financeiro (condomínio e casal) */
.pilula.parte { white-space: nowrap; }

/* ---- abas: o grupo de pílulas branco do design (.d2-header-nav-pills) ---- */
.abas-notas {
  display: inline-flex; align-items: center; gap: 2px; background: var(--papel);
  padding: 4px; border-radius: 30px; box-shadow: var(--sombra); border: 0;
  margin: 0 0 12px; align-self: flex-start; width: fit-content; max-width: 100%; flex-wrap: wrap;
}
.abas-notas a { padding: 7px 16px; border-radius: 20px; font-size: 13.5px; font-weight: 600; color: var(--texto-2); border: 0; margin: 0; }
.abas-notas a:hover { color: var(--tinta); background: #F2F4F7; text-decoration: none; }
.abas-notas a.ativo, .abas-notas a.ativo:hover { background: var(--tinta); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .2), 0 4px 10px -4px rgba(16, 24, 40, .45); }
/* as abas das notas e, do lado, a última busca — que ficava no rodapé, onde ninguém a via */
.linha-abas { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.linha-abas .abas-notas { margin: 0; }
.busca-status {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px; border-radius: 30px;
  background: var(--papel); box-shadow: var(--sombra); font-size: 13px; font-weight: 600; color: var(--texto-2);
}
.busca-status .bolinha { flex: none; background: var(--ok); }
.busca-status.atencao .bolinha { background: var(--atencao); }
/* o estado da busca cede o espaço a quem divide a linha com ele; texto comprido corta e volta
   inteiro no title */
.linha-abas .busca-status { flex: 0 1 auto; min-width: 0; }
.linha-abas .busca-status > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a automação na carteira: das notas lançadas no ano, quantas entraram sozinhas */
.auto-barra {
  display: inline-block; width: 64px; height: 6px; margin-right: 8px; vertical-align: middle;
  border-radius: 4px; background: var(--cinza-claro); overflow: hidden;
}
.auto-barra i { display: block; height: 100%; border-radius: 4px; background: var(--ok); }
.busca-status.critica { color: var(--critica-texto); }
.busca-status.critica .bolinha { background: var(--critica); }

/* barra de filtros: um cartão branco só, com os campos dentro (.d2-filter-pill em linha) */
.filtros-notas {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px;
  background: var(--papel); border-radius: var(--raio-cartao); box-shadow: var(--sombra); padding: 14px 16px;
}
.filtros-notas .campo:not(.busca-nota) { flex: 0 1 184px; }
.filtros-notas .campo.busca-nota { flex: 3 1 260px; }
.filtros-notas input, .filtros-notas select { max-width: none; }
.filtros-notas .botao { margin-bottom: 1px; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; word-break: break-all; }
.escolher-prop { display: flex; gap: 8px; align-items: center; }
.escolher-prop select { max-width: 320px; }

/* ---- menu lateral retraído: o trilho de ícones do design original ----
   O `dashbord v2` é assim por padrão (cápsula de 58px, só ícone). Aqui ele é a escolha de
   quem usa, guardada no navegador por `tela.js` — são quinze telas, e nome ajuda. */
.retrair {
  background: none; border: 0; color: var(--suave); cursor: pointer;
  padding: 8px 12px; display: flex; align-items: center; gap: 9px; font: inherit;
  font-size: 13px; font-weight: 700; width: 100%; border-radius: 10px;
}
.retrair:hover { color: var(--tinta); background: #F2F4F7; }
.retrair svg { width: 17px; height: 17px; flex: none; }
body.menu-retraido .menu { width: 62px; padding-left: 8px; padding-right: 8px; }
body.menu-retraido .menu .secao,
body.menu-retraido .menu .produtor .quem-info,
body.menu-retraido .menu .quem .quem-info,
body.menu-retraido .marca span,
body.menu-retraido .retrair span { display: none; }
body.menu-retraido .menu nav a { justify-content: center; padding-left: 0; padding-right: 0; font-size: 0; }
body.menu-retraido .menu nav a span.conta { display: none; }
body.menu-retraido .menu nav a svg { width: 17px; height: 17px; }
body.menu-retraido .marca, body.menu-retraido .menu .produtor,
body.menu-retraido .menu .quem { justify-content: center; padding-left: 4px; padding-right: 4px; }
body.menu-retraido .retrair { justify-content: center; }

/* ---- menu de ações da linha ----
   Flutua sobre a tabela, item sem moldura de botão. O aberto sobe na pilha, senão a linha de
   baixo pinta por cima dele. */
.menu-acoes { position: relative; }
.menu-acoes > summary { cursor: pointer; list-style: none; }
.menu-acoes > summary::-webkit-details-marker { display: none; }
.menu-acoes .menu-lista {
  position: absolute; left: 0; right: auto; top: calc(100% + 5px); z-index: 150;
  display: grid; gap: 1px; min-width: 190px; max-width: min(320px, 70vw); margin: 0; padding: 6px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 12px;
  box-shadow: var(--sombra-alta); text-align: left;
}
.menu-acoes.direita .menu-lista { left: auto; right: 0; }
.menu-acoes[open] { z-index: 200; }
.menu-acoes .menu-lista form { display: block; }
.menu-acoes .menu-lista .botao,
.menu-acoes .menu-lista > a {
  width: 100%; justify-content: flex-start; gap: 9px; border: 0; background: none;
  box-shadow: none; padding: 9px 11px; border-radius: 10px; font-weight: 600; font-size: 13.5px;
  color: var(--tinta); white-space: nowrap; transform: none;
}
/* o link do menu se alinha como o botão: ícone e texto na mesma linha, com o mesmo vão */
.menu-acoes .menu-lista > a { display: flex; align-items: center; }
.menu-acoes .menu-lista .botao:hover,
.menu-acoes .menu-lista > a:hover { background: #F2F4F7; text-decoration: none; transform: none; box-shadow: none; }
.menu-acoes .menu-lista .botao.perigo { color: var(--critica-texto); }
.menu-acoes .menu-lista .botao svg,
.menu-acoes .menu-lista > a svg { width: 13px; height: 13px; flex: none; opacity: .6; }
.menu-acoes .menu-lista hr { border: 0; border-top: 1px solid var(--cinza-claro); margin: 6px 2px; }
/* o menu do robô continua sendo texto explicativo, não lista de ações */
.menu-acoes .menu-lista > div { padding: 6px 10px; font-size: 13px; white-space: normal; font-weight: 500; }
.menu-acoes .menu-lista > div + div { border-top: 1px solid var(--cinza-claro); }

/* Marcar todos: a caixinha do cabeçalho da tabela. A caixinha marcada é verde, como a linha */
.tabela th input[type="checkbox"] { cursor: pointer; }
input[type="checkbox"] { width: auto; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--acento); }
.tabela input[type="checkbox"] { width: 16px; height: 16px; vertical-align: middle; }

/* O "Escolher ficheiro" cru do navegador vira o botão da casa. O seletor ::file-selector-button
   estiliza só o botão de dentro do campo, sem JavaScript e sem esconder o input — o nome do
   arquivo escolhido continua aparecendo ao lado, que é o que diz se ele pegou o certo. */
input[type=file] {
  padding: 6px 10px; font-size: 13px; font-weight: 600; color: var(--suave);
  cursor: pointer; background-color: var(--superficie);
}
input[type=file]::file-selector-button {
  font: inherit; font-size: 13px; font-weight: 700; color: var(--tinta); cursor: pointer;
  background: #fff; border: 1px solid var(--linha2); border-radius: 8px; box-shadow: var(--sombra-1);
  padding: 6px 12px; margin-right: 10px; transition: .15s;
}
input[type=file]::file-selector-button:hover { background: #F2F4F7; }

/* Primeiro passo da importação por planilha: o modelo, que sumia lá no cabeçalho */
.passo-modelo {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; margin-bottom: 14px; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--raio-pilula);
}
.passo-modelo small { display: block; color: var(--suave); font-size: var(--fs-legenda); margin-top: 2px; }

/* Modal de escolha: cartões grandes, como o do Agronota que ele mandou.
   O <dialog> tem padding 0 de propósito — quem espaça é cada bloco de dentro (`.modal-topo`,
   `form.caixa`), e a grade precisa do seu, senão encosta nas bordas. */
.modal.estreito { max-width: 680px; }
/* A prévia e o resultado das importações (esboços 1 a 3, 30/09). O modal da prévia é mais largo:
   a chave de 44 dígitos cabe numa linha. */
dialog.modal.largo { width: min(980px, 94vw); }
.produtor-linha { margin: 0 0 12px; font-size: var(--fs-corpo); }
.totais-linha { margin: 0; padding: 10px 14px; background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio-pilula); font-size: 13.5px; line-height: 1.7; }
.totais-linha strong { font-weight: 800; }
.dica-limite { display: block; margin: 6px 2px 14px; font-size: var(--fs-legenda); color: var(--suave); }
.filtro-linha { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.filtro-linha .campo { width: 260px; max-width: 100%; }
.tabela.no-modal { box-shadow: none; border: 1px solid var(--linha); }
.mono-chave { font-family: ui-monospace, Consolas, monospace; font-size: 13px; font-weight: 600; white-space: nowrap; }
.mono-curta { font-family: ui-monospace, Consolas, monospace; }
.pilula.com-icone { display: inline-flex; align-items: center; gap: 5px; white-space: normal; line-height: 1.35; text-align: left; }
.pilula.com-icone svg { width: 12px; height: 12px; flex: none; }
.rodape-form.dividido { justify-content: space-between; align-items: center; }
.kpi-valor.amarelo { color: var(--atencao-texto); }
.escolhas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; padding: 16px 24px 24px;
}
.escolha {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 26px 18px; background: var(--papel); border: 1px solid var(--linha);
  border-radius: 16px; cursor: pointer; font: inherit; color: var(--tinta);
}
.escolha:hover { border-color: var(--tinta); background: var(--superficie); }
.escolha svg { width: 38px; height: 38px; color: var(--tinta); }
.escolha strong { font-size: 15px; font-weight: 800; }
.escolha small { color: var(--suave); font-size: var(--fs-legenda); line-height: 1.4; font-weight: 500; }

/* Cabeçalho que ordena: o rótulo continua com cara de cabeçalho, não de link, e a seta só
   aparece na coluna que está valendo — senão sete setas cinzas competiriam com os dados. */
.tabela th .ordena { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; cursor: pointer; }
.tabela th .ordena:hover { color: var(--tinta); }
.tabela th .ordena.ativa { color: var(--tinta); }
.tabela th .ordena i { font-style: normal; font-size: 12px; line-height: 1; }

/* As três marcas da linha andam juntas, não espalhadas */
.tabela td.botoes { white-space: nowrap; text-align: right; }
.tabela td.botoes > * + * { margin-left: 2px; }
/* O quadradinho do mockup (32px desde 05/10) é **só do botão que não tem texto** (`.so-icone`).
   A regra valia para todo `.botao.pequeno` de tabela e espremeu "Acessar", "Editar" e
   "Desvincular" um por cima do outro — foi o que ele viu em Propriedades, Contas bancárias,
   Certificado e na carteira. */
.botao.pequeno.so-icone { padding: 0; width: 32px; height: 32px; justify-content: center; border-radius: 9px; }
.botao.pequeno.so-icone svg { width: 15px; height: 15px; }

/* O navegador de mês do Funrural: seta, o mês por extenso com a situação da apuração, seta —
   no lugar do <input type=month> cru do navegador, que ele achou feio (21/09). */
.seletor-mes { gap: 4px; }
.seletor-mes select { width: auto; min-width: 0; font-weight: 700; font-size: var(--fs-corpo); }
.seletor-mes select[name=mes] { min-width: 176px; }
.seletor-mes select[name=ano] { min-width: 92px; }
.seletor-mes .so-icone { width: 34px; height: 34px; padding: 0; justify-content: center; font-size: 20px; line-height: 1; }
.seletor-mes span.so-icone { opacity: .35; cursor: default; }

/* As páginas das listas (50 linhas por página, pedido dele, 21/09): os números à direita,
   embaixo da tabela, com a contagem "1–50 de 312" ao lado. */
.paginas { display: flex; gap: 4px; align-items: center; justify-content: flex-end; margin: 12px 0 4px; flex-wrap: wrap; }
.paginas .suave { margin-right: 8px; font-size: 13px; }
.paginas .botao.pequeno { min-width: 32px; justify-content: center; }
.paginas .botao.ativo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
/* o aviso de "marcadas as 50 desta página · marcar todas as 312 do filtro" (pedido dele, 22/09) */
.lote-todos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Conferido: verde cheio com o V branco. Antes o conferido e o por-conferir eram idênticos,
   e clicar no que já estava conferido parecia um botão quebrado. */
.botao.conferido, .botao.conferido:hover { background: var(--ok); border-color: var(--ok); color: #fff; cursor: default; transform: none; box-shadow: none; }
.botao.conferir:hover { border-color: var(--ok); color: var(--ok-texto); }

/* Pílula com a primeira letra maiúscula, e as colunas de estado centralizadas. Vai no CSS,
   e não em cada template, para o texto do sistema continuar um só. O mesmo vale para as
   palavras de estado escritas soltas — "válido" do certificado é uma delas. */
.pilula::first-letter, .badge::first-letter,
.txt-ok::first-letter, .txt-atencao::first-letter, .txt-critica::first-letter { text-transform: uppercase; }
.tabela th.centro, .tabela td.centro { text-align: center; }

/* cinco números em tela média: 3 em cima e 2 embaixo, os de baixo ocupando a linha toda —
   no 3 + 2 de antes sobrava um buraco no fim da segunda linha. No Resumo e no painel do grupo
   (onde há o `.painel-filtro`) os números de 26 px pedem isso até 1440 px; nas listas, até 1280. */
@media (min-width: 861px) and (max-width: 1280px) {
  .kpi-grid.cinco { grid-template-columns: repeat(6, 1fr); }
  .kpi-grid.cinco > * { grid-column: span 2; }
  .kpi-grid.cinco > :nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 861px) and (max-width: 1440px) {
  main:has(.painel-filtro) .kpi-grid.cinco { grid-template-columns: repeat(6, 1fr); }
  main:has(.painel-filtro) .kpi-grid.cinco > * { grid-column: span 2; }
  main:has(.painel-filtro) .kpi-grid.cinco > :nth-child(n+4) { grid-column: span 3; }
  /* a busca do topo cede espaço antes dos botões da tela: com a letra maior, eles desciam para a
     2ª linha. O saldo da IA fica; o medidor volta na tela larga. */
  .topo-pagina { flex: 1 1 240px; min-width: 0; }
  .topo-pagina .trilha { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cmd-wrap { flex: 0 1 220px; min-width: 150px; max-width: 300px; }
  .barra-ia .barra-ia-medidor { display: none; }
}
@media (max-width: 1100px) { .selo-plano { display: none; } }
@media (max-width: 960px) { .cmd-wrap { max-width: 240px; min-width: 150px; } }
@media (max-width: 860px) {
  body { flex-direction: column; padding: 8px; }
  .menu { position: static; max-height: none; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px; border-radius: var(--raio); }
  .menu nav { flex-direction: row; flex-wrap: wrap; }
  .menu .secao { display: none; }
  .quem { border: 0; padding: 0 10px; margin-top: 0; }
  .cmd-wrap { display: none; }
  .grade, .grade.tres, .duas-colunas, .kpi-grid, .kpi-grid.duas, .kpi-grid.cinco { grid-template-columns: 1fr; }
  /* relative: o texto só para leitor de tela (.so-leitor, absolute) dentro da tabela fugia da
     rolagem dela e alargava a página (Financeiro a 390: 1.061 px, Otimizador 06/10) */
  .tabela { display: block; overflow-x: auto; position: relative; }
  /* .tabela-cartoes: cada linha vira um cartão, com o data-label de cada td como rótulo */
  .tabela.tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; }
  .tabela.tabela-cartoes { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .tabela-cartoes tr:first-child { display: none; }
  .tabela-cartoes tr { background: var(--papel); border-radius: var(--raio-cartao); box-shadow: var(--sombra); margin-top: 10px; padding: 4px 0 8px; }
  .tabela-cartoes tr.aviso-linha { background: none; box-shadow: none; margin-top: 6px; padding: 0; }
  .tabela-cartoes td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: center; border: 0; padding: 5px 14px; border-radius: 0; }
  .tabela-cartoes td[data-label]::before { content: attr(data-label); font-size: 12px; font-weight: 700; color: var(--suave2); }
  .tabela-cartoes td.titulo, .tabela-cartoes tr.aviso-linha td { display: block; }
  .tabela-cartoes td.titulo { padding: 12px 14px 10px; margin-bottom: 4px; border-bottom: 1px solid #F2F4F7; }
  .tabela-cartoes td[data-label="Credenciamento"], .tabela-cartoes td[data-label="Emissor"] { align-items: start; }
  .tabela-cartoes td[data-label="Emissor"] .botao { width: 100%; justify-content: center; }   /* o esboço da célula Emissor, 03/10 */
  .tabela-cartoes td > small { grid-column: 2; }
  .tabela-cartoes input, .tabela-cartoes select { width: 100% !important; }
  .tabela-cartoes input[type=radio], .tabela-cartoes input[type=checkbox] { width: 20px !important; height: 20px; }
  .tabela-cartoes td.centro { text-align: left; }
  .tabela-cartoes tr.grupo { background: none; box-shadow: none; margin-top: 16px; padding: 0; }
  .tabela-cartoes tr.grupo td, .tabela-cartoes tr.grupo:hover td { display: block; padding: 0 4px; background: none; border: 0; }
  .tabela-cartoes td.num { text-align: left; }
  .tabela-cartoes td.vazia { display: none; }      /* no cartão, o campo vazio ("—") não ocupa linha */
  /* os botões da linha, no cartão: lado a lado embaixo, e não na coluna do rótulo */
  .tabela-cartoes td.botoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; padding-top: 8px; }
  .tabela-cartoes td.botoes > * + * { margin-left: 0; }
  .painel-form.painel-termo { padding: 8px 0; }
  .termo-texto { padding: 18px 16px; }
}

/* ---- Resumo do produtor: o painel (mockup aprovado em 21/09/2026) ----
   docs/mockups/2026-09-21-resumo-dashboard.html. Os gráficos são SVG e HTML feitos no
   servidor (`app/painel.py`) — nenhuma biblioteca. */
.painel-filtro {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 20px;
  margin-bottom: 12px; font-size: 15px; font-weight: 600;
}
main form.caixa.painel-filtro { max-width: none; }     /* o limite de 760px é dos formulários de cadastro */
.painel-filtro select { width: auto; font-size: var(--fs-corpo); font-weight: 650; }
.painel-filtro .painel-base { margin-left: auto; font-size: var(--fs-legenda); font-weight: 500; color: var(--texto-3); }
/* No Resumo (e no painel do grupo) os números SÃO o assunto: 26 px sempre */
main:has(.painel-filtro) .kpi-valor { font-size: var(--fs-numero); }
/* cartão lado a lado numa grade não leva a margem de "cartão embaixo de cartão": ela descia o
   segundo 12px — o defeito entre Propriedades e Contas bancárias no Resumo */
:is(.kpi-grid, .painel-cartoes) > .caixa + .caixa { margin-top: 0; }
.kpi-sub .variacao {
  display: inline-block; padding: 1px 7px; border-radius: 8px; font-weight: 800; font-size: var(--fs-legenda);
  background: #F2F4F7; color: var(--texto-2);
}

/* Cada cartão tem o seu lugar nomeado: a simulação do IR mora logo abaixo das duas roscas
   (pedido dele), e a grade muda de forma com a largura sem mexer no HTML. */
.painel-cartoes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px;
  grid-template-areas: "rec desp" "ir ir" "meses afazer";
}
.cartao-receitas { grid-area: rec; }
.cartao-despesas { grid-area: desp; }
.cartao-ir { grid-area: ir; }
.cartao-meses { grid-area: meses; }
.cartao-afazer { grid-area: afazer; }
/* na linha, o cartão mais alto estica os outros: o corpo deles fica no meio */
.painel-cartoes > .caixa { display: flex; flex-direction: column; }
.painel-cartoes .rosca-corpo, .painel-cartoes .meses, .painel-vazio { margin: auto 0; }
.painel-vazio { text-align: center; padding: 18px 0; }
.painel-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.painel-cab h2 { margin: 0; font-size: var(--fs-cartao); font-weight: 500; }
.painel-cab h2 strong { font-weight: 800; }
.painel-cab > a { font-size: 13px; font-weight: 600; color: var(--acento); }

/* a rosca: um círculo de circunferência 100, cada fatia é um traço do tamanho do seu % */
.rosca-corpo { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 20px; align-items: center; }
.rosca { position: relative; width: 148px; height: 148px; }
.rosca svg { width: 100%; height: 100%; display: block; }
.rosca-centro {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; pointer-events: none;
}
.rosca-centro strong { font-size: 17px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.rosca-centro span { font-size: var(--fs-legenda); font-weight: 600; color: var(--texto-3); }
/* a legenda tem teto: em cartão largo, o valor fugia para longe do nome */
.legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; max-width: 460px; }
.legenda a {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 46px; gap: 9px; align-items: center;
  padding: 7px 8px; border-radius: 10px; color: var(--tinta); font-size: 13.5px;
}
.legenda a:hover { background: #F2F4F7; text-decoration: none; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; }
.legenda .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.legenda .valor { font-weight: 650; font-variant-numeric: tabular-nums; }
.legenda .pct { text-align: right; font-size: var(--fs-legenda); color: var(--texto-3); font-variant-numeric: tabular-nums; }

/* a simulação do IR: duas frases, como a do Agronota, e o porquê no "?". Texto corrido, e não
   flex: no flex cada pedaço virava um item com vão, e o ponto final se descolava do valor. */
.ir-acoes { display: flex; gap: 16px; }
.ir-acoes a { font-size: 13px; font-weight: 600; color: var(--acento); }
.ir-linha { margin: 2px 0 6px; font-size: 15px; line-height: 1.6; }
.ir-linha strong { font-weight: 800; }
.ir-linha.dica svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; color: var(--atencao); }
.ajuda {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  vertical-align: 1px; margin-left: 4px; border-radius: 50%; background: #E4E7EC;
  color: var(--texto-2); font-size: 12px; font-weight: 800; cursor: help;
}

/* mês a mês: o que entrou sobe, o que saiu desce, o mês de hoje fica marcado. HTML de altura
   fixa, e não SVG: o SVG crescia com a largura do cartão, letra e tudo, e na tela ultrawide
   dele virava cartaz. Cada metade tem 75px. */
.meses { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 8px; }
.meses-eixo { position: relative; height: 150px; }
.meses-eixo span { position: absolute; right: 0; transform: translateY(-50%); font-size: 12px; color: var(--texto-3); white-space: nowrap; }
.meses-plot { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.meses-plot > i { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--linha); }
.meses-plot > i.zero { border-top: 1px solid #D5D9E0; }
.mes { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; border-radius: 10px; }
.mes.atual { background: var(--cinza-claro); }
.mes > div { height: 75px; width: 100%; display: flex; justify-content: center; }
.mes > div:first-child { align-items: flex-end; }
.mes > div + div { align-items: flex-start; }
.mes .sobe, .mes .desce { width: min(16px, 50%); min-height: 2px; }
.mes .sobe, .meses-legenda i.sobe { background: var(--ok); }
/* o pago em cinza-azulado, como na lista: vermelho fica para o que está errado (05/10) */
.mes .desce, .meses-legenda i.desce { background: #98A2B3; }
.mes .sobe { border-radius: 4px 4px 1px 1px; margin-bottom: 1px; }
.mes .desce { border-radius: 1px 1px 4px 4px; margin-top: 1px; }
.mes small { margin: 6px 0 4px; font-size: var(--fs-legenda); color: var(--texto-3); }
.mes.atual small { color: var(--tinta); font-weight: 800; }
.mes.futuro small { color: #667085; font-weight: 400; }
.meses-legenda { display: flex; gap: 14px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.meses-legenda i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

/* a fazer: o que o escritório tem de resolver neste produtor, cada item leva à tela dele */
.afazer { display: grid; gap: 2px; }
.afazer a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px;
  color: var(--tinta); font-size: var(--fs-corpo); font-weight: 500;
}
.afazer a:hover { background: #F2F4F7; text-decoration: none; }
.afazer a::after { content: '›'; margin-left: auto; color: var(--suave); font-size: 14px; }
.afazer b {
  min-width: 30px; height: 24px; padding: 0 8px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cinza-claro); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.afazer b.critica { background: var(--critica-fundo); color: var(--critica-texto); }
.afazer b.atencao { background: var(--atencao-fundo); color: var(--atencao-texto); }
.afazer-pe { margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--linha); font-size: 12.5px; color: var(--texto-3); }

/* Os cartões se arrumam pela largura: 2 × 2 com a simulação no meio no monitor comum; na
   ultrawide (a dele, 2560px), a simulação embaixo das roscas e o mês a mês e o A fazer ao lado,
   e o painel inteiro cabe sem rolar; na tela estreita, um embaixo do outro. */
@media (min-width: 2200px) {
  .painel-cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "rec desp meses afazer" "ir ir meses afazer"; }
}
@media (max-width: 1100px) {
  .painel-cartoes { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rec" "desp" "ir" "meses" "afazer"; }
}

/* ---- Simulação do IR (a página): o que entra à esquerda, a conta à direita ---- */
.sim-pagina { max-width: 1600px; }      /* formulário esticado até a ultrawide não se lê */
.sim { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(380px, 1fr); gap: 12px; align-items: start; }
.sim-form { display: grid; gap: 12px; }
.sim-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.grade-campos { display: grid; gap: 10px; align-content: start; }
.grade-campos h3 { margin: 0; font-size: var(--fs-legenda); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.sim-form input[inputmode=decimal], .sim-form input[readonly] { text-align: right; font-variant-numeric: tabular-nums; }
.sim-form input[readonly] { background: var(--cinza-claro); color: var(--suave2); }
.sim-form .campo .campo { gap: 4px; }
.sim-rodape { display: flex; justify-content: flex-end; }
.sim-conta .l { border-bottom: 1px solid #F2F4F7; padding: 7px 0; }
.sim-conta .l > span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-conta .l.total > span { font-weight: 800; }
.sim-conta .l.destaque small { color: var(--verde-claro); }
.sim-conta .l.final {
  border-bottom: 0; margin: 8px 0 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--tinta); color: #fff; font-size: 14px; font-weight: 800;
}
.sim-nota { margin: 10px 0 0; font-size: var(--fs-legenda); color: var(--suave); }
@media (max-width: 1200px) { .sim { grid-template-columns: 1fr; } }
/* impressa, a simulação é a folha para o cliente: sem menu, sem busca, sem botões */
.so-impresso { display: none; }       /* o que só aparece na folha: o valor escolhido no select, o cabeçalho e o rodapé */
@media print {
  body { display: block; padding: 0; background: #fff; }
  .menu, .cmd-wrap, .topo-direita, .trilha, .sim-rodape, .painel-cab a, .painel-filtro select { display: none !important; }
  /* a Simulação do IR e o Resumo impressos vão ao cliente (revisão do lote 5, 28/09): o cabeçalho de
     toda folha entra no lugar da linha do título da tela */
  div.so-impresso { display: block; }
  body:has(div.so-impresso .cabecalho-folha) .topo { display: none !important; }
  .caixa, .kpi { box-shadow: none; border: 1px solid var(--linha); break-inside: avoid; }
  .sim { grid-template-columns: 1fr 1fr; }
  /* o Resumo do produtor impresso (pedido dele, 22/09): a frase do filtro vira texto, os links
     e os botões somem, e as cores das barras e das fatias ficam na folha. A folha A4 em pé tem
     uns 720px: as regras de tela estreita empilhariam tudo, então a grade volta a ser a da tela
     média (3 números em cima, 2 embaixo; roscas lado a lado, menores). */
  .so-impresso { display: inline; }
  .topo .acoes, .ir-acoes, .ajuda { display: none !important; }
  body:has(.painel-cartoes) { zoom: .85; }     /* só o Resumo: cabe numa folha e a legenda das roscas não corta */
  .kpi-grid.cinco { grid-template-columns: repeat(6, 1fr); }
  .kpi-grid.cinco > * { grid-column: span 2; }
  .kpi-grid.cinco > :nth-child(n+4) { grid-column: span 3; }
  .kpi-valor { font-size: 18px; }
  .painel-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "rec desp" "ir ir" "meses afazer"; }
  .rosca-corpo { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
  .rosca { width: 110px; height: 110px; }
  .rosca-centro strong { font-size: 12px; }
  .legenda a { font-size: 10.5px; padding: 4px 6px; gap: 6px; }
  .meses, .legenda, .meses-legenda, .afazer, .kpi-icone { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---- A espera: o orb (05/10/2026) --------------------------------------------------------------
   As esperas longas da IA e os envios que demoram ganham o orb de pontos do `orbs.js` (o motor
   thinking-orbs, MIT, num <canvas data-orb="estado">) — só nelas: em toda troca de página
   viraria pisca-pisca (resposta 3 do Saulo). Onde entra:
   - <p class="espera" role="status"> no lugar do aviso da rodada da IA (conferência no
     Financeiro, classificação nas Notas, conselho na Conciliação);
   - <canvas class="orb mini"> dentro do botão que espera ("Conferindo…");
   - <div class="espera-tela"> por cima da página nos envios demorados (o extrato em PDF, o
     Buscar notas agora): o formulário leva `data-espera` e o `tela.js` mostra a janela no envio.
   Sem script fica o texto; quem pede ao sistema menos movimento vê o orb parado. */
.orb { display: block; flex: none; width: 48px; height: 48px; }
.orb.grande { width: 76px; height: 76px; }
.orb.mini { display: inline-block; width: 18px; height: 18px; vertical-align: middle; margin-right: 2px; }
/* a faixa da espera dentro da tela */
.espera {
  display: flex; align-items: center; gap: 16px; margin: 0 0 14px; padding: 16px 20px;
  border-radius: 14px; border: 1px solid #CFE5D3;
  background: linear-gradient(120deg, #F1F8F2 0%, #FFFFFF 70%);
  box-shadow: var(--sombra-1); color: var(--tinta); font-size: var(--fs-corpo); line-height: 1.5;
}
.espera > span:last-child { flex: 1; min-width: 0; }
.espera strong { display: block; font-size: 15px; font-weight: 700; }
.espera small { display: block; font-size: var(--fs-legenda); color: var(--texto-3); }
.espera-barra { display: block; height: 5px; margin: 8px 0 6px; border-radius: 99px; background: #DCEBDF; overflow: hidden; }
.espera-barra > i { display: block; height: 100%; width: var(--feito, 0%); border-radius: inherit;
  background: linear-gradient(90deg, #2E7D32, #1E6B34); transition: width .4s ease; }
/* o botão que espera não parece quebrado: fica inteiro, com o orb pequeno e o cursor de espera */
.botao:disabled:has(.orb), .botao[disabled]:has(.orb) { opacity: 1; cursor: progress; }
/* a janela por cima da tela, nos envios que demoram */
.espera-tela {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(242, 244, 247, .72); backdrop-filter: blur(3px);
}
.espera-cartao {
  display: grid; justify-items: center; gap: 12px; text-align: center; width: min(380px, 100%);
  padding: 28px 26px 24px; border-radius: 20px; background: #fff; box-shadow: var(--sombra-3);
}
.espera-cartao strong { font-size: 17px; font-weight: 750; }
.espera-cartao p { margin: 0; font-size: 13.5px; color: var(--texto-3); line-height: 1.5; }
@media (max-width: 760px) {
  .espera { padding: 14px 16px; gap: 14px; align-items: flex-start; }
  .orb { width: 40px; height: 40px; }
  .orb.grande { width: 68px; height: 68px; }
}

/* =====================================================================================
   CELULAR (≤ 760px)
   =====================================================================================
   O sistema nasceu para o monitor do escritório: menu de 214px à esquerda, tabelas de dez
   colunas, botões de 26px. Nada disso serve na mão. Este bloco é a tradução, e vem no fim da
   folha de propósito: é a cascata que o deixa vencer as regras de cima sem `!important`.

   Três princípios, que explicam quase toda regra daqui para baixo:

   1. **O menu vira gaveta.** Em faixa horizontal, os 21 itens viravam uma parede de pílulas
      antes do conteúdo de toda página. Fechado, ele sai do caminho; o botão no topo o traz.
   2. **Nada mede menos que 44px para o dedo.** É a régua da Apple, e a da Material é 48.
      O quadradinho de 26px do mockup é do mouse, não do polegar.
   3. **O campo de texto tem 16px.** Abaixo disso o Safari do iPhone dá zoom sozinho ao focar,
      e a tela fica torta até o usuário fechar na unha.
*/

/* O botão que abre a gaveta. Mora no topo, ao lado do título, e só existe no celular — no
   monitor o menu está sempre à vista e um hambúrguer ali seria um enfeite. */
.abrir-menu {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; padding: 0; border-radius: 12px;
  border: 1px solid var(--linha); background: var(--papel); color: var(--tinta); cursor: pointer;
}
.abrir-menu svg { width: 20px; height: 20px; }

@media (max-width: 760px) {

  /* ---- a gaveta ---------------------------------------------------------------------- */
  /* Tudo aqui depende de `com-gaveta`, que um script inline no <head> põe no <html> — ali, e
     não no `tela.js`, porque a classe tira o menu do fluxo e aplicá-la depois do primeiro
     desenho fazia a página pular para cima (1,0 de CLS medido). Sem JavaScript a classe não
     existe e fica a faixa horizontal de sempre, feia mas inteira: esconder a navegação de quem
     não tem script seria trancar a porta e jogar fora a chave. */
  html.com-gaveta .abrir-menu { display: inline-flex; }
  html.com-gaveta .menu {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 300;
    width: min(290px, 86vw); max-height: none; padding: 12px;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px;
    align-self: stretch; border-radius: 0; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-102%); transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(15, 23, 42, .18);
  }
  html.com-gaveta body.menu-aberto .menu { transform: none; }
  /* o trilho de ícones de 58px é preferência de monitor grande; na gaveta ele não faz sentido,
     e sem isto quem salvou "menu retraído" receberia 21 itens espremidos em 58px */
  body.menu-retraido .menu { width: min(290px, 86vw); }
  body.menu-retraido .menu nav a span.conta,
  body.menu-retraido .menu .quem-info,
  body.menu-retraido .menu .marca span { display: revert; }
  .menu nav, .menu nav.areas { flex-direction: column; flex-wrap: nowrap; }
  .menu .secao { display: block; }     /* na coluna o título de seção volta a orientar */
  .retrair { display: none; }
  /* o véu: escurece a página e é onde o dedo toca para fechar */
  html.com-gaveta body.menu-aberto::before {
    content: ""; position: fixed; inset: 0; z-index: 290;
    background: rgba(15, 23, 42, .45);
  }
  html.com-gaveta body.menu-aberto { overflow: hidden; }

  /* ---- o topo ------------------------------------------------------------------------ */
  /* Em duas linhas: puxador, título e sino em cima; os botões da tela embaixo, na largura
     toda. Numa linha só, "+ Novo lançamento" comia o título e sobrava uma coluna de três
     letras para a trilha, que descia em palavras soltas. */
  .topo { gap: 8px 10px; align-items: center; }
  .abrir-menu { order: 0; }
  /* base 0, e não auto: com `auto` um subtítulo longo reservava a largura toda e empurrava o
     sino para uma linha só dele. Assim o bloco do título encolhe e os três cabem em cima. */
  .topo-pagina { order: 1; flex: 1 1 0; min-width: 0; }
  .topo-direita { order: 2; }
  .topo .acoes { order: 3; flex: 1 1 100%; }
  .topo .acoes > * { flex: 1 1 auto; justify-content: center; }
  .topo-pagina h1 { font-size: 18px; }
  /* a trilha numa linha só, cortada no fim: ela orienta, não é o assunto da tela */
  .trilha { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* as abas rolam de lado em vez de virar três linhas de pílulas */
  .linha-abas { flex-wrap: nowrap; align-items: center; }
  .abas-notas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .abas-notas::-webkit-scrollbar { display: none; }
  .abas-notas a { flex: none; }

  /* ---- grades que o bloco de 860px não alcançava -------------------------------------- */
  .linha, .sim-colunas, .rosca-corpo { grid-template-columns: minmax(0, 1fr); }   /* 1fr deixava a legenda esticar a coluna e rolar de lado a 390 (Otimizador, 05/10) */
  .painel-cartoes { grid-template-columns: minmax(0, 1fr); }
  .linha .botao { margin-bottom: 0; }
  /* a ficha: o rótulo de 170px numa tela de 334px não deixava nada para o valor */
  .dados > div { grid-template-columns: 1fr; gap: 2px; }
  /* a rosca e a legenda uma sobre a outra, e a legenda sem a coluna fixa de 42px */
  .rosca-corpo { justify-items: center; gap: 14px; }
  .legenda { width: 100%; }
  .legenda a { grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; padding: 9px 8px; }
  .legenda a > :last-child { display: none; }   /* a porcentagem: o valor já está ao lado */
  /* A fila de trabalho: bolinha, assunto e o número grande na primeira linha; a contagem de
     produtores desce para debaixo do assunto. As posições vão explícitas porque, no automático,
     a contagem caía na coluna de 14px da bolinha e virava uma torre de letras. */
  .linha-fila { grid-template-columns: 14px minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px; }
  .linha-fila > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .linha-fila > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .linha-fila > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .linha-fila .total { grid-column: 3; grid-row: 1; font-size: 19px; }
  /* o navegador de mês do Funrural: os dois min-width somavam mais que a tela inteira */
  .seletor-mes { flex-wrap: wrap; }
  .seletor-mes select[name=mes] { min-width: 0; flex: 1; }
  .seletor-mes select[name=ano] { min-width: 0; width: 5.5em; }
  /* o gráfico dos doze meses fica, mas mais baixo: 23px por mês é o que a tela dá */
  .meses-plot { height: 110px; }

  /* ---- tabelas ------------------------------------------------------------------------ */
  /* `.tabela` já rola no bloco de 860px. Aqui só se acerta o que aperta: o respiro de 18px
     das bordas e a distância de 2px entre botões que o dedo não acerta. */
  .tabela { -webkit-overflow-scrolling: touch; }
  .tabela th, .tabela td { padding: 11px 10px; }
  .tabela th:first-child, .tabela td:first-child { padding-left: 14px; }
  .tabela th:last-child, .tabela td:last-child { padding-right: 14px; }
  .tabela td.botoes > * + * { margin-left: 6px; }
  /* as folhas de relatório, que não usam `.tabela` e ficavam sem rolagem nenhuma */
  .folha table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .folha { padding: 12px; max-width: none; }

  /* ---- o menu de ações da linha vira folha de baixo ----------------------------------- */
  /* Solto sobre a tabela ele era cortado: quem rola na horizontal recorta também na vertical.
     Preso ao rodapé da tela ele escapa do recorte (é `fixed`), e é onde o polegar alcança. */
  .menu-acoes .menu-lista,
  .menu-acoes.direita .menu-lista {
    position: fixed; inset: auto 0 0 0; top: auto; left: 0; right: 0;
    width: auto; min-width: 0; max-width: none;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0; gap: 2px;
  }
  .menu-acoes .menu-lista .botao,
  .menu-acoes .menu-lista > a { padding: 13px 14px; font-size: 13.5px; }
  .menu-acoes[open] > summary::after {   /* o véu do action sheet */
    content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(15, 23, 42, .35);
  }
  .menu-acoes[open] { z-index: 400; }

  /* ---- modais: folha inteira, que é o que o celular faz ------------------------------- */
  dialog.modal, dialog.modal.estreito, dialog.modal.largo {
    width: 100%; max-width: none; max-height: 100%; height: 100%;
    margin: 0; border-radius: 0;
  }
  dialog.modal .modal-topo { padding: 16px 16px 0; position: sticky; top: 0;
                             background: var(--papel); z-index: 2; }
  dialog.modal form.caixa, dialog.modal div.caixa { padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .escolhas { padding: 14px 16px 24px; }

  /* ---- o dedo: nada abaixo de 44px ---------------------------------------------------- */
  .botao, .btn, .botao.pequeno, .btn-sm { min-height: 44px; padding-top: 10px; padding-bottom: 10px; font-size: 14px; }
  .topo .acoes .botao { padding-left: 12px; padding-right: 12px; }   /* os três botões das Notas numa linha só */
  .botao:hover, .btn:hover, .botao.primario:hover { transform: none; }   /* no dedo não há mouse por cima */
  .botao.pequeno.so-icone { width: 44px; height: 44px; min-height: 44px; border-radius: 12px; }
  .botao.pequeno.so-icone svg { width: 16px; height: 16px; }
  .paginas .botao.pequeno { min-width: 44px; }
  .paginas { gap: 6px; }
  .filtros a, .abas-notas a, .afazer a { min-height: 44px; display: inline-flex; align-items: center; }
  /* a legenda continua grade: em inline-flex o nome comprido da conta ("Consultas, exames e
     procedimentos veterinários") não encolhia e a rosca rolava de lado a 390 (05/10) */
  .legenda a { min-height: 44px; }
  .abas-notas a { padding: 10px 16px; font-size: 12.5px; }
  .filtros a { padding: 10px 14px; }
  .menu nav a, .area-itens a, .arvore summary, .arvore .folha { min-height: 44px; }
  /* O plano de contas era a única tela que ainda empurrava a página para o lado. Cabem quatro
     coisas na linha e havia cinco: some a pílula da classificação, que repete "Atividade rural"
     em quase todo nó e é o que menos se procura aqui — a do nó que é conta própria do produtor
     fica, porque essa é justamente a que se procura (mora dentro do `.nome`). */
  .arvore summary > .pilula, .arvore .folha > .pilula { display: none; }
  .arvore details.no > summary, .arvore .folha { flex-wrap: wrap; gap: 8px; }
  .arvore .nome { flex: 1 1 auto; min-width: 0; }
  .arvore .codigo, .tabela td.codigo { min-width: 0; }
  .arvore .suave { white-space: nowrap; font-size: 12px; }
  .arvore .filhos { margin-left: 10px; padding-left: 4px; }
  .arvore .folha { padding-left: 14px; }
  .seletor-mes .so-icone { width: 44px; height: 44px; }
  .botao-circulo { width: 44px; height: 44px; }
  /* 16px no campo de texto: abaixo disso o Safari do iPhone dá zoom sozinho ao focar */
  input, select, textarea { font-size: 16px; min-height: 44px; }
  input[type=checkbox], input[type=radio] { min-height: 0; width: 20px; height: 20px; }

  /* ---- o que encolhe mal em linha ------------------------------------------------------ */
  .campo-com-botao, .linha-parcela, .escolher-prop, .logo-atual, .ir-acoes, .passo-modelo,
  .lote-todos { flex-wrap: wrap; }
  .linha-parcela > input { flex: 1 1 140px; }
  .escolher-prop select { max-width: none; flex: 1; }
  .acoes, .topo .acoes { flex-wrap: wrap; }
  .kpi-valor { font-size: 24px; }
  .caixa, .card { padding: 16px; }
  .filtros-notas .campo:not(.busca-nota) { flex: 1 1 140px; }    /* dois por linha, na largura toda */
}

/* Quem pediu para o sistema não se mexer não ganha a gaveta deslizando */
@media (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
}

/* ---- /dono: o painel de quem vende o sistema (desenho de 24/09/2026, seção 7) ----
   O menu lateral é o do escritório, com os grupos do dono (28/09, item 8); sem dono logado, a
   página fica solta. */
body.pagina-dono.sem-menu { display: block; }
.pagina-dono main.dono { width: 100%; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.pagina-dono h2 { font-size: 15px; margin: 8px 0 0; }
.linha-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }   /* também o mês do extrato de IA */
.linha-acoes > input { width: auto; }
.pagina-dono .linha-acoes form { display: flex; gap: 6px; align-items: center; }
/* com as colunas de IA (24/09) o form "Mudar plano" numa linha só passava da caixa no computador.
   No celular não: lá a tabela já rola de lado, e quebrar os forms só esticava cada linha. */
@media (min-width: 861px) { .pagina-dono .linha-acoes form { flex-wrap: wrap; } }
.pagina-dono .linha-acoes input, .pagina-dono .linha-acoes select { width: auto; }
.pagina-dono .cod { white-space: nowrap; }         /* a chave TC-… partida em três linhas não se lê */
.pagina-dono form.caixa > .acoes { margin-top: 14px; }   /* sem isto o botão encosta no último campo */
@media (min-width: 861px) { .pagina-dono .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
.pagina-dono .segredo { font-family: ui-monospace, Consolas, monospace; font-size: 15px; font-weight: 700; letter-spacing: .04em; }

/* A barra de saldo de IA no topo de toda tela do escritório (créditos de IA, 24/09): o saldo e um
   medidor do saldo sobre o último depósito — verde acima de 50%, âmbar até 20%, vermelho abaixo. */
.barra-ia { display: inline-flex; align-items: center; gap: 8px; background: var(--papel); box-shadow: var(--sombra);
  color: var(--tinta); font-size: 12.5px; font-weight: 800; padding: 8px 14px; border-radius: 99px;
  white-space: nowrap; text-decoration: none; }
.barra-ia-medidor { width: 48px; height: 6px; border-radius: 3px; background: var(--linha); overflow: hidden; flex: none; }
.barra-ia-medidor > span { display: block; height: 100%; background: var(--ok); }
.barra-ia.atencao .barra-ia-medidor > span { background: var(--atencao); }
.barra-ia.critica .barra-ia-medidor > span { background: var(--critica); }
.barra-ia.critica { color: var(--critica-texto); }
/* a grande, em /creditos-ia: o medidor cresce até 260px e encolhe junto com a tela */
.barra-ia.grande { display: flex; max-width: 460px; font-size: 18px; gap: 16px; padding: 12px 20px; margin-bottom: 14px; }
.barra-ia.grande .barra-ia-medidor { flex: 1 1 260px; width: auto; min-width: 60px; max-width: 260px; height: 12px; border-radius: 6px; }
@media (max-width: 600px) { .barra-ia:not(.grande) .barra-ia-medidor { display: none; } }   /* no celular, só o texto */
/* os avisos do dono no topo (painel do dono, 26/09): a lista do megafone, larga para ler */
.avisos-topo .menu-lista { width: min(380px, 92vw); max-height: 70vh; overflow: auto; padding: 8px 12px; }
.avisos-topo .aviso-item { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid #F0F1F4; white-space: normal; text-align: left; }
.avisos-topo .aviso-item:last-child { border-bottom: 0; }

/* ---- Letra do celular (aprovado em 02/10/2026): menu e alvos de toque.
   No FIM do arquivo, depois do bloco de 760 px, para ganhar das regras de lá. Desde 05/10 o
   "nada abaixo de 12 px" vale também no computador e está em cada regra lá em cima; aqui fica
   só o que é do celular. */
/* Marca nova (07/10/2026). O símbolo no lugar do "TC", quando o escritório não subiu logo (menu,
   painel do dono, Meus dados); o logotipo na tela de entrar, na página de erro e no termo. */
.marca .marca-simbolo { width: 42px; max-width: 100%; height: auto; flex: none; }   /* no menu retraído, encolhe para caber */
.logo-atual .marca-simbolo { height: 56px; width: auto; flex: none; }
.logotipo-solto { display: block; width: 240px; max-width: 80%; height: auto; }
.cartao-entrada .logotipo-solto { margin: 0 0 6px; }
.cartao-termo > .logotipo-solto { width: 260px; margin: 4px 0 2px; }

/* ---- Entrar: o cartão que vira (modelo do Saulo, 07/10/2026, docs/leituras/2026-10-07-esboco-login/) ----
   A face de boas-vindas (o texto e o símbolo no creme) e o verso (o formulário e o painel verde da
   marca) dividem a mesma célula da grade: o cartão fica com a altura da face mais alta, sem altura
   fixa que obrigue a rolar no celular. O giro só existe com script (.js no <html>); sem ele, as
   duas faces ficam uma embaixo da outra. A entrada do painel do dono usa o mesmo cartão, só com
   o verso (as peças comuns estão em templates/_entrada.html). */
body.pagina-entrar { flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px 24px; }
.entrada { flex: none; width: 100%; max-width: 1080px; perspective: 2000px; }
.entrada-giro { display: grid; gap: 16px; }
.entrada-face {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0;
  background: var(--papel); border-radius: 24px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .05), 0 24px 48px -20px rgba(16, 24, 40, .22);
}
.js .entrada-giro { gap: 0; transform-style: preserve-3d; }
.js .entrada-face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.js .entrada-verso, .js .entrada.virada .entrada-giro { transform: rotateY(180deg); }
/* .animar entra no primeiro clique: quem abre já no formulário (erro, ou já entrou antes) não vê giro */
.js .entrada.animar .entrada-giro { transition: transform .8s cubic-bezier(.645, .045, .355, 1); }

.entrada-texto { display: flex; flex-direction: column; justify-content: center; padding: 56px 64px; min-width: 0; }
.entrada-logo { display: block; width: 240px; max-width: 100%; height: auto; margin: 0 0 40px; }
.entrada-logo-celular { display: none; }
.entrada h1, .entrada h2 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 12px; }
.entrada-sub { font-size: 15px; color: var(--texto-3); line-height: 1.6; margin: 0 0 32px; }
.entrada-itens { list-style: none; padding: 0; margin: 0 0 40px; display: grid; gap: 16px; }
.entrada-itens li { display: flex; align-items: center; gap: 14px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--tinta2); }
.entrada-icone { width: 44px; height: 44px; flex: none; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--acento-fundo); color: var(--acento); }
.entrada-icone svg { width: 22px; height: 22px; }
.entrada-itens li:nth-child(2) .entrada-icone { background: #F8F1E1; color: #8E641B; }   /* o dourado do símbolo */
.entrada-itens li:nth-child(3) .entrada-icone { background: #E7EEE9; color: var(--verde-escuro); }
.entrada .botao.primario { justify-content: center; gap: 10px; min-height: 48px; padding: 13px 28px; font-size: 15px; border-radius: 14px; }
.entrada .botao.primario svg { width: 18px; height: 18px; transition: transform .15s; }
.entrada-ir { align-self: flex-start; }
.entrada-ir:hover svg { transform: translateX(3px); }

.entrada-voltar { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; margin: -10px 0 18px; color: var(--texto-3); font-weight: 700; }
.entrada-voltar:hover { color: var(--tinta); text-decoration: none; }
.entrada-voltar svg { width: 18px; height: 18px; }
.entrada-form { display: grid; gap: 18px; }
.entrada-form .aviso { margin: 0; }
.campo > .com-icone { position: relative; display: block; color: var(--texto-3); font-size: inherit; font-weight: inherit; }
.com-icone svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; transition: color .15s; }
.com-icone:focus-within svg { color: var(--acento); }
.entrada-form input { min-height: 48px; padding: 12px 14px 12px 44px; border-radius: 12px; background-color: var(--superficie); }
.entrada-form input:focus { background-color: #fff; }
.entrada-form .botao.primario { width: 100%; margin-top: 6px; }
.entrada-form .entrada-codigo { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: .3em; font-variant-numeric: tabular-nums; }   /* o código do celular, na entrada do dono */

.entrada-arte, .entrada-marca { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: 48px; text-align: center; }
.entrada-arte { background: #FBF8F1; }   /* o creme da marca; o banner fica fora do sistema (07/10) */
.entrada-marca { background: linear-gradient(160deg, #1B3A27 0%, #0D2618 60%, #0A1A0C 100%); }   /* o painel verde de 21/09 */
.entrada-arte::before, .entrada-arte::after, .entrada-marca::before, .entrada-marca::after {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
}
.entrada-arte::before { top: -160px; right: -140px; background: radial-gradient(closest-side, rgba(46, 114, 48, .16), transparent); }
.entrada-arte::after { bottom: -170px; left: -150px; background: radial-gradient(closest-side, rgba(190, 145, 57, .22), transparent); }
.entrada-marca::before { top: -150px; right: -150px; background: radial-gradient(closest-side, rgba(224, 191, 110, .14), transparent); }
.entrada-marca::after { bottom: -170px; left: -150px; background: radial-gradient(closest-side, rgba(76, 175, 80, .12), transparent); }
.entrada-simbolo { position: relative; width: 220px; max-width: 70%; height: auto; filter: drop-shadow(0 18px 24px rgba(13, 72, 35, .22)); animation: entrada-flutua 6s ease-in-out infinite; }
@keyframes entrada-flutua { 50% { transform: translateY(-10px); } }
.entrada-arte p { position: relative; max-width: 300px; margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--verde-escuro); }
.entrada-marca img { position: relative; width: 100%; max-width: 340px; height: auto; }
.entrada-marca p { position: relative; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 239, 227, .62); }
.entrada-rodape { margin: 0; font-size: 12px; color: var(--texto-3); text-align: center; }

/* quem pediu para o sistema não se mexer: troca de face sem girar, e o símbolo parado */
@media (prefers-reduced-motion: reduce) {
  .js .entrada.animar .entrada-giro { transition: none; }
  .entrada-simbolo { animation: none; }
}
/* acesso seguro (07/10/2026): o link "Esqueci a senha", o botão que é link e o aviso verde */
.entrada-esqueci { display: block; text-align: center; margin-top: 4px; padding: 12px 0; font-size: 14px; font-weight: 700; color: var(--acento); }
.entrada-esqueci:hover { text-decoration: underline; }
.entrada-botao-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* entrar com o Google: o "G" oficial num botão branco, sem recolorir (regras de marca da Google) */
.entrada-ou { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; font-size: 13px; color: var(--texto-3); }
.entrada-ou::before, .entrada-ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.botao.entrada-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px;
  background: #fff; border: 1px solid var(--borda-campo); color: var(--tinta); font-weight: 700; text-decoration: none; }
.entrada-google svg { width: 18px; height: 18px; flex: none; }
.aviso.ok { background: var(--ok-fundo); border-color: var(--ok-borda); border-left-color: var(--ok); }
.aviso.ok::before { background: var(--ok-texto);
  --icone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>'); }
/* a tabela de usuários no celular: cada linha vira um bloco (sem <thead>: a linha de títulos some pelo :has) */
@media (max-width: 640px) {
  table.pilha, table.pilha tbody, table.pilha thead { display: block; }
  table.pilha tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--linha); }
  table.pilha thead, table.pilha tr:has(> th) { display: none; }
  table.pilha td { display: block; padding: 6px 0; border: 0; }
  table.pilha td[data-r]::before { content: attr(data-r); display: block; font-size: 12px; font-weight: 700; color: var(--texto-3); margin-bottom: 2px; }
  table.pilha input[type=email] { max-width: 100% !important; }
}
/* a tela do código por e-mail (acesso seguro, 07/10/2026): cartão central de 500 px; o cadeado cinza aparece desde o início */
.otp-logo { display: block; width: 200px; max-width: 70%; height: auto; }
.otp { position: relative; isolation: isolate; width: 100%; max-width: 500px; box-sizing: border-box; padding: 48px; text-align: center; overflow: hidden;
  background: var(--papel); border-radius: 32px; border: 1px solid var(--linha);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .03), 0 24px 48px -20px rgba(16, 24, 40, .22); transition: background-color .5s, border-color .5s; }
.otp::before { content: ""; position: absolute; top: -20%; right: -20%; width: 256px; height: 256px; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(46, 114, 48, .10), transparent); }
.otp.aberto { background: var(--ok-fundo); border-color: var(--ok-borda); }
.otp.erro { border-color: var(--critica-borda); }
.otp-voltar { position: absolute; left: 32px; top: 32px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; background: var(--superficie); color: var(--texto-3); cursor: pointer; padding: 0; }
.otp-voltar:hover { background: var(--acento-fundo); color: var(--acento); }
.otp-voltar svg { width: 20px; height: 20px; }
.otp-cadeado { width: 96px; height: 96px; margin: 0 auto 32px; position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: 28px; background: var(--superficie); border: 1px solid var(--linha); box-shadow: 0 1px 2px rgba(16, 24, 40, .06); transition: background-color .5s, border-color .5s; }
.otp-cadeado > svg { width: 48px; height: 48px; color: var(--texto-3); transition: all .3s; }
.otp-cadeado.visivel > svg { animation: otp-aparece .8s cubic-bezier(.34, 1.56, .64, 1) both; }
.otp-cadeado.aberto { background: var(--ok-fundo); border-color: var(--ok-borda); }
.otp-cadeado.aberto > svg { color: var(--acento); }
.otp-cadeado.erro { background: var(--critica-fundo); border-color: var(--critica-borda); }
.otp-cadeado.erro > svg { color: var(--critica); }
.otp-cadeado.erro.visivel > svg { animation: otp-treme .5s ease-in-out; }
.otp-anel { position: absolute; inset: 0; border-radius: 28px; border: 2px solid var(--acento); transform: scale(1.25); opacity: 0; transition: all .7s; pointer-events: none; }
.otp-cadeado.aberto .otp-anel { opacity: 1; transform: scale(1); }
@keyframes otp-aparece { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes otp-treme { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-12px) rotate(-10deg); } 20%, 40%, 60%, 80% { transform: translateX(12px) rotate(10deg); } }
.otp-cabeca { margin-bottom: 36px; transition: opacity .3s; }
.otp-cabeca.esmaece { opacity: .3; }
.otp h1 { font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 12px; }
.otp-sub { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--texto-3); }
.otp-sub strong { color: var(--tinta); font-weight: 700; }
.otp-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; height: 64px; perspective: 1200px; transform-style: preserve-3d; }
.otp-grade input { width: 100%; min-width: 0; height: 64px; box-sizing: border-box; padding: 0; text-align: center; font: inherit; font-size: 24px; font-weight: 700; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borda-campo); border-radius: 16px; outline: none; transition: background-color .3s, border-color .3s; }
.otp-grade input:focus { background: #fff; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-anel); }
.otp-grade input::placeholder { color: #C9CED6; }
@keyframes otp-vortice { 0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) scale(1); opacity: 1; }
  20% { transform: translate3d(0, -10px, 100px) rotateX(45deg) rotateY(45deg) scale(1.1); }
  100% { transform: translate3d(var(--cx), var(--cy), -1000px) rotateX(720deg) rotateY(1080deg) scale(.05); opacity: 0; } }
.otp-grade input.vortice { animation: otp-vortice 2s cubic-bezier(.4, 0, .2, 1) forwards; pointer-events: none; }
.otp .botao.primario { width: 100%; min-height: 56px; justify-content: center; gap: 10px; font-size: 16px; font-weight: 800; border-radius: 16px; }
.otp .botao.primario svg { width: 18px; height: 18px; }
.otp .botao.primario.verde { background: var(--acento); border-color: var(--acento); }
.otp .botao.primario.vermelho { background: var(--critica-texto); border-color: var(--critica-texto); }
.otp-msg { min-height: 24px; margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700; }
.otp-msg svg { width: 18px; height: 18px; flex: none; }
.otp-msg.ok { color: var(--ok-texto); }
.otp-msg.erro { color: var(--critica-texto); }
.otp-continuar { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; }
.otp-reenviar { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--cinza-claro); }
.otp-reenviar p { margin: 0; font-size: 14px; font-weight: 500; color: var(--texto-3); }
.otp-reenviar button { background: none; border: 0; padding: 12px 8px; font: inherit; font-weight: 800; color: var(--acento); cursor: pointer; text-underline-offset: 4px; }
.otp-reenviar button:hover { text-decoration: underline; }
.otp-reenviar button:disabled { color: var(--texto-3); cursor: default; text-decoration: none; }
.otp-espera { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.otp-espera svg { width: 14px; height: 14px; }
.otp-outro { margin: 24px 0 0; font-size: 13px; color: var(--texto-3); }
.otp .aviso { text-align: left; margin: 0 0 24px; }
@media (max-width: 640px) {
  .otp { padding: 28px 20px 28px; border-radius: 28px; }
  .otp-voltar { left: 16px; top: 16px; }
  .otp-cadeado { margin-top: 12px; margin-bottom: 24px; }
  .otp h1 { font-size: 26px; }
  .otp-grade { gap: 8px; height: 56px; margin-bottom: 24px; }
  .otp-grade input { height: 56px; font-size: 22px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .otp-cadeado.visivel > svg, .otp-cadeado.erro.visivel > svg { animation: none; }
  .otp-grade input.vortice { animation: none; opacity: 0; }
}
@media (max-width: 860px) {
  body.pagina-entrar { padding: 16px; gap: 14px; }
  .entrada-face { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  .entrada-arte, .entrada-marca { display: none; }
  .entrada-texto { padding: 28px 22px; }
  .entrada-logo { width: 220px; margin-bottom: 28px; }
  .entrada-logo-celular { display: block; margin-bottom: 24px; }
  .entrada-sub { margin-bottom: 24px; }
  .entrada-itens { margin-bottom: 28px; }
  .entrada-ir { align-self: stretch; }
  .entrada-form input { font-size: 16px; }   /* abaixo de 16 px o iPhone dá zoom no campo */
}

/* O termo de uso no painel do dono (desenho de 07/10/2026): a prévia e a versão em leitura com a letra
   da tela de aceite (o `.pagina-dono h2`, 15px, vem depois e encolheria o título do termo) */
.pagina-dono .termo-texto h2 { font-size: 19px; margin: 0 0 12px; }
.pagina-dono .termo-texto h3 { margin: 22px 0 6px; }
.termo-texto ul { margin: 0 0 10px; padding-left: 22px; }
.hash { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; word-break: break-all; }
.hash.curto { white-space: nowrap; word-break: normal; }
.dados.um { grid-template-columns: minmax(0, 1fr); }
.dados.um > div:nth-last-child(2) { border-bottom: 1px solid #F2F4F7; }

main form.caixa.editor-caixa { max-width: none; }   /* o limite de 760px é dos formulários de cadastro */
.editor-termo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 12px; }
.editor-termo textarea { width: 100%; min-height: 68vh; font: inherit; font-size: 14.5px; line-height: 1.55; resize: vertical; }
.editor-termo .previa { margin: 0; max-height: calc(68vh + 2px); overflow: auto; padding: 18px 22px; }
.cola-marcacao { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-size: 12.5px; color: var(--suave); }
.cola-marcacao code { font-family: ui-monospace, Consolas, monospace; background: #F2F4F7; border-radius: 4px; padding: 1px 5px; color: var(--tinta); }
.so-celular { display: none; }
@media (max-width: 860px) {
  .editor-termo { grid-template-columns: minmax(0, 1fr); }
  .editor-termo textarea { min-height: 55vh; }
  .editor-termo .previa { max-height: 70vh; }   /* rolagem interna: sem ela o editor passa de 126 mil px no celular */
  .so-celular { display: inline-block; padding: 4px 0; }   /* alvo de toque de 24 px */
}

@media (max-width: 860px) {
  /* Tabela que rola de lado (a caixa do IRPF): sombra na borda que ainda tem o que rolar. Abaixo de 860 px quem
     rola é a própria .tabela, com fundo opaco: as quatro camadas vão nela, e a cor de base é a do papel. */
  .rola-sombra > .tabela { background-color: var(--papel);
    background-image: linear-gradient(to right, var(--papel) 30%, transparent),
                      linear-gradient(to left, var(--papel) 30%, transparent),
                      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.28), transparent),
                      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.28), transparent);
    background-position: left center, right center, left center, right center;
    background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll; }
  /* 1. O <small> solto (o do navegador dá 11,6 px num texto de 14) e o rodapé do menu, maior */
  small { font-size: 12px; }
  .quem-info span, .menu .produtor .quem-info span, .quem-info a, .quem-info .como-link, .como-link { font-size: 13px; }
  /* a exceção: os doze meses do gráfico dividem 288 px, 24 por mês; a 12 px "mar" e "abr" se
     encostam. Ficam com 11 px (eram 10). */
  .mes small { font-size: 11px; }

  /* 3. O menu: os itens com 15 px, os nomes também (05/10; eram 14) */
  .menu nav a, .menu nav details.area > summary, .menu nav details.area .area-itens a,
  .marca strong, .menu .produtor .quem-info strong, .quem-info strong { font-size: 15px; }
  .menu nav a svg, .menu nav details.area > summary svg { width: 17px; height: 17px; }

  /* 4. O dedo: alvo de 40 px ou mais.
     - a área do menu ficava com 31 px (o item já tinha 44);
     - os links do cartão do produtor e do rodapé do menu viram linhas de 40 px;
     - o link de texto da tabela e do cartão cresce para cima e para baixo sem mexer no desenho:
       no link em linha o padding de cima e de baixo só aumenta a área do toque (e o risco da
       nota cancelada continua passando por ele, o que um inline-block cortaria); no link que é
       item de flex, a margem negativa devolve o espaço. */
  .menu nav details.area > summary { min-height: 44px; }
  .menu .produtor .quem-info a:not(.pilula) { display: inline-flex; align-items: center; min-height: 40px; }
  .quem .quem-info a, .quem-info .como-link { display: flex; align-items: center; min-height: 40px; }
  .barra-ia { min-height: 44px; }
  .tabela td > a:not(.botao), .tabela th .ordena { padding: 13px 0; }
  .painel-cab > a, .ir-acoes a { padding: 13px 0; margin: -13px 0; }

  /* 5. A pílula da tabela não quebra em duas linhas ("A / classificar"): a tabela do celular
        espreme as colunas até o mínimo, e com 12 px a quebra ficava mais feia */
  .tabela .pilula { white-space: nowrap; }
}

/* O painel do grupo (05/10/2026): o resultado por produtor, o dono de cada item do A fazer e o link do produtor do filtro. */

/* o resultado por produtor: uma linha por produtor (clicar filtra o painel nele) e a do grupo */
.por-produtor { display: grid; gap: 2px; }
.por-produtor > * {
  display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)) 14px;
  gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; color: var(--tinta); font-size: var(--fs-corpo);
}
.por-produtor .cab { padding-top: 0; padding-bottom: 2px; font-size: var(--fs-legenda); font-weight: 700; color: var(--suave2); }
.por-produtor a:hover { background: #F2F4F7; text-decoration: none; }
.por-produtor a::after { content: '›'; color: var(--suave); font-size: 14px; }
.por-produtor .pp-nome strong { font-weight: 700; }
.por-produtor .pp-nome small { display: block; color: var(--suave); font-size: var(--fs-legenda); font-weight: 500; }
.por-produtor .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.por-produtor .total { margin-top: 4px; border-top: 1px solid var(--linha); border-radius: 0; padding-top: 10px; font-weight: 800; }
.por-produtor .total .v { font-weight: 800; }
.por-produtor-pe { margin: 8px 0 0; font-size: var(--fs-legenda); color: var(--suave); }
.painel-quadro { margin-bottom: 12px; }

/* no A fazer do grupo, de quem é cada item */
.afazer a small { display: block; font-size: var(--fs-legenda); font-weight: 600; color: var(--suave); }

/* o produtor do filtro: o link para a página dele, dentro da frase */
.painel-filtro .ir-pagina { font-size: 13px; font-weight: 700; }

@media (max-width: 760px) {
  .por-produtor > * { grid-template-columns: repeat(3, minmax(0, 1fr)) 10px; gap: 4px 8px; }
  .por-produtor .pp-nome { grid-column: 1 / -1; }
  .por-produtor .cab { display: none; }
  .por-produtor .v { text-align: left; }
  .por-produtor .v::before { content: attr(data-l); display: block; font-size: 12px; font-weight: 700; color: var(--suave2); }
}

/* Tarefas (quadro, cartão aberto e carteira; esboço de 06/10/2026) */

/* a barra do filtro: Minhas e livres · Todas · um funcionário */
.filtro-tarefas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filtro-tarefas .filtros { margin: 0; }
.filtro-tarefas select { width: auto; max-width: 100%; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.filtro-tarefas .suave { font-size: 12.5px; }

/* o quadro: quatro colunas no PC, duas no tablet, abas no celular */
.quadro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.coluna { background: rgba(16, 24, 40, .045); border-radius: var(--raio-cartao); padding: 10px; min-height: 120px; }
.coluna > h2 { display: flex; align-items: center; gap: 8px; margin: 2px 4px 10px; font-size: 13px; font-weight: 800; }
.coluna > h2 .conta { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--texto-2); background: var(--papel); border-radius: 10px; padding: 1px 8px; }
.coluna.solta { outline: 2px dashed var(--acento); outline-offset: -2px; }
.coluna .mais { display: block; text-align: center; font-size: 12px; font-weight: 700; padding: 6px; }

.tarefa { background: var(--papel); border-radius: 12px; box-shadow: var(--sombra-1), 0 0 0 1px rgba(16,24,40,.04); padding: 10px 12px; cursor: grab; }
.tarefa + .tarefa { margin-top: 8px; }
.tarefa.livre { box-shadow: inset 0 0 0 1.5px var(--linha2); }
.tarefa-produtor { font-size: 10.5px; font-weight: 700; color: var(--texto-3); letter-spacing: .02em; overflow-wrap: anywhere; }
.tarefa-titulo { display: block; margin: 2px 0 8px; font-size: 13.5px; font-weight: 700; color: var(--tinta); line-height: 1.3; }
.tarefa-titulo:hover { text-decoration: underline; }
.tarefa-pe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--texto-3); }
.tarefa-pe .iniciais, .tarefa-pe .botao { margin-left: auto; }
.tarefa-pe .botao.pequeno { padding: 4px 10px; font-size: 12px; }
.tarefa-origem { display: block; margin-top: 6px; font-size: 11px; color: var(--info-texto); font-weight: 600; }
.etiqueta { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--cinza-claro); color: var(--texto-2); }
.prazo.vencido { color: var(--critica-texto); font-weight: 700; }
.prazo.perto { color: var(--atencao-texto); font-weight: 700; }
.iniciais { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff; background: var(--tinta); flex: none; }
.iniciais.al { background: #1E6B34; } .iniciais.jp { background: #175CD3; }
.iniciais.bc { background: #B54708; } .iniciais.cm { background: #6941C6; }

.abas-quadro { display: none; }

@media (max-width: 1100px) { .quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  /* no celular, uma coluna por vez; sem script, as quatro ficam uma embaixo da outra */
  .abas-quadro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--papel);
    border-radius: 14px; padding: 4px; box-shadow: var(--sombra); margin-bottom: 10px; }
  .abas-quadro button { border: 0; background: none; border-radius: 10px; padding: 6px 2px; font: inherit; font-size: 11.5px;
    font-weight: 700; color: var(--texto-2); line-height: 1.2; min-width: 0; }
  .abas-quadro button b { display: block; font-size: 15px; color: var(--tinta); }
  .abas-quadro button.ativa { background: var(--tinta); color: #fff; }
  .abas-quadro button.ativa b { color: #fff; }
  .quadro { grid-template-columns: minmax(0, 1fr); }
  .com-abas .coluna:not(.ativa) { display: none; }
  .com-abas .coluna > h2 { display: none; }
  .coluna { padding: 8px; }
}

/* o cartão aberto */
.cartao-aberto { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; }
.cartao-aberto h3 { font-size: 13px; font-weight: 800; margin: 18px 0 8px; }
.cartao-aberto .lado { display: grid; gap: 12px; align-content: start; background: var(--superficie); border-radius: 14px; padding: 14px; }
.cartao-aberto .lado .campo-com-botao select { min-width: 0; }
.conversa { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.conversa li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.conversa li p { margin: 2px 0 0; }
.conversa li small { color: var(--texto-3); font-size: 11px; font-weight: 600; }
.historico { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--linha); display: grid; gap: 6px; font-size: 12.5px; color: var(--texto-2); }
.historico small { color: var(--texto-3); font-weight: 600; }
.comentar { display: flex; gap: 8px; margin-top: 10px; }
.comentar input { flex: 1; min-width: 0; }
@media (max-width: 760px) { .cartao-aberto { grid-template-columns: minmax(0, 1fr); } .cartao-aberto .lado { order: -1; } }

/* a carteira: o botão e o "Passar para…" lado a lado; o resumo por funcionário */
.tabela td.botoes { white-space: nowrap; }
.tabela td.botoes select { width: auto; display: inline-block; margin-left: 6px; }
.equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 8px; }
.equipe > div { display: flex; gap: 10px; align-items: center; background: var(--papel); border-radius: 14px; box-shadow: var(--sombra); padding: 12px; font-size: 12.5px; }
.equipe strong { display: block; font-size: 13.5px; }
.equipe small { color: var(--texto-3); }

/* o "Mover para…" do cartão: abre sem script; o formulário é o mesmo que o arrastar envia */
.tarefa .mover { margin-top: 6px; font-size: 11.5px; }
.tarefa .mover summary { cursor: pointer; color: var(--texto-3); font-weight: 700; }
.tarefa .mover form { display: flex; gap: 6px; margin-top: 4px; }
.tarefa .mover select { min-width: 0; flex: 1; padding-top: 4px; padding-bottom: 4px; font-size: 12px; }
.tarefa.arrastando { opacity: .5; }
.tarefa-pe form { margin-left: auto; }

/* Tarefas em lote e o "Ver a tarefa" da pendência */
.modelos-lote { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.lote-lista { border: 1px solid var(--linha); border-radius: 12px; max-width: 720px; }
.lote-barra { display: flex; gap: 8px; padding: 8px; border-bottom: 1px solid var(--linha); }
.lote-barra input { flex: 1; min-width: 0; }
.lote-lista ul { list-style: none; margin: 0; padding: 4px 10px; max-height: 320px; overflow-y: auto; }
.lote-lista li { padding: 4px 0; }
.lote-lista li[hidden] { display: none; }
.tarefa-ja { font-size: 11.5px; font-weight: 700; margin-left: 6px; }