/* Block J9.0 "Asumir deuda": the bottom sheet (ranking, profiles, libreta) and the small notes. Self-contained: the fallbacks
   keep it right on pages with either token set (home.css or juego/styles.css). */
.as-back { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .6); animation: as-fade 180ms ease-out; }
.as-sheet { position: fixed; left: 50%; bottom: 0; z-index: 61; width: min(100%, 560px); max-height: 92dvh; overflow-y: auto; transform: translateX(-50%);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: var(--night-2, #121838); border: 1px solid var(--line, rgba(201, 162, 75, .45)); border-bottom: 0;
  color: var(--ivory, #F2EDE4); font-family: var(--text, 'Inter', system-ui, sans-serif); font-size: 16px; line-height: 1.45; animation: as-up 220ms cubic-bezier(.2, .8, .2, 1); }
.as-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.as-head h2 { margin: 0; font-size: 19px; font-weight: 700; }
.as-x { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ivory, #F2EDE4); font-size: 26px; line-height: 1; cursor: pointer; }
.as-lead { margin: 0 0 12px; color: var(--ivory, #F2EDE4); }
.as-muted { margin: 6px 0 0; color: var(--muted, #B8BCD6); font-size: 14px; }
.as-label { display: block; margin: 14px 0 6px; color: var(--gold, #E8C476); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.as-sheet input, .as-sheet select { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line, rgba(201, 162, 75, .45)); background: rgba(7, 8, 15, .6); color: var(--ivory, #F2EDE4); font: inherit; font-size: 18px; font-variant-numeric: tabular-nums; }
.as-sheet input:focus-visible, .as-sheet select:focus-visible, .as-sheet button:focus-visible { outline: 2px solid var(--gold, #E8C476); outline-offset: 2px; }
.as-quick { display: flex; gap: 8px; margin-top: 10px; }
.as-chip { flex: 1 1 0; min-height: 44px; border-radius: 999px; border: 1px solid var(--line, rgba(201, 162, 75, .45)); background: transparent; color: var(--ivory, #F2EDE4); font: 600 15px var(--text, system-ui); cursor: pointer; }
.as-chip:active, .as-btn:active { transform: scale(.97); }
.as-preview { display: grid; gap: 6px; }
.as-prow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 8px 10px; border-radius: 12px; background: rgba(7, 8, 15, .45); border: 1px solid var(--line-soft, rgba(201, 162, 75, .2)); }
.as-prow b { flex: 1 0 100%; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-prow .as-arrow { color: var(--muted, #B8BCD6); }
.as-prow .as-amt:first-of-type { opacity: .75; }
.as-prow .as-amt:last-of-type { font-weight: 700; }
.as-amt { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 15px; }
.as-amt.pos { color: var(--pos, #7FE0A3); } .as-amt.neg { color: var(--neg, #FF9DAE); } .as-amt.zero { color: var(--muted, #B8BCD6); }
.as-confirm { min-height: 1.45em; margin: 12px 0 0; font-weight: 600; }
.as-error { margin: 8px 0 0; color: var(--neg, #FF9DAE); font-size: 14px; }
.as-ok { margin: 4px 0 0; font-weight: 700; color: var(--pos, #7FE0A3); }
.as-actions { display: flex; gap: 10px; margin-top: 16px; }
.as-btn { flex: 1 1 0; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid transparent; font: 700 16px var(--text, system-ui); cursor: pointer; }
.as-btn.gold { flex-grow: 2; background: linear-gradient(180deg, #FF9A3C 0%, var(--gold, #E8C476) 100%); color: var(--ink, #07080F); }
.as-btn.line { background: transparent; border-color: var(--brass, #C9A24B); color: var(--gold, #E8C476); }
.as-btn:disabled { opacity: .45; cursor: default; }
/* the note on ranking rows / profiles, and the row button */
.as-note { display: block; color: var(--gold, #E8C476); font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.as-open { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--brass, #C9A24B); background: transparent; color: var(--gold, #E8C476); font: 600 14px var(--text, system-ui); cursor: pointer; }
@keyframes as-up { from { transform: translate(-50%, 24%); opacity: .5; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes as-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .as-back, .as-sheet { animation: none; } .as-chip:active, .as-btn:active { transform: none; } }
/* J9.0.1 ranking rows (home.css has the two-line grid): the "Asumir ›" text link sits right-aligned on the SECOND line, same
   13 px line as "N partidas"; positioned over the row (outside the row link: never a nested control), hit area >= 44 px. */
.row { position: relative; }
.row.has-link .who .sub-line { padding-right: 76px; }
.as-link { position: absolute; z-index: 1; right: 6px; bottom: calc((68px - 30px * 1.45) / 2); height: calc(13px * 1.45); padding: 0; border: 0; background: transparent;
  color: var(--gold, #E8C476); font: 600 13px/1.45 var(--text, system-ui); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.as-link::after { content: ''; position: absolute; inset: -13px -6px -13px -14px; } /* 44 px tall hit area */
.as-link:focus-visible { outline: 2px solid var(--gold, #E8C476); outline-offset: 2px; border-radius: 4px; }
.pf-assume { margin-top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pf-assume .as-note { font-size: 14px; }