/* ============================================================
   Carga de inventario con pistola (lector inalámbrico)
   Pantalla completa que "escucha" al lector: cada lectura suma 1 unidad.
   z-index 10060: encima del POS y de los modales de siguiente nivel, pero
   debajo del Modal genérico (99999) para poder pedir la contraseña encima.
============================================================ */
.scanl{
  position:fixed; inset:0; z-index:10060; display:none; overflow:auto;
  color:#fff; font-family:var(--font);
  background:
    radial-gradient(900px 560px at 50% -8%, rgba(47,95,224,.34), transparent 62%),
    radial-gradient(700px 480px at 100% 100%, rgba(23,57,156,.30), transparent 60%),
    #05070c;
}
.scanl.show{ display:block; }
.scanl-wrap{
  max-width:1120px; margin:0 auto; padding:16px 18px 28px;
  min-height:100%; display:flex; flex-direction:column; gap:14px;
}

/* ---------- Barra superior ---------- */
.scanl-top{ display:flex; align-items:center; gap:12px; }
.scanl-top .ok-logo{ flex:0 0 auto; }
.scanl-title{ min-width:0; flex:1; }
.scanl-title b{ display:block; font-size:17px; font-weight:900; letter-spacing:.2px; }
.scanl-title small{ display:block; margin-top:2px; font-size:12px; color:rgba(255,255,255,.6); }
.scanl-iconbtn{
  width:42px; height:42px; border-radius:12px; font-size:18px; cursor:pointer;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#fff;
}
.scanl-iconbtn:hover{ background:rgba(255,255,255,.13); }

/* ---------- Escenario ---------- */
.scanl-main{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width:900px){ .scanl-main{ grid-template-columns:1fr; } }
.scanl-left{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.scanl-right{ min-width:0; }

/* ---------- Radar "escuchando" ---------- */
.scanl-radar{ position:relative; width:220px; height:220px; margin:2px auto 0; display:grid; place-items:center; }
.scanl-ring{
  position:absolute; inset:0; border-radius:50%; opacity:0;
  border:2px solid rgba(76,124,255,.65);
  animation:scanl-ping 2.7s cubic-bezier(.2,.6,.3,1) infinite;
}
.scanl-ring:nth-child(2){ animation-delay:.9s; }
.scanl-ring:nth-child(3){ animation-delay:1.8s; }
@keyframes scanl-ping{
  0%{ transform:scale(.46); opacity:.85; }
  100%{ transform:scale(1.16); opacity:0; }
}
.scanl-core{
  position:relative; width:124px; height:124px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(160deg,#3b6cf0,#17399c);
  box-shadow:0 0 0 7px rgba(47,95,224,.18), 0 18px 54px rgba(47,95,224,.5);
}
.scanl-core svg{ width:70px; height:70px; position:relative; z-index:1; }
.scanl-laser{
  position:absolute; left:13%; right:13%; top:28%; height:3px; border-radius:3px; z-index:2;
  background:#ff3b3b; box-shadow:0 0 12px 3px rgba(255,59,59,.7);
  animation:scanl-sweep 1.35s ease-in-out infinite alternate;
}
@keyframes scanl-sweep{ from{ top:27%; } to{ top:71%; } }

/* Destello al leer: verde = cargado, rojo = no existe / error */
.scanl-burst{
  position:absolute; inset:0; border-radius:50%; pointer-events:none; opacity:0;
  border:5px solid transparent;
}
.scanl-radar.is-ok .scanl-burst{ border-color:#22c55e; animation:scanl-burst .75s ease-out; }
.scanl-radar.is-bad .scanl-burst{ border-color:#ef4444; animation:scanl-burst .75s ease-out; }
.scanl-radar.is-undo .scanl-burst{ border-color:#f59e0b; animation:scanl-burst .75s ease-out; }
@keyframes scanl-burst{
  0%{ transform:scale(.52); opacity:1; }
  100%{ transform:scale(1.3); opacity:0; }
}
.scanl-radar.is-ok .scanl-core{ animation:scanl-core-ok .6s ease-out; }
.scanl-radar.is-bad .scanl-core{ animation:scanl-core-bad .6s ease-out; }
@keyframes scanl-core-ok{ 0%{ box-shadow:0 0 0 7px rgba(34,197,94,.55), 0 0 70px rgba(34,197,94,.85); } 100%{ box-shadow:0 0 0 7px rgba(47,95,224,.18), 0 18px 54px rgba(47,95,224,.5); } }
@keyframes scanl-core-bad{ 0%{ box-shadow:0 0 0 7px rgba(239,68,68,.55), 0 0 70px rgba(239,68,68,.85); } 100%{ box-shadow:0 0 0 7px rgba(47,95,224,.18), 0 18px 54px rgba(47,95,224,.5); } }

/* Sin conexión / sin autorización: el radar se "apaga" en ámbar */
.scanl.is-offline .scanl-ring, .scanl.is-auth .scanl-ring{ border-color:rgba(245,158,11,.7); animation-duration:5.4s; }
.scanl.is-offline .scanl-laser, .scanl.is-auth .scanl-laser{ animation-play-state:paused; background:#f59e0b; box-shadow:0 0 12px 3px rgba(245,158,11,.6); }
.scanl.is-offline .scanl-core, .scanl.is-auth .scanl-core{ background:linear-gradient(160deg,#c98a1a,#8a5a0a); box-shadow:0 0 0 7px rgba(245,158,11,.2), 0 18px 54px rgba(245,158,11,.35); }

/* ---------- Estado ---------- */
.scanl-status{ display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; }
.scanl-status b{ font-size:21px; font-weight:900; letter-spacing:.2px; }
.scanl-dot{
  flex:0 0 auto; width:12px; height:12px; border-radius:50%; background:#22c55e;
  animation:scanl-dot 1.5s ease-out infinite;
}
@keyframes scanl-dot{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.75); }
  100%{ box-shadow:0 0 0 14px rgba(34,197,94,0); }
}
.scanl.is-offline .scanl-dot, .scanl.is-auth .scanl-dot{ background:#f59e0b; animation:none; }
.scanl-ellipsis::after{ content:""; animation:scanl-ellipsis 1.6s steps(1,end) infinite; }
@keyframes scanl-ellipsis{ 0%{ content:""; } 25%{ content:"."; } 50%{ content:".."; } 75%{ content:"..."; } }
.scanl-hint{ text-align:center; font-size:13px; color:rgba(255,255,255,.62); margin-top:-6px; }

.scanl-banner{
  border-radius:12px; padding:10px 14px; font-size:13px; font-weight:800; line-height:1.4;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; text-align:center;
  background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.5); color:#fcd34d;
}
.scanl-banner.is-err{ background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.5); color:#fca5a5; }
.scanl-banner .btn{ padding:6px 12px; }

/* ---------- Lectura en curso (aquí "escribe" el lector) ---------- */
.scanl-reading label{ display:block; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:5px; }
.scanl-reading input{
  width:100%; padding:12px 14px; border-radius:12px; font-size:20px; font-weight:800; letter-spacing:1.5px;
  font-family:ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; text-align:center;
  background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.28); color:#fff; outline:none;
}
.scanl-reading input::placeholder{ color:rgba(255,255,255,.28); letter-spacing:.4px; font-size:14px; font-weight:600; }
.scanl-reading input:focus{ border-style:solid; border-color:rgba(76,124,255,.9); box-shadow:0 0 0 4px rgba(47,95,224,.28); }

/* ---------- Última lectura ---------- */
.scanl-last{
  border-radius:16px; padding:14px 16px; min-height:104px; display:flex; flex-direction:column; justify-content:center; gap:4px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
}
.scanl-last.is-ok{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.6); }
.scanl-last.is-bad{ background:rgba(239,68,68,.13); border-color:rgba(239,68,68,.6); }
.scanl-last.is-undo{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.55); }
.scanl-last.is-pending{ border-style:dashed; }
.scanl-last.pop{ animation:scanl-pop .38s ease-out; }
@keyframes scanl-pop{ 0%{ transform:scale(.97); } 55%{ transform:scale(1.02); } 100%{ transform:scale(1); } }
.scanl-last-empty{ color:rgba(255,255,255,.45); font-size:14px; text-align:center; }
.scanl-last-row{ display:flex; align-items:center; gap:12px; }
.scanl-last-name{ flex:1; min-width:0; font-size:20px; font-weight:900; line-height:1.2; overflow-wrap:anywhere; }
.scanl-last-qty{
  flex:0 0 auto; padding:4px 12px; border-radius:999px; font-size:20px; font-weight:900;
  background:rgba(255,255,255,.12);
}
.scanl-last.is-ok .scanl-last-qty{ background:#16a34a; }
.scanl-last.is-undo .scanl-last-qty{ background:#d97706; }
.scanl-last.is-bad .scanl-last-qty{ background:#dc2626; }
.scanl-last-meta{ font-size:13px; color:rgba(255,255,255,.7); display:flex; gap:14px; flex-wrap:wrap; }
.scanl-last-meta b{ color:#fff; }

/* ---------- Contadores ---------- */
.scanl-counters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.scanl-stat{ border-radius:14px; padding:10px 12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); text-align:center; }
.scanl-stat b{ display:block; font-size:26px; font-weight:900; line-height:1.1; }
.scanl-stat span{ display:block; margin-top:3px; font-size:11px; font-weight:700; letter-spacing:.3px; color:rgba(255,255,255,.6); }
.scanl-stat.warn b{ color:#fcd34d; }
.scanl-stat.bad b{ color:#fca5a5; }
.scanl-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.scanl-actions .btn{ flex:1; min-width:150px; }
.scanl-actions .btn:disabled{ opacity:.38; cursor:not-allowed; }

/* ---------- Últimas lecturas ---------- */
.scanl-right h4{ margin:0 0 8px; font-size:13px; letter-spacing:.4px; text-transform:uppercase; color:rgba(255,255,255,.6); font-weight:800; }
.scanl-recent{
  border-radius:16px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
  max-height:520px; overflow:auto;
}
.scanl-recent-empty{ padding:22px 14px; text-align:center; color:rgba(255,255,255,.42); font-size:13px; }
.scanl-rrow{
  display:grid; grid-template-columns:66px minmax(0,1fr) auto auto; gap:10px; align-items:center;
  padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.07); font-size:13px;
}
.scanl-rrow:last-child{ border-bottom:none; }
.scanl-rrow time{ color:rgba(255,255,255,.45); font-size:11.5px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.scanl-rname{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800; }
.scanl-rname small{ display:block; font-weight:600; font-size:11px; color:rgba(255,255,255,.5); }
.scanl-rqty{ font-weight:900; }
.scanl-rstock{ min-width:64px; text-align:right; color:rgba(255,255,255,.7); font-weight:700; }
.scanl-rrow.is-ok .scanl-rqty{ color:#4ade80; }
.scanl-rrow.is-pending .scanl-rqty{ color:rgba(255,255,255,.55); }
.scanl-rrow.is-pending .scanl-rstock{ color:rgba(255,255,255,.45); }
.scanl-rrow.is-notfound, .scanl-rrow.is-error{ background:rgba(239,68,68,.09); }
.scanl-rrow.is-notfound .scanl-rqty, .scanl-rrow.is-error .scanl-rqty{ color:#f87171; }
.scanl-rrow.is-undone .scanl-rname{ text-decoration:line-through; color:rgba(255,255,255,.4); }
.scanl-rrow.is-undone .scanl-rqty{ color:#fbbf24; }
.scanl-rrow.is-undo .scanl-rqty{ color:#fbbf24; }

/* ---------- Resumen final ---------- */
.scanl-summary{ display:flex; flex-direction:column; gap:14px; max-width:760px; width:100%; margin:6px auto 0; }
.scanl-summary h3{ margin:0; font-size:22px; font-weight:900; text-align:center; }
.scanl-sum-table{ width:100%; border-collapse:collapse; }
.scanl-sum-table th, .scanl-sum-table td{ padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.09); font-size:13.5px; text-align:left; }
.scanl-sum-table th{ font-size:11px; letter-spacing:.4px; text-transform:uppercase; color:rgba(255,255,255,.55); }
.scanl-sum-table td:last-child, .scanl-sum-table th:last-child, .scanl-sum-table td:nth-child(3), .scanl-sum-table th:nth-child(3){ text-align:right; }
.scanl-sum-box{ border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); padding:10px 12px; }
.scanl-sum-box.bad{ border-color:rgba(239,68,68,.5); background:rgba(239,68,68,.08); }
.scanl-sum-box h5{ margin:0 0 6px; font-size:13px; font-weight:900; }
.scanl-sum-box p{ margin:0; font-size:13px; color:rgba(255,255,255,.75); line-height:1.5; overflow-wrap:anywhere; }

/* ---------- Tarjeta de Ajustes ---------- */
#scanPwdStatus{ font-weight:800; padding:10px 0; }

/* Menos movimiento si el sistema lo pide */
@media (prefers-reduced-motion: reduce){
  .scanl-ring, .scanl-laser, .scanl-dot{ animation:none; }
  .scanl-ring{ opacity:.35; transform:scale(.8); }
  .scanl-ring:nth-child(3){ display:none; }
  .scanl-last.pop, .scanl-radar.is-ok .scanl-core, .scanl-radar.is-bad .scanl-core{ animation:none; }
}