:root{
  --fundo:#12151a; --cartao:#171b22; --borda:#232830; --topo:#0e1116;
  --texto:#e6e9ef; --fraco:#7c8798; --medio:#c3cad6;
  --positivo:#4ade80; --negativo:#f87171; --barra:#2d3a4d;
  /* Largura util do conteudo. Em monitor largo a DRE tem 14 colunas; deixar
     a tabela esticar ate 2500px afasta janeiro de dezembro a ponto de o olho
     perder a linha no meio do caminho. A margem lateral cresce no lugar. */
  --largura:1500px;
  --lateral:max(18px, calc((100% - var(--largura)) / 2));
}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--texto);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:14px}

.topo{display:flex;align-items:center;gap:22px;background:var(--topo);
  border-bottom:1px solid var(--borda);padding:12px var(--lateral) 0}
.marca{font-weight:600;padding-bottom:12px}
.topo nav{display:flex;gap:20px}
.topo nav a{color:var(--fraco);text-decoration:none;padding-bottom:12px;font-size:13.5px}
.topo nav a.ativo{color:var(--texto);border-bottom:2px solid var(--positivo);padding-bottom:10px}
.atualizacao{margin-left:auto;font-size:11px;color:var(--fraco);padding-bottom:12px}
.sair{color:var(--fraco);margin-left:12px}

.faixa{padding:9px var(--lateral);font-size:12.5px}
.faixa.alerta{background:#3b1418;color:#fca5a5;border-bottom:1px solid #5b1d22}
.faixa.atencao{background:#3a2f13;color:#fcd34d;border-bottom:1px solid #57451c}

main{padding:18px var(--lateral)}
.cartoes{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.cartao{flex:1;min-width:170px;background:var(--cartao);border:1px solid var(--borda);
  border-radius:6px;padding:12px 14px}
.cartao .rotulo{font-size:9.5px;color:var(--fraco);letter-spacing:.08em;text-transform:uppercase}
.cartao .valor{font-size:22px;font-weight:600;margin-top:4px}
.positivo{color:var(--positivo)} .negativo{color:var(--negativo)}

table.relatorio{width:100%;border-collapse:collapse;font-size:12.5px;
  font-variant-numeric:tabular-nums}
table.relatorio th{color:var(--fraco);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:500;padding:0 0 8px 16px;text-align:right}
table.relatorio th:first-child{text-align:left;padding-left:0}
table.relatorio td{padding:6px 0 6px 16px;text-align:right;border-top:1px solid var(--borda)}
table.relatorio td:first-child{text-align:left;padding-left:0;color:var(--medio)}
tr.n1{font-weight:600} tr.n1 td:first-child{color:var(--texto)}
tr.n2 td:first-child{padding-left:20px;color:var(--medio)}
tr.n3 td:first-child{padding-left:40px;color:var(--fraco);font-size:11.5px}
tr.calc{background:var(--cartao)}
tr.resultado{background:#132018}
/* Cor por celula, nao pela linha inteira: uma linha de RESULTADO tem um mes
   por coluna e cada mes pode ter sinal diferente. A classe positivo/negativo
   vem do template, por valor (dre.html); aqui so o peso e a borda. */
tr.resultado td{font-weight:700;border-top:1px solid #2a303a}
tr.oculta{display:none}
/* Link no valor nao pode parecer link em cima de numero - a tabela viraria
   um borrao azul. Aparece so no hover, onde o clique ja foi cogitado. */
table.relatorio a.celula{color:inherit;text-decoration:none}
table.relatorio a.celula:hover{text-decoration:underline}
.abrir{cursor:pointer;user-select:none;color:var(--fraco);margin-right:5px}

/* Primeira coluna fixa: com 13 meses a tabela rola por baixo do rotulo. */
.rolagem{overflow-x:auto}
.rolagem table.relatorio td:first-child,
.rolagem table.relatorio th:first-child{
  position:sticky;left:0;background:var(--fundo);z-index:1;min-width:260px}
.rolagem tr.calc td:first-child{background:var(--cartao)}
.rolagem tr.resultado td:first-child{background:#132018}

.login{display:flex;align-items:center;justify-content:center;min-height:100vh}
.caixa-login{background:var(--cartao);border:1px solid var(--borda);border-radius:8px;
  padding:28px;width:280px;display:flex;flex-direction:column;gap:12px}
.caixa-login h1{font-size:16px;margin:0 0 6px}
.caixa-login input,.caixa-login button{padding:9px 11px;border-radius:6px;
  border:1px solid var(--borda);background:var(--fundo);color:var(--texto);font-size:14px}
.caixa-login button{background:var(--positivo);color:#0e1116;font-weight:600;
  border:none;cursor:pointer}
.erro{color:var(--negativo);font-size:12.5px;margin:0}

@media (max-width:820px){
  .topo{flex-wrap:wrap;gap:12px}
  .atualizacao{width:100%;margin-left:0;padding-bottom:8px}
  .cartoes{flex-direction:column}
  main{padding:12px}
  .topo{padding-left:12px;padding-right:12px}
  .faixa{padding-left:12px;padding-right:12px}
}

/* O celular recebe uma linha por item, um mes por vez. A tabela de ate 13
   colunas nao cabe em tela estreita e espremer produz numero ilegivel. */
.dre-celular,.saldos-celular{display:none}
.dre-celular select,.saldos-celular select{background:var(--cartao);color:var(--texto);
  border:1px solid var(--borda);border-radius:6px;padding:6px 10px;
  font-size:13px;margin-bottom:12px;width:100%}
.linha-celular{display:flex;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--borda);font-size:13px}
.linha-celular span:first-child{color:var(--medio)}
.linha-celular span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.linha-celular.destaque{font-weight:700;color:var(--positivo);
  border-top:1px solid #2a303a;border-bottom:none;margin-top:6px}
.linha-celular.destaque span:first-child{color:var(--positivo)}

@media (max-width:820px){
  .rolagem-dre{display:none}
  .dre-celular{display:block}
  /* Saldos segue a mesma troca. O seletor precisa ser o do proprio bloco
     (.tabela-saldos), nunca '.rolagem' generico - esse esconderia qualquer
     tabela com rolagem horizontal, o defeito que test_mobile_css.py vigia. */
  .tabela-saldos{display:none}
  .saldos-celular{display:block}
  /* Extrato e uma tabela larga de pesquisa, sem versao de celular - a aba
     sai do menu em vez de levar a uma tela inutilizavel. A rota continua
     de pe: o drill-down da DRE no desktop aponta para ela. */
  .aba-extrato{display:none}
}