/* debar club: colores de la carta, suavizados */
:root {
  --bg: #0e0e0e;
  --bg-nav: #080808;
  --card: #1b1b1b;
  --line: #333;
  --line-soft: #1f1f1f;
  --text: #f5f5f5;
  --text-soft: #d4d4d4;
  --muted: #a3a3a3;
  --yellow: #f0ea2e;
  --ink: #0e0e0e;
  --danger: #ff8a80;
  --f-title: "Anton", Impact, sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Special Elite", "Courier New", monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font-family: var(--f-body); font-size: 16px; line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
img { max-width: 100%; }

#app { width: min(480px, 100%); margin: 0 auto; min-height: 100vh; position: relative; padding-bottom: 96px; }
.screen { animation: fade .15s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Encabezado ---------- */
.top { display: flex; align-items: center; justify-content: space-between; padding: 28px 22px 0; }
.top img { height: 30px; width: auto; display: block; }
.top .hello { font-size: 15px; color: var(--muted); }
.badge-owner { font-family: var(--f-mono); font-size: 12px; color: var(--ink); background: var(--yellow); padding: 3px 8px; }
.back { display: flex; align-items: center; gap: 8px; margin: 16px 22px 0; color: var(--muted); font-size: 15px; background: none; border: 0; padding: 8px 0; }
.h2 { font-family: var(--f-title); font-size: 18px; letter-spacing: 1px; text-transform: uppercase; font-weight: 400; margin: 0; }
.h1 { font-family: var(--f-title); font-size: 34px; line-height: 1.05; text-transform: uppercase; font-weight: 400; margin: 0; }
.mono { font-family: var(--f-mono); }
.label { font-family: var(--f-mono); font-size: 12px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.muted { color: var(--muted); }
.sec { margin: 16px 22px 0; }
.sec > .h2 { margin-bottom: 10px; }

/* ---------- Botones ---------- */
.btn {
  width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--yellow); color: var(--ink); border: 0; border-radius: 2px;
  font-weight: 700; font-size: 17px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
}
.btn.line { background: transparent; color: var(--text); border: 1px solid #555; }
.btn.ghost { background: transparent; color: var(--yellow); border: 1.5px solid var(--yellow); }
.btn.soft { background: transparent; color: var(--yellow); border: 1.5px solid #4a4a4a; min-height: 38px; font-size: 15px; margin-top: 8px; }
.btn.small { min-height: 44px; width: auto; padding: 0 14px; font-size: 14px; }
.btn[disabled] { opacity: .45; cursor: default; }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid #5a2c28; }
.linkbtn { background: none; border: 0; color: var(--muted); text-decoration: underline; padding: 10px; font-size: 14px; }

/* ---------- Tarjetas ---------- */
.card { padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 2px; }
.points { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.points b { font-family: var(--f-title); font-size: 64px; line-height: 1; font-weight: 400; }
.points span { font-size: 18px; color: var(--muted); }
.bar { margin-top: 10px; height: 10px; background: var(--line); border-radius: 1px; }
.bar i { display: block; height: 10px; background: var(--yellow); border-radius: 1px; }
.note { margin-top: 10px; font-size: 14px; color: var(--muted); }
.callout { padding: 12px 14px; background: var(--card); border-left: 3px solid var(--yellow); font-size: 14px; color: var(--text-soft); }
.toast { margin: 12px 22px 0; padding: 10px 12px; background: var(--card); border-left: 3px solid var(--yellow); display: flex; align-items: center; gap: 10px; }
.toast .t { flex: 1; font-size: 15px; }
.toast a, .toast button { color: var(--yellow); font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; background: none; border: 0; text-decoration: none; padding: 0; }
.toast .x { color: var(--muted); font-size: 18px; letter-spacing: 0; }
.err { margin: 12px 22px 0; padding: 10px 12px; border-left: 3px solid var(--danger); background: #2a1715; color: #ffd0cb; font-size: 14px; }
.okmsg { margin: 12px 22px 0; padding: 10px 12px; border-left: 3px solid var(--yellow); background: var(--card); font-size: 14px; }

/* ---------- Premios ---------- */
.reward { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1.5px dashed #4a4a4a; border-radius: 2px; color: var(--muted); }
.reward.can { border-style: solid; border-color: var(--line); color: var(--text); }
.thumb { flex: none; width: 52px; height: 52px; object-fit: cover; background: #222; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 10px; color: #6b6b6b; }
.reward .name { font-weight: 700; font-size: 17px; }
.reward .pts { font-size: 13px; margin-top: 2px; color: var(--muted); }
.reward .grow { flex: 1; min-width: 0; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 8px 22px; border-bottom: 1px solid var(--line-soft); }
.list-row .thumb { width: 56px; height: 56px; }
.list-row .name { font-weight: 700; font-size: 16px; }
.list-row .pts { font-size: 13px; color: var(--muted); margin-top: 1px; }
.list-row.off { opacity: .55; }
.list { border-top: 1px solid var(--line-soft); }
.pills { display: flex; gap: 8px; margin: 12px 22px 10px; }
.pill { padding: 8px 14px; border: 1px solid #4a4a4a; font-weight: 600; font-size: 14px; color: var(--text-soft); background: none; border-radius: 0; }
.pill.on { background: var(--yellow); color: var(--ink); border-color: var(--yellow); font-weight: 700; }
.chip { padding: 4px 10px; background: var(--card); border: 1px solid var(--line); font-family: var(--f-mono); font-size: 13px; }
.chip b { color: var(--yellow); font-weight: 400; }

/* ---------- Eventos ---------- */
.event { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 7px 14px 7px 8px; background: var(--card); border-radius: 2px; }
.event:first-of-type { margin-top: 0; }
.date { width: 54px; flex: none; text-align: center; padding: 6px 0; background: var(--yellow); color: var(--ink); border-radius: 2px; }
.date b { display: block; font-family: var(--f-title); font-weight: 400; font-size: 26px; line-height: 1; }
.date span { font-family: var(--f-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.event .t { font-weight: 700; font-size: 16px; }
.event .d { font-size: 14px; color: var(--muted); }
.month { margin: 18px 22px 8px; }

/* ---------- Visitas y polaroids ---------- */
.stats { display: flex; gap: 10px; margin: 10px 22px 0; }
.stat { flex: 1; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 2px; }
.stat b { display: block; font-family: var(--f-title); font-weight: 400; font-size: 34px; line-height: 1; }
.stat span { font-size: 13px; color: var(--muted); }
.pols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; padding: 24px 22px 0; }
.pols .pol:nth-child(odd) { transform: rotate(-3deg); }
.pols .pol:nth-child(even) { transform: rotate(3deg); margin-top: 22px; }
.pol {
  position: relative; background: #f5f5f5; color: #0e0e0e; padding: 8px 8px 12px; box-shadow: 0 4px 10px rgba(0,0,0,.6);
  display: block; border: 0; text-align: left; width: 100%;
}
.pol .ph { aspect-ratio: 1; background: linear-gradient(135deg, #333, #555); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pol .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pol .ph.empty { background: #1b1b1b; border: 1.5px dashed var(--yellow); color: var(--yellow); flex-direction: column; gap: 6px; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.pol .foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 8px; }
.pol .dt { font-family: var(--f-mono); font-size: 13px; }
.pol .pick { width: 22px; height: 22px; opacity: .8; }
.pol.big { width: 300px; margin: 18px auto 0; padding: 12px 12px 18px; transform: rotate(-2deg); box-shadow: 0 8px 22px rgba(0,0,0,.65); }
.pol.big .ph { aspect-ratio: 1; }
.pol.big .dt { font-size: 22px; }
.pol.big .pick { width: 34px; height: 34px; }
.moves .row { display: flex; justify-content: space-between; padding: 10px 22px; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.moves .row .d { color: var(--muted); font-size: 13px; }
.moves .plus { color: var(--yellow); font-weight: 700; }
.moves .minus { color: var(--text-soft); font-weight: 700; }

/* ---------- Campera y parches ---------- */
.jacket { position: relative; margin: 14px 22px 0; aspect-ratio: 346 / 560; border: 1px solid var(--line); overflow: hidden; background: #0e0e0e; }
.jacket > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.patch { position: absolute; background: none; border: 0; padding: 0; }
.patch img { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 5px rgba(0,0,0,.85)); }
.patch.locked img { filter: grayscale(1) brightness(.75) drop-shadow(0 2px 4px rgba(0,0,0,.7)); opacity: .45; }
.patch .dash { position: absolute; inset: 0; border: 2px dashed rgba(245,245,245,.6); box-sizing: border-box; pointer-events: none; }
.patch.round .dash { border-radius: 50%; }
.patch.rect .dash { border-radius: 8px; }
.sheet-back { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: min(480px, 100%); background: #151515; border-top: 1px solid var(--line); padding: 22px 22px 28px; animation: up .18s ease-out; max-height: 92vh; overflow: auto; }
@keyframes up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet .pimg { display: block; margin: 0 auto; max-height: 190px; width: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.7)); }
.sheet .pimg.locked { filter: grayscale(1) brightness(.75); opacity: .5; }
.sheet h3 { font-family: var(--f-title); font-weight: 400; font-size: 26px; text-transform: uppercase; text-align: center; margin: 16px 0 6px; }
.sheet p { text-align: center; color: var(--text-soft); margin: 0 0 6px; }

/* ---------- Formularios ---------- */
.field { margin-top: 14px; }
.field .label { display: block; }
.field input, .field select, .field textarea {
  width: 100%; margin-top: 6px; min-height: 50px; padding: 0 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: 2px; font-size: 17px; color: var(--text);
}
.field textarea { padding: 12px 14px; min-height: 80px; }
.field input:disabled { color: var(--muted); }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: 14px; color: var(--text-soft); }
.check input { flex: none; width: 22px; height: 22px; accent-color: var(--yellow); margin: 0; }
.switch { position: relative; width: 46px; height: 26px; border-radius: 13px; background: #333; border: 0; flex: none; padding: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: all .15s; }
.switch.on { background: var(--yellow); }
.switch.on::after { left: 23px; background: var(--ink); }
.otp { letter-spacing: 10px; text-align: center; font-family: var(--f-title); font-size: 32px !important; }
.row2 { display: flex; align-items: center; gap: 12px; margin: 16px 22px 0; }
.row2 .grow { flex: 1; }
.row2 .tt { font-weight: 700; font-size: 16px; }
.row2 .ss { font-size: 13px; color: var(--muted); }

/* ---------- Tarjeta de socio (entrada de recital) ---------- */
.ticket { position: relative; display: flex; margin: 16px 22px 0; min-height: 150px; background: var(--yellow); color: var(--ink); border-radius: 4px; overflow: hidden; }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--bg); }
.ticket::before { left: -11px; } .ticket::after { right: -11px; }
.tmain { flex: 1; min-width: 0; padding: 18px 16px 16px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.tl { font-family: var(--f-mono); font-size: 12px; letter-spacing: 2px; }
.tnum { font-family: var(--f-title); font-size: 54px; line-height: 1; letter-spacing: 2px; white-space: nowrap; }
.tfoot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.tname { font-size: 20px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsince { font-size: 12px; white-space: nowrap; }
.tstub { position: relative; width: 84px; flex: none; display: flex; align-items: center; justify-content: center; border-left: 2px dashed rgba(14,14,14,.55); margin: 14px 0 14px 0; }

/* ---------- QR ---------- */
.qrbox { margin: 18px auto 0; width: min(320px, 78vw); background: #fff; padding: 14px; border-radius: 4px; }
.qrbox svg, .qrbox img { display: block; width: 100%; height: auto; }
.shortcode { text-align: center; font-family: var(--f-mono); font-size: 28px; letter-spacing: 6px; margin-top: 14px; }
.countdown { text-align: center; color: var(--muted); font-size: 14px; margin-top: 6px; }
.center { text-align: center; }
.bigname { font-family: var(--f-title); font-size: 34px; line-height: 1.05; text-transform: uppercase; text-align: center; margin: 6px 22px 0; }

/* ---------- Teclado (camarera) ---------- */
.amount { text-align: center; font-family: var(--f-title); font-size: 60px; line-height: 1; margin-top: 6px; }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 22px 0; }
.keys button { min-height: 58px; background: var(--card); border: 1px solid var(--line); font-size: 24px; font-weight: 600; border-radius: 2px; }
.scanner { position: relative; margin: 16px 22px 0; aspect-ratio: 1; background: #050505; border: 1px solid var(--line); overflow: hidden; }
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner .corner { position: absolute; width: 36px; height: 36px; border: 0 solid var(--yellow); }
.scanner .corner.tl { left: 14%; top: 14%; border-left-width: 4px; border-top-width: 4px; }
.scanner .corner.tr { right: 14%; top: 14%; border-right-width: 4px; border-top-width: 4px; }
.scanner .corner.bl { left: 14%; bottom: 14%; border-left-width: 4px; border-bottom-width: 4px; }
.scanner .corner.br { right: 14%; bottom: 14%; border-right-width: 4px; border-bottom-width: 4px; }
.scanner .msg { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- Navegación ---------- */
.nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(480px, 100%); height: 72px; display: grid; background: var(--bg-nav); border-top: 1px solid var(--line); z-index: 20; }
.nav.c4 { grid-template-columns: repeat(4, 1fr); }
.nav.c5 { grid-template-columns: repeat(5, 1fr); }
.nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-weight: 600; font-size: 12px; text-decoration: none; }
.nav.c5 a { font-size: 11px; }
.nav a.on { color: var(--text); }
.nav a.on::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; background: var(--yellow); }
.nav svg { width: 24px; height: 24px; }
.fabrow { position: fixed; left: 50%; transform: translateX(-50%); bottom: 82px; width: min(480px, 100%); padding: 0 22px; z-index: 15; }
.tools { display: flex; gap: 8px; margin: 12px 22px 0; }
.tools a { flex: 1; text-align: center; padding: 10px 6px; border: 1px solid #4a4a4a; color: var(--yellow); text-decoration: none; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.splash { display: flex; align-items: center; justify-content: center; min-height: 60vh; color: var(--muted); }
.legal { margin: 18px 22px 0; font-size: 14px; color: var(--text-soft); line-height: 1.5; }
.legal h4 { margin: 16px 0 4px; font-family: var(--f-title); font-weight: 400; text-transform: uppercase; letter-spacing: 1px; font-size: 16px; }
.empty-note { margin: 18px 22px 0; padding: 18px; border: 1.5px dashed #4a4a4a; color: var(--muted); font-size: 15px; text-align: center; }

/* ---------- Avisos y panel ---------- */
.flash { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50; width: min(440px, calc(100% - 32px)); padding: 12px 16px; background: var(--card); border-left: 3px solid var(--yellow); box-shadow: 0 6px 20px rgba(0,0,0,.6); font-size: 15px; animation: fade .15s ease-out; }
.flash.err { border-left-color: var(--danger); background: #2a1715; color: #ffd0cb; }
.field input[type=datetime-local] { color-scheme: dark; }
.field select { appearance: auto; color-scheme: dark; }
a.btn { text-decoration: none; }

/* ---------- Videos a la carta ---------- */
.tools { flex-wrap: wrap; }
.tools a { min-width: 30%; }
.vq-q { width: 100%; min-height: 52px; padding: 0 14px; background: var(--card); border: 1px solid var(--line); color: var(--text); font-size: 17px; }
.vq-res { list-style: none; margin: 0; padding: 0; }
.vq-track { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 0; background: none; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--text); text-align: left; }
.vq-track img, .vq-track .ph { flex: none; width: 48px; height: 48px; background: #222; border: 1px solid var(--line); }
.vq-track .txt { display: flex; flex-direction: column; min-width: 0; }
.vq-track .txt b { font-weight: 700; font-size: 16px; }
.vq-track .txt span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vq-queue { margin-top: 4px; font-family: var(--f-mono); font-size: 13px; color: var(--yellow); }
.vq-comment { margin-top: 6px; padding: 7px 10px; border-left: 3px solid var(--yellow); background: #24230a; font-size: 14px; font-weight: 600; }
.vq-st { flex: none; padding: 3px 8px; border: 1px solid #4a4a4a; font-family: var(--f-mono); font-size: 11px; color: var(--text-soft); }
.vq-st.downloaded { border-color: var(--yellow); color: var(--yellow); }
.vq-st.played { color: var(--muted); }
.vq-st.discarded { color: var(--danger); border-color: #5a2c28; }
.vq-card { display: flex; align-items: center; justify-content: space-between; margin: 14px 22px 0; padding: 14px 16px; border: 1.5px solid var(--yellow); color: var(--yellow); text-decoration: none; }
.vq-card .name { color: var(--text); font-family: var(--f-title); text-transform: uppercase; font-size: 22px; letter-spacing: 1px; margin-top: 2px; }
.va-row { padding: 12px 22px; border-bottom: 1px solid var(--line-soft); }
.va-head { display: flex; gap: 12px; align-items: flex-start; }
.va-head .name { font-weight: 700; font-size: 16px; }
.va-head .pts { font-size: 13px; color: var(--muted); }
.va-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.va-btns .btn.small { min-height: 38px; padding: 0 12px; font-size: 13px; }
.va-top { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.va-top i { color: var(--muted); font-style: normal; font-size: 13px; }
.va-top b { font-family: var(--f-mono); font-weight: 400; color: var(--yellow); }
.vq-st { align-self: flex-start; margin-top: 4px; }

.vq-box { padding: 14px 16px 16px; border: 1.5px solid var(--yellow); background: #15150a; }
.vq-box.hot { background: #24230a; }
.vq-hd { font-family: var(--f-title); font-size: 22px; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.vq-now { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px; background: #0e0e0e; border: 1px solid var(--line); }
.vq-now img, .vq-now .ph { flex: none; width: 48px; height: 48px; background: #222; border: 1px solid var(--line); }
.vq-now b { display: block; font-size: 17px; }
.vq-now span { font-size: 13px; color: var(--muted); }
.vq-meta { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; color: var(--muted); }

.screen.withfab { padding-bottom: 96px; }

.sechd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.seelink { display: flex; align-items: center; gap: 2px; min-height: 44px; margin: -14px -4px -14px 0; padding: 0 4px; color: var(--yellow); text-decoration: none; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.sechd .h2, .seelink { white-space: nowrap; } .seelink svg { flex: none; }

.exitlink { display: inline-block; padding: 8px 0 8px 10px; color: var(--yellow); text-decoration: none; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }

.sharebtn { flex: none; width: 44px; height: 44px; margin: -8px -14px -8px 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--yellow); }
.event .grow { flex: 1; min-width: 0; } .event .sharebtn { margin-left: auto; }

/* Agregar a la pantalla de inicio */
.a2hs { margin: 12px 22px 0; padding: 12px 8px 12px 14px; background: var(--card); border-left: 3px solid var(--yellow); display: flex; align-items: flex-start; gap: 12px; color: var(--yellow); }
.a2hs .grow { flex: 1; min-width: 0; }
.a2hs .t { color: var(--text); font-size: 15px; line-height: 1.35; }
.a2hs .linkbtn { margin-top: 6px; min-height: 32px; padding: 0; color: var(--yellow); font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.a2hs .x { flex: none; width: 44px; height: 44px; margin: -6px 0 -6px 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--muted); }
.sheet .step { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); text-align: left; }
.sheet .step b { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: #0e0e0e; display: flex; align-items: center; justify-content: center; font-family: var(--f-title); font-weight: 400; font-size: 16px; }

/* Aviso "HOY" en Inicio */
.hoy { margin: 12px 22px 0; padding: 10px 12px 10px 14px; background: var(--card); border-left: 3px solid var(--yellow); display: flex; align-items: center; gap: 12px; color: var(--yellow); text-decoration: none; min-height: 44px; }
.hoy .lbl { font-family: var(--f-mono); font-size: 13px; letter-spacing: 1px; }
.hoy .grow { flex: 1; min-width: 0; color: var(--text); font-size: 15px; }
body:has(#pedir-slot:not(:empty)) #hoy:not(.scan) { display: none; }

/* Cartel de bienvenida */
.sheet:has(.wel) { border-top: 3px solid var(--yellow); background: #1b1b1b; }
.wel .welimg { display: block; width: 170px; height: auto; margin: 0 auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.7)); }
.wel .step { text-align: left; }

button.ph.empty { width: 100%; font-family: inherit; cursor: pointer; }
.crop { position: fixed; inset: 0; z-index: 200; background: #0b0b0b; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.crop-top { text-align: center; padding: 16px 16px 8px; font-family: 'Anton', Impact, sans-serif; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
.crop-cv { flex: 1; min-height: 0; width: 100%; touch-action: none; display: block; cursor: grab; }
.crop-hint { text-align: center; color: var(--mute, #999); font-size: 14px; padding: 8px 16px 0; }
.crop-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px 18px; }

.notice { display: flex; align-items: center; gap: 4px; margin: 14px 22px 0; min-height: 50px; background: #1b1b1b; border: 1px solid var(--line); border-left: 3px solid var(--yellow); }
.notice .body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 0 10px 14px; font-size: 15px; line-height: 1.25; color: var(--text, #f5f5f5); text-decoration: none; }
.notice .body svg { flex: none; color: var(--yellow); }
.notice .x { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: #a3a3a3; cursor: pointer; }

.agenda-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 22px 0; }
.agenda-btns .btn { display: flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; font-size: 15px; }

.stat span { display: block; }
.stat span.sub { margin-top: 1px; font-size: 12px; }
.btn.big { min-height: 54px; display: flex; align-items: center; justify-content: center; font-size: 17px; text-decoration: none; }
.hoyvid { margin: 12px 22px 0; padding: 16px; background: var(--card); border: 1px solid var(--line); }
.hoyvid .top2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hoyvid .name { font-weight: 700; font-size: 18px; }
.hoyvid .vstate { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; color: #d4d4d4; }
.hoyvid .dot { width: 10px; height: 10px; border-radius: 50%; background: #555; flex: none; }
.hoyvid .dot.on { background: var(--yellow); }
.rowlink { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 12px 22px 0; padding: 0 14px; background: var(--card); border: 1px solid var(--line); color: var(--text, #f5f5f5); text-decoration: none; font-size: 15px; }
.rowlink .grow { font-weight: 700; }
.rowlink svg { flex: none; color: var(--yellow); }
.rowlink .muted { font-size: 13px; }
.nrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 36px; padding: 6px 0; border-bottom: 1px solid #262626; font-size: 15px; }
.nrow b { font-family: var(--f-title); font-weight: 400; font-size: 20px; }

/* ---------- Trivia ---------- */
.tq-n { margin-top: 14px; font-family: var(--f-mono); font-size: 13px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.tq-q { margin-top: 6px; font-family: var(--f-title); font-size: 26px; line-height: 1.15; text-transform: uppercase; }
.tq-bar { margin-top: 12px; height: 10px; background: var(--line); }
.tq-bar i { display: block; height: 100%; width: 100%; background: var(--yellow); }
.tq-sec { margin-top: 6px; font-family: var(--f-mono); font-size: 14px; color: var(--yellow); }
.tq-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; margin-top: 10px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); color: var(--text); font: 600 17px var(--f-body); text-align: left; border-radius: 2px; box-sizing: border-box; }
.tq-opt b { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--yellow); color: #0e0e0e; font-family: var(--f-title); font-weight: 400; }
.tq-opt span { flex: 1; min-width: 0; }
.tq-opt em { flex: none; font-style: normal; font-family: var(--f-mono); color: var(--muted); }
button.tq-opt:disabled { opacity: 1; }
.tq-opt.sel { border-color: var(--yellow); box-shadow: inset 0 0 0 2px var(--yellow); }
.tq-opt.ok { background: var(--yellow); border-color: var(--yellow); color: #0e0e0e; }
.tq-opt.ok b { background: #0e0e0e; color: var(--yellow); }
.tq-opt.ok em { color: #0e0e0e; }
.tq-opt.no { opacity: .5; }
.tq-opt.no.sel { opacity: 1; border-color: #c0504d; box-shadow: inset 0 0 0 2px #c0504d; }
.tq-res { margin-top: 14px; font-family: var(--f-title); font-size: 24px; text-transform: uppercase; color: var(--yellow); }
.tq-top, .tv-top { list-style: none; margin: 8px 0 0; padding: 0; }
.tq-top li { display: flex; gap: 12px; padding: 10px 12px; background: var(--card); margin-top: 6px; }
.tq-top li.me { outline: 2px solid var(--yellow); }
.tq-top .n { width: 24px; font-family: var(--f-title); color: var(--yellow); }
.tq-top .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.tq-top .sc { font-family: var(--f-mono); color: var(--muted); }

/* Pantalla grande */
body.tvmode, body.tvmode * { cursor: none !important; }
body.tvmode { overflow: hidden; }
.tv { position: fixed; inset: 0; z-index: 60; background: #0e0e0e; color: #f5f5f5; font-family: var(--f-body); padding: 5vh 5vw; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
.tv-center { flex: 1; display: flex; align-items: center; justify-content: center; }
.tv-kicker { font-family: var(--f-mono); font-size: 3vh; letter-spacing: .25vh; color: var(--yellow); text-transform: uppercase; }
.tv-title { font-family: var(--f-title); font-size: 13vh; line-height: 1; text-transform: uppercase; }
.tv-sub { margin-top: 3vh; font-size: 4vh; color: #a3a3a3; }
.tv-count { margin-top: 4vh; font-size: 5vh; } .tv-count b { color: var(--yellow); font-family: var(--f-title); font-weight: 400; font-size: 8vh; }
.tv-lobby { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 5vw; }
.tv-qr { width: 52vh; flex: none; }
.tv-head { display: flex; justify-content: space-between; align-items: baseline; }
.tv-ans { font-family: var(--f-mono); font-size: 3.2vh; color: #a3a3a3; }
.tv-q { margin-top: 2vh; font-family: var(--f-title); font-size: 7vh; line-height: 1.1; text-transform: uppercase; }
.tv-body { flex: 1; min-height: 0; display: flex; gap: 3vw; margin-top: 3vh; }
.tv-opts { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 2vh 2vw; min-height: 0; }
.tv-body .tv-opts:only-child { grid-template-columns: 1fr 1fr; }
.tv-opt { position: relative; display: flex; align-items: center; gap: 2vw; padding: 2vh 2vw; background: #1b1b1b; border: .3vh solid #333; font-size: 4.6vh; font-weight: 700; overflow: hidden; }
.tv-opt b { flex: none; width: 8vh; height: 8vh; display: flex; align-items: center; justify-content: center; background: var(--yellow); color: #0e0e0e; font-family: var(--f-title); font-weight: 400; font-size: 5vh; }
.tv-opt span { flex: 1; position: relative; z-index: 1; }
.tv-opt em { position: relative; z-index: 1; font-style: normal; font-family: var(--f-mono); font-size: 4vh; color: #a3a3a3; }
.tv-opt .bar { position: absolute; left: 0; bottom: 0; height: 1.2vh; background: rgba(240,234,46,.5); }
.tv-opt.ok { background: var(--yellow); border-color: var(--yellow); color: #0e0e0e; }
.tv-opt.ok b { background: #0e0e0e; color: var(--yellow); } .tv-opt.ok em { color: #0e0e0e; } .tv-opt.ok .bar { background: #0e0e0e; }
.tv-opt.no { opacity: .45; }
.tv-side { width: 28vw; flex: none; }
.tv-top li { display: flex; gap: 1.2vw; padding: 1.6vh 1.2vw; background: #1b1b1b; margin-top: 1.2vh; font-size: 4vh; font-weight: 700; }
.tv-top .n { width: 4vh; font-family: var(--f-title); font-weight: 400; color: var(--yellow); }
.tv-top .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-top .sc { font-family: var(--f-mono); font-weight: 400; color: #a3a3a3; }
.tv-top.small li { font-size: 3vh; padding: 1vh 1.2vw; margin-top: .8vh; }
.tv-timer { display: flex; align-items: center; gap: 2vw; margin-top: 3vh; }
.tv-bar { flex: 1; height: 3vh; background: #333; } .tv-bar i { display: block; height: 100%; width: 100%; background: var(--yellow); }
.tv-sec { width: 12vh; text-align: right; font-family: var(--f-title); font-size: 10vh; line-height: 1; color: var(--yellow); }
.tv-podium { display: flex; align-items: flex-end; justify-content: center; gap: 2vw; margin: 1vh 0 3vh; }
.tv-podium .p { flex: 1; max-width: 26vw; padding: 3vh 1vw; background: #1b1b1b; text-align: center; }
.tv-podium .p1 { background: var(--yellow); color: #0e0e0e; padding-top: 6vh; padding-bottom: 6vh; }
.tv-podium .pos { font-family: var(--f-title); font-size: 8vh; line-height: 1; }
.tv-podium .who { margin-top: 1vh; font-size: 5vh; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-podium .pts { font-family: var(--f-mono); font-size: 3.4vh; opacity: .75; }
.tq-opt.dim { opacity: .45; }
.tq-win { padding: 14px 16px; background: var(--yellow); color: #0e0e0e; border-radius: 2px; font-size: 15px; line-height: 1.35; }
.tq-win .t { font-family: var(--f-title); font-size: 26px; line-height: 1.05; text-transform: uppercase; margin-bottom: 4px; }
.tq-res.bad { color: var(--muted); }
.tq-res span { color: var(--text); margin-left: 8px; }
.tq-opt em { font-size: 11px; letter-spacing: .5px; }
button.tq-opt.dim:disabled { opacity: .45; }
.tv-join { display: flex; flex-direction: column; align-items: center; gap: 2vh; flex: none; }
.tv-code { font-family: var(--f-title); font-size: 11.7vh; line-height: 1; letter-spacing: 1vh; color: var(--yellow); text-align: center; }
.tv-code span { display: block; font-family: var(--f-mono); font-size: 2.2vh; letter-spacing: .15vh; color: #a3a3a3; text-transform: uppercase; margin-top: .8vh; }
.tq-cdbox { margin-top: 16px; padding: 14px 16px; background: var(--card); border-left: 3px solid var(--yellow); }
.tq-cd { font-family: var(--f-title); font-size: 48px; line-height: 1; color: var(--yellow); margin-top: 4px; }
.tv-cdbox { position: absolute; left: 5vw; bottom: 4.7vh; } .tv-cdbox span { display: block; font-family: var(--f-mono); font-size: 3vh; letter-spacing: .25vh; color: #a3a3a3; text-transform: uppercase; }
.tv-cdbox b { display: block; font-family: var(--f-title); font-weight: 400; font-size: 16.7vh; line-height: 1; color: var(--yellow); margin-top: .5vh; }

.tv-lobbytop img { height: 6vh; width: auto; display: block; }
.tv-lobby { align-items: flex-start; margin-top: 3vh; }
.tv-title2 { font-family: var(--f-title); font-size: 14.4vh; line-height: .98; text-transform: uppercase; }
.tv-title2 span { color: var(--yellow); }
.tv-players { margin-top: 2vh; font-size: 3.6vh; color: #f5f5f5; } .tv-players b { color: var(--yellow); font-family: var(--f-title); font-weight: 400; font-size: 6.4vh; }
.tv-left { flex: 1; }
.tv-next { margin-top: 3vh; font-family: var(--f-mono); font-size: 2.6vh; letter-spacing: .2vh; color: #a3a3a3; text-transform: uppercase; }
.hoyscan { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--yellow); }
.hoyscan svg { stroke: var(--yellow); }

/* Cumpleaños en tres casilleros */
.bdrow { display: flex; gap: 10px; margin-top: 6px; }
.bdrow label { flex: 1; min-width: 0; } .bdrow label.y { flex: 1.5; }
.bdrow label span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.bdrow input { width: 100%; text-align: center; font-size: 22px; letter-spacing: 1px; padding: 0 6px; }
.bdrow input.bad { border-color: var(--danger); }

.crop-vint { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px 0; font-weight: 700; font-size: 15px; }
.crop-vint input { width: 20px; height: 20px; accent-color: var(--yellow, #f0ea2e); }

.giftcard { border: 1px solid var(--line, #333); border-radius: 12px; padding: 14px; margin-top: 14px; }
.giftcard.off { opacity: .6; }
.giftsw { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; margin-bottom: 4px; }
.giftsw b { display: block; font-size: 17px; }
.giftsw small { display: block; color: #aaa; font-size: 13px; margin-top: 2px; }
.giftsw input { position: absolute; opacity: 0; pointer-events: none; }
.giftsw i { flex: none; width: 50px; height: 28px; border-radius: 14px; background: #444; position: relative; transition: background .15s; }
.giftsw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .15s; }
.giftsw input:checked + i { background: var(--yellow, #f0ea2e); }
.giftsw input:checked + i::after { left: 25px; background: #0e0e0e; }

/* Botón grande de escanear (inicio del equipo) */
.scanbig { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 76px; font-size: 19px; text-decoration: none; }
.scanbig svg { width: 34px; height: 34px; }
.scanbig.l { min-height: 150px; font-size: 22px; } .scanbig.l svg { width: 52px; height: 52px; }
.scanbig.xl { min-height: 190px; font-size: 24px; } .scanbig.xl svg { width: 60px; height: 60px; }
.eqnote { margin: 16px 22px 0; font-size: 14px; line-height: 1.4; color: var(--muted); text-align: center; }

/* Premio flash */
.flashcard { margin: 16px 22px 0; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--yellow); border-radius: 2px; }
.flashcard .fl { display: flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 13px; letter-spacing: 1px; color: var(--yellow); text-transform: uppercase; }
.flashcard .fl svg { fill: currentColor; stroke: none; }
.flashcard .ft { font-family: var(--f-title); font-size: 30px; line-height: 1.05; text-transform: uppercase; margin-top: 8px; }
.flashcard .fs { font-size: 14px; color: var(--muted); margin-top: 6px; } .flashcard .fs b { color: var(--text); }
.flashcard .fclock { font-family: var(--f-title); font-size: 64px; line-height: 1; color: var(--yellow); margin-top: 6px; }
.flashcard .btn { margin-top: 12px; }
.flashcard.dead { border: 1.5px dashed #4a4a4a; }
.flashcard.dead .fl { color: var(--muted); } .flashcard.dead .ft { font-size: 28px; color: #d4d4d4; } .flashcard.dead .fs { font-size: 15px; }
.flashcard .fltop { display: flex; align-items: center; justify-content: space-between; }
.flashcard .x { flex: none; width: 44px; height: 44px; margin: -14px -14px -14px 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--muted); cursor: pointer; }
.flpanel { margin: 14px 22px 0; padding: 16px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--yellow); }
.flpanel .name { font-weight: 700; font-size: 18px; }
.flpanel .vstate { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; color: #d4d4d4; }
.flpanel .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); flex: none; }
.flpanel .since { font-size: 13px; color: var(--muted); margin-top: 4px; }
.flrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #2a2a2a; font-size: 15px; }
.flrow .muted { font-size: 13px; text-align: right; }
.fltitle { display: flex; align-items: center; gap: 8px; } .fltitle svg { fill: var(--yellow); stroke: none; }
.tv-cdbox b.soon { font-size: 11vh; }
.tv-prizes { position: absolute; left: 38vw; bottom: 4.7vh; max-width: 40vw; }
.tv-prizes span { display: block; font-family: var(--f-mono); font-size: 3vh; letter-spacing: .25vh; color: #a3a3a3; text-transform: uppercase; margin-bottom: 1vh; }
.tv-prizes div { font-size: 3.6vh; color: #f5f5f5; line-height: 1.35; } .tv-prizes i { font-style: normal; font-family: var(--f-title); color: var(--yellow); margin-right: 1.2vh; }