/* Crédito Papito module. The financial values come from the server view model. */
:root {
  --bg: #07090f;
  --surface-0: #0c1020;
  --surface-1: #111827;
  --surface-2: #1a2236;
  --surface-3: #1f2b40;
  --border: rgba(100, 210, 230, .09);
  --accent: #22d3ee;
  --success: #34d399;
  --warn: #fbbf24;
  --text-1: #f0f4fa;
  --text-2: #8b9bb4;
  --text-3: #6e7c99;
  --ff-display: 'Spectral', Georgia, serif;
  --ff-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ff-mono: 'IBM Plex Mono', monospace;
  --r-md: 10px;
  --r-lg: 16px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-height: 100dvh; background: var(--bg); color: var(--text-1); font: 400 1rem/1.6 var(--ff-body); }
body::before { content: ''; position: fixed; top: -30%; left: 50%; transform: translateX(-50%); width: 90vw; height: 60vh; background: radial-gradient(ellipse, rgba(34,211,238,.045), transparent 70%); pointer-events: none; }
body::after { content: ''; position: fixed; inset: 0; background-image: radial-gradient(circle, rgba(148,163,184,.04) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; }
.app-wrapper { position: relative; z-index: 1; max-width: 1300px; margin: 0 auto; padding: 0 40px 60px; }
.credit-share-wrapper { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 48px 40px 72px; }
.tabs { display: flex; gap: 2px; padding: 3px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); width: fit-content; max-width: 100%; overflow-x: auto; }
.view-btn { padding: 8px 20px; color: var(--text-3); border-radius: 7px; font: 500 .8rem var(--ff-body); white-space: nowrap; }
.view-btn.active { color: #042f3a; background: var(--accent); font-weight: 600; box-shadow: 0 2px 10px rgba(34,211,238,.25); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.credit-shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 94px;
  border-bottom: 1px solid var(--border);
}
.credit-brand { display: flex; align-items: center; gap: 12px; font: 600 1.55rem var(--ff-display); letter-spacing: -.02em; }
.credit-header-note { color: var(--text-3); font: 500 .65rem var(--ff-mono); text-transform: uppercase; letter-spacing: .13em; }
.credit-app-tabs { margin: 26px 0 34px; }
.credit-app-tabs .view-btn { cursor: default; white-space: nowrap; }
.credit-page { max-width: 1160px; margin: 0 auto; }
.credit-page > * + * { margin-top: 26px; }
.credit-demo-note {
  display: flex; align-items: center; gap: 13px;
  border: 1px solid rgba(251,191,36,.27); border-radius: 12px;
  background: linear-gradient(95deg, rgba(251,191,36,.09), rgba(251,191,36,.025));
  padding: 11px 15px; color: #d7cba8; font-size: .76rem;
}
.credit-demo-note strong { color: #fce6aa; }
.credit-demo-icon { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; background: rgba(251,191,36,.15); color: var(--warn); font-size: .9rem; }
.credit-review-note { padding: 11px 15px; border: 1px solid rgba(251,191,36,.27); border-radius: 12px; color: #fce6aa; background: rgba(251,191,36,.07); font-size: .76rem; }
.credit-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.credit-overline, .credit-kicker { color: var(--accent); font: 600 .65rem var(--ff-mono); text-transform: uppercase; letter-spacing: .15em; }
.credit-intro h1, .credit-intro h2 {
  display: block; padding: 0; margin: 5px 0 4px; border: 0;
  font: 600 clamp(2.4rem, 5vw, 4.1rem)/1.1 var(--ff-display); letter-spacing: -.045em; text-transform: none;
}
.credit-intro p:last-child { color: var(--text-2); font-size: .94rem; }
.credit-intro-actions { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 13px; }
.credit-asof { flex-shrink: 0; padding-bottom: 7px; color: var(--text-3); font-size: .72rem; }
.credit-asof strong { display: block; color: var(--text-1); font: 500 .8rem var(--ff-mono); }
.credit-share-menu { position: relative; z-index: 3; }
.credit-share-menu summary { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 40px; padding: 8px 13px; border: 1px solid rgba(34,211,238,.31); border-radius: 9px; background: rgba(34,211,238,.08); color: #a7edf5; font: 700 .73rem var(--ff-body); cursor: pointer; list-style: none; }
.credit-share-menu summary::-webkit-details-marker { display: none; }
.credit-share-menu summary:hover, .credit-share-menu[open] summary { background: rgba(34,211,238,.15); border-color: rgba(34,211,238,.5); }
.credit-share-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.credit-share-menu summary span { font-size: .95rem; font-weight: 400; }
.credit-share-options { position: absolute; top: calc(100% + 8px); right: 0; display: grid; min-width: 180px; padding: 6px; border: 1px solid rgba(100,210,230,.2); border-radius: 10px; background: #172237; box-shadow: 0 14px 35px rgba(0,0,0,.35); }
.credit-share-options a { display: flex; justify-content: space-between; gap: 15px; padding: 9px 11px; border-radius: 6px; color: var(--text-1); font-size: .73rem; text-decoration: none; white-space: nowrap; }
.credit-share-options a:hover, .credit-share-options a:focus-visible { background: rgba(34,211,238,.1); color: #a7edf5; }
.credit-share-options a span { color: var(--text-3); }
.credit-top-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(295px, 1fr); gap: 16px; }
.credit-balance, .credit-next, .credit-evolution, .credit-ledger, .credit-story, .credit-mail { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); }
.credit-balance {
  position: relative; overflow: hidden; padding: 27px 30px 24px;
  background: radial-gradient(ellipse at 84% 0%, rgba(34,211,238,.16), transparent 48%), linear-gradient(145deg, #123140, #102435 55%, #0f1b2c);
  border-color: rgba(34,211,238,.21);
}
.credit-balance::after { content: ''; position: absolute; right: -72px; top: -91px; width: 270px; aspect-ratio: 1; border: 1px solid rgba(34,211,238,.12); border-radius: 50%; box-shadow: 0 0 0 45px rgba(34,211,238,.025), 0 0 0 90px rgba(34,211,238,.018); pointer-events: none; }
.credit-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.credit-live-pill, .credit-quote-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid rgba(52,211,153,.3); border-radius: 999px; background: rgba(52,211,153,.09); color: #93e6c1; font: 600 .63rem var(--ff-body); white-space: nowrap; }
.credit-live-pill > span { width: 5px; height: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(52,211,153,.16); }
.credit-balance h3, .credit-next h3 { margin: 27px 0 4px; color: #bed3de; font: 500 .84rem var(--ff-body); text-transform: none; letter-spacing: 0; }
.credit-balance-amount { font: 500 clamp(3.8rem, 7vw, 6rem)/1 var(--ff-display); letter-spacing: -.055em; color: #f7fcff; white-space: nowrap; }
.credit-balance-amount span { color: #a6dfe5; }
.credit-balance-amount small { font: 600 .27em var(--ff-mono); letter-spacing: .02em; color: var(--accent); }
.credit-balance-equivalent { margin-top: 10px; font: 500 .83rem var(--ff-mono); color: #d1e8ee; }
.credit-balance-equivalent span { font: 400 .72rem var(--ff-body); color: #9ab8c3; }
.credit-progress-head { display: flex; justify-content: space-between; margin-top: 31px; color: #acc6cf; font-size: .73rem; }
.credit-progress-head strong { color: #e7fafd; font: 600 .8rem var(--ff-mono); }
.credit-progress-track { display: block; appearance: none; width: 100%; height: 9px; margin: 9px 0 23px; overflow: hidden; border: 1px solid rgba(34,211,238,.12); border-radius: 99px; background: #0a1a28; }
.credit-progress-track::-webkit-progress-bar { background: #0a1a28; }
.credit-progress-track::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, #2dd4bf, #22d3ee); }
.credit-progress-track::-moz-progress-bar { border-radius: 99px; background: linear-gradient(90deg, #2dd4bf, #22d3ee); }
.credit-balance-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(206,245,255,.12); padding-top: 19px; gap: 13px; }
.credit-balance-stats div { display: grid; gap: 3px; }
.credit-balance-stats span { color: #8faebb; font-size: .68rem; }
.credit-balance-stats strong { color: #e6f4f7; font: 500 .86rem var(--ff-mono); white-space: nowrap; }
.credit-next { display: flex; flex-direction: column; padding: 27px 27px 22px; background: linear-gradient(145deg, #171c33, #111827 70%); }
.credit-quote-pill { border-color: rgba(34,211,238,.27); background: rgba(34,211,238,.08); color: #7ee5f4; }
.credit-next h3 { margin-top: 27px; }
.credit-next-date { color: var(--text-1); font: 600 1.38rem var(--ff-display); }
.credit-next-date span { color: var(--text-2); }
.credit-next-amount { margin: 13px 0 3px; color: #f8fcff; font: 600 clamp(2rem, 3vw, 2.6rem)/1.2 var(--ff-mono); letter-spacing: -.06em; white-space: nowrap; }
.credit-next-formula { color: var(--text-2); font: 500 .72rem var(--ff-mono); }
.credit-next-formula a { color: var(--accent); text-underline-offset: 2px; }
.credit-next-formula span { padding: 0 5px; color: var(--accent); }
.credit-next-detail { display: flex; gap: 11px; margin-top: 24px; padding: 13px; border: 1px solid rgba(34,211,238,.11); border-radius: 10px; background: rgba(34,211,238,.045); }
.credit-next-detail p { color: #a8bbc9; font-size: .73rem; line-height: 1.6; }
.credit-detail-icon { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border-radius: 6px; background: rgba(34,211,238,.14); color: var(--accent); }
.credit-payoff-note { margin-top: 14px; color: var(--text-2); font-size: .7rem; }
.credit-payoff-note strong { color: #d6c9f8; font-weight: 600; }
.credit-text-link { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-top: auto; padding-top: 17px; color: var(--accent); font-size: .73rem; font-weight: 700; text-decoration: none; }
.credit-text-link:hover { text-decoration: underline; }
.credit-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 12px; scroll-margin-top: 20px; }
.credit-section-heading h3, .credit-story h3, .credit-mail h3 { margin: 4px 0 0; color: var(--text-1); font: 600 1.65rem/1.2 var(--ff-display); letter-spacing: -.02em; text-transform: none; }
.credit-section-heading > p { max-width: 390px; color: var(--text-2); font-size: .75rem; text-align: right; }
.credit-evolution { margin-top: 0; padding: 22px 25px 16px; }
.credit-chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 11px 21px; margin-bottom: 18px; color: var(--text-2); font-size: .7rem; }
.credit-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.credit-legend-actual { width: 17px; height: 0; border-top: 3px solid var(--accent); border-radius: 3px; }
.credit-legend-line { width: 17px; height: 0; border-top: 2px dashed #a78bfa; }
.credit-legend-grace { width: 13px; height: 9px; border: 1px dashed var(--warn); border-radius: 2px; background: rgba(251,191,36,.06); }
.credit-timeline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.credit-timeline-panel { min-width: 0; padding: 18px 18px 13px; border: 1px solid rgba(114, 179, 204, .13); border-radius: 12px; background: linear-gradient(155deg, rgba(18, 32, 51, .92), rgba(11, 19, 34, .9)); }
.credit-timeline-future { background: linear-gradient(155deg, rgba(29, 28, 53, .88), rgba(13, 20, 37, .92)); }
.credit-timeline-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 66px; }
.credit-timeline-overline { color: var(--accent); font: 600 .58rem var(--ff-mono); letter-spacing: .12em; text-transform: uppercase; }
.credit-timeline-future .credit-timeline-overline { color: #b9a4ef; }
.credit-timeline-head h4 { margin-top: 2px; color: var(--text-1); font: 600 1.16rem/1.25 var(--ff-display); }
.credit-timeline-range { color: var(--text-2); font: 400 .64rem var(--ff-mono); }
.credit-timeline-scale { flex-shrink: 0; padding: 4px 7px; border: 1px solid rgba(148, 163, 184, .15); border-radius: 99px; color: #a9bacd; font: 500 .56rem var(--ff-body); white-space: nowrap; }
.credit-timeline-scroll { overflow-x: auto; }
.credit-timeline-svg { display: block; width: 100%; height: auto; margin: 7px 0 0; }
.credit-timeline-svg text { font: 500 10px var(--ff-mono); }
.credit-timeline-grace-band { fill: rgba(251, 191, 36, .09); }
.credit-timeline-gridlines { fill: none; stroke: rgba(139, 155, 180, .17); stroke-width: 1; }
.credit-timeline-unit { fill: #71859d; font-size: 9px !important; }
.credit-timeline-ylabel { fill: #91a5ba; }
.credit-timeline-xlabel { fill: #8398ae; }
.credit-timeline-actual, .credit-timeline-planned { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.credit-timeline-actual { stroke: var(--accent); }
.credit-timeline-planned { stroke: #ad95ef; stroke-dasharray: 6 6; }
.credit-timeline-history .credit-timeline-planned { stroke: #e9ba5a; }
.credit-timeline-dot { fill: var(--accent); stroke: #0d1b2b; stroke-width: 2; }
.credit-timeline-final { fill: #ad95ef; stroke: #1d1c35; stroke-width: 3; }
.credit-timeline-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; padding-top: 7px; border-top: 1px solid rgba(139, 155, 180, .11); color: var(--text-2); font-size: .65rem; }
.credit-timeline-foot strong { color: var(--text-1); font: 500 .72rem var(--ff-mono); }
.credit-chart-foot { margin-top: 17px; border-top: 1px solid var(--border); padding-top: 12px; color: var(--text-2); font-size: .72rem; }
.credit-chart-foot strong { color: var(--text-1); font-family: var(--ff-mono); font-weight: 500; }
.credit-ledger { margin-top: 0; overflow: hidden; }
.credit-ledger-toolbar { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border); color: var(--text-1); font: 600 .72rem var(--ff-mono); }
.credit-ledger-count { color: var(--text-2); font: 400 .71rem var(--ff-body); }
.credit-table-scroll { overflow-x: auto; }
.credit-ledger table { width: 100%; min-width: 850px; border-collapse: collapse; text-align: left; }
.credit-ledger th, .credit-ledger td { padding: 13px 20px; vertical-align: middle; border-bottom: 1px solid rgba(100,210,230,.07); font-size: .76rem; white-space: nowrap; }
.credit-ledger thead th { color: var(--text-3); background: rgba(7,9,15,.25); font: 600 .59rem var(--ff-body); text-transform: uppercase; letter-spacing: .1em; }
.credit-ledger tbody tr:last-child > * { border-bottom: 0; }
.credit-ledger tbody tr:hover { background: rgba(34,211,238,.025); }
.credit-ledger th[scope=row] strong, .credit-ledger td strong { display: block; color: var(--text-1); font-weight: 600; }
.credit-ledger td { color: #cbd7e6; }
.credit-ledger th small, .credit-ledger td small { display: block; margin-top: 3px; color: var(--text-3); font: 400 .65rem var(--ff-body); }
.credit-ledger td:nth-child(3) strong, .credit-ledger td:nth-child(4) { font-family: var(--ff-mono); }
.credit-row-next { background: rgba(34,211,238,.055); }
.credit-row-grace { background: rgba(251,191,36,.035); }
.credit-row-exception { background: rgba(192,132,252,.025); }
.credit-status { display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid currentColor; border-radius: 99px; font-size: .64rem; font-weight: 700; }
.credit-status-confirmed, .credit-status-paid { color: #72dfb3; background: rgba(52,211,153,.10); border-color: rgba(52,211,153,.35); }
.credit-status-next { color: #75e1f2; background: rgba(34,211,238,.07); border-color: rgba(34,211,238,.28); }
.credit-status-grace { color: #f5cc71; background: rgba(251,191,36,.06); border-color: rgba(251,191,36,.26); }
.credit-status-projected { color: #c6adf6; background: rgba(167,139,250,.06); border-color: rgba(167,139,250,.28); }
.credit-status-overdue, .credit-status-due { color: #f5cc71; background: rgba(251,191,36,.06); border-color: rgba(251,191,36,.26); }
.credit-ledger .credit-row-note { margin-top: 5px; color: #cbb0ee; }
.credit-future { border-top: 1px solid var(--border); }
.credit-future summary { cursor: pointer; padding: 16px 20px; color: var(--accent); font-size: .76rem; font-weight: 700; }
.credit-future summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.credit-empty { padding: 28px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); }
.credit-empty h3 { color: var(--text-1); font: 600 1.5rem var(--ff-display); }
.credit-empty p { margin-top: 8px; color: var(--text-2); }
.credit-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.credit-story, .credit-mail { padding: 25px 27px; }
.credit-story ol { list-style: none; margin: 21px 0 0; }
.credit-story li { position: relative; display: flex; gap: 13px; padding: 0 0 19px; }
.credit-story li:not(:last-child)::before { content: ''; position: absolute; left: 5px; top: 15px; bottom: 2px; width: 1px; background: rgba(34,211,238,.2); }
.credit-story li:last-child { padding-bottom: 0; }
.credit-story-dot { flex: 0 0 11px; height: 11px; margin-top: 5px; border: 2px solid var(--accent); border-radius: 50%; background: var(--surface-1); }
.credit-story li:nth-child(2) .credit-story-dot { border-color: var(--warn); }
.credit-story strong { color: var(--text-1); font-size: .77rem; }
.credit-story li p, .credit-mail > p:not(.credit-overline) { margin-top: 3px; color: var(--text-2); font-size: .73rem; }
.credit-mail-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 25px 0 17px; color: var(--text-3); font-size: .72rem; }
.credit-mail-steps > span:nth-child(even) { color: #5f718d; }
.credit-mail-steps strong { color: #79e4b6; }
.credit-mail-example { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 25px; padding-top: 15px; border-top: 1px solid var(--border); color: var(--text-3); font-size: .68rem; }
@media (max-width: 850px) {
  .credit-top-grid, .credit-bottom-grid, .credit-timeline-grid { grid-template-columns: 1fr; }
  .credit-next { min-height: 330px; }
}
@media (max-width: 620px) {
  .app-wrapper { padding: 0 16px 45px; }
  .credit-share-wrapper { padding: 32px 16px 56px; }
  .credit-shell-header { min-height: 75px; }
  .credit-brand { font-size: 1.2rem; }
  .credit-header-note { display: none; }
  .credit-app-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 18px 0 26px; overflow: visible; }
  .credit-app-tabs .view-btn { text-align: center; }
  .credit-page > * + * { margin-top: 22px; }
  .credit-intro { align-items: flex-start; flex-direction: column; gap: 12px; }
  .credit-intro-actions { align-items: flex-start; width: 100%; }
  .credit-asof { display: flex; gap: 8px; padding: 0; }
  .credit-share-options { left: 0; right: auto; }
  .credit-intro h1, .credit-intro h2 { font-size: 2.8rem; }
  .credit-balance, .credit-next, .credit-story, .credit-mail { padding: 21px; }
  .credit-balance-amount { font-size: 4rem; }
  .credit-balance-equivalent span { display: block; margin-top: 3px; }
  .credit-balance-stats { grid-template-columns: repeat(2, 1fr); }
  .credit-balance-stats div:last-child { grid-column: 1 / -1; }
  .credit-next { min-height: auto; }
  .credit-section-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .credit-section-heading > p { text-align: left; }
  .credit-evolution { padding: 18px 14px 14px; }
  .credit-chart-legend { justify-content: flex-start; }
  .credit-timeline-svg { min-width: 460px; }
  .credit-ledger-toolbar { align-items: flex-start; flex-direction: column; gap: 4px; }
  .credit-table-scroll { overflow: visible; padding: 12px; }
  .credit-ledger table, .credit-ledger tbody { display: block; width: 100%; min-width: 0; }
  .credit-ledger thead { display: none; }
  .credit-ledger tbody { display: grid; gap: 10px; }
  .credit-ledger tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 13px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface-0); }
  .credit-ledger tbody tr.credit-row-next { border-color: rgba(34,211,238,.23); background: rgba(34,211,238,.055); }
  .credit-ledger tbody tr.credit-row-grace { border-color: rgba(251,191,36,.17); background: rgba(251,191,36,.035); }
  .credit-ledger th[scope=row] { grid-column: 1 / -1; padding: 0 0 8px; margin-bottom: 9px; border-bottom: 1px solid var(--border); }
  .credit-ledger tbody td { display: block; min-width: 0; padding: 5px 0; border: 0; font-size: .74rem; white-space: normal; }
  .credit-ledger tbody td::before { display: block; margin-bottom: 3px; color: var(--text-3); font: 600 .54rem var(--ff-body); text-transform: uppercase; letter-spacing: .09em; }
  .credit-ledger tbody td:nth-of-type(1)::before { content: 'Cuota prevista'; }
  .credit-ledger tbody td:nth-of-type(2)::before { content: 'Pago real'; }
  .credit-ledger tbody td:nth-of-type(3)::before { content: 'Valor UF'; }
  .credit-ledger tbody td:nth-of-type(4)::before { content: 'Saldo UF'; }
  .credit-ledger tbody td:nth-of-type(5)::before { content: 'Estado'; }
  .credit-ledger tbody td:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .credit-page *, .credit-page *::before, .credit-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }