/* Finance Planer — componentes compartilhados: Barra do Mês, formas da legenda, chips, alternadores,
   listas, números de resumo e progresso. Usado pelo sistema, pelo tour e pelo Simulador da landing.
   Regras (sistema.md 1.1): nada de position: fixed, vh/vw nem @media para layout; posição e tamanho
   que mudam entram por variável (data-vars) e o CSS só usa transform. Cor só com significado financeiro. */

/* 1. Formas da legenda: cada cor tem a sua (design.md 2.2). Dentro do painel valem os tons vivos. */
.fp-forma {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  position: relative;
}
.fp-forma--gasto { border-radius: 2px; background: var(--fp-gasto, var(--gasto)); }
.fp-forma--a-pagar {
  border-radius: 2px;
  background: repeating-linear-gradient(135deg, var(--fp-gasto, var(--gasto)) 0 2px, transparent 2px 4px);
  box-shadow: inset 0 0 0 1px var(--fp-gasto, var(--gasto));
}
.fp-forma--livre { border-radius: 2px; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .7; }
.fp-forma--limite { transform: rotate(45deg) scale(.86); background: var(--fp-limite, var(--limite)); }
.fp-forma--ideal { border-radius: 50%; background: var(--fp-ideal, var(--ideal)); }
.fp-forma--linha { width: 14px; height: 2px; vertical-align: middle; background: currentColor; }
/* Ritmo (só no sistema): linha neutra, tracejada e inclinada, como no gráfico. */
.fp-forma--ritmo { width: 14px; height: 0; vertical-align: middle; border-top: 2px dashed var(--texto-3); transform: rotate(-24deg); }

/* 2. Barra do Mês. Painel sempre grafite, nos dois temas: é onde a cor salta. */
.fp-barra {
  --fp-gasto: var(--painel-gasto);
  --fp-limite: var(--painel-limite);
  --fp-ideal: var(--painel-ideal);
  /* Frações 0..1 que chegam por data-vars / definirVars. */
  --pago: 0; --total: 0; --limite: 0; --ideal: 0; --proximo: 0;
  /* Geometria do gráfico: respiro acima (marcadores), abaixo e altura do trilho. */
  --g-topo: 12px; --g-base: 12px; --trilho-altura: 12px;

  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--e-4);
  min-height: 56px;
  padding: var(--e-2) var(--e-3) var(--e-2) var(--e-4);
  border-radius: var(--r-md);
  background: var(--painel);
  color: var(--painel-texto);
  font-family: var(--fonte);
  text-align: left;
}
.fp-barra :focus-visible { outline-color: var(--painel-texto); }

.fp-barra__topo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 40px;
  color: inherit;
  text-align: left;
}
/* Recolhida, o toque em qualquer ponto do painel abre os detalhes. */
.fp-barra:not(.fp-barra--expandida) .fp-barra__topo::after { content: ""; position: absolute; inset: 0; }
.fp-barra__principal { display: flex; flex-direction: column; gap: 2px; }
.fp-barra__rotulo, .fp-barra__mini-rotulo, .fp-barra__numero dt, .fp-barra__etiqueta {
  font-family: var(--fonte-mono);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--painel-texto-2);
}
.fp-barra__valor { font-size: 1.25rem; font-weight: 500; line-height: 1.05; letter-spacing: -.03em; white-space: nowrap; }
.fp-barra__abrir { display: inline-flex; color: var(--painel-texto-2); transition: transform var(--dur-2) var(--curva); }
.fp-barra__abrir .icone { width: 16px; height: 16px; }

.fp-barra__grafico { position: relative; min-width: 0; padding: var(--g-topo) 8px var(--g-base); }
.fp-barra__trilho {
  position: relative;
  height: var(--trilho-altura);
  border-radius: var(--r-pill);
  background: var(--painel-trilho);
  overflow: hidden;
}
/* As fatias têm a largura toda e deslizam para dentro: a hachura não estica e nada anima largura. */
.fp-barra__fatia {
  position: absolute;
  inset: 0;
  transform: translateX(calc((var(--total) - 1) * 100%));
  transition: transform var(--dur-2) var(--curva);
}
.fp-barra__fatia--a-pagar {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--fp-gasto) 55%, transparent) 0 3px, transparent 3px 7px);
}
.fp-barra__fatia--pago { background: var(--fp-gasto); transform: translateX(calc((var(--pago) - 1) * 100%)); }
/* Depois do marcador do limite: a janela começa no limite e a fatia de dentro vai até o total.
   Hachura mais densa e contorno, para o excedido se ler sem depender da cor. */
.fp-barra__apos-limite {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateX(calc(var(--limite) * 100%));
  transition: transform var(--dur-2) var(--curva);
}
.fp-barra__excedido {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, var(--fp-gasto) 0 2px, var(--painel-trilho) 2px 4px);
  box-shadow: inset 0 0 0 1.5px var(--fp-gasto);
  transform: translateX(calc((var(--total) - var(--limite) - 1) * 100%));
  transition: transform var(--dur-2) var(--curva);
}

/* Marcadores: uma camada da largura do trilho, deslocada pela fração. O conteúdo fica na borda esquerda. */
.fp-barra__marcadores { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fp-barra__marcador {
  position: absolute;
  top: 0; bottom: 0; left: 8px; right: 8px;
  transform: translateX(calc(var(--limite) * 100%));
  transition: transform var(--dur-2) var(--curva);
}
.fp-barra__marcador--limite { color: var(--fp-limite); }
.fp-barra__marcador--ideal { color: var(--fp-ideal); transform: translateX(calc(var(--ideal) * 100%)); }
.fp-barra__marcador-corpo {
  position: absolute;
  inset: 0;
  transition: opacity var(--dur-2) var(--curva), transform var(--dur-2) var(--curva);
}
.fp-barra__marcador[data-fp-escondido] .fp-barra__marcador-corpo { opacity: 0; transform: translateY(-6px); }
.fp-barra__haste {
  position: absolute;
  left: -1px;
  top: calc(var(--g-topo) - 6px);
  width: 2px;
  height: calc(var(--trilho-altura) + 6px);
  background: currentColor;
}
.fp-barra__ponta {
  position: absolute;
  left: -4.5px;
  top: calc(var(--g-topo) - 12px);
  width: 9px;
  height: 9px;
  background: currentColor;
}
.fp-barra__marcador--limite .fp-barra__ponta { transform: rotate(45deg); }
.fp-barra__marcador--ideal .fp-barra__ponta { border-radius: 50%; width: 10px; height: 10px; left: -5px; }
.fp-barra__etiqueta {
  display: none;
  position: absolute;
  top: 0;
  left: 9px;
  color: currentColor;
  white-space: nowrap;
}
.fp-barra__marcador--fim .fp-barra__etiqueta { left: auto; right: calc(100% + 9px); }
.fp-barra__fora { display: none; margin-left: 4px; vertical-align: -2px; }
.fp-barra__fora .icone { width: 12px; height: 12px; }
.fp-barra--ideal-fora .fp-barra__fora { display: inline-flex; }
.fp-barra--ideal-fora .fp-barra__marcador--ideal .fp-barra__ponta { left: -8px; }

/* Marcadores perto demais: o ideal desce para baixo do trilho (ponta e rótulo), o limite fica em cima. */
.fp-barra--empilhada .fp-barra__marcador--ideal .fp-barra__haste { top: var(--g-topo); }
.fp-barra--empilhada .fp-barra__marcador--ideal .fp-barra__ponta { top: calc(var(--g-topo) + var(--trilho-altura) + 2px); }
.fp-barra--empilhada .fp-barra__marcador--ideal .fp-barra__etiqueta { top: calc(var(--g-topo) + var(--trilho-altura) + 1px); left: 12px; }
.fp-barra--empilhada .fp-barra__marcador--ideal.fp-barra__marcador--fim .fp-barra__etiqueta { left: auto; right: calc(100% + 12px); }

/* Meta no ideal: um marcador só, com as duas formas (losango com o círculo dentro). */
.fp-barra--fundida .fp-barra__marcador--ideal,
.fp-barra--fundida .fp-barra__legenda-item--ideal { display: none; }
.fp-barra--fundida .fp-barra__marcador--limite .fp-barra__ponta::after,
.fp-barra--fundida .fp-forma--limite::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--fp-ideal);
}
.fp-barra--fundida .fp-barra__marcador--limite .fp-barra__ponta { width: 11px; height: 11px; left: -5.5px; top: calc(var(--g-topo) - 14px); }

/* Sem renda ou sem limite: barra sem marcadores e o convite para configurar. */
.fp-barra--sem-marcadores .fp-barra__marcadores,
.fp-barra--sem-marcadores .fp-barra__apos-limite,
.fp-barra--sem-marcadores .fp-barra__legenda,
.fp-barra--sem-marcadores [data-fp-parte="conta"] { display: none; }
.fp-barra__configurar { display: none; }
.fp-barra--sem-marcadores .fp-barra__configurar {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  justify-self: start;
  min-height: var(--toque);
  padding: 0 var(--e-4);
  border: 1px solid var(--painel-texto-2);
  border-radius: var(--r-sm);
  font-family: var(--fonte-mono);
  font-size: var(--t-botao);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Detalhes: só na barra expandida. */
.fp-barra__detalhes { display: none; }
/* Respiro revisto em 2026-09-19 (pedido do Guilherme: "dá para melhorar os espaçamentos"): os blocos
   estavam colados uns nos outros. Agora cada grupo (valor · barra · três números · mensagem · contas ·
   próximo mês) tem o seu espaço, separado por linha fina. */
.fp-barra--expandida {
  --g-topo: 44px; --g-base: 12px; --trilho-altura: 16px;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--e-3);
  padding: var(--e-5) var(--e-5) var(--e-5);
}
.fp-barra--expandida.fp-barra--empilhada { --g-base: 40px; }
.fp-barra--expandida .fp-barra__topo { justify-content: space-between; align-items: flex-end; }
.fp-barra--expandida .fp-barra__valor { font-size: 2.125rem; letter-spacing: -.04em; }
.fp-barra--expandida .fp-barra__abrir { transform: rotate(180deg); align-self: flex-start; }
.fp-barra--expandida .fp-barra__etiqueta { display: block; }
.fp-barra--expandida .fp-barra__detalhes { display: grid; gap: var(--e-4); }
.fp-barra--passou .fp-barra__valor,
.fp-barra--passou .fp-barra__numero--restante dd { color: var(--fp-gasto); }

.fp-barra__numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-3) var(--e-4);
  margin: 0;
  padding-top: var(--e-4);
  border-top: 1px solid var(--painel-linha);
}
.fp-barra__numero { display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-2); min-width: 0; }
.fp-barra__numero dd { margin: 0; font-size: 1.0625rem; font-weight: 500; letter-spacing: -.03em; white-space: nowrap; }

.fp-barra__legenda { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); font-size: .8125rem; color: var(--painel-texto-2); }
.fp-barra__legenda-item { display: inline-flex; align-items: center; gap: 2px; }
.fp-barra__legenda-item .num { margin-left: 4px; color: var(--painel-texto); }

.fp-barra__mensagem { display: flex; align-items: flex-start; gap: var(--e-2); font-size: .9375rem; line-height: 1.35; }
.fp-barra__mensagem-icone { display: none; flex: none; }
.fp-barra__mensagem-icone .icone { width: 18px; height: 18px; }
/* Aviso e estourou: faixa com ícone e texto. A faixa é neutra; quem carrega a cor é o valor. */
.fp-barra--aviso .fp-barra__mensagem,
.fp-barra--estourou .fp-barra__mensagem {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-sm);
  background: var(--painel-2);
}
.fp-barra--aviso .fp-barra__mensagem-icone,
.fp-barra--estourou .fp-barra__mensagem-icone { display: inline-flex; }
.fp-barra__dica { font-size: .8125rem; line-height: 1.4; color: var(--painel-texto-2); }

.fp-barra__extras { display: grid; gap: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--painel-linha); }
.fp-barra__conta { display: grid; gap: 4px; font-size: .8125rem; line-height: 1.45; color: var(--painel-texto-2); }
.fp-barra__conta-linha.num { color: var(--painel-texto); }
.fp-barra__guardado { font-size: .8125rem; color: var(--painel-texto-2); }
.fp-barra__guardado .num { color: var(--painel-texto); }
.fp-barra__proximo { display: grid; gap: var(--e-2); padding-top: var(--e-4); border-top: 1px solid var(--painel-linha); }
.fp-barra__minitrilho {
  position: relative;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--painel-trilho);
  overflow: hidden;
}
.fp-barra__minifatia {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--fp-gasto) 55%, transparent) 0 3px, transparent 3px 7px);
  transform: translateX(calc((var(--proximo) - 1) * 100%));
  transition: transform var(--dur-2) var(--curva);
}
.fp-barra__proximo-texto { display: flex; align-items: baseline; font-size: .8125rem; color: var(--painel-texto-2); }
.fp-barra__proximo-texto .num { color: var(--painel-texto); }

/* Entrou em aviso: um pulso só. */
@keyframes fp-pulsar { 50% { transform: scale(1.012); } }
.fp-barra--pulsar { animation: fp-pulsar 480ms var(--curva) 1; }
.fp-barra--instantanea, .fp-barra--instantanea * { transition: none !important; animation: none !important; }

/* 3. Chips (categorias). Uma linha que desliza: a folha do "+" não pode crescer para baixo. */
.fp-chips { display: flex; gap: var(--e-2); overflow-x: auto; padding: 2px; margin: -2px; scrollbar-width: none; }
.fp-chips::-webkit-scrollbar { display: none; }
.fp-chips > li { flex: none; }
.fp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--toque);
  padding: 0 var(--e-4) 0 var(--e-3);
  border: 1px solid var(--borda);
  border-radius: var(--r-pill);
  background: var(--superficie);
  color: var(--texto);
  font-size: .9375rem;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--curva), color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva);
}
.fp-chip .icone { width: 18px; height: 18px; }
.fp-chip--ativo { background: var(--inverso); border-color: var(--inverso); color: var(--inverso-texto); font-weight: 500; }

/* 4. Alternador segmentado (forma de pagamento) */
.fp-seg {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--poco);
}
.fp-seg__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--texto-2);
  font-size: .75rem;
  line-height: 1.1;
  transition: background-color var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
}
.fp-seg__item .icone { width: 18px; height: 18px; }
/* Menos de cinco opções (tipo do lançamento, tema, receita sem crédito): as colunas acompanham. */
.fp-seg--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-seg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-seg--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fp-seg__item--ativo { background: var(--superficie); border-color: var(--borda); color: var(--texto); font-weight: 500; }

/* 5. Interruptor pago/pendente. Neutro: pagar uma conta não é "verde", é só mudar de coluna. */
.fp-interruptor { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 64px; min-height: var(--toque); }
.fp-interruptor__trilho {
  position: relative;
  display: block;
  width: 44px;
  height: 26px;
  border: 1px solid var(--borda);
  border-radius: var(--r-pill);
  background: var(--poco);
  transition: background-color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva);
}
.fp-interruptor__pino {
  position: absolute;
  top: 2px; left: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--texto-2);
  color: transparent;
  transition: transform var(--dur-2) var(--curva), background-color var(--dur-1) var(--curva);
}
.fp-interruptor__pino .icone { width: 12px; height: 12px; stroke-width: 2.5; }
.fp-interruptor__texto { font-family: var(--fonte-mono); font-size: .6875rem; letter-spacing: .02em; text-transform: uppercase; color: var(--texto-2); }
.fp-interruptor[aria-checked="true"] .fp-interruptor__trilho { background: var(--inverso); border-color: var(--inverso); }
.fp-interruptor[aria-checked="true"] .fp-interruptor__pino { transform: translateX(18px); background: var(--inverso-texto); color: var(--inverso); }
.fp-interruptor[aria-checked="true"] .fp-interruptor__texto { color: var(--texto); }

/* 6. Listas e itens */
.fp-lista { display: flex; flex-direction: column; }
.fp-item, .fp-conta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-3);
  padding: 10px 0;
  border-top: 1px solid var(--linha);
}
.fp-lista > :first-child { border-top: 0; padding-top: 0; }
.fp-lista > :last-child { padding-bottom: 0; }
.fp-item__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--poco);
  color: var(--texto);
}
.fp-item__icone .icone { width: 18px; height: 18px; }
.fp-item__texto { display: flex; flex-direction: column; min-width: 0; }
.fp-item__titulo { font-size: .9375rem; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.fp-item__nota { font-size: .8125rem; line-height: 1.35; color: var(--texto-2); overflow-wrap: anywhere; }
.fp-item__valor { display: flex; flex-direction: column; align-items: flex-end; font-size: .9375rem; font-weight: 500; white-space: nowrap; }
.fp-item__marca { font-family: var(--fonte-mono); font-size: .625rem; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; color: var(--texto-2); }
.fp-vazio { font-size: .9375rem; color: var(--texto-2); }
/* Vencido (conta ou fatura que passou da data): destaque NEUTRO, com borda e ícone de alerta, nunca cor. */
.fp-item--vencido { margin-bottom: var(--e-2); padding: 10px var(--e-3); border: 1.5px solid var(--texto); border-radius: var(--r-sm); }
.fp-lista > .fp-item--vencido:first-child { padding-top: 10px; border-top: 1.5px solid var(--texto); }
.fp-lista > .fp-item--vencido:last-child { margin-bottom: 0; padding-bottom: 10px; }
.fp-item--vencido + .fp-item:not(.fp-item--vencido) { border-top: 0; }
.fp-item--vencido .fp-item__nota { color: var(--texto); font-weight: 500; }

/* 7. Números de resumo (cards de valor) */
.fp-resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3) var(--e-4); margin: 0; }
.fp-resumo__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fp-resumo__item dt {
  font-family: var(--fonte-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.fp-resumo__item dd { margin: 0; font-size: 1.1875rem; font-weight: 500; letter-spacing: -.03em; white-space: nowrap; }

/* 8. Progresso neutro */
.fp-progresso { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--poco); overflow: hidden; }
.fp-progresso__fatia {
  position: absolute;
  inset: 0;
  background: var(--texto);
  transform: translateX(calc((var(--f, 0) - 1) * 100%));
  transition: transform var(--dur-3) var(--curva);
}

/* 9. Legenda em texto (gráfico de evolução, Simulador) */
.fp-legenda { display: flex; flex-direction: column; gap: var(--e-1); font-size: .8125rem; color: var(--texto-2); }
.fp-legenda > li { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.fp-legenda .num { margin-left: 4px; color: var(--texto); font-weight: 500; }
.fp-legenda__nota { margin-left: 6px; font-family: var(--fonte-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .02em; }

@media (hover: hover) {
  .fp-chip:not(.fp-chip--ativo):hover { background: var(--poco); }
  .fp-seg__item:not(.fp-seg__item--ativo):hover { color: var(--texto); }
}
@media (forced-colors: active) {
  .fp-barra__fatia--pago, .fp-barra__ponta, .fp-barra__haste, .fp-progresso__fatia { forced-color-adjust: none; }
}