/* Inove Finanças — estilos */
/* ---------- Cores base (modo claro) ---------- */
:root {
  --bg: #f5f5f4;
  --superficie: #ffffff;
  --superficie-2: #f8f8f7;
  --borda: #e5e4e2;
  --texto: #1c1917;
  --texto-2: #5c5752;
  --pos: #0f8a4f;
  --pos-bg: #e6f5ec;
  --neg: #c4321f;
  --neg-bg: #fdecea;
  --aviso: #a3660a;
  --aviso-bg: #fff4e0;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;

  /* Paleta padrão: LARANJA e PRETO (identidade Inove) */
  --primaria: #ea580c;
  --primaria-hover: #c2410c;
  --primaria-claro: #fb923c;
  --primaria-suave: #fff1e6;
  --link: #c2410c;
  --lateral: #0b0b0c;
  --lateral-texto: #b9b4ae;
  --lateral-ativo: #24150a;
}

/* ---------- Paletas opcionais (botão 🎨 no topo) ---------- */
:root.tema-azul    { --primaria: #1d5fd1; --primaria-hover: #174ea9; --primaria-claro: #6a9ff7; --primaria-suave: #e8f0fd; --link: #1d5fd1; --lateral: #0f1b2d; --lateral-texto: #b9c3d3; --lateral-ativo: #1e3a5f; }
:root.tema-verde   { --primaria: #0f7a55; --primaria-hover: #0b6045; --primaria-claro: #3fcf95; --primaria-suave: #e4f5ee; --link: #0b7a54; --lateral: #0c1f17; --lateral-texto: #b3c9bf; --lateral-ativo: #163a2b; }
:root.tema-roxo    { --primaria: #6d3fd6; --primaria-hover: #5a2fbf; --primaria-claro: #a78bfa; --primaria-suave: #f0eafd; --link: #6d3fd6; --lateral: #17112b; --lateral-texto: #c3bbd9; --lateral-ativo: #2c2150; }
:root.tema-vinho   { --primaria: #b4233c; --primaria-hover: #931b30; --primaria-claro: #f0788c; --primaria-suave: #fcebee; --link: #b4233c; --lateral: #1f0d12; --lateral-texto: #d1b9bf; --lateral-ativo: #3b1620; }
:root.tema-grafite { --primaria: #374151; --primaria-hover: #1f2937; --primaria-claro: #9ca3af; --primaria-suave: #eef0f3; --link: #374151; --lateral: #111827; --lateral-texto: #c0c6d0; --lateral-ativo: #1f2937; }
:root.tema-turquesa { --primaria: #0e7490; --primaria-hover: #155e75; --primaria-claro: #22d3ee; --primaria-suave: #e3f6fa; --link: #0e7490; --lateral: #082f37; --lateral-texto: #b2d3da; --lateral-ativo: #0e4a57; }

/* ---------- Modo escuro: automático (sistema) ou forçado ---------- */
@media (prefers-color-scheme: dark) {
  :root:not(.modo-claro) {
    --bg: #0c0c0d; --superficie: #161616; --superficie-2: #1d1d1e; --borda: #2c2b2a;
    --texto: #ece9e6; --texto-2: #a29d97; --lateral: #000;
    --pos: #3fbf7f; --pos-bg: #13301f; --neg: #f07060; --neg-bg: #3a1a16; --aviso: #e0a84a; --aviso-bg: #3a2a10;
    --link: var(--primaria-claro); --primaria-suave: rgba(255, 255, 255, .06);
    color-scheme: dark;
  }
}
:root.modo-escuro {
  --bg: #0c0c0d; --superficie: #161616; --superficie-2: #1d1d1e; --borda: #2c2b2a;
  --texto: #ece9e6; --texto-2: #a29d97; --lateral: #000;
  --pos: #3fbf7f; --pos-bg: #13301f; --neg: #f07060; --neg-bg: #3a1a16; --aviso: #e0a84a; --aviso-bg: #3a2a10;
  --link: var(--primaria-claro); --primaria-suave: rgba(255, 255, 255, .06);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 16px; }
/* Tamanho de letra escolhido pelo usuário (botões A− A A+) */
html.fontem2 { font-size: 13px; }
html.fontem1 { font-size: 14.5px; }
html.fontep1 { font-size: 17.5px; }
html.fontep2 { font-size: 19px; }
html.fontep3 { font-size: 21px; }
html.fontep4 { font-size: 23px; }
body { margin: 0; font-family: var(--fonte); font-size: .9375rem; line-height: 1.5; color: var(--texto); background: var(--bg); }
[hidden] { display: none !important; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2 { margin: 0; line-height: 1.25; }
h1 { font-size: 1.35rem; font-weight: 650; }
h2 { font-size: 1rem; font-weight: 650; margin-bottom: .75rem; }
code { font-family: var(--mono); font-size: .85em; }

/* Estrutura */
.app { display: flex; min-height: 100vh; }
.lateral { width: 240px; flex-shrink: 0; background: var(--lateral); color: var(--lateral-texto); padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; transition: width .2s ease; }
.lateral nav { flex: 1; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; padding: 4px 8px 18px; }
.logo { display: block; width: 38px; height: auto; flex-shrink: 0; }
.marca-nome { line-height: 1.1; font-size: 1.05rem; letter-spacing: .01em; }
.marca-nome b { color: #ff7a1a; font-weight: 800; }
.marca-nome span { font-weight: 500; }
.logo-completo { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.banner-logo { background: transparent; padding: 4px 0 6px; margin-bottom: 14px; text-align: center; }
.banner-logo .marca-nome { color: var(--texto); display: inline-block; margin-top: 8px; font-size: 1.15rem; }
.banner-logo .marca-nome b { color: var(--primaria); }
/* Logo com texto escuro no tema claro e texto branco no tema escuro */
.logo-escuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not(.modo-claro) .logo-claro { display: none; } :root:not(.modo-claro) .logo-escuro { display: block; } }
:root.modo-escuro .logo-claro { display: none; }
:root.modo-escuro .logo-escuro { display: block; }
.lateral nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--lateral-texto); font-size: .93rem; }
.lateral nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.lateral nav a.ativo { background: var(--lateral-ativo); color: #fff; box-shadow: inset 3px 0 0 var(--primaria); }
.lateral svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.badge { margin-left: auto; background: var(--neg); color: #fff; border-radius: 999px; font-size: .72rem; padding: 1px 7px; font-weight: 700; }
.nav-sep { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #6c7a90; padding: 18px 10px 6px; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topo { display: flex; align-items: center; gap: 14px; padding: 14px 28px; background: var(--superficie); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5; }
.topo h1 { flex: 1; }
.usuario { display: flex; align-items: center; gap: 10px; }
.perfil-link { display: flex; align-items: center; gap: 8px; color: var(--texto); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primaria); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.btn-menu { display: grid; place-items: center; width: 36px; height: 36px; margin-left: -6px; background: none; border: 0; border-radius: 8px; color: var(--texto); cursor: pointer; flex-shrink: 0; }
.btn-menu:hover { background: var(--superficie-2); }
.btn-menu svg, .recolher svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.recolher { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 9px 10px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .05); color: var(--lateral-texto); font: inherit; font-size: .88rem; cursor: pointer; }
.recolher:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.recolher svg { width: 18px; height: 18px; transition: transform .2s; flex-shrink: 0; }
.lateral nav a { position: relative; white-space: nowrap; }
.rotulo { overflow: hidden; text-overflow: ellipsis; }
/* Menu recolhido: só os ícones (computador) */
@media (min-width: 761px) {
  html.menu-recolhido .lateral { width: 72px; padding-left: 10px; padding-right: 10px; }
  html.menu-recolhido .lateral .rotulo { display: none; }
  html.menu-recolhido .marca { justify-content: center; padding-left: 0; padding-right: 0; }
  html.menu-recolhido .lateral nav a, html.menu-recolhido .recolher { justify-content: center; padding-left: 0; padding-right: 0; }
  html.menu-recolhido .nav-sep { padding: 0; margin: 12px 8px; height: 1px; background: rgba(255, 255, 255, .12); }
  html.menu-recolhido .lateral .badge { position: absolute; top: 3px; right: 6px; margin: 0; padding: 0 5px; font-size: .62rem; }
  html.menu-recolhido .recolher svg { transform: rotate(180deg); }
  html.menu-recolhido .nav-instalar { border-style: dashed; }
}
.conteudo { padding: 24px 28px 48px; max-width: 1280px; width: 100%; }

/* Cartões e grades */
.card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 20px; box-shadow: var(--sombra); margin-bottom: 18px; }
.card-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.card-topo h2 { margin: 0; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards .card { margin: 0; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.grade-detalhe { grid-template-columns: 1.3fr 1fr; }
.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi-link { color: inherit; }
.kpi-link:hover { text-decoration: none; border-color: var(--primaria); }
.kpi-rotulo { font-size: .8rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.kpi-valor { font-size: 1.55rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi-sub { font-size: .82rem; color: var(--texto-2); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.muted { color: var(--texto-2); }
.pequeno { font-size: .82rem; }
.vazio { color: var(--texto-2); text-align: center; padding: 24px; }
.centro { text-align: center; }

.faixa-alerta { display: flex; gap: 8px; align-items: center; background: var(--neg-bg); color: var(--neg); border: 1px solid var(--neg); border-radius: var(--raio); padding: 12px 16px; margin-bottom: 18px; }
.faixa-alerta span { margin-left: auto; font-weight: 600; }
.faixa-alerta:hover { text-decoration: none; filter: brightness(.98); }

/* Tabelas */
.tabela-wrap { overflow-x: auto; margin: 0 -4px; }
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover td { background: var(--superficie-2); }
.tabela-compacta td { padding: 6px 8px; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-saldo td { background: var(--superficie-2); font-weight: 600; }
.linha-alerta td { background: var(--neg-bg); }
.inativa { opacity: .55; }
.col-data { width: 110px; white-space: nowrap; }
.acoes-linha { white-space: nowrap; text-align: right; }
.acoes-linha > * { margin-left: 10px; }
.acoes-linha form { display: inline; }
.detalhes-json { max-width: 320px; overflow-wrap: anywhere; font-family: var(--mono); font-size: .75rem; }

/* Etiquetas */
.tag { display: inline-block; font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-2); white-space: nowrap; }
.tag-ok, .tag-entrada { background: var(--pos-bg); color: var(--pos); border-color: transparent; }
.tag-alerta, .tag-saida { background: var(--neg-bg); color: var(--neg); border-color: transparent; }
.tag-aviso { background: var(--aviso-bg); color: var(--aviso); border-color: transparent; }
.contador { font-size: .78rem; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 999px; padding: 0 8px; margin-left: 6px; color: var(--texto-2); }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600; font-size: .9rem; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); cursor: pointer; white-space: nowrap; }
.btn:hover { text-decoration: none; background: var(--superficie-2); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn-primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.btn-primario:hover { background: var(--primaria-hover); }
.btn-perigo { background: var(--neg); border-color: var(--neg); color: #fff; }
.btn-ghost { background: transparent; }
.btn-sm { padding: 5px 10px; font-size: .82rem; }
.btn-bloco { width: 100%; }
.link, .link-perigo { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; }
.link-perigo { color: var(--neg); }
.link:hover, .link-perigo:hover { text-decoration: underline; }
.botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.botoes form { display: inline; }

/* Formulários */
.form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.form-largo { max-width: 860px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.campos .largo { grid-column: 1 / -1; }
label { display: flex; flex-direction: column; gap: 5px; font-size: .86rem; font-weight: 600; color: var(--texto); }
input, select, textarea { font: inherit; font-size: .95rem; font-weight: 400; padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto); width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primaria); outline-offset: -1px; border-color: var(--primaria); }
label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
label.check input { width: auto; }
.ajuda { font-size: .8rem; font-weight: 400; color: var(--texto-2); margin: 0; }
.form-acoes { display: flex; justify-content: flex-end; gap: 10px; padding-top: 6px; }
.form-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.form-inline input { width: auto; flex: 1; min-width: 160px; }
.cadeado { font-size: .75rem; }
.isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.codigo-2fa { font-family: var(--mono); font-size: 1.4rem; letter-spacing: .3em; text-align: center; }

.seletor-tipo { display: flex; gap: 10px; }
.seletor-tipo label { flex: 1; }
.seletor-tipo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seletor-tipo span { display: block; text-align: center; padding: 10px; border: 1px solid var(--borda); border-radius: 8px; cursor: pointer; font-weight: 600; }
.seletor-tipo input:checked + .opt-entrada { background: var(--pos-bg); color: var(--pos); border-color: var(--pos); }
.seletor-tipo input:checked + .opt-saida { background: var(--neg-bg); color: var(--neg); border-color: var(--neg); }
.seletor-tipo input:focus-visible + span { outline: 2px solid var(--primaria); }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filtros label { font-size: .75rem; color: var(--texto-2); }
.filtros input, .filtros select { padding: 7px 9px; font-size: .88rem; width: auto; }
.acoes-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.acoes-topo p { margin: 0; max-width: 640px; }

.forca { height: 5px; background: var(--borda); border-radius: 3px; overflow: hidden; margin-top: -8px; }
.forca span { display: block; height: 100%; width: 0; transition: width .2s; }
.forca .n1 { width: 20%; background: var(--neg); }
.forca .n2 { width: 40%; background: var(--neg); }
.forca .n3 { width: 60%; background: var(--aviso); }
.forca .n4 { width: 80%; background: var(--pos); }
.forca .n5 { width: 100%; background: var(--pos); }

/* Mensagens */
.alerta { padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; font-size: .92rem; border: 1px solid transparent; }
.alerta-ok { background: var(--pos-bg); color: var(--pos); }
.alerta-erro { background: var(--neg-bg); color: var(--neg); }
.alerta-aviso { background: var(--aviso-bg); color: var(--aviso); }

/* Listas */
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--borda); font-variant-numeric: tabular-nums; }
.lista-simples li:last-child { border-bottom: 0; }
.historico { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.historico li { padding: 6px 0; border-bottom: 1px dashed var(--borda); }
.lista-alertas { list-style: none; padding: 0; margin: 0; }
.lista-alertas li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.lista-alertas li:last-child { border-bottom: 0; }
.lista-alertas a { display: flex; gap: 8px; align-items: center; color: var(--texto); flex-wrap: wrap; }
.alerta-info { font-size: .88rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.grupo-vencido { border-left: 4px solid var(--neg); }
.grupo-hoje { border-left: 4px solid var(--aviso); }

.detalhes { display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; margin: 0 0 18px; font-size: .92rem; }
.detalhes dt { color: var(--texto-2); }
.detalhes dd { margin: 0; }
.detalhes .destaque { font-size: 1.25rem; font-weight: 700; }
.pre { white-space: pre-wrap; }

/* Contas correntes */
.grade-contas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.grade-contas .card { margin: 0; }
.conta-topo { display: flex; justify-content: space-between; gap: 8px; }
.conta-saldo { font-size: 1.5rem; font-weight: 700; margin: 14px 0; font-variant-numeric: tabular-nums; }
.conta-acoes { display: flex; gap: 8px; }
.extrato-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }

/* Gráfico */
.grafico { width: 100%; height: auto; }
.barra-entrada { fill: var(--pos); }
.barra-saida { fill: var(--neg); opacity: .85; }
.eixo { fill: var(--texto-2); font-size: 12px; }
.linha-base { stroke: var(--borda); }
.legenda { display: flex; gap: 16px; font-size: .82rem; color: var(--texto-2); }
.legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.leg-entrada::before { background: var(--pos); }
.leg-saida::before { background: var(--neg); }

.abas { display: flex; gap: 4px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 9px; padding: 3px; }
.abas a { padding: 6px 14px; border-radius: 7px; color: var(--texto-2); font-weight: 600; font-size: .88rem; }
.abas a.ativo { background: var(--primaria); color: #fff; }
.abas a:hover { text-decoration: none; }
.paginacao { display: flex; justify-content: center; gap: 18px; padding-top: 14px; font-size: .9rem; }

/* 2FA */
.passos { padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.qr-area { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.qr img { display: block; border-radius: 8px; background: #fff; padding: 6px; image-rendering: pixelated; }
.chave-2fa { display: inline-block; font-size: 1.05rem; background: var(--superficie-2); border: 1px solid var(--borda); padding: 8px 12px; border-radius: 8px; letter-spacing: .05em; user-select: all; }

/* Telas de login e erro */
.tela-auth { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 20% 0%, rgba(234, 88, 12, .14), transparent 50%), var(--bg); }
.auth-caixa { width: 100%; max-width: 400px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 30px; box-shadow: 0 10px 40px rgba(16, 24, 40, .08); }
.auth-caixa .form { max-width: none; }
.marca-auth { color: var(--texto); justify-content: center; padding-bottom: 20px; }
.rodape-auth { text-align: center; font-size: .78rem; color: var(--texto-2); margin: 20px 0 0; }
.erro-codigo { font-size: 3rem; font-weight: 800; margin: 0; color: var(--primaria); }
.erro-detalhe { text-align: left; font-size: .8rem; background: var(--superficie-2); padding: 10px; border-radius: 8px; overflow-x: auto; }

/* ===== Novos recursos ===== */
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 12px; top: 12px; z-index: 100; background: var(--superficie); padding: 8px 12px; border-radius: 8px; }
.espaco-topo { margin-top: 14px; }
form.inline { display: inline; }
.controle-fonte { display: flex; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
.controle-fonte button { background: var(--superficie); border: 0; border-right: 1px solid var(--borda); color: var(--texto); font: inherit; font-weight: 700; font-size: .8rem; padding: 6px 9px; cursor: pointer; min-width: 34px; }
.controle-fonte button:last-child { border-right: 0; font-size: .95rem; }
.controle-fonte button:first-child { font-size: .7rem; }
.controle-fonte button:hover { background: var(--superficie-2); }
.sino { position: relative; color: var(--texto); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; }
.sino:hover { background: var(--superficie-2); }
.sino svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.badge-sino { position: absolute; top: -2px; right: -4px; margin: 0; }

/* Botão flutuante de voz */
.fab-voz { position: fixed; right: 22px; bottom: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 30; width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer; background: var(--primaria); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 4px var(--primaria-suave); display: grid; place-items: center; transition: transform .15s; }
.fab-voz:hover { transform: scale(1.06); }
.fab-voz:focus-visible { outline: 3px solid var(--primaria-claro); outline-offset: 3px; }
.fab-voz svg, .mic-grande svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.janela-voz { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); border: 1px solid var(--borda); border-radius: 16px; padding: 20px; background: var(--superficie); color: var(--texto); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.janela-voz::backdrop { background: rgba(10, 15, 25, .55); }
.janela-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.janela-topo h2 { margin: 0; }
.fechar { background: none; border: 0; font-size: 1.2rem; cursor: pointer; color: var(--texto-2); padding: 6px; }
.voz-etapa { display: flex; flex-direction: column; gap: 12px; }
.mic-grande { align-self: center; width: 92px; height: 92px; border-radius: 50%; border: 0; background: var(--primaria); color: #fff; cursor: pointer; display: grid; place-items: center; margin: 6px 0; }
.mic-grande svg { width: 40px; height: 40px; }
.mic-grande.ouvindo { background: var(--neg); animation: pulso 1.2s infinite; }
.mic-grande.indisponivel { background: var(--borda); color: var(--texto-2); }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(196, 50, 31, .5); } 70% { box-shadow: 0 0 0 22px rgba(196, 50, 31, 0); } 100% { box-shadow: 0 0 0 0 rgba(196, 50, 31, 0); } }
.voz-status { text-align: center; margin: 0; font-weight: 600; }
.voz-exemplos { margin: 0; padding-left: 18px; color: var(--texto-2); font-size: .85rem; }
.janela-voz .form { max-width: none; }
.janela-voz .campos { grid-template-columns: 1fr 1fr; }
@media (prefers-reduced-motion: reduce) { .mic-grande.ouvindo { animation: none; } .fab-voz { transition: none; } }

/* Avisos rápidos */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 40; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 24px)); }
.toast { display: block; background: #1b2230; color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); transition: opacity .6s; }
.toast:hover { text-decoration: none; }
.toast.sumindo { opacity: 0; }

/* Login alternativo */
.btn-bio { background: var(--lateral); border-color: var(--lateral); color: #fff; padding: 11px 14px; }
.btn-bio:hover { background: var(--lateral-ativo); }
.btn-bio svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.btn-google svg { width: 18px; height: 18px; }
.btn-google:hover { background: #f7f8f8; }
.divisor { display: flex; align-items: center; gap: 10px; color: var(--texto-2); font-size: .8rem; }
.divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: var(--borda); }

/* Instalador */
.instalador { width: 100%; max-width: 820px; }
.instalador .card { margin-bottom: 16px; }
.requisitos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: .9rem; }
.requisitos li span { display: inline-block; width: 22px; font-weight: 800; }
.req-ok span { color: var(--pos); }
.req-erro { color: var(--neg); font-weight: 600; }
.req-aviso span { color: var(--aviso); }
.btn-grande { padding: 14px; font-size: 1.05rem; }
.bloco-codigo { background: var(--superficie-2); border: 1px solid var(--borda); padding: 12px; border-radius: 8px; overflow-x: auto; font-size: .8rem; }
.chave-longa { display: block; overflow-wrap: anywhere; font-size: .85rem; margin-top: 4px; }
summary { cursor: pointer; }

/* Relatórios */
.filtros-relatorio { display: flex; }
.grafico-rolagem { overflow-x: auto; }
.lista-ranking { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ranking-topo { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.barra-pct { display: block; width: 100%; height: 6px; margin-top: 4px; }
.barra-fundo { fill: var(--superficie-2); stroke: none; }
.lista-maiores { padding-left: 20px; margin: 0; font-size: .9rem; }
.lista-maiores li { padding: 5px 0; border-bottom: 1px dashed var(--borda); }
.lista-maiores li span { margin-right: 8px; }
.lista-maiores li strong { float: right; font-variant-numeric: tabular-nums; }

/* Investimentos e metas */
.campos-4 { grid-template-columns: repeat(4, 1fr); }
.resultado-sim { font-size: 1.05rem; font-weight: 600; color: var(--pos); margin: 0; }
.grade-metas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.meta { border: 1px solid var(--borda); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.meta-valores { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 1.1rem; }
.barra-meta { height: 8px; }
.barra-meta-cor { fill: var(--primaria); }

/* Seletor de paleta de cores */
.paleta { position: relative; }
.paleta > summary { list-style: none; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--borda); font-size: 1rem; }
.paleta > summary::-webkit-details-marker { display: none; }
.paleta[open] > summary { background: var(--superficie-2); }
.paleta-painel { position: absolute; right: 0; top: 44px; z-index: 25; width: 250px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); padding: 14px; }
.paleta-painel h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); margin: 0 0 8px; }
.amostras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.amostra { border: 2px solid transparent; border-radius: 10px; padding: 3px; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; font: inherit; font-size: .68rem; color: var(--texto-2); }
.amostra i { display: block; width: 34px; height: 34px; border-radius: 50%; }
.amostra[aria-pressed="true"] { border-color: var(--primaria); color: var(--texto); }
.cor-laranja { background: linear-gradient(135deg, #ff8a1f 50%, #0b0b0c 50%); }
.cor-azul { background: linear-gradient(135deg, #1d5fd1 50%, #0f1b2d 50%); }
.cor-verde { background: linear-gradient(135deg, #0f7a55 50%, #0c1f17 50%); }
.cor-roxo { background: linear-gradient(135deg, #6d3fd6 50%, #17112b 50%); }
.cor-vinho { background: linear-gradient(135deg, #b4233c 50%, #1f0d12 50%); }
.cor-grafite { background: linear-gradient(135deg, #6b7280 50%, #111827 50%); }
.cor-turquesa { background: linear-gradient(135deg, #0e7490 50%, #082f37 50%); }
.modos { display: flex; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
.modos button { flex: 1; border: 0; background: var(--superficie); color: var(--texto); font: inherit; font-size: .8rem; padding: 7px 4px; cursor: pointer; border-right: 1px solid var(--borda); }
.modos button:last-child { border-right: 0; }
.modos button[aria-pressed="true"] { background: var(--primaria); color: #fff; font-weight: 700; }

/* Seletor de empresa / pessoa (PJ / PF) */
.seletor-entidade { position: relative; min-width: 0; }
.seletor-entidade > summary { list-style: none; display: flex; align-items: center; gap: 7px; max-width: 280px; padding: 5px 10px 5px 6px; border: 1px solid var(--borda); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .88rem; background: var(--superficie); }
.seletor-entidade > summary::-webkit-details-marker { display: none; }
.seletor-entidade > summary:hover, .seletor-entidade[open] > summary { border-color: var(--primaria); }
.ent-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ent-tipo { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 5px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .03em; color: #fff; flex-shrink: 0; }
.ent-pj { background: var(--primaria); }
.ent-pf { background: #2563eb; }
.seletor-painel { position: absolute; left: 0; top: 44px; z-index: 26; width: 280px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); padding: 12px; }
.seletor-painel h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); margin: 0 0 8px; }
.ent-opcao { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 8px; border: 0; border-radius: 8px; background: none; color: var(--texto); font: inherit; font-size: .92rem; text-align: left; cursor: pointer; }
.ent-opcao:hover { background: var(--superficie-2); }
.ent-opcao.atual { background: var(--primaria-suave); font-weight: 700; }
.ent-acoes { display: flex; flex-wrap: wrap; gap: 6px 14px; border-top: 1px solid var(--borda); margin-top: 8px; padding-top: 10px; font-size: .85rem; }
.acessos { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.acessos legend { font-weight: 700; font-size: .9rem; padding: 0 6px; }
.so-celular { display: none; }
.opcao-pendente { align-items: flex-start; padding: 10px 12px; border: 1px dashed var(--borda); border-radius: 10px; }
.opcao-pendente input { margin-top: 4px; }
/* Botão ✓ de confirmação rápida */
.btn-confirmar { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 7px; border-radius: 999px; border: 1px solid currentColor; background: transparent; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.btn-confirmar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.confirmar-pagar { color: var(--neg); }
.confirmar-receber { color: var(--pos); }
.btn-confirmar:hover { color: #fff; }
.confirmar-pagar:hover { background: var(--neg); border-color: var(--neg); }
.confirmar-receber:hover { background: var(--pos); border-color: var(--pos); }
.aguardando .tabela td { vertical-align: middle; }

/* Nova categoria no lançamento */
.nova-categoria { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border: 1px dashed var(--primaria); border-radius: 8px; background: var(--primaria-suave); }
.nova-categoria input { flex: 1; min-width: 160px; width: auto; }
.nova-categoria .ajuda { flex-basis: 100%; }
.nova-categoria .ajuda:empty { display: none; }

/* Financiamentos */
.seletor-modalidade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seletor-modalidade input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seletor-modalidade span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 10px; cursor: pointer; }
.seletor-modalidade small { color: var(--texto-2); font-weight: 400; font-size: .8rem; }
.seletor-modalidade input:checked + span { border-color: var(--primaria); background: var(--primaria-suave); box-shadow: inset 0 0 0 1px var(--primaria); }
.seletor-modalidade input:focus-visible + span { outline: 2px solid var(--primaria); }
.campos-financiamento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; padding: 14px; border: 1px dashed var(--primaria); border-radius: 10px; background: var(--primaria-suave); }
.resumo-financiamento { margin: 0; font-weight: 600; font-size: .9rem; }
.resumo-financiamento:empty { display: none; }
.lista-financiamentos { display: flex; flex-direction: column; gap: 14px; }
.financiamento { border: 1px solid var(--borda); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.fin-numeros { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.fin-saldo { margin-left: auto; }

/* Cadastre-se */
.cadastre-se { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--borda); }

/* App instalável */
.banner-instalar { display: flex; align-items: center; gap: 12px; background: var(--superficie); border: 1px solid var(--primaria); border-radius: var(--raio); padding: 10px 12px; margin-bottom: 16px; box-shadow: var(--sombra); }
.banner-instalar img { border-radius: 10px; flex-shrink: 0; }
.banner-texto { flex: 1; display: flex; flex-direction: column; font-size: .88rem; min-width: 0; }
.banner-texto span { color: var(--texto-2); font-size: .82rem; }
.nav-instalar { margin-top: 14px; border: 1px dashed rgba(255, 255, 255, .18); }
.instalar-app { max-width: 760px; }
.instalar-topo { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.instalar-topo h2 { margin-bottom: 4px; }
.icone-app { border-radius: 16px; flex-shrink: 0; }
.passos-instalar { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.passos-instalar section { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 16px; }
.passos-instalar section.plataforma-atual { border-color: var(--primaria); background: var(--primaria-suave); }
.passos-instalar h3, .dicas-app h3 { font-size: .95rem; margin: 0 0 8px; }
.icone-ios { display: inline-block; border: 1px solid var(--borda); border-radius: 4px; padding: 0 4px; }
.dicas-app ul { padding-left: 18px; margin: 0; color: var(--texto-2); font-size: .9rem; }
.auth-caixa .instalar-app { box-shadow: none; border: 0; padding: 0; }
.tela-auth .auth-caixa:has(.instalar-app) { max-width: 640px; }
/* Em tela cheia (app instalado) respeita o entalhe/câmera do celular */
.modo-app .topo { padding-top: max(14px, env(safe-area-inset-top)); }
.modo-app .lateral { padding-top: max(18px, env(safe-area-inset-top)); }

/* Celular / tablet */
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .campos-4 { grid-template-columns: 1fr 1fr; }
  .grade-2, .grade-detalhe { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .lateral { position: fixed; left: 0; top: 0; z-index: 20; width: min(280px, 84vw); transform: translateX(-100%); transition: transform .2s; visibility: hidden; }
  .recolher { display: none; }
  .menu-fundo { position: fixed; inset: 0; z-index: 19; background: rgba(0, 0, 0, .5); }
  body.sem-rolagem { overflow: hidden; }
  .lateral.aberto { transform: none; visibility: visible; box-shadow: 4px 0 20px rgba(0, 0, 0, .25); }
  .topo { padding: 12px 16px; }
  .nome-usuario { display: none; }
  .conteudo { padding: 16px 16px 40px; }
  .cards, .cards-3 { grid-template-columns: 1fr; }
  .campos { grid-template-columns: 1fr; }
  .detalhes { grid-template-columns: 110px 1fr; }
  .kpi-valor { font-size: 1.35rem; }
  .filtros { width: 100%; }
  .controle-fonte button { padding: 6px 7px; min-width: 30px; }
  .controle-fonte { display: none; }
  .so-celular { display: flex; }
  h3.so-celular { display: block; margin-top: 12px; }
  .topo h1 { display: none; }
  .seletor-entidade { flex: 1; }
  .seletor-entidade > summary { max-width: 100%; }
  .seletor-painel { position: fixed; left: 12px; right: 12px; top: 58px; width: auto; }
  .paleta > summary, .sino { width: 32px; height: 32px; }
  .paleta-painel { position: fixed; left: 12px; right: 12px; top: 58px; width: auto; }
  .usuario { gap: 6px; }
  .usuario .btn-sm { padding: 5px 8px; }
  .banner-instalar { flex-wrap: wrap; }
  .banner-texto { flex-basis: calc(100% - 90px); }
  .topo { gap: 8px; }
  .topo h1 { font-size: 1.05rem; }
  .campos-4, .requisitos, .janela-voz .campos, .campos-financiamento, .seletor-modalidade { grid-template-columns: 1fr; }
  .fin-saldo { margin-left: 0; }
  .fab-voz { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media print {
  .lateral, .topo, .filtros, .botoes, .acoes-linha, .btn, .fab-voz, .toasts { display: none !important; }
  .card { box-shadow: none; border-color: #ccc; }
}
.centro .logo { margin: 0 auto 6px; width: 56px; }
a.marca:hover { text-decoration: none; }
.campos > .nova-categoria { grid-column: 1 / -1; }

/* ---------- Painel com gráficos ---------- */
.filtros-painel { margin-bottom: 18px; }
.filtros-painel .campo { margin: 0; }
.filtros-painel .periodo-txt { flex-basis: 100%; margin: 2px 0 0; }
.filtros-painel [hidden] { display: none !important; }
.principal, .conteudo, .grade-graficos > * { min-width: 0; }
.cards-painel { grid-template-columns: repeat(3, 1fr); }
.grade-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; align-items: start; }
.grade-graficos .grade-larga { grid-column: 1 / -1; }
.grafico-card { margin: 0; }
.grafico-card figcaption { margin-bottom: 8px; }
.grafico-area { position: relative; height: 260px; }
.grade-larga .grafico-area { height: 300px; }
.grafico-h-3, .grafico-h-4 { height: 200px; }
.grafico-h-5, .grafico-h-6 { height: 240px; }
.grafico-h-7, .grafico-h-8 { height: 300px; }
.tabela-grafico { margin-top: 10px; font-size: .85rem; }
.tabela-grafico summary { cursor: pointer; color: var(--texto-2); }
.acoes-linha { text-align: right; white-space: nowrap; }
@media (max-width: 760px) {
  .grade-graficos { grid-template-columns: 1fr; }
  .cards-painel { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cards-painel .kpi-valor { font-size: 1.15rem; }
  .grafico-area, .grade-larga .grafico-area { height: 240px; }
  .filtros-painel .campo { flex: 1 1 140px; }
  .filtros-painel select, .filtros-painel input { width: 100%; }
}

/* ---------- Celular: tela travada (sem zoom), proporção fixa ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
body { overflow-x: hidden; }
@media (max-width: 760px) {
  /* iPhone dá zoom automático em campos com letra menor que 16px: evita */
  input, select, textarea, .filtros input, .filtros select { font-size: max(16px, 1rem); }
}

/* ---------- Seleção em massa ---------- */
.col-sel { width: 36px; padding-right: 0 !important; }
.col-sel .sel { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px 0; cursor: pointer; }
.col-sel input { width: 18px; height: 18px; accent-color: var(--primaria); cursor: pointer; margin: 0; }
.tabela tr.selecionada td { background: var(--primaria-suave); }
.barra-massa { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: -4px 0 12px; padding: 10px 14px; border: 1px solid var(--primaria); border-radius: 10px; background: var(--superficie); box-shadow: var(--sombra); }
.barra-massa[hidden] { display: none; }
.barra-massa .botoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.massa-opcao { display: inline-flex !important; flex-direction: row !important; gap: 8px; align-items: center; margin: 0; font-size: .85rem; color: var(--texto-2); }
.massa-opcao input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--primaria); }
.btn-link { background: none; border: 0; color: var(--link); cursor: pointer; font: inherit; font-size: .88rem; padding: 4px; }
@media (max-width: 760px) {
  /* No celular a barra fica presa no rodapé, acima do botão de voz */
  .barra-massa { position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto; margin: 0; z-index: 60; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
  .barra-massa .botoes { margin-left: 0; width: 100%; }
  .barra-massa .botoes .btn { flex: 1; }
  body.com-barra-massa .botao-voz, body.com-barra-massa [data-voz-abrir] { display: none; }
  body.com-barra-massa .conteudo { padding-bottom: 170px; }
}
.periodo-titulos { display: block; font-weight: 400; margin-top: 2px; }
.total-titulos { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.filtros label[hidden] { display: none !important; }
@media (max-width: 760px) {
  .filtros label[data-so="personalizado"] { flex: 1 1 40%; }
  .filtros label[data-so="personalizado"] input { width: 100%; }
}
.fin-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fin-titulo .sel { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; cursor: pointer; }
.fin-titulo .sel input { width: 18px; height: 18px; accent-color: var(--primaria); margin: 0; }
.fin-titulo .muted { flex-basis: 100%; }
.financiamento.selecionada { background: var(--primaria-suave); border-radius: 8px; }