/* Dorax Finance — the owner's summary "Resumen v4" (v409, features/phone/r6-home4.js), as on the canvas boards "resumen v4", "resumen v4 · sin
   anotar" and "resumen v4 · vacío": flat, no fog and no glints; page #070808, the one surface #121414 with a hairline, words #EFF1F6, lime #9FD182
   for what is good and the main button, amber #F7D27A for what runs ahead, coral #FF8A80 for debts. Bars 8 px, the same in every part.
   Only while the class r6v4 is on the page (the owner's summary on a phone, app/shell.js: applyTheme). */

/* ---------- the frame: the top row on a flat green, only the row (v410; owner, 2026-10-31: "el menú superior hazlo verde el background, solo el
   header"); no row of tabs under it (app/shell.js); the page on its black ---------- */
html.in-app.land.r6.r6v4:not(.r6-pg) { background: #070808 linear-gradient(#0E2B26, #0E2B26) top / 100% 50% no-repeat; }
:root.r6.r6v4:not(.r6-pg) .topbar > .navbar, :root.r6.r6v4.scrolled:not(.r6-pg) .topbar > .navbar { background: #0E2B26; box-shadow: 0 -60vh 0 0 #0E2B26; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root.r6.r6v4.scrolled:not(.r6-pg) .topbar > .navbar { box-shadow: 0 -60vh 0 0 #0E2B26, 0 8px 20px -12px rgba(0, 0, 0, .6); }
:root.r6.r6v4 .navbar .bell .count { box-shadow: 0 0 0 2px #0E2B26; }
:root.r6.r6v4:not(.r6-pg) .topbar > .navbar { padding-bottom: 24px; }      /* v411: room under the row (owner: "dale un padding bottom al header de background verde"); v448 (owner, 2026-11-01: "dale más padding inferior al header"): 14 → 24 px, so the badge on the photo has air under it */
/* v457 (owner, 2026-11-01, a screenshot from the iPhone: the strip under the clock white over the green header, "se ve raro"): Safari on the
   iPhone paints the strip under the clock in the colour of the first element pinned to the screen at its top edge (fixed, full width, more than
   10 px tall, opaque, taking taps), else in the page's own colour (white in light, black in dark). The header is pinned only inside the app's own
   box, so Safari passed it by. A bar of the header's green, pinned at the top edge over the header's empty top (it shows nothing of its own):
   Safari takes the green. Only on the summary, where the green header is. */
#clock-bar { display: none; }
:root.r6.r6v4:not(.r6-pg) #clock-bar { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 19; height: max(12px, var(--safe-t)); background: #0E2B26; }
:root.r6.r6v4 #view .r4-hero { margin-top: 10px; }
:root.r6v4 #view { --r4-ink: #EFF1F6; --r4-ink-2: rgba(239, 241, 246, .6); --r4-ink-3: rgba(239, 241, 246, .5); --r4-line: rgba(239, 241, 246, .07); --r4-track: rgba(239, 241, 246, .07);
  --r4-face: #121414; --r4-edge: rgba(239, 241, 246, .06); --r4-lime: #9FD182; --r4-amber: #F7D27A; --r4-coral: #FF8A80; color: var(--r4-ink); }
:root.r6v4 #view .r4 { display: flex; flex-direction: column; margin: 0; }
:root.r6v4 #view .r4-press { transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); -webkit-tap-highlight-color: transparent; }
:root.r6v4 #view .r4-press:active { transform: scale(.98); }
:root.r6v4 #view .r4 :focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; border-radius: 12px; }
:root.r6v4 #view .r4-chev { flex: none; width: 16px; height: 16px; color: rgba(239, 241, 246, .45); }
:root.r6v4 #view .r4-chev svg, :root.r6v4 #view .r4-link svg { width: 100%; height: 100%; stroke-width: 2.2; }
:root.r6v4 #view .r4-grow { transform-origin: 0 50%; animation: r4-grow .9s cubic-bezier(.2, .9, .25, 1) .15s both; }
@keyframes r4-grow { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- a part's head: its name, a line under it, the way to its screen ---------- */
:root.r6v4 #view .r4-head { display: flex; align-items: center; gap: 12px; }
:root.r6v4 #view .r4-head > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
:root.r6v4 #view .r4-head h2 { margin: 0; color: var(--r4-ink); font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
:root.r6v4 #view .r4-head small, :root.r6v4 #view .r4-quiet { color: rgba(239, 241, 246, .55); font-size: 14px; line-height: 1.45; }
:root.r6v4 #view .r4-link { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: flex; align-items: center; gap: 2px; min-height: 44px; color: var(--r4-ink-2); font-size: 14px; }
:root.r6v4 #view .r4-link svg { width: 15px; height: 15px; }

/* ---------- 1 · what can be spent today ---------- */
:root.r6v4 #view .r4-hero { padding-top: 8px; }
:root.r6v4 #view .r4-eye { all: unset; box-sizing: border-box; cursor: pointer; align-self: flex-start; display: flex; align-items: center; gap: 7px; min-height: 28px; color: var(--r4-ink-2); font-size: 14px; }
:root.r6v4 #view .r4-eye svg { width: 15px; height: 15px; stroke-width: 2; }
:root.r6v4 #view .r4-fig { all: unset; box-sizing: border-box; cursor: pointer; align-self: flex-start; display: flex; align-items: baseline; gap: 8px; margin-top: 6px; color: var(--r4-ink); }
:root.r6v4 #view .r4-fig .r4-big { color: var(--r4-ink-3); font-size: 15px; }
:root.r6v4 #view .r4-fig b { margin-right: 6px; color: var(--r4-ink); font-size: 36px; line-height: 1; font-weight: 600; letter-spacing: -.025em; }      /* v420: bolder (owner: "haz la fuente de puedes gastar hoy, el número, bolder") */
:root.r6v4 #view .r4-fig.none b { color: rgba(239, 241, 246, .2); }
/* v509 (owner, 2026-11-02: "falta la (i) en puedes gastar hoy"): the Calendar's round (i) beside what can be spent today, which opens how it is
   worked out (free-view); only a sign, the whole figure is the button */
:root.r6v4 #view .r4-fig-i { align-self: center; flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: 2px; border-radius: 50%; background: rgba(239, 241, 246, .06); color: rgba(239, 241, 246, .75); transition: background-color .2s ease; }
:root.r6v4 #view .r4-fig-i svg { width: 18px; height: 18px; stroke-width: 1.9; }
@media (hover: hover) { :root.r6v4 #view .r4-fig:hover .r4-fig-i { background: rgba(239, 241, 246, .12); } }
:root.r6.r6v4 #view .r4-fig-i { transform: translateY(-5px); }      /* the phone's 30 px figure sits low in its baseline row: the (i) centred on the figure, not on the row */
:root.r6v4 #view .r4-pill { align-self: flex-start; display: inline-flex; align-items: center; min-height: 28px; margin-top: 10px; padding: 0 11px; border-radius: 999px; background: rgba(159, 209, 130, .14); color: #C9E9B6; font-size: 12px; font-weight: 500; }
:root.r6v4 #view .r4-hero .r4-quiet { max-width: 300px; margin-top: 12px; }

/* ---------- 2 · day to day: the verdict, then the bar with today's mark ---------- */
:root.r6v4 #view .r4-day { all: unset; box-sizing: border-box; display: flex; flex-direction: column; margin-top: 18px; padding: 16px 16px 14px; border-radius: 26px; color: var(--r4-ink); cursor: pointer; }
:root.r6v4 #view div.r4-day { cursor: default; }
:root.r6v4 #view .r4-day-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--r4-ink-2); font-size: 14px; }
:root.r6v4 #view .r4-verdict { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
:root.r6v4 #view .r4-vic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(239, 241, 246, .08); color: rgba(239, 241, 246, .85); }
:root.r6v4 #view .r4-vic svg { width: 16px; height: 16px; stroke-width: 2.3; }
:root.r6v4 #view .r4-vic.over { background: rgba(247, 210, 122, .14); color: var(--r4-amber); }
:root.r6v4 #view .r4-vic.ok { background: rgba(159, 209, 130, .14); color: var(--r4-lime); }
:root.r6v4 #view .r4-vt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
:root.r6v4 #view .r4-vt b { color: var(--r4-ink); font-size: 16px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
:root.r6v4 #view .r4-vt b.over { color: var(--r4-amber); }
:root.r6v4 #view .r4-vt b.plain { font-size: 16px; line-height: 1.25; }
:root.r6v4 #view .r4-vt small { color: var(--r4-ink-2); font-size: 13px; line-height: 1.3; }
:root.r6v4 #view .r4-pace { position: relative; display: block; margin-top: 24px; }
:root.r6v4 #view .r4-pace.bare { margin-top: 18px; }
:root.r6v4 #view .r4-pace > small { position: absolute; bottom: 15px; color: rgba(239, 241, 246, .55); font-size: 11.5px; line-height: 1; white-space: nowrap; }
:root.r6v4 #view .r4-track { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--r4-track); }
:root.r6v4 #view .r4-track > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
:root.r6v4 #view .r4-track > em { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: rgba(239, 241, 246, .7); }
:root.r6v4 #view .r4-add { all: unset; box-sizing: border-box; cursor: pointer; align-self: flex-start; display: flex; align-items: center; gap: 6px; height: 44px; margin: 12px 0 0 42px; padding: 0 18px 0 14px; border-radius: 999px; background: rgba(239, 241, 246, .1); color: var(--r4-ink); font-size: 14px; font-weight: 500; }
:root.r6v4 #view .r4-add svg { width: 16px; height: 16px; stroke-width: 2.4; }

/* ---------- 4 · where it went ---------- */
:root.r6v4 #view .r4-where { margin-top: 30px; gap: 14px; }
:root.r6v4 #view .r4-cats { display: flex; flex-direction: column; }
:root.r6v4 #view .r4-cat { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; min-height: 66px; color: var(--r4-ink); }
:root.r6v4 #view .r4-cat + .r4-cat { border-top: 1px solid var(--r4-line); }
:root.r6v4 #view .r4-cat > i { flex: none; width: 14px; height: 14px; border-radius: 50%; }
:root.r6v4 #view .r4-cat-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
:root.r6v4 #view .r4-cat-t b { overflow: hidden; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
:root.r6v4 #view .r4-cat-t b span { color: var(--r4-ink-3); font-weight: 500; }
:root.r6v4 #view .r4-cat-t small, :root.r6v4 #view .r4-cat-v small { overflow: hidden; color: var(--r4-ink-3); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
:root.r6v4 #view .r4-cat-v { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
:root.r6v4 #view .r4-cat-v b { font-size: 16px; font-weight: 500; }
:root.r6v4 #view .r4-cat-v small { font-size: 12.5px; }
:root.r6v4 #view .r4-cat-v small.down { color: var(--r4-lime); }
:root.r6v4 #view .r4-cat-v small.up { color: var(--r4-amber); }
:root.r6v4 #view .r4-empty { display: flex; align-items: center; gap: 14px; min-height: 66px; }
:root.r6v4 #view .r4-dots { flex: none; display: flex; gap: 4px; }
:root.r6v4 #view .r4-dots i { width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid rgba(239, 241, 246, .25); }

/* ---------- 3 · what there is to pay ---------- */
:root.r6v4 #view .r4-pay { margin-top: 32px; }
:root.r6v4 #view .r4-fit { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: -4px; color: var(--r4-ink-2); font-size: 14px; }
:root.r6v4 #view .r4-fit b { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }      /* v458: the words alone, in their colour (no icon), at the line's weight + 1 */
:root.r6v4 #view .r4-paid { min-height: 64px; margin-top: 2px; }      /* every fixed cost of the month paid: the lime check, no card */
:root.r6v4 #view .r4-fit b.ok { color: var(--r4-lime); }
:root.r6v4 #view .r4-fit b.short { color: var(--r4-coral); }
:root.r6v4 #view .r4-row { display: flex; gap: 10px; margin: 10px -16px 0; padding: 2px 16px 4px; overflow-x: auto; scrollbar-width: none; }
:root.r6v4 #view .r4-row::-webkit-scrollbar { display: none; }
:root.r6v4 #view .r4-bill { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 158px; display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 24px; color: var(--r4-ink); }
:root.r6v4 #view .r4-bill-h { display: flex; align-items: center; gap: 8px; }
:root.r6v4 #view .r4-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(239, 241, 246, .06); color: rgba(239, 241, 246, .92); overflow: hidden; }
:root.r6v4 #view .r4-ico svg { width: 18px; height: 18px; }
:root.r6v4 #view .r4-ico img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
:root.r6v4 #view .r4-when { flex: none; display: inline-flex; align-items: center; height: 24px; margin-left: auto; padding: 0 10px; border-radius: 999px; background: rgba(239, 241, 246, .07); color: var(--r4-ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
:root.r6v4 #view .r4-when.soon { background: rgba(247, 210, 122, .14); color: var(--r4-amber); }
:root.r6v4 #view .r4-when.late { background: rgba(255, 138, 128, .14); color: var(--r4-coral); }
:root.r6v4 #view .r4-bill small { overflow: hidden; color: rgba(239, 241, 246, .7); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
:root.r6v4 #view .r4-bill b { font-size: 22px; line-height: 1.1; font-weight: 400; letter-spacing: -.025em; }
:root.r6v4 #view .r4-bill b span, :root.r6v4 #view .r4-dec { color: rgba(239, 241, 246, .42); font-size: .7em; letter-spacing: 0; }
/* the hollow where the first one will go: dashed, grey words, the + in lime */
:root.r6v4 #view .r4-plus { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(159, 209, 130, .12); color: var(--r4-lime); }
:root.r6v4 #view .r4-plus svg { width: 18px; height: 18px; stroke-width: 2.4; }
:root.r6v4 #view .r4-bill.r4-dash b { color: var(--r4-ink); font-size: 15px; font-weight: 500; letter-spacing: 0; }
:root.r6v4 #view .r4-bill.r4-dash small { color: rgba(239, 241, 246, .55); font-size: 13px; white-space: normal; }
:root.r6v4 #view .r4-new { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-radius: 22px; }
:root.r6v4 #view .r4-new > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
:root.r6v4 #view .r4-new b { color: var(--r4-ink); font-size: 15px; font-weight: 500; }
:root.r6v4 #view .r4-new small { color: rgba(239, 241, 246, .55); font-size: 13px; line-height: 1.35; }

/* ---------- 5 · the goals ---------- */
:root.r6v4 #view .r4-goals { margin-top: 30px; }
:root.r6v4 #view .r4-glist { display: flex; flex-direction: column; margin-top: 10px; }
:root.r6v4 #view .r4-free + .r4-glist { margin-top: 8px; }
/* v419: the days of freedom, their own card: the hourglass, the figure in months, the bar in pieces of a month */
:root.r6v4 #view .r4-free { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 14px; margin-top: 10px; padding: 16px 16px 18px; border-radius: 24px; color: var(--r4-ink); }
:root.r6v4 #view .r4-free-h { display: flex; align-items: center; gap: 12px; }
:root.r6v4 #view .r4-free-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(159, 209, 130, .14); color: #9FD182; }
:root.r6v4 #view .r4-free-ic svg { width: 19px; height: 19px; stroke-width: 1.9; }
:root.r6v4 #view .r4-free-ic.dx { background: none; }      /* v537: Dorax's 3D hourglass, as the goals' drawings (no circle) */
:root.r6v4 #view .r4-free-ic.dx .dxi { width: 40px; height: 40px; }
:root.r6v4 #view .r4-free-h > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:root.r6v4 #view .r4-free-h > span:nth-child(2) small, :root.r6v4 #view .r4-free-h > small { color: rgba(239, 241, 246, .55); font-size: 13px; }
:root.r6v4 #view .r4-free-h > span:nth-child(2) b { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
:root.r6v4 #view .r4-free-h > small { flex: none; align-self: flex-end; margin-bottom: 2px; }
:root.r6v4 #view .r4-segs { display: grid; gap: 4px; }
:root.r6v4 #view .r4-segs > span { position: relative; display: block; height: 8px; border-radius: 4px; overflow: hidden; background: var(--r4-track); }
:root.r6v4 #view .r4-segs > span > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #9FD182; }
:root.r6v4 #view .r4-goal { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; min-height: 64px; color: var(--r4-ink); }
:root.r6v4 #view .r4-goal + .r4-goal { border-top: 1px solid var(--r4-line); }      /* v421: a row each, a small ring instead of a bar */
:root.r6v4 #view .r4-goal > span:not(.r4-gi) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
:root.r6v4 #view .r4-goal > span b { overflow: hidden; font-size: 16px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
:root.r6v4 #view .r4-goal > span small { color: rgba(239, 241, 246, .55); font-size: 13px; }
:root.r6v4 #view .r4-pct { flex: none; font-size: 15px; font-weight: 500; }
:root.r6v4 #view .r4-ring { flex: none; width: 40px; height: 40px; transform: rotate(-90deg); }
:root.r6v4 #view .r4-ring circle { fill: none; stroke: rgba(239, 241, 246, .08); stroke-width: 4; }
:root.r6v4 #view .r4-ring circle + circle { stroke-linecap: round; animation: r4-ring .9s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes r4-ring { from { stroke-dasharray: 0 100; } }

/* ---------- the credit cards ---------- */
:root.r6v4 #view .r4-cards { margin-top: 34px; }
:root.r6v4 #view .r4-clist { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
:root.r6v4 #view .r4-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 18px; border-radius: 24px; color: var(--r4-ink); }
:root.r6v4 #view .r4-card-h { display: flex; align-items: center; gap: 12px; }
:root.r6v4 #view .r4-card-h > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:root.r6v4 #view .r4-card-h > span:nth-child(2) b { overflow: hidden; font-size: 15.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
:root.r6v4 #view .r4-card-h > span:nth-child(2) small { color: var(--r4-ink-3); font-size: 13px; }
:root.r6v4 #view .r4-card-h > span:last-child { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
:root.r6v4 #view .r4-card-h > span:last-child b { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
:root.r6v4 #view .r4-card-h .r4-when { margin-left: 0; height: 22px; padding: 0 9px; font-size: 11.5px; }
:root.r6v4 #view .r4-avail { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--r4-line); color: rgba(239, 241, 246, .55); font-size: 13.5px; }      /* v421: no bar, what is free of how much */
:root.r6v4 #view .r4-avail b { color: var(--r4-lime); font-weight: 500; }

/* ---------- debts and wins: a row each, no card, a hairline between ---------- */
:root.r6v4 #view .r4-line { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 64px; color: var(--r4-ink); }
:root.r6v4 #view .r4-line.first { margin-top: 26px; }
:root.r6v4 #view .r4-line + .r4-line { border-top: 1px solid var(--r4-line); }
:root.r6v4 #view .r4-line > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
:root.r6v4 #view .r4-line > span:nth-child(2) b { font-size: 15px; font-weight: 500; }
:root.r6v4 #view .r4-line > span:nth-child(2) small { overflow: hidden; color: var(--r4-ink-2); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
:root.r6v4 #view .r4-line .r4-when { margin-left: 0; }
:root.r6v4 #view .r4-debt-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 138, 128, .13); color: var(--r4-coral); }
:root.r6v4 #view .r4-debt-ic.none { background: rgba(239, 241, 246, .06); color: rgba(239, 241, 246, .55); }
:root.r6v4 #view .r4-debt-ic svg { width: 18px; height: 18px; stroke-width: 2; }
:root.r6v4 #view .r4-medal { flex: none; display: grid; place-items: center; width: 40px; height: 40px; }
:root.r6v4 #view .r4-medal > svg { width: 40px; height: 40px; }
:root.r6v4 #view .r4-medal.none { box-sizing: border-box; border-radius: 50%; border: 1.5px dashed rgba(159, 209, 130, .45); color: rgba(239, 241, 246, .6); }
:root.r6v4 #view .r4-medal.none svg { width: 17px; height: 17px; }

/* ---------- discover more ---------- */
:root.r6v4 #view .r4-finds { margin-top: 34px; }
/* v449 (the canvas "Descubre-D-V6"): a card each, the same size; its picture across the top in its own light (amber, lime, teal), then the title on
   one line, up to three lines of what it is about and the lime button at the same height on every card; the row snaps card by card */
:root.r6v4 #view .r4-finds .r4-row { gap: 12px; margin-top: 20px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; }
:root.r6v4 #view .r4-find { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: none; display: flex; flex-direction: column; width: 252px; height: 312px; overflow: hidden; border-radius: 20px; background: #171919; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); color: var(--r4-ink); scroll-snap-align: start; }
:root.r6v4 #view .r4-find:focus-visible { outline: 2px solid #9FD182; outline-offset: 2px; }
:root.r6v4 #view .r4-find-pic { position: relative; flex: none; height: 132px; overflow: hidden; }
:root.r6v4 #view .k-curio .r4-find-pic { background: linear-gradient(155deg, #FCF3D9, #F2DC9E); }
:root.r6v4 #view .k-video .r4-find-pic { background: linear-gradient(155deg, #E7F3DC, #C7E4AF); }
:root.r6v4 #view .k-new .r4-find-pic { background: linear-gradient(155deg, #E2F4EF, #B6E0D5); }
:root.r6v4 #view .r4-find-fig { position: absolute; left: 18px; top: 42px; display: flex; flex-direction: column; gap: 2px; max-width: 124px; color: #173300; }
:root.r6v4 #view .r4-find-fig b { color: #173300; font-size: 27px; line-height: 1; font-weight: 600; letter-spacing: -.03em; }
:root.r6v4 #view .r4-find-fig.long b { font-size: 21px; }
:root.r6v4 #view .r4-find-fig small { font-size: 13px; font-weight: 500; opacity: .7; }
:root.r6v4 #view .r4-find-who { position: absolute; right: -8px; bottom: -2px; width: auto; height: 140px; }
:root.r6v4 #view .r4-find-post { position: absolute; top: 28px; width: 64px; height: 114px; object-fit: cover; border-radius: 10px; box-shadow: 0 8px 18px rgba(23, 51, 0, .28); }
:root.r6v4 #view .r4-find-post.p-l { left: 46px; transform: rotate(-9deg); }
:root.r6v4 #view .r4-find-post.p-r { left: 142px; transform: rotate(9deg); }
:root.r6v4 #view .r4-find-post.p-l2 { left: 70px; transform: rotate(-6deg); }
:root.r6v4 #view .r4-find-post.p-r2 { left: 118px; transform: rotate(6deg); }
:root.r6v4 #view .r4-find-post.p-c { left: 94px; top: 12px; box-shadow: 0 10px 22px rgba(23, 51, 0, .36); }
:root.r6v4 #view .r4-find-play { position: absolute; left: 111px; top: 54px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 10px rgba(23, 51, 0, .3); color: #173300; }
:root.r6v4 #view .r4-find-app { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 20px; box-shadow: 0 12px 26px rgba(10, 43, 38, .3); }
:root.r6v4 #view .r4-find-new { position: absolute; left: 146px; top: 18px; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: #0E2B26; color: #EFF1F6; font-size: 11.5px; font-weight: 600; box-shadow: 0 4px 10px rgba(10, 43, 38, .25); }
:root.r6v4 #view .r4-find-b { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 16px 16px 18px; }
:root.r6v4 #view .r4-find-t { overflow: hidden; color: var(--r4-ink); font-size: 15px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
:root.r6v4 #view .r4-find-s { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 6px; color: rgba(239, 241, 246, .6); font-size: 14px; line-height: 1.42; }
:root.r6v4 #view .r4-find-go { align-self: flex-start; display: inline-flex; align-items: center; height: 44px; margin-top: auto; padding: 0 20px; border-radius: 999px; background: #9FD182; color: #101212; font-size: 15px; font-weight: 500; white-space: nowrap; }

/* ---------- at the end: the order of the summary ---------- */
:root.r6v4 #view .r4-order { all: unset; box-sizing: border-box; cursor: pointer; align-self: center; display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 32px; padding: 0 18px 0 14px; border: 1px solid rgba(239, 241, 246, .1); border-radius: 999px; color: rgba(239, 241, 246, .75); font-size: 14px; font-weight: 500; }
:root.r6v4 #view .r4-order svg { width: 17px; height: 17px; stroke-width: 2; }

/* ---------- the surface and the hollow, last: the parts' own rules start from all: unset ---------- */
/* v424 (owner, 2026-10-31: "las tarjetas de toda la webapp tienen un estilo más 3D, haz el mismo estilo en las de Resumen v4"): the cards as on
   the owner's other screens (look-r6-pages.css: .r6-card): the same grey, a faint light from the top-left corner, and an edge lit from above */
:root.r6v4 #view .r4-soft { border: 1px solid transparent; background: var(--r6-face), linear-gradient(var(--r4-face), var(--r4-face)) padding-box, var(--r6-rim); }
:root.r6v4 #view .r4-dash { border: 1.5px dashed rgba(239, 241, 246, .2); color: rgba(239, 241, 246, .65); }
:root.r6v4 #view .r4-dash:hover { border-color: rgba(159, 209, 130, .55); }

/* ---------- at the thumb: "+ Expense" in lime, over the bar, as on the owner's other screens (look-r6-pages.css) ---------- */
@media (max-width: 920px) {
  :root.r6.r6v4 .bq-actbar.r6-dock { justify-content: flex-end; gap: 10px; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
  :root.r6.r6v4 .r6-dock .r6-db { all: unset; box-sizing: border-box; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 52px; height: 52px; padding: 0 20px 0 16px; border-radius: 999px; background: rgba(26, 29, 29, .92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14), 0 8px 22px rgba(0, 0, 0, .45); color: #EFF1F6; font-size: 15px; font-weight: 500; white-space: nowrap; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root.r6.r6v4 .r6-dock .r6-db.go { padding: 0 22px 0 18px; background: #9FD182; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); color: #101212; }
  :root.r6.r6v4 .r6-dock .r6-db.only-ico { width: 52px; padding: 0; }
  :root.r6.r6v4 .r6-dock .r6-db svg { flex: none; width: 19px; height: 19px; stroke-width: 2.2; }
  :root.r6.r6v4 .r6-dock .r6-db:not(.only-ico) { flex: 0 1 auto; min-width: 0; }      /* a narrow phone: the words give way before the screen's edge does */
  :root.r6.r6v4 .r6-dock .r6-db > span:not(.r6-n) { overflow: hidden; text-overflow: ellipsis; }
  :root.r6.r6v4 .r6-dock .r6-db:active { transform: scale(.965); }
  :root.r6.r6v4 .r6-dock .r6-db:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
  :root.r6.r6v4 .r6-dock .r6-sp { flex: 1 1 auto; }
  :root.r6.r6v4 .bq-actbar-gap { height: 74px; }
  @media (max-width: 359px) { :root.r6.r6v4 .bq-actbar.r6-dock { gap: 8px; } :root.r6.r6v4 .r6-dock .r6-db { padding: 0 14px; font-size: 14px; } :root.r6.r6v4 .r6-dock .r6-db.go { padding: 0 16px; } :root.r6.r6v4 .r6-dock .r6-db:not(.go):not(.only-ico) > svg { display: none; } }
}

@media (prefers-reduced-motion: reduce) {
  :root.r6v4 #view :is(.r4-grow, .r4-ring circle) { animation: none; }
  :root.r6v4 #view .r4-press { transition: none; }
}
/* v447 (owner, 2026-11-01: "cambia los rings de metas por los íconos de ellas" and "mueve tus logros ahí"): each goal with its 3D drawing in place
   of the ring, its percentage in lime once reached; Your wins the last row of the goals, a line above it */
:root.r6v4 #view .r4-gi { flex: none; display: grid; place-items: center; width: 40px; height: 40px; }
:root.r6v4 #view .r4-gi .dxi { display: block; width: 40px; height: 40px; }
:root.r6v4 #view .r4-pct.done { color: #9FD182; }
:root.r6v4 #view .r4-goals .r4-wins-in { display: flex; gap: 14px; width: 100%; margin-top: 2px; border-top: 1px solid var(--r4-line); }
:root.r6v4 #view .r4-goals .r4-dash + .r4-wins-in, :root.r6v4 #view .r4-goals .r4-free + .r4-wins-in { margin-top: 12px; border-top: 0; }
/* v458 (owner, 2026-11-01: "la fuente como Nubank, la versión oscura sigue más gruesa"): Nubank's type scale, first on the light summary (v456,
   the canvas "ClaroNu-Resumen-letra-V6"), now in both themes: the section titles 19/600 → 17/500, the rows' names 16/600 → 15/500, "you can
   spend today" 36 → 30 (still 600: the screen's one figure), the rest of the bold words 500 */
:root.r6.r6v4 #view .r4-head h2 { font-size: 17px; font-weight: 500; letter-spacing: 0; }
:root.r6.r6v4 #view :is(.r4-cat-t, .r4-cat-v) > b { font-size: 15px; font-weight: 500; }
:root.r6.r6v4 #view .r4-vt > b { font-size: 16px; font-weight: 500; }
:root.r6.r6v4 #view .r4-big > b { font-size: 30px; }
:root.r6.r6v4 #view .r4-free-h b { font-size: 18px; font-weight: 500; }
:root.r6.r6v4 #view :is(.r4-line, .r4-wins-in) b { font-size: 15px; font-weight: 500; }
:root.r6.r6v4 #view .r4-goal b { font-size: 15px; font-weight: 500; }
:root.r6.r6v4 #view .r4-card-h b:not(.num) { font-size: 15px; }
:root.r6.r6v4 #view .r4-card-h b.num { font-size: 17px; }
:root.r6.r6v4 #view .r4-bill b.num { font-size: 20px; }
:root.r6.r6v4 #view .r4-find-t { font-size: 15px; font-weight: 500; }
:root.r6.r6v4 #view :is(.r4-find-go, .mc-ask-t > b, .r4-fit > b) { font-weight: 500; }