/* Dorax Finance — What's new (v266, features/ideas/whats-new.js) and the suggestions (v263, features/ideas/ideas.js): the way in (the side menu,
   More) with its dot, the feed by month, the board in its three groups, the form, and each suggestion with its votes and Albert's answer. */
.nav .nav-ideas { margin-top: 2px; }
.ideas-lead { margin: 0; color: var(--ink-strong); font-size: 15px; line-height: 1.5; }
.idea-new { align-self: flex-start; }
.idea-form { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-card); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.idea-form .field { margin: 0; }
.idea-form textarea { width: 100%; resize: vertical; min-height: 96px; }
.idea-form .note { margin: 0; }
.ideas-tabs .seg { width: 100%; }
.ideas-tabs .seg button { flex: 1 1 0; }
.ideas-list { display: flex; flex-direction: column; gap: 10px; }
.idea { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: var(--r-card); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.idea .grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.idea h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink-strong); overflow-wrap: anywhere; }
.idea-body { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.idea-vote { all: unset; box-sizing: border-box; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 52px; min-height: 56px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); cursor: pointer; transition: background var(--t1) ease-out, color var(--t1) ease-out, box-shadow var(--t1) ease-out; }
.idea-vote svg { width: 18px; height: 18px; }
.of-idea .idea-vote { width: auto; min-width: 64px; padding: 6px 10px; }      /* v297: Open Finance's vote says Vote or You voted, its count kept for the panel */
.of-idea .idea-vote b { font-size: 12px; white-space: nowrap; }
.idea-vote b { font-size: 15px; font-weight: 600; color: var(--ink-strong); }
.idea-vote:hover:not(.still) { box-shadow: inset 0 0 0 1px var(--ink-3); }
.idea-vote:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.idea-vote[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink, #FFFFFF); box-shadow: none; }
.idea-vote[aria-pressed="true"] b { color: inherit; }
.idea-vote.still { cursor: default; }
.idea-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--ink-3); font-size: 13px; }
.idea-st.open, .idea-st.planned { background: var(--select); color: var(--brand); }
.idea-st.done { background: var(--good-tint, var(--select)); color: var(--good, var(--brand)); }
.idea-reply { margin-top: 2px; padding: 10px 12px; border-left: 3px solid var(--brand); border-radius: 0 10px 10px 0; background: var(--surface); }
.idea-reply b { font-size: 13px; font-weight: 600; color: var(--ink-strong); }
.idea-reply p { margin: 4px 0 0; color: var(--ink); font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.idea-back { align-self: flex-start; font-size: 13px; }
@media (max-width: 920px) {
  .idea-vote { width: 48px; min-height: 52px; }
  .ideas-tabs .seg button { padding-inline: 6px; font-size: 13px; }
}
/* the narrowest phones: the three parts keep their names and counts */
@media (max-width: 380px) {
  .ideas-tabs .seg button { min-width: 0; padding-inline: 4px; font-size: 12.5px; }
}

/* ---------- v266: What's new ---------- */
/* the way in: a dot while something is new, at the end of the row; on a closed side menu, on the icon's corner */
.wn-dot { flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--brand); }
.mr-ideas .wn-dot { margin-left: -3px; }
.app.rail-shut .nav .nav-ideas .wn-dot { position: absolute; top: 7px; right: 9px; margin: 0; }
.wn-month { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.wn-month:first-child { margin-top: 0; }
.wn-month::first-letter { text-transform: uppercase; }
.idea-group { display: flex; flex-direction: column; gap: 10px; }
.idea-none { margin: 0; }
.idea-write { align-self: flex-start; }
a.mr-row.mr-ideas { text-decoration: none; }

/* v274 (the canvas "Ayuda y Novedades", version A, approved 2026-10-25): its top on the forest (a .bq-hero: look-land-pages.css gives it its
   colours) with the tabs; under it the feed beside the way to suggest a change and the board (the side under the feed on a phone). */
.news-hero { gap: 16px; }
.news-hero-t { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.news-hero h2 { margin: 0; color: #FFFFFF; font-size: 27px; line-height: 1.12; font-weight: 600; letter-spacing: -0.015em; }
.news-lead { margin: -6px 0 0; color: var(--lk-soft, #B5C2BE); font-size: 15px; line-height: 1.5; }
.news-hero .ideas-tabs .seg { width: 100%; }
.news-hero .ideas-tabs .seg button { flex: 1 1 0; }
.news-hero .news-fig { flex: none; }
.news-hero .news-fig img { width: 100%; height: auto; }
.news-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; margin-top: 8px; }
.news-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.news-side { flex: 1 1 300px; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }

/* the kinds to filter by */
.wn-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.wn-k { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.wn-k span { color: var(--ink-3); }
.wn-k[aria-pressed="true"] { background: var(--bq-pick-bg, var(--brand)); box-shadow: none; color: var(--bq-pick-ink-2, #FFFFFF); font-weight: 600; }
.wn-k[aria-pressed="true"] span { color: inherit; opacity: .8; }
.wn-k:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* a day: its date beside, its items as the rows of one card */
.wn-day { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.wn-date { flex: 0 0 88px; display: flex; flex-direction: column; gap: 2px; margin: 0; padding-top: 14px; }
.wn-dn { color: var(--ink-strong); font-size: 34px; line-height: 1; font-weight: 600; }
.wn-mn { color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.wn-dl { display: none; }
.wn-wd { color: var(--ink-3); font-size: 12.5px; font-weight: 400; }
.wn-mn::first-letter, .wn-wd::first-letter { text-transform: none; }
.wn-daycard { flex: 999 1 480px; min-width: 0; margin: 0; padding: 0; }
.wn-item { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border-top: 1px solid var(--line); }
.wn-item.first { border-top: 0; }
.wn-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.wn-item h3 { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--ink-strong); overflow-wrap: anywhere; }
.wn-tag { padding: 2px 9px; font-size: 12px; font-weight: 500; }
.wn-tag.new, .wn-tag.news, .wn-tag.planned, .wn-tag.open, .wn-tag.better { background: var(--select); color: var(--brand); }
.wn-tag.done { background: var(--good-tint, var(--select)); color: var(--good, var(--brand)); }
.wn-tag.fix, .wn-tag.declined { background: var(--surface-2); color: var(--ink-2); }
.wn-new { color: var(--brand); font-size: 12.5px; font-weight: 500; }
.wn-body { margin: 0; max-width: 700px; color: var(--ink-2); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.wn-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.wn-go { white-space: nowrap; }
.wn-go svg { width: 14px; height: 14px; }
.wn-votes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; color: var(--ink-3); font-size: 13px; }
.wn-votes .linkbtn { min-height: 44px; }
/* v267: the reactions, at the right of each item's foot: three round buttons, how many beside each, the person's own filled */
.wn-react { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.wn-r { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 40px; min-height: 36px; padding: 0 11px; border-radius: var(--pill, 999px); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); cursor: pointer; transition: background var(--t1) ease-out, color var(--t1) ease-out, box-shadow var(--t1) ease-out; }
.wn-r svg { width: 16px; height: 16px; }
.wn-r b { font-size: 13px; font-weight: 600; color: var(--ink-strong); }
.wn-r:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.wn-r:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wn-r.on { background: var(--select); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.wn-r.on b { color: var(--brand); }
@media (pointer: coarse) { .wn-r { min-width: 44px; min-height: 44px; } }

/* beside the feed: the way to suggest a change (its form, when open) and the board at a glance */
.news-side .card { margin: 0; }
.news-idea { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; }
.news-idea h2, .news-board h2 { margin: 0; color: var(--ink-strong); font-size: 17px; font-weight: 600; }
.news-idea > p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.news-idea .idea-new { margin-top: 4px; min-height: 44px; }
.news-idea .idea-form { align-self: stretch; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.news-board { display: flex; flex-direction: column; padding: 8px 22px 10px; }
.news-board h2 { padding: 16px 0 8px; }
.nb-g { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line); }
.nb-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-strong); font-size: 14.5px; font-weight: 500; }
.nb-n { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; text-align: center; }
.nb-g .note { margin: 0; font-size: 13.5px; line-height: 1.5; }
.nb-list { margin: 0; padding: 0 0 0 18px; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.nb-wait { margin: 8px 0; }
.nb-go { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; font-size: 14px; font-weight: 500; }
.nb-go svg { width: 14px; height: 14px; }

@media (min-width: 921px) {
  /* the owner's change on the canvas (2026-10-25): on a computer the day's date over its items, in lime with its weekday, and each item a card
     of its own */
  .wn-day { flex-direction: column; gap: 12px; }
  .wn-date { flex: none; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0; }
  .wn-dn, .wn-mn { display: none; }
  .wn-dl { display: inline; color: var(--brand); font-size: 18px; font-weight: 600; }
  .wn-wd { font-size: 13px; font-weight: 500; }
  .wn-wd::first-letter { text-transform: uppercase; }
  :root #view .wn-daycard.card, :root.land #view .wn-daycard.card { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .wn-daycard > .wn-item { border-top: 0; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  :root.land-page #view > .bq-hero.news-hero, #view > .news-hero { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: 0; }
  :root.land #view > .bq-hero.news-hero::after { display: none; }
  .news-hero-t { flex: 1 1 520px; gap: 20px; padding-bottom: 30px; }
  .news-hero h2 { font-size: 34px; }
  .news-lead { font-size: 15.5px; }
  .news-hero .ideas-tabs { align-self: flex-start; }
  .news-hero .ideas-tabs .seg { width: auto; }
  .news-hero .ideas-tabs .seg button { flex: none; padding-inline: 22px; }
  .news-hero .news-fig { width: 176px; margin-right: 24px; }
}
@media (max-width: 920px) {
  .news-hero .news-fig { position: absolute; top: 0; right: 12px; width: 84px; }
  .news-hero h2, .news-lead { padding-right: 88px; }
  .news-hero .ideas-tabs .seg button { min-width: 0; padding-inline: 6px; font-size: 13.5px; }
  .news-body { gap: 24px; }
  .news-main { flex-basis: 100%; gap: 24px; }
  .news-side { flex-basis: 100%; max-width: none; }
  .wn-kinds { flex-wrap: nowrap; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .wn-kinds::-webkit-scrollbar { display: none; }
  .wn-k { flex: none; min-height: 44px; font-size: 14px; }
  .wn-day { flex-direction: column; gap: 10px; }
  .wn-date { flex: none; flex-direction: row; align-items: baseline; gap: 8px; padding: 0 4px; }
  .wn-dn, .wn-mn { display: none; }
  .wn-dl { display: inline; color: var(--ink-strong); font-size: 16px; font-weight: 600; }
  .wn-wd { font-size: 13px; }
  .wn-daycard { flex: none; border-radius: 22px; }
  .wn-item { padding: 18px; }
  .wn-foot { flex-wrap: wrap; }      /* v296: a long way to try it ("Abrir el Calendario") keeps its line; the reactions go under it, at the right */
  .news-body[data-tab="videos"] .news-side, .news-body[data-tab="news"] .news-side { display: none; }      /* Tips (v296, the canvas, version B): on a phone each part is only itself */
  .news-body[data-tab="ideas"] .news-side { order: -1; flex-basis: 100%; max-width: none; }      /* Ideas: the way to suggest first */
  .news-idea .idea-new { align-self: stretch; justify-content: center; min-height: 48px; }
}