/* IBM Plex: texto em Plex Sans; valores em Plex Mono (largura fixa: colunas de números ficam retas). Arquivos locais. */
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fontes/plex-sans.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fontes/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fontes/plex-mono-600.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }
/* Tema "grafite e dourado": escuro fixo, estilo private banking. */
:root {
  color-scheme: dark;
  --plano: #141416;
  --superficie: #1e1f22;
  --superficie-2: #26272b;
  --tinta: #f2f0ea;
  --tinta-2: #b9b5ab;
  --suave: #8f8b82;
  --grade: #2c2c2f;
  --eixo: #3d3d42;
  --borda: rgba(255, 255, 255, 0.08);
  --ouro: #d4a53c;
  --ouro-claro: #e7c46a;
  --primaria: #d4a53c;
  /* Uma cor por assunto, a mesma em blocos, tabelas e gráficos (passos validados para fundo escuro) */
  --c-liquido: #3987e5;
  --c-economy: #d95926;
  --c-imposto: #199e70;
  --c-enel: #c98500;
  --c-clientes: #9085e9;
  --c-repasse: #d55181;
  --bom: #7fd18b;
  --bom-fundo: #1f3a26;
  --espera-fundo: #2b2b24;
  --alerta-fundo: #3a2f12;
  --critico: #ff8a80;
  --critico-fundo: #3d1b1b;
  --topo-fundo: #1e1f22;
  --topo-tinta: #f2f0ea;
  --topo-tinta-2: #b9b5ab;
  --topo-controle: #26272b;
  --topo-borda: #3d3d42;
  --primaria-tinta: #141416;
  --valor-destaque: #e7c46a;
}

/* Tema claro "vinho e areia", ligado pelo botão do topo (fica salvo no navegador). */
:root[data-tema="claro"] {
  color-scheme: light;
  --plano: #f5efe6;
  --superficie: #fffaf3;
  --superficie-2: #f3e9da;
  --tinta: #2a1d1a;
  --tinta-2: #5f514b;
  --suave: #8a7b72;
  --grade: #efe4d3;
  --eixo: #d8c7ad;
  --borda: rgba(42, 29, 26, 0.10);
  --ouro: #c8a46a;
  --primaria: #6d1b30;
  --primaria-tinta: #ffffff;
  --valor-destaque: #6d1b30;
  --c-liquido: #2a78d6;
  --c-economy: #eb6834;
  --c-imposto: #1baf7a;
  --c-enel: #eda100;
  --c-clientes: #4a3aa7;
  --c-repasse: #e87ba4;
  --bom: #3f6b1d;
  --bom-fundo: #e7efdc;
  --espera-fundo: #efe4d3;
  --alerta-fundo: #f6e7c1;
  --critico: #a01b1b;
  --critico-fundo: #f9dcdc;
  --topo-fundo: #6d1b30;
  --topo-tinta: #ffffff;
  --topo-tinta-2: #ecd3d9;
  --topo-controle: #83293f;
  --topo-borda: #a14a60;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--plano);
  color: var(--tinta);
  font: 15px/1.5 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1 { font-size: 20px; margin: 0; }
h2 { font-size: 16px; margin: 0 0 4px; }
.explica { color: var(--tinta-2); margin: 0 0 12px; font-size: 13px; }
.suave { color: var(--suave); }
.secundario { color: var(--tinta-2); }

/* ---------- Topo ---------- */
.topo { position: sticky; top: 0; z-index: 5; background: var(--topo-fundo); color: var(--topo-tinta); padding: 12px 16px 0; border-bottom: 1px solid var(--ouro); }
.topo-linha { display: flex; align-items: center; gap: 10px; max-width: 1100px; margin: 0 auto; }
.logo { width: 38px; height: 38px; flex: none; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.05; margin: 0; }
.marca-nome { font-size: 20px; font-weight: 700; letter-spacing: 0.2px; }
.marca-sub { font-size: 10px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ouro); margin-top: 3px; }
.topo-contexto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 1100px; margin: 10px auto 0; }
/* Módulos do hub (Início, Energia solar, Finanças) */
.setores { display: flex; gap: 4px; }
.setores:empty { display: none; }
.setores button { border: 1px solid var(--topo-borda); background: none; color: var(--topo-tinta-2); font: inherit; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.setores button[aria-selected="true"] { background: var(--ouro); border-color: var(--ouro); color: #1b1410; }
.setor { font-size: 12px; font-weight: 600; color: #1b1410; background: var(--ouro); border-radius: 999px; padding: 3px 10px; }
/* Seletor de usina: botões lado a lado, a usina aberta em dourado. */
.usinas { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--topo-controle); border: 1px solid var(--topo-borda); overflow-x: auto; max-width: 100%; }
.usinas button {
  display: grid; justify-items: start; gap: 0; border: 0; border-radius: 9px; padding: 4px 12px;
  background: none; color: var(--topo-tinta-2); font: inherit; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.usinas button b { font-size: 13px; font-weight: 600; color: var(--topo-tinta); }
.usinas button span { font-size: 10.5px; letter-spacing: 0.02em; }
.usinas button:hover { background: color-mix(in srgb, var(--topo-tinta) 8%, transparent); }
.usinas button[aria-selected="true"] { background: var(--ouro); color: #3a2a08; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); }
.usinas button[aria-selected="true"] b { color: #1b1410; }
.topo-acoes { margin-left: auto; display: flex; gap: 6px; }
.botao-tema { border: 1px solid var(--topo-borda); background: var(--topo-controle); color: var(--topo-tinta); font: inherit; font-size: 13px; border-radius: 8px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.sair { border: 1px solid var(--topo-borda); background: none; color: var(--topo-tinta); font: inherit; font-size: 13px; border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.abas { display: flex; gap: 18px; margin: 8px auto 0; max-width: 1100px; overflow-x: auto; }
.abas button {
  border: 0; background: none; color: var(--topo-tinta-2); font: inherit;
  padding: 6px 0 8px; font-size: 13px; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent;
}
.abas button:hover { color: var(--topo-tinta); }
.abas button[aria-selected="true"] { color: var(--topo-tinta); font-weight: 600; border-bottom-color: var(--ouro); }

main { max-width: 1100px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 16px; min-width: 0; }
.dupla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }

/* ---------- Controles ---------- */
.filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
select, input, button.acao {
  font: inherit; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--eixo); border-radius: 10px; padding: 6px 10px; font-size: 13px; min-height: 34px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, transform 0.08s, filter 0.15s;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { background: var(--plano); }
input:hover, select:hover { border-color: color-mix(in srgb, var(--ouro) 45%, var(--eixo)); }
input:focus, select:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ouro) 22%, transparent); }
input::placeholder { color: var(--suave); }
input[type="checkbox"] { min-height: 0; accent-color: var(--ouro); }
/* Botões: cantos suaves, ícone de traço fino, leve brilho ao passar o mouse. */
button.acao {
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 6px 14px; font-weight: 600; background: var(--superficie-2);
  border-color: color-mix(in srgb, var(--tinta) 14%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
button.acao:hover:not(:disabled) { border-color: color-mix(in srgb, var(--ouro) 60%, transparent); background: color-mix(in srgb, var(--ouro) 9%, var(--superficie-2)); }
button.acao:active:not(:disabled) { transform: translateY(1px); }
button.acao:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.icone { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button.acao.pequena { min-height: 28px; padding: 3px 10px; font-size: 12px; }
/* Listas suspensas com seta própria, no lugar da aparência padrão do Windows. */
select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 28px; border-radius: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d4a53c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
select option { color: var(--tinta); background: var(--superficie); }
a.acao { display: inline-block; font: inherit; color: var(--tinta); text-decoration: none; border: 1px solid var(--eixo); border-radius: 8px; padding: 5px 9px; font-size: 13px; }
td.acoes { white-space: normal; min-width: 150px; }
td.acoes .acao { padding: 3px 9px; font-size: 12px; margin: 2px 0 2px 3px; min-height: 28px; }
td .selo { font-size: 12px; padding: 2px 8px; }
button.acao.principal {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primaria) 82%, #fff), var(--primaria));
  border-color: color-mix(in srgb, var(--primaria) 80%, #000); color: var(--primaria-tinta); font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
button.acao.principal:hover:not(:disabled) { background: linear-gradient(180deg, color-mix(in srgb, var(--primaria) 72%, #fff), var(--primaria)); border-color: color-mix(in srgb, var(--primaria) 80%, #000); filter: saturate(1.05); }
button.seta { width: 34px; padding: 0; font-size: 16px; }
button:disabled { opacity: 0.4; cursor: default; }
.formulario { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
/* Formulários de ajustes: campos em grade, o botão fecha a linha. */
.formulario.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px; }
.formulario.campos > p { grid-column: 1 / -1; }
.formulario.campos > button, .formulario.campos > .botoes { justify-self: start; }
.botoes { display: flex; gap: 8px; flex-wrap: wrap; }
/* Envio de arquivos: área de arrastar e soltar */
.formulario.envio { display: grid; gap: 10px; justify-items: start; }
.zona-arquivos {
  position: relative; justify-self: stretch; display: grid; justify-items: center; gap: 4px; text-align: center;
  padding: 18px 16px; border: 1.5px dashed color-mix(in srgb, var(--ouro) 45%, var(--eixo)); border-radius: 14px;
  background: color-mix(in srgb, var(--ouro) 4%, var(--plano)); color: var(--tinta-2); font-size: 13px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.zona-arquivos input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.zona-arquivos:hover, .zona-arquivos.arrastando { border-color: var(--ouro); background: color-mix(in srgb, var(--ouro) 10%, var(--plano)); }
.zona-arquivos:focus-within { border-color: var(--ouro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ouro) 22%, transparent); }
.zona-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--ouro) 16%, transparent); color: var(--ouro); }
.zona-icone .icone { width: 20px; height: 20px; }
.zona-titulo { color: var(--tinta); font-weight: 600; }
.zona-titulo u { color: var(--ouro); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.zona-tipos { font-size: 12px; color: var(--suave); }
.zona-nomes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.zona-nomes:empty { display: none; }
.zona-arquivos.com-arquivos .zona-nomes { margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; background: var(--superficie-2); border: 1px solid var(--borda); color: var(--tinta); white-space: nowrap; }
.chip .icone { width: 13px; height: 13px; color: var(--ouro); }
.formulario label, .entrar label { display: grid; gap: 4px; font-size: 13px; color: var(--tinta-2); }
[hidden] { display: none !important; }
/* Campo com lista dos já usados + "Outro…" (banco de origem, destino) */
.formulario .campo { display: grid; gap: 4px; font-size: 13px; color: var(--tinta-2); min-width: 0; }
.escolha-linha { display: flex; gap: 6px; min-width: 0; }
.escolha-linha select { flex: 1 1 auto; min-width: 0; }
.escolha-linha select:has(+ input:not([hidden])) { flex: 0 1 auto; max-width: 45%; }
.escolha-linha input { flex: 1 1 auto; min-width: 0; }
button.acao.so-icone { width: 34px; min-height: 34px; padding: 0; color: var(--suave); }
/* Campo preenchido pelo comprovante: destaque dourado até o usuário mexer */
input.auto, select.auto { border-color: var(--ouro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ouro) 25%, transparent); background: color-mix(in srgb, var(--ouro) 8%, var(--plano)); }
#form-comprovante { margin-bottom: 12px; }
#form-comprovante .zona-arquivos { padding: 14px 16px; }
.comprovante-lido { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--ouro) 8%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--ouro) 35%, transparent); font-size: 13px; color: var(--tinta-2); }
.comprovante-lido > span:nth-child(2) { flex: 1 1 260px; }
.comprovante-lido b { color: var(--tinta); }
.comprovante-lido details { flex-basis: 100%; }
.comprovante-lido summary { cursor: pointer; color: var(--suave); font-size: 12px; }
.comprovante-lido pre { white-space: pre-wrap; font-size: 12px; max-height: 220px; overflow: auto; background: var(--plano); padding: 8px 10px; border-radius: 8px; margin: 6px 0 0; }
.lendo { color: var(--ouro); font-size: 13px; margin: 0 0 12px; }
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--ouro); }
#erro-pagamento:empty { display: none; }
.erro { color: var(--critico); }

.selo { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--tinta); }
.selo.recebido { background: var(--bom-fundo); }
.selo.prestacao { background: var(--espera-fundo); }
.selo.andamento, .selo.alerta { background: var(--alerta-fundo); }
.selo.critico { background: var(--critico-fundo); color: var(--critico); }
td.pendente { color: var(--critico); }
.pilula-pendente { background: var(--critico-fundo); color: var(--critico); font-weight: 700; border-radius: 999px; padding: 1px 9px; }

/* ---------- Destaque e blocos ---------- */
.destaque { background: var(--superficie); border: 1px solid #3a372e; }
.destaque-rotulo { color: var(--tinta-2); }
.destaque .destaque-valor { color: var(--valor-destaque); }
.resolucao { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--grade); display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.aviso.divergencia { background: var(--critico-fundo); border-left: 4px solid var(--critico); cursor: pointer; }
.destaque-valor { font-size: 48px; font-weight: 600; line-height: 1.1; margin: 4px 0 6px; }
.destaque-nota { color: var(--tinta-2); }
.destaque-nota b { color: var(--tinta); }
@media (max-width: 520px) { .destaque-valor { font-size: 40px; } }

.blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.bloco {
  --cor: var(--eixo);
  border-top: 2px solid var(--cor);
  background: var(--superficie);
  border-radius: 9px; padding: 9px 12px;
}
.bloco .rotulo { color: var(--tinta-2); font-size: 13px; }
.bloco .valor { font-size: 20px; font-weight: 600; }
.bloco .nota { color: var(--tinta-2); font-size: 12px; }
.cor-liquido { --cor: var(--c-liquido); }
.cor-economy { --cor: var(--c-economy); }
.cor-imposto { --cor: var(--c-imposto); }
.cor-enel { --cor: var(--c-enel); }
.cor-clientes { --cor: var(--c-clientes); }
.cor-repasse { --cor: var(--c-repasse); }

.medidor { height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--c-liquido) 18%, var(--superficie)); overflow: hidden; margin: 10px 0 12px; }
.medidor > div { height: 100%; background: var(--c-liquido); border-radius: 0 7px 7px 0; min-width: 4px; }

/* ---------- Tabelas ---------- */
.rolagem { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--grade); }
th { font-size: 12px; font-weight: 600; color: var(--tinta-2); vertical-align: bottom; background: var(--superficie-2); }
th:first-child, td:first-child {
  text-align: left; position: sticky; left: 0; background: var(--superficie);
  white-space: normal; min-width: 120px; max-width: 200px; font-weight: 600;
}
th:first-child { background: var(--superficie-2); }
.cartao.compacto { padding: 12px 14px; }
.cartao.compacto h2 { font-size: 15px; }
table.compacta { font-size: 13px; }
table.compacta th, table.compacta td { padding: 6px 8px; }
table.compacta th:first-child, table.compacta td:first-child { min-width: 110px; }
@media (max-width: 520px) { th:first-child, td:first-child { min-width: 110px; max-width: 140px; } }
/* Colunas de apoio somem em telas estreitas, para a tabela caber sem rolagem. */
@media (max-width: 1000px) { .opcional { display: none; } }
td.forte, th.forte { font-weight: 600; background: color-mix(in srgb, var(--cor, var(--c-liquido)) 13%, var(--superficie)); }
tfoot td { font-weight: 700; border-top: 2px solid var(--eixo); border-bottom: 0; }
td .sub { display: block; font-weight: 400; font-size: 12px; color: var(--suave); }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td:first-child, tr.escolhido td:first-child { box-shadow: inset 4px 0 0 var(--primaria); }
td button.link { border: 0; background: none; font: inherit; font-weight: 600; color: var(--tinta); padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--eixo); }

/* ---------- Conferência recolhível ---------- */
details.cartao > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; font-size: 16px; }
details.cartao > summary::-webkit-details-marker { display: none; }
details.cartao > summary::before { content: "▸"; color: var(--tinta-2); transition: transform 0.15s; }
details.cartao[open] > summary::before { transform: rotate(90deg); }
details.cartao[open] > summary { margin-bottom: 12px; }
.lista-conferencia { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-conferencia li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; }
.lista-conferencia .marca-item { font-weight: 700; }
.lista-conferencia .certo .marca-item { color: var(--bom); }
.lista-conferencia .errado .marca-item { color: var(--critico); }
.lista-conferencia .errado { background: var(--critico-fundo); border-radius: 8px; padding: 8px; }

/* ---------- Gráficos ---------- */
.legenda { display: flex; gap: 6px 16px; flex-wrap: wrap; margin: 0 0 8px; font-size: 13px; color: var(--tinta-2); }
.legenda > span, .dica-linha { display: flex; align-items: center; gap: 6px; }
.amostra { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.grafico svg { display: block; }
.grafico .alvo { fill: transparent; cursor: pointer; outline: none; }
.grafico .alvo:hover, .grafico .alvo:focus { fill: color-mix(in srgb, var(--tinta) 6%, transparent); }
.grafico .marca-dado { pointer-events: none; }
.grafico .linha-grade { stroke: var(--grade); stroke-width: 1; }
.grafico .linha-base { stroke: var(--eixo); stroke-width: 1; }
.grafico .linha-serie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .ponto { stroke: var(--superficie); stroke-width: 2; }
.grafico text { fill: var(--suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico text.rotulo-dado { fill: var(--tinta-2); }

.barras { display: grid; gap: 4px; }
.linha-barra {
  display: grid; grid-template-columns: minmax(90px, 34%) 1fr 130px; gap: 10px; align-items: center;
  width: 100%; border: 0; background: none; color: var(--tinta); font: inherit; text-align: left;
  padding: 5px 6px; border-radius: 6px; cursor: pointer;
}
.linha-barra:hover, .linha-barra:focus-visible { background: var(--superficie-2); outline: none; }
.linha-barra:hover .nome { text-decoration: underline; text-decoration-color: var(--ouro); }
.barras .nome { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras .trilho { height: 16px; display: block; }
.barras .barra { display: block; height: 100%; background: var(--c-repasse); border-radius: 0 4px 4px 0; min-width: 2px; }
.barras .numero { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--tinta-2); text-align: right; }

.dica {
  position: fixed; z-index: 10; pointer-events: none;
  background: var(--tinta); color: var(--superficie);
  padding: 8px 10px; border-radius: 8px; font-size: 13px; max-width: 260px;
  display: grid; gap: 3px;
}
.dica[hidden] { display: none; }
.dica b { font-weight: 600; }
.dica-linha { justify-content: space-between; gap: 14px; }
.dica-linha span { display: flex; align-items: center; gap: 6px; }

.pedido { white-space: pre-wrap; font: 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--superficie-2); border-radius: 8px; padding: 10px 12px; margin: 8px 0 0; }
.modal { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.55); display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-caixa { position: relative; width: min(100%, 520px); max-height: 90vh; overflow: auto; }
.modal-caixa .fechar { position: absolute; top: 10px; right: 10px; }
.endereco { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; border-top: 1px solid var(--grade); padding: 12px 0; }
.endereco h3 { margin: 0 0 4px; font-size: 14px; }
.endereco .url { font: 600 15px Consolas, monospace; color: var(--valor-destaque); word-break: break-all; }
.endereco .qr { background: #fff; border-radius: 8px; padding: 6px; }
.endereco .qr svg { display: block; width: 100%; height: auto; }
@media (max-width: 420px) { .endereco { grid-template-columns: 1fr; } .endereco .qr { width: 160px; } }
/* ---------- Hub ---------- */
.hub-boas-vindas { font-size: 20px; font-weight: 600; margin-top: 4px; }
.hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.hub-cartao {
  display: grid; gap: 6px; align-content: start; text-align: left; font: inherit; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borda); border-top: 3px solid var(--cor, var(--ouro));
  border-radius: 12px; padding: 16px; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s;
}
button.hub-cartao:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.hub-icone { font-size: 22px; color: var(--cor, var(--ouro)); }
.hub-titulo { font-size: 15px; font-weight: 700; }
.hub-valor { font-size: 28px; font-weight: 600; color: var(--valor-destaque); }
.hub-nota, .hub-rodape { font-size: 13px; color: var(--tinta-2); }
.hub-breve { border-style: dashed; border-top-style: dashed; cursor: default; opacity: 0.75; --cor: var(--eixo); }

/* ---------- Finanças ---------- */
.medidor-bom { display: block; background: color-mix(in srgb, var(--bom) 18%, var(--superficie)); }
.medidor-bom > div, .medidor-bom > span { display: block; height: 100%; background: var(--bom); border-radius: 0 7px 7px 0; min-width: 4px; }
.dividas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.cartao.divida { border-top: 3px solid var(--cor); }
.divida-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.divida-topo h2 { margin: 0; }
.divida-saldo { font-size: 26px; font-weight: 600; color: var(--valor-destaque); margin: 6px 0 2px; }
.divida-saldo small { font-size: 13px; font-weight: 400; color: var(--tinta-2); }
.divida-linhas { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; color: var(--tinta-2); margin-top: 8px; }
.divida-linhas b { color: var(--tinta); text-align: right; font-variant-numeric: tabular-nums; }
.divida-linhas b.bom { color: var(--bom); }
.divida-linhas b.ruim { color: var(--critico); }
.rosca { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 16px; align-items: center; }
@media (max-width: 520px) { .rosca { grid-template-columns: 1fr; justify-items: center; } .rosca svg { max-width: 200px; } .rosca .legenda { width: 100%; } }
.rosca svg { width: 100%; height: auto; }
.rosca .fatia { cursor: pointer; outline: none; }
.rosca .fatia:hover, .rosca .fatia:focus { opacity: 0.85; }
.rosca-valor { fill: var(--tinta); font-size: 24px; font-weight: 700; }
.rosca-nota { fill: var(--tinta-2); font-size: 12px; }
.legenda-coluna { flex-direction: column; gap: 8px; }
.legenda-coluna > span { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; }
.legenda-coluna b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.simulador { margin-bottom: 10px; }
.simulador input[type="number"] { width: 120px; }
label.caixa { display: flex; align-items: center; gap: 6px; }
.grafico-projecao svg { display: block; }
.grafico-projecao text { fill: var(--suave); font-size: 11px; }
.grafico-projecao text.rotulo-dado { fill: var(--tinta-2); }
.grafico-projecao .linha-grade { stroke: var(--grade); stroke-width: 1; }
.grafico-projecao .linha-base { stroke: var(--eixo); stroke-width: 1; }
.grafico-projecao .linha-hoje { stroke: var(--eixo); stroke-width: 1; }
.pct-divida[hidden] { display: none; }
button.acao.perigo { border-color: color-mix(in srgb, var(--critico) 55%, transparent); color: var(--critico); background: var(--superficie-2); }
button.acao.perigo:hover:not(:disabled) { border-color: var(--critico); background: color-mix(in srgb, var(--critico) 12%, var(--superficie-2)); }
.vazio { color: var(--tinta-2); padding: 24px 0; text-align: center; }
.aviso { background: var(--alerta-fundo); border-radius: 10px; padding: 10px 12px; margin: 0; }
.resultado { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }

/* ---------- Página de login ---------- */
.pagina-entrar { min-height: 100vh; display: grid; place-items: center; background: var(--plano); padding: 16px; }
.entrar { width: min(100%, 360px); display: grid; gap: 14px; }
.entrar-topo { display: flex; align-items: center; gap: 10px; }


/* ---------- Saldo de créditos (cartões por cliente, sem rolagem) ---------- */
.saldos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.saldo-cliente { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; min-width: 0; }
.saldo-cliente.alto { border-color: color-mix(in srgb, var(--critico) 45%, transparent); }
.saldo-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.saldo-topo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saldo-topo .selo { font-size: 11px; padding: 2px 8px; flex: none; }
.saldo-valor { font-size: 18px; font-weight: 600; }
.saldo-valor small { font-size: 12px; font-weight: 400; color: var(--tinta-2); }
.saldo-trilha { position: relative; height: 8px; border-radius: 4px; background: var(--grade); }
.saldo-trilha > div { height: 100%; border-radius: 4px; background: var(--bom); }
.saldo-cliente.alto .saldo-trilha > div { background: var(--critico); }
.saldo-trilha i { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--tinta-2); }
.saldo-nota { font-size: 12px; color: var(--tinta-2); }

/* ---------- Aba "Como é calculado" ---------- */
.entenda-cabecalho { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.entenda-cabecalho > div { flex: 1 1 420px; }
.seletor-mes { display: grid; gap: 4px; font-size: 13px; color: var(--tinta-2); }
.entenda-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; margin-top: 12px; }
.entenda-resumo > div { background: var(--superficie-2); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.entenda-resumo span { font-size: 12px; color: var(--tinta-2); }
.entenda-resumo b { font-size: 20px; font-weight: 600; }
.entenda-resumo b.valor-ouro { color: var(--valor-destaque); }
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.passo { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: start; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); }
.passo p { margin: 2px 0 0; font-size: 13px; color: var(--tinta-2); }
.passo-numero { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--ouro) 18%, transparent); color: var(--ouro); font-weight: 700; font-size: 13px; }
.passo-valor { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; align-self: center; }
.passo.despesa .passo-valor { color: var(--critico); }
.passo.total { background: color-mix(in srgb, var(--bom) 10%, var(--superficie-2)); }
.passo.total .passo-valor { color: var(--bom); }
@media (max-width: 520px) { .passo { grid-template-columns: 28px 1fr; } .passo-valor { grid-column: 2; justify-self: start; } }
.cascata { display: grid; gap: 4px; }
.cascata-linha { display: grid; grid-template-columns: 18px minmax(0, 1.4fr) minmax(60px, 1fr) auto; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--borda); font-size: 14px; }
.cascata-nome small { display: block; font-size: 12px; color: var(--suave); }
.cascata-sinal { font-weight: 700; color: var(--suave); text-align: center; }
.cascata-barra { height: 10px; border-radius: 0 5px 5px 0; background: color-mix(in srgb, var(--tinta) 6%, transparent); overflow: hidden; }
.cascata-barra i { display: block; height: 100%; background: var(--c-clientes); border-radius: 0 5px 5px 0; }
.cascata-valor { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cascata-linha.menos .cascata-barra i { background: var(--c-economy); }
.cascata-linha.menos .cascata-valor, .cascata-linha.menos .cascata-sinal { color: var(--critico); }
.cascata-linha.mais .cascata-barra i { background: var(--c-imposto); }
.cascata-linha.mais .cascata-valor, .cascata-linha.mais .cascata-sinal { color: var(--bom); }
.cascata-linha.total { background: var(--superficie-2); border-radius: 8px; border-bottom: 0; font-weight: 600; }
.cascata-linha.total .cascata-barra i { background: var(--c-liquido); }
.cascata-linha.final { background: color-mix(in srgb, var(--ouro) 14%, var(--superficie-2)); font-size: 16px; }
.cascata-linha.final .cascata-valor { color: var(--valor-destaque); font-size: 18px; }
@media (max-width: 560px) { .cascata-linha { grid-template-columns: 16px 1fr auto; } .cascata-barra { display: none; } }
.fio-b { border-left: 3px solid var(--c-enel); }
.fio-b.ok { border-left-color: var(--bom); }
.fio-b-anos { display: flex; flex-wrap: wrap; gap: 6px; }
.fio-b-anos span { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--superficie-2); color: var(--tinta-2); }
.fio-b-anos span.atual { background: var(--c-enel); color: #1b1410; }

/* ---------- Relatórios para o cliente (usinas diretas) ---------- */
.relatorios { display: grid; gap: 10px; }
.relatorio-cliente { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borda); }
.relatorio-cliente > div:first-child { display: grid; gap: 2px; min-width: 0; }
.relatorio-cliente b.bom { color: var(--bom); }
a.acao { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 14px; border-radius: 10px; font-weight: 600; background: var(--superficie); }
a.acao:hover { border-color: var(--ouro); }
a.acao.principal-link { background: linear-gradient(180deg, color-mix(in srgb, var(--primaria) 82%, #fff), var(--primaria)); border-color: color-mix(in srgb, var(--primaria) 80%, #000); color: var(--primaria-tinta); }
.relatorio-cliente .sub { display: block; font-size: 12.5px; color: var(--tinta-2); }
.relatorio-cliente b:first-child { font-size: 15px; }

/* ---------- Contas próprias (usinas diretas) ---------- */
.aviso-contas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-color: var(--critico); }
.hub-contas { cursor: default; }
.hub-contas .ruim { color: var(--critico); }
#form-rateio-direta { display: grid; gap: 10px; justify-items: start; }
.classificar { border: 1px solid var(--ouro); background: color-mix(in srgb, var(--ouro) 7%, var(--superficie)); }
.classificar-linha { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--borda); }
.classificar-linha > div:first-child { display: grid; gap: 2px; }
.classificar-linha .sub { display: block; font-size: 12.5px; color: var(--tinta-2); }

/* ---------- Topo moderno: módulos e usinas em controles segmentados, abas com ícone ---------- */
.setores { gap: 2px; padding: 3px; border-radius: 12px; background: var(--topo-controle); border: 1px solid var(--topo-borda); }
.setores:empty { display: none; }
.setores button {
  display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 9px; padding: 7px 12px;
  background: none; color: var(--topo-tinta-2); font-size: 13px; font-weight: 600; transition: background 0.15s, color 0.15s;
}
.setores button .icone { width: 16px; height: 16px; }
.setores button:hover { background: color-mix(in srgb, var(--topo-tinta) 8%, transparent); color: var(--topo-tinta); }
.setores button[aria-selected="true"] {
  background: linear-gradient(180deg, var(--ouro-claro, #e7c46a), var(--ouro)); color: #1b1410; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.usinas button { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; }
.usinas button > .icone { width: 18px; height: 18px; color: var(--ouro); opacity: 0.85; }
.usinas button[aria-selected="true"] > .icone { color: #3a2a08; opacity: 1; }
.usina-texto { display: grid; justify-items: start; line-height: 1.2; }
.abas { gap: 4px; }
.abas button {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px 9px; border-radius: 8px 8px 0 0;
  border-bottom: 2.5px solid transparent; transition: background 0.15s, color 0.15s;
}
.abas button .icone { width: 15px; height: 15px; opacity: 0.75; }
.abas button:hover { background: color-mix(in srgb, var(--topo-tinta) 6%, transparent); }
.abas button[aria-selected="true"] { border-bottom-color: var(--ouro); background: color-mix(in srgb, var(--ouro) 10%, transparent); }
.abas button[aria-selected="true"] .icone { color: var(--ouro); opacity: 1; }
:root[data-tema="claro"] .abas button[aria-selected="true"] .icone { color: #ffd34d; }
@media (max-width: 560px) { .setores button span { display: none; } .setores button[aria-selected="true"] span { display: inline; } }

/* ---------- Relatório: seleção de clientes e período ---------- */
.form-relatorio { display: grid; gap: 12px; }
.selecao-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.selecao-clientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.caixa-cliente { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  background: var(--superficie-2); border: 1px solid var(--borda); transition: border-color 0.15s, background 0.15s; }
.caixa-cliente:hover { border-color: color-mix(in srgb, var(--ouro) 50%, transparent); }
.caixa-cliente:has(input:checked) { border-color: var(--ouro); background: color-mix(in srgb, var(--ouro) 9%, var(--superficie-2)); }
.caixa-cliente input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ouro); flex: none; min-height: 0; }
.caixa-cliente span { display: grid; gap: 2px; }
.caixa-cliente small { color: var(--tinta-2); font-size: 12px; }
.caixa-cliente .bom { color: var(--bom); font-weight: 600; }
.periodo-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.pilula { position: relative; cursor: pointer; }
.pilula input { position: absolute; opacity: 0; pointer-events: none; }
.pilula span { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--eixo); font-size: 13px; font-weight: 600; color: var(--tinta-2); transition: all 0.15s; }
.pilula input:checked + span { background: var(--ouro); border-color: var(--ouro); color: #1b1410; }
.pilula input:focus-visible + span { outline: 2px solid var(--ouro); outline-offset: 2px; }
details.cartao > summary.resumo-recolhido { cursor: pointer; font-weight: 600; list-style: none; display: flex; gap: 8px; align-items: center; }
details.cartao > summary.resumo-recolhido::before { content: "▸"; color: var(--ouro); }
details.cartao[open] > summary.resumo-recolhido::before { content: "▾"; }
details.cartao > summary.resumo-recolhido span { color: var(--suave); font-weight: 400; font-size: 13px; }
details.cartao[open] > summary.resumo-recolhido { margin-bottom: 10px; }

/* ---------- Fonte dos valores e alinhamento ---------- */
:root { --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; }
.destaque-valor, .bloco .valor, .hub-valor, .divida-saldo, .heroi-valor, .inicio-valor, .rosca-valor, .saldo-valor, .passo-valor, .cascata-valor,
.entenda-resumo b, td:not(:first-child) { font-family: var(--mono); font-weight: 500; letter-spacing: -0.01em; }
.destaque-valor, .heroi-valor { font-weight: 600; letter-spacing: -0.03em; }
td:not(:first-child) :is(.selo, .acao, .sub, .chip, a, button, input, select, span.selo) { font-family: "IBM Plex Sans", system-ui, sans-serif; letter-spacing: 0; }
.bloco { display: grid; grid-template-rows: auto auto 1fr; align-content: start; }
.bloco .rotulo { line-height: 1.3; min-height: 2.6em; }
.bloco .valor { line-height: 1.2; }
h1, h2, h3 { letter-spacing: -0.01em; text-wrap: balance; }

/* ---------- Ícones em selo colorido ---------- */
:root {
  --ic-azul: #6aa6f5; --ic-laranja: #f0915e; --ic-verde: #4fcf9c; --ic-ambar: #f5c13d;
  --ic-rosa: #ec8ab0; --ic-lilas: #b2a8f7; --ic-cinza: #b4afa5; --ic-vermelho: #ff8a80;
}
:root[data-tema="claro"] {
  --ic-azul: #9cc4ff; --ic-laranja: #ffb38a; --ic-verde: #86e3bd; --ic-ambar: #ffd76b;
  --ic-rosa: #ffb0cf; --ic-lilas: #cfc7ff; --ic-cinza: #e3d9da; --ic-vermelho: #ffb3ab;
}
.selo-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; flex: none; font-style: normal;
  background: color-mix(in srgb, var(--ic) 20%, transparent); color: var(--ic); }
.selo-ic .icone { width: 14px; height: 14px; opacity: 1 !important; color: inherit !important; }
.setores button .selo-ic, .abas button .selo-ic { width: 21px; height: 21px; }
[aria-selected="true"] > .selo-ic { background: rgba(27, 20, 16, 0.16); color: #1b1410; }
.abas button[aria-selected="true"] > .selo-ic { background: color-mix(in srgb, var(--ic) 30%, transparent); color: var(--ic); }
.usinas button > .selo-ic { width: 26px; height: 26px; border-radius: 8px; }
.usinas button > .selo-ic .icone { width: 16px; height: 16px; }

/* ---------- Página inicial: patrimônio em um olhar ---------- */
.rotulo-sup { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--suave); }
.inicio-heroi {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: end;
  padding: 22px 24px; border-radius: 16px; border: 1px solid var(--borda);
  background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--ouro) 14%, transparent), transparent 55%), var(--superficie);
  border-top: 1px solid color-mix(in srgb, var(--ouro) 55%, transparent);
}
.heroi-texto { display: grid; gap: 10px; }
.heroi-valor { font-size: clamp(34px, 5vw, 48px); color: var(--valor-destaque); line-height: 1.05; }
.heroi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-estado { display: inline-flex; align-items: center; gap: 4px; width: max-content; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.chip-estado.bom { background: var(--bom-fundo); color: var(--bom); }
.chip-estado.ruim { background: var(--critico-fundo); color: var(--critico); }
.chip-estado.neutro { background: color-mix(in srgb, var(--ouro) 16%, transparent); color: var(--valor-destaque); }
.heroi-divisao { display: flex; gap: 2px; height: 8px; border-radius: 0 4px 4px 0; overflow: hidden; background: var(--superficie-2); }
.heroi-divisao i { display: block; height: 100%; }
.heroi-legenda { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--tinta-2); }
.heroi-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.heroi-legenda i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.heroi-legenda b { color: var(--tinta); font-family: var(--mono); font-weight: 500; }
.heroi-colunas { display: flex; align-items: flex-end; gap: 5px; height: 128px; }
.heroi-coluna { flex: 1; height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 4px; justify-items: center; align-items: end; min-width: 0; }
.heroi-barra { display: block; width: 100%; max-width: 22px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--c-liquido) 55%, transparent); }
.heroi-coluna.ultima .heroi-barra { background: var(--ouro); }
.heroi-coluna small { font-size: 10.5px; color: var(--suave); }
@media (max-width: 720px) { .inicio-heroi { grid-template-columns: 1fr; } .heroi-colunas { height: 96px; } }

.inicio-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.inicio-cartao {
  display: grid; gap: 8px; align-content: start; text-align: left; font: inherit; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 16px 18px; position: relative; overflow: hidden;
}
button.inicio-cartao { cursor: pointer; transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s; }
button.inicio-cartao:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tom) 45%, transparent); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); }
.inicio-cartao.alerta { border-color: color-mix(in srgb, var(--critico) 40%, var(--borda)); }
.inicio-topo { display: flex; align-items: center; gap: 8px; }
.inicio-valor { font-size: 26px; line-height: 1.1; }
.inicio-nota { font-size: 13px; color: var(--tinta-2); }
.inicio-nota b { color: var(--tinta); }
.minigrafico { width: 100%; height: auto; display: block; margin-top: 2px; }
.inicio-lista { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.inicio-lista li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; font-size: 13px; padding-top: 6px; border-top: 1px solid var(--borda); }
.inicio-lista b { font-family: var(--mono); font-weight: 500; }
.inicio-lista small { grid-column: 1 / -1; font-size: 12px; color: var(--tinta-2); }
.inicio-lista small.ruim { color: var(--critico); font-weight: 600; }
.inicio-breve { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--eixo); color: var(--tinta-2); font-size: 13.5px; }

/* Destaque do mês: depósito em evidência, a conta que leva a ele e o líquido ao lado */
.destaque-deposito { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.conta-deposito { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 12px; }
.conta-deposito span { display: grid; gap: 2px; }
.conta-deposito small { font-size: 12px; color: var(--tinta-2); }
.conta-deposito b { font-family: var(--mono); font-weight: 500; font-size: 15px; }
.conta-deposito i { font-style: normal; color: var(--suave); font-size: 16px; padding-bottom: 1px; }
.liquido-lado { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--c-liquido) 10%, var(--superficie-2)); border: 1px solid color-mix(in srgb, var(--c-liquido) 30%, transparent); }
.liquido-lado small { font-size: 12px; color: var(--tinta-2); }
.liquido-lado b { font-family: var(--mono); font-weight: 600; font-size: 26px; color: var(--tinta); }
.liquido-lado span { font-size: 12.5px; color: var(--tinta-2); }
@media (max-width: 720px) { .destaque-deposito { grid-template-columns: 1fr; } }

.dividas-usina li { grid-template-columns: 1fr; gap: 5px; }
.divida-usina-topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.divida-usina-topo small { color: var(--tinta-2); font-size: 12px; }
.dividas-usina .medidor { height: 6px; }

.inicio-saldos { display: grid; gap: 8px; padding: 14px 18px; border-radius: 14px; background: var(--superficie); border: 1px solid color-mix(in srgb, var(--c-economy) 35%, var(--borda)); }
.inicio-saldos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.inicio-saldos li { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13.5px; align-items: baseline; }
.inicio-saldos li small { color: var(--suave); }
.inicio-saldos li > span { color: var(--tinta-2); }
.inicio-saldos .ruim { color: var(--critico); font-weight: 600; }

td.barra-kwh { width: 14%; min-width: 80px; }
.trilho-kwh { display: block; height: 8px; border-radius: 0 4px 4px 0; background: var(--superficie-2); overflow: hidden; }
.trilho-kwh i { display: block; height: 100%; background: var(--c-liquido); border-radius: 0 4px 4px 0; }

/* ---------- Finanças pessoais ---------- */
.saida { color: var(--critico); font-family: var(--mono); }
.entrada { color: var(--bom); font-family: var(--mono); }
.chip-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--cc) 18%, transparent); color: color-mix(in srgb, var(--cc) 75%, var(--tinta)); white-space: nowrap; }
.chip-cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cc); }
.chips-cat { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
tr.a-conciliar td { background: color-mix(in srgb, var(--ouro) 5%, var(--superficie)); }
form.conciliar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
form.conciliar select { max-width: 200px; min-height: 30px; padding: 3px 26px 3px 8px; font-size: 12.5px; }
.tabela-lanc td:first-child { min-width: 64px; }
.filtros-lanc { margin-bottom: 10px; }
.filtros-lanc input[type="search"] { min-width: 200px; }
.aviso-conciliar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.conectar-bancos { display: grid; gap: 10px; justify-items: start; border-top: 1px solid color-mix(in srgb, var(--ouro) 55%, transparent); }
.passos-conexao { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; color: var(--tinta-2); max-width: 80ch; }
.passos-conexao b { color: var(--tinta); }
.lista-lembretes, .lista-recomendacoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-lembretes li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px 14px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--borda); }
.lista-lembretes li > span:first-child { display: grid; gap: 3px; }
.lista-lembretes li > span:nth-child(2) { font-family: var(--mono); }
.lista-lembretes .ruim { color: var(--critico); font-weight: 600; }
.lista-recomendacoes li { padding: 9px 12px; border-radius: 10px; background: var(--superficie-2); font-size: 13.5px; border-left: 3px solid var(--c-liquido); }
.lista-recomendacoes li.alerta { border-left-color: var(--c-economy); }
.cartoes-conta { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.cartao-conta { display: grid; gap: 3px; text-align: left; font: inherit; color: var(--tinta); cursor: pointer; padding: 14px 16px;
  border-radius: 14px; border: 1px solid var(--borda); background: var(--superficie); }
.cartao-conta.sel { border-color: var(--ouro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ouro) 20%, transparent); }
.cartao-conta .saldo-conta { font-family: var(--mono); font-size: 22px; font-weight: 600; }
.cartao-conta small { color: var(--tinta-2); font-size: 12px; }
.cartao-cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 10px; }
.blocos-mini { flex: 1 1 420px; }

td.txt { font-family: "IBM Plex Sans", system-ui, sans-serif; letter-spacing: 0; }
/* Muitas abas (Finanças): quebram em linhas em vez de criar barra de rolagem */
.abas { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
.rosca-valor { font-size: 17px !important; }

/* Engrenagem de configurações no topo */
.botao-engrenagem { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--topo-borda); background: var(--topo-controle); color: var(--topo-tinta-2); transition: color .15s, transform .3s, border-color .15s; }
.botao-engrenagem .icone { width: 19px; height: 19px; }
.botao-engrenagem:hover { color: var(--ouro); border-color: color-mix(in srgb, var(--ouro) 60%, transparent); transform: rotate(45deg); }
.botao-engrenagem:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .botao-engrenagem:hover { transform: none; } }
.config-titulo { display: flex; gap: 12px; align-items: center; }
.config-titulo .selo-ic { width: 36px; height: 36px; border-radius: 10px; }
.config-titulo .selo-ic .icone { width: 20px; height: 20px; }

.conectar-banco { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.item-manual { margin-top: 10px; }
.item-manual summary { cursor: pointer; color: var(--suave); font-size: 13px; }

/* Modo discreto: valores em reais borrados (botão "Ocultar R$" no topo) */
:root[data-privado="sim"] .valor-sigilo { filter: blur(7px); user-select: none; transition: filter .15s; }
.botao-olho:hover { transform: none; }
:root[data-privado="sim"] #privado { color: var(--ouro); border-color: color-mix(in srgb, var(--ouro) 60%, transparent);
  background: color-mix(in srgb, var(--ouro) 14%, var(--topo-controle)); }
@media print { :root[data-privado="sim"] .valor-sigilo { filter: blur(7px); } }

/* Conferir sugestões em lote */
.aviso-conferir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.conf-resumo { color: var(--suave); font-size: 13px; margin: 6px 0 10px; }
.conf-grupos { display: grid; gap: 12px; }
.conf-grupo { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--superficie) 70%, var(--plano)); }
.conf-grupo.pede-atencao { border-color: color-mix(in srgb, var(--c-enel) 55%, transparent); }
.conf-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 6px; }
.conf-cabeca label.caixa input { width: 17px; height: 17px; }
.conf-motivo { flex: 1 1 260px; font-size: 13px; color: var(--suave); }
.conf-total { font-family: "IBM Plex Mono", monospace; font-size: 13px; white-space: nowrap; }
.pilula-atencao { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: var(--c-enel);
  background: color-mix(in srgb, var(--c-enel) 16%, transparent); }
.tabela-conf { width: 100%; border-collapse: collapse; }
.tabela-conf td { padding: 6px 8px; border-top: 1px solid var(--borda); vertical-align: top; font-size: 13px; }
.tabela-conf td:first-child { width: 28px; }
.tabela-conf td:nth-child(2) { width: 92px; white-space: nowrap; }
.tabela-conf td:last-child { text-align: right; white-space: nowrap; }
.tabela-conf input[type="checkbox"] { width: 16px; height: 16px; }
.barra-conferir { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 12px; margin-top: 12px; padding: 10px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ouro) 45%, transparent);
  background: color-mix(in srgb, var(--superficie) 92%, var(--ouro)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); }
.barra-conta { flex: 1 1 180px; font-size: 14px; }
.barra-outra { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--suave); }
.barra-outra .sel-cat { max-width: 220px; }

/* Categorias e regras editáveis */
.tabela-cat, .tabela-regras { width: 100%; border-collapse: collapse; }
.tabela-cat td, .tabela-regras td { padding: 5px 0; border-top: 1px solid var(--borda); }
.form-cat, .form-regra, .form-excluir-cat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.form-cat input[name="nome"] { flex: 1 1 200px; min-width: 0; }
.form-cat input[type="color"], #form-categoria input[type="color"] { width: 34px; height: 30px; padding: 2px; border-radius: 8px; border: 1px solid var(--borda); background: none; cursor: pointer; }
.form-cat .usos { font-size: 12px; min-width: 64px; text-align: right; }
.form-regra input[name="padrao"] { flex: 1 1 220px; min-width: 0; }
.form-regra input[name="valor_min"], .form-regra input[name="valor_max"] { width: 90px; }
.form-regra .sel-cat { max-width: 230px; }
.excluindo td { background: color-mix(in srgb, var(--critico) 10%, transparent); padding: 8px; border-radius: 8px; }
.tabela-conf td.txt { text-align: left; }
@media (max-width: 560px) {
  #celular { display: none; }                      /* no próprio celular o atalho "abrir no celular" não serve */
  .tabela-conf td:nth-child(2) { width: auto; font-size: 12px; white-space: normal; }
  .tabela-conf td { padding: 6px 4px; }
  .conf-total { flex-basis: 100%; }
  .barra-conferir { padding: 10px; }
  .barra-outra, .barra-outra .sel-cat { max-width: 100%; }
}
/* As tabelas do Conferir e de Categorias não usam a 1ª coluna fixa das tabelas de números */
.tabela-conf td:first-child, .tabela-cat td:first-child, .tabela-regras td:first-child {
  position: static; min-width: 0; max-width: none; background: none; font-weight: 400; }
.tabela-conf td:first-child { width: 28px; }

/* Categorias em árvore, com arrastar e soltar */
.cat-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; align-items: start; }
.cat-grupo { display: grid; gap: 8px; padding: 10px; border-radius: 14px; border: 1px dashed var(--borda); min-height: 120px; }
.cat-grupo h3 { margin: 0 0 2px; font-size: 13px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.cat-cartao { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; padding: 9px 10px 9px 12px; border-radius: 11px; cursor: grab;
  background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--cc); }
.cat-cartao.sel { outline: 2px solid var(--ouro); outline-offset: 1px; }
.cat-nome { all: unset; cursor: pointer; font-weight: 600; font-size: 14px; }
.cat-nome:hover, .cat-nome:focus-visible { text-decoration: underline; }
.cat-usos { font-size: 12px; color: var(--suave); font-family: "IBM Plex Mono", monospace; align-self: center; }
.cat-subs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.sub-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 9px; border-radius: 999px; cursor: grab;
  background: color-mix(in srgb, var(--cc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--cc) 40%, transparent); }
.sub-cat small { color: var(--suave); font-family: "IBM Plex Mono", monospace; }
.sub-cat.sel { outline: 2px solid var(--ouro); }
.sub-nova, .cat-nova { display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: 12px; color: var(--suave); cursor: pointer;
  background: none; border: 1px dashed var(--borda); border-radius: 999px; padding: 2px 9px; }
.cat-nova { justify-self: start; border-radius: 9px; padding: 5px 10px; }
.sub-nova .icone, .cat-nova .icone { width: 13px; height: 13px; }
.sub-nova:hover, .cat-nova:hover { color: var(--tinta); border-color: var(--ouro); }
.arrastando { opacity: .45; }
.alvo-soltar { outline: 2px dashed var(--ouro); outline-offset: 2px; background: color-mix(in srgb, var(--ouro) 8%, transparent); }
.editor-cat .form-cat { align-items: end; }
.editor-cat .form-cat label { display: grid; gap: 4px; font-size: 13px; }
.editor-cat .form-excluir-cat { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--critico) 8%, transparent); }
.form-nova-cat { margin-top: 12px; }
/* Excluir categoria direto no cartão */
.cat-usos { display: inline-flex; align-items: center; gap: 4px; }
.cat-x { all: unset; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; cursor: pointer; color: var(--suave); opacity: .55; }
.cat-x .icone { width: 13px; height: 13px; }
.cat-x:hover, .cat-x:focus-visible { opacity: 1; color: var(--critico); background: color-mix(in srgb, var(--critico) 14%, transparent); }
.sub-cat .cat-x { width: 16px; height: 16px; }
.sub-cat > span[data-editar-cat] { cursor: pointer; }
.excluir-rapido { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; padding: 8px; border-radius: 9px;
  background: color-mix(in srgb, var(--critico) 10%, transparent); cursor: default; }
.excluir-rapido .sel-cat { max-width: 100%; }

/* Seção Dívidas */
.dividas-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.divida-cartao { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borda);
  border-top: 3px solid var(--tom); }
.divida-cartao-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.divida-cartao-valor { font-family: "IBM Plex Mono", monospace; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.divida-cartao small { color: var(--suave); font-size: 12px; line-height: 1.4; }
.chip-tipo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 8px; border-radius: 999px;
  color: var(--tom); background: color-mix(in srgb, var(--tom) 14%, transparent); }
.aviso-possiveis { margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--c-enel) 60%, transparent);
  background: color-mix(in srgb, var(--c-enel) 8%, transparent); font-size: 13px; }
.aviso-possiveis p { margin: 4px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.recomendacao { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--c-imposto) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-imposto) 35%, transparent); line-height: 1.55; }
tr.destaque-linha td { background: color-mix(in srgb, var(--c-imposto) 10%, transparent); }
.contrato-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.contrato-cabeca h2 { margin: 0; }
.contrato-cabeca .suave { font-size: 13px; flex: 1 1 320px; }
.composicao { font-size: 13px; line-height: 1.5; }
.resumo-contrato ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.resumo-contrato li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--borda); font-size: 13px; }
.resumo-contrato li b { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; text-align: right; }
.simulacao-contrato { margin-top: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--borda); }
.simulacao-contrato h3 { margin-top: 0; }

/* Salário */
.chip-natureza { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  color: var(--suave); background: color-mix(in srgb, var(--suave) 14%, transparent); }
.chip-natureza.n-variavel { color: var(--c-enel); background: color-mix(in srgb, var(--c-enel) 14%, transparent); }
.chip-natureza.n-periodico { color: var(--c-clientes); background: color-mix(in srgb, var(--c-clientes) 16%, transparent); }
.chip-natureza.n-consignado { color: var(--c-economy); background: color-mix(in srgb, var(--c-economy) 14%, transparent); }
.tabela-salario { width: 100%; }
.tabela-salario td:first-child { position: static; min-width: 0; max-width: none; background: none; font-weight: 500; }

/* Aposentadoria: tempo de contribuição e cenários */
.tempo-contrib { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.tempo-contrib div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda); }
.tempo-contrib span { font-size: 12px; color: var(--suave); }
.tempo-contrib b { font-size: 18px; }
.tempo-contrib small { font-size: 12px; color: var(--suave); }
.tabela-cenarios td:first-child { position: static; min-width: 170px; background: none; }
tr.inelegivel td { opacity: .78; }

/* Estudo da aposentadoria */
.prazos-estudo { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.comparacao-estudo { display: grid; gap: 8px; margin: 6px 0 14px; }
.linha-estudo { display: grid; grid-template-columns: minmax(150px, 260px) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.linha-estudo b { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.barra-estudo { height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--suave) 16%, transparent); overflow: hidden; }
.barra-estudo i { display: block; height: 100%; border-radius: 7px; }
.lista-estudo { margin: 12px 0; padding-left: 18px; display: grid; gap: 8px; line-height: 1.5; font-size: 14px; }
.detalhe-estudo { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--borda); }
.detalhe-estudo h3 { margin: 16px 0 6px; }
.detalhe-estudo p { line-height: 1.55; }
@media (max-width: 560px) { .linha-estudo { grid-template-columns: 1fr auto; } .linha-estudo .barra-estudo { grid-column: 1 / -1; grid-row: 2; } }
.linha-estudo span small { display: block; font-size: 11px; color: var(--suave); }

/* Rosca: a legenda cabe no quadro (nome quebra linha, valor fica à direita) */
.rosca > .legenda { min-width: 0; width: 100%; }
.legenda-coluna > span { width: 100%; min-width: 0; }
.legenda-coluna b { white-space: nowrap; text-align: right; }

/* Lançamentos em cartões (computador e celular) */
.lanc-cabeca { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lanc-cabeca input[type="search"] { flex: 1 1 220px; min-width: 0; }
.lanc-cabeca select { flex: 0 1 auto; max-width: 100%; }
.segmentos { display: inline-flex; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.segmentos button { all: unset; cursor: pointer; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--suave); }
.segmentos button b { margin-left: 4px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--c-enel) 22%, transparent); color: var(--tinta); }
.segmentos button.ativo { background: color-mix(in srgb, var(--ouro) 22%, transparent); color: var(--tinta); }
.segmentos button:focus-visible { outline: 2px solid var(--ouro); outline-offset: -2px; }
.lanc-dias { display: grid; gap: 14px; margin-top: 14px; }
.lanc-dia h3 { margin: 0 0 6px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.lanc-cartao { display: grid; gap: 8px; padding: 12px 14px; margin-bottom: 8px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borda); }
.lanc-cartao.a-conciliar { border-left: 4px solid var(--c-enel); }
.lanc-cartao.enviando { opacity: .5; pointer-events: none; }
.lanc-linha { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.lanc-quem { display: grid; gap: 2px; min-width: 0; }
.lanc-quem b { font-size: 15px; overflow-wrap: anywhere; }
.lanc-quem small { font-size: 12px; color: var(--suave); }
.lanc-valor { font-family: "IBM Plex Mono", monospace; font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lanc-escolha { display: flex; gap: 8px; }
.lanc-escolha .combo { flex: 1 1 auto; min-width: 0; }
.lanc-escolha .combo-texto { width: 100%; font-size: 15px; padding: 9px 12px; }
.combo { position: relative; }
.combo-texto { cursor: pointer; }
.combo-texto:focus { cursor: text; }
.combo-lista { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 240px; max-height: 320px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none; background: var(--superficie); border: 1px solid var(--eixo); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
.barra-conferir .combo-lista { top: auto; bottom: calc(100% + 4px); }
.combo-grupo { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--suave); }
.combo-op { padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--tinta); }
.combo-op.sub { padding-left: 22px; }
.combo-op small { color: var(--suave); font-size: 12px; }
.combo-op:hover, .combo-op.ativo { background: color-mix(in srgb, var(--ouro) 18%, transparent); }
.combo-vazio { padding: 10px; font-size: 13px; color: var(--suave); }
.barra-outra .combo { display: inline-block; vertical-align: middle; min-width: 220px; }
.barra-outra .combo-texto { width: 100%; }
.acao.so-icone { padding: 7px 9px; }
.acao.so-icone svg { margin: 0; }
.acao.so-icone[aria-expanded="true"] { border-color: var(--ouro); color: var(--ouro); }
.lote-nova { flex: 1 1 100%; order: -1; }
.lanc-rapidas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-rapida { cursor: pointer; border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent); font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; }
.chip-rapida:hover, .chip-rapida:focus-visible { background: color-mix(in srgb, var(--cc) 28%, transparent); outline: none; }
.lanc-rapidas .lembrar { margin-left: auto; font-size: 12px; color: var(--suave); }
.lanc-topo { display: grid; gap: 10px; }
.segmentos { flex-wrap: wrap; max-width: 100%; }
.chip-nova { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px;
  border-radius: 999px; border: 1px dashed var(--ouro); background: transparent; color: var(--ouro); }
.chip-nova svg { width: 13px; height: 13px; }
.chip-nova:hover, .chip-nova:focus-visible, .chip-nova[aria-expanded="true"] { background: color-mix(in srgb, var(--ouro) 16%, transparent); outline: none; }
.lanc-nova { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 10px; border-radius: 10px; background: var(--superficie-2); }
.lanc-nova label { display: grid; gap: 4px; font-size: 12px; color: var(--tinta-2); flex: 1 1 180px; min-width: 0; }
.lanc-nova input, .lanc-nova select { width: 100%; }
.lanc-nova .botoes { display: flex; gap: 8px; }
.lanc-cat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lanc-cat .acao { margin-left: auto; }
.lanc-original { margin: 0; font-size: 11px; color: var(--suave); overflow-wrap: anywhere; opacity: .8; }
.lanc-mais { display: flex; justify-content: center; margin: 6px 0 16px; }
@media (max-width: 560px) {
  .lanc-escolha .acao.principal span { display: none; }
  .lanc-cabeca select { flex: 1 1 45%; }
  .chip-rapida { padding: 7px 12px; font-size: 13px; }
  .chip-nova { padding: 7px 12px; font-size: 13px; }
  .segmentos { display: flex; }
  .segmentos button { flex: 1 1 auto; text-align: center; padding: 8px 10px; }       /* alvo de toque maior no celular */
}
.rosca { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); }
.aviso-ok { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 9px 12px; border-radius: 9px; font-size: 13.5px;
  background: color-mix(in srgb, var(--c-imposto) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c-imposto) 40%, transparent); color: var(--tinta); }
.aviso-ok svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--c-imposto); }
.pilula-boleto { display: inline-flex; align-items: center; gap: 4px; color: var(--ouro); font-weight: 600; }
.pilula-boleto svg { width: 12px; height: 12px; }
.tabela-rec td.acoes { white-space: nowrap; }
.tabela-rec tr.linha-sel td { background: color-mix(in srgb, var(--ouro) 8%, transparent); }
.aviso-boleto { display: flex; gap: 10px; align-items: flex-start; }
.aviso-boleto svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ouro); }
.lista-lembretes li.boleto b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ouro); margin-right: 7px; vertical-align: middle; }
.alerta-txt { color: var(--ouro); font-weight: 600; }
@media (max-width: 560px) { .lista-lembretes li { grid-template-columns: minmax(0, 1fr) auto; } .lista-lembretes li > button { grid-column: 1 / -1; justify-self: start; } }
.tabela-rec td:first-child { min-width: 260px; }
/* ---- Cartões */
.cartoes-topo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cartao-tile { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: 14px;
  background: var(--superficie); border: 1px solid var(--borda); transition: border-color 0.15s, box-shadow 0.15s; }
.cartao-tile:hover { border-color: var(--eixo); }
.cartao-tile:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.cartao-tile.ativo { border-color: var(--ouro); box-shadow: 0 0 0 1px var(--ouro) inset; }
.tile-nome { font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.tile-valor { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--tinta); }
.tile-sub { font-size: 12px; color: var(--suave); }
.medidor.fino { display: block; height: 6px; margin: 6px 0 2px; }
.medidor.fino > span { display: block; height: 100%; background: var(--c-economy); border-radius: 3px; }
.cabeca-fatura { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.cabeca-fatura h2 { margin: 0; }
.fatura-meses { display: flex; flex-wrap: wrap; gap: 6px; }
.fatura-meses button { all: unset; cursor: pointer; display: grid; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--borda); font-size: 13px; font-weight: 600; color: var(--tinta-2); text-align: center; }
.fatura-meses button small { font-weight: 400; font-size: 11px; color: var(--suave); }
.fatura-meses button.ativo { background: color-mix(in srgb, var(--ouro) 20%, transparent); border-color: var(--ouro); color: var(--tinta); }
.fatura-meses button:focus-visible { outline: 2px solid var(--ouro); }
.tabela-compras td .chip-cat { margin-top: 4px; }
.tabela-compras th.num, .tabela-compras td.num { text-align: right; }
.tabela-compras .txt { text-align: left; font-family: "IBM Plex Sans", system-ui, sans-serif; }
.tabela-compras td.txt b { font-weight: 600; }
.so-cel { display: none; }
.tabela-compras td.num { white-space: nowrap; }
@media (max-width: 560px) {
  .tabela-fatura th:nth-child(3), .tabela-fatura td:nth-child(3) { display: none; }
  .so-cel { display: block; margin-top: 4px; }
  .tabela-compras td, .tabela-compras th { padding-left: 6px; padding-right: 6px; }
}
/* ---- De quem são as finanças */
.seletor-pessoa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.seletor-pessoa button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px;
  border: 1px solid var(--borda); font-size: 13.5px; font-weight: 600; color: var(--tinta-2); }
.seletor-pessoa button svg { width: 18px; height: 18px; margin-left: 6px; }
.seletor-pessoa .inicial { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--superficie-2); font-size: 12px; }
.seletor-pessoa button[aria-pressed="true"] { background: color-mix(in srgb, var(--ouro) 20%, transparent); border-color: var(--ouro); color: var(--tinta); }
.seletor-pessoa button[aria-pressed="true"] .inicial { background: var(--ouro); color: #1b1410; }
.seletor-pessoa button:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.seletor-pessoa .suave { font-size: 12.5px; flex: 1 1 240px; }
.dono-conexao { display: grid; gap: 4px; font-size: 12px; color: var(--tinta-2); }
/* ---- Contas a pagar: próximas e pagas */
.cap-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cap-cabeca h2 { margin: 0; }
.cap-colunas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; margin-top: 12px; }
.cap-colunas h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--suave); }
@media (max-width: 760px) { .cap-colunas { grid-template-columns: 1fr; } }
.lista-pagas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-pagas li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--borda); }
.lista-pagas li > span:nth-child(2) { display: grid; gap: 2px; }
.lista-pagas small, .lista-lembretes small { color: var(--suave); font-size: 12px; }
.lista-pagas li > span:last-child { font-family: var(--mono); color: var(--tinta-2); }
.ok-pago { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--c-imposto) 22%, transparent); color: var(--c-imposto); font-size: 12px; font-weight: 700; }
.valor-variavel { color: var(--tinta-2); font-style: italic; }
.tag-variavel { font-size: 11px; color: var(--suave); border: 1px dashed var(--eixo); border-radius: 999px; padding: 0 7px; }
/* ---- Extrato: virada de mês */
tr.linha-mes td { background: var(--superficie-2); padding-top: 10px; padding-bottom: 10px; text-align: left; font-family: "IBM Plex Sans", system-ui, sans-serif; }
tr.linha-mes b { text-transform: capitalize; margin-right: 12px; }
tr.linha-mes span { font-size: 12px; color: var(--suave); }
/* ---- Cartões: parcela prevista */
tr.linha-prevista td { opacity: 0.75; font-style: italic; }
tr.linha-prevista td b { font-style: normal; }
/* ---- Início: finanças da família */
.heroi-linhas { display: flex; flex-wrap: wrap; gap: 18px 32px; margin: 8px 0 12px; }
.heroi-linhas span { display: grid; gap: 2px; }
.heroi-linhas small { font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: 0.05em; }
.heroi-linhas b { font-family: var(--mono); font-size: 26px; color: var(--tinta); }
.heroi-linhas b.bom { color: var(--bom); }
.heroi-linhas b.ruim { color: var(--critico); }
.alerta-chip { cursor: pointer; border: 1px solid var(--ouro); color: var(--ouro); background: transparent; font: inherit; }
.barras-duplas { display: flex; align-items: flex-end; gap: 10px; min-height: 150px; position: relative; padding-bottom: 22px; }
.bd-mes { flex: 1 1 0; display: grid; gap: 4px; justify-items: center; height: 140px; }
.bd-barras { display: flex; align-items: flex-end; gap: 3px; height: 120px; width: 100%; justify-content: center; }
.bd-barras i { display: block; width: 40%; max-width: 14px; border-radius: 4px 4px 0 0; min-height: 2px; }
.bd-barras i.r, .bd-legenda i.r { background: var(--c-imposto); }
.bd-barras i.g, .bd-legenda i.g { background: var(--c-economy); }
.bd-mes > span { font-size: 11px; color: var(--suave); }
.bd-legenda { position: absolute; bottom: 0; right: 0; display: flex; gap: 12px; font-size: 11px; color: var(--suave); }
.bd-legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; }
.inicio-dividas { cursor: pointer; width: 100%; box-sizing: border-box; font: inherit; background: transparent; text-align: left; margin-top: 4px; }
.inicio-dividas small { color: var(--suave); margin-left: 6px; }
.inicio-dividas .suave { margin-left: auto; }
.inicio-cartao .inicio-lista small.alerta-txt { color: var(--ouro); }
.tabela-extrato th, .tabela-extrato td.txt { text-align: left; }
.tabela-extrato th:last-child { text-align: right; }
/* ---- Recorrentes (lista enxuta) */
.rec-resumo { margin: 6px 0 12px; color: var(--tinta-2); font-size: 13.5px; }
.rec-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.rec-item { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(150px, auto) auto; gap: 6px 16px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--borda); }
.rec-item.sel { background: color-mix(in srgb, var(--ouro) 8%, transparent); }
.rec-nome { display: grid; gap: 3px; min-width: 0; }
.rec-nome small { font-size: 12px; color: var(--suave); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rec-valor { font-family: var(--mono); text-align: right; white-space: nowrap; }
.rec-situacao { text-align: right; }
.rec-acoes { display: flex; gap: 6px; justify-content: flex-end; }
.rec-sub { margin: 18px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--suave); }
.rec-nota { margin-top: 12px; }
.rec-historico summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: baseline; }
.rec-historico[open] summary { margin-bottom: 10px; }
@media (max-width: 640px) {
  .rec-item { grid-template-columns: minmax(0, 1fr) auto; }
  .rec-situacao { text-align: left; }
}
/* ---- Contas a pagar (compacto e alinhado) */
.cap-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.cap-linha { display: grid; grid-template-columns: 44px minmax(0, 1fr) 118px 30px; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--borda); }
.cap-linha.paga { grid-template-columns: 24px minmax(0, 1fr) 118px; }
.cap-data { display: grid; justify-items: center; line-height: 1; padding: 5px 0; border-radius: 8px; background: var(--superficie-2); }
.cap-data b { font-family: var(--mono); font-size: 16px; }
.cap-data small { font-size: 10.5px; color: var(--suave); text-transform: uppercase; margin-top: 2px; }
.cap-linha.perto .cap-data { box-shadow: inset 0 0 0 1px var(--eixo); }
.cap-linha.urgente .cap-data { background: color-mix(in srgb, var(--ouro) 25%, transparent); }
.cap-linha.atrasada .cap-data { background: color-mix(in srgb, var(--critico) 25%, transparent); }
.cap-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.cap-nome small { font-weight: 400; color: var(--suave); font-size: 12px; margin-left: auto; padding-left: 8px; }
.cap-boleto svg { width: 12px; height: 12px; color: var(--ouro); vertical-align: middle; }
.cap-valor { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; font-size: 13.5px; }
.cap-acao { display: flex; justify-content: flex-end; }
.cap-pagar { all: unset; cursor: pointer; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--borda); color: var(--tinta-2); }
.cap-pagar:hover, .cap-pagar:focus-visible { border-color: var(--bom); color: var(--bom); outline: none; }
.cap-pagar svg { width: 15px; height: 15px; }
.cap-ok { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--c-imposto) 22%, transparent); color: var(--c-imposto); font-size: 11px; font-weight: 700; }
/* ---- Rosca: período e categoria clicável */
.cabeca-rosca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.cabeca-rosca h2 { margin: 0; }
.mini-abas { display: inline-flex; border: 1px solid var(--borda); border-radius: 9px; overflow: hidden; }
.mini-abas button { all: unset; cursor: pointer; padding: 4px 11px; font-size: 12.5px; font-weight: 600; color: var(--suave); }
.mini-abas button[aria-pressed="true"] { background: color-mix(in srgb, var(--ouro) 22%, transparent); color: var(--tinta); }
.mini-abas button:focus-visible { outline: 2px solid var(--ouro); outline-offset: -2px; }
.legenda-item { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; width: 100%; min-width: 0;
  padding: 3px 6px; margin: 0 -6px; border-radius: 7px; font-size: 13px; color: var(--tinta-2); }
.legenda-item b { white-space: nowrap; text-align: right; color: var(--tinta); }
.legenda-item:hover, .legenda-item:focus-visible, .legenda-item.ativo { background: var(--superficie-2); outline: none; }
.rosca .fatia[data-cat-detalhe] { cursor: pointer; }
.dica-rosca { margin-top: 8px; font-size: 12px; }
.painel-categoria h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.painel-categoria h2 small { font-weight: 400; font-size: 13px; }
.amostra-cat { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.troca-cat { display: flex; gap: 6px; align-items: center; min-width: 230px; }
.troca-cat .combo { flex: 1 1 auto; }
.troca-cat .combo-texto { width: 100%; padding: 6px 9px; font-size: 13px; }
.lanc-cartao.ignorado { opacity: 0.6; }
.lanc-cartao.ignorado .lanc-valor { text-decoration: line-through; }
tr.linha-pagamento td { background: color-mix(in srgb, var(--c-imposto) 7%, transparent); }
tr.linha-pagamento.anterior td { opacity: 0.6; background: none; }
/* ---- Leitura do extrato/print de investimento */
.envio-inv { cursor: pointer; }
.leitura-inv { grid-column: 1 / -1; display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); font-size: 13.5px; }
.leitura-inv.erro { color: var(--critico); }
.leitura-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.leitura-opcoes small { color: inherit; opacity: 0.75; font-weight: 400; margin-left: 4px; }
.acao.desabilitada { opacity: 0.5; cursor: default; }
.zona-colar { min-height: 64px; padding: 12px; border: 2px dashed var(--eixo); border-radius: 10px; color: var(--suave); font-size: 13px; outline: none; }
.zona-colar:focus { border-color: var(--ouro); color: var(--tinta-2); }
/* ---- Caixa do mês e detalhe do mês */
.grafico.clicavel .alvo { cursor: pointer; }
.caixa-conta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0; }
.caixa-conta > span { display: grid; gap: 2px; }
.caixa-conta small { font-size: 11.5px; color: var(--suave); text-transform: uppercase; letter-spacing: 0.04em; }
.caixa-conta b { font-family: var(--mono); font-size: 18px; }
.caixa-conta b.bom, .caixa-fim.bom b { color: var(--bom); }
.caixa-fim.ruim b { color: var(--critico); }
.caixa-conta > i { font-style: normal; color: var(--suave); font-size: 18px; }
.caixa-fim { padding: 6px 12px; border-radius: 10px; background: var(--superficie-2); }
.caixa-listas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px; }
.caixa-listas h3 { margin: 0 0 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--suave); }
.caixa-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.caixa-lista li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; }
.caixa-lista li > span { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.caixa-lista small { color: var(--suave); font-size: 11.5px; }
.caixa-lista b { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.det-receita summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--borda); }
.det-receita summary b { font-family: var(--mono); }
.det-receita[open] summary { border-bottom-color: transparent; }
.det-receita .caixa-lista { padding-left: 14px; margin-bottom: 6px; }
.parcelas-do-mes { margin: 4px 0 16px; padding: 12px 14px; border-radius: 10px; background: var(--superficie-2); }
.parcelas-do-mes h3 { margin: 0; font-size: 14px; }
/* ---- Fluxo de caixa */
.fluxo-resumo { font-size: 14px; color: var(--tinta-2); }
.fluxo-resumo b { font-family: var(--mono); font-size: 16px; }
.fluxo-resumo b.bom, .tabela-fluxo .bom { color: var(--bom); }
.fluxo-resumo b.ruim, .tabela-fluxo .ruim { color: var(--critico); }
.tabela-fluxo { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.tabela-fluxo td { padding: 7px 6px; border-bottom: 1px solid var(--borda); }
.tabela-fluxo td:first-child { width: 56px; color: var(--suave); font-family: var(--mono); font-size: 13px; }
.tabela-fluxo td.num { text-align: right; font-family: var(--mono); white-space: nowrap; width: 130px; }
.tabela-fluxo tr.fluxo-hoje td { font-weight: 700; background: var(--superficie-2); }
.tabela-fluxo td.txt { text-align: left; }
.caixa-lista li > span b { font-family: inherit; font-weight: 600; }
/* ---- Fatura: quadros clicáveis */
.bloco.clicavel { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.bloco.clicavel:hover { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.bloco.clicavel.ativo { outline: 2px solid currentColor; outline-offset: -2px; }
.lista-fatura-cabeca { margin-top: 10px; }
/* ---- Fluxo: linha prevista e gráfico */
.tabela-fluxo tr.fluxo-previsao td { color: var(--suave); font-style: italic; border-top: 1px dashed var(--borda); }
.linha-hoje { stroke: var(--suave); stroke-dasharray: 2 3; }
.rotulo-hoje { fill: var(--suave); font-size: 11px; }
/* ---- Plano financeiro */
.plano-etapas { display: grid; gap: 10px; margin: 12px 0; }
.plano-etapa { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda); opacity: .65; }
.plano-etapa.atual { opacity: 1; background: var(--superficie-2); border-color: var(--c-imposto); }
.plano-etapa.feita { opacity: .85; }
.plano-etapa > div { display: grid; gap: 2px; }
.plano-etapa small { color: var(--suave); font-size: 12.5px; }
.plano-etapa em { font-style: normal; font-weight: 600; font-size: 13px; font-family: var(--mono); }
.plano-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--superficie-2); border: 1px solid var(--borda); }
.plano-etapa.atual .plano-num { background: var(--c-imposto); color: #fff; border-color: transparent; }
.plano-dicas { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; }
/* ---- Faturas fechadas (recolhidas) */
.faturas-fechadas > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 12px; }
.faturas-fechadas > summary::-webkit-details-marker { display: none; }
.faturas-fechadas > summary h2 { margin: 0; }
.faturas-fechadas > summary::before { content: "▸"; color: var(--suave); transition: transform .15s; }
.faturas-fechadas[open] > summary::before { transform: rotate(90deg); }
.faturas-fechadas[open] > summary { margin-bottom: 10px; }
/* ---- Fluxo no Orçamento: o que já aconteceu */
.tabela-fluxo tr.fluxo-secao td { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); padding-top: 10px; }
.tabela-fluxo tr.fluxo-feito td { color: var(--suave); }
/* ---- Extrato: período */
.periodo-extrato { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 8px 0; }
.periodo-extrato label { display: grid; gap: 2px; font-size: 12px; color: var(--suave); }

/* ---- Celular: o topo não fica preso na tela e as abas viram uma linha que desliza para o lado */
@media (max-width: 720px) {
  .topo { position: static; padding: 8px 12px 0; }
  .logo { width: 32px; height: 32px; }
  .marca-nome { font-size: 17px; }
  .marca-sub { font-size: 9px; }
  .topo-acoes { gap: 4px; }
  .topo-acoes .botao-engrenagem { width: 32px; height: 32px; }
  .topo-acoes .botao-tema { padding: 4px 8px; font-size: 12px; }
  .topo-contexto { margin-top: 8px; }
  .abas { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 6px -12px 0; padding: 0 12px; scroll-padding-inline: 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent); }
  .abas::-webkit-scrollbar { display: none; }
  .abas button { flex: none; padding: 7px 9px 8px; font-size: 12.5px; gap: 5px; }
  .abas button .selo-ic { width: 19px; height: 19px; }
}
/* ---- Celular: rosca em cima, legenda inteira embaixo (a regra de duas colunas acima vale só para tela larga) */
@media (max-width: 560px) {
  .rosca { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; }
  .rosca svg { max-width: 190px; }
  .rosca > .legenda { width: 100%; }
  .legenda-item, .legenda-coluna > span { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .cap-linha { grid-template-columns: 40px minmax(0, 1fr) auto 26px; gap: 8px; }
  .cap-linha.paga { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .cap-nome { white-space: normal; flex-wrap: wrap; line-height: 1.25; font-size: 13.5px; }
  .cap-nome small { margin-left: 0; padding-left: 0; flex-basis: 100%; }
}
#form-tetos td.ruim { color: var(--critico); font-weight: 600; }
#form-tetos td.atencao { color: var(--ouro); }

/* ---- Orçamento: execução do mês, alertas, plano e tetos */
.titulo-secao { margin: 22px 0 10px; font-size: 18px; }
.exec-barra { position: relative; display: block; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--tinta) 10%, transparent); }
.exec-uso { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--eixo); }
.exec-barra.bom .exec-uso { background: var(--bom); }
.exec-barra.atencao .exec-uso { background: var(--ouro); }
.exec-barra.critico .exec-uso { background: var(--critico); }
.exec-barra.neutro .exec-uso { background: color-mix(in srgb, var(--tinta) 45%, transparent); }
.exec-ritmo { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--tinta); border-radius: 2px; }
.mes-andamento > .exec-barra { margin: 4px 0 14px; height: 6px; }
.andamento-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.andamento-tile { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--superficie-2); border-left: 3px solid var(--eixo); }
.andamento-tile.bom { border-left-color: var(--bom); }
.andamento-tile.atencao { border-left-color: var(--ouro); }
.andamento-tile.critico { border-left-color: var(--critico); }
.andamento-tile small { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.andamento-tile b { font-family: var(--mono); font-size: 20px; font-variant-numeric: tabular-nums; }
.andamento-tile b span { font-family: inherit; font-size: 12.5px; font-weight: 400; color: var(--suave); }
.andamento-tile.critico > b { color: var(--critico); }
.andamento-tile em { font-style: normal; font-size: 12.5px; color: var(--suave); }
.alertas-orc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alertas-orc li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 9px 12px; border-radius: 10px; background: var(--superficie-2); font-size: 13.5px; line-height: 1.45; }
.alerta-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; background: var(--eixo); }
.alertas-orc li.al-critico .alerta-ic { background: var(--critico); }
.alertas-orc li.al-atencao .alerta-ic { background: var(--ouro); color: #2a1d05; }
.alertas-orc li.al-bom .alerta-ic { background: var(--bom); }
.alertas-orc li.al-dica .alerta-ic { background: #3987e5; }
.plano-objetivo { margin: 4px 0 14px; font-size: 14.5px; }
.fases { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.fases li { display: grid; gap: 2px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--borda); opacity: .6; }
.fases li.atual { opacity: 1; border-color: var(--ouro); background: color-mix(in srgb, var(--ouro) 10%, transparent); }
.fases li.feita { opacity: .8; }
.fases li.feita b::after { content: " ✓"; color: var(--bom); }
.fases small { color: var(--suave); font-size: 12px; }
.fase-atual h3, .alivio h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.metas { list-style: none; margin: 0 0 16px; padding: 0; display: grid; }
.metas li { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; }
.metas li b { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.meta-texto { display: grid; gap: 6px; }
.meta-marca { width: 10px; height: 10px; border-radius: 50%; background: var(--eixo); }
.metas li.bom .meta-marca { background: var(--bom); }
.metas li.atencao .meta-marca { background: var(--ouro); }
.metas li.critico .meta-marca { background: var(--critico); }
.metas li.andamento .meta-marca { background: #3987e5; }
.metas li.texto .meta-marca { background: transparent; border: 2px solid var(--eixo); }
.alivio ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; }
.alivio li { display: grid; grid-template-columns: 64px 1fr auto; gap: 4px 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; }
.alivio li b { font-family: var(--mono); color: var(--bom); }
.alivio li small { grid-column: 2 / -1; color: var(--suave); font-size: 12px; }
.alivio-mes { font-family: var(--mono); font-weight: 600; }
.exec-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.exec-lista li { display: grid; grid-template-columns: minmax(150px, 220px) 1fr minmax(120px, auto) auto; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.exec-valor { display: grid; justify-items: end; line-height: 1.2; }
.exec-valor b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.exec-lista li.critico .exec-valor b { color: var(--critico); }
.exec-lista li.atencao .exec-valor b { color: var(--ouro); }
.exec-valor small { color: var(--suave); font-size: 12px; }
.exec-lista input { width: 96px; }
.resumo-plano { margin: 10px 0 0; font-size: 13px; color: var(--suave); }
@media (max-width: 560px) {
  .exec-lista li { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .exec-lista .exec-barra { grid-column: 1 / -1; grid-row: 2; }
  .exec-lista input { grid-column: 1 / -1; }
  .metas li { grid-template-columns: 14px 1fr; }
  .metas li b { grid-column: 2; }
}
.ritmo-plano { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--superficie-2); }
.ritmo-plano.bom { color: var(--bom); }
.ritmo-plano.ruim { color: var(--ouro); }
.aviso-extra { margin: 0 0 12px; }
.metas li.marcavel { cursor: pointer; }
.metas li.marcavel:hover { background: color-mix(in srgb, var(--tinta) 4%, transparent); }
.metas li.bom .meta-texto > span:first-child { text-decoration: none; }

/* ---- Celular: fluxo de caixa e tabelas do orçamento cabem na tela (a descrição quebra a linha; o valor não) */
.fluxo-caixa, .dupla > .cartao { overflow-x: auto; }
@media (max-width: 560px) {
  .tabela-fluxo { font-size: 12px; }
  .tabela-fluxo th, .tabela-fluxo td { padding: 6px 4px; }
  .tabela-fluxo td:first-child { position: static; min-width: 0; width: 42px; max-width: 52px; font-weight: 500; }
  .tabela-fluxo tr.fluxo-secao td:first-child { width: auto; max-width: none; }
  .tabela-fluxo td.txt, .tabela-fluxo tr.fluxo-feito td:last-child { white-space: normal; }
  .tabela-fluxo td.num { white-space: nowrap; }
  .fluxo-caixa .cap-cabeca { flex-wrap: wrap; }
  .dupla table td:first-child, .dupla table th:first-child { min-width: 0; }
  .dupla .chip { font-size: 11px; padding: 2px 8px; }
}
@media (max-width: 560px) {
  .tabela-fluxo th, .tabela-fluxo td { padding: 6px 3px; }
  .dupla table th, .dupla table td { padding: 6px 5px; }
  .mini-abas { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .tabela-fluxo td.col-saldo { display: none; }
  .tabela-fluxo .saldo-cel { font-size: 11px; color: var(--suave); font-style: normal; }
  .tabela-fluxo .saldo-cel.ruim { color: var(--critico); }
  .tabela-fluxo tr.fluxo-secao td { font-size: 11px; }
}

/* ---- Receitas de autônomo (projetos) */
.projeto .projeto-numeros { display: grid; gap: 8px; margin: 8px 0 10px; font-size: 13.5px; }
.projeto .projeto-numeros .aviso { margin: 0; }
.agenda-projeto { list-style: none; margin: 0 0 8px; padding: 0; display: grid; }
.agenda-projeto li { display: grid; grid-template-columns: 100px 120px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; }
.agenda-projeto b { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.selo-ag { justify-self: start; font-size: 12px; padding: 2px 9px; border-radius: 99px; background: var(--superficie-2); color: var(--suave); }
.selo-ag.bom { color: var(--bom); } .selo-ag.atencao { color: var(--ouro); } .selo-ag.ruim { color: var(--critico); }
.recebimentos summary { cursor: pointer; font-size: 13px; color: var(--suave); padding: 4px 0; }
.recebimentos ul, .sem-projeto { list-style: none; margin: 0; padding: 0; display: grid; }
.recebimentos li, .sem-projeto li { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 13px; }
.sem-projeto li { grid-template-columns: 52px 1fr auto minmax(140px, 220px) auto; }
.recebimentos b, .sem-projeto b { font-family: var(--mono); }
.projeto-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.projeto-filho { margin: 12px 0 0 14px; padding-left: 12px; border-left: 2px solid var(--borda); }
.projeto-filho > .cartao { box-shadow: none; margin: 0; padding: 10px 0 0; background: transparent; border: 0; }
.projeto.simples h2 { font-size: 15px; }
.agenda-edit { grid-column: 1 / -1; display: grid; gap: 6px; }
.agenda-linha { display: flex; gap: 8px; align-items: center; }
.agenda-linha input { max-width: 170px; }
.form-botoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) {
  .agenda-projeto li { grid-template-columns: 1fr auto; }
  .agenda-projeto .selo-ag { grid-column: 1 / -1; }
  .recebimentos li, .sem-projeto li { grid-template-columns: 1fr auto; }
  .sem-projeto select { grid-column: 1; }
}

/* ---- PIX da conta da ENEL */
.qr-mini { display: inline-grid; place-items: center; width: 52px; height: 52px; padding: 3px; margin: 2px 3px; vertical-align: middle;
  border: 1px solid var(--borda); border-radius: 8px; background: #fff; cursor: pointer; }
.qr-mini img { width: 44px; height: 44px; display: block; }
.qr-mini:hover, .qr-mini:focus-visible { outline: 2px solid var(--ouro); outline-offset: 1px; }
.dialogo-pix { border: 1px solid var(--borda); border-radius: 14px; padding: 18px; width: min(360px, calc(100vw - 32px));
  background: var(--superficie); color: var(--tinta); }
.dialogo-pix::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialogo-pix .pix-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dialogo-pix p { margin: 6px 0; }
.pix-grande { display: block; width: 240px; height: 240px; margin: 10px auto; padding: 8px; background: #fff; border-radius: 10px; }
.pix-valor { text-align: center; font-family: var(--mono); font-size: 22px; font-weight: 700; }
.pix-codigo { display: grid; gap: 4px; font-size: 12px; color: var(--suave); margin: 8px 0; }
.pix-codigo textarea { width: 100%; font-family: var(--mono); font-size: 11px; resize: none; word-break: break-all; }
.dialogo-pix .acao.principal { width: 100%; justify-content: center; }

/* ---- Ovos */
.ovo-texto { display: grid; gap: 8px; }
.ovo-texto textarea { width: 100%; font-size: 16px; padding: 10px; border-radius: 10px; }
.ovo-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ovo-linha input[type="number"] { width: 84px; }
.ovo-linha label { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--suave); }
.ovo-previa { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--superficie-2); display: grid; gap: 8px; }
.ovo-previa h3 { margin: 0; font-size: 14px; }
.ovo-previa-linha { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto 32px; gap: 8px; align-items: center; }
.previa-info { display: inline-flex; gap: 8px; align-items: center; }
.ovo-previa-linha input { min-width: 0; }
.ovo-atalhos { display: grid; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borda); }
.ovo-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.ovo-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.ovo-lista li > span { display: grid; gap: 2px; min-width: 0; }
.ovo-lista small { color: var(--suave); font-size: 12px; }
.ovo-lista li:has(select) { grid-template-columns: minmax(0, 1fr) auto; }
.ovo-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; text-align: right; }
.ovo-num.ruim { color: var(--critico); } .ovo-num.bom { color: var(--bom); }
.tabela-ovos td.ruim { color: var(--critico); } .tabela-ovos td.bom { color: var(--bom); }
@media (max-width: 560px) {
  .ovo-previa-linha { grid-template-columns: minmax(0, 1fr) 64px 32px; }
  .ovo-previa-linha .previa-info { grid-column: 1 / -1; grid-row: 2; }
  .ovo-lista li { grid-template-columns: minmax(0, 1fr) auto; }
  .ovo-lista li > button, .ovo-lista li > select { grid-column: 1 / -1; justify-self: start; }
}
.ovo-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ovo-acoes select { flex: 1 1 140px; min-width: 0; }
/* ---- Dívidas: reserva dos ovos */
.reserva-ovos h3 { margin: 12px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.plano-amortizar { list-style: none; margin: 0 0 8px; padding: 0; display: grid; }
.plano-amortizar li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; }
.plano-amortizar li > span, .plano-amortizar li > b { display: grid; gap: 2px; }
.plano-amortizar small { color: var(--suave); font-size: 12px; font-weight: 400; }
.plano-amortizar li > b { font-family: var(--mono); text-align: right; }
@media (max-width: 560px) { .plano-amortizar li { grid-template-columns: 1fr auto; } .plano-amortizar li > span:first-child { grid-column: 1 / -1; } }
/* ---- Ovos: moeda, edição e desfazer */
.campo-moeda { display: inline-flex; align-items: center; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie-2); padding-left: 8px; }
.campo-moeda > span { color: var(--suave); font-size: 13px; }
.campo-moeda input { border: 0; background: transparent; width: 92px; padding: 6px 8px 6px 4px; font-family: var(--mono); }
.campo-moeda:focus-within { outline: 2px solid var(--ouro); outline-offset: 1px; }
.barra-desfazer { position: sticky; top: 8px; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px;
  padding: 10px 14px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--ouro); }
.linha-edicao td, li.linha-edicao { background: color-mix(in srgb, var(--ouro) 8%, transparent); }
li.linha-edicao { display: block !important; padding: 10px 8px !important; border-radius: 8px; }
.ovo-receber { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; border-radius: 10px; background: var(--superficie-2); }
.ovo-receber select { flex: 1 1 200px; min-width: 0; }
.campo-moeda input { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* ---- Freelancer */
.invoice-resumo { display: grid; gap: 4px; margin: 6px 0 10px; font-size: 13.5px; color: var(--suave); }
.invoice-total { font-family: var(--mono); font-size: 22px; color: var(--tinta); }
.painel-nota { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--superficie-2); display: grid; gap: 8px; }
.painel-nota h3 { margin: 0; font-size: 14px; }
.nota-campo { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; }
.nota-campo small { color: var(--suave); }
.invoice-linha input[name^="it-desc"] { flex: 1 1 200px; min-width: 0; }
.invoice-linha input[name^="it-qtd"] { width: 70px; }
@media (max-width: 560px) { .nota-campo { grid-template-columns: 1fr auto; } .nota-campo small { grid-column: 1 / -1; } }
/* ---- Freelancer: cadastro em cartões */
.cad-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.cad-cartao { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie-2); }
.cad-cartao > .acao { justify-self: start; }
.cad-topo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.cad-dados { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px; }
.cad-dados dt { color: var(--suave); }
.cad-dados dd { margin: 0; overflow-wrap: anywhere; }
.cad-form { grid-column: 1 / -1; padding: 14px; border-radius: 12px; border: 1px solid var(--ouro); }
.cad-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.cad-linha input:first-child { flex: 0 1 200px; min-width: 0; }
.cad-linha input:nth-child(2) { flex: 1 1 220px; min-width: 0; }
.cad-form .agenda-linha input { max-width: none; }
.cad-form .cad-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 6px; }
.cad-form .cad-linha input { min-width: 0; width: 100%; }
.texto-relatorio { margin: 0; padding: 12px; border-radius: 8px; background: var(--superficie); font-family: var(--mono); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sub-titulo { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }

/* Ovos: lotes */
.lote h3 { margin: 12px 0 6px; font-size: 0.95rem; }
.lote-contas li { padding-block: 6px; }
.lote-conf { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.lote-conf li { display: flex; gap: 8px; align-items: baseline; }
.lote-conf li > span:first-child { flex: 0 0 1.2em; font-weight: 700; text-align: center; }
.lote-conf li.conf-ok > span { color: var(--bom); }
.lote-conf li.conf-falta > span { color: var(--critico); }
.lote-sobra { margin-bottom: 10px; }
.lote-fechado { border-top: 1px solid var(--borda); padding-block: 8px; }
.lote-fechado summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lote-fechado .lote-arquivo { box-shadow: none; border: 0; padding-inline: 0; }
.lote-atual p { margin: 4px 0; }
.lote-contas span.bom { color: var(--bom); }
.lote-contas span.ruim { color: var(--critico); }
.lote-conf-texto { flex: 1 1 auto; min-width: 0; }
.lote-conf li.conf-info { color: var(--suave); }

/* Ovos: entregas por bloco do prédio */
.ovo-bloco + .ovo-bloco { margin-top: 14px; }
.ovo-bloco-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--borda); }
.ovo-bloco-cabeca h3 { margin: 0; font-size: 1rem; }
.ovo-bloco-cabeca .acao { margin-left: auto; }

/* Ovos: lista de entrega no celular — quantidade grande e botão "Entregue" grande e centralizado */
.ovo-entregas li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; padding-block: 12px; }
.ovo-entregas li > span b { font-size: 16px; }
.ovo-qtd-grande { display: flex; align-items: baseline; gap: 6px; font-family: var(--mono); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.ovo-qtd-grande small { font-family: inherit; font-size: 14px; color: var(--suave); }
.ovo-lista.ovo-entregas li > button.botao-entregue { grid-column: 1 / -1; justify-self: center; width: min(100%, 260px); min-height: 44px; font-size: 16px; font-weight: 700; border-radius: 12px; }
.ovo-entregas .ovo-adiantado { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ovo-entregas .ovo-receber { grid-column: 1 / -1; }

/* Ovos: conferência do saldo do PagBank */
.conf-saldo li { grid-template-columns: minmax(0, 1fr) auto; }
.conf-saldo li.total { border-top: 2px solid var(--borda); font-weight: 700; }
.conf-saldo li.atencao .ovo-num { color: var(--ouro); }
.tabela-conciliar td .selo-ag { white-space: nowrap; }

/* Ovos: lista do que falta entregar, para o WhatsApp */
.whats-painel { display: grid; gap: 10px; margin-block: 8px 14px; padding: 12px; border-radius: 12px; background: var(--superficie-2); }
.whats-balao { justify-self: start; max-width: 100%; padding: 10px 12px; border-radius: 10px 10px 10px 2px; background: #dcf8c6; color: #111b21;
  font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }
.whats-texto { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Minhas contas (energia): agrupadas por unidade */
.unidade-contas + .unidade-contas { margin-top: 16px; }
.unidade-contas h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; font-size: 1rem; }
.unidade-contas h3 .sub { font-weight: 400; }
.unidade-contas .unidade-total { margin-left: auto; font-variant-numeric: tabular-nums; }
.contas-pagas { margin-top: 18px; border-top: 1px solid var(--borda); padding-top: 10px; }
.contas-pagas > summary { cursor: pointer; font-weight: 600; padding-block: 6px; }

/* Freelancer: recibo do adiantamento e conferência reports = invoice + recibos */
.conf-invoice { margin: 8px 0 0; font-weight: 600; }
.conf-invoice.bom { color: var(--bom); } .conf-invoice.ruim { color: var(--critico); }
.recibo + .recibo { margin-top: 12px; }
.recibo-cabeca { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 4px; }
.recibo-contas li { grid-template-columns: minmax(0, 1fr) auto; padding-block: 6px; }
.botao-arquivo { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }

.recibo-contas li.sub-total { font-weight: 600; }
/* Freelancer: reports agrupados por invoice */
.grupo-reports { border-bottom: 1px solid var(--borda); }
.grupo-reports > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding-block: 10px; cursor: pointer; list-style: none; }
.grupo-reports > summary::-webkit-details-marker { display: none; }
.grupo-reports > summary .grupo-titulo { display: grid; gap: 2px; }
.grupo-reports > summary .grupo-titulo b::before { content: "▸ "; color: var(--suave); }
.grupo-reports[open] > summary .grupo-titulo b::before { content: "▾ "; }
.grupo-reports > summary small { color: var(--suave); font-size: 12px; }
.grupo-reports > summary .selo-ag { grid-column: 1 / -1; justify-self: start; }
.grupo-reports > ul { padding-bottom: 8px; }

/* Freelancer: cartão do invoice com a lista de pagamentos */
.invoice-linha { margin: 4px 0 10px; color: var(--suave); }
.invoice-linha b { color: var(--texto, inherit); }
.pagamentos-invoice { list-style: none; margin: 0 0 12px; padding: 0; display: grid; }
.pag-item { display: grid; grid-template-columns: 1.4em minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borda); }
.pag-item:last-child { border-bottom: 1px solid var(--borda); }
.pag-marca { font-weight: 700; color: var(--suave); text-align: center; }
.pag-item.feito .pag-marca { color: var(--bom); }
.pag-texto { display: grid; gap: 2px; min-width: 0; }
.pag-texto small { color: var(--suave); font-size: 12px; }
.pag-item > .acao, .pag-item > .botao-arquivo { grid-column: 2 / -1; justify-self: start; }
.pag-detalhe { grid-column: 1 / -1; padding: 8px 10px; border-radius: 10px; background: var(--superficie-2); }
.mais-acoes { position: relative; }
.mais-acoes > summary { list-style: none; cursor: pointer; }
.mais-acoes > summary::-webkit-details-marker { display: none; }
.mais-acoes[open] > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mais-acoes > summary { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px; border: 1px solid var(--borda); border-radius: 999px; font-size: 12px; font-weight: 600; }
.ovo-entregas li > button.botao-cancelou { grid-column: 1 / -1; justify-self: center; background: none; border: 0; color: var(--suave); text-decoration: underline; min-height: 32px; }

/* Ovos: botão do relatório para o WhatsApp em azul discreto, para se destacar dos outros */
button.acao.botao-whats { background: color-mix(in srgb, var(--ic-azul) 16%, transparent); border-color: color-mix(in srgb, var(--ic-azul) 55%, transparent); color: var(--ic-azul); }
button.acao.botao-whats[aria-expanded="true"] { background: color-mix(in srgb, var(--ic-azul) 26%, transparent); }
.whats-modo { justify-self: start; }
.whats-modo button[aria-pressed="true"] { background: color-mix(in srgb, var(--ic-azul) 24%, transparent); }
:root[data-tema="claro"] button.acao.botao-whats { color: #2c66b8; border-color: #8fb6ee; }
.ovo-bloco.ovo-bloco-fora { margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--borda); }

/* Ovos: ficha do cliente */
.link-cliente { all: unset; cursor: pointer; font-weight: 600; text-decoration: underline; text-decoration-color: var(--borda); text-underline-offset: 3px; }
.link-cliente:focus-visible { outline: 2px solid var(--ouro); border-radius: 4px; }
.ficha-cliente h2 { margin: 10px 0 4px; }
.ficha-resumo { margin: 0; color: var(--suave); }
.ficha-lote + .ficha-lote { margin-top: 14px; }
.ficha-lote h3 { margin: 0 0 4px; font-size: 1rem; }
.escondido { display: none !important; }

/* Energia: arquivos importados, recolhidos e por mês */
.importacoes > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; cursor: pointer; list-style: none; }
.importacoes > summary::-webkit-details-marker, .importacoes-mes > summary::-webkit-details-marker { display: none; }
.importacoes > summary h2 { margin: 0; }
.importacoes > summary h2::before { content: "▸ "; color: var(--suave); }
.importacoes[open] > summary h2::before { content: "▾ "; }
.importacoes[open] > summary { margin-bottom: 10px; }
.importacoes-mes { border-top: 1px solid var(--borda); }
.importacoes-mes > summary { display: flex; gap: 10px; align-items: baseline; padding-block: 10px; cursor: pointer; list-style: none; }
.importacoes-mes > summary b::before { content: "▸ "; color: var(--suave); }
.importacoes-mes[open] > summary b::before { content: "▾ "; }
.zona-perigo > summary { cursor: pointer; color: var(--suave); font-weight: 600; }
.zona-perigo[open] > summary { margin-bottom: 8px; }

/* Finanças: carteira de investimentos */
.abas-inv { margin-bottom: 12px; }
.inv-resumo { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; }
.inv-resumo small { color: var(--suave); }
.tabela-carteira td, .tabela-carteira th { white-space: nowrap; }
.tabela-carteira td.txt { white-space: normal; min-width: 180px; }
.tabela-carteira .grupo-cabeca td { padding-top: 16px; font-weight: 700; border-bottom: 1px solid var(--borda); }
.tabela-carteira .grupo-cabeca .suave { font-weight: 400; margin-left: 8px; }
.tabela-carteira .grupo-cabeca .amostra { margin-right: 6px; }
.tabela-carteira .inv-linha { cursor: pointer; }
.tabela-carteira .inv-linha:hover td { background: color-mix(in srgb, var(--ouro) 6%, transparent); }
.tabela-carteira .subtotal td { font-weight: 600; border-top: 1px solid var(--borda); background: color-mix(in srgb, var(--suave) 7%, transparent); }
.tabela-carteira .total-geral td { font-weight: 700; font-size: 1.05em; border-top: 2px solid var(--borda); }
.simulacao { margin: 4px 0 8px; }
.detalhe-rf p { margin: 4px 0; }
.graficos-inv h3 { margin: 18px 0 6px; font-size: 1rem; }
.barras-lucro { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.barras-lucro li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.barras-lucro .bl-trilho { position: relative; height: 12px; }
.barras-lucro .bl-trilho::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; border-left: 1px solid var(--borda); }
.barras-lucro i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.barras-lucro i.pos { left: 50%; background: var(--bom); }
.barras-lucro i.neg { right: 50%; background: var(--critico); }
.barras-lucro small { color: var(--suave); font-weight: 400; }
.tabela-carteira tr.linha-edicao td { white-space: normal; }

/* Carteira: cabeçalho fixo, categoria atual presa embaixo dele, cor por categoria e totais em destaque */
.rolagem-carteira { max-height: calc(100vh - 120px); overflow: auto; border-radius: 10px; }
.tabela-carteira thead th { position: sticky; top: 0; z-index: 3; background: var(--superficie-2); box-shadow: 0 1px 0 var(--borda); }
.tabela-carteira .grupo-cabeca td { position: sticky; top: 38px; z-index: 2; padding: 10px 12px; background: color-mix(in srgb, var(--cat) 22%, var(--superficie));
  border-left: 5px solid var(--cat); border-bottom: 0; }
.tabela-carteira .grupo-nome { font-size: 1.05em; font-weight: 800; color: var(--tinta, inherit); }
.tabela-carteira .grupo-info { margin-left: 10px; font-weight: 400; color: var(--suave); }
.tabela-carteira .grupo-info b { color: var(--tinta, inherit); }
.tabela-carteira .grupo-inv .inv-linha td:first-child { border-left: 5px solid color-mix(in srgb, var(--cat) 45%, transparent); }
.tabela-carteira .subtotal td { background: color-mix(in srgb, var(--cat) 14%, var(--superficie)); border-top: 2px solid var(--cat); font-weight: 700; }
.tabela-carteira .subtotal td:first-child { border-left: 5px solid var(--cat); }
.tabela-carteira .grupo-inv + .grupo-inv .grupo-cabeca td { border-top: 14px solid var(--superficie); }
.tabela-carteira tfoot td { position: sticky; bottom: 0; z-index: 3; background: color-mix(in srgb, var(--ouro) 20%, var(--superficie)); border-top: 2px solid var(--ouro); font-weight: 800; font-size: 1.05em; }
.relatorios-pdf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 12px; }
.relatorios-meses > summary { list-style: none; cursor: pointer; display: inline-flex; }
.relatorios-meses > summary::-webkit-details-marker { display: none; }
.relatorios-meses[open] > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tabela-carteira thead th { height: 38px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; vertical-align: middle; }
.tabela-carteira .grupo-cabeca td { top: 37px; }

/* Investimentos: logotipos, mapa da carteira e cotação ao vivo */
.inv-nome { display: flex; align-items: center; gap: 10px; }
.inv-nome > span:last-child { display: grid; gap: 2px; min-width: 0; }
.logo-inv { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 9px; overflow: hidden; display: grid; place-items: center;
  background: #fff; box-shadow: 0 0 0 1px var(--borda); }
.logo-inv img { width: 100%; height: 100%; object-fit: contain; }
.logo-inv.logo-sigla { background: var(--logo, var(--suave)); color: #fff; font: 800 10px/1 var(--mono, monospace); letter-spacing: 0.02em; box-shadow: none; }
.mapa-carteira { position: relative; width: 100%; aspect-ratio: 21 / 9; min-height: 220px; border-radius: 12px; overflow: hidden; background: var(--superficie-2); }
.mapa-bloco { position: absolute; box-sizing: border-box; padding: 6px 8px; border: 2px solid var(--superficie); border-radius: 8px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cor) 92%, #fff 8%), color-mix(in srgb, var(--cor) 70%, #000 30%));
  color: #fff; overflow: hidden; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); cursor: default; }
.mapa-bloco b { font-size: 12px; line-height: 1.15; }
.mapa-bloco span { font-size: 11px; opacity: 0.92; }
.mapa-bloco:hover { filter: brightness(1.12); }
.mapa-legenda { margin-top: 8px; flex-wrap: wrap; }
.cotacao-linha { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--suave); }
.cotacao-linha b { color: var(--tinta); }
.ponto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--bom); box-shadow: 0 0 0 0 color-mix(in srgb, var(--bom) 60%, transparent); animation: pulso 2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .ponto-vivo { animation: none; } }

/* Ficha de uma aplicação (aberta pelo mapa ou pelas barras de lucro) */
.mapa-bloco { cursor: pointer; }
.mapa-bloco.sel { outline: 3px solid var(--tinta); outline-offset: -3px; z-index: 1; }
.mapa-bloco:focus-visible { outline: 3px solid var(--ouro); outline-offset: -3px; }
.barras-lucro li { cursor: pointer; border-radius: 6px; padding: 2px 4px; }
.barras-lucro li:hover, .barras-lucro li.sel { background: color-mix(in srgb, var(--ouro) 12%, transparent); }
.ficha-inv { margin: 14px 0; padding: 14px 16px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borda); }
.ficha-inv-cabeca { display: flex; align-items: center; gap: 12px; }
.ficha-inv-cabeca h3 { margin: 0; }
.ficha-inv-cabeca > div { flex: 1; min-width: 0; }
.ficha-inv-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 16px; margin: 14px 0; }
.ficha-inv-dados div { display: grid; gap: 2px; }
.ficha-inv-dados dt { font-size: 12px; color: var(--suave); }
.ficha-inv-dados dd { margin: 0; font-variant-numeric: tabular-nums; }
.ficha-inv h4 { margin: 12px 0 4px; }
.ficha-inv-ops { max-height: 320px; overflow: auto; }
.proximo-lote { display: block; margin: 8px 0; }
.proximo-lote small { display: block; color: var(--suave); margin-left: 24px; }
.proximo-lote-lista > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }

/* Notas fiscais */
.nota-pendente { border-top: 1px solid var(--borda); padding-block: 8px; }
.nota-pendente > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.nota-pendente > summary .ovo-num { margin-left: auto; }
.nota-pendente h4 { margin: 12px 0 4px; font-size: 0.9rem; color: var(--suave); text-transform: uppercase; letter-spacing: 0.04em; }
.nota-pendente .nota-campo span { white-space: pre-line; }
.nf-ok { display: block; margin-top: 2px; }
.nf-ok a { color: var(--bom); text-decoration: none; font-weight: 600; }

/* Código no celular (autenticador) */
.qr-autenticador { width: 200px; max-width: 100%; background: #fff; padding: 8px; border-radius: 8px; margin-block: 8px; }
.qr-autenticador svg { width: 100%; height: auto; display: block; }
.cartao td.bom, .cartao b.bom { color: var(--bom); }
.cartao td.ruim, .cartao b.ruim { color: var(--critico); }
/* Campo de senha com o botão de olhinho (mostrar/esconder) */
.senha-campo { position: relative; display: block; }
.senha-campo input { width: 100%; padding-right: 40px; box-sizing: border-box; }
.ver-senha { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--suave); cursor: pointer; }
.ver-senha:hover, .ver-senha:focus-visible { color: var(--ouro); background: var(--superficie-2); }
.link-simples { justify-self: center; border: 0; background: none; padding: 4px; color: var(--suave); font-size: 13px; text-decoration: underline; cursor: pointer; }
.link-simples:hover { color: var(--ouro); }
.entrar h2 { margin: 0; }
.entrar .explica { margin: 0; }
.usuarios-lista td .botoes { display: flex; flex-wrap: wrap; gap: 6px; }

.novo-usuario { margin-top: 12px; }
.novo-usuario > summary { cursor: pointer; padding-block: 6px; }
.acao-usuario { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--superficie-2); }

.codigos-recuperacao { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 16px; margin-block: 12px; padding-left: 24px; }
.codigos-recuperacao code { font-size: 1.05rem; letter-spacing: 0.06em; }