/* Dorax Finance — the summary "Resumen v6", the owner's only (v341, features/phone/r6-home.js): the frame. Dark as designed (the canvas "Resumen v6"
   with its cover in green fog): page #070808 (v349, the darker black the owner chose for phones; before #101212), cards #121414 (v539, a step lighter: owner "un poco más claras, solo un poco"; #0D0E0E v421–v538) with an edge of
   light, words #EFF1F6, the lime #9FD182, the green #03362D in the fog.
   Only while the class r6 is on the page (a phone, the household's summary, the owner); everything else keeps its look.
   The parts: css/look/look-r6-parts.css. */
:root.r6 {
  --r6-page: #070808; --r6-card: #121414; --r6-ink: #EFF1F6; --r6-ink-2: rgba(239, 241, 246, .66); --r6-ink-3: rgba(239, 241, 246, .56);
  --r6-line: rgba(239, 241, 246, .08); --r6-lime: #9FD182; --r6-lime-hi: #B9E2A2;
  --r6-rim: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .025) 70%, rgba(255, 255, 255, .06)) border-box;
  --r6-face: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 55%) padding-box;
  /* the summary's own parts (what there is to pay, the goals, the notices) take the same colours */
  --bq-page: #070808; --bq-page-glass: rgba(7, 8, 8, .92); --bq-card: #121414; --bq-card-2: #181A1A; --bq-card-3: #212424;
  --bq-ink: #EFF1F6; --bq-ink-2: rgba(239, 241, 246, .66); --bq-ink-3: rgba(239, 241, 246, .56); --bq-line: rgba(239, 241, 246, .08); --bq-line-2: rgba(239, 241, 246, .16);
  --bq-track: rgba(239, 241, 246, .08); --bq-bar-track: rgba(239, 241, 246, .08); --bq-circle: rgba(239, 241, 246, .08); --bq-circle-2: rgba(239, 241, 246, .12);
  --bq-accent: #9FD182; --bq-in: #9FD182; --bq-pick-bg: #9FD182; --bq-pick-ink: #101212;
  --lk-lime: #9FD182; --lk-lime-rgb: 159, 209, 130; --lk-lime-hi: #B9E2A2; --lk-lime-lo: #8EC274; --lk-pop: #9FD182; --lk-pop-ink: #101212; --lk-pop-hi: #B9E2A2; --lk-pop-lo: #8EC274;
  --gst-2: #181A1A; --gst-3: #161818; --gst-dot: rgba(239, 241, 246, .22); --gst-shadow: none;
  --bq-glass: rgba(26, 29, 29, .9); --bq-glass-line: rgba(239, 241, 246, .14); --bq-glass-ink: #EFF1F6; --bq-glass-icon: #EFF1F6; --bq-glass-pick: rgba(239, 241, 246, .14);
}
/* behind the top, pulled down past it: the fog's top colour; below, the page */
html.in-app.land.r6:not(.r6-pg) { background: #070808 linear-gradient(#0E2B26, #0E2B26) top / 100% 50% no-repeat; }
:root.r6 .work { --bg: #070808; background: #070808; }
:root.r6 .content { gap: 14px; overflow-x: clip; }      /* the fog is wider than the screen (its blur's edges are cut off): no sideways scroll for it */

/* ---------- the top row and the tabs float on the fog; once the page goes up, the row gets its own dark glass ---------- */
:root.r6:not(.r6-pg) .topbar > .navbar { background: transparent; box-shadow: 0 -60vh 0 0 #0E2B26; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .25s ease; }
:root.r6.scrolled:not(.r6-pg) .topbar > .navbar { background: rgba(9, 24, 21, .94); -webkit-backdrop-filter: saturate(150%) blur(20px); backdrop-filter: saturate(150%) blur(20px); box-shadow: 0 -60vh 0 0 #0E2B26, 0 8px 20px -12px rgba(0, 0, 0, .6); }
:root.r6.tsw .topbar > .navbar.navbar { transition: none; }      /* v352: a tab changing: the row is at once what the new screen wants (no black fading out over the fog) */
:root.r6 .topbar > .pagehead { height: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden; background: transparent; box-shadow: none; }
:root.r6 .ph-tabs-row { box-shadow: none; }      /* no line under the tabs: the fog goes on */
:root.r6 .ph-tabs-row a[aria-current="page"]::after { left: 50%; right: auto; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #9FD182; box-shadow: 0 0 8px rgba(159, 209, 130, .9); }      /* the tab in use: a lime dot under its name, not a line (owner, 2026-10-28: "en vez de raya es un punto") */
:root.r6 .navbar .bell .count { background: #9FD182; color: #101212; box-shadow: 0 0 0 2px #0E2B26; }

/* ---------- the cover: the fog ---------- */
/* The fog is painted behind the cover and reaches up under the top row (--r6-up, measured after each drawing): light at the top left, a dark band
   across, a glow coming in from the right below, a haze at the bottom left; all of it the green #03362D lightened or taken to black, blurred so no
   shape reads as a circle, cut to the cover's rounded foot after the blur. A whisper of grain keeps the dark steps from banding. */
:root.r6 #view > .r6-hero { --r6-up: 200px; position: relative; z-index: 0; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 12px; margin: -4px -16px 0; padding: 24px 16px 30px; color: #EFF1F6; }
:root.r6 #view > .r6-hero::before { content: ""; position: absolute; z-index: -2; left: -80px; right: -80px; bottom: -80px; top: calc(-1 * var(--r6-up) - 80px); pointer-events: none;
  background: radial-gradient(40% 28% at 16% 12%, #56897F, rgba(86, 137, 127, 0)), radial-gradient(72% 15% at 52% 31%, #040A09, rgba(4, 10, 9, 0)), radial-gradient(34% 32% at 97% 72%, #6AAFA2, rgba(106, 175, 162, 0)),
    radial-gradient(46% 28% at 8% 93%, #2B5951, rgba(43, 89, 81, 0)), radial-gradient(34% 22% at 58% 64%, #030707, rgba(3, 7, 7, 0)), linear-gradient(180deg, #0E2B26 0%, #081A17 34%, #0A2723 66%, #03362D 100%);
  filter: blur(36px); clip-path: inset(80px round 0 0 40px 40px); }
:root.r6 #view > .r6-hero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: calc(-1 * var(--r6-up)); pointer-events: none; border-radius: 0 0 40px 40px; box-shadow: inset 0 -1px 0 rgba(185, 233, 154, .18);
  background-size: 160px 160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- the pieces every part uses ---------- */
:where(:root.r6 #view) :is(.r6-eye, .r6-fig, .r6-act, .r6-d, .r6-op, .r6-run, .r6-sq, .r6-you-c, .r6-you-lime) { all: unset; box-sizing: border-box; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
:root.r6 #view :is(a, button):focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
:root.r6 #view .press { transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
:root.r6 #view .press:active { transform: scale(.965); }
/* a card: its edge a hairline lit from above that fades on the way down and catches a little light again at the foot (the canvas's "filo de luz"); only cards wear it */
:root.r6 .rim6 { border: 1px solid transparent; background: var(--r6-face), linear-gradient(#121414, #121414) padding-box, var(--r6-rim); }
:root.r6 .w6 { position: relative; overflow: hidden; border-radius: 36px; }
:root.r6 .r6-glass { background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
:root.r6 .r6-cents .cents { opacity: 1; color: rgba(239, 241, 246, .42); font-size: .6em; letter-spacing: 0; }

/* ---------- the cover's words and buttons ---------- */
:root.r6 .r6-eye { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; color: rgba(239, 241, 246, .8); font-size: 14px; font-weight: 500; }
:root.r6 .r6-eye::after { content: ""; position: absolute; inset: -4px 0; }      /* 44 px to tap */
:root.r6 .r6-eye { position: relative; }
:root.r6 .r6-eye svg { width: 16px; height: 16px; }
:root.r6 .r6-fig { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
:root.r6 .r6-big { display: flex; align-items: baseline; gap: 8px; color: rgba(239, 241, 246, .58); font-size: 18px; white-space: nowrap; }
:root.r6 .r6-big b { color: #EFF1F6; font-size: clamp(48px, 16.4vw, 64px); font-weight: 400; letter-spacing: -.045em; line-height: 1; }
:root.r6 .r6-fig small { max-width: 300px; color: rgba(239, 241, 246, .62); font-size: 14px; line-height: 1.4; }
:root.r6 .r6-fig.short small { color: #F7D27A; }
:root.r6 .r6-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin-top: 20px; }
:root.r6 .r6-act { display: flex; flex-direction: column; align-items: center; gap: 9px; color: #EFF1F6; font-size: 13.5px; font-weight: 500; text-align: center; }
:root.r6 .r6-act .r6-glass { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; }

/* ---------- a section's head (what there is to pay, the goals): larger, its link a round glass button with an arrow ---------- */
:root.r6 #view > .bq-sec { margin-top: 16px; }
:root.r6 .bq-h h2 { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
:root.r6 .bq-sub { color: var(--r6-ink-3); font-size: 14px; }
:root.r6 .bq-h .bq-more { justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); color: #EFF1F6; font-size: 0; }
:root.r6 .bq-h .bq-more svg { display: none; }
:root.r6 .bq-h .bq-more::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; }      /* the arrow that opens the whole list (its words stay for a screen reader) */

/* ---------- the bar at the foot: dark glass, the screen in use a light grey pill (v346; owner, 2026-10-28: "el color activo no me gusta",
   then "gris claro"); the lime is left to the buttons that do things ---------- */
/* v446 (owner, 2026-11-01, on v444's liquid glass: "no me gusta cómo hiciste el nav; mira cómo lo tiene Wise"): as Wise's. A graphite pill,
   a touch lighter in its middle, a fine light rim and a dark line round it, so it sits on the page; the screen in use pressed into it, a darker
   pill with its shade inside; every icon and word in white, the words a little bolder. Not solid (owner: "el gris no es sólido, es blur"): a
   graphite glass, what scrolls under it blurred through it. */
:root.r6 .tabbar { border: 0; background: radial-gradient(60% 140% at 50% 50%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, rgba(58, 59, 59, .72), rgba(44, 45, 45, .72));
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(255, 255, 255, .05), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 1px rgba(0, 0, 0, .55), 0 12px 30px rgba(0, 0, 0, .5); }
:root.r6 .tabbar :is(a, .tab-more) { gap: 3px; color: #FFFFFF; font-size: 10.5px; font-weight: 500; letter-spacing: .01em; }      /* the words smaller (owner: "reduce la fuente del texto debajo de los íconos") */
:root.r6 .tabbar :is(a, .tab-more) svg { color: #FFFFFF; }
:root.r6 .tabbar :is(a, .tab-more) svg.r6-tab-ic { width: 23px; height: 23px; }
:root.r6 .tabbar :is(a, .tab-more)[aria-current="page"] { background: #1B1C1C; box-shadow: inset 0 2px 7px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .05); color: #FFFFFF; }
:root.r6 .tabbar :is(a, .tab-more)[aria-current="page"] svg { color: #FFFFFF; }
/* ---------- the page fading into the black under the bar (v350; owner, 2026-10-28: "agrega ese efecto de reveal debajo del menú inferior, es
   como un fade oscuro que tienen todas las canvas"): as on every board, the page goes dark towards the foot, so what scrolls under the bar and
   the screen's buttons sinks into the black instead of showing through them. On the app's frame, beside the page and not in it (v351): the
   page slides when a tab changes (app/tab-swipe.js), and a fade inside it went with it and came back once it rested ("la sombra detrás del
   menú inferior no está y luego aparece"). The screen's buttons are beside the page too (#r6-foot, features/phone/r6-pages.js: r6Foot), one
   layer over the fade (39), the bar over both (40); so the buttons never fall under it ("se quedaron detrás", v350). Taller where a screen has
   its buttons over the bar; touches pass through it ---------- */
@media (max-width: 920px) {
  :root.r6.in-app .app::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 38; height: calc(150px + var(--safe-b, 0px)); pointer-events: none;
    background: linear-gradient(180deg, rgba(7, 8, 8, 0), rgba(7, 8, 8, .5)); }      /* v410: lighter, so the bar's glass has something to blur */
  :root.r6.in-app.pm-anydock .app::after { height: calc(210px + var(--safe-b, 0px)); }
  /* the buttons beside the page keep the page's touch: a small press */
  :root.r6 #r6-foot .press { transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root.r6 #r6-foot .press:active { transform: scale(.965); }
}

@keyframes r6-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes r6-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes r6-fill { from { transform: scaleY(0); } to { transform: none; } }
@keyframes r6-trk { from { transform: scaleX(0); } to { transform: none; } }
@keyframes r6-knob { from { left: 9px; } }
@media (prefers-reduced-motion: reduce) {
  :root.r6 #view .press, :root.r6 .topbar > .navbar { transition: none; }
  :root.r6 #view :is(.r6-wc, .r6-op, .r6-cap i, .r6-trk > i, .r6-knob) { animation: none; }
}
/* v445 (owner, 2026-11-01: "there is a scroll bar, hide it, no need for one on mobile"): on the owner's phone no scroll bar anywhere, the page's
   or a list's; the page keeps no room for one either */
@media (max-width: 920px) {
  :root.r6 { scrollbar-width: none; scrollbar-gutter: auto; }
  :root.r6 body { scrollbar-width: none; }
  :root.r6::-webkit-scrollbar, :root.r6 ::-webkit-scrollbar { display: none; width: 0; height: 0; }
}