/* MV Recepción — sistema visual de MV (app-vendedor/web/css/app.css): paleta, sombras en vez de bordes, letra del
   sistema, inputs blancos con sombra. Teléfono en vertical. Ningún SVG sin tamaño en este archivo. */
:root{
  --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);
  --azul:#2563EB;--azul-soft:rgba(37,99,235,.12);
  --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);
  --r:16px;--nav-h:64px;
  --seguro-ar:env(safe-area-inset-top,0px);--seguro-ab:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,sans-serif;background:var(--fondo);color:var(--text);font-size:15px;-webkit-user-select:none;user-select:none}
#app{height:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:disabled{opacity:.45;cursor:default}
textarea{font:inherit;color:inherit;-webkit-user-select:text;user-select:text}
svg{flex-shrink:0}
[hidden]{display:none!important}

/* ── Pantalla: barra arriba, cuerpo que se desplaza, pie fijo ── */
.pant{height:100%;display:flex;flex-direction:column}
.barra{display:flex;align-items:center;gap:8px;padding:calc(10px + var(--seguro-ar)) 8px 10px 12px;background:var(--card);box-shadow:var(--sh);position:relative;z-index:2}
.barra h1{flex:1;margin:0;font-size:18px;font-weight:850;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra.roja{background:linear-gradient(180deg,#E8181E 0%,#C81A1F 100%);color:#fff;box-shadow:none}
.barra-logo{width:30px;height:30px}
.ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center}
.ico svg{width:22px;height:22px}
.ico:active{background:var(--gris-soft)}
.barra.roja .ico:active{background:rgba(255,255,255,.18)}
.chip-red{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.2);font-size:12px;font-weight:750}
.chip-red svg{width:14px;height:14px}
.cuerpo{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 14px calc(24px + var(--seguro-ab))}
.cuerpo.con-pie{padding-bottom:24px}
.pie{display:flex;gap:10px;padding:10px 14px calc(10px + var(--seguro-ab));background:var(--card);box-shadow:0 -1px 3px rgba(22,8,8,.06)}
.pie .btn{flex:1}

/* ── Armazón de las pestañas + barra de abajo: la MISMA de MV Vendedor (app-vendedor/web/css/app.css, .nav*) ── */
.armazon{height:100%;display:flex;flex-direction:column}
.vista{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 14px calc(var(--nav-h) + var(--seguro-ab) + 24px)}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;pointer-events:none;padding-bottom:var(--seguro-ab)}
.nav-fondo{position:absolute;inset:0;filter:drop-shadow(0 -3px 7px rgba(22,8,8,.08))}
/* La curva (hueco ajustado al círculo, con esquinas redondeadas) es una máscara SVG que arma js/nav-curva.js con el ancho real. */
.nav-fondo i{position:absolute;inset:0;background:var(--card);-webkit-mask:var(--nav-mask) 0 0/100% 100% no-repeat;mask:var(--nav-mask) 0 0/100% 100% no-repeat}
.nav-in{position:relative;display:grid;grid-template-columns:1fr 1fr 84px 1fr 1fr;width:100%;max-width:640px;height:var(--nav-h);pointer-events:auto}
.nav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--text3);font-size:11px;font-weight:700;position:relative;white-space:nowrap}
.nav button svg{width:23px;height:23px}
.nav button.on{color:var(--red)}
.nav button.on::after{content:"";position:absolute;bottom:6px;width:18px;height:3px;border-radius:2px;background:var(--red)}
.nav .nav-n{position:absolute;top:7px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--red);color:#fff;
  font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.nav .nav-esc{position:absolute;left:50%;top:-24px;transform:translateX(-50%);width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--red) 0%,var(--red-d) 100%);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(185,28,28,.42);transition:transform .15s}
.nav .nav-esc svg{width:27px;height:27px}
.nav [data-ir="escanear"] .tx{position:absolute;bottom:11px}
.nav [data-ir="escanear"]:active .nav-esc{transform:translateX(-50%) scale(.93)}
.explica{margin:10px 4px 0;font-size:13.5px;color:var(--text2);line-height:1.45}
.perfil{display:flex;align-items:center;gap:12px}
.perfil-ini{width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:850;flex-shrink:0}
.perfil b{display:block;font-size:16px;font-weight:850}
.perfil small{font-size:13px;color:var(--text2);font-weight:600}
.card.hoja-lista{padding:6px}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border-radius:14px;font-size:15px;font-weight:750;text-align:center;line-height:1.2}
.btn svg{width:19px;height:19px}
.btn.pri{background:var(--red);color:#fff}
.btn.pri:active{background:var(--red-d)}
.btn.sec{background:var(--card);box-shadow:var(--sh),inset 0 0 0 1px rgba(22,8,8,.06)}
.btn.sec:active{background:var(--gris-soft)}
.btn.sec.destacar{box-shadow:var(--sh),inset 0 0 0 2px var(--red);color:var(--red-d)}
.btn.peligro{background:var(--red);color:#fff}
.btn.peligro-sec{background:var(--red-soft);color:var(--red-d)}
.btn.ancho{width:100%}
.btn.chico{min-height:34px;padding:0 12px;font-size:13px;border-radius:10px;background:#fff;color:var(--red-d)}
.link{color:var(--red-d);font-weight:750;font-size:14px;padding:8px 0 0}

/* ── Lista ── */
.sec-tit{margin:22px 4px 8px;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text3)}
.sec-tit span{color:var(--text2)}
.lista{display:flex;flex-direction:column;gap:8px}
.fila{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:var(--r);background:var(--card);box-shadow:var(--sh);text-align:left}
.fila:active{background:#fbf8f8}
.fila-mini{width:46px;height:58px;border-radius:8px;object-fit:cover;background:var(--fondo);flex-shrink:0;box-shadow:0 0 0 1px rgba(22,8,8,.06)}
.ico-doc{display:grid;place-items:center;color:var(--text3)}
.ico-doc svg{width:22px;height:22px}
.fila-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fila-txt b{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila-txt small{font-size:12.5px;color:var(--text2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila-txt small.err{color:var(--red-d);white-space:normal}
.fila-der{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.fila-der b{font-size:14px;font-weight:850;font-variant-numeric:tabular-nums}
.fila-der small{font-size:11.5px;color:var(--text3);font-weight:650}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:99px;font-size:11.5px;font-weight:800;white-space:nowrap}
.chip svg{width:12px;height:12px}
.chip.verde{background:var(--verde-soft);color:var(--verde)}
.chip.ambar{background:var(--ambar-soft);color:var(--ambar)}
.chip.rojo{background:var(--red-soft);color:var(--red-d)}
.chip.gris{background:var(--gris-soft);color:var(--text2)}
.vacio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:36px 20px;color:var(--text2)}
.vacio svg{width:40px;height:40px;color:var(--text3)}
.vacio b{font-size:16px;color:var(--text)}
.vacio p{margin:0;font-size:14px;line-height:1.45;max-width:300px}
.vacio.chico{padding:20px}
.cargando{padding:22px;text-align:center;color:var(--text3);font-weight:650;font-size:14px}
.aviso-sesion{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--ambar-soft);color:#7a3a06;font-size:13.5px;font-weight:650;line-height:1.35}
.aviso-sesion>svg{width:20px;height:20px}
.aviso-sesion span{flex:1}

/* ── Comprobante ── */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:14px;margin-bottom:12px}
.card-tit{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text3)}
.card-tit span{color:var(--text2)}
.qr-cab{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.qr-cab svg{width:20px;height:20px}
.qr-cab b{font-size:15px;font-weight:850}
.qr-ok{box-shadow:var(--sh),inset 0 0 0 2px var(--verde-soft)}
.qr-ok .qr-cab{color:var(--verde)}
.qr-ok dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.qr-ok dt{font-size:13px;color:var(--text2);font-weight:650}
.qr-ok dd{margin:0;font-size:14px;font-weight:750;text-align:right;font-variant-numeric:tabular-nums}
.qr-ok dd.total{font-size:17px;font-weight:900}
.qr-no .qr-cab{color:var(--ambar)}
.leido .qr-cab{color:var(--text2)}
.leido .qr-cab .chip{margin-left:auto}
.leido dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.leido dt{font-size:13px;color:var(--text2);font-weight:650}
.leido dd{margin:0;font-size:14px;font-weight:750;text-align:right;font-variant-numeric:tabular-nums}
.leido p{margin:0;font-size:13.5px;color:var(--text2)}
.qr-no .fila-botones{margin-top:8px}
.qr-no .link{display:block;margin:6px auto 0}
.qr-marcado .qr-cab{color:var(--text2)}
.qr-marcado p{margin:0 0 4px;font-size:13.5px;color:var(--text2)}
.qr-no p{margin:0 0 12px;font-size:13.5px;color:var(--text2);line-height:1.45}
.segm{display:flex;flex-wrap:wrap;gap:6px}
.segm button{padding:9px 13px;border-radius:99px;background:var(--fondo);font-size:14px;font-weight:700;color:var(--text2)}
.segm button[aria-checked="true"]{background:var(--text);color:#fff}
.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.foto{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--fondo);box-shadow:0 0 0 1px rgba(22,8,8,.06)}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto img:not([src]),.foto img[src=""]{visibility:hidden}
.foto-rol{position:absolute;left:5px;bottom:5px;padding:3px 7px;border-radius:99px;background:rgba(22,8,8,.72);color:#fff;font-size:11px;font-weight:800}
.foto-rol.rol-aguara{background:var(--azul)}
.foto-rol.rol-qr{background:var(--verde)}
.foto-est{position:absolute;right:5px;top:5px;width:22px;height:22px;border-radius:99px;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--text2)}
.foto-est svg{width:13px;height:13px}
.fila-botones{display:flex;gap:8px;margin-top:12px}
.fila-botones .btn{flex:1;padding:0 10px;font-size:14px}
.ayuda{margin:10px 2px 0;font-size:12.5px;color:var(--text2);line-height:1.4}
textarea{width:100%;border:0;border-radius:12px;padding:11px 12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(22,8,8,.1),0 1px 2px rgba(22,8,8,.04);font-size:15px;resize:none;outline:none}
textarea:focus{box-shadow:inset 0 0 0 2px var(--red)}
.aviso-err{display:flex;gap:8px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--red-soft);color:var(--red-d);font-size:13.5px;font-weight:650}
.aviso-err svg{width:18px;height:18px}

/* ── Hoja de abajo ── */
.hoja-fondo{position:fixed;inset:0;background:rgba(22,8,8,.38);opacity:0;transition:opacity .2s;z-index:50}
.hoja-fondo.on{opacity:1}
.hoja{position:fixed;left:0;right:0;bottom:0;max-height:92%;overflow-y:auto;background:var(--card);border-radius:22px 22px 0 0;box-shadow:var(--sh2);
  padding:8px 16px calc(16px + var(--seguro-ab));transform:translateY(100%);transition:transform .22s cubic-bezier(.2,.8,.2,1);z-index:51}
.hoja.on{transform:none}
.hoja-agarre{width:40px;height:5px;border-radius:99px;background:rgba(22,8,8,.14);margin:0 auto 12px}
.hoja-tit{margin:0 0 6px;font-size:18px;font-weight:850}
.hoja-tit.chico{font-size:15px;margin-top:12px}
.hoja-txt{margin:0 0 12px;font-size:14px;color:var(--text2);line-height:1.45}
.hoja-botones{display:flex;gap:10px;margin-top:14px}
.hoja-botones .btn{flex:1}
.hoja-lista{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.hoja-lista button{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:12px;text-align:left;font-weight:700}
.hoja-lista button:active{background:var(--gris-soft)}
.hoja-lista button svg{width:21px;height:21px;color:var(--text2)}
.hoja-lista button span{display:flex;flex-direction:column;gap:2px}
.hoja-lista button small{font-size:12.5px;font-weight:600;color:var(--text2)}
.hoja-lista button.peligro,.hoja-lista button.peligro svg{color:var(--red-d)}
.foto-grande{border-radius:12px;overflow:hidden;background:var(--fondo);max-height:58vh;display:flex;justify-content:center}
.foto-grande img{max-width:100%;max-height:58vh;object-fit:contain;display:block;-webkit-user-select:none}

/* ── Toast ── */
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--seguro-ab) + 16px);width:max-content;max-width:calc(100% - 32px);padding:12px 16px;border-radius:14px;background:#1f1414;color:#fff;
  font-size:14px;font-weight:650;text-align:center;box-shadow:var(--sh2);opacity:0;transform:translate(-50%,10px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:95}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ── Entrar (igual que MV Vendedor) ── */
.entrar{min-height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,#E8181E 0%,#B71C1C 100%);color:#fff;text-align:center;
  padding:calc(22px + var(--seguro-ar)) 24px calc(18px + var(--seguro-ab))}
/* Todo junto y centrado: en MV Vendedor el QR llena el espacio de arriba; acá no hay nada que lo llene y el teclado quedaba pegado abajo. */
.entrar{justify-content:center;gap:clamp(20px,5vh,44px)}
.entrar-arriba{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}
.entrar .logo{width:60px;height:60px}
.entrar h1{margin:10px 0 6px;font-size:23px;font-weight:850;letter-spacing:-.4px}
.entrar p{margin:0;max-width:280px;font-size:14px;font-weight:600;line-height:1.45;color:rgba(255,255,255,.88)}
.entrar-abajo{flex:0 0 auto;display:flex;flex-direction:column;align-items:center}
.pin-puntos{display:flex;gap:14px;margin:0 0 6px}
.pin-puntos i{width:14px;height:14px;border-radius:99px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);transition:background .12s,box-shadow .12s}
.pin-puntos i.on{background:#fff;box-shadow:none}
.pin-puntos.mal{animation:sacude .35s}
@keyframes sacude{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pin-msg{min-height:20px;font-size:13px;font-weight:700;margin-bottom:8px;max-width:300px}
.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:300px}
.teclado button{height:56px;border-radius:18px;background:rgba(255,255,255,.16);color:#fff;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center}
.teclado button svg{width:24px;height:24px}
.teclado button.vacia{visibility:hidden}
.teclado button:active{background:rgba(255,255,255,.3);transform:scale(.96)}