:root{--bg:#f4f6f8;--card:#fff;--text:#121619;--muted:#5d6975;--line:#dfe4e9;--accent:#0b7a5a;--accent-ink:#fff;--chip:#eef2f5;--on:#0b7a5a;--warn:#b45309;--bad:#c0392b;--r:14px}
/* theme: follows the device unless the person picked Claro / Oscuro (html[data-theme]) */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0d1014;--card:#161b21;--text:#eef2f5;--muted:#98a4b0;--line:#29313a;--accent:#2fbf8a;--accent-ink:#04140e;--chip:#202831;--on:#2fbf8a;--warn:#f0a44a;--bad:#ef6b5b}}
:root[data-theme=dark]{--bg:#0d1014;--card:#161b21;--text:#eef2f5;--muted:#98a4b0;--line:#29313a;--accent:#2fbf8a;--accent-ink:#04140e;--chip:#202831;--on:#2fbf8a;--warn:#f0a44a;--bad:#ef6b5b}
:root[data-theme=dark]{color-scheme:dark}:root[data-theme=light]{color-scheme:light}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
.wrap{max-width:760px;margin:0 auto;padding:0 12px 120px}
header.bar{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:10px 12px}
header.bar .title{font-weight:800;font-size:18px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:8px 10px;cursor:pointer;min-width:42px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;padding:13px 18px;font-weight:700;background:var(--accent);color:var(--accent-ink);cursor:pointer;text-decoration:none;min-height:48px}
.btn.ghost{background:var(--chip);color:var(--text)}
.btn.block{width:100%}
.btn.wa{background:#25d366;color:#05210f}
.btn:disabled{opacity:.6}
h2{font-size:15px;margin:22px 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
label.f{display:block;margin:14px 0 6px;font-weight:600;font-size:14px;color:var(--muted)}
input.in,select.in,textarea.in{width:100%;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:13px 14px;font-size:17px;outline:none}
input.in:focus,select.in:focus,textarea.in:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,122,90,.15)}
input.big{font-size:22px;font-weight:700;letter-spacing:.02em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--chip);border-radius:999px;padding:10px 14px;cursor:pointer;user-select:none;font-weight:600;min-height:44px}
.chip.on{background:var(--on);border-color:var(--on);color:var(--accent-ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.sugg{position:relative}
.sugg ul{position:absolute;z-index:30;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);max-height:300px;overflow:auto}
.sugg li{padding:12px;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.sugg li:hover,.sugg li.act{background:var(--chip)}
.sugg li small{color:var(--muted)}
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--card);border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.savebar .inner{max-width:760px;margin:0 auto;display:flex;gap:10px;align-items:center}
.timer{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px;min-width:44px;text-align:center}
.err{color:var(--bad);font-weight:600;margin:8px 0}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.tabs .chip{white-space:nowrap;padding:8px 12px;min-height:38px;font-size:14px}
.tabs .chip b{margin-left:4px;opacity:.75}
.olist{display:grid;gap:10px}
.oc{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--sc,#9aa);border-radius:var(--r);padding:12px 14px;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:2px 10px}
.oc .f{font-weight:800}.oc .d{color:var(--muted);font-size:14px}.oc .s{font-size:13px;font-weight:700;color:var(--sc)}.oc .m{text-align:right;font-size:13px;color:var(--muted)}
.st-received{--sc:#64748b}.st-diagnosing{--sc:#2563eb}.st-awaiting_approval{--sc:#b45309}.st-waiting_part{--sc:#9333ea}.st-repaired{--sc:#0b7a5a}.st-delivered{--sc:#94a3b8}.st-not_repaired{--sc:#c0392b}.st-cancelled{--sc:#94a3b8}
@media(prefers-color-scheme:dark){html:not([data-theme=light]) .st-repaired{--sc:#2fbf8a}html:not([data-theme=light]) .st-diagnosing{--sc:#60a5fa}html:not([data-theme=light]) .st-waiting_part{--sc:#c084fc}}
html[data-theme=dark] .st-repaired{--sc:#2fbf8a}html[data-theme=dark] .st-diagnosing{--sc:#60a5fa}html[data-theme=dark] .st-waiting_part{--sc:#c084fc}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600}
.pattern{display:grid;grid-template-columns:repeat(3,64px);gap:14px;justify-content:start;padding:8px 0;touch-action:none}
.pattern button{width:64px;height:64px;border-radius:50%;border:2px solid var(--line);background:var(--chip);font-weight:800;color:var(--muted)}
.pattern button.on{background:var(--on);border-color:var(--on);color:var(--accent-ink)}
canvas.sig{width:100%;height:160px;border:1px dashed var(--line);border-radius:12px;background:#fff;touch-action:none}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}.thumbs img{width:84px;height:84px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.done{text-align:center;padding:30px 0}.done .folio{font-size:56px;font-weight:900;margin:6px 0}
.grid-actions{display:grid;gap:10px;margin-top:16px}
.events{list-style:none;padding:0;margin:0}.events li{padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}.events small{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;z-index:50;font-weight:600}
.muted{color:var(--muted)}
.ph-head{font-size:17px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ph-note{font-size:13px;margin:6px 0 0}
.tag{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;color:#fff;background:#667}
.tag.g-alta{background:#7a2ea0}.tag.g-media{background:#1f6fd1}.tag.g-baja{background:#3d8a3a}.tag.scr{background:#334}
.ph-part{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.ph-pt{font-weight:700;margin-bottom:6px}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opt{border:1px solid var(--line);background:var(--chip);border-radius:12px;padding:8px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:56px;color:var(--text)}
.opt small{font-size:12px;color:var(--muted)}.opt b{font-size:17px}
.opt.on{background:var(--on);border-color:var(--on);color:var(--accent-ink)}.opt.on small{color:var(--accent-ink)}
.ph-cost{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}.ph-cost th,.ph-cost td{text-align:left;padding:4px;border-bottom:1px solid var(--line)}
.nav{display:flex;gap:8px}
details.more summary{cursor:pointer;font-weight:700;color:var(--accent);padding:10px 0}
/* ticket */
#ticket{display:none}
@media print{
  #app,.toast{display:none!important}body{background:#fff}
  #ticket{display:block;position:static;color:#000;background:#fff;font:12px/1.35 monospace}
  #ticket.w58{width:54mm}#ticket.w80{width:76mm}#ticket.wletter{width:180mm;font-size:13px}
  @page{margin:2mm}
}
#ticket h1{font-size:15px;margin:0;text-align:center}#ticket .c{text-align:center}#ticket hr{border:0;border-top:1px dashed #000}
#ticket .qr{display:flex;justify-content:center}#ticket .qr svg{width:34mm;height:34mm}#ticket .sig img{max-width:100%;max-height:22mm}

/* letter-size order form (matches the shop's paper) */
#ticket .of{width:100%;font:11.5px/1.45 Arial,Helvetica,sans-serif;color:#000}
#ticket .of-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:8px;border-bottom:1.5px dashed #888;margin-bottom:8px}
#ticket .of-logo{width:36mm;height:36mm;object-fit:contain}
#ticket .of-shop{text-align:right;align-self:center;font-size:12px}#ticket .of-name{font-weight:800;font-size:14px}
#ticket .of-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
#ticket section{border:1px dashed #999;border-radius:3px;padding:6px 10px;margin:0;background:#fcfcfc;break-inside:avoid}
#ticket h3{margin:0 0 4px;padding-bottom:3px;border-bottom:1px solid #ddd;font-size:14px;font-weight:600;text-transform:none;letter-spacing:0}
#ticket table{border-collapse:collapse;width:100%}#ticket th{text-align:left;font-weight:700;padding:2px 6px 2px 0;width:58%;vertical-align:top}#ticket td{padding:2px 0;font-weight:600}
#ticket table.w30 th{width:28%}#ticket table.w50 th{width:50%}#ticket table.money td{font-size:12.5px}#ticket table.money th{font-size:12.5px}
#ticket .of-signbox{display:flex;align-items:flex-end;gap:14px}#ticket .of-sign{flex:1}
#ticket .of-sign img{max-height:20mm;max-width:100%;display:block}#ticket .of-line{border-top:1px solid #000;padding-top:2px;text-align:center;font-size:10.5px;margin-top:2px}
#ticket .of-qr{text-align:center;font-size:8.5px;width:24mm}#ticket .of-qr svg{width:22mm;height:22mm}
#ticket .of-terms{margin-top:6px;font-size:10px;line-height:1.35;text-align:justify}
@media print{#ticket.wletter{width:auto}@page{size:letter;margin:8mm}}

.warn{background:#5a3b00;color:#ffd98a;border-radius:10px;padding:8px 10px;margin:8px 0 0;font-size:14px;font-weight:600}

/* order form preview on screen (same sheet that prints) */
@media screen{#ticket.show{display:block;background:#fff;color:#000;width:180mm;margin:0 auto 110px;padding:8mm;border-radius:6px;box-shadow:0 2px 14px rgba(0,0,0,.35);zoom:var(--sheetzoom,1);font:12px/1.35 Arial,Helvetica,sans-serif}}
.leadbox{margin-top:12px}.leadhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:16px}
.draftbar{display:block;margin-top:10px;text-decoration:none;color:var(--text)}.draftrow{display:flex;align-items:center;gap:10px}.draftrow a{color:var(--text);text-decoration:none}
.draftst{font-size:12px;white-space:nowrap}
.chip.addq{background:var(--on);border-color:var(--on);color:var(--accent-ink)}
.qpre{white-space:pre-wrap;font:13px/1.4 inherit;margin:8px 0 0}
.draftbar[hidden]{display:none}

/* home */
.home{padding-top:10px}
.badge{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:#fff;
  background:linear-gradient(135deg,#0b7a5a,#2bb38a);flex:none;overflow:hidden}.badge img{width:100%;height:100%;object-fit:contain;background:#fff}
.badge.mark{background:#080c11;color:#eef3f7;padding:9px}.badge.mark svg{width:100%;height:100%}
.hero{display:flex;align-items:center;gap:12px;margin:8px 0 14px}.hero-txt{flex:1;min-width:0}
.hero-name{font-size:22px;font-weight:800;line-height:1.15}.hero .muted{font-size:13px;text-transform:none}
.homesearch .in{font-size:17px;min-height:56px;border-radius:14px}
.hlist{margin-top:10px;padding:6px 10px}.hsec{font-size:12px;font-weight:700;color:var(--muted);margin:8px 0 2px;text-transform:uppercase;letter-spacing:.04em}
.hrow,.prow{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:10px 2px;color:var(--text);text-decoration:none;font:inherit;cursor:pointer}
.hrow:last-child,.prow:last-child{border-bottom:0}.hrow small,.prow small{color:var(--muted);text-align:right}
.today{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.today a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--text)}
.today b{font-size:20px}.today span{font-size:11.5px;color:var(--muted);text-align:center}
.actions2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.act{display:flex;align-items:center;gap:12px;padding:16px 14px;border-radius:18px;text-decoration:none;color:#fff;min-height:84px}
.act b{display:block;font-size:17px}.act small{display:block;font-size:12.5px;opacity:.9}.act .ai{font-size:30px}
.act-order{background:linear-gradient(135deg,#0b7a5a,#22a27b)}.act-quote{background:linear-gradient(135deg,#6a3fd1,#9a6bff)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 6px}
.tile{position:relative;display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--tc,#556);text-decoration:none;color:var(--text);min-height:68px}
.tile .ti{font-size:24px}.tile b{display:block;font-size:15px}.tile small{display:block;font-size:12px;color:var(--muted)}
.tile em{position:absolute;top:8px;right:10px;font-style:normal;font-size:12px;font-weight:700;background:var(--on);color:var(--accent-ink);border-radius:999px;padding:1px 8px}.tile em:empty{display:none}
.t-orders{--tc:#1f6fd1}.t-drafts{--tc:#d18a1f}.t-cash{--tc:#2a9d5c}.t-settings{--tc:#777}
.plist{padding:4px 12px}
@media (max-width:520px){.today{grid-template-columns:repeat(3,1fr)}.actions2{grid-template-columns:1fr}}
@media (min-width:760px){.tiles{grid-template-columns:repeat(4,1fr)}}
/* entrance */
.entry{max-width:440px;padding-top:28px}.entry-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.entry-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.entry-tabs a{display:block;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--card);text-decoration:none;color:var(--text)}
.entry-tabs a.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}.entry-tabs b{display:block}.entry-tabs small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.entry-foot{text-align:center;font-size:13px;margin-top:14px}
.hero.banner{position:relative;flex-wrap:wrap;padding:16px;border-radius:20px;color:#fff;overflow:hidden;
  background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.18),transparent 40%),linear-gradient(135deg,#0b5f7a 0%,#0b7a5a 55%,#3fbf8f 100%)}
.hero.banner .badge{background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.5)}
.hero.banner .iconbtn{background:rgba(255,255,255,.15);color:#fff}.hero-sub{font-size:13px;opacity:.92}
.hero.banner .quote{flex-basis:100%;margin-top:10px;font-size:14px;font-style:italic;opacity:.95}
/* keep text clear of the repair animation: desktop = middle-right (58px + 150px wide), phones = bottom-right corner (96px wide) */
.hero.banner .hero-txt{min-width:0;flex:1}
.hero.banner .quote{padding-right:214px}
@media (min-width:561px){.hero.banner .hero-txt{padding-right:170px}}
.hero.banner .deco{position:absolute;right:12px;bottom:6px;font-size:22px;opacity:.25;letter-spacing:4px;pointer-events:none}
.act{box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .12s}.act:active,.tile:active,.today a:active{transform:scale(.97)}
a.chip{text-decoration:none;color:var(--text);display:inline-flex;align-items:center}
/* use the screen: pages grow with the window; long forms stay readable */
.wrap{max-width:min(1240px,100%)}
form.wrap{max-width:860px}
.savebar .inner{max-width:min(1240px,100%)}
@media (min-width:1000px){.olist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}}
/* whole-app scale for the screen (set by fitScreen); never when printing */
@media screen{html{zoom:var(--z,1)}}
.zoombox{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.zoombtns{display:flex;align-items:center;gap:8px}.zoombtns b{min-width:52px;text-align:center}

/* ---- home: repair scene in the banner (screwdriver, screws out, new screen, OK) ---- */
.hero.banner .deco.repair{opacity:1;font-size:0;letter-spacing:0;right:58px;top:50%;bottom:auto;transform:translateY(-50%);width:150px;height:94px}
.rp{width:100%;height:100%;overflow:visible}
.rp *{transform-box:fill-box}
.rp-glow{animation:rpGlow 9s ease-in-out infinite;transform-origin:center}
.rp-shadow{fill:rgba(0,0,0,.28)}
.rp-crack path{fill:none;stroke:#e5e7eb;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.rp-crack{animation:rpFlicker 9s infinite}
.rp-oldglass{animation:rpOld 9s infinite}
.rp-newglass{opacity:0;animation:rpNewGlass 9s infinite}
.rp-shine{fill:rgba(255,255,255,.6);transform:skewX(-22deg);animation:rpShine 9s infinite}
.rp-slot{stroke:#334155;stroke-width:.7;stroke-linecap:round}
.rp-screw{transform-origin:center}
.rp-s1{animation:rpS1 9s infinite}.rp-s2{animation:rpS2 9s infinite}
.rp-s1 .rp-slot{transform-origin:center;animation:rpSlot1 9s infinite}.rp-s2 .rp-slot{transform-origin:center;animation:rpSlot2 9s infinite}
.rp-drv{transform:translate(61px,75.5px);animation:rpDrv 9s infinite}
.rp-drv-in{opacity:0;animation:rpDrvIn 9s infinite}
.rp-grip{animation:rpGrip 9s infinite}
.rp-ok{transform-origin:center;transform:scale(0);animation:rpOk 9s infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.rp-check{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;animation:rpCheck 9s infinite}
.rp-spark path{fill:#fff;transform-origin:center;transform:scale(0)}
.rp-spark .sp1{animation:rpSpark 9s infinite}.rp-spark .sp2{animation:rpSpark 9s .25s infinite}.rp-spark .sp3{animation:rpSpark 9s .5s infinite}
@keyframes rpGlow{0%,100%{opacity:.55;transform:scale(.92)}75%{opacity:1;transform:scale(1.06)}}
@keyframes rpFlicker{0%,3%,6%,100%{opacity:1}4.5%{opacity:.55}}
@keyframes rpDrvIn{0%,7%{opacity:0;transform:translateX(26px)}15%{opacity:1;transform:translateX(0);animation-timing-function:cubic-bezier(.2,.8,.2,1)}44%{opacity:1;transform:translateX(0)}52%,100%{opacity:0;transform:translateX(30px)}}
@keyframes rpDrv{0%,27%{transform:translate(61px,75.5px)}33%,100%{transform:translate(83px,75.5px);animation-timing-function:cubic-bezier(.4,0,.2,1)}}
@keyframes rpGrip{0%,16%{transform:translateY(0)}26%,33%{transform:translateY(-22px)}43%,100%{transform:translateY(-44px)}}
@keyframes rpSlot1{0%,16%{transform:rotate(0)}26%,100%{transform:rotate(-900deg)}}
@keyframes rpSlot2{0%,33%{transform:rotate(0)}43%,100%{transform:rotate(-900deg)}}
@keyframes rpS1{0%,24%{opacity:1;transform:translate(0,0)}29%{opacity:0;transform:translate(5px,3px) scale(.6)}29.1%,93%{opacity:0}97%,100%{opacity:1;transform:none}}
@keyframes rpS2{0%,41%{opacity:1;transform:translate(0,0)}46%{opacity:0;transform:translate(5px,3px) scale(.6)}46.1%,93%{opacity:0}97%,100%{opacity:1;transform:none}}
@keyframes rpOld{0%,50%{opacity:1;transform:none}60%{opacity:0;transform:translate(-3px,-16px) rotate(-9deg)}60.1%,94%{opacity:0;transform:none}98%,100%{opacity:1;transform:none}}
@keyframes rpNewGlass{0%,57%{opacity:0;transform:translateY(-20px)}66%{opacity:1;transform:translateY(1.5px);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}70%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
@keyframes rpShine{0%,66%{transform:skewX(-22deg) translateX(0)}76%,100%{transform:skewX(-22deg) translateX(62px)}}
@keyframes rpOk{0%,69%{transform:scale(0)}73%{transform:scale(1.2)}76%,89%{transform:scale(1)}94%,100%{transform:scale(0)}}
@keyframes rpCheck{0%,72%{stroke-dashoffset:20}78%,100%{stroke-dashoffset:0}}
@keyframes rpSpark{0%,74%{transform:scale(0) rotate(0)}79%{transform:scale(1.2) rotate(45deg)}85%,100%{transform:scale(0) rotate(90deg)}}
@media (max-width:560px){.hero.banner .deco.repair{width:96px;height:60px;right:6px;top:auto;bottom:4px;transform:none}.hero.banner .quote{padding-right:96px;min-height:54px}}
@media (prefers-reduced-motion:reduce){.rp *{animation:none!important}.rp-oldglass,.rp-drv-in,.rp-screw{opacity:0}.rp-newglass{opacity:1}.rp-ok{transform:scale(1)}.rp-check{stroke-dashoffset:0}}

/* ---- order saved: the check pops ---- */
.okpop{width:64px;height:64px;margin:0 auto 6px}
.okpop svg{width:100%;height:100%;overflow:visible}
.okpop circle{fill:#22c55e;transform-origin:center;transform-box:fill-box;animation:okPop .45s cubic-bezier(.3,1.6,.5,1) both}
.okpop path{fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:okDraw .35s .3s ease-out forwards}
@keyframes okPop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes okDraw{to{stroke-dashoffset:0}}
.installbtn{margin-top:12px}

/* ---- offline bar ---- */
#netbar{position:fixed;left:50%;top:8px;transform:translateX(-50%);z-index:60;max-width:calc(100% - 24px);padding:8px 14px;border-radius:999px;
  background:#1f2937;color:#fff;font-size:14px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.25);text-align:center}
#netbar[hidden]{display:none}
.offnote{margin:10px auto 0;max-width:520px;padding:10px 14px;border-radius:12px;background:rgba(245,158,11,.14);color:#b45309;text-align:center;font-weight:600}
@media print{#netbar{display:none!important}}

/* ---- money left to charge ---- */
.owe{color:#d97706}.paidok{color:#16a34a;font-weight:700}
.modal{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px}
.modal-box{width:min(420px,100%)}

/* ---- workflow: latest update, late jobs, board assign, warranty return, activity ---- */
.lastupd{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(11,122,90,.08)}
.lastupd small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.updrow{display:flex;gap:8px;margin-top:8px}.updrow .in{flex:1}
.latetag{color:#dc2626;font-weight:800}
.oc.late{border-color:#dc2626!important;box-shadow:0 0 0 2px rgba(220,38,38,.25)}
.chip.tablate{border-color:#dc2626;color:#dc2626}
.ocfoot{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.techsel{font:inherit;font-size:14px;padding:6px 8px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);max-width:100%}
.donebtn{border-color:#16a34a;color:#16a34a;font-weight:700}
.prow.warn span{color:#dc2626}
.wret{margin-top:8px;display:grid;gap:4px}.wret.on{border-color:#16a34a;background:rgba(22,163,74,.08)}.wret .chip{justify-self:start;margin-top:4px}
.atable{width:100%;border-collapse:collapse;font-size:15px}.atable th,.atable td{padding:6px 8px;text-align:right;border-bottom:1px solid var(--line)}.atable th:first-child,.atable td:first-child{text-align:left}

/* ---- quick sale (venta rápida), inventory, cash drawer ---- */
.act-sale{background:linear-gradient(135deg,#d9711f,#f2a33a)}
@media (min-width:760px){.actions2{grid-template-columns:repeat(3,1fr)}}
.t-inv{--tc:#d9711f}
.pos-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;margin-top:12px;align-items:start}
.pos-right{position:sticky;top:64px}
@media (max-width:820px){.pos-grid{grid-template-columns:1fr}.pos-right{position:static}}
.pos-prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
.pbtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--card);cursor:pointer;min-height:84px;transition:transform .12s,border-color .2s;color:var(--text);font:inherit}
.pbtn b{font-size:15px;line-height:1.25}.pbtn span{font-weight:800;color:var(--accent)}.pbtn em{font-style:normal;font-size:12px;color:var(--muted)}.pbtn em.out{color:var(--bad)}
.pbtn.quick{border-left:4px solid #d9711f}
.pbtn:active,.pbtn.bump{transform:scale(.96);border-color:var(--accent)}
.pos-free{margin-top:10px}
.pos-empty{grid-column:1/-1}
.cart-empty{text-align:center;padding:18px 6px;margin:0}
.cline{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.cl-name{font-weight:600;line-height:1.25}.cl-name small{display:block;color:var(--muted);font-weight:400}
.cl-tot{min-width:86px;text-align:right}
.qty{display:flex;align-items:center;gap:6px}.qty button{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--chip);font-size:18px;font-weight:700;cursor:pointer;color:var(--text)}
.qty b{min-width:22px;text-align:center}
.cart-sum{margin-top:8px}
.crow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0}
.crow.total{font-size:20px;border-top:2px solid var(--line);margin-top:4px;padding-top:8px}
.in.sm{max-width:140px;padding:9px 10px;font-size:16px}
.big-charge{margin-top:12px;min-height:58px;font-size:18px}
.sheet-bg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;padding:12px}
.sheet{width:100%;max-width:480px;max-height:92vh;overflow:auto;animation:sheetup .22s ease-out}
@keyframes sheetup{from{transform:translateY(24px)}}
@media (min-width:700px){.sheet-bg{align-items:center}}
.btn.danger{color:var(--bad)}
.voided{display:inline-block;margin:6px 0;padding:6px 14px;border-radius:999px;background:rgba(220,38,38,.12);color:#dc2626;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.inv{margin-top:10px;display:grid;gap:6px}
.irow{display:grid;grid-template-columns:1fr auto 64px;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--text)}
.irow.low{border-left:4px solid #dc2626}
.i-main b{display:block}.i-main small{color:var(--muted)}
.i-price{font-weight:700}.i-stock{text-align:center;font-weight:800;font-size:18px;border-radius:10px;background:var(--chip);padding:4px 0}.i-stock.zero{color:#dc2626}
.stockcard{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.bigstock{font-size:40px;font-weight:900;line-height:1}.bigstock.zero{color:#dc2626}
.stockbtns{display:flex;gap:8px;flex-wrap:wrap}
.checkrow{display:flex;align-items:center;gap:10px;margin-top:14px;font-weight:600}.checkrow input{width:20px;height:20px}
.drawer .dline,.sheet .dline{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.dline.total{font-size:20px;border-bottom:0;padding-top:10px}
.plus{color:#16a34a}.minus{color:#dc2626}
/* sale receipt (58 / 80 mm) */
@media print{#ticket.receipt{font:12px/1.4 monospace}}
#ticket .rlogo{max-width:30mm;max-height:18mm;margin:0 auto 4px;display:block}
#ticket .rt{width:100%;border-collapse:collapse}#ticket .rt td{padding:1px 0;vertical-align:top}#ticket .rt .r{text-align:right;white-space:nowrap;padding-left:6px}
#ticket .rr{display:flex;justify-content:space-between;gap:8px}#ticket .rr.big{font-weight:800;font-size:14px}