*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font:400 var(--fs-m)/1.45 var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.app{max-width:460px;margin:0 auto;height:100%;position:relative;overflow:hidden}
.screen{height:100%;display:flex;flex-direction:column}
.main{flex:1;overflow:auto;padding:8px var(--pad) 24px}
.top{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 4px;padding-top:max(10px,env(safe-area-inset-top));min-height:56px}
.ico{width:var(--tap);height:var(--tap);border:0;background:none;font-size:22px;border-radius:12px}
ol.dots{display:flex;gap:6px;list-style:none;margin:0;padding:0}ol.dots li{width:18px;height:3px;border-radius:3px;background:var(--line-2)}ol.dots li.on{background:var(--ink)}
.link-s{border:0;background:none;color:var(--mute);font-size:var(--fs-xs);padding:12px 6px;min-height:var(--tap)}
.foot{padding:12px var(--pad) max(14px,env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--paper) 30%)}
.demo{margin:8px 0 0;text-align:center;font-size:11px;color:var(--mute);letter-spacing:.02em}
.cta{width:100%;height:56px;border:0;border-radius:var(--r);background:var(--coral);color:var(--coral-ink);font-weight:700;font-size:var(--fs-m)}
.cta[disabled]{background:var(--line-2);color:#fff;cursor:default}
h1{font-size:var(--fs-xxl);line-height:1.08;letter-spacing:-.025em;font-weight:700;margin:18px 0 12px}
h2{font-size:var(--fs-xl);line-height:1.12;letter-spacing:-.02em;font-weight:700;margin:8px 0 6px}
.sub{color:var(--ink-2);margin:0 0 22px}
.label{font-size:var(--fs-xs);color:var(--mute);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:26px 0 10px}
.fine{font-size:var(--fs-s);color:var(--mute);margin:14px 0 0}
.mute{color:var(--mute)}
.grow{flex:1;min-width:0;display:flex;flex-direction:column}.grow small{color:var(--mute);font-size:var(--fs-s)}
.grow b{font-weight:600}
/* welcome */
.screen[data-step=bienvenida] .main{display:flex;align-items:flex-end;padding-bottom:40px}
.hero .mark{font-weight:800;font-size:20px;letter-spacing:-.02em}.hero .mark i{font-style:normal;color:var(--coral)}
/* rows */
.list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.row-btn,.check-row{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:10px 2px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left}
.row-btn{justify-content:space-between;font-weight:500}
.row-btn.loc{border:1.5px solid var(--ink);border-radius:var(--r);padding:0 16px;font-weight:600}
.chev{color:var(--mute);font-size:20px}
.box{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:14px;font-weight:700;flex:none}
[aria-pressed=true] > .box{background:var(--ink);border-color:var(--ink);color:#fff}
.links{display:flex;gap:20px;margin-top:22px}
.link{border:0;background:none;padding:10px 0;min-height:var(--tap);color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-weight:500}
/* list step */
.search{position:relative;margin-top:18px}
.search input{width:100%;height:54px;border-radius:var(--r);border:1.5px solid var(--line-2);background:var(--card);padding:0 16px;font:500 16px var(--font);color:var(--ink);outline:none;-webkit-appearance:none}
.search input:focus{border-color:var(--ink)}
.sres{display:flex;flex-direction:column}
.sres button{display:flex;align-items:center;gap:12px;min-height:56px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;padding:8px 2px}
.staples{display:flex;flex-wrap:wrap;gap:8px}
.pill{height:40px;padding:0 14px;border-radius:99px;border:1.5px solid var(--line-2);background:var(--card);font-weight:500;font-size:var(--fs-s)}
.pill[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.items{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.items li{display:flex;align-items:center;gap:12px;min-height:60px;border-bottom:1px solid var(--line);padding:6px 0}
.step{display:inline-flex;align-items:center;gap:4px}
.step button{width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);background:var(--card);font-size:18px}
.step span{min-width:22px;text-align:center;font-weight:600}
.running{text-align:center;color:var(--mute);font-size:var(--fs-s);margin:0 0 10px}
.secondary{display:flex;align-items:center;gap:12px;width:100%;margin-top:28px;padding:14px 16px;border:1px dashed var(--line-2);border-radius:var(--r);background:none;text-align:left}
.rec-note{font-size:var(--fs-s);color:var(--ink-2);margin:22px 0 -14px}
.rec-note .link{font-size:var(--fs-s);min-height:auto;padding:0 4px}
/* result */
.seg{display:flex;background:#efece4;border-radius:12px;padding:3px;margin:6px 0 18px}
.seg button{flex:1;height:44px;border:0;border-radius:10px;background:transparent;font-weight:600;color:var(--ink-2)}
.seg button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px #14213d1f}
.receipt{background:var(--card);position:relative;padding:24px 20px 22px;border-radius:4px 4px 0 0;box-shadow:0 1px 0 var(--line);--zz:linear-gradient(-45deg,transparent 6px,var(--card) 0),linear-gradient(45deg,transparent 6px,var(--card) 0);margin-bottom:22px}
.receipt:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:var(--zz);background-size:12px 12px}
.eyebrow{margin:0;font-size:var(--fs-xs);color:var(--mute);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.who{margin:6px 0 0;font-size:var(--fs-l);font-weight:600}
.big{margin:4px 0 0;font-size:44px;line-height:1.05;font-weight:700;letter-spacing:-.03em}
.save{margin:6px 0 0;color:var(--coral);font-weight:700;font-size:var(--fs-l)}
.warn{margin:10px 0 0;color:var(--out);font-size:var(--fs-s)}
.cmp{margin-top:20px;padding-top:14px;border-top:1.5px dashed var(--line-2);font-size:var(--fs-s);color:var(--ink-2);display:flex;flex-direction:column;gap:6px}
.lead{display:flex;align-items:baseline;gap:8px}.lead .dots{flex:1;border-bottom:1.5px dotted var(--line-2);transform:translateY(-4px);min-width:10px}
.lead .q{color:var(--mute);min-width:26px}
.expander{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:56px;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:none;font-weight:600;padding:0 2px}
.breakdown{list-style:none;margin:0;padding:0}
.breakdown li{padding:14px 0;border-bottom:1px solid var(--line)}
.breakdown .meta{font-size:var(--fs-s);color:var(--mute);margin:3px 0 0 34px}
.avs{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0 0 34px;font-size:var(--fs-xs)}
.av{color:var(--mute)}.av-win{color:var(--ink);font-weight:700}.av-out{color:var(--out)}.av-nd{color:var(--nd);font-style:italic}
.st-out{color:var(--out)}.st-nd{color:var(--nd)}
/* por tienda */
.store{margin-top:22px}
.store-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.checklist{list-style:none;margin:0;padding:0}
.checklist button{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;padding:8px 0}
.checklist button[aria-pressed=true] b{text-decoration:line-through;color:var(--mute)}
/* map sheet + overlay */
.flow{position:absolute;inset:0;z-index:50;background:#14213d55;display:flex;align-items:flex-end}.flow[hidden]{display:none}
.fsheet{background:var(--paper);width:100%;height:94%;border-radius:20px 20px 0 0;display:flex;flex-direction:column;overflow:hidden}
.fhead{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line)}
.fhead b{flex:1;text-align:center;font-weight:600}
.fbtn{width:var(--tap);height:var(--tap);border-radius:12px;border:0;background:none;font-size:20px}
.fbtn.ghost{visibility:hidden}
.fbody{flex:1;overflow:auto;padding:16px var(--pad) 24px;display:flex;flex-direction:column;gap:12px}
.fbody.nopad{padding:0}.pad{padding:0 var(--pad)}
.mapbox{position:relative;height:62%;min-height:340px}.mapbox svg{width:100%;height:100%;display:block}
.mpin{position:absolute;transform:translate(-50%,-50%);border:1.5px solid var(--ink);background:var(--card);border-radius:10px;padding:5px 9px;font-size:12px;display:flex;flex-direction:column;align-items:center;min-height:40px;justify-content:center;line-height:1.15}
.mpin.on{background:var(--ink);color:#fff}.mpin:not(.on){border-style:dashed;opacity:.8}
.toast{position:fixed;left:50%;top:16px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 14px;border-radius:12px;font-size:var(--fs-s);z-index:99;opacity:0;transition:.2s;pointer-events:none}.toast.on{opacity:1}
/* tabular figures only where columns align; hero numbers stay proportional */
.big.num,.save.num,.running.num,.sub.num,.fine.num,.mpin .num,.rx-sum .num{font-variant-numeric:normal;font-feature-settings:normal}
