/* Barber Place — sistema visual propio (separado del de Elite Labs)
   Identidad tomada de la barberia: titulos con serifa como los de sus historias de Instagram, acento plateado/cromado
   (navajas y tijeras), la franja roja-blanca-azul del poste de barberia y la frase de su perfil. --acc = plateado. */
/* Letras alojadas en este mismo sitio (Barlow, licencia OFL en /fonts/OFL.txt): sin Google Fonts, el navegador del cliente no contacta a terceros */
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-serif-display-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Serif Display";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/dm-serif-display-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/barlow-condensed-latin-800-normal.woff2) format("woff2")}
:root{
  --ink:#0a0b0c;--ink-2:#111315;--ink-3:#181b1e;--ink-4:#202327;
  --line:#25292d;--line-2:#363b41;
  --acc:#c9ced4;--acc-hi:#f3f5f7;--acc-lo:#7c838b;--acc-wash:#c9ced41a;
  --chrome:linear-gradient(180deg,#f7f8fa 0%,#dfe3e7 38%,#b4bac1 72%,#d9dde1 100%);
  --bone:#eef0f2;--ash:#9aa0a7;--ash-2:#676d74;
  --ok:#6fd49a;--ok-wash:#6fd49a1a;--bad:#ff7a66;--bad-wash:#ff7a661a;
  --pole:repeating-linear-gradient(-45deg,#c62f3a 0 9px,#f3f5f7 9px 18px,#2b4fa6 18px 27px,#f3f5f7 27px 36px);
  --serif:"DM Serif Display",Georgia,"Times New Roman",serif;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --r:10px;--r-lg:18px;
  --tex:radial-gradient(1200px 600px at 50% -10%,#ffffff0d,transparent 60%);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{background:var(--tex),var(--ink);color:var(--bone);font:500 16px/1.45 var(--body);min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
::selection{background:var(--acc);color:var(--ink)}
.hide{display:none!important}
a{color:var(--acc);text-decoration-thickness:1px;text-underline-offset:3px}
button{font:inherit;cursor:pointer;border:0;color:inherit;background:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- tipografia ---------- */
.eyebrow{font:700 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.eyebrow b{color:var(--acc);font-weight:700}
.title{font:400 44px/1 var(--serif);letter-spacing:-.01em;margin:10px 0 0}
.title em{font-style:italic;color:var(--acc)}
.rule{display:block;width:72px;height:6px;background:var(--pole);border-radius:3px;margin:14px 0 0}
h2.sec{font:700 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;margin:0;display:flex;align-items:center;gap:10px;color:var(--bone)}
h2.sec:after{content:"";flex:1;height:1px;background:var(--line)}
h2.sec .n{color:var(--acc)}
.sub{color:var(--ash);font-size:14px}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.92em;letter-spacing:.02em}

/* ---------- formularios ---------- */
.bday{display:grid;grid-template-columns:1fr 2fr;gap:10px}
label.f{display:block;font:700 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin:18px 0 8px}
input,select{font:500 17px/1.2 var(--body);color:var(--bone);width:100%;padding:14px 14px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--ink);transition:border-color .15s,box-shadow .15s}
input::placeholder{color:var(--ash-2)}
input:focus,select:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-wash)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ash) 50%),linear-gradient(135deg,var(--ash) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.pw{position:relative}.pw input{padding-right:84px}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:700 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ash);padding:10px}
.pw button:hover{color:var(--acc)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ash);margin-top:18px;cursor:pointer}
.check input{appearance:none;width:22px;height:22px;flex:none;padding:0;margin-top:1px;border-radius:4px;display:grid;place-items:center;cursor:pointer}
.check input:checked{background:var(--acc);border-color:var(--acc)}
.check input:checked:after{content:"";width:10px;height:5px;border:2.5px solid var(--ink);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- botones ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 22px;border-radius:999px;font:700 16px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;margin-top:18px;transition:transform .08s,background .15s,border-color .15s,color .15s}
.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:default}
.btn.acc{background:var(--chrome);color:#111315;box-shadow:inset 0 1px 0 #fff,0 10px 24px -12px #c9ced480}.btn.acc:hover:not(:disabled){filter:brightness(1.06)}
.btn.line{border:1px solid var(--line-2);color:var(--bone)}.btn.line:hover:not(:disabled){border-color:var(--acc);color:var(--acc)}
.btn.danger{background:var(--bad);color:#1a0703}.btn.danger:hover:not(:disabled){filter:brightness(1.1)}
.linkdanger{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:10px;color:var(--ash);font:700 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;border-radius:var(--r)}
.linkdanger svg{width:16px;height:16px}.linkdanger:hover{color:var(--bad);background:var(--bad-wash)}
.btn.sm{width:auto;padding:9px 14px;font-size:13px;margin:0}
.btn.go svg{transition:transform .15s}.btn.go:hover svg{transform:translateX(3px)}

/* ---------- mensajes ---------- */
.msg{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);margin-top:14px;font-size:14px;font-weight:600;border-left:3px solid}
.msg.err{background:var(--bad-wash);color:var(--bad);border-color:var(--bad)}
.msg.ok{background:var(--ok-wash);color:var(--ok);border-color:var(--ok)}
.msg.warn{background:var(--acc-wash);color:var(--acc);border-color:var(--acc)}
.toast{position:fixed;left:50%;top:16px;transform:translate(-50%,-160%);display:flex;align-items:center;gap:10px;background:var(--bone);color:var(--ink);padding:12px 18px;border-radius:var(--r);font:800 15px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;z-index:60;transition:transform .35s cubic-bezier(.2,1.3,.4,1);box-shadow:0 18px 40px #000a}
.toast.show{transform:translate(-50%,0)}.toast.err{background:var(--bad);color:#1a0703}
.toast:before{content:"";width:8px;height:8px;background:var(--acc);border-radius:1px;transform:rotate(45deg)}.toast.err:before{background:#1a0703}

/* ---------- pantalla de acceso / inscripcion ---------- */
.gate{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1fr;align-items:stretch;position:relative}
.gate:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--pole);z-index:2}
.slogan{font:400 22px/1.15 var(--serif);color:var(--bone);margin:0}.slogan em{font-style:italic;color:var(--acc)}
.gate-art{display:none}
.gate-main{display:flex;flex-direction:column;justify-content:center;padding:40px 20px;width:100%;max-width:440px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:44px;height:44px;border-radius:50%;display:block;box-shadow:0 0 0 1px var(--line-2)}
.brand img.wmk{width:auto;height:46px;border-radius:0;box-shadow:none}
.brand .tagline{font:700 11px/1.3 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--ash);padding-left:14px;border-left:1px solid var(--line-2)}
.brand .wm{font:800 20px/1 var(--display);letter-spacing:.12em;text-transform:uppercase}
.brand .wm small{display:block;font-size:11px;letter-spacing:.24em;color:var(--ash);font-weight:700;margin-top:4px}
.gate h1{font:400 54px/1 var(--serif);margin:34px 0 0;letter-spacing:-.015em}
.gate h1 em{font-style:italic;display:inline-block;padding:0 .08em .12em 0;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.gate .lead{color:var(--ash);margin:14px 0 6px;font-size:16px}
.gate .foot{margin-top:28px;font-size:14px;color:var(--ash)}
.gate .foot a{color:var(--bone)}
@media(min-width:900px){
  .gate{grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr)}
  .gate-art{display:flex;flex-direction:column;justify-content:space-between;padding:40px;position:relative;overflow:hidden;border-right:0;background:radial-gradient(900px 520px at 20% 110%,#c9ced41f,transparent 60%),var(--tex),var(--ink-2)}
  .gate-art:after{content:"";position:absolute;top:0;bottom:0;right:0;width:8px;background:var(--pole)}
  .gate-art .big{font:400 clamp(64px,7.4vw,118px)/.95 var(--serif);letter-spacing:-.02em;color:var(--bone)}
  .gate-art .big span{display:block;width:fit-content;padding:0 .08em .14em 0;font-style:italic;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
  .gate-art .slogan{font-size:clamp(34px,3.6vw,54px);line-height:1.02;letter-spacing:-.015em}
  .gate-art .cap{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
  .gate-main{padding:40px 56px;max-width:520px}
  .gate .brand-m{display:none}
}

/* ---------- pase (replica del Wallet) ---------- */
.pass{position:relative;border-radius:16px;padding:18px 18px 16px;background:var(--tex),linear-gradient(180deg,#16181b,#0c0d0f);border:1px solid var(--line-2);box-shadow:0 30px 60px -30px #000,inset 0 1px 0 #ffffff0a;overflow:hidden}
.pass:before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;height:120%;background:radial-gradient(closest-side,#c9ced414,transparent);pointer-events:none}
.pass-top{display:flex;align-items:center;gap:10px}
.pass-top img{width:34px;height:34px;border-radius:50%}
.pass-top .org{flex:1;font:800 17px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.pass-top .cnt{text-align:right}
.pass-top .cnt small{display:block;font:700 10px/1 var(--display);letter-spacing:.18em;color:var(--ash);text-transform:uppercase}
.pass-top .cnt b{font:800 26px/1 var(--display);color:var(--acc)}
.coins{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,2.4vw,14px);margin:18px 0 16px;padding:14px 4px}
.coin{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative;font:800 clamp(16px,4.6vw,24px)/1 var(--display);color:var(--acc-lo);border:2px solid #c9ced440;background:#c9ced408}
.coin.on{background:var(--chrome);border-color:#e3e6ea;color:#111315;box-shadow:inset 0 -3px 0 #0000002a,0 6px 14px -8px #c9ced4}
/* sello ganado: tijeras centradas (panel e inscripcion) */
.coin span{display:grid;place-items:center;width:100%;height:100%}
.coin.on span svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.coin.gift{border-color:var(--acc);color:var(--acc);font-size:clamp(9px,2.4vw,12px);letter-spacing:.1em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;justify-content:center}
.coin.gift svg{width:42%;height:42%;fill:var(--acc);stroke:none;margin-bottom:2px}
.coin.gift.on{color:var(--ink)}.coin.gift.on svg{fill:var(--ink)}.coin.gift.on:after{display:none}
.coin.new{animation:stamp .55s cubic-bezier(.2,1.5,.4,1) both}
@keyframes stamp{0%{transform:scale(1.8) rotate(-12deg);opacity:0}60%{opacity:1}100%{transform:none}}
.pass-f{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pass-f small{display:block;font:700 10px/1 var(--display);letter-spacing:.18em;color:var(--ash);text-transform:uppercase;margin-bottom:5px}
.pass-f b{font:700 17px/1.15 var(--body);display:block;overflow:hidden;text-overflow:ellipsis}
.pass-f .st{text-align:right}
.pass-f .st b{color:var(--acc);font-size:15px}
.pass-id{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2);color:var(--ash);font-size:13px}

/* ---------- aplicacion ---------- */
.shell{min-height:100vh;min-height:100dvh}
.side{display:none}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 16px;background:#0a0b0ce6;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar .brand img{width:34px;height:34px}.topbar .brand img.wmk{width:auto;height:30px}.topbar .brand .wm{font-size:16px}
.topbar .sp{flex:1}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.av{width:34px;height:34px;border-radius:50%;background:var(--chrome);color:var(--ink);font:800 17px/1 var(--display);display:grid;place-items:center;flex:none;text-transform:uppercase}
.who .t{min-width:0;line-height:1.15}
.who .t b{display:block;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .t span{font:700 11px/1 var(--display);letter-spacing:.14em;color:var(--ash);text-transform:uppercase}
.topbar .who .t{display:none}
main{max-width:1080px;margin:0 auto;padding:22px 16px 110px}
.view{animation:rise .3s ease both}@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.head{margin-bottom:24px}
.panel{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin-top:16px}
.cols{display:grid;gap:16px;margin-top:16px}.cols>.panel{margin-top:0}.head+.cols{margin-top:0}

nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:#0a0b0cf2;backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
nav.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px 6px;color:var(--ash-2);font:700 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;position:relative}
nav.tabs button svg{width:22px;height:22px}
nav.tabs button.on{color:var(--acc)}
nav.tabs button.on:before{content:"";position:absolute;top:-7px;left:30%;right:30%;height:2px;background:var(--acc)}

@media(min-width:900px){
  .shell{display:grid;grid-template-columns:248px 1fr}
  .topbar,nav.tabs{display:none}
  .side{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:24px 16px;border-right:1px solid var(--line);background:var(--ink-2)}
  .side .brand{padding:0 8px 26px;border-bottom:1px solid var(--line);margin-bottom:18px}
  .side nav{display:flex;flex-direction:column;gap:2px}
  .side nav button{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r);color:var(--ash);font:700 15px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;text-align:left;position:relative}
  .side nav button:hover{color:var(--bone);background:var(--ink-3)}
  .side nav button.on{color:var(--acc);background:var(--acc-wash)}
  .side nav button.on:before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:3px;background:var(--acc)}
  .side .me{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}
  .side .me .who{flex:1}
  .side .me button{color:var(--ash);padding:8px;border-radius:var(--r)}.side .me button:hover{color:var(--bad);background:var(--ink-3)}
  main{padding:40px 40px 60px}
  .title{font-size:60px}
  .cols{grid-template-columns:1.1fr .9fr;align-items:start}
  .cols.even{grid-template-columns:1fr 1fr}
}

/* ---------- marcador (estadisticas) ---------- */
.score{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-2);overflow:hidden}
.score>div{padding:16px 16px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.score>div:nth-child(2n){border-right:0}
.score>div:nth-last-child(-n+2){border-bottom:0}
.score .n{font:400 52px/.9 var(--serif);letter-spacing:-.01em}
.score .l{display:flex;align-items:center;gap:6px;font:700 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-top:10px}
.score .l svg{width:14px;height:14px}
.score>div:first-child .n{color:var(--acc)}
@media(min-width:720px){
  .score{grid-template-columns:repeat(4,1fr)}
  .score>div{border-bottom:0}.score>div:nth-child(2n){border-right:1px solid var(--line)}.score>div:last-child{border-right:0}
  .score .n{font-size:64px}
}

/* ---------- llamado a escanear ---------- */
.cta{display:flex;align-items:center;gap:16px;width:100%;text-align:left;margin-top:16px;padding:20px;border-radius:var(--r-lg);color:var(--ink);background:repeating-linear-gradient(-55deg,#0000 0 14px,#00000010 14px 28px),var(--chrome);transition:filter .15s}
.cta:hover{filter:brightness(1.05)}
.cta .ico{width:52px;height:52px;border-radius:var(--r);background:var(--ink);color:var(--acc);display:grid;place-items:center;flex:none}
.cta .ico svg{width:26px;height:26px}
.cta b{display:block;font:400 28px/1 var(--serif)}
.cta span{font-weight:600;font-size:14px;opacity:.75}
.cta>svg{margin-left:auto;width:26px;height:26px;transition:transform .15s}.cta:hover>svg{transform:translateX(4px)}

/* ---------- listas ---------- */
.feed{margin-top:8px}
.feed .row{display:grid;grid-template-columns:48px 34px 1fr auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.feed .row:last-child{border-bottom:0}
.feed .tm{font-size:13px;color:var(--ash-2)}
.feed .k{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;background:var(--ink-4);color:var(--acc)}
.feed .k svg{width:18px;height:18px}
.feed .k.rd{background:var(--ok-wash);color:var(--ok)}
.feed .mid{min-width:0}.feed .mid b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed .mid span{font-size:13px;color:var(--ash)}
.feed .d{font:800 22px/1 var(--display);color:var(--acc)}.feed .d.rd{color:var(--ok);font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.feed.audit .row{grid-template-columns:64px 34px 1fr}
.feed.audit .tm{line-height:1.25}.feed.audit .mid b{white-space:normal;font-size:14px}
.feed .k.bad{background:var(--bad-wash);color:var(--bad)}.feed .k.warn{background:var(--acc-wash);color:var(--acc)}
.empty{padding:22px 0 8px;color:var(--ash);font-size:14px;text-align:center}
.empty svg{width:28px;height:28px;color:var(--ash-2);display:block;margin:0 auto 8px}

/* ---------- grafica ---------- */
.chart{position:relative;height:170px;margin-top:18px;padding-left:28px}
.chart .grid{position:absolute;inset:0 0 22px 28px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.chart .grid i{border-top:1px dashed var(--line);position:relative}
.chart .grid i:before{content:attr(data-v);position:absolute;left:-28px;top:-7px;font-size:11px;color:var(--ash-2);width:22px;text-align:right}
.chart .bars{position:absolute;inset:0 0 22px 28px;display:flex;align-items:flex-end;gap:4px}
.chart .bars div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;position:relative}
.chart .bars b{display:block;background:var(--acc);border-radius:2px 2px 0 0;min-height:2px;transition:background .15s}
.chart .bars div:hover b{background:var(--acc-hi)}
.chart .bars div:hover:after{content:attr(data-t);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--bone);color:var(--ink);font:700 12px/1 var(--body);padding:5px 7px;border-radius:4px;white-space:nowrap;z-index:2}
.chart .bars div span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--ash-2);white-space:nowrap}

/* ---------- ranking ---------- */
.rank{display:grid;grid-template-columns:26px minmax(0,1fr) 48px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.rank:last-child{border-bottom:0}
.rank .pos{font:800 15px/1 var(--display);color:var(--ash-2)}
.rank:first-child .pos{color:var(--acc)}
.rank .nm{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .bar{height:4px;background:var(--ink-4);margin-top:7px;border-radius:2px;overflow:hidden}
.rank .bar i{display:block;height:100%;background:var(--acc)}
.rank .v{font:800 22px/1 var(--display);text-align:right}

/* ---------- escaner ---------- */
.finder{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#000;aspect-ratio:4/3;max-height:360px;width:100%;margin-bottom:6px}
.finder video{width:100%;height:100%;object-fit:cover;display:block}
.finder .fr{position:absolute;inset:16% 22%;pointer-events:none}
.finder .fr:before,.finder .fr:after,.finder .fr i:before,.finder .fr i:after{content:"";position:absolute;width:26px;height:26px;border:3px solid var(--acc)}
.finder .fr:before{left:0;top:0;border-right:0;border-bottom:0}.finder .fr:after{right:0;top:0;border-left:0;border-bottom:0}
.finder .fr i:before{left:0;bottom:0;border-right:0;border-top:0}.finder .fr i:after{right:0;bottom:0;border-left:0;border-top:0}
.finder .ln{position:absolute;left:24%;right:24%;height:2px;background:var(--acc);box-shadow:0 0 16px 2px #c9ced4aa;animation:sweep 2.2s ease-in-out infinite alternate;top:20%}
@keyframes sweep{to{top:80%}}
.bigin{position:relative}
.bigin input{font:700 22px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;padding:18px 90px 18px 16px}
.bigin kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:700 11px/1 var(--display);letter-spacing:.14em;color:var(--ash);border:1px solid var(--line-2);border-radius:4px;padding:6px 7px;text-transform:uppercase}
.inrow{display:flex;gap:8px}.inrow .btn{flex:none;margin:0;width:auto}
.or{display:flex;align-items:center;gap:12px;margin:22px 0 4px;font:700 11px/1 var(--display);letter-spacing:.2em;color:var(--ash-2);text-transform:uppercase}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}
.picks{display:grid;gap:8px;margin-top:12px}
.picks button{display:flex;justify-content:space-between;align-items:center;padding:14px;border:1px solid var(--line-2);border-radius:var(--r);text-align:left}
.picks button:hover{border-color:var(--acc)}
.picks button span{color:var(--ash);font-size:14px}
.acts{display:grid;gap:10px;margin-top:16px}
.narrow{max-width:560px}
@media(min-width:900px){.cust{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}.cust .acts{margin-top:0}}
.act{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--ink-2);text-align:left;transition:border-color .15s,background .15s}
.act:hover:not(:disabled){border-color:var(--acc);background:var(--ink-3)}
.act:disabled{opacity:.45}
.act .ico{width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;background:var(--ink-4);color:var(--acc);flex:none}
.act .ico svg{width:22px;height:22px}
.act .tx{flex:1}.act .tx b{display:block;font:800 19px/1 var(--display);text-transform:uppercase;letter-spacing:.06em}
.act .tx span{font-size:13px;color:var(--ash)}
.act .pl{font:800 30px/1 var(--display);color:var(--acc)}
.act.prize{background:var(--acc);border-color:var(--acc);color:var(--ink);animation:glow 2s infinite}
.act.prize .ico{background:var(--ink);color:var(--acc)}.act.prize .tx span{color:#0a0b0caa}
.act.prize:hover:not(:disabled){background:var(--acc-hi)}
@keyframes glow{0%{box-shadow:0 0 0 0 #c9ced466}70%{box-shadow:0 0 0 14px #c9ced400}100%{box-shadow:0 0 0 0 #c9ced400}}

/* ---------- usuarios ---------- */
.urow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.urow:last-child{border-bottom:0}
.urow .mid{flex:1;min-width:0}.urow .mid b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.urow .ops{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.urow.off{opacity:.55}
.tag{display:inline-flex;align-items:center;gap:5px;font:700 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;padding:4px 7px;border-radius:3px;border:1px solid var(--line-2);color:var(--ash);margin-top:5px;margin-right:4px}
.tag.acc{color:var(--acc);border-color:#c9ced455}.tag.ok{color:var(--ok);border-color:#6fd49a55}
.tag.ok:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}

/* ---------- dialogo ---------- */
dialog{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--ink-2);color:var(--bone);padding:22px;width:min(420px,calc(100vw - 32px))}
dialog::backdrop{background:#000b;backdrop-filter:blur(3px)}
dialog h3{font:400 28px/1.05 var(--serif);margin:0}
dialog p{color:var(--ash);margin:10px 0 0}
dialog .row{display:flex;gap:8px;margin-top:18px}dialog .row .btn{margin:0}

/* ---------- promos ---------- */
textarea{font:500 17px/1.35 var(--body);color:var(--bone);width:100%;min-height:96px;padding:14px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--ink);resize:vertical;transition:border-color .15s,box-shadow .15s}
textarea::placeholder{color:var(--ash-2)}
textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-wash)}
.count{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:13px;color:var(--ash-2)}
.count b{color:var(--ash);font-weight:600}.count .over{color:var(--bad);font-weight:700}
.pinfo{display:grid;gap:10px;margin-top:16px}
.pinfo>div:not(.msg){display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ash)}
.pinfo b{color:var(--bone)}.pinfo svg{width:16px;height:16px;color:var(--acc);margin-top:2px}
.row2{display:grid;gap:10px;margin-top:18px}.row2 .btn{margin:0}
@media(min-width:560px){.row2{grid-template-columns:1fr 1fr}}
.prog{height:8px;background:var(--ink-4);border-radius:4px;overflow:hidden;margin-top:16px}
.prog i{display:block;height:100%;width:0;background:var(--acc);transition:width .4s}
.progtx{margin-top:10px;font-size:14px;color:var(--ash)}.progtx b{color:var(--bone)}
@media(min-width:900px){.panel.sticky{position:sticky;top:24px}}
/* vista previa: pantalla de bloqueo de iPhone */
.phone{margin:18px auto 14px;width:min(100%,300px);aspect-ratio:9/17;border-radius:46px;padding:9px;background:#050505;box-shadow:0 0 0 2px var(--line-2),0 30px 60px -24px #000}
.ph-screen{position:relative;height:100%;border-radius:38px;overflow:hidden;padding:52px 12px 0;background:radial-gradient(120% 70% at 15% 0%,#4a5260 0%,transparent 60%),radial-gradient(120% 80% at 100% 100%,#1c2a3c 0%,transparent 60%),linear-gradient(165deg,#2c251a,#0c0c0f)}
.ph-screen:before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:34%;height:25px;border-radius:14px;background:#000}
.ph-date,.ph-time,.notif{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",var(--body)}
.ph-date{display:block;text-align:center;font-size:15px;font-weight:600;color:#ffffffd9}
.ph-date:first-letter{text-transform:uppercase}
.ph-time{display:block;text-align:center;font-size:70px;font-weight:700;line-height:1;letter-spacing:-.02em;color:#fffffff2;margin-top:2px}
.notif{display:flex;gap:10px;margin-top:30px;padding:11px 12px;border-radius:20px;background:#ffffff2e;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;text-align:left}
.notif img{width:36px;height:36px;border-radius:9px;flex:none;align-self:center}
.notif .nb{min-width:0;flex:1}
.notif .nh{display:flex;justify-content:space-between;gap:8px;font-size:14px;line-height:1.25}
.notif .nh b{font-weight:600}.notif .nh span{color:#ffffffa6;font-size:13px}
.notif p{margin:1px 0 0;font-size:14px;line-height:1.3;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.feed.promos .row{grid-template-columns:52px 34px minmax(0,1fr) auto;align-items:start}
.feed.promos .tm{line-height:1.25}.feed.promos .mid b{white-space:normal;font-size:14px}
.feed.promos .mid>span{display:block}.feed.promos .mid .tag{display:inline-flex}
.feed.promos .mid .det{font-size:12px;color:var(--ash-2);margin-top:4px}
.feed.promos .d{font-size:18px;text-align:right;line-height:1.1}
.feed.promos .d small{display:block;font:600 11px/1.3 var(--body);color:var(--ash);letter-spacing:0;white-space:nowrap}
.feed .k.ok{background:var(--ok-wash);color:var(--ok)}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* ---------- documentos (privacidad) ---------- */
.doc{max-width:720px;margin:0 auto;padding:40px 20px 80px}
.doc h1{font:400 46px/1 var(--serif);margin:34px 0 0;letter-spacing:-.01em}
.doc h1 em{font-style:normal;color:var(--acc);display:block}
.doc .meta{color:var(--ash);font-size:14px;margin:16px 0 0}
.doc .msg{margin-top:22px}
.doc p,.doc li{color:#cfd3d8;line-height:1.65}.doc p b,.doc li b{color:var(--bone)}
.doc ul,.doc ol{padding-left:22px;margin:10px 0}.doc li{margin:6px 0}.doc li::marker{color:var(--acc)}
.doc h2{font:800 22px/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em;margin:40px 0 10px;display:flex;align-items:baseline;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.doc h2 .n{font-size:15px;color:var(--acc);letter-spacing:.1em}
.doc .tldr{margin-top:26px;padding:18px 20px;border:1px solid #c9ced455;border-radius:var(--r-lg);background:var(--acc-wash)}
.doc .tldr h2{margin:0 0 6px;padding:0;border:0;font-size:18px;color:var(--acc)}
.doc .fill{background:#c9ced433;color:var(--acc-hi);border-radius:3px;padding:0 4px;font-weight:700;white-space:nowrap}
.doc .back{margin-top:44px}