/* San Justito v2 - design tokens, frame shell, components.
   The frame never scrolls. Only .content scrolls. */

:root {
  --cream: #f7eedb; --paper: #fffaf0; --paper2: #fff4dd;
  --ink: #2c211b; --red: #a9342f; --red2: #79201f;
  --teal: #177a75; --teal2: #0f5e5a; --gold: #d0a23c;
  --muted: #756a60; --line: #e6dccb; --green: #367a59; --amber: #bd7b20;
  --radius: 22px; --radius-sm: 15px;
  --shadow: 0 10px 28px rgba(60, 35, 15, .08);
  --header: 56px; --nav: 60px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; margin: 0; }
body {
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 15% -10%, rgba(208, 162, 60, .10), transparent 30%),
    #fdf8ec;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%; /* iOS must not inflate some text and not others */
  text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid rgba(23, 122, 117, .45); outline-offset: 2px; }

/* ── Frame shell ─────────────────────────────────────────── */
#app { height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.appbar {
  grid-row: 1;
  min-height: calc(68px + env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  background: var(--red2);
  color: #fbeeda;
  box-shadow: 0 2px 12px rgba(50, 20, 10, .18);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .2px; color: #fbeeda; }
.brand .halo {
  width: 26px; height: 26px; border: 2px solid var(--gold); border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; color: #fbeeda;
}
.brand-avatar {
  width: 42px; height: 42px; padding: 0; border-radius: 50%; overflow: hidden;
  border: 2.5px solid var(--gold); background: #fbeeda; flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(208,162,60,.25);
}
.brand-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.about-face {
  width: 160px; height: 160px; border-radius: 50%; object-fit: cover; object-position: 50% 22%;
  border: 5px solid var(--gold); box-shadow: 0 0 0 9px #f8e6af; display: block; margin: 6px auto 14px;
}
.icon {
  min-width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font-weight: 700; padding: 0 10px;
}

/* ── Step timeline (inside the header) ───────────────────── */
.stepper { flex: 1; min-width: 0; display: flex; gap: 6px; justify-content: center; align-items: center; }
.step { position: relative; flex: 0 0 auto; min-width: 42px; display: flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; cursor: pointer; }
.step .dot { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.18); color: #fbeeda; }
.step .step-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; white-space: nowrap; font-size: 9px; line-height: 1; font-weight: 700; color: rgba(251,238,218,.85); }
.step.done .dot { background: var(--gold); color: #3a1414; }
.step.done .step-label { color: #f3d9a3; }
.step.frontier .dot { background: #fbeeda; color: var(--red2); }
.step.frontier .step-label { color: #fff; }
.step.active .dot { box-shadow: 0 0 0 2px rgba(208,162,60,.6); }
.step.locked { opacity: .45; cursor: default; }

/* Close button: same size and treatment as the step dots. */
.nav-x { position: relative; width: 24px; height: 24px; min-width: 24px; flex: 0 0 auto; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.18); cursor: pointer; }
.nav-x::before, .nav-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; border-radius: 2px; background: #fbeeda; }
.nav-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.nav-x:active { background: rgba(255,255,255,.3); }

/* min-height:0 lets the 1fr row shrink so this actually scrolls (grid items
   default to min-height:auto and grow with their content). */
.content { grid-row: 2; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* One button, centred. Needs the extra class to beat .bottom-nav (defined
   later, same specificity) and justify-items to centre it when capped. */
.bottom-nav.bottom-single { grid-template-columns: 1fr; justify-items: center; }
.bottom-block { display: block; }
.assign-info { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 7px; }
.assign-info b { color: var(--ink); }
.assign-info .warn { color: var(--amber); font-weight: 700; }
.assign-info .ok { color: var(--green); font-weight: 700; }
.bottom-single .primary { min-height: 46px; font-size: 14px; width: 100%; max-width: 420px; }
/* Why "Continuar" is not tappable yet (same idea as the Reparto bar). */
.bottom-nav-hint { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; text-align: center; }
.bottom-nav-hint.warn { color: var(--amber); }

/* Two buttons inside Grupo: Mesa | Amigos */
.tabs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 12px; }
.tab2 { border: 1.5px solid var(--line); background: var(--paper); border-radius: 14px; padding: 12px; font-weight: 700; color: var(--muted); }
.tab2.on { background: var(--teal); color: #fff; border-color: var(--teal); }

.content--full { overflow: hidden; }
.inner { max-width: 640px; margin: 0 auto; padding: 16px 14px calc(32px + env(safe-area-inset-bottom)); }

/* Landing (estampita). The art is a background image; the CTA is a real
   transparent HTML button placed over the drawn button. */
.landing {
  position: relative; height: 100%; overflow: hidden;
  display: flex; align-items: flex-start; justify-content: center;
  background: var(--cream);
}
.stamp { position: relative; width: 100%; max-width: 520px; }
.stamp img { display: block; width: 100%; height: auto; }
.stamp-cta {
  position: absolute;
  left: 13.5%; top: 75.3%; width: 73%; height: 8.8%; min-height: 56px;
  background: transparent; border: 0; border-radius: 14px;
  color: transparent; font-size: 1px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s var(--ease), transform .12s var(--ease);
}
.stamp-cta:active { background: rgba(255,255,255,.12); transform: scale(.985); }
.stamp-cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.stamp-cta[aria-busy="true"] { cursor: progress; }
.landing-dev {
  position: absolute; z-index: 3; top: calc(8px + env(safe-area-inset-top)); right: 10px;
  border: 1px dashed rgba(123,32,31,.6); background: rgba(255,250,240,.75); color: var(--red2);
  font-size: 11px; font-weight: 700; border-radius: 8px; padding: 6px 9px; opacity: .85;
}
.spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid #e6dccb; border-top-color: var(--red); animation: spin .8s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }

.bottom-nav {
  grid-row: 3;
  min-height: var(--nav);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  align-items: center;
  padding: 8px max(12px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
  background: rgba(255, 250, 240, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}

/* ── Type ────────────────────────────────────────────────── */
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 34px; line-height: 1; margin-bottom: 8px; color: var(--red2); }
h2 { font-size: 25px; line-height: 1.06; margin-bottom: 6px; }
h3 { font-size: 17px; margin-bottom: 6px; }
p { line-height: 1.45; }
.kicker { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 11px; }
.money { font-size: 26px; font-weight: 700; color: var(--red2); }

/* ── Layout helpers ──────────────────────────────────────── */
.stack { display: grid; gap: 9px; }
.section { margin-top: 14px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

/* ── Buttons ─────────────────────────────────────────────── */
.primary, .secondary, .ghost, .warn, .good {
  min-height: 50px; border-radius: var(--radius-sm); padding: 11px 16px;
  font-weight: 700; border: 1.5px solid transparent;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.primary:active, .secondary:active, .ghost:active { transform: scale(.98); }
.primary { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(169, 52, 47, .25); }
.secondary { background: var(--teal); color: #fff; }
.good { background: var(--green); color: #fff; }
.warn { background: #fff0d1; color: #8b5918; border-color: #e0b66d; }
.ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.full { width: 100%; }
.cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Matches the drawn "ESCANEAR TICKET" button: deep red, cream, bold uppercase. */
.scan-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; border: 0; border-radius: var(--radius-sm);
  background: #981413; color: #fbeeda;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 15px;
  box-shadow: 0 6px 16px rgba(152,20,19,.25);
  transition: transform .12s var(--ease);
}
.scan-cta:active { transform: scale(.985); }
.scan-cta.sm { min-height: 42px; padding: 0 14px; font-size: 12px; letter-spacing: .06em; box-shadow: none; }

/* ── Cards and fields ────────────────────────────────────── */
.card {
  background: rgba(255, 250, 240, .97); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 15px;
}
/* Ticket frame: one step darker than the page, so the light accordions pop. */
.ticket { background: #efe1c3; border-color: #e2d0ad; }
/* Round delete button: small dark disc with a light X drawn in CSS. */
.round-x {
  position: relative; width: 24px; height: 24px; min-width: 24px; flex: 0 0 auto;
  border-radius: 50%; border: 0; padding: 0; background: #3a1414;
  transition: transform .12s var(--ease);
}
.round-x::before, .round-x::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 11px; height: 2px; border-radius: 2px; background: #fbeeda;
}
.round-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.round-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.round-x:active { transform: scale(.93); }
.ticket-title { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.field { display: grid; gap: 4px; }
.field-fit { display: inline-flex; flex-direction: column; gap: 4px; width: min-content; min-width: 72px; }
.field-fit label { white-space: nowrap; }
.field-fit input { width: 100%; min-width: 0; }
.field label { font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.1; }
input, select, textarea {
  width: 100%; border: 1.5px solid #d3c4ae; border-radius: var(--radius-sm);
  background: #fffdf8; color: var(--ink); padding: 12px 13px; min-height: 48px; outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--teal); box-shadow: 0 0 0 3px rgba(23, 122, 117, .12);
}
.notice { background: #fff0cc; border: 1px solid #e2b96a; border-radius: 16px; padding: 12px 14px; color: #5b421e; }
.link { background: none; border: 0; padding: 0; color: var(--teal2); font-weight: 700; text-decoration: underline; cursor: pointer; font-size: inherit; }
.privacy-note { margin: 2px 0 0; line-height: 1.4; }
.notice.success { background: #eaf4ec; border-color: #a6c9ad; color: #285d40; }

/* ── Chips ───────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  border: 1.5px solid #d3c4ae; background: #fffdf8; border-radius: 999px;
  padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--ink);
  transition: all .12s var(--ease);
}
.chip.on { background: var(--teal); color: #fff; border-color: var(--teal); }
.chip.gold { background: #f6dfaa; border-color: var(--gold); }
.chip.red { background: #f8e2dd; border-color: #d78a82; color: #7d2a25; }
.chip.disabled { opacity: .45; }
.chip.lock { opacity: .5; }
.chip.ro { cursor: default; }
.unit-name { font-weight: 700; }
.unit-name-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Title line: the name may truncate, the "x3" badge must always be visible. */
.unit-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.unit-title .unit-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-sub { font-size: 11px; color: var(--muted); font-weight: 500; }
.unit-sub b { font-weight: 700; }
.unit-sub.unclaimed-sub { color: var(--amber); font-weight: 700; }
/* Caption under an accordion title (e.g. the servicio/tip summary). */
.acc-cap { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; }
/* Accordion footer: action buttons on the left, the item price on the right. */
.acc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.acc-actions .btn-sm { white-space: nowrap; }
.acc-price { margin-left: auto; font-weight: 700; font-size: 15px; }
/* Padlock centered inside the tick box (closed items). */
.lock-box { position: absolute; top: 5px; right: 5px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; z-index: 3; color: var(--muted); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.lock-box svg { width: 17px; height: 17px; }
/* Bottom legend: total to pay as a range while tips/fees are undefined. */
.total-range { text-align: center; }
.total-range .tr-line { font-size: 15px; margin: 0 0 4px; }
.total-range .tr-line b { font-size: 18px; }
.unit-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.unit-grid { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 6px; align-items: start; }
.unit-grid > .acc { margin-bottom: 0; }
.unit-grid > .acc > summary { min-height: 44px; }
/* Right edge of the label lines up with the tick's inner check box, not with
   the pill border: 5px pill padding + 1px border = 6px. */
.unit-legend { text-align: right; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-right: 6px; }
.unit-row > .acc { flex: 1; margin-bottom: 0; }
.unit-row > .acc > summary { min-height: 44px; }
.tick { position: relative; width: 100%; min-width: 48px; height: 44px; border-radius: 15px; border: 1px solid var(--line); background: var(--paper); padding: 0 5px 0 0; display: flex; align-items: center; justify-content: flex-end; }
.tick .box { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: transparent; }
.tick.on .box { background: var(--teal); color: #fff; }
/* Invited unit: the host's tick is fixed and cannot be removed. */
.tick.fixed { cursor: default; }
.tick.fixed .box { box-shadow: 0 0 0 3px rgba(23, 122, 117, .22); }
/* Composite tick (representing someone): my layer behind/left, the actor's on
   top. Guides always visible so the tap target reads even when empty. */
.tick.composite { position: relative; padding: 0; }
.tick .layer { position: absolute; top: 5px; width: 34px; height: 34px; border-radius: 10px; border: 1px dashed #d9ccb8; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: transparent; }
.tick .layer.my { left: 14px; background: transparent; }
.tick .layer.my.on { background: var(--teal); border-color: var(--teal); }
.tick .layer.act { right: 5px; background: var(--paper); }
.tick .layer.act.on { background: var(--c); border-color: var(--c); color: #fff; }
/* Unclaimed line: the tick background matches the amber accordion. */
.tick.unclaimed-tick { background: #fff5df; }
/* One row per item: quantity badge, "some units" tick, and the per-unit detail. */
/* Quantity pill: floats over the LEFT side of the tick button, on its own top
   layer (z-index) so nothing can be drawn over it. pointer-events:none keeps
   the whole tick tappable. */
.item-qty { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); z-index: 6; pointer-events: none; padding: 1px 6px; border-radius: 999px; background: #efe4d1; color: #695d51; font-size: 10px; font-weight: 700; line-height: 1.5; box-shadow: 0 1px 2px rgba(60,35,15,.12); }
.tick.on .item-qty, .tick.partial .item-qty { background: #fff; }
.tick.partial .box, .tick .layer.act.partial { background: var(--teal); border-color: var(--teal); color: #fff; font-size: 12px; }
.tick .layer.act.partial { background: var(--c); border-color: var(--c); }
/* ── Item accordion, compressed ─────────────────────────── */
/* Fixed tick column so the per-unit ticks can line up exactly under the item
   tick (they are pulled out of the accordion into that column). */
.unit-grid { --tickcol: 72px; grid-template-columns: 1fr var(--tickcol); }
.acc[data-acc-id^="item-"] > .acc-body { padding: 9px 6px 9px 13px; }
/* The per-unit ticks live OUTSIDE the accordion (in the tick column), so this
   one must not clip them. */
.acc[data-acc-id^="item-"] { overflow: visible; }
.item-line1 { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.item-line1 b { color: var(--ink); font-weight: 700; }
/* Clear rules delimit every unit inside the item pill. */
.subunit { border-top: 1px solid var(--line); }
.su-head { padding: 6px 0; }
/* No right padding: the tick lives in the column (absolute), so the right
   group ('la invitó X' / the button) sits flush with the pill's right edge. */
.su-top { position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; }
.su-label { font-size: 14px; font-weight: 700; color: var(--ink); flex: 0 0 auto; }
/* People flow under the actions across the full width. */
.su-names { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; margin-top: 2px; }
/* The unit tick leaves the accordion: pulled into the tick column so it lines
   up with the item's own tick (right edge = column's right edge).
   7px = accordion border + body padding · 8px = grid gap · the rest centres it. */
/* Out of the flow, so it never squeezes the row: it simply sits in the column,
   right edge flush with the item's own tick. */
/* Shorter pill, left edges flush with the item tick above. */
.su-top .tick.mini { position:absolute;right:calc(-1 * (72px + 15px));top:50%;transform:translateY(-50%); }
/* A rule joins the unit with its tick, so they read as one line. */
.su-top .tick.mini::before { content: ''; position: absolute; right: 100%; top: 50%; width: 16px; height: 1px; background: var(--line); }
/* Compact pills — visual only, never interactive. */
.su-name { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: #f1e9d8; border: 1px solid #e6dccb; color: #695d51; white-space: nowrap; }
.su-name.me { background: var(--teal); border-color: var(--teal); color: #fff; }
.su-name.on { background: #c6ebdb; border-color: #a6ddc9; color: #0e5343; }
.su-name.none { background: transparent; border-style: dashed; font-style: italic; font-weight: 600; }
.su-by { font-size: 11px; font-weight: 600; color: var(--muted); }
.su-names .su-btn { margin-left: auto; }
.su-btn { flex: 0 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 4px 8px; font-size: 11px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.su-btn:active { background: #f3ead8; }
/* Per-unit ticks live in the tick column: stacked under the item's own tick. */
.tick-stack { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tick-stack > .tick, .tick-stack > .tick.mini { position: relative; z-index: 1; }
.tick-spacer { display: none; }
.tick-spacer { height: 30px; }
.tick.mini { width:72px;min-width:72px;height:44px;border-radius:15px;padding:0 5px;justify-content:flex-end;flex:0 0 auto; }
.tick.mini .box { width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }
/* Filled ONLY when ticked: the actor's colour (-c) when editing as somebody
   else, teal for me. Unticked stays empty. */
.tick.mini.on .box { background: var(--c, var(--teal)); }
/* A locked unit is the SAME tick, with the padlock where the check would go. */
.tick.mini.fixed .lock-box { position: static; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; margin-left: auto; background: transparent; box-shadow: none; padding: 0; color: var(--muted); }
.item-sel { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.item-sel b { color: var(--ink); font-weight: 700; font-size: 16px; }
.rep-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.whoami { font-size: 14px; color: var(--muted); margin: 2px 0 4px; }
.whoami.edit-as { display: flex; align-items: center; gap: 8px; }
.whoami.edit-as select { border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; font-weight: 700; background: var(--paper); }
/* Festive floating notice (e.g. "X invitó un ítem"). Centered over the app,
   no backdrop so the screen stays usable. */
.notice-pop {
  position: fixed; left: 50%; top: 50%; z-index: 300;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, var(--gold), var(--red));
  color: #fff; padding: 18px 22px; border-radius: 20px;
  font-size: 15px; font-weight: 700; line-height: 1.25;
  border: 2px solid #fbeeda; box-shadow: 0 20px 55px rgba(60, 20, 10, .4);
  opacity: 0; transition: opacity .22s var(--ease);
  max-width: 84vw; text-align: center;
}
.notice-pop.show { opacity: 1; animation: notice-pop .45s cubic-bezier(.2, 1.5, .5, 1) both; }
@keyframes notice-pop {
  0%   { transform: translate(-50%, -50%) scale(.6); }
  60%  { transform: translate(-50%, -50%) scale(1.08); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* ── Accordion ───────────────────────────────────────────── */
.acc { border: 1px solid var(--line); border-radius: 15px; background: var(--paper); margin-bottom: 6px; overflow: hidden; }
.acc > summary { list-style: none; cursor: pointer; padding: 10px 13px; display: flex; align-items: center; gap: 8px; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s var(--ease); margin-left: auto; }
.acc[open] > summary::after { transform: rotate(-135deg); }
.acc[open] > summary { border-bottom: 1px dashed var(--line); }
.acc-body { padding: 11px 13px; }
.acc.unclaimed { border-color: #dda84d; background: #fff5df; }
/* Reparto: an unclaimed unit blocks payment — flag it with a color stripe. */
.unit-grid > .acc.unclaimed { border-left: 5px solid #dda84d; }
.acc-static { border: 1px solid var(--line); border-radius: 15px; background: var(--paper); margin-bottom: 6px; padding: 10px 13px; display: flex; align-items: center; gap: 8px; opacity: .6; }

/* ── Stats and progress ──────────────────────────────────── */
.statbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: 15px; padding: 10px; text-align: center; }
.stat b { display: block; font-size: 17px; }
.stat span { font-size: 11px; color: var(--muted); font-weight: 700; }
.progress { height: 9px; border-radius: 999px; background: #eadfcd; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--teal); border-radius: 999px; transition: width .3s var(--ease); }

/* Segmented selector */
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--paper); }
.seg-btn { border: 0; background: none; padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--muted); }
.seg-btn.on { background: var(--teal); color: #fff; }
.seg.full { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 14px; }
.seg.full .seg-btn { border-radius: 12px; padding: 9px 8px; }
.whoami { font-size: 14px; color: var(--muted); }
.whoami b { color: var(--ink); }

/* ── People ──────────────────────────────────────────────── */
.person { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px dashed #e6dccb; }
.person:last-child { border-bottom: 0; }
.person-main { min-width: 0; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; background: var(--teal); flex: 0 0 auto; }
.avatar.off { background: #9a8e82; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; background: #efe4d1; padding: 3px 8px; font-size: 10px; font-weight: 700; color: #695d51; margin-top: 3px; }
.badge.green { background: #dfefe4; color: #2d6748; }
.badge.amber { background: #f8e8c6; color: #8b5e1d; }

/* ── Modal and toast ─────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(35, 25, 18, .5); display: grid; place-items: end center; padding: 12px; animation: fade .18s var(--ease); }
.sheet { width: min(640px, 100%); max-height: 86vh; overflow: auto; background: var(--paper); border-radius: 24px; padding: 18px; box-shadow: 0 -10px 50px rgba(0, 0, 0, .28); animation: rise .22s var(--ease); }
/* Centered dialog variant (short, important confirmations). */
.modal--center { place-items: center; }
.modal--center .sheet { animation: pop-in .22s var(--ease); box-shadow: 0 20px 55px rgba(0, 0, 0, .3); }
@keyframes fade { from { opacity: 0 } }
@keyframes rise { from { transform: translateY(24px) } }
@keyframes pop-in { from { transform: scale(.9); opacity: 0 } }
.toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(12px);
  background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 999px; z-index: 120;
  opacity: 0; pointer-events: none; transition: .22s var(--ease); font-weight: 700; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Hero and saint art ──────────────────────────────────── */
.hero-art { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.saint-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 4px solid var(--gold); margin: 0 auto; }
.saint-stage { text-align: center; padding: 10px; }
/* Milagro: the saint thanks the tip. */
.tip-thanks { display: inline-block; margin-top: 12px; padding: 9px 16px; border-radius: 999px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--gold), var(--red)); box-shadow: 0 8px 24px rgba(60, 20, 10, .25); animation: thanks-pop .5s cubic-bezier(.2, 1.5, .5, 1) both; }
@keyframes thanks-pop { 0% { transform: scale(.7); opacity: 0 } 60% { transform: scale(1.08) } 100% { transform: scale(1); opacity: 1 } }
.saint-face { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; object-position: 50% 24%; border: 5px solid var(--gold); box-shadow: 0 0 0 8px #f8e6af; margin: 0 auto; }
.sparkles { font-size: 24px; letter-spacing: 8px; color: var(--gold); min-height: 32px; }

/* ── QR placeholder ──────────────────────────────────────── */
.qr { width: 200px; height: 200px; margin: 0 auto; background: #fff; border-radius: 12px; display: grid; grid-template-columns: repeat(17, 1fr); grid-template-rows: repeat(17, 1fr); box-shadow: 0 0 0 2px var(--ink); }
.qr i { background: transparent; }
.qr i.on { background: #17130f; }

/* Amigos: fixed head (info + QR), scrollable list below. No sticky. */
.content--fill { overflow: hidden; }
.inner--fill { height: 100%; display: flex; flex-direction: column; padding: 0 14px; }
.qr-card { background: #fff; border-radius: 16px; padding: 4px; box-shadow: var(--shadow); }
.qr-img { width: 100%; height: auto; display: block; }
.amigos-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.amigos-head { flex: 0 0 auto; background: #fdf8ec; display: flex; align-items: stretch; gap: 14px; padding: 0; border-bottom: 1px solid var(--line); }
.amigos-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 0 18px; }
.amigos-info { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 12px 0 8px; }
.amigos-info .kicker { font-size: 13px; margin: 0 0 3px 12px; }
.invite-name { margin: 0 0 6px 12px; font-size: 21px; font-weight: 700; color: var(--red2); }
.amigos-stat { font-size: 11px; color: var(--muted); line-height: 1.3; margin-left: 12px; }
.amigos-hint { font-size: 13px; font-weight: 700; color: var(--red2); line-height: 1.3; margin: 0 0 3px; }
.amigos-arrow { font-weight: 700; font-size: 18px; color: var(--red); vertical-align: -2px; }
.amigos-name { font-weight: 700; color: var(--red2); letter-spacing: -0.02em; margin: 0 0 7px; line-height: 1.02; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amigos-sub { font-size: 12.5px; color: var(--muted); line-height: 1.3; margin: 0 0 10px; }
.amigos-send { font-size: 11px; color: var(--muted); line-height: 1.2; margin: 6px 0 0 12px; }
.btn-sm { min-height: 38px; padding: 7px 12px; font-size: 13px; border-radius: 12px; }
.amigos-info .btn-sm { width: 100%; margin-top: auto; font-size: 12px; }
.amigos-head .qr-card { width: 186px; align-self: center; padding: 0; background: transparent; box-shadow: none; border: 0; border-radius: 0; flex: 0 0 auto; cursor: pointer; }
.dim { opacity: .55; }

/* QR zoom overlay */
.qr-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(20,12,8,.86); display: grid; place-items: center; padding: 18px; opacity: 0; transition: opacity .2s var(--ease); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.qr-overlay.show { opacity: 1; }
.qr-overlay-box { width: min(92vw, 86vh); background: #fff; border-radius: 22px; padding: 18px 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.45); transform: scale(.85); transition: transform .24s var(--ease); }
.qr-overlay.show .qr-overlay-box { transform: scale(1); }
.qr-overlay-title { color: var(--red2); font-weight: 700; font-size: 23px; text-transform: uppercase; letter-spacing: .03em; text-align: center; line-height: 1.05; }
.qr-overlay-img { width: 100%; height: auto; display: block; }
.qr-overlay-sub { color: var(--red2); font-size: 14px; text-align: center; opacity: .85; }
body.qr-open .amigos-head .qr-card { visibility: hidden; }

/* ── Ledger ──────────────────────────────────────────────── */
.ledger-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.ledger-row:last-child { border-bottom: 0; }
.ledger-row.total { border-bottom: 0; border-top: 2px solid var(--line); margin-top: 4px; padding-top: 12px; font-size: 16px; }
/* Pagar totals: separator goes BELOW the chips, not through them. */
.tot-card { padding-bottom: 6px; }
/* Label + % chips on the same line, the resulting amount below. */
.tot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tot-head > span { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tot-head .chips { margin: 0; gap: 5px; flex: 0 0 auto; }
.tot-head .chip { padding: 4px 9px; font-size: 11px; }
.tot-val { display: block; text-align: right; font-size: 15px; font-weight: 700; margin-top: 3px; }
.tot-group { padding-bottom: 5px; border-bottom: 1px dashed var(--line); }
.tot-group .ledger-row { border-bottom: 0; padding: 5px 0 1px; font-size: 15px; }
.tot-group .chip { padding: 5px 11px; font-size: 12px; }
.tot-group .chips { margin: 3px 0 2px; }
.tot-group .chips.end, .chips.end { justify-content: flex-end; }
.ledger-row.total { padding-top: 8px; font-size: 15px; }
/* Pagar: [name + owed] [amount] [✕] [method] — aligned columns. */
.pay-row { display: grid; grid-template-columns: 1fr 92px 34px 110px; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.pay-row:last-child { border-bottom: 0; }
.pay-who { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pay-who b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-owed { font-size: 12px; color: var(--muted); }
.pay-amount { width: 100%; height: 36px; min-height: 36px; padding: 0 10px; text-align: right; font-size: 14px; }
.pay-x { width: 34px; height: 36px; min-height: 36px; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--muted); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.pay-method { color:var(--muted);font-size:10px;line-height:1.2;overflow-wrap:anywhere; }
.pay-note { font-size: 11px; font-weight: 700; color: var(--amber); }
.pay-ro { text-align: right; font-size: 14px; color: var(--muted); }
.pay-row.ro .pay-who b { font-weight: 700; }
/* Pagar: my block (big) + the people I cover (small list) + the accept toggle. */
.pay-me { padding: 2px 0 8px; border-bottom: 2px solid var(--line); margin-bottom: 8px; }
.pay-subs { padding: 2px 0 2px 12px; }
.pay-sub { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.pay-sub-name { flex: 1; font-size: 13px; font-weight: 700; color: var(--muted); }
.pay-legend { font-weight: 600; font-size: 11px; color: var(--muted); }
/* Tappable amounts (mine and everyone else's) — tap to add to my payment. */
.pay-fill, .pay-amt-btn { background: none; border: 0; padding: 0; text-align: left; font-size: 12px; font-weight: 700; color: var(--teal); text-decoration: underline; cursor: pointer; }
.pay-sub-amt { font-size: 13px; color: var(--muted); }
.pay-sub .pay-x { width: 28px; height: 28px; min-height: 28px; }
.pay-accept { width: 100%; margin-top: 10px; height: 48px; border-radius: 14px; border: 0; background: var(--red); color: #fff; font-weight: 700; font-size: 16px; box-shadow: 0 3px 0 #7d2622; }
.pay-accept.on { background: var(--green); box-shadow: 0 3px 0 #1c5236; }
.pay-accept:active { transform: translateY(2px); box-shadow: none; }
.pay-account { display: flex; justify-content: flex-end; font-weight: 700; font-size: 14px; margin: 10px 0 8px; }
/* Shared 3-col grid for my pills + the resumen, so amounts (col 2) line up. */
.pay-me { display: grid; grid-template-columns: 1fr auto 112px; column-gap: 8px; align-items: center; padding: 2px 0 10px; border-bottom: 2px solid var(--line); margin-bottom: 10px; }
.pill, .pill-resumen { display: contents; }
.pill-who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; padding: 5px 0; }
.pill-who b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-sub { font-size: 11px; color: var(--muted); }
.pill-amt { text-align: right; font-size: 15px; font-weight: 700; padding: 5px 0; }
.pill-extra .pill-amt { color: var(--amber); }
.pill .pay-x { justify-self: end; }
.pill-sep { grid-column: 1 / -1; border-top: 2px solid var(--line); margin: 7px 0 0; }
.pill-res-label { font-weight: 700; font-size: 15px; }
.pay-resumen-amt { width: 112px; height: 36px; min-height: 36px; padding: 0 10px; text-align: right; font-size: 16px; font-weight: 700; margin-top: 8px; }
.pill-resumen .pay-method { width: 112px; height: 36px; min-height: 36px; padding: 0 6px; font-size: 12px; margin-top: 8px; }
.pay-me .pay-accept { grid-column: 1 / -1; margin-top: 8px; }
.debt { border: 1px solid #d9b26a; background: #fff4d8; border-radius: 17px; padding: 14px; margin-bottom: 10px; }

/* Simulated MercadoPago checkout */
.mp { border: 1.5px solid #009ee3; }
.mp-head { display: flex; align-items: center; margin-bottom: 4px; }
.mp-logo { font-weight: 700; color: #009ee3; font-size: 18px; }
.mp-pay { background: #009ee3; color: #fff; border: 0; min-height: 50px; border-radius: 15px; font-weight: 700; }
.mp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mp-btn { border: 0; border-radius: 11px; background: #009ee3; color: #fff; font-weight: 700; font-size: 13px; padding: 10px 15px; box-shadow: 0 2px 0 #0077ac; }
.mp-btn.small { padding: 8px 13px; font-size: 12px; }
.mp-btn:active { transform: translateY(1px); box-shadow: none; }
.question { background: linear-gradient(135deg, #fff5dc, #fffaf0); border: 1px solid #e1ba68; border-radius: 18px; padding: 14px; }

/* ── File picker ─────────────────────────────────────────── */
.file-picker { border: 2px dashed #c7b59e; background: var(--paper); border-radius: 18px; padding: 26px 16px; text-align: center; cursor: pointer; display: block; }
.file-preview { width: 100%; max-height: 260px; object-fit: contain; background: #211c18; border-radius: 16px; }
.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* v2.1 payment screen. Minimal, mobile-first: compact ledger, progressive details. */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.pay-compact { display:grid; gap:9px; padding-bottom:6px; }
.pay-title { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.pay-title h2 {margin:0; font-size:23px;}
.pay-title>b {font-size:20px; color:var(--red2); white-space:nowrap; font-variant-numeric:tabular-nums;}
.pay-destinations {display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:6px;}
.pay-dest { background:#efe1c3;border:1px solid #e2d0ad;border-radius:12px;padding:9px 7px;min-width:0;display:flex;flex-direction:column;gap:3px; }
.pay-dest>span {font-size:11px; color:var(--muted);font-weight:700;white-space:nowrap;}
.pay-dest>b {font-size:16px;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.3px;}
.pay-dest small {font-size:10px;min-height:20px;line-height:1.1;display:flex;align-items:center;font-weight: 700;}
.pay-rate select { border:1px solid var(--line);background:var(--cream);color:var(--ink);font-size:12px;font-weight:600;border-radius:8px;min-height:28px;width:100%;max-width:130px;padding:3px; }
.pay-muted {font-size:11px;color:var(--muted);}
.pay-ok {color:var(--green);} .pay-attention {color:#a15d0e;}
.pay-list-head {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px;}
.pay-list-head h3 {margin:0;font-size:16px;}
.pay-link {color:var(--teal2);background:transparent;border:0;text-decoration:underline;text-underline-offset:3px;font-size:12px;font-weight:700;padding:8px 2px;min-height:38px;}
.pay-hint {font-size:11px;color:var(--muted);margin:-5px 0 0;line-height:1.25;}
.pay-people {background:var(--paper);border:1px solid var(--line);border-radius:15px;overflow:hidden;}
.pay-person+.pay-person {border-top:1px solid var(--line);}
.pay-person-main {display:grid;grid-template-columns:minmax(0,1fr) 115px;align-items:center;min-height:57px;padding:5px 10px 5px 8px;gap:6px;}
.pay-person-open {text-align:left;display:grid;gap:2px;width:100%;background:transparent;border:0;padding:6px 4px;min-height:44px;color:var(--ink);}
.pay-person-name {font-weight: 700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pay-person-open small {font-size:11px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pay-money-input {display:flex;align-items:center;gap:2px;background:var(--cream);border:1px solid var(--line);border-radius:9px;padding:0 8px;font-weight: 700;color:var(--red2);height:42px;}
.pay-money-input:focus-within {border-color:var(--teal);box-shadow:0 0 0 2px rgba(23,122,117,.15);}
.pay-money-input input {width:100%;min-width:0;background:transparent;border:0;text-align:right;font-size:16px;font-weight: 700;color:var(--red2);outline:0;font-variant-numeric:tabular-nums;}
.pay-money-input input:disabled {opacity:.55;}
.pay-person-extra {background:#fff6e7;padding:8px 12px 12px;display:grid;gap:8px;border-top:1px solid var(--line);}
.pay-assume {display:flex;flex-wrap:wrap;gap:6px;}
.pay-toggle {border:1px solid #d7c9b6;background:white;border-radius:10px;color:var(--ink);min-height:40px;padding:7px 10px;font-size:12px;font-weight: 700;}
.pay-toggle.on {background:#e0f0ea;border-color:#85b8a7;color:var(--teal2);}
.pay-line {display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:12px;}
.pay-line select {max-width:130px;font-size:12px;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:8px 4px;min-height:40px;}
.pay-claim {display:flex;align-items:center;gap:9px;min-height:42px;font-size:12px;font-weight:700;cursor:pointer;}
.pay-claim input {width:19px;height:19px;accent-color:var(--teal);}
.pay-actions {display:flex;justify-content:space-between;gap:6px;align-items:center;}
.pay-actions>span {font-size:11px;color:var(--muted);white-space:nowrap;}
.pay-issue {background:#ffedcf;border:1px solid #e4ba7e;border-radius:11px;padding:10px;font-size:12px;font-weight: 700;color:#805019;line-height:1.3;}
.pay-issue span {font-weight:600;}
.pay-all-good {background:#e2f2e6;border:1px solid #9bbfa4;border-radius:11px;color:#296c46;padding:10px;font-size:12px;font-weight: 700;}
.pay-fold {font-size:12px;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:9px 12px;}
.pay-fold summary {cursor:pointer;font-weight: 700;min-height:28px;display:flex;align-items:center;}
.pay-fold ul {padding-left:18px;margin:7px 0;line-height:1.55;}
.pay-transfers>div {display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid var(--line);}
.pay-finish {display:grid;justify-items:center;text-align:center;gap:4px;padding:10px 0 15px;}
.pay-finish img {border-radius:50%;} .pay-finish h2 {margin:0;} .pay-finish p {font-size:13px;color:var(--muted);margin:0;}
@media(max-width:350px){.pay-dest>b{font-size:14px}.pay-dest{padding:8px 5px}.pay-person-main{grid-template-columns:minmax(0,1fr) 104px}}
@media(min-width:640px){.pay-compact{max-width:560px;margin:0 auto}.pay-person-main{grid-template-columns:minmax(0,1fr) 145px}}
.pay-assume .pay-toggle,.pay-claim,.pay-person-open,.pay-money-input,.pay-line select {min-height:44px;}

.pay-custom-san {display:flex;gap:12px;align-items:center;justify-content:flex-end;font-size:12px;font-weight:700;}
.pay-custom-san input {min-height:42px;width:110px;border:1px solid var(--line);background:var(--paper);border-radius:9px;padding:6px 10px;}

/* v2.2: compact descending personal account, one touch coverage. */
.pay-v22 { gap:8px; }
.pay-v22 .pay-dest { padding:7px 7px;gap:2px; }
.pay-v22 .pay-dest small {min-height:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
.pay-mine,.pay-others { background:#efe1c3;border:1px solid #e2d0ad;border-radius:16px;padding:12px;display:grid;gap:6px; }
.pay-section-title {display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.pay-section-title h3,.pay-others h3 { margin:0;font-size:16px;font-weight:700; }
.pay-section-title>span {font-size:12px;color:var(--muted);font-weight:700;}
.pay-arithmetic {display:grid;gap:3px;}
.pay-arithmetic>div {display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:12px;min-height:22px;}
.pay-arithmetic b {font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.pay-mini-tools {display:flex;justify-content:space-between;align-items:center;gap:5px;}
.pay-mini-tools .pay-link {font-size:11px;padding:2px 0;min-height:28px;}
.pay-columns-head,.pay-grid-line { display:grid;grid-template-columns:minmax(0,1fr) 94px 102px;gap:8px;align-items:center; }
.pay-columns-head { border-top:1px solid #ddcba8;padding-top:7px;color:var(--muted);font-size:11px;font-weight:500; }
.pay-grid-line {min-height:37px;font-size:12px;}
.pay-grid-line>b {white-space:nowrap;font-size:12px;text-align:right;font-variant-numeric:tabular-nums;}
.pay-grid-line>span:nth-child(2){font-size:11px;text-align:right;}
.pay-grid-line select { width:100%;min-width:0;border-radius:8px;border:1px solid var(--line);background:var(--cream);min-height:36px;padding:4px;font-size:12px;color:var(--ink); }
.pay-small-action {background:var(--paper2);border:1px solid #d9c4a4;border-radius:9px;color:var(--teal2);font-size:11px;font-weight: 700;padding:6px;min-height:40px;white-space:nowrap;}
.pay-small-action:disabled {opacity:.45;}
.pay-grid-line .pay-small-action {font-size:10px;white-space:normal;}
.pay-result { display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #ddcba8;padding-top:9px;gap:8px;font-size:14px;font-weight:700; }
.pay-result strong { font-size:20px;font-weight:700;color:var(--red2);font-variant-numeric:tabular-nums;white-space:nowrap; }
.pay-balances {display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.pay-balances>span {background:var(--cream);border-radius:9px;display:flex;justify-content:space-between;gap:4px;padding:8px;font-size:11px;white-space:nowrap;}
.pay-balances b {font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums;}
.pay-fold-plain {border:0;background:transparent;padding:0;}
.pay-fold-plain summary{font-size:11px;font-weight:700;color:var(--teal2);cursor:pointer;list-style:revert;min-height:30px;align-content:center;}
.pay-transfer-detail {display:grid;gap:5px;border-top:1px solid var(--line);padding-top:7px;}
.pay-transfer-detail>div{display:flex;justify-content:space-between;gap:8px;font-size:11px;}
.pay-transfer-detail b{font-variant-numeric:tabular-nums;white-space:nowrap;}
.pay-accept-btn{border:0;border-radius:11px;background:var(--red);color:#fff;font-weight: 700;padding:11px;min-height:46px;width:100%;font-size:13px;}
.pay-accept-btn.is-accepted{background:var(--green);}
.pay-unlock{border:0;background:none;color:var(--teal2);font-size:11px;text-decoration:underline;min-height:28px;}
.pay-edit-box {display:flex;gap:8px;align-items:center;background:var(--cream);border-radius:8px;padding:7px;font-size:11px;}
.pay-edit-box label {flex:1;}
.pay-edit-box input {width:115px;min-height:38px;border:1px solid var(--line);border-radius:7px;padding:6px;text-align:right;}
.pay-covered-alert {background:var(--cream);padding:5px 8px;border-radius:8px;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:6px;}
.pay-others {gap:3px;}
.pay-other-row + .pay-other-row { padding:6px 0;border-top:1px solid #d9c6a2; }
.pay-other-row { padding:6px 0; }
.pay-other-top { display:grid;grid-template-columns:minmax(50px,1fr) minmax(68px,100px) 96px 22px;align-items:center;gap:6px;min-height:26px; }
.pay-other-name{flex:1;min-width:0;display:grid;gap:2px;}
.pay-other-name>b {font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pay-other-name>small{color:var(--muted);font-size:10px;line-height:1.3;}
.pay-other-amount{font-size:12px;font-weight: 700;white-space:nowrap;font-variant-numeric:tabular-nums;}
.pay-other-fold summary{padding-left:3px;min-height:24px;}
.pay-footer-status{text-align:center;color:var(--muted);font-size:11px;font-weight: 700;}
.pay-v22 .pay-issue{padding:7px 9px;}
@media(max-width:365px){
  .pay-mine,.pay-others{padding:9px;}
  .pay-columns-head,.pay-grid-line{grid-template-columns:minmax(0,1fr) minmax(57px,auto) 92px;gap:5px;}
  .pay-grid-line select{font-size:10px;}
  .pay-other-top{gap:4px;}
  .pay-small-action{font-size:10px;padding:5px;}
}

.pay-remove-tip { vertical-align:middle;margin-left:4px; }

/* Reparto: the real account of the person being edited. */

/* Mi pago: one row per person (me + the ones I cover). */
.pay-mine-rows { margin: 2px 0 0; border-top: 1px solid var(--line); }
.pay-mine-rows + .pay-arithmetic { margin-top: 7px; }
.pay-mine-row { display:grid;grid-template-columns:minmax(0,1fr) max-content 24px;align-items:center;gap:8px;height:38px;padding:4px 0;border-bottom:1px solid #ddcba8;font-size:14px; }
.pay-mine-row b { text-align:right;font-variant-numeric:tabular-nums;font-weight: 700;white-space:nowrap; }
.pay-mine-row .pay-x { justify-self: end; }
.pay-mine-row span { color:var(--ink);font-weight:600; }

.pay-mine-row.me span { color:var(--ink);font-weight:600; }
.pay-mine-row:last-child { border-bottom: 0; }

.pay-fold-reintegros { margin: 8px 0; }

/* ── Pagar rediseño ── */
.pay-mt { margin-top: 14px; }
.pay-x { background: none; border: 0; color: var(--muted); font-size: 15px; font-weight: 700; padding: 0 2px; cursor: pointer; }
.pay-x:active { color: var(--red); }
.pay-edit { background: none; border: 0; color: var(--teal2); font-size: 14px; cursor: pointer; padding: 0 3px; }
.pay-diff { margin: 2px 0 4px; padding-left: 12px; font-size: 11px; color: var(--muted); }

.pay-tick { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--line); background: var(--paper); color: transparent; font-size: 13px; font-weight: 700; flex: 0 0 auto; }
.pay-tick.on { background: var(--green); border-color: var(--green); color: #fff; }
.pay-tick.covered { background: #ece7dc; border-color: #e0d8c8; }
.pay-pill { background: #f0e6cf; border: 1px solid #e4d4ae; border-radius: 999px; padding: 0 7px; font-size: 10px; font-weight: 700; color: #8b5e1d; }

.pay-other-amount.deficit { color: var(--red); font-weight: 700; }
.pay-other-row.covered { color:var(--muted); }
.pay-other-row.covered .pay-other-amount { color: var(--muted); font-weight: 500; }
/* Una fila de "Los demás": meta + monto + tick arriba; la acción abajo. */

.pay-other-meta b { font-weight:700;flex:1 1 70px;min-width:0;max-width:100%;overflow-wrap:anywhere; }
.pay-method.none { color: #b3a999; font-style: italic; }
.pay-other-meta { display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 7px;min-width:0; }
/* The NAME takes the remaining space (flex:1) so it never collapses to 0. */

.pay-other-meta small, .pay-other-meta .pay-pill, .pay-other-meta .pay-method { white-space:normal;overflow-wrap:anywhere;flex:0 1 auto; }
.pay-other-actions { margin-top:2px;display:flex;align-items:center;gap:6px; }
.pay-other-row .pay-small-action { min-height:26px;padding:3px 7px;font-size:11px; }
.pay-other-name { display: flex; align-items: baseline; gap: 6px; flex: 1 1 auto; min-width: 0; }
.pay-other-name small { color: var(--muted); font-size: 11px; }
.pay-other-amount { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.pay-falta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 9px 12px; border: 1px dashed #dda84d; border-radius: 11px; background: #fff5df; font-size: 12px; font-weight: 700; color: #8b5e1d; }

.pay-amt-wrap { display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:center;gap:2px;text-align:right; }
.pay-amt-wrap b { font-variant-numeric: tabular-nums; }

.pay-add { background:var(--teal);color:#fff;border:0;border-radius:7px;padding:5px 7px;font-size:11px;font-weight:700;justify-self:start;min-height:30px;line-height:1.2;text-align:left; }
.pay-add:active { background: var(--teal2); }

/* Payment states use the same columns as amounts, without empty phantom cells. */
.pay-columns-head>span:nth-child(2) { text-align:right; padding-right:22px; }
.pay-claim-row .pay-add { grid-column:1;grid-row:1;width:auto;max-width:100%; }
.pay-claim-row>span:nth-child(2) { grid-column:2;grid-row:1;font-weight:400;font-style:italic;white-space:nowrap;color:var(--muted);padding-right:22px;font-variant-numeric:tabular-nums; }
.pay-claim-row>span:last-child,.pay-owner-row>span:last-child { display:none; }
.pay-owner-row>span:nth-child(2) { grid-column:2 / 4; overflow-wrap:anywhere; }
.pay-grid-line>span:first-child { overflow-wrap:anywhere; }
.pay-mini-tools { flex-wrap:wrap; }
.pay-other-row.nested { padding-left:9px;border-left:2px solid #d9c6a2; }
.pay-other-meta small { flex-basis:100%; }
.pay-method.none { color:var(--muted); font-style:normal; }
.pay-balance { background:var(--cream);border-radius:9px;padding:8px;min-width:0;font-size:11px; }
.pay-balance summary { cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:28px; }
.pay-balance summary::before { content:'›';color:var(--teal2); }
.pay-balance[open] summary::before { content:'⌄'; }
.pay-balance p { display:flex;justify-content:space-between;gap:6px;margin:7px 0;overflow-wrap:anywhere; }
.pay-balance b { white-space:nowrap; }
.step { min-height:40px; }
.step .step-label { top:calc(100% - 4px);font-size:10px; }
.step.active .dot { background:var(--paper);color:var(--red2);box-shadow:0 0 0 3px var(--gold); }
@media(max-width:365px) {
  .pay-columns-head,.pay-grid-line { grid-template-columns:minmax(0,1fr) 83px 88px;gap:5px; }
  .pay-balances { grid-template-columns:1fr; }
  .pay-mine-row { gap:5px; }
}

/* Revision 278: family cards remain inside their dedicated 72px column. */
.family-tick { isolation:isolate; }
.family-card { position:absolute;right:calc(5px + var(--offset));top:5px;width:34px;height:34px;display:grid;place-items:center;border:1px dashed #d9ccb8;border-radius:10px;background:var(--paper);color:transparent;font-size:14px;font-weight:700;pointer-events:none; }
.family-card.selected { background:var(--person-color);border:1px solid var(--person-color);color:white; }
.item-quantity { margin-left:6px;font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap; }
.pay-diner-name { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700; }
.pay-pending ul { list-style:none;padding:0;margin:4px 0 0; }
.pay-pending li+li { border-top:1px solid var(--line); }
.pay-pending-link { display:flex;justify-content:space-between;gap:8px;width:100%;border:0;background:transparent;text-align:left;font-size:12px;color:var(--teal2);padding:9px 0; }
.pay-highlight { animation:payment-target 1.8s ease-out; }
@keyframes payment-target { 0%,40% {outline:3px solid var(--gold);outline-offset:3px;}100% {outline-color:transparent;} }
@media(max-width:365px) {
 .pay-other-top {grid-template-columns:minmax(42px,1fr) 66px 88px 20px;gap:4px;}
 .pay-other-amount {font-size:11px;}
}

/* Main card lifts above the family without shifting their common baseline. */
.family-card:last-child {box-shadow:-2px 1px 4px rgba(44,33,27,.23);}
.family-tick .item-qty {left:2px;top:50%;padding:1px 4px;font-size:9px;}
.pay-mine-row .pay-remove-person {justify-self:end;width:24px;height:24px;min-height:24px;}
.pay-grid-line .pay-remove-tip {width:20px;height:20px;min-width:20px;min-height:20px;}
.pay-balance-static {display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:44px;}
.pay-test-tools {display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-top:8px;}
.pay-simulation-note {font-size:11px;color:var(--muted);line-height:1.5;}
.bottom-nav.pay-bottom {position:relative;grid-template-columns:1fr;justify-items:center;padding-left:70px;padding-right:70px;}
.pay-json {position:absolute;right:12px;top:50%;transform:translateY(-50%);border:1px solid var(--line);border-radius:8px;background:var(--cream);color:var(--teal2);padding:6px;font-size:11px;font-weight:600;min-height:32px;}

/* Revision 280: compact unit controls and persistent actor buttons. */
.whoami.edit-as {display:block;margin:8px 0 14px;}
.whoami.edit-as>span {display:block;white-space:nowrap;font-size:13px;margin-bottom:7px;}
.editor-pills {display:flex;flex-wrap:wrap;align-items:center;gap:7px;min-height:42px;}
.editor-pill {border:1px solid var(--person-color);border-radius:999px;color:var(--person-color);background:transparent;font-size:12px;padding:6px 10px;min-height:32px;transition:padding .15s,font-size .15s;}
.editor-pill.active {background:var(--person-color);color:#fff;font-size:16px;font-weight:700;padding:9px 14px;box-shadow:0 2px 5px #0002;}
.tick.mini {width:44px;min-width:44px;height:44px;}
.su-top .tick.mini {right:calc(-1 * (44px + 15px));}
.su-label {font-weight:600;}
.su-name {font-weight:600;}
.su-name.not-sharing {border-style:dashed;opacity:.65;}
.su-btn {font-weight:400;}
.item-sel b {font-weight:700;}
.pay-finish img {object-fit:contain;margin:auto;}
.finish-contact {display:grid;grid-template-columns:75px minmax(0,1fr) auto;align-items:center;gap:7px;margin:8px 0;font-size:13px;}
.finish-contact input {width:100%;min-width:0;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-size:12px;}
.finish-contact a {font-size:12px;color:var(--teal);}
.export-text {width:100%;min-height:160px;font-size:12px;}

/* Mesa en paz: personal actions, private contacts and debt priority. */
.finish-subtitle {font-size:13px;font-weight:600;margin:15px 0 8px;color:var(--muted);}
.debt-report {padding:10px 12px;background:var(--paper);border-color:var(--line);}
.debt-report .section {margin-top:4px;}
.finish-contact {grid-template-columns:minmax(85px,1fr) minmax(0,1.8fr);padding:9px 0;border-bottom:1px solid var(--line);}
.finish-contact small {display:block;font-size:11px;color:var(--muted);margin-top:4px;}
.finish-contact-control {min-width:0;}
.finish-own-contact {display:grid;gap:8px;margin-top:10px;}
.finish-own-contact input {width:100%;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--paper);}
.contact-ready {font-size:11px;color:var(--green);}
.reminder-intro {padding:0 8px;font-size:13px;line-height:1.45;}
.reminder-opt {display:flex;align-items:center;gap:8px;}
.reminder-opt input {width:auto;}

/* Native compact checkbox: reset field styles inherited from inputs. */
.reminder-opt input[type="checkbox"] {appearance:auto;display:inline-block;flex:0 0 16px;width:16px;height:16px;min-height:0;min-width:0;padding:0;margin:0;border:0;border-radius:3px;box-shadow:none;background:none;accent-color:var(--teal);}
.reminder-opt {align-items:center;line-height:1.35;min-height:32px;}
.san-finish {padding:12px 14px;}
.san-finish-title,.san-finish-state {display:flex;align-items:center;justify-content:space-between;gap:10px;}
.san-finish-title h3 {font-size:14px;margin:0;}
.san-finish-title>b {font-size:15px;white-space:nowrap;}
.san-finish-state {margin-top:7px;font-size:12px;}
.san-finish-state small {display:block;font-size:11px;color:var(--muted);margin-top:3px;}
.san-pay-now {min-height:30px;padding:5px 8px;font-size:11px;}
.notification-controls {display:flex;flex-wrap:wrap;gap:12px;margin:8px 0;}
.notification-controls button {font-size:10px;}
.unified-summary {font:inherit;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;}
.history-link {position:absolute;bottom:42px;left:50%;transform:translateX(-50%);background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:8px 15px;color:var(--teal);}

/* Mesa en paz uses the same tan panels and cream inner rows as Pagar. */
.peace-screen>.card {background:#efe1c3;border:1px solid #e2d0ad;border-radius:16px;padding:12px;box-shadow:none;}
.peace-screen>.card h3 {font-size:16px;line-height:1.3;font-weight:600;margin:0 0 8px;}
.peace-screen .debt {background:var(--paper);border:1px solid #ddcba8;border-radius:12px;}
.peace-screen .san-finish-title h3 {font-size:16px;margin:0;}
.reminder-callout {padding:12px;background:#ead6ad;border:1px solid #cdb582;border-radius:16px;}
.reminder-lead {margin:0 0 12px;font-size:14px;font-weight:600;line-height:1.4;color:var(--red2);}
.reminder-switch-row {display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:400;line-height:1.4;}
.reminder-switch {appearance:none;flex:0 0 42px;width:42px;height:24px;min-height:0;border:0;border-radius:99px;background:#b7a98e;padding:3px;box-shadow:none;}
.reminder-switch span {display:block;width:18px;height:18px;background:white;border-radius:50%;box-shadow:0 1px 3px #0002;transition:transform .15s;}
.reminder-switch[aria-checked="true"] {background:var(--green);}
.reminder-switch[aria-checked="true"] span {transform:translateX(18px);}
.reminder-switch:disabled {background:#b5b5ae;opacity:1;cursor:not-allowed;}
.reminder-unlock {font-size:12px;line-height:1.4;color:var(--muted);margin:10px 0 0;}
.offering-note {padding:10px 12px;background:#fff3d7;border:1px solid #dcc392;border-radius:12px;font-size:12px;line-height:1.4;}
.offering-note p {margin:4px 0 0;}
.san-finish .offering-note {margin:9px 0;}
.mp-checkout {display:grid;gap:14px;text-align:center;}
.mp-checkout h2 {font-size:18px;margin:0;}
.mp-brand {justify-self:center;color:#007eb5;font-size:21px;letter-spacing:-.6px;}
.mp-brand b {color:#004c74;}
.mp-amount {margin:0;font-size:28px;font-weight:700;}
.mp-checkout p.small {margin:0;}
.mp-checkout-button {display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;padding:12px 14px;background:#009ee3;color:#fff;border:0;border-radius:10px;text-decoration:none;font-size:15px;font-weight:600;line-height:1.3;box-sizing:border-box;}
.mp-checkout-button:hover {background:#008ad0;}
.mp-pay-small {border:0;border-radius:8px;background:#009ee3;color:white;padding:7px 10px;font-size:11px;font-weight:600;white-space:nowrap;min-height:32px;}

.reminder-contact-fields {min-width:0;margin:0;padding:0;border:0;}
.reminder-contact-fields:disabled input {opacity:.55;}

/* Revision 284: one compact type/spacing scale, scoped to the closing screen. */
.peace-screen {font-size:14px;line-height:1.4;}
.peace-screen>.section {margin-top:12px;}
.peace-screen .pay-finish h2 {font-size:24px;font-weight:600;line-height:1.2;}
.peace-screen .pay-finish p,.peace-screen .small,.peace-screen .tiny,
.peace-screen .contact-ready,.peace-screen .finish-contact small,
.peace-screen .san-finish-state small,.peace-screen .privacy-note {font-size:12px;line-height:1.4;}
.peace-screen .finish-subtitle {font-size:12px;font-weight:400;margin:12px 0 6px;}
.peace-screen .debt {padding:10px;margin-bottom:8px;font-size:14px;}
.peace-screen .debt b {font-weight:600;}
.peace-screen .debt>.section {margin-top:6px;}
.peace-screen .debt:last-of-type {margin-bottom:0;}
.peace-screen .btn-sm,.peace-screen .mp-pay-small,.peace-screen .pay-small-action {font-size:12px;font-weight:600;min-height:34px;padding:6px 10px;border-radius:8px;}
.peace-screen .san-finish-title>b {font-size:14px;font-weight:600;}
.peace-screen .san-finish-state {margin-top:8px;font-size:14px;}
.peace-screen .san-finish-state b {font-weight:400;}
.peace-screen .contact-heading {display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;}
.peace-screen .contact-heading h3 {margin:0;flex-shrink:0;}
.peace-screen .contact-heading>span {font-size:14px;font-weight:400;min-width:0;text-align:right;overflow-wrap:anywhere;}
.contact-inline-field {display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid #ddcba8;border-radius:8px;padding:0 10px;}
.contact-inline-field:focus-within {outline:2px solid var(--teal);outline-offset:1px;}
.contact-inline-field input {width:100%;min-width:0;height:36px;min-height:36px;border:0;border-radius:0;background:transparent;padding:6px 0;font:inherit;font-size:14px;box-shadow:none;outline:none;}
.contact-saved {color:var(--green);font-size:14px;flex:0 0 auto;}
.peace-screen .finish-contact {font-size:14px;padding:8px 0;margin:0;gap:12px;}
.peace-screen .finish-contact b {font-weight:600;}
.peace-screen .finish-contact input {font-size:14px;height:36px;min-height:36px;padding:6px 8px;}
.peace-screen .privacy-note {margin:8px 0 0;}
.peace-screen .privacy-note .link {font:inherit;}
.peace-screen>.secondary {font-size:14px;font-weight:600;}
@media(pointer:coarse) { .contact-inline-field input,.peace-screen .finish-contact input {font-size:16px;height:40px;} }