/* Web app de carga Electron */
:root{--blue:#12160F;--ink:#1f1f1f;--mute:#717173;--soft:#f1f1f3;--line:#e6e6ea;--ok:#1f9d55;--bad:#FF5A57;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{margin:0;background:#fff;color:var(--ink);font:400 16px/1.45 Outfit,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
.app{max-width:480px;margin:0 auto;min-height:100svh;display:flex;flex-direction:column;padding:max(16px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom))}
.bar{display:flex;align-items:center;justify-content:space-between;height:44px;margin-bottom:12px}
.logo{font:500 14px Outfit,sans-serif;letter-spacing:.28em;display:flex;align-items:center;color:var(--ink);text-decoration:none}
.logo i{width:.72em;height:.72em;border-radius:50%;border:.16em solid currentColor;margin-right:.28em}
.atras{width:40px;height:40px;border-radius:50%;border:0;background:var(--soft);display:grid;place-items:center;cursor:pointer}
.atras[hidden]{display:none}
.atras svg{width:18px}
.paso{display:none;flex:1;flex-direction:column;justify-content:center}.paso.on{display:flex;animation:in .45s var(--ease)}
@keyframes in{from{opacity:0;transform:translateY(10px)}}
h1{font:500 32px/1.08 Outfit,sans-serif;letter-spacing:-.025em;margin:8px 0 8px}
.sub{color:var(--mute);margin:0 0 24px}
.fin{margin-top:0;padding-top:28px;display:grid;gap:10px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:54px;border:0;border-radius:99px;background:var(--blue);color:#fff;font:500 17px Outfit,sans-serif;cursor:pointer;text-decoration:none;transition:transform .15s,opacity .2s}
.btn:active{transform:scale(.98)}.btn:disabled{opacity:.45;cursor:default}
.btn.neg{background:#000}.btn.gris{background:var(--soft);color:var(--ink)}.btn.rojo{background:#fff;color:var(--bad);box-shadow:inset 0 0 0 1.5px #f0c9c4}
.btn svg{width:20px;height:20px}
.err{color:var(--bad);font-size:14px;min-height:20px;margin:6px 0 0;text-align:center}
.cajas{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;position:relative}
.cajas u{aspect-ratio:.82;display:grid;place-items:center;background:var(--soft);border-radius:14px;font:500 26px Outfit,sans-serif;text-decoration:none;transition:box-shadow .15s}
.cajas u.a{box-shadow:inset 0 0 0 2px var(--blue);background:#fff}
.cajas input{position:absolute;inset:0;opacity:0;font-size:16px;text-transform:uppercase}
.est{display:flex;gap:14px;align-items:center;padding:16px;border-radius:20px;background:var(--soft);margin-bottom:20px}
.est i{flex:none;width:44px;height:44px;border-radius:50%;background:var(--blue);display:grid;place-items:center}
.est i svg{width:22px}
.est b{display:block;font:500 18px Outfit,sans-serif}.est small{color:var(--mute)}
.lbl{font-size:14px;color:var(--mute);margin:0 0 10px}
.puertos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pt{position:relative;text-align:left;padding:18px 16px;border-radius:20px;border:1.5px solid var(--line);background:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.pt[aria-pressed=true]{border-color:var(--blue);box-shadow:0 0 0 3px #12160F1f}
.pt:disabled{opacity:.5;cursor:default}
.pt b{display:block;font:500 20px Outfit,sans-serif;margin-bottom:2px}
.pt small{display:block;color:var(--mute);font-size:14px}
.pt .ic{display:block;width:40px;height:44px;margin-bottom:12px;color:var(--ink)}.pt .ic svg{width:100%;height:100%}.pt[aria-pressed=true] .ic{color:var(--blue)}.pt .px{display:block;margin-top:10px;font:500 15px Outfit,sans-serif;color:var(--ink)}.pt .ok{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;color:var(--ok)}
.pt .ok:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pt .ok.no{color:var(--bad)}
.din{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding:14px 16px;border-radius:16px;background:#F8FFD1;color:#3D4500;font-size:14px}
.din svg{flex:none;width:18px;margin-top:1px}
.fm{display:grid;gap:12px}
.fm label{display:grid;gap:6px;font-size:14px;color:var(--mute)}
.fm input,.tel{background:var(--soft);border:1.5px solid transparent;border-radius:14px;padding:15px 16px;font-size:17px;color:var(--ink);outline:0;width:100%;transition:border-color .2s,background .2s}
.fm input:focus,.tel:focus-within{border-color:var(--blue);background:#fff}
.tel{display:flex;align-items:center;padding:0 16px}.tel b{font-weight:400;margin-right:6px}
.tel input{border:0!important;background:none!important;padding:15px 0}
.placa{text-transform:uppercase;letter-spacing:.12em;font-family:Outfit,sans-serif!important}
.sum{border-radius:20px;background:var(--soft);padding:6px 18px}
.sum div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.sum div:last-child{border:0}.sum span{color:var(--mute)}.sum b{font-weight:400;text-align:right}
.nota{color:var(--mute);font-size:13px;text-align:center;margin:12px 0 0}
.demo{display:inline-block;font-size:12px;color:#8a5a00;background:#fff4dc;border-radius:99px;padding:3px 10px;margin-left:8px;vertical-align:middle}
.ok-c{width:88px;height:88px;margin:32px auto 20px}
.ok-c circle{fill:var(--blue)}.ok-c path{fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:dr .5s .15s ease-out forwards}
@keyframes dr{to{stroke-dashoffset:0}}
.cen{text-align:center}
.spin{width:22px;height:22px;border:2.5px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.paso.on,.ok-c path,.spin{animation:none}.ok-c path{stroke-dashoffset:0}}
.app.cv{justify-content:center}.app.cv>.bar{position:absolute;top:max(16px,env(safe-area-inset-top));left:0;right:0;max-width:480px;margin:0 auto;padding:0 20px}.app{position:relative}.app>.bar{position:absolute;top:max(16px,env(safe-area-inset-top));left:0;right:0;max-width:480px;margin:0 auto;padding:0 20px}.app{padding-top:76px}
.o{display:flex;align-items:center;gap:12px;color:var(--mute);font-size:13px;margin:16px 0}.o:before,.o:after{content:"";flex:1;height:1px;background:var(--line)}
.fm .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tn{position:relative;display:block}.tn i{position:absolute;right:14px;top:50%;translate:0 -50%;font:600 12px Outfit,sans-serif;font-style:normal;color:var(--mute);letter-spacing:.04em;text-transform:uppercase}
.tn i.visa:after{content:"VISA";color:#1a1f71}.tn i.mastercard:after{content:"Mastercard";color:#eb001b}.tn i.amex:after{content:"AMEX";color:#2e77bc}.tn i.diners:after{content:"Diners"}
.tj input{letter-spacing:.02em}
#mpb:empty{display:none}
.lim{display:grid;grid-template-columns:repeat(4,1fr);background:var(--soft);border-radius:14px;padding:4px;gap:2px}.lim button{border:0;background:none;border-radius:10px;padding:11px 4px;font:500 15px Outfit,sans-serif;color:var(--mute);cursor:pointer;transition:background .2s,color .2s}.lim button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 2px 8px #0000001a}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
.app{height:100svh;min-height:0;overflow:hidden;padding-top:clamp(60px,9svh,76px)}
.paso.on{min-height:0}
h1{font-size:clamp(26px,4.2svh,32px)}.sub{margin-bottom:clamp(12px,2.6svh,24px)}
.fin{padding-top:clamp(14px,3svh,28px)}
.fm{gap:clamp(8px,1.4svh,12px)}.fm input,.tel{padding-top:clamp(11px,1.7svh,15px);padding-bottom:clamp(11px,1.7svh,15px)}.tel input{padding:clamp(11px,1.7svh,15px) 0}
.est{padding:clamp(10px,1.6svh,16px) 16px;margin-bottom:clamp(10px,2svh,20px)}
.pt{padding:clamp(12px,1.8svh,18px) 14px}.pt .ic{height:clamp(30px,4.5svh,44px);width:auto;aspect-ratio:.9;margin-bottom:clamp(6px,1.2svh,12px)}.pt .px{margin-top:clamp(4px,1svh,10px)}
.btn{height:clamp(48px,6.6svh,54px)}

.logo .zl{height:1.4em;width:auto;display:block;fill:currentColor}.logo{letter-spacing:0}
/* Paleta ZELT (Bolt): tinta + neón */
:root{--blue:#12160F;--ink:#12160F;--neon:#DFFF00;--bad:#E5484D}
.btn:not(.neg):not(.gris):not(.rojo){background:var(--neon);color:var(--ink)}
.btn .spin{border-color:#12160f40;border-top-color:var(--ink)}
.sl{background:var(--ink)}.slf{background:#2a3024}.slk{color:var(--ink)}
.est i{background:var(--neon)}.est i svg{fill:var(--ink)}
.cajas u.a{box-shadow:inset 0 0 0 2px var(--ink)}
.pt[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 3px #dfff0099}.pt[aria-pressed=true] .ic{color:var(--ink)}
.ok-c circle{fill:var(--neon)}.ok-c path{stroke:var(--ink)}
h1{font-family:Outfit,sans-serif;font-weight:700;letter-spacing:-.03em}
.btn,.lim button,.pt b,.m b,.est b{font-family:Outfit,sans-serif}.btn{font-weight:600}.pt b,.est b{font-weight:600}

/* ===== ZELT DS · tokens claro / oscuro ===== */
:root{--bg:#fff;--fg:#12160F;--card:#fff;--soft:#f1f2ee;--line:#e4e6df;--mute:#6f736a;--neon:#DFFF00;--neon2:#c8e600;--on:#12160F;--bad:#FF5A57;--ok:#1f9d55;color-scheme:light}
@media(prefers-color-scheme:dark){:root{--bg:#0B0E08;--fg:#F3F6EC;--card:#151A11;--soft:#1B2116;--line:#2A3122;--mute:#9AA090;--ok:#5fd38d;color-scheme:dark}}
html body{background:var(--bg);color:var(--fg)}
html .logo,html .bar a{color:var(--fg)}
html h1{color:var(--fg);font-weight:700;letter-spacing:-.035em}
html .sub,html .lbl,html .nota,html .fm label,html .sum span,html .est small,html .pt small{color:var(--mute)}
html .atras{background:var(--soft);color:var(--fg)}html .atras svg{stroke:currentColor}
html .btn{background:var(--neon);color:var(--on);font-weight:600}
html .btn.gris{background:var(--soft);color:var(--fg)}html .btn.neg{background:var(--fg);color:var(--bg)}
html .btn.rojo{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--bad) 45%,transparent)}
html .cajas u{background:var(--soft);color:var(--fg)}html .cajas u.a{background:var(--card);box-shadow:inset 0 0 0 2px var(--neon),0 0 18px color-mix(in srgb,var(--neon) 40%,transparent)}
html .est{background:var(--soft)}html .est i{background:var(--neon)}html .est i svg{fill:var(--on)}
html .pt{background:var(--card);border-color:var(--line);color:var(--fg)}html .pt .ic,html .pt .px{color:var(--fg)}
html .pt[aria-pressed=true]{border-color:var(--neon);box-shadow:0 0 0 3px color-mix(in srgb,var(--neon) 45%,transparent)}html .pt[aria-pressed=true] .ic{color:var(--fg)}
html .lim{background:var(--soft)}html .lim button{color:var(--mute)}html .lim button[aria-pressed=true]{background:var(--neon);color:var(--on);box-shadow:none}
html .fm input,html .tel{background:var(--soft);color:var(--fg)}html .fm input::placeholder,html .tel input::placeholder{color:var(--mute)}
html .fm input:focus,html .tel:focus-within{background:var(--card);border-color:var(--neon)}
html .sum,html .m{background:var(--soft)}html .sum div{border-color:var(--line)}
html .o:before,html .o:after{background:var(--line)}
html .ok-c circle{fill:var(--neon)}html .ok-c path{stroke:var(--on)}
html .din{background:var(--soft);color:var(--fg)}
html .chip{background:color-mix(in srgb,var(--neon) 30%,transparent);color:var(--fg)}html .chip.esp{background:var(--soft);color:var(--mute)}html .chip.fin{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
html .hoja>div{background:var(--card);color:var(--fg)}
html .sl{background:var(--neon)}html .slf{background:var(--neon2)}
html .slt{color:var(--on);background:linear-gradient(100deg,#12160fb3 35%,#12160F 46%,#fff 50%,#12160F 54%,#12160fb3 65%) 200% 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html .sl.ok .slt{-webkit-text-fill-color:var(--on)}
html .slk{background:var(--on);color:var(--neon);box-shadow:0 4px 14px #0003}
html .demo{background:color-mix(in srgb,var(--neon) 30%,transparent);color:var(--fg)}
html .tn i{color:var(--mute)}
@media(prefers-color-scheme:dark){html .tn i.visa:after{color:#fff}html .spin{border-color:#ffffff33}}

/* ===== Batería segmentada ===== */
.bat{gap:clamp(18px,6vw,32px)}
.cell{position:relative;height:clamp(150px,26svh,230px);aspect-ratio:.56;border:4px solid var(--fg);border-radius:24px;padding:6px;box-sizing:border-box;--lv:0}
.cell .cap{position:absolute;left:50%;top:-14px;translate:-50% 0;width:34%;height:10px;border-radius:6px 6px 0 0;background:var(--fg)}
.segs{height:100%;display:flex;flex-direction:column-reverse;gap:4px}
.segs i{flex:1;border-radius:6px;background:var(--soft);position:relative;overflow:hidden}
.segs i:after{content:"";position:absolute;inset:0;background:var(--neon);transform:scaleY(var(--f,0));transform-origin:bottom;transition:background .3s}
.segs i.on{box-shadow:0 0 12px color-mix(in srgb,var(--neon) 55%,transparent)}
.segs i.fr:after{animation:fr 1s ease-in-out infinite}@keyframes fr{50%{filter:brightness(1.25);opacity:.7}}
.cell.low .segs i:after{background:var(--bad)}.cell.low .segs i.on{box-shadow:0 0 12px color-mix(in srgb,var(--bad) 50%,transparent)}
.spk{position:absolute;inset:6px;overflow:hidden;border-radius:18px;pointer-events:none}
.spk span{position:absolute;left:var(--x);bottom:0;width:4px;height:12px;border-radius:4px;background:#fff;opacity:0;mix-blend-mode:overlay;animation:spk 2.4s ease-in infinite;animation-delay:var(--d)}
@keyframes spk{0%{bottom:0;opacity:0}15%{opacity:.9}100%{bottom:calc(var(--lv)*1% - 12px);opacity:0}}
.cell.done .spk{display:none}
.bolt{position:absolute;left:50%;top:50%;translate:-50% -50%;width:46px;height:46px;border-radius:50%;background:var(--on);display:grid;place-items:center;box-shadow:0 0 0 4px var(--bg);animation:bp 1.6s cubic-bezier(.3,1.6,.5,1) infinite}
.bolt svg{width:24px;fill:var(--neon)}@keyframes bp{0%,100%{scale:1}12%{scale:1.14}}
.cell.done .bolt{animation:none}.cell.done .segs i.on{box-shadow:none}
.bp b{display:block;font:700 clamp(52px,9svh,76px)/.95 Outfit,sans-serif;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--fg)}
.bp small{color:var(--mute);font-size:15px}
@media(prefers-reduced-motion:reduce){.segs i.fr:after,.spk span,.bolt{animation:none}}
html .cell .bolt svg{height:24px!important;width:24px!important;overflow:visible}

/* ===== Batería minimalista horizontal ===== */
html .app.cv{justify-content:flex-start}
html .bat{flex-direction:column;align-items:stretch;gap:10px;margin:clamp(12px,3svh,28px) 0 8px;flex:1;justify-content:center}
html .bat .bp{display:flex;justify-content:space-between;align-items:baseline}html .bat .bp b{display:none}
html .cell{width:calc(100% - 12px);height:auto;aspect-ratio:2.1;max-height:34svh;border:3px solid var(--fg);border-radius:28px;padding:6px;overflow:visible;box-sizing:border-box}
html .cell .cap{left:auto;right:-12px;top:50%;translate:0 -50%;width:8px;height:30%;border-radius:0 6px 6px 0}
html .cell .fill{position:relative;height:100%;width:calc(var(--lv)*1%);min-width:0;border-radius:20px;background:var(--neon);transition:width .3s linear;overflow:hidden}
html .cell .sh{position:absolute;inset:0;background:linear-gradient(100deg,#fff0 30%,#ffffff80 50%,#fff0 70%);background-size:250% 100%;animation:shm 2.2s linear infinite}@keyframes shm{from{background-position:150% 0}to{background-position:-100% 0}}
html .cell.done .sh{display:none}html .cell.low .fill{background:var(--bad)}
html .bpn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;pointer-events:none}
html .bpn b{font:700 clamp(56px,11svh,96px)/1 Outfit,sans-serif;letter-spacing:-.05em;color:var(--fg);font-variant-numeric:tabular-nums;mix-blend-mode:normal}
html .bpn .bb{width:clamp(28px,5svh,40px);fill:var(--fg)}
@media(prefers-color-scheme:dark){html .bpn b,html .bpn .bb{color:var(--fg);fill:var(--fg)}}
html .cell .segs,html .cell .spk,html .cell .bolt{display:none}
@media(prefers-reduced-motion:reduce){html .cell .sh{animation:none}}
html .bpn{inset:auto;left:0;right:0;bottom:calc(100% + 14px);justify-content:flex-start}
html .bat{padding-top:clamp(70px,12svh,110px)}
html .bpn{inset:0!important;bottom:auto;justify-content:center!important}
html .bat{padding-top:0!important}
html .bpn b{color:var(--on)}
/* header + legibilidad */
html .bar{display:flex;justify-content:space-between;align-items:center;padding:4px 0 0}
html .bar .zl{height:30px;width:auto;color:var(--fg)}
html .hd{margin-top:clamp(20px,4svh,36px)}
html .hd h1{font-size:clamp(32px,8vw,40px)!important;line-height:1.05}
html .bat{margin-top:12px!important;flex:0 0 auto!important}
html .bpn b{font-size:clamp(72px,15svh,128px)!important;letter-spacing:-.04em}
html .kw,html .kw b{color:var(--fg)!important}html .kw{color:var(--mute)!important}
html .share .row a,html .share .row button{background:var(--soft)!important;color:var(--fg)!important;opacity:1!important}
html .share .row svg{color:var(--fg);stroke:currentColor}
html .bpn b,html .bpn .bb{color:var(--fg)!important;fill:var(--fg)}
html .bpn.on{clip-path:inset(0 calc(100% - 6px - (100% - 12px)*var(--lv)/100) 0 0);transition:clip-path .6s}
html .bpn.on b,html .bpn.on .bb{color:var(--on)!important;fill:var(--on)}
/* líquido */
html .cell{position:relative;overflow:visible}
html .cell canvas.lq{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);border-radius:20px;display:block}
html .cell.lqon .fill,html .cell.lqon .bpn{display:none!important}
/* barra superior */
html .bar{display:grid!important;grid-template-columns:44px 1fr 44px;align-items:center;min-height:52px}
html .bar .logo{justify-self:center}
html .bar .zl{height:30px!important;width:auto}
html .atras{width:44px;height:44px;border-radius:50%;background:transparent!important;border:1.5px solid var(--line)!important;color:var(--fg)!important;display:grid;place-items:center;padding:0}
html .atras[hidden]{visibility:hidden;display:grid!important}
html .atras svg{width:20px;height:20px}
html .atras:hover{border-color:var(--fg)!important}
/* sesión: chip en la barra */
html .bar:has(#chip){grid-template-columns:auto 1fr auto}
html .bar:has(#chip) .logo{justify-self:start}
/* puertos */
html .app{max-width:560px!important}
html .puertos{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
html .pt{display:grid!important;grid-template-columns:auto 1fr;grid-template-areas:"ic ok" "b b" "s s" "px px";align-items:center;gap:4px 12px;padding:20px!important;border-radius:22px!important;background:var(--soft)!important;border:2px solid transparent!important;box-shadow:none!important;text-align:left;transition:border-color .2s,transform .2s}
html .pt .ic{grid-area:ic;width:48px;height:48px}html .pt .ic svg{width:100%;height:100%}
html .pt b{grid-area:b;font-size:24px!important;margin-top:14px}
html .pt small{grid-area:s;color:var(--mute)}
html .pt .px{grid-area:px;font-weight:600;font-size:17px;margin-top:10px}
html .pt .ok{grid-area:ok;justify-self:end;align-self:start;font-size:13px;font-weight:600;color:var(--fg)!important;background:var(--bg);padding:6px 10px;border-radius:99px;display:inline-flex;align-items:center;gap:6px}
html .pt .ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--neon);box-shadow:none}
html .pt .ok.no{color:var(--mute)!important}html .pt .ok.no::before{background:var(--mute)}
html .pt[aria-pressed="true"]{border-color:var(--neon)!important;outline:none}
html .pt:not(:disabled):active{transform:scale(.98)}
html .bar:has(#chip){grid-template-columns:1fr auto!important}