/* C125–C128: readable cost evidence and model utility in both themes.
   Presentation only. All source labels, amounts, states and actions remain in
   the existing DOM; no provider verification or financial facts are added. */
html[data-theme] #page .fv-helion-dashboard {
  --helion-review-panel: #241e39;
  --helion-review-inset: #1c182d;
  --helion-review-tint: #2d2546;
  --helion-review-text: #f5f0ff;
  --helion-review-muted: #c4b9d8;
  --helion-review-line: #514260;
  --helion-review-paid: #8be2ba;
  --helion-review-pending: #f4cd82;
  --helion-review-negative: #ffa8bd;
  --helion-review-shadow: 0 10px 28px rgba(9, 5, 20, .2);
}

html[data-theme="light"] #page .fv-helion-dashboard {
  --helion-review-panel: #ffffff;
  --helion-review-inset: #f7f4fc;
  --helion-review-tint: #f0e9f9;
  --helion-review-text: #36224f;
  --helion-review-muted: #6c577f;
  --helion-review-line: #ded2ec;
  --helion-review-paid: #176647;
  --helion-review-pending: #865914;
  --helion-review-negative: #ad355b;
  --helion-review-shadow: 0 8px 28px rgba(69, 34, 99, .07);
}

html[data-theme] #page .fv-helion-dashboard :is(.helion-cost-type-summary, .helion-cost-model, .helion-profit-model) {
  min-width: 0;
  color: var(--helion-review-text);
  border: 1px solid var(--helion-review-line);
  border-radius: 22px;
  background: var(--helion-review-panel);
  box-shadow: var(--helion-review-shadow);
}

html[data-theme] #page .fv-helion-dashboard :is(.helion-cost-model-grid, .helion-profit-model-grid) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 22px;
}

/* Monthly summary: first the total, then each cost and its payment evidence. */
html[data-theme] #page .fv-helion-dashboard .helion-cost-type-summary {
  gap: 20px;
  margin-bottom: 24px;
  padding: 24px;
  background: linear-gradient(135deg, var(--helion-review-tint), var(--helion-review-panel) 68%);
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-type-summary > header {
  align-items: center;
  gap: 24px;
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-type-summary > header h3 {
  margin: 7px 0 8px;
  color: var(--helion-review-text);
  font-family: inherit;
  font-size: 21px;
  font-weight: 750;
  line-height: 1.35;
}

html[data-theme] #page .fv-helion-dashboard :is(.helion-cost-type-summary > header p, .helion-cost-type-summary-grid article > p) {
  color: var(--helion-review-muted);
  font-size: 13px;
  line-height: 1.6;
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-type-summary > header > span {
  min-width: 165px;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--helion-review-line);
  border-radius: 16px;
  background: var(--helion-review-panel);
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-type-summary > header > span b {
  color: var(--helion-review-text);
  font-size: 27px;
  line-height: 1.2;
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-type-summary-grid { gap: 16px; }
html[data-theme] #page .fv-helion-dashboard .helion-cost-type-summary-grid > article {
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--helion-review-line);
  border-radius: 17px;
  background: var(--helion-review-panel);
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-type-summary-grid strong {
  margin-top: 5px;
  color: var(--helion-review-text);
  font-size: 29px;
  line-height: 1.2;
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-type-summary-grid dl { gap: 10px; }
html[data-theme] #page .fv-helion-dashboard :is(.helion-cost-type-summary-grid dl > div, .helion-cost-line dl > div) {
  min-width: 0;
  align-content: start;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--helion-review-line);
  border-radius: 12px;
  background: var(--helion-review-inset);
}

html[data-theme] #page .fv-helion-dashboard :is(.helion-cost-type-summary-grid dt, .helion-cost-line dt) {
  color: var(--helion-review-muted);
  font-size: 11px;
  line-height: 1.45;
}

html[data-theme] #page .fv-helion-dashboard :is(.helion-cost-type-summary-grid dd, .helion-cost-line dd) {
  overflow: visible;
  margin: 0;
  color: var(--helion-review-text);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
  font-variant-numeric: tabular-nums;
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-usd {
  display: block;
  margin-top: 4px;
  color: var(--helion-review-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-type-summary-grid dl > div:last-child dd { color: var(--helion-review-pending); }

/* Model costs: names and states above three readable monetary columns. */
html[data-theme] #page .fv-helion-dashboard .helion-cost-model > header {
  align-items: start;
  gap: 20px;
  padding: 22px;
  border-color: var(--helion-review-line);
  background: linear-gradient(130deg, var(--helion-review-tint), var(--helion-review-panel));
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-model > header h3 {
  overflow: visible;
  margin: 6px 0 10px;
  color: var(--helion-review-text);
  font-family: inherit;
  font-size: 21px;
  font-weight: 750;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-model > header > div:last-child { min-width: 0; max-width: 45%; gap: 7px; }
html[data-theme] #page .fv-helion-dashboard .helion-cost-model > header > div:last-child strong { color: var(--helion-review-text); font-size: 25px; line-height: 1.25; }

html[data-theme] #page .fv-helion-dashboard :is(.helion-cost-type-summary > header small, .helion-cost-type-summary-grid article > div small, .helion-cost-model > header small, .helion-cost-model > header > div:last-child span, .helion-cost-model > footer small, .helion-profit-model-name small, .helion-profit-result small) {
  color: var(--helion-review-muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .07em;
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-model .helion-plan-basis {
  max-width: 100%;
  padding: 5px 9px;
  color: var(--helion-review-paid);
  border-color: color-mix(in srgb, var(--helion-review-paid) 45%, transparent);
  background: color-mix(in srgb, var(--helion-review-paid) 8%, transparent);
  font-size: 11px;
  line-height: 1.45;
  white-space: normal;
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-model .helion-plan-basis.planned { color: var(--helion-review-muted); border-color: var(--helion-review-line); }

html[data-theme] #page .fv-helion-dashboard .helion-cost-line {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 20px 22px;
  border-color: var(--helion-review-line);
  background: transparent;
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-line > div { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; }
html[data-theme] #page .fv-helion-dashboard .helion-cost-line > div > span { grid-column: 1; grid-row: 1; align-self: center; }
html[data-theme] #page .fv-helion-dashboard .helion-cost-line > div > b { grid-column: 1; grid-row: 1; padding-left: 18px; color: var(--helion-review-text); font-size: 16px; line-height: 1.4; }
html[data-theme] #page .fv-helion-dashboard .helion-cost-line > div > small { grid-column: 1 / -1; color: var(--helion-review-muted); font-size: 12px; line-height: 1.5; }
html[data-theme] #page .fv-helion-dashboard .helion-cost-line > div > em {
  grid-column: 2;
  grid-row: 1;
  max-width: 180px;
  width: auto;
  margin: 0;
  padding: 5px 9px;
  color: var(--helion-review-pending);
  border-color: color-mix(in srgb, var(--helion-review-pending) 45%, transparent);
  background: color-mix(in srgb, var(--helion-review-pending) 7%, transparent);
  font-size: 11px;
  line-height: 1.45;
  white-space: normal;
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-line[data-payment-state="pagado"] > div > em { color: var(--helion-review-paid); border-color: var(--helion-review-paid); }
html[data-theme] #page .fv-helion-dashboard .helion-cost-line[data-payment-state="sin-plan"] > div > em { color: var(--helion-review-muted); border-color: var(--helion-review-line); background: transparent; }
html[data-theme] #page .fv-helion-dashboard .helion-cost-line dd.pending { color: var(--helion-review-pending); }
html[data-theme] #page .fv-helion-dashboard .helion-cost-line dd.settled { color: var(--helion-review-paid); }
html[data-theme] #page .fv-helion-dashboard .helion-cost-line > p { margin: 0; color: var(--helion-review-muted); font-size: 12px; line-height: 1.6; }
html[data-theme] #page .fv-helion-dashboard .helion-cost-line > p.helion-commission-basis { padding-top: 10px; border-top: 1px dashed var(--helion-review-line); }

html[data-theme] #page .fv-helion-dashboard .helion-cost-register {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: 100%;
  min-height: 36px;
  margin: 3px 0 0;
  padding: 8px 14px;
  border: 1px solid var(--helion-review-line);
  border-radius: 10px;
  color: var(--helion-review-text);
  background: var(--helion-review-tint);
  font-size: 12px;
  text-decoration: none;
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-model > footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 20px 22px;
  border-top: 1px solid var(--helion-review-line);
  background: var(--helion-review-tint);
}

html[data-theme] #page .fv-helion-dashboard .helion-cost-model > footer > span { gap: 7px; min-width: 0; }
html[data-theme] #page .fv-helion-dashboard .helion-cost-model > footer b { color: var(--helion-review-text); font-size: 23px; line-height: 1.3; font-variant-numeric: tabular-nums; }
html[data-theme] #page .fv-helion-dashboard .helion-cost-model > footer .pending b { color: var(--helion-review-pending); }

html[data-theme] #page .fv-helion-dashboard .helion-other-paid { gap: 12px; padding: 18px 22px; border-color: var(--helion-review-line); background: var(--helion-review-inset); }
html[data-theme] #page .fv-helion-dashboard .helion-other-paid b { color: var(--helion-review-text); font-size: 14px; line-height: 1.45; }
html[data-theme] #page .fv-helion-dashboard .helion-other-paid small { color: var(--helion-review-muted); font-size: 12px; line-height: 1.5; }
html[data-theme] #page .fv-helion-dashboard .helion-other-paid > strong { color: var(--helion-review-text); font-size: 16px; font-variant-numeric: tabular-nums; }

/* Utility cards: a clear result, then the unchanged financial components. */
html[data-theme] #page .fv-helion-dashboard .helion-profit-model { display: flex; flex-direction: column; align-self: stretch; }
html[data-theme] #page .fv-helion-dashboard .helion-profit-model > header { align-items: center; gap: 18px; padding: 22px; border-color: var(--helion-review-line); background: linear-gradient(130deg, var(--helion-review-tint), var(--helion-review-panel)); }
html[data-theme] #page .fv-helion-dashboard .helion-profit-model-name > span { width: 43px; height: 43px; border-radius: 14px; }
html[data-theme] #page .fv-helion-dashboard .helion-profit-model-name h3 { overflow: visible; color: var(--helion-review-text); font-size: 20px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
html[data-theme] #page .fv-helion-dashboard .helion-profit-result { min-width: 0; max-width: 48%; }
html[data-theme] #page .fv-helion-dashboard .helion-profit-result strong { margin: 6px 0; font-size: 28px; line-height: 1.25; color: var(--helion-review-paid); }
html[data-theme] #page .fv-helion-dashboard .helion-profit-result em { color: var(--helion-review-muted); font-size: 12px; line-height: 1.4; }
html[data-theme] #page .fv-helion-dashboard .helion-profit-model.is-negative :is(.helion-profit-result strong, footer strong) { color: var(--helion-review-negative); }
html[data-theme] #page .fv-helion-dashboard .helion-profit-model.is-incomplete :is(.helion-profit-result strong, footer strong) { color: var(--helion-review-pending); font-size: 19px; }

html[data-theme] #page .fv-helion-dashboard .helion-profit-core { gap: 12px; padding: 18px 22px; background: var(--helion-review-panel); }
html[data-theme] #page .fv-helion-dashboard .helion-profit-core > div { min-height: 0; padding: 12px; border: 1px solid var(--helion-review-line); border-radius: 12px; background: var(--helion-review-inset); }
html[data-theme] #page .fv-helion-dashboard .helion-profit-core small { min-height: 32px; color: var(--helion-review-muted); font-size: 10px; line-height: 1.5; letter-spacing: .04em; }
html[data-theme] #page .fv-helion-dashboard .helion-profit-core b { color: var(--helion-review-text); font-size: 18px; line-height: 1.4; font-variant-numeric: tabular-nums; }
html[data-theme] #page .fv-helion-dashboard .helion-profit-costs { padding: 0 22px 16px; background: transparent; }
html[data-theme] #page .fv-helion-dashboard .helion-profit-costs p { gap: 6px 14px; padding: 12px 0; border-color: var(--helion-review-line); font-size: 14px; line-height: 1.5; }
html[data-theme] #page .fv-helion-dashboard .helion-profit-costs p span { color: var(--helion-review-muted); }
html[data-theme] #page .fv-helion-dashboard .helion-profit-costs p b { color: var(--helion-review-text); font-variant-numeric: tabular-nums; }
html[data-theme] #page .fv-helion-dashboard .helion-profit-costs p small { color: var(--helion-review-muted); font-size: 12px; line-height: 1.5; }
html[data-theme] #page .fv-helion-dashboard .helion-profit-costs .subtle-button { min-height: 38px; margin-top: 3px; font-size: 12px; }
html[data-theme] #page .fv-helion-dashboard .helion-profit-model > footer { gap: 12px; margin-top: auto; padding: 18px 22px; border-color: var(--helion-review-line); background: var(--helion-review-inset); }
html[data-theme] #page .fv-helion-dashboard .helion-profit-model > footer span { color: var(--helion-review-muted); font-size: 12px; line-height: 1.45; }
html[data-theme] #page .fv-helion-dashboard .helion-profit-model > footer strong { grid-column: -2 / -1; color: var(--helion-review-paid); font-size: 19px; font-variant-numeric: tabular-nums; }
html[data-theme] #page .fv-helion-dashboard .helion-profit-model > .secondary { align-self: stretch; min-height: 42px; margin: 16px 22px 20px; font-size: 13px; }

@media (max-width: 1100px) {
  html[data-theme] #page .fv-helion-dashboard :is(.helion-cost-model-grid, .helion-profit-model-grid) { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  html[data-theme] #page .fv-helion-dashboard .helion-cost-type-summary { padding: 18px; }
  html[data-theme] #page .fv-helion-dashboard .helion-cost-type-summary > header { align-items: stretch; flex-direction: column; gap: 16px; }
  html[data-theme] #page .fv-helion-dashboard .helion-cost-type-summary > header > span { min-width: 0; text-align: left; }
  html[data-theme] #page .fv-helion-dashboard .helion-cost-type-summary-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-theme] #page .fv-helion-dashboard .helion-cost-register { min-height: 42px; }
}

@media (max-width: 480px) {
  html[data-theme] #page .fv-helion-dashboard :is(.helion-cost-model > header, .helion-profit-model > header) { flex-wrap: wrap; padding: 18px; }
  html[data-theme] #page .fv-helion-dashboard .helion-cost-model > header > div:last-child { max-width: 100%; text-align: left; }
  html[data-theme] #page .fv-helion-dashboard .helion-cost-line { padding: 18px; }
  html[data-theme] #page .fv-helion-dashboard .helion-cost-line > div { grid-template-columns: minmax(0, 1fr); }
  html[data-theme] #page .fv-helion-dashboard .helion-cost-line > div > em { grid-column: 1; grid-row: auto; justify-self: start; max-width: 100%; }
  html[data-theme] #page .fv-helion-dashboard .helion-cost-line dl { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  html[data-theme] #page .fv-helion-dashboard .helion-cost-line dl > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  html[data-theme] #page .fv-helion-dashboard .helion-cost-line dd { text-align: right; }
  html[data-theme] #page .fv-helion-dashboard .helion-cost-model > footer { gap: 12px; padding: 18px; }
  html[data-theme] #page .fv-helion-dashboard .helion-cost-model > footer b { font-size: 20px; }
  html[data-theme] #page .fv-helion-dashboard .helion-profit-result { max-width: 100%; }
  html[data-theme] #page .fv-helion-dashboard .helion-profit-core { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 18px; }
  html[data-theme] #page .fv-helion-dashboard .helion-profit-core > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  html[data-theme] #page .fv-helion-dashboard .helion-profit-core small { min-height: 0; }
  html[data-theme] #page .fv-helion-dashboard .helion-profit-core b { flex-shrink: 0; margin: 0; }
  html[data-theme] #page .fv-helion-dashboard .helion-profit-costs { padding: 0 18px 16px; }
  html[data-theme] #page .fv-helion-dashboard .helion-profit-model > footer { grid-template-columns: minmax(0, 1fr) auto; padding: 16px 18px; }
  html[data-theme] #page .fv-helion-dashboard .helion-profit-model > footer i { grid-column: 1 / -1; grid-row: 2; }
  html[data-theme] #page .fv-helion-dashboard .helion-profit-model > .secondary { margin: 14px 18px 18px; }
}
