fica só com o filete. O link leva o cartão de leitura junto, então ele responde ao
ponteiro E ao teclado, o que a linha sem link só fazia para o ponteiro. */
.fh-ranking__item--link { display: block; padding: 0; }
.fh-ranking__link { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto; gap: var(--s-2) var(--s-4); align-items: center; padding: var(--s-2) 0; color: inherit; text-decoration: none; border-radius: var(--radius-control); }
.fh-ranking__link:hover .fh-ranking__label { color: var(--ink-strong); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.fh-ranking__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 599px) { .fh-ranking__item, .fh-ranking__link { grid-template-columns: minmax(0, 1fr) auto; } .fh-ranking__item--link { grid-template-columns: none; } .fh-ranking__track { grid-column: 1 / -1; order: 3; } }
/* ---- Leitura dos gráficos (guia, pontos, cartão) ---- */
.fh-hov { position: relative; outline-offset: 6px; }
.fh-hov__ui { position: absolute; inset: 0; pointer-events: none; }
.fh-hov__guia { position: absolute; width: 1px; background: var(--zero); transform: translateX(-0.5px); }
.fh-hov__ponto { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--cor, var(--oxford)); border: 2px solid var(--paper); transform: translate(-50%, -50%); box-shadow: 0 1px 4px -1px rgba(21, 47, 77, 0.4); }
.fh-hov__card { position: absolute; min-width: 12rem; max-width: 18rem; padding: var(--s-3) var(--s-4); border-radius: var(--radius-control); background: var(--paper-raised); box-shadow: var(--shadow-etiqueta); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink); display: grid; gap: var(--s-1); }
.fh-hov__rotulo { color: var(--ink-strong); font-weight: var(--fw-semibold); margin-bottom: 2px; }
.fh-hov__linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; }
.fh-hov__cor { width: 10px; height: 3px; border-radius: 2px; background: var(--cor, var(--oxford)); }
.fh-hov__nome { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-hov__linha > .fh-hov__nome:first-child { grid-column: 1 / 3; } /* linha sem amostra de cor: o nome ocupa as duas primeiras colunas e o valor fica na borda */
.fh-hov__val { color: var(--ink-strong); }
/* Cartão de um ITEM de HTML: fica fixo no quadro da janela, nunca dentro do item, e assim
sobrevive ao `overflow: auto` da tabela e da lista, que recortariam um cartão absoluto. */
.fh-hov__card--item { position: fixed; z-index: var(--z-overlay); pointer-events: none; }
.fh-hov__card--item .fh-hov__rotulo { white-space: normal; } /* o rótulo do ERP vem inteiro: aqui ele quebra, não corta */
/* dentro do cartão do painel (240 px) o cartão de leitura não pode exigir 12rem: encolhe até o que cabe
e o nome da série quebra em vez de virar "acumu…" */
.fh-cartao .fh-hov__card { min-width: 0; max-width: calc(100% - 8px); }
.fh-cartao .fh-hov__nome { white-space: normal; }
[data-hov-item] { outline-offset: 2px; }
/* Rosca: a fatia sob o ponteiro engorda (a grossura vem do JS, que conhece a do desenho) */
.fh-rosca { outline-offset: 6px; }
.fh-rosca .fatia { transition: stroke-width var(--t-state) var(--ease); } /* impeccable-disable-line layout-transition: stroke-width de fatia SVG repinta só o SVG, sem reflow do documento */
/* O cartão do painel é um link e a leitura mora dentro dele: a camada nunca come o clique
(`.fh-hov__ui` não recebe ponteiro) e o cartão em leitura passa por cima do vizinho. */
.fh-cartao:hover, .fh-cartao:focus-within { z-index: 1; }
/* ---- Desenho de gráficos (Task 18 preenche --len) ---- */
.draw-in .serie { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); animation: fh-draw var(--t-draw) var(--ease) forwards; }
/* série tracejada: entra por opacidade, nunca por dashoffset (a animação de desenho zerava o tracejado para sempre) */
.draw-in .serie--tracejada { stroke-dasharray: var(--dash, 5 5); stroke-dashoffset: 0; opacity: 0; animation: fh-fade var(--t-draw) var(--ease) forwards; animation-delay: calc(var(--t-draw) * 0.4); }
.draw-in .area { opacity: 0; animation: fh-fade var(--t-draw) var(--ease) forwards; animation-delay: calc(var(--t-draw) * 0.5); }
.grow-in .barra { transform-origin: center bottom; transform: scaleY(0); animation: fh-grow var(--t-draw) var(--ease) forwards; animation-delay: calc(var(--i, 0) * 24ms); }
@keyframes fh-draw { to { stroke-dashoffset: 0; } }
@keyframes fh-fade { to { opacity: 1; } }
@keyframes fh-grow { to { transform: scaleY(1); } }
/* ---- Revelação (só onde a direção pede; landing e figuras) ---- */
[data-reveal] { opacity: 0; transform: translateY(12px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.48s var(--ease), transform 0.48s var(--ease); transition-delay: calc(var(--i, 0) * 40ms); }
html:not(.js) [data-reveal] { opacity: 1; transform: none; }
/* ---- View transitions entre folhas/telas ---- */
::view-transition-old(app-main), ::view-transition-new(app-main) { animation-duration: var(--t-folha); animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1; transform: none; }
.draw-in .serie { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.draw-in .serie--tracejada { stroke-dasharray: var(--dash, 5 5); opacity: 1; animation: none; }
.draw-in .area { opacity: 1; animation: none; }
.grow-in .barra { transform: none; animation: none; }
.fh-track__fill { transition: none; }
}
/* ---- Barra de abas (v2): grupos + subabas sob a faixa; sempre visível ---- */
/* A barra quebra em duas linhas antes de espremer as abas: com muitas subabas (o cliente de
mais módulos) as ações vão para a linha de baixo, e nenhuma aba fica atrás do degradê só
porque a folha ganhou dois botões. `min(100%, max-content)` é quem decide: enquanto a
tira couber inteira ela não encolhe; quando não couber, ela toma a linha e rola por dentro. */
.fh-barra { position: sticky; top: var(--faixa-h); z-index: var(--z-abas); display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s-5); row-gap: 0; min-height: var(--barra-h); padding: 0 var(--gutter); background: var(--ground); box-shadow: 0 1px 0 var(--rule); }
.fh-barra__grupos, .fh-barra__subabas { display: flex; align-items: center; gap: var(--s-1); min-width: min(100%, max-content); overflow-x: auto; scrollbar-width: none; }
.fh-barra__subabas { margin-right: auto; }
.fh-barra__grupos::-webkit-scrollbar, .fh-barra__subabas::-webkit-scrollbar { display: none; }
/* a faixa que não cabe some em degradê na ponta: aviso de que há mais (a classe vem do bind, medindo scrollWidth) */
.fh-barra__grupos.is-estourando, .fh-barra__subabas.is-estourando { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 28px; }
.fh-barra__grupo { position: relative; padding: 0 var(--s-3); line-height: var(--barra-h); font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.fh-barra__grupo:hover { color: var(--ink-strong); }
.fh-barra__grupo.is-on { color: var(--ink-strong); box-shadow: inset 0 -3px 0 var(--gold); }
/* subabas coladas ao grupo ativo, no mesmo corpo de texto; um filete de 1px as separa dos grupos */
.fh-barra__subabas { padding-left: var(--s-4); border-left: 1px solid var(--rule); }
.fh-barra__subaba { padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--fs-15); color: var(--ink); text-decoration: none; white-space: nowrap; border: 1px solid transparent; }
.fh-barra__dica { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-muted); white-space: nowrap; } /* quem empurra o fim da barra para a direita é o margin-right:auto das subabas */
.fh-barra__dica .fh-icon { width: 14px; height: 14px; }
/* As duas ações da folha (personalizar, apresentar) no fim da barra: quietas, à distância de
um passo entre si, longe das abas. A dica some no estreito e a primeira ação herda o empurrão. */
.fh-barra__acao { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 32px; padding: 0 var(--s-2); border-radius: var(--radius-control); color: var(--ink-soft); font-size: var(--fs-12); letter-spacing: var(--track-caps); text-transform: uppercase; white-space: nowrap; transition: color var(--t-state) var(--ease), background-color var(--t-state) var(--ease); }
.fh-barra__acao + .fh-barra__acao { margin-left: calc(var(--s-2) - var(--s-5)); }
.fh-barra__acao:hover { color: var(--ink-strong); background: var(--ctl-secondary-hover); }
.fh-barra__acao:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.fh-barra__acao .fh-icon { width: 16px; height: 16px; }
@media (max-width: 1023px) {
.fh-barra__dica { display: none; }
.fh-barra__acao span { display: none; }
/* aqui as subabas já ocupam a linha inteira, então quem empurra as ações é a margem delas
(com `flex-end` a tira de grupos também iria para a direita quando sobrasse espaço) */
.fh-barra { justify-content: flex-start; }
.fh-barra__acao:first-of-type { margin-left: auto; }
}
.fh-barra__subaba:hover { background: var(--paper); border-color: var(--rule); }
.fh-barra__subaba.is-on { background: var(--tab-active); color: var(--tab-active-ink); border-color: var(--tab-active); box-shadow: 0 0 0 1px var(--tab-active); border-color: transparent; } /* sem borda desenhada: em x fracionário a borda de 1px virava borda dupla na rasterização */
.fh-barra a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (max-width: 1023px) {
.fh-barra { flex-wrap: wrap; gap: 0 var(--s-4); padding-bottom: var(--s-2); }
.fh-barra__subabas { margin-left: 0; width: 100%; order: 3; }
}
/* ---- Ícone de informação (v2): o método sai da folha e fica atrás do "i" ---- */
.fh-info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 4px; }
/* 24 px é o alvo mínimo (WCAG 2.5.8); o desenho continua sendo o ícone de 16 px, com a folga
por dentro, então a linha não muda de altura. */
.fh-info__btn { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--ink-soft); background: transparent; }
.fh-info__btn .fh-icon { width: 16px; height: 16px; }
.fh-info__btn:hover, .fh-info__btn:focus-visible, .fh-info.is-open .fh-info__btn { color: var(--gold-text); }
.fh-info__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fh-info__tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: min(32ch, 80vw); padding: var(--s-2) var(--s-3); border-radius: var(--radius-control); background: var(--capa); color: var(--capa-ink); font-size: var(--fs-12); line-height: var(--lh-12); letter-spacing: 0; text-transform: none; font-weight: var(--fw-regular); box-shadow: var(--shadow-etiqueta); z-index: var(--z-overlay); white-space: normal; }
.fh-info__tip::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--capa); }
/* blocos inteiros dentro de um detalhe recolhido: sem filete duplo no topo */
.fh-detalhe__corpo .fh-bloco { padding: var(--s-5) 0; }
.fh-detalhe__corpo .fh-bloco:first-child { border-top: 0; padding-top: var(--s-2); }
/* bloco inteiro dentro de um detalhe: o título do bloco fica só para leitores de tela (o summary já o diz) */
.fh-detalhe__corpo .fh-bloco > .fh-bloco__cabeca > .fh-bloco__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---- Gaveta (dialog à direita; Personalizar na Onda A2, lançamentos na Onda B) ---- */
.fh-drawer-fundo { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(21, 47, 77, 0.32); opacity: 0; transition: opacity var(--t-folha) var(--ease); }
.fh-drawer-fundo.is-in { opacity: 1; }
.fh-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--paper); box-shadow: var(--shadow-folha); display: grid; grid-template-rows: auto minmax(0, 1fr); transform: translateX(24px); transition: transform var(--t-folha) var(--ease); outline: none; }
.fh-drawer-fundo.is-in .fh-drawer { transform: none; }
.fh-drawer__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); }
.fh-drawer__titulo { font-size: var(--fs-19); line-height: var(--lh-19); }
.fh-drawer__fechar .fh-icon { width: 18px; height: 18px; }
.fh-drawer__corpo { overflow: auto; padding: var(--s-5); }
body.is-drawer { overflow: hidden; }
/* ---- Gaveta Personalizar: a lista das folhas e a dos cartões, e a lista de atalhos ---- */
.fh-pers { display: grid; gap: var(--s-6); }
.fh-pers__grupo { display: grid; gap: var(--s-2); }
.fh-pers__titulo { font-size: var(--fs-15); line-height: var(--lh-15); color: var(--ink-strong); }
.fh-pers__lista { margin-top: var(--s-2); }
.fh-pers__item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--rule-soft); }
.fh-pers__item:first-child { border-top: 0; }
.fh-pers__mostrar { min-width: 0; }
.fh-pers__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-strong); }
.fh-pers__item--fixo .fh-pers__nome { color: var(--ink-soft); }
.fh-pers__setas { display: inline-flex; gap: var(--s-1); flex: none; }
.fh-pers__seta { min-width: 32px; padding-inline: var(--s-2); }
.fh-pers__seta .fh-icon { width: 16px; height: 16px; }
/* seta na ponta da lista: apagada, não preenchida (o fundo cheio do botão desligado lia-se
como destaque, o contrário do que ela diz) */
.fh-pers__seta[disabled] { color: var(--ctl-disabled-ink); background: transparent; border-color: transparent; }
.fh-pers__rodape { display: grid; gap: var(--s-2); justify-items: start; padding-top: var(--s-4); border-top: 1px solid var(--rule); }
/* ---- Gaveta "Imprimir" (Onda C, por partes na Onda D, transversal na Onda E) ----
No topo, os dois ATALHOS de marcação, em botão: eles escrevem a escolha e saem de cena, e
por isso não são mais rádios - rádio promete um estado que continua valendo, e depois do
primeiro clique numa caixa da árvore ele estaria mentindo. Abaixo, a ÁRVORE da pasta
INTEIRA (cada folha com as partes dela), a PRÉVIA do papel composto e, por último, o que vai
para o papel sem ser perguntado de novo: a janela e a personalização, decididas noutro
lugar. */
/* `min-width: 0` nos filhos, e não é detalhe: item de grade nasce com `min-width: auto`, que
o deixa crescer até caber o CONTEÚDO. A prévia carrega o papel na largura real da página
(703 px), então sem esta linha a caixa dela media 704 px dentro de uma gaveta de 480, a
escala que o compositor calcula a partir dessa medida dava 1, e a capa saía cortada na
margem direita da gaveta: a prévia mostrava menos papel do que o papel tem, que é o oposto
do que ela existe para fazer. */
.fh-imp { display: grid; gap: var(--s-5); min-width: 0; }
.fh-imp > * { min-width: 0; }
.fh-imp__pre { display: grid; gap: var(--s-2); }
.fh-imp__legenda { display: block; padding: 0; font-size: var(--fs-12); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft); }
.fh-imp__pre-botoes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.fh-imp__pre-nota { margin: 0; }
.fh-imp__declara { display: grid; gap: var(--s-2); }
.fh-imp__declara li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; font-size: var(--fs-12); color: var(--ink); }
.fh-imp__acoes { display: flex; justify-content: flex-end; padding-top: var(--s-4); border-top: 1px solid var(--rule); }
/* A árvore: TODAS as folhas da pasta, cada uma com as partes dela numa lista que abre. A folha
tem caixa PRÓPRIA e não é a soma das partes: a folha indisponível não publica parte nenhuma
(é um aviso e mais nada), e sem caixa própria ela iria para o papel sempre.
A parte SEM id entra sem caixa e dita ("sempre no papel"): ela vai de qualquer jeito, e
esconder isso do leitor faria o papel sair com conteúdo que ele não pediu e não viu listado. */
.fh-imp__arvore { display: grid; }
.fh-imp__folha { display: grid; gap: var(--s-1); padding: var(--s-1) 0; border-top: 1px solid var(--rule-soft); }
.fh-imp__folha:first-child { border-top: 0; }
.fh-imp__folha-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 36px; }
.fh-imp__folha-nome { font-size: var(--fs-15); line-height: var(--lh-15); font-weight: var(--fw-semibold); color: var(--ink-strong); }
/* O botão que abre a lista é também o ESTADO da folha: quem não a abre precisa saber, olhando
a linha, quanto daquela folha vai para o papel. */
.fh-imp__abrir { display: inline-flex; flex: none; align-items: center; gap: var(--s-2); min-height: 32px; padding: 0 var(--s-2); border: 0; border-radius: var(--radius-control); background: none; font: inherit; font-size: var(--fs-12); color: var(--ink-soft); cursor: pointer; }
.fh-imp__abrir:hover { color: var(--gold-text); }
.fh-imp__abrir:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fh-imp__abrir .fh-icon { width: 16px; height: 16px; transition: transform var(--t-state) var(--ease); }
.fh-imp__abrir[aria-expanded="true"] .fh-icon { transform: rotate(180deg); }
.fh-imp__partes { display: grid; padding-left: var(--s-6); }
.fh-imp__parte { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 1px 0; border-top: 1px solid var(--rule-soft); }
.fh-imp__parte:first-child { border-top: 0; }
.fh-imp__caixa { display: inline-flex; align-items: center; gap: var(--s-3); min-width: 0; min-height: 30px; cursor: pointer; }
.fh-imp__caixa input { flex: none; accent-color: var(--oxford); width: 16px; height: 16px; }
.fh-imp__caixa:has(input:disabled) { cursor: default; color: var(--ink-muted); }
.fh-imp__caixa:has(input:disabled) .fh-imp__parte-nome { color: var(--ink-muted); }
.fh-imp__parte-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-strong); }
.fh-imp__parte--fixa .fh-imp__parte-nome { color: var(--ink-soft); }
/* A prévia: o papel COMPOSTO, na largura real da página A4 útil e reduzido pela escala que o
compositor mede. É ela que transforma "4 páginas" em "este quadro cai partido na 3" - no
frontend anterior foi a prévia que revelou um cartão sangrando 254 px para fora da folha,
que nenhuma medida de largura de página pegava. ROLA em vez de recortar: é uma janela sobre
um documento comprido, e recortar faria o que está abaixo parecer que não existe.
Quem rola é ESTA caixa, e o `inert` mora no papel lá dentro. Estava ao contrário: o `inert`
na caixa tira o subárvore inteiro do teste de acerto do ponteiro, então a roda do mouse sobre
a prévia nunca chegava nela e rolava a gaveta atrás - a prévia ficava presa na primeira
página, que é dizer que ela não existe. O `inert` continua necessário no papel (ele carrega
botões e dobras que são da TELA, não da prévia); o que muda é onde ele fica. */
.fh-imp__previa { position: relative; overflow: auto; max-height: 46vh; border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--paper); overscroll-behavior: contain; }
.fh-imp__previa:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fh-imp__tela { position: relative; width: 100%; height: var(--previa-altura); }
/* O papel da prévia é um QUADRO de 703 px: media query lê o VIEWPORT, e dentro do quadro o
viewport É a página, como na impressão. Sem borda e sem rolagem própria - a altura é a do
conteúdo, e quem rola é a caixa de fora. */
.fh-imp__papel { position: absolute; top: 0; left: 0; display: block; width: var(--previa-largura); border: 0; overflow: hidden; background: var(--paper); transform: scale(var(--previa-escala, 1)); transform-origin: top left; }
/* As guias são as bordas da página ONDE ELAS CAEM: o compositor simula a paginação e devolve
cada corte, porque um filete traçado a cada altura de A4 a partir do topo ignora todo
empurrão e, a partir do primeiro, aponta para a página errada - justamente o que a prévia
existe para mostrar. Cada página leva o número na margem: sem ele o leitor conta com o dedo. */
.fh-imp__guias { position: absolute; inset: 0; pointer-events: none; }
.fh-imp__corte { position: absolute; left: 0; right: 0; top: var(--y); border-top: 1px solid var(--gold); }
.fh-imp__pag { position: absolute; right: 4px; top: calc(var(--y) + 4px); padding: 1px 6px; border-radius: 999px; background: var(--paper-raised); font-size: 10px; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.fh-imp__conta { margin-top: var(--s-2); font-size: var(--fs-12); color: var(--ink-soft); }
/* Na tela o bloco nasce invisível e é a rolagem que o revela. A prévia é um RETRATO: o que
estiver fora da janela dela nunca cruza viewport nenhum, e sem esta linha o papel apareceria
em branco abaixo da primeira dobra. É a mesma neutralização que a folha do papel faz. */
.fh-imp__previa [data-reveal] { opacity: 1; transform: none; }
/* A tabela que rola de lado na tela vai INTEIRA para o papel (é o que a folha do papel manda),
e a prévia tem de mostrar a mesma coisa: com a tabela rolando aqui dentro, a prévia esconderia
justamente as colunas que no papel vão aparecer, e contaria menos páginas do que vão sair. */
.fh-imp__previa .fh-table-wrap { overflow: visible; max-height: none; }
/* A gaveta do compositor é mais larga que as outras, e a razão é medida: a página A4 útil tem
703 px, e numa gaveta de 480 a prévia cabe a 0,59 de escala - um rótulo de 12 px do papel
chega ao olho com 7. A 720 px a escala passa de 0,9 e a prévia vira leitura de verdade, que é
a única coisa que ela existe para ser. */
.fh-drawer--imp { width: min(720px, 100vw); }
@media (max-width: 599px) {
.fh-imp__declara li { grid-template-columns: minmax(0, 1fr); gap: 0; }
.fh-imp__previa { max-height: 38vh; }
}
/* ---- Gaveta "Escolher os meses" (Onda D) ----
Os dois campos se validam UM CONTRA O OUTRO (o primeiro mês não pode vir depois do último,
dois extremos iguais não são janela), e é por isso que a leitura viva mora ENTRE eles e o
botão: ali a escolha diz quantas competências lê, contra o que vai comparar e, quando não
fecha, o que falta. Um botão desligado, sozinho, não explica nada. */
.fh-jan { display: grid; gap: var(--s-5); }
.fh-jan__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.fh-jan__campo { display: grid; gap: var(--s-2); min-width: 0; }
.fh-jan__campo .fh-select { width: 100%; }
.fh-jan__rotulo { font-size: var(--fs-12); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft); }
.fh-jan__viva { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: 1px solid var(--rule); border-left: 2px solid var(--gold); border-radius: var(--radius-control); background: var(--paper-raised); }
.fh-jan__contagem { color: var(--ink-strong); font-size: var(--fs-19); line-height: var(--lh-19); }
/* A escolha que ainda não fecha é um ESTADO, não um dano: fica na tinta forte, sem a cor de
alerta, que nesta casa é só para negativo e crítico. */
.fh-jan__aviso { color: var(--ink-strong); }
.fh-jan__acoes { display: flex; justify-content: flex-end; padding-top: var(--s-4); border-top: 1px solid var(--rule); }
@media (max-width: 599px) { .fh-jan__campos { grid-template-columns: minmax(0, 1fr); } }
.fh-atalhos { display: grid; gap: var(--s-3); }
.fh-atalhos__item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: var(--s-3); color: var(--ink); }
/* a tecla é do tamanho da tecla: "F" numa pastilha de 88px parecia um botão vazio */
.fh-atalhos__tecla { justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 2.25rem; min-height: 26px; padding: 0 var(--s-2); border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--paper-raised); color: var(--ink-strong); font-size: var(--fs-12); }
.fh-atalhos__tecla .fh-icon { width: 14px; height: 14px; }
/* ---- Ver como (tipo do gráfico) e a vista em tabela com Copiar ---- */
.fh-vercomo .fh-seg__opt { font-size: var(--fs-12); letter-spacing: 0.04em; }
/* o "padrão" só existe quando a figura está fora dele: fica quieto, ao lado do segmentado */
/* O "padrão" desfaz tudo o que está à esquerda dele. Tem de se ler como AÇÃO: sem contorno não
parecia clicável, mas com a caixa dos segmentados virava um terceiro conjunto de escolhas ao
lado de dois. Fica o sublinhado, que é o que a casa usa para ação em texto. */
.fh-vercomo__padrao { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--ctl-secondary-edge); }
.fh-vercomo__padrao:hover { text-decoration-color: var(--gold); }
/* o lugar do "padrão" é reservado mesmo quando a figura está no padrão: aparecer só ao desviar
empurrava o segmentado para a esquerda e punha este botão onde estava a última forma */
.fh-vercomo__padrao.is-vazio { visibility: hidden; pointer-events: none; }
/* forma que não se aplica ao mês: apagada, com o cursor dizendo que não vai acontecer nada */
.fh-seg__opt.is-off { color: var(--ink-muted); cursor: not-allowed; }
.fh-seg__opt.is-off:hover { color: var(--ink-muted); background: none; }
/* o botão de voltar dentro de um aviso não ocupa a largura da grade */
.fh-indisponivel > .fh-btn { justify-self: start; }
.fh-tabela-vista { display: grid; gap: var(--s-3); justify-items: start; }
.fh-copiar .fh-icon { width: 16px; height: 16px; }
.fh-copiar.is-ok { color: var(--gold-text); }
/* ---- Busca numa tabela longa (DRE detalhada, lista de itens de Vendas) ---- */
.fh-busca { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); }
.fh-busca .fh-icon { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--ink-muted); pointer-events: none; }
.fh-busca__campo {
min-height: 36px;
width: 15rem;
max-width: 100%;
padding: 0 var(--s-3) 0 32px;
border: 1px solid var(--field-edge);
border-radius: var(--radius-control);
background: var(--field);
color: var(--ink-strong);
font-size: var(--fs-15);
transition: border-color var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease);
}
.fh-busca__campo::placeholder { color: var(--ink-muted); }
.fh-busca__campo:hover { border-color: var(--gold); }
.fh-busca__campo:focus-visible { outline: none; border-color: var(--field-edge-focus); box-shadow: var(--focus-ring); }
.fh-busca__n { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-muted); white-space: nowrap; }
@media (max-width: 599px) { .fh-busca { width: 100%; } .fh-busca__campo { flex: 1; width: auto; } }
/* ---- Gaveta de lançamentos: a prova de que a linha é a soma destes lançamentos ---- */
/* Mais larga que a de Personalizar: são seis colunas, e a descrição do ERP é a mais longa
delas (p99 medido: 82 caracteres). No celular ela toma a tela inteira, que é o que o
`min()` já faz. A LISTA é que rola (faixa `minmax(0, 1fr)` da grade), nunca a página atrás. */
.fh-drawer--lanc { width: min(860px, 100vw); }
.fh-drawer--lanc .fh-drawer__corpo { overflow: hidden; padding: 0; }
.fh-lanc { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; min-height: 0; }
.fh-lanc__identidade { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); background: var(--paper-raised); }
.fh-lanc__contexto { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
/* Uma grade só para as duas linhas (o par é `display: contents`): é assim que os dois valores
caem na mesma coluna e a igualdade se vê sem procurar. */
.fh-lanc__prova { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 22ch); gap: var(--s-1) var(--s-4); align-items: baseline; }
.fh-lanc__prova-par { display: contents; }
.fh-lanc__prova-par dt { color: var(--ink-soft); }
.fh-lanc__prova-valor { justify-self: end; text-align: right; color: var(--ink-strong); font-weight: var(--fw-semibold); }
.fh-lanc__prova-sufixo { justify-self: start; color: var(--ink); }
.fh-lanc__prova-nota { grid-column: 1 / -1; margin: 0; }
@media (max-width: 599px) {
/* No celular a terceira coluna não cabe: o sufixo desce para a linha de baixo, encostado no
valor que ele qualifica. */
.fh-lanc__prova { grid-template-columns: minmax(0, 1fr) auto; }
.fh-lanc__prova-sufixo { grid-column: 1 / -1; justify-self: end; }
}
.fh-lanc__confere { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-text); font-weight: var(--fw-regular); }
.fh-lanc__confere .fh-icon { width: 16px; height: 16px; }
/* a única cor de alerta desta gaveta: a identidade que não fecha. Pagamento é saída normal */
.fh-lanc__dif { color: var(--alert); font-weight: var(--fw-semibold); }
.fh-lanc__ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--rule-soft); }
.fh-lanc__ferramentas .fh-select { width: auto; min-height: 36px; font-size: var(--fs-15); }
.fh-lanc__n { color: var(--ink-muted); font-size: var(--fs-12); white-space: nowrap; }
.fh-lanc__ordem .fh-seg__opt { font-size: var(--fs-12); letter-spacing: 0.04em; }
.fh-lanc__lista { overflow: auto; padding: 0 var(--s-5) var(--s-4); }
.fh-lanc__lista:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.fh-lanc__tabela thead th { position: sticky; top: 0; z-index: 1; background: var(--paper); }
.fh-lanc__mes th { padding-top: var(--s-4); color: var(--ink-strong); border-bottom: 1px solid var(--rule); }
.fh-lanc__mes-linha { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.fh-lanc__mes-linha .num { color: var(--ink-muted); font-weight: var(--fw-regular); }
.fh-lanc__data { white-space: nowrap; color: var(--ink-soft); }
.fh-lanc__desc { min-width: 14rem; overflow-wrap: anywhere; }
.fh-lanc__parte { overflow-wrap: anywhere; }
.fh-lanc__nota { display: block; color: var(--ink-muted); font-size: var(--fs-12); }
.fh-lanc__vazio { color: var(--ink-muted); }
.fh-lanc__nada { padding: var(--s-5) 0; color: var(--ink-muted); }
.fh-lanc__rodape { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-5) var(--s-4); border-top: 1px solid var(--rule); background: var(--paper-raised); }
.fh-lanc__falta-lista { color: var(--ink-soft); font-size: var(--fs-12); line-height: var(--lh-12); }
.fh-lanc__carregando, .fh-lanc__falha { padding: var(--s-5); color: var(--ink-soft); }
.fh-lanc__falha { display: grid; gap: var(--s-3); justify-items: start; }
@media (max-width: 599px) {
.fh-lanc__identidade, .fh-lanc__ferramentas, .fh-lanc__rodape { padding-inline: var(--s-4); }
.fh-lanc__lista { padding-inline: var(--s-4); }
/* Alvo de toque: medido em 375px, a fileira inteira da gaveta vinha entre 32 e 36px de altura
(fechar 32, busca 36, os dois seletores 36, ordenar 32, copiar 32). No dedo, 44 e o piso. */
.fh-lanc__ferramentas .fh-select, .fh-lanc__ferramentas .fh-busca__campo, .fh-lanc__ordem .fh-seg__opt, .fh-lanc__ferramentas .fh-copiar, .fh-drawer--lanc .fh-drawer__fechar { min-height: 44px; }
.fh-drawer--lanc .fh-drawer__fechar { min-width: 44px; }
}
/* ---- O ponto de abertura: a categoria vira botão sem virar caixa de botão ---- */
.fh-drill { display: inline-flex; align-items: baseline; gap: var(--s-1); min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-control); }
.fh-drill__nome { min-width: 0; overflow-wrap: anywhere; }
.fh-drill .fh-icon { width: 14px; height: 14px; flex: none; color: var(--ink-muted); align-self: center; }
.fh-drill:hover { color: var(--ink-strong); }
.fh-drill:hover .fh-drill__nome { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.fh-drill:hover .fh-icon { color: var(--gold-text); }
.fh-drill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fh-drawer-fundo, .fh-drawer { transition: none; } }
/* Gaveta no celular: a tabela de seis colunas deixava o VALOR fora da tela, e o valor e o
motivo de o leitor ter aberto a gaveta (ele via data e descricao cortada e tinha de rolar na
horizontal para chegar ao numero). Cada lancamento vira um bloco de quatro linhas, com o
valor ao lado da data, no primeiro viewport, e nada mais rola de lado. */
@media (max-width: 599px) {
/* O cabecalho de coluna nao existe no celular: a linha empilhada nao tem colunas para ele
nomear. Escondido por clip ele continuava com geometria e o detector o via cruzando as
celulas; e o que corresponde ao que a tela mostra. Os papeis explicitos no
HTML seguram a estrutura de tabela para o leitor de tela, que desfaria. */
.fh-lanc__tabela thead { display: none; }
.fh-lanc__tabela, .fh-lanc__tabela tbody { display: block; width: 100%; }
.fh-lanc__tabela tr.fh-lanc__linha { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--rule-soft); }
.fh-lanc__tabela tr.fh-lanc__linha > td { display: block; padding: 0; border: 0; }
.fh-lanc__linha .fh-lanc__data { grid-column: 1; grid-row: 1; color: var(--ink-soft); }
.fh-lanc__linha .fh-lanc__val { grid-column: 2; grid-row: 1; justify-self: end; font-weight: var(--fw-semibold); }
.fh-lanc__linha .fh-lanc__desc { grid-column: 1 / -1; grid-row: 2; }
.fh-lanc__linha .fh-lanc__parte { grid-column: 1 / -1; grid-row: 3; }
.fh-lanc__linha .fh-lanc__conta { grid-column: 1; grid-row: 4; color: var(--ink-muted); font-size: var(--fs-12); }
.fh-lanc__linha .fh-lanc__meio { grid-column: 2; grid-row: 4; justify-self: end; color: var(--ink-muted); font-size: var(--fs-12); }
.fh-lanc__tabela tr.fh-lanc__mes { display: block; }
.fh-lanc__tabela tr.fh-lanc__mes th { display: block; }
}