/* ── Panel de escaneo ──────────────────────────────────────────────────
   Pensado para telefono en vertical y para una mano que ademas esta
   sujetando botellas: nada por debajo de 44px de alto.

   z-index 99999, justo por DEBAJO del overlay de entrada (999999). Si
   la sesion caduca mientras alguien cuenta, la pantalla de login tiene
   que quedar por encima y no debajo de la camara. */

.sc-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  flex-direction: column;
  background: #0b1220;
  color: #f1f5f9;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
.sc-overlay.on{ display: flex; }

/* Sin esto, arrastrar sobre el visor desplaza la pagina de detras */
body.sc-locked{ overflow: hidden !important; }

.sc-top{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  flex-shrink: 0;
}
.sc-x{
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #f1f5f9;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.sc-lab{
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #f59e0b; font-weight: 800;
}
.sc-n{
  margin-left: auto;
  font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ── Visor ── */
.sc-stage{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #000;
  overflow: hidden;
}
.sc-stage video{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.sc-guide{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
/* Esta zona SI es la que se decodifica: el recorte del js usa estas
   mismas fracciones. Si se cambian aqui, hay que cambiar CROP_W y
   CROP_H en src/scan-count.js o se leeria una zona distinta de la que
   la persona apunta.

   Casi cuadrado y no una banda ancha, porque muchas botellas llevan el
   codigo en vertical y una abierta no se puede voltear. En una banda
   baja, un codigo vertical no cabe entero dentro del recorte. */
.sc-guide > i{
  display: block;
  width: 80%; height: 52%;
  border: 2px solid #38bdf8;
  border-radius: 12px;
  box-shadow: 0 0 0 2000px rgba(0,0,0,.34);
}


/* ── Panel inferior ── */
/* .sc-panel se sustituyo por .sc-sheet, que es lo mismo pero puede
   subirse para enseñar lo que falta. Se deja la regla porque el panel de
   asignacion todavia la usa de contenedor. */
.sc-panel{
  flex-shrink: 0;
  padding: 12px 14px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.sc-diag{ font-size: 12px; color: #94a3b8; margin-bottom: 10px; line-height: 1.5; }
.sc-diag .sc-ok{ color: #22c55e; }
.sc-diag .sc-bad{ color: #ef4444; font-weight: 700; }

/* ── La marca de lo ultimo leido ───────────────────────────────────────
   Flota sobre la camara, no debajo. Mientras escaneas estas mirando el
   visor: poner la confirmacion fuera de el obliga a bajar la vista para
   algo que dura dos segundos.

   Y se va sola. Antes se quedaba puesta hasta la siguiente lectura, asi
   que a mitad de conteo lo que se leia ahi podia ser de tres botellas
   atras y no habia forma de saberlo. */
.sc-hit{
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.sc-hit.on{ opacity: 1; transform: none; pointer-events: auto; }
.sc-hit:empty{ display: none; }

.sc-found, .sc-new{
  border-radius: 12px;
  padding: 11px 13px;
  /* Opaco de verdad: esto va encima de video, y un fondo translucido
     sobre imagen en movimiento es ilegible. */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.sc-found{ background: rgba(6,42,24,.82); border: 1px solid rgba(34,197,94,.55); }
.sc-new  { background: rgba(48,30,4,.85);  border: 1px solid rgba(245,158,11,.55); }
.sc-code{
  font-size: 19px; font-weight: 800; letter-spacing: .04em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sc-item{ font-size: 13px; font-weight: 700; margin-top: 3px; }
.sc-meta{ font-size: 11px; color: #94a3b8; margin-top: 2px; }






/* Los dos botones en fila. Apilados a lo ancho completo comian la
   altura del visor, que es lo unico que de verdad importa aqui. */
.sc-btns{ display: flex; gap: 8px; }
.sc-ghost{
  flex: 1;
  min-width: 0;
  height: 44px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.20);
  color: #f1f5f9;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.sc-note{ font-size: 11px; color: #94a3b8; text-align: center; margin-top: 8px; }

/* Destello al leer. En iOS no hay vibracion posible desde la web, asi
   que el aviso es este mas el pitido. */
.sc-stage::after{
  content: "";
  position: absolute; inset: 0;
  background: #22c55e;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.sc-stage.sc-flash::after{ opacity: .35; transition: none; }

/* ── Panel de "¿qué artículo es?" ──────────────────────────────────────
   Tapa la pantalla entera mientras se elige. La camara se para debajo:
   no tiene sentido seguir decodificando mientras alguien busca en una
   lista, y ademas asi no se cuela otra lectura por encima. */
.sc-assign{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  background: #0b1220;
  padding: calc(12px + env(safe-area-inset-top)) 14px 14px;
}
.sc-assign.on{ display: flex; }

.sc-assign-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.sc-assign-t{ font-size: 17px; font-weight: 800; }

/* El código en su propia insignia. Antes iba debajo del título, en gris
   pequeño, y era el dato que confirma que estás asignando lo correcto. */
.sc-assign-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #38bdf8;
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.30);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 12px;
  text-align: center;
}

.sc-search{ position: relative; margin-bottom: 12px; }
.sc-search > i{
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: #94a3b8;
  pointer-events: none;
}
.sc-assign input{
  width: 100%;
  height: 50px;
  padding: 0 13px 0 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.20);
  color: #f1f5f9;
  font-family: inherit;
  /* 16px exactos: por debajo, Safari acerca la pantalla al enfocar y no
     vuelve solo. En mitad de un conteo eso es insufrible. */
  font-size: 16px;
  font-weight: 600;
}

.sc-picks{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sc-picks-head{
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 2px 2px 8px;
}
.sc-err{
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  padding: 0 4px 12px;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sc-pick{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  /* 56px de alto: se elige con el pulgar y con una botella en la otra
     mano. Una lista compacta aqui provoca asignaciones equivocadas, que
     es el error mas caro porque queda guardado. */
  min-height: 56px;
  padding: 10px 13px;
  margin-bottom: 7px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: #f1f5f9;
  font-family: inherit;
  cursor: pointer;
}
.sc-pick:active{ background: rgba(56,189,248,.16); border-color: rgba(56,189,248,.45); }
.sc-pick-name{
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.sc-pick-meta{
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.sc-pick-meta em{
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  color: #94a3b8;
  background: rgba(255,255,255,.07);
  border-radius: 5px;
  padding: 3px 6px;
}
/* Los que ya tienen código aprendido llevan la marca y van al final de
   la lista: si escaneas algo desconocido, casi seguro no es uno de esos. */
.sc-pick-meta > i{ font-size: 15px; color: #38bdf8; opacity: .55; }

.sc-empty{ font-size: 13px; color: #94a3b8; text-align: center; padding: 20px 0; }
.sc-empty.sc-bad{ color: #ef4444; font-weight: 700; }

/* En horizontal la camara se lleva casi todo y la hoja se aprieta */
@media (max-height: 520px) {
  .sc-panel{ padding: 8px 12px 10px; }
  .sc-sheet{ padding: 0 12px 10px; max-height: 54vh; }
  .sc-grab{ height: 20px; }
  .sc-prog b{ font-size: 21px; }
}

/* ── Modo claro ─────────────────────────────────────────────────────────
   El visor de la cámara se queda oscuro siempre: es vídeo, y un marco
   claro alrededor solo resta contraste a lo que hay que leer. Lo que sí
   cambia es todo lo demás. */
body.light .sc-assign{ background: #eef2f8; }
body.light .sc-assign-t{ color: #0f172a; }
body.light .sc-assign input{
  background: #ffffff;
  border-color: rgba(15,23,42,.14);
  color: #0f172a;
}
body.light .sc-assign-code{
  background: rgba(2,132,199,.10);
  border-color: rgba(2,132,199,.30);
  color: #0369a1;
}
body.light .sc-pick{
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
  color: #0f172a;
}
body.light .sc-pick-meta em{ background: rgba(15,23,42,.06); color: #475569; }
body.light .sc-picks-head,
body.light .sc-empty,
body.light .sc-err{ color: #475569; }

/* ── Progreso y hoja ───────────────────────────────────────────────────
   La cabecera decia "84 counted", sin denominador. En un inventario de
   trescientos articulos ese numero no dice si vas por la mitad o por el
   final, que es lo unico que quiere saber quien esta contando. Ahora
   lleva el total y una barra. */
.sc-bar{
  flex-shrink: 0;
  height: 4px;
  background: rgba(255,255,255,.10);
}
.sc-bar i{
  display: block; height: 100%; width: 0;
  background: #38bdf8;
  transition: width .25s ease;
}

/* La hoja. Abajo deja ver la camara entera; subida tapa el visor y
   enseña lo que falta. La camara sigue encendida detras a proposito: si
   se apagara al consultar la lista, cada vuelta costaria el arranque de
   la camara, que en un telefono es casi un segundo. */
.sc-sheet{
  flex-shrink: 0;
  padding: 0 14px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: #0f1729;
  border-radius: 16px 16px 0 0;
  max-height: 42vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: max-height .22s ease;
}
.sc-overlay.sheet-up .sc-sheet{ max-height: 78vh; }

/* Area de agarre generosa: se pulsa con el pulgar de la mano que ademas
   sujeta una botella. La barrita que se ve es pequeña, la zona que
   responde no. */
.sc-grab{
  display: flex; align-items: center; justify-content: center;
  height: 26px; margin: 0 -14px; cursor: pointer;
}
.sc-grab i{
  display: block; width: 36px; height: 4px; border-radius: 9px;
  background: rgba(255,255,255,.28);
  transition: background .15s ease;
}
.sc-grab:active i{ background: rgba(255,255,255,.5); }

.sc-sheet-head{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.sc-prog{ display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sc-prog b{ font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-prog span{ font-size: 12px; color: #94a3b8; }

.sc-pause{
  margin-left: auto; flex-shrink: 0;
  height: 36px; padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  color: #e2e8f0;
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}

/* Lo que falta. Solo con la hoja subida: mientras se escanea estorba, y
   con la hoja abajo no cabria de todas formas. */
.sc-left{ display: none; margin: 4px 0 12px; }
.sc-overlay.sheet-up .sc-left{ display: block; }

/* La linterna y la busqueda por nombre SE QUEDAN con la hoja abajo. Las
   escondi junto al diagnostico y fue un error de criterio: no son lo
   mismo. "Find by name" es la salida cuando una botella no tiene codigo
   —etiqueta rota, botella rellenable, destileria pequeña— y ese caso
   aparece escaneando, no consultando. Sin ella ahi, el conteo se para en
   seco y hay que descubrir que la respuesta estaba subiendo una hoja.

   El diagnostico si se esconde: "Native reader · camera 1280x720" es del
   banco de pruebas y no le dice nada a quien cuenta. */
.sc-sheet .sc-diag{ display: none; }
.sc-overlay.sheet-up .sc-sheet .sc-diag{ display: block; }
.sc-left-cat{
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #64748b;
  margin: 12px 0 4px;
}
.sc-left-row{
  font-size: 13px; padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sc-left-more, .sc-left-done{
  font-size: 12px; color: #94a3b8; padding: 10px 0 0;
}
.sc-left-done{ color: #22c55e; font-weight: 700; }

/* El buscador es lo primero que hay que tocar, asi que se ve como tal.
   En iPhone el teclado no puede subir solo cuando este panel lo abre un
   escaneo —Safari solo lo permite dentro de un gesto— y lo unico que
   queda es que el campo no admita duda sobre donde hay que pulsar. */
.sc-assign .sc-search{ margin-bottom: 14px; }
.sc-assign input{
  border-color: rgba(56,189,248,.45);
  background: rgba(56,189,248,.07);
}
.sc-assign input:focus{
  border-color: rgba(56,189,248,.85);
  box-shadow: 0 0 0 3px rgba(56,189,248,.18);
  outline: none;
}