/* junta.top — Encueros redesign. Drop-in replacement for public/styles.css.
   Same selector contract as the current site; dark-only (no prefers-color-scheme fork). */

/* the two brand families are served from this site as variable latin woff2 files (OFL, see
   public/brand/fonts) and preloaded from each page's head, so first paint waits on no third party. */
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/brand/fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/brand/fonts/fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Paleta Encueros */
  --lila: #B886FF;
  --menta: #7EE0A8;
  --negro: #08080B;
  --marfil: #F6F1E6;
  --carbon: #1F1F1F;
  --lila-strong: #9D63F2;
  --lila-soft: rgba(184, 134, 255, .16);
  --menta-soft: rgba(126, 224, 168, .14);
  --coral: #FF8A7A;                 /* intentional addition: errors (no red in palette) */
  --coral-soft: rgba(255, 138, 122, .14);
  --marfil-70: rgba(246, 241, 230, .7);
  --marfil-55: rgba(246, 241, 230, .55);
  --marfil-16: rgba(246, 241, 230, .16);
  --marfil-6: rgba(246, 241, 230, .06);
  /* Semantic (keeps the old variable names used across the site) */
  --bg: var(--negro);
  --card: var(--carbon);
  --card-raised: #2A2A2C;
  --ink: var(--marfil);
  --muted: var(--marfil-70);
  --faint: var(--marfil-55);
  --accent: var(--lila);
  --accent-2: var(--menta);
  --accent-ink: var(--negro);
  --line: var(--marfil-16);
  --line-strong: rgba(246, 241, 230, .38);
  --error: var(--coral);
  --success: var(--menta);
  --radius: 24px;
  --radius-md: 16px;
  --radius-full: 999px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, .45);
  --focus-ring: 0 0 0 3px rgba(184, 134, 255, .4);
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-sans: 'Jost', system-ui, sans-serif;
  --tracking-caps: .22em;
  /* caps under 14 px keep less tracking so the letters still read as words. */
  --tracking-caps-sm: .12em;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--font-sans);
}

::selection { background: var(--lila); color: var(--negro); }

/* Brand: h1.brand / span.brand now hold the wordmark SVG image (see README §Assets).
   Keep the text inside as visually-hidden fallback for screen readers. */
.brand { margin: 0; line-height: 0; }
.brand img { width: 210px; height: 68px; object-fit: contain; }
.topbar .brand img { width: 130px; height: 42px; object-position: left; }
/* the brand is a link back to the events on most pages: it stays a 44 px target however small the logo. */
a.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand .sr-only-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* the event heading trio, shared by the list, checkout, order, ticket and event pages. */
.when {
  margin: 8px 0 0; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-caps-sm); color: var(--lila);
}
.title {
  margin: 6px 0; font-family: var(--font-display); font-weight: 500;
  font-size: 26px; color: var(--ink);
}
.where { margin: 0 0 10px; font-size: 14px; color: var(--muted); }

/* Caps label utility (tagline, section eyebrows) */
.caps, .tagline-caps {
  font-size: 12px; font-weight: 600;
  letter-spacing: var(--tracking-caps-sm); text-transform: uppercase;
  color: var(--muted);
}

a { color: var(--accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent-2); }
/* a link inside running text is underlined, so colour is not its only mark. */
p a:not(.pill):not(.more):not(.buy):not(.enter) { text-decoration: underline; text-underline-offset: 3px; }

button { font: inherit; cursor: pointer; white-space: nowrap; }

/* ── Buttons: pill shape, caps, brighten on hover, scale on press ── */
button[type="submit"], .buy, .enter, .admin button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  transition: transform .1s ease, filter .15s ease;
}
button[type="submit"]:hover:not(:disabled), .buy:hover, .enter:hover, .admin button:hover:not(:disabled) { filter: brightness(1.1); }
button[type="submit"]:active:not(:disabled), .buy:active, .enter:active, .admin button:active:not(:disabled) { transform: scale(.97); }

/* ── Login gate ── */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--bg); }
/* the ticket and event pages fill in after a request; anchored to the top, the card grows down
   instead of re-centring, so nothing on screen moves when the content arrives. */
.gate:has(#ticket, #details) { align-items: start; padding-top: 32px; }
/* while the ticket or the event is still being fetched, what follows it stays out of the layout,
   so the footer does not slide down when the content arrives. */
.card > [aria-busy="true"] ~ * { display: none; }

.card {
  width: 100%; max-width: 440px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 32px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.card .tagline { margin: 4px 0 24px; color: var(--faint); font-size: 15px; }

.stack {
  /* the one column never grows past the form: an intrinsic-size item cannot push inputs into the padding. */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; text-align: left;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 24px;
}
.stack label { display: grid; gap: 6px; }
.stack label > span, .stack label {
  font-size: 13px; font-weight: 600;
  letter-spacing: var(--tracking-caps-sm); text-transform: uppercase;
  color: var(--muted);
}
.stack input {
  min-width: 0; width: 100%;
  font: 16px/1.5 var(--font-sans); letter-spacing: normal; text-transform: none;
  color: var(--ink); background: var(--card);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.stack input:focus { outline: none; border-color: var(--lila); box-shadow: var(--focus-ring); }
.stack button[type="submit"] {
  margin: 4px auto 0; width: max-content;
  background: var(--lila); color: var(--negro); border: 1.5px solid transparent;
}
.stack button[disabled] { opacity: .45; cursor: not-allowed; }
/* a field with its hint right under it, and a password field with its show toggle. */
.stack .field { display: grid; gap: 6px; }
.stack .field .what { margin: 0; }
.password { display: flex; gap: 8px; }
.password input { flex: 1 1 auto; }
.reveal {
  flex: none; min-height: 44px; padding: 0 14px;
  background: transparent; color: var(--muted); border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md); font-size: 13px; font-weight: 600;
  letter-spacing: var(--tracking-caps-sm); text-transform: uppercase;
}
.reveal:hover { color: var(--ink); }
.field-error { margin: 0; color: var(--coral); font-size: 14px; }
.switch { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.what { font-size: 13px; color: var(--muted); }
.message { min-height: 1.5em; margin: 14px 0 0; color: var(--coral); font-size: 14px; }

/* ── Members landing ── */
/* the topbar: brand and username on the left, a row of ghost pills on the right that wraps
   under the brand on narrow screens. every pill is at least 44 px tall. */
.topbar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px 20px; padding: 16px 24px; border-bottom: 1px solid var(--line);
}
.identity { display: grid; gap: 4px; }
.who { color: var(--muted); font-size: 14px; }
.who strong { color: var(--ink); }
.topnav { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border-radius: var(--radius-full);
  background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong);
  font: 600 14px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.pill:hover { color: var(--lila); border-color: var(--lila); }

.content { max-width: 720px; margin: 0 auto; padding: 32px 24px 64px; }
.content h1 {
  font-family: var(--font-display); font-weight: 600; font-size: 34px;
  color: var(--ink); margin: 0 0 24px;
}
/* in-page links from the topbar land with a little air above the heading. */
.content h1, .content section { scroll-margin-top: 16px; }

.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.event {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
}
/* posters keep a 4:5 box whatever the file's size, so the card height is known before it loads. */
.event .poster { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); margin: 0 0 14px; }
.event-body { min-width: 0; }
@media (min-width: 760px) {
  .event.with-poster { display: grid; grid-template-columns: 2fr 3fr; gap: 24px; align-items: start; }
  .event.with-poster .poster { margin: 0; }
}
/* phones: the poster keeps to a 40 % column beside the heading trio, whole and about 170 px tall,
   and the actions take the full width under both, so the first buy button lands inside one screen. */
@media (max-width: 759px) {
  .event.with-poster { display: grid; grid-template-columns: 2fr 3fr; gap: 12px 14px; align-items: start; }
  .event.with-poster .event-body { display: contents; }
  .event.with-poster .poster { grid-row: 1 / span 4; margin: 0; }
  .event.with-poster .when { margin-top: 0; }
  .event.with-poster .title { font-size: 22px; }
  .event.with-poster .where { margin-bottom: 4px; }
  .event.with-poster .actions { grid-column: 1 / -1; margin-top: 4px; }
}
/* the narrowest phones: the date line runs above the poster, only the title sits beside it, and
   the topbar, banner, chip and heading give up their slack, so the buy button still lands inside
   a 700 px screen. */
@media (max-width: 360px) {
  .topbar { padding: 10px 16px; gap: 8px 12px; }
  .topbar .brand img { width: 110px; height: 36px; }
  .identity { grid-template-columns: auto auto; align-items: center; gap: 10px; }
  .pill { padding: 0 12px; font-size: 13px; }
  .content { padding: 12px 16px 48px; }
  .content h1 { font-size: 28px; margin-bottom: 10px; }
  .loyalty, .chip { margin-bottom: 12px; padding: 10px 14px; font-size: 13px; }
  .loyalty::before { display: none; }
  .event { padding: 16px; }
  .event.with-poster { grid-template-columns: 1fr 2fr; gap: 8px 12px; }
  .event.with-poster .when { grid-column: 1 / -1; }
  .event.with-poster .poster { grid-row: 2 / span 1; }
  .event.with-poster .title { font-size: 20px; margin: 0; }
  .event.with-poster .where, .event.with-poster .price { grid-column: 1 / -1; margin: 0; }
  .event.with-poster .actions { gap: 8px; margin-top: 4px; }
}
.event .what { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.event .price { margin: 12px 0 0; font-weight: 600; font-size: 16px; }
.event .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
/* secondary links sit in the actions row, tall enough to tap. */
.more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 14px; }
.event .actions .more { margin: 0; }
.event .more + .more { margin-left: 12px; }
.empty { color: var(--faint); padding: 24px 0; }

.buy { background: var(--lila); color: var(--negro); border: 1.5px solid transparent; text-decoration: none; margin-top: 10px; }
.event .actions .buy { margin-top: 0; }
.enter { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); text-decoration: none; }
.enter:hover { color: var(--ink); }

/* Loyalty banner */
.loyalty {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px; padding: 14px 20px;
  border-radius: var(--radius-md);
  background: var(--menta-soft); border: 1px solid var(--menta);
  color: var(--menta); font-size: 14px;
}
.loyalty::before {
  content: ''; width: 26px; height: 26px; flex: none;
  background: url('/brand/logo-snake-menta.svg') center / contain no-repeat;
}

/* the tickets chip: one line under the loyalty banner that jumps to the member's codes. */
.chip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  min-height: 44px; margin: 0 0 20px; padding: 10px 18px;
  border-radius: var(--radius-md); background: var(--lila-soft); border: 1px solid var(--lila);
  color: var(--ink); font-size: 14px;
}
.chip:hover { color: var(--ink); }
.chip-action { margin-left: auto; color: var(--lila); font-weight: 600; }

/* the checkout summary: a poster thumbnail beside the event's heading trio. */
.summary.with-thumb { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; }
.summary .thumb { width: 64px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }
.summary .when { margin-top: 0; }

/* Card forms (checkout etc.) */
.card-form {
  margin-top: 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 24px;
}
.card-form select {
  width: 100%; max-width: 100%; min-width: 0;
  font: 16px/1.5 var(--font-sans); color: var(--ink); background: var(--card);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-md);
  padding: 12px 44px 12px 18px; appearance: none;
  /* appearance: none drops the native arrow, so a chevron says this is a menu. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23F6F1E6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card-form select:focus { outline: none; border-color: var(--lila); box-shadow: var(--focus-ring); }
.card-form .total {
  margin: 0; display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px solid var(--line); padding-top: 16px;
}
.card-form .total strong { font-family: var(--font-display); font-weight: 600; font-size: 28px; color: var(--menta); }
.card-form button.secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); }
/* an empty message reserves no room, so the form ends at its last button. */
.card-form .message:empty { min-height: 0; margin: 0; }

/* Ticket codes: one tappable row per ticket. a code never breaks mid-code; the tag wraps to its
   own line instead. */
.codes { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.codes li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ticket-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  width: 100%; min-height: 44px; padding: 6px 14px; border-radius: var(--radius-md);
  background: var(--marfil-6); color: var(--lila); transition: background .15s ease;
}
.ticket-row:hover { background: var(--lila-soft); color: var(--lila); }
.ticket-row.used { color: var(--faint); }
.codes .tag.action { color: var(--negro); background: var(--lila); }
.past-orders summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--muted); font-size: 15px; }
.past-orders .events { margin-top: 16px; }
.code { font-family: var(--font-sans); font-size: clamp(14px, 4.2vw, 17px); font-weight: 500; letter-spacing: .04em; white-space: nowrap; overflow-wrap: normal; }
.codes .tag { font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-caps-sm); text-transform: uppercase; color: var(--muted); background: var(--marfil-6); border-radius: var(--radius-full); padding: 4px 12px; }

/* the order page while a payment is being checked: a pulsing dot and a counter. */
.pending { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--menta); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

/* the gate pages' shared way out: the member's codes, or the login. */
.gate-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 24px 0 0; }

/* ── Ticket page ── */
.ticket { text-align: center; }
.ticket .qr {
  margin: 16px auto 8px; max-width: 240px;
  background: var(--marfil); border-radius: var(--radius);
  padding: 20px; box-shadow: 0 12px 40px rgba(184, 134, 255, .18);
}
.ticket .qr svg { width: 100%; height: auto; display: block; }
.ticket .big { font-size: clamp(16px, 5.5vw, 20px); font-weight: 600; letter-spacing: .06em; margin: 8px 0; }
.ticket .banner {
  margin: 12px 0 0; padding: 8px 16px; border-radius: var(--radius-full);
  background: var(--coral-soft); color: var(--coral);
  font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-caps-sm); text-transform: uppercase;
}

/* ── Event page ── */
.event-page { text-align: left; }
.event-page .title { margin: 4px 0; }
.event-page .details {
  white-space: pre-line; margin: 16px 0 0; padding: 18px 20px;
  border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--line);
  font-size: 15px; line-height: 1.6;
}

/* ── Shared admin/table ── */
.section { font-family: var(--font-display); font-weight: 500; font-size: 22px; margin: 28px 0 8px; }
.result { margin-top: 16px; border-radius: var(--radius); padding: 28px; border: 1.5px solid var(--line); background: var(--card); }
.result .headline { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 30px; }
.result.ok { border-color: var(--menta); }
.result.bad { border-color: var(--coral); }
.result.warn { border-color: var(--lila); }

.choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.choice legend { padding: 0; margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-caps-sm); text-transform: uppercase; color: var(--muted); }
.choice label { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--ink); }

.table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; }
.table th, .table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); }
.table th { font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-caps-sm); text-transform: uppercase; color: var(--muted); }
.table .num { text-align: right; }
.table button.small {
  background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-full); min-height: 44px; padding: 8px 16px; font-size: 13px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.table-wrap { overflow-x: auto; }

button:focus-visible, a.buy:focus-visible, a.enter:focus-visible, a.more:focus-visible,
input:focus-visible, select:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}

/* ── Administration ── */
.admin-content { max-width: 1280px; margin: auto; padding: 32px 40px 64px; }
.admin h1 { font: 600 34px/1.2 var(--font-display); margin: 0 0 12px; }
.admin h2 { font-family: var(--font-display); font-weight: 500; font-size: 22px; margin: 24px 0 8px; }
.admin h3 { font-family: var(--font-display); font-weight: 500; font-size: 18px; margin: 16px 0 8px; }
.admin h4 { margin: 0; font-size: 16px; }
.admin .card-form h3 { margin: 0; }
.admin label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-caps-sm); text-transform: uppercase; color: var(--muted); }
.admin input:not([type=radio]):not([type=checkbox]), .admin select {
  width: 100%; min-width: 0; min-height: 50px;
  font: 16px/1.5 var(--font-sans); letter-spacing: normal; text-transform: none;
  color: var(--ink); background: var(--card);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); padding: 12px 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.admin input:focus, .admin select:focus { outline: none; border-color: var(--lila); box-shadow: var(--focus-ring); }
.admin input[type=radio], .admin input[type=checkbox] { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--lila); }
.admin button { min-height: 44px; border: 1.5px solid transparent; background: var(--lila); color: var(--negro); }
.admin button.secondary { background: var(--menta); color: var(--negro); }
.admin button.ghost, .admin button.link { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.admin button:disabled { opacity: .45; cursor: wait; }
.admin :is(a, button, input, select, summary):focus-visible { outline: none; box-shadow: var(--focus-ring); }
.admin .choice label, .admin .check-label { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 16px; letter-spacing: normal; text-transform: none; font-weight: 400; color: var(--ink); }
.admin .what { color: var(--faint); }
.admin .what { font-size: 14px; margin: 0; }
/* the label keeps its line before the event name arrives, so the forms under it do not move. */
.admin .event-label { color: var(--muted); margin: 0 0 12px; min-height: 1.5em; }

/* the admin bar: one compact row (event, counts, refresh) with the tab bar under it, stuck to the
   top so the tabs are reachable from anywhere. admin.js writes its measured height to --admin-bar,
   which the scroll margins below use. */
.admin-bar { position: sticky; top: 0; z-index: 2; margin: 0 -8px; padding: 8px 8px 10px; background: var(--bg); }
.event-context {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 64px; padding: 8px 10px;
  background: var(--card-raised); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.admin .event-context select { flex: 1 1 200px; width: auto; max-width: max-content; min-height: 44px; padding: 8px 40px 8px 14px; text-overflow: ellipsis; }
/* the count row keeps its height before the pills arrive, so the panels below do not move. */
.event-context #counts { margin: 0; min-height: 26px; font-variant-numeric: tabular-nums; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* non-interactive counts have their own styling, separate from navigation buttons. */
.event-context #counts .count-badge {
  display: inline-flex; align-items: center; justify-content: center; min-height: 0; padding: 4px 12px; border: 0; border-radius: var(--radius-full);
  font: 600 12px/1.5 var(--font-sans); letter-spacing: var(--tracking-caps-sm); text-transform: uppercase;
}
/* a lighter lila wash than --lila-soft keeps the lila text above 4.5:1 on the raised bar. */
.event-context #counts .count-badge.issued { background: rgba(184, 134, 255, .08); color: var(--lila); }
.event-context #counts .count-badge.admitted { background: var(--menta-soft); color: var(--menta); }
.admin .event-context > button { margin-left: auto; min-height: 44px; min-width: 44px; padding: 0 12px; background: transparent; color: var(--ink); border-color: var(--line-strong); }
.admin .page-message { margin: 8px 0 0; min-height: 20px; font-size: 13px; }

/* Admin nav: pill tab bar (four feature tabs: Entrada / Consumos / Socios / Boletos y premios) */
.admin-nav {
  display: flex; gap: 4px; margin: 10px 0 0; width: max-content; max-width: 100%;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-full); padding: 4px;
}
.admin-nav a {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  padding: 0 20px; min-height: 40px; border-radius: var(--radius-full);
  text-decoration: none; border: 0; color: var(--muted);
  font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  transition: background .15s ease, color .15s ease;
}
.admin-nav a:hover { color: var(--ink); }
.admin-nav a[aria-current] { background: var(--lila); color: var(--negro); }

.admin-panel { scroll-margin-top: calc(var(--admin-bar, 130px) + 8px); }
.admin :is(input, button, select, h2, summary) { scroll-margin-top: calc(var(--admin-bar, 130px) + 16px); scroll-margin-bottom: 32px; }
.door-grid, .form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.admin .card-form { margin-top: 0; min-width: 0; border-radius: var(--radius); padding: 28px; }
.admin .stack { gap: 18px; background: transparent; border: 0; padding: 0; }
.narrow-form { max-width: 560px; }
.admin .result { margin: 0; min-height: 180px; overflow-wrap: anywhere; }
.admin .message { overflow-wrap: anywhere; color: var(--muted); }
.admin .message[data-tone=success] { color: var(--menta); }
.admin .message[data-tone=error], .admin .field-error { color: var(--coral); }
.admin .message[data-tone=warning] { color: var(--lila); }
.admin [aria-invalid=true] { border: 2px solid var(--coral) !important; }
.admin .field-error { font-size: 14px; }
.review-summary { margin: 0; border-left: 3px solid var(--lila); padding: 12px 16px; background: var(--lila-soft); border-radius: 0 var(--radius-md) var(--radius-md) 0; overflow-wrap: anywhere; }
.toolbar { display: flex; gap: 16px; flex-wrap: wrap; margin: 20px 0 12px; }
.toolbar label { flex: 1 1 240px; }
.search-label { max-width: 420px; }
.admin .table { margin-bottom: 24px; }
.admin .table td { vertical-align: top; padding: 14px 12px; overflow-wrap: anywhere; }
.admin .table th { padding: 10px 12px; }
.admin .table td:last-child { max-width: 330px; }
.admin .table td button { margin: 0 8px 8px 0; }
.admin .cell-detail { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.admin tr.selected-tab, .admin tr[aria-selected=true] { background: var(--lila-soft); }
.admin tr.selected-tab td:first-child { color: var(--lila); font-weight: 600; }
.admin summary { cursor: pointer; min-height: 44px; padding: 10px 0; color: var(--lila); }
.admin details p { margin-top: 0; overflow-wrap: anywhere; }
.admin .order-list { list-style: none; padding: 0; display: grid; gap: 16px; }
.admin .order-list p { overflow-wrap: anywhere; }
.admin dialog {
  width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
}
.admin dialog::backdrop { background: rgba(8, 8, 11, .7); backdrop-filter: blur(6px); }
.admin dialog h2 { margin: 0; }
.admin dialog p { overflow-wrap: anywhere; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { display: block; padding: 12px; background: var(--card); }

/* Consumption workspace */
.admin .consumption-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
.admin .consumption-roster, .admin .consumption-workspace { min-width: 0; }
.admin .consumption-workspace {
  display: grid; gap: 18px;
  background: var(--card-raised); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 28px;
}
.admin .tab-balance {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--coral);
  padding-block: 14px; border-block: 1px solid var(--line);
}
.admin .quick-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.admin .quick-products button {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 8px; min-height: 96px;
  background: var(--card); color: var(--ink); border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .15s ease, color .15s ease;
}
.admin .quick-products button:hover { border-color: var(--lila); color: var(--lila); filter: none; }
.admin .quick-products strong { font-family: var(--font-display); font-weight: 600; font-size: 22px; }
.admin .quick-products span { font-size: 13px; }
.admin .tab-history ol { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow: auto; }
.admin .tab-entry { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.admin .tab-entry > strong { white-space: nowrap; color: var(--ink); }
.admin .product-count { display: inline-block; border: 1.5px solid var(--line-strong); border-radius: var(--radius-full); padding: 6px 14px; margin: 0 6px 8px 0; font-size: 13px; }
.admin .selected-tab { outline: 2px solid var(--lila); outline-offset: -2px; }
.admin #guests { margin-top: 28px; }
.admin #debt-message:empty, .admin #product-totals:empty { display: none; }

/* Responsive */
/* phones: the gate is the inner form card alone (the outer frame and its side padding go), and
   a primary action spans the width so it lands under the thumb. */
@media (max-width: 480px) {
  .gate { padding: 0; }
  .card { max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: 32px 16px 40px; }
  .stack, .card-form { padding: 24px 18px; }
  button[type="submit"], .buy, .enter, .stack button[type="submit"] { width: 100%; }
}
@media (min-width: 761px) {
  .admin .consumption-roster .toolbar { flex-wrap: wrap; }
  .admin #attendees td { padding: 12px 8px; }
  .admin #attendees td:last-child button { display: block; width: 100%; margin-bottom: 6px; font-size: 13px; }
  .admin #attendees .cell-detail { overflow-wrap: anywhere; }
}
@media (max-width: 1000px) {
  .admin .consumption-layout { grid-template-columns: 1fr; }
  .admin .consumption-roster .table-wrap { max-height: 420px; overflow: auto; }
}
@media (max-width: 760px) {
  .admin-content { padding: 20px 16px 48px; }
  .door-grid, .form-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .admin-bar { margin: 0 -16px; padding: 6px 12px; }
  /* select and refresh share the first line, the count pills take the second. */
  .event-context { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 6px; gap: 6px; min-height: 0; }
  .admin .event-context select { width: 100%; max-width: none; }
  .event-context #counts { grid-column: 1 / -1; grid-row: 2; }
  .admin .event-context > button { margin: 0; grid-column: 2; grid-row: 1; }
  /* the tabs stay on one row and scroll sideways, so the bar keeps its height on a phone. */
  .admin-nav { width: auto; overflow-x: auto; scrollbar-width: none; }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav { margin-top: 6px; padding: 3px; }
  .admin-nav a { flex: 1 0 auto; font-size: 13px; padding: 0 14px; min-height: 40px; }
  .admin .table-wrap { overflow: visible; }
  .responsive-table, .responsive-table tbody { display: block; }
  .responsive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .responsive-table tr {
    display: block; border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 14px; margin-bottom: 12px; background: var(--card);
  }
  .admin .responsive-table td { display: block; border: 0; padding: 6px 0; max-width: none; }
  .responsive-table td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-caps-sm); text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
  .admin .card-form { padding: 18px; }
  .admin .code { font-size: 15px; overflow-wrap: anywhere; }
}
@media (max-height: 700px) {
  .admin-bar { position: static; }
  .admin-panel, .admin :is(input, button, select, h2, summary) { scroll-margin-top: 16px; }
}
/* a reader who asked for less motion gets none: no smooth scrolls, transitions or pulses. */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* camera qr scanner, added after the original design; buttons inherit the ghost pill style. */
.scanner { display: grid; gap: 10px; }
.scanner video { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--radius-md); background: #000; }

/* the one way to reach the team, at the foot of every member page. */
.contact { margin: 40px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.card .contact { margin-top: 20px; }