/* MV Consulta — sistema visual de MV (app-vendedor/web/css/app.css): paleta, sombras en vez de bordes, letra del
   sistema. Pantalla de kiosco: todo en rem y la rem sale del tamaño de la pantalla × --z (ajuste "Tamaño").
   Ningún SVG sin tamaño en este archivo. */
:root{
  --z:1;
  --red:#E8181E;--red-d:#C01217;--red-soft:rgba(232,24,30,.10);
  --verde:#16A34A;--verde-soft:rgba(22,163,74,.12);
  --ambar:#B45309;--ambar-soft:rgba(245,158,11,.16);
  --gris-soft:rgba(22,8,8,.07);
  --fondo:#F7F4F4;--card:#FFFFFF;--text:#160808;--text2:#6B6B6B;--text3:#9A9494;
  --sh:0 1px 3px rgba(22,8,8,.08),0 1px 2px rgba(22,8,8,.04);
  --sh2:0 18px 50px rgba(22,8,8,.14),0 2px 6px rgba(22,8,8,.06);
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:calc(clamp(11px, .62vw + .62vh, 24px) * var(--z))}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,sans-serif;background:var(--fondo);color:var(--text);
  -webkit-user-select:none;user-select:none;touch-action:none}
body:not(.listo) .espera,body:not(.listo) .franja{opacity:0}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
svg{flex-shrink:0}
[hidden]{display:none!important}

/* ── Marca arriba ── */
.marca{position:fixed;top:1.4rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.8rem;z-index:12;pointer-events:none}
.marca img{height:3.6rem;width:auto;display:block}

/* ── Espera ── */
.espera{position:fixed;inset:0;padding:6rem 2.2rem 2rem;transition:opacity .4s}
body[data-modo="destacados"] .espera{padding-bottom:9rem}
.esp-ilus,.esp-dest,.esp-qr{position:absolute;inset:6rem 2.2rem 2rem;display:none}
.espera[data-modo="ilustracion"] .esp-ilus{display:flex}
.espera[data-modo="qr"] .esp-qr{display:grid}
.esp-qr{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5rem;padding:0 4rem}
.qr-card{background:var(--card);border-radius:2rem;box-shadow:var(--sh2);padding:2rem 2rem 1.4rem;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.qr-svg{width:min(34vw,50vh);aspect-ratio:1}
.qr-svg svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
.qr-card span{display:flex;align-items:center;gap:.6rem;font-size:1.15rem;font-weight:750;color:var(--text2)}
.qr-card span svg{width:1.4rem;height:1.4rem}
.qr-textos h1{margin:0;font-size:3.6rem;font-weight:900;letter-spacing:-.035em;line-height:1.05}
.qr-textos p{margin:.8rem 0 0;font-size:1.6rem;font-weight:600;color:var(--text2)}
.qr-textos ul{list-style:none;margin:2.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:1rem}
.qr-textos li{display:flex;align-items:center;gap:1rem;font-size:1.5rem;font-weight:700}
.qr-textos li b{width:2.8rem;height:2.8rem;border-radius:99px;background:var(--red);color:#fff;display:grid;place-items:center;font-size:1.3rem;font-weight:900;flex-shrink:0}
.esp-qr.entra .qr-card{animation:entrarFoto .6s cubic-bezier(.2,.8,.2,1) both}
.esp-qr.entra .qr-textos>*{animation:subir .6s cubic-bezier(.2,.8,.2,1) both}
.esp-qr.entra .qr-textos>:nth-child(2){animation-delay:.06s}.esp-qr.entra .qr-textos>:nth-child(3){animation-delay:.14s}
@media (orientation:portrait){.esp-qr{grid-template-columns:1fr;justify-items:center;align-content:center;gap:2.6rem;text-align:center}.qr-svg{width:min(60vw,36vh)}.qr-textos li{justify-content:flex-start;text-align:left}}
.espera[data-modo="destacados"] .esp-dest{display:block;inset:6rem 0 9rem}

.esp-ilus{flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;text-align:center}
.esp-svg svg{width:min(78vw, 62vh * 1.5);height:auto;max-height:52vh;display:block}
.esp-textos h1{margin:0;font-size:3.4rem;font-weight:900;letter-spacing:-.035em;line-height:1.05}
.esp-textos p{margin:.6rem 0 0;font-size:1.45rem;font-weight:600;color:var(--text2)}
.esp-ilus.entra .esp-textos{animation:subir .7s cubic-bezier(.2,.8,.2,1) both}
.esp-puntos{display:flex;gap:.6rem;margin-top:.4rem}
.esp-puntos i{width:.6rem;height:.6rem;border-radius:99px;background:var(--gris-soft);transition:width .4s,background .4s}
.esp-puntos i.on{width:2rem;background:var(--red)}

.esp-dest{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.esp-pista{display:flex;gap:2rem;height:100%;align-items:center;padding:0 2rem;will-change:transform}
.esp-pista img{height:100%;width:auto;border-radius:1.2rem;box-shadow:var(--sh2);background:var(--card)}

/* Franja de abajo (sólo con destacados): "Escaneá tu producto" + "Esperando escaneo". */
.franja{position:fixed;left:2.2rem;right:2.2rem;bottom:1.6rem;height:6rem;display:none;align-items:center;gap:1.2rem;padding:0 1.4rem;
  background:var(--card);border-radius:1.4rem;box-shadow:var(--sh2);z-index:2}
body[data-modo="destacados"] .franja{display:flex;animation:subir .6s cubic-bezier(.2,.8,.2,1) both}
/* Ilustración y QR: sólo la píldora "Esperando escaneo" (el texto grande ya dice qué hacer). */
body[data-modo="ilustracion"] .franja,body[data-modo="qr"] .franja{display:flex;left:0;right:0;bottom:2rem;height:auto;padding:0;background:none;box-shadow:none;justify-content:center}
body[data-modo="ilustracion"] .fr-ico,body[data-modo="ilustracion"] .fr-txt,body[data-modo="qr"] .fr-ico,body[data-modo="qr"] .fr-txt{display:none}
body[data-modo="ilustracion"] .fr-espera,body[data-modo="qr"] .fr-espera{background:var(--card);box-shadow:var(--sh);font-size:1.15rem;padding:.8rem 1.4rem}
.fr-ico{width:3.8rem;height:3.8rem;border-radius:1rem;background:var(--red);color:#fff;display:grid;place-items:center}
.fr-ico svg{width:2.2rem;height:2.2rem}
.fr-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.fr-txt b{font-size:1.7rem;font-weight:900;letter-spacing:-.02em}
.fr-txt span{font-size:1.05rem;font-weight:600;color:var(--text2)}
.fr-espera{display:flex;align-items:center;gap:.6rem;font-size:1rem;font-weight:750;color:var(--text2);padding:.6rem 1rem;border-radius:99px;background:var(--fondo)}
.fr-espera i{width:.65rem;height:.65rem;border-radius:99px;background:var(--verde);animation:latido 1.6s ease-in-out infinite}

/* Sin conexión: pastilla chica arriba a la derecha (no tapa nada). */
.sin-red{position:fixed;top:1.8rem;right:2.2rem;display:flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:99px;
  background:var(--ambar-soft);color:var(--ambar);font-size:.95rem;font-weight:750;z-index:3}
.sin-red svg{width:1.1rem;height:1.1rem}

/* ── Resultado (tapa todo) ── */
.resultado{position:fixed;inset:0;background:var(--fondo);z-index:10;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.resultado.visible{opacity:1;visibility:visible;transition:opacity .2s}
.res-caja{height:100%;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:3rem;padding:6.6rem 3.5rem 7.5rem}
.res-foto{background:var(--card);border-radius:1.8rem;box-shadow:var(--sh2);display:grid;place-items:center;overflow:hidden;min-height:0}
.res-foto img{max-width:86%;max-height:86%;object-fit:contain;opacity:0;transform:scale(.94);transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.res-foto img.lista{opacity:1;transform:none}
.res-foto-vacia{color:var(--text3)}
.res-foto-vacia svg{width:6rem;height:6rem}
.res-info{display:flex;flex-direction:column;justify-content:center;min-width:0}
.res-chips{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.chip{padding:.45rem 1rem;border-radius:99px;background:var(--card);box-shadow:var(--sh);font-size:1.05rem;font-weight:800;color:var(--text2)}
.chip.rojo{background:var(--red);color:#fff;box-shadow:none}
.res-nombre{margin:0;font-size:2.7rem;font-weight:850;letter-spacing:-.03em;line-height:1.08;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.res-pres{margin-top:.6rem;font-size:1.4rem;font-weight:700;color:var(--text2)}
.res-precio{margin-top:1.4rem;font-size:7.6rem;font-weight:900;letter-spacing:-.045em;line-height:.95;color:var(--red);white-space:nowrap}
.pr-peso{font-size:.5em;margin-right:.08em;vertical-align:.55em;letter-spacing:0}
.pr-cent{font-size:.42em;vertical-align:.95em;margin-left:.05em;letter-spacing:0}
.res-extra{margin-top:1.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:1.45rem;font-weight:600;color:var(--text2)}
.res-extra b{color:var(--text);font-weight:850}
.res-extra .sep{width:.35rem;height:.35rem;border-radius:99px;background:var(--text3)}
.res-codigo{margin-top:1.6rem;font-size:1rem;font-weight:650;color:var(--text3);letter-spacing:.02em}
.resultado.entra .res-foto{animation:entrarFoto .5s cubic-bezier(.2,.8,.2,1) both}
.resultado.entra .res-info>*{animation:subir .5s cubic-bezier(.2,.8,.2,1) both}
.resultado.entra .res-info>:nth-child(2){animation-delay:.04s}
.resultado.entra .res-precio{animation:precio .6s cubic-bezier(.2,1.3,.4,1) .08s both}
.resultado.entra .res-info>:nth-child(n+4){animation-delay:.14s}

.res-pie{position:absolute;left:3.5rem;right:3.5rem;bottom:2.4rem;display:flex;align-items:center;gap:1.2rem}
.res-barra{flex:1;height:.4rem;border-radius:99px;background:var(--gris-soft);overflow:hidden}
.res-barra i{display:block;height:100%;background:var(--red);border-radius:99px;transform-origin:left;animation:encoger 12s linear forwards}
.chip-resp{display:flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:99px;background:var(--card);box-shadow:var(--sh);font-size:1rem;font-weight:750;color:var(--text2);white-space:nowrap}
.chip-resp.ambar{background:var(--ambar-soft);color:var(--ambar);box-shadow:none}
.chip-resp svg{width:1.1rem;height:1.1rem}

/* No encontrado */
.res-caja.no{grid-template-columns:1fr;place-content:center;padding-top:6.6rem;justify-items:center;text-align:center;gap:0}
.no-ico{width:9rem;height:9rem;border-radius:99px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;margin-bottom:2rem}
.no-ico svg{width:4.4rem;height:4.4rem}
.no-titulo{margin:0;font-size:3.4rem;font-weight:900;letter-spacing:-.035em}
.no-sub{margin:.8rem 0 0;font-size:1.7rem;font-weight:600;color:var(--text2)}
.resultado.entra .res-caja.no>*{animation:subir .5s cubic-bezier(.2,.8,.2,1) both}

/* La tablet va siempre VERTICAL (dueño, 2026-11-06): este es el diseño de verdad; lo horizontal es sólo para verla en la PC. */
@media (orientation:portrait){
  .res-caja{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:2.4rem;padding:6.6rem 2.6rem 7rem}
  .res-info{text-align:center;align-items:center}
  .res-chips{justify-content:center}
  .res-nombre{font-size:3.1rem}
  .res-precio{font-size:8.2rem;margin-top:1rem}
  .res-extra{justify-content:center}
  .res-pie{left:2.6rem;right:2.6rem}
  .esp-ilus{gap:2.4rem}
  .esp-svg svg{width:min(88vw,50vh * 1.5);max-height:44vh}
  .esp-textos h1{font-size:4rem}
  .esp-textos p{font-size:1.7rem}
}

/* ── Menú oculto ── */
.esquina{position:fixed;top:0;right:0;width:7rem;height:7rem;z-index:50;touch-action:none}
.menu{position:fixed;inset:0;z-index:60;background:rgba(22,8,8,.5);display:grid;place-items:center;cursor:default;touch-action:manipulation}
.menu *{touch-action:manipulation}
.hoja{background:var(--fondo);border-radius:1.6rem;box-shadow:var(--sh2);animation:subir .3s cubic-bezier(.2,.8,.2,1) both}
.menu.quieta .hoja{animation:none}
.hoja h2{margin:0;font-size:1.5rem;font-weight:850;letter-spacing:-.02em}
.hoja.pin{width:24rem;padding:2rem;text-align:center}
.pin-sub{margin:.4rem 0 1.2rem;font-size:1.05rem;color:var(--text2);font-weight:600}
.pin-sub .error{color:var(--red)}
.pin-puntos{display:flex;justify-content:center;gap:1rem;margin-bottom:1.6rem}
.pin-puntos i{width:1rem;height:1rem;border-radius:99px;background:var(--gris-soft)}
.pin-puntos i.on{background:var(--red)}
.pin-teclas{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.pin-teclas button{height:4.4rem;border-radius:1.1rem;background:var(--card);box-shadow:var(--sh);font-size:1.7rem;font-weight:800;display:grid;place-items:center}
.pin-teclas button.suave{background:transparent;box-shadow:none;font-size:1.05rem;color:var(--text2)}
.pin-teclas button svg{width:1.6rem;height:1.6rem}
.pin-teclas button:active{transform:scale(.96)}

.hoja.ajustes{width:min(48rem,94vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.hoja.ajustes header{display:flex;align-items:center;justify-content:space-between;padding:1.4rem 1.6rem 1rem}
.cerrar{width:3rem;height:3rem;border-radius:99px;background:var(--card);box-shadow:var(--sh);display:grid;place-items:center}
.cerrar svg{width:1.3rem;height:1.3rem}
.ajustes-cuerpo{overflow-y:auto;padding:0 1.6rem 1.6rem;touch-action:pan-y}
.ajustes-cuerpo section{background:var(--card);border-radius:1.2rem;box-shadow:var(--sh);padding:1rem 1.2rem;margin-bottom:1rem}
.ajustes-cuerpo h3{margin:0 0 .6rem;font-size:.85rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.4rem;font-size:1.1rem;font-weight:650}
.fila.col{flex-direction:column;align-items:stretch;gap:.5rem;padding:.4rem 0}
.paso{display:flex;align-items:center;gap:.4rem;background:var(--fondo);border-radius:99px;padding:.3rem}
.paso button{width:2.6rem;height:2.6rem;border-radius:99px;background:var(--card);box-shadow:var(--sh);display:grid;place-items:center}
.paso button svg{width:1.1rem;height:1.1rem}
.paso span{min-width:4.6rem;text-align:center;font-weight:800}
.seg{display:flex;background:var(--fondo);border-radius:99px;padding:.3rem;gap:.3rem}
.seg button{flex:1;height:2.8rem;border-radius:99px;font-weight:750;color:var(--text2)}
.seg button.on{background:var(--card);box-shadow:var(--sh);color:var(--text)}
.llave{cursor:pointer}
.llave input{position:absolute;opacity:0;pointer-events:none}
.llave i{position:relative;width:3.4rem;height:2rem;border-radius:99px;background:var(--gris-soft);transition:background .2s;flex-shrink:0}
.llave i::after{content:'';position:absolute;top:.2rem;left:.2rem;width:1.6rem;height:1.6rem;border-radius:99px;background:#fff;box-shadow:var(--sh);transition:transform .2s}
.llave input:checked+i{background:var(--verde)}
.llave input:checked+i::after{transform:translateX(1.4rem)}
.estado{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:1rem;font-weight:650;color:var(--text2);margin-bottom:.4rem}
.punto{width:.7rem;height:.7rem;border-radius:99px;background:var(--text3)}
.punto.ok{background:var(--verde)}.punto.mal{background:var(--ambar)}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:3.4rem;padding:0 1.4rem;border-radius:99px;background:var(--red);color:#fff;font-weight:800;font-size:1.05rem;margin-top:.6rem}
.boton svg{width:1.2rem;height:1.2rem}
.boton.chico{height:2.8rem;margin:0;background:var(--fondo);color:var(--text)}
.boton.suave{background:var(--fondo);color:var(--text2)}
.boton:disabled{opacity:.6}
.ayuda{margin:0 0 .6rem;font-size:1rem;color:var(--text2)}
.prueba{background:var(--fondo);border-radius:.9rem;padding:.9rem 1rem;font-family:ui-monospace,Consolas,monospace;font-size:1.2rem;min-height:3.4rem}
.prueba-res{margin-top:.5rem;font-family:inherit;font-size:1rem;font-weight:700}
.prueba-res.ok{color:var(--verde)}.prueba-res.mal{color:var(--ambar)}
.tenue{color:var(--text3)}
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.numeros div{background:var(--fondo);border-radius:.9rem;padding:.8rem;font-size:.95rem;font-weight:650;color:var(--text2)}
.numeros b{display:block;font-size:1.9rem;font-weight:900;color:var(--text)}
.no-lista{margin-top:.8rem;font-size:1rem}
.no-lista div{display:flex;justify-content:space-between;padding:.45rem 0;font-family:ui-monospace,Consolas,monospace}
.version{text-align:center;font-size:.85rem;color:var(--text3);margin:.4rem 0 0}

/* ── Escenas de la ilustración (js/ilustracion.js). 5 s cada una; reemplazar el SVG las reinicia. ── */
.esc-svg *{transform-box:fill-box}
.esc-tinta{fill:#160808}
.esc-cuerpo{fill:#fff;stroke:#160808;stroke-width:4}
.esc-rojo{fill:var(--red)}
.esc-gris{fill:#E4DEDE}.esc-gris2{fill:#EFEAEA}
.esc-sombra{fill:rgba(22,8,8,.07)}
.esc-barras rect{fill:#160808}
.esc-linea{stroke:var(--red);stroke-width:3.5;stroke-linecap:round;opacity:0}
.esc-led{fill:#D7CFCF}
.esc-pantalla{fill:#fff}.esc-fondo-foto{fill:var(--fondo)}
.esc-chip{fill:rgba(232,24,30,.16)}
.esc-precio{font:900 40px -apple-system,'Segoe UI',system-ui,Roboto,sans-serif;fill:var(--red);letter-spacing:-1.5px}
.esc-ok circle{fill:var(--verde)}
.esc-ok path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.esc-ok{transform-origin:center;transform:scale(0)}
.esc-brillos path{fill:var(--red);opacity:0;transform-origin:center}

.esc-0 .esc-producto{animation:producto 5s cubic-bezier(.45,.05,.2,1) both}
.esc-0 .esc-haz{animation:haz 5s ease both}
.esc-0 .esc-linea{animation:linea 5s linear both}
.esc-0 .esc-ok{animation:ok 5s cubic-bezier(.2,1.4,.4,1) both}
.esc-0 .esc-led{animation:led 5s step-end both}
.esc-1 .esc-tablet{animation:tablet 5s cubic-bezier(.2,.8,.2,1) both}
.esc-1 .esc-mini-prod{animation:aparece 5s ease both}
.esc-1 .esc-gris,.esc-1 .esc-gris2,.esc-1 .esc-chip{transform-origin:left;animation:barra 5s cubic-bezier(.2,.8,.2,1) both}
.esc-1 .esc-precio{transform-origin:left bottom;animation:precioSvg 5s cubic-bezier(.2,1.4,.4,1) both}
.esc-1 .esc-brillos path{animation:brillo 5s ease both}
.esc-1 .esc-brillos path+path{animation-delay:.25s}

@keyframes producto{0%{transform:translateX(-60px);opacity:0}12%{opacity:1}42%{transform:translateX(44px)}88%{transform:translateX(44px);opacity:1}100%{transform:translateX(44px);opacity:0}}
@keyframes haz{0%,38%{opacity:.25}46%,60%{opacity:1}75%,100%{opacity:.25}}
@keyframes linea{0%,42%{opacity:0}44%,48%,52%{opacity:1}46%,50%{opacity:.3}56%,100%{opacity:0}}
@keyframes ok{0%,54%{transform:scale(0)}64%{transform:scale(1)}90%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes led{0%{fill:#D7CFCF}54%{fill:#16A34A}92%{fill:#D7CFCF}}
@keyframes tablet{0%{transform:translateY(24px);opacity:0}14%{transform:none;opacity:1}90%{opacity:1}100%{opacity:0}}
@keyframes aparece{0%,16%{opacity:0;transform:scale(.8)}28%{opacity:1;transform:none}}
@keyframes barra{0%,24%{transform:scaleX(0)}38%{transform:scaleX(1)}}
@keyframes precioSvg{0%,38%{transform:scale(.4);opacity:0}52%{transform:scale(1);opacity:1}}
@keyframes brillo{0%,50%{opacity:0;transform:scale(.3) rotate(0)}60%{opacity:1;transform:scale(1) rotate(45deg)}75%{opacity:0;transform:scale(.6) rotate(90deg)}}

@keyframes subir{from{opacity:0;transform:translateY(1.2rem)}to{opacity:1;transform:none}}
@keyframes entrarFoto{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes precio{from{opacity:0;transform:scale(.7);transform-origin:left center}to{opacity:1;transform:none}}
@keyframes encoger{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}