/* ============================================================
   Inventario El Rey Ormeño · celular del contador y panel del encargado
   Colores de la marca: azul #2400e6, dorado #f4a933
   ============================================================ */
:root{
  --marca:#2400e6; --marca-osc:#1a00b0; --marca-luz:#eeedff; --marca-borde:#cbc6ff; --noche:#0e0a4d;
  --ok:#0b7a43; --ok-luz:#e5f5ec; --ok-borde:#bfe0cc;
  --rojo:#c8372d; --rojo-luz:#fdecea; --oro:#f4a933; --oro-luz:#fff4dd; --ambar:#8a5a00;
  --tinta:#16142b; --suave:#585670; --tenue:#7f7d95; --linea:#e4e3ee; --fondo:#f3f3f9; --papel:#fff;
  --r:16px; --r2:12px; --sombra:0 1px 2px rgba(20,16,60,.06),0 4px 14px rgba(20,16,60,.07);
  --texto:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--fondo); color:var(--tinta); font:16px/1.45 var(--texto); -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3{margin:0; line-height:1.15}
h1{font-size:22px; font-weight:900}
h2{font-size:18px; font-weight:900}
.num{font-variant-numeric:tabular-nums}
.chico{font-size:13px; color:var(--suave)}
.suave{color:var(--suave)}
:focus-visible{outline:3px solid var(--oro); outline-offset:2px; border-radius:8px}
[hidden]{display:none !important}

/* ---------- botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 18px; border-radius:999px; border:1px solid transparent; background:var(--marca); color:#fff; font-weight:800; font-size:16px; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .15s, transform .05s}
.btn:hover{background:var(--marca-osc)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn.sec{background:var(--papel); color:var(--marca); border-color:var(--marca-borde)}
.btn.sec:hover{background:var(--marca-luz)}
.btn.oro{background:var(--oro); color:#1a1240}
.btn.oro:hover{background:#e79a1d}
.btn.ok{background:var(--ok)}
.btn.peligro{background:var(--papel); color:var(--rojo); border-color:#f1c3be}
.btn.texto{background:none; color:var(--marca); padding:8px 10px; min-height:40px}
.btn.texto:hover{background:var(--marca-luz)}
.btn.ancho{width:100%}
.btn.grande{min-height:64px; font-size:19px; border-radius:20px}
.btn.chico{min-height:38px; padding:6px 14px; font-size:14px}

/* ---------- campos ---------- */
.campo{display:block; margin-bottom:14px}
.campo>span{display:block; font-weight:800; font-size:14px; margin-bottom:6px}
.campo input,.campo select{width:100%; min-height:50px; padding:10px 14px; border:1px solid #cfd0dc; border-radius:var(--r2); background:#fff; font-size:17px}
.campo input:focus,.campo select:focus{outline:none; border-color:var(--marca); box-shadow:0 0 0 3px rgba(36,0,230,.15)}
.fila{display:flex; gap:10px; align-items:center}
.fila>*{min-width:0}
.crece{flex:1}

/* ---------- cabecera ---------- */
.cab{position:sticky; top:0; z-index:40; background:var(--noche); color:#fff; padding:env(safe-area-inset-top,0) 0 0}
.cab-fila{max-width:760px; margin:0 auto; height:58px; padding:0 14px; display:flex; align-items:center; gap:10px}
.cab img{height:34px; width:auto}
.cab .titulo{font-weight:900; font-size:16px; line-height:1.1}
.cab .titulo small{display:block; font-weight:700; font-size:12px; color:#c3c0e6}
.cab .der{margin-left:auto; display:flex; gap:6px; align-items:center}
.cab .btn.texto{color:#fff}
.cab .btn.texto:hover{background:rgba(255,255,255,.1)}
.volver{background:none; border:0; color:#fff; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer; flex:none}
.volver:hover{background:rgba(255,255,255,.1)}

.cont{max-width:760px; margin:0 auto; padding:16px 16px 120px}
.tarjeta{background:var(--papel); border-radius:var(--r); box-shadow:var(--sombra); padding:16px; margin-bottom:14px}
.tarjeta h2{margin-bottom:10px}
.paso-n{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--marca); color:#fff; font-weight:900; font-size:15px; margin-right:8px; flex:none}
.paso-n.hecho{background:var(--ok)}
.paso-tit{display:flex; align-items:center; margin-bottom:12px}

/* ---------- inicio ---------- */
.bienvenida{text-align:center; padding:28px 8px 8px}
.bienvenida img{height:70px; width:auto; margin-bottom:10px}
.bienvenida p{color:var(--suave); margin:6px 0 20px}
.selector-lugar{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:8px}
.lados{display:flex; gap:6px}
.lados button{flex:1; min-height:50px; border-radius:var(--r2); border:1px solid #cfd0dc; background:#fff; font-weight:900; cursor:pointer}
.lados button.on{background:var(--marca); color:#fff; border-color:var(--marca)}

/* ---------- lista de lugares ---------- */
.lugares{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; align-items:start}
.lugar{border:0; text-align:left; background:var(--papel); border-radius:var(--r2); padding:12px; box-shadow:var(--sombra); cursor:pointer; border-left:5px solid var(--linea); min-height:76px}
.lugar b{display:block; font-size:15px; line-height:1.2}
.lugar .chico{display:block; margin-top:4px}
.lugar.contando{border-left-color:var(--oro)}
.lugar.lista{border-left-color:var(--ok)}
.chip{display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:2px 10px; font-size:12.5px; font-weight:800; background:var(--linea); color:var(--suave)}
.chip.contando{background:var(--oro-luz); color:var(--ambar)}
.chip.lista{background:var(--ok-luz); color:var(--ok)}
.chip.doble{background:var(--rojo-luz); color:var(--rojo)}

/* ---------- fotos ---------- */
.fotos{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px}
.foto{position:relative; flex:none; width:96px; height:96px; border-radius:var(--r2); overflow:hidden; background:var(--linea); border:0; padding:0; cursor:pointer}
.foto img{width:100%; height:100%; object-fit:cover; display:block}
.foto .x{position:absolute; top:4px; right:4px; width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; border:0; font-size:15px; line-height:1; cursor:pointer}
.sin-foto{border:2px dashed var(--marca-borde); background:var(--marca-luz); border-radius:var(--r); padding:18px; text-align:center}
.sin-foto p{margin:0 0 12px; color:var(--suave)}

/* ---------- buscador y resultados ---------- */
.buscar{position:relative}
.buscar input{width:100%; min-height:52px; border-radius:999px; border:1px solid #cfd0dc; padding:0 16px; font-size:17px; background:#fff}
.buscar input:focus{outline:none; border-color:var(--marca); box-shadow:0 0 0 3px rgba(36,0,230,.15)}
.resultados{margin-top:8px; background:#fff; border-radius:var(--r2); box-shadow:var(--sombra-alta,0 10px 40px rgba(20,16,60,.18)); overflow:hidden}
.res{display:flex; gap:10px; align-items:center; width:100%; border:0; border-bottom:1px solid var(--linea); background:#fff; padding:10px 14px; text-align:left; cursor:pointer; min-height:56px}
.res:hover{background:var(--marca-luz)}
.res b{display:block; font-size:15px; line-height:1.2}
.res .chico{display:block}

/* ---------- líneas contadas ---------- */
.lineas{list-style:none; margin:0; padding:0}
.linea{display:flex; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--linea)}
.linea:last-child{border-bottom:0}
.linea .info{flex:1; min-width:0}
.linea .info b{display:block; font-size:15px; line-height:1.2; overflow:hidden; text-overflow:ellipsis}
.linea .cant{min-width:64px; min-height:44px; border-radius:var(--r2); border:1px solid var(--marca-borde); background:var(--marca-luz); color:var(--marca); font-weight:900; font-size:18px; cursor:pointer; padding:0 10px}
.linea .borrar{width:40px; height:40px; border-radius:50%; border:0; background:none; color:var(--tenue); cursor:pointer; font-size:20px}
.linea .borrar:hover{background:var(--rojo-luz); color:var(--rojo)}
.etq{display:inline-block; font-size:11px; font-weight:900; border-radius:6px; padding:1px 6px; background:var(--oro-luz); color:var(--ambar); vertical-align:middle; margin-left:4px}
.etq.nuevo{background:var(--rojo-luz); color:var(--rojo)}
.vacio{text-align:center; color:var(--suave); padding:18px 8px}

.pie{position:fixed; left:0; right:0; bottom:0; z-index:30; background:rgba(255,255,255,.96); backdrop-filter:blur(6px); border-top:1px solid var(--linea); padding:10px 16px calc(10px + env(safe-area-inset-bottom,0))}
.pie .fila{max-width:760px; margin:0 auto}

/* ---------- lector (pantalla completa) ---------- */
.lector{position:fixed; inset:0; z-index:100; background:#000; display:flex; flex-direction:column}
.lector video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.lector .marco{position:absolute; left:50%; top:38%; width:min(78vw,420px); height:min(30vw,170px); transform:translate(-50%,-50%); border:3px solid rgba(255,255,255,.9); border-radius:18px; box-shadow:0 0 0 9999px rgba(0,0,0,.35)}
.lector .marco::after{content:""; position:absolute; left:8px; right:8px; top:50%; height:2px; background:var(--oro); animation:barrido 1.6s ease-in-out infinite alternate}
@keyframes barrido{from{transform:translateY(-55px)} to{transform:translateY(55px)}}
@media (prefers-reduced-motion:reduce){ .lector .marco::after{animation:none} }
.lector .arriba{position:relative; z-index:2; display:flex; align-items:center; gap:8px; padding:calc(10px + env(safe-area-inset-top,0)) 12px 10px; color:#fff; background:linear-gradient(rgba(0,0,0,.6),transparent)}
.lector .arriba b{flex:1; font-size:16px}
.lector .redondo{width:48px; height:48px; border-radius:50%; border:0; background:rgba(255,255,255,.18); color:#fff; font-size:22px; cursor:pointer; display:grid; place-items:center}
.lector .redondo.on{background:var(--oro); color:#1a1240}
.lector .ayuda{position:absolute; left:0; right:0; top:calc(38% + min(15vw,85px) + 18px); text-align:center; color:#fff; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.7); padding:0 20px; z-index:2}
.lector .error{position:absolute; inset:auto 16px 40% 16px; background:#fff; color:var(--tinta); border-radius:var(--r); padding:16px; z-index:3; text-align:center}
.lector .modo{position:absolute; left:0; right:0; bottom:calc(16px + env(safe-area-inset-bottom,0)); z-index:2; display:flex; justify-content:center; gap:8px; padding:0 12px; flex-wrap:wrap}
.lector .modo .btn{background:rgba(255,255,255,.18); border-color:transparent}
.lector .modo .btn.on{background:#fff; color:var(--marca)}
.lector .toast{position:absolute; left:50%; top:calc(38% - min(15vw,85px) - 56px); transform:translateX(-50%); background:var(--ok); color:#fff; font-weight:900; padding:8px 16px; border-radius:999px; z-index:3; white-space:nowrap; max-width:92vw; overflow:hidden; text-overflow:ellipsis}

/* ---------- hoja inferior (cantidad) ---------- */
.hoja-fondo{position:fixed; inset:0; z-index:120; background:rgba(10,8,40,.45); display:flex; align-items:flex-end; justify-content:center}
.hoja{background:#fff; width:100%; max-width:560px; border-radius:22px 22px 0 0; padding:18px 16px calc(16px + env(safe-area-inset-bottom,0)); max-height:92vh; overflow:auto; animation:sube .18s ease-out}
@keyframes sube{from{transform:translateY(30px); opacity:.6}}
.hoja .marca-p{font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; color:var(--suave)}
.hoja h3{font-size:20px; font-weight:900; margin:2px 0 4px}
.hoja .ya{background:var(--oro-luz); color:var(--ambar); border-radius:var(--r2); padding:8px 12px; font-weight:700; margin:10px 0; font-size:14.5px}
.cantidad{display:flex; align-items:center; gap:8px; margin:14px 0 10px}
.cantidad input{flex:1; min-width:0; min-height:64px; font-size:32px; font-weight:900; text-align:center; border:2px solid var(--marca); border-radius:var(--r2)}
.cantidad input:focus{outline:none; box-shadow:0 0 0 4px rgba(36,0,230,.18)}
.cantidad .u{font-weight:900; color:var(--suave); min-width:44px}
.mas{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px}
.mas button{min-height:48px; border-radius:var(--r2); border:1px solid var(--marca-borde); background:var(--marca-luz); color:var(--marca); font-weight:900; font-size:17px; cursor:pointer}
.sumar-o{display:flex; gap:8px; margin-bottom:12px}
.sumar-o button{flex:1; min-height:46px; border-radius:var(--r2); border:1px solid #cfd0dc; background:#fff; font-weight:800; cursor:pointer}
.sumar-o button.on{background:var(--marca); color:#fff; border-color:var(--marca)}

/* ---------- avisos y diálogos (comun.js) ---------- */
.aviso{position:fixed; left:50%; top:calc(66px + env(safe-area-inset-top,0)); transform:translate(-50%,-12px); background:var(--tinta); color:#fff; padding:10px 18px; border-radius:14px; font-weight:800; opacity:0; transition:.2s; z-index:200; width:max-content; max-width:min(92vw,520px); text-align:center; pointer-events:none; box-shadow:0 6px 20px rgba(20,16,60,.25)}
.aviso.visible{opacity:1; transform:translate(-50%,0)}
.aviso.ok{background:var(--ok)}
.aviso.error{background:var(--rojo)}
.dialogo-fondo{position:fixed; inset:0; background:rgba(10,8,40,.45); z-index:300; display:grid; place-items:center; padding:16px}
.dialogo{background:#fff; border-radius:var(--r); padding:20px; max-width:420px; width:100%; box-shadow:0 10px 40px rgba(20,16,60,.25)}
.dialogo-msg{margin:0 0 14px; font-weight:700; white-space:pre-line}
.dialogo-input{width:100%; min-height:48px; border:1px solid #cfd0dc; border-radius:var(--r2); padding:8px 12px; font-size:17px; margin-bottom:14px}
.dialogo-acc{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}

.carga{padding:60px 16px; text-align:center; color:var(--suave)}

/* ---------- plano del súper (dibujo) ---------- */
.lienzo{position:relative; background:#fafafe; border-radius:12px; border:1px solid var(--linea); overflow:hidden}
.lienzo-svg{height:68vh; min-height:320px; width:100%}
.lienzo .plano-svg{width:100%; height:100%; display:block; touch-action:none; -webkit-user-select:none; user-select:none}
.zoom-btns{position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:6px; z-index:2}
.zoom-btns button{width:44px; height:44px; border-radius:12px; border:1px solid var(--linea); background:rgba(255,255,255,.95); box-shadow:0 2px 8px rgba(20,16,60,.15); font-size:22px; font-weight:900; color:var(--marca); cursor:pointer; display:grid; place-items:center; line-height:1}
.zoom-btns button:hover{background:var(--marca-luz)}
.plano-svg .asa{display:none}
.plano-svg .sel .asa{display:inline}
.plano-svg [data-cod]:hover{filter:brightness(.95)}
.leyenda{display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--suave)}
.leyenda i{display:inline-block; width:14px; height:14px; border-radius:4px; border:2px solid; vertical-align:-2px; margin-right:4px}

/* elegir tramo de una góndola */
.tramos{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px}
.tramos button{min-height:58px; border-radius:var(--r2); border:1px solid #cfd0dc; border-left:5px solid #b9b8c9; background:#fff; cursor:pointer; text-align:left; padding:8px 10px}
.tramos button b{display:block; font-size:15px}
.tramos button span{font-size:12px; color:var(--suave)}
.tramos button.contando{border-left-color:#e08f12; background:#fff8e8}
.tramos button.lista{border-left-color:var(--ok); background:var(--ok-luz)}
#planoCel .lienzo-svg{height:62vh}