.cf-invoice-overview,
.cf-invoice-trace,
.cf-invoice-parent { background: #fff; }
.cf-invoice-browser img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.cf-invoice-status-list { display: grid; gap: 10px; margin-top: 24px; }
.cf-invoice-status-list > div { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--cf-line); border-radius: 14px; }
.cf-invoice-status-list > div > span { min-width: 76px; padding: 6px 9px; border-radius: 999px; text-align: center; font-size: .7rem; font-weight: 800; }
.cf-invoice-status-list span.draft { background: #eef1f6; color: #4c5c74; }
.cf-invoice-status-list span.sent { background: #e9f5ff; color: #176fa5; }
.cf-invoice-status-list span.paid { background: #eaf8f1; color: #14734c; }
.cf-invoice-status-list span.overdue { background: #fff0ef; color: #b13f3a; }
.cf-invoice-status-list p { display: grid; margin: 0; line-height: 1.25; }
.cf-invoice-status-list small { color: var(--cf-muted); }

.cf-invoice-process { background: var(--cf-navy); color: #fff; }
.cf-invoice-process p { color: rgba(255,255,255,.7); }
.cf-invoice-process-grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; gap: 16px; }
.cf-invoice-process-grid::before { content: ""; position: absolute; z-index: 0; top: 35px; right: 7%; left: 7%; height: 2px; background: linear-gradient(90deg, transparent, rgba(78,208,203,.55) 8%, rgba(78,208,203,.55) 92%, transparent); }
.cf-invoice-process-grid article { position: relative; z-index: 1; width: 100%; min-width: 0; min-height: 190px; padding: 24px 18px 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(12,31,65,.96); box-shadow: 0 16px 35px rgba(0,0,0,.14); }
.cf-invoice-process-grid article b { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 20px; border: 1px solid rgba(78,208,203,.45); border-radius: 13px; background: var(--cf-navy); color: var(--cf-cyan); font-size: .74rem; }
.cf-invoice-process-grid article span { display: block; margin-bottom: 9px; font-weight: 800; }
.cf-invoice-process-grid article p { margin: 0; font-size: .8rem; line-height: 1.55; }
.cf-invoice-process-grid > i { display: none; }

.cf-invoice-document { overflow: hidden; border: 1px solid var(--cf-line); border-radius: 22px; background: #fff; box-shadow: var(--cf-shadow); }
.cf-invoice-document__head { display: flex; align-items: center; gap: 12px; padding: 20px; background: var(--cf-navy); color: #fff; }
.cf-invoice-document__head > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--cf-cyan); font-weight: 850; }
.cf-invoice-document__head p { display: grid; margin: 0; line-height: 1.2; }
.cf-invoice-document__head small { color: rgba(255,255,255,.62); }
.cf-invoice-document__head b { margin-left: auto; font-size: 1.25rem; }
.cf-invoice-document__student { display: grid; padding: 18px 20px; border-bottom: 1px solid var(--cf-line); }
.cf-invoice-document__student span, .cf-invoice-document__student small { color: var(--cf-muted); font-size: .76rem; }
.cf-invoice-document__lines { padding: 0 20px; }
.cf-invoice-document__lines > div { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--cf-line); }
.cf-invoice-document__lines p { display: grid; flex: 1; margin: 0; }
.cf-invoice-document__lines small { color: var(--cf-muted); }
.cf-invoice-document__source { display: flex; gap: 11px; padding: 17px 20px; background: #eaf8f1; }
.cf-invoice-document__source > span { color: #14734c; font-weight: 900; }
.cf-invoice-document__source p { display: grid; margin: 0; }
.cf-invoice-document__source small { color: #477362; }

.cf-invoice-followup,
.cf-invoice-integration { background: var(--cf-bg); }
.cf-invoice-followup article { height: 100%; padding: 26px; border: 1px solid var(--cf-line); border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(12,31,65,.05); }
.cf-invoice-followup article > span { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 14px; font-size: 1.12rem; font-weight: 850; }
.cf-invoice-followup span.document { background: #e9f5ff; color: #176fa5; }
.cf-invoice-followup span.delivery { background: #f3eefe; color: #6941c6; }
.cf-invoice-followup span.payment { background: #eaf8f1; color: #14734c; }
.cf-invoice-followup span.reminder { background: #fff0ef; color: #b13f3a; }
.cf-invoice-followup h3 { font-size: 1.08rem; }
.cf-invoice-followup p { margin: 0; color: var(--cf-muted); }

.cf-invoice-parent-card { overflow: hidden; border: 1px solid var(--cf-line); border-radius: 22px; background: #fff; box-shadow: var(--cf-shadow); }
.cf-invoice-parent-card__top { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 20px; border-bottom: 1px solid var(--cf-line); }
.cf-invoice-parent-card__top > div { display: grid; }
.cf-invoice-parent-card__top small { color: var(--cf-muted); }
.cf-invoice-parent-card__top > span { padding: 7px 10px; border-radius: 999px; background: #fff0ef; color: #b13f3a; font-size: .74rem; font-weight: 800; }
.cf-invoice-parent-card__row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--cf-line); }
.cf-invoice-parent-card__row:last-child { border-bottom: 0; }
.cf-invoice-parent-card__row > i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #eaf8f1; color: #14734c; font-style: normal; }
.cf-invoice-parent-card__row.open > i { background: #e9f5ff; color: #176fa5; }
.cf-invoice-parent-card__row.credit > i { background: #f3eefe; color: #6941c6; }
.cf-invoice-parent-card__row p { display: grid; margin: 0; }
.cf-invoice-parent-card__row small { color: var(--cf-muted); }
.cf-invoice-parent-card__row button { border: 0; border-radius: 9px; background: var(--cf-cyan-dark); color: #fff; padding: 8px 10px; font-size: .76rem; font-weight: 750; }
.cf-invoice-parent-card__row > span { color: #14734c; font-size: .75rem; font-weight: 750; }

.cf-finance-map { display: grid; gap: 16px; padding: 26px; border: 1px solid var(--cf-line); border-radius: 24px; background: #fff; box-shadow: var(--cf-shadow); }
.cf-finance-map__source, .cf-finance-map__target { display: flex; align-items: center; gap: 12px; padding: 17px; border-radius: 16px; }
.cf-finance-map__source { background: var(--cf-navy); color: #fff; }
.cf-finance-map__target { background: #edf8f7; }
.cf-finance-map__source > span, .cf-finance-map__target > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--cf-cyan); color: #fff; font-weight: 850; }
.cf-finance-map p { display: grid; margin: 0; }
.cf-finance-map small { color: var(--cf-muted); }
.cf-finance-map__source small { color: rgba(255,255,255,.62); }
.cf-finance-map__exchange { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.cf-finance-map__exchange span { padding: 7px 10px; border-radius: 999px; background: var(--cf-bg); color: var(--cf-muted); font-size: .75rem; }
.cf-finance-map__fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cf-finance-map__fields span { padding: 9px; border: 1px solid var(--cf-line); border-radius: 10px; color: var(--cf-muted); font-size: .75rem; text-align: center; }
.cf-invoice-ownership { overflow: hidden; margin: 22px 0; border: 1px solid var(--cf-line); border-radius: 16px; background: #fff; }
.cf-invoice-ownership > div { display: grid; gap: 2px; padding: 13px 16px; border-bottom: 1px solid var(--cf-line); }
.cf-invoice-ownership > div:last-child { border-bottom: 0; }
.cf-invoice-ownership span { color: var(--cf-cyan-dark); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 1199.98px) {
  .cf-invoice-process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cf-invoice-process-grid::before { display: none; }
}

@media (max-width: 575.98px) {
  .cf-invoice-process-grid { grid-template-columns: 1fr; }
  .cf-invoice-process-grid article { min-height: 0; }
  .cf-invoice-parent-card__row { grid-template-columns: auto 1fr auto; }
  .cf-invoice-parent-card__row button, .cf-invoice-parent-card__row > span { grid-column: 2 / -1; justify-self: start; }
  .cf-finance-map__fields { grid-template-columns: 1fr; }
}