/*
* 75_relatorios.css — ONDA J · §14 e §13.7
* ═══════════════════════════════════════════════════════════════════════════
* SÓ o que as ondas D e G não têm. Tabela-que-vira-cartão, filtros, selo,
* aviso, paginação, cartão e estado vazio vêm de `10_componentes.css` e
* `70_admin.css` e são usados COMO ESTÃO — um segundo `.filtros` aqui seria a
* primeira rachadura no design system.
*
* O que é genuinamente novo, e por quê:
*
* .relatorios a porta: três cartões com o NÚMERO em cima do nome. É a
* régua 2 do PLANO ("o que importa na primeira tela") —
* o gestor lê "12 pessoas devendo" sem clicar.
* .exportacao a caixa de "levar para o Excel", que é uma tela dentro da
* tela: aviso de truncamento, botão, e o opt-in de CPF
* completo com justificativa (§13.7). Ela precisa de peso
* visual próprio porque é a única ação desta página que
* tira dado pessoal de dentro do produto.
* .relatorio__nota a linha que diz o que é do período e o que é acumulado.
*
* Nenhuma regra escreve hex: tudo sai dos tokens da onda D, e é por isso que o
* tema claro e o tema do tenant saem de graça.
*
* Carregamento: `stylesheet_link_tag :app` emite um por folha do load
* path, em ordem de nome — este arquivo entra depois de `70_admin` sozinho.
* NADA a pedir ao integrador, e nada a acrescentar em `application.css`.
*/
/* ═══ A PORTA: OS TRÊS CARTÕES ════════════════════════════════════════════ */
.relatorios {
display: grid;
gap: var(--esp-4);
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.relatorios__cartao {
display: flex;
flex-direction: column;
gap: var(--esp-2);
/* O cartão inteiro é o alvo do toque: o link do título cobre a área com o
::after do `.cartao__titulo a`, como já faz `.curso` na onda D. */
position: relative;
}
.relatorios__cartao .cartao__titulo a { color: inherit; text-decoration: none }
.relatorios__cartao .cartao__titulo a::after { content: ""; position: absolute; inset: 0 }
.relatorios__cartao:hover { border-color: var(--cor-marca-tenue); box-shadow: var(--sombra-2) }
.relatorios__cartao:focus-within { border-color: var(--cor-marca) }
/* ═══ A FAIXA DE FILTROS NO CELULAR ═══════════════════════════════════════
MODIFICADOR, não redefinição: `.filtros` continua sendo da onda G — um
segundo `.filtros` aqui seria a primeira rachadura no design system.
São duas metades do mesmo defeito, as duas medidas em 390×844:
1. **Altura de campo.** `.filtros__campo` tem `flex: 1 1 12rem` e abaixo de
40rem a faixa vira `flex-direction: column`. Num container COLUNA,
`flex-basis` é ALTURA: cada campo passa a ter 192px e a tela de filtro
do celular vira quatro poços de espaço vazio. (O mesmo acontece em
/admin/pessoas, que é arquivo da onda G — está no relatório desta onda
para quem é dono do `70_admin.css` consertar na origem.)
2. **Altura da FAIXA.** Consertado o item 1, quatro campos empilhados ainda
deixavam a faixa com 446px e a primeira linha de dados em y=758 — depois
de uma rolagem inteira num viewport de 844. A régua 2 do PLANO é "o que
importa aparece na primeira tela".
A grade de duas colunas resolve o item 2: faixa de 355px e primeira linha em
y=667 em "Quem está devendo"; 266px e y=699 em "Assiduidade". Não é um
`` porque esconder o filtro atrás de um toque custa um toque em TODA
visita para poupar uma rolagem em algumas — e porque um `` que
precisa nascer aberto no desktop e fechado no celular não se resolve em CSS
sem `::details-content`, novo demais para o celular do gestor de frota. */
@media (max-width: 40rem) {
.filtros--relatorio {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
}
/* `flex: 0 0 auto` mata a altura de 12rem; `min-width: 0` é o que deixa a
coluna ENCOLHER — sem ele o item de grade tem largura mínima automática, o
`` impõe os 184px intrínsecos dele e a página inteira
passa a rolar na horizontal (390 de tela para 413 de conteúdo). */
.filtros--relatorio .filtros__campo { flex: 0 0 auto; min-width: 0 }
.filtros--relatorio .campo__controle { width: 100%; min-width: 0 }
/* Com a folga lateral menor a data cabe inteira em meia tela, sem encostar
no ícone do calendário. */
.filtros--relatorio input[type="date"].campo__controle { padding-inline: var(--esp-2) }
/* "Vencidos e a vencer em 7 dias" não cabe em meia tela, e um