/* ============================================================
   FINANCESAPP — FASE B
   (2) Performance  (6) Insights com limite  (7) Modal parcelados
   pagos com paginação  (8) Valor já guardado na meta
   (9) Cartão com bandeira/limite/vencimento
   ============================================================ */

/* ------------------------------------------------------------
   2) PERFORMANCE — reduz custo de layout/pintura em listas longas
   ------------------------------------------------------------ */
.lista-otimizada {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* ------------------------------------------------------------
   6) INSIGHTS BLOQUEADOS (< R$100 acumulados)
   ------------------------------------------------------------ */
.insights-bloqueado {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px; padding: 28px 16px;
  color: var(--text2);
}
.insights-bloqueado-icone { font-size: 28px; opacity: 0.7; margin-bottom: 4px; }
.insights-bloqueado p { margin: 0; font-size: 13.5px; line-height: 1.5; max-width: 340px; }
.insights-bloqueado-falta { color: var(--accent); font-weight: 600; font-size: 13px; }

/* ------------------------------------------------------------
   7) PARCELADOS PAGOS — botão-resumo na tela principal
   ------------------------------------------------------------ */
.parcelados-pagos-resumo-btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 20px; border-radius: 14px;
  background: var(--bg2); border: 1px solid var(--border);
  cursor: pointer; transition: border-color 0.2s ease, transform 0.15s ease;
}
.parcelados-pagos-resumo-btn:hover { border-color: var(--accent); }
.parcelados-pagos-resumo-btn:active { transform: scale(0.99); }
.parcelados-pagos-resumo-info h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.parcelados-pagos-resumo-info span { font-size: 13px; color: var(--text2); }
.parcelados-pagos-resumo-seta { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }

/* Modal de parcelados pagos */
.parcelados-pagos-modal { max-width: 560px; width: 100%; }
.parcelados-pagos-total-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 10px; background: var(--bg3);
  font-size: 13.5px; color: var(--text2);
}
.parcelados-pagos-total-row span:last-child { font-weight: 700; color: var(--text); font-size: 15px; }
.parcelados-pagos-paginacao {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 13px; color: var(--text2); margin-top: 4px;
}
.parcelados-pagos-paginacao button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ------------------------------------------------------------
   8) META — toggle de valor já guardado
   ------------------------------------------------------------ */
.meta-guardado-btn {
  flex: 1; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg3);
  color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.2s ease;
}
.meta-guardado-btn.active {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ------------------------------------------------------------
   9) CARTÕES — nova linha de metadados (bandeira/vencimento/limite)
   ------------------------------------------------------------ */
.cartao-info { flex: 1; min-width: 0; }
.cartao-meta { font-size: 12px; color: var(--text3); margin-top: 2px; }
.cartao-form-box h3 { margin-bottom: 4px; }