/* ==========================================================================
   CaixaVisão — Design system
   Pico.css (vendor/pico/pico.green.min.css) cuida do reset e dos componentes
   de base (formulários, tabelas, details/summary). Este arquivo define os
   tokens visuais próprios do CaixaVisão (cor, tipografia, espaçamento) —
   sobrescrevendo as variáveis do Pico onde existem, e completando onde não
   existem — e o layout específico do app por cima disso.
   ========================================================================== */

/* :root:not([data-theme="dark"]) em vez de :root puro — o próprio Pico define
   seu tema claro nesse seletor (especificidade 0,2,0), mais específico que
   :root sozinho (0,1,0). Com :root puro, as variáveis abaixo perdiam
   silenciosamente pra cor padrão do Pico mesmo carregando depois — foi
   assim que o app rodou meses com o verde errado (#33790f do Pico, não o
   #1b8a5a documentado) sem nenhum aviso. */
:root:not([data-theme="dark"]) {
  /* Marca — harmonizado com a nova identidade visual (marca/). O degradê dos
     arquivos de marca (icone.svg, logo-claro.svg, logo-escuro.svg) fica
     exclusivo deles; aqui são só verdes sólidos para uso funcional. */
  --cv-verde: #007a4e;
  --cv-verde-escuro: #006b46;
  --cv-verde-suave: #e6f4ed;
  --cv-verde-borda: #a7d8c0;
  --cv-verde-indicador: #cae5d7;

  /* Semânticas — vermelho só para problema/alerta, azul só para informação.
     Âmbar é o alerta "saldo projetado fica negativo": criado porque, na tela
     Caixa 30 dias, vermelho já significa "pagamento" (barras/valores de
     saída) — reaproveitar vermelho pra "saldo negativo" no mesmo gráfico
     faria uma cor só dizer duas coisas diferentes ao mesmo tempo. */
  --cv-vermelho: #b3261e;
  --cv-vermelho-suave: #fbeae8;
  --cv-ambar: #a85a00;
  --cv-ambar-suave: #fbf0e2;
  --cv-azul: #2f6690;
  --cv-azul-suave: #eaf1f6;

  /* Neutros */
  --cv-fundo: #f4f6f4;
  --cv-superficie: #ffffff;
  --cv-borda: #e2e7e2;
  --cv-texto: #1e2422;
  --cv-texto-secundario: #5b6b62;
  --cv-texto-terciario: #93a19a;

  /* Forma */
  --cv-raio: 10px;
  --cv-raio-pequeno: 7px;
  --cv-raio-pill: 999px;
  --cv-sombra: 0 1px 2px rgba(20, 30, 25, 0.05), 0 4px 16px rgba(20, 30, 25, 0.04);

  /* Espaçamento */
  --cv-esp-1: 4px;
  --cv-esp-2: 8px;
  --cv-esp-3: 12px;
  --cv-esp-4: 16px;
  --cv-esp-5: 24px;
  --cv-esp-6: 32px;

  /* Tipografia */
  --cv-fonte: system-ui, -apple-system, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;

  /* Componentes de formulário — UMA altura só (~42-44px), compartilhada por
     todo input, select, campo de data e botão da aplicação (Pico já usa as
     mesmas duas variáveis pros dois). Em px, não rem: o Pico aumenta o
     tamanho da fonte raiz conforme a tela fica mais larga (100% a 1280px+
     vira 125%) — em rem, isso inflava todo campo/botão até 25% em telas
     maiores. --pico-font-size travado em 100% abaixo neutraliza isso de vez. */
  --cv-controle-v: 10px;
  --cv-controle-h: 14px;
  --cv-controle-fonte: 14px;

  /* --- Sobrescreve os tokens do Pico para acompanhar a paleta acima --- */
  --pico-font-size: 100%;
  --pico-font-family: var(--cv-fonte);
  --pico-background-color: var(--cv-superficie);
  --pico-color: var(--cv-texto);
  --pico-muted-color: var(--cv-texto-secundario);
  --pico-muted-border-color: var(--cv-borda);
  --pico-border-radius: var(--cv-raio-pequeno);
  --pico-card-background-color: var(--cv-superficie);
  --pico-card-border-color: var(--cv-borda);
  --pico-primary: var(--cv-verde);
  --pico-primary-background: var(--cv-verde);
  --pico-primary-border: var(--cv-verde);
  --pico-primary-hover: var(--cv-verde-escuro);
  --pico-primary-hover-background: var(--cv-verde-escuro);
  --pico-primary-hover-border: var(--cv-verde-escuro);
  --pico-primary-focus: rgba(0, 122, 78, 0.3);
  --pico-primary-inverse: #ffffff;
  --pico-primary-underline: rgba(0, 122, 78, 0.5);
  --pico-form-element-border-color: var(--cv-borda);
  --pico-form-element-spacing-vertical: var(--cv-controle-v);
  --pico-form-element-spacing-horizontal: var(--cv-controle-h);
  --pico-border-width: 1px;
}

/* ==========================================================================
   Base — página, superfícies, tipografia
   ========================================================================== */

html {
  background: var(--cv-fundo);
  /* Reserva o espaço da barra de rolagem sempre — sem isso, uma tela com
     conteúdo mais alto que a viewport (rolagem aparece) fica alguns pixels
     mais estreita que uma tela curta (sem rolagem), e como o body é
     centralizado (margin: auto), cabeçalho/menu/cartão pulam de posição
     horizontal ao trocar de tela. */
  scrollbar-gutter: stable;
}

body {
  max-width: 1180px;
  margin: 16px auto;
  padding: 0 20px;
  font-size: 15px;
  /* Em telas mais altas que o conteúdo, o painel (não o fundo cinza da
     página) deve preencher o espaço até o rodapé — sem isso sobra uma
     faixa de fundo exposta abaixo do cartão. min-height cobre a viewport
     inteira descontando a margem vertical do body (16px em cima e embaixo);
     display:flex column permite que .layout (e o cartão dentro dele)
     cresça para ocupar essa altura via flex:1 mais abaixo. Em 1366×768,
     onde o conteúdo já preenche a viewport, isso não muda nada (não há
     espaço sobrando pra crescer). */
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 32px);
}

/* Em telas largas (notebook grande/monitor externo), 1180px deixa uma faixa
   vazia enorme dos dois lados enquanto o menu fica "sozinho" à esquerda.
   Cresce o limite em 2 degraus pra acompanhar telas maiores sem esticar
   além do confortável em monitores ultrawide. Só entra acima de 1366px de
   viewport (o alvo já validado sem rolagem em 1366×768 fica intocado). */
@media (min-width: 1500px) {
  body {
    max-width: 1440px;
  }
}

@media (min-width: 1800px) {
  body {
    max-width: 1600px;
  }
}

/* Cada bloco de tela é uma superfície branca sobre o fundo off-white da
   página — separação visual discreta (borda + sombra bem leve), sem
   parecer caixa de formulário HTML cru. */
.cartao {
  background: var(--cv-superficie);
  border: 1px solid var(--cv-borda);
  border-radius: var(--cv-raio);
  box-shadow: var(--cv-sombra);
  padding: var(--cv-esp-4) var(--cv-esp-6);
  margin-bottom: var(--cv-esp-4);
}

h1 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}

/* Título de tela — precisa ter presença; era muted e pequeno demais antes. */
h2 {
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 var(--cv-esp-4);
  color: var(--cv-texto);
  letter-spacing: -0.01em;
}

/* Rótulo de subseção/grupo — pequeno, discreto, versalete. */
h3 {
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--cv-texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Um único padrão de campo pra aplicação inteira — mesma fonte, mesma
   borda, mesmo raio, em qualquer tela (Novo lançamento, Relatórios,
   Movimentações, filtros, cadastros...). Antes cada formulário tinha seu
   próprio padding/fonte definido à parte, o que criava a sensação de
   telas "montadas caso a caso". */
input:not([type="checkbox"], [type="radio"], [type="file"]),
select,
textarea {
  font-size: var(--cv-controle-fonte);
  border-width: 1px;
}

input[type="file"] {
  font-size: 13px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cv-texto-secundario);
  margin-bottom: var(--cv-esp-3);
}

/* Mesma lista de seletores que o Pico usa pro próprio botão — button sozinho
   perde a briga de especificidade contra [type=submit] (é o que fazia o
   texto do botão "Lançar" ficar a 16px em vez de 14px: o navegador casava
   com o ramo [type=submit] do Pico, mais específico que só "button"). */
/* O Pico usa button[type=submit] (elemento+atributo, mais específico que só
   [type=submit]) pra deixar o botão de enviar width:100% — por isso o
   seletor abaixo repete a mesma combinação, senão a sobrescrita perde de
   novo. fit-content é o que realmente encolhe o botão pro tamanho do texto. */
button,
button[type="submit"],
button[type="button"],
button[type="reset"],
[role="button"] {
  margin-top: var(--cv-esp-2);
  width: fit-content;
  font-size: var(--cv-controle-fonte);
  font-weight: 600;
}

@media (max-width: 480px) {
  button,
  button[type="submit"],
  button[type="button"],
  button[type="reset"],
  [role="button"] {
    width: 100%;
  }
}

button.secondary {
  font-weight: 500;
}

/* Único botão realmente destrutivo do sistema (excluir lançamento) —
   vermelho reservado só pra isso, nunca decorativo. */
button.perigo {
  --pico-primary: var(--cv-vermelho);
  --pico-primary-background: var(--cv-vermelho);
  --pico-primary-border: var(--cv-vermelho);
  --pico-primary-hover: #8f1f19;
  --pico-primary-hover-background: #8f1f19;
  --pico-primary-hover-border: #8f1f19;
  color: var(--cv-vermelho);
  border-color: var(--cv-vermelho);
  background: transparent;
}

button.perigo:hover {
  background: var(--cv-vermelho-suave);
}

#status {
  font-size: 13px;
  color: var(--cv-texto-secundario);
  margin: 0;
}

section {
  margin-bottom: var(--cv-esp-5);
}

/* Valor financeiro — sempre numérico tabular, pra colunas alinharem. */
.valor-grande,
.valor-medio {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.valor-grande {
  font-size: 34px;
  font-weight: 700;
  margin: 0;
  color: var(--cv-texto);
}

.valor-medio {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--cv-texto);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

ul li {
  padding: 4px 0;
  border-bottom: 1px solid var(--cv-borda);
}

.alerta {
  background: var(--cv-vermelho-suave);
  color: #7a251d;
  padding: var(--cv-esp-3) var(--cv-esp-4);
  border-radius: var(--cv-raio-pequeno);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid rgba(179, 38, 30, 0.15);
}

.discreto {
  font-size: 12px;
  color: var(--cv-texto-terciario);
}

.voltar-inicio {
  display: block;
  margin-top: 10px;
  background: transparent;
  border: none;
  color: var(--cv-verde);
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}

.voltar-inicio:hover {
  text-decoration: underline;
  background: transparent;
}

/* Ícones inline (nav, ações) — sempre currentColor, sem decoração. */
.icone {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: -4px;
}

/* Selo pequeno de status (previsto/realizado/inativo) — visual discreto
   em vez de texto cru tipo "· previsto". */
.selo {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--cv-raio-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.selo-previsto {
  background: var(--cv-azul-suave);
  color: var(--cv-azul);
}

.selo-realizado {
  background: var(--cv-verde-suave);
  color: var(--cv-verde-escuro);
}

.selo-inativo {
  background: #eef0ee;
  color: var(--cv-texto-terciario);
}

/* "Vencido" é alerta de prazo, não pagamento nem saldo negativo — teria o
   mesmo problema de significado duplicado se fosse vermelho (a coluna Valor
   da mesma linha, em Contas a pagar, já é vermelha por ser saída). Âmbar de
   novo, mesma cor/razão da tela Caixa 30 dias. */
.selo-vencido {
  background: var(--cv-ambar-suave);
  color: var(--cv-ambar);
}

/* Estado vazio de listagem — centralizado, com respiro, em vez de uma
   linha cinza qualquer perdida na tabela. */
.vazio {
  display: block;
  padding: var(--cv-esp-5) 0;
  text-align: center;
  color: var(--cv-texto-terciario);
  font-size: 13px;
  border-bottom: none !important;
}

/* ==========================================================================
   Cabeçalho — marca discreta, ação principal em destaque, dado técnico
   (pasta/backup) como status, nunca competindo com informação financeira.
   ========================================================================== */

header.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cv-esp-3);
  padding-bottom: 6px;
  margin-bottom: var(--cv-esp-4);
  border-bottom: 1px solid var(--cv-borda);
}

.topo-marca {
  display: flex;
  align-items: center;
  gap: var(--cv-esp-3);
}

.topo-marca-selo {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.topo-marca-selo img {
  width: 100%;
  height: 100%;
  display: block;
}

.topo-marca-texto h1 {
  margin-bottom: 0;
}

.topo-empresa {
  font-size: 12px;
  color: var(--cv-texto-secundario);
  margin: 0;
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: var(--cv-esp-3);
}

.topo-acoes button {
  margin-top: 0;
}

/* Ação operacional mais importante do cabeçalho. */
#headerNovoLancamento {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Status técnico discreto (pasta conectada / backup) — texto pequeno com
   um indicador redondo, nunca um botão grande competindo com o resto. */
.topo-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--cv-texto-secundario);
}

.topo-status .ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cv-texto-terciario);
  flex-shrink: 0;
}

.topo-status.protegido .ponto {
  background: var(--cv-verde);
}

#conectar {
  font-size: 12px;
  padding: 6px 12px;
  font-weight: 500;
}

/* ==========================================================================
   Layout de duas colunas — menu fixo à esquerda, conteúdo à direita.
   ========================================================================== */

.layout {
  display: flex;
  align-items: stretch;
  gap: var(--cv-esp-5);
  /* Cresce pra preencher a altura sobrando do body (ver comentário no
     body), empurrando o cartão a acompanhar — o menu (sem fundo próprio
     em toda a altura) não é afetado visualmente por ficar mais alto. */
  flex: 1;
}

.barra-lateral {
  display: block; /* Pico deixa <nav> flex por padrão (pensado pra barra no topo); aqui é coluna. */
  flex: 0 0 220px;
  position: sticky;
  top: 24px;
  align-self: flex-start;
}

.area-conteudo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* O cartão da tela ativa preenche a altura disponível em vez de deixar o
   fundo cinza da página exposto abaixo dele em telas mais altas que o
   conteúdo. Só o cartão visível (os outros têm [hidden], display:none,
   e não participam do flex) é afetado. */
.area-conteudo > .cartao {
  flex: 1;
}

.legenda-menu {
  display: block;
  margin: var(--cv-esp-4) 0 var(--cv-esp-1) var(--cv-esp-1);
  font-size: 11px;
  font-weight: 600;
  color: var(--cv-texto-terciario);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.barra-lateral .menu-principal,
.barra-lateral .menu-secundario {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

/* Item de menu neutro por padrão — vira botão cheio só quando ativo.
   Ícone + rótulo, sem grandes blocos coloridos dominando a tela. */
.barra-lateral button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  margin-top: 0;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--cv-texto);
  font-weight: 500;
  font-size: 14px;
  border-radius: var(--cv-raio-pequeno);
  box-shadow: none;
}

.barra-lateral button:hover {
  background: var(--cv-verde-suave);
}

.barra-lateral .menu-secundario button {
  font-size: 13px;
  color: var(--cv-texto-secundario);
  padding: 6px 10px;
}

/* Destaca em qual tela o usuário está — feedback de localização (princípio 3). */
.barra-lateral .menu-principal button.ativo {
  background: var(--cv-verde);
  color: #fff;
  font-weight: 600;
}

.barra-lateral .menu-secundario button.ativo {
  background: var(--cv-verde-suave);
  color: var(--cv-verde-escuro);
  font-weight: 600;
}

/* ==========================================================================
   Cartões de indicador (KPI) da Visão geral — número grande com protagonismo,
   indicador de cor discreto (não preenchimento colorido inteiro).
   ========================================================================== */

.kpi-destaque {
  display: flex;
  align-items: center;
  gap: var(--cv-esp-3);
  background: var(--cv-verde-suave);
  border: 1px solid var(--cv-verde-borda);
  border-radius: var(--cv-raio);
  padding: 8px var(--cv-esp-4);
  margin: 0 0 var(--cv-esp-2);
}

.kpi-destaque-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cv-verde-indicador);
  color: var(--cv-verde-escuro);
  flex-shrink: 0;
}

.kpi-destaque-icone svg {
  width: 20px;
  height: 20px;
}

.kpi-destaque-texto {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--cv-esp-3);
  flex-wrap: wrap;
}

.kpi-destaque h3 {
  color: var(--cv-verde-escuro);
  margin: 0;
}

.kpi-destaque .valor-grande {
  font-size: 26px;
}

.kpi-destaque .discreto {
  margin: 0;
}

.grade-kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cv-esp-3);
  margin: 0 0 var(--cv-esp-2);
  /* Sem isso, o grid estica os 3 cartões pra altura do mais alto (o de
     projeção, que tem gráfico) — sobra vazio dentro dos outros dois. */
  align-items: start;
}

.kpi {
  background: var(--cv-superficie);
  border: 1px solid var(--cv-borda);
  border-radius: var(--cv-raio);
  padding: 6px var(--cv-esp-3);
  position: relative;
}

.kpi h3 {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* O texto depois do ponto colorido precisa ser UM item flex só (não texto +
   data como itens separados) — senão a data quebra pro próprio canto em vez
   de ficar grudada no fim da frase quando o título passa de uma linha. */
.kpi h3 span {
  min-width: 0;
}

/* A data em si ("26 OUT") nunca quebra no meio — sem isso, o navegador podia
   deixar "26" numa linha e "OUT" sozinho na próxima, cortando a data ao
   meio de um jeito confuso. O título inteiro ainda quebra normalmente antes
   dela quando precisa. */
.kpi h3 span span {
  white-space: nowrap;
}

.kpi h3::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cv-texto-terciario);
}

.kpi .discreto {
  margin: 2px 0 0;
}

.kpi-receber h3::before {
  background: var(--cv-azul);
}

.kpi-pagar h3::before {
  background: var(--cv-vermelho);
}

.kpi-projecao h3::before {
  background: var(--cv-verde);
}

/* O número em si também segue a cor do indicador (não só o pontinho do
   rótulo) — deixa mais fácil escanear "entra x sai x sobra" num relance. */
.kpi-receber .valor-medio {
  color: var(--cv-azul);
}

.kpi-pagar .valor-medio {
  color: var(--cv-vermelho);
}

.kpi-projecao .valor-medio {
  color: var(--cv-verde-escuro);
}

/* Precisa da mesma especificidade de ".kpi-projecao .valor-medio" (2 classes)
   pra realmente vencer o verde quando o saldo projetado é negativo — só
   ".valor-negativo" sozinho (1 classe) perderia. */
.kpi-projecao .valor-medio.valor-negativo {
  color: var(--cv-ambar);
}

/* Sparkline simples da projeção (dado já calculado por projecao.js,
   só apresentado de outro jeito — sem inventar métrica nova). */
.projecao-grafico {
  display: block;
  margin: var(--cv-esp-2) 0 0;
  width: 100%;
  height: 40px;
}

.projecao-grafico .linha {
  fill: none;
  stroke: var(--cv-verde);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.projecao-grafico .linha.negativa {
  stroke: var(--cv-vermelho);
}

.projecao-grafico .zero {
  stroke: var(--cv-borda);
  stroke-width: 1;
}

/* Saldo negativo é alerta, não pagamento — âmbar, nunca vermelho (que já é
   a cor de saída/pagamento em toda a aplicação, inclusive na mesma tela). */
.valor-negativo {
  color: var(--cv-ambar);
}

/* Projeção é tela cheia, sem restrição de caber numa viewport (ao contrário
   da Início) — os 3 cartões do topo podem respirar mais que na versão
   compacta. */
.pj-cartoes {
  margin-bottom: var(--cv-esp-4);
}

.pj-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cv-esp-2) var(--cv-esp-5);
  color: var(--cv-texto-secundario);
  font-size: 13px;
  margin-bottom: var(--cv-esp-4);
}

.pj-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cv-esp-4);
  font-size: 13px;
  color: var(--cv-texto-secundario);
  margin-bottom: var(--cv-esp-2);
}

.pj-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pj-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.pj-swatch-receber {
  background: var(--cv-azul);
}

.pj-swatch-pagar {
  background: var(--cv-vermelho);
}

/* Título curto acima do gráfico — deixa explícito o que as barras mostram,
   sem virar uma tela/conceito novo (é só um rótulo, mesmo padrão do h3
   versalete discreto já usado nos outros grupos). */
.pj-grafico-titulo {
  margin-bottom: var(--cv-esp-2);
}

/* Gráfico único da Projeção de caixa em tela cheia: barras de entradas/saídas
   previstas por dia (mesmo dado da tabela abaixo). O saldo projetado não
   aparece mais aqui — está na tabela, com destaque no dia de menor saldo.
   width:100% + height:auto (sem preserveAspectRatio="none") escala a largura
   e a altura pela mesma proporção — os `text` internos do eixo não
   distorcem. */
.grafico-projecao {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--cv-esp-2) 0 var(--cv-esp-4);
}

.pj-barra-receber {
  fill: var(--cv-azul);
}

.pj-barra-pagar {
  fill: var(--cv-vermelho);
}

/* Rótulo de valor em cada barra ("+ R$ …" / "– R$ …") — só a cor já diz
   entrada x saída (azul/vermelho, mesma paleta das barras e do resto do
   app), o sinal é reforço de leitura pra quem não distingue bem a cor. */
.pj-rotulo-barra {
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--cv-fonte);
}

.pj-rotulo-receber {
  fill: var(--cv-azul);
}

.pj-rotulo-pagar {
  fill: var(--cv-vermelho);
}

.pj-grade {
  stroke: var(--cv-borda);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pj-grade-zero {
  stroke: var(--cv-texto-terciario);
}

.pj-eixo-texto {
  fill: var(--cv-texto-terciario);
  font-size: 11px;
  font-family: var(--cv-fonte);
}

/* Comparativo "Entradas x pagamentos previstos" da Visão geral — duas barras
   horizontais escaladas pelo mesmo máximo (mesmos totais dos cartões acima). */
.barra-comparativo {
  display: grid;
  grid-template-columns: 128px 1fr auto;
  align-items: center;
  gap: var(--cv-esp-3);
  margin-bottom: var(--cv-esp-2);
}

.barra-comparativo .rotulo {
  font-size: 13px;
  color: var(--cv-texto-secundario);
}

.barra-comparativo .trilha {
  background: var(--cv-fundo);
  border-radius: var(--cv-raio-pequeno);
  height: 14px;
  overflow: hidden;
}

.barra-comparativo .preenchimento {
  height: 100%;
  border-radius: var(--cv-raio-pequeno);
}

.barra-comparativo .preenchimento.receber {
  background: var(--cv-azul);
}

.barra-comparativo .preenchimento.pagar {
  background: var(--cv-vermelho);
}

.barra-comparativo .valor {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.painel-30dias {
  background: var(--cv-superficie);
  border: 1px solid var(--cv-borda);
  border-radius: var(--cv-raio);
  padding: 7px var(--cv-esp-3);
  margin-bottom: var(--cv-esp-2);
}

.painel-30dias h3 {
  margin-bottom: 2px;
}

/* Cabeçalho de seção com ação "Ver todos" — reaproveita a navegação por tela
   que o menu lateral já usa (mostrarTela), só mais um atalho pro mesmo lugar. */
.secao-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--cv-esp-3);
}

.secao-cabecalho h3 {
  margin-bottom: 0;
}

.link-ver-todos {
  background: transparent;
  border: none;
  color: var(--cv-verde-escuro);
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  margin-top: 0;
  width: auto;
  cursor: pointer;
}

.link-ver-todos:hover {
  text-decoration: underline;
  background: transparent;
}

/* Campo de logo com botão em português — o "Choose File"/"No file chosen"
   nativo do navegador não pode ser traduzido por CSS, então o input real fica
   visualmente oculto (mas ainda focável/acessível por teclado) atrás de um
   label estilizado como botão; clicar no label ainda abre o seletor nativo do
   sistema operacional (for="id"), só o texto ao redor é nosso. */
.campo-arquivo-grupo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--cv-esp-3);
}

.rotulo-solto {
  font-size: 13px;
  font-weight: 600;
  color: var(--cv-texto-secundario);
}

.campo-arquivo {
  display: flex;
  align-items: center;
  gap: var(--cv-esp-3);
  flex-wrap: wrap;
}

/* input[type="file"] (acima) tem especificidade 0,1,1 — maior que uma classe
   sozinha (0,1,0) — e o Pico usa width:100% nele; sem repetir o atributo
   aqui, o campo "oculto visualmente" (técnica padrão de acessibilidade, não
   display:none) perdia a disputa e ficava largo o bastante pra estourar a
   rolagem horizontal da tela (achado real, não só teórico — medido via
   getBoundingClientRect, não suposição a partir do CSS-fonte). */
input[type="file"].campo-arquivo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.campo-arquivo-botao {
  margin-top: 0;
  cursor: pointer;
}

.campo-arquivo-nome {
  font-size: 13px;
  color: var(--cv-texto-terciario);
}

/* Linha inferior da Visão geral — 3 cards compactos e equivalentes (Onde está
   seu dinheiro hoje / Próximos recebimentos / Próximos pagamentos), cada um
   no máximo 2 linhas de conteúdo; "Ver todos" abre a tela cheia pro resto. */
.grade-inferior {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cv-esp-3);
}

.card-inferior {
  background: var(--cv-superficie);
  border: 1px solid var(--cv-borda);
  border-radius: var(--cv-raio);
  padding: 7px var(--cv-esp-3);
  margin-bottom: 0;
  min-width: 0;
}

.card-inferior .secao-cabecalho {
  margin-bottom: 2px;
}

.card-inferior h3 {
  margin-bottom: 0;
}

.card-inferior .linha-titulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .grade-inferior {
    grid-template-columns: 1fr;
  }
}

.linha-titulo {
  color: var(--cv-texto);
}

.linha-valor {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==========================================================================
   Formulários
   ========================================================================== */

/* Formulário compacto (Novo lançamento e afins) — largura reduzida, porque
   um campo esticando 800px+ é difícil de escanear; campos relacionados
   lado a lado em vez de empilhados um por um. */
.form-compacto {
  max-width: 820px;
}

.grade-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--cv-esp-4);
}

@media (max-width: 600px) {
  .grade-campos {
    grid-template-columns: 1fr;
  }
}

/* Campos secundários/opcionais, recolhidos por padrão — reduz o formulário
   ao essencial na primeira olhada, sem esconder nada que seja obrigatório. */
.mais-detalhes {
  margin-bottom: var(--cv-esp-3);
}

.mais-detalhes[open] summary {
  margin-bottom: var(--cv-esp-2);
}

#formRelatorio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cv-esp-3);
  align-items: flex-end;
  margin-bottom: var(--cv-esp-4);
}

/* Sem largura mínima, "Conta"/"Natureza"/"Cliente" colapsavam pro tamanho do
   texto do option mais curto (às vezes só a seta), ficando ilegíveis assim
   que a lista real de contas/naturezas/pessoas do cliente for maior. */
#formRelatorio select,
#formRelatorio input {
  min-width: 160px;
}

/* Pico deixa button[type=submit] com width:100% por padrão (bom pra formulário
   vertical, ruim numa barra de filtros horizontal) — aqui os botões ficam do
   tamanho do texto, lado a lado com "Baixar PDF". */
/* Nessas duas barras horizontais (filtros de relatório e filtros rápidos),
   o alinhamento vem do "align-items: flex-end" do container — a margem
   inferior padrão do label quebraria esse alinhamento com os botões ao lado. */
#formRelatorio label,
.filtros-rapidos label {
  margin-bottom: 0;
}

/* Cabeçalho auto-explicativo de cada relatório gerado — título, empresa,
   período, filtros e data/hora de emissão, sempre visíveis junto do
   resultado (mesma exigência que já vale pro PDF). */
.relatorio-cabecalho {
  margin-bottom: var(--cv-esp-3);
  padding-bottom: var(--cv-esp-3);
  border-bottom: 1px solid var(--cv-borda);
}

.relatorio-cabecalho h3 {
  margin-bottom: 4px;
}

.relatorio-meta {
  margin: 2px 0;
  font-size: 13px;
  color: var(--cv-texto-secundario);
}

.relatorio-emitido {
  font-size: 12px;
  color: var(--cv-texto-terciario);
}

.relatorio-totais {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cv-esp-2) var(--cv-esp-5);
  margin-top: var(--cv-esp-3);
  font-size: 14px;
}

.relatorio-totais strong {
  font-variant-numeric: tabular-nums;
}

fieldset {
  border: 1px solid var(--cv-borda);
  border-radius: var(--cv-raio-pequeno);
  padding: var(--cv-esp-3) var(--cv-esp-4) var(--cv-esp-4);
  margin-bottom: var(--cv-esp-4);
}

legend {
  font-size: 12px;
  font-weight: 600;
  color: var(--cv-texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 4px;
}

.linha-conta {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.linha-conta .paContaNome {
  flex: 2;
}

.linha-conta .paContaTipo {
  flex: 1;
}

.linha-conta .paContaSaldo {
  flex: 1;
}

#listaLixeira,
.ajuda-conteudo {
  font-size: 14px;
}

#listaLixeira {
  list-style: none;
  padding: 0;
}

#listaLixeira li {
  padding: var(--cv-esp-2) 0;
  border-bottom: 1px solid var(--cv-borda);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cv-esp-2);
}

.ajuda-conteudo h3 {
  margin-top: var(--cv-esp-4);
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  color: var(--cv-texto);
}

.ajuda-conteudo p {
  color: var(--cv-texto-secundario);
  line-height: 1.55;
}

footer#rodape {
  margin-top: var(--cv-esp-4);
  padding-top: var(--cv-esp-2);
  border-top: 1px solid var(--cv-borda);
  color: var(--cv-texto-terciario);
}

.filtros-rapidos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cv-esp-2);
  align-items: flex-end;
  margin-bottom: var(--cv-esp-4);
}

/* Sem isso, os 5 botões de filtro (Hoje/7 dias/30 dias/Vencidos/Todos) eram
   visualmente idênticos — a lista mudava ao clicar, mas nada na tela dizia
   qual filtro estava valendo. */
.filtros-rapidos button.ativo {
  background: var(--cv-verde);
  color: #fff;
  border-color: var(--cv-verde);
}

/* ==========================================================================
   Listagens — linha confortável, valor alinhado à direita e destacado,
   status em selo discreto, ações agrupadas.
   ========================================================================== */

/* Movimentações, Receber e Pagar viraram tabela (.tabela-extrato, mais
   abaixo) — esses 3 ids saíram desta regra de lista com <li>. */
#listaBancosCaixa,
#listaPessoas,
#listaNaturezas,
#listaContas,
#listaProximosRecebimentos,
#listaProximosPagamentos {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
}

#listaBancosCaixa li,
#listaPessoas li,
#listaNaturezas li,
#listaContas li,
#listaProximosRecebimentos li,
#listaProximosPagamentos li {
  padding: 10px 2px;
  border-bottom: 1px solid var(--cv-borda);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cv-esp-3);
  flex-wrap: wrap;
}

#listaBancosCaixa li:hover,
#listaPessoas li:hover,
#listaNaturezas li:hover,
#listaContas li:hover {
  background: var(--cv-fundo);
}

/* Os 3 cards inferiores da Visão geral são bem mais baixos que as telas
   cheias que reaproveitam a regra acima — precisam de menos respiro por
   linha pra caber sem rolagem. */
#listaContas li,
#listaProximosRecebimentos li,
#listaProximosPagamentos li {
  padding: 4px 2px;
}

.acoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.acoes button {
  margin: 0;
  padding: 4px 10px;
  font-size: 12px;
}

details {
  margin-top: var(--cv-esp-4);
  border: 1px solid var(--cv-borda);
  border-radius: var(--cv-raio-pequeno);
  padding: 10px 14px;
}

details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--cv-texto-secundario);
}

details form {
  margin-top: var(--cv-esp-3);
}

/* ==========================================================================
   Tabelas
   ========================================================================== */

.tabela-scroll {
  overflow-x: auto;
}

.pj-nota-tabela {
  margin: 0 0 6px;
}

#tabelaProjecao {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

#tabelaProjecao thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cv-texto-secundario);
  border-bottom: 2px solid var(--cv-borda);
}

#tabelaProjecao th,
#tabelaProjecao td {
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px solid var(--cv-borda);
  font-variant-numeric: tabular-nums;
}

#tabelaProjecao th:first-child,
#tabelaProjecao td:first-child {
  text-align: left;
  font-variant-numeric: normal;
}

#tabelaProjecao tbody tr:hover {
  background: var(--cv-fundo);
}

/* Pico pinta o fundo em cada <td> (não no <tr>) — por isso o destaque
   precisa mirar as células, senão a cor fica escondida atrás delas. Âmbar
   (não vermelho) pelo mesmo motivo da linha do gráfico logo acima. */
#tabelaProjecao tr.linha-negativa td {
  color: var(--cv-ambar);
  font-weight: 700;
  background: var(--cv-ambar-suave);
}

/* Destaque discreto do dia de menor saldo do período, mesmo quando esse
   saldo é positivo (e por isso não entra na regra âmbar acima, que é só
   pra saldo negativo) — uma borda fina à esquerda, sem competir com o
   âmbar quando os dois coincidem no mesmo dia. */
#tabelaProjecao tr.linha-menor-saldo td:first-child {
  border-left: 3px solid var(--cv-texto-terciario);
}

#tabelaProjecao tr.linha-negativa.linha-menor-saldo td:first-child {
  border-left-color: var(--cv-ambar);
}

.etiqueta-menor-saldo {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cv-texto-terciario);
  background: var(--cv-fundo);
  border-radius: var(--cv-raio-pequeno);
  padding: 1px 6px;
  margin-left: 6px;
  white-space: nowrap;
}

#tabelaProjecao tr.linha-negativa .etiqueta-menor-saldo {
  color: var(--cv-ambar);
}

/* ==========================================================================
   Extratos (Movimentações, Receber, Pagar) — tabela de verdade, com cabeçalho
   de coluna fixo, em vez de lista solta com tudo escrito numa frase só. Cada
   coluna diz uma coisa (quando, o quê, situação, quanto, o que fazer);
   entrada em azul, saída/pagamento em vermelho — nunca as duas cores juntas
   no valor de uma mesma linha.
   ========================================================================== */

.tabela-extrato {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabela-extrato thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cv-texto-secundario);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--cv-borda);
  white-space: nowrap;
}

.tabela-extrato td {
  padding: 10px;
  border-bottom: 1px solid var(--cv-borda);
  vertical-align: middle;
}

.tabela-extrato tbody tr:hover {
  background: var(--cv-fundo);
}

.tabela-extrato th.col-valor,
.tabela-extrato td.col-valor {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabela-extrato th.col-acoes,
.tabela-extrato td.col-acoes {
  text-align: right;
  white-space: nowrap;
}

/* Célula "Lançamento" — o que identifica o lançamento em duas linhas: rótulo
   principal (descrição, ou a natureza quando não há descrição) e uma linha
   secundária discreta com o dado de apoio (conta/natureza), sem precisar de
   coluna extra pra isso. */
.extrato-linha-principal {
  display: block;
  color: var(--cv-texto);
}

.extrato-linha-secundaria {
  display: block;
  font-size: 12px;
  color: var(--cv-texto-terciario);
  margin-top: 2px;
}

.extrato-valor-vazio {
  color: var(--cv-texto-terciario);
}

.valor-entrada {
  color: var(--cv-azul);
  font-weight: 700;
}

.valor-saida {
  color: var(--cv-vermelho);
  font-weight: 700;
}

/* Uma ação principal visível na linha (baixar/marcar); editar, excluir e
   reverter ficam atrás de "⋯" — reduz a lista de botões por linha sem
   esconder nada que exista hoje. <details>/<summary> nativo, o mesmo padrão
   de "+ Mais detalhes" que o resto do app já usa — nenhum componente novo. */
.extrato-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.menu-acoes {
  position: relative;
  display: inline-block;
}

.menu-acoes summary {
  list-style: none;
  cursor: pointer;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cv-raio-pequeno);
  color: var(--cv-texto-secundario);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

.menu-acoes summary::-webkit-details-marker,
.menu-acoes summary::marker {
  display: none;
  content: '';
}

.menu-acoes summary:hover,
.menu-acoes[open] summary {
  background: var(--cv-fundo);
}

.menu-acoes-lista {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--cv-superficie);
  border: 1px solid var(--cv-borda);
  border-radius: var(--cv-raio-pequeno);
  box-shadow: var(--cv-sombra);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
  z-index: 5;
}

.menu-acoes-lista button {
  margin: 0;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--cv-texto);
  border-radius: 4px;
}

.menu-acoes-lista button:hover {
  background: var(--cv-fundo);
}

.menu-acoes-lista button.perigo {
  color: var(--cv-vermelho);
  border: none;
  background: transparent;
}

.menu-acoes-lista button.perigo:hover {
  background: var(--cv-vermelho-suave);
}

.tabela-extrato .vazio {
  padding: var(--cv-esp-5) 0;
}

/* Ajuste exclusivo da tela Movimentações — contraste do cabeçalho da tabela,
   labels dos filtros e botões de ação por linha. Escopado por #telaMovimentacoes
   porque .tabela-extrato/.menu-acoes/.filtros-rapidos são classes compartilhadas
   com Receber e Pagar, que não podem mudar. */
#telaMovimentacoes .tabela-extrato thead th {
  background: #f5f8f6;
  color: #43534c;
  font-size: 12px;
  border-bottom: 1px solid var(--cv-borda);
}

#telaMovimentacoes .filtros-rapidos label {
  color: #43534c;
}

#telaMovimentacoes .acaoRealizar,
#telaMovimentacoes .acaoReverter {
  box-sizing: border-box;
  height: 36px;
  margin-top: 0;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  background: var(--cv-superficie);
  color: var(--cv-verde);
  border-color: var(--cv-verde);
}

#telaMovimentacoes .acaoRealizar:hover,
#telaMovimentacoes .acaoReverter:hover {
  background: var(--cv-verde-suave);
}

#telaMovimentacoes .menu-acoes summary {
  width: 36px;
  height: 36px;
}

/* ==========================================================================
   Aviso com desfazer (toast)
   ========================================================================== */

.aviso-desfazer {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cv-texto);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--cv-raio-pequeno);
  font-size: 13px;
  display: flex;
  gap: 16px;
  align-items: center;
  z-index: 10;
  box-shadow: var(--cv-sombra);
}

.aviso-desfazer .botaoDesfazer {
  background: transparent;
  color: #8ec9ff;
  border: none;
  padding: 0;
  margin: 0;
  font-weight: 700;
  cursor: pointer;
}

/* Bloqueia a tela inteira (cliques em qualquer botão/menu) enquanto uma
   operação que já está lendo/gravando dadosAtuais/dirHandle está em
   andamento (trocar de pasta, restaurar cópia, salvar dados da empresa) —
   sem isso, uma ação comum (ex.: "Receber") feita nesse meio-tempo correria
   contra a operação em andamento e um dos dois sobrescreveria o outro
   (achado real do Codex Review: travar handler por handler não escala pra
   cada ação do app, bloquear a tela inteira fecha a brecha de uma vez). */
.overlay-operacao {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 22, 0.35);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-operacao p {
  background: var(--cv-texto);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--cv-raio-pequeno);
  font-size: 14px;
  box-shadow: var(--cv-sombra);
  margin: 0;
}

/* ==========================================================================
   Telas menores (notebook) — aproveitar melhor a largura, sem áreas vazias.
   ========================================================================== */

@media (max-width: 1000px) {
  .grade-kpi {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Orientação de conexão com a pasta de dados (primeiro acesso e reabertura)
   — mesmo .cartao de sempre, só centralizado por ser uma tela de passagem,
   sem formulário. Reaproveita h2/p/.discreto/.alerta/botão já existentes.
   ========================================================================== */

.tela-orientacao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--cv-esp-3);
  max-width: 440px;
  margin: 0 auto;
}

.tela-orientacao p {
  margin: 0;
}

.logo-orientacao {
  width: 100%;
  max-width: 280px;
  height: auto;
}