/* Financeiro — versão para computador. Só entra a partir de 900px: no
   celular nada aqui vale e a tela continua igual.

   O mesmo padrão do app Covais: a navegação de baixo vira uma coluna fixa
   à esquerda, e topo e corpo param numa largura de leitura.

   ⚠️ Só CSS, carregado por último. Os gráficos se redesenham sozinhos na
   largura nova (app-eventos.js, no resize). */
@media screen and (min-width:900px){
:root{--coluna:236px;--faixa-larga:1120px}

body{background:var(--papel)}
.app{max-width:none;margin:0 0 0 var(--coluna);background:transparent;box-shadow:none;
padding-bottom:40px}

.nav{top:0;right:auto;bottom:0;width:var(--coluna);max-width:none;margin:0;
flex-direction:column;gap:4px;padding:18px 12px;border-top:0;border-right:1px solid var(--linha);
background:var(--cartao);backdrop-filter:none}
.nav button{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;height:46px;
padding:0 14px;border-radius:11px;font-size:15px}
.nav button svg{width:21px;height:21px}
.nav button[aria-current]{background:var(--cor-claro)}
.nav button:hover{background:var(--papel)}
.nav button[aria-current]:hover{background:var(--cor-claro)}

.topo{padding:22px 28px 18px}
.topo-linha{max-width:var(--faixa-larga);margin:0 auto}
/* O seletor de ano acompanha a faixa de leitura, encostado à esquerda dela. */
.anos{margin-left:max(0px,calc((100% - var(--faixa-larga))/2))}
.topo-tit{font-size:26px}
.topo-eu{width:50px;height:50px}
.eu-ini{font-size:18px}
.corpo{max-width:calc(var(--faixa-larga) + 56px);margin:0 auto;padding:22px 28px}

/* Painel: os gráficos, um embaixo do outro, na largura toda. */
.topico{padding:16px 20px 14px}

/* Meses: os doze em grade de três. */
#lista-meses{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.item{margin-bottom:0;transition:border-color .12s,box-shadow .12s}
.item:hover{border-color:var(--cor);box-shadow:var(--sombra-alta)}

/* Metas (até 23/10/2026, Ajustes): o cartão da meta na largura de um
   formulário, e não esticado na tela toda. */
#ajustes-corpo>.bloco{margin-top:0;max-width:560px}
#ajustes-corpo>.bloco+.bloco{margin-top:16px}

.faixa{left:calc(var(--coluna) + 20px);right:auto;bottom:20px;width:420px;max-width:none;margin:0}
.aviso{left:calc(var(--coluna) + (100% - var(--coluna))/2);bottom:28px}
.folha{max-width:560px}

/* O balão vai para o canto da tela: a barra de baixo virou a coluna da esquerda, e a faixa foi para lá. */
:root,body:has(#faixa:not([hidden])){--as-sobe:24px;--as-direita:24px}
body:has(#as-raiz) .app,body:has(#as-raiz):has(#faixa:not([hidden])) .app{padding-bottom:100px}
}