/* Dorax Finance — the company's side in the owner's v6 look (v466, features/phone/r6-co.js). v470 (owner, 2026-11-01: "Por qué el lado empresa se
   ve así?" → "Si obvio", to redoing it as the household's): the summary is the household's "Resumen v4" (it carries the class r6v4, so
   css/look/look-r6-home4.css draws its green header, the green under the phone's clock, its flat page, its sections and cards, the button at the
   thumb), here only what is the company's: its own colours (white where the household has its lime, flat; the ink in light), the company in the
   header where the household has your photo, the currency under the figure, the month as a sum, the reserves' rings, the accounts and the fact.
   Only while the classes r6 and r6-co are on the page (the owner, a phone, the company's side, app/shell.js: applyTheme); the pages add r6-pg
   and take their frame from css/look/look-r6-pages.css. Every rule starts with :root.in-app.r6.r6-co, one step stronger than the household's
   own rules it changes (here and in the light sheet, where this file comes before theirs: tools/r6-light.py).
   Light (tools/r6-light.py, tools/r6-light-hand.css): the company's white becomes the ink (#0A0A0A, words on it white); the header stays green,
   its words the dark look's (its variables --cv-*). */
@media (max-width: 920px) {
  /* ---------- the company's own colours: its accent (a fill: rings, bars, the chosen currency, the main button) and the words on it ---------- */
  :root.in-app.r6.r6-co { --co-hi: #EFF1F6; --co-on: #101212; --co-rgb: 239, 241, 246; --sg-track: rgba(239, 241, 246, .06); --sg-line: rgba(239, 241, 246, .12); --sg-pill: #D9DCE1; --sg-word: rgba(239, 241, 246, .62); --sg-on: #101212; }
  :root.in-app.r6.r6-co #view { --bq-accent: #EFF1F6; --bq-mint: rgba(239, 241, 246, .1); --bq-mint-ink-2: #EFF1F6; }
  :root.in-app.r6.r6-co #view :is(a, button, label):focus-visible, :root.in-app.r6.r6-co .r6-dock .r6-db:focus-visible { outline: 2px solid #EFF1F6; outline-offset: 3px; }
  :root.in-app.r6.r6-co .navbar .bell .count { background: #EFF1F6; color: #101212; box-shadow: 0 0 0 2px #0E2B26; }
  @keyframes r6co-grow { from { transform: scaleX(0); } to { transform: none; } }
  @keyframes r6co-ring { from { stroke-dasharray: 0 213; } }
  @keyframes r6co-pop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes r6co-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  :root.in-app.r6.r6-co #view .r6co-grow { transform-origin: 0 50%; animation: r6co-grow .9s cubic-bezier(.2, .9, .25, 1) .15s both; }

  /* ---------- the summary's header: the household's green one (look-r6-home4.css), the company where its photo and greeting are, the same size;
     its colours the dark look's in both themes (the light sheet gives them back: tools/r6-light-hand.css) ---------- */
  :root.in-app.r6.r6-co:not(.r6-pg) .topbar { --cv-ink: #EFF1F6; --cv-2: rgba(239, 241, 246, .66); --cv-line: rgba(239, 241, 246, .14); --co-hi: #EFF1F6; --co-on: #101212; }
  :root.in-app.r6.r6-co .topbar .r6co-who { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; min-height: 44px; color: var(--cv-ink); text-align: left; cursor: pointer; }
  :root.in-app.r6.r6-co .r6co-mark { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--co-hi); color: var(--co-on); }
  :root.in-app.r6.r6-co .r6co-mark svg { width: 20px; height: 20px; stroke-width: 1.9; }
  :root.in-app.r6.r6-co .r6co-who-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  :root.in-app.r6.r6-co .r6co-who-t > small { color: var(--cv-2); font-size: 12.5px; line-height: 1.25; letter-spacing: .012em; }
  :root.in-app.r6.r6-co .r6co-who-t > span { min-width: 0; display: flex; align-items: center; gap: 7px; }
  :root.in-app.r6.r6-co .r6co-who-t b { overflow: hidden; color: var(--cv-ink); font-size: 18px; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }      /* the household's name in its header (screens/phone.css: .bw-t b) */
  :root.in-app.r6.r6-co .topbar .r6co-kind { box-sizing: border-box; flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--cv-line); border-radius: 999px; color: var(--cv-2); font-size: 11px; font-weight: 600; letter-spacing: .04em; }

  /* ---------- 1 · what the company has: the household's figure (30 px, 600), its cents dimmer; the currency under it, where the household's pill
     is: a small segmented control (its words 13 px, its buttons 44 px to tap) ---------- */
  :root.in-app.r6.r6-co #view .r6co-fig b > span { color: rgba(239, 241, 246, .42); font-size: .7em; letter-spacing: 0; }
  :root.in-app.r6.r6-co #view .r6co-fig b.neg { color: #FF8A80; }
  :root.in-app.r6.r6-co .r6co-seg { position: relative; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); padding: 3px; border-radius: 999px; background: var(--sg-track); box-shadow: inset 0 0 0 1px var(--sg-line); }
  :root.in-app.r6.r6-co .r6co-pill { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 2)); border-radius: 999px; background: var(--sg-pill); transform: translateX(calc(100% * var(--at, 0))); transition: transform .32s cubic-bezier(.2, .9, .3, 1.15); }
  :root.in-app.r6.r6-co .r6co-seg[data-none] .r6co-pill { opacity: 0; }
  :root.in-app.r6.r6-co .r6co-seg > button { all: unset; box-sizing: border-box; cursor: pointer; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 0; height: 44px; padding: 0 10px; border-radius: 999px; color: var(--sg-word); font-size: 14px; font-weight: 500; transition: color .25s ease; }
  :root.in-app.r6.r6-co .r6co-seg > button[aria-checked="true"] { color: var(--sg-on); }
  :root.in-app.r6.r6-co .r6co-seg:is(.hero, .top) > button::after { content: ""; position: absolute; inset: -7px 0; }      /* 44 px to tap where the control is drawn smaller */
  :root.in-app.r6.r6-co #view .r6co-seg.hero { align-self: flex-start; width: 116px; margin-top: 12px; }
  :root.in-app.r6.r6-co #view .r6co-seg.hero > button { height: 30px; font-size: 13px; }
  :root.in-app.r6.r6-co .navbar .r6co-seg.top { flex: none; width: 108px; }
  :root.in-app.r6.r6-co .navbar .r6co-seg.top > button { height: 36px; font-size: 13.5px; }
  :root.in-app.r6.r6-co .navbar .bar-tools { gap: 8px; }

  /* ---------- 2 · the month as a sum: a row each, its sign in a circle (in lime, as the household's money in; the costs coral, as its expense; the
     result in the company's white), what was transferred quiet; a hairline between, as the household's "Where it went" ---------- */
  :root.in-app.r6.r6-co #view .r6co-month { gap: 6px; margin-top: 30px; }
  :root.in-app.r6.r6-co #view .r6co-sums { display: flex; flex-direction: column; }
  :root.in-app.r6.r6-co #view .r6co-sum { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; min-height: 62px; color: var(--r4-ink); }
  :root.in-app.r6.r6-co #view .r6co-sum + .r6co-sum { border-top: 1px solid var(--r4-line); }
  :root.in-app.r6.r6-co #view .r6co-sum-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
  :root.in-app.r6.r6-co #view .r6co-sum-ic svg { width: 18px; height: 18px; stroke-width: 2.2; }
  :root.in-app.r6.r6-co #view .r6co-sum-ic.lime { background: rgba(159, 209, 130, .14); color: #9FD182; }
  :root.in-app.r6.r6-co #view .r6co-sum-ic.coral { background: rgba(255, 138, 128, .14); color: #FF8A80; }
  :root.in-app.r6.r6-co #view .r6co-sum-ic.co { background: rgba(239, 241, 246, .1); color: #EFF1F6; }
  :root.in-app.r6.r6-co #view .r6co-sum-ic.quiet { background: rgba(239, 241, 246, .06); color: rgba(239, 241, 246, .55); }
  :root.in-app.r6.r6-co #view .r6co-sum-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  :root.in-app.r6.r6-co #view .r6co-sum-t b { overflow: hidden; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.in-app.r6.r6-co #view .r6co-sum-t small { overflow: hidden; color: rgba(239, 241, 246, .55); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  :root.in-app.r6.r6-co #view .r6co-sum-v { flex: none; font-size: 15px; font-weight: 500; white-space: nowrap; }
  :root.in-app.r6.r6-co #view .r6co-sum.total .r6co-sum-v { font-size: 17px; }
  :root.in-app.r6.r6-co #view .r6co-sum.total.neg .r6co-sum-v { color: #FF8A80; }
  :root.in-app.r6.r6-co #view .r6co-sum.quiet :is(.r6co-sum-t b, .r6co-sum-v) { color: rgba(239, 241, 246, .62); font-weight: 400; }

  /* ---------- 4 · the reserves: how long what the company keeps lasts (the household's days of freedom, in the company's white), each reserve its
     ring of how far with its drawing in it ---------- */
  :root.in-app.r6.r6-co #view .r6co-run .r4-free-ic:not(.dx) { background: rgba(239, 241, 246, .1); color: #EFF1F6; }
  :root.in-app.r6.r6-co #view .r6co-run .r4-segs > span > i { background: var(--co-hi); }
  :root.in-app.r6.r6-co #view .r6co-rg { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: #EFF1F6; }
  :root.in-app.r6.r6-co #view .r6co-rg > svg:first-child { position: absolute; inset: 0; }
  :root.in-app.r6.r6-co #view .r6co-rg circle { fill: none; stroke: rgba(239, 241, 246, .1); stroke-width: 3.5; }
  :root.in-app.r6.r6-co #view .r6co-rg circle.on { stroke: var(--co-hi); stroke-linecap: round; animation: r6co-ring 1.1s cubic-bezier(.2, .9, .25, 1) .25s backwards; }
  :root.in-app.r6.r6-co #view .r6co-rg > svg:last-child { position: relative; width: 17px; height: 17px; stroke-width: 1.9; }
  :root.in-app.r6.r6-co #view .r6co-res .r4-plus { background: rgba(239, 241, 246, .1); color: #EFF1F6; }

  /* ---------- 5 · its accounts: a row each, its bank's mark, its currency, what it holds ---------- */
  :root.in-app.r6.r6-co #view .r6co-accts { gap: 6px; margin-top: 34px; }
  :root.in-app.r6.r6-co #view .r6co-acrs { display: flex; flex-direction: column; }
  :root.in-app.r6.r6-co #view .r6co-acr { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; min-height: 64px; color: var(--r4-ink); }
  :root.in-app.r6.r6-co #view .r6co-acr + .r6co-acr { border-top: 1px solid var(--r4-line); }
  :root.in-app.r6.r6-co #view .r6co-acr .r4-ico { width: 40px; height: 40px; }
  :root.in-app.r6.r6-co #view .r6co-acr .r4-ico .inst { display: grid; place-items: center; width: 100%; height: 100%; margin: 0; border-radius: 50%; font-size: 12px; }
  :root.in-app.r6.r6-co #view .r6co-acr .r4-ico .inst img { width: 100%; height: 100%; border-radius: 50%; }
  :root.in-app.r6.r6-co #view :is(.r6co-cur, .r6cv-cur) { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--co-hi); color: var(--co-on); font-size: 12.5px; font-weight: 600; }
  :root.in-app.r6.r6-co #view .r6co-acr-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  :root.in-app.r6.r6-co #view .r6co-acr-t b { overflow: hidden; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.in-app.r6.r6-co #view .r6co-acr-t small { color: rgba(239, 241, 246, .55); font-size: 13px; }
  :root.in-app.r6.r6-co #view .r6co-acr > b { flex: none; font-size: 15px; font-weight: 500; white-space: nowrap; }
  :root.in-app.r6.r6-co #view .r6co-acr > b.neg { color: #FF8A80; }

  /* ---------- 6 · the day's fact: one card, its bulb, its sentence, the way to what it is about ---------- */
  :root.in-app.r6.r6-co #view .r6co-fact { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: row; align-items: center; gap: 14px; min-height: 64px; margin-top: 30px; padding: 14px 16px 14px 14px; border: 1px solid transparent; border-radius: 24px;
    background: var(--r6-face), linear-gradient(var(--r4-face), var(--r4-face)) padding-box, var(--r6-rim); color: var(--r4-ink); }      /* the household's card (.r4-soft), again after the reset */
  :root.in-app.r6.r6-co #view .r6co-fact-i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(239, 241, 246, .1); color: #EFF1F6; }
  :root.in-app.r6.r6-co #view .r6co-fact-i svg { width: 19px; height: 19px; }
  :root.in-app.r6.r6-co #view .r6co-fact-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  :root.in-app.r6.r6-co #view .r6co-fact-t small { color: rgba(239, 241, 246, .55); font-size: 13px; }
  :root.in-app.r6.r6-co #view .r6co-fact-t > b { color: #EFF1F6; font-size: 14.5px; font-weight: 400; line-height: 1.4; }
  :root.in-app.r6.r6-co #view .r6co-fact-t .ins-m { color: #EFF1F6; font-weight: 600; }

  /* ---------- the notices about the data, and a currency with nothing yet ---------- */
  :root.in-app.r6.r6-co #view > .r6co-notes { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
  :root.in-app.r6.r6-co #view > .r6co-notes > .card { border: 1px solid transparent; border-radius: 24px; background: var(--r6-face), linear-gradient(#121414, #121414) padding-box, var(--r6-rim); box-shadow: none; }

  /* ---------- the pages: nothing in this currency yet (the converter) ---------- */
  :root.in-app.r6.r6-co #view .r6co-none { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 30px; animation: r6-rise .36s cubic-bezier(.2, .9, .25, 1) both; }
  :root.in-app.r6.r6-co #view .r6co-say { display: flex; flex-direction: column; gap: 4px; }
  :root.in-app.r6.r6-co #view .r6co-say b { color: #EFF1F6; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
  :root.in-app.r6.r6-co #view .r6co-say small, :root.in-app.r6.r6-co #view .r6co-quiet { color: rgba(239, 241, 246, .62); font-size: 14px; line-height: 1.45; }
  /* a line of how far, in the company's white (the converter reading) */
  :root.in-app.r6.r6-co #view .r6co-bar { display: block; height: 8px; margin-top: 12px; overflow: hidden; border-radius: 4px; background: rgba(239, 241, 246, .1); }
  :root.in-app.r6.r6-co #view .r6co-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--co-hi); transition: width .18s linear; }

  /* ---------- at the thumb: the company's main button white, flat (the household's is lime); said and quiet when there is nothing to do ---------- */
  :root.in-app.r6.r6-co :is(#view, #r6-foot) .r6-dock .r6-db.go { background: var(--co-hi); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); color: var(--co-on); }
  :root.in-app.r6.r6-co :is(#view, #r6-foot) .r6-dock .r6-db.go.off { cursor: default; background: rgba(26, 29, 29, .92); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .12), 0 8px 22px rgba(0, 0, 0, .45); color: rgba(239, 241, 246, .55); }
  :root.in-app.r6.r6-co :is(#view, #r6-foot) .r6-dock .r6-db.go.off:active { transform: none; }
  :root.in-app.r6.r6-co .r6-dock label.r6-db { -webkit-user-select: none; user-select: none; }

  @media (prefers-reduced-motion: reduce) {
    :root.in-app.r6.r6-co #view :is(.r6co-grow, .r6co-rg circle.on, .r6co-none) { animation: none; }
    :root.in-app.r6.r6-co :is(.r6co-pill, .r6co-bar > i) { transition: none; }
  }
}