/* Dorax Finance — the owner's Calendar in the v6 look (v349, features/phone/r6-calendar.js; the canvas "Calendario-V6"). Only while the classes r6 and
   r6-pg are on the page (the owner, a phone, the household's Calendar). Its frame is the other screens' (look-r6-pages.css): the page black, the
   cards #121414 with their edge of light, headings 22 px. Here: the day's tag and its figure, the three weeks as tiles (the day chosen in muted white,
   today ringed in lime, the tightest day's flag), the one lime line of what can be spent, the day's things in one card, and what comes as a line down
   the page with a node for each day. The Calendar's other look (look-land-calendar.css) shares some class names for its clicks: they are reset here. */
@media (max-width: 920px) {
  :root.r6.r6-pg #view .cll.r6cal { display: flex; flex-direction: column; gap: 0; padding: 0 0 28px; }

  /* ---------- the top: the tag and the date, the figure and its (i) ---------- */
  :root.r6.r6-pg #view .r6cal-top { display: flex; flex-direction: column; gap: 0; color: #EFF1F6; }
  :root.r6.r6-pg #view .r6cal-lead { display: flex; align-items: center; gap: 8px; min-width: 0; color: rgba(239, 241, 246, .6); font-size: 14px; }
  :root.r6.r6-pg #view .r6cal-lead > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :root.r6.r6-pg #view .r6cal-tag { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(239, 241, 246, .1); color: #EFF1F6; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
  :root.r6.r6-pg #view .r6cal-tag.now { background: #9FD182; color: #101212; }
  :root.r6.r6-pg #view .r6cal-fig { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 10px; }
  :root.r6.r6-pg #view .r6cal-fig .r6-big6 { margin-top: 0; min-width: 0; }
  :root.r6.r6-pg #view .r6cal-fig .r6-big6 > b.neg { color: #FF8A80; }
  :root.r6.r6-pg #view .r6cal-fig .cal-why { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 2px; border-radius: 50%; background: rgba(239, 241, 246, .06); color: rgba(239, 241, 246, .75); }
  :root.r6.r6-pg #view .r6cal-fig .cal-why span { display: contents; }
  :root.r6.r6-pg #view .r6cal-fig .cal-why svg { width: 18px; height: 18px; stroke-width: 1.9; }
  :root.r6.r6-pg #view .r6cal-why { margin-top: 10px; color: #FF8A80; font-size: 13.5px; line-height: 1.4; }

  /* ---------- three weeks to touch ---------- */
  :root.r6.r6-pg #view .r6cal-grid { margin-top: 22px; }
  /* v512 (owner, 2026-11-02: "en calendario no puede cambiar de mes?"): the month the three weeks show, and ‹ › to the month before or after */
  :root.r6.r6-pg #view .r6cal-mh { display: flex; align-items: center; justify-content: space-between; margin: -6px -10px 4px 0; }
  :root.r6.r6-pg #view .r6cal-mn { color: #EFF1F6; font-size: 15px; font-weight: 500; }
  :root.r6.r6-pg #view .r6cal-mbs { display: flex; }
  :root.r6.r6-pg #view .r6cal-mb { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: rgba(239, 241, 246, .7); -webkit-tap-highlight-color: transparent; }
  :root.r6.r6-pg #view .r6cal-mb:disabled { cursor: default; color: rgba(239, 241, 246, .22); }
  :root.r6.r6-pg #view .r6cal-mb svg { width: 17px; height: 17px; stroke-width: 2.2; }
  @media (hover: hover) { :root.r6.r6-pg #view .r6cal-mb:not(:disabled):hover { background: rgba(239, 241, 246, .06); } }
  :root.r6.r6-pg #view .r6cal-mb:focus-visible { outline: 2px solid #9FD182; outline-offset: -2px; }
  :root.r6.r6-pg #view .r6cal-wd, :root.r6.r6-pg #view .r6cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  :root.r6.r6-pg #view .r6cal-days { position: relative; margin: 6px 0 0; padding: 0; overflow: visible; }
  :root.r6.r6-pg #view .r6cal-wd > span { display: grid; place-items: center; height: 24px; color: rgba(239, 241, 246, .45); font-size: 12px; font-weight: 500; }
  :root.r6.r6-pg #view .r6cal-c { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 50px; min-width: 0;
    border-radius: 16px; background: #121414; color: #EFF1F6; cursor: pointer; transition: background-color .25s ease, color .25s ease, transform .3s cubic-bezier(.2, .9, .3, 1.25); }
  :root.r6.r6-pg #view .r6cal-c > b { color: inherit; font-size: 15px; font-weight: 500; line-height: 1; }      /* the tile's own ink (the app's figures are light by default) */
  :root.r6.r6-pg #view .r6cal-c > i { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
  :root.r6.r6-pg #view .r6cal-c > i.on { background: #9FD182; }
  :root.r6.r6-pg #view .r6cal-c.today { box-shadow: inset 0 0 0 1.5px #9FD182; }
  :root.r6.r6-pg #view .r6cal-c.gone, :root.r6.r6-pg #view .r6cal-c.off { background: none; box-shadow: none; color: rgba(239, 241, 246, .28); }
  :root.r6.r6-pg #view .r6cal-c.gone > i.on { opacity: .45; }
  :root.r6.r6-pg #view .r6cal-c.off { cursor: default; }
  :root.r6.r6-pg #view .r6cal-c.off.out { color: rgba(239, 241, 246, .14); }      /* v538: the days of the months beside it, in the month's first and last week */
  :root.r6.r6-pg #view .r6cal-days > .r6cal-c { height: 46px; }      /* v538: a whole month, five or six weeks */
  :root.r6.r6-pg #view .r6cal-c.neg { background: rgba(255, 138, 128, .12); color: #FF8A80; }
  :root.r6.r6-pg #view .r6cal-c.on { background: #D9DCE1; box-shadow: none; color: #101212; }
  :root.r6.r6-pg #view .r6cal-c.on > i.on { background: #101212; }
  /* v528: a day with only what is paid with a card (it moves no balance): a hollow dot, quieter than the lime one of money that moves */
  :root.r6.r6-pg #view .r6cal-c > i.q { box-sizing: border-box; background: transparent; box-shadow: inset 0 0 0 1.25px rgba(239, 241, 246, .5); }
  :root.r6.r6-pg #view .r6cal-c.on > i.q { box-shadow: inset 0 0 0 1.25px rgba(16, 18, 18, .6); }
  :root.r6.r6-pg #view .r6cal-c:active { transform: scale(.94); }
  :root.r6.r6-pg #view .r6cal-c:focus-visible { outline: 2px solid #9FD182; outline-offset: 2px; }
  :root.r6.r6-pg #view .r6cal-flag { position: absolute; top: 5px; right: 6px; display: flex; color: #9FD182; }
  :root.r6.r6-pg #view .r6cal-c.on .r6cal-flag { color: #101212; }
  :root.r6.r6-pg #view .r6cal-flag svg { width: 12px; height: 12px; stroke-width: 2.4; }
  :root.r6.r6-pg #view .r6cal-days .pick-pill { border-radius: 16px; background: #D9DCE1; }

  /* ---------- what can be spent until pay day, and the way back to today ---------- */
  :root.r6.r6-pg #view .r6cal-under { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
  :root.r6.r6-pg #view .r6cal-free { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; box-sizing: border-box; border-radius: 999px; background: rgba(159, 209, 130, .14); color: #C9E9B6; font-size: 14px; font-weight: 500; line-height: 1.3; }
  :root.r6.r6-pg #view .r6cal-free svg { flex: none; width: 15px; height: 15px; stroke-width: 2.4; color: #9FD182; }
  :root.r6.r6-pg #view .r6cal-free b { color: #9FD182; font-weight: 500; }
  :root.r6.r6-pg #view .r6cal-free.neg { background: rgba(255, 138, 128, .12); color: #FFC4BE; }
  :root.r6.r6-pg #view .r6cal-free.neg svg, :root.r6.r6-pg #view .r6cal-free.neg b { color: #FF8A80; }
  :root.r6.r6-pg #view .r6cal-back { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(239, 241, 246, .06); color: #EFF1F6; font-size: 14px; font-weight: 500; }
  :root.r6.r6-pg #view .r6cal-back svg { width: 16px; height: 16px; stroke-width: 2.2; }

  /* ---------- a row: the thing's picture, its name and line, its amount ---------- */
  :root.r6.r6-pg #view .r6cal-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 70px; margin: 0 18px 0 14px; color: #EFF1F6; cursor: pointer; }
  :root.r6.r6-pg #view .r6cal-rows > .r6cal-row + .r6cal-row { border-top: 1px solid rgba(239, 241, 246, .07); }
  :root.r6.r6-pg #view .r6cal-row.still { cursor: default; }
  :root.r6.r6-pg #view .r6cal-row:focus-visible { outline: 2px solid #9FD182; outline-offset: -2px; border-radius: 16px; }
  :root.r6.r6-pg #view .r6cal-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; }
  :root.r6.r6-pg #view .r6cal-ic > .cg { width: 40px; height: 40px; }
  :root.r6.r6-pg #view .r6cal-ic.bank .inst { width: 40px; height: 40px; border-radius: 50%; }
  :root.r6.r6-pg #view .r6cal-ic.bank .inst img { width: 40px; height: 40px; border-radius: 50%; }
  :root.r6.r6-pg #view .r6cal-ic.glyph { width: 40px; height: 40px; margin: 2px; border-radius: 50%; background: rgba(239, 241, 246, .06); color: #EFF1F6; }
  :root.r6.r6-pg #view .r6cal-ic.glyph.in { background: rgba(159, 209, 130, .14); color: #9FD182; }
  :root.r6.r6-pg #view .r6cal-ic.glyph svg { width: 19px; height: 19px; }
  :root.r6.r6-pg #view .r6cal-ic.crit { width: 44px; height: 44px; margin: 0; border-radius: 50%; background: rgba(255, 138, 128, .14); box-shadow: inset 0 0 0 1px rgba(255, 138, 128, .3); color: #FF8A80; }
  :root.r6.r6-pg #view .r6cal-ic.crit svg { width: 20px; height: 20px; stroke-width: 2; }
  :root.r6.r6-pg #view .r6cal-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  :root.r6.r6-pg #view .r6cal-t > b { overflow: hidden; font-size: 16px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.r6.r6-pg #view .r6cal-t > small { overflow: hidden; color: rgba(239, 241, 246, .5); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  :root.r6.r6-pg #view .r6cal-t > small.cal-fc { white-space: normal; }      /* v526: a card's open invoice, ≈: "already charged R$ …" whole, on two lines on a narrow phone rather than cut */
  :root.r6.r6-pg #view .r6cal-am { flex: none; font-size: 16px; font-weight: 500; white-space: nowrap; }
  :root.r6.r6-pg #view .r6cal-am.in { color: #9FD182; }
  :root.r6.r6-pg #view .r6cal-am.crit { color: #FF8A80; font-weight: 500; }
  /* v528: what is paid with a card, on its day: quiet; its name grey, "with Nubank PF" under it, its amount in the secondary ink (it moves no
     balance: the card's invoice carries it) */
  :root.r6.r6-pg #view .r6cal-row.quiet .r6cal-t > b { color: rgba(239, 241, 246, .62); font-weight: 400; }
  :root.r6.r6-pg #view .r6cal-row.quiet .r6cal-t > small { color: rgba(239, 241, 246, .45); white-space: normal; }      /* "6 fixed costs · with Nubank PF" whole, on two lines on a narrow phone */
  :root.r6.r6-pg #view .r6cal-row.quiet .r6cal-am { color: rgba(239, 241, 246, .5); font-weight: 400; }
  :root.r6.r6-pg #view .r6cal-row.quiet .r6cal-ic { opacity: .6; }
  :root.r6.r6-pg #view .r6cal-line > li.quiet .r6cal-dd { background: none; box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .08); }
  :root.r6.r6-pg #view .r6cal-line > li.quiet .r6cal-dd > b { color: rgba(239, 241, 246, .55); }
  :root.r6.r6-pg #view .r6cal-line > li.quiet .r6cal-row { min-height: 56px; }

  /* ---------- a day below zero ahead, said once ---------- */
  :root.r6.r6-pg #view button.r6cal-red { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 24px; padding: 16px 18px 16px 14px; border: 1px solid transparent; border-radius: 28px;
    background: var(--r6-face), linear-gradient(#121414, #121414) padding-box, var(--r6-rim); color: #EFF1F6; }
  :root.r6.r6-pg #view button.r6cal-red .r6cal-t > b { font-size: 15px; font-weight: 500; white-space: normal; }

  /* ---------- the day chosen: its things in one card ---------- */
  :root.r6.r6-pg #view .gq-sec.r6cal-day { margin-top: 30px; }
  :root.r6.r6-pg #view .r6cal-tot { flex: none; color: rgba(239, 241, 246, .75); font-size: 15px; font-weight: 500; }
  :root.r6.r6-pg #view .r6cal-card, :root.r6.r6-pg #view .r6cal-rows { display: flex; flex-direction: column; }      /* a row (a button) as wide as the card, not as its words */
  :root.r6.r6-pg #view .r6cal-none { margin: 0; padding: 22px 20px; color: rgba(239, 241, 246, .55); font-size: 14.5px; line-height: 1.45; }
  :root.r6.r6-pg #view .r6cal-exact { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; 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: rgba(239, 241, 246, .8); font-size: 14px; }
  :root.r6.r6-pg #view .r6cal-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #F7D27A; box-shadow: 0 0 0 3px rgba(247, 210, 122, .2); }
  :root.r6.r6-pg #view .r6cal-ex-t { flex: 1 1 auto; min-width: 0; }
  :root.r6.r6-pg #view .r6cal-exact .cll-go { display: flex; color: #9FD182; }
  :root.r6.r6-pg #view .r6cal-exact .cll-go svg { width: 16px; height: 16px; stroke-width: 2.2; }
  :root.r6.r6-pg #view .r6cal-checks > div { margin: 0; padding: 0 20px; }
  :root.r6.r6-pg #view .r6cal-checks.on > div { padding-bottom: 12px; }
  :root.r6.r6-pg #view .r6cal-checks .cal-check { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 0; color: rgba(239, 241, 246, .7); font-size: 13.5px; line-height: 1.45; }
  :root.r6.r6-pg #view .r6cal-checks .cal-check-go { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: #9FD182; font-weight: 500; }
  :root.r6.r6-pg #view .r6cal-checks .cal-check-go svg { width: 15px; height: 15px; }

  /* ---------- what comes: a line down the page, each day a node on it ---------- */
  :root.r6.r6-pg #view .gq-sec.r6cal-coming { gap: 6px; margin-top: 32px; }
  :root.r6.r6-pg #view .gq-sec.r6cal-coming > .r6-h { margin-bottom: 8px; }
  :root.r6.r6-pg #view .r6cal-line { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
  :root.r6.r6-pg #view .r6cal-line > li { position: relative; display: flex; gap: 14px; min-width: 0; padding-left: 2px; }
  :root.r6.r6-pg #view .r6cal-line > li::before { content: ""; position: absolute; top: 0; bottom: 0; left: 23.5px; width: 1px; background: rgba(239, 241, 246, .12); }
  :root.r6.r6-pg #view .r6cal-line > li:first-child::before { top: 30px; }
  :root.r6.r6-pg #view .r6cal-line > li:last-child::before { bottom: auto; height: 30px; }
  :root.r6.r6-pg #view .r6cal-line > li:only-child::before { display: none; }
  :root.r6.r6-pg #view .r6cal-node { position: relative; z-index: 1; flex: none; display: flex; justify-content: center; width: 44px; }
  :root.r6.r6-pg #view .r6cal-dd { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 48px; margin-top: 8px; border-radius: 14px; background: #121414; box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .12); }
  :root.r6.r6-pg #view .r6cal-dd > b { font-size: 15px; font-weight: 500; line-height: 1; }
  :root.r6.r6-pg #view .r6cal-dd > small { margin-top: 3px; color: rgba(239, 241, 246, .5); font-size: 11px; }
  :root.r6.r6-pg #view .r6cal-dd.none > small { margin: 0; padding: 0 2px; color: rgba(239, 241, 246, .6); font-size: 10.5px; line-height: 1.15; text-align: center; }
  :root.r6.r6-pg #view .r6cal-line .r6cal-row { flex: 1 1 auto; margin: 0; min-height: 64px; }
  :root.r6.r6-pg #view .r6cal-line .r6cal-row .r6cal-t > b { font-size: 16px; }
  :root.r6.r6-pg #view .r6cal-pt { display: block; width: 9px; height: 9px; margin-top: 14px; border-radius: 50%; background: rgba(239, 241, 246, .35); }
  :root.r6.r6-pg #view .r6cal-mo > small { padding: 10px 0 6px; color: rgba(239, 241, 246, .5); font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
  :root.r6.r6-pg #view .r6cal-pin { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 10px; border-radius: 50%; background: #9FD182; color: #101212; }
  :root.r6.r6-pg #view .r6cal-pin svg { width: 12px; height: 12px; stroke-width: 2.6; }
  :root.r6.r6-pg #view .r6cal-pill { display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; min-height: 34px; margin: 4px 0 10px; padding: 6px 14px; box-sizing: border-box; border-radius: 999px; background: rgba(159, 209, 130, .14); color: #C9E9B6; font-size: 13.5px; font-weight: 500; line-height: 1.3; }
  :root.r6.r6-pg #view .r6cal-pill b { color: #9FD182; font-weight: 500; }
  :root.r6.r6-pg #view .r6cal-mark.neg .r6cal-pin { background: #FF8A80; }
  :root.r6.r6-pg #view .r6cal-mark.neg .r6cal-pill { background: rgba(255, 138, 128, .12); color: #FF8A80; }
  :root.r6.r6-pg #view .r6cal-more { all: unset; box-sizing: border-box; cursor: pointer; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: 60px; color: #9FD182; font-size: 14.5px; font-weight: 500; }
  :root.r6.r6-pg #view .r6cal-more svg { width: 15px; height: 15px; stroke-width: 2.3; }
  @media (prefers-reduced-motion: reduce) { :root.r6.r6-pg #view .r6cal-c { transition: none; } }
}