/* Promotion Mind · EL RECORRIDO (Pablo eligió la maqueta C, 23-oct): la app cuenta el proceso de la presentación en
   seis pasos y cada promo se sigue como un envío. Tema NEGRO ESPEJADO (Pablo: «que no sea tan negro, puede ser un
   negro espejado»): grafito con un brillo arriba, tarjetas de vidrio oscuro con un filo de luz en el borde, y los
   colores del logo de CD para el avance. Va DESPUÉS de estilo.css y lo pisa. */
:root{
 --n-bg:#16181d;--n-card:rgba(255,255,255,.055);--n-line:rgba(255,255,255,.09);--n-ink:#f3f3f1;--n-ink2:#c9cad0;--n-mut:#8e9099;--n-soft:rgba(255,255,255,.06);
 --n-ac:#9d8ee0;--n-acb:rgba(102,84,162,.22);
 --n-ok:#4fd38a;--n-okb:rgba(79,211,138,.13);--n-rj:#ff6b6b;--n-rjb:rgba(255,107,107,.13);--n-am:#ffb547;--n-amb:rgba(255,181,71,.13);
 --hecho:#54c8f3;--ahora:#f69022;
 --vidrio:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025));
 --filo:inset 0 1px 0 rgba(255,255,255,.12);
 --ink:var(--n-ink);--mut:var(--n-mut);--line:var(--n-line);--bg:var(--n-bg);--card:#1d2026;--head:var(--n-ink);--muted:var(--n-mut);--surface:#22252c;--plane:#22252c;--line2:rgba(255,255,255,.07);--ink2:var(--n-ink2)}
body{background:#0c0d10;color:var(--n-ink)}
.top h1,.top .who2 b{color:#f3f3f1}.top .s,.top .who2,.foot{color:#8e9099}
/* el espejo: grafito con brillo arriba y un reflejo diagonal muy tenue */
.phone{border-color:#2a2d33;background:#14161a}
#screen,.body,.hd,.tab,.n-ing{background:transparent}
#screen{background:radial-gradient(120% 55% at 50% -8%,#3a3e48 0%,rgba(58,62,72,0) 60%),linear-gradient(160deg,#1f2228 0%,#15171b 45%,#101115 100%)}
#screen:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.035) 42%,rgba(255,255,255,0) 54%);z-index:0}
#screen>*{position:relative;z-index:1}
.sb{background:#1f2228;color:#f3f3f1}
.hd{color:var(--n-ink)}.hd .ico,.hd .back{color:var(--n-ink)}
.hd .t em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400}
/* vidrio */
.card,.tope,.budget,.req,.menu,.sol,.cad,.n-acc,.n-kp,.n-tl,.n-vacio,.n-mes span,.mstat,.tregua{background:var(--vidrio);border-color:var(--n-line);box-shadow:var(--filo)}
.n-vacio{border-style:dashed}
.n-acc div{border-color:var(--n-soft)}.n-acc div:active{background:rgba(255,255,255,.05)}
.row,.kpi,.cmp,.reg,.opt,.sol .tres{border-color:var(--n-soft)}
.inp,select.inp,.sel{background:rgba(0,0,0,.25);color:var(--n-ink);border-color:var(--n-line)}
select.inp option{color:#111}
/* botones: el principal, claro en píldora sobre el negro */
.btn{background:#f3f3f1;color:#111}.btn.o{background:transparent;color:var(--n-ink);border-color:rgba(255,255,255,.18)}
.btn.r{background:transparent;color:var(--n-rj);border-color:rgba(255,107,107,.35)}
.seg span{background:transparent;color:var(--n-ink2)}.seg span.on{background:#f3f3f1;color:#111;border-color:#f3f3f1}
.n-mes span{color:var(--n-ink2)}.n-mes span.on{background:#f3f3f1;color:#111;border-color:#f3f3f1}
.tab{border-top-color:var(--n-line);background:rgba(16,17,21,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tab span.on,.tab span.on:first-child{background:#f3f3f1;color:#111}
.tag{background:rgba(255,255,255,.08);color:var(--n-ink2)}.tag.ink{background:#f3f3f1;color:#111}
.n-plazo{background:linear-gradient(180deg,rgba(246,144,34,.16),rgba(246,144,34,.06));border:1px solid rgba(246,144,34,.28);box-shadow:var(--filo)}
.n-plazo .cdw div{background:rgba(0,0,0,.25)}
.n-merma{background:linear-gradient(180deg,rgba(255,107,107,.12),rgba(255,107,107,.04));border-color:rgba(255,107,107,.28)}
.n-reco{background:linear-gradient(180deg,rgba(79,211,138,.16),rgba(79,211,138,.05));box-shadow:var(--filo)}
.n-reco.no{background:linear-gradient(180deg,rgba(255,107,107,.16),rgba(255,107,107,.05))}.n-reco.rv{background:linear-gradient(180deg,rgba(255,181,71,.16),rgba(255,181,71,.05))}
.n-reco .x b,.n-reco b{color:inherit}.n-reco .x b{color:var(--n-ink)}
.warn.y{background:var(--n-amb);color:#ffd08a}.warn.g{background:var(--n-okb);color:#8fe8b5}.n-aviso,.err{background:var(--n-rjb);color:#ffb3b3}
.ent{background:var(--n-acb);color:#d6cff5}
.plazo{background:linear-gradient(180deg,rgba(246,144,34,.16),rgba(246,144,34,.06));border:1px solid rgba(246,144,34,.28)}
.merma{background:var(--n-rjb);border-color:rgba(255,107,107,.28)}
.reco{background:var(--n-okb)}.reco.no{background:var(--n-rjb)}.reco.rv{background:var(--n-amb)}
.n-thumb{box-shadow:var(--filo)}
.ring:after{background:#1d2026}.ring span{color:var(--n-ink)}
.cal span.x{color:#555a63}.cal span{color:var(--n-ink2)}.cal span.on{background:#f3f3f1;color:#111}
.cal2 .ct{background:rgba(255,255,255,.05)}
.simr.on{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px #f3f3f1;border-color:#f3f3f1}.simr .sb2{background:rgba(255,255,255,.08)}.simr .sb2 i{background:#f3f3f1}
.desliza input{background:linear-gradient(90deg,#f3f3f1 var(--p,50%),rgba(255,255,255,.12) var(--p,50%))}.desliza input::-webkit-slider-thumb{background:#16181d;border-color:#f3f3f1}
.desliza .globo{background:#f3f3f1;color:#111}.desliza-res div{background:rgba(255,255,255,.06)}
.steps div{background:rgba(255,255,255,.12)}.steps div.on{background:#f3f3f1}
.opt.on i{border-color:#f3f3f1;background:radial-gradient(#f3f3f1 45%,transparent 50%)}
.embudo i[style*="var(--n-ink)"]{background:#f3f3f1!important}
.n-barra{background:rgba(255,255,255,.1)}.n-barra i{background:#f3f3f1}
.toast{background:rgba(29,32,38,.96);color:var(--n-ink);border-color:var(--n-line)}
.undo{background:#f3f3f1;color:#111}.undo button{background:#111;color:#fff}.undo circle:first-child{stroke:rgba(0,0,0,.15)}.undo .anillo{stroke:#111}
.n-ok .c{background:#f3f3f1;color:#111}
.pie{color:var(--n-mut)}
.anillos text[fill="#111"]{fill:#f3f3f1}
/* el pop de la casa, en vidrio oscuro */
#phone .modal{background:#1d2026;color:var(--n-ink)}#phone .ovl{background:rgba(0,0,0,.5)}#phone .modal:before{background:rgba(255,255,255,.25)}
#phone .rrow .rb{background:rgba(255,255,255,.08)}#phone .rrow .rb i{background:#f3f3f1!important}#phone .mread{background:rgba(157,142,224,.1);color:var(--n-ink2)}
#phone .mclose{color:var(--n-ink2)}
/* ============ EL PROCESO ============ */
.r-hola{font-size:13px;color:var(--n-mut);margin:0 2px 12px}
.r-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.r-chips div{background:var(--vidrio);border:1px solid var(--n-line);box-shadow:var(--filo);border-radius:16px;padding:10px 6px;text-align:center;cursor:pointer;min-height:64px;transition:transform .12s}
.r-chips div:active{transform:scale(.97)}
.r-chips div.on{background:#f3f3f1;color:#111;border-color:#f3f3f1}.r-chips div.on small{color:#555}
.r-chips b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.r-chips small{font-family:"Geist Mono",monospace;font-size:9.5px;color:var(--n-mut)}
.r-chips .rojo b{color:var(--n-rj)}.r-chips .rojo.on b{color:#c62828}
.r-pres{display:flex;align-items:center;gap:10px;margin:10px 0 4px;padding:11px 14px;border-radius:16px;background:var(--vidrio);border:1px solid var(--n-line);box-shadow:var(--filo);cursor:pointer;font-size:13px}
.r-pres .b{flex:1;height:5px;border-radius:9px;background:rgba(255,255,255,.1);position:relative}.r-pres .b i{position:absolute;inset:0 auto 0 0;border-radius:9px;background:linear-gradient(90deg,#54c8f3,#6654a2)}
.r-pres b{font-weight:600}.r-pres small{color:var(--n-mut);font-family:"Geist Mono",monospace;font-size:10.5px}
.r-sec{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--n-mut);margin:16px 4px 8px}
/* una promo = un seguimiento */
.pr{background:var(--vidrio);border:1px solid var(--n-line);box-shadow:var(--filo);border-radius:20px;padding:14px;margin-bottom:10px;cursor:pointer}
.pr .h{display:flex;align-items:center;gap:8px}.pr .h b{font-size:15px;font-weight:600;letter-spacing:-.01em}.pr .h small{margin-left:auto;font-family:"Geist Mono",monospace;font-size:10.5px;color:var(--n-mut)}
.pr .m{font-size:12px;color:var(--n-mut);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pr .seis{display:flex;align-items:center;gap:0;margin:12px 0 2px}
.pr .seis i{width:12px;height:12px;border-radius:50%;border:2px solid #3a3f49;flex:0 0 auto;background:#16181d}
.pr .seis i.hecho{background:var(--hecho);border-color:var(--hecho)}.pr .seis i.ahora{border-color:var(--ahora);box-shadow:0 0 0 4px rgba(246,144,34,.18)}.pr .seis i.mal{background:var(--n-rj);border-color:var(--n-rj)}
.pr .seis span{flex:1;height:2px;background:#2e323a}.pr .seis span.hecho{background:var(--hecho)}
.pr .eti{display:flex;justify-content:space-between;font-family:"Geist Mono",monospace;font-size:8.5px;color:#6b6f78;margin-top:5px}
.pr .eti b{color:var(--ahora);font-weight:500}
.pr .hoy{margin-top:11px;padding-top:11px;border-top:1px solid var(--n-soft);display:flex;align-items:center;gap:10px;font-size:13px}
.pr .hoy p{flex:1;line-height:1.35}.pr .hoy p span{display:block;color:var(--n-mut);font-size:11.5px}
.pr .hoy .num{font-size:20px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.pr.urge{border-color:rgba(246,144,34,.35)}.pr.alerta{border-color:rgba(255,107,107,.35)}
/* el recorrido completo de una promo */
.rc{position:relative;margin-top:14px}
.rc .et{position:relative;padding:0 0 18px 34px}
.rc .et:before{content:"";position:absolute;left:10px;top:24px;bottom:0;width:2px;background:#2e323a}
.rc .et:last-child:before{display:none}
.rc .et.hecho:before{background:var(--hecho)}
.rc .et>i{position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;border:2px solid #3a3f49;background:#16181d;display:grid;place-items:center;font-style:normal;font-family:"Geist Mono",monospace;font-size:10px;color:#6b6f78}
.rc .et.hecho>i{background:var(--hecho);border-color:var(--hecho);color:#0c2a36}
.rc .et.ahora>i{border-color:var(--ahora);color:var(--ahora);box-shadow:0 0 0 5px rgba(246,144,34,.16);animation:lat3 1.8s ease-in-out infinite}
.rc .et.mal>i{background:var(--n-rj);border-color:var(--n-rj);color:#fff}
@keyframes lat3{50%{box-shadow:0 0 0 9px rgba(246,144,34,.05)}}
.rc .et h3{font-size:15px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}.rc .et h3 small{margin-left:auto;font-family:"Geist Mono",monospace;font-size:10.5px;color:var(--n-mut);font-weight:400}
.rc .et.falta h3{color:#6b6f78}
.rc .et .q{font-size:12.5px;color:var(--n-mut);margin-top:2px;line-height:1.4}
.rc .et .cont{margin-top:10px}
@media (prefers-reduced-motion:reduce){.rc .et.ahora>i{animation:none}}
/* ============ LAS FOTOS DE LA GÓNDOLA ============ */
.res2{display:flex;align-items:center;gap:12px}
.gdots{display:grid;grid-template-columns:repeat(12,1fr);gap:7px;margin:12px 0 4px;justify-items:center}
.gdots i{width:17px;height:17px;border-radius:50%;background:var(--n-ok);display:block;cursor:pointer;transition:transform .12s}.gdots i.x{background:var(--n-rj)}.gdots i:active{transform:scale(1.25)}
.gseg{display:flex;gap:6px;align-items:center;margin:12px 0 8px;flex-wrap:wrap}
.gseg span{font-family:"Geist Mono",monospace;font-size:10.5px;padding:0 10px;height:30px;display:inline-flex;align-items:center;border-radius:99px;border:1px solid rgba(255,255,255,.14);color:var(--n-ink2);cursor:pointer}.gseg span.on{background:#f3f3f1;color:#111;border-color:#f3f3f1}
.gseg em{margin-left:auto;font-style:normal;font-size:11px;color:var(--n-mut)}.gseg em b{cursor:pointer;padding:6px 4px;font-weight:400}.gseg em b.on{color:var(--n-ink);font-weight:700}
.gfotos{display:grid;gap:6px}
.gf{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/4;border:1px solid rgba(255,255,255,.08);background:#22252c;cursor:pointer}
.gf img{width:100%;height:100%;object-fit:cover;display:block}
.gf .sinf{position:absolute;inset:0;display:grid;place-items:center;font-family:"Geist Mono",monospace;font-size:10px;color:#6b6f78;background:repeating-linear-gradient(135deg,#1d2026 0 8px,#22252c 8px 16px)}
.gf .s{position:absolute;left:6px;top:5px;font-size:10px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.9);right:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf .e{position:absolute;left:5px;bottom:5px;font-family:"Geist Mono",monospace;font-size:9px;padding:2px 6px;border-radius:99px;background:rgba(0,0,0,.65)}.gf .e.ok{color:var(--n-ok)}.gf .e.no{color:var(--n-rj)}
/* la foto con lo que leyó Precision marcado encima */
.fg{position:relative;border-radius:14px;overflow:hidden;margin:0 0 10px;border:1px solid rgba(255,255,255,.08)}.fg img{display:block;width:100%}
.fg .marca{position:absolute;border:2px solid var(--n-rj);border-radius:8px;box-shadow:0 0 0 2000px rgba(0,0,0,.18)}.fg .marca.ok{border-color:var(--n-ok)}
.fg.grande{margin-top:4px}
#phone .mread .fg{margin:-2px -4px 10px}
/* elegir la sucursal */
.sucs{display:flex;flex-wrap:wrap;gap:6px}
.sucs span{padding:0 13px;height:38px;display:inline-flex;align-items:center;gap:5px;border-radius:99px;border:1px solid rgba(255,255,255,.14);font-size:13px;color:var(--n-ink2);cursor:pointer;background:var(--vidrio)}
.sucs span.on{background:#f3f3f1;color:#111;border-color:#f3f3f1}.sucs i{font-style:normal;font-size:9px}.sucs i.ok{color:var(--n-ok)}.sucs i.no{color:var(--n-rj)}
.btn:disabled{opacity:.4}
/* la cámara */
.cam{position:absolute;inset:0;background:#000;display:flex;flex-direction:column;z-index:5}
.cam .ctop{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;color:#fff;font-size:12.5px;background:linear-gradient(rgba(0,0,0,.65),transparent)}
.cam .ctop span{min-width:44px;min-height:32px;display:flex;align-items:center;font-size:18px;cursor:pointer}
.cam .visor{flex:1;position:relative;overflow:hidden}.cam video{width:100%;height:100%;object-fit:cover;display:block}
.cam .guia{position:absolute;inset:18% 8% 16%;border:2px dashed rgba(255,255,255,.65);border-radius:16px;pointer-events:none}
.cam .guia span{position:absolute;top:-28px;left:0;right:0;text-align:center;font-size:12.5px;color:#fff;text-shadow:0 1px 3px #000}
.cam .cmsg{position:absolute;left:14px;right:14px;bottom:14px;color:#fff;font-size:12.5px;text-align:center;text-shadow:0 1px 3px #000}
.cam .cbar{height:calc(120px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:flex;align-items:center;justify-content:space-around;background:#000}
.cam .disp{width:72px;height:72px;border-radius:50%;border:4px solid #fff;background:transparent;display:grid;place-items:center;cursor:pointer}.cam .disp i{width:56px;height:56px;border-radius:50%;background:#fff;display:block;transition:transform .1s}.cam .disp:active i{transform:scale(.88)}
.cam .chico{font-size:12px;color:#c9cad0;text-align:center;width:84px;cursor:pointer;line-height:1.3}
.leyendo{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--n-ink2);padding:14px 4px}
.leyendo i{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--ahora);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.leyendo i{animation:none}}