:root {
  --azul: #1e5b8f;
  --azul-escuro: #123a5c;
  --cinza-fundo: #f4f6f8;
  --cinza-borda: #dde3e8;
  --texto: #222;
  --texto-suave: #667;
  --verde: #1f8a4c;
  --vermelho: #c0392b;
  --branco: #fff;
  font-family: -apple-system, Segoe UI, Arial, sans-serif;
}

* { box-sizing: border-box; }
/* Garante que o atributo hidden vence qualquer display:flex/grid de classe (mesma
   especificidade que [hidden]; sem isso, elemento.hidden=true fica visivel mesmo assim). */
[hidden] { display: none !important; }

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--cinza-fundo);
  color: var(--texto);
}

/* --- Login --- */
.tela-login {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-login {
  background: var(--branco);
  padding: 32px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  width: 340px;
}
.card-login h1 { font-size: 20px; margin: 0 0 6px; color: var(--azul-escuro); }
.card-login p.subtitulo { margin: 0 0 20px; color: var(--texto-suave); font-size: 13px; }

/* --- Layout principal --- */
/* height:100vh (nao min-height) + overflow:hidden aqui, e overflow-y:auto so no .sidebar e na
   .pagina (ver abaixo) - assim a barra lateral e o topbar ficam sempre visiveis, so o miolo da
   pagina rola por baixo deles. */
.layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.sidebar {
  width: 230px;
  height: 100%;
  overflow-y: auto;
  background: var(--azul-escuro);
  color: #cfe0ee;
  padding: 16px 0;
  flex-shrink: 0;
}
.sidebar .logo {
  padding: 0 16px 16px;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.15);
  margin-bottom: 10px;
}
.sidebar .grupo-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 14px 16px 4px;
  color: #8fb1cc;
}
.sidebar .grupo-titulo input[type="checkbox"] { width: auto; margin: 0; accent-color: #8fb1cc; }
.sidebar a {
  display: block;
  padding: 8px 16px;
  color: #dbe9f5;
  text-decoration: none;
  font-size: 14px;
}
.sidebar a:hover, .sidebar a.ativo { background: rgba(255,255,255,.12); color: #fff; }

.conteudo {
  flex: 1;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.topbar {
  flex-shrink: 0;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-borda);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar select { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--cinza-borda); }
.topbar .usuario { margin-left: auto; font-size: 13px; color: var(--texto-suave); display: flex; gap: 10px; align-items: center; }
.topbar button.link { background: none; border: none; color: var(--azul); cursor: pointer; font-size: 13px; padding: 0; }

.pagina-conteudo { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.pagina { flex: 1; overflow-y: auto; padding: 20px; }
.pagina h2 { margin: 0 0 4px; font-size: 20px; color: var(--azul-escuro); }
.pagina .descricao { color: var(--texto-suave); font-size: 13px; margin: 0 0 16px; }

/* --- Formularios --- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  background: var(--branco);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--cinza-borda);
  margin-bottom: 16px;
}
/* Para cadastros com muitos campos curtos (ex: itens de despesa), caber mais por linha. */
.form-grid-compacto {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 12px; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea {
  padding: 7px 9px;
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  font-size: 14px;
}
.campo.largo { grid-column: 1 / -1; }

.acoes-form { grid-column: 1 / -1; display: flex; gap: 8px; }

/* Modal de edicao rapida de lancamento, aberto direto dos relatorios. */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.modal-caixa {
  background: var(--branco); border-radius: 8px; padding: 20px;
  width: 100%; max-width: 560px; max-height: 90vh; overflow: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.modal-caixa h3 { margin: 0 0 12px; font-size: 16px; color: var(--azul-escuro); }
.modal-caixa .form-grid { margin-bottom: 0; border: none; padding: 0; }

.autocomplete-lista {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.autocomplete-lista .item-opcao {
  padding: 7px 10px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
}
.autocomplete-lista .item-opcao:last-child { border-bottom: none; }
.autocomplete-lista .item-opcao:hover { background: #eef2f5; }
.autocomplete-lista .item-opcao small { display: block; color: var(--texto-suave); }

button, .botao {
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
}
.botao-primario { background: var(--azul); color: #fff; }
.botao-primario:hover { background: var(--azul-escuro); }
.botao-secundario { background: #e8edf1; color: var(--texto); }
.botao-perigo { background: #fceceb; color: var(--vermelho); }
.botao-pequeno { padding: 4px 8px; font-size: 12px; }

/* --- Tabelas --- */
table.tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
}
/* Cantos arredondados so na 1a/ultima celula (nao overflow:hidden na tabela toda) - overflow
   diferente de visible em qualquer ancestral do <thead> bloquearia o cabecalho congelado
   abaixo (position:sticky "gruda" no ancestral com scroll mais proximo; se for a propria
   tabela, o cabecalho nunca "destaca" pra flutuar por cima das linhas). */
table.tabela thead tr:first-child th:first-child { border-top-left-radius: 8px; }
table.tabela thead tr:first-child th:last-child { border-top-right-radius: 8px; }
table.tabela tbody:last-of-type tr:last-child td:first-child { border-bottom-left-radius: 8px; }
table.tabela tbody:last-of-type tr:last-child td:last-child { border-bottom-right-radius: 8px; }
table.tabela th, table.tabela td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--cinza-borda);
  text-align: left;
  font-size: 13px;
}
table.tabela th {
  background: #e4eaf0;
  color: var(--texto-suave);
  font-weight: 600;
  border-right: 1px solid #c7d2db;
}
/* Cabecalho congelado: gruda no topo da area que rola (.pagina) enquanto as linhas passam por
   baixo dele - so tabelas com <thead> de verdade (cadastros/lancamentos) tem esse efeito; os
   quadros do Fluxo de Caixa Mensal usam cabecalho dentro do proprio tbody (varios por pagina,
   nao faria sentido congelar todos), entao ficam de fora automaticamente. */
table.tabela thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
/* Alterna duas cores nas colunas do cabecalho (a que ja existia + uma mais clara) so
   fica mais facil enxergar onde uma coluna termina e a proxima comeca - vale pra
   qualquer tabela do sistema, ja que usam todas a mesma classe .tabela. */
table.tabela th:nth-child(even) {
  background: #eef2f5;
  border-right-color: #d7e0e7;
}
table.tabela th:last-child { border-right: none; }
table.tabela tr:hover td { background: #f8fbfd; }
table.tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Sem overflow-x aqui de proposito (isso tambem bloquearia o cabecalho congelado, pelo mesmo
   motivo do table.tabela acima) - quem rola na horizontal agora e a propria .pagina. */
.tabela-wrap { overflow: visible; }

/* Linha de relatorio que representa um lancamento so - clicavel pra editar rapido. */
tr.linha-editavel { cursor: pointer; }
tr.linha-editavel:hover td { background: #eaf2fb; }

/* Linhas bem enxutas (so o espaco que a fonte atual precisa) - usada em relatorios densos,
   feitos pra caber numa folha so, como o Fluxo de Caixa Mensal. table-layout:fixed faz as
   larguras do <colgroup> valerem de verdade (senao o navegador reparte por conteudo e ignora
   a % pedida) - cada tabela desse relatorio define as suas proprias colunas, independente
   das outras (por isso sao <table> separadas, uma por grupo de quadros). */
.tabela-compacta { table-layout: fixed; width: 100%; }
.tabela-compacta th, .tabela-compacta td { padding: 0 6px; line-height: 0.85; font-size: 10px; vertical-align: middle; overflow-wrap: break-word; }
/* Grade nas colunas internas (vertical), igual ja tem nos cabecalhos - aqui estende pras
   linhas de dado tambem. Nao poe borda na ultima coluna (nao precisa fechar caixa por fora). */
.tabela-compacta td { border-right: 1px solid var(--cinza-borda); }
.tabela-compacta td:last-child { border-right: none; }
/* Espacador de "uma linha" (entre grupos) e "meia linha" (entre subgrupos) - sem borda, pra
   ficar um espaco em branco de verdade e nao uma linha vazia "quadriculada". Vem depois da
   regra de grade acima de proposito, pra vencer o border-right nessas linhas. */
.tabela-compacta tr.linha-espaco td { border: none; padding: 0; height: 0.65em; }
.tabela-compacta tr.linha-meio-espaco td { border: none; padding: 0; height: 0.33em; }

.barra-filtros {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--branco);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--cinza-borda);
  margin-bottom: 12px;
}

/* Botoes de exportar/imprimir dos relatorios - ver htmlBarraExportar/ligarBarraExportar em
   util.js. Ficam escondidos na impressao (@media print abaixo), so o conteudo do relatorio
   em si e que deve ir para o papel/PDF. */
.barra-exportar { display: flex; gap: 8px; margin-bottom: 12px; }

@media print {
  .sidebar, .topbar, .barra-filtros, .barra-exportar, #area-form,
  .menu-acoes, button, input[type="checkbox"] {
    display: none !important;
  }
  .layout { display: block; }
  .pagina { padding: 0; overflow: visible; }
  /* Na tela cada elemento mantem o tamanho de letra original (13/14/12px etc) - so no
     papel/PDF tudo cai pra 10px, pra ganhar densidade sem mudar a tela do dia a dia. */
  table.tabela, table.tabela th, table.tabela td,
  .pagina .descricao, .campo label, .campo input, .campo select, .campo textarea,
  .autocomplete-lista .item-opcao, .botao, .botao-pequeno, .tag, .mensagem,
  .resumo-card .rotulo, .menu-dropdown button, .card-login p.subtitulo {
    font-size: 10px;
  }
  /* Idem para a altura da linha - so no papel, deixa o mais colada possivel no conteudo
     (na tela continua com o espacamento normal, mais confortavel pra clicar/ler). */
  table.tabela th, table.tabela td {
    padding: 1px 4px;
    line-height: 1;
  }
  .tabela-compacta th, .tabela-compacta td {
    padding: 0 4px;
    line-height: 0.75;
  }
  .tabela-compacta tr.linha-espaco td { height: 0.3em; }
  .tabela-compacta tr.linha-meio-espaco td { height: 0.15em; }
}

.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.tag-verde { background: #e5f6ea; color: var(--verde); }
.tag-vermelho { background: #fceceb; color: var(--vermelho); }
.tag-cinza { background: #eee; color: #666; }
.tag-amarelo { background: #fdf3d8; color: #8a6d1a; }

.mensagem { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; font-size: 13px; }
.mensagem-erro { background: #fceceb; color: var(--vermelho); }
.mensagem-sucesso { background: #e5f6ea; color: var(--verde); }

.resumo-cards { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.resumo-card {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 14px 18px;
  min-width: 160px;
}
.resumo-card .valor { font-size: 22px; font-weight: 700; }
.resumo-card .rotulo { font-size: 12px; color: var(--texto-suave); }

/* Menu de acoes (Editar/Duplicar/Excluir) que abre ao parar o mouse sobre o botao.
   E um unico elemento compartilhado, position:fixed, anexado direto ao <body> (ver
   ativarMenuAcoes em util.js) - assim ele nunca fica cortado pelo overflow:auto da
   pagina, mesmo nas ultimas linhas de uma tabela perto do rodape. */
.menu-acoes { display: inline-block; }
.menu-dropdown-flutuante {
  position: fixed;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  z-index: 1000;
  min-width: 110px;
  overflow: hidden;
}
.menu-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 0;
  padding: 7px 12px;
  font-size: 13px;
}
.menu-dropdown button:hover { background: #eef2f5; }