/* Dorax Finance — every panel and sheet opened from the summary "Bosque", in its look (owner, 2026-10-12: "actualiza todas las pantallas de menú a las
   que se accede a partir de Resumen"), and the new transaction with its keypad (same message: "haz estos dos updates… quiero ver cómo se ven en vivo",
   the canvas's "Nuevo gasto · Bosque"; features/phone/bosque-tx.js).
   While the summary is on screen (a phone, the light theme, the household: :root.land, app/shell.js) the panels take its colours through the theme's
   own words (the deep green #112622 for what is chosen and for links, the lime #B6DD62 for the main buttons with deep green words, the cool grey
   #E9EDEC for the sheet, white for its fields and boxes, #DDE3E1 for their hairlines), and its shapes: a round close button, headings as the
   summary's, fields and buttons as white pills, a switch's choice deep green with lime words. The account's panel has its own extras
   (look-land-account.css). The other pages keep their panels as they were. */
/* (v199: on a phone and on a computer; look-land-desk.css fits them to a computer) */
  :root.land #overlay {
    --lift: var(--bq-page); --surface: var(--bq-card); --surface-2: var(--bq-card-2); --surface-3: var(--bq-card-3); --well: var(--bq-card); --pit: var(--bq-card-2); --badge: var(--bq-card-3);
    --line: var(--bq-line); --line-strong: var(--bq-line-2); --field: var(--bq-line-2); --glass-line: var(--bq-line); --hover-line: var(--lk-soft-2);
    --brand: var(--bq-accent); --brand-deep: var(--bq-accent); --link: var(--bq-accent); --focus: var(--bq-accent); --ring: var(--bq-accent); --on-brand: var(--lk-lime); --col: var(--bq-accent);
    --primary: var(--lk-pop); --primary-hover: var(--lk-pop-hi); --primary-ink: var(--lk-pop-ink); --cta: var(--lk-pop); --cta-hover: var(--lk-pop-hi); --cta-ink: var(--lk-pop-ink);
    --select: var(--bq-mint); --select-ink: var(--bq-accent); --soft-hover: var(--bq-mint); --good-bg: var(--bq-mint); --switch-on: var(--bq-accent); --spark-ink: var(--lk-lime);
    --btn: var(--bq-card); --btn-hover: var(--bq-card); --btn-line: var(--bq-line); --side-tint: var(--bq-circle); --side-line: var(--bq-circle);
  }
  /* the dark version: the accent is the lime, so what sits on it is the deep green (owner, 2026-10-12: "la racha, el círculo no se ve el check mark":
     the day marked in the Journey, and the count on the filters' button, were lime on lime) */
  :root.land-dark #overlay { --on-brand: var(--lk-deep); }
  :root.land #overlay .drawer, :root.land #overlay .sheet { border: 0; background: var(--bq-page); }
  :root.land #overlay .drawer > header { border-bottom: 0; padding-bottom: 8px; }
  :root.land #overlay .drawer > header h2, :root.land #overlay .sheet > h2 { color: var(--bq-ink); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
  :root.land #overlay .drawer > header [data-a="close"] { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); color: var(--bq-ink); }
  :root.land #overlay .drawer > footer { border-top: 0; }
  /* buttons: the main one lime with deep green words, the others white pills with a hairline */
  :root.land #overlay .btn { border-radius: 999px; }
  :root.land #overlay .btn:not(.primary):not(.danger):not(.ghost):not(.linkbtn) { background: var(--bq-card); border-color: var(--bq-line); color: var(--bq-ink); }
  :root.land #overlay .btn.primary { background: var(--lk-pop); border-color: var(--lk-pop); color: var(--lk-pop-ink); font-weight: 600; }
  /* fields: white, a hairline, round */
  :root.land #overlay input[type=text], :root.land #overlay input[type=search], :root.land #overlay input[type=number], :root.land #overlay input[type=date], :root.land #overlay select, :root.land #overlay textarea { border-color: var(--bq-line); border-radius: 16px; background-color: var(--bq-card); }
  :root.land #overlay input:focus, :root.land #overlay select:focus, :root.land #overlay textarea:focus { border-color: var(--bq-accent); box-shadow: 0 0 0 3px rgba(var(--lk-deep-rgb), .12); }
  /* switches of two or three choices: a white track, the choice deep green with lime words */
  :root.land #overlay .seg { background: var(--bq-card); border-color: var(--bq-line); border-radius: 999px; }
  :root.land #overlay .seg button { border-radius: 999px; color: var(--bq-ink-2); }
  :root.land #overlay .seg button[aria-pressed="true"], :root.land #overlay .seg button[aria-pressed="true"]:hover { background: var(--bq-pick-bg); color: var(--bq-pick-ink); font-weight: 600; box-shadow: none; }
  /* boxes inside a panel: white with a hairline */
  :root.land #overlay .card { border-color: var(--bq-line); background: var(--bq-card); }

  /* ---------- the new transaction with its keypad ---------- */
  :root.land #overlay .bq-tx { gap: 14px; padding-top: 6px; }
  :root.land #overlay .bq-tx .seg.tx-kind { padding: 4px; }
  :root.land #overlay .bq-tx .tx-kind button { min-height: 44px; font-size: 14px; }
  /* the amount: a white card, the currency in a deep green circle */
  :root.land #overlay .bq-tx .tx-amount { grid-template-columns: 48px minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 16px 18px; border: 0; border-radius: 28px; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); }
  :root.land #overlay .bq-tx .tx-amount label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :root.land #overlay .bq-tx .tx-sym { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--lk-deep); color: var(--lk-lime); font-size: 15px; font-weight: 700; }
  :root.land #overlay .bq-tx .tx-amount input[type=text] { min-height: 52px; border: 0; background: none; box-shadow: none; color: var(--bq-ink); font-size: 40px; font-weight: 600; letter-spacing: -.04em; caret-color: var(--lk-lime); }
  :root.land #overlay .bq-tx .tx-amount:has(input#d-amount:focus), :root.land #overlay .bq-tx .tx-amount:has(.bq-amt:focus-visible) { box-shadow: inset 0 0 0 2px var(--bq-accent); }
  /* with the keypad, the amount is a button that shows what the keys typed (v202, bosque-tx.js: bqAmt), with a lime line after it while the keypad is up */
  :root.land #overlay .bq-tx .bq-amt { all: unset; box-sizing: border-box; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; display: flex; align-items: center; min-width: 0; min-height: 52px; overflow: hidden; color: var(--bq-ink); font-size: 40px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; white-space: nowrap; }
  :root.land #overlay .bq-tx .bq-amt .bq-amt-ph { color: var(--bq-ink-3); }
  :root.land #overlay .bq-tx .tx-amount.typing .bq-amt::after { content: ""; flex: none; width: 3px; height: 38px; margin-left: 3px; border-radius: 2px; background: var(--lk-lime); }
  :root.land #overlay .bq-tx .tx-amount:has(.bq-amt[aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--bq-crit); }
  /* on its right, the round button that puts the keypad away and brings it back (v197) */
  :root.land #overlay .bq-tx .tx-amount:has(.bq-pad-btn) { grid-template-columns: 48px minmax(0, 1fr) 44px; }
  :root.land #overlay .bq-pad-btn { all: unset; box-sizing: border-box; touch-action: manipulation; -webkit-user-select: none; user-select: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bq-circle); color: var(--bq-ink); transition: transform 120ms var(--ease); }
  :root.land #overlay .bq-pad-btn svg { width: 20px; height: 20px; stroke-width: 2.2; }
  :root.land #overlay .bq-pad-btn:active { transform: scale(.92); }
  :root.land #overlay .bq-pad-btn:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; }
  @media (hover: hover) and (pointer: fine) { :root.land #overlay .bq-pad-btn:hover { background: var(--bq-circle-2); } }
  /* the fields' names quiet, the categories as white pills, the chosen one deep green */
  :root.land #overlay .bq-tx .field > label, :root.land #overlay .bq-tx .tx-cats > span, :root.land #overlay .bq-tx .tx-pay > span { color: var(--bq-ink-2); font-size: 13px; font-weight: 600; }
  :root.land #overlay .bq-tx .tx-pick { min-height: 44px; padding: 0 15px 0 10px; border-color: var(--bq-line); border-radius: 999px; background: var(--bq-card); color: var(--bq-ink); font-size: 14px; }
  :root.land #overlay .bq-tx .tx-pick[aria-pressed="true"] { border-color: var(--bq-pick-bg); background: var(--bq-pick-bg); color: var(--bq-pick-ink-2); font-weight: 600; }
  :root.land #overlay .bq-tx .tx-pick.more { border-style: dashed; border-color: var(--bq-line-2); color: var(--bq-ink-2); }
  :root.land #overlay .bq-tx #d-merchant { min-height: 52px; padding-inline: 18px; border-radius: 999px; }
  :root.land #overlay .bq-tx .tx-more { color: var(--bq-accent); font-weight: 600; }
  /* its foot: the keypad, always in sight, and the bar that saves */
  :root.land #overlay .bq-tx-foot { flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 10px 16px calc(14px + var(--safe-b)); background: var(--bq-page); }
  /* the keys in a box that folds to nothing (v197): its one row goes from all of their height to none, and what is in it is clipped; the 10 px
     down to "Save" are inside it, so that folded nothing is left above "Save"; a key's focus ring is drawn inside the key */
  :root.land #overlay .bq-pad-wrap { display: grid; grid-template-rows: 1fr; }
  :root.land #overlay .bq-pad-in { min-height: 0; overflow: hidden; }
  :root.land #overlay .bq-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-bottom: 10px; }
  :root.land #overlay .bq-tx-foot.off .bq-pad-wrap { grid-template-rows: 0fr; opacity: 0; visibility: hidden; }
  :root.land #overlay .bq-tx-foot.off.moving .bq-pad-wrap { animation: bq-pad-out 260ms var(--ease-ios) var(--pad-at, 0ms) both; }
  :root.land #overlay .bq-tx-foot.moving:not(.off) .bq-pad-wrap { animation: bq-pad-in 320ms var(--ease-ios) var(--pad-at, 0ms) both; }
  :root.land #overlay .bq-key { all: unset; box-sizing: border-box; touch-action: manipulation; -webkit-user-select: none; user-select: none; cursor: pointer; display: grid; place-items: center; min-height: 50px; border-radius: 18px; background: var(--bq-card); color: var(--bq-ink); font-size: 24px; font-weight: 500; -webkit-tap-highlight-color: transparent; transition: transform 120ms ease-out, background 120ms ease-out; }
  :root.land #overlay .bq-key.soft { background: transparent; }
  :root.land #overlay .bq-key svg { width: 24px; height: 24px; }
  :root.land #overlay .bq-key:active { transform: scale(.94); background: var(--bq-circle-2); }
  :root.land #overlay .bq-key:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: -2px; }
  @media (hover: hover) and (pointer: fine) { :root.land #overlay .bq-key:hover { background: var(--bq-card-2); } :root.land #overlay .bq-key.soft:hover { background: var(--bq-circle-2); } }
  /* the button that saves (v222, owner, 2026-10-14: "parece un botón para deslizar"): a plain button in the main button's colours, no round knob at its
     left; its words say what it records (bosque-tx.js, txSaveWord) and the amount follows them once something is typed; the check shows when it is saved */
  :root.land #overlay .btn.primary.bq-save { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 8px; width: 100%; min-height: 56px; padding: 10px 24px; border: 0; border-radius: 999px; background: var(--lk-pop); color: var(--lk-pop-ink); font-size: 17px; font-weight: 600; text-align: center; }
  :root.land #overlay .btn.primary.bq-save:hover { background: var(--lk-pop-hi); }
  :root.land #overlay .btn.primary.bq-save:active { transform: scale(.98); }
  :root.land #overlay .bq-save-ico { display: none; }
  :root.land #overlay .bq-save-ico svg { width: 20px; height: 20px; stroke-width: 2.8; }
  :root.land #overlay .bq-save-t { flex: none; }
  :root.land #overlay .bq-save-amt { flex: none; color: inherit; font-size: 17px; }
  :root.land #overlay .bq-save-amt:empty { display: none; }
  :root.land #overlay .bq-save-amt::before { content: "·"; margin-right: 8px; opacity: .6; }
  /* while a word is typed (what it was, a note), the phone's own keyboard is up: the keypad steps aside and the panel is only as tall as the form and
     its "Save", so an iPhone does not have to slide a tall sheet under its keyboard (owner, 2026-10-12: "el teclado numérico no funciona bien, tocas
     un lugar, abre otro") */
  :root.land #overlay .drawer:has(.bq-tx-foot):has(:is(input:not([readonly]), textarea, select):focus) .bq-pad { display: none; }
  /* every key, switch and pill of these screens keeps the browser's quick tap: two quick taps on a key (0, 0) type two zeros and never zoom the page,
     and a long press selects no digit (their "all: unset" had taken it away) */
  /* a short phone: the keys a little lower, so the form keeps room */
  @media (max-height: 740px) { :root.land #overlay .bq-key { min-height: 44px; font-size: 21px; } :root.land #overlay .btn.primary.bq-save { min-height: 52px; } }

/* the keypad folding away and coming back (features/phone/bosque-tx.js: bqPadSet, v197) */
@keyframes bq-pad-out { from { grid-template-rows: 1fr; opacity: 1; visibility: visible; } to { grid-template-rows: 0fr; opacity: 0; visibility: hidden; } }
@keyframes bq-pad-in { from { grid-template-rows: 0fr; opacity: 0; visibility: hidden; } to { grid-template-rows: 1fr; opacity: 1; visibility: visible; } }