/* Club Mocha (v1.1, redrawn in v1.25): what the shared panel does not know. The studio's own marks, never tenant-overridable:
   espresso, crema and caramel from the brand kit; the logo is the seal wordmark of 2026-10-21 (resources/panel/mochaclub-*). */

/* Sign in: Club Mocha on espresso with its own liquid, the form on glass. */
.club-auth .auth { --p-brand: var(--club-espresso); --p-brand-ink: var(--club-cream); --p-accent: var(--club-caramel); }
.club-auth .auth .btn--primary:hover { background: #2a221d; }
.club-auth__context { background: var(--club-espresso); color: var(--club-cream); align-items: flex-start; justify-content: center; gap: 20px; padding: 64px clamp(32px, 6vw, 72px) 96px; }
.club-auth__context::before, .club-auth__context::after { content: ''; position: absolute; z-index: -1; inset: -30%; pointer-events: none; will-change: transform; }
.club-auth__context::before { background: radial-gradient(38% 36% at 24% 28%, rgb(200 150 106 / .55), transparent 70%), radial-gradient(30% 30% at 78% 72%, rgb(122 85 65 / .6), transparent 70%); animation: drift-a 30s ease-in-out infinite alternate; }
.club-auth__context::after { background: radial-gradient(26% 26% at 70% 24%, rgb(245 238 228 / .14), transparent 70%); animation: drift-b 42s ease-in-out infinite alternate; }
.club-auth__logo { width: min(260px, 70%); height: auto; animation: page-in 600ms var(--ease-out) both; }
.club-auth__claim { margin: 0; max-width: 22ch; font-family: var(--p-display); font-weight: 400; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; animation: page-in 600ms var(--ease-out) 80ms both; }
.club-auth__claim b { font-weight: 600; color: var(--club-caramel); }
.club-auth__by { position: absolute; left: clamp(32px, 6vw, 72px); bottom: 28px; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--club-muted, #b8a999); }
.club-auth__by img { width: 84px; height: auto; opacity: .85; }
@media (max-width: 900px) {
  .club-auth__context { padding: 22px 20px; gap: 12px; align-items: center; }
  .club-auth__logo { width: 150px; }
  .club-auth__claim { display: none; }
  .club-auth__by { position: static; }
}

/* The business chooser, on the sign-in layout. */
.club-businesses { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.club-businesses__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); background: rgb(255 255 255 / .5); color: inherit; text-decoration: none; transition: border-color .15s, background-color .15s, transform 220ms var(--ease-spring); }
.club-businesses__item:hover, .club-businesses__item:focus-visible { border-color: var(--club-caramel); background: var(--p-solid); transform: translateX(3px); }
.club-businesses__item > span:nth-child(2) { flex: 1; display: grid; min-width: 0; }
.club-businesses__item small { color: var(--p-muted); overflow-wrap: anywhere; }

/* v1.24: the top-up screen's title letter, each option written in itself. */
@font-face { font-family: "Anton"; src: url("anton-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
.choice-font--anton span { font-family: "Anton", var(--p-display), sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.choice-font--club span { font-family: var(--p-display); font-weight: 800; }

/* v1.34: the central site's signed-in pages (Tu cuenta, the legal pages): the panel's skin without a sidebar. */
.central-body .central-main { max-width: 860px; padding-top: 20px; }
.central-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(16px, 3vw, 40px); background: var(--p-surface-strong); border-bottom: 1px solid var(--p-line); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); }
.central-bar__brand img { width: 150px; height: auto; }
.central-bar__nav { display: flex; align-items: center; gap: 4px 18px; font-size: 13px; }
.central-bar__nav a { text-decoration: none; color: var(--p-muted); padding: 6px 2px; }
.central-bar__nav a[aria-current], .central-bar__nav a:hover { color: var(--p-ink); text-decoration: underline; text-underline-offset: 6px; }
.central-bar__nav form { display: contents; }
.central-main .main__foot a { color: inherit; }
@media (max-width: 760px) { .central-bar { padding: 10px 14px; } .central-bar__brand img { width: 118px; } .central-bar__nav { gap: 2px 12px; } }

/* The mailed code, the authenticator's code: big, monospaced, one glance. */
.code-field { font-family: var(--p-mono); font-size: 26px; letter-spacing: .3em; text-align: center; padding-left: .3em; }
.code-field--small { font-size: 18px; letter-spacing: .2em; }
.auth__passkey { display: grid; gap: 10px; margin-bottom: 18px; }
.totp-setup { display: grid; gap: 12px; justify-items: start; }
.totp-qr { width: min(240px, 100%); padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--p-line); }
.totp-qr svg { display: block; width: 100%; height: auto; }
.totp-secret { font-size: 14px; letter-spacing: .08em; overflow-wrap: anywhere; margin: 0; }
.codes { margin: 0; padding: 0 0 0 22px; columns: 2; column-gap: 28px; font-size: 17px; line-height: 2; letter-spacing: .06em; }
.passkeys { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.passkeys > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); background: rgb(255 255 255 / .5); }
.passkeys > li > span { display: grid; min-width: 0; }
.passkeys small { color: var(--p-muted); }
.passkeys__remove > summary { list-style: none; cursor: pointer; }
.passkeys__remove > summary::-webkit-details-marker { display: none; }
.passkeys__remove[open] { flex-basis: 100%; }
.passkeys__remove[open] > summary { margin-bottom: 10px; }
.passkeys__add .actions { align-self: end; min-height: 42px; }

/* The legal pages: one column, readable, the sections numbered like a contract. */
.legal-doc { max-width: 760px; }
.legal-doc h2 { font-size: 17px; margin: 26px 0 8px; }
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc p, .legal-doc li { line-height: 1.6; }
.legal-doc p { margin: 0 0 10px; }
.legal-doc ul { margin: 0 0 10px; padding-left: 20px; }
.legal-doc table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 13px; }
.legal-doc th, .legal-doc td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--p-line); }
.legal-doc th { font-weight: 600; }
.legal-doc .eyebrow { margin-bottom: 14px; }