:root {
  --bg: #eef1f8; --surface: #ffffff; --surface-2: #e3e8f4; --fg: #0b1a3f; --muted: #4a5878; --line: #c9d2e6;
  --accent: #1d3f8f; --on-accent: #ffffff; --gold: #c9a227; --on-gold: #2b1f00;
  --deep: #0b1a3f; --on-deep: #ffffff; --focus: #a67c00;
  --ok: #17794a; --ok-bg: #dff3e8; --warn: #8f5200; --warn-bg: #fbe9c9; --bad: #b0302f; --bad-bg: #fadcdc;
  --f-display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --f-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'DM Mono', ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #060d1f; --surface: #0b1a3f; --surface-2: #122552; --fg: #eef1f8; --muted: #a3afcb; --line: #24396b;
    --accent: #8fb0ff; --on-accent: #06122e; --gold: #e2b53c; --on-gold: #2b1f00;
    --deep: #091533; --on-deep: #ffffff; --focus: #e2b53c;
    --ok: #6fd69a; --ok-bg: #123a27; --warn: #f2b655; --warn-bg: #3f2b0a; --bad: #ff9a98; --bad-bg: #4a1c1f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #060d1f; --surface: #0b1a3f; --surface-2: #122552; --fg: #eef1f8; --muted: #a3afcb; --line: #24396b;
  --accent: #8fb0ff; --on-accent: #06122e; --gold: #e2b53c; --on-gold: #2b1f00;
  --deep: #091533; --on-deep: #ffffff; --focus: #e2b53c;
  --ok: #6fd69a; --ok-bg: #123a27; --warn: #f2b655; --warn-bg: #3f2b0a; --bad: #ff9a98; --bad-bg: #4a1c1f;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 15px; line-height: 1.5;
  margin: 0; padding-inline: 0; min-height: 100%;
}
.wrap { width: 100%; max-width: 1040px; margin-inline: auto; padding-inline: 16px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: 1.75rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1rem; }
p { margin: 0; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 0.8125rem; }
.eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* Encabezado */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--deep); color: var(--on-deep); border-bottom: 3px solid var(--gold); }
.topin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.02em; text-transform: uppercase; }
.brand svg { width: 30px; height: 30px; }
.demo-pill { font-size: 0.75rem; font-weight: 600; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.topright { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.who { font-weight: 600; font-size: 0.875rem; }
.btn.light { background: transparent; color: var(--on-deep); border-color: rgba(255,255,255,0.5); }
.entry { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.entrybtn { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.entrybtn strong { font-family: var(--f-display); font-size: 1.25rem; }
.entrybtn span { color: var(--muted); }
.entrybtn:hover { border-color: var(--gold); }
.staffbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; background: var(--warn-bg); color: var(--warn); padding: 8px 14px; border-radius: 10px; font-weight: 600; }
details.panel summary { cursor: pointer; }
@media (max-width: 640px) { .topright { margin-left: 0; width: 100%; } }

main { padding-block: 22px 40px; display: flex; flex-direction: column; gap: 22px; }
.pagehead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 20px; }
.pagehead p { color: var(--muted); max-width: 60ch; }

/* Controles */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; background: var(--accent); color: var(--on-accent); font-weight: 700; padding: 9px 16px; min-height: 42px; border-radius: 10px; cursor: pointer; text-align: center; }
.btn:hover { filter: brightness(1.08); }
.btn.gold { background: var(--gold); color: var(--on-gold); }
.btn.ghost { background: transparent; color: var(--accent); border-color: var(--line); }
.btn.sm { min-height: 34px; padding: 5px 11px; font-size: 0.875rem; border-radius: 8px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; }
.in { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; min-height: 42px; width: 100%; min-width: 0; }
.in.sm { min-height: 34px; padding: 4px 9px; }
label.fl { display: flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); min-width: 0; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.row > * { min-width: 0; }
.grow { flex: 1 1 160px; }

.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.tabs button { border: 0; background: transparent; padding: 10px 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--gold); }
.badge { display: inline-block; background: var(--gold); color: var(--on-gold); border-radius: 999px; font-size: 0.7rem; padding: 0 7px; margin-left: 6px; font-weight: 700; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel.flat { background: transparent; border: 0; padding: 0; }
.panel.hl { background: var(--surface-2); border-color: transparent; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; }

.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.acc { background: var(--accent); color: var(--on-accent); }

/* Tablas */
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 560px; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--surface-2); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
tr.sum td { font-weight: 800; background: var(--surface-2); }
.fig { width: 30px; height: 30px; flex: none; }
.figname { display: inline-flex; align-items: center; gap: 8px; }
.acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

.stock { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--line); }
.stock i { display: block; height: 100%; }
.s-sold { background: var(--accent); } .s-asg { background: var(--gold); } .s-free { background: var(--line); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.legend .dot.s-free { border: 1px solid var(--muted); }

.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.item { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.item > div { min-width: 0; }
.item.pend { border-left: 5px solid var(--gold); }
.empty { padding: 22px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; }

dl.kv { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; }
dl.kv dt { color: var(--muted); } dl.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
dl.kv .tot { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 800; color: var(--fg); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.stat b { display: block; font-family: var(--f-display); font-size: 1.4rem; font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.stat span { font-size: 0.8125rem; color: var(--muted); }

.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-weight: 600; min-height: 36px; }
.pills button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.sellbox { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 12px; background: var(--surface-2); border-radius: 10px; width: 100%; }

.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.pick { font-family: var(--f-mono); font-size: 1rem; font-weight: 500; min-height: 44px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; cursor: pointer; }
.pick[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); border-color: var(--gold); font-weight: 700; box-shadow: inset 0 0 0 2px var(--on-gold); }

/* Cartón del cliente */
.clientwrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.stage { position: relative; width: 100%; max-width: 420px; aspect-ratio: 941 / 1672; border-radius: 4.5% / 3.4%; overflow: hidden; background: var(--deep); box-shadow: 0 14px 36px rgba(6, 40, 70, 0.35); user-select: none; -webkit-user-select: none; }
.stage .art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.cell { position: absolute; border-radius: 10% / 10%; background: linear-gradient(160deg, #fbf7ff, #e9dcfb); border: 2px solid #e8b43a; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.7), inset 0 -6px 12px rgba(106, 43, 179, 0.18); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cell { flex-direction: column; gap: 1%; }
.cell .fig { width: 64%; height: 64%; }
.cell .val { font-family: var(--f-display); font-weight: 800; font-size: 13px; font-size: 3.7cqw; line-height: 1; color: #3a1457; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stage { container-type: inline-size; }
#scr { position: absolute; z-index: 3; touch-action: none; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
.cell.hit { box-shadow: 0 0 0 3px #ffd75a, 0 0 18px 4px rgba(255, 200, 60, 0.85), inset 0 0 0 2px rgba(255,255,255,0.8); animation: pulse 1.4s ease-in-out infinite; z-index: 2; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px #ffd75a, 0 0 26px 8px rgba(255, 200, 60, 0.95), inset 0 0 0 2px rgba(255,255,255,0.8); } }
@media (prefers-reduced-motion: reduce) { .cell.hit { animation: none; } }
.cstat { max-width: 440px; width: 100%; text-align: center; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); font-weight: 600; }
.cstat.win { background: var(--gold); color: var(--on-gold); }
.cstat.win b { display: block; font-family: var(--f-display); font-size: 1.5rem; }
.cstat.lose { background: var(--surface-2); }
.rules { width: 100%; max-width: 440px; }
.rules summary { cursor: pointer; font-weight: 700; padding: 8px 0; }

.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); background: var(--fg); color: var(--bg); padding: 10px 18px; border-radius: 10px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 50; max-width: calc(100% - 32px); text-align: center; }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
footer { border-top: 1px solid var(--line); padding-block: 22px 40px; color: var(--muted); font-size: 0.8125rem; display: flex; flex-direction: column; gap: 10px; }
footer p { max-width: 70ch; }
.login{max-width:420px;margin:40px auto}
.linkbox{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--surface-2);padding:10px 12px;border-radius:10px}
.linkbox code{word-break:break-all;flex:1 1 220px;font-family:var(--f-mono);font-size:.85rem}
.err{color:var(--bad);font-weight:600}
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.mini{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:12px;padding:8px;background:var(--surface)}
.minicard{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:941/1672;background:var(--deep)}
.minicard img{width:100%;height:100%;object-fit:cover;display:block}
.mininum{position:absolute;left:6px;top:6px;background:rgba(6,13,31,.82);color:#fff;font-size:.75rem;padding:2px 6px;border-radius:6px}
.miniwin{position:absolute;left:6px;right:6px;bottom:6px;display:flex;align-items:center;gap:4px;justify-content:center;background:var(--gold);color:var(--on-gold);font-weight:800;font-size:.8rem;border-radius:6px;padding:2px 4px}
.miniwin .fig{width:22px;height:22px}
a.btn{text-decoration:none}
.top a{color:inherit}
.cfgtab input.in{max-width:150px;margin-left:auto;text-align:right}
.cfgtab td{padding:6px 12px}
#planBox .stats{margin-bottom:8px}
#planBox .stat b,.stats .stat b{white-space:nowrap}
#planBox .stat b{font-size:1.15rem}
.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* Festejo de las tres figuras ganadoras */
.cell.hit .fig { filter: drop-shadow(0 0 6px rgba(255, 215, 90, .9)); }
.cell.celebrate { animation: winpop .7s cubic-bezier(.2,1.6,.4,1) var(--d, 0s) both, winbounce 1.1s ease-in-out calc(var(--d, 0s) + .7s) infinite, pulse 1.4s ease-in-out infinite; }
.cell.celebrate .fig { animation: figspin .9s ease-out var(--d, 0s) both; }
.cell.hit::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%); transform: translateX(-120%); animation: shine 2.2s ease-in-out infinite; pointer-events: none; }
@keyframes winpop { 0% { transform: scale(1); } 45% { transform: scale(1.32) rotate(-6deg); } 70% { transform: scale(.94) rotate(3deg); } 100% { transform: scale(1.08); } }
@keyframes winbounce { 0%, 100% { transform: scale(1.08) translateY(0); } 50% { transform: scale(1.14) translateY(-6%); } }
@keyframes figspin { from { transform: rotateY(0) scale(.6); } to { transform: rotateY(360deg) scale(1); } }
@keyframes shine { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
.stage.won { box-shadow: 0 0 0 4px #ffd75a, 0 0 40px 10px rgba(255, 200, 60, .55), 0 14px 36px rgba(6, 40, 70, .35); }
.rain { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
.rain i { position: absolute; top: -40px; border-radius: 50%; animation-name: fall; animation-timing-function: cubic-bezier(.3,.1,.7,1); animation-fill-mode: both; }
.rain i.coin { background: radial-gradient(circle at 35% 30%, #fff6c2 0 18%, #ffd75a 30%, #e8a826 60%, #a86b00 100%); box-shadow: inset 0 0 0 2px rgba(138,90,0,.6); }
.rain i.clover { border-radius: 0; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M37 4L14 36H29L23 60L50 23H35L37 4Z' fill='%23f5c242' stroke='%237a4a05' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@keyframes fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(var(--fall, 900px)) rotate(var(--r, 360deg)); opacity: .9; } }
.stage { --fall: 130cqw; }
.cstat.win.pop { animation: banner .6s cubic-bezier(.2,1.5,.4,1) 1s both; }
.cstat.win b { animation: glow 1.6s ease-in-out infinite; }
@keyframes banner { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes glow { 50% { text-shadow: 0 0 12px rgba(255,255,255,.9); } }
@media (prefers-reduced-motion: reduce) { .cell.celebrate, .cell.celebrate .fig, .cell.hit::after, .cstat.win.pop, .cstat.win b { animation: none; } }
.btn.danger { color: var(--bad); border-color: var(--bad); }

/* ---------- Selector de cartones del cliente: cartones tapados con su número ---------- */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px; padding: 6px 2px 120px; }
.pcard { position: relative; display: block; padding: 0; border: 0; border-radius: 12px; background: var(--deep); aspect-ratio: 941 / 1672; overflow: hidden; cursor: pointer;
  box-shadow: 0 2px 6px rgba(20, 8, 40, .25); transform: translateY(0) scale(1); transition: transform .25s cubic-bezier(.2, .9, .3, 1.4), box-shadow .25s;
  animation: pin .45s cubic-bezier(.2, .9, .3, 1.2) backwards; animation-delay: calc(var(--i, 0) * 35ms); -webkit-tap-highlight-color: transparent; }
.pcard img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9) brightness(.92); transition: filter .25s; }
.pcard:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(20, 8, 40, .35); }
.pcard:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.pnum { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; line-height: 1;
  background: rgba(6, 13, 31, .88); color: #fff; border: 2px solid #f0b93a; border-radius: 10px; padding: 4px 10px 5px; font-family: var(--f-mono); font-weight: 800; font-size: 1.05rem; letter-spacing: .5px; white-space: nowrap; }
.pnum small { font-size: .55rem; font-weight: 600; opacity: .75; letter-spacing: 1px; margin-bottom: 2px; }
.pcheck { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #f0b93a; color: #2b1c00;
  font-weight: 900; font-size: 1rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transform: scale(0); transition: transform .3s cubic-bezier(.2, .9, .3, 1.6); }
.pshine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-130%); }
/* Elegido: se levanta, brilla en dorado y muestra la tilde. */
.pcard.on { transform: translateY(-8px) scale(1.04); box-shadow: 0 0 0 3px #f0b93a, 0 0 22px 4px rgba(240, 185, 58, .65), 0 14px 22px rgba(20, 8, 40, .4); }
.pcard.on img { filter: saturate(1.15) brightness(1.05); }
.pcard.on .pcheck { transform: scale(1); }
.pcard.on .pshine { animation: pshine .8s ease-out; }
.pcard.on .pnum { background: #f0b93a; color: #2b1c00; border-color: #fff4d0; }
/* Ya se eligieron todos: el cartón tocado tiembla. */
.pcard.nope { animation: nope .35s; }
/* Confirmando la compra: los elegidos giran. */
.pcard.go { animation: pgo .9s ease-in-out infinite; }
/* Barra fija abajo con el contador y el botón. */
.pickbar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 3px solid var(--gold); box-shadow: 0 -8px 20px rgba(20, 8, 40, .18); }
.pickbar .fl { min-width: 150px; margin: 0; }
.pickbar .btn { flex: 1 1 100%; min-height: 48px; font-size: 1rem; }
.pickbar .btn.pickrnd { flex: 0 0 auto; min-height: 40px; margin-left: auto; align-self: center; }
.pickcount { display: flex; align-items: baseline; gap: 4px; font-weight: 700; }
.pickcount b { font-size: 1.8rem; color: var(--accent); display: inline-block; }
.pickcount span { font-weight: 400; font-size: .85rem; opacity: .75; margin-left: 2px; }
.pickcount b.bump { animation: bump .35s cubic-bezier(.2, .9, .3, 1.6); }
@media (min-width: 640px) { .pickbar .btn { flex: 0 0 auto; } .pcards { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); } }
@keyframes pin { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pshine { to { transform: translateX(130%); } }
@keyframes nope { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes pgo { 0% { transform: translateY(-8px) rotateY(0); } 50% { transform: translateY(-14px) rotateY(180deg) scale(1.06); } 100% { transform: translateY(-8px) rotateY(360deg); } }
@keyframes bump { 50% { transform: scale(1.45); } }
@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard.on .pshine, .pcard.nope, .pcard.go, .pickcount b.bump { animation: none; }
  .pcard, .pcheck { transition: none; }
}

/* ---------- Figuras con imagen (WebP con marco propio) ---------- */
img.fig { border-radius: 18%; object-fit: cover; display: inline-block; vertical-align: middle; }
.cell { background: radial-gradient(circle at 50% 35%, #1d3f8f, #0b1a3f 75%); border: 0; box-shadow: none; padding: 0; }
.cell .tile { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cell .val { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); z-index: 1; padding: 2px 7px; border-radius: 999px;
  background: rgba(6, 13, 31, .86); color: #ffe7a3; border: 1px solid rgba(240, 185, 58, .9); font-size: 3.2cqw; }
.cell.hit .tile { filter: brightness(1.12) saturate(1.15); }
.cell.hit .val { background: #f0b93a; color: #2b1c00; }
.cell.celebrate .tile { animation: figspin .9s ease-out var(--d, 0s) both; }
@media (prefers-reduced-motion: reduce) { .cell.celebrate .tile { animation: none; } }

/* ---------- Resumen al terminar de raspar ---------- */
.sumover { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(18, 4, 34, .72); animation: sumfade .25s ease-out; }
.sumbox { position: relative; width: 100%; max-width: 420px; background: var(--surface); color: var(--fg); border-radius: 18px; padding: 22px 20px 20px; border: 3px solid var(--gold);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45); text-align: center; margin-bottom: 16px; }
.sumover .sumbox { margin: 0; animation: sumpop .45s cubic-bezier(.2, 1.4, .4, 1); max-height: calc(100vh - 32px); overflow: auto; }
.sumbox.won { background-color: var(--surface); background-image: linear-gradient(170deg, transparent 55%, rgba(240, 185, 58, .2)); }
.sumbox h2 { margin: 0 0 12px; font-size: 1.5rem; }
.sumx { position: absolute; top: 6px; right: 10px; border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: inherit; opacity: .6; }
.sumstats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.sumstats > div { background: var(--bg); border-radius: 12px; padding: 10px 6px; display: flex; flex-direction: column; gap: 2px; }
.sumstats b { font-size: 1.9rem; line-height: 1.1; }
.sumstats span { font-size: .8rem; opacity: .75; }
.sumstats .sumtotal { grid-column: 1 / -1; background: var(--gold); color: var(--on-gold); }
.sumstats .sumtotal b { font-size: 1.7rem; }
.sumlist { list-style: none; margin: 0 0 10px; padding: 0; text-align: left; }
.sumlist li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-weight: 700; }
.sumbox > .btn { width: 100%; min-height: 46px; margin-top: 6px; }
@keyframes sumfade { from { opacity: 0; } }
@keyframes sumpop { from { transform: scale(.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sumover, .sumover .sumbox { animation: none; } }

/* Datos de acceso del vendedor (se adaptan a celulares) */
.accdata { display: grid; gap: 8px; margin: 10px 0 12px; }
.accdata > div { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.accdata span { font-size: .78rem; color: var(--muted); }
.accdata b { font-size: 1rem; overflow-wrap: anywhere; }

/* Ventana de diálogo propia (reemplaza prompt/confirm del navegador) */
.sumbox.dlg { text-align: left; }
.sumbox.dlg h2 { font-size: 1.25rem; }
.dlgtext { margin: 0 0 12px; line-height: 1.45; }
.sumbox.dlg .fl { margin-bottom: 10px; }
.sumbox.dlg .acts { justify-content: flex-end; gap: 8px; margin-top: 8px; }
.btn.danger:not(.ghost) { background: #c0392b; color: #fff; }
/* Tandas y cierre de caja */
.item.col { flex-direction: column; align-items: stretch; }
.item.col .acts { justify-content: flex-end; }
dl.caja { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
dl.kv dd.err { color: #b42318; }
h3.sub { margin: 16px 0 8px; font-size: 1rem; }
details.hist { margin-top: 12px; }
details.hist summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.caja-now .pagehead { margin-bottom: 4px; }
.pick.pre { outline: 2px dashed var(--gold); outline-offset: 2px; }
.chip.wrap { white-space: normal; border-radius: 10px; display: inline-block; line-height: 1.35; padding-top: 6px; padding-bottom: 6px; }
/* Billetera */
.wallet { background: linear-gradient(135deg, var(--deep), #1b6ea6); color: #fff; border-radius: 16px; padding: 16px 18px; margin: 4px 0 16px; border: 2px solid var(--gold); box-shadow: 0 6px 18px rgba(13,74,116,.25); }
.wallet.owed { border-color: #ff8a80; }
.wtop { display: flex; gap: 14px; align-items: flex-start; }
.wicon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(232,168,38,.18); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.wicon svg { width: 28px; height: 28px; }
.wlabel { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.wbig b { display: block; font-size: 2rem; line-height: 1.15; font-weight: 800; font-variant-numeric: tabular-nums; }
.wallet.owed .wbig b { color: #ffb4ab; }
.wbig span { font-size: .9rem; opacity: .9; }
.wnums { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 4px; }
.wnums b { display: block; font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.wnums span { font-size: .8rem; opacity: .85; }
.wnums .neg b, .wallet b.neg { color: #ffb4ab; }
.wline { margin: 10px 0 0; font-size: .85rem; opacity: .9; }
.wcamps, .wdet ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.wcamps li, .wdet li { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; border-top: 1px solid rgba(255,255,255,.12); padding-top: 4px; }
.wdet summary { cursor: pointer; margin-top: 10px; font-size: .85rem; font-weight: 700; color: var(--gold); }
/* Barra del vendedor: campanita, billetera mini y configuración */
.tbtns { display: inline-flex; align-items: center; gap: 6px; }
.ibtn { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ibtn svg, .wmini svg { width: 22px; height: 22px; }
.ibtn .dot { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e5484d; color: #fff; font-size: .7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--deep); }
.wmini { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--gold); background: rgba(232,168,38,.15); color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer; }
.wmini svg { color: var(--gold); }
.wmini.neg { border-color: #ff8a80; background: rgba(229,72,77,.18); }
.wmini.neg span { color: #ffb4ab; }
.notes { max-width: 480px; width: 100%; }
.nlist { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; display: grid; gap: 6px; }
.nlist li { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 10px; background: var(--surface-2); }
.nlist li.new { background: var(--warn-bg); }
.nlist p { margin: 0 0 2px; }
.ni { font-size: 1.1rem; line-height: 1.4; }
/* Selector de diseño del cartón */
.themes { display: flex; gap: 12px; margin: 6px 0 4px; flex-wrap: wrap; }
.themeopt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 700; color: var(--fg); }
.themeopt img { width: 84px; height: 149px; object-fit: cover; border-radius: 8px; }
.themeopt[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,168,38,.3); }
.wallet .neg { color: #ffb4ab; }

/* ---------- Ventana de resumen (nuevo diseño) ---------- */
.pz { --a1: #fff3b8; --a2: #f2b53a; --a3: #b8740f; --ink: #2b1700; --glow: rgba(242, 181, 58, .45); --bg1: #0f4f80; --bg2: #06223d; --row: rgba(255, 255, 255, .06);
  position: relative; width: 100%; max-width: 420px; margin: 0 auto 16px; padding: 26px 18px 18px; border-radius: 24px; color: #fff; text-align: center; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 70% at 50% 0%, var(--bg1), var(--bg2) 75%);
  box-shadow: 0 0 0 2px var(--a3), 0 0 0 4px var(--a2), 0 0 0 6px var(--a3), 0 18px 60px rgba(0, 0, 0, .55), 0 0 60px var(--glow); }
.pz.th-halloween { --a1: #ffe1a8; --a2: #ff8a1f; --a3: #a8430a; --glow: rgba(255, 120, 20, .45); --bg1: #3b0f3f; --bg2: #120412; }
.pz::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .5) 0 1.5px, transparent 2.5px), radial-gradient(circle at 85% 30%, rgba(255, 255, 255, .45) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 8%, rgba(255, 230, 150, .6) 0 2px, transparent 3px), radial-gradient(circle at 25% 60%, rgba(255, 230, 150, .3) 0 1.5px, transparent 2.5px),
    repeating-conic-gradient(from 0deg at 50% 0%, rgba(255, 220, 140, .07) 0 5deg, transparent 5deg 15deg); }
.pzx { position: absolute; top: 12px; right: 12px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--a2); background: rgba(20, 4, 36, .7); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; }
.pzemb { width: 44px; height: 44px; display: block; margin: 0 auto 2px; filter: drop-shadow(0 0 10px var(--glow)); }
.pztitle { font-family: Georgia, 'Times New Roman', 'Noto Serif', serif; font-weight: 900; font-size: clamp(2rem, 10vw, 2.7rem); letter-spacing: -.01em; line-height: 1.05; margin: 0 0 16px; padding: 0 30px;
  background: linear-gradient(180deg, var(--a1) 10%, var(--a2) 55%, var(--a3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #3a1806) drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.pz.lose .pztitle { font-size: clamp(1.6rem, 8vw, 2.1rem); }
.pzstats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.pzstat { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1.5px rgba(255, 210, 120, .45); color: var(--a2); }
.pzstat svg { width: 40px; height: 40px; flex: none; }
.pzstat div { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.pzstat b { font-family: var(--f-display); font-size: 2.2rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.pzstat span { font-size: .78rem; color: #d6ecfb; line-height: 1.2; }
.pztotal { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 0 -4px 14px; padding: 12px 6px; border-radius: 18px;
  background: linear-gradient(180deg, #4a2108, #241004); box-shadow: inset 0 0 0 2px var(--a2), inset 0 0 26px rgba(255, 190, 60, .3), 0 6px 18px rgba(0, 0, 0, .4); }
.pztotal > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pztotal b { font-family: var(--f-display); font-size: clamp(1.8rem, 9vw, 2.5rem); line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: linear-gradient(180deg, var(--a1), var(--a2) 60%, var(--a3)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #2a1004); }
.pztotal span { font-size: .9rem; color: #fff1d6; font-weight: 600; }
.pzcoins { width: 58px; height: 42px; flex: none; }
.pzcoins.r { transform: scaleX(-1); }
.pzlist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; text-align: left; }
.pzlist button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 14px; border: 0; cursor: pointer; color: #fff; font: inherit;
  background: var(--row); box-shadow: inset 0 0 0 1.5px rgba(255, 210, 120, .3); text-align: left; transition: background .15s; }
.pzlist button:hover, .pzlist button:focus-visible { background: rgba(255, 255, 255, .12); }
.pzfig { width: 44px; height: 44px; flex: none; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px var(--a2); }
.pzfig img, .pzfig svg { width: 100%; height: 100%; display: block; }
.pzcode { flex: 1; min-width: 0; font-size: 1.05rem; font-weight: 600; display: flex; flex-direction: column; line-height: 1.2; }
.pzcode small { font-family: var(--f-body); font-size: .75rem; color: #bcdcf2; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pzamt { font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; color: var(--a2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pzpaid { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; color: #7fe0a8; white-space: nowrap; }
.pzpaid svg { width: 16px; height: 16px; }
.pzchev svg { width: 18px; height: 18px; display: block; color: #cdb8ea; }
.pznote { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 14px; font-size: .88rem; color: #f3e9ff; text-align: left; }
.pznote svg { width: 22px; height: 22px; flex: none; color: var(--a2); }
.pzlose { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; padding: 16px 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 210, 120, .3); }
.pzlose b { font-family: var(--f-display); font-size: 1.2rem; color: var(--a2); }
.pzlose span { font-size: .9rem; color: #d6ecfb; }
/* Canje o cobro del premio (el cliente elige; el vendedor decide cuánto se canjea) */
.pzchoice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2px 0 12px; }
.pzopt { display: flex; align-items: center; justify-content: flex-start; gap: 6px; min-height: 64px; padding: 10px 14px; border-radius: 16px; cursor: pointer; text-align: left;
  font: 800 1rem/1.2 var(--f-display); color: var(--ink); border: 2px solid var(--a3); background: linear-gradient(180deg, var(--a1), var(--a2)); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); text-decoration: none; }
.pzopt.alt { background: #fff; border-color: #b9a2ff; color: #2b1446; }
.pzopt svg { width: 20px; height: 20px; flex: none; }
.pzopt[aria-pressed="true"] { outline: 3px solid #fff; outline-offset: 2px; }
.pzopt:active { transform: translateY(1px); }
.pzopt.canjego { justify-content: center; min-height: 52px; margin: 0 0 12px; border-radius: 999px; }
.pznote.box { background: rgba(255, 255, 255, .92); color: #2b1446; border: 2px solid var(--a2); border-radius: 16px; padding: 12px 14px; justify-content: flex-start; }
.pznote.box svg { color: var(--a3); }
.pzcta { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; color: var(--ink);
  background: linear-gradient(180deg, var(--a1), var(--a2) 55%, var(--a3)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 0 0 2px #fff3c4, 0 8px 20px rgba(0, 0, 0, .45), 0 0 24px var(--glow); }
.pzcta svg { width: 22px; height: 22px; }
.pzcta:active { transform: translateY(1px); }
.pzconf { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pzconf i { position: absolute; top: -12px; left: calc(6% + var(--i) * 12.5%); width: 8px; height: 16px; border-radius: 2px; opacity: 0;
  background: linear-gradient(var(--a1), var(--a2)); }
.pz.won .pzconf i { animation: pzfall 3.4s linear calc(var(--i) * .37s) infinite; }
.pz.won .pzconf i:nth-child(3n) { background: linear-gradient(#e9c6ff, #9d4be0); }
.th-halloween.won .pzconf i:nth-child(3n) { background: linear-gradient(#c9a2ff, #6a2bb3); }
@keyframes pzfall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 10% { opacity: .9; } 70% { opacity: .7; } 100% { opacity: 0; transform: translateY(330px) rotate(540deg); } }
.sumover .pz { margin: 0; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; animation: sumpop .45s cubic-bezier(.2, 1.4, .4, 1); }
.pz:not(.modal) { margin-bottom: 18px; }
@media (prefers-reduced-motion: reduce) { .pz .pzconf i { animation: none !important; } .sumover .pz { animation: none; } }
@media (max-width: 360px) { .pz { padding-inline: 12px; } .pzcoins { width: 44px; } .pzstat svg { width: 32px; height: 32px; } .pzstat b { font-size: 1.8rem; } }

/* ---------- Pulso de la campaña (cartones que quedan y ganadores recientes) ---------- */
.pulse { --pa: #f2b53a; --pb: #b8740f; margin: 0 0 16px; padding: 14px 14px 10px; border-radius: 18px; color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #0f4f80, #06223d 80%); box-shadow: inset 0 0 0 1.5px rgba(242, 181, 58, .55), 0 8px 24px rgba(0, 0, 0, .25); }
.pulse.th-halloween { --pa: #ff8a1f; --pb: #a8430a; background: radial-gradient(120% 90% at 50% 0%, #3b0f3f, #120412 80%); box-shadow: inset 0 0 0 1.5px rgba(255, 138, 31, .6), 0 8px 24px rgba(0, 0, 0, .25); }
.pleft p { font-size: .95rem; margin-bottom: 6px; color: #d6ecfb; }
.pleft b { color: var(--pa); font-family: var(--f-display); font-size: 1.15rem; }
.pbar { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-bottom: 4px; }
.pbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pb), var(--pa) 70%, #fff3b8); box-shadow: 0 0 12px var(--pa); position: relative; overflow: hidden; }
.pbar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-100%); animation: pshine 2.6s ease-in-out infinite; }
@keyframes pshine { to { transform: translateX(100%); } }
.ptitle { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; font-size: .95rem; color: var(--pa); text-transform: uppercase; letter-spacing: .06em; }
.plive { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .7); animation: plive 1.8s infinite; }
@keyframes plive { 70% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
.pwins { list-style: none; margin: 0; padding: 0; }
.pwins li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .9rem; animation: pin .5s ease-out both; }
.pwins li:nth-child(2) { animation-delay: .08s; } .pwins li:nth-child(3) { animation-delay: .16s; } .pwins li:nth-child(4) { animation-delay: .24s; } .pwins li:nth-child(5) { animation-delay: .32s; } .pwins li:nth-child(6) { animation-delay: .4s; }
.pwins .fig { border-radius: 8px; box-shadow: 0 0 0 1.5px var(--pa); flex: none; }
.pwins .mono { font-weight: 600; }
.pwamt { flex: 1; color: #bcdcf2; white-space: nowrap; } .pwamt b { color: var(--pa); }
.pwago { font-size: .78rem; color: #b9a6d6; white-space: nowrap; }
@keyframes pin { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 360px) { .pwins li { gap: 7px; font-size: .82rem; } }
@media (prefers-reduced-motion: reduce) { .pbar i::after, .plive, .pwins li { animation: none; } }

/* ---------- Red de administradores ---------- */
.subtabs { margin: 0 0 14px; flex-wrap: wrap; }
.subtabs .badge, .pills .badge { margin-left: 4px; }
.evgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.evcard { display: flex; gap: 14px; align-items: flex-start; margin: 0; }
.evcard img { width: 84px; border-radius: 10px; flex: none; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.evcard h3 { margin-bottom: 4px; }
.evcard .btn { margin-top: 8px; }
.meter { position: relative; height: 12px; border-radius: 99px; background: var(--surface-2); margin: 4px 0 10px; overflow: visible; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
.meter i.bad { background: var(--bad); }
.meter i.ok { background: var(--ok); }
.meter b { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--fg); border-radius: 2px; }
.ok-t { color: var(--ok); }
.proofimg { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 10px; }
details.serie > summary { cursor: pointer; list-style: revert; }
details.serie[open] > summary { margin-bottom: 10px; }
.themeopt input { position: absolute; opacity: 0; pointer-events: none; }
.themeopt:has(input:checked) { outline: 3px solid var(--gold); }
.tabs.grouped { flex-wrap: wrap; overflow: visible; row-gap: 2px; column-gap: 0; }
.tabs.grouped .tg { display: flex; align-items: stretch; flex-wrap: nowrap; margin-right: 10px; }
.tabgrp { align-self: center; flex: none; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 4px 0 10px; border-left: 2px solid var(--line); white-space: nowrap; }
.tabs.grouped .tg:first-child .tabgrp { border-left: 0; padding-left: 0; }
.tabs.grouped button { padding: 10px 11px; }
@media (max-width: 640px) {
  .tabs.grouped { border-bottom: 0; }
  .tabs.grouped .tg { flex-wrap: wrap; width: 100%; margin: 0 0 6px; border-bottom: 1px solid var(--line); }
  .tabs.grouped .tabgrp { width: 100%; border-left: 0; padding: 6px 0 0; }
  .tabs.grouped button { padding: 8px 10px; }
}

/* Carrusel de ganadores (arriba, en elegir cartones y al jugar): pasa de derecha a izquierda como publicidad. */
.ticker { --pa: #f2b53a; position: relative; overflow: hidden; margin: 0 0 14px; border-radius: 999px; color: #fff; padding: 7px 0;
  background: linear-gradient(90deg, #0b1a3f, #1d3f8f 50%, #0b1a3f); box-shadow: inset 0 0 0 1.5px rgba(242, 181, 58, .65), 0 6px 18px rgba(0, 0, 0, .25);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker.th-halloween { --pa: #ff8a1f; background: linear-gradient(90deg, #2b0a2e, #4d1630 50%, #2b0a2e); box-shadow: inset 0 0 0 1.5px rgba(255, 138, 31, .65), 0 6px 18px rgba(0, 0, 0, .25); }
.ttrack { display: flex; width: max-content; animation: tick var(--dur, 30s) linear infinite; }
.ticker:hover .ttrack { animation-play-state: paused; }
.titem { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; white-space: nowrap; font-size: .9rem; }
.titem .fig { border-radius: 7px; box-shadow: 0 0 0 1.5px var(--pa); }
.titem b { color: var(--pa); font-variant-numeric: tabular-nums; }
.titem .tago { color: rgba(255, 255, 255, .65); font-size: .8rem; }
.titem.promo { color: #ffe7a3; font-weight: 700; letter-spacing: .02em; }
.titem::after { content: '✦'; margin-left: 22px; color: var(--pa); opacity: .7; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ttrack { animation: none; } .ticker { overflow-x: auto; } }
.clientwrap .ticker { width: 100%; max-width: 440px; }
.cardtime { font-size: .78rem; color: var(--muted); }
.linktime { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); }
.item.rep { border-left: 3px solid var(--bad); }
.pills.qty button { min-width: 48px; }

.stat span small{display:block;font-size:11px;font-weight:400;opacity:.75;margin-top:2px;line-height:1.3}

/* Mala señal: barrita de actividad arriba y aviso de conexión abajo */
html.net-busy body::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;background:linear-gradient(90deg,transparent,#e8b94a,transparent);background-size:40% 100%;background-repeat:no-repeat;animation:netbusy 1s linear infinite}
@keyframes netbusy{from{background-position:-40% 0}to{background-position:140% 0}}
#netbar{position:fixed;left:0;right:0;top:-80px;z-index:9998;padding:calc(6px + env(safe-area-inset-top)) 12px 7px;background:#7a2222;color:#fff;font-size:13px;font-weight:600;line-height:1.3;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:top .3s;text-align:center}
#netbar.on{top:0}
#netbar.ok{background:#1d6a3a}
@media (prefers-reduced-motion:reduce){html.net-busy body::before{animation:none;background:#e8b94a}}

/* Vendedores: herramientas, filtros y tarjetas */
.vtools{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:14px 0 10px}
.vtools .vsearch{flex:1 1 240px;max-width:420px}
.vfil{margin:4px 0 2px;flex-wrap:wrap}
#vfn:empty{display:none}
.vfil .pn{display:inline-block;min-width:1.4em;padding:0 5px;margin-left:4px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:.75rem;font-weight:700}
.vfil [aria-pressed=true] .pn{background:rgba(255,255,255,.25);color:inherit}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:8px}
.scard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.scard[hidden]{display:none}
.scard.need{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn) inset}
.scard.off{opacity:.65}
.scard header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.scard header strong{display:block;font-size:1.05rem;line-height:1.25}
.scard header .small{display:block;margin-top:2px;overflow-wrap:anywhere}
.smet{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.smet div{background:var(--surface-2);border-radius:10px;padding:8px 6px;text-align:center;min-width:0}
.smet b{display:block;font-family:var(--f-display);font-size:1.05rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.smet span{display:block;font-size:.7rem;color:var(--muted);line-height:1.2;margin-top:2px}
.sbal{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 12px;border-radius:10px;background:var(--surface-2)}
.sbal span{font-size:.8125rem;color:var(--muted)}
.sbal b{font-family:var(--f-display);font-size:1.15rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.sbal.neg b{color:var(--bad)}
.smeta{margin:0}
.swarn{display:flex;flex-wrap:wrap;gap:6px}
.swarn .chip{white-space:normal}
.sacts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:auto}
.sacts>.in{width:70px}
.smore{position:relative;margin-left:auto}
.smore summary{list-style:none;cursor:pointer}
.smore summary::-webkit-details-marker{display:none}
.smenu{position:absolute;right:0;bottom:calc(100% + 6px);z-index:5;display:flex;flex-direction:column;gap:4px;min-width:220px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.smenu .btn{justify-content:flex-start;width:100%}


/* Lista compacta de vendedores */
table.vlist{min-width:0}
.vlist th:nth-child(4),.vlist td.vgear{width:64px;text-align:right}
.vlist tbody[hidden]{display:none}
.vlist td strong{font-size:1.02rem}
.vlist .vsub{display:block;font-size:.85rem;color:var(--muted);margin-top:2px}
.vlist .vbig{font-family:var(--f-display);font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.vlist .vbig.muted{color:var(--muted)}
.vlist .chip{vertical-align:2px;margin-left:4px}
.vlist tbody.off td{opacity:.6}
.vlist tbody.open>tr:first-child td{border-bottom-color:transparent;background:var(--surface-2)}
.vlist tr.vdet td{background:var(--surface-2);padding-top:4px}
.vlist .smet{grid-template-columns:repeat(4,1fr)}
@media (max-width:480px){.vlist .smet{grid-template-columns:repeat(2,1fr)}.vlist th,.vlist td{padding:10px 8px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.vlist .vgear .ibtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--accent-ink,var(--accent));cursor:pointer}
.vlist .vgear .ibtn svg{width:22px;height:22px;fill:none;stroke:currentColor}
.vlist .vgear .ibtn[aria-expanded=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.vlist tr.vdet .smet div{background:var(--surface)}

/* Paneles (SuperAdmin, administrador y vendedor): estilo azul y dorado con fondo de imagen */
:root.bgimg {
  --bg: #04205a; --surface: rgba(9, 32, 92, .86); --surface-2: rgba(255, 255, 255, .09); --fg: #f3f7ff; --muted: #b8c8ec;
  --line: rgba(240, 193, 78, .38); --accent: #f2c14e; --on-accent: #2a1a00; --gold: #f2c14e; --on-gold: #2a1a00;
  --deep: rgba(4, 28, 84, .82); --on-deep: #fff; --focus: #ffd56b;
  --ok: #7be0a6; --ok-bg: rgba(40, 160, 95, .25); --warn: #ffd37a; --warn-bg: rgba(240, 170, 40, .22); --bad: #ffa3a0; --bad-bg: rgba(220, 70, 70, .25);
  color-scheme: dark;
}
html.bgimg body { background: #060d1f url(/panel-bg-mobile.webp) center top / cover no-repeat fixed; }
@media (min-width: 760px) { html.bgimg body { background-image: url(/panel-bg-desktop.webp); } }
html.bgimg .top { background: rgba(6, 13, 31, .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 2px solid var(--gold); box-shadow: 0 6px 20px rgba(0, 10, 40, .45); }
html.bgimg .brand span { font-family: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff3c4, #f2c14e 55%, #c8901f); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
html.bgimg main > .pagehead h1 { font-size: 2rem; text-shadow: 0 2px 12px rgba(0, 10, 50, .6); }
html.bgimg .panel, html.bgimg .tw, html.bgimg .sumbox, html.bgimg .scard {
  background: linear-gradient(180deg, rgba(12, 42, 112, .9), rgba(6, 26, 80, .92)); border: 1.5px solid rgba(242, 193, 78, .55);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 10px 28px rgba(0, 12, 50, .45); border-radius: 18px; }
html.bgimg .panel.hl { border-color: var(--gold); box-shadow: 0 0 22px rgba(242, 193, 78, .25), 0 10px 28px rgba(0, 12, 50, .45); }
html.bgimg th { background: rgba(255, 255, 255, .07); color: #d9e4ff; }
html.bgimg td { border-bottom-color: rgba(255, 255, 255, .1); }
/* Recuadros de números: claros, como en el diseño */
html.bgimg .stat { background: linear-gradient(160deg, #ffffff, #dfe9fb); border: 1.5px solid rgba(242, 193, 78, .7); border-radius: 14px; color: #0b2560;
  box-shadow: 0 6px 16px rgba(0, 12, 50, .3); position: relative; overflow: hidden; }
html.bgimg .stat b { color: #0b2560; }
html.bgimg .stat span { color: #33507f; }
/* Billetera */
html.bgimg .wallet { background: linear-gradient(135deg, rgba(8, 34, 96, .95), rgba(22, 70, 160, .92)); border: 2px solid var(--gold); box-shadow: 0 0 24px rgba(242, 193, 78, .35), 0 10px 26px rgba(0, 12, 50, .45); }
html.bgimg .wallet .wbig b, html.bgimg .wallet b { color: #ffe08a; }
/* Botones, campos y pestañas */
html.bgimg .btn.gold, html.bgimg .btn:not(.ghost):not(.light):not(.danger) { background: linear-gradient(180deg, #ffe08a, #f2c14e 55%, #d89b22); color: #2a1a00; border-color: #c88d1d; box-shadow: 0 3px 10px rgba(240, 180, 40, .35); }
html.bgimg .btn.ghost { background: rgba(8, 34, 96, .7); color: #e7efff; border-color: rgba(160, 190, 255, .45); }
html.bgimg .btn.ghost.danger { color: var(--bad); border-color: var(--bad); }
html.bgimg .in, html.bgimg select.in { background: rgba(3, 20, 64, .75); color: #f3f7ff; border-color: rgba(160, 190, 255, .35); }
html.bgimg .in::placeholder { color: #8ea4cf; }
html.bgimg .pills button { background: rgba(3, 20, 64, .7); color: #e7efff; border-color: rgba(160, 190, 255, .35); }
html.bgimg .pills button[aria-pressed="true"] { background: linear-gradient(180deg, #ffe08a, #f2c14e 60%, #d89b22); color: #2a1a00; border-color: #c88d1d; }
html.bgimg .tabs button { color: #c9d7f5; }
html.bgimg .tabs button[aria-selected="true"] { color: #fff; border-bottom-color: var(--gold); }
html.bgimg .linkbox { background: rgba(3, 20, 64, .7); border: 1px solid rgba(160, 190, 255, .3); }
html.bgimg .empty { background: rgba(6, 26, 80, .6); }
html.bgimg .smet div, html.bgimg .sbal { background: rgba(255, 255, 255, .08); }
html.bgimg .vlist .vgear .ibtn { background: rgba(3, 20, 64, .7); color: var(--gold); border-color: rgba(242, 193, 78, .5); }
html.bgimg footer { color: #c9d7f5; border-top-color: rgba(242, 193, 78, .3); }
/* Lo que va directo sobre el fondo (título, pestañas, textos) lleva una banda oscura para leerse sobre las nubes */
html.bgimg main > .pagehead, html.bgimg main > .tabs, html.bgimg main > p, html.bgimg main > .vtools, html.bgimg main > .pills, html.bgimg main > h2 {
  background: rgba(4, 26, 82, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(242, 193, 78, .3); border-radius: 14px; padding: 10px 14px; }
html.bgimg main > .tabs { padding: 6px 10px; border-bottom: 1px solid rgba(242, 193, 78, .3); }
html.bgimg main > .pills { padding: 8px; }
html.bgimg main > p.small { font-size: .85rem; }

/* Logo de la empresa */
.brand img.logo { width: 40px; height: 40px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(242, 193, 78, .7), 0 2px 10px rgba(0, 0, 0, .35); }
.panel.login::before { content: ""; display: block; width: 150px; height: 150px; margin: 0 auto 4px; border-radius: 50%;
  background: url(/logo-512.webp) center / contain no-repeat; filter: drop-shadow(0 6px 18px rgba(0, 10, 40, .5)); }
@media (max-width: 380px) { .brand span { font-size: 1rem; } }

/* Íconos de los recuadros de números */
.stat { position: relative; }
.stat .sic { display: none; }
html.bgimg .stat { padding-left: 64px; min-height: 68px; display: flex; flex-direction: column; justify-content: center; }
html.bgimg .stat .sic { display: flex; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%;
  align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #ffffff, #cfdcf3 75%); box-shadow: 0 0 0 1.5px rgba(11, 37, 96, .15), 0 3px 8px rgba(0, 20, 70, .25); }
html.bgimg .stat .sic svg { width: 23px; height: 23px; fill: none; stroke: #0b2560; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
/* ramita de laurel dorada a la derecha de cada recuadro */
html.bgimg .stat::after { content: ""; position: absolute; right: 8px; top: 50%; transform: translateY(-50%) rotate(12deg); width: 22px; height: 40px; opacity: .55; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 40'%3E%3Cpath d='M11 39C11 26 12 12 15 2' fill='none' stroke='%23d4a230' stroke-width='1.4'/%3E%3Cg fill='%23e0b040'%3E%3Cellipse cx='7' cy='30' rx='5' ry='2.2' transform='rotate(-35 7 30)'/%3E%3Cellipse cx='16' cy='26' rx='5' ry='2.2' transform='rotate(35 16 26)'/%3E%3Cellipse cx='8' cy='21' rx='5' ry='2.2' transform='rotate(-40 8 21)'/%3E%3Cellipse cx='17' cy='17' rx='4.6' ry='2' transform='rotate(40 17 17)'/%3E%3Cellipse cx='10' cy='12' rx='4.4' ry='2' transform='rotate(-45 10 12)'/%3E%3Cellipse cx='17' cy='8' rx='4' ry='1.8' transform='rotate(45 17 8)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
html.bgimg .stat { padding-right: 30px; }
@media (max-width: 380px) { html.bgimg .stat { padding-left: 54px; } html.bgimg .stat .sic { width: 34px; height: 34px; left: 10px; } html.bgimg .stat .sic svg { width: 18px; height: 18px; } }
html.bgimg .top .demo-pill, html.bgimg .top .ibtn, html.bgimg .top .wmini, html.bgimg .top .btn { background-color: rgba(4, 28, 84, .88); position: relative; z-index: 1; }
html.bgimg .top .wmini { background-color: rgba(60, 40, 0, .85); }
html.bgimg .top .demo-pill, html.bgimg .top .ibtn, html.bgimg .top .wmini, html.bgimg .top .btn { background-color: rgba(4, 28, 84, .88); position: relative; z-index: 1; }
html.bgimg .top .wmini { background-color: rgba(60, 40, 0, .85); }

/* ===================== Orden de los paneles (Master, administrador y desarrollador) ===================== */
/* Recuadros de números: todos iguales, en el tono del panel, cifra grande y leyenda debajo; sin adornos que pisen el número. */
.stats { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
html.bgimg .stat, .stat { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: start;
  min-height: 92px; padding: 14px 14px 12px 16px; border-radius: 14px; overflow: hidden; }
html.bgimg .stat { background: linear-gradient(180deg, rgba(12, 42, 112, .92), rgba(6, 26, 80, .94)); border: 1.5px solid rgba(242, 193, 78, .45);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 8px 22px rgba(0, 12, 50, .35); color: #eef1f8; }
html.bgimg .stat::after { display: none; }
html.bgimg .stat .sic { position: static; transform: none; grid-column: 2; grid-row: 1 / span 2; width: 36px; height: 36px;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #f2c14e 70%); box-shadow: 0 0 0 1.5px rgba(242, 193, 78, .5), 0 3px 8px rgba(0, 20, 70, .35); }
html.bgimg .stat .sic svg { width: 19px; height: 19px; stroke: #2a1a00; }
.stat b, html.bgimg .stat b, #planBox .stat b, .stats .stat b { grid-column: 1; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); line-height: 1.15; white-space: normal; overflow-wrap: anywhere; color: #ffe08a; }
/* Montos grandes (G. 150.000.000) en los mosaicos: nunca se cortan; en pantallas chicas el número baja de tamaño y el ícono se corre arriba a la derecha. */
@media (max-width: 560px) { .stat b, html.bgimg .stat b, .stats .stat b { font-size: clamp(.92rem, .8rem + .9vw, 1.2rem); letter-spacing: -.01em; } }
.stat span, html.bgimg .stat span { grid-column: 1; margin-top: 4px; font-size: .78rem; line-height: 1.3; color: #c9d7f5; }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } html.bgimg .stat, .stat { min-height: 84px; padding: 12px 12px 10px 13px; } html.bgimg .stat .sic { width: 30px; height: 30px; } html.bgimg .stat .sic svg { width: 16px; height: 16px; } }

/* Encabezado compacto en el celular: marca y botones en una sola fila; el rol va en la segunda. */
@media (max-width: 640px) {
  .topin { gap: 8px 10px; padding-block: 8px; }
  .topright { margin-left: auto; width: auto; gap: 6px; }
  .top .brand span { font-size: .95rem; }
  .top .btn.sm { padding: 6px 10px; font-size: .8rem; }
  .top .demo-pill { order: 10; width: 100%; text-align: center; margin-top: -2px; }
  .brand img.logo { width: 34px; height: 34px; }
}

/* Pestañas en el celular y pantallas medianas: cada grupo es una fila deslizable de píldoras, con su título chico arriba. */
@media (max-width: 979px) {
  .tabs.grouped { border-bottom: 0; row-gap: 6px; }
  .tabs.grouped .tg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; gap: 6px; padding-bottom: 4px; border-bottom: 0; margin: 0; width: 100%; }
  .tabs.grouped .tg::-webkit-scrollbar { display: none; }
  .tabs.grouped .tabgrp { width: auto; flex: none; align-self: center; border-left: 0; padding: 0 6px 0 2px; }
  .tabs.grouped button { flex: none; border-bottom: 0; border-radius: 999px; padding: 7px 12px; margin: 0; background: rgba(255, 255, 255, .07); border: 1px solid rgba(160, 190, 255, .25); }
  .tabs.grouped button[aria-selected="true"] { background: linear-gradient(180deg, #ffe08a, #f2c14e 60%, #d89b22); color: #2a1a00 !important; border-color: #c88d1d; }
  html.bgimg main > .tabs { padding: 8px 10px 4px; }
}

/* Computadora: menú lateral fijo a la izquierda con los grupos uno debajo del otro; el contenido a la derecha. */
@media (min-width: 980px) {
  html.bgimg .wrap { max-width: 1240px; }
  main#app.sidenav { display: grid; grid-template-columns: 236px minmax(0, 1fr); column-gap: 18px; row-gap: 0; grid-auto-rows: min-content; align-items: start; }
  main#app.sidenav > * { grid-column: 2; margin-top: 0 !important; margin-bottom: 14px; }
  main#app.sidenav > .pagehead:first-child { grid-column: 1 / -1; }
  main#app.sidenav > .pagehead:not(:first-child) { grid-column: 2; }
  main#app.sidenav > .tabs.grouped { grid-column: 1; grid-row: 2 / span 400; position: sticky; top: 84px; flex-direction: column; align-items: stretch; padding: 10px; border-bottom: 0; row-gap: 0; }
  main#app.sidenav > .tabs.grouped .tg { flex-direction: column; align-items: stretch; margin: 0 0 8px; width: auto; border: 0; padding-bottom: 8px; border-bottom: 1px solid rgba(242, 193, 78, .22); }
  main#app.sidenav > .tabs.grouped .tg:last-child { border-bottom: 0; margin-bottom: 0; }
  main#app.sidenav > .tabs.grouped .tabgrp { border-left: 0; padding: 6px 10px 6px; width: auto; align-self: stretch; }
  main#app.sidenav > .tabs.grouped button { text-align: left; border-bottom: 0; border-left: 3px solid transparent; border-radius: 8px; padding: 9px 12px; margin: 1px 0; white-space: normal; line-height: 1.25; }
  main#app.sidenav > .tabs.grouped button:hover { background: rgba(255, 255, 255, .06); }
  main#app.sidenav > .tabs.grouped button[aria-selected="true"] { border-left-color: var(--gold); background: rgba(242, 193, 78, .14); color: #fff; }
  main#app.sidenav > .tabs.grouped .badge { margin-left: 6px; }
}

/* Diseños «próximamente»: se muestran apagados, con etiqueta, y no se pueden elegir. */
.themeopt.soon { opacity: .55; cursor: not-allowed; filter: grayscale(.5); position: relative; }
.themeopt.soon img { filter: blur(1px); }
.soonbadge { position: absolute; top: 10px; left: 50%; transform: translateX(-50%) rotate(-8deg); background: var(--gold); color: #1a1a1a; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }