/*
 * Estilos de cada tela (o que não é componente reutilizável). Medidas em rem: 16 px do design = 1 rem,
 * e tudo segue o --escala de tokens.css.
 */

/* ---------- Início (01-inicio.png) ---------- */
.inicio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.inicio__topo {
  display: grid;
  grid-template-columns: minmax(0, 26.25rem) minmax(0, 1fr);
  gap: 1.5rem;
}

.inicio__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.inicio__meio {
  display: grid;
  grid-template-columns: minmax(0, 1.63fr) minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.inicio__base {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.inicio__meio > section,
.inicio__base > section {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.inicio__meio .card,
.inicio__base .card {
  flex: 1;
}

/* Card de saldo em degradê */
.saldo {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.375rem;
  overflow: hidden;
  border-radius: var(--raio-xxl);
  background: linear-gradient(135deg, var(--degrade-inicio), var(--degrade-fim));
  color: var(--sobre-cor);
  box-shadow: var(--sombra-primaria);
}

.saldo__bolha {
  position: absolute;
  top: -5rem;
  right: -3.75rem;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  background: var(--sobre-cor-bolha);
  pointer-events: none;
}

.saldo__linha {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.saldo__rotulo {
  font-size: 0.875rem;
  color: var(--sobre-cor-suave);
}

.saldo__pilula {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem 0.375rem 0.75rem;
  border: 0;
  border-radius: var(--raio-pill);
  background: var(--sobre-cor-borda);
  color: var(--sobre-cor);
  font-size: 0.8125rem;
  font-weight: 600;
}

.saldo__pilula:hover {
  background: var(--sobre-cor-fundo);
}

.saldo__valor {
  position: relative;
  margin-top: 0.75rem;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
}

.saldo__detalhe {
  position: relative;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--sobre-cor-suave);
}

.saldo__lancar {
  position: relative;
  margin-top: auto;
}

.saldo__detalhe + .saldo__lancar {
  margin-top: 1.25rem;
}

/* Contas mensais */
.grafico-mensal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.grafico-mensal__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.grafico-mensal__titulo {
  font-size: 0.9375rem;
  font-weight: 700;
}

.grafico-mensal__variacao {
  margin-top: 0.5rem;
}

.grafico-mensal__legenda {
  display: flex;
  gap: 1.25rem;
  font-size: 0.75rem;
  color: var(--texto-secundario);
}

.grafico-mensal__legenda > span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.grafico-mensal__ponto {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--primaria-suave);
}

.grafico-mensal__ponto--atual {
  background: var(--primaria);
}

.barras {
  display: flex;
  flex: 1;
  gap: 1rem;
  min-height: 11rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.barras__coluna {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.barras__trilho {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  width: 100%;
  min-height: 8rem;
  overflow: hidden;
  border-radius: var(--raio-sm);
  background: var(--trilho);
}

.barras__barra {
  width: 100%;
  border-radius: var(--raio-sm);
  background: var(--primaria-suave);
  transition: height 0.3s ease;
}

.barras__coluna--atual .barras__barra {
  background: var(--primaria);
}

.barras__rotulo {
  font-size: 0.75rem;
  color: var(--texto-secundario);
}

.barras__coluna--atual .barras__rotulo {
  color: var(--texto);
  font-weight: 700;
}

/* Atalhos */
.atalhos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

.atalho {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  color: var(--texto);
  transition:
    border-color 0.15s ease,
    transform 0.1s ease;
}

.atalho:hover {
  border-color: var(--primaria-suave);
}

.atalho:active {
  transform: scale(0.98);
}

.atalho .icone-fundo {
  margin-bottom: 1rem;
}

.atalho__rotulo {
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Por categoria: itens além dos 5 primeiros aparecem com "Ver tudo" */
[data-lista-expansivel][data-expandida] .item-extra {
  display: block;
}

/* Escolher mês */
.seletor-mes {
  width: min(26.25rem, calc(100vw - 2rem));
}

.seletor-mes__corpo {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem 1.125rem 1.125rem;
}

.seletor-mes__rolagem {
  max-height: min(28rem, 60vh);
  overflow-y: auto;
  padding: 0 0.25rem 0.25rem;
}

/* ---------- Responsivo das telas ---------- */
@media (max-width: 1279px) {
  .inicio__topo {
    grid-template-columns: minmax(0, 1fr);
  }

  .inicio__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .inicio__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inicio__meio,
  .inicio__base {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 479px) {
  .inicio__cards,
  .atalhos {
    grid-template-columns: minmax(0, 1fr);
  }

  .saldo__valor {
    font-size: 2rem;
  }
}

/* ---------- Contas (02-contas.png) ---------- */
.contas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.contas__filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 0.5rem;
}

.contas__abas {
  width: 26.25rem;
  max-width: 100%;
}

.contas__novo {
  margin-left: auto;
}

.resumo-contas {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  margin-top: 0.75rem;
  padding: 1.5rem;
}

.resumo-contas > * + * {
  padding-left: 1.5rem;
  border-left: 1px solid var(--divisor);
}

.resumo-contas__principal {
  padding-right: 1.5rem;
}

.resumo-contas__titulo {
  font-size: 0.9375rem;
}

.resumo-contas__valor {
  margin-top: 0.375rem;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
}

.resumo-contas__item {
  display: grid;
  align-content: center;
  gap: 0.25rem;
}

.resumo-contas__rotulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.resumo-contas__ponto {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.resumo-contas__ponto--perigo {
  background: var(--perigo);
}

.resumo-contas__ponto--sucesso {
  background: var(--sucesso);
}

.resumo-contas__ponto--alerta {
  background: var(--alerta);
}

.resumo-contas__numero {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.contas__total {
  color: var(--primaria-texto);
  font-size: 0.875rem;
  font-weight: 600;
}

.contas__busca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
  font-size: 0.875rem;
  color: var(--texto-secundario);
}

.contas__tabela .tabela {
  min-width: 56rem;
}

.contas__mais {
  display: block;
  padding: 1rem;
  border-top: 1px solid var(--divisor);
  color: var(--primaria-texto);
  font-weight: 600;
  text-align: center;
}

.contas__mais:hover {
  background: var(--pressionado);
}

/* ---------- Detalhe (lançamento e fatura) ---------- */
.detalhe {
  display: grid;
  gap: 1rem;
}

.detalhe__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
}

.detalhe__principal,
.detalhe__lateral {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.detalhe__principal > section {
  margin-top: 0.75rem;
}

.hero {
  position: relative;
  padding: 1.5rem;
  overflow: hidden;
  border-radius: var(--raio-xxl);
  background: linear-gradient(135deg, var(--degrade-inicio), var(--degrade-fim));
  color: var(--sobre-cor);
  box-shadow: var(--sombra-primaria);
}

.hero__bolha {
  position: absolute;
  top: -5rem;
  right: -3.75rem;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  background: var(--sobre-cor-bolha);
  pointer-events: none;
}

.hero__topo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.hero__icone {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--raio-md);
  background: var(--sobre-cor-fundo);
}

.hero__cartao {
  box-shadow: 0 0 0 1px var(--sobre-cor-borda);
}

.hero__titulos {
  flex: 1;
  min-width: 0;
}

.hero__titulo {
  font-size: 1.1875rem;
  font-weight: 700;
}

.hero__sub {
  font-size: 0.8125rem;
  color: var(--sobre-cor-suave);
}

.hero__pilulas {
  display: grid;
  justify-items: end;
  gap: 0.375rem;
}

.hero__pilula {
  padding: 0.25rem 0.625rem;
  border-radius: var(--raio-pill);
  background: var(--sobre-cor-borda);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.hero__rotulo {
  position: relative;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--sobre-cor-suave);
}

.hero__valor {
  position: relative;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
}

.hero__rodape {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--sobre-cor-borda);
  font-size: 0.8125rem;
  color: var(--sobre-cor-suave);
}

.detalhe__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.detalhe__pagar {
  margin-left: auto;
}

.detalhe__observacao {
  display: flex;
  gap: 0.625rem;
  color: var(--texto-secundario);
  font-size: 0.875rem;
}

.parcela-detalhe {
  gap: 0.75rem;
}

.parcela-detalhe--futura .linha__titulo {
  color: var(--texto-secundario);
}

.parcela-detalhe__legenda {
  font-size: 0.75rem;
}

.parcela-detalhe__acoes {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.parcela-detalhe__acoes .circulo-check {
  margin-left: 0.5rem;
}

.detalhes-lista {
  margin: 0;
}

.detalhes-lista__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0;
}

.detalhes-lista__item + .detalhes-lista__item {
  border-top: 1px solid var(--divisor);
}

.detalhes-lista dt {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 7rem;
  color: var(--texto-secundario);
  font-size: 0.8125rem;
}

.detalhes-lista dd {
  flex: 1;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: right;
}

/* ---------- Formulário de conta ---------- */
.formulario {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 46rem;
}

.formulario__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.375rem;
  padding: 1.75rem;
}

.formulario__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.formulario__rodape {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.campo__caixa--valor input {
  font-size: 1.25rem;
  font-weight: 700;
}

.seletor-categoria {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.seletor-categoria__nova {
  border-style: dashed;
  color: var(--primaria-texto);
}

.recorrencias {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.recorrencia {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 0.125rem;
  padding: 0.875rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  cursor: pointer;
}

.recorrencia:has(input:checked) {
  border-color: var(--primaria);
  background: var(--primaria-clara);
}

.recorrencia:has(input:focus-visible) {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
}

.recorrencia--bloqueada {
  cursor: default;
}

.recorrencia--bloqueada:not(:has(input:checked)) {
  opacity: 0.45;
}

.recorrencia__icone {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.5rem;
  border-radius: var(--raio-sm);
  background: var(--controle);
  color: var(--texto-secundario);
}

.recorrencia:has(input:checked) .recorrencia__icone {
  background: var(--primaria-botao);
  color: var(--sobre-cor);
}

.recorrencia__marca {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  display: none;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--primaria-botao);
  color: var(--sobre-cor);
}

.recorrencia:has(input:checked) .recorrencia__marca {
  display: grid;
}

[data-info-recorrencia] {
  white-space: pre-line;
}

[data-info-recorrencia][hidden] {
  display: none;
}

/* ---------- Responsivo (Contas, detalhe, formulário) ---------- */
@media (max-width: 1279px) {
  .detalhe__grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1023px) {
  .resumo-contas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 0;
  }

  .resumo-contas__principal {
    grid-column: 1 / -1;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--divisor);
  }

  .resumo-contas > :nth-child(2) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 767px) {
  .contas__novo {
    margin-left: 0;
  }

  .resumo-contas {
    grid-template-columns: minmax(0, 1fr);
  }

  .resumo-contas > * + * {
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--divisor);
    border-left: 0;
  }

  .formulario__grade,
  .recorrencias {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Gastos (03-gastos.png) ---------- */
.gastos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.gastos__filtros {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gastos__filtros > .barra-filtros {
  flex: 1;
  min-width: 0;
}

.gastos__grade {
  display: grid;
  grid-template-columns: minmax(0, 26.25rem) minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.gastos__lateral,
.gastos__lista {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.gastos__total-rodape {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--divisor);
  font-size: 0.8125rem;
  color: var(--texto-secundario);
}

.gastos__total-rodape > span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.resumo-contas__ponto--primaria {
  background: var(--primaria);
}

.resumo-contas__ponto--investimento {
  background: var(--investimento);
}

.gastos__cartoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.gastos__cartao {
  display: grid;
  gap: 0.625rem;
  min-width: 0;
}

.gastos__cartao--ativo .cartao-visual {
  outline: 3px solid var(--primaria);
  outline-offset: 2px;
}

.gastos__fatura {
  display: grid;
  color: var(--texto);
  font-size: 0.75rem;
}

.gastos__dia {
  display: grid;
  gap: 0.5rem;
}

.gastos__dia-titulo {
  display: flex;
  justify-content: space-between;
  padding: 0 0.25rem;
  color: var(--texto-secundario);
  font-size: 0.875rem;
  font-weight: 600;
}

.gastos__mais {
  justify-self: center;
  padding: 0.5rem;
  font-size: 0.9375rem;
}

/* Painel lateral (filtros) */
.modal.painel {
  width: min(24rem, 100vw);
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0 0 0 auto;
  border-radius: var(--raio-xxl) 0 0 var(--raio-xxl);
}

.painel__corpo {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  height: 100%;
  padding: 1.5rem;
}

.painel__rodape {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: auto;
}

/* ---------- Cartões ---------- */
.cartoes {
  display: grid;
  gap: 1.25rem;
}

.cartoes__topo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.cartoes__topo .aviso {
  flex: 1;
}

.cartoes__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: 1.25rem;
}

.cartoes__item {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  color: var(--texto);
}

.cartoes__item--inativo .cartao-visual {
  opacity: 0.6;
}

.cartoes__info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cartoes__selo {
  margin-top: 0.25rem;
}

.formulario-cartao {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
}

.formulario--cartao {
  max-width: 68rem;
}

.formulario-cartao__previa {
  position: sticky;
  top: calc(var(--topo-altura) + 1.5rem);
}

.formulario__excluir {
  margin-right: auto;
}

.formulario__legenda {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.campo__caixa select {
  appearance: auto;
}

/* Seletor de cor (ColorPicker) */
.seletor-cor {
  display: grid;
  gap: 0.5rem;
}

.seletor-cor__grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.seletor-cor__opcao {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--cor);
  box-shadow: inset 0 0 0 1px var(--borda-cor);
  cursor: pointer;
}

.seletor-cor__opcao:has(input:checked) {
  outline: 3px solid var(--primaria);
  outline-offset: 2px;
}

.seletor-cor__opcao:has(input:focus-visible) {
  outline: 3px solid var(--primaria-suave);
  outline-offset: 2px;
}

.seletor-cor__livre {
  max-width: 15rem;
}

.seletor-cor__amostra {
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: var(--cor);
}

@media (max-width: 1279px) {
  .gastos__grade,
  .formulario-cartao {
    grid-template-columns: minmax(0, 1fr);
  }

  .formulario-cartao__previa {
    position: static;
    max-width: 22rem;
  }
}

@media (max-width: 767px) {
  .gastos__filtros {
    flex-wrap: wrap;
  }

  .cartoes__topo {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Categorias (04-categorias.png) ---------- */
.categorias {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
}

.categorias__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.categorias__abas {
  width: 26.25rem;
  max-width: 100%;
}

.categorias__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

a.card.categorias__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 5.375rem;
  padding: 1rem 1.25rem 1rem 1rem;
}

.categorias__item--inativa .icone-categoria {
  opacity: 0.45;
}

.categorias__item--inativa .linha__titulo {
  color: var(--texto-terciario);
}

/* Formulário de categoria */
.form-categoria__topo {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.form-categoria__topo > .campo {
  flex: 1;
}

.segmentado--radio .segmentado__item:has(input:disabled) {
  cursor: not-allowed;
}

.segmentado--radio .segmentado__item:has(input:disabled:not(:checked)) {
  opacity: 0.5;
}

.seletor-icone {
  display: grid;
  gap: 0.875rem;
}

.seletor-icone__titulo {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--texto-secundario);
}

.seletor-icone__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.seletor-icone__opcao {
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
  border: 1.5px solid transparent;
  border-radius: calc(var(--raio-md) - 2px);
  background: var(--controle);
  color: var(--texto-secundario);
  cursor: pointer;
}

.seletor-icone__opcao:has(input:checked) {
  border-color: var(--primaria);
  background: var(--primaria-clara);
  color: var(--primaria-texto);
}

.seletor-icone__opcao:has(input:focus-visible) {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
}

/* ---------- Carteira (05-carteira.png) ---------- */
.carteira {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.carteira__filtros {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: -0.25rem;
}

.carteira__filtros > .barra-filtros {
  flex: 1;
  min-width: 0;
}

.carteira__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.carteira__graficos {
  display: grid;
  grid-template-columns: minmax(0, 1.63fr) minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.carteira__graficos--um {
  grid-template-columns: minmax(0, 1fr);
}

.carteira__base {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  align-items: start;
  gap: 1.5rem;
  margin-top: 0.75rem;
}

.carteira__base > section {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.carteira__mais {
  padding: 0.875rem 0;
  border-top: 1px solid var(--divisor);
  text-align: center;
}

.grafico {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.grafico__titulo {
  font-size: 1rem;
  font-weight: 700;
}

/* Crescimento: SVG esticado na área; rótulos e ponto final em HTML por cima */
.linha-grafico {
  --linha: var(--investimento);
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  grid-template-rows: 11rem auto;
  column-gap: 0.75rem;
  margin-top: 1.5rem;
  padding-right: 1rem;
}

.linha-grafico.cor {
  --linha: var(--traco);
}

.linha-grafico__eixo-y {
  position: relative;
}

.linha-grafico__eixo-y > span {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  font-size: 0.6875rem;
  color: var(--texto-terciario);
  white-space: nowrap;
}

.linha-grafico__area {
  position: relative;
  border-bottom: 1px solid var(--borda);
}

.linha-grafico__guia {
  position: absolute;
  right: 0;
  left: 0;
  border-top: 1px solid var(--divisor);
}

.linha-grafico__area > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.linha-grafico__degrade-topo {
  stop-color: var(--linha);
  stop-opacity: 0.25;
}

.linha-grafico__degrade-base {
  stop-color: var(--linha);
  stop-opacity: 0.02;
}

.linha-grafico__linha {
  fill: none;
  stroke: var(--linha);
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.linha-grafico__ponto,
.linha-grafico__alvo {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.linha-grafico__ponto {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--linha);
  background: var(--card);
  pointer-events: none;
}

.linha-grafico__alvo {
  width: 1.5rem;
  height: 1.5rem;
}

.linha-grafico__eixo-x {
  position: relative;
  grid-column: 2;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.linha-grafico__eixo-x > li {
  position: absolute;
  top: 0.5rem;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: var(--texto-secundario);
}

.linha-grafico__eixo-x > .linha-grafico__mes-atual {
  color: var(--texto);
  font-weight: 700;
}

/* Rosca da distribuição */
.rosca {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 1.75rem;
  margin-top: 1.25rem;
}

.rosca__desenho {
  position: relative;
  flex: none;
  width: 10.25rem;
  height: 10.25rem;
}

.rosca__desenho > svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.rosca__trilho,
.rosca__arco {
  fill: none;
  stroke-width: 18;
}

.rosca__trilho {
  stroke: var(--trilho);
}

.rosca__arco {
  stroke: var(--traco);
}

.rosca__centro {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.rosca__centro > strong {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.rosca__centro > span {
  font-size: 0.6875rem;
  color: var(--texto-secundario);
}

.rosca__legenda {
  display: grid;
  flex: 1;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rosca__legenda > li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.rosca__bolinha {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.375rem;
  border-radius: 50%;
  background: var(--traco);
}

.rosca__nome {
  display: grid;
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.rosca__nome > strong {
  font-weight: 700;
}

.rosca__percentual {
  font-size: 0.75rem;
  color: var(--texto-secundario);
}

/* Aportes por mês: barras de Contas mensais, com a parte prevista empilhada */
.barras-aportes__pilha {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}

.barras-aportes .barras__barra,
.barras-aportes__ponto {
  background: var(--investimento-suave);
}

.barras-aportes .barras__coluna--atual .barras__barra,
.barras-aportes__ponto:not(.barras-aportes__ponto--previsto) {
  background: var(--investimento);
}

.barras-aportes__previsto,
.barras-aportes__ponto--previsto {
  background: var(--investimento-claro);
  box-shadow: inset 0 0 0 1.5px var(--investimento-suave);
}

.barras-aportes__previsto {
  width: 100%;
  border-radius: var(--raio-sm) var(--raio-sm) 0 0;
}

.barras-aportes__previsto + .barras__barra {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

@media (max-width: 1279px) {
  .categorias__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .carteira__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .carteira__graficos,
  .carteira__base {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .categorias__topo,
  .carteira__filtros {
    flex-wrap: wrap;
  }

  .categorias__grade,
  .carteira__cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .rosca {
    flex-direction: column;
    align-items: stretch;
  }

  .rosca__desenho {
    align-self: center;
  }
}

/* ---------- Telas de lista simples: Histórico, Notificações, Usuários, Perfil ---------- */
.pagina-estreita {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  max-width: 50rem;
}

.lista__rodape {
  display: block;
  padding: 0.875rem 0;
  border-top: 1px solid var(--divisor);
  text-align: center;
}

.lista > .token + .token,
.lista > .perfil__item + .perfil__item {
  border-top: 1px solid var(--divisor);
}

.botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.codigo {
  display: block;
  padding: 0.875rem;
  overflow-wrap: anywhere;
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  background: var(--controle);
  color: var(--texto);
  font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.4;
}

.aviso--alerta {
  background: var(--alerta-claro);
  color: var(--texto);
}

.aviso--alerta > .icone {
  color: var(--alerta-texto);
}

/* Notificações */
.notificacoes__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.notificacoes__titulo-dia {
  margin-bottom: 0.5rem;
  padding: 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto-secundario);
}

.notificacoes__lista {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notificacao {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  background: var(--card);
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.notificacao:hover {
  border-color: var(--primaria-suave);
}

.notificacao--nao-lida {
  border-color: var(--primaria);
  background: var(--primaria-clara);
}

.notificacao__texto {
  display: grid;
  flex: 1;
  gap: 0.125rem;
  min-width: 0;
  font-size: 0.875rem;
}

.notificacao__resumo {
  color: var(--texto-secundario);
}

.notificacao--nao-lida .notificacao__resumo {
  color: var(--texto);
  font-weight: 500;
}

.notificacao__ponto {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--primaria);
}

/* Usuários */
.usuarios__topo {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.usuarios__busca {
  flex: 1;
}

.integracao__intro {
  flex: 1;
  font-size: 0.875rem;
}

.linha-usuario--inativo .linha__titulo {
  color: var(--texto-terciario);
}

.opcoes-perfil {
  display: grid;
  gap: 0.75rem;
}

.opcao-perfil {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-xl);
  background: var(--card);
  cursor: pointer;
}

.opcao-perfil:has(input:checked) {
  border: 1.5px solid var(--primaria);
  background: var(--primaria-clara);
}

.opcao-perfil:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

.opcao-perfil:has(input:focus-visible) {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
}

.opcao-perfil__icone {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--controle);
  color: var(--texto-secundario);
}

.opcao-perfil:has(input:checked) .opcao-perfil__icone {
  background: var(--primaria-botao);
  color: var(--sobre-cor);
}

.opcao-perfil__radio {
  width: 1.375rem;
  height: 1.375rem;
  border: 2px solid var(--borda-circulo);
  border-radius: 50%;
}

.opcao-perfil:has(input:checked) .opcao-perfil__radio {
  border-color: var(--primaria);
  background: radial-gradient(var(--primaria) 0 0.3125rem, transparent 0.34rem);
}

/* Perfil */
.perfil__cartao {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--raio-xxl);
}

.perfil__nome {
  font-size: 1.125rem;
  font-weight: 700;
}

.perfil__cartao .etiqueta {
  margin-top: 0.375rem;
}

.perfil__secao {
  margin: 0.5rem 0 -0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto-secundario);
}

.perfil__item .linha__titulo {
  flex: 1;
}

.perfil__nota {
  margin-top: -0.5rem;
  padding: 0 0.25rem;
}

.perfil__tema {
  display: grid;
  gap: 0.75rem;
}

.perfil__tema-topo {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.perfil__sair {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 3.5rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: var(--raio-lg);
  background: var(--perigo-claro);
  color: var(--perigo-texto);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.perfil__avatar {
  display: flex;
  justify-content: center;
}

.perfil__dados {
  margin: 0;
}

.perfil__dado {
  display: grid;
  gap: 0.125rem;
  padding: 0.875rem 0;
}

.perfil__dado + .perfil__dado {
  border-top: 1px solid var(--divisor);
}

.perfil__dado dd {
  margin: 0;
  font-weight: 600;
}

/* Tokens do Claude */
.token {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 0;
}

.token__icone {
  color: var(--primaria-texto);
}

.token--expirado .token__icone,
.token--expirado .linha__titulo {
  color: var(--texto-terciario);
}

.token__topo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.passos-card {
  display: grid;
  gap: 0.875rem;
}

.passos {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.passo {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
}

.passo__numero {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--primaria-clara);
  color: var(--primaria-texto);
  font-size: 0.8125rem;
  font-weight: 700;
}

@media (max-width: 767px) {
  .usuarios__topo,
  .notificacoes__barra {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Telas centralizadas (Cartões, Histórico, Notificações, Usuários) ---------- */
/* Só o bloco vai para o centro, numa largura boa de leitura (~880 px de design); os textos continuam à esquerda. */
.pagina-centro {
  width: 100%;
  max-width: 55rem;
  margin-inline: auto;
}

@media (max-width: 767px) {
  /* No celular, os botões de filtro ficam numa linha só, acima das ações da tela. */
  .contas__filtros > .barra-filtros,
  .gastos__filtros > .barra-filtros,
  .carteira__filtros > .barra-filtros {
    flex-basis: 100%;
  }
}