/* Dorax Finance — the owner's main screens in the "v6" look (v346, features/phone/r6-pages.js): the frame they share. Only while the classes r6 and
   r6-pg are on the page (the owner, a phone, the household's Plan, Goals, Reports or Transactions); the summary keeps its fog (look-r6.css).
   The page black #070808 (v349; owner, 2026-10-28: the darker black, so it looks right on a phone, an iPhone above all; before: #101212), no
   cover and no fog at the top, the screen's name large in the top row, the cards as the summary's (#121414 with the edge of light: .r6-card),
   headings 22 px, the figures light and on the left, the actions at the foot over the bar (.r6-dock). */
@media (max-width: 920px) {
  :root.r6.r6-pg .work { --bg: #070808; background: #070808; }
  html.in-app.land.r6.r6-pg { background: #070808; }

  /* ---------- the top row: on the page's black; once the page goes up, its own dark glass ---------- */
  :root.r6.r6-pg .topbar > .navbar { background: #070808; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .25s ease, box-shadow .25s ease; }
  :root.r6.r6-pg.scrolled .topbar > .navbar { background: rgba(7, 8, 8, .94); -webkit-backdrop-filter: saturate(150%) blur(20px); backdrop-filter: saturate(150%) blur(20px); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .6); }
  :root.r6.r6-pg .navbar .bar-name { color: #EFF1F6; font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
  :root.r6.r6-pg .topbar > .pagehead, :root.r6.r6-pg:is(.pm-view-bqhero, #pm-0) .topbar > .pagehead { height: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden; background: transparent; box-shadow: none; }
  :root.r6.r6-pg .topbar > .pagehead::after { display: none; }
  :root.r6.r6-pg .navbar .bq-tool { border: 0; background: rgba(239, 241, 246, .06); box-shadow: none; color: #EFF1F6; }

  /* ---------- the page: the summary's colours ---------- */
  :root.r6.r6-pg #view { --bq-accent: #9FD182; --bq-warn: #F7D27A; --bq-crit: #FF8A80; --bq-in: #9FD182; --bq-area: rgba(239, 241, 246, .06); --bq-mint: rgba(159, 209, 130, .14); --bq-mint-ink-2: #9FD182; color: #EFF1F6; }
  :root.r6.r6-pg #view .gq-sec { gap: 12px; margin-top: 18px; }
  :root.r6.r6-pg #view .gq-h, :root.r6.r6-pg #view .r6-h { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0; }
  :root.r6.r6-pg #view .gq-h > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  :root.r6.r6-pg #view .gq-h h2 { margin: 0; color: #EFF1F6; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
  :root.r6.r6-pg #view .gq-h small { color: rgba(239, 241, 246, .55); font-size: 14px; }
  :root.r6.r6-pg #view .gq-h:not(:has(> span)) { flex-direction: column; align-items: flex-start; gap: 3px; }
  :root.r6.r6-pg #view .card { border: 1px solid transparent; border-radius: 32px; background: var(--r6-face), linear-gradient(#121414, #121414) padding-box, var(--r6-rim); box-shadow: none; }
  :root.r6.r6-pg #view .bp-quiet, :root.r6.r6-pg #view .note { color: rgba(239, 241, 246, .5); }
  :root.r6.r6-pg #view .r6-pad { padding: 14px 20px; }
  /* a card: the summary's, its edge of light */
  :root.r6.r6-pg #view .r6-card { position: relative; overflow: hidden; border: 1px solid transparent; border-radius: 32px; background: var(--r6-face), linear-gradient(#121414, #121414) padding-box, var(--r6-rim); }
  /* the band at a card's foot: its one way further */
  :root.r6.r6-pg #view .r6-band { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 0 20px;
    border-top: 1px solid rgba(239, 241, 246, .07); background: rgba(255, 255, 255, .025); color: #9FD182; font-size: 14.5px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-band svg { width: 16px; height: 16px; stroke-width: 2.2; }
  :root.r6.r6-pg #view :is(.bp-new, .bp-chip) { border-color: rgba(239, 241, 246, .22); color: #EFF1F6; font-weight: 500; }
  :root.r6.r6-pg #view .bp-new { border-radius: 999px; }
  :root.r6.r6-pg #view :is(.bp-new, .bp-chip) svg { color: #9FD182; }
  :root.r6.r6-pg #view :is(a, button):focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
  :root.r6.r6-pg #view .press { transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root.r6.r6-pg #view .press:active { transform: scale(.965); }

  /* ---------- a screen's own top: on the page, nothing boxed ---------- */
  :root.r6.r6-pg #view > .r6-top { display: flex; flex-direction: column; padding: 0 0 4px; color: #EFF1F6; }
  :root.r6.r6-pg :is(.r6-top, #view > .bq-hero) .bq-mon { display: flex; align-items: center; align-self: flex-start; gap: 0; margin: 0 0 6px -12px; padding: 0; border: 0; background: none; box-shadow: none; }
  :root.r6.r6-pg :is(.r6-top, #view > .bq-hero) .bq-mon button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; color: rgba(239, 241, 246, .7); }
  :root.r6.r6-pg :is(.r6-top, #view > .bq-hero) .bq-mon button:disabled { cursor: default; color: rgba(239, 241, 246, .25); }
  :root.r6.r6-pg :is(.r6-top, #view > .bq-hero) .bq-mon button svg { width: 17px; height: 17px; stroke-width: 2.2; }
  :root.r6.r6-pg :is(.r6-top, #view > .bq-hero) .bq-mon span { color: #EFF1F6; font-size: 15px; font-weight: 500; }
  :root.r6.r6-pg .r6-big6 { position: relative; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
  :root.r6.r6-pg .r6-big6 > small { color: rgba(239, 241, 246, .6); font-size: 15px; }
  :root.r6.r6-pg .r6-big6 > b { color: #EFF1F6; font-size: clamp(40px, 13.4vw, 52px); font-weight: 300; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
  :root.r6.r6-pg .r6-big6 .cents { opacity: 1; color: rgba(239, 241, 246, .42); font-size: .5em; letter-spacing: -.02em; }
  :root.r6.r6-pg .r6-big6 .kpi-open { border-radius: 16px; }
  /* v506 (owner, 2026-11-02: "agrega la (i) como en calendario al lado de los números grandes"): the Calendar's round (i) (look-r6-calendar.css:
     .cal-why) at the right of a big figure that opens what it is made of, centred on the figure; the figure keeps the room for it. A sign under the
     figure's own button, it brightens when the figure is pointed at (a computer). */
  :root.r6.r6-pg .r6-has-i { padding-right: 54px; }
  :root.r6.r6-pg #view > .bq-hero .card.g-total.r6-has-i { padding-right: 54px; }      /* v509: Reports' income figure keeps the room for its (i) (its card has no padding of its own: look-r6-reports.css), so on a computer the (i) is not under the figure */
  :root.r6.r6-pg .r6-big6-i { position: absolute; right: 0; top: calc(24px + (clamp(40px, 13.4vw, 52px) - 44px) / 2); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(239, 241, 246, .06); color: rgba(239, 241, 246, .75); pointer-events: none; transition: background-color .2s ease; }
  :root.r6.r6-pg .r6-big6-i svg { width: 18px; height: 18px; stroke-width: 1.9; }
  @media (hover: hover) { :root.r6.r6-pg .r6-has-i:hover .r6-big6-i { background: rgba(239, 241, 246, .12); } }
  /* one thick line of how far, with its two ends said under it */
  :root.r6.r6-pg .r6-thick { position: relative; display: block; height: 14px; margin-top: 20px; border-radius: 7px; background: rgba(159, 209, 130, .14); }
  :root.r6.r6-pg .r6-thick > i { position: absolute; left: 0; top: 0; bottom: 0; min-width: 14px; border-radius: 7px; background: #9FD182; transform-origin: 0 50%; animation: r6-trk 1.1s cubic-bezier(.2, .9, .25, 1) .3s both; }
  :root.r6.r6-pg .r6-tl { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: rgba(239, 241, 246, .55); font-size: 13.5px; }
  :root.r6.r6-pg .r6-tl b { color: #EFF1F6; font-weight: 500; }
  /* two figures side by side, a hairline between them */
  :root.r6.r6-pg .r6-two { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 18px; margin-top: 26px; }
  :root.r6.r6-pg .r6-two > i { background: rgba(239, 241, 246, .1); }
  :root.r6.r6-pg .r6-st { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; color: #EFF1F6; text-align: left; }
  :root.r6.r6-pg button.r6-st { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 44px; cursor: pointer; color: #EFF1F6; text-align: left; }
  :root.r6.r6-pg .r6-st > small { color: rgba(239, 241, 246, .55); font-size: 13px; line-height: 1.3; }
  :root.r6.r6-pg .r6-st > b { overflow: hidden; font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
  :root.r6.r6-pg .r6-st > b.pos { color: #9FD182; }
  :root.r6.r6-pg .r6-st > b.neg { color: #FF8A80; }
  :root.r6.r6-pg .r6-st > b.words { font-size: 17px; white-space: normal; }
  :root.r6.r6-pg .r6-st > .r6-sub { font-size: 12.5px; font-weight: 500; }
  :root.r6.r6-pg .r6-st > .r6-sub:is(.soon, .warn) { color: #F7D27A; }
  :root.r6.r6-pg .r6-st > .r6-sub.quiet { color: rgba(239, 241, 246, .45); font-weight: 500; }
  :root.r6.r6-pg .r6-st .kpi-open { border-radius: 12px; }

  /* ---------- the actions at the foot, over the bar: no panel, the buttons themselves; the main one lime at the right ---------- */
  :root.r6.r6-pg .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.r6-pg .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.r6-pg .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.r6-pg .r6-dock .r6-db.only-ico { width: 52px; padding: 0; }
  :root.r6.r6-pg .r6-dock .r6-db svg { flex: none; width: 19px; height: 19px; stroke-width: 2.2; }
  :root.r6.r6-pg .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.r6-pg .r6-dock .r6-db > span:not(.r6-n) { overflow: hidden; text-overflow: ellipsis; }
  :root.r6.r6-pg .r6-dock .r6-db:active { transform: scale(.965); }
  :root.r6.r6-pg .r6-dock .r6-db:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
  :root.r6.r6-pg .r6-dock .r6-sp { flex: 1 1 auto; }
  :root.r6.r6-pg .bq-actbar-gap { height: 74px; }
  @media (max-width: 359px) { :root.r6.r6-pg .bq-actbar.r6-dock { gap: 8px; } :root.r6.r6-pg .r6-dock .r6-db { padding: 0 14px; font-size: 14px; } :root.r6.r6-pg .r6-dock .r6-db.go { padding: 0 16px; } :root.r6.r6-pg .r6-dock .r6-db:not(.go):not(.only-ico) > svg { display: none; } }
  @media (prefers-reduced-motion: reduce) { :root.r6.r6-pg .r6-thick > i { animation: none; } :root.r6.r6-pg #view .press, :root.r6.r6-pg .r6-dock .r6-db { transition: none; } }
}

/* ---------- v519 (owner, 2026-11-02, a screenshot of the computer's "Los saldos de las cuentas empiezan en cero" in its amber box, right after
   "aún veo pantallas viejas en empresa"): a page's notices (ui/components.js: banner) in the v6 look, the summaries and the pages, either side:
   no outlined box but one flat block, as the v6 rows' card (and in the bell, its "Reminders are switched off"); its icon in a round tint of its level (amber, coral, or quiet); its first words in
   the ink at 500, the rest quieter; its way there as the v6 flat secondary button under the words. ---------- */
@media (max-width: 920px) {
  :root.r6 :is(#view, #overlay .r6-bell) .banner { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 14px; margin: 0; padding: 16px; border: 0; border-radius: 24px; background: rgba(239, 241, 246, .05); box-shadow: none; color: rgba(239, 241, 246, .66); font-size: 14px; line-height: 1.45; }
  :root.r6 #view > .banner { margin-top: 24px; }
  :root.r6 #view > .banner + .banner { margin-top: 12px; }
  :root.r6 :is(#view, #overlay .r6-bell) .banner > svg:first-child { flex: none; box-sizing: border-box; width: 40px; height: 40px; margin: 0; padding: 10px; border-radius: 50%; background: rgba(239, 241, 246, .07); color: rgba(239, 241, 246, .85); }
  :root.r6 :is(#view, #overlay .r6-bell) .banner.warn > svg:first-child { background: rgba(247, 210, 122, .13); color: #F7D27A; }
  :root.r6 :is(#view, #overlay .r6-bell) .banner.crit > svg:first-child { background: rgba(255, 138, 128, .13); color: #FF8A80; }
  :root.r6 :is(#view, #overlay .r6-bell) .banner > .grow { flex: 1 1 auto; min-width: 0; align-self: center; }
  :root.r6 :is(#view, #overlay .r6-bell) .banner > .grow > b:first-child { display: block; margin-bottom: 2px; color: #EFF1F6; font-size: 15px; font-weight: 500; line-height: 1.35; }
  :root.r6 :is(#view, #overlay .r6-bell) .banner .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0 !important; }
  :root.r6 :is(#view, #overlay .r6-bell) .banner .btn { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; min-height: 40px; margin: 12px 0 0 !important; padding: 0 16px; border-radius: 999px;
    background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); color: #EFF1F6; font-size: 14px; font-weight: 500; line-height: 1.2; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root.r6 :is(#view, #overlay .r6-bell) .banner > .btn { align-self: center; margin: 0 !important; }
  :root.r6 :is(#view, #overlay .r6-bell) .banner .btn.ghost { padding: 0 8px; background: none; box-shadow: none; color: rgba(239, 241, 246, .7); }      /* "Not now" beside it: words only */
  :root.r6 :is(#view, #overlay .r6-bell) .banner .btn svg { flex: none; width: 16px; height: 16px; }
  :root.r6 :is(#view, #overlay .r6-bell) .banner .btn:active { transform: scale(.965); }
  :root.r6 :is(#view, #overlay .r6-bell) .banner .btn:focus-visible { outline: 2px solid rgba(239, 241, 246, .7); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { :root.r6 :is(#view, #overlay .r6-bell) .banner .btn { transition: none; } }
}