/* Gestão de Investimentos — folha de estilo.
   Tokens (claro por padrão, escuro via prefers-color-scheme ou data-tema). */

:root {
  --fundo: #f2f4f6;
  --superficie: #ffffff;
  --superficie-2: #e9edf1;
  --superficie-3: #dfe5ea;
  --linha: #d3dae1;
  --linha-forte: #b9c3cc;
  --tinta: #152130;
  --tinta-2: #4a5866;
  --tinta-3: #78858f;
  --acento: #0d6b75;
  --acento-forte: #0a5760;
  --acento-tinta: #ffffff;
  --acento-fraco: rgba(13, 107, 117, 0.10);
  --ok: #1f7a4f;
  --ok-fraco: rgba(31, 122, 79, 0.12);
  --aviso: #9a5a12;
  --aviso-fraco: rgba(154, 90, 18, 0.12);
  --erro: #b23a3a;
  --erro-fraco: rgba(178, 58, 58, 0.10);
  --g-rf: #3f6db3;
  --g-acoes: #2e8b6e;
  --g-fiis: #8a5cb8;
  --g-cripto: #d0862e;
  --g-etfs: #2a96b8;
  --g-outros: #78858f;
  --sombra: 0 1px 2px rgba(21, 33, 48, 0.06);
  --raio-s: 6px;
  --raio-m: 10px;
  --fonte: "IBM Plex Sans", "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --largura: 1240px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0f1519;
    --superficie: #161d23;
    --superficie-2: #1d262e;
    --superficie-3: #26313b;
    --linha: #2a3540;
    --linha-forte: #3b4955;
    --tinta: #e6ebef;
    --tinta-2: #a3aeb8;
    --tinta-3: #73808c;
    --acento: #47b3bf;
    --acento-forte: #6ac7d1;
    --acento-tinta: #0b1a1c;
    --acento-fraco: rgba(71, 179, 191, 0.14);
    --ok: #5cc48f;
    --ok-fraco: rgba(92, 196, 143, 0.14);
    --aviso: #e0a458;
    --aviso-fraco: rgba(224, 164, 88, 0.14);
    --erro: #e5706a;
    --erro-fraco: rgba(229, 112, 106, 0.14);
    --g-rf: #6f97d6;
    --g-acoes: #4fb08f;
    --g-fiis: #b08ad8;
    --g-cripto: #e2a35a;
    --g-etfs: #55b8d6;
    --g-outros: #8d9aa6;
    --sombra: none;
    color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --fundo: #0f1519;
  --superficie: #161d23;
  --superficie-2: #1d262e;
  --superficie-3: #26313b;
  --linha: #2a3540;
  --linha-forte: #3b4955;
  --tinta: #e6ebef;
  --tinta-2: #a3aeb8;
  --tinta-3: #73808c;
  --acento: #47b3bf;
  --acento-forte: #6ac7d1;
  --acento-tinta: #0b1a1c;
  --acento-fraco: rgba(71, 179, 191, 0.14);
  --ok: #5cc48f;
  --ok-fraco: rgba(92, 196, 143, 0.14);
  --aviso: #e0a458;
  --aviso-fraco: rgba(224, 164, 88, 0.14);
  --erro: #e5706a;
  --erro-fraco: rgba(229, 112, 106, 0.14);
  --g-rf: #6f97d6;
  --g-acoes: #4fb08f;
  --g-fiis: #b08ad8;
  --g-cripto: #e2a35a;
  --g-etfs: #55b8d6;
  --g-outros: #8d9aa6;
  --sombra: none;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 17px; }
h3 { font-size: 13px; color: var(--tinta-2); font-weight: 500; margin-bottom: 10px; }
p { margin: 0; }
a { color: var(--acento); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--acento); color: var(--acento-tinta); padding: 8px 12px; border-radius: var(--raio-s); z-index: 100; }
.skip:focus { left: 8px; }
.mono { font-family: var(--mono); font-weight: 500; letter-spacing: 0.01em; }
.num { text-align: right; }
.sub { color: var(--tinta-2); font-size: 13px; }
.rotulo { font-size: 13px; font-weight: 500; color: var(--tinta-2); }
.pos { color: var(--ok); }
.neg { color: var(--erro); }
.aten { color: var(--aviso); }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo-in {
  max-width: var(--largura); margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 24px;
}
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--tinta); text-decoration: none; white-space: nowrap; }
.marca-sinal { width: 10px; height: 10px; border-radius: 2px; background: var(--acento); transform: rotate(45deg); }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a {
  color: var(--tinta-2); text-decoration: none; padding: 6px 10px; border-radius: var(--raio-s); font-weight: 500;
}
.nav a:hover { background: var(--superficie-2); color: var(--tinta); }
.nav a.ativa { color: var(--acento); background: var(--acento-fraco); }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.fonte-status {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px;
  border: 1px solid var(--linha); background: transparent; border-radius: 999px;
  color: var(--tinta-2); font-size: 12.5px; white-space: nowrap;
}
.fonte-status:hover { border-color: var(--linha-forte); color: var(--tinta); }
.pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-3); }
.pulso.ok { background: var(--ok); }
.pulso.aten { background: var(--aviso); }
.pulso.carregando { background: var(--acento); animation: pulsar 1s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: 0.3; } }
.icone {
  width: 34px; height: 34px; display: inline-grid; place-items: center;
  border: 1px solid transparent; background: transparent; border-radius: var(--raio-s); color: var(--tinta-2);
}
.icone:hover { background: var(--superficie-2); color: var(--tinta); }
.icone.girando svg { animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Layout ---------- */
main { max-width: var(--largura); margin: 0 auto; padding: 24px 24px 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
main > *, .painel, .visao-grid > *, .hist-grid > * { min-width: 0; }
.secao { scroll-margin-top: 72px; }
.secao[hidden] { display: none; }
.painel {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-m);
  padding: 20px 22px; box-shadow: var(--sombra);
}
.painel-cab { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.painel-cab-ferramentas { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ferramentas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rodape-pagina { max-width: var(--largura); margin: 0 auto; padding: 0 24px 32px; color: var(--tinta-3); font-size: 12.5px; }

/* ---------- Controles ---------- */
input[type="text"], input[type="number"], input[type="search"], input[type="date"], input[type="password"], select {
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio-s);
  padding: 8px 10px; color: var(--tinta); min-width: 0;
}
input:focus, select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fraco); }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="search"] { width: 220px; }
.selecao { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); font-size: 13px; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: var(--raio-s); padding: 9px 14px;
  font-weight: 500; text-decoration: none; white-space: nowrap; line-height: 1.2;
  transition: background-color 0.12s, border-color 0.12s;
}
.botao:disabled { opacity: 0.55; cursor: not-allowed; }
.botao.primario { background: var(--acento); color: var(--acento-tinta); }
.botao.primario:hover:not(:disabled) { background: var(--acento-forte); }
.botao.discreto { background: transparent; border-color: var(--linha-forte); color: var(--tinta); }
.botao.discreto:hover:not(:disabled) { background: var(--superficie-2); }
.botao.perigo { background: transparent; border-color: var(--erro); color: var(--erro); }
.botao.perigo:hover:not(:disabled) { background: var(--erro-fraco); }
.botao.pequeno { padding: 5px 10px; font-size: 12.5px; }
.botao.ok { background: var(--ok-fraco); border-color: transparent; color: var(--ok); cursor: default; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--linha-forte); background: transparent; color: var(--tinta-2);
  border-radius: 999px; padding: 4px 11px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px;
}
.chip:hover { color: var(--tinta); background: var(--superficie-2); }
.chip[aria-pressed="true"] { background: var(--acento-fraco); border-color: var(--acento); color: var(--acento); }
.chip .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cor, var(--tinta-3)); }
/* chip de seleção "investir em": pressionado = entra; solto = fica de fora */
.chip.selecao[aria-pressed="true"] { background: var(--acento-fraco); border-color: var(--acento); color: var(--tinta); }
.chip.selecao[aria-pressed="false"] { color: var(--tinta-3); text-decoration: line-through; border-style: dashed; }
.chip.selecao[aria-pressed="false"] .ponto { opacity: 0.35; }
.mais-filtros { margin-top: 8px; }
.mais-filtros summary { cursor: pointer; width: fit-content; color: var(--tinta-2); font-size: 12.5px; }
.mais-filtros summary:hover { color: var(--tinta); }
.mais-filtros .filtros-fora { color: var(--aviso); }
.mais-filtros .dica-filtro { color: var(--tinta-3); font-size: 12px; margin: 6px 0; }

/* ---------- Visão geral ---------- */
.visao-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr); gap: 20px; }
.numero-grande { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 6px 0 4px; }
.esqueleto { display: inline-block; height: 1em; background: var(--superficie-2); border-radius: 4px; animation: pulsar 1.4s ease-in-out infinite; vertical-align: middle; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 20px 0 0; }
.kpis div { display: flex; flex-direction: column; gap: 2px; }
.kpis dt { color: var(--tinta-3); font-size: 12px; }
.kpis dd { margin: 0; font-size: 16px; font-weight: 600; }
.kpis dd small { font-weight: 400; color: var(--tinta-2); font-size: 12px; margin-left: 4px; }

.barra-aloc { display: flex; height: 26px; border-radius: var(--raio-s); overflow: hidden; background: var(--superficie-2); margin-bottom: 14px; }
.barra-aloc span { display: block; height: 100%; background: var(--cor); min-width: 2px; transition: width 0.3s; }
.barra-aloc span + span { border-left: 2px solid var(--superficie); }
.aloc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aloc-lista li { display: grid; grid-template-columns: 12px 130px 1fr auto auto; gap: 12px; align-items: center; font-size: 13px; }
.aloc-lista .ponto { width: 10px; height: 10px; border-radius: 2px; background: var(--cor); }
.aloc-lista .nome { font-weight: 500; }
.aloc-lista .trilho { position: relative; height: 8px; background: var(--superficie-2); border-radius: 4px; overflow: visible; }
.aloc-lista .trilho i { position: absolute; left: 0; top: 0; height: 100%; background: var(--cor); border-radius: 4px; }
.aloc-lista .trilho b { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--tinta-2); border-radius: 1px; }
.aloc-lista .valor { color: var(--tinta); min-width: 108px; text-align: right; }
.aloc-lista .pcts { color: var(--tinta-2); min-width: 120px; text-align: right; font-size: 12.5px; }
.aloc-lista .pcts strong { color: var(--tinta); font-weight: 600; }

.avisos { margin-top: 14px; display: grid; gap: 8px; }
.aviso { background: var(--aviso-fraco); border: 1px solid color-mix(in srgb, var(--aviso) 40%, transparent); color: var(--tinta); border-radius: var(--raio-s); padding: 10px 14px; font-size: 13px; }

/* ---------- Formulário do plano ---------- */
.plano-form { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; padding: 16px; background: var(--superficie-2); border-radius: var(--raio-m); }
.campo { display: flex; flex-direction: column; gap: 5px; border: 0; padding: 0; margin: 0; min-width: 0; }
.campo label, .campo legend { font-size: 12.5px; color: var(--tinta-2); font-weight: 500; padding: 0; }
.campo label small, .campo legend small { font-weight: 400; color: var(--tinta-3); }
.campo input { width: 140px; }
.campo-aporte input { font-size: 18px; font-weight: 600; width: 170px; }
.campo-linha { display: flex; align-items: center; gap: 8px; }
.campo-linha input { width: 76px; }
.campo-linha .link { margin-left: 4px; font-size: 12.5px; }
.sufixo { color: var(--tinta-2); margin-left: -4px; }
.campo-excluir { flex-basis: 100%; gap: 8px; padding-top: 4px; border-top: 1px solid var(--linha); }
.campo-btn { margin-left: auto; }
/* Comprar: o essencial em cima; o resto fechado em "Ajustes" */
.plano-principal { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; flex: 1; }
.plano-principal .botao { padding: 10px 18px; margin-bottom: 1px; }
.ajustes { flex-basis: 100%; }
.ajustes > summary { cursor: pointer; width: fit-content; font-size: 13px; color: var(--tinta-2); font-weight: 500; }
.ajustes > summary:hover { color: var(--tinta); }
.ajustes > summary .sub { font-weight: 400; color: var(--tinta-3); margin-left: 6px; }
.ajustes-corpo { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; padding-top: 14px; }
.campo-salvar { align-self: flex-end; padding-bottom: 9px; }

/* ---------- Boleta ---------- */
.boleta { margin-top: 20px; display: grid; gap: 16px; }
.boleta-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie);
}
.boleta-cab h3 { margin: 0; color: var(--tinta); font-size: 14px; font-weight: 600; }
.boleta-cab .sub { display: block; }
.boleta-totais { display: flex; gap: 22px; flex-wrap: wrap; }
.boleta-totais div { display: flex; flex-direction: column; }
.boleta-totais dt { font-size: 12px; color: var(--tinta-3); }
.boleta-totais dd { margin: 0; font-size: 16px; font-weight: 600; }
.boleta-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.boleta-progresso { height: 6px; background: var(--superficie-2); border-radius: 3px; overflow: hidden; flex-basis: 100%; }
.boleta-progresso i { display: block; height: 100%; background: var(--ok); transition: width 0.3s; }

.bloco { border: 1px solid var(--linha); border-radius: var(--raio-m); overflow: hidden; }
.bloco-cab {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--superficie-2); border-left: 4px solid var(--cor, var(--acento));
  font-weight: 600; font-size: 13.5px;
}
.bloco-cab .cont { color: var(--tinta-2); font-weight: 400; }
.bloco-cab .soma { margin-left: auto; font-weight: 500; }
.ordem {
  display: grid; grid-template-columns: 22px minmax(180px, 1.4fr) 110px 128px 120px minmax(150px, 1fr) auto;
  gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--linha);
}
.ordem:first-of-type { border-top: 0; }
.ordem.fora { opacity: 0.45; }
.ordem.feita { background: var(--ok-fraco); }
.ordem input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--acento); }
.ordem .ativo { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.ordem .ativo .tk { display: inline-flex; align-items: center; gap: 8px; }
.ordem .ativo .nome { color: var(--tinta-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copiar {
  border: 0; background: transparent; color: var(--tinta-3); padding: 2px; border-radius: 4px; display: inline-grid; place-items: center;
}
.copiar:hover { color: var(--acento); background: var(--acento-fraco); }
.ordem .qtd { display: flex; align-items: center; gap: 6px; }
.ordem .qtd input { width: 104px; text-align: right; padding: 6px 8px; font-size: 13px; }
.ordem .preco { text-align: right; display: flex; flex-direction: column; }
.ordem .preco small { color: var(--tinta-3); font-size: 11.5px; }
.ordem .total { text-align: right; font-weight: 600; }
.ordem .meta { display: flex; flex-direction: column; gap: 4px; }
.ordem .meta .trilho { height: 5px; background: var(--superficie-2); border-radius: 3px; position: relative; overflow: hidden; }
.ordem .meta .trilho i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; }
.ordem .meta .trilho .antes { background: var(--tinta-3); opacity: 0.55; }
.ordem .meta .trilho .depois { background: var(--cor, var(--acento)); }
.ordem .meta small { color: var(--tinta-3); font-size: 11.5px; }
.ordem .acoes { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.ordem .feito-info { font-size: 12px; color: var(--ok); white-space: nowrap; }
.ordem .feito-info b { font-weight: 600; }

.boleta-pe { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--tinta-2); font-size: 13px; }
.vazio { color: var(--tinta-2); padding: 18px 4px; }
.vazio strong { color: var(--tinta); }

/* ---------- Tabela ---------- */
.tabela-rolagem { overflow-x: auto; position: relative; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th { text-align: left; color: var(--tinta-2); font-weight: 500; font-size: 12.5px; padding: 0 10px 8px; border-bottom: 1px solid var(--linha-forte); white-space: nowrap; }
.tabela th.num { text-align: right; }
.tabela th button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.tabela th button::after { content: ""; display: inline-block; width: 0; margin-left: 4px; }
.tabela th[aria-sort="ascending"] button::after { content: "↑"; width: auto; }
.tabela th[aria-sort="descending"] button::after { content: "↓"; width: auto; }
.tabela th[aria-sort] button { color: var(--tinta); }
.tabela td { padding: 9px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela td.num { text-align: right; }
.tabela tfoot td { font-weight: 600; border-bottom: 0; color: var(--tinta); }
.tabela .ativo-cel { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.tabela .ativo-cel .nome { color: var(--tinta-2); font-size: 12px; }
.tabela .peso { color: var(--acento); font-weight: 600; }
.tabela .local { color: var(--tinta-2); font-size: 12.5px; white-space: nowrap; }
.tabela .sub-preco { display: block; color: var(--tinta-3); font-size: 11.5px; }
.tabela th.prog, .tabela td.prog { width: 190px; }
.tabela .trilho { height: 6px; background: var(--superficie-2); border-radius: 3px; overflow: hidden; }
.tabela .trilho i { display: block; height: 100%; background: var(--acento); border-radius: 3px; }
.tabela .trilho.cheio i { background: var(--ok); }
.tabela .prog-lbl { display: flex; justify-content: space-between; gap: 8px; color: var(--tinta-3); font-size: 11.5px; margin-top: 3px; white-space: nowrap; }
.tabela td.acao { text-align: right; white-space: nowrap; }
.etiqueta {
  display: inline-block; font-family: var(--mono); font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
  background: color-mix(in srgb, var(--cor, var(--tinta-3)) 18%, transparent); color: var(--cor, var(--tinta-2)); letter-spacing: 0.02em;
}
.tabela .vazio-tab { text-align: center; color: var(--tinta-2); padding: 24px; }

/* ---------- Histórico ---------- */
.hist-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; margin-bottom: 24px; }
.colunas { display: flex; align-items: stretch; gap: 6px; height: 150px; }
.col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.col .area { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.col .barra { width: 100%; max-width: 30px; border-radius: 3px 3px 0 0; background: var(--acento); min-height: 2px; opacity: 0.85; }
.col.zero .barra { background: var(--superficie-3); }
.col.atual .barra { opacity: 1; }
.col .mes { font-size: 11.5px; color: var(--tinta-3); }
.col.atual .mes { color: var(--tinta); font-weight: 600; }
.col .v { font-size: 10.5px; color: var(--tinta-2); height: 14px; }
.barras-h { display: grid; gap: 10px; }
.barra-h { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.barra-h .trilho { height: 10px; background: var(--superficie-2); border-radius: 5px; overflow: hidden; }
.barra-h .trilho i { display: block; height: 100%; background: var(--cor); border-radius: 5px; }
.barra-h .v { min-width: 96px; text-align: right; font-weight: 500; }
.hist-tabela-t { margin: 8px 0 10px; }
.tabela-hist input { width: 96px; text-align: right; padding: 4px 7px; font-size: 13px; border-color: transparent; background: transparent; }
.tabela-hist input:hover, .tabela-hist input:focus { border-color: var(--linha-forte); background: var(--superficie); }
.tabela-hist .data { white-space: nowrap; color: var(--tinta-2); }
.tabela-hist .lote { color: var(--tinta-3); font-size: 11.5px; }

/* ---------- Modal ---------- */
.modal { border: 1px solid var(--linha); border-radius: var(--raio-m); padding: 0; background: var(--superficie); color: var(--tinta); width: min(520px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
.modal::backdrop { background: rgba(10, 16, 22, 0.5); backdrop-filter: blur(2px); }
.modal-form { display: flex; flex-direction: column; }
.modal-cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0; }
.modal-cab h2 { font-size: 16px; }
.modal-corpo { padding: 14px 20px; display: grid; gap: 14px; }
.modal-corpo .resumo-ordem { display: flex; align-items: baseline; gap: 10px; color: var(--tinta-2); flex-wrap: wrap; }
.modal-corpo .grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-corpo .grade .campo input { width: 100%; }
.modal-corpo .campo input { width: 100%; }
.modal-corpo .nota { color: var(--tinta-3); font-size: 12.5px; }
.modal-corpo .lista-conf { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 40vh; overflow: auto; font-size: 13px; }
.modal-corpo .lista-conf li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--linha); }
.modal-corpo .lista-conf li:last-child { border-bottom: 0; }
.modal-pe { display: flex; justify-content: flex-end; gap: 8px; padding: 4px 20px 18px; }
.modal-pe .esquerda { margin-right: auto; border-color: transparent; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 20px; right: 20px; display: grid; gap: 8px; z-index: 60; max-width: min(420px, calc(100vw - 32px)); }
.toast {
  background: var(--superficie); color: var(--tinta); border: 1px solid var(--linha-forte); border-left: 4px solid var(--tinta-3);
  border-radius: var(--raio-s); padding: 10px 14px; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  display: flex; align-items: center; gap: 12px; animation: subir 0.18s ease-out;
}
.toast.ok { border-left-color: var(--ok); }
.toast.erro { border-left-color: var(--erro); }
.toast .botao { margin-left: auto; }
@keyframes subir { from { transform: translateY(8px); opacity: 0; } }

/* ---------- Responsivo ---------- */
@media (max-width: 1000px) {
  .visao-grid { grid-template-columns: 1fr; }
  .hist-grid { grid-template-columns: 1fr; }
  .ordem { grid-template-columns: 22px 1fr 100px 110px; grid-template-rows: auto auto; row-gap: 8px; }
  .ordem .preco { display: none; }
  .ordem .meta { grid-column: 2 / 4; }
  .ordem .acoes { grid-column: 4 / 5; justify-content: flex-end; }
}
@media (max-width: 720px) {
  .topo-in { padding: 8px 16px; gap: 8px 12px; flex-wrap: wrap; }
  /* telas separadas: no celular o menu vira uma faixa rolável abaixo do topo */
  .nav { order: 3; width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; gap: 0; }
  .nav a { white-space: nowrap; padding: 6px 7px; font-size: 13.5px; }
  .nav a[data-curto] span { display: none; }
  .nav a[data-curto]::before { content: attr(data-curto); }
  .topo .marca span:last-child { display: none; }
  .topo-acoes { min-width: 0; }
  .fonte-status { min-width: 0; max-width: 60vw; }
  .fonte-status span:last-child { overflow: hidden; text-overflow: ellipsis; }
  main { padding: 16px 16px 48px; gap: 16px; }
  .painel { padding: 16px; }
  .numero-grande { font-size: 32px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .aloc-lista li { grid-template-columns: 12px 1fr auto; }
  .aloc-lista .trilho { display: none; }
  .aloc-lista .pcts { display: none; }
  .plano-form { gap: 12px; }
  .campo input, .campo-aporte input { width: 100%; }
  .campo { width: 100%; }
  .campo-btn { margin-left: 0; }
  .campo-btn .botao, .plano-principal .botao { width: 100%; }
  .ordem { grid-template-columns: 22px 1fr 96px; }
  .ordem .total { grid-column: 2 / 4; text-align: left; }
  .ordem .meta { grid-column: 1 / 4; }
  .ordem .acoes { grid-column: 1 / 4; justify-content: flex-start; }
  input[type="search"] { width: 100%; }
  .modal-corpo .grade { grid-template-columns: 1fr; }
}

/* ---------- Login: vitrine escura à esquerda, cartão de entrada à direita (empilham no celular) ---------- */
.login { min-height: 100vh; display: flex; flex-wrap: wrap; }
.login-vitrine {
  flex: 1 1 520px; min-width: 0; min-height: 340px; display: flex; flex-direction: column; gap: 36px;
  padding: 40px 56px 0; background: #0b1a1c; color: #e6ebef;
}
.login-vitrine .marca { color: #e6ebef; }
.login-vitrine .marca-sinal { background: #47b3bf; }
.login-chamada { max-width: 520px; margin-top: auto; display: flex; flex-direction: column; gap: 18px; }
.login-chamada h1 { font-size: clamp(34px, 4.5vw, 52px); line-height: 1.08; letter-spacing: -0.02em; color: #fff; }
.login-chamada p { font-size: 17px; line-height: 1.5; color: #a3aeb8; }
.login-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.login-pills span {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: #6ac7d1; border: 1px solid rgba(71, 179, 191, 0.35); border-radius: 999px; padding: 5px 11px;
}
.login-grafico { display: block; width: calc(100% + 112px); margin: auto -56px 0; height: auto; max-height: 280px; }
.login-grafico line { stroke: rgba(230, 235, 239, 0.07); }
.login-grafico .area { fill: rgba(71, 179, 191, 0.14); }
.login-grafico .linha { fill: none; stroke: #47b3bf; stroke-width: 2.5; stroke-linecap: round; }
.login-grafico .halo { fill: rgba(71, 179, 191, 0.25); }
.login-grafico .ponto { fill: #6ac7d1; }
.login-area { flex: 1 1 400px; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.login-caixa { width: min(392px, 100%); display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: 14px; }
.login-caixa h2 { font-size: 22px; }
.login-google { display: flex; justify-content: center; min-height: 44px; }
.login-ou { display: flex; align-items: center; gap: 12px; color: var(--tinta-3); font-size: 12px; }
.login-ou span:first-child, .login-ou span:last-child { flex: 1; height: 1px; background: var(--linha); }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-senha { position: relative; }
.login-senha input { width: 100%; height: 44px; padding-right: 44px; }
.login-senha .icone { position: absolute; right: 4px; top: 5px; }
.login-caixa .botao.primario { width: 100%; justify-content: center; height: 44px; }
.login-erro { margin: 0; color: var(--erro); font-size: 13px; background: var(--erro-fraco); padding: 8px 12px; border-radius: var(--raio-s); }
.login-nota { font-size: 12px; color: var(--tinta-3); text-align: center; }
@media (max-width: 720px) {
  .login-vitrine { padding: 24px 24px 0; min-height: 0; gap: 20px; }
  .login-chamada h1 { font-size: 30px; }
  .login-chamada p { font-size: 15px; }
  .login-grafico { width: calc(100% + 48px); margin: 8px -24px 0; max-height: 130px; }
  .login-area { padding: 24px 16px; }
  .login-caixa { padding: 24px 20px; }
}

/* ---------- Faixa "Hoje" (Visão geral) ---------- */
.hoje { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.hoje:empty { display: none; }
.hoje-item {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-m); box-shadow: var(--sombra);
  color: inherit; text-decoration: none;
}
.hoje-item:hover { border-color: var(--linha-forte); }
.hoje-rotulo { color: var(--tinta-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoje-rotulo small { color: var(--tinta-3); }
.hoje-valor { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.hoje-valor.apagado { color: var(--tinta-3); font-weight: 500; font-size: 15px; }
.hoje-sub { color: var(--tinta-2); font-size: 12px; }
.hoje-item .trilho { height: 5px; background: var(--superficie-2); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.hoje-item .trilho i { display: block; height: 100%; background: var(--acento); border-radius: 3px; }
@media (max-width: 900px) { .hoje { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Evolução (patrimônio × aportado) ---------- */
.grafico-evolucao { margin-top: 20px; }
.evo-grafico { position: relative; }
.evo-grafico svg { display: block; max-width: 100%; }
.evo-grafico .grade { stroke: var(--linha); stroke-width: 1; }
.evo-grafico .eixo { fill: var(--tinta-3); font-size: 11px; }
.evo-grafico .patrimonio { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linejoin: round; }
.evo-grafico .aportado { fill: none; stroke: var(--tinta-3); stroke-width: 2; stroke-dasharray: 5 4; }
.evo-grafico .ponto { fill: var(--acento); stroke: var(--superficie, #fff); stroke-width: 2; }
.evo-grafico .alvo { fill: transparent; }
.evo-legenda { display: flex; gap: 18px; font-size: 12.5px; color: var(--tinta-2); margin-top: 6px; }
.evo-legenda span::before { content: ""; display: inline-block; width: 18px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--acento); }
.evo-legenda .l-aportado::before { border-top: 2px dashed var(--tinta-3); }
#evo-nota { margin-top: 8px; }
.tabela td.ganho small { display: block; color: var(--tinta-3); font-size: 11.5px; font-weight: 400; }
.tabela .sem-ganho { color: var(--tinta-3); }

/* ---------- Ajustes do servidor ---------- */
a.icone { text-decoration: none; }
.ajustes-form { display: flex; flex-direction: column; gap: 22px; max-width: 640px; }
.ajustes-bloco { border: 1px solid var(--linha); border-radius: var(--raio-m); padding: 16px 18px 18px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ajustes-bloco legend { padding: 0 6px; font-weight: 600; font-size: 14px; }
.ajustes-bloco .campo input { width: 100%; }
.ajustes-bloco .campo-linha input { flex: 1; }
.ajustes-bloco .nota { color: var(--tinta-2); font-size: 13px; }
.ajustes-bloco .estado { font-size: 12.5px; color: var(--tinta-3); }
.ajustes-bloco .estado.ok { color: var(--ok); }
.ajustes-limpar { background: none; border: 0; padding: 0; color: var(--tinta-3); font-size: 12px; text-decoration: underline; align-self: flex-start; }
.ajustes-limpar:hover { color: var(--erro); }
.ajustes-pe { display: flex; align-items: center; gap: 14px; }

/* ---------- Dividendos / Futuro ---------- */
.kpis-3 { grid-template-columns: repeat(3, 1fr); margin: 4px 0 20px; }
@media (max-width: 640px) { .kpis-3 { grid-template-columns: 1fr 1fr; } }
.painel > .nota { color: var(--tinta-3); font-size: 12.5px; margin: 14px 0 0; }
h3 small { font-weight: 400; color: var(--tinta-3); }
.rolagem-curta { max-height: 420px; overflow-y: auto; }
.ordem .ativo .yield { color: var(--ok); font-size: 11.5px; }
.prov-cab { margin-top: 28px; }
.dif-neg { color: var(--aviso); }
.status-pend { color: var(--tinta-3); font-size: 12px; }
.grafico-futuro { margin: 20px 0; }
.grafico-futuro figcaption { font-size: 13px; color: var(--tinta-2); margin-bottom: 6px; }
.grafico-futuro svg { display: block; max-width: 100%; }
.grafico-futuro .grade { stroke: var(--linha); stroke-width: 1; }
.grafico-futuro .eixo { fill: var(--tinta-3); font-size: 11px; }
.grafico-futuro .renda { fill: none; stroke: var(--acento); stroke-width: 2; }
.grafico-futuro .custo { fill: none; stroke: var(--tinta-3); stroke-width: 2; stroke-dasharray: 5 4; }
.grafico-futuro .marca-indep { stroke: var(--ok); stroke-width: 1.5; }
.grafico-futuro .rotulo-indep { fill: var(--tinta); font-size: 12px; font-weight: 600; }
.grafico-futuro .ponto { fill: var(--acento); stroke: var(--superficie, #fff); stroke-width: 2; }
.grafico-futuro .alvo { fill: transparent; }
.grafico-futuro .legenda { display: flex; gap: 18px; font-size: 12.5px; color: var(--tinta-2); margin-top: 6px; }
.grafico-futuro .legenda span::before { content: ""; display: inline-block; width: 18px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--acento); }
.grafico-futuro .legenda .l-custo::before { border-top: 2px dashed var(--tinta-3); }
.fut-dica { position: absolute; pointer-events: none; background: var(--superficie, #fff); border: 1px solid var(--linha); border-radius: 6px; padding: 6px 10px; font-size: 12px; color: var(--tinta); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
#fut-grafico { position: relative; }
.status-ok { color: var(--ok); font-size: 12px; }
.toast.aviso { border-left-color: var(--aviso); }

/* ---------- Gastos ---------- */
.mes-nav { display: inline-flex; align-items: center; gap: 8px; }
.mes-nav strong { min-width: 74px; text-align: center; }
.kpis-g { grid-template-columns: repeat(4, 1fr); margin: 4px 0 16px; }
.kpis-g dd small { display: block; margin: 0; color: var(--tinta-3); }
.g-grupo summary { list-style: none; cursor: pointer; }
.g-grupo summary::-webkit-details-marker { display: none; }
.g-subs { list-style: none; margin: 6px 0 10px 106px; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--tinta-2); }
.g-subs li { display: flex; justify-content: space-between; }
.g-confirmar-linha { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.g-confirmar-linha small { color: var(--tinta-3); }
.g-confirmar-linha input { width: 100%; }
.linha-apagada td { color: var(--tinta-3); }
.linha-previsao td { font-style: italic; }
.valor-entrada { color: var(--ok); }
#g-comprometido { margin: 0 0 16px; }
.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grade .campo input, .form-grade .campo select { width: 100%; }
.parcela-campos { display: flex; align-items: center; gap: 8px; }
.form-grade .parcela-campos input { width: 0; flex: 1; }
@media (max-width: 720px) {
  .kpis-g { grid-template-columns: 1fr 1fr; }
  .form-grade { grid-template-columns: 1fr; }
  .g-subs { margin-left: 0; }
}
.cartao-disponivel { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-top: 20px; }
.cartao-disponivel > div:first-child { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cartao-disponivel strong { font-size: 24px; }
.nota-aporte { color: var(--tinta-3); font-size: 12px; }

/* ---------- Importação (revisão) ---------- */
.imp-pendentes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.imp-cartao, .imp-cab > div { min-width: 0; }
.imp-pendentes:empty { display: none; }
.imp-cartao { border: 1px solid var(--acento); border-radius: var(--raio-m); padding: 14px; background: var(--acento-fraco); }
/* cabeçalho à esquerda e os botões à direita; no celular (abaixo) os botões vão para o fim, depois dos itens */
.imp-cartao { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cab acoes" "aviso aviso" "tab tab"; gap: 8px 12px; align-items: center; }
.imp-cab { grid-area: cab; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.imp-acoes { grid-area: acoes; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.imp-cartao > .aviso { grid-area: aviso; margin: 0; }
.imp-cartao > .tabela-rolagem { grid-area: tab; }
.imp-cat { display: flex; gap: 6px; flex-wrap: wrap; }
.imp-cat select { max-width: 170px; }
.selo { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--superficie-2); color: var(--tinta-2); }
.selo-dup { background: var(--aviso-fraco); color: var(--aviso); }
.selo-conf { background: var(--ok-fraco); color: var(--ok); }
.dono { color: var(--tinta-3); }

/* ---------- Celular: revisão da importação e lançamentos do mês viram cartões ----------
   A tabela continua a mesma no HTML (e no computador); abaixo de 720px cada linha vira um
   cartão em grade, com as células nas áreas nomeadas. Sem rolagem para o lado. */
@media (max-width: 720px) {
  .imp-tabela thead, .g-tabela thead { display: none; }
  .imp-tabela, .g-tabela, .imp-tabela tbody, .g-tabela tbody { display: block; }
  .imp-tabela tr, .g-tabela tr { display: grid; align-items: center; column-gap: 10px; row-gap: 3px; padding: 10px 2px; border-bottom: 1px solid var(--linha); }
  .imp-tabela td, .g-tabela td { display: block; padding: 0; border: 0; min-width: 0; }
  .imp-tabela tbody tr:hover, .g-tabela tbody tr:hover { background: none; }
  .imp-tabela td.num, .g-tabela td.num { font-weight: 600; white-space: nowrap; }
  .imp-tabela td.data, .g-tabela td.data, .g-tabela td.forma, .g-tabela td.g-cat { color: var(--tinta-2); font-size: 12.5px; }

  .imp-tabela tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "inc desc valor" "inc data data" "inc cat cat" "inc dono dono" "inc obs obs"; }
  .imp-tabela td.acao { grid-area: inc; align-self: start; padding-top: 2px; }
  .imp-tabela td.imp-desc { grid-area: desc; font-weight: 500; }
  .imp-tabela td.num { grid-area: valor; }
  .imp-tabela td.data { grid-area: data; }
  .imp-tabela td.imp-cat { grid-area: cat; }
  .imp-tabela .imp-cat select { max-width: none; flex: 1 1 130px; }
  .imp-tabela td.imp-dono { grid-area: dono; }
  .imp-tabela td.imp-dono select { width: 100%; }
  .imp-tabela td.imp-obs { grid-area: obs; }
  .imp-tabela td.imp-dono:empty, .imp-tabela td.imp-obs:empty { display: none; }

  .g-tabela tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "desc desc valor" "data cat cat" "forma selo acao"; }
  .g-tabela td.g-desc { grid-area: desc; font-weight: 500; }
  .g-tabela td.num { grid-area: valor; }
  .g-tabela td.data { grid-area: data; white-space: nowrap; }
  .g-tabela td.g-cat { grid-area: cat; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .g-tabela td.forma { grid-area: forma; }
  .g-tabela td.g-selo { grid-area: selo; }
  .g-tabela td.acao { grid-area: acao; }
  .g-tabela td.acao:empty { display: none; }
}

/* ---------- Filtros dos lançamentos e tela da pessoa ---------- */
.g-filtros { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 4px 0 10px; }
.g-filtros select { max-width: 220px; }
.g-ver { background: none; border: 0; padding: 0; color: var(--acento); cursor: pointer; font: inherit; font-size: 12.5px; }
.voltar { display: inline-block; margin-bottom: 10px; color: var(--tinta-2); text-decoration: none; font-size: 13px; }
.voltar:hover { color: var(--acento); }
.p-titulo { margin: 22px 0 8px; }
.tabela tr.total td { font-weight: 600; border-top: 1px solid var(--linha); }
.botao[hidden] { display: none; }

/* ---------- Relatórios ---------- */
.r-pizza-linha { display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: center; }
.r-pizza-t { fill: var(--tinta-3); font-size: 11px; }
.r-pizza-v { fill: var(--tinta); font-size: 15px; font-weight: 600; }
.r-barra { grid-template-columns: 120px 1fr auto; }
.r-barra > span:first-child, .r-subs .barra-h > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-barra .trilho { position: relative; overflow: visible; }
.r-barra .trilho i { border-radius: 5px; }
.r-media { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--tinta); border-radius: 1px; }
.barra-h .v small { display: block; font-weight: 400; font-size: 11.5px; color: var(--tinta-3); }
.r-subiu { color: var(--erro); font-style: normal; }
.r-caiu { color: var(--ok); font-style: normal; }
.r-pilha { margin-bottom: 18px; }
.r-pilha-t { font-size: 12px; color: var(--tinta-3); margin-bottom: 6px; }
.r-pilha-barra { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--superficie-2); }
.r-pilha-barra i { display: block; height: 100%; }
.r-pilha-leg { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.r-pilha-leg li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.r-pilha-leg small { color: var(--tinta-3); }
.r-pt { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.r-legenda { display: flex; gap: 16px; font-size: 12px; color: var(--tinta-2); margin-bottom: 8px; }
.r-legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.r-l-renda::before { background: var(--ok); }
.r-l-gastos::before { background: var(--erro); }
.r-l-obj::before { background: var(--g-rf); }
.r-evolucao { display: flex; align-items: stretch; gap: 8px; height: 180px; overflow-x: auto; padding-bottom: 2px; }
.r-col { flex: 1 0 44px; max-width: 90px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.r-area { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.r-area i { display: block; width: 12px; min-height: 2px; border-radius: 3px 3px 0 0; opacity: .85; }
.r-col.atual .r-area i { opacity: 1; }
.r-renda { background: var(--ok); }
.r-gastos { background: var(--erro); }
.r-obj { background: var(--g-rf); }
.r-parcelas .r-area i { width: 24px; background: var(--aviso); }
.r-mes { font-size: 11.5px; color: var(--tinta-3); }
.r-col.atual .r-mes { color: var(--tinta); font-weight: 600; }
.r-sobra { font-size: 10.5px; color: var(--tinta-2); height: 14px; }
.r-sobra.neg { color: var(--erro); }
.r-parcelas { height: 140px; margin-bottom: 12px; }
.r-dupla { margin-top: 8px; }
@media (max-width: 720px) {
  .r-pizza-linha { grid-template-columns: 1fr; justify-items: center; }
  .r-pizza-linha .barras-h { width: 100%; }
  .r-barra { grid-template-columns: 90px 1fr auto; }
}

/* ---------- Gastos: abas (lançamentos, recorrentes, importações) ---------- */
.g-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha-forte); margin: 26px 0 16px; overflow-x: auto; scrollbar-width: none; }
.g-abas button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; margin-bottom: -1px;
  font: inherit; font-weight: 600; color: var(--tinta-2); cursor: pointer; white-space: nowrap; }
.g-abas button small { font-weight: 400; color: var(--tinta-3); }
.g-abas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--acento); }
.g-abas button:hover { color: var(--tinta); }
.aba-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.rec-secao th { padding-top: 18px; color: var(--tinta); font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--linha-forte); }
.rec-secao th small { font-weight: 400; color: var(--tinta-3); margin-left: 6px; }
.rec-total { display: block; font-size: 11px; color: var(--tinta-3); }

/* ---------- Ações das tabelas: aparecem ao passar o mouse (ou sempre, sem mouse) ---------- */
.tabela td.acao .botao { opacity: 0; transition: opacity 0.12s; }
.tabela tr:hover td.acao .botao, .tabela tr:focus-within td.acao .botao, .tabela td.acao .botao:focus-visible { opacity: 1; }
@media (hover: none) { .tabela td.acao .botao { opacity: 1; } }
.tabela tr.clicavel { cursor: pointer; }
.tabela td.forma { white-space: nowrap; }
.selo-aten { background: var(--aviso-fraco); color: var(--aviso); }
.link { background: none; border: 0; padding: 0; color: var(--acento); cursor: pointer; font: inherit; font-size: 13px; text-decoration: none; white-space: nowrap; }
.link:hover { text-decoration: underline; }

/* ---------- Seções recolhíveis (Carteira, Dividendos) ---------- */
.titulo-recolhe { display: flex; align-items: center; gap: 4px; }
.recolher { width: 26px; height: 26px; display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: var(--raio-s); color: var(--tinta-3); }
.recolher:hover { background: var(--superficie-2); color: var(--tinta); }
.recolher svg { transition: transform 0.15s; }
.recolher[aria-expanded="false"] svg { transform: rotate(-90deg); }
.painel.recolhido .secao-corpo, .painel.recolhido .painel-cab .ferramentas { display: none; }
.painel.recolhido .painel-cab { margin-bottom: 0; }

/* ---------- Menu "mais opções" (<details class="menu">) ---------- */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--superficie-2); }
.menu-caixa {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 260px;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio-m); padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); display: grid; gap: 2px;
}
.menu-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: var(--raio-s); padding: 8px 10px; color: var(--tinta); font-size: 13px; }
button.menu-item:hover, a.menu-item:hover { background: var(--superficie-2); }
a.menu-item { text-decoration: none; }
.menu-item select { max-width: 150px; }

/* ---------- Gastos: conta do mês como um fluxo (renda − gastos − objetivos = disponível) ---------- */
.aviso-previsao { margin: 0 0 14px; }
.fluxo { display: flex; align-items: stretch; gap: 10px 14px; flex-wrap: wrap; margin: 4px 0 14px; }
.fluxo-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 150px; }
.fluxo-rotulo { color: var(--tinta-3); font-size: 12px; }
.fluxo-valor { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.fluxo-item small { color: var(--tinta-3); font-size: 11.5px; }
.fluxo-op { align-self: flex-start; color: var(--tinta-3); font-size: 18px; padding-top: 19px; }
.fluxo:empty::before { content: "carregando…"; color: var(--tinta-3); font-size: 13px; }
.fluxo-resultado { flex: 1.4 1 200px; padding: 10px 14px; border-radius: var(--raio-m); background: var(--acento-fraco); }
.fluxo-resultado .fluxo-rotulo { color: var(--tinta-2); }
.fluxo-resultado .fluxo-valor { font-size: 24px; color: var(--acento); }
.fluxo-resultado.neg { background: var(--erro-fraco); }
.fluxo-resultado.neg .fluxo-valor { color: var(--erro); }

/* resumo do mês em duas colunas: para onde foi | a confirmar, pessoas, objetivos */
.g-resumo { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; margin: 18px 0 8px; }
.g-resumo > * { min-width: 0; }
.g-lado { display: grid; gap: 22px; align-content: start; }
.g-bloco-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.g-bloco-cab h3 { margin-bottom: 10px; }
.lista-compacta { display: grid; }
.lc-linha { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--linha); }
.lc-linha:first-child { border-top: 0; padding-top: 0; }
.lc-linha.inativo { opacity: 0.6; }
.lc-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lc-cab a { color: var(--tinta); text-decoration: none; }
.lc-cab a:hover { color: var(--acento); }
.lc-valor { font-size: 18px; font-weight: 600; }
.lc-valor small { font-size: 12.5px; font-weight: 400; color: var(--tinta-2); }
.lc-linha .trilho { height: 6px; background: var(--superficie-2); border-radius: 3px; overflow: hidden; }
.lc-linha .trilho i { display: block; height: 100%; background: var(--acento); }
.lc-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; }

@media (max-width: 1000px) {
  .g-resumo { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .fluxo-op { display: none; }
  .fluxo-item { flex: 1 1 40%; }
  .fluxo-resultado { flex-basis: 100%; }
  .g-filtros { gap: 8px; }
  .g-filtros .selecao { flex: 1 1 calc(50% - 8px); }
  .g-filtros .selecao select { flex: 1; max-width: none; }
  .aba-cab .ferramentas { width: 100%; }
  .aba-cab .ferramentas .botao { flex: 1; }
  .cartao-disponivel .ferramentas { width: 100%; }
  .cartao-disponivel .ferramentas .botao { flex: 1; }
}

/* ---------- Celular: pensado para o polegar ----------
   Botões com altura de dedo, mês com as setas nas pontas, filtros numa fileira rolável, as duas
   ações principais de Gastos numa barra fixa no pé da tela, janelas que sobem de baixo e as
   tabelas de recorrentes e de importações feitas viram cartões (como as de cima). */
.g-barra-celular { display: none; }
@media (max-width: 720px) {
  /* no iPhone, campo com letra menor que 16px dá zoom na página ao tocar */
  input, select, textarea { font-size: 16px; }
  .botao { min-height: 44px; }
  .botao.pequeno { min-height: 36px; padding: 6px 12px; }
  .g-abas button { padding: 12px 14px; }

  /* mês: setas grandes nas pontas, fáceis de alcançar */
  #gastos .painel-cab-ferramentas { flex-direction: column; align-items: stretch; }
  #gastos .painel-cab-ferramentas .ferramentas { gap: 8px; }
  .mes-nav { width: 100%; justify-content: space-between; }
  .mes-nav .botao { min-width: 48px; min-height: 44px; font-size: 22px; }
  .mes-nav strong { font-size: 16px; }

  /* filtros: uma fileira que rola de lado, em vez de três linhas */
  .g-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 4px -16px 12px; padding: 0 16px; gap: 8px; }
  .g-filtros .selecao { flex: 0 0 auto; }
  .g-filtros .selecao select { flex: 0 1 auto; max-width: 150px; }
  .g-filtros .botao { flex: 0 0 auto; }

  /* as duas ações principais vão para a barra fixa no pé da tela */
  #g-importar, #g-novo { display: none; }
  .g-barra-celular {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(10px);
    border-top: 1px solid var(--linha);
  }
  .g-barra-celular .botao { flex: 1; min-height: 48px; }
  #gastos { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .toasts { left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); max-width: none; }

  /* janelas (novo lançamento, importar…) sobem do pé da tela; botões lado a lado, altura de dedo */
  .modal { width: 100vw; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0; border-bottom: 0; max-height: 92vh; max-height: 92dvh; }
  .modal[open] { display: flex; flex-direction: column; }
  .modal-form { min-height: 0; }
  .modal-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .modal-pe { flex-wrap: wrap; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .modal-pe .botao { flex: 1 1 40%; }
  .modal-pe .esquerda { flex-basis: 100%; }

  /* revisão da importação: os botões ficam no fim, depois dos itens, e acompanham a rolagem */
  .imp-cartao { display: block; }
  .imp-cab { margin-bottom: 8px; }
  .imp-acoes {
    position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 1; margin: 8px -2px 0; padding: 8px 2px 2px;
    background: color-mix(in srgb, var(--superficie) 90%, var(--acento));
  }
  .imp-acoes .botao { flex: 1; min-height: 44px; }

  /* recorrentes viram cartões */
  .g-rec-tabela thead { display: none; }
  .g-rec-tabela, .g-rec-tabela tbody { display: block; }
  .g-rec-tabela tr { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "desc desc desc desc valor" "cat cat cat cat cat" "quem forma dia varia acao"; column-gap: 10px; row-gap: 3px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--linha); }
  .g-rec-tabela td { display: block; padding: 0; border: 0; min-width: 0; }
  .g-rec-tabela tbody tr:hover { background: none; }
  .g-rec-tabela td.rec-desc { grid-area: desc; font-weight: 500; }
  .g-rec-tabela td.num { grid-area: valor; font-weight: 600; white-space: nowrap; }
  .g-rec-tabela td.rec-cat { grid-area: cat; }
  .g-rec-tabela td.rec-quem { grid-area: quem; }
  .g-rec-tabela td.forma { grid-area: forma; }
  .g-rec-tabela td.rec-dia { grid-area: dia; }
  .g-rec-tabela td.rec-varia { grid-area: varia; }
  .g-rec-tabela td.acao { grid-area: acao; }
  .g-rec-tabela td.rec-cat, .g-rec-tabela td.rec-quem, .g-rec-tabela td.forma, .g-rec-tabela td.rec-dia, .g-rec-tabela td.rec-varia { color: var(--tinta-2); font-size: 12.5px; white-space: nowrap; }
  .g-rec-tabela td.rec-cat { white-space: normal; }
  .g-rec-tabela tr.rec-secao { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 18px 2px 6px; border-bottom: 1px solid var(--linha-forte); }
  .g-rec-tabela tr.rec-secao th { display: block; padding: 0; border: 0; min-width: 0; }
  .g-rec-tabela tr.rec-secao th:first-child { flex: 1 1 auto; }
  .g-rec-tabela tr.rec-secao th small { display: block; margin: 0; }  /* a nota vai para a linha de baixo; o total cabe */
  .g-rec-tabela tr.rec-secao th.num { flex: 0 0 auto; white-space: nowrap; }
  .g-rec-tabela tr.rec-secao th:empty { display: none; }

  /* importações feitas viram cartões */
  .imp-hist-tabela thead { display: none; }
  .imp-hist-tabela, .imp-hist-tabela tbody { display: block; }
  .imp-hist-tabela tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "doc acao" "arq acao" "data sit"; column-gap: 10px; row-gap: 3px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--linha); }
  .imp-hist-tabela td { display: block; padding: 0; border: 0; min-width: 0; }
  .imp-hist-tabela tbody tr:hover { background: none; }
  .imp-hist-tabela td.imp-h-doc { grid-area: doc; font-weight: 500; }
  .imp-hist-tabela td.imp-h-arq { grid-area: arq; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .imp-hist-tabela td.data { grid-area: data; }
  .imp-hist-tabela td.imp-h-sit { grid-area: sit; text-align: right; }
  .imp-hist-tabela td.acao { grid-area: acao; }
  .imp-hist-tabela td.acao:empty { display: none; }
  .imp-hist-tabela td.data, .imp-hist-tabela td.imp-h-arq, .imp-hist-tabela td.imp-h-sit { color: var(--tinta-2); font-size: 12.5px; }
}