/* Dorax Finance — the owner's bell in the v6 look (v366; the canvas "Campana-recordatorios-V6" and "Campana-para-ti-V6"; the markup:
   features/phone/bell-land.js with r6, and r6-bell.js). The phone's panel (look-land-bell.css) on the page's black: its colours (--bq-*) set again
   to the v6 ones, its parts in cards with their rim, what is due as a figure at 52 px over the week drawn day by day. */
@media (max-width: 920px) {
  :root.land #overlay .drawer:has(> .body.r6-bell) {
    --bq-page: #070808; --bq-ink: #EFF1F6; --bq-ink-2: rgba(239, 241, 246, .55); --bq-ink-3: rgba(239, 241, 246, .45);
    --bq-card: rgba(239, 241, 246, .06); --bq-card-2: #121414; --bq-line: rgba(239, 241, 246, .07); --bq-line-2: rgba(239, 241, 246, .2);
    --bq-accent: #9FD182; --bq-crit: #FF8A80; --lk-lime: #9FD182; --bq-circle: rgba(159, 209, 130, .14); --bq-circle-2: rgba(239, 241, 246, .15);
    top: 0; bottom: 0; height: 100dvh; max-height: none; padding-top: var(--safe-t, 0px); box-sizing: border-box; border: 0; border-radius: 0; background: #070808; color: #EFF1F6; }
  :root.land #overlay .drawer:has(> .body.r6-bell) > .grab { display: none; }

  /* ---------- the top: the name at 26 px, × in dark glass ---------- */
  :root.land #overlay .drawer:has(> .body.r6-bell) > header { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 14px 16px 0; border: 0; background: none; }
  :root.land #overlay .drawer:has(> .body.r6-bell) > header h2 { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: #EFF1F6; font-size: 24px; font-weight: 500; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
  :root.land #overlay .drawer:has(> .body.r6-bell) > header [data-a="close"] { all: unset; box-sizing: border-box; flex: none; cursor: pointer; -webkit-tap-highlight-color: transparent; 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); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #EFF1F6; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root.land #overlay .drawer:has(> .body.r6-bell) > header [data-a="close"] svg { width: 17px; height: 17px; }
  :root.land #overlay .drawer:has(> .body.r6-bell) > header [data-a="close"]:active { transform: scale(.94); }
  :root.land #overlay .drawer:has(> .body.r6-bell) > header [data-a="close"]:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }

  /* the page: room to scroll the last row above the buttons at the thumb */
  :root.land #overlay .bn-land.r6-bell { display: flex; flex-direction: column; gap: 0; padding: 14px 16px 112px; background: #070808; }
  :root.land #overlay .r6-bell > .bell-tabs .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; box-sizing: border-box; padding: 4px; border: 0; border-radius: 999px; background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); }
  :root.land #overlay .r6-bell > .bell-tabs .seg button { min-height: 44px; border-radius: 999px; background: none; box-shadow: none; color: rgba(239, 241, 246, .6); font-size: 15px; font-weight: 500; }
  :root.land #overlay .r6-bell > .bell-tabs .seg button[aria-pressed="true"] { background: #D9DCE1; color: #101212; font-weight: 500; }

  /* ---------- what is due: the figure, and the days drawn under it ---------- */
  :root.land #overlay .r6b-fig { display: flex; flex-direction: column; gap: 4px; margin-top: 26px; }
  :root.land #overlay .r6b-fig small { color: rgba(239, 241, 246, .6); font-size: 15px; }
  :root.land #overlay .r6b-fig > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  :root.land #overlay .r6b-fig b { color: #EFF1F6; font-size: 52px; font-weight: 300; letter-spacing: -.045em; line-height: 1; }
  :root.land #overlay .r6b-fig > span > span { color: rgba(239, 241, 246, .55); font-size: 16px; }
  :root.land #overlay .r6b-none { margin: 26px 0 0; color: rgba(239, 241, 246, .6); font-size: 15px; }
  :root.land #overlay .r6b-week { position: relative; display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); margin: 22px -4px 0; }
  :root.land #overlay .r6b-rail { position: absolute; left: 7%; right: 7%; top: 63px; height: 2px; border-radius: 1px; background: rgba(239, 241, 246, .1); }
  :root.land #overlay .r6b-d { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  :root.land #overlay .r6b-di { position: relative; display: grid; place-items: center; width: 40px; height: 36px; }
  :root.land #overlay .r6b-pi { display: grid; place-items: center; width: 40px; height: 40px; transform: scale(.85); animation: r6b-pop .5s cubic-bezier(.2, .9, .25, 1) backwards; }
  @keyframes r6b-pop { from { transform: translateY(8px) scale(.68); opacity: 0; } to { transform: scale(.85); opacity: 1; } }
  :root.land #overlay .r6b-pi .bn-glyph, :root.land #overlay .r6b-pi .bn-mark .inst, :root.land #overlay .r6b-pi .bn-mark .inst img { width: 40px; height: 40px; border-radius: 50%; }
  :root.land #overlay .r6b-more { position: absolute; right: -6px; bottom: -4px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: #D9DCE1; color: #101212; font-size: 11px; font-style: normal; font-weight: 600; }
  :root.land #overlay .r6b-dn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #070808; color: rgba(239, 241, 246, .55); font-size: 15px; font-weight: 500; }
  :root.land #overlay .r6b-d.pay .r6b-dn { background: rgba(239, 241, 246, .14); color: #EFF1F6; font-weight: 500; }
  :root.land #overlay .r6b-d.now .r6b-dn { background: #070808; box-shadow: inset 0 0 0 1.5px #9FD182; color: #9FD182; font-weight: 500; }
  :root.land #overlay .r6b-d small { color: rgba(239, 241, 246, .45); font-size: 12px; font-weight: 500; }
  :root.land #overlay .r6b-d.pay small { color: #EFF1F6; }
  :root.land #overlay .r6b-d.now small { color: #9FD182; }

  /* ---------- For you: how many are not read, their icons fanned beside the figure ---------- */
  :root.land #overlay .r6b-unread { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px; }
  :root.land #overlay .r6b-uf { display: flex; flex-direction: column; gap: 4px; }
  :root.land #overlay .r6b-fan { display: flex; align-items: center; padding-right: 6px; }
  :root.land #overlay .r6b-fi { position: relative; display: grid; place-items: center; width: 52px; height: 52px; margin-left: -14px; border-radius: 50%; background: #070808; box-shadow: 0 0 0 3px #070808; animation: r6b-fan .5s cubic-bezier(.2, .9, .25, 1) backwards; }
  :root.land #overlay .r6b-fi:first-child { margin-left: 0; }
  :root.land #overlay .r6b-fi:nth-child(2) { transform: rotate(-6deg) translateY(2px); }
  :root.land #overlay .r6b-fi:nth-child(3) { transform: rotate(8deg) translateY(4px); }
  :root.land #overlay .r6b-fi .bn-glyph { width: 52px; height: 52px; }
  :root.land #overlay .r6b-fi .bn-glyph svg { width: 22px; height: 22px; }
  :root.land #overlay .r6b-fi.dx .dxi, :root.land #overlay .r6b-fi .cg { width: 52px; height: 52px; }
  @keyframes r6b-fan { from { opacity: 0; translate: -10px 0; } to { opacity: 1; translate: 0 0; } }

  /* ---------- the parts, each in its card ---------- */
  :root.land #overlay .r6-bell .rem-group.bn-sec { display: flex; flex-direction: column; gap: 12px; margin: 30px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  :root.land #overlay .r6-bell .bn-sec .gq-h { margin: 0; }
  :root.land #overlay .r6-bell .bn-sec h3 { color: #EFF1F6; font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
  :root.land #overlay .r6-bell .bn-sec .gq-h small { color: rgba(239, 241, 246, .55); font-size: 14px; }
  :root.land #overlay .r6b-card { display: flex; flex-direction: column; padding: 4px 20px; border: 1px solid transparent; border-radius: 28px;
    background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 55%) padding-box, linear-gradient(#121414, #121414) padding-box, 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; }
  :root.land #overlay .r6-bell .bn-row + .bn-row::before, :root.land #overlay .r6-bell .bn-nt + .bn-nt::before { left: 0; }
  :root.land #overlay .r6-bell :is(.bn-main, .bn-go) { min-height: 70px; gap: 14px; }
  :root.land #overlay .r6-bell .bn-row .rem-t b { font-size: 15.5px; }
  :root.land #overlay .r6-bell .bn-row .rem-t .note { font-size: 13px; }
  :root.land #overlay .r6-bell .bn-amt { font-size: 15.5px; font-weight: 500; }
  :root.land #overlay .r6-bell .bn-glyph { width: 42px; height: 42px; }
  /* a row that opens: its chevron turns */
  :root.land #overlay .r6-bell .bn-main::after { content: ""; flex: none; width: 16px; height: 16px; background: rgba(239, 241, 246, .45); transition: transform .3s ease;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%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='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
  :root.land #overlay .r6-bell .bn-row.open .bn-main::after { transform: rotate(180deg); }
  :root.land #overlay .r6-bell .bn-acts { padding-left: 56px; }
  :root.land #overlay .r6-bell .bn-acts .bn-pill { flex: 0 1 auto; margin-bottom: 16px; }
  :root.land #overlay .r6-bell .bn-pill { min-height: 44px; padding: 6px 16px; border-radius: 999px; background: rgba(26, 29, 29, .92); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14), 0 8px 22px rgba(0, 0, 0, .45); color: #EFF1F6; font-size: 14px; font-weight: 500; }
  :root.land #overlay .r6-bell .bn-pill.main { background: #9FD182; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); color: #101212; }
  :root.land #overlay .r6-bell .bn-pill.main svg { display: none; }
  :root.land #overlay .r6-bell .bn-off { margin-top: 16px; }
  :root.land #overlay .r6-bell .empty.bn-empty { display: flex; flex-direction: column; gap: 6px; margin-top: 30px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: rgba(239, 241, 246, .6); font-size: 14px; text-align: left; }
  :root.land #overlay .r6-bell .empty.bn-empty b { color: #EFF1F6; font-size: 16px; font-weight: 500; }
  /* what Dorax will remind next: quiet, no card */
  :root.land #overlay .r6-bell .bn-nx { min-height: 58px; gap: 14px; }
  :root.land #overlay .r6-bell .bn-nd { width: 56px; font-size: 13.5px; color: rgba(239, 241, 246, .5); }
  :root.land #overlay .r6-bell .bn-nx .rem-t b { font-size: 15px; font-weight: 500; }
  :root.land #overlay .r6-bell .bn-nx > .num { font-size: 15px; font-weight: 500; }
  :root.land #overlay .r6-bell .bn-next .bn-cal { margin-left: 70px; font-size: 14.5px; font-weight: 500; }

  /* ---------- For you: each notice in the card ---------- */
  :root.land #overlay .r6-bell .bn-h h3 { margin: 0; }
  :root.land #overlay .r6-bell .bn-nt { position: relative; display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 16px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  :root.land #overlay .r6-bell .bn-nt + .bn-nt::before { content: ""; position: absolute; top: 0; right: 0; height: 1px; background: rgba(239, 241, 246, .07); }
  :root.land #overlay .r6-bell .bn-nt .bn-ic { width: 42px; height: 42px; }
  :root.land #overlay .r6-bell .bn-dot { box-shadow: 0 0 0 2.5px #121414; }
  :root.land #overlay .r6-bell .bn-nt-b > b { font-size: 15.5px; }
  :root.land #overlay .r6-bell .bn-nt-b > p { font-size: 13.5px; color: rgba(239, 241, 246, .55); }

  /* ---------- at the thumb: two buttons on the right, over the page's fade ---------- */
  :root.land #overlay .drawer:has(> .body.r6-bell) > .r6b-foot { position: relative; display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px calc(16px + var(--safe-b, 0px)); border: 0; background: transparent; }
  :root.land #overlay .drawer:has(> .body.r6-bell) > .r6b-foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 110px; pointer-events: none; background: linear-gradient(180deg, rgba(7, 8, 8, 0), #070808); }
  :root.land #overlay .r6b-fb { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 8px; 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; text-decoration: none; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root.land #overlay .r6b-fb > span { overflow: hidden; text-overflow: ellipsis; }
  :root.land #overlay .r6b-fb svg { flex: none; width: 18px; height: 18px; }
  :root.land #overlay .r6b-fb:active { transform: scale(.965); }
  :root.land #overlay .r6b-fb:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { :root.land #overlay :is(.r6b-pi, .r6b-fi) { animation: none; } :root.land #overlay .r6-bell .bn-main::after { transition: none; } }
}