/* =====================================================
   CBD STREAMING SHOP · tema negro, púrpura y rojo
   ===================================================== */
:root{--bg:#050308;--bg2:#0a0612;--card:#0f0818;--card2:#150b22;--line:#2a1346;--line2:#3d1f66;--pu:#7c3aed;--pu2:#a855f7;--red:#dc1230;--red2:#ff3b52;--tx:#f3eefc;--mu:#a99bc0;--ok:#3ddc84;--warn:#ffb020;--brand:linear-gradient(135deg,#7c3aed,#dc1230);--btn:linear-gradient(100deg,#a855f7 0%,#7c3aed 55%,#d4163c 135%);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-padding-top:80px;background:var(--bg);-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;min-height:100vh;min-height:100dvh;overflow-x:clip;background:var(--bg);color:var(--tx);font:15px/1.6 "Inter","Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;background-image:radial-gradient(ellipse at 50% -8%,#2a0a4a 0,transparent 55%),radial-gradient(circle at 100% 100%,#dc123022 0,transparent 38%)}
::selection{background:#7c3aed66}
h1,h2,h3{margin:0;font-family:"Orbitron","Inter",sans-serif;letter-spacing:.5px}
h3{font-family:"Inter",sans-serif;font-weight:700;letter-spacing:0;font-size:17px}
img{max-width:100%}
a{color:inherit}
small{font-size:12.5px}
.mu,.card small{color:var(--mu)}
.wide{width:100%}

/* ---------- Pantalla de carga ---------- */
#boot{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,#2a0a4a 0,#0a0510 48%,#050308 82%);opacity:0;animation:bootin .25s ease .3s forwards}
#boot.now{opacity:1;animation:none}
#boot.off{opacity:0;visibility:hidden;pointer-events:none;animation:none;transition:opacity .4s ease,visibility .4s}
@keyframes bootin{to{opacity:1}}
.bt{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:20px}
.bt-ring{position:relative;width:118px;height:118px;border-radius:50%;display:grid;place-items:center}
.bt-ring::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 20%,var(--pu) 55%,var(--red2) 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));animation:spin 1.1s linear infinite}
.bt-ring img{width:104px;height:104px;border-radius:50%;object-fit:cover;box-shadow:0 0 30px #7c3aed77}
.bt-name{font-family:"Orbitron",sans-serif;font-size:15px;letter-spacing:3px}
.bt p{margin:0;color:var(--mu);font-size:13px}
.bt-bar{width:180px;height:4px;border-radius:4px;background:#1b0d2e;overflow:hidden}
.bt-bar i{display:block;height:100%;width:40%;border-radius:4px;background:linear-gradient(90deg,var(--pu),var(--red2));animation:bar 1.2s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bar{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}

/* ---------- Formularios y botones ---------- */
input,textarea,select{width:100%;background:#09050f;border:1px solid var(--line);color:var(--tx);border-radius:10px;padding:11px 13px;font:inherit;margin:4px 0 12px;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:#6d5f86}
input:hover,textarea:hover,select:hover{border-color:var(--line2)}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--pu2);box-shadow:0 0 0 3px #7c3aed33}
button:focus-visible,.btn:focus-visible{outline:2px solid var(--pu2);outline-offset:2px}
textarea{resize:vertical}
label{display:block;font-size:13px;font-weight:500;color:var(--mu)}
button,.btn{font:inherit;font-weight:700;letter-spacing:.2px;border:0;border-radius:10px;padding:10px 18px;cursor:pointer;color:#fff;background:var(--btn);box-shadow:0 4px 16px #7c3aed44;transition:transform .15s,filter .15s,box-shadow .2s}
button:hover:not(:disabled),.btn:hover{filter:brightness(1.12);box-shadow:0 6px 22px #7c3aed66}
button:active:not(:disabled){filter:brightness(.96)}
button.ghost{background:transparent;border:1px solid var(--line2);box-shadow:none;color:var(--tx)}
button.ghost:hover:not(:disabled){border-color:var(--pu2);background:#7c3aed1a;box-shadow:none}
button.ok{background:linear-gradient(135deg,#1a9b4f,#12803a);box-shadow:0 4px 14px #12803a44}
button.no{background:#2a0b16;border:1px solid #7a1428;color:#ff8d9d;box-shadow:none}
button.no:hover:not(:disabled){background:#dc1230;color:#fff;border-color:var(--red2);box-shadow:0 4px 18px #dc123055}
button:disabled{opacity:.4;cursor:not-allowed}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;text-decoration:none}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.lnk{float:right;background:none;border:0;box-shadow:none;padding:0;font-size:12px;font-weight:600;color:var(--pu2)}
.lnk:hover:not(:disabled){filter:none;transform:none;box-shadow:none;text-decoration:underline}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two>*{min-width:0}
@media(max-width:560px){.two{grid-template-columns:1fr}}

/* ---------- Estructura ---------- */
.wrap{max-width:1000px;margin:0 auto;padding:16px}
.bwrap{padding-bottom:0}
.sec{margin-bottom:28px}
.sec>h3{margin-bottom:12px;display:flex;align-items:center;gap:8px}
.sec>h3::before{content:"";width:4px;height:18px;border-radius:4px;background:var(--brand)}
.sec>h3.st{display:block;text-align:center}
.sec>h3.st::before{display:none}
.pill{font-size:12px;font-weight:700;padding:1px 10px;border-radius:20px;background:#7c3aed26;color:var(--pu2);border:1px solid #7c3aed55}
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s,box-shadow .2s,transform .2s}
.card:hover{border-color:var(--pu);box-shadow:0 10px 30px #7c3aed26}
.card .p{font-size:22px;font-weight:800;color:var(--red2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:16px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:11px 0}
.row:last-child{border:0}
.tag{display:inline-block;font-size:12px;font-weight:600;border-radius:20px;padding:2px 10px;border:1px solid var(--line2);color:var(--mu);white-space:nowrap}
.tag.pend{color:var(--warn);border-color:#ffb02077;background:#ffb02012}
.tag.ok{color:var(--ok);border-color:#3ddc8477;background:#3ddc8412}
.tag.no{color:var(--red2);border-color:#ff3b5277;background:#ff3b5212}
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:34px 16px;border:1px dashed var(--line2);border-radius:14px;background:#0a061266;color:var(--mu)}
.empty i{width:42px;height:42px;border-radius:50%;background:var(--brand);opacity:.55;box-shadow:0 0 24px #7c3aed66}
.empty p{margin:0}
.cnt2{margin:0 0 8px}

/* ---------- Barra superior y menú ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:calc(10px + env(safe-area-inset-top,0px)) 18px 10px;background:#07040dee;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--pu) 30%,var(--red2) 70%,transparent);opacity:.7}
.top .r{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;font-family:"Orbitron","Inter",sans-serif;font-weight:800;font-size:20px;letter-spacing:1px;white-space:nowrap}
.logo img{height:58px;width:auto;max-width:300px;object-fit:contain;display:block}
.logo b{color:#fff}.logo span{color:var(--red2)}
@media(max-width:560px){.logo img{height:44px;max-width:220px}}
.bal{border:1px solid var(--pu);border-radius:10px;padding:6px 14px;font-weight:700;background:#7c3aed14}
.role{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:2px 9px;border-radius:20px;background:var(--brand);color:#fff}
.usr{display:flex;align-items:center;gap:8px}.usr.big{margin-bottom:6px}
.av{width:36px;height:36px;border-radius:50%;background:var(--brand);display:grid;place-items:center;font-weight:800;flex:none;color:#fff}
.tabs{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap}
.tabs button{flex:1;min-width:max-content}
.tabs button.ghost{background:#0f0818}
.tabs.nav{padding:6px;gap:6px;border:1px solid var(--line);border-radius:14px;background:#0a0612}
.tabs.nav button{box-shadow:none;border-radius:10px;padding:11px 14px}
.tabs.nav button.ghost{background:transparent;border:0;color:var(--mu)}
.tabs.nav button.ghost:hover:not(:disabled){background:#7c3aed1f;color:#fff}
.burger{display:none;padding:8px;background:#14091f;border:1px solid var(--line2);box-shadow:none}
.burger svg{width:22px;height:22px;display:block}
.dw{position:fixed;inset:0;z-index:70;display:none}
.dw.on{display:block}
.dov{position:absolute;inset:0;background:#000b;backdrop-filter:blur(3px)}
.dp{position:absolute;top:0;right:0;bottom:0;width:min(300px,85vw);background:#08050e;border-left:1px solid var(--pu);padding:calc(18px + env(safe-area-inset-top,0px)) 16px 18px;display:flex;flex-direction:column;gap:10px;overflow:auto;animation:slide .2s ease}
@keyframes slide{from{transform:translateX(100%)}}
.dn{display:flex;flex-direction:column;gap:8px}
.dn button{text-align:left}
@media(max-width:760px){.burger{display:grid}.out,.rc,.un,.tabs.nav{display:none}.top{padding-left:12px;padding-right:12px}}

/* ---------- Modal, aviso, botón flotante ---------- */
#modal{position:fixed;inset:0;background:#000c;backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:16px;z-index:80}
#modal.on{display:flex}
body:has(#modal.on),body:has(.dw.on){overflow:hidden}
.box,.dp{overscroll-behavior:contain}
.box{background:linear-gradient(180deg,#120a1c,#0b0613);border:1px solid var(--pu);border-radius:16px;padding:22px;width:100%;max-width:440px;max-height:90vh;overflow:auto;box-shadow:0 0 50px #7c3aed55;animation:pop .18s ease}
@keyframes pop{from{transform:scale(.96);opacity:0}}
.box img{max-width:100%}
.box h3{margin-bottom:6px}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--btn);padding:11px 20px;border-radius:12px;display:none;z-index:90;font-weight:700;max-width:92vw;text-align:center;box-shadow:0 8px 30px #7c3aed77}
.fab{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;align-items:center;gap:8px;padding:12px 20px;border-radius:40px;text-decoration:none;color:#fff;font-weight:700;background:linear-gradient(135deg,#25d366,#128c4a);box-shadow:0 6px 22px #25d36655;transition:transform .15s}
.fab:hover{filter:brightness(1.08)}
.fab svg{width:22px;height:22px;fill:#fff}
@media(max-width:560px){.fab span{display:none}.fab{padding:14px}}
.cred{background:#000;border:1px dashed var(--pu2);border-radius:10px;padding:12px;font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all;white-space:pre-wrap;margin:10px 0}
.ck{width:56px;height:56px;border-radius:50%;margin:0 auto 8px;background:linear-gradient(135deg,#1a9b4f,#12803a);display:grid;place-items:center;font-size:28px;box-shadow:0 0 26px #12803a99}

/* ---------- Diálogo de confirmación ---------- */
#ask{position:fixed;inset:0;z-index:85;display:none;align-items:center;justify-content:center;padding:16px;background:#000b;backdrop-filter:blur(5px)}
#ask.on{display:flex;animation:fin .15s ease}
.abox{width:100%;max-width:400px;text-align:center;padding:26px 22px 22px;border-radius:18px;background:linear-gradient(180deg,#150b22,#0b0613);border:1px solid var(--line2);box-shadow:0 24px 60px #000c;animation:pop .18s ease}
.abox.danger{border-color:#7a1428;box-shadow:0 0 50px #dc123033,0 24px 60px #000c}
.aic{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:#7c3aed22;border:1px solid var(--pu);color:var(--pu2)}
.danger .aic{background:#dc123022;border-color:#ff3b5266;color:var(--red2);box-shadow:0 0 28px #dc123044}
.aic svg{width:28px;height:28px}
.abox h3{font-size:18px;margin-bottom:8px}
.abox p{margin:0 0 18px;color:var(--mu);font-size:14px;line-height:1.55}
.abox p b{color:var(--tx)}
.abox .wd{margin:-6px 0 18px;text-align:center}
.abox .wd input{text-align:center;letter-spacing:3px;font-weight:700;margin:8px 0 0}
.abox .two{grid-template-columns:1fr 1fr}
button.dng{background:linear-gradient(135deg,var(--red2),var(--red));box-shadow:0 4px 18px #dc123066}
button.dng:hover:not(:disabled){box-shadow:0 6px 24px #dc123099}

/* ---------- Catálogo ---------- */
.tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sbox{position:relative;flex:1;min-width:200px}
.sbox .ic{position:absolute;left:12px;top:15px;width:18px;height:18px;color:var(--mu);pointer-events:none}
.sbox .ic svg{width:18px;height:18px;display:block}
.sbox input{padding-left:40px;margin:4px 0 0}
.sort{width:auto;min-width:210px;margin:4px 0 0}
@media(max-width:560px){.sort{width:100%}}
.srch{margin-bottom:12px}
.cbar{margin-bottom:16px}
.chips2{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.chips2 button{padding:6px 14px;border-radius:20px;font-size:13px}
.cnt{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:20px;background:#ffffff26;font-size:11px;text-align:center}
.rcount{margin:0 0 10px;font-size:13px}
.pc{cursor:pointer;gap:8px;padding:12px}
.pc h3{font-size:16px;margin-top:2px}
.pc>small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.pimgw{position:relative}
.ov{position:absolute;top:8px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.3px;padding:3px 10px;border-radius:20px;background:#050308cc;backdrop-filter:blur(6px);border:1px solid var(--line2)}
.ov.l{left:8px;color:var(--pu2)}.ov.r{right:8px}
.ov.ok{color:var(--ok);border-color:#3ddc8466}.ov.low{color:var(--warn);border-color:#ffb02066}.ov.out{color:var(--red2);border-color:#ff3b5266}
.meta{display:flex;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--mu)}
.meta span{border:1px solid var(--line);border-radius:8px;padding:2px 9px;background:#07040d}
.bar{display:flex;gap:8px;align-items:stretch;margin-top:auto}
.bar button{flex:1;min-width:0}
.bar .eye,.eye{flex:0 0 46px;padding:0;display:grid;place-items:center}
.eye svg{width:20px;height:20px;display:block}
.pw{position:relative;width:100%;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#14091f}
.pw img,.pw .ph{position:absolute;inset:0;width:100%;height:100%}
.pw img{object-fit:cover;margin:0;border-radius:0}
.pw.big{aspect-ratio:16/9}
.pw.sm{width:120px;margin-bottom:6px}
.pw.sm2{width:84px;flex:none;aspect-ratio:1}
.ph{display:grid;place-items:center;font-size:42px;font-weight:900;color:var(--pu2);background:linear-gradient(135deg,#14091f,#2a0f46)}
.p.big{font-size:26px;font-weight:800;color:var(--red2);margin-top:8px}
.desc{white-space:pre-wrap;word-break:break-word;color:#d9cfe8;line-height:1.7;margin:10px 0 16px}
.dprod{background:#14091f;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.dp2{display:flex;gap:12px;align-items:center}
.fld{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#000;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:8px}
.fv{font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all}
.wbox{border:1px solid var(--line);border-radius:12px;padding:10px;background:#07040d}

/* ---------- Bienvenida del cliente ---------- */
.hello{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:16px 0;padding:18px 20px;border:1px solid var(--line2);border-radius:16px;background:linear-gradient(135deg,#1a0b2e,#0b0613 60%,#1a0710);position:relative;overflow:hidden}
.hello::before{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#7c3aed44,transparent 70%);pointer-events:none}
.hello h2{font-size:22px;margin-top:2px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpis>div{border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:#09050fcc}
.kpis>div b{display:block;font-size:19px;margin-top:2px}
.kpis>div:first-child b{color:var(--red2)}
.kpis small{display:block;color:var(--mu)}
.hello .kpis{flex:1;min-width:260px;grid-template-columns:repeat(3,1fr)}
@media(max-width:560px){.hello .kpis{grid-template-columns:1fr 1fr 1fr;min-width:0;width:100%}.hello .kpis>div{padding:10px}.hello>button{width:100%}}

/* ---------- Compras y recargas ---------- */
.ord{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;background:linear-gradient(180deg,#130a1f,#0b0613);transition:border-color .2s}
.ord:hover{border-color:var(--line2)}
.ord .av{width:46px;height:46px;font-size:19px}
.ord .av.na{background:#231436;color:var(--mu)}
.ord .oi{flex:1;min-width:200px}
.ord .cn{font-weight:700;font-size:16px}
.oa{display:flex;gap:6px;flex-wrap:wrap}
.rrow{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;background:#0b0613}
.rrow .ri{min-width:0}
.rrow .ri b{display:block;word-break:break-all}
.rrow .ri small{display:block}
.rrow .rm{font-weight:700;text-align:right}
.rrow .rb{display:flex;gap:6px;justify-content:flex-end}
@media(max-width:620px){.rrow{grid-template-columns:1fr auto}.rrow .rb{grid-column:1/-1;justify-content:stretch}.rrow .rb>*{flex:1}.rrow .rb span{display:flex;gap:6px;width:100%}.rrow .rb span>button{flex:1}}

/* ---------- Recarga: QR compacto ---------- */
.payb{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:10px 0}
.qrb{position:relative;flex:0 0 130px;width:130px;aspect-ratio:1;border:2px solid var(--pu);border-radius:14px;background:#fff;overflow:hidden;cursor:zoom-in;box-shadow:0 0 20px #7c3aed55;transition:width .2s,flex-basis .2s}
.qrb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:5px;margin:0;border-radius:0}
.qrb.zoom{flex:0 0 min(300px,100%);width:min(300px,100%);margin:0 auto;cursor:zoom-out}
.qrph{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#222;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/20px 20px}
.payi{flex:1;min-width:170px}
@media(max-width:420px){.qrb{flex-basis:116px;width:116px;margin:0 auto}}

/* ---------- Administrador ---------- */
.hrow{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-left:4px solid var(--pu);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:linear-gradient(180deg,#130a1f,#0b0613);transition:border-color .2s}
.hrow:hover{border-color:var(--line2);border-left-color:var(--red2)}
.hrow .pw.sm2{width:58px;border-radius:10px}
.hi{flex:1;min-width:0}
.ht{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.hm{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 16px;font-size:13px;color:#d9cfe8}
.hm span{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--mu)}
.hm div{word-break:break-word}
.hr{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.hr>b{font-size:16px}
@media(max-width:620px){.hrow{flex-wrap:wrap}.hr{flex-direction:row;align-items:center;justify-content:space-between;width:100%}}
.inv{margin-bottom:12px;gap:0}
.invh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;text-align:left}
.invtools{margin:12px 0 16px}
.invtop{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.invbtns{display:flex;gap:6px;flex-wrap:wrap}
.invb{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;display:grid;gap:8px}
.irow{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:start;padding:10px;border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:12px;background:#0b0613;transition:border-color .2s,background .2s}
.irow:hover{border-color:var(--line2)}
.irow.dirty{border-left-color:var(--red2);background:#14091f}
.inum{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--mu);background:#14091f;margin-top:5px}
.ifs{display:grid;grid-template-columns:1.6fr 1.2fr .9fr .7fr 1.2fr;gap:8px;min-width:0}
.ifs input,.ifs textarea{margin:0;padding:8px 10px;font-size:13px;min-width:0}
.ifs textarea{grid-column:1/-1;resize:vertical}
.iact{display:flex;gap:6px}
.iact button{padding:8px 12px}
.box:has(#bk){max-width:720px}
@media(max-width:860px){.ifs{grid-template-columns:1fr 1fr}.irow{grid-template-columns:24px 1fr}.iact{grid-column:1/-1;justify-content:flex-end}}
.pitem{flex-direction:row;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.pitem .pth{flex:none}
.pitem .pbody{flex:1;min-width:200px}
.pitem .pbody>b{display:block;font-size:16px;margin-bottom:6px}
.pitem .pact{display:flex;gap:6px;flex-wrap:wrap}
.cli{align-items:center}
.cli .usr{flex:1;min-width:220px}

/* ---------- Portada ---------- */
.bnr{max-width:1000px;margin:14px auto 0;border:1px solid var(--line2);border-radius:18px;overflow:hidden;background:#0a0612;box-shadow:0 10px 40px #7c3aed2e}
.bnr img{display:block;width:100%;height:auto}
@media(max-width:560px){.bnr{border-radius:14px}}
.hero{position:relative;text-align:center;padding:46px 16px 34px;max-width:760px;margin:0 auto}
.hero::before{content:"";position:absolute;left:50%;top:0;width:520px;max-width:100%;height:260px;transform:translateX(-50%);background:radial-gradient(circle,#7c3aed55,transparent 70%);filter:blur(30px);z-index:-1}
.hero h1{font-size:clamp(28px,6vw,48px);line-height:1.15}
.hero h1 span{background:linear-gradient(90deg,var(--pu2),var(--red2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mu);font-size:17px;margin:14px 0 24px}
.cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cta button{padding:12px 24px}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--pu);border-radius:30px;padding:6px 16px;font-size:13px;color:var(--pu2);background:#14091f;margin-bottom:18px}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--red2);box-shadow:0 0 8px var(--red2)}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:20px}
.feat>div{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:linear-gradient(180deg,#130a1f,#0b0613);transition:border-color .2s,transform .2s}
.feat>div:hover{border-color:var(--pu)}
.feat i{grid-row:span 2;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:#7c3aed22;border:1px solid var(--line2);color:var(--pu2)}
.feat svg,.aside li svg{width:22px;height:22px}
.feat small{color:var(--mu)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 24px;max-width:760px}
.chips span{border:1px solid var(--pu);border-radius:20px;padding:5px 15px;background:#14091f;font-weight:600;font-size:13px}
.st{text-align:center;margin-bottom:16px;position:relative;padding-bottom:12px}
.st::after{content:"";position:absolute;left:50%;bottom:0;width:60px;height:3px;border-radius:3px;transform:translateX(-50%);background:linear-gradient(90deg,var(--pu),var(--red2))}
.steps{counter-reset:s}
.steps .card::before{counter-increment:s;content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--brand);display:grid;place-items:center;font-weight:800}
.faq{display:grid;gap:10px;max-width:720px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:12px;background:#0b0613;padding:13px 18px;transition:border-color .2s}
.faq details[open]{border-color:var(--pu)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red2);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq p{margin:8px 0 0;color:var(--mu)}
.foot{text-align:center;color:var(--mu);padding:26px 16px 18px;border-top:1px solid;border-image:linear-gradient(90deg,transparent,var(--pu) 30%,var(--red2) 70%,transparent) 1;margin-top:0}
.foot b{display:block;color:var(--tx);font-family:"Orbitron",sans-serif;letter-spacing:1.5px}
.flogo{width:68px;height:68px;border-radius:50%;object-fit:cover;border:2px solid var(--pu);box-shadow:0 0 26px #7c3aed66;margin:0 auto 10px;display:block}
.fchips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0 14px}
.fchips span{border:1px solid var(--line2);border-radius:20px;padding:4px 13px;font-size:12px}
.cp{font-size:12px;margin:14px 0 0}

/* ---------- Ingreso / registro ---------- */
.authwrap{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;max-width:980px;margin:0 auto;padding:4vh 16px;min-height:100vh;min-height:100dvh}
.aside h2{font-size:clamp(24px,3.4vw,36px);line-height:1.2;margin:20px 0 10px}
.aside h2 span{background:linear-gradient(90deg,var(--pu2),var(--red2));-webkit-background-clip:text;background-clip:text;color:transparent}
.aside>p{color:var(--mu)}
.aside ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:16px}
.aside li{display:grid;grid-template-columns:38px 1fr;column-gap:12px;align-items:center}
.aside li i{grid-row:span 2;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:11px;color:var(--pu2);background:#14091f}
.aside li small{color:var(--mu)}
.auth{width:100%;max-width:400px;margin:0 auto;background:linear-gradient(180deg,#130a1f,#08050e);border:1px solid var(--pu);border-radius:18px;padding:26px;box-shadow:0 0 40px #7c3aed44}
.alogo{display:block;width:88px;height:88px;border-radius:50%;object-fit:cover;margin:0 auto;border:2px solid var(--pu);box-shadow:0 0 26px #7c3aed77}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#09050f;border:1px solid var(--line);border-radius:12px;padding:4px;margin:18px 0 14px}
.seg button{background:transparent;box-shadow:none;color:var(--mu)}
.seg button:hover:not(:disabled){box-shadow:none;filter:none;color:#fff}
.seg button.on{background:var(--btn);color:#fff;box-shadow:0 4px 14px #7c3aed55}
.fi{position:relative}
.fi .ic{position:absolute;left:13px;top:15px;width:18px;height:18px;color:var(--mu);pointer-events:none}
.fi .ic svg{width:18px;height:18px;display:block}
.fi input{padding-left:42px}
.pwf input{padding-right:48px}
.pweye{position:absolute;right:0;top:4px;bottom:12px;width:44px;padding:0;background:transparent;box-shadow:none;color:var(--mu);display:grid;place-items:center}
.pweye:hover:not(:disabled){transform:none;color:var(--pu2);filter:none;box-shadow:none}
.pweye svg{width:20px;height:20px}
.pweye .off{display:none}.pweye.on .off{display:block}.pweye.on .open{display:none}
.meter{height:5px;border-radius:5px;background:#1b0d2e;overflow:hidden;margin:-4px 0 6px}
.meter i{display:block;height:100%;width:0;transition:width .25s,background .25s}
.hint{display:block;margin-bottom:12px}
.note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;margin:16px 0 0}
.note svg{width:14px;height:14px}
@media(max-width:820px){.authwrap{grid-template-columns:1fr;min-height:0}.aside{display:none}}

/* ---------- Detalles ---------- */
#view{min-height:60vh;padding-bottom:64px}
#view.in{animation:vin .28s ease}
@keyframes vin{from{opacity:0;transform:translateY(8px)}}
@keyframes fin{from{opacity:0}}
*{scrollbar-width:thin;scrollbar-color:#7c3aed #07040d}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#07040d}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#a855f7,#dc1230);border-radius:10px;border:2px solid #07040d}
::-webkit-scrollbar-corner{background:#07040d}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}#boot:not(.off){opacity:1}}

.kpi{min-width:0}