:root {
  --roxo: #7b2ff2;
  --roxo-2: #6a1fe0;
  --roxo-suave: #f1eaff;
  --verde: #1eb980;
  --vermelho: #f0473e;
  --fundo: #e9edf9;
  --card: #ffffff;
  --linha: #eef1f6;
  --txt: #1e2432;
  --txt2: #8a92a6;
  --raio: 18px;
  --nav-altura: 74px;
  --lateral: 248px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Regra geral: o atributo hidden tem que vencer qualquer display do CSS.
   Sem isso, todo elemento com display:flex/grid continuava aparecendo mesmo
   escondido — já aconteceu com as opções do select e com as linhas do
   formulário de lançamento. */
[hidden] { display: none !important; }
/* Impede o iOS de aumentar a fonte sozinho ao virar a tela. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body, #__next { height: 100%; margin: 0; }
/* A faixa do relógio/bateria/sinal do iPhone usa a cor de fundo da PÁGINA
   (o "canvas"), e quem manda nela é o html — não o body. Enquanto só o body
   tinha cor, aquele lilás subia para trás do relógio. Com o html branco,
   a faixa fica branca e combina com o card do topo. */
html { background: #fff; }
/* O html branco conserta a faixa do relógio, mas o mesmo branco aparecia
   no rodapé quando o Chrome recolhe a barra de endereço. Esta faixa fixa
   devolve a cor da página ali embaixo, atrás de tudo. */
body::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 220px;
  background: var(--fundo); z-index: -1; pointer-events: none;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  /* Branco de propósito: é a cor que o iPhone copia para a faixa do relógio e
     da bateria. O lilás da página vem do .app, logo abaixo — assim a faixa fica
     branca sem mudar nada do que se vê. */
  background: #fff;
  /* min-height, não height: assim o lilás do body acompanha a página inteira
     ao rolar, em vez de acabar na primeira tela e mostrar o branco do html. */
  min-height: 100%; height: auto;
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }

/* ---------- Tela de acesso (login, recuperação, nova senha) ---------- */
.tela-acesso { background: #fff; }
.acesso { min-height: 100vh; min-height: 100dvh; display: flex; }

/* Vitrine da marca — só no computador */
.acesso-vitrine { display: none; }

/* Painel do formulário */
.acesso-painel {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 28px 20px;
  background:
    url('/assets/img/padrao.svg') repeat 0 0 / 230px 230px,
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(165deg, #7b2ff2 0%, #4b18b8 100%);
}
.acesso-caixa {
  width: 100%; max-width: 400px; background: #fff;
  border-radius: 22px; padding: 30px 24px 26px;
  box-shadow: 0 26px 60px rgba(28, 10, 74, .28);
}
.marca { display: flex; align-items: center; gap: 11px; margin-bottom: 24px; }
.acesso-caixa h1 { font-size: 24px; letter-spacing: -.5px; margin: 0 0 6px; }
.acesso-caixa .sub { font-size: 14.5px; margin-bottom: 22px; }

/* Campo com botão de ver senha */
.campo { position: relative; }
.campo input { padding: 13px 15px; height: 50px; border-radius: 13px; }
.campo input::placeholder { color: #b6bdcc; }
.ver-senha {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  border: 0; background: #f3f5fa; color: var(--txt2); cursor: pointer;
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; padding: 0;
}
.ver-senha:hover { background: var(--roxo-suave); color: var(--roxo); }
.ver-senha .olho-fechado { display: none; }
.ver-senha.mostrando .olho-aberto { display: none; }
.ver-senha.mostrando .olho-fechado { display: block; }
.campo input[type=password], .campo input#senha, .campo input#confirma { padding-right: 54px; }

.linha-esqueci { text-align: right; margin-top: 12px; }
.linha-esqueci a { color: var(--roxo); font-size: 13.5px; font-weight: 600; }
.linha-esqueci a:hover { text-decoration: underline; }

.acesso-caixa .botao {
  height: 50px; border-radius: 13px; font-size: 15.5px;
  box-shadow: 0 10px 22px rgba(123, 47, 242, .28);
}
.acesso-rodape {
  margin: 20px 0 0; text-align: center; color: var(--txt2);
  font-size: 13px; line-height: 1.5;
}
.acesso-rodape a { color: var(--roxo); font-weight: 600; }

@media (min-width: 900px) {
  .acesso-vitrine {
    display: flex; flex-direction: column; justify-content: space-between;
    width: 46%; max-width: 620px; padding: 54px 52px; color: #fff;
    background:
      url('/assets/img/padrao.svg') repeat 0 0 / 250px 250px,
      radial-gradient(120% 90% at 12% 8%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 55%),
      linear-gradient(160deg, #7b2ff2 0%, #4b18b8 100%);
  }
  .vitrine-marca { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
  .vitrine-marca img { border-radius: 12px; }
  .acesso-vitrine h2 { font-size: 40px; line-height: 1.12; letter-spacing: -1px; margin: 46px 0 16px; font-weight: 700; }
  .acesso-vitrine p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0; max-width: 400px; }
  .vitrine-itens { list-style: none; padding: 0; margin: 30px 0 0; }
  .vitrine-itens li {
    position: relative; padding-left: 30px; margin-bottom: 14px;
    font-size: 15px; color: rgba(255,255,255,.9);
  }
  .vitrine-itens li::before {
    content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: rgba(255,255,255,.22);
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
  }
  .vitrine-itens li::after {
    content: ''; position: absolute; left: 5.5px; top: 8.5px; width: 6px; height: 3px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
  }
  .vitrine-rodape { font-size: 13px; color: rgba(255,255,255,.6); margin: 0; }

  .acesso-painel { background: #fff; padding: 40px; }
  .acesso-caixa { box-shadow: none; padding: 0; max-width: 380px; }
  .so-celular { display: none; }
}

/* ---------- Formulários ---------- */
h1 { font-size: 21px; margin: 0 0 4px; letter-spacing: -.3px; }
p.sub { margin: 0 0 20px; color: var(--txt2); font-size: 14px; line-height: 1.45; }
label { display: block; font-size: 13px; color: var(--txt2); margin: 14px 0 6px; font-weight: 500; }
input, select {
  width: 100%; padding: 12px 14px; border-radius: 12px; font-size: 15px;
  border: 1px solid #dde3ee; background: #fff; color: var(--txt);
}
/* Data e mês: no iPhone o valor nasce centralizado dentro do campo e destoa de
   todo o resto, que é alinhado à esquerda. Quem centraliza é a caixa interna que
   o Safari desenha com o valor, então é nela que o alinhamento tem de entrar —
   mexer no appearance do campo levaria embora o botão de calendário. */
/* O Safari do iPhone dimensiona campo de data pelo texto que ele mesmo desenha
   e ignora a largura pedida: com "setembro de 2026" dentro, o campo passava da
   borda do card. min-width e max-width não bastaram — quem carrega essa medida
   é a aparência nativa, então no celular ela sai. Não se perde nada ali: o
   iPhone não desenha botão de calendário nesse campo, e o toque abre o seletor
   do mesmo jeito. No PC a aparência nativa fica, com o botão e tudo. */
input[type="date"], input[type="month"] {
  text-align: left; min-width: 0; max-width: 100%;
}
@media (max-width: 899px) {
  input[type="date"], input[type="month"] {
    -webkit-appearance: none; appearance: none;
    width: 100%;
  }
}
input[type="date"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value {
  text-align: left; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
input:focus, select:focus { outline: none; border-color: var(--roxo); box-shadow: 0 0 0 3px var(--roxo-suave); }
.botao {
  width: 100%; margin-top: 22px; padding: 13px; border: 0; border-radius: 12px;
  background: var(--roxo); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
/* Link com cara de botão: sem display:block ele é inline, ignora a largura e
   a altura do padding — e acaba pintado por cima do conteúdo de cima. */
a.botao { display: block; text-align: center; text-decoration: none; }
.botao:hover { background: var(--roxo-2); }
.botao:disabled { opacity: .6; cursor: default; }
.botao.secundario { background: var(--roxo-suave); color: var(--roxo); }
.aviso { margin-top: 14px; padding: 11px 13px; border-radius: 10px; font-size: 13px; }
.aviso.erro { background: #fdecea; color: #b3261e; }
.aviso.ok { background: #e7f7ef; color: #12734f; }

/* ---------- Estrutura do app ---------- */
.app {
  /* Altura da tela, não 100% do body: o body é height:auto, e porcentagem em
     cima de altura indefinida não vale nada — por isso, com pouca coisa na
     página, o lilás parava no fim do conteúdo e sobrava o branco do html. */
  min-height: 100vh;
  min-height: 100dvh;
  /* O fundo da página mora aqui, não no body: ver a regra do body acima. */
  background: var(--fundo);
  /* Folga suficiente pro último card não sumir atrás da barra de menus,
     contando a área segura do aparelho. */
  padding-bottom: calc(var(--nav-altura) + 30px + env(safe-area-inset-bottom, 0px));
}
.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px;
  background: var(--fundo);
}
.topo-titulo { font-size: 17px; font-weight: 700; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--roxo); color: #fff; font-weight: 700; font-size: 14px;
}
.conteudo { padding: 0 12px 24px; }
.conteudo.sem-topo { padding: 0 0 24px; }

.cartao {
  background: var(--card); border-radius: var(--raio); padding: 18px;
  box-shadow: 0 4px 14px rgba(30, 30, 70, .05);
}
.secao-titulo { font-size: 15px; font-weight: 600; color: var(--txt2); margin: 22px 0 10px; }

/* Lista de usuários */
.lista { display: flex; flex-direction: column; gap: 10px; }
.item {
  background: var(--card); border-radius: 14px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 4px 14px rgba(30, 30, 70, .05);
}
.item-inicial {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: var(--roxo-suave); color: var(--roxo);
}
.item-corpo { flex: 1; min-width: 0; }
.item-nome { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.item-email { color: var(--txt2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etiqueta { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.etiqueta.admin { background: var(--roxo-suave); color: var(--roxo); }
.etiqueta.inativo { background: #fdecea; color: #b3261e; }
.etiqueta.terceiros {
  background: #eef1f8; color: #566079; font-size: 10.5px; font-weight: 700;
  vertical-align: 2px; white-space: nowrap;
}
.acoes { display: flex; gap: 6px; flex-shrink: 0; }
.icone-botao {
  border: 0; background: #f3f5fa; color: var(--txt2); cursor: pointer;
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
}
.icone-botao:hover { background: var(--roxo-suave); color: var(--roxo); }
.vazio { text-align: center; color: var(--txt2); font-size: 14px; padding: 30px 10px; }
.vazio-icone {
  width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 18px;
  display: grid; place-items: center; background: var(--roxo-suave); color: var(--roxo);
}

/* ---------- Navegação: celular = abas embaixo ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  /* A faixa do inseto embaixo (o risquinho do iPhone) entra SOMADA na altura.
     Com box-sizing: border-box ela descontava dos 74px, e no app instalado —
     onde o inseto existe e no Safari não — o menu encolhia para 40px. */
  height: calc(var(--nav-altura) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff; border-top: 1px solid var(--linha);
  display: flex; align-items: center; justify-content: space-around;
}
.nav-item {
  border: 0; background: none; cursor: pointer; color: var(--txt2);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11px; padding: 6px 10px; border-radius: 12px; min-width: 62px;
}
.nav-item.ativo { color: var(--roxo); background: #f3f0fb; }
.nav-fab {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--roxo); color: #fff; font-size: 28px; line-height: 1;
  box-shadow: 0 8px 18px rgba(123, 47, 242, .4);
  display: grid; place-items: center; margin-top: -18px;
}
.nav-marca { display: none; }

/* ---------- PC: menu lateral, layout largo ---------- */
@media (min-width: 900px) {
  .app { padding-bottom: 0; padding-left: var(--lateral); }
  .nav {
    top: 0; right: auto; bottom: 0; width: var(--lateral); height: 100%;
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    gap: 4px; padding: 20px 14px; border-top: 0; border-right: 1px solid var(--linha);
  }
  .nav-marca {
    display: block;
    padding: 4px 8px 18px; font-weight: 800; font-size: 22px; letter-spacing: -.5px;
  }
  .nav-marca span { color: var(--roxo); }
  .nav-item {
    flex-direction: row; justify-content: flex-start; gap: 12px;
    font-size: 14px; padding: 11px 12px; width: 100%; font-weight: 500;
  }
  .nav-fab {
    order: -1; width: 100%; height: 44px; border-radius: 12px; margin: 0 0 14px;
    font-size: 15px; font-weight: 600; gap: 8px; display: flex; align-items: center; justify-content: center;
  }
  .topo { padding: 22px 32px 10px; background: transparent; }
  .topo-titulo { font-size: 22px; }
  .conteudo { padding: 0 20px 40px; max-width: 1100px; }
  .colunas { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: start; }
}

/* Ajustes finos da navegacao */
.fab-texto { display: none; }
.fab-sinal { font-size: 28px; line-height: 1; }
.so-pc { display: none !important; }
@media (min-width: 900px) {
  .nav-marca { order: -2; }
  .nav .nav-fab { order: -1; }
  .fab-texto { display: inline; }
  .fab-sinal { font-size: 18px; }
  .so-pc { display: flex !important; }
}

/* ---------- Modal ---------- */
/* 82 e não 60: modal é pergunta, e pergunta fica na frente do que a fez. A
   folha (fatura, holerite, grupo) vive em 80, e o "Reabrir folha" abria a
   confirmação ATRÁS dela — dava para ver o modal espiando pela beirada e não
   tinha como confirmar. Continua abaixo da calculadora (85) e do painel de
   select (90/95), que são o que se abre de dentro de um modal. */
.fundo-modal {
  position: fixed; inset: 0; z-index: 82; background: rgba(20, 16, 45, .45);
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
.modal {
  background: #fff; width: 100%; max-width: 460px;
  border-radius: 22px 22px 0 0;
  padding: 22px 20px calc(26px + env(safe-area-inset-bottom, 0px));
  /* dvh conta a barra do navegador que aparece e some; com vh o modal ficava
     mais alto que a área visível e o cabeçalho saía por cima da tela. */
  /* Folha curta continua do tamanho do conteúdo; a que é grande demais agora
     pode ir até o topo em vez de parar a 8% dele. */
  max-height: 100vh; max-height: 100dvh;
  overflow-y: auto; overflow-x: hidden;
}
.modal h2 { margin: 0 0 4px; font-size: 18px; }
.modal-fechar {
  float: right; border: 0; background: #f3f5fa; color: var(--txt2);
  width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; line-height: 1;
}
@media (min-width: 700px) {
  .fundo-modal { align-items: center; padding: 20px; }
  .modal { border-radius: 20px; max-height: 92dvh; }
}

/* ---------- Ajustes da versao PHP (links no lugar de botoes) ---------- */
a { text-decoration: none; color: inherit; }
.avatar { display: grid; place-items: center; text-decoration: none; }
.nav-item, .nav-fab { text-decoration: none; }
.item { color: inherit; }
a.item:hover { background: #fafbff; }
.fundo-modal[hidden] { display: none; }
.acoes form { display: inline; margin: 0; }
.acoes button { cursor: pointer; }

/* Etiqueta do plano de acesso */
.etiqueta.plano { background: #e7f7ef; color: #12734f; }
.item-corpo .item-email + .item-email { margin-top: 2px; }

/* Marca gvellum */
.marca-icone { background: none; border-radius: 12px; display: block; }
.marca-nome { font-size: 26px; font-weight: 800; letter-spacing: -.6px; color: var(--txt); }
.marca-nome em { font-style: normal; font-weight: 500; color: var(--roxo); }
.vitrine-marca em { font-style: normal; font-weight: 500; color: rgba(255,255,255,.72); }
.nav-marca em { font-style: normal; font-weight: 500; color: var(--txt2); }
.nav-marca img { vertical-align: -6px; margin-right: 8px; border-radius: 7px; }

/* ---------- Contas ---------- */
.conta-icone {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px;
  display: grid; place-items: center;
}
/* Peso normal: com tudo em negrito, nada se destacava — o número já chama
   atenção pela cor. O negrito fica só para os totais. */
.valor { font-weight: 500; font-size: 15px; letter-spacing: -.2px; }
.valor.positivo { color: var(--verde); }
.valor.negativo { color: var(--vermelho); }
.etiqueta.fora { background: #eef1f6; color: var(--txt2); }
.icone-botao.perigo:hover { background: #fdecea; color: #b3261e; }
.arquivadas { opacity: .6; }
/* Holerite arquivado: continua na lista, mas apagado. */
.conta-card.arquivada { opacity: .6; }

/* Esconde os valores quando o olho está desligado */
.valores-ocultos .valor { filter: blur(9px); user-select: none; }

/* Seletor de cor */
.cores { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.cor-opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.cor-opcao span {
  display: block; width: 30px; height: 30px; border-radius: 50%;
  background: var(--c); cursor: pointer; border: 3px solid transparent;
}
.cor-opcao input:checked + span { border-color: var(--txt); }
.cor-opcao input:focus-visible + span { outline: 2px solid var(--roxo); outline-offset: 2px; }

.linha-check { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: var(--txt); font-size: 14px; }
.linha-check input { width: auto; }

/* ---------- Tela inicial ---------- */
.olho {
  border: 0; background: none; color: var(--txt2); cursor: pointer;
  width: 40px; height: 32px; display: inline-grid; place-items: center;
}
.olho:hover { color: var(--roxo); }
.saldo-linha {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 20px; padding: 0;
}
.mini { display: flex; align-items: center; gap: 10px; }
/* O bloco da direita (Despesas) é o espelho do da esquerda: a bolha vai pro
   canto direito e o texto encosta nela, do mesmo jeito que o verde faz na
   esquerda. Antes os dois começavam pela bolha e o vermelho ficava no meio. */
.saldo-linha .mini:last-child { flex-direction: row-reverse; text-align: right; }
.mini-rotulo { color: var(--txt2); font-size: 13px; }
.bolha {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
}
.bolha.verde { background: var(--verde); }
.bolha.vermelha { background: var(--vermelho); }
.secao-cabecalho { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 10px; }
.secao-acao { color: var(--roxo); font-size: 14px; font-weight: 600; }
.secao-recolher {
  border: 0; background: none; color: var(--txt2); cursor: pointer; padding: 4px;
  display: grid; place-items: center; border-radius: 9px;
}
.secao-recolher:hover { color: var(--roxo); background: var(--roxo-suave); }
.secao-recolher.recolhido { color: var(--roxo); }

/* ---------- Painel de contas / cartões da tela inicial ---------- */
.painel {
  background: var(--card); border-radius: var(--raio); padding: 4px 0 0;
  box-shadow: 0 4px 14px rgba(30, 30, 70, .05); overflow: hidden;
}
.painel[hidden] { display: none; }

.painel-linha { position: relative; display: flex; align-items: center; padding: 0 16px 0 14px; }
.painel-linha + .painel-linha::before,
.painel-abas + .painel-linha::before,
.painel-total::before {
  content: ''; position: absolute; left: 64px; right: 16px; top: 0; height: 1px; background: var(--linha);
}
.painel-total::before { left: 16px; }

.painel-alvo {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px 0;
}
.painel-logo {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  display: grid; place-items: center;
}
.painel-logo.com-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--linha); }
.painel-logo img { width: 26px; height: 26px; object-fit: contain; border-radius: 50%; }

.painel-corpo { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.painel-nome { font-size: 15px; font-weight: 600; color: var(--txt); letter-spacing: -.2px; }
.painel-nome small { font-weight: 400; color: var(--txt2); font-size: 13px; margin-left: 2px; }
.painel-corpo .valor { font-size: 15px; }
.painel-corpo .valor:not(.positivo):not(.negativo) { color: var(--txt2); }

.painel-mais {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; margin-left: 8px;
  display: grid; place-items: center; color: var(--roxo);
}
.painel-mais:hover { background: var(--roxo-suave); }

.painel-total {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px; font-size: 14px; font-weight: 700; color: var(--txt); letter-spacing: -.2px;
}
.valor-total { font-size: 15px; font-weight: 700; letter-spacing: -.3px; }
/* "de R$ X em objetivos" embaixo do rótulo, sem engordar a linha. */
.painel-total > span > small {
  display: block; font-size: 11px; font-weight: 500; color: var(--txt2); margin-top: 2px;
}

/* Abas de fatura dentro do painel dos cartões */
.painel-abas { display: flex; gap: 8px; padding: 14px 16px 16px; }
.painel-aba {
  flex: 1; text-align: center; padding: 11px 8px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--txt2); background: #f3f5fa;
  /* Virou <button> para trocar sem recarregar: precisa desmanchar o visual
     que o navegador dá de graça a um botão. */
  border: 0; cursor: pointer; font-family: inherit; -webkit-appearance: none;
  transition: background .15s, color .15s;
}
.painel-aba.ativa { background: var(--roxo); color: #fff; }
.painel-aba:hover:not(.ativa) { background: #e9edf6; color: var(--txt); }

.painel-mais svg { pointer-events: none; }
@media (max-width: 400px) {
  .painel-aba { font-size: 13px; padding: 10px 6px; }
  .painel-nome small { display: block; margin-left: 0; }
}

/* Acabamento das listas no celular */
.etiqueta { white-space: nowrap; }
.item-meta { color: var(--txt2); font-size: 13px; margin-top: 2px; }
@media (max-width: 480px) {
  .conta-icone { width: 40px; height: 40px; flex-basis: 40px; }
  .icone-botao { width: 32px; height: 32px; }
  .acoes { gap: 4px; }
  .item { padding: 12px 13px; gap: 10px; }
  .item-nome { font-size: 14.5px; }
}

/* Linhas de dado (plano, resumos) */
.linha-dado {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-top: 1px solid var(--linha); font-size: 14px; color: var(--txt2);
}
.linha-dado strong { color: var(--txt); font-weight: 600; }

/* ---------- Card do topo (marca + conta + saldo) ---------- */
.topo-card {
  /* O mesmo papel de parede do login e do cabeçalho roxo, aqui em roxo bem
     apagado: dá textura ao branco sem atrapalhar a leitura do saldo. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E %3Cg fill=%22none%22 stroke=%22%237b2ff2%22 stroke-opacity=%22.075%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cg transform=%22translate(26,30)%22%3E %3Cpath d=%22M12 2v20%22/%3E %3Cpath d=%22M17 6.5C17 4.6 14.8 3.5 12 3.5S7 4.6 7 6.5s2 2.8 5 3.5 5 1.6 5 3.5-2.2 3-5 3-5-1.1-5-3%22/%3E %3C/g%3E %3Cg transform=%22translate(130,20)%22%3E %3Cpath d=%22M2 20V11M9 20V4M16 20v-6%22/%3E %3C/g%3E %3Cg transform=%22translate(198,58)%22%3E %3Cpath d=%22M1 15l6-7 5 4 7-9%22/%3E %3Cpath d=%22M19 3h-5M19 3v5%22/%3E %3C/g%3E %3Cg transform=%22translate(52,112)%22%3E %3Ccircle cx=%2210%22 cy=%2210%22 r=%229%22/%3E %3Cpath d=%22M10 5.5v9M12.5 7.6c0-1-1.1-1.6-2.5-1.6s-2.5.6-2.5 1.6 1 1.4 2.5 1.9 2.5.9 2.5 1.9-1.1 1.6-2.5 1.6-2.5-.6-2.5-1.6%22/%3E %3C/g%3E %3Cg transform=%22translate(150,120)%22%3E %3Crect x=%221%22 y=%224%22 width=%2220%22 height=%2214%22 rx=%223%22/%3E %3Cpath d=%22M1 9h20%22/%3E %3Ccircle cx=%2216.5%22 cy=%2213.5%22 r=%221.3%22 fill=%22%23ffffff%22 fill-opacity=%22.13%22 stroke=%22none%22/%3E %3C/g%3E %3Cg transform=%22translate(24,196)%22%3E %3Cpath d=%22M2 11a8 6 0 1 0 16 0 8 6 0 1 0-16 0%22/%3E %3Cpath d=%22M18.2 9.2c1 .3 1.6 1 1.8 1.9M6.5 6.4A8 8 0 0 1 12 5.2%22/%3E %3Cpath d=%22M5.5 15.4V18M14.5 15.4V18%22/%3E %3C/g%3E %3Cg transform=%22translate(132,200)%22%3E %3Cellipse cx=%2210%22 cy=%225%22 rx=%228%22 ry=%223%22/%3E %3Cpath d=%22M2 5v5c0 1.7 3.6 3 8 3s8-1.3 8-3V5%22/%3E %3Cpath d=%22M2 12v4c0 1.7 3.6 3 8 3s8-1.3 8-3v-4%22/%3E %3C/g%3E %3Cg transform=%22translate(210,168)%22%3E %3Ccircle cx=%224%22 cy=%224%22 r=%222.6%22/%3E %3Ccircle cx=%2215%22 cy=%2215%22 r=%222.6%22/%3E %3Cpath d=%22M16 3L3 16%22/%3E %3C/g%3E %3C/g%3E %3C/svg%3E") repeat 0 0 / 215px 215px,
    var(--card);
  border-radius: 0 0 28px 28px;
  padding: 14px 18px 20px;
  margin-bottom: 20px;
  box-shadow: 0 6px 22px rgba(30, 30, 70, .06);
}
/* Faixa do relógio/bateria no iPhone instalado na tela de início.
   Sem isso ela mostra o fundo lilás da página e destoa do card branco.
   É fixa de propósito: assim continua branca mesmo com a página rolando. */
body::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: env(safe-area-inset-top, 0px); background: #fff;
  pointer-events: none;
}
.topo-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* O nome pequeno ao lado do desenho: quem manda no cabeçalho é o mês, não a
   marca. Ela fica como assinatura, discreta. */
/* O desenho do "g" mais a palavra "vellum": juntos eles formam a marca, então
   o vão entre os dois é quase nenhum. Pequena e preta, como assinatura. */
.topo-marca {
  display: flex; align-items: center; gap: 1px;
  font-size: 13px; font-weight: 700; letter-spacing: -.2px; color: var(--txt);
  /* O desenho do "g" tem folga dentro do próprio quadro; esta puxada compensa
     ela para o traço encostar na margem, e não ficar boiando. */
  margin-left: -5px;
}
.topo-marca img { border-radius: 9px; width: 34px; height: 34px; }
/* O "g" solto, sem caixa: herda a cor do cabeçalho onde estiver. */
.marca-g { width: 27px; height: 27px; flex: none; color: var(--roxo); }
.topo-card.roxo .marca-g { color: #fff; }
.topo-marca em { font-style: normal; font-weight: 500; color: var(--roxo); }
/* Só na tela "Mais": a marca aparece grande, como era antes. Nas outras ela
   divide a barra com o título e o mês, e por isso fica pequena. */
.tela-mais .topo-marca { font-size: 19px; gap: 2px; margin-left: -7px; }
.tela-mais .marca-g { width: 38px; height: 38px; }

.avatar {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(150deg, #8b5cf6, #6420cc); color: #fff;
  font-weight: 700; font-size: 17px; display: grid; place-items: center;
  flex-shrink: 0;
}

/* Mês: em destaque, negrito */
.topo-mes { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 14px; }
/* Setas do mês: discretas ao lado do nome, com área de toque de sobra. A cor
   segue o cabeçalho — claro no roxo, escuro no branco. */
.topo-mes-seta {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%; color: var(--txt2);
}
.topo-mes-seta:hover { background: #f3f0fb; color: var(--roxo); }
.topo-mes-seta svg { stroke-width: 2.4; }
.topo-card.roxo .topo-mes-seta { color: rgba(255, 255, 255, .8); }
.topo-card.roxo .topo-mes-seta:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.seletor-mes {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer; color: var(--txt);
  font-size: 20px; font-weight: 700; letter-spacing: -.4px;
  padding: 6px 12px; border-radius: 12px;
}
.seletor-mes svg { stroke-width: 2.2; color: var(--roxo); }
.seletor-mes:hover { background: #f3f0fb; }

/* Título nas telas sem mês */
.topo-linha-titulo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 16px;
}
.topo-titulo { font-size: 24px; font-weight: 700; letter-spacing: -.6px; margin: 0; }

/* Saldo dentro do card do topo */
.bloco-saldo { margin-top: 16px; }
.saldo-linha-valor {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 2px 0 14px;
}
.saldo-valor { font-size: 34px; font-weight: 700; letter-spacing: -1px; }
.olho {
  border: 0; background: none; color: var(--txt2); cursor: pointer;
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
  flex-shrink: 0;
}
.olho:hover { color: var(--roxo); }

.botao-redondo {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--txt2); display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(30, 30, 70, .07);
}
.botao-redondo:hover { color: var(--roxo); }

@media (min-width: 900px) {
  .topo-card { margin: 20px 32px 22px; border-radius: 22px; padding: 20px 26px 24px; }
  .topo-marca { font-size: 14px; }
  .topo-titulo { font-size: 27px; }
  .seletor-mes { font-size: 22px; }
  .saldo-valor { font-size: 38px; }
}

/* Grade de meses */
.mes-navegacao {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 16px 0 14px; font-size: 17px; font-weight: 700;
}
.mes-navegacao .botao-redondo { width: 34px; height: 34px; background: #f3f5fa; box-shadow: none; }
.mes-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mes-grade button {
  border: 0; background: #f3f5fa; color: var(--txt); cursor: pointer;
  padding: 12px 6px; border-radius: 12px; font-size: 14px; font-weight: 500;
}
.mes-grade button:hover { background: var(--roxo-suave); color: var(--roxo); }
.mes-grade button.atual { background: var(--roxo); color: #fff; font-weight: 700; }

@media (min-width: 900px) {
  .topo { grid-template-columns: 1fr auto auto; padding: 22px 32px 12px; gap: 16px; }
  .topo-centro { justify-content: flex-start; order: -1; }
  .topo .avatar { order: 3; }
  .topo-direita { order: 2; }
  .topo-titulo { font-size: 22px; }
  .seletor-mes { font-size: 22px; padding-left: 0; }
}

/* Linhas de dado (plano, resumos) */
.linha-dado {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-top: 1px solid var(--linha); font-size: 14px; color: var(--txt2);
}
.linha-dado strong { color: var(--txt); font-weight: 600; }


/* Receitas e despesas: valor não pode quebrar linha */
.mini { min-width: 0; }
.mini > div { min-width: 0; }
.mini .valor { white-space: nowrap; font-size: 16px; }
.mini-rotulo { white-space: nowrap; }
@media (max-width: 400px) {
  .mini .valor { font-size: 15px; letter-spacing: -.3px; }
  .bolha { width: 42px; height: 42px; flex-basis: 42px; }
  .saldo-linha { gap: 6px; }
}

/* ---------- Select padrão com busca ---------- */
.select { position: relative; }
.select-botao {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px; height: 50px; border-radius: 13px; cursor: pointer;
  border: 1px solid #dde3ee; background: #fff; color: var(--txt);
  font-size: 15px; text-align: left;
}
.select-botao:hover { border-color: #c8d1e4; }
.select-botao svg { color: var(--txt2); flex-shrink: 0; }
.select.aberto .select-botao { border-color: var(--roxo); box-shadow: 0 0 0 3px var(--roxo-suave); }
.select-botao span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.select-painel {
  position: absolute; z-index: 90; left: 0; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid #e6ebf5; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(28, 20, 70, .16); overflow: hidden;
}
.select-painel[hidden] { display: none; }
.select-busca { padding: 10px; border-bottom: 1px solid var(--linha); }
.select-busca input { height: 42px; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.select-opcoes { max-height: 260px; overflow-y: auto; padding: 6px; }
/* o atributo hidden precisa vencer o display:flex, senão o filtro não esconde nada */
.select-opcao[hidden], .select-vazio[hidden] { display: none !important; }
.select-opcao {
  width: 100%; display: flex; flex-direction: column; gap: 2px; text-align: left;
  border: 0; background: none; cursor: pointer; color: var(--txt);
  padding: 11px 12px; border-radius: 10px; font-size: 14.5px;
}
.select-opcao:hover { background: #f3f5fa; }
.select-opcao.escolhida { background: var(--roxo-suave); color: var(--roxo); font-weight: 600; }
.select-opcao-desc { font-size: 12.5px; color: var(--txt2); font-weight: 400; }
.select-opcao.escolhida .select-opcao-desc { color: var(--roxo); opacity: .75; }
/* Campo de várias escolhas: quadradinho à direita de cada opção. O painel vive
   no body enquanto está aberto, por isso a classe fica nele e não no select. */
.select-painel.multi .select-opcao-rotulo { flex: 1; }
.select-marca {
  width: 19px; height: 19px; flex: 0 0 19px; margin-left: auto; position: relative;
  border: 1.7px solid #d5dbe8; border-radius: 6px; background: #fff;
}
.select-opcao.escolhida .select-marca { background: var(--roxo); border-color: var(--roxo); }
.select-opcao.escolhida .select-marca::after {
  content: ''; position: absolute; left: 5.5px; top: 1.5px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Marca padrão para quem não tem logo — mantém a lista alinhada. */
.select-icone {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  display: grid; place-items: center; background: #f0f2f8; color: var(--txt2);
}
.select-icone[hidden] { display: none; }
.lanc-campo .select.tem-valor .select-icone { width: 20px; height: 20px; flex-basis: 20px; }
.select-vazio { padding: 14px 12px; color: var(--txt2); font-size: 13.5px; text-align: center; }

/* Endereço buscado pelo CEP */
.cep-resultado {
  margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  background: #f3f5fa; color: var(--txt2); font-size: 13.5px; line-height: 1.5;
}
.cep-resultado strong { color: var(--txt); }
.cep-resultado.erro { background: #fdecea; color: #b3261e; }

/* Barra de busca das listas */
.barra-busca { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; }
.barra-busca input { height: 46px; border-radius: 12px; }
.barra-busca .botao { width: auto; margin: 0; padding: 0 18px; height: 46px; box-shadow: none; }
.limpar-busca { color: var(--txt2); font-size: 13px; text-decoration: underline; white-space: nowrap; }

/* Avatar por sexo: roxo (masculino/indefinido) e rosa (feminino) */
.avatar.feminino { background: linear-gradient(150deg, #f472b6, #db2777); }
.item-inicial.feminino { background: #fde7f3; color: #db2777; }
.avatar { font-size: 15px; letter-spacing: .5px; }

/* Rótulo do saldo com o olho no fim */
.linha-rotulo-saldo {
  display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0;
}
.linha-rotulo-saldo .sub { margin: 0; font-size: 13px; }
.linha-rotulo-saldo .olho { width: 22px; height: 22px; }
.saldo-linha-valor { margin-top: 2px; }

/* Badge do saldo previsto */
.linha-previsto { display: flex; justify-content: center; margin: 2px 0 0; }
.badge-previsto {
  border: 1px solid #e3d8ff; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #f4efff, #ece4ff); color: var(--roxo);
  font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  padding: 5px 12px; transition: background .15s, color .15s, border-color .15s;
}
.badge-previsto:hover { border-color: #cdb8ff; }
.badge-previsto.ativo {
  background: var(--roxo); border-color: var(--roxo); color: #fff;
  box-shadow: 0 4px 12px rgba(123, 47, 242, .28);
}

/* ---------- Avisos flutuantes (topo direito, acima de tudo) ---------- */
.avisos {
  position: fixed; top: 14px; right: 14px; left: 14px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none;
}
.aviso-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 11px;
  width: 100%; max-width: 380px;
  background: #fff; border-radius: 15px; padding: 13px 14px;
  box-shadow: 0 14px 38px rgba(24, 16, 60, .18), 0 2px 6px rgba(24, 16, 60, .06);
  border: 1px solid #eef1f8;
  transform: translateX(115%); opacity: 0;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), opacity .28s;
}
.aviso-toast.entrou { transform: translateX(0); opacity: 1; }
.aviso-toast.saindo { transform: translateX(115%); opacity: 0; }
.aviso-icone {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: var(--verde);
}
.aviso-toast.erro .aviso-icone { background: var(--vermelho); }
.aviso-texto { flex: 1; font-size: 14px; line-height: 1.4; color: var(--txt); padding-top: 3px; }
.aviso-fechar {
  border: 0; background: none; color: var(--txt2); cursor: pointer;
  font-size: 19px; line-height: 1; padding: 2px 4px; border-radius: 8px;
}
.aviso-fechar:hover { background: #f3f5fa; color: var(--txt); }

@media (min-width: 700px) {
  .avisos { left: auto; top: 18px; right: 18px; }
}

/* Aviso embaixo de um campo (CPF, etc.) */
.campo-aviso { margin-top: 7px; font-size: 12.5px; line-height: 1.4; }
.campo-aviso.ok { color: #12734f; }
.campo-aviso.erro { color: #b3261e; font-weight: 500; }
.campo input.campo-invalido { border-color: var(--vermelho); }
.campo input.campo-invalido:focus { box-shadow: 0 0 0 3px #fdecea; }

/* Abas de filtro (Ativos / Inativos) */
.abas {
  display: flex; gap: 8px; margin: 0 0 14px;
  background: #e3e8f6; padding: 5px; border-radius: 14px;
}
.aba {
  flex: 1; text-align: center; padding: 9px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--txt2);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.aba:hover { color: var(--txt); }
.aba.ativa { background: #fff; color: var(--roxo); box-shadow: 0 2px 6px rgba(30, 30, 70, .08); }
.aba-contador {
  background: rgba(0, 0, 0, .07); color: inherit; font-size: 12px; font-weight: 700;
  min-width: 22px; padding: 1px 7px; border-radius: 999px;
}
.aba.ativa .aba-contador { background: var(--roxo-suave); }
/* Três abas na mesma faixa: aperta a fonte e o respiro para caberem no celular. */
.abas.tres .aba { padding: 9px 6px; font-size: 12.5px; gap: 5px; }
.abas.tres .aba-contador { min-width: 19px; padding: 1px 5px; font-size: 11px; }

/* Estado vazio com ilustração */
.estado-vazio { text-align: center; padding: 10px 18px 26px; }
.estado-vazio img { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto 6px; }
.estado-vazio h3 { font-size: 17px; margin: 0 0 8px; letter-spacing: -.3px; }
.estado-vazio .sub { margin: 0; font-size: 14px; line-height: 1.55; }
.estado-vazio strong { color: var(--roxo); }

/* Logos das instituições no select */
.select-escolhido { display: flex; align-items: center; gap: 9px; min-width: 0; }
.select-escolhido span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-img {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px;
  object-fit: contain; background: #fff;
}
.select-img[hidden] { display: none; }
.select-opcao { flex-direction: row; align-items: center; gap: 10px; }
.select-opcao .select-opcao-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Logo no lugar do ícone do tipo, na lista de contas */
.conta-icone img { width: 30px; height: 30px; object-fit: contain; border-radius: 7px; }
.conta-icone.com-logo { background: #fff !important; box-shadow: inset 0 0 0 1px var(--linha); }

/* Interruptor (no lugar do quadradinho de marcar) */
.chave { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 0; cursor: pointer; }
.chave input { position: absolute; opacity: 0; width: 0; height: 0; }
.chave-trilho {
  position: relative; flex: 0 0 46px; width: 46px; height: 27px; border-radius: 999px;
  background: #d7ddec; transition: background .2s; margin-top: 1px;
}
.chave-bola {
  position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(20, 16, 50, .28); transition: transform .2s;
}
.chave input:checked + .chave-trilho { background: var(--roxo); }
.chave input:checked + .chave-trilho .chave-bola { transform: translateX(19px); }
.chave input:focus-visible + .chave-trilho { outline: 2px solid var(--roxo); outline-offset: 2px; }
.chave-texto { font-size: 14.5px; color: var(--txt); line-height: 1.35; }
.chave-texto small { display: block; color: var(--txt2); font-size: 12.5px; margin-top: 3px; }

/* ---------- Card de conta (compacto) ---------- */
.conta-card {
  position: relative;
  background: var(--card); border-radius: 16px;
  padding: 11px 14px 9px 17px;
  box-shadow: 0 1px 3px rgba(28, 22, 66, .04), 0 8px 18px rgba(28, 22, 66, .05);
  margin-bottom: 10px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.conta-card:hover { transform: translateY(-2px); box-shadow: 0 3px 6px rgba(28, 22, 66, .05), 0 14px 28px rgba(28, 22, 66, .1); }
.conta-card.menu-aberto { z-index: 40; }

.conta-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--cor-conta, var(--roxo));
  border-radius: 16px 0 0 16px;
}

.conta-topo { display: flex; align-items: center; gap: 10px; }
.conta-topo .conta-icone {
  width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px;
  background: #fff; box-shadow: 0 1px 5px rgba(28, 22, 66, .12);
}
.conta-topo .conta-icone img { width: 23px; height: 23px; }
.conta-topo .icone-botao { width: 30px; height: 30px; }

.conta-titulo { flex: 1; min-width: 0; }
.conta-nome {
  font-size: 15px; font-weight: 700; letter-spacing: -.3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conta-sub {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--txt2); margin-top: 0;
}
.ponto-sep { opacity: .5; }
.conta-marca { color: var(--roxo); font-weight: 600; }

.conta-valor {
  font-size: 17px; font-weight: 700; letter-spacing: -.4px;
  margin: 8px 0 0; font-variant-numeric: tabular-nums; line-height: 1.15;
}
.conta-rotulo {
  font-size: 11px; color: var(--txt2); display: block; letter-spacing: 0;
  text-transform: none; font-weight: 500;
}

.conta-tendencia {
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--linha);
  font-size: 12px; color: var(--txt2);
}
.tendencia-seta {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  display: grid; place-items: center; background: #eef1f6; color: var(--txt2);
}
.conta-tendencia.desce .tendencia-seta { background: #fdecea; color: var(--vermelho); }
.conta-tendencia.sobe  .tendencia-seta { background: #e7f7ef; color: var(--verde); }
.tendencia-texto { flex: 1; }
.conta-tendencia .valor { font-size: 12.5px; font-weight: 700; color: var(--txt); font-variant-numeric: tabular-nums; }
.conta-tendencia .valor.negativo { color: var(--vermelho); }

/* Menu de ações do card */
.menu-conta { position: relative; flex-shrink: 0; }
.menu-lista {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  background: #fff; border: 1px solid #e6ebf5; border-radius: 14px; padding: 6px;
  box-shadow: 0 14px 34px rgba(28, 20, 70, .16); min-width: 178px;
}
.menu-lista[hidden] { display: none; }
.menu-lista form { margin: 0; }
.menu-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  border: 0; background: none; cursor: pointer; color: var(--txt);
  padding: 11px 12px; border-radius: 10px; font-size: 14.5px; text-align: left;
}
.menu-item:hover { background: #f3f5fa; }
.menu-item.perigo { color: #b3261e; }
.menu-item.perigo:hover { background: #fdecea; }
/* Aviso dentro do menu: explica por que a ação sumiu, sem parecer clicável. */
.menu-item-aviso {
  cursor: default; color: var(--txt2); font-size: 13.5px; line-height: 1.35;
  align-items: flex-start;
}
.menu-item-aviso:hover { background: none; }
.menu-item-aviso svg { flex: none; margin-top: 1px; }

/* ---------- Modal de confirmação ---------- */
.modal-confirmar { text-align: center; padding: 28px 22px 22px; }
.confirmar-icone {
  width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fdecea; color: var(--vermelho);
}
.modal-confirmar h2 { margin: 0 0 8px; font-size: 19px; }
.modal-confirmar .sub { margin: 0 0 22px; font-size: 14.5px; line-height: 1.5; }
.confirmar-acoes { display: flex; gap: 10px; }
.confirmar-acoes .botao { margin: 0; flex: 1; height: 48px; box-shadow: none; }
.botao.perigo { background: var(--vermelho); }
.botao.perigo:hover { background: #d43a31; }
.botao.secundario:hover { background: #e6ddff; }

/* Alternador Despesa | Receita dentro dos modais */
.segmento {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: #eef1f8; border-radius: 14px; padding: 5px; margin-bottom: 6px;
}
/* Com tres opcoes (Todos / Pagos / Em aberto) as colunas viram tres, senao a
   terceira cai sozinha numa segunda linha. */
.segmento.tres { grid-template-columns: repeat(3, 1fr); }
.segmento.tres label { padding: 10px 4px; font-size: 13.5px; }
.segmento input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.segmento label {
  display: block; margin: 0; text-align: center; padding: 10px 8px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--txt2); cursor: pointer;
}
.segmento input:checked + label {
  background: #fff; color: var(--roxo); box-shadow: 0 2px 8px rgba(28, 20, 70, .10);
}
/* Travado: já criado, a natureza não muda mais. */
.segmento.travado { opacity: .75; }
.segmento.travado label { cursor: default; color: #aeb5c6; }
.segmento.travado input:checked + label { color: var(--txt2); box-shadow: none; }
.segmento.travado input:not(:checked) + label { visibility: hidden; }

/* ---------- Arrastar para ordenar ---------- */
.punho {
  border: 0; background: none; color: #c2c9d8; padding: 0;
  width: 28px; height: 34px; display: grid; place-items: center; flex-shrink: 0;
  cursor: grab; touch-action: none;   /* touch-action: sem isso o dedo rola a pagina */
}
.punho:hover { color: var(--roxo); }
.punho:active { cursor: grabbing; }
[data-ordenavel].ordenando { user-select: none; -webkit-user-select: none; }
[data-ordem-id].arrastando {
  position: relative; z-index: 45; cursor: grabbing;
  box-shadow: 0 18px 40px rgba(28, 20, 70, .22);
}
[data-ordem-id].arrastando .punho { color: var(--roxo); }

.aviso-campo { margin: 6px 0 14px; font-size: 12px; line-height: 1.45; }
.aviso-campo[hidden] { display: none; }

/* Botao de arquivar dentro do modal */
.botao.arquivar {
  background: #fdecea; color: #b3261e; box-shadow: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.botao.arquivar:hover { background: #fbdcd8; }

/* Link de voltar acima das listas */
.voltar {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--roxo); font-size: 13.5px; font-weight: 600;
  margin: 0 0 12px; padding: 0; background: none;
}
.voltar svg { stroke-width: 2.2; width: 15px; height: 15px; }
.voltar:hover { text-decoration: underline; }

/* Select que abre para cima quando não há espaço abaixo */
.select.para-cima .select-painel { top: auto; bottom: calc(100% + 6px); }

/* Dois campos lado a lado */
.linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.linha-dupla label { margin-top: 14px; }

/* Limite do cartão: menor que o saldo de uma conta, não é o número principal */
/* No cartão o número em destaque é só o limite, não um saldo que se acompanha:
   ele não precisa do mesmo peso que o valor da conta. */
.conta-valor.menor { font-size: 15px; font-weight: 600; letter-spacing: -.3px; margin-top: 10px; }

/* Bandeira do cartão: encostada à direita, na mesma linha das observações */
/* Badge da bandeira — vale onde estiver (hoje no rodapé do card) */
.bandeira {
  display: inline-block; flex-shrink: 0;
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.5;
}
.conta-card .conta-sub { flex-wrap: nowrap; }
/* o texto cede espaço; o badge nunca é cortado */
.conta-sub .sub-texto {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Rodapé do card: valor à esquerda, badge à direita */
.conta-rodape { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.conta-rodape .bandeira { margin: 0 0 3px; flex-shrink: 0; }

/* A cor escolhida fica evidente: marca de seleção dentro do círculo */
.cor-opcao span { position: relative; transition: transform .12s; }
.cor-opcao input:checked + span {
  border-color: transparent; transform: scale(1.12);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c);
}
.cor-opcao input:checked + span::after {
  content: ''; position: absolute; left: 9px; top: 5px;
  width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ---------- Plano de contas ---------- */
.grupo-card {
  background: var(--card); border-radius: 16px; padding: 14px 14px 12px;
  box-shadow: 0 1px 3px rgba(28, 22, 66, .04), 0 8px 18px rgba(28, 22, 66, .05);
  margin-bottom: 12px; position: relative;
}
.grupo-card.menu-aberto { z-index: 40; }
.grupo-topo { display: flex; align-items: center; gap: 11px; }
.grupo-emoji {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px;
  display: grid; place-items: center; font-size: 19px; background: #f3f5fa;
}
.grupo-nome { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; }
.grupo-nome small { display: block; font-size: 11.5px; font-weight: 500; color: var(--txt2); margin-top: 1px; }

.categorias { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.categoria {
  border: 1px solid var(--linha); background: #f7f8fc; color: var(--txt);
  font-size: 12.5px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
}
.categoria:hover { background: var(--roxo-suave); border-color: #dcd0ff; color: var(--roxo); }

/* Grupo de terceiros: card escuro, porque nao e gasto do usuario. */
.grupo-card.terceiros { background: #1e2432; color: #fff; }
.grupo-card.terceiros .grupo-nome { color: #fff; }
.grupo-card.terceiros .grupo-nome small { color: #98a1b8; }
.grupo-card.terceiros .grupo-icone { color: #fff; }
.grupo-card.terceiros .icone-botao { background: rgba(255, 255, 255, .10); color: #cfd6e6; }
.grupo-card.terceiros .icone-botao:hover { background: rgba(255, 255, 255, .18); }
.grupo-card.terceiros .categoria {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #e7ebf5;
}
.grupo-card.terceiros .categoria:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255,255,255,.24); color: #fff; }
.grupo-card.terceiros .etiqueta.terceiros { background: rgba(255, 255, 255, .14); color: #cbd3e6; }
.grupo-card.terceiros .menu-lista { color: var(--txt); }

/* Ícone do grupo no padrão do app (no lugar do emoji) */
.grupo-icone {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px;
  display: grid; place-items: center;
  /* Cor do proprio grupo, definida no card. Ela e a mesma que pinta o icone
     dos lancamentos das categorias dele na lista de transacoes. */
  background: var(--cor-grupo, var(--roxo-suave)); color: #fff;
}

/* ---------- Leque do botão "+" ---------- */
.leque {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(20, 16, 45, .5); backdrop-filter: blur(2px);
}
.leque[hidden] { display: none; }

/* O leque nasce do próprio botão: o JS mede o "+" e grava --cx (centro dele)
   e --fy (distância do rodapé até o topo dele). Antes eu usava left:50%, e o "+"
   não fica exatamente no meio da tela — o conjunto saía torto. */
.leque-item {
  position: absolute; left: var(--cx, 50%); bottom: calc(var(--fy, 80px) + 8px);
  width: 84px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.2;
  transform: translate(calc(var(--x) - 50%), var(--y)) scale(.4); opacity: 0;
  transition: transform .22s cubic-bezier(.2, .9, .3, 1.2), opacity .18s;
}
.leque.aberto .leque-item { transform: translate(calc(var(--x) - 50%), var(--y)) scale(1); opacity: 1; }
/* Cinco no arco: as pontas mais baixas, o do meio no alto. */
.leque .p1 { --x: -116px; --y: -14px;  transition-delay: .00s; }
.leque .p2 { --x: -78px;  --y: -104px; transition-delay: .03s; }
.leque .p3 { --x: 0px;    --y: -148px; transition-delay: .06s; }
.leque .p4 { --x: 78px;   --y: -104px; transition-delay: .09s; }
.leque .p5 { --x: 116px;  --y: -14px;  transition-delay: .12s; }

.leque-bolha {
  width: 48px; height: 48px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; box-shadow: 0 10px 26px rgba(10, 8, 30, .35);
}
/* Espaço fixo de duas linhas: "Despesa Cartão" quebra e os outros não, e sem
   isso o item ficava mais alto que os vizinhos e a bolha subia junto. */
.leque-rotulo { min-height: 2.4em; }
.leque-bolha.verde    { color: var(--verde); }
.leque-bolha.vermelho { color: var(--vermelho); }
.leque-bolha.roxo     { color: var(--roxo); }
.leque-bolha.azul     { color: #2f7ff2; }
/* Depois das outras cores, senão a regra genérica do fundo branco vence. */
.leque-bolha.escuro   { background: #1e2432; color: #fff; }
.leque-item:hover .leque-bolha { transform: scale(1.06); }
.leque-rotulo { text-shadow: 0 1px 6px rgba(10, 8, 30, .5); }

.nav-fab .fab-sinal { transition: transform .22s; display: inline-block; }
.nav-fab.aberto .fab-sinal { transform: rotate(45deg); }

/* A barra de menus NÃO sobe: ela fica atrás do fundo escuro junto com o resto
   da página, e quem aparece aceso é o clone do "+" que o JS põe dentro do
   overlay (#fab-leque). Assim os quatro ícones ficam borrados como o resto. */
#fab-leque { box-shadow: 0 10px 30px rgba(10, 8, 30, .45); }

/* Telas estreitas: aproxima os lados pra nada encostar na borda. */
@media (max-width: 359px) {
  .leque .p1 { --x: -104px; --y: -12px; }
  .leque .p2 { --x: -70px;  --y: -96px; }
  .leque .p3 { --x: 0px;    --y: -138px; }
  .leque .p4 { --x: 70px;   --y: -96px; }
  .leque .p5 { --x: 104px;  --y: -12px; }
  .leque-item { width: 76px; font-size: 11px; }
  .leque-bolha { width: 44px; height: 44px; }
}

/* No PC o botão fica na barra lateral: o leque sobe a partir dele. */
/* No PC o "+" fica no alto da barra lateral: o leque desce a partir dele. */
@media (min-width: 900px) {
  .leque-item {
    left: var(--cx, 154px); bottom: auto;
    top: calc(100vh - var(--fy, 600px) + 12px);
    width: 96px; font-size: 12.5px;
  }
  .leque-bolha { width: 54px; height: 54px; }
  .leque .p1 { --x: -4px;  --y: 176px; }
  .leque .p2 { --x: 128px; --y: 62px; }
  .leque .p3 { --x: 260px; --y: 62px; }
  .leque .p4 { --x: 128px; --y: 176px; }
  .leque .p5 { --x: -4px;  --y: 62px; }
}

/* ---------- Formulário de lançamento ---------- */
.form-lancamento { padding-top: 4px; }
.valor-topo { text-align: center; padding: 6px 0 14px; border-bottom: 1px solid var(--linha); margin-bottom: 8px; }
.valor-rotulo {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--txt2); margin-bottom: 6px;
}
.valor-topo.verde    .valor-rotulo { color: var(--verde); }
.valor-topo.vermelho .valor-rotulo { color: var(--vermelho); }
.valor-topo.roxo     .valor-rotulo { color: var(--roxo); }
.valor-topo.azul     .valor-rotulo { color: #2f7ff2; }

.campo-valor { display: flex; align-items: center; justify-content: center; gap: 8px; }
.campo-valor .prefixo-moeda { font-size: 20px; font-weight: 700; color: var(--txt2); }
.campo-valor input {
  border: 0; background: none; padding: 0; height: auto; width: 100%;
  font-size: 34px; font-weight: 800; letter-spacing: -1px; text-align: left; color: var(--txt);
  max-width: 190px;
}
.campo-valor input:focus { box-shadow: none; }

/* ---------- Extrato ---------- */
.topo-extrato { text-align: center; padding: 18px 16px 14px; }
.topo-extrato-rotulo { font-size: 12.5px; color: var(--txt2); font-weight: 600; }
.topo-extrato-valor { font-size: 30px; letter-spacing: -1px; margin-top: 2px; }
.extrato-resumo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha);
}
.extrato-resumo > div { display: flex; flex-direction: column; gap: 2px; }
.etiqueta.previsto-tag { background: #eef1f8; color: #566079; font-size: 10.5px; font-weight: 700; }
.extrato-clipe { color: var(--txt2); display: inline-flex; vertical-align: -2px; }
.etiqueta.serie-tag { background: var(--roxo-suave); color: var(--roxo); font-size: 10.5px; font-weight: 700; }
.painel-nome { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.painel-linha .painel-corpo { flex: 1; }



/* ---------- Celular: campo nunca abaixo de 16px ----------
   O Safari do iPhone dá zoom ao focar um input com fonte menor que 16px.
   Como o zoom não volta sozinho, a tela fica torta. 16px resolve na origem. */
@media (max-width: 899px) {
  input, select, textarea,
  .campo input, .select-busca input, .filtros input { font-size: 16px; }
}

/* Nenhuma tela rola pra o lado. */
/* clip e não hidden: overflow-x:hidden no body faz dele um contêiner de
   rolagem, e aí position:sticky dos filhos para de grudar na viewport — foi o
   que impedia o cabeçalho de Transações de ficar fixo. O clip corta igual,
   sem criar o contêiner. */
html, body { max-width: 100%; overflow-x: clip; }
.conteudo, .cartao, .painel, .modal, .item, .conta-card, .grupo-card { max-width: 100%; }


/* ---------- Cabeçalho fixo dos modais ----------
   O título e o X ficam grudados no topo enquanto o resto rola. */
.modal.com-topo { padding-top: 0; }
.modal-topo {
  position: sticky; top: 0; z-index: 7; background: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 0 12px; margin-bottom: 4px; border-bottom: 1px solid var(--linha);
}
.modal-topo h2 { margin: 0; }
.modal-topo .modal-fechar { float: none; margin: 0; flex-shrink: 0; }

/* ---------- Rodapé fixo dos modais ----------
   O botão de salvar sai da área que rola e fica grudado embaixo. O JS move os
   botões dos formulários para cá e liga cada um ao seu form pelo atributo form=. */
.modal.com-rodape { padding-bottom: 0; }
.modal-rodape {
  position: sticky; bottom: 0; z-index: 6;
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; margin-top: 8px;
  padding: 14px 0 calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linha);
}
.modal-rodape .botao { margin-top: 0; }
.modal-rodape .botao[hidden] { display: none; }



/* ================= Tela de lançamento ================= */
/* Topo colorido pelo tipo + folha branca com os campos. */
.lanc { display: block; }
.lanc-topo { padding: 14px 18px 26px; color: #fff; }
.lanc.vermelho .lanc-topo { background: #ef4136; }
.lanc.verde    .lanc-topo { background: #17a673; }
.lanc.azul     .lanc-topo { background: #2f7ff2; }
.lanc.roxo     .lanc-topo { background: var(--roxo); }

/* O tipo fica centralizado na barra e o Cancelar flutua na esquerda —
   por isso ele é absoluto: assim não empurra o título para o lado. */
/* O tipo fica centralizado na barra e o Cancelar flutua na esquerda —
   por isso ele é absoluto: assim não empurra o título para o lado. */
/* z-index acima de tudo que abre por cima: calculadora (85), painel de select
   (90) e modais (82). Sem isso o toque no Cancelar batia no vidro do que
   estivesse aberto, e era preciso fechar aquilo antes pra so entao cancelar. */
.lanc-barra {
  position: relative; z-index: 95;
  display: flex; align-items: center; justify-content: center; min-height: 46px;
}
.lanc-cancelar {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  background: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .95);
  font-weight: 500; font-size: 15px; padding: 9px 16px; border-radius: 999px;
}
/* Lixeira do lançamento: mesmo canto do Cancelar, do outro lado. */
.lanc-lixo {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  border: 0; cursor: pointer; padding: 9px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .22); color: #fff;
}
.lanc-lixo:hover { background: rgba(255, 255, 255, .34); }

.lanc-tipo {
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, .17); color: #fff; font-weight: 700; font-size: 17px;
  padding: 9px 18px; border-radius: 999px; font-family: inherit;
}
.lanc-rotulo { margin: 24px 0 0; font-size: 15px; color: rgba(255, 255, 255, .82); }
.lanc-valor { display: flex; align-items: baseline; gap: 10px; }
.lanc-valor span { font-size: 38px; font-weight: 400; letter-spacing: -.5px; color: rgba(255, 255, 255, .75); }
.lanc-valor input {
  border: 0; background: none; padding: 0; height: auto; width: 100%;
  font-size: 38px; font-weight: 400; letter-spacing: -.5px; color: #fff; cursor: pointer;
}
.lanc-valor input::placeholder { color: rgba(255, 255, 255, .72); }
.lanc-moeda {
  font-size: 15px !important; font-weight: 500; color: rgba(255, 255, 255, .7) !important;
  letter-spacing: 0 !important; flex-shrink: 0; align-self: center;
}
.lanc-estorno {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .3px !important;
  background: #d5f5e6; color: #0d6b47 !important; padding: 4px 9px; border-radius: 999px;
  flex-shrink: 0; align-self: center; text-transform: uppercase;
}
.bolha-vermelho { background: #fdecea; color: var(--vermelho); }
.bolha-verde    { background: #e6f7f0; color: var(--verde); }
.bolha-azul     { background: #e8f0fe; color: #2f7ff2; }
.bolha-roxo     { background: var(--roxo-suave); color: var(--roxo); }
.lanc-valor input::placeholder { color: rgba(255, 255, 255, .6); }
.lanc-valor input:focus { box-shadow: none; outline: none; }

/* A folha branca vai até o fim: sem isso, ao rolar até embaixo aparecia uma
   faixa lilás (o fundo da página) entre o último campo e a barra de menus.
   Por isso a tela inteira fica branca — inclusive a faixa fixa do rodapé. */
body.tela-cheia { background: #fff; }
body.tela-cheia::after { background: #fff; }
/* O .app já reserva espaço para a barra de menus e a folha reserva de novo —
   somados, sobrava um vão branco depois do Salvar. Aqui quem reserva é a folha. */
body.tela-cheia .app { padding-bottom: 0; }
.lanc-folha {
  background: #fff; border-radius: 24px 24px 0 0; margin-top: -14px;
  /* Reserva a barra de menus + o botão Salvar, que é fixo. */
  padding: 6px 18px calc(var(--nav-altura) + 78px + env(safe-area-inset-bottom, 0px));
}

.lanc-linha {
  display: flex; align-items: center; gap: 14px; min-height: 62px;
  padding: 10px 0; border-bottom: 1px solid var(--linha);
}
.lanc-linha:last-of-type { border-bottom: 0; }
.lanc-icone { flex: 0 0 24px; color: var(--txt2); display: grid; place-items: center; }
.lanc-nome { flex: 1; font-size: 15.5px; color: var(--txt); }
.lanc-nome small { display: block; font-size: 12.5px; color: var(--txt2); margin-top: 2px; }
.lanc-campo { flex: 1; min-width: 0; }
.lanc-campo .select-botao { border: 0; padding-left: 0; height: 44px; }
.lanc-campo .select-botao:hover { border: 0; }
.lanc-campo .select.aberto .select-botao { box-shadow: none; border: 0; }

/* Escolhido vira pílula com borda, como no modelo: azul na categoria e roxa
   na conta/cartão. Enquanto está vazio continua sendo só o texto do campo. */
/* A borda fica no CONTEÚDO, não no botão. Com a borda no botão ele encolhia
   para o tamanho do texto — e como a lista é medida por ele, o painel abria
   estreito e cortava os nomes. Agora o botão continua ocupando a linha toda
   (que segue clicável) e só o conteúdo é desenhado como pílula. */
.lanc-campo .select.tem-valor .select-escolhido {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 1 auto;
  height: 34px; padding: 0 13px; border-radius: 999px;
  border: 1.5px solid currentColor; font-size: 14px;
}
.lanc-campo.pilula-azul .select.tem-valor .select-escolhido { color: #1f8fd6; }
.lanc-campo.pilula-roxa .select.tem-valor .select-escolhido { color: var(--roxo); }
.lanc-campo .select.tem-valor [data-select-rotulo] { color: var(--txt); }
.lanc-campo .select.tem-valor .select-img { width: 17px; height: 17px; border-radius: 50%; }

.lanc-entrada {
  flex: 1; border: 0; background: none; padding: 0; height: 44px; font-size: 15.5px;
}
.lanc-entrada:focus { box-shadow: none; outline: none; }
.lanc-chave { margin: 0; }
/* Data futura: o interruptor fica travado em "A pagar". */
.lanc-linha.travado .lanc-nome { color: var(--txt2); }
.lanc-linha.travado .chave { cursor: default; opacity: .6; }

.lanc-datas { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pilula {
  border: 0; background: #f3f5fa; color: var(--txt2); cursor: pointer;
  padding: 9px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
}
.pilula.ativa { color: #fff; }
.lanc.vermelho .pilula.ativa { background: #c0392b; }
.lanc.verde    .pilula.ativa { background: #12805a; }
.lanc.azul     .pilula.ativa { background: #2464c4; }
.lanc.roxo     .pilula.ativa { background: #6320c9; }
/* A pílula da data mostra sempre a data escolhida; o campo de data cobre ela
   por cima, invisível — tocar em qualquer ponto abre o calendário do aparelho. */
.pilula-data {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; cursor: pointer;
}
.pilula-data svg { flex-shrink: 0; }
.pilula-data input[type=date] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer;
}
.pilula-data input[type=date]:focus { box-shadow: none; outline: none; }
.lanc-datas { flex-wrap: nowrap; }
.lanc-datas .pilula { white-space: nowrap; }
@media (max-width: 380px) {
  .lanc-datas .pilula { padding: 9px 12px; font-size: 13.5px; }
  .pilula-data { padding: 9px 11px; gap: 5px; }
}

/* Botão de tirar o anexo escolhido antes de salvar */
.lanc-tirar-anexo {
  border: 0; background: #f3f5fa; color: var(--vermelho); cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
}
.lanc-tirar-anexo:hover { background: #fdecea; }

.lanc-anexo { cursor: pointer; display: grid; place-items: center; }
.lanc-anexo-icone { display: grid; place-items: center; }
.lanc.vermelho .lanc-anexo-icone { color: #ef4136; }
.lanc.verde    .lanc-anexo-icone { color: #17a673; }
.lanc.azul     .lanc-anexo-icone { color: #2f7ff2; }
.lanc.roxo     .lanc-anexo-icone { color: var(--roxo); }
.lanc-anexo-link { color: var(--roxo); font-weight: 600; font-size: 14.5px; flex: 1; }
.lanc-tirar { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--vermelho); }
.lanc-tirar input { width: auto; height: auto; }
.lanc-anexo-nome .lanc-nome { font-size: 13.5px; color: var(--txt2); }

/* O interruptor segue a cor do tipo do lançamento. */
.lanc.vermelho .chave input:checked + .chave-trilho { background: #c0392b; }
.lanc.verde    .chave input:checked + .chave-trilho { background: #12805a; }
.lanc.azul     .chave input:checked + .chave-trilho { background: #2464c4; }
.lanc.roxo     .chave input:checked + .chave-trilho { background: #6320c9; }

.lanc-aviso { margin: 14px 0 0; font-size: 12.5px; color: var(--txt2); line-height: 1.45; }
/* O Salvar fica FIXO na tela; quem rola é só o formulário. sticky não servia:
   como ele é o último elemento, não havia área embaixo para ele grudar. */
.lanc-salvar {
  position: fixed; z-index: 25; margin: 0;
  left: 12px; right: 12px; width: auto;
  bottom: calc(var(--nav-altura) + 12px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 900px) {
  .lanc-salvar { left: calc(var(--lateral) + 20px); right: 20px; bottom: 20px; }
}
.lanc.vermelho .lanc-salvar { background: #c0392b; }
.lanc.verde    .lanc-salvar { background: #12805a; }
.lanc.azul     .lanc-salvar { background: #2464c4; }
.lanc.roxo     .lanc-salvar { background: #6320c9; }

/* Lançamento concluído: a folha abre inerte e o motivo toma o lugar do Salvar.
   A saída é reabrir (ou desfazer a fatura/a folha) — nada some daqui. */
.lanc-travado {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 10px 0 4px; padding: 12px 14px; border-radius: 14px;
  background: #fff4e5; color: #8a5a12;
}
.lanc-travado-icone { flex: 0 0 18px; display: grid; place-items: center; margin-top: 1px; }
.lanc-travado > div strong { display: block; font-size: 14px; font-weight: 700; }
.lanc-travado > div span { font-size: 13px; line-height: 1.45; opacity: .9; }
/* Concluído: Salvar classificação e Reabrir dividem a barra fixa. Antes o
   Salvar ficava no fim da folha, escondido atrás desta barra. */
.lanc-salvar-travado { display: flex; gap: 8px; background: none; padding: 0; }
.lanc-salvar-travado > form { flex: 1; display: flex; min-width: 0; }
.lanc-salvar-travado .botao { width: 100%; margin: 0; flex: 1; }
.lanc-salvar-travado > .botao { flex: 1.2; }
.lanc-travado-nota {
  width: 100%; text-align: center; font-size: 13px; color: var(--txt2);
  background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 13px 14px;
}

/* Alternador de duas linhas (o total x de cada parcela) */
.segmento-triplo { grid-template-columns: repeat(3, 1fr); }
.segmento-triplo label { font-size: 12.5px; padding: 9px 4px; line-height: 1.2; }
.segmento-triplo label small { display: block; font-weight: 700; opacity: .7; margin-top: 2px; }

.segmento-alto label { padding: 12px 8px; line-height: 1.3; }
.segmento-alto label small { display: block; font-weight: 500; font-size: 11.5px; opacity: .75; margin-top: 3px; }


/* ---------- Teclado de valor (com conta) ---------- */
.calc { position: fixed; inset: 0; z-index: 85; background: rgba(20, 16, 45, .45); display: flex; align-items: flex-end; }
.calc-folha {
  background: #fff; width: 100%; max-width: 460px; margin: 0 auto;
  border-radius: 22px 22px 0 0; padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px));
}
.calc-visor {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 20px 20px; border-bottom: 1px solid var(--linha);
}
.calc-moeda { font-size: 15px; font-weight: 500; color: var(--txt2); }
/* Tamanho fixo: não encolhe quando começa a digitar. */
.calc-conta {
  flex: 1; text-align: right; font-size: 34px; font-weight: 500; letter-spacing: -.6px;
  color: var(--txt); overflow: hidden; white-space: nowrap;
}
.calc-conta.calc-vazio { color: #b6bdcc; }
.calc-apagar {
  border: 0; background: #4b5060; color: #fff; cursor: pointer; flex-shrink: 0;
  width: 46px; height: 36px; border-radius: 9px; display: grid; place-items: center;
}
.calc-apagar:active { background: #343948; }
/* Sinal trocado = estorno: o apagar fica verde para deixar claro que
   aquele valor vai voltar em vez de sair. */
.calc-folha.negativo .calc-apagar { background: var(--verde); }
.calc-folha.negativo .calc-apagar:active { background: #17915f; }
.calc-folha.negativo .calc-conta { color: var(--verde); }

.calc-teclas { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 0; }
.calc-tecla {
  border: 0; background: none; cursor: pointer; color: var(--txt);
  height: 74px; font-size: 26px; font-weight: 400; font-family: inherit;
}
.calc-tecla:active { background: #f3f5fa; }
.calc-tecla.sinal { font-size: 28px; color: var(--txt2); }

.calc-acoes { display: flex; gap: 14px; padding: 10px 20px 6px; }
.calc-acoes .botao { margin: 0; flex: 1; height: 52px; box-shadow: none; font-weight: 500; }
.calc-cancelar { background: #fff; border: 1.5px solid currentColor; }
.calc-folha { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.calc-folha.vermelho .calc-cancelar { color: #c0392b; }
.calc-folha.verde    .calc-cancelar { color: #12805a; }
.calc-folha.azul     .calc-cancelar { color: #2464c4; }
.calc-folha.roxo     .calc-cancelar { color: var(--roxo); }
/* Sem a cor do tipo, o Cancelar fica branco no branco e some da tela. */
.calc-folha.escuro   .calc-cancelar { color: #1e2432; }
.calc-folha.vermelho .calc-pronto { background: #c0392b; }
.calc-folha.verde    .calc-pronto { background: #12805a; }
.calc-folha.azul     .calc-pronto { background: #2464c4; }


/* ================= Tela de Transações ================= */
body.fundo-branco { background: #fff; }
body.fundo-branco::after { background: #fff; }

/* Cabeçalho roxo com o título no meio: a marca fica só com o ícone (senão não
   cabe com o título no centro) e o avatar diminui. */
/* Mesmo papel de parede da tela de login, bem discreto sobre o roxo. */
/* Planejamento usa o mesmo cabeçalho, num azul escuro: a tela é outra e a cor
   ajuda a saber onde se está sem ler o título. */
.topo-card.roxo.azul {
  background:
    url('/assets/img/padrao.svg') repeat 0 0 / 190px 190px,
    radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(160deg, #1e3a8a, #111d4a);
}
.topo-card.roxo.azul .badge-previsto.ativo { background: #fff; color: #1e3a8a; }
/* Pastilha só de enfeite no planejamento: mesmo desenho do PREVISTO, sem clique. */
.badge-parado { cursor: default; background: #fff; color: #1e3a8a; }

.topo-card.roxo {
  background:
    url('/assets/img/padrao.svg') repeat 0 0 / 190px 190px,
    radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(160deg, #7b2ff2, #6420cc);
  box-shadow: none;
}
.topo-card.roxo .topo-marca span,
.topo-card.roxo .marca-nome { color: #fff; }
/* No cabeçalho roxo o mês é o título da tela, então vem maior que nas outras. */
.topo-card.roxo .seletor-mes { color: #fff; font-size: 25px; letter-spacing: -.6px; }
.topo-card.roxo .seletor-mes svg { width: 22px; height: 22px; }
.topo-card.roxo .seletor-mes svg { color: rgba(255, 255, 255, .8); }
/* O hover padrão é um lilás claro — no cabeçalho roxo isso apagava o texto
   branco (e no celular o hover fica preso depois do toque). */
.topo-card.roxo .seletor-mes:hover,
.topo-card.roxo .seletor-mes:focus { background: rgba(255, 255, 255, .16); color: #fff; }
.topo-card.roxo .avatar { background: rgba(255, 255, 255, .22); }
.topo-card.roxo .badge-previsto {
  background: rgba(255, 255, 255, .2); color: #fff;
}
.topo-card.roxo .badge-previsto.ativo { background: #fff; color: var(--roxo); }

.topo-card.com-titulo .topo-barra {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* Com o título no meio, a marca fica menor e em branco pra caber tudo. */
.topo-card.com-titulo .topo-marca { gap: 6px; flex-shrink: 0; }
.topo-card.com-titulo .topo-marca span { font-size: 14px; font-weight: 700; color: #fff; }
.topo-card.com-titulo .topo-marca img,
.topo-card.com-titulo .marca-g { width: 26px; height: 26px; }
/* Absoluto de propósito: com flex:1 a pílula ficava centrada no espaço que
   sobra entre a marca e o avatar — e como eles têm larguras diferentes, ela
   saía deslocada. Assim ela fica no centro da tela mesmo. */
.topo-meio {
  position: absolute; left: 50%; transform: translateX(-50%);
  text-align: center; max-width: 55%;
}
/* O título fica numa pílula escura, no mesmo estilo da tela de lançamento. */
.topo-pilula {
  display: inline-flex; align-items: center;
  background: rgba(0, 0, 0, .18); color: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: -.2px;
  padding: 7px 16px; border-radius: 999px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topo-card.com-titulo .avatar { width: 34px; height: 34px; font-size: 13px; flex-shrink: 0; }

.tr-resumo {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 4px 2px 16px; border-bottom: 1px solid var(--linha); margin-bottom: 14px;
}
/* Três números na mesma linha: o rótulo em cima com o ícone, o valor embaixo —
   lado a lado eles não caberiam na largura de um celular. */
.tr-resumo.tres { grid-template-columns: repeat(3, 1fr); padding-bottom: 12px; }
.tr-resumo-item { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 0 12px; }
.tr-resumo.tres .tr-resumo-item {
  flex-direction: column; align-items: flex-start; gap: 1px; padding: 0 10px; text-align: left;
}
/* Divisória entre um número e outro */
.tr-resumo-item + .tr-resumo-item { border-left: 1px solid var(--linha); }
.tr-resumo-icone { color: var(--txt2); flex-shrink: 0; }
.tr-resumo-rotulo { display: block; font-size: 12.5px; color: var(--txt2); }
.tr-resumo.tres .tr-resumo-rotulo {
  display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1.2;
}
.tr-resumo.tres .tr-resumo-rotulo svg { flex: none; opacity: .8; }
/* O resumo do topo é o número que se olha primeiro: fica maior e em negrito,
   mesmo com as listas em peso normal. */
.tr-resumo-item .valor { font-size: 18.5px; font-weight: 700; letter-spacing: -.4px; }
.tr-resumo.tres .tr-resumo-item .valor { font-size: 16px; letter-spacing: -.3px; }
@media (max-width: 360px) {
  .tr-resumo.tres .tr-resumo-item { padding: 0 6px; }
  .tr-resumo.tres .tr-resumo-item .valor { font-size: 14.5px; }
  .tr-resumo.tres .tr-resumo-rotulo { font-size: 10px; }
}

/* Busca + botão de filtro */
.tr-busca { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tr-busca-campo {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: #f4f6fb; border-radius: 999px; padding: 0 16px; height: 48px;
}
.tr-busca-campo svg { color: var(--txt2); flex-shrink: 0; }
.tr-busca-campo input {
  border: 0; background: none; padding: 0; height: 46px; font-size: 15px;
}
.tr-busca-campo input:focus { box-shadow: none; outline: none; }
.tr-filtro {
  position: relative; flex-shrink: 0; border: 0; cursor: pointer;
  width: 48px; height: 48px; border-radius: 50%;
  background: #f4f6fb; color: var(--txt2); display: grid; place-items: center;
}
.tr-filtro.ativo { background: var(--roxo-suave); color: var(--roxo); }
.tr-filtro-conta {
  position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--roxo); color: #fff;
  font-size: 10.5px; font-weight: 700; display: grid; place-items: center;
}
.tr-previsto { margin: 12px 0 0; font-size: 12.5px; color: var(--txt2); }

/* Lista */
.tr-lista { margin-top: 6px; }
.tr-dia {
  font-size: 13.5px; font-weight: 600; color: var(--txt);
  margin: 14px 0 2px; letter-spacing: -.2px;
}
.tr-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; color: inherit;
}
.tr-linha:hover { background: #fafbff; }
.tr-icone {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  display: grid; place-items: center; background: #29a9e0; color: #fff;
}
.tr-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tr-nome {
  font-size: 14px; font-weight: 600; color: var(--txt); letter-spacing: -.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tr-sub {
  font-size: 12px; color: var(--txt2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tr-direita { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.tr-valor { font-size: 14px; white-space: nowrap; font-weight: 500; }
.tr-valor.neutro { color: var(--txt2); }
.tr-selos { display: flex; align-items: center; gap: 7px; }
/* So o desenho do icone, sem caixa atras: a cor sai no proprio traco.
   O padding negativo alarga a area do dedo sem ocupar espaco no layout —
   sem a caixa, 15px de desenho e alvo pequeno demais pro toque. */
.tr-selo { display: grid; place-items: center; padding: 4px; margin: -4px; }
/* Classes prefixadas de propósito: "cartao" e "previsto" soltos batem com
   `.cartao` (o card branco, que tem padding 18px) e com outros estilos gerais. */
.tr-selo-cartao      { color: #17a673; }
.tr-selo-fixo        { color: var(--vermelho); }
.tr-selo-previsto    { color: #8a92a6; }
/* Pago e o unico com bolha: e a informacao que se procura de relance na lista,
   e um tique solto no meio dos outros icones nao se destacava. */
/* Conciliado é o estado final: bolha verde cheia. "Pago, a conciliar" fica com
   o tique vazado, pra dar pra ver de longe o que ainda falta bater com o banco. */
.tr-selo-pago, .tr-selo-conciliar {
  border-radius: 50%; width: 21px; height: 21px; padding: 0; margin: 0;
}
.tr-selo-pago { background: #4caf50; color: #fff; }
.tr-selo-conciliar { background: #fff; color: #4caf50; box-shadow: inset 0 0 0 2px #4caf50; }
.tr-selo-pago svg, .tr-selo-conciliar svg { width: 13px; height: 13px; }
.tr-selo-parcela     { color: #2563eb; }
.tr-selo-centro      { color: #d97706; }
.tr-selo-responsavel { color: #7b2ff2; }
.tr-selo-anexo       { color: #6b7488; }
.tr-selo-holerite    { color: #1e2432; }
/* Nasceu ou foi conferido pelo arquivo do banco. */
.tr-selo-importado   { color: #0e9f6e; }
.tr-selo:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }

/* Linha agrupada: uma so linha no lugar das compras do cartao ou da folha. */
.tr-icone-grupo { background: #1e2432; }
/* O nome cede espaço; a etiqueta ("Fatura", "Holerite") nunca é cortada —
   um nome comprido deixava só o "H..." no lugar dela. */
.tr-nome-grupo { display: flex; align-items: center; gap: 6px; }
.tr-nome-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-etiqueta-grupo {
  background: #eef1f8; color: #566079; font-size: 10.5px; font-weight: 700;
  flex-shrink: 0;
}

/* Tooltip dos selos: o title do navegador nao aparece no celular, entao a
   explicacao e nossa — abre no hover do mouse e no toque do dedo. */
.dica-balao {
  position: fixed; z-index: 120; max-width: 230px;
  background: #1e2432; color: #fff; border-radius: 10px;
  padding: 8px 11px; font-size: 12.5px; line-height: 1.35; font-weight: 500;
  box-shadow: 0 10px 26px rgba(15, 20, 35, .28);
  opacity: 0; transform: translateY(4px); transition: opacity .13s, transform .13s;
  pointer-events: none;
}
.dica-balao.aberta { opacity: 1; transform: translateY(0); }
.dica-balao::after {
  content: ''; position: absolute; left: var(--seta, 50%); margin-left: -5px;
  border: 5px solid transparent;
}
.dica-balao.acima::after  { top: 100%; border-top-color: #1e2432; }
.dica-balao.abaixo::after { bottom: 100%; border-bottom-color: #1e2432; }
.tr-linha.tr-previsto .tr-nome,
.tr-linha.tr-previsto .tr-valor { opacity: .75; }

/* Transferência: diz qual conta é a de saída e qual é a de entrada — o nome do
   banco sozinho não conta essa parte da história. */
.lanc-de-para {
  font-size: 12.5px; font-weight: 600; color: var(--txt2);
  flex-shrink: 0; min-width: 58px;
}

/* ---------- Botão em espera ---------- */
.botao.carregando { opacity: .85; cursor: default; }
.girando {
  width: 15px; height: 15px; display: inline-block; vertical-align: -2px; margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
  animation: girar .6s linear infinite;
}
/* Botão claro (o de apagar, por exemplo): o rodinha acompanha a cor do texto. */
.botao.arquivar .girando, .botao.secundario .girando {
  border-color: rgba(0, 0, 0, .18); border-top-color: currentColor;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 2s; } }

/* Rodapé do holerite: bruto e descontos lado a lado, discretos — o número que
   importa (o líquido) já está em destaque na linha de cima. */
.painel-total.holerite-resumo { font-size: 12.5px; font-weight: 500; color: var(--txt2); }
.painel-total.holerite-resumo strong { font-size: 13px; font-weight: 700; margin-left: 4px; }

/* ---------- Extrato em modal (fatura do cartão, folha do holerite) ---------- */
.folha-modal {
  position: fixed; inset: 0; z-index: 80; background: rgba(20, 16, 45, .45);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .18s;
}
.folha-modal.aberta { opacity: 1; }
.folha-corpo {
  background: var(--fundo); width: 100%; max-width: 560px;
  /* Vai do topo ao rodapé. Antes parava 64px antes do alto e sobrava uma faixa
     da tela de trás; no app instalado, com a barra de status logo acima, aquilo
     virava um degrau feio. Cheia, a folha não tem quina em cima — quina
     arredondada colada no alto só deixaria dois furinhos escuros. */
  height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 0; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(14px); transition: transform .18s;
}
.folha-modal.aberta .folha-corpo { transform: translateY(0); }
@media (min-width: 900px) {
  .folha-modal { align-items: center; }
  .folha-corpo { border-radius: 22px; height: auto; max-height: 86dvh; }
  .folha-topo { padding-top: 14px; }
}

/* Cabeçalho colorido, na cor da conta ou do cartão. */
/* block: a barra do título e a linha do período empilham. Com o flex de antes
   as duas disputavam a mesma linha e o período vazava pela direita. */
.folha-topo {
  display: block;
  margin: 0 -16px 14px;
  /* O env sobra pra barra de status quando o app roda sem barra do navegador;
     no iPhone com barra opaca ele vale 0 e nada muda. */
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(14px + 26px);
  background: var(--cor-folha, var(--roxo)); color: #fff;
  border-radius: 0;
}
@media (min-width: 900px) { .folha-topo { border-radius: 22px 22px 0 0; } }
.folha-titulo {
  flex: 1; min-width: 0; text-align: center; font-size: 16px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.folha-fechar, .folha-abrir {
  flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .22); color: #fff;
}
.folha-fechar:hover, .folha-abrir:hover { background: rgba(255, 255, 255, .34); }
/* O card do topo sobe e encosta no cabeçalho colorido, como na tela cheia. */
.folha-corpo .topo-extrato { margin-top: -34px; }
.folha-carregando {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 60px 0; color: var(--txt2); font-size: 14px;
}
.girando.escuro { border-color: rgba(0, 0, 0, .15); border-top-color: var(--roxo); }
body.sem-rolagem { overflow: hidden; }

/* Setas do período dentro do modal: andam pelos meses/faturas só para olhar,
   sem mexer no mês escolhido na tela de trás. */
.folha-barra { display: flex; align-items: center; gap: 10px; }
.folha-periodo {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px;
}
.folha-periodo span {
  min-width: 150px; text-align: center; font-size: 14.5px; font-weight: 600;
  color: rgba(255, 255, 255, .95);
}
.folha-periodo a {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
}
.folha-periodo a:hover { background: rgba(255, 255, 255, .2); }

/* A equação do balanço: ativo = passivo + patrimônio líquido. */
.equacao {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 10px; font-size: 12.5px; color: var(--txt2); text-align: center;
}
.equacao strong { font-size: 13.5px; margin-left: 4px; }
.equacao-sinal { font-weight: 700; color: var(--txt); font-size: 15px; }

/* ---------- Balanço na tela inicial ---------- */
/* O .painel não tem recuo lateral (quem recua são as linhas dele); aqui o
   conteúdo é solto, então o recuo vem no próprio card. */
.painel-balanco { display: block; color: inherit; padding: 16px; }
.balanco-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.balanco-valor { font-size: 19px; font-weight: 700; letter-spacing: -.4px; }
/* Quanto do ativo já é seu de verdade: o verde é o patrimônio, o resto é dívida. */
.balanco-barra {
  height: 8px; border-radius: 99px; background: #fdecea; overflow: hidden; margin: 12px 0 14px;
}
.balanco-barra span { display: block; height: 100%; background: var(--verde); border-radius: 99px; }
/* min-width 0 nos dois lados: sem isso o "R$ 246.800,00 em bens" empurrava a
   coluna e o texto saía pela borda do card. */
.balanco-linhas { display: flex; gap: 14px; }
.balanco-linhas > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.balanco-linhas .valor { font-size: 15px; }
.balanco-linhas small { font-size: 10.5px; color: var(--txt2); line-height: 1.35; }

/* Bem: mesma casca dos lançamentos, com o topo preto. */
.lanc.escuro .lanc-topo { background: #1e2432; }
.lanc.escuro .pilula.ativa { background: #000; }
.lanc.escuro .lanc-salvar { background: #1e2432; }
.lanc.escuro .chave input:checked + .chave-trilho { background: #1e2432; }
.calc-folha.escuro .calc-pronto { background: #1e2432; }
/* Linha que guarda um bloco (segmento, cores) em vez de um campo de uma linha. */
.lanc-linha-alta { align-items: flex-start; padding-top: 16px; }
.lanc-linha-alta .lanc-icone { margin-top: 2px; }
.lanc-apagar-bem { padding: 16px 18px 0; }

/* ---------- Balanço patrimonial ---------- */
.bp-capa {
  background: linear-gradient(160deg, #262d3f 0%, #1a1f2e 100%);
  color: #fff; border-radius: var(--raio); padding: 20px;
  box-shadow: 0 10px 30px rgba(20, 24, 40, .22); margin-bottom: 14px;
}
.bp-capa-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.bp-titulo { font-size: 14px; font-weight: 700; letter-spacing: -.2px; }
.bp-data { font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.bp-pl {
  font-size: 30px; font-weight: 700; letter-spacing: -1px; margin-top: 16px;
  font-variant-numeric: tabular-nums; color: #4ade80;
}
.bp-pl.negativo { color: #fca5a5; }
.bp-pl-rotulo {
  font-size: 10.5px; color: rgba(255, 255, 255, .55);
  text-transform: uppercase; letter-spacing: 1px; margin-top: 2px;
}
.bp-capa-linhas { display: flex; gap: 24px; margin-top: 18px; }
.bp-capa-linhas > div { display: flex; flex-direction: column; gap: 2px; }
.bp-capa-linhas span { font-size: 11px; color: rgba(255, 255, 255, .55); }
.bp-capa-linhas strong { font-size: 15px; font-variant-numeric: tabular-nums; }

/* O quadro é uma tabela: sem recuo próprio, e as faixas encostam nas bordas.
   overflow hidden pra faixa preta acompanhar o arredondamento do card. */
.bp-quadro {
  background: var(--card); border-radius: var(--raio); overflow: hidden;
  box-shadow: 0 4px 14px rgba(30, 30, 70, .05); margin-bottom: 14px; padding: 0;
}
.bp-linha {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 16px; color: inherit; font-variant-numeric: tabular-nums;
}
.bp-nome { flex: 1; min-width: 0; display: flex; align-items: baseline; }
.bp-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-valor { flex-shrink: 0; white-space: nowrap; font-weight: 600; }
/* Nível 0: os totalizadores do quadro. */
.bp-n0 {
  background: #1e2432; color: #fff; font-weight: 700; font-size: 12.5px;
  letter-spacing: .6px; text-transform: uppercase; padding: 13px 16px;
}
.bp-n0 .bp-valor { font-weight: 700; font-size: 13.5px; }
/* Nível 1: grupos. Uma linha fina acima separa do bloco anterior. */
.bp-n1 {
  font-weight: 700; font-size: 12.5px; letter-spacing: .3px; text-transform: uppercase;
  background: #f5f7fb; color: var(--txt); padding: 11px 16px;
}
.bp-n2 { font-weight: 600; font-size: 13.5px; }
.bp-n3 { font-size: 13px; color: var(--txt2); padding-left: 30px; }
a.bp-n3:hover { background: #fafbff; color: var(--txt); }
.bp-n3 .bp-valor { color: var(--txt); font-weight: 500; }
.bp-vazia { font-style: italic; opacity: .8; }
.bp-n2 .bp-nome::after, .bp-n3 .bp-nome::after {
  content: ''; flex: 1 1 auto; min-width: 14px; margin: 0 8px;
  border-bottom: 1px dotted #d5dbe8; transform: translateY(-3px);
}
.bp-nota {
  text-align: center; font-size: 11.5px; color: var(--txt2);
  margin: -4px 0 18px; padding: 0 12px;
}

/* ---------- Coeficientes de análise ---------- */
.ind-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 420px) { .ind-grade { grid-template-columns: 1fr; } }
.ind-card {
  background: var(--card); border-radius: 16px; padding: 14px;
  box-shadow: 0 4px 14px rgba(30, 30, 70, .05);
  display: flex; flex-direction: column; gap: 2px;
}
.ind-topo { display: flex; align-items: center; gap: 8px; }
.ind-nome {
  flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--txt2);
  text-transform: uppercase; letter-spacing: .4px;
}
/* O ponto colorido diz na hora se o número está confortável. */
.ind-selo { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: #cfd6e6; }
.ind-selo.bom     { background: var(--verde); }
.ind-selo.atencao { background: #f0a132; }
.ind-selo.ruim    { background: var(--vermelho); }
.ind-valor {
  font-size: 24px; font-weight: 700; letter-spacing: -.6px;
  font-variant-numeric: tabular-nums; margin-top: 6px;
}
.ind-leitura { font-size: 12px; color: var(--txt2); line-height: 1.4; margin-top: 4px; }
.ind-formula {
  font-size: 10.5px; color: #9aa3b8; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--linha);
}

/* Painel solto no body enquanto aberto: precisa do próprio z-index e da
   aparência que herdava do .select. */
body > .select-painel { z-index: 95; }

/* ---------- Balanço para imprimir ---------- */
.linha-voltar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.botao-baixar {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: var(--card); color: var(--roxo); border: 1px solid #dcd0ff;
  font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px;
  margin-bottom: 14px;
}
.botao-baixar:hover { background: var(--roxo-suave); }

body.folha-impressa { background: #eef1f8; padding: 0 0 30px; }
/* A folha tem largura de documento. No celular ela não encolhe: rola de lado,
   dentro deste embrulho, para o papel continuar sendo papel. */
.imp-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Embrulho que só serve ao papel: thead e tfoot de uma tabela são repetidos
   pelo navegador em toda página impressa, e é isso que dá o respiro do topo e
   do pé quando o documento passa de uma folha. Na tela ela não existe. */
.imp-pagina { width: 100%; border-collapse: collapse; }
.imp-pagina > thead, .imp-pagina > tfoot { display: none; }
.imp-pagina > tbody > tr > td { padding: 0; }
.imp-dica { display: none; }
.imp-barra {
  display: flex; gap: 10px; justify-content: flex-end;
  max-width: 820px; margin: 0 auto; padding: 14px 16px;
}
.imp-folha {
  background: #fff; max-width: 820px; margin: 0 auto; padding: 34px 38px;
  box-shadow: 0 10px 34px rgba(20, 24, 40, .12); color: #1e2432;
}
.imp-cabecalho {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; border-bottom: 2px solid #1e2432;
}
.imp-empresa { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.imp-sub { font-size: 11.5px; color: #6b7488; margin-top: 2px; }
.imp-marca { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; }
.imp-titulo {
  font-size: 15px; font-weight: 700; letter-spacing: 1.4px;
  text-align: center; margin: 22px 0 2px;
}
.imp-data { text-align: center; font-size: 11.5px; color: #6b7488; margin-bottom: 20px; }
/* O nome de quem é o documento (pessoa, conta, cartão) puxa o olho. */
.imp-data b { font-weight: 700; font-size: 13px; color: #1e2432; letter-spacing: -.1px; }

/* Duas colunas no papel, como no modelo do contador; uma só no celular. */
.imp-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 700px) { .imp-colunas { grid-template-columns: 1fr; gap: 14px; } }
.imp-tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.imp-tabela td { padding: 4px 6px; font-size: 11.5px; vertical-align: baseline; }
.imp-tabela td.v { text-align: right; white-space: nowrap; font-weight: 600; }
.imp-tabela .n0 td {
  background: #1e2432; color: #fff; font-weight: 700; font-size: 11px;
  letter-spacing: .6px; padding: 7px 6px;
}
.imp-tabela .n1 td { font-weight: 700; font-size: 11px; letter-spacing: .3px; background: #f1f4f9; }
.imp-tabela .n2 td { font-weight: 600; }
.imp-tabela .n3 td { padding-left: 20px; color: #4a5266; }
.imp-tabela .n3 td.v { color: #1e2432; font-weight: 500; }

.imp-secao {
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
  margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #d5dbe8;
}
.imp-indicadores td.formula { font-size: 10.5px; color: #6b7488; }
.imp-indicadores .cabecalho td {
  font-size: 10px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: #6b7488; border-bottom: 1px solid #d5dbe8;
}
/* Extrato/fatura no papel: resumo em três blocos e a tabela dos lançamentos. */
.imp-recorte {
  margin: 0 0 16px; padding: 9px 12px; border-radius: 8px;
  background: #f3eaff; color: #5b21b6; font-size: 11px; line-height: 1.4;
}
.imp-recorte b { font-weight: 700; }
.imp-resumo {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: #d5dbe8; border: 1px solid #d5dbe8; margin-bottom: 18px;
}
.imp-resumo-item { background: #fff; padding: 10px 12px; }
.imp-resumo-item span {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: #6b7488; margin-bottom: 3px;
}
.imp-resumo-item strong { font-size: 15px; font-weight: 700; letter-spacing: -.3px; }
/* Detalhe do bloco: o que entrou e o que saiu por baixo do movimento do mês. */
.imp-resumo-detalhe {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 9.5px; color: #6b7488; letter-spacing: .1px;
}
.imp-resumo-item .positivo { color: #12734f; }
.imp-resumo-item .negativo { color: #b3261e; }
.imp-resumo-item .neutro { color: #1e2432; }

.imp-extrato .cabecalho td {
  font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: #6b7488; border-bottom: 1px solid #d5dbe8;
}
.imp-extrato tr + tr td { border-bottom: 1px solid #eef1f6; }
.imp-extrato .imp-dia { white-space: nowrap; color: #6b7488; }
.imp-extrato .imp-fraco { color: #6b7488; font-size: 10.5px; }
.imp-extrato td.v.positivo { color: #12734f; }
.imp-extrato td.v.negativo { color: #b3261e; }
.imp-extrato .imp-vazio { padding: 16px 6px; color: #6b7488; text-align: center; }
/* Faixa de grupo dentro do documento (cartão/conta do terceiro). */
.imp-extrato .imp-grupo td {
  background: #e9edf5; font-weight: 700; font-size: 11px;
  padding-top: 7px; padding-bottom: 7px;
  border-top: 1px solid #cdd5e4; border-bottom: 1px solid #cdd5e4;
}
.imp-extrato .imp-grupo td.v { color: #b3261e; }
/* Quadro de entradas: o que soma é verde, não vermelho. */
.imp-entradas .imp-grupo td.v, .imp-entradas .imp-total td.v { color: #12734f; }
/* Etiqueta no lugar da categoria: transferência, líquido da folha, pagamento
   de fatura. Não é plano de contas — é o que a linha é. */
.imp-extrato .imp-etiqueta {
  display: inline-block; padding: 1.5px 7px; border-radius: 999px;
  background: #e4e9f4; color: #46506a;
  font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
}

.imp-conta {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: rgba(0, 0, 0, .07); font-size: 10px; color: #6b7488;
}
/* Os dois lados de uma faixa que fechou com devolução no meio: sem isso um
   cartão de 2.000 gastos e 2.000 devolvidos aparece como zero e some. */
.imp-lados { margin-left: 8px; font-weight: 400; font-size: 10px; color: #6b7488; }
.imp-nota { margin: -4px 0 8px; font-size: 10px; color: #6b7488; line-height: 1.5; }
.imp-extrato .imp-total td {
  border-top: 2px solid #1e2432; border-bottom: 0; font-weight: 700;
  font-size: 11px; padding-top: 8px; color: #6b7488;
}
.imp-extrato .imp-total td.v { color: #1e2432; font-size: 12.5px; }

.imp-rodape {
  margin-top: 26px; padding-top: 12px; border-top: 1px solid #d5dbe8;
  font-size: 10px; color: #8a92a6; text-align: center;
}

/* No papel: sem fundo cinza, sem botões, e as cores das faixas preservadas.
   Margem zero na @page de propósito: é no espaço da margem que o navegador
   imprime o endereço do site e a data. Sem margem não sobra lugar para eles,
   e o respiro da folha passa a vir do padding aqui de dentro. */
@page { size: A4 portrait; margin: 0; }
@media print {
  body.folha-impressa { background: #fff; padding: 0; }
  .imp-barra, .imp-dica { display: none; }
  /* No papel nada rola nem tem largura fixa: a folha é a página. */
  .imp-rolagem { overflow: visible; }
  /* A margem de cima e de baixo agora vem do thead/tfoot repetidos: aqui fica
     só a das laterais, senão a primeira página ganharia o dobro. */
  .imp-folha { box-shadow: none; max-width: none; width: auto; margin: 0; padding: 0 12mm; }
  .imp-pagina > thead { display: table-header-group; }
  .imp-pagina > tfoot { display: table-footer-group; }
  .imp-margem { height: 14mm; }
  .imp-tabela { page-break-inside: avoid; }
  /* Extrato é lista longa: ela QUEBRA entre páginas. Sem isto o navegador
     empurrava a tabela inteira para a página seguinte e a primeira saía vazia.
     O que não pode quebrar é a linha — e o cabeçalho do cartão/conta não fica
     órfão no pé da página. */
  .imp-extrato { page-break-inside: auto; }
  .imp-extrato tr { page-break-inside: avoid; }
  .imp-extrato .imp-grupo { page-break-after: avoid; break-after: avoid-page; }
  .imp-resumo { page-break-inside: avoid; }
  .imp-tabela .n0 td, .imp-tabela .n1 td,
  .imp-extrato .cabecalho td, .imp-extrato .imp-grupo td, .imp-resumo-item,
  .imp-extrato .imp-etiqueta {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* No telefone a folha se ajusta à tela em vez de rolar de lado: ela é uma
   PRÉVIA, e prévia que exige arrastar não se lê. O papel continua A4 — quem
   manda na impressão é o bloco @media print, mais abaixo. */
/* "screen and": A4 tem 794px de largura, ou seja, MENOS que 880 — sem o
   "screen" estas regras entravam também na impressão e bagunçavam o papel. */
@media screen and (max-width: 880px) {
  .imp-rolagem { overflow-x: visible; padding-bottom: 12px; }
  .imp-folha { width: auto; max-width: 100%; margin: 0 10px; padding: 20px 14px; }
  .imp-dica { display: none; }

  /* Os três números do topo viram três linhas, rótulo à esquerda e valor à
     direita: em coluna eles quebravam o "R$ 21.235,42" no meio. */
  .imp-resumo { grid-template-columns: 1fr; }
  .imp-resumo-item {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 8px 12px;
  }
  .imp-resumo-item span { margin: 0; }
  .imp-resumo-item strong { font-size: 14px; white-space: nowrap; }
  .imp-resumo-detalhe { text-align: right; }

  /* A tabela encolhe, mas sem cortar palavra no meio: o que sobra vai para a
     linha de baixo inteiro. Data e valor não quebram nunca. */
  /* Cada linha vira uma faixa: data à esquerda, descrição no meio, valor
     colado na direita. Em tabela as linhas com colspan (a faixa do grupo)
     caíam numa grade diferente das linhas comuns, e os valores não se
     alinhavam entre si. Assim todas seguem a mesma régua. */
  .imp-tabela { width: 100%; max-width: 100%; }
  .imp-tabela td { font-size: 10.5px; padding: 6px 4px; }
  .imp-extrato tr { display: flex; align-items: baseline; gap: 8px; }
  .imp-extrato td { display: block; }
  .imp-extrato tr > td:nth-child(2) { flex: 1; min-width: 0; }
  .imp-extrato tr.imp-grupo > td:first-child,
  .imp-extrato tr.imp-total > td:first-child { flex: 1; min-width: 0; }
  .imp-extrato td.v { margin-left: auto; text-align: right; }
  /* A linha separadora passa a ser da FAIXA inteira: nas células ela virava
     três tracinhos com buraco entre eles. */
  .imp-extrato tr + tr { border-bottom: 1px solid #eef1f6; }
  .imp-extrato tr + tr td { border-bottom: 0; }
  .imp-extrato tr.imp-total { border-bottom: 0; }
  /* O cinza da faixa do grupo (e as bordas dela) passa para a LINHA: nas
     células ele parava no vão entre uma e outra e abria um talho branco. */
  .imp-extrato tr.imp-grupo {
    background: #e9edf5; border-top: 1px solid #cdd5e4; border-bottom: 1px solid #cdd5e4;
  }
  .imp-extrato tr.imp-grupo td { background: none; border: 0; }
  /* O mesmo para o quadro das entradas, que usa a faixa em verde. */
  .imp-entradas tr.imp-grupo td.v { color: #12734f; }
  /* Total: o traço grosso fecha a faixa inteira, não cada célula. */
  .imp-extrato tr.imp-total { border-top: 2px solid #1e2432; }
  .imp-extrato tr.imp-total td { border-top: 0; }
  .imp-extrato .cabecalho td { font-size: 8.5px; letter-spacing: .3px; white-space: nowrap; }
  .imp-extrato .imp-dia { font-size: 10px; white-space: nowrap; flex: 0 0 auto; }
  .imp-extrato td.v { white-space: nowrap; flex: 0 0 auto; }
  .imp-tabela .n3 td { padding-left: 12px; }
  /* "Onde" sai (repete o título da folha) e a categoria vira uma pastilha
     antes do nome do lançamento — cabe na largura do telefone e não rouba a
     linha da descrição. No papel as duas voltam como colunas. */
  .imp-extrato tr > td:nth-child(4):not(.v),
  .imp-extrato tr.cabecalho > td:nth-child(4),
  .imp-extrato tr.cabecalho > td:nth-child(3) { display: none; }
  .imp-extrato tr:not(.cabecalho):not(.imp-grupo):not(.imp-total) > td:nth-child(3):not(.v) {
    order: 2; flex: 0 1 auto; min-width: 0; max-width: 40%;
    background: #eef1f8; border-radius: 999px; padding: 2px 8px;
    font-size: 9px; color: #46506a; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  /* A ordem da faixa: dia, pastilha da categoria, nome e valor na ponta. */
  .imp-extrato .imp-dia { order: 1; }
  .imp-extrato tr > td:nth-child(2):not(.v) { order: 3; }
  .imp-extrato td.v { order: 4; }
  /* Nome comprido sem espaço não pode invadir a coluna do lado. */
  .imp-extrato td { overflow-wrap: anywhere; }
  .imp-cabecalho { gap: 10px; }
  .imp-empresa { font-size: 14px; }
  .imp-titulo { font-size: 13px; letter-spacing: .8px; }
}

/* ---------- Conciliação ---------- */
.conc-lista { display: flex; flex-direction: column; }
.conc-item {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--card); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(30, 30, 70, .04);
}
.conc-item:hover { background: #fafbff; }
.conc-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.conc-caixa {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  border: 2px solid #cfd6e6; background: #fff;
  display: grid; place-items: center; transition: background .12s, border-color .12s;
}
.conc-caixa::after {
  content: ''; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(.4); opacity: 0; transition: transform .12s, opacity .12s;
}
.conc-item input:checked + .conc-caixa { background: var(--verde); border-color: var(--verde); }
.conc-item input:checked + .conc-caixa::after { transform: rotate(-45deg) scale(1); opacity: 1; }
.conc-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conc-nome {
  font-size: 14.5px; font-weight: 600; letter-spacing: -.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conc-sub {
  font-size: 12px; color: var(--txt2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conc-valor { flex-shrink: 0; font-size: 14.5px; white-space: nowrap; }
/* Barra de ação fixa acima da barra de menus, como a de lançamentos. */
.conc-barra {
  position: fixed; z-index: 28; left: 10px; right: 10px;
  bottom: calc(var(--nav-altura) + 10px + env(safe-area-inset-bottom, 0px));
  background: #1e2432; color: #fff; border-radius: 18px; padding: 10px 12px 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 14px 34px rgba(15, 20, 35, .28); font-size: 13.5px;
}
@media (min-width: 900px) {
  .conc-barra { left: calc(var(--lateral) + 20px); right: 20px; bottom: 20px; }
}

/* Menu do modal de extrato: o botão é o mesmo círculo claro do cabeçalho. */
.folha-menu { position: relative; flex-shrink: 0; }
.folha-menu .menu-lista { right: 0; top: calc(100% + 8px); min-width: 210px; color: var(--txt); }

/* Em Transações, o resumo e a busca ficam grudados no alto: quem rola é a
   lista. O topo roxo já é sticky, então este bloco encosta logo abaixo dele. */
/* Tudo até a busca fica parado: o card roxo gruda no alto e o resumo+busca
   logo abaixo dele. Só a lista rola. */
/* As sombras laterais tapam a fresta que sobra ao lado do card: sem elas, a
   lista rolando aparecia de relance nas bordas, ao lado do roxo.
   margin-bottom zero: a folga até o saldo é dada pelo bloco branco de baixo, um
   lugar só — com a margem aqui, ela sumia ao grudar e a distância mudava. */
.topo-card.roxo {
  position: sticky; top: 0; z-index: 19; margin-bottom: 0;
  /* Transações: branco mesmo. O bloco de saldo/busca logo abaixo é branco e
     encosta no card, então as faixas laterais têm de ser da cor dele. */
  box-shadow: -20px 0 0 0 #fff, 20px 0 0 0 #fff;
}

/* O planejamento voltou a ter bloco branco encostado embaixo (a faixa do plano
   global), então as faixas laterais são brancas de novo — é a cor com que elas
   emendam. */
.tr-cabecalho {
  position: sticky; top: var(--topo-altura, 0px); z-index: 18; background: #fff;
  /* Toda a folga entre o roxo e o saldo mora aqui: parado ou grudado, o
     espaço é o mesmo, e o branco cobre a lista que passa por baixo. */
  margin: 0 -16px; padding: 14px 16px 2px;
  box-shadow: 0 6px 12px -8px rgba(20, 24, 40, .18);
}
.tr-cabecalho .tr-busca { margin-bottom: 10px; }

/* Dentro do modal, o cabeçalho colorido e o card do resumo ficam parados; só a
   lista de lançamentos rola. O fundo é o mesmo da folha para a lista não
   aparecer por trás ao passar. */
.folha-fixo {
  position: sticky; top: 0; z-index: 4; background: var(--fundo);
  /* O respiro embaixo é padding, não margem do card: assim ele entra no bloco
     que fica parado e a lista passa por baixo com folga, em vez de aparecer
     cortada rente à borda do card. */
  margin: 0 -16px; padding: 0 16px 14px;
}
.folha-fixo .topo-extrato { margin-bottom: 0; }

/* ---------- Importar fatura do cartão ---------- */
/* Passos da importação: arquivo -> conferir -> classificar */
.fat-passos {
  display: flex; align-items: center; gap: 6px; list-style: none;
  margin: 0 0 14px; padding: 0;
}
.fat-passos li {
  flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 12.5px; font-weight: 600; color: var(--txt2);
}
.fat-passos li + li::before {
  content: ''; flex: 0 0 10px; height: 2px; border-radius: 2px; background: #dfe5f2; margin-right: 1px;
}
.fat-passos span {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  background: #e9edf6; color: var(--txt2);
}
.fat-passos .agora { color: var(--txt); }
.fat-passos .agora span { background: var(--roxo); color: #fff; }
.fat-passos .feito span { background: var(--roxo-suave); color: var(--roxo); }

/* Cabeçalho: a marca do banco, a fatura escolhida e as datas dela */
/* A cor é a que ele escolheu para a conta ou o cartão — a mesma da barra do
   extrato. O véu escuro por cima dá a profundidade que o roxo fixo dava antes e
   garante o branco legível mesmo numa cor clara. */
.fat-cartao-topo {
  display: flex; align-items: center; gap: 13px; margin-bottom: 14px;
  padding: 15px 16px; border-radius: var(--raio);
  background-color: var(--cor-folha, var(--roxo));
  background-image: linear-gradient(135deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12));
  color: #fff; box-shadow: 0 10px 26px rgba(30, 26, 70, .22);
}
.fat-logo {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px;
  display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff;
}
.fat-logo.com-logo { background: #fff; padding: 7px; }
.fat-logo img { width: 100%; height: 100%; object-fit: contain; }
.fat-cartao-corpo { flex: 1; min-width: 0; }
.fat-cartao-corpo strong { display: block; font-size: 15.5px; letter-spacing: -.2px; }
.fat-cartao-fatura { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .75); margin-top: 2px; }
.fat-cartao-datas { display: flex; flex-direction: column; gap: 3px; text-align: right; flex: 0 0 auto; }
.fat-cartao-datas span { font-size: 11px; color: rgba(255, 255, 255, .68); }
.fat-cartao-datas strong { font-size: 13px; color: #fff; margin-left: 4px; }

/* Campo de arquivo: a área toda aceita clique e arrastar */
.fat-dica { margin: 6px 0 0; font-size: 11.5px; color: var(--txt2); line-height: 1.45; }
/* Precisa ganhar do `label { display: block }` que a folha usa nos formulários. */
.fat-form label.fat-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: 8px; padding: 26px 18px; text-align: center; cursor: pointer;
  border: 1.5px dashed #cfd7ea; border-radius: 16px; background: #fafbff;
  transition: border-color .15s, background .15s;
}
.fat-drop:hover, .fat-drop.arrastando { border-color: var(--roxo); background: var(--roxo-suave); }
.fat-drop.tem-arquivo { border-style: solid; border-color: var(--roxo); background: #fff; }
.fat-drop-icone {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--roxo-suave); color: var(--roxo); margin-bottom: 6px;
}
.fat-drop-titulo { font-size: 14.5px; font-weight: 600; color: var(--txt); word-break: break-word; }
.fat-drop-sub { font-size: 12px; color: var(--txt2); }
.fat-tipos { display: flex; gap: 6px; margin-top: 10px; }
.fat-tipos span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; background: #eef1f8; color: var(--txt2);
}
.botao[disabled] { opacity: .45; cursor: not-allowed; }

/* Como funciona */
.fat-como { display: grid; gap: 14px; margin-top: 14px; }
.fat-como-item { display: flex; gap: 11px; align-items: flex-start; font-size: 12.5px; color: var(--txt2); line-height: 1.5; }
.fat-como-item > span {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 10px; display: grid; place-items: center;
  background: var(--roxo-suave); color: var(--roxo);
}
.fat-como-item strong { display: block; font-size: 13.5px; color: var(--txt); margin-bottom: 1px; }

/* Colar a lista da tela: fica recolhido, porque é a saída de exceção — só
   serve para o cartão que não entrega arquivo antes de a fatura fechar. */
.fat-colar { margin-top: 14px; }
.fat-colar > summary {
  display: flex; align-items: center; gap: 11px; cursor: pointer; list-style: none;
}
.fat-colar > summary::-webkit-details-marker { display: none; }
.fat-colar-icone {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 10px; display: grid; place-items: center;
  background: var(--roxo-suave); color: var(--roxo);
}
.fat-colar summary strong { display: block; font-size: 13.5px; }
.fat-colar summary em { font-style: normal; font-size: 12.5px; color: var(--txt2); }
.fat-colar[open] > summary { margin-bottom: 14px; }
.fat-colar textarea {
  width: 100%; font-size: 13px; line-height: 1.5; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fat-colar .fat-dica { margin: 8px 0 14px; }

/* Escolher os prints: mesma cara do campo de arquivo, em versão de uma linha. */
.fat-prints {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  margin: 8px 0 12px; padding: 13px 14px;
  border: 1.5px dashed #cfd7ea; border-radius: 14px; background: #fafbff;
}
.fat-prints:hover { border-color: var(--roxo); background: var(--roxo-suave); }
.fat-prints-icone {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; display: grid; place-items: center;
  background: var(--roxo-suave); color: var(--roxo);
}
.fat-prints-texto strong { display: block; font-size: 13.5px; }
.fat-prints-texto em { font-style: normal; font-size: 12px; color: var(--txt2); }
.fat-prints-andar { margin: -4px 0 12px; font-size: 12px; color: var(--txt2); line-height: 1.45; }
.fat-prints-barra {
  height: 6px; border-radius: 999px; background: #e8ecf6; overflow: hidden; margin-bottom: 6px;
}
.fat-prints-barra i { display: block; height: 100%; width: 0; background: var(--roxo); transition: width .25s; }

.fat-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.fat-resumo .sub { display: block; font-size: 11.5px; }
.fat-resumo strong { font-size: 15px; }

.fat-aviso {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 12px;
  padding: 11px 13px; border-radius: 12px; background: #eef3ff; color: #26418f;
  font-size: 12.5px; line-height: 1.45;
}
.fat-aviso.erro { background: #fdecea; color: #b3261e; }
.fat-aviso svg { flex: 0 0 18px; margin-top: 1px; }

/* Conferência: números do topo, avisos e a lista por estabelecimento */
.fat-numeros {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 12px;
  background: var(--linha); border-radius: var(--raio); overflow: hidden;
}
.fat-numeros > div { background: var(--card); padding: 12px 6px; text-align: center; }
.fat-numeros span { display: block; font-size: 10.5px; color: var(--txt2); margin-bottom: 3px; }
.fat-numeros strong { font-size: 15px; letter-spacing: -.3px; }
.fat-numeros strong.destaque { color: var(--roxo); }
.fat-numeros strong.valor { font-size: 13px; }

.fat-todos { margin-bottom: 12px; }
.fat-todos-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.fat-todos-topo strong { font-size: 14px; }
.fat-todos-campos { display: grid; gap: 8px; }
.fat-todos-campos .fat-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 340px) { .fat-todos-campos .fat-duo { grid-template-columns: 1fr; } }
.fat-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--txt2); }
.fat-check input { width: 17px; height: 17px; flex: 0 0 17px; accent-color: var(--roxo); }

/* O select é largo por natureza (o rótulo não quebra). Num grid, o item nasce
   com min-width auto e por isso ele estourava a borda do card: aqui ele passa a
   caber na coluna, e o rótulo comprido some com reticências. */
.fat-todos-campos, .fat-grupo-campos, .fat-duo, .fat-dois { min-width: 0; }
.fat-todos-campos > *, .fat-grupo-campos > *, .fat-duo > *, .fat-dois > * { min-width: 0; }
.fat-todos-campos .select-botao, .fat-grupo-campos .select-botao { height: 44px; }
.fat-todos-campos .select-escolhido, .fat-grupo-campos .select-escolhido { min-width: 0; }
.fat-todos-campos [data-select-rotulo], .fat-grupo-campos [data-select-rotulo] {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fat-grupos { display: grid; gap: 10px; }
.fat-grupo { margin: 0; padding: 13px 14px; }
.fat-grupo.sem-novo { opacity: .62; }
.fat-grupo-topo { display: flex; align-items: flex-start; gap: 10px; }
.fat-linha-check { flex: 0 0 auto; align-self: flex-start; margin-top: 1px; line-height: 0; }
.fat-linha-check input { width: 18px; height: 18px; accent-color: var(--roxo); }
.fat-grupo-nome { flex: 1; min-width: 0; }
.fat-grupo-nome strong { display: block; font-size: 14px; line-height: 1.3; word-break: break-word; }
.fat-grupo-sub { display: block; font-size: 11.5px; color: var(--txt2); margin-top: 2px; }
.fat-grupo-topo .valor { flex: 0 0 auto; white-space: nowrap; font-size: 14px; }
.fat-ver {
  border: 0; background: none; padding: 0; font: inherit; color: var(--roxo);
  font-weight: 600; cursor: pointer; text-decoration: underline;
}

.fat-linhas { margin: 10px 0 0; border-top: 1px solid var(--linha); }
.fat-linha {
  display: flex; align-items: center; gap: 9px; padding: 8px 0;
  font-size: 12px; color: var(--txt2); border-bottom: 1px solid var(--linha);
}
.fat-linha:last-child { border-bottom: 0; }
.fat-linha input { width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--roxo); }
.fat-linha > span:first-of-type { flex: 1; min-width: 0; }
.fat-linha .valor { flex: 0 0 auto; font-size: 12.5px; }

.fat-grupo-campos { display: grid; gap: 8px; margin-top: 11px; }
.fat-dois { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 340px) { .fat-dois { grid-template-columns: 1fr; } }

.fat-linha-hist { display: flex; align-items: center; gap: 12px; }
/* Um card encostado no outro parecia um só: .cartao não tem margem própria. */
.fat-linha-hist + .fat-linha-hist { margin-top: 12px; }
.fat-linha-hist .botao { width: auto; margin: 0; padding: 9px 14px; font-size: 13px; flex: 0 0 auto; }
.fat-hist-icone {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; display: grid; place-items: center;
  background: #eef1f8; color: var(--txt2);
}
.fat-hist-corpo { flex: 1; min-width: 0; }
.fat-hist-corpo .sub { margin: 2px 0 0; font-size: 12px; }
.fat-hist-arquivo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px !important; }

.fat-classificar-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.fat-classificar .fat-dois { margin-top: 10px; }
/* O painel corta o que passa da borda; com o menu aberto ele solta. */
.painel.menu-aberto { overflow: visible; }
.painel .menu-conta .painel-mais { border: 0; background: none; cursor: pointer; }
/* Mês e arquivo: o navegador desenha do jeito dele, aqui viram campo do app. */
input[type="month"], input[type="date"] { font-family: inherit; }
input[type="file"] {
  padding: 10px 12px; font-size: 13.5px; color: var(--txt2); cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 9px 14px; border: 0; border-radius: 999px;
  background: var(--roxo-suave); color: var(--roxo); font-family: inherit;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: #e4d9fb; }

/* ---------- Fatura: o que é meu e o que é de terceiro ---------- */
.abas-fatura { display: flex; gap: 6px; margin: 12px 0 0; }
.aba-lista {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; cursor: pointer; font-family: inherit; -webkit-appearance: none;
  padding: 9px 10px; border-radius: 999px; background: #eef1f8; color: var(--txt2);
  font-size: 13px; font-weight: 600; transition: background .15s, color .15s;
}
.aba-lista small {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, .07); color: inherit;
}
.aba-lista.ativa { background: var(--roxo); color: #fff; }
.aba-lista.ativa small { background: rgba(255, 255, 255, .22); }
.aba-lista:hover:not(.ativa) { background: #e4e9f4; color: var(--txt); }

.extrato-resumo.tres { grid-template-columns: repeat(3, 1fr); }
.extrato-resumo.tres .valor { font-size: 14px; }

/* Card branco sobre fundo claro some: a borda dá o contorno, a sombra dá o
   relevo e a faixa da cor da pessoa diz onde um card começa e o outro acaba. */
/* margin-top em TODOS, não só no primeiro: :first-of-type não pega, porque a
   barra de busca é uma div irmã antes dele. Entre os cards as margens se
   encostam e valem 14 uma vez só. */
.terceiro-card {
  position: relative; padding: 0; overflow: hidden; margin: 14px 0 12px;
  border: 1px solid #dbe1ee;
  box-shadow: 0 6px 18px rgba(30, 30, 70, .08);
}
/* Faixa reta, não borda: com o canto arredondado uma borda esquerda vira um
   parêntese em volta do card. Assim ela desce reta e o canto só apara as pontas. */
.terceiro-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--terc-cor, var(--roxo));
}
.terceiro-topo {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 15px;
  border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left;
}
.terceiro-topo:hover { background: #fafbff; }
.terceiro-marca {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px; display: grid; place-items: center;
  font-size: 15px; font-weight: 700; letter-spacing: -.2px;
}
.terceiro-nome { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--txt); }
.terceiro-nome small { display: block; font-size: 11.5px; font-weight: 400; color: var(--txt2); margin-top: 2px; }
.terceiro-valor { flex: 0 0 auto; font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--txt); }
.terceiro-seta { flex: 0 0 auto; color: #b9c0d0; display: grid; place-items: center; transition: transform .18s; }
.terc-concluir .pend-check { width: 17px; height: 17px; flex: 0 0 17px; }
.terceiro-card.aberto { box-shadow: 0 10px 28px rgba(30, 30, 70, .13); }
.terceiro-card.aberto .terceiro-seta { transform: rotate(180deg); }

/* A lista de uma pessoa é um extrato enxuto: dia, o que foi e quanto.
   Sem cabeçalho de dia e sem repetir a categoria e o cartão em toda linha —
   dentro do card da pessoa isso já está dito. */
.terceiro-lista { border-top: 1px solid var(--linha); background: #fbfcff; }
.terceiro-item {
  display: flex; align-items: center; gap: 11px; padding: 11px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, .05); font-size: 13.5px; color: var(--txt);
}
.terceiro-item:last-child { border-bottom: 0; }
.terceiro-item:hover { background: #f2f5fd; }
.terceiro-dia {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--txt2);
  background: #eef1f8; padding: 3px 8px; border-radius: 999px;
}
.terceiro-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terceiro-item .valor { flex: 0 0 auto; font-size: 13.5px; white-space: nowrap; color: var(--txt); }
.terceiro-item .valor.positivo { color: var(--verde); }
/* Fatura com gasto de terceiro: o seu é o número grande, o total fica miúdo. */
.tr-total-fatura { display: block; font-size: 11px; color: var(--txt2); margin-top: 1px; }

/* Extrato: as linhas que já têm par aqui dentro, só esperando o conciliar. */
.ext-casados { padding: 0; }
.ext-casado {
  display: flex; align-items: center; gap: 10px; padding: 11px 15px;
  border-bottom: 1px solid var(--linha); font-size: 13.5px; cursor: pointer;
}
.ext-casado:last-child { border-bottom: 0; }
.ext-casado input { width: 17px; height: 17px; flex: 0 0 17px; accent-color: var(--roxo); }
.ext-dia {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--txt2);
  background: #eef1f8; padding: 3px 8px; border-radius: 999px;
}
.ext-texto { flex: 1; min-width: 0; overflow: hidden; }
.ext-texto small { display: block; font-size: 11px; color: var(--txt2); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-casado .valor { flex: 0 0 auto; font-size: 13.5px; white-space: nowrap; }
.terceiro-desfazer { padding: 12px 14px; background: #fff; border-top: 1px solid var(--linha); }
.terceiro-desfazer .botao { margin: 0; display: flex; align-items: center; justify-content: center; gap: 7px; }
.terceiro-texto small { color: var(--txt2); font-size: 11px; }
/* O arquivo original da importação, guardado para conferir depois. */
.imp-arquivo {
  display: flex; align-items: center; gap: 9px; padding: 10px 15px;
  border-top: 1px solid var(--linha); background: #fafbff;
  font-size: 12.5px; font-weight: 600; color: var(--roxo);
}
.imp-arquivo span { flex: 1; min-width: 0; }
.imp-arquivo:hover { background: var(--roxo-suave); }
.fat-hist-arquivo.abrir { display: inline-flex; align-items: center; gap: 5px; color: var(--roxo);
  font-weight: 600; font-size: 11px; margin-top: 3px; max-width: 100%; }
/* Extrato: quitar uma conta que já estava lançada e em aberto. */
.ext-quitar { margin-bottom: 8px; }
.ext-ajuste { display: grid; gap: 7px; margin-top: 9px; padding: 10px 12px; border-radius: 12px; background: #f5f7fd; }
.ext-ajuste label { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px;
  color: var(--txt2); line-height: 1.45; cursor: pointer; }
.ext-ajuste input { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; accent-color: var(--roxo); }
/* Cabeçalho da lista do extrato: o nome da seção com a contagem, e o "marcar
   tudo" como pílula — o quadradinho solto no canto ficava com cara de sobra. */
.ext-cabecalho { display: flex; justify-content: flex-end; margin: 16px 0 10px; }
.ext-marcar {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; cursor: pointer;
  padding: 7px 13px 7px 9px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--linha); font-size: 12.5px; font-weight: 600; color: var(--txt2);
  transition: background .15s, border-color .15s, color .15s;
}
/* O input fica escondido, mas continua sendo o estado do check. Sem zerar o
   tamanho ele herdava o width:100% dos campos e, sem pai posicionado, esticava
   375px a partir da pílula — era isso que empurrava a página para o lado. */
.ext-marcar { position: relative; }
.ext-marcar input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
  opacity: 0; pointer-events: none;
}
.ext-marcar-caixa {
  width: 18px; height: 18px; flex: 0 0 18px; border-radius: 6px; display: grid; place-items: center;
  background: #eef1f8; color: transparent; transition: background .15s, color .15s;
}
.ext-marcar:hover { border-color: #cfd7ea; }
.ext-marcar:has(input:checked) { background: var(--roxo-suave); border-color: var(--roxo); color: var(--roxo); }
.ext-marcar input:checked + .ext-marcar-caixa { background: var(--roxo); color: #fff; }
.imp-anexar { padding: 0; }
.imp-anexar label { display: flex; align-items: center; gap: 9px; padding: 10px 15px; cursor: pointer; width: 100%; }
.imp-anexar span { flex: 1; min-width: 0; }
.fat-hist-anexar label { display: inline-flex; align-items: center; gap: 5px; color: var(--txt2);
  font-size: 11px; margin-top: 3px; cursor: pointer; }
.fat-hist-anexar label:hover { color: var(--roxo); }
.imp-continuar { padding: 0; }
.imp-continuar button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 15px;
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--roxo); text-align: left;
}
.imp-continuar button span { flex: 1; min-width: 0; }
.imp-continuar:hover { background: var(--roxo-suave); }
.fat-hist-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.fat-hist-acoes form { margin: 0; }
.fat-hist-acoes button {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0;
  font-family: inherit; font-size: 11px; font-weight: 700; color: var(--roxo); cursor: pointer;
}
/* Extrato: modo de somar várias linhas num lançamento só. */
.ext-modos { margin: 0 0 10px; }
.ext-soma { margin-bottom: 10px; border-left: 3px solid var(--roxo); }
.ext-soma-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ext-soma-topo strong { display: block; font-size: 18px; letter-spacing: -.4px; }
.ext-soma-topo .mini-rotulo { display: block; }
/* Fatura já paga (ou paga em parte): a linha discreta abaixo do resumo. */
.fatura-pago {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--linha); font-size: 12.5px; color: var(--txt2);
}
.fatura-pago svg { flex: 0 0 16px; }
.fatura-pago.incompleta { color: #9a6b00; }
/* Fatura paga pela metade: faixa própria, cor de aviso, dentro do card. */
.fatura-falta {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 10px;
  padding: 9px 11px; border-radius: 11px; line-height: 1.4;
  background: #fff4e0; color: #8a5b00; font-size: 12.5px;
}
.fatura-falta svg { flex: 0 0 16px; margin-top: 1px; }
.fatura-falta.sobrou { background: #eef3ff; color: #26418f; }
.fatura-pago svg { color: var(--verde); flex: 0 0 auto; }
.fatura-pago strong { color: var(--txt); }
/* Fatura já paga na lista de transações: o valor perde o alarme do vermelho. */
.tr-fatura-paga .tr-valor { color: var(--txt2); }
.tr-fatura-paga .tr-total-fatura { color: var(--txt2); opacity: .8; }
/* Extrato: dividir uma linha do banco em duas. */
.ext-dividir { margin: 10px 0 0; padding: 11px 12px; border-radius: 12px; background: #f5f7fd; }
.ext-dividir-rotulo { display: block; font-size: 12px; color: var(--txt2); margin-bottom: 7px; }
.ext-dividir-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ext-parte-valor { padding: 10px 11px; font-size: 13.5px; border-radius: 11px; }
.ext-dividir-linha .botao { width: auto; margin: 0; padding: 10px 16px; font-size: 13px; }
.ext-parte-resto { margin: 8px 0 0; font-size: 11.5px; color: var(--txt2); }
.fat-grupo-sub .fat-ver { font-size: inherit; }

/* Extrato: mês sem conta em aberto — diz o porquê em vez de sumir com a busca. */
.ext-sem-aberta {
  margin: 0 0 .5rem;
  font-size: .78rem;
  color: var(--texto-fraco);
}

/* Terceiro em Transações: a conta corrente da pessoa em uma linha só —
   quanto veio de antes, quanto rodou no mês, quanto ficou. */
.terceiro-conta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 14px 12px; padding: 10px 12px;
  background: #f3f5fa; border-radius: 12px;
  font-size: 13px; color: var(--txt);
}
.terceiro-conta > span { display: flex; flex-direction: column; min-width: 0; }
.terceiro-conta small { font-size: 10.5px; color: var(--txt2); text-transform: uppercase; letter-spacing: .3px; }
.terceiro-conta strong { font-weight: 700; }
.terceiro-conta-sinal { color: var(--txt2); font-size: 15px; align-self: flex-end; padding-bottom: 1px; }
.terceiro-conta.zerou { background: #e8f7f0; color: #0e6b4a; }
.terceiro-conta.zerou small { color: #0e6b4a; opacity: .75; }
.terceiro-zerou {
  display: flex; align-items: center; gap: 6px;
  margin: -6px 14px 12px; font-size: 12px; color: #0e9f6e;
}

/* Até onde a conta já bateu com o extrato do banco. */
.selo-conferido {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px; padding: 1px 7px 2px;
  border-radius: 999px; background: #e8f7f0; color: #0e6b4a;
  font-size: 10.5px; font-weight: 700; vertical-align: middle; white-space: nowrap;
}
.selo-conferido svg { flex: 0 0 auto; }
@media (prefers-color-scheme: dark) {
  .selo-conferido { background: #123a2c; color: #4ade9f; }
}

/* Setas das bolhas de receita e despesa: traço fino e branco de leve.
   Cheio demais, o ícone competia com o valor ao lado. */
.bolha svg {
  stroke-width: 1.5;
  color: rgba(255, 255, 255, .92);
}

/* Pendências do mês: fila que rola de lado, um card por frente. */
.pend-fila {
  display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
  /* Sangra até a borda da tela e devolve o respiro por dentro: 12px é o padding
     do .conteudo. Aqui morava --lateral (248px, a largura do menu do
     computador), e no celular isso esticava a fila para 862px — ela passava a
     ser maior que a tela em vez de rolar por dentro, e o dedo não movia nada. */
  margin: 0 -12px 6px;
  padding: 2px 12px 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Sem scroll-snap: com ele a fila abria já rolada, escondendo o primeiro
     card. Rolagem livre é o que se espera de uma fila de cards. */
  overscroll-behavior-x: contain;
}
.pend-fila::-webkit-scrollbar { display: none; }
.pend-card {
  /* Estreito de propósito: com dois cards inteiros na tela ninguém percebia
     que a fila continuava. Assim o terceiro aparece pela metade e convida. */
  flex: 0 0 clamp(132px, 36vw, 168px);
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 13px; margin: 0; text-decoration: none; color: inherit;
}
.pend-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 10px;
}
/* Seta grande e vazada, como no card de alertas: o contorno é a figura. */
.pend-seta { color: var(--txt); display: grid; place-items: center; }
/* O card cortado na borda já mostra que a fila continua — o véu que ficava
   aqui só sujava a tela. */
.pend-conta {
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700;
}
.pend-vermelho { background: var(--vermelho); }
.pend-verde    { background: var(--verde); }
.pend-azul     { background: #2f7ff2; }
.pend-roxo     { background: var(--roxo); }
.pend-rotulo { color: var(--txt2); font-size: 11.5px; line-height: 1.3; }
.pend-card .valor { font-size: 15px; font-weight: 700; white-space: nowrap; }

/* Soma das vencidas, ao lado do título do bloco. */
.tr-atrasadas-soma { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--vermelho); }

/* Pendências: abas que rolam de lado e as linhas de fatura/terceiro. */
.abas-pend { overflow-x: auto; scrollbar-width: none; }
.abas-pend::-webkit-scrollbar { display: none; }
.abas-pend .aba { white-space: nowrap; flex: 0 0 auto; }
.conc-todos-linha { border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
.pend-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; margin-bottom: 10px; text-decoration: none; color: inherit;
}
.pend-linha-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pend-linha-corpo strong { font-size: 15px; }
.pend-linha-corpo .sub { margin: 0; font-size: 12.5px; }

/* ================= Pendências e alertas ================= */
/* Tela de folha inteira: barra própria com voltar e título no meio. A página
   abre sem o card do topo, então cada bloco daqui cuida do próprio respiro. */
/* Topo de tela interna: voltar e título, sem o card do topo. Fica grudado no
   alto — quem rola é só a lista branca embaixo. */
.topo-voltar {
  position: sticky; top: 0; z-index: 21; background: var(--fundo);
  display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px;
}
.topo-voltar h1 {
  flex: 1; margin: 0; padding-right: 40px; min-width: 0;
  font-size: 16px; font-weight: 700; text-align: center;
}
.topo-voltar-botao {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--txt);
  background: var(--card); box-shadow: 0 2px 10px rgba(30, 30, 70, .08);
}

/* Abas em pílula, rolando de lado. */
/* Gruda logo abaixo da barra do título: 68px é a altura dela. Abas, contador
   e período vêm juntos: quem prende é este bloco, não cada um por si — assim o
   período nunca passa por baixo do contador quando a seleção aparece. */
.pend-topo-fixo {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 68px);
  z-index: 20; background: var(--fundo); padding-bottom: 12px; margin-bottom: 4px;
}
.pend-abas {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  margin: 0; padding: 2px 16px 10px;
}
.pend-abas::-webkit-scrollbar { display: none; }
.pend-aba {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 999px; text-decoration: none;
  background: #dfe3ee; color: var(--txt2); font-size: 12.5px; font-weight: 600;
}
.pend-aba.ativa { color: #fff; }
.pend-aba.ativa.vermelha { background: var(--vermelho); }
.pend-aba.ativa.verde    { background: var(--verde); }
.pend-aba.ativa.roxa     { background: var(--roxo); }
.pend-aba-conta {
  min-width: 17px; padding: 1px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .28); font-size: 10.5px; font-weight: 700;
}
.pend-aba:not(.ativa) .pend-aba-conta { background: rgba(0, 0, 0, .08); }

/* O painel branco que segura a lista inteira. */
/* Sem margem lateral: a lista usa a tela toda, que é onde o nome do
   lançamento precisa de espaço. */
.pend-painel { margin: 0; padding: 0 0 8px; border-radius: 18px 18px 0 0; }
.pend-todos {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 12px; cursor: pointer;
}
.pend-todos-texto { font-size: 15.5px; font-weight: 700; flex: 0 0 auto; }
.pend-todos-nota { display: grid; place-items: center; color: var(--roxo); flex: 1; justify-items: start; }
.pend-dia { padding: 14px 14px 6px; color: var(--txt); font-size: 13.5px; font-weight: 700; }
.pend-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer;
}
.pend-item-icone {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--roxo);
}
.pend-item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pend-item-nome { font-size: 13.5px; font-weight: 600; }
.pend-item-sub {
  font-size: 11.5px; color: var(--txt2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pend-item .valor { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
/* Pastilha de repetição: "3/12" na parcela, "9/fixo" no que volta todo mês.
   Na lista de pagar/receber ela vai solta depois do nome — se não couber, cai
   para a linha de baixo, porque cortar a descrição de uma conta a pagar é pior
   do que a linha ficar um pouco mais alta. */
.pend-item-nome .etiqueta { margin-left: 5px; vertical-align: 1px; white-space: nowrap; }
/* Em terceiros o nome já era cortado com reticências, então lá a pastilha fica
   presa na linha e quem encolhe é o nome. */
.serie-linha { display: flex; align-items: center; gap: 5px; min-width: 0; }
.serie-linha .serie-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serie-linha .etiqueta { flex: 0 0 auto; }
/* Caixinha desenhada: o input fica escondido atrás dela. Preso no canto da
   própria linha — solto, ele ficava fora da tela e criava rolagem lateral. */
.pend-todos, .pend-item { position: relative; }
.pend-todos input, .pend-item input {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.pend-check {
  width: 21px; height: 21px; flex: 0 0 21px; border-radius: 7px;
  border: 1.8px solid #c8cddd; display: grid; place-items: center;
}
.pend-todos input:checked ~ .pend-check,
.pend-item  input:checked ~ .pend-check { background: var(--vermelho); border-color: var(--vermelho); }
/* Linha marcada muda de cor: dá para ver o que está selecionado sem caçar a
   caixinha do lado direito. */
.pend-item.marcado { background: #efe9fb; }
.pend-item.marcado .pend-item-nome { color: var(--txt); }
/* Alguns marcados, não todos: traço no lugar do visto. */
.pend-todos.parcial .pend-check { background: var(--vermelho); border-color: var(--vermelho); }
.pend-todos.parcial .pend-check::after {
  content: ''; width: 10px; height: 0; margin: 0;
  border-left: 0; border-bottom: 2.2px solid #fff; transform: none;
}
.pend-todos input:checked ~ .pend-check::after,
.pend-item  input:checked ~ .pend-check::after {
  content: ''; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff; transform: rotate(-45deg);
}
@media (min-width: 900px) {
  .pend-barra, .pend-abas { padding-left: calc(var(--lateral) + 20px); padding-right: 20px; }
  .pend-painel { margin: 0 0 0 var(--lateral); border-radius: 18px; }
}
.pend-dia-antigo { color: var(--txt2); }
/* Onde o período termina, escrito logo abaixo das abas: todas elas olham deste
   dia para trás, e ler isso é mais rápido do que deduzir pelo mês do topo. */
.pend-periodo {
  display: flex; align-items: center; gap: 7px;
  margin: 0 16px; font-size: 12.5px; color: var(--txt2);
}
.pend-periodo strong { color: var(--txt); font-weight: 700; }
.pend-periodo svg { flex: none; opacity: .75; }
@media (min-width: 900px) {
  .pend-periodo { margin-left: calc(var(--lateral) + 20px); }
}
/* Faixa que separa o que venceu antes do mês escolhido, com o total. */
.pend-vencidas {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 16px 14px 2px; padding: 10px 12px; border-radius: 12px;
  background: #fff4e5; color: #8a5a12; font-size: 13px;
}
.pend-vencidas span { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.pend-vencidas strong { font-size: 14.5px; white-space: nowrap; }
/* Na aba dos terceiros os cards não moram dentro do painel branco: a faixa
   acompanha a margem deles em vez da margem da lista. */
.pend-vencidas-terceiros { margin-left: 0; margin-right: 0; }

/* Principal: mês na mesma linha do ícone e do avatar. Os dois das pontas ficam
   um pouco mais altos e o mês desce de leve, para o olho pousar nele. */
.topo-card.com-mes .topo-barra { align-items: flex-start; }
.topo-card.com-mes .topo-marca,
.topo-card.com-mes .avatar { margin-top: -2px; }
/* Avatar do mesmo tamanho do ícone do app: os dois nas pontas da linha do mês,
   com o mesmo peso visual. */
.topo-card.com-mes .avatar { width: 34px; height: 34px; font-size: 12.5px; }
.topo-card.com-mes .topo-meio { flex: 1; display: flex; justify-content: center; }
/* Em tela bem estreita a palavra disputaria espaço com o mês: ali fica só o
   desenho, que sozinho já é a marca. */
@media (max-width: 350px) { .topo-card.com-mes .topo-marca span { display: none; } }
.topo-card.com-mes .topo-meio .seletor-mes { margin-top: 6px; }

/* Pendências: o branco vai até embaixo e a folga do menu é a mínima — o resto
   era espaço vazio entre o fim da lista e a barra. */
.tela-pendencias .app {
  padding-bottom: calc(var(--nav-altura) + 6px + env(safe-area-inset-bottom, 0px));
}
/* Sem respiro lateral no conteúdo: a lista branca vai de ponta a ponta. Quem
   cuida do próprio afastamento aqui são o topo e as abas. */
.tela-pendencias .conteudo { padding-left: 0; padding-right: 0; }
/* O branco vem do fundo da própria tela, não de um bloco empilhado embaixo do
   painel: bloco posicionado conta como área rolável e esticava a página. O topo
   e as abas pintam o próprio lilás por cima. */
.tela-pendencias .app { background: var(--card); min-height: 100dvh; }
.tela-pendencias .pend-painel { box-shadow: none; }


/* Pendências: contador no lugar das abas e barra de ação embaixo. */
.pend-selecao { padding: 10px 16px; text-align: center; font-size: 14px; }
.pend-selecao strong { color: var(--roxo); font-size: 17px; margin-right: 4px; }
.pend-acao {
  position: fixed; z-index: 26;
  left: 0; right: 0; bottom: calc(var(--nav-altura) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--card); border-top: 1px solid var(--linha);
}
.pend-acao-total {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  font-size: 12.5px; color: var(--txt2);
}
.pend-acao-total strong { font-size: 17px; color: var(--vermelho); }
.pend-lapis {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.6px solid var(--vermelho); color: var(--vermelho);
}
.pend-acao-botao {
  width: auto; margin: 0; padding: 12px 26px; border-radius: 999px;
  background: var(--vermelho); font-size: 15px;
}
@media (min-width: 900px) {
  .pend-acao { left: var(--lateral); }
  .pend-selecao { padding-left: calc(var(--lateral) + 16px); }
}
.pend-acao.verde .pend-acao-total strong,
.pend-acao.verde .pend-lapis { color: var(--verde); }
.pend-acao.verde .pend-lapis { border-color: var(--verde); }
.pend-acao.verde .pend-acao-botao { background: var(--verde); }
/* Linha de grupo (folha, fatura): abre a tela própria em vez de ter caixinha. */
.pend-item-grupo { text-decoration: none; color: inherit; }
.pend-seta-linha { color: var(--txt2); display: grid; place-items: center; width: 21px; flex: 0 0 21px; }

/* Folha de confirmação do pagar/receber. O valor é a estrela: fica num bloco
   colorido, grande, e os outros campos vêm rotulados embaixo. */
.modal-baixa { padding: 20px 18px 22px; }
.baixa-topo { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.baixa-topo > div { flex: 1; min-width: 0; }
.modal-baixa h2 { margin: 0; font-size: 17px; line-height: 1.25; }
.baixa-sub {
  margin: 3px 0 0; font-size: 12.5px; color: var(--txt2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-baixa .modal-fechar { float: none; flex: 0 0 32px; margin: 0; }

.baixa-valor {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; border-radius: 16px; margin-bottom: 6px;
  background: #fdecea;
}
.modal-baixa.verde .baixa-valor { background: #e6f7f0; }
.baixa-rotulo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--txt2);
}
.baixa-campo-valor {
  border: 0; background: none; padding: 0; width: 100%;
  font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: var(--vermelho);
}
.modal-baixa.verde .baixa-campo-valor { color: var(--verde); }
.baixa-dica { font-size: 11px; color: var(--txt2); }
/* O valor mora dentro do bloco colorido: o anel roxo de foco padrão brigava
   com o vermelho. Aqui o próprio bloco já mostra onde se está digitando. */
.baixa-campo-valor:focus { outline: none; box-shadow: none; border-color: transparent; }
.baixa-entrada:focus { outline: none; box-shadow: none; }

.baixa-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 2px; border-bottom: 1px solid var(--linha);
}
.baixa-icone {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px;
  display: grid; place-items: center; background: #f3f5fa; color: var(--txt2);
}
.baixa-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.baixa-entrada {
  border: 0; background: none; padding: 0; width: 100%;
  font-size: 15px; font-weight: 600; color: var(--txt);
}
.baixa-corpo .select { margin: 0; }
.baixa-corpo .select-botao { border: 0; padding: 0; min-height: 0; background: none; }

.baixa-botoes { display: flex; gap: 10px; margin-top: 20px; }
.baixa-botoes .botao { flex: 1; margin: 0; border-radius: 999px; padding: 13px 0; }
.baixa-confirmar { background: var(--vermelho); }
.modal-baixa.verde .baixa-confirmar { background: var(--verde); }
/* Fatura na lista de pendências: o logo do banco no lugar do ícone genérico. */
.pend-item-icone.com-logo { padding: 5px; box-shadow: inset 0 0 0 1px var(--linha); }
.pend-item-icone img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.pend-abrir-fatura { color: var(--roxo); text-decoration: none; font-weight: 600; }
/* Terceiros nas pendências: cards fora do painel branco, com respiro lateral. */
.pend-terceiros { padding: 0 12px; }
.pend-terceiros .terceiro-nome small { display: block; }
/* Subtítulo da fatura: pode quebrar em duas linhas para o "ver a fatura" caber. */
.pend-sub-solta { white-space: normal; overflow: visible; line-height: 1.4; }

/* Card do terceiro: nome em cima, e embaixo os dois números que interessam —
   o que ainda está em aberto e o quanto o mês mexeu nisso. */
.terc-topo { align-items: flex-start; gap: 12px; }
.terc-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.terc-nome { display: flex; flex-direction: column; gap: 1px; font-size: 15px; font-weight: 700; }
.terc-nome small { font-size: 11.5px; font-weight: 500; color: var(--txt2); }
.terc-numeros { display: flex; gap: 18px; }
.terc-bloco { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.terc-bloco small {
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--txt2);
}
.terc-bloco strong { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.terc-mes {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; background: #f2f5fd;
  font-size: 11.5px; font-weight: 700; color: var(--txt2);
  text-transform: uppercase; letter-spacing: .3px;
}
.terc-mes .valor { font-size: 12.5px; }
/* Cabeçalho de mês entre os cards de terceiros. */
.terc-mes-titulo {
  padding: 16px 2px 8px; font-size: 13.5px; font-weight: 700; color: var(--txt);
}
.terc-mes-titulo.antigo { color: var(--txt2); }

/* Terceiros: a caixinha de "acertado" e a lista dos que saíram do controle. */
/* Valor do mês com o rótulo dizendo de que lado está a dívida. */
.terc-valor { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.terc-valor b { font-size: 15.5px; font-weight: 700; white-space: nowrap; letter-spacing: -.3px; }
.terc-valor small {
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--txt2);
}

/* O rodapé do card é um rodapé: cinza, baixo e discreto — quem manda no card
   é o nome e o valor, não a caixinha de marcar. */
.terc-acertar {
  display: flex; align-items: stretch; border-top: 1px solid var(--linha);
  background: #eef1f8; border-radius: 0 0 var(--raio) var(--raio); overflow: hidden;
}
.terc-acertar .terc-concluir { flex: 1; border-top: 0; }
.terc-pdf {
  flex: 0 0 auto; display: grid; place-items: center; width: 38px;
  color: var(--roxo); border-left: 1px solid var(--linha);
}
.terc-pdf:active { background: var(--roxo-suave); }
.terc-concluir {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 14px; border-top: 1px solid var(--linha);
  font-size: 11.5px; color: var(--txt2); position: relative;
}
.terc-concluir input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }
.terc-concluir input:checked ~ span { color: var(--roxo); }
.terc-concluir input:checked ~ .pend-check { background: var(--roxo); border-color: var(--roxo); }
.terc-concluir input:checked ~ .pend-check::after {
  content: ''; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff; transform: rotate(-45deg);
}
/* Folha de dar por acertado: uma linha por pessoa e a escolha de levar o que
   sobrou adiante. */
/* Mês sem nada pendente: no lugar da fila de cards, um só, comemorando. */
.pend-zerado {
  display: flex; align-items: center; gap: 14px; padding: 16px 16px;
  background: linear-gradient(120deg, #eafaf3 0%, #f4f1ff 100%);
  border: 1px solid #cdeee0;
}
.pend-zerado-selo {
  position: relative; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--verde);
  box-shadow: 0 2px 8px rgba(30, 185, 128, .18);
}
.pend-zerado-brilho { position: absolute; top: -6px; right: -6px; color: #e3a008; }
.pend-zerado-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pend-zerado-texto strong { font-size: 14.5px; color: var(--txt); }
.pend-zerado-texto span { font-size: 12px; color: var(--txt2); line-height: 1.45; }

/* De onde vem o pedaço do previsto que não tem lançamento: dinheiro de
   terceiro que ainda volta. Some quando está vazia (modo saldo atual). */
.saldo-nota { margin: 2px 0 0; font-size: 11.5px; color: var(--txt2); text-align: center; }
.saldo-nota:empty { display: none; }
.acertar-lista { margin: 4px 0 2px; }
.acertar-linha {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid var(--linha);
}
.acertar-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acertar-nome { font-size: 14px; font-weight: 600; color: var(--txt); }
.acertar-mes { font-size: 11.5px; color: var(--txt2); }
.acertar-valor { font-size: 14px; font-weight: 700; white-space: nowrap; text-align: right; }
.acertar-valor.negativo { color: var(--vermelho); }
.acertar-valor.positivo { color: var(--verde); }
.acertar-valor small { display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase; color: var(--txt2); }
.acertar-levar {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--roxo-suave); position: relative;
}
.acertar-levar input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }
.acertar-levar .pend-check { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; background: #fff; }
.acertar-levar input:checked ~ .pend-check { background: var(--roxo); border-color: var(--roxo); }
.acertar-levar input:checked ~ .pend-check::after {
  content: ''; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff; transform: rotate(-45deg);
}
.acertar-levar-texto { display: flex; flex-direction: column; gap: 3px; }
.acertar-levar-texto b { font-size: 13px; color: var(--txt); }
.acertar-levar-texto em { font-style: normal; font-size: 11.5px; color: var(--txt2); line-height: 1.45; }
.pend-acao.roxa .pend-acao-total strong { color: var(--roxo); }
.pend-acao.roxa .pend-acao-botao { background: var(--roxo); }
.pend-acertados { margin: 18px 12px 0; font-size: 12.5px; color: var(--txt2); }
.pend-acertados summary { cursor: pointer; padding: 8px 0; }
.pend-acertado-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--linha);
}
.pend-acertado-linha a { color: var(--roxo); font-weight: 600; text-decoration: none; }
/* Dentro do terceiro: de onde veio cada pedaço, com o total daquela origem. */
/* A lista de lançamentos da análise usa as mesmas peças do card de terceiros;
   aqui só o embrulho, que lá vem do próprio card. */
.an-lancamentos { padding: 0; overflow: hidden; margin-top: 14px; }
.an-lancamentos .terceiro-item:last-child { border-bottom: 0; }

.terc-onde {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: #eef2fc;
  font-size: 12px; font-weight: 700; color: var(--txt);
}
.terc-onde-nome { display: flex; align-items: center; gap: 6px; min-width: 0; }
.terc-onde-nome svg { flex: 0 0 auto; color: var(--txt2); }
.terc-onde-nome small {
  font-weight: 600; color: var(--txt2); background: #fff;
  padding: 1px 6px; border-radius: 999px; font-size: 10.5px;
}
.terc-onde .valor { font-size: 12.5px; }
/* Contas logo depois das pendências: sem o espaço de uma seção nova. */
.secao-cabecalho.logo-abaixo { margin-top: 10px; }
/* Um respiro a mais quando o card de cima termina colado, como o painel dos
   holerites — sem ele o título encosta no fim do card anterior. */
.secao-cabecalho.secao-respiro { margin-top: 30px; }

/* Cartão na tela inicial: sua parte grande, o total da fatura pequeno embaixo,
   e o visto verde quando ela já foi paga. O nome e o valor dividem a linha: o
   corpo vira duas colunas em vez de empilhar tudo. */
.painel-linha .painel-corpo { flex-direction: row; align-items: center; gap: 10px; }
.painel-linha .painel-nome { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 1px; }
.painel-linha .painel-nome small { margin: 0; font-size: 12px; }
.painel-valores { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.painel-total-fatura { font-size: 11px; color: var(--txt2); white-space: nowrap; }
.painel-total-fatura:empty { display: none; }
/* Visto do pagamento na linha do vencimento: verde quando pago, cinza quando
   ainda não. Ocupa o mesmo lugar sempre, então nada dança na lista. */
.painel-linha .painel-nome small.painel-vence { display: flex; align-items: center; gap: 5px; }
.painel-check { display: grid; place-items: center; color: #c8cddd; flex: 0 0 auto; }
.painel-check.pago { color: var(--verde); }
/* Fechamento e vencimento em linhas separadas, sempre nessa ordem. */
.painel-linha .painel-nome small { line-height: 1.35; }
/* Balanço do mês, colado no saldo do topo. O botão PREVISTO respira embaixo. */
.saldo-balanco { margin: -8px 0 0; text-align: center; font-size: 12px; color: var(--txt2); }
.saldo-balanco strong { font-weight: 700; margin-left: 4px; font-size: 12.5px; }
/* O PREVISTO respira embaixo do balanço, senão os três ficam empilhados. */
.saldo-balanco + * { margin-top: 14px; }

/* ================= Balanço na tela inicial ================= */
.painel-balanco { display: block; padding: 0; overflow: hidden; text-decoration: none; color: inherit; }
/* Cabeçalho fino de todos os cards da tela inicial: nome à esquerda, a
   posição/período à direita. Nasceu no balanço e virou o padrão da tela. */
.painel-cabeca {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 13px 16px 12px; font-size: 14px; font-weight: 700; letter-spacing: -.2px;
  border-bottom: 1px solid var(--linha);
}
.painel-cabeca small { font-size: 11.5px; font-weight: 500; color: var(--txt2); white-space: nowrap; }
/* Dentro do balanço a divisória já vem do quadro de baixo. */
.painel-balanco .painel-cabeca { border-bottom: 0; padding: 15px 16px 13px; font-size: 14.5px; }
/* O cabeçalho já separa: a primeira linha depois dele não repete a divisória. */
.painel-cabeca + .painel-linha::before,
.painel-cabeca + .obj-cabeca { border-top: 0; }

/* Os dois lados do balanço, com a divisória no meio como numa folha contábil. */
.bal-lados { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linha); }
.bal-lado { min-width: 0; display: flex; flex-direction: column; }
.bal-lado + .bal-lado { border-left: 1px solid var(--linha); }
.bal-lado-topo {
  display: flex; flex-direction: column; gap: 3px; padding: 11px 14px;
  background: #f7f8fc; border-bottom: 1px solid var(--linha);
}
.bal-lado-topo span {
  font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--txt2);
}
.bal-lado-topo b { font-size: 15px; font-weight: 700; letter-spacing: -.3px; }
.bal-lado-topo.ativo b   { color: var(--verde); }
.bal-lado-topo.passivo b { color: var(--vermelho); }

.bal-grupo { padding: 11px 14px; display: flex; flex-direction: column; gap: 2px; }
.bal-grupo + .bal-grupo { border-top: 1px solid var(--linha); }
.bal-grupo-rotulo {
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--txt2);
}
.bal-grupo b { font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; }
.bal-grupo small { font-size: 10.5px; color: var(--txt2); line-height: 1.35; }

/* Patrimônio líquido fecha o lado direito, destacado em verde. */
.bal-pl {
  margin-top: auto; padding: 12px 14px; background: #eafaf2;
  border-top: 1px solid var(--linha); display: flex; flex-direction: column; gap: 3px;
}
.bal-pl b { font-size: 16px; font-weight: 700; letter-spacing: -.3px; color: #12734f; }
.bal-pl b.negativo { color: var(--vermelho); }

.bal-abrir {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 12px; border-top: 1px solid var(--linha);
  color: var(--roxo); font-size: 13px; font-weight: 600;
}

/* ================= Objetivos ================= */
.obj-resumo { margin-bottom: 14px; }
.obj-resumo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.obj-resumo-topo .valor { font-size: 22px; font-weight: 700; }
.obj-barra { height: 8px; border-radius: 999px; background: #eef1f8; overflow: hidden; margin: 12px 0 10px; }
.obj-barra span { display: block; height: 100%; border-radius: 999px; background: var(--roxo); }
.obj-resumo-pes { display: flex; gap: 22px; font-size: 15px; font-weight: 700; }
.obj-resumo-pes span { display: flex; flex-direction: column; gap: 1px; }
.obj-resumo-pes small {
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--txt2);
}
.obj-resumo-pes .negativo { color: var(--vermelho); }
.obj-nota { margin: 10px 0 0; font-size: 12px; color: var(--txt2); line-height: 1.45; }
.obj-nota b { color: var(--txt); font-weight: 700; }
.obj-nota b.negativo, .obj-resumo-pes b.negativo { color: var(--vermelho); }
.obj-resumo-pes b.positivo { color: var(--verde); }
/* Quanto ainda dá para guardar naquele objetivo, logo acima do campo. */
.obj-limite { margin: 10px 0 12px; font-size: 12px; color: var(--txt2); line-height: 1.45; }
.obj-limite b { font-weight: 700; }
.obj-limite b.positivo { color: var(--verde); }
.obj-limite .negativo { color: var(--vermelho); font-weight: 600; }
/* Campo de porcentagem: o % fica dentro da caixa, à direita. */
.campo-pct input { padding-right: 42px; }
.campo-pct > span {
  position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  color: var(--txt2); font-size: 14px; font-weight: 600; pointer-events: none;
}

.obj-card { margin-bottom: 10px; }
.obj-card.pronto { opacity: .7; }
.obj-topo { display: flex; align-items: center; gap: 12px; }
.obj-icone { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px; display: grid; place-items: center; }
.obj-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.obj-nome strong { font-size: 15.5px; }
.obj-nome small { font-size: 11.5px; color: var(--txt2); }
.obj-numeros { display: flex; gap: 20px; margin-top: 12px; }
.obj-numeros span { display: flex; flex-direction: column; gap: 1px; }
.obj-numeros small {
  font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--txt2);
}
.obj-numeros b { font-size: 14.5px; }
.obj-guardar { display: flex; gap: 8px; align-items: center; }
.obj-guardar .lanc-entrada {
  flex: 1; min-width: 0; border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px;
}
.obj-guardar .botao { width: auto; margin: 0; padding: 10px 14px; font-size: 13.5px; }
.obj-contas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.obj-conta {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 12px; border-radius: 999px; background: #f3f5fa; font-size: 13.5px;
}
.obj-conta input, .plan-so-mes input {
  accent-color: var(--roxo); width: 17px; height: 17px; flex: 0 0 17px; padding: 0; margin: 0;
}
/* Objetivos na tela inicial. */
.obj-cabeca { padding: 14px 16px 13px; }
.obj-cabeca-nums { display: flex; gap: 26px; }
.obj-cabeca-nums span { display: flex; flex-direction: column; gap: 2px; }
.obj-cabeca-nums small {
  font-size: 10.5px; color: var(--txt2); text-transform: uppercase; letter-spacing: .5px;
}
.obj-cabeca-nums b { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.obj-cabeca .obj-barra { margin: 11px 0 8px; height: 7px; }
.obj-cabeca-nota { margin: 0; font-size: 11.5px; color: var(--txt2); }
.obj-cabeca-nota b { font-weight: 700; }
.obj-cabeca-nota .positivo { color: var(--verde); }
.obj-cabeca-nota .negativo { color: var(--vermelho); font-weight: 600; }
/* A primeira linha depois do cabeçalho ganha a divisória de cima. */
.obj-cabeca + .painel-linha::before {
  content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: var(--linha);
}
.obj-linha-valor { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.obj-linha-valor b { font-size: 14.5px; font-weight: 700; }
.obj-linha-valor small { font-size: 11px; color: var(--txt2); white-space: nowrap; }
.obj-vazio { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.obj-vazio .obj-nome small { font-size: 12px; }
.obj-linha { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; }
.obj-linha-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.obj-linha-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* O mesmo respiro dos dois lados: nome/observação à esquerda, valor/meta à direita. */
.obj-linha-nome { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.obj-linha-topo strong { font-size: 14.5px; }
.obj-linha-topo .valor { font-size: 14.5px; font-weight: 700; }
.obj-linha .obj-barra { margin: 0; height: 6px; }
.obj-linha-pe { font-size: 11.5px; color: var(--txt2); }
/* A observação vem grudada no nome, numa linha só. */
.obj-linha-obs {
  font-size: 11px; color: var(--txt2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.obj-obs { font-size: 12px; color: var(--txt2); }

/* ---------- Planejamento: orçamento por grupo e a pizza do mês ---------- */
.plan-resumo { margin-bottom: 12px; }
.plan-resumo-linha { display: flex; gap: 10px; }
.plan-resumo-item {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.plan-resumo-item small { font-size: 11.5px; color: var(--txt2); text-transform: uppercase; letter-spacing: .4px; }
.plan-resumo-item b { font-size: 15px; font-weight: 700; }
.plan-resumo-item i { font-size: 11px; color: var(--txt2); font-style: normal; }

.plan-link {
  border: 0; background: none; color: var(--roxo); font-size: 13px; font-weight: 600;
  padding: 0; cursor: pointer;
}

/* Capa escura: o número grande é o que ainda dá para gastar. */
/* O card do mês é branco como o resto da tela: o preto dominava demais entre
   dois cards claros. As cores agora vêm dos números, não do fundo. */
.plan-capa { background: var(--card); color: var(--txt); padding: 16px 16px 18px; margin-bottom: 10px; }
.plan-capa-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--txt2); letter-spacing: .3px; margin-bottom: 12px;
}
.plan-capa-editar {
  display: flex; align-items: center; gap: 5px; border: 0; cursor: pointer;
  background: var(--roxo-suave); color: var(--roxo); border-radius: 999px;
  padding: 6px 12px; font-size: 12px; font-weight: 600;
}
.plan-capa-editar:active { background: #e6dbff; }
.plan-capa-valor {
  display: block; font-size: 28px; font-weight: 700; letter-spacing: -.7px;
  line-height: 1.05; color: #0f9d6a;
}
.plan-capa-valor.negativo { color: var(--vermelho); }
.plan-capa-valor.neutro   { color: var(--txt); }
.plan-capa-rotulo {
  display: block; margin-top: 5px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--txt2);
}
.plan-capa-barra {
  height: 8px; border-radius: 999px; background: #e9edf5;
  overflow: hidden; margin: 14px 0 13px;
}
.plan-capa-barra span { display: block; height: 100%; border-radius: 999px; background: var(--roxo); }
.plan-capa-barra span.atencao  { background: #e3a008; }
.plan-capa-barra span.estourou { background: var(--vermelho); }
.plan-capa-pes { display: flex; gap: 22px; font-size: 14.5px; font-weight: 700; }
.plan-capa-pes span { display: flex; flex-direction: column; gap: 2px; }
.plan-capa-pes small {
  font-size: 10px; font-weight: 500; color: var(--txt2);
  text-transform: uppercase; letter-spacing: .5px;
}
.plan-capa-nota { margin: 13px 0 0; font-size: 12px; color: var(--txt2); line-height: 1.45; }
.plan-capa-nota b { color: var(--txt); font-weight: 700; }
.plan-capa-botao {
  width: 100%; margin-top: 15px; border: 0; cursor: pointer; background: var(--roxo);
  color: #fff; border-radius: 13px; padding: 13px; font-size: 14.5px; font-weight: 700;
}
.plan-capa-botao:active { background: var(--roxo-2); }

/* A lista dos grupos: um cartão só, uma linha por grupo. */
.plan-lista { padding: 2px 16px; margin-bottom: 12px; }
/* O cabeçalho do card sangra até as bordas, como o dos painéis: o .plan-lista
   tem recuo próprio, então ele precisa desfazê-lo. */
.plan-lista-cabeca { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
/* Separador dentro do detalhe: "contas não orçadas" vem depois das que têm
   teto, com o nome do bloco em cima. */
/* Editar o teto de cada categoria dentro do grupo, valendo só para o mês. */
.plan-cat-form-mes { margin: 2px 0 0; }
.plan-cat-edit {
  display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; margin: 0;
}
.plan-cat-edit + .plan-cat-edit { border-top: 1px solid var(--linha); }
.plan-cat-edit .plan-cat-nome { flex: 1; min-width: 0; }
.plan-cat-edit input {
  width: 104px; flex: 0 0 104px; text-align: right; padding: 7px 10px;
  font-size: 13px; border-radius: 10px;
}
.plan-cat-salvar {
  width: 100%; margin-top: 10px; border: 0; cursor: pointer; border-radius: 11px;
  background: var(--roxo-suave); color: var(--roxo); padding: 10px;
  font-size: 13px; font-weight: 700; font-family: inherit;
}
.plan-cat-salvar:active { background: #e6dbff; }

/* Linha do detalhe com ação: o ícone abre na frente do nome, tudo numa linha. */
.plan-cat-acao { display: flex; align-items: center; gap: 10px; }
.plan-cat-acao .plan-cat-nome { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.plan-cat-acao .plan-cat-valor { flex: 0 0 auto; }
.plan-cat-form { flex: 0 0 auto; margin: 0; display: flex; }
.plan-cat-icone {
  width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
  border: 1px dashed #cfd7ea; border-radius: 10px; background: #fafbff;
  color: var(--txt2); cursor: pointer; padding: 0;
}
.plan-cat-icone:active { background: var(--roxo-suave); }
.plan-cat-icone.ativo {
  border-style: solid; border-color: transparent;
  background: var(--roxo-suave); color: var(--roxo);
}
.plan-cats-sub {
  margin: 12px 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--txt2);
}
.plan-item + .plan-item, .plan-item.plan-oculto:not([hidden]) { border-top: 1px solid var(--linha); }
.plan-topo {
  display: flex; align-items: center; gap: 11px; width: 100%; color: inherit;
  background: none; border: 0; padding: 13px 0; text-align: left; cursor: pointer;
}
/* Anel de progresso em volta do ícone: conta o quanto do teto já foi sem
   precisar de uma barra por linha. */
.plan-anel { position: relative; width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; }
.plan-anel > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.plan-anel-trilho { fill: none; stroke: #eceff6; stroke-width: 3.4; }
.plan-anel-arco { fill: none; stroke: var(--roxo); stroke-width: 3.4; stroke-linecap: round; }
.plan-anel.atencao  .plan-anel-arco { stroke: #f0a132; }
.plan-anel.estourou .plan-anel-arco { stroke: var(--vermelho); }
.plan-anel-icone { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  flex: 0 0 30px; }
/* Linha de cartão/recorrente dentro do painel: .painel-linha só dá recuo dos
   lados, então a altura vinha do texto e as linhas ficavam grudadas. */
.plan-linha { gap: 11px; padding-top: 12px; padding-bottom: 12px; }
.plan-linha + .plan-linha::before { left: 55px; }
.plan-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-nome strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-nome small { font-size: 11.5px; color: var(--txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-nome small b { font-weight: 700; }
.plan-nome .positivo { color: var(--verde); }
.plan-nome .negativo { color: var(--vermelho); }
.plan-valor { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.plan-valor b { font-size: 14.5px; font-weight: 700; }
.plan-valor b.negativo { color: var(--vermelho); }
.plan-valor small { font-size: 11px; color: var(--txt2); white-space: nowrap; }
.plan-seta { color: #c3c9d8; display: flex; transition: transform .18s; }
.plan-item.aberto .plan-seta { transform: rotate(180deg); }

.plan-cats { padding: 2px 0 12px; }
.plan-cats-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #f7f8fc; border-radius: 12px; padding: 9px 12px; margin-bottom: 4px;
  font-size: 12px; color: var(--txt2);
}
.plan-cats-topo b { color: var(--txt); font-weight: 700; }
.plan-editar {
  display: flex; align-items: center; gap: 5px; border: 0; cursor: pointer;
  background: var(--roxo-suave); color: var(--roxo); border-radius: 999px;
  padding: 6px 12px; font-size: 12px; font-weight: 700; flex: 0 0 auto;
}
.plan-cat {
  display: flex; align-items: center; gap: 10px; padding: 9px 2px;
  text-decoration: none; color: inherit;
}
.plan-cat + .plan-cat { border-top: 1px solid var(--linha); }
.plan-cat-nome { flex: 1; min-width: 0; font-size: 13px; display: flex; flex-direction: column; gap: 1px; }
.plan-cat-nome small { font-size: 10.5px; color: var(--txt2); }
.plan-cat-barra { width: 58px; flex: 0 0 58px; height: 5px; border-radius: 999px; background: #eef1f8; overflow: hidden; }
.plan-cat-barra span { display: block; height: 100%; border-radius: 999px; }
.plan-cat-valor { text-align: right; font-size: 13px; font-weight: 600; display: flex; flex-direction: column; gap: 1px; }
.plan-cat-valor small { font-size: 10.5px; color: var(--txt2); font-weight: 500; }
.plan-cat-vazio { margin: 6px 2px; font-size: 12.5px; color: var(--txt2); }

/* A folha inteira dentro do modal: um campo por grupo. */
.plan-folha { display: flex; flex-direction: column; gap: 2px; margin: 16px 0 4px; }
/* Cada faixa preta ganha um respiro do que veio antes — o mesmo 16px que separa
   as faixas na folha resumida. Sem isto a primeira colava nas entradas. */
.plan-folha .plan-folha-grupo:not(:first-child) { margin-top: 14px; }
.plan-folha-item {
  display: flex; align-items: center; gap: 11px; margin: 0; padding: 8px 0; cursor: pointer;
}
.plan-folha-item + .plan-folha-item { border-top: 1px solid var(--linha); }
.plan-folha-nome {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  font-size: 14px; color: var(--txt); font-weight: 600;
}
.plan-folha-nome small { font-size: 11px; color: var(--txt2); font-weight: 500; }
.plan-folha-item input {
  width: 118px; flex: 0 0 118px; padding: 9px 11px; font-size: 14px;
  text-align: right; border-radius: 11px;
}
/* "Valer só para este mês" dentro dos modais de orçamento. */
.plan-so-mes {
  display: flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 500;
  padding: 11px 14px; border-radius: 12px; background: #f3f5fa;
  font-size: 13.5px; color: var(--txt); margin: 14px 0 16px;
}

/* Botão de copiar o mês: discreto, embaixo da capa. */
.plan-copiar { margin: 10px 0 0; }
.plan-copiar .botao { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
/* Cabeçalho de grupo dentro da folha do orçamento: faixa escura, para não se
   confundir com as linhas de categoria que vêm embaixo dela. */
.plan-folha-grupo {
  display: flex; align-items: center; gap: 9px;
  margin: 16px -6px 0; padding: 9px 12px; border-radius: 12px;
  background: #1e2432; color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.plan-folha-grupo:first-child { margin-top: 2px; }
/* A faixa das entradas é verde: é o único bloco do plano que fala do que entra. */
.plan-folha-grupo.verde { background: #12805a; }
/* O ano inteiro, entre o plano de sempre e o mês. Um número grande — como o
   ano termina — e os dois apoios embaixo. Três colunas apertadas quebravam o
   texto e ninguém lia. */
.plan-ano {
  padding: 16px; margin-bottom: 14px;
  background: linear-gradient(150deg, #f7f4ff 0%, #eef4ff 55%, #fff 100%);
  border: 1px solid #e2e0f5;
}
.plan-ano-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-ano-titulo {
  font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--roxo);
}
.plan-ano-passo { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--txt2); }
.plan-ano-passo > i {
  display: block; width: 54px; height: 5px; border-radius: 999px; background: #ddd8f5;
  overflow: hidden; font-style: normal;
}
.plan-ano-passo > i > i { display: block; height: 100%; border-radius: 999px; background: var(--roxo); }

.plan-ano-heroi { display: flex; flex-direction: column; gap: 1px; margin-top: 12px; }
.plan-ano-heroi small { font-size: 11.5px; color: var(--txt2); }
.plan-ano-heroi b { font-size: 29px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.plan-ano-heroi i { font-style: normal; font-size: 11.5px; color: var(--txt2); line-height: 1.4; }
.plan-ano-heroi b.bom  { color: #0f9d6a; }
.plan-ano-heroi b.ruim { color: var(--vermelho); }

.plan-ano-pes {
  display: flex; gap: 12px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(30, 30, 70, .08);
}
.plan-ano-pes > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.plan-ano-pes small {
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--txt2);
}
.plan-ano-pes b { font-size: 15px; font-weight: 800; letter-spacing: -.3px; color: var(--txt); }
.plan-ano-pes b.bom  { color: #0f9d6a; }
.plan-ano-pes b.ruim { color: var(--vermelho); }
.plan-ano-pes i { font-style: normal; font-size: 10.5px; color: var(--txt2); }
.plan-ano-pes i.bom  { color: #0f9d6a; font-weight: 600; }
.plan-ano-pes i.ruim { color: var(--vermelho); font-weight: 600; }

/* Card dos cartões: o cabeçalho já diz se o mês estourou o teto ou não. */
.plan-cartoes-cabeca { align-items: flex-start; }
.plan-cartoes-titulo { display: flex; flex-direction: column; gap: 1px; }
.plan-cartoes-titulo small { font-size: 11px; font-weight: 500; color: var(--txt2); }
.plan-cartoes-total {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: var(--txt);
}
.plan-cartoes-total small { font-size: 11px; font-weight: 500; color: var(--txt2); text-align: right; }
.plan-cartoes-total.bom  { color: var(--verde); }
.plan-cartoes-total.ruim { color: var(--vermelho); }
.plan-cartoes-barra {
  height: 6px; margin: 0 14px 4px; border-radius: 999px; background: #e9edf5; overflow: hidden;
}
.plan-cartoes-barra > span { display: block; height: 100%; border-radius: 999px; }
.plan-cartoes-barra > span.bom  { background: var(--verde); }
.plan-cartoes-barra > span.ruim { background: var(--vermelho); }

/* Acompanhamento do mês resumido: três trilhas (entradas, cartões, recorrentes)
   e o final. Cada trilha é planejado x realizado, com a barra do progresso. */
.plan-trilha {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 10px;
  margin-top: 14px;
}
.plan-trilha-nome {
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--txt2); align-self: end;
}
.plan-trilha-nums { font-size: 12px; color: var(--txt2); text-align: right; }
.plan-trilha-nums b { font-size: 15px; font-weight: 700; color: var(--txt); margin-right: 3px; }
.plan-trilha-nums b.estourou { color: var(--vermelho); }
.plan-trilha-barra {
  grid-column: 1 / -1; height: 6px; border-radius: 999px;
  background: #e9edf5; overflow: hidden;
}
.plan-trilha-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--roxo); }
.plan-trilha-barra > span.verde    { background: var(--verde); }
.plan-trilha-barra > span.atencao  { background: #e3a008; }
.plan-trilha-barra > span.estourou { background: var(--vermelho); }
.plan-final {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha);
}
.plan-final-rotulo { display: flex; flex-direction: column; gap: 2px;
  font-size: 13px; font-weight: 700; color: var(--txt); }
.plan-final-rotulo small { font-size: 11px; font-weight: 500; color: var(--txt2); }
.plan-final-valor { display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.plan-final-valor small { font-size: 11px; font-weight: 500; color: var(--txt2); }
.plan-final-valor.bom  { color: #0f9d6a; }
.plan-final-valor.ruim { color: var(--vermelho); }

/* Sobra e falta no pé do card preto: o número diz sozinho como o mês fecha. */
.plan-capa-pes .bom  { color: #0f9d6a; }
.plan-capa-pes .ruim { color: var(--vermelho); }
.plan-capa-pes .bom small, .plan-capa-pes .ruim small { color: inherit; opacity: .75; }
.plan-folha-grupo .plan-anel-icone {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 8px;
  background: rgba(255, 255, 255, .16) !important; color: #fff !important;
}
.plan-folha-grupo-nome { flex: 1; min-width: 0; text-transform: uppercase; }
.plan-folha-grupo-total {
  font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap;
  background: rgba(255, 255, 255, .14); border-radius: 999px; padding: 2px 9px;
}
.plan-folha-grupo-total:empty { display: none; }
/* Escolha do modelo, dentro do orçamento global. */
.plan-modelo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.plan-modelo-op {
  border: 1.5px solid #e2e7f2; border-radius: 12px; padding: 10px 12px; cursor: pointer;
  background: #fff; font-family: inherit; text-align: left;
  /* Altura fixa: a descrição de um é maior que a do outro, e sem isto os dois
     botões mudavam de tamanho a cada troca de modelo. */
  min-height: 74px;
}
/* Campo de acrescentar conta recorrente: a categoria ocupa a linha e o valor
   fica do lado, como nas outras folhas do orçamento. */
/* A folha do orçamento global não encolhe ao trocar o modelo: fica sempre na
   altura do detalhado (a maior das duas) e o conteúdo rola por dentro. Sem
   isto ela pulava de tamanho a cada toque em Detalhado/Resumido. */
#modalGlobal .modal { height: 100vh; height: 100dvh; border-radius: 0; }
@media (min-width: 700px) { #modalGlobal .modal { height: 92dvh; border-radius: 20px; } }
/* Cabeçalho das folhas de orçamento: fica preso no alto, com fundo branco de
   borda a borda, para o conteúdo passar por baixo sem encostar no título. */
.modal-cabeca {
  position: sticky; top: -22px; z-index: 3; background: #fff;
  margin: -22px -20px 12px; padding: 22px 20px 12px;
  border-bottom: 1px solid var(--linha);
}
.modal-cabeca h2 { margin: 0 0 4px; }
/* O Salvar não foge para o fim da rolagem: fica preso no rodapé da folha, com
   um fundo branco por baixo para o conteúdo não passar por trás dele. */
.plan-salvar {
  position: sticky; bottom: -26px; z-index: 2;
  /* Margem negativa para o branco alcançar as duas bordas da folha: preso só
     na largura do conteúdo, o que rolava por baixo aparecia nas frestas dos
     lados. O padding devolve o respiro que a margem tirou. */
  margin: 18px -20px -26px; padding: 12px 20px 26px; background: #fff;
}
.plan-salvar .botao { margin: 0; }
/* A partir de quando o plano de sempre vale: fica colado no Salvar porque é
   uma decisão do momento de salvar, não um campo do meio da folha. */
.plan-vigencia {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px; padding: 8px 12px; border-radius: 12px; background: #f3f5fa;
}
.plan-vigencia > span { font-size: 12.5px; color: var(--txt2); white-space: nowrap; }
.plan-vigencia .select { flex: 1; min-width: 0; max-width: 200px; margin: 0; }
.plan-vigencia .select-botao { background: #fff; padding: 8px 10px; min-height: 0; }
.plan-global-desde { font-size: 12px; font-weight: 600; color: var(--txt2); }
/* O Salvar cai sempre no rodapé da folha, mesmo quando o modelo escolhido é
   curto: o formulário estica até o fim e o margin-top:auto empurra a barra
   para baixo. Com conteúdo longo, o sticky lá em cima segura ela na tela. */
#modalGlobal [data-folha-modelo] { min-height: 100%; display: flex; flex-direction: column; }
#modalGlobal [data-folha-modelo] > form,
#modalOrcamentos .modal > form { flex: 1; display: flex; flex-direction: column; min-height: 100%; }
#modalGlobal [data-folha-modelo] > form { min-height: 0; }
.plan-salvar { margin-top: auto; }
/* Lixeira da conta recorrente: discreta, e só fica vermelha quando tocada. */
.plan-fixa-lixo {
  flex: 0 0 34px; width: 34px; height: 34px; border: 0; border-radius: 10px;
  background: none; color: var(--txt2); cursor: pointer; display: grid; place-items: center;
}
.plan-fixa-lixo:hover, .plan-fixa-lixo:active { background: #fdecea; color: var(--vermelho); }
.plan-nova-fixa { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.plan-nova-fixa .select { flex: 1; min-width: 0; margin: 0; }
.plan-nova-fixa input { width: 110px; flex: 0 0 110px; text-align: right; }
.plan-modelo-op b { display: block; font-size: 13.5px; font-weight: 600; color: var(--txt); }
.plan-modelo-op small { display: block; font-size: 11px; color: var(--txt2); line-height: 1.35; margin-top: 2px; }
.plan-modelo-op.ativo { border-color: var(--roxo); background: #faf7ff; }
.plan-modelo-op.ativo b { color: var(--roxo); }

/* Conta fixa listada dentro da folha resumida: clicável, leva ao lançamento. */
.plan-folha-fixa {
  display: flex; align-items: center; gap: 10px; padding: 10px 2px;
  border-bottom: 1px solid rgba(0, 0, 0, .05); color: inherit; text-decoration: none;
}
.plan-folha-fixa-valor { font-size: 13.5px; font-weight: 600; white-space: nowrap; }

/* Botão do orçamento global, acima da capa. */
.plan-global {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 10px;
  padding: 12px 14px; cursor: pointer; text-align: left; font-family: inherit;
  border: 1px solid #dbe1ee; border-radius: 16px; background: var(--card);
  box-shadow: 0 4px 14px rgba(30, 30, 70, .05);
}
.plan-global-corpo { flex: 1; min-width: 0; }
.plan-global-corpo b { display: block; font-size: 14px; font-weight: 600; color: var(--txt); }
.plan-global-corpo small { display: block; font-size: 11.5px; color: var(--txt2); margin-top: 1px; }
.plan-global-valor { font-size: 14px; font-weight: 700; color: var(--txt); white-space: nowrap; }
.plan-global > svg:first-child { color: var(--roxo); flex: none; }
/* Primeiro card da tela: o cabeçalho azul é grudado (margin-bottom: 0, porque
   ele fica fixo no topo ao rolar), então o respiro sai daqui. Precisa vir
   DEPOIS de .plan-global — o atalho `margin` lá em cima zera o topo. */
/* Faixa branca do planejamento: emenda no azul e fica parada no alto, igual à
   de Transações. O card do plano vira conteúdo dela — sem borda, sem sombra e
   sem cantos, senão pareceriam duas peças empilhadas em vez de uma só. */
.plan-cabecalho {
  /* Sobe 28px para passar POR BAIXO do canto arredondado do azul: é esse
     branco que preenche as quinas. O cabeçalho tem z-index maior, então tapa a
     parte que subiu, e o padding devolve o respiro por dentro. */
  position: sticky; top: calc(var(--topo-altura, 0px) - 28px); z-index: 18; background: #fff;
  margin: -28px -12px 14px; padding: 42px 12px 16px;
  box-shadow: 0 6px 12px -8px rgba(20, 24, 40, .18);
}
.plan-cabecalho .plan-global {
  margin: 0; border: 0; box-shadow: none; background: none; padding: 2px 6px;
}
@media (min-width: 900px) {
  /* No desktop o card do topo tem cantos de 22px e margem lateral própria. */
  .plan-cabecalho {
    top: calc(var(--topo-altura, 0px) - 22px);
    margin: -22px -20px 14px; padding: 38px 20px 18px;
  }
}

/* Botão que joga a média nos campos, no alto da folha. */
.plan-media-botao {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin: 0 0 4px; padding: 10px; cursor: pointer;
  border: 1px dashed #cfd7ea; border-radius: 12px; background: #fafbff;
  color: var(--roxo); font-size: 12.5px; font-weight: 600; font-family: inherit;
}
.plan-media-botao:hover { background: var(--roxo-suave); border-color: var(--roxo); }

.plan-pizza { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Dentro de um .painel (tela inicial e planejamento) a rosca precisa do recuo
   que o card dava: o painel em si não tem padding, quem tem são as linhas. */
.painel > .plan-pizza { padding: 12px 16px 16px; }
.plan-donut { width: 210px; height: 210px; flex: 0 0 auto; }
.plan-donut-pct { font-size: 8px; font-weight: 700; fill: #fff; text-anchor: middle; dominant-baseline: middle; }
.plan-donut-titulo { font-size: 7.5px; fill: #8a92a6; text-anchor: middle; }
.plan-donut-total { font-size: 13px; font-weight: 700; fill: #1e2432; text-anchor: middle; }
.plan-legenda { width: 100%; }
.plan-legenda-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 0;
  text-decoration: none; color: inherit;
}
.plan-legenda-item + .plan-legenda-item { border-top: 1px solid var(--linha); }
.plan-bolinha { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 3px; }
.plan-legenda-nome { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-legenda-pct { font-size: 12px; color: var(--txt2); font-weight: 600; min-width: 38px; text-align: right; }
.plan-legenda-valor { font-size: 13px; font-weight: 700; }

/* Computador: a pizza fica ao lado da legenda, que sobra espaço de resto. */
@media (min-width: 720px) {
  .plan-pizza { flex-direction: row; align-items: center; gap: 24px; }
  .plan-donut { width: 220px; height: 220px; }
}

/* ---------- Responsáveis e centro de custo na tela inicial ---------- */
.an-linha {
  width: 100%; background: none; border: 0; cursor: pointer; color: inherit;
  text-align: left; gap: 10px; padding: 12px 14px;
}
.an-marca {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
}
/* Seta menor que a das contas: aqui o nome precisa do espaço. */
.an-linha .painel-mais { width: 20px; height: 20px; margin-left: 2px; }
/* Corpo próprio: o .painel-corpo das contas vira linha lá embaixo no arquivo,
   e aqui o nome tem que ficar em cima da linha pequena. */
.an-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.an-nome {
  font-size: 14.5px; font-weight: 600; color: var(--txt); letter-spacing: -.2px;
  line-height: 1.25;
  /* Duas linhas em vez de "FIV - Debora&...": o nome do centro é a informação. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.an-sub {
  font-size: 11px; color: var(--txt2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.an-valor { font-size: 14px; font-weight: 700; white-space: nowrap; }
.an-vazio { margin: 0; padding: 16px; font-size: 13px; color: var(--txt2); line-height: 1.45; }
/* A pizza dentro do modal: um pouco menor, para caber com a legenda. */
.an-pizza { gap: 4px; }
.an-pizza .plan-donut { width: 190px; height: 190px; }
/* Centro de custo tem duas roscas: lado a lado elas cabem numa tela só, em vez
   de empurrar os lançamentos para baixo. minmax(0,1fr) é o que impede a coluna
   de crescer com o conteúdo e jogar a segunda rosca para fora da tela. */
.an-roscas {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px; align-items: center; margin-bottom: 6px;
}
.an-roscas .plan-donut { width: 100%; max-width: 200px; height: auto; justify-self: center; }
/* As legendas embaixo, em largura cheia: é onde os nomes longos cabem. */
.an-legendas .plan-legenda + .an-legenda-titulo { margin-top: 10px; }
.an-legenda-titulo {
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--txt2); margin-bottom: 2px;
}

/* Aviso de que a fatura/folha está mostrando só o pedaço filtrado. */
.ext-recorte {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  padding: 10px 14px; border-radius: 12px; background: #f3eaff; color: #5b21b6;
  font-size: 12.5px; line-height: 1.35;
}
.ext-recorte span:nth-child(2) { flex: 1; min-width: 0; }
.ext-recorte b { font-weight: 700; }
.ext-recorte-icone { display: grid; place-items: center; flex: 0 0 auto; }
.ext-recorte a { color: var(--roxo); font-weight: 700; white-space: nowrap; }

/* Lista de lançamentos dentro do modal de responsável / centro de custo. */
.an-conta-itens {
  font-size: 11px; font-weight: 700; color: var(--txt2);
  background: #eef1f8; border-radius: 999px; padding: 2px 9px;
}
.an-lista { display: flex; flex-direction: column; margin-top: 6px; }
/* Faixa de cabeçalho de cada mês: nome, quantos e quanto somou. */
.an-mes {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 2px; padding: 8px 11px; border-radius: 10px;
  background: #f3f5fa; font-size: 12.5px; font-weight: 700;
}
.an-mes:first-child { margin-top: 4px; }
.an-mes-icone { display: grid; place-items: center; color: var(--txt2); flex: 0 0 auto; }
.an-mes-nome { flex: 1; min-width: 0; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-mes-conta {
  background: rgba(0, 0, 0, .07); color: var(--txt2); border-radius: 999px;
  padding: 1px 7px; font-size: 11px; font-weight: 700;
}
.an-mes-total { color: var(--vermelho); white-space: nowrap; }
.an-mes-total.positivo { color: var(--verde); }
/* A mesma lista dentro do card de terceiros, que tem menos respiro lateral. */
.terceiro-lista .an-mes { margin: 10px 0 2px; }
.terceiro-lista .an-item { padding: 9px 11px; }
.an-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  text-decoration: none; color: inherit;
}
.an-item + .an-item { border-top: 1px solid var(--linha); }
.an-mes + .an-item { border-top: 0; }
.an-item-dia { font-size: 11.5px; color: var(--txt2); flex: 0 0 52px; }
.an-item-texto {
  flex: 1; min-width: 0; font-size: 13.5px; display: flex; flex-direction: column; gap: 1px;
  overflow: hidden;
}
.an-item-texto small { font-size: 11px; color: var(--txt2); }
.an-item-valor { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.an-item-nota { margin: 8px 2px 0; font-size: 11.5px; color: var(--txt2); }

/* ---------- Conta de terceiros ---------- */
.ter-capa { text-align: center; }
.ter-capa-valor { display: block; font-size: 30px; letter-spacing: -1px; margin: 2px 0 2px; }
.ter-capa-valor.positivo { color: var(--verde); }
.ter-capa-valor.negativo { color: #ef4136; }
/* .cartao não tem margem própria, então um card colava no outro e a lista
   parecia um bloco só. Cada pessoa é um card separado. */
.ter-pessoa { padding: 0; overflow: hidden; margin-top: 16px; }
.ter-pessoa-topo {
  display: flex; align-items: center; gap: 11px; padding: 14px 16px;
  border-bottom: 1px solid var(--linha);
}
.ter-marca {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.ter-pessoa-nome { flex: 1; min-width: 0; }
.ter-pessoa-nome strong,
.ter-pessoa-nome span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ter-pessoa-nome strong { font-size: 15px; }
.ter-pessoa-nome span { font-size: 11.5px; color: var(--txt2); }
.ter-pessoa-saldo { text-align: right; flex-shrink: 0; }
.ter-pessoa-saldo strong { display: block; font-size: 15px; }
.ter-mes > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; cursor: pointer; list-style: none;
  border-top: 1px solid var(--linha);
}
.ter-mes > summary::-webkit-details-marker { display: none; }
.ter-mes[open] > summary { background: #f7f8fd; }
.ter-mes.acertado > summary .ter-mes-nome > span:first-child { opacity: .65; }
.ter-mes-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ter-mes-nome > span:first-child { font-size: 13.5px; font-weight: 600; }
.ter-mes-nome small,
.ter-mes-nome > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ter-mes-nome small { font-size: 11px; color: var(--txt2); }
.ter-mes-saldo {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  flex-shrink: 0; font-size: 15px; font-weight: 600; letter-spacing: -.2px;
}
.ter-mes-saldo small { font-size: 9.5px; font-weight: 500; color: var(--txt2);
  text-transform: uppercase; letter-spacing: .4px; }
.ter-selo {
  font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; padding: 2px 6px; border-radius: 999px; margin-left: 5px;
  background: #e8ecf6; color: var(--txt2); vertical-align: 1px;
}
.ter-selo.aviso { background: #fff4e0; color: #8a5b00; }
.ter-inicial {
  padding: 8px 16px 2px; font-size: 11px; color: var(--txt2); background: #f7f8fd;
}
.ter-inicial strong { color: var(--txt); }
.ter-linha {
  display: flex; align-items: center; gap: 12px; padding: 9px 16px;
  color: inherit; background: #f7f8fd;
}
.ter-linha + .ter-linha { border-top: 1px solid #eceffa; }
.ter-linha-corpo { flex: 1; min-width: 0; }
.ter-linha-nome, .ter-linha-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ter-linha-nome { font-size: 13.5px; }
.ter-linha-sub { font-size: 11px; color: var(--txt2); }
.ter-linha .valor { flex-shrink: 0; font-size: 13.5px; }
.ter-pdf {
  display: flex; align-items: center; gap: 7px; padding: 10px 16px 13px;
  font-size: 12px; color: var(--roxo); background: #f7f8fd;
}

.conta-sua-parte {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--linha);
  font-size: 12px; color: var(--txt2);
}
.conta-sua-parte strong { font-size: 15px; color: var(--txt); }
.conta-sua-parte strong.negativo { color: #ef4136; }
.conta-sua-parte em { font-style: normal; flex-basis: 100%; font-size: 11px; }

/* Total das contas: embaixo, a leitura sem o dinheiro de terceiro. */
.painel-sua-parte { border-top: 1px dashed var(--linha); align-items: flex-start; }
.painel-sua-parte > span { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.painel-sua-parte em { font-style: normal; font-size: 11px; color: var(--txt2); }
.painel-sua-parte strong { font-size: 15px; }

.ter-periodo {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 0 0 14px; font-size: 13.5px; color: var(--txt2);
}
.ter-periodo .botao-redondo { flex-shrink: 0; }
.ter-inicial {
  padding: 8px 16px; background: #f3f5fb; font-size: 11.5px; color: var(--txt2);
  border-bottom: 1px solid var(--linha);
}
.ter-inicial strong { color: var(--txt); }

/* Dentro do mês, um cabeçalho por conta/cartão — mesma ideia do PDF. */
.ter-onde {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 16px; background: #eef1f9; font-size: 12px; font-weight: 600;
  border-top: 1px solid #e2e7f4;
}
.ter-onde-nome { display: flex; align-items: center; gap: 6px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ter-onde-nome svg { flex-shrink: 0; opacity: .6; }
.ter-onde-nome em {
  font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: 999px; background: #dfe5f3; color: var(--txt2);
}
.ter-onde strong { flex-shrink: 0; font-size: 12.5px; }

/* "+ N meses anteriores": a lista mostra os seis últimos e diz o que ficou. */
.ter-antigos {
  display: block; padding: 10px 16px; text-align: center;
  font-size: 12px; color: var(--roxo); border-top: 1px solid var(--linha);
}