/* ── Panel del artículo ────────────────────────────────────────────────
   Se abre encima del escáner, así que va por encima de .sc-overlay
   (99999) y por debajo de la pantalla de entrada (999999): si la sesión
   caduca mientras alguien cuenta, el login manda.

   Todo dimensionado para una mano. La otra sostiene una botella. */

/* ── La pila de capas del conteo ───────────────────────────────────────
   escaner 99999 · cierre 100001 · articulo 100003 · codigo 100004

   El articulo va POR ENCIMA del cierre y no por debajo, aunque el cierre
   se abra despues. El motivo es que el aviso de "este conteo no cuadra"
   abre el panel del articulo desde dentro de la pantalla de cierre: con
   el articulo en 100000 se pintaba debajo y el boton no hacia nada
   visible. Mismo fallo que tuvo el selector de siluetas. */
.cp-panel{
  position: fixed;
  inset: 0;
  z-index: 100003;
  display: none;
  flex-direction: column;
  background: #0b1220;
  color: #f1f5f9;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
.cp-panel.on{ display: flex; }

.cp-head{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  flex-shrink: 0;
}
.cp-title{ min-width: 0; }
.cp-name{
  font-size: 17px; font-weight: 800; line-height: 1.2;
  /* Dos líneas y luego corta. Un nombre larguísimo no puede empujar el
     deslizador fuera de la pantalla. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cp-sub{ font-size: 12px; color: #94a3b8; margin-top: 3px; }
.cp-again{ color: #f59e0b; }

.cp-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
}
.cp-block{ margin-bottom: 18px; }
.cp-label{
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: #94a3b8; font-weight: 800; margin-bottom: 8px;
}

/* ── Selladas ── */
.cp-step{ display: flex; align-items: center; gap: 12px; }
.cp-step button{
  /* 64px. Se toca con el pulgar, a veces con guantes de bodega y con
     prisa. Un botón pequeño aquí se traduce en conteos equivocados. */
  width: 64px; height: 64px;
  flex-shrink: 0;
  border-radius: 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  color: #f1f5f9;
  font-family: inherit; font-size: 28px; font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.cp-step button:active{ background: rgba(56,189,248,.20); }
.cp-num{
  flex: 1;
  text-align: center;
  font-size: 40px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ── Abiertas ── */
.cp-open{ margin-bottom: 10px; }
.cp-stage{
  position: relative;
  height: 230px;
  touch-action: none;        /* sin esto iOS desplaza la página al arrastrar */
  user-select: none;
  -webkit-user-select: none;
}
.cp-stage svg{ display: block; width: 100%; height: 100%; }

.cp-line{
  position: absolute; left: 0; right: 0;
  height: 44px; margin-top: -22px;
  display: flex; align-items: center;
  pointer-events: none;
}
.cp-line > span{
  flex: 1; height: 3px; background: #f1f5f9; border-radius: 2px;
}
.cp-line > i{
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 54px; height: 26px; border-radius: 13px;
  background: #0f172a; border: 1px solid rgba(255,255,255,.30);
}

.cp-read{ text-align: center; margin-top: 4px; }
.cp-read b{ font-size: 34px; font-weight: 800; line-height: 1; display: block; }
.cp-read small{ font-size: 12px; color: #94a3b8; display: block; margin-top: 4px; }

.cp-none{
  font-size: 13px; color: #94a3b8; text-align: center;
  padding: 26px 10px; line-height: 1.5;
}

/* .cp-openrow era la lista de una fila por botella abierta. La
   sustituyen las pastillas numeradas (.cp-pager, mas abajo): crecia
   hacia abajo y ese alto salia de la botella. */
.cp-opens{ margin: 6px 0 0; }

/* .cp-add se sustituyo por la pastilla "+ another open" en .cp-chips.
   Se deja por si algun estilo heredado la busca. */
.cp-add{
  width: 100%; height: 46px; margin-top: 10px;
  border-radius: 12px;
  background: transparent;
  border: 1px dashed rgba(56,189,248,.45);
  color: #38bdf8;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
}

/* Las selladas viven fuera del área que hace scroll, pegadas al pie.
   Estaban arriba del todo, que es justo donde el pulgar no llega
   sujetando el teléfono con una mano. */
.cp-sealed{
  flex-shrink: 0;
  padding: 10px 14px 0;
}
.cp-sealed .cp-label{ margin-bottom: 6px; }

/* ── Pie ── */
.cp-foot{
  flex-shrink: 0;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.09);
}
.cp-total{
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.cp-total span{ font-size: 13px; color: #94a3b8; }
.cp-total b{ font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }

.cp-next{
  width: 100%; height: 58px;
  border-radius: 14px; border: none;
  background: #38bdf8; color: #04263a;
  font-family: inherit; font-size: 18px; font-weight: 800;
  cursor: pointer;
}
.cp-next:active{ background: #0ea5e9; }

/* Con el teclado abierto o en horizontal, la botella se lleva demasiado */
@media (max-height: 620px) {
  .cp-stage{ height: 165px; }
  .cp-read b{ font-size: 27px; }
  .cp-step button{ width: 56px; height: 56px; }
  .cp-num{ font-size: 32px; }
}

/* ── Cerrar el conteo ──────────────────────────────────────────────────
   Encima de todo lo del conteo. Es la pantalla que escribe, así que
   ninguna otra debe poder taparla mientras se decide. */
.cf-panel{
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: none;
  flex-direction: column;
  background: #0b1220;
  color: #f1f5f9;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
.cf-panel.on{ display: flex; }

.cf-head{
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  flex-shrink: 0;
}
.cf-title{ font-size: 16px; font-weight: 800; }

.cf-body{
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 14px 14px;
}

.cf-count{ font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.cf-count b{ font-size: 30px; font-weight: 800; }

.cf-warn{
  background: rgba(245,158,11,.14);
  border: 1px solid rgba(245,158,11,.40);
  color: #fbbf24;
  border-radius: 12px; padding: 12px 13px;
  font-size: 13px; line-height: 1.5; margin-bottom: 16px;
}
.cf-ok{
  background: rgba(34,197,94,.13);
  border: 1px solid rgba(34,197,94,.38);
  color: #4ade80;
  border-radius: 12px; padding: 12px 13px;
  font-size: 13px; margin-bottom: 16px;
}
.cf-err{
  font-size: 11px; color: #94a3b8; margin-bottom: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
}
.cf-empty{ font-size: 15px; color: #94a3b8; text-align: center; padding: 30px 0; }

.cf-label{
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: #94a3b8; font-weight: 800; margin-bottom: 8px;
}

/* La opción marcada de salida es la que NO destruye nada. Quien pulsa
   sin leer se lleva la segura. */
.cf-opt{
  display: block; width: 100%; text-align: left;
  padding: 13px; margin-bottom: 8px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  color: #f1f5f9; font-family: inherit; cursor: pointer;
}
.cf-opt.on{ border: 2px solid #38bdf8; background: rgba(56,189,248,.10); }
.cf-opt b{ display: block; font-size: 15px; font-weight: 700; }
.cf-opt small{ display: block; font-size: 12px; color: #94a3b8; margin-top: 3px; }

.cf-ghost{
  width: 100%; height: 48px; margin: 14px 0 8px;
  border-radius: 12px; background: transparent;
  border: 1px solid rgba(255,255,255,.20);
  color: #f1f5f9; font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer;
}
.cf-go{
  width: 100%; height: 54px;
  border-radius: 13px; border: none;
  background: #38bdf8; color: #04263a;
  font-family: inherit; font-size: 16px; font-weight: 800;
  cursor: pointer;
}
.cf-note{ font-size: 11px; color: #94a3b8; text-align: center; margin-top: 10px; line-height: 1.5; }
.cf-status{ font-size: 15px; color: #94a3b8; text-align: center; padding: 40px 0; }
.cf-done{ font-size: 54px; color: #22c55e; text-align: center; margin-bottom: 6px; }

/* Botón de finalizar, en la pantalla de escaneo */
.sc-finish{
  width: 100%; height: 48px; margin-top: 8px;
  border-radius: 12px; border: none;
  background: rgba(56,189,248,.16);
  color: #38bdf8;
  font-family: inherit; font-size: 15px; font-weight: 800;
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════
   Estilo de la app
   ══════════════════════════════════════════════════════════════════════

   Estas pantallas nacieron con fondo plano y sin modo claro. La app
   tiene 223 reglas body.light y estas tenían cero, así que en claro se
   veían como una aplicación distinta metida dentro de la otra.

   Los bloques pasan a ser tarjetas con borde, como .card. El fondo del
   panel se queda opaco a propósito: son pantallas de trabajo a una mano
   y el cristal translúcido sobre una cámara resta legibilidad. */

.cp-block,
.cp-sealed{
  background: rgba(17,24,39,.86);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px;
  margin: 0 0 12px;
}
.cp-sealed{ margin: 0 14px 12px; }
.cp-body{ padding: 14px 14px 2px; }

/* El pie deja de ser una línea suelta y pasa a leerse como un bloque */
.cp-foot{
  background: rgba(17,24,39,.94);
  border-top: 1px solid rgba(255,255,255,.08);
}

.cp-hint{
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(245,158,11,.13);
  border: 1px solid rgba(245,158,11,.34);
  color: #fbbf24;
  font-size: 11px;
  line-height: 1.5;
}
.cp-hint b{ font-weight: 800; }

/* ── Modo claro ───────────────────────────────────────────────────── */
body.light .cp-panel,
body.light .cf-panel{ background: #eef2f8; color: #0f172a; }

body.light .cp-block,
body.light .cp-sealed,
body.light .cp-foot{
  background: rgba(255,255,255,.96);
  border-color: rgba(15,23,42,.08);
}
body.light .cp-head,
body.light .cf-head{ border-bottom-color: rgba(15,23,42,.10); }
body.light .cp-foot{ border-top-color: rgba(15,23,42,.10); }

body.light .cp-sub,
body.light .cp-label,
body.light .cp-read small,
body.light .cp-total span,
body.light .cf-note,
body.light .cf-label,
body.light .cf-status,
body.light .cf-empty,
body.light .cf-err{ color: #475569; }

body.light .cp-step button{
  background: #e8eef7;
  border-color: rgba(15,23,42,.12);
  color: #0f172a;
}
body.light .cp-line > span{ background: #0f172a; }
body.light .cp-line > i{ background: #ffffff; border-color: rgba(15,23,42,.25); }

body.light .cf-opt{
  background: #ffffff;
  border-color: rgba(15,23,42,.12);
  color: #0f172a;
}
body.light .cf-ghost{ background: #e8eef7; border-color: rgba(15,23,42,.12); color: #0f172a; }
body.light .sc-finish{ background: rgba(2,132,199,.12); color: #0284c7; }

/* En claro, el azul de la app es más oscuro para que el texto blanco
   encima siga leyéndose. */
body.light .cp-next,
body.light .cf-go{ background: #0284c7; color: #ffffff; }

/* Los avisos, con el contraste que pedía la app y no el de un tema
   oscuro sobre fondo claro. */
body.light .cf-warn{
  background: #fef3c7; border-color: #f59e0b; color: #78350f;
}
body.light .cf-ok{
  background: #dcfce7; border-color: #22c55e; color: #14532d;
}
body.light .cp-hint{
  background: #fef3c7; border-color: #f59e0b; color: #78350f;
}

/* ── Colores de la botella ─────────────────────────────────────────────
   Aquí y no dentro del SVG. Escritos en el marcado que genera el
   JavaScript, el modo claro no puede alcanzarlos: el contorno era blanco
   translúcido y sobre fondo claro sencillamente no existía. */
.cp-glass{
  fill: rgba(255,255,255,.05);
  stroke: rgba(255,255,255,.34);
}
.cp-liquid{ fill: #38bdf8; opacity: .38; }
.cp-fullline{ stroke: rgba(255,255,255,.30); }

body.light .cp-glass{
  /* Más contraste que en oscuro, no el mismo valor invertido: sobre
     blanco hace falta más trazo para que la silueta se lea. */
  fill: rgba(15,23,42,.035);
  stroke: rgba(15,23,42,.55);
}
body.light .cp-liquid{ fill: #0284c7; opacity: .30; }
body.light .cp-fullline{ stroke: rgba(15,23,42,.35); }

.cp-trace{
  width: 100%; height: 44px; margin-top: 10px;
  border-radius: 12px; background: transparent;
  border: 1px dashed rgba(255,255,255,.22);
  color: #94a3b8;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
body.light .cp-trace{ border-color: rgba(15,23,42,.20); color: #475569; }

/* ── Los que faltan, en la pantalla de cierre ──────────────────────────
   Cuantas faltaban ya se decia. Cuales no, y es el dato que convierte el
   aviso en algo que se puede hacer: "faltan 177" solo asusta; "faltan
   doce de Vodka" manda a alguien a un estante concreto. */
.cf-toggle{
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: #cbd5e1;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.cf-toggle i{ transition: transform .18s ease; font-size: 16px; }
.cf-toggle.on i{ transform: rotate(180deg); }

.cf-missing{ margin-bottom: 14px; }
.cf-missing input{
  width: 100%; height: 42px; padding: 0 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #f1f5f9; font-size: 15px;
  margin-bottom: 8px;
}
.cf-missing input::placeholder{ color: #64748b; }

/* Tope de altura con scroll propio: sin esto, ciento setenta filas
   empujan los botones de cerrar el conteo fuera de la pantalla, y esos
   son los que no pueden quedar fuera de alcance. */
#cfMissingList{ max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }

.cf-cat{
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #64748b;
  margin: 12px 0 2px;
}
.cf-miss-row{
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
}
.cf-miss-row small{ margin-left: auto; color: #94a3b8; font-size: 11px; flex-shrink: 0; }
.cf-empty{ font-size: 13px; color: #94a3b8; padding: 16px 0; text-align: center; }

body.light .cf-toggle{ background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.12); color: #334155; }
body.light .cf-missing input{ background: #fff; border-color: rgba(15,23,42,.14); color: #0f172a; }
body.light .cf-miss-row{ border-color: rgba(15,23,42,.08); }

/* ── Barra de conteo en curso ──────────────────────────────────────────
   Va en la pantalla de Inventory, encima de los controles, porque es
   donde un conteo empieza y donde termina. Vacia no ocupa nada: el
   contenedor solo existe cuando hay una sesion a medias. */
.cr-bar{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(56,189,248,.08);
  border: 1px solid rgba(56,189,248,.28);
}
/* Un punto que late. Es la unica animacion de la barra y esta ahi por un
   motivo concreto: distinguir de un vistazo "hay algo vivo aqui" de una
   tarjeta informativa mas, que es como se leia sin el. */
.cr-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #38bdf8; flex-shrink: 0;
  animation: cr-pulse 2s ease-in-out infinite;
}
@keyframes cr-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@media (prefers-reduced-motion: reduce){ .cr-dot{ animation: none } }

.cr-txt{ min-width: 0; flex: 1; }
.cr-txt b{ display: block; font-size: 13px; font-weight: 800; }
.cr-txt span{ display: block; font-size: 12px; color: var(--sub); }

.cr-prog{
  width: 90px; height: 5px; flex-shrink: 0;
  border-radius: 9px; overflow: hidden;
  background: rgba(255,255,255,.12);
}
.cr-prog i{ display: block; height: 100%; background: #38bdf8; }

.cr-go{
  flex-shrink: 0;
  height: 36px; padding: 0 16px;
  border-radius: 999px;
  background: #0ea5e9; border: none; color: #04283b;
  font-size: 13px; font-weight: 800; cursor: pointer;
}
.cr-drop{
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  color: var(--sub); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cr-drop:hover{ color: #ef4444; border-color: rgba(239,68,68,.45); }

/* En telefono la barra de progreso sobra: el texto ya dice 84 de 261, y
   el espacio hace falta para que Resume no se quede sin sitio. */
@media (max-width: 640px){
  .cr-prog{ display: none; }
  .cr-bar{ gap: 9px; padding: 10px 12px; }
}

body.light .cr-bar{ background: rgba(2,132,199,.07); border-color: rgba(2,132,199,.28); }
body.light .cr-prog{ background: rgba(15,23,42,.10); }
body.light .cr-drop{ border-color: rgba(15,23,42,.14); }

/* ── Avisos antes de cerrar ────────────────────────────────────────────
   Van arriba del todo porque cambian la decision que viene despues: si
   faltan nueve productos de alta rotacion, "poner a cero" deja de ser
   razonable. Ninguno bloquea el cierre — un aviso que se equivoca y
   ademas bloquea se aprende a saltar, y a partir de ahi deja de leerse. */
.cf-ins-load{
  font-size: 12px; color: var(--sub);
  padding: 10px 0 14px;
  display: flex; align-items: center; gap: 7px;
}
.cf-ins-load i{ animation: cf-spin 1s linear infinite; }
@keyframes cf-spin{ to{ transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .cf-ins-load i{ animation: none } }

.cf-ins{ border-radius: 12px; padding: 12px 13px; margin-bottom: 11px; }
.cf-ins-a{ background: rgba(245,158,11,.09); border: 1px solid rgba(245,158,11,.35); }
.cf-ins-b{ background: rgba(239,68,68,.09);  border: 1px solid rgba(239,68,68,.35); }
.cf-ins-t{
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; margin-bottom: 9px;
}
.cf-ins-a .cf-ins-t{ color: #fbbf24; }
.cf-ins-b .cf-ins-t{ color: #f87171; }

.cf-ins-row{
  display: flex; align-items: baseline; gap: 10px;
  width: 100%;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 13px; text-align: left;
  background: none; border-left: none; border-right: none; border-top: none;
  color: inherit;
}
.cf-ins-row small{ margin-left: auto; color: var(--sub); font-size: 11px; flex-shrink: 0; }
.cf-ins-row small b{ color: #f87171; font-weight: 800; }
.cf-ins-btn{ cursor: pointer; }
.cf-ins-btn i{ color: var(--sub); font-size: 15px; flex-shrink: 0; }
.cf-ins-btn:active{ opacity: .6; }

.cf-ins-act{
  width: 100%; margin-top: 9px;
  padding: 9px; border-radius: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #e2e8f0; font-size: 12px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.cf-ins-note{
  font-size: 11px; color: var(--sub); line-height: 1.5;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.08);
}

body.light .cf-ins-a{ background: rgba(245,158,11,.10); border-color: rgba(180,83,9,.35); }
body.light .cf-ins-a .cf-ins-t{ color: #92400e; }
body.light .cf-ins-b{ background: rgba(239,68,68,.08); border-color: rgba(185,28,28,.32); }
body.light .cf-ins-b .cf-ins-t{ color: #991b1b; }
body.light .cf-ins-row{ border-color: rgba(15,23,42,.08); }
body.light .cf-ins-row small b{ color: #b91c1c; }
body.light .cf-ins-act{ background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.12); color: #334155; }

/* ── Y ahora que ───────────────────────────────────────────────────────
   Contar no es el final de nada: se cuenta para decidir que pedir. Esta
   pantalla decia "listo" y te devolvia a donde estabas, y los dos pasos
   siguientes habia que ir a buscarlos a dos sitios distintos. */
.cf-next-t{
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sub);
  margin: 22px 0 8px;
}
.cf-next{
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: inherit; text-align: left; cursor: pointer;
}
.cf-next > i:first-child{ font-size: 20px; color: #38bdf8; flex-shrink: 0; }
.cf-next > i:last-child{ font-size: 16px; color: var(--sub); margin-left: auto; flex-shrink: 0; }
.cf-next span{ min-width: 0; }
.cf-next b{ display: block; font-size: 13px; font-weight: 800; }
.cf-next small{ display: block; font-size: 11px; color: var(--sub); }

/* La primera semana no hay historial, asi que no hay par, no hay
   sugerido y los dos avisos se callan por diseño. Sin decirlo, parece
   que algo esta roto. */
.cf-first{
  font-size: 12px; line-height: 1.55;
  padding: 11px 13px; margin-top: 14px;
  border-radius: 12px;
  background: rgba(56,189,248,.08);
  border: 1px solid rgba(56,189,248,.28);
  color: #bae6fd;
}
.cf-label-plain{ font-weight: 400; color: var(--sub); line-height: 1.55; }

body.light .cf-next{ background: rgba(15,23,42,.03); border-color: rgba(15,23,42,.10); }
body.light .cf-first{ background: rgba(2,132,199,.07); border-color: rgba(2,132,199,.26); color: #075985; }

/* ── La bifurcacion del paso 2 ─────────────────────────────────────────
   Un dialogo y no dos botones permanentes en la cabecera: la pregunta
   solo tiene sentido una vez por semana, y dos botones fijos dejarian
   siempre uno de los dos sin usar ocupando sitio. */
.cyc-pick{ width: min(440px, 100%); }
.cyc-pick h3{ margin: 0 0 14px; font-size: 16px; }
.cyc-pick-opt{
  width: 100%;
  display: flex; align-items: center; gap: 13px;
  padding: 14px; margin-bottom: 9px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  color: inherit; text-align: left; cursor: pointer;
}
.cyc-pick-opt:hover{ border-color: rgba(56,189,248,.5); }
.cyc-pick-opt > i{ font-size: 22px; color: #38bdf8; flex-shrink: 0; }
.cyc-pick-opt b{ display: block; font-size: 14px; font-weight: 800; }
.cyc-pick-opt small{ display: block; font-size: 12px; color: var(--sub); margin-top: 2px; }
.cyc-pick-x{
  width: 100%; margin-top: 4px; padding: 9px;
  border-radius: 10px; background: none; border: none;
  color: var(--sub); font-size: 13px; cursor: pointer;
}
body.light .cyc-pick-opt{ background: rgba(15,23,42,.03); border-color: rgba(15,23,42,.12); }

/* ── Panel del articulo · la botella manda ─────────────────────────────
   Esta pantalla se abre una vez por articulo: 261 veces en un conteo
   completo. Tenia tres etiquetas —"Open bottle", "Sealed bottles",
   "Total"— y a la decima botella esas palabras ya no informan, solo
   ocupan. Ahora la silueta se lleva el alto que sobra. */
.cp-body{ display: flex; flex-direction: column; min-height: 0; }
#cpOpenBlock{ display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cp-open{ flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cp-stage{ flex: 1; min-height: 0; }

/* La cifra, centrada DEBAJO de la botella. Al costado obligaba a mover
   la vista en diagonal justo despues de arrastrar la linea; debajo cae
   donde el ojo ya esta. */
.cp-read{
  text-align: center;
  padding: 8px 0 2px;
}
.cp-read b{
  display: block;
  font-size: 30px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cp-read small{ display: block; font-size: 12px; color: #94a3b8; margin-top: 2px; }

/* Las dos salidas, como pastillas discretas. No son acciones del conteo:
   son "esto no es lo que creia". */
.cp-chips{ display: flex; gap: 6px; justify-content: center; margin: 8px 0 4px; flex-wrap: wrap; }
.cp-chip{
  padding: 6px 13px; border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: #cbd5e1; font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.cp-chip:active{ transform: translateY(1px); }

/* Selladas: dos botones y un numero, centrados, sin caja ni etiqueta.
   La palabra "Sealed" ocupaba una linea entera para decir algo que los
   dos botones ya dicen, y ese alto sale de la botella. */
.cp-sealed{
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin: 0 14px 12px;
  padding: 0;
  background: none;
  border: none;
}

/* El codigo que trajo hasta aqui. Abajo y pequeño: casi nunca hace
   falta, pero cuando hace falta no hay ningun otro sitio donde buscarlo.
   Un codigo mal aprendido no tenia arreglo desde ninguna pantalla. */
.cp-upc{
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  margin: 0 14px 10px;
  font-size: 11px; color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cp-upc[hidden]{ display: none; }
.cp-upc > i{ font-size: 14px; }
.cp-upc button{
  margin-left: auto; flex-shrink: 0;
  background: none; border: none; padding: 4px 2px;
  color: #fbbf24; font-family: inherit; font-size: 11px;
  text-decoration: underline; cursor: pointer;
}

/* ── Corregir un codigo mal asignado ───────────────────────────────────
   Pantalla completa y por encima del panel del articulo (100003), que a
   su vez esta sobre el cierre y sobre el escaner. Se abre desde dentro
   de un conteo, asi que tiene que tapar todo lo que hay debajo. */
.bf-bg{
  position: fixed; inset: 0; z-index: 100004;
  background: #0b1220; color: #f1f5f9;
  display: flex; flex-direction: column;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
.bf-bg.hidden{ display: none; }
.bf-panel{ display: flex; flex-direction: column; height: 100%; min-height: 0; }
.bf-head{
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
  font-size: 17px; font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
/* El cuerpo NO scrollea: scrollea la lista, y solo la lista.

   Tenia las dos cosas —cuerpo con overflow-y:auto Y lista con overflow
   propio dentro de un flex:1— y con el teclado abierto eso se rompe. El
   teclado recorta el viewport a la mitad, el flex:1 de la lista calcula
   una altura casi nula, y las filas se comprimen unas sobre otras en vez
   de hacer scroll. Dos regiones de scroll anidadas es la receta.

   Un solo scroller y filas que no encogen. */
.bf-body{
  flex: 1; min-height: 0; overflow: hidden;
  padding: 14px; display: flex; flex-direction: column;
}

.bf-warn{
  background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.35);
  color: #fbbf24; border-radius: 12px; padding: 11px 13px;
  font-size: 13px; line-height: 1.55; margin-bottom: 12px;
}
.bf-ok{
  background: rgba(56,189,248,.09); border: 1px solid rgba(56,189,248,.32);
  color: #bae6fd; border-radius: 12px; padding: 11px 13px;
  font-size: 13px; line-height: 1.55; margin-bottom: 12px;
}

.bf-search{ position: relative; margin-bottom: 12px; flex-shrink: 0; }
.bf-search > i{
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: #94a3b8; pointer-events: none;
}
.bf-search input{
  width: 100%; height: 50px; padding: 0 13px 0 40px;
  border-radius: 12px;
  background: rgba(56,189,248,.07);
  border: 1px solid rgba(56,189,248,.45);
  color: #f1f5f9; font-family: inherit;
  /* 16px exactos o Safari acerca la pantalla al enfocar */
  font-size: 16px; font-weight: 600;
}

.bf-list{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 12px;
}
.bf-row{
  display: flex; align-items: center; gap: 10px; width: 100%;
  /* flex-shrink:0 y min-height: sin esto, cuando el contenedor se queda
     corto los botones se encogen hasta solaparse en vez de desbordar y
     dejar que la lista haga scroll. */
  flex-shrink: 0;
  min-height: 48px;
  box-sizing: border-box;
  padding: 13px 4px; background: none; border: none;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: inherit; font-family: inherit; font-size: 15px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.bf-row > span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-row:disabled{ opacity: .4; cursor: default; }
.bf-row small{ margin-left: auto; font-size: 11px; color: #94a3b8; font-weight: 700; flex-shrink: 0; }
.bf-empty{ font-size: 13px; color: #94a3b8; text-align: center; padding: 24px 0; }

.bf-card{
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px; padding: 12px 13px; margin-bottom: 10px;
}
.bf-lab{ font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.bf-big{ font-size: 23px; font-weight: 800; margin-top: 4px; }
.bf-big span{ font-size: 12px; font-weight: 600; color: #94a3b8; margin-left: 5px; }
.bf-sub{ font-size: 12px; color: #94a3b8; margin-top: 4px; }
.bf-note{ font-size: 12px; color: #94a3b8; line-height: 1.55; margin-bottom: 12px; }

.bf-go, .bf-forget{
  width: 100%; height: 50px; border-radius: 14px;
  font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.bf-go{ background: #0ea5e9; border: none; color: #04283b; margin-bottom: 8px; }
.bf-forget{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: #cbd5e1;
  /* Antes iba con margin-top:auto, empujado al fondo. Con el teclado
     abierto eso le robaba a la lista el poco alto que quedaba. Ahora es
     una fila mas, al final del flujo, y la lista se queda con el resto. */
  flex-shrink: 0;
}
.bf-foot{ font-size: 11px; color: #64748b; text-align: center; margin-top: 12px; line-height: 1.5; }
.bf-status{ font-size: 14px; color: #94a3b8; text-align: center; padding: 30px 0; }
.bf-status.bf-bad{ color: #ef4444; font-weight: 700; }
.bf-err{ font-size: 11px; color: #94a3b8; text-align: center; word-break: break-word; margin-bottom: 14px; }

/* Los pasos que no llevan lista —mover el conteo, un error— son cortos
   pero pueden no caber con el teclado abierto en un telefono pequeño.
   Como el cuerpo ya no scrollea, se les da scroll a ellos. */
.bf-body.bf-scroll{ overflow-y: auto; }


/* ── Varias botellas abiertas ──────────────────────────────────────────
   Antes esto era una LISTA, una fila por botella. Crecia hacia abajo y
   ese alto salia de la botella: con dos abiertas la silueta ya se
   encogia y la linea de arrastre se quedaba fuera del vidrio. Con cuatro
   habria sido un sello.

   Ahora es UNA fila, siempre la misma altura, tenga dos botellas o diez.
   Se desplaza en horizontal si no caben. */
.cp-pager{
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  margin: 2px 14px 0;
  padding-bottom: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cp-pager::-webkit-scrollbar{ display: none; }

.cp-pg{
  flex-shrink: 0;
  min-width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #cbd5e1;
  font-family: inherit; font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cp-pg.on{
  background: rgba(56,189,248,.16);
  border-color: rgba(56,189,248,.8);
  color: #7dd3fc;
}
/* La papelera borra la ACTIVA. Con una por fila era facil borrar la de al
   lado sin querer; con una sola, lo que se borra es lo que estas mirando. */
.cp-pg-del{
  flex-shrink: 0;
  margin-left: auto;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: none;
  border: 1px solid rgba(255,255,255,.14);
  color: #94a3b8; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cp-pg-del:hover{ color: #ef4444; border-color: rgba(239,68,68,.45); }

/* Cual estas mirando, encima de la cifra. */
.cp-which{
  display: block;
  font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: #7dd3fc;
  margin-bottom: 2px;
}

/* ── El alto de la botella no se negocia ───────────────────────────────
   La causa de fondo del fallo no era la lista, sino que todo lo de abajo
   podia robarle alto al visor sin tope. Con esto, la silueta tiene un
   minimo por debajo del cual no baja: si algo no cabe, desborda y se
   nota, en vez de comerse en silencio la unica parte que hay que mirar. */
.cp-stage{ min-height: 190px; }
.cp-read, .cp-chips, .cp-opens, .cp-hint{ flex-shrink: 0; }

body.light .cp-pg{ background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.12); color: #334155; }
body.light .cp-pg.on{ background: rgba(2,132,199,.12); border-color: rgba(2,132,199,.7); color: #0369a1; }
body.light .cp-pg-del{ border-color: rgba(15,23,42,.12); }
body.light .cp-which{ color: #0369a1; }