/* Dorax Finance — an account's panel, opened from the summary "Bosque" (owner, 2026-10-12: "y actualiza el menú de cuenta al estilo nuevo", after
   asking that a tap on an account's logo open it; then the same morning: "quita el botón editar cuenta, deja los otros dos y sepáralos en dos botones;
   la parte de la tarjeta y todo lo de abajo de background verde y transacciones se queda claro, como en el tab de transacciones; me gustó esa
   combinación, úsala más seguido"). The same panel as on Accounts (features/accounts/wallet.js: cardViewDrawer), in the summary's look while it is
   open over it (a phone, the light theme, the household's side: :root.land, app/shell.js), laid out as Transactions:
     - the top of the panel is forest: its name and the round close button light on it, the card, its details (its kind, the main account switch, the
       limit used, how many transactions) in a soft light-on-dark box, and two pills: "+ Expense" lime, "+ Income" light (editing the account is on
       Accounts & savings);
     - its latest transactions in the grey sheet with a handle that rises over the forest, Debit | Credit as the summary's switch, the days in one
       white card.
   Colours as the summary: deep green #112622, lime #B6DD62, grey #E9EDEC, light circles #EDF1F0, hairlines #DDE3E1; on the forest the words white,
   #B5C2BE when quieter. */
/* (v199: on a phone and on a computer; look-land-desk.css fits them to a computer) */
  /* the forest part: the theme's words and lines light on dark */
  :root.land #overlay .drawer:has(.cv) {
    --ink-strong: #FFFFFF; --ink: var(--lk-on); --ink-2: var(--lk-soft); --ink-3: var(--lk-soft-2); --line: rgba(255, 255, 255, .14); --line-strong: rgba(255, 255, 255, .24);
    --surface: rgba(255, 255, 255, .06); --surface-2: rgba(255, 255, 255, .08); --track: rgba(255, 255, 255, .14); --hover-line: rgba(255, 255, 255, .45);
    --switch-on: var(--lk-lime); --switch-off: rgba(255, 255, 255, .16); --field: rgba(255, 255, 255, .22); --knob: #FFFFFF;
    --brand: var(--lk-lime); --brand-deep: var(--lk-lime); --focus: var(--lk-lime); background: var(--lk-deep); color: #FFFFFF;
  }
  :root.land #overlay .drawer:has(.cv) > header h2 { color: #FFFFFF; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
  :root.land #overlay .drawer:has(.cv) > header [data-a="close"] { width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #FFFFFF; }
  :root.land #overlay .drawer:has(.cv) > header [data-a="close"]:focus-visible { outline: 2px solid var(--lk-lime); outline-offset: 2px; }

  /* the details: one soft box on the forest */
  :root.land #overlay .cv .cc-meta { padding: 14px 16px; border-radius: 24px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #FFFFFF; }
  :root.land #overlay .cv .cc-meta:not(:has(*)) { display: none; }
  :root.land #overlay .cv .cv-main { padding-top: 0; border-top: 0; }
  :root.land #overlay .cv .cc-meta .note { color: var(--lk-soft); }
  :root.land #overlay .cv .cc-meta .meter { background: rgba(255, 255, 255, .14); }
  :root.land #overlay .cv .cc-meta .meter i { background: var(--lk-lime); }
  :root.land #overlay .cv .cc-meta .meter.warn i { background: #FFB4A9; }

  /* what can be done: two pills side by side, the expense lime, the income light on the forest */
  :root.land #overlay .cv .bq-cv-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 0; }
  :root.land #overlay .cv .bq-cv-acts .btn:not(.primary):not(.danger):not(.ghost):not(.linkbtn), :root.land #overlay .cv .bq-cv-acts .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #FFFFFF; font-size: 15px; font-weight: 600; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 120ms ease-out, background 160ms ease-out; }
  :root.land #overlay .cv .bq-cv-acts .btn.primary { background: var(--lk-lime); box-shadow: none; color: var(--lk-deep); }
  :root.land #overlay .cv .bq-cv-acts .btn svg { width: 18px; height: 18px; stroke-width: 2.4; }
  :root.land #overlay .cv .bq-cv-acts .btn:active { transform: scale(.97); }
  :root.land #overlay .cv .bq-cv-acts .btn:focus-visible { outline: 2px solid var(--lk-lime); outline-offset: 2px; }
  @media (hover: hover) and (pointer: fine) { :root.land #overlay .cv .bq-cv-acts .btn:not(.primary):not(.danger):not(.ghost):not(.linkbtn):hover { background: rgba(255, 255, 255, .16); } :root.land #overlay .cv .bq-cv-acts .btn.primary:hover { background: var(--lk-lime-hi); } }

  /* its latest transactions: the grey sheet that rises over the forest, as on Transactions; the days in one white card */
  :root.land #overlay .cv .cv-ops {
    --ink-strong: var(--bq-ink); --ink: var(--bq-ink); --ink-2: var(--bq-ink-2); --ink-3: var(--bq-ink-3); --line: var(--bq-line); --line-strong: var(--bq-line-2); --surface: var(--bq-card); --surface-2: var(--bq-card-2); --hover-line: var(--lk-soft-2);
    --brand: var(--bq-accent); --brand-deep: var(--bq-accent); --focus: var(--bq-accent);
    margin-top: 6px; padding-top: 20px; border-radius: 0; background: var(--bq-page); box-shadow: none; color: var(--bq-ink);
  }
  :root.land #overlay .cv .op-grab { display: none; }      /* v303 (owner, 2026-10-27: "quita esos bordes redondeados y el icono de barrita"): square at the top, no handle */
  :root.land #overlay .cv .op-head h3 { color: var(--bq-ink); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
  :root.land #overlay .cv .op-head .linkbtn { color: var(--bq-accent); font-weight: 600; }
  :root.land #overlay .cv .op-fn { margin-bottom: 12px; background: var(--bq-card); border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--bq-line); }
  :root.land #overlay .cv .op-fn button { border-radius: 999px; color: var(--bq-ink-2); font-weight: 500; }
  :root.land #overlay .cv .op-fn button[aria-pressed="true"], :root.land #overlay .cv .op-fn button[aria-pressed="true"]:hover { background: var(--bq-pick-bg); color: var(--bq-pick-ink); font-weight: 600; box-shadow: none; }
  :root.land #overlay .cv .op-card { display: flex; flex-direction: column; padding: 4px 14px; border-radius: 24px; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); }
  :root.land #overlay .cv .op-day { margin: 0; padding: 12px 0 4px; border-top: 1px solid var(--bq-line); color: var(--bq-ink-3); letter-spacing: .03em; }
  :root.land #overlay .cv .op-day:first-child { border-top: 0; }
  :root.land #overlay .cv .op-row { min-height: 64px; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
  :root.land #overlay .cv .op-ico { width: 46px; height: 46px; background: var(--bq-circle); }
  :root.land #overlay .cv .op-ico:not(.cat) { color: var(--bq-accent); }
  :root.land #overlay .cv .op-ico:not(.cat) svg { color: var(--bq-accent); }
  :root.land #overlay .cv .op-amt { color: var(--bq-ink); font-weight: 600; }
  :root.land #overlay .cv .op-amt.in { color: var(--bq-in); }      /* money in, green as before */
  :root.land #overlay .cv .op-empty { padding: 18px; border-radius: 24px; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); color: var(--bq-ink-2); }
  :root.land #overlay .cv .op-empty .btn.sm { border-color: var(--bq-line); border-radius: 999px; background: var(--bq-card); color: var(--bq-accent); font-weight: 600; }

  /* the card's invoice and its button (v256), a soft box on the forest as the details: the button lime while the invoice is near, light before */
  :root.land #overlay .cv .cv-inv { border-radius: 24px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #FFFFFF; }
  :root.land #overlay .cv .cv-inv small { color: var(--lk-soft); } :root.land #overlay .cv .cv-inv small:first-child { color: #FFFFFF; } :root.land #overlay .cv .cv-inv b { color: #FFFFFF; }
  :root.land #overlay .cv .cv-inv.late small:last-child { color: #FFB4A9; }
  :root.land #overlay .cv .cv-inv.paid b svg { color: var(--lk-lime); }
  :root.land #overlay .cv .cv-inv .btn { min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #FFFFFF; font-weight: 600; box-shadow: none; }
  :root.land #overlay .cv .cv-inv .btn.primary { background: var(--lk-lime); color: var(--lk-deep); }
  :root.land #overlay .cv .cv-inv .btn:focus-visible { outline: 2px solid var(--lk-lime); outline-offset: 2px; }
  @media (hover: hover) and (pointer: fine) { :root.land #overlay .cv .cv-inv .btn:not(.primary):hover { background: rgba(255, 255, 255, .16); } }

  /* the installments still to come of a card's credit, on the forest */
  :root.land #overlay .cv .inst-ahead { border: 0; border-radius: 24px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }