/* ================================================================================================================
   BI Finanças — estilo do app
   Fundo azulado claro, quadros brancos arredondados com sombra suave, ícones coloridos, seleção em azul e um
   destaque escuro com montanhas no Início (design de referência do usuário). Fonte Inter (local, OFL).
   Ordem: fontes → tokens → base → layout → componentes → telas → acabamento do design (vale sobre o resto) →
   telas abertas sem entrar, conectar banco, perfil do assessor e relatórios.
   Tema: <html data-tema="claro|escuro">.
   ================================================================================================================ */

/* ----------------------------------------------------------------------------------------------------------------
   Fontes (locais, OFL)
   ---------------------------------------------------------------------------------------------------------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fontes/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fontes/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fontes/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fontes/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("fontes/inter-800.woff2") format("woff2"); }

/* ----------------------------------------------------------------------------------------------------------------
   Tokens
   ---------------------------------------------------------------------------------------------------------------- */
:root {
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* espaço (base 4) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px;
  /* raio: cantos quase retos (pedido do usuário: "botões e quadros mais quadrados") */
  --r1: 3px; --r2: 4px; --r3: 5px; --r4: 6px; --r5: 8px; --rp: 4px;
  /* movimento */
  --t1: 140ms; --t2: 220ms; --curva: cubic-bezier(.2, .7, .2, 1);

  /* superfícies */
  --fundo: #f5f8fd;
  --superficie: #ffffff;
  --superficie-2: #f2f5fa;
  --superficie-3: #e5eaf2;
  --borda: #e8edf5;
  --borda-forte: #cdd6e4;
  --regua: #e8edf5;
  --texto: #121a33;
  --texto-2: #434d66;
  --texto-3: #7b849b;

  /* ação */
  --marca: #1554f0;
  --marca-2: #0c44cf;
  --marca-suave: #ebf1ff;
  --marca-texto: #ffffff;

  /* semântica */
  --verde: #12a26a;
  --verde-suave: #e6f7ef;
  --vermelho: #e5484d;
  --vermelho-suave: #fdecee;
  --ambar: #d97706;
  --ambar-suave: #fff3e2;
  --roxo: #7c4dff;
  --roxo-suave: #f1ecff;
  --sobre-cor: #ffffff;

  /* blocos escuros (resultado do mês, plano, fatura) */
  --bloco: #071a3b;
  --bloco-borda: transparent;
  --bloco-topo: transparent;
  --bloco-texto: #ffffff;
  --bloco-texto-2: rgba(255, 255, 255, .72);
  --bloco-regua: rgba(255, 255, 255, .14);
  --bloco-verde: #4ade80;
  --bloco-vermelho: #ff8a8f;
  --bloco-fundo: linear-gradient(120deg, #020f24 0%, #06204a 58%, #0b2d63 100%);
  --resultado-fundo: #101b2d;

  /* avisos */
  --aviso-fundo: #121a33;
  --aviso-texto: #ffffff;
  --aviso-texto-2: rgba(255, 255, 255, .62);
  --aviso-link: #9db8ff;
  --aviso-verde: #4ade80;
  --aviso-vermelho: #ff8a8f;
  --aviso-ambar: #fbbf24;
  --aviso-info: #9db8ff;

  /* sombras suaves */
  --sombra-1: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .04);
  --sombra-2: 0 8px 24px rgba(16, 24, 40, .07);
  --sombra-3: 0 16px 40px rgba(16, 24, 40, .14);
  --sombra-camada: 0 24px 60px rgba(16, 24, 40, .22);
  --sombra-marca: 0 8px 18px rgba(21, 84, 240, .28);
  --degrade: none;
  --fundo-folha: rgba(12, 18, 36, .45);

  /* cores do menu e dos ícones */
  --c-azul: #2f6bff;
  --c-verde: #12a26a;
  --c-laranja: #f59e0b;
  --c-roxo: #8b5cf6;
  --c-vermelho: #ef4444;
  --c-cinza: #64748b;

  --seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b849b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: light;
}

:root[data-tema="escuro"] {
  --fundo: #0a1020;
  --superficie: #111a2c;
  --superficie-2: #18233a;
  --superficie-3: #22304b;
  --borda: #1f2b43;
  --borda-forte: #36456a;
  --regua: #1f2b43;
  --texto: #e9eef8;
  --texto-2: #b6c0d6;
  --texto-3: #8692ac;

  --marca: #4d84ff;
  --marca-2: #6d9bff;
  --marca-suave: rgba(77, 132, 255, .16);
  --marca-texto: #ffffff;

  --verde: #34c78a;
  --verde-suave: rgba(52, 199, 138, .14);
  --vermelho: #ff6b70;
  --vermelho-suave: rgba(255, 107, 112, .14);
  --ambar: #ffab4d;
  --ambar-suave: rgba(255, 171, 77, .14);
  --roxo: #a68bff;
  --roxo-suave: rgba(166, 139, 255, .16);
  --sobre-cor: #ffffff;

  --bloco: #0b1d3d;
  --bloco-fundo: linear-gradient(120deg, #050d1f 0%, #0a1c40 58%, #0f2a5a 100%);
  --resultado-fundo: #111a2b;

  --aviso-fundo: #e9eef8;
  --aviso-texto: #121a33;
  --aviso-texto-2: #5b6580;
  --aviso-link: #1554f0;
  --aviso-verde: #12a26a;
  --aviso-vermelho: #e5484d;
  --aviso-ambar: #d97706;
  --aviso-info: #1554f0;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sombra-2: 0 8px 24px rgba(0, 0, 0, .35);
  --sombra-3: 0 16px 40px rgba(0, 0, 0, .5);
  --sombra-camada: 0 24px 60px rgba(0, 0, 0, .6);
  --sombra-marca: 0 8px 18px rgba(77, 132, 255, .3);
  --fundo-folha: rgba(0, 0, 0, .6);

  --c-azul: #6d9bff;
  --c-verde: #34c78a;
  --c-laranja: #fbbf24;
  --c-roxo: #a78bfa;
  --c-vermelho: #ff7b7f;
  --c-cinza: #94a3b8;

  --seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238692ac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ----------------------------------------------------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--fundo); color: var(--texto);
  font-variant-numeric: tabular-nums; /* números sempre tabulares */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent;
}
body.travado { overflow: hidden; padding-right: var(--barra, 0px); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: var(--marca); text-decoration: none; }
a:not([class]):hover { text-decoration: underline; text-underline-offset: 2px; }
/* link no meio do texto: sublinhado sempre (não depende só da cor) */
.artigo a, .aviso-info a, .nota-banco a, .dialogo-texto a, .entrar-rodape a { text-decoration: underline; text-underline-offset: 2px; }
img, svg { display: block; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 700; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
/* itens encostados (listas e grades com fios): foco desenhado por dentro */
.linha:focus-visible, .opcao:focus-visible, .kpi:focus-visible, .novo-item:focus-visible, .cat-item:focus-visible,
.menu-item:focus-visible, .projeto-cartao:focus-visible, .pessoa-equipe:focus-visible, .seg button:focus-visible,
.calendario-dia:focus-visible, .mes-seta:focus-visible, .mes-nome:focus-visible, .lateral-link:focus-visible, .nav-item:focus-visible { outline-offset: -2px; }
::selection { background: var(--marca); color: var(--marca-texto); }
.num { font-variant-numeric: tabular-nums; }
.pos { color: var(--verde); }
.neg { color: var(--vermelho); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { flex: none; }
.mudo { color: var(--texto-3); }
.forte { font-weight: 700; }
.texto-2 { color: var(--texto-2); }
.valor-oculto { letter-spacing: .08em; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }

@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--superficie-3); border: 2px solid var(--fundo); border-radius: var(--r2); }
  ::-webkit-scrollbar-thumb:hover { background: var(--borda-forte); }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  ::-webkit-scrollbar-corner { background: transparent; }
  /* folha: o corpo sempre reserva a faixa da barra e o rodapé acompanha, para os botões alinharem com os campos */
  .folha-corpo { scrollbar-gutter: stable; }
  .folha-rodape { padding-right: 30px; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 720px) {
  .folha-rodape { padding-right: 34px; }
}

/* Abertura (antes do JS) */
.abrindo { min-height: 100dvh; display: grid; place-items: center; }
.abrindo img { width: 48px; height: 48px; animation: pulsar 1.4s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .35; } }

/* Rótulo miúdo em caixa alta (metadados, grupos, eixos) */
.lateral-grupo, .cat-grupo, .kpi-rotulo, .destaque-rotulo, .destaque-item > span, .calendario-semana,
.tabela-analise th, .lista-dia-topo h3, .coluna small, .rotulo-mini {
  font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase;
}

/* ----------------------------------------------------------------------------------------------------------------
   Layout: barra lateral (computador), topo, conteúdo, barra inferior + botão "+" (celular)
   ---------------------------------------------------------------------------------------------------------------- */
.app { min-height: 100dvh; }
.principal { min-width: 0; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.pagina { max-width: 1160px; margin: 0 auto; padding: 16px 16px 32px; }

.topo {
  position: sticky; top: 0; z-index: 20;
  align-items: center; gap: var(--e2);
  min-height: 60px;
}
.topo-titulo h1 { line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.topo-titulo p { margin-top: 1px; }
.topo-acoes { display: flex; align-items: center; gap: 2px; }
.topo-avatar { border: 0; padding: 0; background: none; margin-left: 6px; }
.topo-avatar:hover .avatar { background: var(--texto); color: var(--fundo); }
.topo-sub { display: flex; align-items: center; gap: var(--e2); padding: 14px 16px 0; flex-wrap: wrap; }
.topo-sub + .pagina { padding-top: 14px; }

.lateral { display: none; }

.nav-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch;
  height: calc(64px + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom);
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0;
  border: 0; background: none; font-size: 11px; letter-spacing: .02em;
  text-decoration: none; position: relative;
}
.nav-item:hover { color: var(--texto); }
.nav-item span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nav-item[aria-current="page"]::before {
  content: ""; position: absolute; top: 0;
}
.nav-novo .ic {
  box-sizing: content-box; width: 22px; height: 22px;
  background: var(--marca); color: var(--marca-texto); transition: background var(--t1);
}
.nav-novo:hover .ic { background: var(--marca-2); }

@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: 272px minmax(0, 1fr); }
  .nav-inferior { display: none; }
  .principal { padding-bottom: 48px; }
  .pagina { padding: 20px 32px 48px; }
  /* topo alinhado à mesma coluna do conteúdo (máx. 1160px) */
  .topo {
    min-height: 88px; padding: 26px max(32px, calc((100% - 1160px) / 2 + 32px)) 16px;
  }
  .topo-titulo { display: flex; align-items: baseline; gap: 12px; }
  .topo-titulo h1 { font-size: 30px; letter-spacing: -.025em; }
  .topo-titulo p { font-size: 14px; margin-top: 0; white-space: nowrap; flex: none; }
  .topo .botao-icone.topo-voltar-celular { display: none; }
  .topo-avatar { display: none; }
  .topo-sub { padding: 18px max(32px, calc((100% - 1160px) / 2 + 32px)) 0; }
  .topo-sub + .pagina { padding-top: 18px; }
  .lateral {
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; overflow-y: auto; overflow-x: hidden;
    padding: 18px 14px 14px; background: var(--fundo); border-right: 1px solid var(--regua);
  }
}
.lateral-logo { display: flex; align-items: center; gap: 10px; color: var(--texto); font-weight: 700; font-size: 17px; }
.lateral-logo img { width: auto; }
.lateral > * { flex-shrink: 0; }
.lateral-link {
  display: flex; align-items: center;
  transition: background var(--t1), color var(--t1);
}
.lateral-link > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lateral-link:hover { color: var(--texto); }
.lateral-rodape { margin-top: auto; position: sticky; bottom: 0; }
@media (min-width: 1024px) { .lateral { padding-bottom: 0; scroll-padding-bottom: 90px; } .lateral-rodape { padding-bottom: 14px; } }
.lateral-usuario {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; color: var(--texto);
  transition: border-color var(--t1);
}
.lateral-usuario .meio { flex: 1; min-width: 0; }
.lateral-usuario strong { display: block; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lateral-usuario .meio > span { display: block; font-size: 12px; color: var(--texto-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ----------------------------------------------------------------------------------------------------------------
   Componentes · Botões
   ---------------------------------------------------------------------------------------------------------------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border: 1px solid transparent;
  font-size: 15px; line-height: 1; letter-spacing: .005em; white-space: nowrap; text-decoration: none;
  transition: background var(--t1), border-color var(--t1), color var(--t1), transform var(--t1);
}
.botao:active:not([disabled]) { transform: translateY(1px); }
.botao[disabled] { opacity: .45; cursor: not-allowed; }
.botao-primario { background: var(--marca); color: var(--marca-texto); border-color: var(--marca); }
.botao-primario:hover:not([disabled]) { background: var(--marca-2); border-color: var(--marca-2); }
.botao-suave { background: var(--superficie-2); color: var(--texto); border-color: var(--borda); }
.botao-suave:hover:not([disabled]) { border-color: var(--texto); }
.botao-fantasma { background: transparent; color: var(--texto-2); }
.botao-fantasma:hover:not([disabled]) { background: var(--superficie-2); color: var(--texto); }
.botao-perigo { color: var(--vermelho); }
.botao-perigo:hover:not([disabled]) { background: var(--vermelho-suave); }
.botao-perigo-cheio { background: var(--vermelho); color: var(--sobre-cor); border-color: var(--vermelho); }
.botao-perigo-cheio:hover:not([disabled]) { filter: brightness(.92); }
.botao-sucesso { background: var(--verde); color: var(--sobre-cor); border-color: var(--verde); }
.botao-sucesso:hover:not([disabled]) { filter: brightness(.94); }
.botao-sm { height: 36px; padding: 0 12px; font-size: 14px; gap: 6px; }
.botao-lg { height: 52px; padding: 0 22px; font-size: 16px; }
.botao-bloco { width: 100%; }
.botao-so-icone { padding: 0; width: 44px; }
.botao-sm.botao-so-icone { width: 36px; }

.botao-icone {
  width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center;
  border: 1px solid transparent; background: transparent; color: var(--texto-2);
  transition: background var(--t1), color var(--t1), border-color var(--t1);
}
.botao-icone:hover { background: var(--superficie-2); color: var(--texto); }
.botao-icone-marca { color: var(--marca); }

/* Carregando: anel fino (o único elemento redondo: um quadrado girando lê como losango) */
.giro {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; animation: girar .8s linear infinite;
}
.giro-marca { color: var(--marca); width: 20px; height: 20px; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------------------------------------------------------
   Componentes · Campos
   ---------------------------------------------------------------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.rotulo { font-size: 13px; font-weight: 600; color: var(--texto); }
.entrada {
  width: 100%; height: 46px; padding: 0 12px;
  border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto);
  font-size: 16px; transition: border-color var(--t1), box-shadow var(--t1);
}
.entrada::placeholder { color: var(--texto-3); opacity: 1; }
.entrada:focus { outline: none; }
.entrada[disabled], .entrada[readonly] { background: var(--superficie-2); color: var(--texto-2); }
select.entrada {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: var(--seta); background-repeat: no-repeat; background-position: right 12px center;
}
textarea.entrada { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.campo-erro .entrada { border-color: var(--vermelho); }
.campo-msg { font-size: 13px; color: var(--texto-3); }
.campo-msg-erro { color: var(--vermelho); font-weight: 600; }
.campos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.campos-2 > :only-child { grid-column: 1 / -1; }
@media (max-width: 479px) { .campos-2-largo { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* data opcional vazia: "dd/mm/aaaa" em cinza, como os outros exemplos */
.entrada[type="date"][data-vazio]:not(:focus) { color: var(--texto-3); }
.entrada-grupo { position: relative; }
.entrada-grupo .entrada { padding-right: 46px; }
.entrada-grupo .botao-icone { position: absolute; right: 3px; top: 3px; }
.entrada-busca { position: relative; }
.entrada-busca .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.entrada-busca .entrada { padding-left: 40px; }

/* Campo de valor: prefixo R$ dentro do campo, número grande alinhado à esquerda */
.entrada-moeda .prefixo {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font-size: 16px; font-weight: 600; color: var(--texto-3);
}
.entrada-grupo.entrada-moeda .entrada {
  height: 56px; padding: 0 14px 0 46px; font-size: 24px; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums;
}
[data-tipo="RECEITA"] .entrada-moeda .entrada, .entrada-moeda[data-tipo="RECEITA"] .entrada, .entrada-moeda .entrada[data-tipo="RECEITA"] { color: var(--verde); }

/* Segmentado: botões encostados, contorno preto, escolhido invertido */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
.seg button {
  padding: 0 8px; border: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 14px; min-width: 0;
  transition: background var(--t1), color var(--t1);
}
.seg button span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.seg button:hover:not([aria-pressed="true"]):not([disabled]) { background: var(--superficie-2); color: var(--texto); }
.seg { overflow: hidden; }
.seg-auto { display: inline-grid; grid-auto-columns: minmax(128px, auto); }
.seg button[disabled] { opacity: .4; cursor: not-allowed; }
.seg-grande { margin-bottom: 18px; }
.seg-grande button { font-size: 15px; }
/* abas de seção (Agenda/Tarefas/Projetos/Notas): sem caixa, escolhida sublinhada */
.seg.abas { border: 0; grid-auto-columns: auto; justify-content: start; }
.seg.abas button { padding: 0 10px; color: var(--texto-3); font-size: 15px; }
.seg.abas button + button { border-left: 0; }
.seg.abas button:hover:not([aria-pressed="true"]):not([disabled]) { background: none; color: var(--texto); }

/* Interruptor: trilho retangular, botão quadrado */
.interruptor { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; position: relative; }
.interruptor.desabilitado { opacity: .5; cursor: not-allowed; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor-texto { flex: 1; min-width: 0; }
.interruptor-rotulo { display: block; font-weight: 600; }
.interruptor-desc { display: block; font-size: 13px; color: var(--texto-3); }
.interruptor-trilho {
  width: 46px; height: 26px;
  position: relative; flex: none; transition: background var(--t2);
}
.interruptor-bola {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: #ffffff; transition: transform var(--t2) var(--curva);
}
.interruptor input:checked + .interruptor-trilho { background: var(--marca); }
.interruptor input:checked + .interruptor-trilho .interruptor-bola { transform: translateX(20px); }
.interruptor input:focus-visible + .interruptor-trilho { outline: 2px solid var(--marca); outline-offset: 2px; }

/* Chips: etiquetas retangulares com contorno; escolhida fica preta */
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 1px 0; }
@media (max-width: 1023px) {
  .pagina > .chips:not(.chips-quebra) { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .pagina > .chips:not(.chips-quebra)::after { content: ""; flex: 0 0 10px; }
}
.chips::-webkit-scrollbar { display: none; }
.chips-quebra { flex-wrap: wrap; overflow: visible; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; flex: none;
  border: 1px solid var(--borda-forte);
  font-size: 13px; white-space: nowrap;
  transition: background var(--t1), color var(--t1), border-color var(--t1);
}
.chip-removivel { padding-right: 8px; }
.chip-cor { width: 8px; height: 8px; flex: none; }

/* Selos: etiqueta retangular com fio, texto em caixa normal */
.selo {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent;
  line-height: 1; letter-spacing: 0; white-space: nowrap; flex: none;
}
.selo .ic { display: none; } /* o tom já diferencia; ícone em selo vira ruído */
 /* roxo não tem papel nesta paleta: vira neutro */

/* Barra de progresso: reta, preta por padrão */
.barra { overflow: hidden; }
.barra span { display: block; height: 100%; transition: width .5s var(--curva); }
.barra-sucesso span { background: var(--verde); }
.barra-aviso span { background: var(--ambar); }
.barra-perigo span { background: var(--vermelho); }
.barra-clara { background: rgba(255, 255, 255, .22); }
.barra-clara span { background: #ffffff; }

/* Avatar: monograma quadrado */
.avatar {
  --tam: 36px;
  display: inline-grid; place-items: center; flex: none; overflow: hidden;
  width: var(--tam); height: var(--tam); font-size: calc(var(--tam) * .38);
  letter-spacing: .02em;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------------------------------------------------------------
   Componentes · Quadros, seções, listas
   ---------------------------------------------------------------------------------------------------------------- */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r2); padding: 16px; }
.cartao > .campo:last-child, .cartao > .form-bloco:last-child { margin-bottom: 0; }
.cartao:not(.cartao-interruptores) > .interruptor:last-child { padding-bottom: 0; }

/* Seção: título forte; o quadro logo abaixo traz a própria borda (sem régua dupla) */
.secao { margin-top: 28px; }
.secao-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 10px; padding: 0;
}
.secao-topo h2 { line-height: 1.25; }
@media (min-width: 1024px) { .secao-topo h2 { font-size: 19px; } }
.secao-alerta .secao-topo h2 { color: var(--vermelho); }
.secao-link {
  position: relative; display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 2px 0;
  color: var(--marca); font-size: 14px; white-space: nowrap;
}
.secao-link:hover { text-decoration: underline; text-underline-offset: 2px; }

.lista { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r2); }
.lista-dia { margin-top: 26px; }
.lista-dia-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0;
}
.lista-dia-topo span { font-size: 13px; font-weight: 600; color: var(--texto-2); }

.linha {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 10px 12px;
  border: 0; background: none; text-align: left; color: var(--texto); position: relative;
  transition: background var(--t1);
}
button.linha:hover, a.linha:hover, .linha[role="button"]:hover { background: var(--superficie-2); }
.linha[role="button"] { cursor: pointer; }
.linha + .linha { border-top: 1px solid var(--borda); }
.linha-meio { flex: 1; min-width: 0; }
.linha-titulo { display: block; line-height: 1.35; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.linha-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; color: var(--texto-3); min-width: 0; overflow: hidden; }
.linha-sub.neg { color: var(--vermelho); font-weight: 600; }
.linha-sub > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.linha-sub > span:first-child { flex-shrink: 0; max-width: 100%; } /* prazo/categoria aparece inteiro; o resto encolhe */
.linha-fim { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.linha-valor { font-weight: 600; font-size: 15px; white-space: nowrap; }
.linha-valor.neg { color: var(--texto); } /* despesa: sinal de menos, sem vermelho (o vermelho fica para atraso) */
.linha-valor.estourado { color: var(--vermelho); }
.linha-compacta { min-height: 56px; }
.ponto { width: 3px; height: 3px; background: currentColor; flex: none; opacity: .7; }

/* Ícone da categoria: ladrilho neutro + régua de 3px na cor dela */
.icone-cat {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px;
}
.icone-cat-sm { width: 32px; height: 32px; }
.icone-cat-vazio, :root[data-tema="escuro"] .icone-cat-vazio { color: var(--texto-3); }
.menu-ic { flex: none; }
.logo-banco {
  --tam: 30px;
  width: var(--tam); height: var(--tam); flex: none; display: grid; place-items: center;
  background: var(--superficie-2); color: var(--texto-2); overflow: hidden;
}
.logo-banco img { width: 100%; height: 100%; object-fit: cover; }

/* Marcar como pago / concluir: quadrado */
.check {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center; padding: 0; position: relative;
  border: 2px solid var(--borda-forte); background: transparent; color: transparent;
  transition: border-color var(--t1), background var(--t1), color var(--t1);
}
.check::before { content: ""; position: absolute; inset: -10px; }
.check:hover { border-color: var(--verde); color: var(--verde); }
.check[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: var(--sobre-cor); }

/* Estados vazios, erro, carregando, esqueletos */
.vazio { text-align: left; padding: 24px 16px; }
.vazio-compacto { padding: 16px; }
.vazio-ic {
  width: 40px; height: 40px; margin: 0 0 12px; display: grid; place-items: center;
}
.vazio-titulo { font-weight: 600; font-size: 15px; color: var(--texto-2); }
.vazio-texto { color: var(--texto-3); margin-top: 4px; font-size: 14px; max-width: 480px; }
.vazio-acoes { margin-top: 14px; display: flex; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.erro-bloco {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-left-width: 4px; color: var(--vermelho); flex-wrap: wrap;
}
.erro-bloco > div { flex: 1; min-width: 180px; }
.erro-titulo { font-weight: 700; }
.erro-texto { font-size: 13px; color: var(--texto-2); }
.carregando { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 32px; color: var(--texto-3); font-weight: 600; }
.esqueletos { display: flex; flex-direction: column; gap: 8px; }
.esq { background: var(--superficie-2); animation: pulso 1.2s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .45; } }

/* Seletor de mês: ‹ | Outubro | › */
.mes { display: inline-flex; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--borda-forte); }
.mes-seta { width: 36px; height: 36px; border-radius: var(--r2); border: 0; background: none; display: grid; place-items: center; color: var(--texto); }
.mes-seta:hover { background: var(--superficie-2); }
.mes-nome {
  position: relative; min-width: 116px; height: 36px; padding: 0 12px; border: 0; border-radius: var(--r2);
  border-left: 1px solid var(--borda); border-right: 1px solid var(--borda);
  background: none; font-weight: 600; font-size: 14px; color: var(--texto);
}
.mes-nome:hover { background: var(--superficie-2); }
.mes-compacto .mes-nome { min-width: 92px; }
.mes-atual { border: 0; border-left: 1px solid var(--borda); background: none; padding: 0 12px; height: 36px; color: var(--marca); font-size: 14px; font-weight: 600; white-space: nowrap; }
.mes-atual:hover { text-decoration: underline; text-underline-offset: 2px; }
.calendario-topo .mes-seta { border: 1px solid var(--borda-forte); }
.calendario-topo .mes-seta:hover { border-color: var(--texto); }

/* ----------------------------------------------------------------------------------------------------------------
   Componentes · Folhas (painéis), diálogos e avisos
   ---------------------------------------------------------------------------------------------------------------- */
.folha-fundo { position: fixed; inset: 0; z-index: 50; background: var(--fundo-folha); animation: esmaecer var(--t2) ease; }
.folha {
  position: fixed; z-index: 51; left: 0; right: 0; bottom: 0; max-height: calc(100dvh - 72px - env(safe-area-inset-top));
  display: flex; flex-direction: column; background: var(--superficie); color: var(--texto);
  box-shadow: var(--sombra-camada); outline: none;
  animation: subir 240ms var(--curva);
}
.folha-cheia { top: 0; max-height: none; border-top: 0; }
.folha-alca { width: 32px; height: 4px; background: var(--borda-forte); margin: 8px auto 0; flex: none; }
.folha-cheia .folha-alca { display: none; }
.folha-topo { display: flex; align-items: center; gap: 4px; padding: 8px 8px 10px 20px; flex: none; border-bottom: 1px solid var(--borda); }
.folha-cheia .folha-topo { padding-top: calc(10px + env(safe-area-inset-top)); }
.folha-titulos { flex: 1; min-width: 0; }
.folha-topo h2 { font-size: 19px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; }
.folha-subtitulo { font-size: 13px; color: var(--texto-3); }
.folha-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 20px; }
.folha-rodape {
  flex: none; display: flex; gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borda); background: var(--superficie);
}
.folha-rodape > * { flex: 1; }
@keyframes subir { from { transform: translateY(100%); } }
@keyframes esmaecer { from { opacity: 0; } }

@media (min-width: 720px) {
  .folha, .folha-cheia {
    left: 50%; right: auto; top: 50%; bottom: auto; width: min(560px, calc(100vw - 48px)); max-height: min(88dvh, 860px);
    transform: translate(-50%, -50%); border-radius: var(--r2); border: 1px solid var(--regua); border-top-width: 2px;
    animation: surgir 180ms var(--curva);
  }
  .folha-sm { width: min(440px, calc(100vw - 48px)); }
  .folha-lg { width: min(720px, calc(100vw - 48px)); }
  .folha-alca { display: none; }
  .folha-topo, .folha-cheia .folha-topo { padding: 16px 12px 14px 24px; }
  .folha-corpo { padding: 20px 24px 24px; }
  .folha-rodape { padding: 14px 24px; }
  @keyframes surgir { from { opacity: 0; transform: translate(-50%, -48%); } }
}

.dialogo-texto { color: var(--texto-2); margin-bottom: 8px; }
.opcoes { display: flex; flex-direction: column; margin-top: 8px; }
.opcao {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px;
  border: 1px solid var(--borda); background: var(--superficie); text-align: left; color: var(--texto);
  transition: background var(--t1);
}
.opcao:hover { background: var(--superficie-2); }
.opcao-ic { width: 36px; height: 36px; display: grid; place-items: center; flex: none; }
.opcao-perigo .opcao-ic { color: var(--vermelho); }
.opcao-perigo .opcao-rotulo { color: var(--vermelho); }
.opcao-texto { flex: 1; min-width: 0; }
.opcao-rotulo { display: block; font-weight: 600; }
.opcao-desc { display: block; font-size: 13px; color: var(--texto-3); }
.opcao-seta { color: var(--texto-3); }

/* Avisos (toasts): faixa invertida com fio da cor do tom */
.avisos {
  position: fixed; z-index: 70; left: 50%; transform: translateX(-50%);
  bottom: calc(76px + env(safe-area-inset-bottom)); width: min(460px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.aviso {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 11px 6px 11px 12px;
  background: var(--aviso-fundo); color: var(--aviso-texto); box-shadow: var(--sombra-camada);
  animation: subir-pouco 220ms var(--curva); font-size: 14px; font-weight: 500;
}
.aviso-texto { flex: 1; min-width: 0; }
.aviso-sucesso { --aviso-tom: var(--aviso-verde); }
.aviso-perigo { --aviso-tom: var(--aviso-vermelho); }
.aviso-aviso { --aviso-tom: var(--aviso-ambar); }
.aviso-info, .aviso-neutro { --aviso-tom: var(--aviso-info); }
.aviso > .ic:first-child { color: var(--aviso-tom, var(--aviso-texto)); }
.aviso-acao {
  border: 0; background: none; color: var(--aviso-link); padding: 6px 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
}
.aviso-acao:hover { text-decoration: underline; text-underline-offset: 2px; }
.aviso-fechar { border: 0; background: none; color: var(--aviso-texto-2); width: 30px; height: 30px; display: grid; place-items: center; }
.aviso-fechar:hover { color: var(--aviso-texto); }
@keyframes subir-pouco { from { opacity: 0; transform: translateY(10px); } }
/* com uma folha aberta, o aviso sobe para o topo e não cobre os botões da folha */
body.travado .avisos { bottom: auto; top: calc(12px + env(safe-area-inset-top)); }
@media (min-width: 1024px) { .avisos, body.travado .avisos { top: auto; bottom: 24px; left: auto; right: 24px; transform: none; } }

/* Menu "+": grade com fios, conteúdo alinhado à esquerda */
.novo-grade {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2px;
  border-top: 1px solid var(--borda); border-left: 1px solid var(--borda);
}
.novo-item {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px;
  min-height: 96px; padding: 14px 12px 12px;
  border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto); font-weight: 600; font-size: 14px; text-align: left;
  transition: background var(--t1);
}
.novo-item:hover { background: var(--superficie-2); }
.novo-item:active { background: var(--superficie-3); }
.novo-item small { font-size: 12px; color: var(--texto-3); font-weight: 500; }
.novo-ic { display: grid; place-items: start; width: auto; height: auto; }
.novo-item .novo-ic { color: var(--texto); } /* menu de ações: ícones em preto, o rótulo diz o resto */

/* ----------------------------------------------------------------------------------------------------------------
   Telas
   ---------------------------------------------------------------------------------------------------------------- */

/* Entrar */
.entrar { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: var(--fundo); }
.entrar-caixa { width: min(400px, 100%); }
.entrar-logo { display: flex; justify-content: flex-start; margin-bottom: 24px; }
.entrar-logo img { height: 36px; width: auto; }
.entrar-cartao {
  background: var(--superficie);
  padding: 24px 22px 22px;
}
.entrar-cartao h1 { font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
.entrar-cartao h1 { margin-bottom: 20px; }
.entrar-cartao > p:not([class]), .entrar-cartao > form > p:not([class]) { color: var(--texto-3); margin: -14px 0 22px; }
.entrar-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 14px; font-weight: 500; }
.entrar-rodape { text-align: left; margin-top: 16px; font-size: 13px; color: var(--texto-3); }
.link-botao { position: relative; border: 0; background: none; padding: 0; color: var(--marca); font-weight: 600; text-align: left; }
/* links de texto: área de toque de ~44px sem mudar o desenho */
.secao-link::after, .link-botao::after { content: ""; position: absolute; inset: -10px -6px; }
.link-botao:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Destaque (saldo): bloco preto sólido, número grande, tabela de três colunas */
.destaque {
  position: relative; border-radius: var(--r2); padding: 18px 18px 16px; color: var(--bloco-texto);
  background: var(--bloco); border: 1px solid var(--bloco-borda); border-top: 3px solid var(--bloco-topo); box-shadow: none;
}
.destaque-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.destaque-rotulo { color: var(--bloco-texto-2); }
.destaque-valor { font-size: 40px; font-weight: 500; letter-spacing: -.03em; margin: 10px 0 6px; line-height: 1.05; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .destaque-valor { font-size: 48px; } }
.destaque-nota { font-size: 13px; color: var(--bloco-texto-2); }
.destaque-nota strong { color: var(--bloco-texto); font-weight: 600; }
.destaque-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 18px; border-top: 1px solid var(--bloco-regua); }
.destaque-item { background: none; border-radius: var(--r2); padding: 10px 8px 0 0; min-width: 0; }
.destaque-item + .destaque-item { border-left: 1px solid var(--bloco-regua); padding-left: 10px; }
.destaque-item > span { display: flex; align-items: center; gap: 4px; color: var(--bloco-texto-2); }
.destaque-item strong { display: block; font-size: 14px; font-weight: 600; margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* celular: a grade de três colunas do início vira um extrato (rótulo à esquerda, valor à direita) */
.destaque-grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 479px) {
  .destaque-grade:not(.destaque-grade-2) { grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
  .destaque-grade:not(.destaque-grade-2) .destaque-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0 0; }
  .destaque-grade:not(.destaque-grade-2) .destaque-item + .destaque-item { border-left: 0; border-top: 1px solid var(--bloco-regua); padding-left: 0; margin-top: 8px; }
  .destaque-grade:not(.destaque-grade-2) .destaque-item strong { margin-top: 0; font-size: 15px; }
}
.destaque .pos, .destaque .neg { color: inherit; }
.destaque a { color: var(--bloco-texto); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.destaque-sufixo { font-size: .45em; font-weight: 500; letter-spacing: 0; color: var(--bloco-texto-2); }

/* Indicadores: tabela com fios, sem caixas soltas */
.kpis {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--borda); border-left: 1px solid var(--borda);
}
@media (min-width: 720px) { .kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi {
  display: block; width: 100%; text-align: left; color: var(--texto); min-width: 0;
  border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  padding: 12px 14px 13px;
  transition: background var(--t1);
}
button.kpi:hover { background: var(--superficie-2); }
.kpi-rotulo { display: flex; align-items: center; gap: 6px; color: var(--texto-2); }
.kpi-valor { display: block; font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; margin-top: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kpi-nota { display: block; font-size: 12px; font-weight: 500; margin-top: 2px; }

/* Grade do início (computador) */
@media (min-width: 1024px) {
  .grade-inicio { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
  .grade-inicio > div > :first-child { margin-top: 0; }
}

/* Gráficos */
.colunas { display: flex; align-items: flex-end; gap: 0; height: 150px; padding-top: 8px; }
.coluna { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.coluna-barras { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 1px solid var(--regua); }
.coluna-barras span { width: min(12px, 30%); border-radius: var(--r2); min-height: 2px; transition: height .5s var(--curva); }
.coluna-barras .e { background: var(--verde); }
.coluna-barras .s { background: var(--vermelho); }
.coluna small { display: block; max-width: 100%; height: 1.3em; color: var(--texto-3); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.coluna[aria-current="true"] small { color: var(--texto); font-weight: 700; }
.grafico-legenda { display: flex; gap: 16px; font-size: 12px; color: var(--texto-2); font-weight: 500; margin-top: 12px; flex-wrap: wrap; }
.grafico-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafico-legenda i { width: 10px; height: 10px; border-radius: var(--r2); display: inline-block; }

/* Orçamentos */
.orcamento-topo .quanto { font-weight: 500; }

/* Lançamentos */
.filtros-ativos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.busca-topo { flex: 1; min-width: 0; }
.busca-topo .entrada { height: 38px; }
.detalhe-topo { text-align: left; padding: 0 0 16px; }
.detalhe-desc { font-size: 15px; font-weight: 600; color: var(--texto-2); }
.detalhe-valor { font-size: 32px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; margin-top: 2px; }
.detalhe-desc + .detalhe-valor, .detalhe-valor + .detalhe-desc { margin-top: 4px; }
.detalhe-valor .neg { color: var(--texto); }
.detalhe-hora { font-size: 26px; }
.detalhe-selos { display: flex; justify-content: flex-start; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.detalhe-topo-linha { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--borda); }
.detalhe-topo-texto { flex: 1; min-width: 0; }
.detalhe-topo-linha { flex-wrap: wrap; row-gap: 10px; }
.detalhe-topo-linha > .detalhe-valor { flex: 1 0 100%; margin-top: 0; }
.detalhe-topo-texto .detalhe-desc { color: var(--texto); font-size: 17px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.detalhe-topo-texto .detalhe-selos { margin-top: 6px; }
.detalhe-lista + .campo, .detalhe-lista + form, .detalhe-lista + .form-bloco { margin-top: 18px; }
.detalhe-lista { border: 1px solid var(--borda); border-top: 2px solid var(--regua); border-radius: var(--r2); }
.detalhe-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; font-size: 14px; }
.detalhe-item + .detalhe-item { border-top: 1px solid var(--borda); }
.detalhe-item > span { color: var(--texto-3); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.detalhe-item strong { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.detalhe-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.detalhe-acoes .largo { grid-column: 1 / -1; }
.nota-banco {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: var(--r2);
  background: var(--superficie-2); border-left: 3px solid var(--marca); color: var(--texto-2); font-size: 13px;
}
.nota-banco .ic { color: var(--marca); margin-top: 1px; }

/* Fatura do cartão */
.trilho-faturas { padding-bottom: 2px; }
.chip-fatura { position: relative; gap: 5px; text-transform: capitalize; }
.chip-fatura .ic { color: var(--verde); }
.chip-fatura[aria-pressed="true"] .ic { color: inherit; }
.fatura-resumo {
  position: relative; margin-top: 14px; border-radius: var(--r2); padding: 18px 18px 16px; color: var(--bloco-texto);
  background: var(--bloco); border: 1px solid var(--bloco-borda); border-top: 3px solid var(--bloco-topo); box-shadow: none;
}
.fatura-resumo .selo { background: transparent; color: var(--bloco-texto); border-color: var(--bloco-texto-2); }
.fatura-resumo .selo-perigo { color: var(--bloco-vermelho); border-color: var(--bloco-vermelho); }
.fatura-pagar { margin-top: 16px; background: var(--bloco-texto); color: var(--bloco); border-color: var(--bloco-texto); }
.fatura-pagar:hover:not([disabled]) { background: transparent; color: var(--bloco-texto); border-color: var(--bloco-texto); }

/* Paleta de cores (categorias, projetos, notas) */
.paleta { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
@media (max-width: 374px) { .paleta { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.paleta-cor { aspect-ratio: 1; border: 0; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.paleta-cor[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--texto), inset 0 0 0 4px var(--superficie); }
.paleta-nota { color: #0a0a0a; box-shadow: inset 0 0 0 1px var(--borda-forte); }

/* Formulário de lançamento */
.form-bloco { margin-bottom: 18px; }
.form-bloco > .rotulo { display: block; margin-bottom: 8px; }
.escolha {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 12px 7px 7px;
  border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); text-align: left;
  transition: border-color var(--t1);
}
.escolha:hover { border-color: var(--texto); }
.escolha .meio { flex: 1; min-width: 0; }
.escolha .meio strong { display: block; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.escolha .meio span { display: block; font-size: 13px; color: var(--texto-3); }
.escolha-vazia .meio strong { color: var(--texto-3); font-weight: 500; }
.campo-erro .escolha { border-color: var(--vermelho); }
.mais-detalhes { border: 0; background: none; color: var(--marca); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; }
.cat-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  border-top: 1px solid var(--borda); border-left: 1px solid var(--borda);
}
.cat-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; min-height: 92px;
  border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  background: var(--superficie); color: var(--texto); font-size: 13px; font-weight: 500; text-align: left;
  transition: background var(--t1);
}
.cat-item span:last-child { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.cat-item:hover { background: var(--superficie-2); }
.cat-item[aria-pressed="true"] { font-weight: 600; }
.cat-grupo { color: var(--texto-3); margin: 18px 0 8px; }
.resumo-parcelas {
  font-size: 13px; color: var(--texto-2); background: var(--superficie-2); border-radius: var(--r2); border-left: 3px solid var(--texto);
  padding: 10px 12px; margin-top: -4px; margin-bottom: 16px;
}

/* Agenda: calendário do mês, linhas horizontais como uma folha de agenda */
.calendario { padding: 12px 12px 4px; }
.calendario-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.calendario-topo strong { font-size: 16px; font-weight: 700; letter-spacing: -.01em; text-transform: capitalize; }
.calendario-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
.calendario-semana { text-align: center; color: var(--texto-3); padding: 6px 0; }
.calendario-dia {
  position: relative; aspect-ratio: 1 / .9; border: 0; background: none; color: var(--texto);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-weight: 500; font-size: 14px; padding: 0;
}
.calendario-dia:hover { background: var(--superficie-2); }
.calendario-dia[data-fora] { color: var(--texto-3); font-weight: 400; }
.calendario-dia[data-hoje] span { color: var(--marca); font-weight: 700; }
.calendario-grade > .calendario-dia:nth-last-child(-n+7) { border-bottom: 0; }
.calendario-dia[aria-pressed="true"] span { color: inherit; }
.calendario-ponto { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 4px; height: 4px; }
.calendario-ponto[data-varios] { box-shadow: 6px 0 0 var(--texto), -6px 0 0 var(--texto); }
.calendario-dia[aria-pressed="true"] .calendario-ponto[data-varios] { box-shadow: 6px 0 0 currentColor, -6px 0 0 currentColor; }
@media (min-width: 1024px) { .calendario-dia { aspect-ratio: auto; height: 48px; } }

.hora-bloco {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 58px; flex: none;
  padding: 2px 10px 2px 0; border-right: 1px solid var(--borda); border-radius: var(--r2); background: none; color: var(--texto);
}
.hora-bloco strong { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hora-bloco small { font-size: 12px; font-weight: 500; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.linha-compromisso.passou .hora-bloco, .linha-compromisso.passou .hora-bloco small { color: var(--texto-3); }
.linha-compromisso.passou .linha-titulo { color: var(--texto-2); }

/* Tarefas */
.tarefa-rapida {
  display: flex; align-items: center; gap: 8px; padding: 0 4px 0 12px;
  background: var(--superficie); border: 1px solid var(--borda-forte); transition: border-color var(--t1), box-shadow var(--t1);
}
.tarefa-rapida:focus-within { border-color: var(--marca); }
.tarefa-rapida .ic { color: var(--texto); }
.tarefa-rapida .entrada, .tarefa-rapida .entrada:focus, .tarefa-rapida .entrada:hover { border: 0; box-shadow: none; padding: 0 4px; height: 44px; background: transparent; }
.tarefa-rapida .ic.mudo { color: var(--texto-3); }
.linha .check { margin-right: 2px; }
.check-vazio { width: 26px; height: 26px; flex: none; visibility: hidden; margin-right: 2px; }
.linha-tarefa.feita .linha-titulo { text-decoration: line-through; color: var(--texto-3); }
.linha-tarefa.atrasada { box-shadow: inset 3px 0 0 var(--vermelho); }
.tarefa-projeto { display: inline-flex; align-items: center; gap: 5px; }
.tarefa-projeto i { width: 8px; height: 8px; border-radius: var(--r2); display: inline-block; flex: none; }
.chips-divisor { width: 1px; background: var(--borda-forte); flex: none; margin: 4px 4px; }

/* Projetos: grade com fios; cor do projeto numa régua no topo */
.projetos-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 14px;
  border-top: 1px solid var(--borda); border-left: 1px solid var(--borda);
}
.projeto-cartao {
  display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 16px; text-align: left; color: var(--texto);
  border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  background: var(--superficie); position: relative;
  transition: background var(--t1);
}
.projeto-cartao:hover { background: var(--superficie-2); }
.projeto-topo { display: flex; align-items: center; gap: 8px; }
.projeto-topo strong { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.projeto-cor { width: 10px; height: 10px; background: var(--cor); flex: none; }
.projeto-desc { font-size: 13px; color: var(--texto-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.projeto-rodape { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--texto-3); font-weight: 500; }
.projeto-rodape span { display: inline-flex; align-items: center; gap: 4px; }

/* Notas */
.notas-grade { columns: 2 160px; column-gap: 10px; margin-top: 14px; }
@media (min-width: 1024px) { .notas-grade { columns: 3 220px; } }
.nota-cartao {
  break-inside: avoid; width: 100%; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; padding: 14px; text-align: left;
  border: 1px solid var(--borda); background: var(--nota); color: #0a0a0a;
  transition: border-color var(--t1);
}
.nota-cartao:hover { border-color: var(--texto); }
:root[data-tema="escuro"] .nota-cartao { background: var(--superficie); color: var(--texto); box-shadow: inset 0 3px 0 var(--nota-forte, var(--borda-forte)); }
.nota-cartao strong { font-size: 15px; font-weight: 600; }
.nota-texto { font-size: 13px; color: inherit; opacity: .8; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.nota-rodape { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; opacity: .7; }
.nota-rodape span { display: inline-flex; align-items: center; gap: 5px; }
.nota-rodape { align-items: center; }
.nota-proj { min-width: 0; flex: 1 1 auto; }
.nota-proj > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.nota-proj > i { flex: none; }
.nota-data { flex: none; white-space: nowrap; margin-left: auto; }
.nota-rodape i { width: 8px; height: 8px; border-radius: var(--r2); display: inline-block; }
.editor-barra {
  display: flex; gap: 0; flex-wrap: wrap; padding: 2px; border: 1px solid var(--borda-forte); border-bottom: 0;
  background: var(--superficie-2);
}
.editor-barra .botao-icone { width: 36px; height: 36px; }
.editor {
  min-height: 220px; padding: 14px; border: 1px solid var(--borda-forte); border-radius: var(--r2);
  background: var(--nota, var(--superficie)); color: #0a0a0a; font-size: 16px; line-height: 1.55; outline: none; overflow-wrap: anywhere;
}
:root[data-tema="escuro"] .editor { background: color-mix(in srgb, var(--nota, var(--superficie)) 10%, var(--superficie)); color: var(--texto); }
.editor:focus { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.editor:empty::before { content: attr(data-vazio); color: var(--texto-3); }
.editor h2 { font-size: 19px; margin: 8px 0 4px; }
.editor ul, .editor ol { padding-left: 22px; margin: 6px 0; }
.editor p { margin: 0 0 6px; }
.editor a { text-decoration: underline; }

/* Lembretes */
.lembrete-texto { display: block; font-size: 14px; margin-top: 4px; color: var(--texto); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Integrações */
.integracao-topo { display: flex; align-items: flex-start; gap: 12px; }
.integracao-topo .meio { flex: 1; min-width: 0; }
.integracao-topo strong { display: block; font-size: 16px; font-weight: 600; }
.integracao-topo .meio > span { display: block; font-size: 13px; color: var(--texto-3); }
.integracao-topo .selo { flex: none; }
.integracao-ic { width: 44px; height: 44px; display: grid; place-items: center; flex: none; background: var(--superficie-2); }
.integracao-ic.zap { color: var(--verde); }
.codigo-zap { margin-top: 14px; text-align: left; }
.codigo-zap > p:first-child { color: var(--texto-2); font-size: 14px; }
.codigo {
  display: block; margin: 12px 0 14px; font-size: clamp(20px, 6.4vw, 28px); font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-x: auto;
  padding: 14px 12px; background: var(--superficie-2); border: 1px solid var(--borda-forte);
}

/* Plano e equipe */
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { position: relative; padding: 9px 0 9px 18px; font-size: 14px; }
.lista-simples li + li { border-top: 1px solid var(--borda); }
.lista-simples li::before { content: ""; position: absolute; left: 0; top: 17px; width: 6px; height: 6px; }
.etiqueta {
  display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border: 1px solid var(--borda);
  font-size: 13px; font-weight: 500; color: var(--texto-2); background: var(--superficie);
}
.equipe-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--borda); border-left: 1px solid var(--borda);
}
.pessoa-equipe {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 16px; text-align: center; color: var(--texto);
  border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda); background: var(--superficie);
  transition: background var(--t1);
}
.pessoa-equipe:hover { background: var(--superficie-2); }
.pessoa-equipe strong { font-size: 16px; font-weight: 600; margin-top: 6px; }
.pessoa-equipe .cargo { font-size: 13px; font-weight: 500; color: var(--texto-2); }
.pessoa-equipe .frase { font-size: 13px; color: var(--texto-3); }
.video-assessor { width: 100%; max-height: 62dvh; border-radius: var(--r2); background: #000; aspect-ratio: 9 / 16; object-fit: cover; }

/* Artigos de ajuda */
.artigo { font-size: 15px; line-height: 1.6; color: var(--texto); overflow-wrap: anywhere; }
.artigo p { margin: 0 0 10px; }
.artigo h2, .artigo h3 { font-size: 17px; margin: 18px 0 8px; }
.artigo ul, .artigo ol { padding-left: 22px; margin: 6px 0 12px; }
.artigo ul, .editor ul { list-style: square; }
.artigo ul > li::marker, .editor ul > li::marker { color: var(--texto); }
.artigo li { margin: 4px 0; }
.artigo blockquote { margin: 0 0 14px; padding: 10px 14px; background: var(--superficie-2); border-left: 3px solid var(--texto); color: var(--texto-2); }
.artigo blockquote p:last-child { margin-bottom: 0; }
.artigo code { background: var(--superficie-2); padding: 1px 5px; border-radius: var(--r2); font-size: 14px; }

/* Drive */
.drive-ic { --tam: 40px; width: var(--tam); height: var(--tam); display: inline-grid; place-items: center; flex: none; background: var(--superficie-2); color: var(--texto-2); }
.drive-caminho { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--texto-3); }
.drive-caminho a:last-child { color: var(--texto); }

/* Análises */
.analises-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .analises-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .analise[data-largo] { grid-column: 1 / -1; } }
.analise-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--borda);
}
.analise-topo h3 { font-size: 15px; font-weight: 700; }
.analise-topo .botao-icone { margin-right: -6px; }
.tabela-analise th:first-child, .tabela-analise td:first-child { padding-left: 0; }
.tabela-analise th:last-child, .tabela-analise td:last-child { padding-right: 0; }
.analise-kpi { display: flex; flex-direction: column; gap: 4px; }
.analise-kpi strong { font-size: 32px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.analise-kpi span { font-size: 13px; font-weight: 600; }
.grafico-linha { width: 100%; height: 130px; display: block; border-bottom: 1px solid var(--regua); }
.grafico-eixo { display: flex; justify-content: space-between; font-size: 11px; color: var(--texto-3); font-weight: 600; margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; }
.barras-h { display: flex; flex-direction: column; gap: 12px; }
.barra-h-topo { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 5px; }
.barra-h-topo > span:not(.barra-h-pct) { color: var(--texto-2); font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.barra-h-topo strong .num, .ranking-total strong .num { color: inherit; font-weight: inherit; }
.barra-h-topo strong { font-weight: 600; }
.lista-analise-item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 14px; }
.lista-analise-item + .lista-analise-item { border-top: 1px solid var(--borda); }
.lista-analise-item .nome { color: var(--texto-2); font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lista-analise-item strong { font-weight: 600; }
.tabela-analise { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-analise th { text-align: right; color: var(--texto-3); padding: 6px 4px; border-bottom: 2px solid var(--regua); }
.tabela-analise td { text-align: right; padding: 8px 4px; border-top: 1px solid var(--borda); font-variant-numeric: tabular-nums; }
.tabela-analise tbody tr:first-child td { border-top: 0; }
.tabela-analise td:first-child, .tabela-analise th:first-child { text-align: left; }
.tabela-analise td:first-child { color: var(--texto-2); font-weight: 500; }

/* Conciliação */
.conciliacao-lista { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.conciliacao-topo { display: flex; align-items: center; gap: 12px; }
.conciliacao-topo .meio { flex: 1; min-width: 0; }
.conciliacao-topo strong { display: block; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conciliacao-topo .meio > span { font-size: 13px; color: var(--texto-3); }
.conciliacao-item .escolha .meio span { font-size: 12px; }
.conciliacao-sugestoes .opcao { padding: 10px 12px; }

/* Mais */
.perfil { display: flex; align-items: center; gap: 14px; padding: 16px; }
.perfil .meio { flex: 1; min-width: 0; }
.perfil .meio > strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.perfil .meio > span { display: block; color: var(--texto-3); font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.menu-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  border-top: 1px solid var(--borda); border-left: 1px solid var(--borda);
}
.menu-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 92px; padding: 14px;
  background: var(--superficie); border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  color: var(--texto); font-weight: 500; font-size: 14px; line-height: 1.3; position: relative;
  transition: background var(--t1);
}
.menu-item:hover { background: var(--superficie-2); }
.aviso-info {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r2);
  background: var(--superficie-2); border-left: 3px solid var(--marca); color: var(--texto-2); font-size: 14px;
}
.aviso-info .ic { color: var(--marca); margin-top: 2px; }
.aviso-info strong { color: var(--texto); }
.versao { text-align: center; color: var(--texto-3); font-size: 12px; margin-top: 24px; }

/* ----------------------------------------------------------------------------------------------------------------
   Peças da marcação revisada (linhas, rankings, resumos, calendário, lembretes)
   ---------------------------------------------------------------------------------------------------------------- */
/* linha com três níveis (nome, detalhe e barra): conteúdo e valor alinhados ao topo */
.linha-alta { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
.linha-alta > .ic:last-child { align-self: center; }
.linha-alta:has(> .linha-extra) { flex-wrap: wrap; align-items: center; row-gap: 8px; }
.linha-extra { flex: 1 0 100%; padding-left: 50px; min-width: 0; }
.linha-extra .linha-sub > span { white-space: normal; }
.rotulo-mini { display: block; color: var(--texto-3); text-align: right; }
.linha-fim .rotulo-mini { margin-bottom: -2px; }
.prazo { font-weight: 600; color: var(--texto-2); }
.prazo.neg { color: var(--vermelho); }
.linha-resumo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.carregar-mais { display: flex; justify-content: center; padding: 14px 0; border-top: 1px solid var(--borda); }
.inverter-contas { display: flex; justify-content: flex-end; margin: -6px 0 6px; }
.cor-amostra { display: inline-block; flex: none; width: 14px; height: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.projeto-progresso { margin-bottom: 8px; }
.projeto-progresso .linha-resumo { margin-bottom: 8px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.folha .perfil { padding: 0 0 16px; }

/* ranking (gastos por categoria, análises): nome · valor · % sobre a barra */
.barras-h.ranking { gap: 12px; }
.ranking .barra-h-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 12px; align-items: baseline; }
.barra-h-nome { font-size: 14px; font-weight: 500; color: var(--texto-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.barra-h-pct { font-size: 12px; font-weight: 600; color: var(--texto-3); text-align: right; }
.barra-h .barra span { background: var(--texto); }
.ranking-total { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--borda); font-size: 14px; }
.ranking-total span { color: var(--texto-3); font-weight: 600; }
.ranking-total strong { font-weight: 700; }
.coluna-barras span { background: var(--texto); }
.leg-entrada { background: var(--verde); }
.leg-saida { background: var(--vermelho); }
.analise-vazia { padding: 16px 0; font-size: 14px; color: var(--texto-3); }

/* fatura: situação do mês no chip, por texto */
.chip-fatura-nota { font-size: 11px; font-weight: 600; text-transform: lowercase; color: var(--marca); }
.chip-fatura-pendente { color: var(--vermelho); }
.chip-fatura[aria-pressed="true"] .chip-fatura-nota { color: inherit; }

/* agenda: abas e navegação do calendário */
.pagina-abas { padding-bottom: 0; }
.calendario-nav { display: flex; align-items: center; gap: 4px; }
.calendario-hoje { height: 36px; padding: 0 12px; border: 1px solid var(--borda-forte); color: var(--texto); font-size: 14px; }
.calendario-hoje:hover { border-color: var(--texto); text-decoration: none; }

/* lembretes */
.linha-lembrete { align-items: flex-start; }
.linha-lembrete > .selo { margin-top: 2px; }
.lembrete-cab { margin-top: 0; }
.lembrete-tipo { font-weight: 600; color: var(--texto-2); }

/* integrações, conta e drive */
.codigo-espera { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--texto-2); }
.giro-p { width: 14px; height: 14px; }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cartao-interruptores { padding: 2px 16px; }
.cartao-interruptores .interruptor + .interruptor { border-top: 1px solid var(--borda); }
.cartao-interruptores > :not(.interruptor) { margin-bottom: 12px; }
.drive-envio { font-size: 14px; margin-bottom: 8px; }
form.cartao > .perfil { padding: 0 0 14px; }
.escolha { min-height: 54px; }

/* selos sobre os blocos pretos (saldo, plano, fatura) */
.destaque .selo { color: var(--bloco-texto); border-color: var(--bloco-texto-2); }
.destaque .selo-sucesso { color: var(--bloco-verde); border-color: var(--bloco-verde); }
.destaque .selo-perigo { color: var(--bloco-vermelho); border-color: var(--bloco-vermelho); }

/* ajuda: título do artigo quebra linha; resumo em até duas linhas */
.lista-artigos .linha-titulo { white-space: normal; overflow: visible; text-overflow: clip; }
.lista-artigos .linha-sub > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ----------------------------------------------------------------------------------------------------------------
   Tons (cor semântica dos ícones) — por último, para valer sobre os ladrilhos
   ---------------------------------------------------------------------------------------------------------------- */

/* ================================================================================================================
   Design atual (referência do usuário): fundo azulado claro, quadros brancos arredondados com sombra suave,
   ícones coloridos, seleção em azul, destaque escuro com montanhas. As regras abaixo valem sobre as anteriores.
   ================================================================================================================ */

/* Base */
body { font: 400 15px/1.5 var(--fonte); letter-spacing: -.005em; }
:focus-visible { border-radius: var(--r1); }
.cor-azul { color: var(--c-azul); }
.cor-verde { color: var(--c-verde); }
.cor-laranja { color: var(--c-laranja); }
.cor-roxo { color: var(--c-roxo); }
.cor-vermelho { color: var(--c-vermelho); }
.cor-cinza { color: var(--c-cinza); }
.lateral-grupo, .cat-grupo, .kpi-rotulo, .calendario-semana, .tabela-analise th, .lista-dia-topo h3, .coluna small, .rotulo-mini {
  letter-spacing: .06em; font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar-thumb { border-radius: var(--rp); border: 3px solid var(--fundo); }
}
.montanhas { display: block; }

/* ---------- Topo ---------- */
.topo { background: var(--fundo); border-bottom: 0; display: block; padding: calc(10px + env(safe-area-inset-top)) 12px 8px 16px; }
.topo-barra { display: flex; align-items: center; gap: var(--e2); min-height: 44px; }
.topo-titulo { flex: 1; min-width: 0; }
.topo-titulo h1 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
.topo-titulo p { color: var(--texto-3); font-size: 13px; }
.topo-painel, .topo-frase, .topo-global { display: none; }
.topo-avatar .avatar { box-shadow: 0 0 0 2px var(--superficie); }
.topo-mes-celular { padding: 8px 0 2px; }
.topo-mes-celular .mes-topo { width: 100%; }
.topo-mes-celular .mes-topo-nome { flex: 1; }
.topo-sub { padding-top: 10px; }

.sino { position: relative; text-decoration: none; }
.sino-ponto { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 0 2px var(--fundo); }

.mes-topo {
  display: inline-flex; align-items: center; gap: 2px; height: 46px; padding: 0 6px 0 4px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r3); box-shadow: var(--sombra-1);
}
.mes-topo-nome {
  display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; background: none;
  border-radius: var(--r2); color: var(--texto); font-weight: 600; font-size: 15px; white-space: nowrap;
}
.mes-topo-nome > .ic:first-child { color: var(--marca); }
.mes-topo-nome:hover, .mes-topo-seta:hover { background: var(--superficie-2); }
.mes-topo-seta { width: 34px; height: 34px; border: 0; background: none; border-radius: var(--r1); display: grid; place-items: center; color: var(--texto-2); }

@media (min-width: 1024px) {
  .topo { position: static; padding: 18px max(32px, calc((100% - 1240px) / 2 + 32px)) 4px; }
  .topo-barra {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; row-gap: 14px;
    grid-template-areas: "voltar painel . acoes global" "titulo titulo titulo titulo frase";
  }
  .topo-barra > .botao-icone:first-child:not(.topo-voltar-celular) { grid-area: voltar; }
  .topo-painel {
    grid-area: painel; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r2);
    background: var(--superficie); border: 1px solid var(--borda); color: var(--texto-2);
  }
  .topo-titulo { grid-area: titulo; display: block; }
  .topo-titulo h1 { font-size: 32px; line-height: 1.15; letter-spacing: -.03em; white-space: normal; }
  .topo-titulo p { font-size: 17px; color: var(--texto-2); margin-top: 4px; white-space: normal; }
  .topo-frase {
    grid-area: frase; display: block; align-self: center; max-width: 230px; padding: 4px 0 4px 22px; margin-right: 8px;
    border-left: 1px solid var(--borda-forte); color: var(--texto-3); font-size: 13px; font-style: italic; line-height: 1.45;
  }
  .topo-acoes { grid-area: acoes; }
  .topo-global { grid-area: global; display: flex; align-items: center; gap: 10px; }
  .topo-global > .botao-icone, .topo-global > .sino { width: 44px; height: 44px; color: var(--texto); }
  .topo-mes-celular { display: none; }
  .topo-sub { padding: 14px max(32px, calc((100% - 1240px) / 2 + 32px)) 0; }
}

/* ---------- Barra lateral (computador) ---------- */
@media (min-width: 1024px) {
  .app { grid-template-columns: 288px minmax(0, 1fr); }
  .lateral {
    margin: 14px 0 14px 14px; height: calc(100dvh - 28px); top: 14px; padding: 20px 14px 0;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r5); box-shadow: var(--sombra-2);
  }
  .pagina { max-width: 1240px; padding: 18px 32px 48px; }
}
.lateral-logo { padding: 0 8px 18px; }
.lateral-logo img { height: 34px; }
.lateral-busca {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 10px 0 12px; margin-bottom: 12px;
  border: 1px solid var(--borda); border-radius: var(--r3); background: var(--superficie); color: var(--texto-3); font-size: 14px; text-align: left;
  transition: border-color var(--t1);
}
.lateral-busca:hover { border-color: var(--borda-forte); }
/* "Novo lançamento": despesa, receita, transferência... (no celular é a aba "Novo" da barra de baixo) */
.lateral-novo {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 42px; margin: -4px 0 12px;
  border: 1px solid var(--marca); border-radius: var(--r3); background: var(--marca); color: var(--marca-texto); font: 600 14px/1 var(--fonte);
  box-shadow: 0 4px 12px rgba(21, 84, 240, .22); transition: background var(--t1);
}
.lateral-novo:hover { background: var(--marca-2); border-color: var(--marca-2); }
@media (max-width: 1023px) { .topo-novo { display: none; } }
.lateral-busca span { flex: 1; }
.lateral-busca kbd {
  font: 600 11px/1 var(--fonte); color: var(--texto-3); padding: 4px 6px; border: 1px solid var(--borda); background: var(--superficie-2);
}
.lateral-grupo { margin: 16px 0 6px; padding: 0 12px; border-top: 0; color: var(--texto-3); }
.lateral-link {
  min-height: 46px; gap: 14px; padding: 0 12px; border-radius: var(--r3);
  color: var(--texto); font-size: 15px; font-weight: 500;
}
.lateral-link:hover { background: var(--superficie-2); }
.lateral-link[aria-current="page"] { background: var(--marca); color: #fff; font-weight: 600; box-shadow: var(--sombra-marca); }
.lateral-link[aria-current="page"] .ic { color: #fff; }
.lateral-rodape { background: var(--superficie); padding: 10px 0 14px; display: flex; flex-direction: column; gap: 10px; }
.lateral-usuario { border: 0; border-top: 1px solid var(--borda); border-radius: 0; padding: 14px 6px 4px; background: transparent; }
.lateral-usuario:hover { border-color: var(--borda); }
.lateral-usuario .ic { color: var(--texto-3); }
.lateral-usuario strong { font-size: 15px; }
.lateral-promo {
  position: relative; display: block; overflow: hidden; min-height: 112px; padding: 14px 14px; border-radius: var(--r4);
  background: #e7efff; color: var(--texto-2); text-decoration: none; font-size: 13px; line-height: 1.4;
}
.lateral-promo .montanhas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lateral-promo::before { content: ""; position: absolute; inset: 0; }
.lateral-promo-texto { position: relative; display: flex; flex-direction: column; gap: 8px; max-width: 190px; color: #4a5470; }
.lateral-promo-titulo { display: flex; align-items: flex-start; gap: 10px; color: var(--marca); }
.lateral-promo-titulo strong { font-size: 14px; line-height: 1.35; color: #1554f0; }
:root[data-tema="escuro"] .lateral-promo { background: #14213d; }
:root[data-tema="escuro"] .lateral-promo::before { background: linear-gradient(90deg, rgba(20,33,61,.95), rgba(20,33,61,.4)); }
:root[data-tema="escuro"] .lateral-promo-texto { color: var(--texto-2); }
:root[data-tema="escuro"] .lateral-promo-titulo strong { color: #8db2ff; }

/* ---------- Barra inferior (celular) ---------- */
.nav-inferior { background: var(--superficie); border-top: 1px solid var(--borda); box-shadow: 0 -6px 20px rgba(16, 24, 40, .06); }
.nav-item { color: var(--texto-3); font-weight: 600; }
.nav-item[aria-current="page"] { color: var(--marca); }
.nav-item[aria-current="page"]::before { left: 22px; right: 22px; height: 3px; background: var(--marca); }
.nav-novo { color: var(--texto-2); }
.nav-novo .ic { border-radius: var(--r3); box-shadow: var(--sombra-marca); padding: 5px 13px; margin-block: -5px; }
.nav-novo[aria-expanded="true"] .ic { background: var(--marca-2); color: #fff; }

/* ---------- Botões e controles ---------- */
.botao { border-radius: var(--r3); font-weight: 600; }
.botao-primario { box-shadow: 0 4px 12px rgba(21, 84, 240, .22); }
.botao-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.botao-secundario:hover:not([disabled]) { background: var(--superficie-2); border-color: var(--borda-forte); }
.botao-suave { border-radius: var(--r3); }
.botao-perigo { background: var(--superficie); border-color: color-mix(in srgb, var(--vermelho) 45%, transparent); }
.botao-icone { border-radius: var(--r2); }
.botao-icone-contorno { border-color: var(--borda); background: var(--superficie); }
.botao-icone-contorno:hover { border-color: var(--borda-forte); }
.botao-icone[aria-pressed="true"] { color: var(--marca); background: var(--marca-suave); }

.entrada { border-radius: var(--r3); border-color: var(--borda-forte); }
.entrada:hover { border-color: #b4c0d4; }
.entrada:focus { border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-suave); }
.entrada[disabled], .entrada[readonly] { border-color: var(--borda); }

.seg { border: 0; padding: 4px; gap: 4px; border-radius: var(--r3); background: var(--superficie-2); }
.seg button { border-radius: var(--r2); height: 38px; color: var(--texto-2); }
.seg button + button { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }
.seg button[aria-pressed="true"][data-tom="neg"] { color: var(--vermelho); }
.seg button[aria-pressed="true"][data-tom="pos"] { color: var(--verde); }
.seg button[aria-pressed="true"][data-tom="marca"] { color: var(--marca); }
.seg-grande button { height: 44px; }
.seg.abas { padding: 0; gap: 6px; background: none; border-radius: 0; border-bottom: 1px solid var(--borda); }
.seg.abas button { border-radius: 0; height: 44px; }
.seg.abas button[aria-pressed="true"] { background: none; color: var(--marca); box-shadow: inset 0 -2px 0 var(--marca); }

.interruptor-trilho { border-radius: var(--rp); background: var(--superficie-3); }
.interruptor-bola { box-shadow: 0 1px 3px rgba(16, 24, 40, .25); }

.chip { border-radius: var(--rp); border-color: var(--borda); background: var(--superficie); color: var(--texto-2); font-weight: 500; }
.chip:hover { border-color: var(--borda-forte); color: var(--texto); }
.chip[aria-pressed="true"] { background: var(--marca); color: #fff; border-color: var(--marca); box-shadow: 0 4px 10px rgba(21, 84, 240, .2); }
.chip-removivel { background: var(--marca-suave); color: var(--marca); border-color: transparent; }
.chip-cor { border-radius: 50%; }

.selo { border: 0; border-radius: var(--rp); height: 22px; padding: 0 9px; font-size: 12px; font-weight: 600; }
.selo-neutro { background: var(--superficie-2); color: var(--texto-2); }
.selo-info { background: var(--marca-suave); color: var(--marca); }
.selo-sucesso { background: var(--verde-suave); color: var(--verde); }
.selo-aviso { background: var(--ambar-suave); color: var(--ambar); }
.selo-perigo { background: var(--vermelho-suave); color: var(--vermelho); font-weight: 600; }
.selo-roxo { background: var(--roxo-suave); color: var(--roxo); }

.barra { height: 6px; border-radius: var(--rp); background: var(--superficie-3); }
.barra span { border-radius: var(--rp); background: var(--marca); }
.barra-marca span { background: var(--marca); }
/* os tons vêm depois da regra geral acima (senão toda barra ficaria azul) */
.barra-sucesso span { background: var(--verde); }
.barra-aviso span { background: var(--ambar); }
.barra-perigo span { background: var(--vermelho); }
.barra-clara { background: rgba(255, 255, 255, .22); }
.barra-clara span { background: #ffffff; }

.avatar { background: var(--marca-suave); color: var(--marca); font-weight: 700; }

/* ---------- Quadros, listas, linhas ---------- */
.cartao, .lista { border-radius: var(--r4); border-color: var(--borda); box-shadow: var(--sombra-1); }
.lista { overflow: hidden; }
.secao-topo h2 { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.secao-link { font-weight: 600; }
.lista-dia-topo { border-bottom: 0; padding: 0 4px 8px; }
.lista-dia-topo h3 { color: var(--texto-3); }
.lista-dia-topo + .lista { border-top-width: 1px; }
.linha-titulo { font-weight: 600; }
.icone-cat { border-radius: var(--r3); background: var(--cat-bg, var(--superficie-2)); color: var(--cat-fg, var(--texto-2)); box-shadow: none; }
:root[data-tema="escuro"] .icone-cat { color: color-mix(in oklab, var(--cat, #c8c8c8) 70%, #ffffff); }
.icone-cat-vazio, :root[data-tema="escuro"] .icone-cat-vazio { background: var(--superficie-2); box-shadow: none; }
.logo-banco { border-radius: var(--r2); }
.check { border-radius: var(--r1); }
.vazio-ic { border-radius: var(--r3); border: 0; background: var(--marca-suave); color: var(--marca); }
.erro-bloco { border-radius: var(--r3); border: 1px solid color-mix(in srgb, var(--vermelho) 35%, transparent); background: var(--vermelho-suave); }
.esq { border-radius: var(--r4); }
.mes { border-radius: var(--r3); border-color: var(--borda); background: var(--superficie); box-shadow: var(--sombra-1); overflow: hidden; }
.mes-seta, .mes-nome { border-radius: 0; }
.mes-nome { border-left-color: transparent; border-right-color: transparent; }
.calendario-topo .mes-seta { border-radius: var(--r2); border-color: var(--borda); }
.ponto { border-radius: 50%; }
.kpis { gap: 12px; border: 0; }
.kpi { border: 1px solid var(--borda); border-radius: var(--r4); background: var(--superficie); box-shadow: var(--sombra-1); }
.kpi[aria-pressed="true"] { background: var(--marca-suave); color: var(--texto); border-color: var(--marca); }
.kpi[aria-pressed="true"] .kpi-rotulo { color: var(--marca); opacity: 1; }

/* ---------- Folhas, opções, avisos ---------- */
.folha { border-radius: var(--r5) var(--r5) 0 0; border-top: 0; }
.folha-cheia { border-radius: 0; }
.folha-alca { border-radius: var(--rp); }
@media (min-width: 720px) {
  .folha, .folha-cheia { border-radius: var(--r5); border: 1px solid var(--borda); }
}
.opcoes { gap: 8px; }
.opcoes > .opcao + .opcao { border-top-width: 1px; }
.opcao { border-radius: var(--r3); }
.opcao-ic { border-radius: var(--r2); background: var(--marca-suave); color: var(--marca); }
.aviso { border-radius: var(--r3); border-left: 0; }
.aviso-acao { border-radius: var(--r1); letter-spacing: .02em; }
.aviso-fechar { border-radius: var(--r1); }
.novo-grade { gap: 10px; border: 0; box-shadow: none; }
.novo-item { border: 1px solid var(--borda); border-radius: var(--r4); box-shadow: var(--sombra-1); }
.novo-item .novo-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r3); }
.novo-item:nth-child(1) .novo-ic { background: var(--vermelho-suave); color: var(--vermelho); }
.novo-item:nth-child(2) .novo-ic { background: var(--verde-suave); color: var(--verde); }
.novo-item:nth-child(3) .novo-ic { background: var(--marca-suave); color: var(--marca); }
.novo-item:nth-child(4) .novo-ic { background: var(--roxo-suave); color: var(--roxo); }
.novo-item:nth-child(5) .novo-ic { background: var(--ambar-suave); color: var(--ambar); }
.novo-item:nth-child(6) .novo-ic { background: var(--verde-suave); color: var(--verde); }

/* busca no app */
.busca-resultados { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.busca-grupo { margin: 12px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.busca-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px; border: 0; border-radius: var(--r2);
  background: none; color: var(--texto); text-align: left; font-size: 15px; text-decoration: none;
}
.busca-item:hover { background: var(--superficie-2); }

/* ---------- Telas ---------- */
.entrar-cartao { border-radius: var(--r5); border: 1px solid var(--borda); border-top: 1px solid var(--borda); box-shadow: var(--sombra-2); }
.destaque, .fatura-resumo { border-radius: var(--r5); border: 0; background: var(--bloco-fundo); box-shadow: 0 10px 30px rgba(6, 26, 56, .22); }
.destaque-grade { border-top-color: var(--bloco-regua); }
.paleta-cor { border-radius: var(--r2); }
.escolha { border-radius: var(--r3); border-color: var(--borda-forte); }
.cat-grade { gap: 8px; border: 0; box-shadow: none; }
.cat-item { border: 1px solid var(--borda); border-radius: var(--r3); }
.cat-item[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--marca); border-color: var(--marca); }
.calendario-semana { border-bottom: 0; }
.calendario-dia { border-radius: var(--r2); border-bottom: 0; }
.calendario-dia[aria-pressed="true"] { background: var(--marca); color: #fff; box-shadow: var(--sombra-marca); }
.calendario-ponto { border-radius: 50%; background: var(--marca); }
.calendario-dia[aria-pressed="true"] .calendario-ponto { background: #fff; }
.hora-bloco { border-right-color: var(--borda); }
.tarefa-rapida { border-radius: var(--r3); border-color: var(--borda-forte); }
.tarefa-rapida:focus-within { box-shadow: 0 0 0 4px var(--marca-suave); }
.projetos-grade { gap: 14px; border: 0; box-shadow: none; }
.projeto-cartao { border: 1px solid var(--borda); border-top: 4px solid var(--cor, var(--marca)); border-radius: var(--r4); box-shadow: var(--sombra-1); }
.projeto-cor { border-radius: 50%; }
.nota-cartao { border-radius: var(--r4); box-shadow: var(--sombra-1); }
.editor, .editor-barra { border-radius: var(--r3); }
.editor-barra { border-radius: var(--r3) var(--r3) 0 0; }
.editor-barra + .editor { border-radius: 0 0 var(--r3) var(--r3); }
.integracao-ic { border-radius: var(--r3); }
.integracao-ic.zap { background: var(--verde-suave); }
.integracao-ic.of { background: var(--marca-suave); color: var(--marca); }
.codigo { border-radius: var(--r3); border-style: dashed; }
.equipe-grade { gap: 12px; border: 0; box-shadow: none; }
.pessoa-equipe { border: 1px solid var(--borda); border-radius: var(--r4); box-shadow: var(--sombra-1); }
.menu-grade { gap: 10px; border: 0; box-shadow: none; }
.menu-item { border: 1px solid var(--borda); border-radius: var(--r4); box-shadow: var(--sombra-1); }
.menu-item .menu-ic { color: var(--marca); }
.aviso-info, .nota-banco { border-radius: var(--r3); border-left: 0; background: var(--marca-suave); }
.drive-ic { border-radius: var(--r2); }
.drive-ic.pasta { background: var(--ambar-suave); color: var(--ambar); }
.etiqueta { border-radius: var(--rp); }
.lista-simples li::before { border-radius: 50%; background: var(--marca); }
.artigo blockquote { border-radius: var(--r3); border-left-color: var(--marca); }
.analise-topo { border-bottom-color: var(--borda); }
.chip-fatura-nota { border-left: 0; padding-left: 4px; }

/* ================================================================================================================
   Início
   ================================================================================================================ */
.grade-inicio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.coluna-inicio { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 1100px) {
  .grade-inicio { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .coluna-inicio { gap: 20px; }
}

/* Resultado do mês: quadro escuro de fundo liso e neutro (sem imagem atrás dos números, que atrapalhava a leitura) */
.resultado {
  position: relative; overflow: hidden; border-radius: var(--r5); color: #fff; background: var(--resultado-fundo);
  box-shadow: 0 12px 32px rgba(6, 26, 56, .25);
}
.resultado .montanhas {
  position: absolute; right: 0; bottom: 0; height: 100%;
}
:root[data-tema="escuro"] .resultado { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 32px rgba(0, 0, 0, .35); }
.resultado-conteudo { position: relative; padding: 22px 20px 18px; }
.resultado-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.resultado-rotulo { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.resultado-valor { font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 10px 0 12px; }
.resultado-comparacao { display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .75); }
.variacao {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: var(--r2);
  font-weight: 700; font-size: 14px; flex: none;
}
.variacao-neg { background: rgba(239, 68, 68, .2); color: #ff8f93; }
.variacao-pos { background: rgba(18, 162, 106, .22); color: #5ee3a7; }
.resultado-botao {
  display: inline-flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 16px; border-radius: var(--r3);
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); color: #fff; font-weight: 600; font-size: 14px;
  white-space: nowrap; backdrop-filter: blur(6px); transition: background var(--t1);
}
.resultado-botao:hover { background: rgba(255, 255, 255, .14); }
.resultado-grade {
  display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 20px; border-radius: var(--r4);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(6px);
}
.resultado-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; min-width: 0; }
.resultado-item + .resultado-item { border-top: 1px solid rgba(255, 255, 255, .1); }
.resultado-item > div { min-width: 0; }
.resultado-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r2); flex: none; }
.item-entradas .resultado-ic { background: rgba(18, 162, 106, .22); color: #4ade80; }
.item-saidas .resultado-ic { background: rgba(239, 68, 68, .22); color: #ff8f93; }
.item-resultado .resultado-ic { background: rgba(59, 130, 246, .28); color: #9cc0ff; }
.resultado-item-rotulo { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.resultado-item strong { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-top: 4px; white-space: nowrap; }
.resultado-item small { display: block; font-size: 12px; color: rgba(255, 255, 255, .62); margin-top: 2px; }
.resultado-traco { position: absolute; right: 16px; bottom: 18px; width: 56px; height: 3px; }
.item-entradas .resultado-traco { background: #2fd08a; box-shadow: 0 0 10px rgba(47, 208, 138, .6); }
.item-saidas .resultado-traco { background: #ff6b70; box-shadow: 0 0 10px rgba(255, 107, 112, .6); }
@media (min-width: 640px) {
  .resultado-conteudo { padding: 26px 24px 22px; }
  .resultado-valor { font-size: 48px; }
  .resultado-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resultado-item + .resultado-item { border-top: 0; border-left: 1px solid rgba(255, 255, 255, .1); }
  .resultado-traco { right: 18px; bottom: 14px; width: 64px; }
}

/* A pagar / A receber */
.pendencias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pendencia {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border-radius: var(--r4); border: 1px solid; text-align: left;
  color: var(--texto); box-shadow: var(--sombra-1); transition: transform var(--t1), box-shadow var(--t1);
}
.pendencia:hover { box-shadow: var(--sombra-2); }
.pendencia-pagar { background: #fff7f8; border-color: #fbe3e6; }
.pendencia-receber { background: #f3fcf8; border-color: #d7f2e5; }
:root[data-tema="escuro"] .pendencia-pagar { background: rgba(255, 107, 112, .07); border-color: rgba(255, 107, 112, .2); }
:root[data-tema="escuro"] .pendencia-receber { background: rgba(52, 199, 138, .07); border-color: rgba(52, 199, 138, .2); }
.pendencia-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r4); flex: none; }
.pendencia-pagar .pendencia-ic { background: var(--vermelho-suave); color: var(--vermelho); }
.pendencia-receber .pendencia-ic { background: var(--verde-suave); color: var(--verde); }
.pendencia-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pendencia-texto > span { font-size: 14px; color: var(--texto-2); font-weight: 500; }
.pendencia-texto strong { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pendencia-texto small { font-size: 13px; color: var(--texto-3); }
.pendencia-texto small.neg { color: var(--vermelho); font-weight: 600; }
.pendencia-seta { align-self: flex-start; flex: none; }
.pendencia-pagar .pendencia-seta { color: var(--vermelho); }
.pendencia-receber .pendencia-seta { color: var(--verde); }
@media (min-width: 640px) {
  .pendencias { gap: 16px; }
  .pendencia { padding: 18px 20px; gap: 18px; }
  .pendencia-ic { width: 60px; height: 60px; }
  .pendencia-texto strong { font-size: 26px; }
}
@media (max-width: 420px) {
  .pendencia { flex-direction: column; align-items: flex-start; gap: 10px; position: relative; }
  .pendencia-seta { position: absolute; top: 14px; right: 12px; }
  .pendencia-ic { width: 42px; height: 42px; }
  .pendencia-texto strong { font-size: 20px; }
}

/* Quadros do Início */
.painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r4); box-shadow: var(--sombra-1); padding: 16px 16px 14px; min-width: 0; }
.painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.painel-topo h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.painel-topo h2 .ic { color: var(--texto); }
.contagem {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--rp);
  background: var(--superficie-2); color: var(--texto-2); font-size: 13px; font-weight: 600;
}
.painel-link { display: inline-flex; align-items: center; gap: 6px; color: var(--marca); font-size: 14px; font-weight: 600; white-space: nowrap; position: relative; }
.painel-link::after { content: ""; position: absolute; inset: -10px -6px; }
.painel-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.painel > .lista { box-shadow: none; border-radius: var(--r3); }
.painel > .vazio { padding: 8px 4px; }
@media (min-width: 640px) { .painel { padding: 20px 22px 18px; } }

.painel-vazio { display: flex; align-items: center; gap: 22px; padding: 16px 20px; border: 1px solid var(--borda); border-radius: var(--r3); }
.painel-vazio strong { display: block; font-size: 15px; font-weight: 700; }
.painel-vazio p { font-size: 14px; color: var(--texto-3); margin-top: 4px; }
.ilustracao-contas { width: 84px; height: 84px; flex: none; --ilus-fundo: var(--marca-suave); --ilus-traco: #9fb4da; }
@media (max-width: 420px) { .painel-vazio { gap: 14px; padding: 14px; } .ilustracao-contas { width: 64px; height: 64px; } }

/* Últimos lançamentos: tabela no computador, lista no celular */
.tabela-lanc { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-lanc th {
  text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-3); background: var(--superficie-2); border-bottom: 1px solid var(--borda);
}
.tabela-lanc th:first-child { border-radius: var(--r2) 0 0 var(--r2); }
.tabela-lanc th:last-child { border-radius: 0 var(--r2) var(--r2) 0; }
.tabela-lanc td { padding: 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela-lanc tbody tr:last-child td { border-bottom: 0; }
.tabela-lanc tbody tr { cursor: pointer; transition: background var(--t1); }
.tabela-lanc tbody tr:hover { background: var(--superficie-2); }
.tabela-lanc .col-valor { text-align: right; white-space: nowrap; font-weight: 600; }
.tabela-lanc .col-data { color: var(--texto-3); white-space: nowrap; }
.tabela-lanc .col-menu { width: 44px; padding: 4px; text-align: right; }
.tabela-lanc .col-menu .botao-icone { width: 34px; height: 34px; color: var(--texto-3); }
.lanc-desc { display: flex; align-items: center; gap: 12px; font-weight: 600; min-width: 0; }
.lanc-desc span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lanc-ic { flex: none; }
.lanc-cat { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-3); font-size: 13px; white-space: nowrap; }
.lanc-sub { display: none; }
@media (max-width: 719px) {
  .tabela-lanc thead, .tabela-lanc .col-cat, .tabela-lanc .col-data, .tabela-lanc .col-menu { display: none; }
  .tabela-lanc td { padding: 12px 4px; }
  .tabela-lanc td:first-child { max-width: 0; width: 100%; }
  .lanc-sub { display: block; margin: 2px 0 0 30px; font-size: 12px; color: var(--texto-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

/* Gastos por categoria: rosca + legenda */
.rosca-bloco { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.rosca { position: relative; width: 188px; height: 188px; flex: none; }
.rosca svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rosca-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.rosca-centro strong { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.rosca-centro > span { font-size: 12px; color: var(--texto-3); margin-top: 2px; } /* só o rótulo (o valor dentro do strong fica grande) */
.legenda { align-self: stretch; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.legenda-item { display: grid; grid-template-columns: 10px 18px minmax(0, 1fr) auto 40px; align-items: center; gap: 10px; font-size: 14px; }
.legenda-cor { width: 10px; height: 10px; border-radius: 50%; }
.legenda-ic { color: var(--texto-2); }
.legenda-item .nome { color: var(--texto-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.legenda-item strong { font-weight: 600; white-space: nowrap; }
.legenda-item .pct { color: var(--texto-3); font-size: 13px; text-align: right; }
@media (min-width: 420px) { .rosca-bloco { flex-direction: row; align-items: center; gap: 22px; } .rosca { width: 170px; height: 170px; } }

/* Orçamentos */
.orcamentos { border: 1px solid var(--borda); border-radius: var(--r3); overflow: hidden; }
.orcamento { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.orcamento + .orcamento { border-top: 1px solid var(--borda); }
.orcamento-meio { flex: 1; min-width: 0; }
.orcamento-topo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.orcamento-topo .nome { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.orcamento-topo .quanto { font-size: 13px; color: var(--texto-3); white-space: nowrap; }
.orcamento-topo .quanto.neg { color: var(--vermelho); font-weight: 600; }
.orcamento-topo .pct { width: 38px; text-align: right; font-size: 13px; color: var(--texto-3); }
@media (max-width: 420px) { .orcamento-topo { flex-wrap: wrap; row-gap: 2px; } .orcamento-topo .quanto { order: 3; width: 100%; } }

/* Objetivos: pôr do sol */
.objetivos {
  position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  min-height: 160px; padding: 22px; border-radius: var(--r4); background: #141c3d; color: #fff; box-shadow: var(--sombra-2);
}
.objetivos .montanhas { position: absolute; inset: 0; width: 100%; height: 100%; }
.objetivos::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 16, 40, .88) 0%, rgba(10, 16, 40, .45) 55%, rgba(10, 16, 40, 0) 100%); }
.objetivos-conteudo { position: relative; z-index: 2; padding-left: 14px; border-left: 3px solid #4d84ff; }
.objetivos-titulo { font-size: 16px; font-weight: 600; line-height: 1.35; }
.objetivos-texto { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .75); margin-top: 8px; }
.objetivos-botao {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: var(--r3);
  border: 1px solid rgba(255, 255, 255, .5); background: rgba(10, 16, 40, .35); color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap;
  backdrop-filter: blur(4px);
}
.objetivos-botao:hover { background: rgba(255, 255, 255, .14); }

@media (prefers-reduced-motion: reduce) {
  .giro { display: none; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* Ajustes de proporção (comparação com a referência em 1672 px) */
@media (min-width: 1024px) {
  .app { grid-template-columns: 276px minmax(0, 1fr); }
  .pagina { max-width: 1400px; padding: 14px 28px 40px; }
  .topo { padding: 16px max(28px, calc((100% - 1400px) / 2 + 28px)) 2px; }
  .topo-sub { padding: 12px max(28px, calc((100% - 1400px) / 2 + 28px)) 0; }
  .lateral-link { min-height: 42px; }
  .lateral-link .ic { fill: currentColor; fill-opacity: .16; }
  .lateral-link[aria-current="page"] .ic { fill-opacity: .25; }
}
@media (min-width: 1100px) {
  .grade-inicio { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .rosca-bloco { gap: 20px; }
  .rosca { width: 150px; height: 150px; }
  .rosca-centro strong { font-size: 16px; }
  .legenda { gap: 10px; }
  .legenda-item { grid-template-columns: 10px 18px minmax(56px, 1fr) auto 34px; gap: 8px; font-size: 13.5px; }
  .pendencia { padding: 14px 18px; }
  .pendencia-ic { width: 52px; height: 52px; }
  .pendencia-texto strong { font-size: 24px; }
}
.rosca-centro strong { color: var(--texto); }
@media (max-width: 639px) {
  .resultado-topo { flex-direction: column; align-items: stretch; }
  .resultado-botao { align-self: flex-start; }
}
@media (min-width: 1024px) {
  .app { grid-template-columns: 292px minmax(0, 1fr); }
  .lateral-link { font-size: 14.5px; gap: 12px; }
}
/* notebooks (1100–1499 px): coluna da direita mais estreita */
@media (min-width: 1100px) and (max-width: 1499px) {
  .grade-inicio { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .rosca-bloco { flex-direction: column; align-items: center; }
  .rosca { width: 170px; height: 170px; }
  .legenda-item { grid-template-columns: 10px 18px minmax(0, 1fr) auto 38px; }
  .orcamento-topo { flex-wrap: wrap; row-gap: 2px; }
  .orcamento-topo .quanto { order: 3; width: 100%; }
  .resultado-item { padding: 14px 12px; gap: 10px; }
  .resultado-item strong { font-size: 17px; }
  .resultado-item small { white-space: nowrap; }
  .resultado-ic { width: 34px; height: 34px; }
}
@media (min-width: 1100px) and (max-width: 1499px) {
  .pendencia { padding: 14px; gap: 12px; }
  .pendencia-ic { width: 46px; height: 46px; }
  .pendencia-texto strong { font-size: 21px; }
}
@media (max-width: 1499px) { .resultado-traco { display: none; } }

/* Montanhas em foto (cobrem o quadro; a linha de tendência fica por cima, à direita) */
.montanhas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.montanhas-linha { position: absolute; inset: 0; width: 100%; height: 100%; }
.resultado .montanhas { width: 100%; -webkit-mask-image: none; mask-image: none; }
.resultado .montanhas img { object-position: 70% 40%; }
.resultado::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(2, 15, 36, .55) 0%, rgba(2, 15, 36, 0) 55%); }
.resultado-conteudo { z-index: 1; }
.objetivos .montanhas img { object-position: 85% 55%; }
.lateral-promo .montanhas img { object-position: right bottom; }
.lateral-promo::before { background: linear-gradient(90deg, rgba(232, 240, 255, .92) 0%, rgba(232, 240, 255, .55) 55%, rgba(232, 240, 255, 0) 100%); }
:root[data-tema="escuro"] .lateral-promo .montanhas { opacity: .35; }
@media (min-width: 1024px) { .topo .so-celular { display: none; } }

/* Cantos mais retos também onde o raio estava fixo */
.interruptor-bola { border-radius: 3px; }
.avatar { border-radius: var(--r4); }
.lateral-busca kbd { border-radius: 3px; }
.resultado-traco { border-radius: 1px; }
.nav-item[aria-current="page"]::before { border-radius: 0; }

/* ---------- Telas abertas sem entrar (telefone, convite, criar conta, redefinir senha, páginas públicas) ---------- */
.entrar-caixa-larga { width: min(560px, 100%); }
.selo-tela {
  width: 52px; height: 52px; border-radius: var(--r5); display: grid; place-items: center; margin-bottom: 18px;
  background: var(--marca-suave); color: var(--marca);
}
.selo-tela-sucesso { background: var(--verde-suave); color: var(--verde); }
.selo-tela-aviso { background: var(--ambar-suave); color: var(--ambar); }
.selo-tela-perigo { background: var(--vermelho-suave); color: var(--vermelho); }
.lista-checks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.lista-checks li { position: relative; padding-left: 28px; color: var(--texto-2); font-size: 14.5px; line-height: 1.45; }
.lista-checks li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--verde-suave);
}
.lista-checks li::after {
  content: ""; position: absolute; left: 6px; top: 5px; width: 6px; height: 9px; border: solid var(--verde); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.entrada-telefone .prefixo {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 16px; font-weight: 600; color: var(--texto-3);
}
.entrada-grupo.entrada-telefone .entrada { padding: 0 12px 0 50px; }
.entrada-codigo { height: 56px; font-size: 26px; font-weight: 600; letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums; }
.entrar-links-linha { flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
.campo-msg-ok { color: var(--verde); font-weight: 600; }
.entrar-cartao > .campo-msg, .entrar-cartao > form > .campo-msg { margin: 0 0 14px; }
.entrar-cartao .botao { white-space: normal; text-align: center; }
.lista-vazia { padding: 18px 16px; color: var(--texto-3); font-size: 14px; text-align: center; }
.publico-arquivo { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; min-width: 0; }
.publico-arquivo > div { min-width: 0; }
.publico-arquivo h1 { font-size: 20px; margin: 0 0 4px; overflow-wrap: anywhere; }
.entrar-cartao .publico-arquivo p { margin: 0; color: var(--texto-3); font-size: 14px; }
.agendar-dias { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: thin; }
.agendar-dia {
  flex: 0 0 auto; width: 64px; padding: 10px 0; display: grid; gap: 2px; justify-items: center; border: 1px solid var(--borda-forte);
  border-radius: var(--r3); background: var(--superficie); color: var(--texto-2); font-size: 12.5px;
}
.agendar-dia strong { font-size: 15px; color: var(--texto); font-variant-numeric: tabular-nums; }
.agendar-dia.ativo, .agendar-hora.ativo { border-color: var(--marca); background: var(--marca-suave); color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.agendar-dia.ativo strong { color: var(--marca); }
.agendar-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 8px; }
.agendar-hora {
  height: 42px; border: 1px solid var(--borda-forte); border-radius: var(--r3); background: var(--superficie); color: var(--texto);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.agendar-dia:hover, .agendar-hora:hover { border-color: var(--marca); }
.agendar-form { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--borda); }
.agendar-resumo { font-weight: 600; margin: 0 0 14px; }
.agenda-dias-cfg { display: grid; gap: 6px; margin-top: 8px; }
.agenda-dia-cfg { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--borda); }
.agenda-dia-cfg:last-child { border-bottom: 0; }
.agenda-dia-nome { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; min-width: 104px; }
.agenda-dia-nome input { width: 18px; height: 18px; accent-color: var(--marca); }
.agenda-dia-cfg.desligado .agenda-dia-nome { color: var(--texto-3); }
.agenda-dia-horas { display: flex; align-items: center; gap: 6px; color: var(--texto-3); font-size: 13px; }
.agenda-dia-horas .entrada { width: 104px; height: 40px; padding: 0 8px; }
.entrar-legal { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-3); }
.entrar-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.entrar-cartao .codigo-zap { margin-bottom: 16px; }

/* ---------- Conectar banco (Open Finance) ---------- */
.escolhas { display: grid; gap: 8px; }
label.escolha { cursor: pointer; padding: 12px 14px; align-items: flex-start; }
label.escolha input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--marca); flex: none; }
label.escolha.ativo { border-color: var(--marca); background: var(--marca-suave); box-shadow: inset 0 0 0 1px var(--marca); }
.escolha-texto { display: grid; gap: 2px; min-width: 0; }
.escolha-texto strong { font-weight: 600; }
.escolha-texto span { font-size: 13px; color: var(--texto-3); }
.banco-escolhido { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 16px; }
.of-resultado { display: grid; justify-items: start; gap: 4px; }
.of-resultado p { color: var(--texto-2); }
.passos-of { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 10px; color: var(--texto-2); font-size: 14.5px; line-height: 1.5; }
.plano-preco { display: grid; gap: 2px; margin: 0 0 20px; padding: 14px 16px; border-radius: var(--r4); background: var(--superficie-2); }
.plano-preco strong { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plano-preco strong span { font-size: 15px; font-weight: 500; color: var(--texto-3); }
.plano-preco > span { color: var(--texto-2); font-size: 14.5px; }

/* ---------- Perfil do assessor ---------- */
.perfil-tagline { margin: 14px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.perfil-texto { display: grid; gap: 10px; color: var(--texto-2); font-size: 14.5px; line-height: 1.6; }
.perfil-texto strong { color: var(--texto); }
.balao-zap {
  position: relative; max-width: 92%; padding: 10px 12px; border-radius: var(--r4) var(--r4) var(--r4) 2px; background: #e7f8ee;
  color: #10241a; font-size: 14.5px; line-height: 1.5; display: grid; gap: 4px;
}
:root[data-tema="escuro"] .balao-zap { background: #133524; color: #e6f6ec; }
.perfil-assinatura { margin-top: 10px; font-style: italic; color: var(--texto-3); }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--borda); display: grid; gap: 14px; }
.linha-tempo li { position: relative; display: grid; gap: 2px; font-size: 14.5px; }
.linha-tempo li::before { content: ""; position: absolute; left: -22px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 0 3px var(--superficie); }
.linha-tempo li span { font-size: 13px; }
.linha-tempo li p { color: var(--texto-2); font-size: 14px; line-height: 1.5; }
.equipe-mini { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.equipe-mini-item { flex: none; display: grid; justify-items: center; gap: 6px; width: 72px; border: 0; background: none; color: var(--texto-2); font-size: 13px; font-weight: 600; }

/* ---------- Relatórios ---------- */
.relatorio-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 8px; }
.relatorio-tipo {
  display: flex; align-items: center; gap: 12px; padding: 12px; text-align: left; border: 1px solid var(--borda); border-radius: var(--r4);
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); transition: border-color var(--t1);
}
.relatorio-tipo:hover { border-color: var(--borda-forte); }
.relatorio-tipo.ativo { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); background: var(--marca-suave); }
.relatorio-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r3); background: var(--superficie-2); color: var(--marca); }
.relatorio-tipo.ativo .relatorio-ic { background: var(--superficie); }
.relatorio-texto { display: grid; gap: 2px; min-width: 0; }
.relatorio-texto strong { font-weight: 600; font-size: 14.5px; }
.relatorio-texto span { font-size: 12.5px; color: var(--texto-3); }
.relatorio-gerar { margin-top: 24px; padding: 18px; border-radius: var(--r5); background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-1); }
.relatorio-datas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.relatorio-datas .campo { margin-bottom: 0; }
.relatorio-botoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.relatorio-botoes .botao { flex: 1 1 160px; }
.entrar-acoes { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.link-perigo { color: var(--vermelho); }
.apresentacao { display: grid; justify-items: start; gap: 14px; color: var(--texto-2); line-height: 1.55; }
.apresentacao-foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: var(--sombra-2); }
@media (max-width: 480px) {
  .agenda-dia-cfg { flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 0; }
  .agenda-dia-horas { padding-left: 28px; }
}

/* ---------- Compartilhar: comprar mais acessos (Stripe) ---------- */
.compra-acessos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--marca); background: var(--marca-suave); }
.compra-acessos-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r4); background: var(--superficie); color: var(--marca); }
.compra-acessos-texto { flex: 1 1 220px; display: grid; gap: 3px; min-width: 0; }
.compra-acessos-texto strong { font-size: 15.5px; }
.compra-acessos-texto span { font-size: 13.5px; color: var(--texto-2); line-height: 1.45; }
@media (max-width: 480px) { .compra-acessos .botao { flex: 1 1 100%; } }

/* formulário só de consulta (somente leitura): o fieldset desabilita os campos sem mudar o desenho */
.form-leitura { border: 0; padding: 0; margin: 0; min-width: 0; }

/* gráficos de categoria clicáveis (Relatórios): cada item abre os lançamentos dele */
button.legenda-item.clicavel, button.barra-h.clicavel { border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--r2); }
button.legenda-item.clicavel { width: calc(100% + 12px); padding: 4px 6px; margin: 0 -6px; }
button.legenda-item.clicavel:hover, button.barra-h.clicavel:hover { background: var(--superficie-2); }
button.barra-h.clicavel { display: block; padding: 4px 6px; margin: 0 -6px; width: calc(100% + 12px); }

/* compra de acessos adicionais: quantidade (− N +), total e o botão */
.compra-acessos-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.qtd-seletor { display: inline-flex; align-items: center; gap: 6px; padding: 3px; border: 1px solid var(--borda); border-radius: var(--r3); background: var(--superficie); }
.qtd-seletor .botao-icone { width: 32px; height: 32px; }
.qtd-valor { min-width: 84px; text-align: center; font-size: 14px; color: var(--texto-2); }
.qtd-valor strong { font-size: 16px; color: var(--texto); }
.qtd-total { font-size: 14px; color: var(--texto-2); font-weight: 600; }

/* subcategorias: recuadas abaixo da categoria mãe; no seletor, o nome da mãe em cima */
.linha.linha-subcat { padding-left: 34px; }
.linha.linha-subcat::before { content: "↳"; position: absolute; left: 14px; color: var(--texto-3); font-size: 15px; }
.linha.linha-subcat { position: relative; }
.cat-item .cat-mae { display: block; font-size: 11px; color: var(--texto-3); line-height: 1.1; }