/* Financeiro — os gráficos do painel (o de cima, Entradas e saídas, e o Meta e
   disponível) e a dica que aparece ao passar o dedo ou o mouse. Os SVG são
   desenhados nos app-grafico-*.js, na largura real do cartão, e redesenhados
   quando a tela muda de tamanho. O gráfico mês a mês saiu em 22/10/2026. */

.grafico{padding:12px 12px 10px;position:relative}
.grafico svg{width:100%;height:auto;overflow:visible}
.g-legenda{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--tinta-2);
font-weight:600;margin:0 2px 8px}
.g-legenda span{display:inline-flex;align-items:center;gap:6px}
/* A legenda que é o título do gráfico (23/10/2026): o jeito dos títulos do
   app — caixa alta, negrito, cinza — com a marca da cor de cada série. */
.g-legenda.g-titulo{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
margin:0 2px 10px;gap:6px 16px}
.g-titulo .g-chave:not(.linha){width:11px;height:11px}
/* Sem título por cima, o cartão Meta e disponível fica a um vão do de
   cima, como os cartões entre si. */
.bloco-grafico{margin-top:12px}
.g-chave{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.g-chave.linha{width:14px;height:3px;border-radius:2px}
/* O tracejado da meta: a cor vem do color do span (chave, app-graficos.js). */
.g-chave.tracejada{height:2px;border-radius:0;
background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px)}
.g-vazio{font-size:13.5px;color:var(--tinta-3);text-align:center;padding:30px 10px}

/* Texto do SVG: sempre na cor de texto, nunca na cor da série. */
.g-zero{stroke:var(--tinta-3);stroke-width:1;shape-rendering:crispEdges}
.g-alvo{fill:transparent;cursor:pointer}
.g-alvo:hover,.g-alvo.ativo{fill:rgba(21,32,43,.045)}

/* O tracejado da meta: o contorno da coluna da Meta no Meta e disponível. */
.g-meta{fill:none;stroke:var(--g-meta);stroke-width:2;stroke-dasharray:5 4;stroke-linejoin:round}

/* O gráfico da meta e do disponível (app-grafico-meta.js): YTD, mês e dia,
   cada um na sua escala. O valor vai na ponta de fora de cada coluna, o nome
   do grupo embaixo, e a meta é só o contorno tracejado (a classe g-meta,
   acima) sobre um fundo bem claro. */
.g-valor{font-size:13px;font-weight:700;fill:var(--tinta);font-variant-numeric:tabular-nums;
letter-spacing:-.2px;paint-order:stroke;stroke:var(--cartao);stroke-width:3px;stroke-linejoin:round}
.g-nome{font-size:12px;font-weight:600;fill:var(--tinta-2)}
.g-meta-fundo{fill:rgba(21,32,43,.06)}
.g-pe{font-size:11.5px;color:var(--tinta-3);margin:6px 2px 0}
/* O gráfico de cima (app-grafico-resultado.js): barras deitadas, o nome do
   grupo em cima ("Acumulado no ano", "Média mensal", "Média diária") e o
   número na ponta, vermelho quando o resultado é negativo. */
.resultado-grafico{position:relative}
.resultado-grafico svg{width:100%;height:auto;overflow:visible}
.g-valor.g-neg{fill:var(--neg)}
/* O gráfico da independência (app-grafico-independencia.js): embaixo da
   legenda, a linha de quanto guardar por mês. */
.g-sub{font-size:13.5px;color:var(--tinta-2);margin:-4px 2px 10px}
.g-sub b{color:var(--tinta);font-weight:700}
.g-vazio .btn-vazio{margin-top:12px}

/* A dica: segue o ponteiro no computador, aparece no toque no celular. */
.dica{position:fixed;z-index:70;pointer-events:none;background:var(--tinta);color:#fff;border-radius:10px;
padding:8px 11px;font-size:12.5px;line-height:1.45;box-shadow:var(--sombra-alta);max-width:250px}
.dica b{display:block;font-size:13px;margin-bottom:2px}
.dica .d-linha{display:flex;align-items:center;gap:7px;white-space:nowrap}
.dica .d-linha span:last-child{margin-left:auto;padding-left:12px;font-weight:700;font-variant-numeric:tabular-nums}
.dica .g-chave{width:9px;height:9px}
.dica .g-chave.linha{width:12px;height:3px}
/* A meta é escura como o fundo da dica: lá dentro o tracejado sai branco. */
.dica .g-chave.tracejada{height:2px;color:#fff!important}