/* Vencimentos: linha do tempo de contas e lembretes.
   Linha comum: ~64 px, valor centrado. Linha urgente (atrasada, hoje): mais alta, com "Pagar" de 44 px. */

.destaque-mes.compacto { padding: 10px 4px 12px; }
.destaque-mes.compacto .valor.grande { font-size: 34px; margin: 4px 0 6px; }

.contagem {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.grupo-atrasada { color: var(--negativo); }
.grupo-atrasada .contagem { background: color-mix(in srgb, var(--negativo) 14%, transparent); color: var(--negativo); }
.titulo-secao .lado.valor { color: var(--texto); }

.conta {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas: "dia nome valor" "dia meta valor";
  align-items: center;
  gap: 1px 12px;
  min-height: 64px;
  padding: 8px 0;
}
.conta.urgente { grid-template-areas: "dia nome valor" "dia meta pagar"; gap: 6px 12px; padding: 14px 0; }
.conta[hidden] { display: none; }

.dia {
  grid-area: dia;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 44px;
  height: 46px;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  line-height: 1.05;
}
.dia b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dia span { font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); }
/* O selo atrasado é o mais pesado da tela; o de hoje é só contorno, para não gritar mais que ele. */
.conta.atrasada .dia { background: var(--atraso-cheio); color: var(--sobre-negativo); }
.conta.hoje .dia { background: transparent; box-shadow: inset 0 0 0 1.5px var(--texto); }
.conta.atrasada .dia span, .conta.hoje .dia span { color: inherit; }
.conta.urgente .dia { align-self: start; height: 50px; }

.conta-nome {
  grid-area: nome;
  align-self: end;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conta-nome::after { content: ""; position: absolute; inset: 0; } /* a linha inteira abre a edição */
.conta-lado { grid-area: valor; display: grid; justify-items: end; gap: 2px; }
.conta-valor { font-size: 16px; font-weight: 650; }
.conta-meta {
  grid-area: meta;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  font-size: 13.5px;
  color: var(--texto-suave);
  white-space: nowrap;
}
.conta-meta > * + *::before { content: "·"; margin-right: 6px; }
.conta-aviso { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--texto-suave); white-space: nowrap; }
.conta-aviso .icone { width: 13px; height: 13px; }
.conta.urgente .conta-nome, .conta.urgente .conta-meta { align-self: center; }
.conta.atrasada .conta-meta > :nth-child(2) { color: var(--negativo); font-weight: 600; }

.pagar { grid-area: pagar; justify-self: end; z-index: 1; min-height: var(--toque); min-width: 92px; padding: 0 18px; border-radius: 999px; font-size: 15px; }

.conta .marcar { grid-area: valor; justify-self: end; z-index: 1; margin-right: -10px; }
.marcar { display: grid; place-items: center; width: var(--toque); height: var(--toque); padding: 0; border: 0; background: none; color: transparent; }
.marcar::before { content: ""; grid-area: 1 / 1; width: 24px; height: 24px; border: 2px solid var(--texto-suave); border-radius: 50%; }
.marcar .icone { grid-area: 1 / 1; width: 14px; height: 14px; }
.marcar:active { color: var(--destaque); }

.rodape-tela { display: flex; justify-content: center; margin-top: 16px; }