/* ================================================================ o Financeiro (118 a 142) */
/* As pecas que entraram em 19/08 com a lista de contas, o fluxo e os resultados.
 *
 * TODAS SAO ESCOPADAS OU COMPOSTAS. Nenhuma classe de uma palavra declara `font-size` solta —
 * a lista de armadilhas do `test_catalogo_de_medidas` ja tem vinte nomes, e cada nome novo
 * ali e uma peca que pode roubar a fonte de outra sem ninguem ver. */

/* Os quatro numeros do topo da lista. `auto-fit` com largura minima, e nao quatro colunas
 * fixas: na tela de 1536px em 125% sobram ~688px uteis, e quatro colunas fixas espremeriam o
 * valor ate quebrar a linha no meio do numero. */
.numeros-do-topo {
  display: grid; gap: var(--f3); margin-bottom: var(--f4);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.numerao {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio);
  padding: 12px 16px; display: flex; flex-direction: column; gap: 2px;
}
.numerao .rotulo { font-size: var(--texto-pp); color: var(--muted); }
.numerao b { font-size: var(--texto-g); color: var(--ink); font-variant-numeric: tabular-nums; }
.numerao.ok b { color: var(--ok); }
.numerao.aviso b { color: var(--aviso); }
.numerao.ruim b { color: var(--ruim); }

/* A barra de filtros. `margin-bottom` e nao `gap` no pai: as duas barras nascem irmas de uma
 * tabela, e um `gap` no bloco somaria a esta margem e dobraria o vao — o defeito de
 * espacamento que ele ja pegou duas vezes. */
.linha.filtros { align-items: center; margin-bottom: var(--f2); }
.linha.filtros:last-of-type { margin-bottom: var(--f4); }

/* O grafico do ano. Barra desenhada com altura em porcentagem dentro de um trilho de altura
 * fixa — sem biblioteca, e sem `<canvas>`: doze meses nao justificam nem uma coisa nem outra. */
.grafico-do-ano {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--f2);
  align-items: end; padding-top: var(--f3);
}
.mes-do-ano { display: flex; flex-direction: column; align-items: center; gap: var(--f1); }
.mes-do-ano .colunas-do-mes {
  display: flex; gap: 3px; align-items: flex-end; height: 120px; width: 100%;
  justify-content: center;
}
/* ALTURA MINIMA DE 2px: um mes com movimento pequeno mas real desenharia zero pixel, e "quase
 * nada" e "nada" contam historias diferentes. */
.mes-do-ano .colunas-do-mes span { width: 40%; min-height: 2px; border-radius: 3px 3px 0 0; }
.mes-do-ano .colunas-do-mes .sobe { background: var(--ok); }
.mes-do-ano .colunas-do-mes .desce { background: var(--ruim); }
.mes-do-ano small { font-size: var(--texto-selo); color: var(--muted); }
.mes-do-ano.melhor small { color: var(--roxo); font-weight: 700; }

/* O bloco de um projeto na tela de Cadastros. */
.bloco-do-projeto {
  border: 1px solid var(--line); border-radius: var(--raio);
  padding: var(--f3); margin-bottom: var(--f3);
}
.bloco-do-projeto:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- o botao de copiar (item 148) */
/* Ele mora DENTRO de uma celula de tabela, ao lado de um `<code>` de 64 caracteres. Por isso
 * nao usa nenhum dos tres tamanhos de botao do catalogo: 32px de altura ali dentro empurraria
 * a linha inteira e desalinharia a coluna do cabecalho -- e alinhamento de coluna e a primeira
 * coisa que ele pega num print.
 *
 * A EXCECAO ESTA DECLARADA AQUI, que e' a regra da casa: quem quiser mudar altura de botao
 * muda a moldura; quem precisar de outra altura escreve por que, com nome. */
.btn-copiar {
  width: var(--alto-copiar); height: var(--alto-copiar);
  margin-left: 6px; padding: 0; flex: none;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--muted); cursor: pointer;
  line-height: 1; vertical-align: middle;
}
.btn-copiar:hover { color: var(--roxo); border-color: var(--roxo); }

/* ========================================================== O MANUAL E A AJUDA DA TELA (95)
 *
 * Duas pecas para o MESMO texto: o "?" na barra azul, que abre a gaveta de leitura, e a tela
 * do Manual, que mostra tudo. Nenhuma medida nova: altura vem do `--alto-*`, letra da escala
 * `--texto-*` e folga da escala `--f*`.
 */

/* O "?" DA BARRA AZUL. Redondo, e do tamanho do botao so-de-icone -- a mesma peca que o resto
 * da barra usa. Ele NAO e' `.btn`: nao e' acao da tela, e vestir de botao principal poria a
 * ajuda competindo com "Novo lancamento" pelo olho. */
.gg-ajuda {
  flex: none;
  width: var(--alto-mini); height: var(--alto-mini);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06); color: var(--no-menu-fraco);
  font: 700 var(--texto-p) Manrope, system-ui, sans-serif; cursor: pointer;
}
.gg-ajuda:hover:not(:disabled) { background: rgba(255, 255, 255, .14); color: #fff; }

/* A GAVETA DE LEITURA. Mesma moldura da de formulario -- o que muda e' o texto correr como
 * texto, e nao como campo: linha mais alta, e as listas com marcador. */
.gaveta.ajuda .gv-corpo { line-height: 1.6; }
.gaveta.ajuda h4 {
  margin: var(--f5) 0 var(--f2); font-size: var(--texto-selo);
  text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
}
.gaveta.ajuda ul { margin: 0; padding-left: var(--f5); }
.gaveta.ajuda li { margin-bottom: var(--f2); }
.gaveta.ajuda .rotulo { margin-top: var(--f5); display: block; color: var(--muted); }

/* A BUSCA DO MANUAL. Larga de proposito: quem procura ajuda digita uma frase ("nao consigo
 * parcelar"), e nao uma palavra. */
.manual-busca { margin-bottom: var(--f4); }
.manual-busca input { width: 100%; }
/* O MANUAL EM DUAS COLUNAS (22/10/2026, pedido do Henrique): o índice das telas à esquerda,
 * um verbete por vez à direita. No celular, o índice vem em cima e rola sozinho. */
.manual-duas { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--f4); align-items: start; }
.manual-indice {
  position: sticky; top: var(--f3);
  max-height: calc(100vh - 160px); overflow-y: auto;
  padding: var(--f3); background: var(--surface);
  border: 1px solid var(--line); border-radius: 15px;
}
.manual-area + .manual-area { margin-top: var(--f3); }
.manual-indice .manual-area-titulo {
  font-size: var(--texto-selo); font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--muted); /* cinza */
  padding: 0 var(--f2) var(--f1);
}
.manual-indice .manual-item {
  display: flex; align-items: center; gap: var(--f2); width: 100%;
  padding: 7px var(--f2); border: 0; border-radius: 9px; background: transparent;
  color: var(--ink); font: inherit; font-size: var(--texto-p); text-align: left; cursor: pointer;
}
.manual-item:hover { background: var(--soft); }
.manual-item[aria-current="true"] { background: var(--ok-soft); color: var(--ok); font-weight: 700; } /* verde */
.manual-item-icone { width: 18px; height: 18px; flex: none; display: grid; place-items: center; color: var(--muted); }
.manual-item-icone svg { width: 16px; height: 16px; }
.manual-item[aria-current="true"] .manual-item-icone { color: var(--ok); }
.manual-item[hidden], .manual-area[hidden], .manual-verbete[hidden], .manual-nada[hidden] { display: none; }
/* O MANUAL DE PRIMEIRA LINHA (22/10/2026, aprovado pelo Henrique): a faixa de busca com a
 * cor da marca, e cada verbete como artigo — título grande, passo a passo numerado, a caixa
 * "Bom saber" e anterior / próximo. */
.manual-hero {
  margin-bottom: var(--f4); padding: var(--f5);
  border-radius: 15px; background: var(--sag-green-dark, #0d3f36); /* verde-escuro da marca */
}
.manual-hero > b { display: block; margin-bottom: var(--f3); color: #fff; font-size: var(--texto-contador); font-weight: 800; }
.manual-hero .manual-busca { margin: 0; }
.manual-hero .manual-busca input {
  height: 44px; border-radius: 999px; border: 0; padding: 0 var(--f4);
  background: #fff; color: #17201e; font-size: var(--texto-m);
}
.manual-leitura .manual-artigo {
  padding: var(--f5) var(--f6); background: var(--surface);
  border: 1px solid var(--line); border-radius: 15px; color: var(--ink);
}
.manual-artigo .manual-caminho { color: var(--muted); font-size: var(--texto-pp); }
.manual-artigo .manual-titulo { margin: var(--f1) 0 var(--f2); font-size: var(--texto-gg); font-weight: 800; letter-spacing: -.3px; }
.manual-artigo .manual-abertura { margin: 0 0 var(--f4); color: var(--muted); font-size: var(--texto-g); line-height: 1.55; }
.manual-artigo .manual-ir { margin-bottom: var(--f5); }
.manual-artigo .manual-ir .btn { display: inline-flex; text-decoration: none; }
.manual-artigo .manual-subtitulo { margin: 0 0 var(--f3); font-size: var(--texto-g); font-weight: 800; }
.manual-artigo .manual-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--f3); }
.manual-artigo .manual-passos li { display: flex; gap: var(--f3); align-items: flex-start; font-size: var(--texto-m); line-height: 1.55; }
/* AS ABAS DA TELA NO ARTIGO: atalhos em pílula e uma seção por aba, com um fio entre elas. */
.manual-artigo .manual-atalhos { display: flex; flex-wrap: wrap; gap: var(--f2); margin: var(--f4) 0 var(--f2); }
.manual-artigo .manual-atalho {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--texto-p); cursor: pointer;
}
.manual-artigo .manual-atalho:hover { border-color: var(--ok); color: var(--ok); } /* verde */
.manual-artigo .manual-aba { padding-top: var(--f4); margin-top: var(--f4); border-top: 1px solid var(--line); scroll-margin-top: var(--f5); }
.manual-artigo .manual-numero {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--ok-soft); color: var(--ok); /* verde */
  font-size: var(--texto-pp); font-weight: 800;
}
.manual-artigo .manual-bom-saber {
  margin-top: var(--f5); padding: var(--f4);
  border: 1px solid var(--aviso); border-radius: 12px;
  background: var(--aviso-soft); color: var(--ink); /* âmbar */
}
.manual-artigo .manual-bom-saber b { display: block; margin-bottom: var(--f2); color: var(--aviso); font-weight: 800; }
.manual-artigo .manual-bom-saber ul { margin: 0; padding-left: var(--f4); line-height: 1.6; font-size: var(--texto-p); }
.manual-artigo .manual-bom-saber li + li { margin-top: var(--f1); }
.manual-artigo .manual-pe {
  display: flex; justify-content: space-between; align-items: center; gap: var(--f3);
  margin-top: var(--f5); padding-top: var(--f4); border-top: 1px solid var(--line);
  color: var(--muted); font-size: var(--texto-p);
}
.manual-artigo .manual-pe a { color: var(--ok); font-weight: 700; text-decoration: none; }
.manual-artigo .manual-setas { display: flex; justify-content: space-between; gap: var(--f3); margin-top: var(--f3); }
.manual-artigo .manual-seta {
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--texto-p); cursor: pointer;
}
.manual-artigo .manual-seta:hover { background: var(--soft); }

@media (max-width: 650px) {
  .manual-leitura .manual-artigo { padding: var(--f4); }
  .manual-artigo .manual-titulo { font-size: var(--texto-contador); }
  .manual-duas { grid-template-columns: minmax(0, 1fr); }
  .manual-indice { position: static; max-height: 240px; }
}

/* AS DUAS COLUNAS DO VERBETE: a receita e o que custa caro. Lado a lado porque sao leituras
 * diferentes -- uma se segue, a outra se consulta. Empilham sozinhas quando nao cabem. */
.manual-corpo {
  /* UMA COLUNA (22/10/2026): lado a lado, os passos e os cuidados ficavam estranhos de ler.
   * Primeiro o que se faz, embaixo o que custa caro. */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--f4);
  margin-top: var(--f4);
}
.manual-corpo h4 {
  margin: 0 0 var(--f2); font-size: var(--texto-selo);
  text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
}
.manual-corpo ul { margin: 0; padding-left: var(--f4); line-height: 1.55; }
.manual-corpo li { margin-bottom: var(--f2); }
/* O QUE CUSTA CARO GANHA A COR DE AVISO na marca, e nao no texto: o texto inteiro em ambar
 * viraria uma parede amarela, e parede nao tem hierarquia. */
.manual-cuidados li::marker { color: var(--aviso); }

/* ========================================================= OS COMPONENTES DO CATALOGO (202)
 *
 * A auditoria de 21/08/2026: as 662 pecas do mapa cabem em 15 componentes. Tres delas nao
 * tinham regra nenhuma na folha — o rotulo (grupo de opcoes), a sanfona e o par de leitura.
 * Elas nascem aqui, ja na pele azul Glass, e cada uma tem fabrica no `telas.js`.
 * Nenhuma medida nova: altura do `--alto-*`, letra da escala `--texto-*`, folga da `--f*`. */

/* O ROTULO (label group) — a etiqueta e as pastilhas de escolha, num componente so. E o
 * MESMO desenho das secoes de Configuracoes (`.gg-secoes`): pastilha ativa em roxo-soft com
 * fio de luz. Nao reusa `.gg-secoes` porque aquela e' navegacao entre secoes; esta escolhe um
 * VALOR (periodo, projeto) e fica dentro da tela. */
.grupo-de-opcoes .rotulo { display: block; margin-bottom: 6px; }
.grupo-de-opcoes .opcoes { display: flex; gap: 6px; flex-wrap: wrap; }
.grupo-de-opcoes .opcoes button {
  height: var(--alto-aba); padding: 0 14px; border-radius: var(--gg-raio-item);
  border: 1px solid transparent; background: none; color: var(--muted);
  font-size: var(--texto-p); font-family: inherit; cursor: pointer;
}
.grupo-de-opcoes .opcoes button:hover:not(:disabled) { background: rgba(255, 255, 255, .7); color: var(--ink); }
.grupo-de-opcoes .opcoes button[aria-current="true"] {
  background: var(--roxo-soft); border-color: rgba(112, 88, 232, .22);
  color: #312a70; font-weight: 600; box-shadow: inset 0 1px 0 #fff;
}

/* A SANFONA (accordion) — o bloco que abre e fecha com a seta que gira. O desenho nasceu no
 * `.perfil-link` e foi batizado componente em 21/08; o perfil continua com a versao sem
 * moldura dele, inventariada no fiscal. */
.sanfona {
  border: 1px solid var(--gg-borda); border-radius: var(--gg-raio-item);
  background: var(--surface); box-shadow: inset 0 1px 0 var(--gg-brilho);
}
.sanfona + .sanfona { margin-top: var(--f2); }
.sanfona summary {
  list-style: none; cursor: pointer; padding: 12px var(--f4);
  font-weight: 600; font-size: var(--texto-m);
  display: flex; align-items: center; gap: var(--f2);
}
.sanfona summary::-webkit-details-marker { display: none; }
.sanfona summary::before { content: '›'; transition: transform .16s; display: inline-block; color: var(--muted); }
.sanfona[open] summary::before { transform: rotate(90deg); }
.sanfona .miolo { padding: 0 var(--f4) 14px; font-size: var(--texto-p); color: var(--ink-2, #5e657d); }

/* O ROTULO DE BLOCO — o nome de um grupo de linhas dentro de um cartao (os blocos da
 * tabela do dia). A medida mora AQUI, e nao num style= da tela: o fiscal do catalogo
 * reprovou a primeira versao, e com razao. */
.rotulo-do-bloco { display: block; margin: 14px 0 4px; }