/* Dorax Finance — a phone's summary in four tabs (v289, app/shell.js: phoneTabs; the canvas "Resumen con pestañas (celular)", approved by the owner on
   2026-10-25): Summary · Calendar · Journey · What's new, under the greeting, in the top row that stays on screen. The tab in use in white with a lime
   line under it, the others in the forest's grey-green; a narrow phone slides them, the last fading out. Also the summary's parts that moved with them
   (features/phone/bosque.js): "You can spend" whole in the lime tab hanging from the block, and the month's row before what there is to pay. */
@media (max-width: 920px) {
  .navbar > .ph-tabs { grid-column: 1 / -1; grid-row: 2; min-width: 0; margin: 6px -14px -10px -16px; }
  /* v340 (owner, 2026-10-28: "haz el menú superior que tiene scroll horizontal más pequeño, tipo la fuente y los íconos"): words 13.5 px, icons
     15 px, a little less room between tabs; each tab still 44 px tall to tap */
  .ph-tabs-row { display: flex; gap: 18px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
  .ph-tabs-row::-webkit-scrollbar { display: none; }
  .ph-tabs-row a { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 2px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
  .ph-tabs-row .beta-tag { height: 18px; margin-left: 6px; padding: 0 6px; }      /* its words stay 12 px: no text under 12 px */
  .ph-tabs-row a[aria-current="page"] { color: var(--ink-strong); font-weight: 600; }
  .ph-tabs-row a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); }
  .ph-tabs-row a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 8px; }
  .ph-tabs-row .wn-dot { position: static; width: 7px; height: 7px; margin: 0; }
  .ph-tabs-row a > svg { flex: none; width: 15px; height: 15px; }      /* v291: each tab with its screen's icon (v340: 15 px, was 18) */
  :root.land .ph-tabs-row a { color: var(--lk-soft); }
  :root.land .ph-tabs-row a[aria-current="page"] { color: #FFFFFF; }
  :root.land .ph-tabs-row a[aria-current="page"]::after { background: var(--lk-lime); }
}
:root.tsw, :root.tsw body { overflow-x: clip; }      /* v293: while a swipe holds the page off its place (app/tab-swipe.js), the screen is not scrolled sideways with it */
@media (max-width: 920px) { .ph-tabs-row { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); } }      /* the edge fades: what goes on past it is seen to go on (v290: with "Beta", four tabs slide on most phones) */

/* "You can spend", whole in the lime tab: two lines, its figure 18 px */
@media (max-width: 920px) {
  :root.land #view .bq-free-ph .bq-free-foot { min-height: 0; padding: 8px 8px 10px 16px; border-radius: 0 0 22px 22px; }
  :root.land .bq-free-ph .bq-say { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  :root.land .bq-free-ph .bq-say::first-letter { text-transform: none; }
  .bq-free-ph .bq-free-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .bq-free-ph .bq-free-l { font-size: 13px; font-weight: 600; }
  :root.land #view .bq-free-ph .fu-big { color: var(--lk-deep); font-size: 13px; font-weight: 500; line-height: 1.2; }
  :root.land #view .bq-free-ph .fu-n { color: var(--lk-deep); font-size: 18px; letter-spacing: -.01em; line-height: 1.2; }
  :root.land #view .bq-free-ph .fu-n .cents { color: inherit; }
  .bq-free-ph .bq-free-s { font-size: 12.5px; line-height: 1.35; font-weight: 500; opacity: .86; }
  .bq-free-ph .bq-free-s::first-letter { text-transform: uppercase; }
}

/* the month, before what there is to pay: its name and its two arrows, a line above it */
.bq-mrow { display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--bq-line, var(--line)); }
.bq-mrow > b { flex: 1 1 auto; min-width: 0; color: var(--bq-ink, var(--ink-strong)); font-size: 15px; font-weight: 600; }
.bq-mbtn { all: unset; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--bq-line, var(--line)); color: var(--bq-ink, var(--ink-strong)); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bq-mbtn svg { width: 16px; height: 16px; }
.bq-mbtn:disabled { opacity: .35; cursor: default; }
.bq-mbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bq-mrow .btn.sm { flex: none; }