/* =========================================================================
   Fondo TI — borderless edition
   No borders, no logo, square corners. Separation comes from colour blocks,
   whitespace and type — never from lines.
   ========================================================================= */
:root {
  --ink: #123a31;        /* deep emerald — topbar + hero, one continuous block */
  --ink-2: #0b2a23;      /* deeper, for hero depth */
  --paper: #f2efe9;      /* warm paper page */
  --surface: #ffffff;    /* content blocks */
  --soft: #e9e5dc;       /* tonal fill: inputs, empty cells, chips */
  --soft-2: #faf8f4;     /* faintest tint: row banding */
  --accent: #e0a03c;     /* amber — celebración */
  --accent-2: #6f9e91;   /* sea green — navidad */
  --t1: #15241f;
  --t2: #6c7a74;
  --pos: #2b7a58;
  --neg: #ad4f3c;
  --mono: "Space Mono", ui-monospace, monospace;
  --maxw: 1080px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--t1);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: "Space Grotesk", sans-serif; margin: 0; line-height: 1.05; }
button { font-family: inherit; cursor: pointer; border: 0; border-radius: 0; }
input, select { border-radius: 0; }
.tabular { font-variant-numeric: tabular-nums; }

.kicker, .eyebrow {
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem;
}
.eyebrow--dark { color: var(--t2); }
.muted { color: var(--t2); font-size: .9rem; }
.section-title { font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 600; color: var(--t1); letter-spacing: -.015em; }

/* ---- buttons: filled, square, borderless ---- */
.btn { padding: .68rem 1.25rem; font-size: .9rem; font-weight: 700; transition: background .16s, color .16s; }
.btn-gold { background: var(--accent); color: #2a1c05; }
.btn-gold:hover { background: #edb054; }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.2); }
.btn-block { width: 100%; margin-top: .5rem; padding: .9rem; }

/* ================= topbar + hero = one continuous ink block ================= */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1.1rem, 4vw, 2rem);
  background: var(--ink); color: #fff;
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.18rem; letter-spacing: -.01em; }
.brand-text small { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.topbar-actions { display: flex; align-items: center; gap: 1rem; }
.last-updated { font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; color: rgba(255,255,255,.5); }

main { display: block; }

.hero {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1.1rem, 4vw, 2rem) clamp(2.4rem, 6vw, 4rem);
  background:
    radial-gradient(120% 130% at 88% -10%, rgba(224,160,60,.14), transparent 52%),
    linear-gradient(168deg, var(--ink) 0%, var(--ink-2) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; }
.hero .eyebrow { color: var(--accent); }
.hero-title { font-size: clamp(2.3rem, 6vw, 3.8rem); font-weight: 600; letter-spacing: -.025em; color: #fff; margin-bottom: 2rem; }
.hero-title em { font-style: normal; color: var(--accent); }
.hero-balance { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 2rem; }
.hero-balance-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.hero-balance-amount { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(2.7rem, 7.5vw, 4.4rem); font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: #fff; }
.reconciled {
  align-self: flex-start; margin-top: .55rem; padding: .38rem .8rem;
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #cdebdd; background: rgba(255,255,255,.1);
}
.reconciled::before { content: "✓"; }

.hero-split { display: flex; flex-direction: column; gap: .85rem; max-width: 540px; }
.split-bar { display: flex; height: 8px; background: rgba(255,255,255,.14); }
.split-seg { height: 100%; }
.split-seg.cele { background: var(--accent); }
.split-seg.navi { background: var(--accent-2); }
.split-legend { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.split-item { display: flex; align-items: baseline; gap: .5rem; font-size: .85rem; }
.split-item .dot { width: 9px; height: 9px; align-self: center; }
.split-item .dot.cele { background: var(--accent); }
.split-item .dot.navi { background: var(--accent-2); }
.split-item .amt { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.split-item .lbl { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* ================= sections on paper ================= */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.2rem, 5vw, 3.2rem) clamp(1.1rem, 4vw, 2rem) 0; }
.section:last-of-type { padding-bottom: clamp(2rem, 5vw, 3rem); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.section-head--panel { align-items: baseline; margin-bottom: 1.1rem; }

/* ================= fund blocks ================= */
.fund-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(.9rem, 2vw, 1.4rem); }
.fund-card { background: var(--surface); padding: clamp(1.4rem, 3vw, 2rem); }
.fund-name { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .98rem; color: var(--t1); }
.fund-dot { width: 10px; height: 10px; background: var(--fund-accent, var(--accent)); }
.fund-bal-label { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--t2); margin-top: .8rem; }
.fund-balance { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(2rem, 4vw, 2.6rem); font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--t1); margin: .15rem 0 .3rem; }
.fund-sub { color: var(--t2); font-size: .86rem; }
.fund-meta { display: flex; flex-wrap: wrap; gap: .9rem 1.8rem; margin-top: 1.5rem; }
.fund-meta div { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--t2); }
.fund-meta b { display: block; margin-top: .3rem; font-family: "Space Grotesk", sans-serif; font-size: 1.02rem; color: var(--t1); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ================= segmented control ================= */
.seg { display: inline-flex; background: var(--soft); padding: 3px; }
/* Tabs wrap instead of shrinking to nothing on narrow drawers. */
.seg--full { display: flex; flex-wrap: wrap; width: 100%; margin: 0 0 1.2rem; }
.seg--full .seg-btn { flex: 1 1 auto; text-align: center; }
.seg-btn { flex: none; background: transparent; color: var(--t2); padding: .55rem 1rem; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.seg-btn.is-active { background: var(--ink); color: #fff; }

/* ---- matrix controls (year + fund) ---- */
.matrix-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.year-select { font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--t1); background: var(--soft); border: 0; padding: .5rem .7rem; }
.year-select:focus { outline: 2px solid var(--accent); }

/* ---- initial setup: per-member opening dues ---- */
.dues-list { display: flex; flex-direction: column; gap: .35rem; max-height: 320px; overflow-y: auto; }
.due-row { display: grid; grid-template-columns: 1fr 84px 84px; gap: .4rem; align-items: center; }
.due-row.due-head { font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; color: var(--t2); text-align: center; }
.due-row.due-head span:first-child { text-align: left; }
.due-name { font-size: .84rem; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due-input { font-family: inherit; font-size: .82rem; text-align: right; color: var(--t1); border: 0; padding: .4rem .45rem; background: var(--soft); }
.due-input:focus { outline: 2px solid var(--accent); }

/* ================= matrix: a clean heatmap, no lines ================= */
.matrix-legend { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.1rem; }
.legend-item { display: flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--t2); }
.legend-chip { width: 14px; height: 14px; }
.legend-chip.is-full { background: var(--accent); }
.legend-chip.is-partial { background: linear-gradient(135deg, var(--accent) 0 50%, #f2ddb4 50% 100%); }
.legend-chip.is-none { background: var(--soft); }
.legend-chip.is-pre { background: transparent; }

/* Bounded box so the header can stay pinned while you scroll the table. */
.matrix-scroll { overflow: auto; max-height: min(70vh, 560px); background: var(--surface); }
.matrix { border-collapse: collapse; width: 100%; --th1: 30px; }
.matrix thead th { background: var(--surface); font-family: var(--mono); text-align: center; white-space: nowrap; }
/* Month spans its two fortnights, so the label never repeats. Both rows stay pinned. */
.matrix thead th.th-month { position: sticky; top: 0; z-index: 2; height: var(--th1); line-height: 1; font-size: .64rem; font-weight: 700; letter-spacing: .14em; color: var(--t1); padding: .7rem .3rem .2rem; }
.matrix thead th.th-half { position: sticky; top: var(--th1); z-index: 2; height: 24px; line-height: 1; font-size: .58rem; font-weight: 400; letter-spacing: .04em; color: var(--t2); padding: 0 .1rem .6rem; }
.matrix thead th.name-col, .matrix tbody td.name-col {
  position: sticky; left: 0; z-index: 3; background: var(--surface); text-align: left;
  padding: .55rem 1.1rem .55rem clamp(1.1rem, 4vw, 2rem); min-width: 190px;
}
.matrix thead th.name-col { top: 0; z-index: 5; }
.matrix tbody tr:nth-child(even) td { background: var(--soft-2); }
.matrix tbody td { text-align: center; height: 42px; padding: 0 2px; }
.m-name { display: block; font-weight: 600; font-size: .9rem; color: var(--t1); line-height: 1.25; }
.m-paid { margin-right: .2rem; }
.m-sub { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .64rem; color: var(--t2); margin-top: .18rem; }
.m-pill { font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .42rem; }
.m-pill.ok { background: rgba(43,122,88,.12); color: var(--pos); }
.m-pill.due { background: rgba(173,79,60,.12); color: var(--neg); }

.cell { display: inline-block; width: 19px; height: 19px; vertical-align: middle; }
.cell.is-full { background: var(--accent); }
.cell.is-partial { background: linear-gradient(135deg, var(--accent) 0 50%, #f2ddb4 50% 100%); }
.cell.is-none { background: var(--soft); }
.cell.is-pre { width: 7px; height: 2px; background: #d4cec2; }
.cell.is-out { width: 7px; height: 2px; background: #e3ded2; }
.row-out .m-name, .row-out .m-sub { color: var(--t2); }

/* ---- ledger search + paging ---- */
.ledger-search { width: 100%; font-family: inherit; font-size: .9rem; color: var(--t1); border: 0; padding: .7rem .85rem; background: var(--soft); margin-bottom: .5rem; }
.ledger-search:focus { outline: 2px solid var(--accent); }
.btn-more { width: 100%; margin-top: .7rem; padding: .75rem; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--soft); color: var(--t1); }
.btn-more:hover { background: #ddd8cc; }

/* ================= lower blocks ================= */
.lower { display: flex; flex-direction: column; gap: clamp(.9rem, 2vw, 1.4rem); }
.panel { background: var(--surface); padding: clamp(1.4rem, 3vw, 2rem); min-width: 0; }
.ledger, .reimb-list { list-style: none; margin: 0; padding: 0; }
.ledger { max-height: 460px; overflow-y: auto; }
.ledger-item { display: flex; align-items: center; gap: .9rem; padding: .72rem clamp(.4rem, 1vw, .7rem); }
.ledger-item:nth-child(even) { background: var(--soft-2); }
.led-icon { flex: none; width: 26px; height: 26px; display: grid; place-items: center; font-size: .85rem; font-weight: 700; }
.led-icon.in { color: var(--pos); background: rgba(43,122,88,.12); }
.led-icon.out { color: var(--neg); background: rgba(173,79,60,.12); }
.led-body { flex: 1; min-width: 0; }
.led-desc { display: block; font-weight: 500; font-size: .9rem; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.led-meta { font-family: var(--mono); font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--t2); display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .18rem; }
.led-tag { color: var(--accent); }
.led-amount { flex: none; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.led-amount.in { color: var(--pos); }
.led-amount.out { color: var(--neg); }

.reimb-item { display: flex; align-items: center; justify-content: space-between; gap: .9rem; padding: .8rem clamp(.4rem, 1vw, .7rem); }
.reimb-item:nth-child(even) { background: var(--soft-2); }
.reimb-info { display: flex; flex-direction: column; min-width: 0; }
.reimb-info .who { font-weight: 600; font-size: .92rem; }
.reimb-info .what { font-size: .8rem; color: var(--t2); }
.reimb-right { display: flex; align-items: center; gap: .85rem; }
.reimb-amt { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--neg); }
.btn-pay { padding: .4rem .85rem; font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: #fff; }
.btn-pay:hover { background: #1a4d41; }
.empty { color: var(--t2); font-size: .88rem; padding: 2rem 0; text-align: center; }
.chip-receipt { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .06em; padding: .16rem .45rem; background: var(--soft); color: var(--t2); cursor: pointer; }
.chip-receipt:hover { background: #ddd8cc; }

/* ================= footer ================= */
.foot { max-width: var(--maxw); margin: 0 auto; padding: clamp(2rem, 4vw, 2.6rem) clamp(1.1rem, 4vw, 2rem) 3rem; color: var(--t2); font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; line-height: 1.9; }

/* ================= overlays ================= */
.fab { position: fixed; right: clamp(1rem, 4vw, 2rem); bottom: clamp(1rem, 4vw, 2rem); z-index: 45; background: var(--accent); color: #2a1c05; padding: .9rem 1.4rem; font-family: var(--mono); font-weight: 700; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 10px 30px -12px rgba(18,58,49,.55); }
.fab:hover { background: #edb054; }
.scrim { position: fixed; inset: 0; background: rgba(11,42,35,.55); z-index: 50; }
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; }
.modal-card { width: min(410px, 100%); }
.card { background: var(--surface); padding: 1.9rem; box-shadow: 0 30px 70px -30px rgba(11,42,35,.5); }
.card-title { font-size: 1.32rem; font-weight: 600; margin-bottom: .35rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.4rem; }
.modal .btn-ghost { background: var(--soft); color: var(--t1); }
.modal .btn-ghost:hover { background: #ddd8cc; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(430px, 100%); background: var(--surface); padding: 1.5rem clamp(1.2rem, 3vw, 1.8rem) 2.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1.1rem; box-shadow: -20px 0 60px -30px rgba(11,42,35,.5); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.icon-btn { background: var(--soft); width: 34px; height: 34px; color: var(--t2); font-size: .9rem; }
.icon-btn:hover { background: #ddd8cc; }

/* ---- form fields: filled, borderless ---- */
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .95rem; min-width: 0; }
.field > span { font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t2); }
/* width:100% + min-width:0 let number inputs shrink to their track instead of
   forcing it wider than 50% (which caused the horizontal scrollbar). */
.field input, .field select { font-family: inherit; font-size: .95rem; color: var(--t1); border: 0; padding: .7rem .8rem; background: var(--soft); width: 100%; min-width: 0; }
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; }
.form-error { color: var(--neg); font-size: .84rem; margin: .2rem 0 0; }
.form-note { font-size: .82rem; color: var(--t2); }
.hint { color: var(--t2); font-size: .72rem; margin-top: .3rem; }

/* ---- checkboxes + members maintenance ---- */
.check-row { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.check { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--t1); cursor: pointer; }
.check input { accent-color: var(--ink); width: 16px; height: 16px; }

.members-list { display: flex; flex-direction: column; gap: .55rem; }
.member-row { background: var(--soft-2); padding: .85rem .95rem; display: flex; flex-direction: column; gap: .6rem; }
.member-row.is-inactive { opacity: .6; }
.member-top { display: flex; align-items: center; gap: .6rem; }
.member-del { flex: none; font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .35rem .6rem; background: var(--soft); color: var(--t2); }
.member-del:hover { background: #ddd8cc; }
.member-del.is-armed { background: var(--neg); color: #fff; }
.check input:disabled { opacity: .4; cursor: not-allowed; }
.check:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.member-name { font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--t1); background: transparent; padding: .25rem 0; width: 100%; border: 0; }
.member-name:focus { outline: 2px solid var(--accent); background: var(--surface); padding: .25rem .45rem; }
.member-email { font-family: inherit; font-size: .82rem; color: var(--t2); background: var(--soft); padding: .5rem .6rem; width: 100%; min-width: 0; border: 0; }
.member-email:focus { outline: 2px solid var(--accent); color: var(--t1); }
.member-flags { display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; }
.member-flags .check { font-family: var(--mono); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; color: var(--t2); }

/* ---- multi-quincena spread preview ---- */
.spread-preview { background: var(--soft); padding: .7rem .8rem; margin: 0 0 .95rem; }
.spread-head { font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t2); margin: 0 0 .5rem; }
.spread-rows { display: flex; flex-direction: column; gap: .25rem; }
.spread-row { display: flex; justify-content: space-between; gap: .8rem; font-size: .84rem; color: var(--t1); }
.spread-row.is-future { color: var(--t2); }
.spread-row.is-future span:first-child::before { content: "→ "; }
.spread-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; margin-top: .6rem; padding-top: .5rem; border-top: 2px solid var(--surface); font-size: .9rem; }
.spread-left { color: var(--neg); font-size: .8rem; }
.spread-note { color: var(--t2); font-size: .75rem; }
.spread-empty { font-size: .84rem; color: var(--t2); margin: 0; }

/* ---- photo areas: desktop (no camera) + drag & drop ---- */
.no-camera .photo-btn[data-cam] { display: none; }
.field-photo.is-dragover { outline: 2px dashed var(--accent); outline-offset: 4px; background: var(--soft-2); }

/* ---- notifications config panel ---- */
.notify-block { margin: 0 0 1.05rem; }
.notify-block .check { font-weight: 600; }
.notify-block .hint { margin: .3rem 0 0; }
.notify-log { display: flex; flex-direction: column; gap: .4rem; margin-top: .4rem; }
.notify-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: .6rem; font-size: .78rem; color: var(--t2); }
.notify-row span:nth-child(3) { color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- photo picker ---- */
.photo-actions { display: flex; gap: .5rem; }
.photo-btn { flex: 1; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .68rem; background: var(--soft); color: var(--t1); }
.photo-btn:hover { background: #ddd8cc; }
.photo-thumbs { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .65rem; }
.photo-thumbs:empty { margin-top: 0; }
.thumb { position: relative; width: 64px; height: 64px; background: var(--soft); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-x { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; background: var(--neg); color: #fff; font-size: .64rem; line-height: 1; display: grid; place-items: center; }

.viewer { width: min(680px, 100%); max-height: 88vh; background: var(--surface); display: flex; flex-direction: column; box-shadow: 0 30px 70px -30px rgba(11,42,35,.5); }
.viewer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; }
.viewer-imgs { overflow-y: auto; padding: 0 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.viewer-imgs img { width: 100%; height: auto; display: block; }

.toast { position: fixed; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 70; background: var(--ink); color: #fff; padding: .8rem 1.2rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; font-weight: 700; }
.toast.err { background: var(--neg); }

/* ================= focus + motion ================= */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ================= responsive ================= */
@media (max-width: 560px) {
  .brand-text small { display: none; }
  /* The topbar grew from one button to as many as four (Instalar, Mi fondo,
     Administrar, Salir). Beside the brand they no longer fit on a phone and
     were pushing the whole page sideways, so they get their own row. */
  .topbar { flex-wrap: wrap; gap: .55rem .75rem; padding: .8rem 1.1rem; }
  .topbar-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: .45rem; }
  .topbar-actions .btn { padding: .45rem .75rem; font-size: .78rem; }
  .last-updated { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .hero-title { margin-bottom: 1.6rem; }
  /* Matrix: tighter name column so more fortnights fit on screen. */
  .matrix thead th.name-col, .matrix tbody td.name-col { min-width: 146px; padding-left: 1rem; padding-right: .55rem; }
  .m-name { font-size: .84rem; }
  .m-sub { font-size: .58rem; gap: .3rem; margin-top: .12rem; white-space: nowrap; }
  .m-paid { display: none; }
  .m-pill { font-size: .55rem; padding: .08rem .34rem; }
  .cell { width: 17px; height: 17px; }
  .matrix tbody td { height: 38px; }
}

/* ---------------------------------------------------------------- environment banner
   Only rendered when the API reports APP_ENV=development. Loud on purpose:
   a staging tab must never be confused with the real fund. */
.env-banner {
  background: var(--neg);
  color: #fff;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  padding: .45rem 1rem;
}

/* ---------------------------------------------------------------- self-service
   Colleague-facing blocks. Same borderless language as the rest: separation
   comes from tonal fills and space, never from lines. */

/* Where to deposit. The number is the hero of this block, hence the mono face. */
.bank-card { background: var(--ink); color: #fff; padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.bank-card .bank-label {
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.bank-card .bank-number {
  font-family: var(--mono); font-size: 1.35rem; font-weight: 700;
  letter-spacing: .04em; margin: .35rem 0 .1rem; word-break: break-all;
}
.bank-card .bank-meta { font-size: .85rem; opacity: .8; }
.bank-card .bank-hint { font-size: .8rem; opacity: .7; margin-top: .5rem; }
.copy-btn {
  margin-top: .7rem; background: var(--accent); color: var(--ink);
  font-weight: 600; font-size: .85rem; padding: .5rem .9rem;
}
.copy-btn.is-done { background: var(--accent-2); color: #fff; }

/* Inline notice: neutral by default, amber when it needs attention. */
.notice { background: var(--soft); padding: .85rem 1rem; font-size: .9rem; margin-bottom: 1.1rem; }
.notice.warn { background: #f6e6c8; }
.notice.bad { background: #f3ddd7; }
.notice strong { font-weight: 600; }

/* Pending-review counter riding on the drawer tab. */
.tab-badge {
  display: inline-block; min-width: 1.25rem; padding: 0 .35rem; margin-left: .3rem;
  background: var(--neg); color: #fff; font-family: var(--mono); font-size: .68rem;
  font-weight: 700; line-height: 1.35rem; text-align: center;
}

/* One declared payment awaiting the admin's eye. */
.review-item { background: var(--soft-2); padding: .9rem 1rem; margin-bottom: .9rem; }
.review-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.review-who { font-weight: 600; }
.review-amount { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; }
.review-meta { color: var(--t2); font-size: .85rem; margin-top: .2rem; }
.review-note { font-size: .88rem; margin-top: .45rem; }
.review-plan { font-size: .85rem; color: var(--t2); margin-top: .5rem; }
.review-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.review-actions .btn, .review-actions .photo-btn { flex: 1 1 auto; }
.btn-confirm { background: var(--pos); color: #fff; padding: .55rem 1rem; font-weight: 600; }
.btn-reject { background: var(--soft); color: var(--neg); padding: .55rem 1rem; font-weight: 600; }

/* A colleague's own submission history. */
.sub-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
           padding: .7rem 0; }
.sub-row + .sub-row { background: linear-gradient(var(--soft), var(--soft)) top/100% 1px no-repeat; }
.sub-main { min-width: 0; }
.sub-date { color: var(--t2); font-size: .82rem; }
.sub-amount { font-family: var(--mono); font-weight: 700; }
.sub-status { font-family: var(--mono); font-size: .66rem; font-weight: 700;
              letter-spacing: .1em; text-transform: uppercase; padding: .15rem .5rem; }
.sub-status.pending { background: #f6e6c8; color: #7a5a1e; }
.sub-status.confirmed { background: #d8e9e1; color: var(--pos); }
.sub-status.rejected { background: #f3ddd7; color: var(--neg); }

/* Per-member credential controls inside the admin list. */
.member-secondary { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .4rem; }
.temp-pass { font-family: var(--mono); font-weight: 700; background: var(--accent);
             color: var(--ink); padding: .2rem .5rem; }

/* A PDF voucher has no preview, so the thumbnail says what it is. */
.thumb-pdf {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--ink); color: var(--accent);
  font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .08em;
}

/* PDF voucher in the receipt viewer: no preview, so it opens in a new tab. */
.pdf-open {
  display: flex; align-items: center; gap: .9rem;
  background: var(--soft); color: var(--t1); text-decoration: none;
  padding: 1rem 1.1rem; margin-bottom: .75rem;
}
.pdf-open .pdf-mark {
  background: var(--ink); color: var(--accent);
  font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  padding: .6rem .7rem;
}
.pdf-open small { display: block; color: var(--t2); font-size: .82rem; }