/* Dorax Finance — the owner's Debts in the v6 look (v349, features/phone/r6-debts.js; the canvas boards "Deudas-V6", "Jornada-V6", "Vacio-Deudas-V6").
   The frame is the main screens' (look-r6-pages.css): the page #070808, the cards #121414 with their edge of light, the actions at the foot.
   Here: what is owed and the month out on the page; the Journey's card (or its dashed invitation); the order of payment as two choices in muted
   white; the debts in one card, each with its way out on the same months; and the Journey opened from Debts (without the wheel above it). */
@media (max-width: 920px) {
  /* ---------- the top: what is owed, the month out, the pace ---------- */
  :root.r6.r6-pg #view .r6-debt-top .r6-big6.quiet > b { color: rgba(239, 241, 246, .42); }
  :root.r6.r6-pg #view .r6-debt-out { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; }
  :root.r6.r6-pg #view .r6-debt-out b { color: #EFF1F6; font-size: 18px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
  :root.r6.r6-pg #view .r6-debt-out.pos b { color: #9FD182; }
  :root.r6.r6-pg #view .r6-debt-oi { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(159, 209, 130, .13); color: #9FD182; }
  :root.r6.r6-pg #view .r6-debt-oi svg { stroke-width: 2; }
  :root.r6.r6-pg #view .r6-debt-out.none i { display: block; width: 62%; height: 0; margin: 6px 0; border-top: 2px dashed rgba(239, 241, 246, .18); }
  :root.r6.r6-pg #view .r6-debt-pace { display: block; margin-top: 6px; color: rgba(239, 241, 246, .6); font-size: 13.5px; line-height: 1.45; }
  :root.r6.r6-pg #view .r6-debt-none { margin: 22px 2px 0; color: rgba(239, 241, 246, .6); font-size: 15px; line-height: 1.45; }

  /* ---------- the Journey on Debts: its card, or the dashed invitation ---------- */
  :root.r6.r6-pg #view :is(.r6-jcard, .r6-jinv) { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; margin-top: 22px; color: #EFF1F6; }
  :root.r6.r6-pg #view .r6-jcard { flex-direction: column; gap: 14px; padding: 14px 16px 16px; border: 1px solid transparent; border-radius: 28px; background: var(--r6-face), linear-gradient(#121414, #121414) padding-box, var(--r6-rim); }
  :root.r6.r6-pg #view .r6-jinv { align-items: center; gap: 12px; min-height: 72px; padding: 0 18px 0 14px; border: 1.5px dashed rgba(239, 241, 246, .22); border-radius: 28px; }
  :root.r6.r6-pg #view .r6-jc-h { display: flex; align-items: center; gap: 12px; }
  :root.r6.r6-pg #view :is(.r6-jc-fl, .r6-jc-ic) { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
  :root.r6.r6-pg #view .r6-jc-fl { background: rgba(239, 241, 246, .05); color: rgba(239, 241, 246, .55); }
  :root.r6.r6-pg #view .r6-jc-fl.lit { background: radial-gradient(circle at 50% 60%, rgba(159, 209, 130, .45), rgba(159, 209, 130, 0) 70%), rgba(239, 241, 246, .05); color: #9FD182; }
  :root.r6.r6-pg #view .r6-jc-fl.lit svg { fill: rgba(159, 209, 130, .35); }
  :root.r6.r6-pg #view .r6-jc-ic { background: rgba(159, 209, 130, .14); color: #9FD182; }
  :root.r6.r6-pg #view .r6-jc-ic svg { stroke-width: 2.4; }
  :root.r6.r6-pg #view .r6-jc-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  :root.r6.r6-pg #view .r6-jc-t b { font-size: 15px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-jinv .r6-jc-t b { font-size: 15.5px; }
  :root.r6.r6-pg #view .r6-jc-t small { color: rgba(239, 241, 246, .6); font-size: 13px; }
  :root.r6.r6-pg #view .r6-jc-go { flex: none; display: grid; color: rgba(239, 241, 246, .5); }
  :root.r6.r6-pg #view .r6-jc-days { display: flex; flex-direction: column; gap: 8px; }
  :root.r6.r6-pg #view .r6-jc-days > span:first-child { display: grid; gap: 3px; }
  :root.r6.r6-pg #view .r6-jc-days i { display: block; height: 8px; border-radius: 4px; background: rgba(239, 241, 246, .08); }
  :root.r6.r6-pg #view .r6-jc-days i.on { background: #9FD182; }
  :root.r6.r6-pg #view .r6-jc-days i.now { background: rgba(159, 209, 130, .3); }
  :root.r6.r6-pg #view .r6-jc-days > span:last-child { display: flex; justify-content: space-between; gap: 12px; color: rgba(239, 241, 246, .55); font-size: 12.5px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-jc-days .left { color: #9FD182; }

  /* ---------- the order of payment: two choices, the one chosen in muted white ---------- */
  :root.r6.r6-pg #view .r6-ord { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
  :root.r6.r6-pg #view .r6-lb { color: rgba(239, 241, 246, .6); font-size: 13px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-ord-seg { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: rgba(239, 241, 246, .06); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .12); }
  :root.r6.r6-pg #view .r6-ord-seg button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 0; height: 44px; padding: 0 10px; border-radius: 999px; color: rgba(239, 241, 246, .62); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background-color .25s ease, color .25s ease; }
  :root.r6.r6-pg #view .r6-ord-seg button[aria-pressed="true"] { background: #D9DCE1; color: #101212; }
  :root.r6.r6-pg #view .r6-ord-seg .pick-pill { border-radius: 999px; background: #D9DCE1; }
  :root.r6.r6-pg #view .r6-ord > small { color: rgba(239, 241, 246, .6); font-size: 13.5px; line-height: 1.45; }
  :root.r6.r6-pg #view .r6-ord > small b { color: #EFF1F6; font-weight: 500; }

  /* ---------- every debt, in that order, in one card ---------- */
  :root.r6.r6-pg #view #jr-debts { margin-top: 20px; }
  :root.r6.r6-pg #view .r6-dlist { display: flex; flex-direction: column; border-radius: 30px; }
  :root.r6.r6-pg #view .r6-dl-h { display: flex; justify-content: space-between; padding: 14px 18px 0 74px; color: rgba(239, 241, 246, .45); font-size: 12px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-dr { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 100px; padding: 16px 18px 16px 16px; background-color: rgba(217, 220, 225, 0); transition: background-color .25s ease; }
  :root.r6.r6-pg #view .r6-dr + .r6-dr { border-top: 1px solid rgba(239, 241, 246, .07); }
  :root.r6.r6-pg #view .r6-dr.on { background-color: rgba(217, 220, 225, .06); }
  :root.r6.r6-pg #view .r6-dr:focus-visible { outline: 2px solid #9FD182; outline-offset: -2px; }
  :root.r6.r6-pg #view .r6-dr-a { display: flex; align-items: center; gap: 14px; }
  :root.r6.r6-pg #view .r6-dr-p { position: relative; flex: none; width: 44px; height: 44px; }
  :root.r6.r6-pg #view .r6-dr-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 138, 128, .13); color: #FF8A80; overflow: hidden; }
  :root.r6.r6-pg #view .r6-dr-ic.bank { background: none; }
  :root.r6.r6-pg #view .r6-dr-ic.bank .inst { width: 44px; height: 44px; border-radius: 50%; font-size: 14px; }
  :root.r6.r6-pg #view .r6-dr-ic.bank .inst img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
  :root.r6.r6-pg #view .r6-dr-n { position: absolute; right: -4px; bottom: -3px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #2A2E2E; color: #EFF1F6; box-shadow: 0 0 0 2px #121414; font-size: 11.5px; font-weight: 600; transition: background-color .25s ease, color .25s ease; }
  :root.r6.r6-pg #view .r6-dr.on .r6-dr-n { background: #D9DCE1; color: #101212; }
  :root.r6.r6-pg #view .r6-dr-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  :root.r6.r6-pg #view .r6-dr-t b { overflow: hidden; color: #EFF1F6; font-size: 15.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.r6.r6-pg #view .r6-dr-t small { overflow: hidden; color: rgba(239, 241, 246, .55); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  :root.r6.r6-pg #view .r6-dr-v { flex: none; color: #FF8A80; font-size: 15px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-dr.paid .r6-dr-v { color: #9FD182; }
  :root.r6.r6-pg #view .r6-dr-b { display: flex; align-items: center; gap: 10px; padding-left: 58px; }
  :root.r6.r6-pg #view .r6-dr-tr { position: relative; flex: 1 1 auto; height: 6px; border-radius: 3px; background: rgba(239, 241, 246, .06); }
  :root.r6.r6-pg #view .r6-dr-tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: rgba(255, 138, 128, .5); transform-origin: 0 50%; animation: r6-debt-grow 1s cubic-bezier(.2, .9, .25, 1) .2s both; }
  :root.r6.r6-pg #view .r6-dr.paid .r6-dr-tr i { background: rgba(159, 209, 130, .45); }
  :root.r6.r6-pg #view .r6-dr-tr em { position: absolute; top: -3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: rgba(239, 241, 246, .3); box-shadow: 0 0 0 3px #121414; }
  :root.r6.r6-pg #view .r6-dr-tr em.end { background: #9FD182; }
  :root.r6.r6-pg #view .r6-dr-b small { flex: none; width: 58px; color: #9FD182; font-size: 12.5px; font-weight: 500; text-align: right; }
  @keyframes r6-debt-grow { from { transform: scaleX(0); } to { transform: none; } }

  /* ---------- the Journey, opened from Debts: no wheel over it ---------- */
  /* folded as when going down the page (look-r6-top.css), not taken out: the wheel keeps its tabs' widths, measured on every drawing */
  :root.r6.r6-pg:is(.pm-jr, #pm-0) .navbar > .ph-tabs.r6-wh { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; pointer-events: none; }
  :root.r6.r6-pg #view .r6-jr { display: flex; flex-direction: column; }
  :root.r6.r6-pg #view .r6-jr-head { display: flex; align-items: center; gap: 12px; }
  :root.r6.r6-pg #view .r6-jr-back { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); color: #EFF1F6; }
  :root.r6.r6-pg #view .r6-jr-back svg { stroke-width: 2.2; }
  :root.r6.r6-pg #view .r6-jr-head > span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  :root.r6.r6-pg #view .r6-jr-head h2 { margin: 0; color: #EFF1F6; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
  :root.r6.r6-pg #view .r6-jr-head small { color: rgba(239, 241, 246, .55); font-size: 13px; }
  :root.r6.r6-pg #view .r6-jr-top { padding-top: 28px; }
  :root.r6.r6-pg #view .r6-jr-sn { display: flex; align-items: center; gap: 16px; }
  :root.r6.r6-pg #view .r6-jr-fl { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 50% 60%, rgba(159, 209, 130, .12), rgba(159, 209, 130, 0) 70%), rgba(239, 241, 246, .05); color: rgba(239, 241, 246, .55); }
  :root.r6.r6-pg #view .r6-jr-fl svg { stroke-width: 1.7; }
  :root.r6.r6-pg #view .r6-jr-fl.lit { background: radial-gradient(circle at 50% 60%, rgba(159, 209, 130, .45), rgba(159, 209, 130, 0) 70%), rgba(239, 241, 246, .05); color: #9FD182; animation: r6-debt-flame 2.4s ease-in-out infinite; }
  :root.r6.r6-pg #view .r6-jr-fl.lit svg { fill: rgba(159, 209, 130, .35); }
  :root.r6.r6-pg #view .r6-jr-sn > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  :root.r6.r6-pg #view .r6-jr-sn b { color: #EFF1F6; font-size: 52px; font-weight: 300; letter-spacing: -.045em; line-height: 1; }
  :root.r6.r6-pg #view .r6-jr-sn b span { color: rgba(239, 241, 246, .5); font-size: 26px; letter-spacing: -.02em; }
  :root.r6.r6-pg #view .r6-jr-sn small { color: rgba(239, 241, 246, .6); font-size: 14px; line-height: 1.35; }
  :root.r6.r6-pg #view .r6-jr-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 24px 0 0; padding: 0; list-style: none; }
  :root.r6.r6-pg #view .r6-jr-week li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  :root.r6.r6-pg #view .r6-jd { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .12); color: #101212; }
  :root.r6.r6-pg #view button.r6-jd { cursor: pointer; }
  :root.r6.r6-pg #view .r6-jd.past { background: rgba(239, 241, 246, .08); box-shadow: none; }
  :root.r6.r6-pg #view .r6-jd.now { box-shadow: inset 0 0 0 2px #9FD182; }
  :root.r6.r6-pg #view .r6-jd.on { background: #9FD182; box-shadow: 0 0 16px rgba(159, 209, 130, .55); animation: r6-debt-lit .5s cubic-bezier(.2, .9, .3, 1.3) both; }
  :root.r6.r6-pg #view .r6-jd svg { stroke-width: 2.6; }
  :root.r6.r6-pg #view .r6-jr-week small { color: rgba(239, 241, 246, .5); font-size: 12px; }
  :root.r6.r6-pg #view .r6-jr-week small.now { color: #EFF1F6; font-weight: 500; }
  :root.r6.r6-pg #view .r6-jr-sp { margin-top: 34px; }
  :root.r6.r6-pg #view .r6-jr-lens { position: relative; isolation: isolate; display: flex; gap: 6px; }
  :root.r6.r6-pg #view .r6-jr-lens button { all: unset; box-sizing: border-box; cursor: pointer; min-width: 48px; display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 4px; border-radius: 16px; background-color: #121414; box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .1); color: #EFF1F6; font-size: 13px; font-weight: 500; white-space: nowrap; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
  :root.r6.r6-pg #view .r6-jr-lens button[aria-pressed="true"] { background-color: #D9DCE1; box-shadow: none; color: #101212; }
  :root.r6.r6-pg #view .r6-jr-lens .pick-pill { border-radius: 16px; background: #D9DCE1; }
  :root.r6.r6-pg #view .r6-jr-end { margin-top: -2px; color: rgba(239, 241, 246, .6); font-size: 13.5px; line-height: 1.45; }
  :root.r6.r6-pg #view .r6-jr-fig { display: flex; align-items: baseline; gap: 8px; }
  :root.r6.r6-pg #view .r6-jr-fig b { color: #EFF1F6; font-size: 32px; font-weight: 300; letter-spacing: -.035em; }
  :root.r6.r6-pg #view .r6-jr-fig span { color: rgba(239, 241, 246, .5); font-size: 16px; }
  :root.r6.r6-pg #view .r6-jr-fig .pct { margin-left: auto; color: #9FD182; font-size: 18px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-jr-sp .r6-thick { margin-top: 0; }
  :root.r6.r6-pg #view .r6-jr-path { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 18px; border-radius: 28px; background: radial-gradient(120% 100% at 100% 0%, rgba(159, 209, 130, .10), rgba(159, 209, 130, 0) 60%) padding-box, linear-gradient(#121414, #121414) padding-box, var(--r6-rim); }
  :root.r6.r6-pg #view .r6-jp-h { display: flex; align-items: center; gap: 10px; }
  :root.r6.r6-pg #view .r6-jp-h b { color: #EFF1F6; font-size: 15px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-jp-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(159, 209, 130, .14); color: #9FD182; }
  :root.r6.r6-pg #view .r6-jp-ic svg { stroke-width: 2; }
  :root.r6.r6-pg #view .r6-jp-svg { display: block; width: 100%; height: 60px; overflow: visible; }
  :root.r6.r6-pg #view .r6-jp-svg .far { fill: none; stroke: rgba(239, 241, 246, .14); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 8; vector-effect: non-scaling-stroke; }
  :root.r6.r6-pg #view .r6-jp-svg .near { fill: none; stroke: #9FD182; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 2 9; vector-effect: non-scaling-stroke; animation: r6-debt-walk 1.6s linear infinite; }
  :root.r6.r6-pg #view .r6-jp-svg .at { fill: #9FD182; }
  :root.r6.r6-pg #view .r6-jp-svg .halo { fill: none; stroke: rgba(159, 209, 130, .3); stroke-width: 2; }
  :root.r6.r6-pg #view .r6-jp-svg .mid { fill: #070808; stroke: #9FD182; stroke-width: 2.5; }
  :root.r6.r6-pg #view .r6-jp-svg .goal { fill: #070808; stroke: rgba(239, 241, 246, .5); stroke-width: 2.5; }
  :root.r6.r6-pg #view .r6-jp-svg .fl { fill: #EFF1F6; stroke: #EFF1F6; stroke-width: 1.5; stroke-linejoin: round; }
  :root.r6.r6-pg #view .r6-jp-l { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-jp-l span:first-child { color: #9FD182; }
  :root.r6.r6-pg #view .r6-jp-l span:last-child { color: rgba(239, 241, 246, .55); text-align: right; }
  :root.r6.r6-pg #view .r6-jr-path > small { padding-top: 12px; border-top: 1px solid rgba(239, 241, 246, .08); color: rgba(239, 241, 246, .7); font-size: 13.5px; line-height: 1.45; }
  :root.r6.r6-pg #view .r6-jr-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 26px; }
  :root.r6.r6-pg #view .r6-jr-row { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 4px; color: #EFF1F6; text-decoration: none; }
  :root.r6.r6-pg #view .r6-jr-ri { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(239, 241, 246, .06); color: #9FD182; }
  :root.r6.r6-pg #view .r6-jr-ri.owe { background: rgba(255, 138, 128, .13); color: #FF8A80; }
  :root.r6.r6-pg #view .r6-jr-rt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  :root.r6.r6-pg #view .r6-jr-rt b { font-size: 15px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-jr-rt small { color: rgba(239, 241, 246, .55); font-size: 13px; }
  :root.r6.r6-pg #view .r6-jr-rt .owe { color: #FF8A80; font-weight: 500; }
  :root.r6.r6-pg #view .r6-jr-go { flex: none; display: grid; color: rgba(239, 241, 246, .5); }
  :root.r6.r6-pg .r6-dock .r6-db.kept { color: #9FD182; }
  @keyframes r6-debt-flame { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
  @keyframes r6-debt-lit { from { transform: scale(.6); opacity: .4; } to { transform: none; opacity: 1; } }
  @keyframes r6-debt-walk { to { stroke-dashoffset: -22; } }
  @media (prefers-reduced-motion: reduce) { :root.r6.r6-pg #view :is(.r6-dr-tr i, .r6-jr-fl.lit, .r6-jd.on, .r6-jp-svg .near) { animation: none; } :root.r6.r6-pg #view :is(.r6-dr, .r6-ord-seg button, .r6-jr-lens button) { transition: none; } }
}