/* Início e peças de resumo (o bloco de destaque também abre a tela de Vencimentos). */

.topo-acoes { display: flex; align-items: center; }

.sincronia { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; color: var(--texto-suave); font-size: 12.5px; font-weight: 600; }
.sincronia .icone { width: 20px; height: 20px; }
.sincronia.fora { padding: 5px 10px; border-radius: 999px; color: var(--alerta); background: color-mix(in srgb, var(--alerta) 14%, transparent); }

.faixa-erro { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; color: var(--negativo); font-size: 14px; }

.destaque-mes { padding: 18px 4px 22px; }
.destaque-mes .valor.grande { margin: 6px 0 8px; }
.destaque-mes .nota { font-size: 14.5px; }

.par { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.par .direita { text-align: right; }
.par .rotulo { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.par .direita .rotulo { justify-content: flex-end; }
.par .valor { font-size: 15.5px; font-weight: 600; }
.par .valor.medio { font-size: 22px; font-weight: 650; letter-spacing: -0.015em; }

/* "Falta pagar" é o segundo número da tela e leva aos vencimentos. */
.falta-pagar { display: grid; min-height: var(--toque); color: inherit; text-decoration: none; }
.falta-pagar .rotulo .icone { width: 13px; height: 13px; }

/* Aviso de urgência no lugar da frase sob o herói: só aparece com conta atrasada ou vencendo hoje. */
.urgencia {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--toque);
  margin: 4px -4px -8px;
  padding: 8px 10px 8px 12px;
  border-radius: var(--raio-p);
  background: color-mix(in srgb, var(--negativo) 10%, transparent);
  color: var(--negativo);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}
/* O texto pode quebrar em tela estreita; o valor e a seta ficam sempre inteiros à direita. */
.urgencia > span { flex: 1; min-width: 0; }
.urgencia > .valor { flex: none; font-weight: 700; }
.urgencia .icone { width: 18px; height: 18px; }
.urgencia .icone:last-child { width: 14px; height: 14px; }
.voltar-mes { margin-top: 14px; }

.barra { height: 12px; margin: 14px 0; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.barra-cheia { display: flex; height: 100%; }
.barra-cheia > span { height: 100%; background: var(--cor, var(--destaque)); }
.barra-cheia > .pago, .ponto.pago { background: var(--destaque); }
/* Hachura = comprometido mas ainda não saiu da conta. */
.barra-cheia > .falta, .ponto.falta {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--destaque) 62%, transparent) 0 3px,
    color-mix(in srgb, var(--destaque) 24%, transparent) 3px 6px);
}
.ponto.pago, .ponto.falta { width: 10px; height: 10px; border-radius: 3px; }
.barra.fina { height: 6px; margin: 0; }

.pessoa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "selo nome sobra" "selo barra barra" "selo meta meta";
  align-items: center;
  gap: 7px 12px;
  padding: 16px 0;
}
.pessoa > .selo { grid-area: selo; align-self: start; }
.pessoa > .linha-titulo { grid-area: nome; }
.pessoa-sobra { grid-area: sobra; display: flex; align-items: baseline; gap: 6px; }
.pessoa-sobra .valor { font-size: 15.5px; font-weight: 650; }
.pessoa > .barra { grid-area: barra; }
.pessoa-meta { grid-area: meta; display: flex; justify-content: space-between; gap: 8px; }
.pessoa-meta > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pessoa-meta > .valor { flex: none; }

.acerto { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 12px; }
.acerto-frase { font-size: 17px; font-weight: 500; line-height: 1.3; }
.acerto-frase strong { font-weight: 700; }
.linha-detalhe.solta { margin-top: 3px; white-space: normal; }

.linha.atrasada .linha-detalhe { color: var(--negativo); font-weight: 600; }
.titulo-secao .lado.valor { font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  /* A barra se enche uma vez, ao chegar na tela: mostra que é uma parte de um todo. */
  .chegou .barra-cheia { animation: encher 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @keyframes encher { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
}