/* Escáner de etiquetas (assets/nexsell-escaner.js). Solo se usa en la cuenta de prueba.
   Usa los tokens de la app (oscuro + acento verde). Celular: pantalla completa. Escritorio: tarjeta centrada. */
html.nxesc-abierto, html.nxesc-abierto body { overflow: hidden; }

.nxesc-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: stretch; justify-content: center;
  background: var(--bg-primary); color: var(--text-primary); font-family: inherit; -webkit-user-select: none; user-select: none; }
.nxesc-modal[hidden] { display: none; }
.nxesc-modal * { box-sizing: border-box; }
.nxesc-sheet { width: 100%; height: 100%; height: 100dvh; display: flex; flex-direction: column; min-height: 0; padding-top: env(safe-area-inset-top); }

/* Barra superior */
.nxesc-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex-shrink: 0;
  background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
.nxesc-titulo { flex: 1; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; }
.nxesc-beta { font-size: 10px; padding: 3px 8px; border-radius: 99px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--warning-soft); color: var(--accent-warning); border: 1px solid var(--warning-border); }
.nxesc-x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-color); font-size: 18px; line-height: 1; cursor: pointer;
  background: var(--bg-tertiary); color: var(--text-primary); }
.nxesc-x:active { background: var(--bg-hover); }

/* Zona con scroll */
.nxesc-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px;
  display: flex; flex-direction: column; gap: 12px; }

/* Visor apaisado; el recuadro es un rectángulo largo hacia los lados, como el código de barras de la etiqueta */
.nxesc-visor { position: relative; width: 100%; height: min(58dvh, 520px); flex-shrink: 0; border-radius: var(--radius-lg); overflow: hidden;
  background: #000; border: 1px solid var(--border-strong); }
.nxesc-visor[hidden] { display: none; }
.nxesc-visor video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nxesc-marco { position: absolute; top: 50%; left: 50%; width: 92%; aspect-ratio: 5 / 2; transform: translate(-50%, -50%);
  border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5); }
.nxesc-marco i { position: absolute; width: 30px; height: 30px; border: 0 solid var(--accent-primary); }
.nxesc-marco i:nth-of-type(1) { top: 0; left: 0; border-top-width: 4px; border-left-width: 4px; border-top-left-radius: 14px; }
.nxesc-marco i:nth-of-type(2) { top: 0; right: 0; border-top-width: 4px; border-right-width: 4px; border-top-right-radius: 14px; }
.nxesc-marco i:nth-of-type(3) { bottom: 0; left: 0; border-bottom-width: 4px; border-left-width: 4px; border-bottom-left-radius: 14px; }
.nxesc-marco i:nth-of-type(4) { bottom: 0; right: 0; border-bottom-width: 4px; border-right-width: 4px; border-bottom-right-radius: 14px; }
.nxesc-marco em { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-style: normal; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px #000; }
.nxesc-linea { position: absolute; left: 8%; right: 8%; top: 10%; height: 2px; border-radius: 2px; background: var(--accent-primary);
  box-shadow: 0 0 12px 2px rgba(var(--accent-rgb), .7); animation: nxescBarrido 2.2s ease-in-out infinite alternate; }
@keyframes nxescBarrido { to { top: 90%; } }
@media (prefers-reduced-motion: reduce) { .nxesc-linea { animation: none; top: 50%; } }

.nxesc-torch { position: absolute; top: 10px; right: 10px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .55); font-size: 20px; cursor: pointer; }
.nxesc-torch[hidden] { display: none; }
.nxesc-torch[data-on="1"] { background: var(--accent-primary); border-color: var(--accent-primary); }
.nxesc-zoom-wrap { position: absolute; left: 10px; right: 66px; bottom: 10px; display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: 99px; background: rgba(0, 0, 0, .55); }
.nxesc-zoom-wrap[hidden] { display: none; }
.nxesc-zoom-wrap input { flex: 1; min-width: 0; accent-color: var(--accent-primary); }

.nxesc-msg { margin: 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.nxesc-msg[hidden] { display: none; }
/* Con resultado, la cámara ya está cerrada y el producto ocupa la pantalla. */
.nxesc--resultado .nxesc-visor, .nxesc--resultado .nxesc-msg { display: none; }

/* Resultado */
.nxesc-res { display: flex; flex-direction: column; gap: 12px; }
.nxesc-res:empty { display: none; }
.nxesc-estado { border-radius: var(--radius); padding: 12px 14px; font-size: 15px; text-align: center; border: 1px solid; }
.nxesc-estado--ok { background: var(--accent-soft); color: var(--accent-primary); border-color: var(--accent-border); }
.nxesc-estado--info { background: rgba(var(--secondary-rgb), .12); color: var(--accent-secondary); border-color: rgba(var(--secondary-rgb), .35); }
.nxesc-estado--warn { background: var(--danger-soft); color: var(--accent-danger); border-color: var(--danger-border); }

.nxesc-hero { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; cursor: zoom-in;
  background: var(--bg-tertiary); aspect-ratio: 4 / 3; max-height: 38dvh; box-shadow: var(--shadow-sm); }
.nxesc-hero img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.nxesc-hero-lupa { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 18px; }
.nxesc-hero-gen { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; font-size: 12px; font-weight: 700; text-align: center;
  background: rgba(var(--warning-rgb), .95); color: #1a1100; }
.nxesc-hero--vacia { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: default; aspect-ratio: 16 / 9; }
.nxesc-hero--vacia span { font-size: 52px; }
.nxesc-hero--vacia small { font-size: 13px; color: var(--text-secondary); }

.nxesc-nombre { font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.nxesc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nxesc-chip { padding: 8px 14px; border-radius: 99px; font-size: 16px; font-weight: 700; }
.nxesc-chip--var { background: var(--accent-primary); color: #04130C; }
.nxesc-chip--cant { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-strong); }

/* Comprador bien visible */
.nxesc-comprador { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--bg-elevated);
  border: 1px solid var(--accent-border); }
.nxesc-comprador-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: var(--accent-soft); }
.nxesc-comprador div { display: flex; flex-direction: column; min-width: 0; }
.nxesc-comprador small { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.nxesc-comprador b { font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }

.nxesc-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 12px; border-radius: var(--radius); background: var(--bg-tertiary); border: 1px solid var(--border-color); }
.nxesc-dato { display: flex; flex-direction: column; min-width: 0; }
.nxesc-dato span { font-size: 12px; color: var(--text-secondary); }
.nxesc-dato b { font-size: 14px; overflow-wrap: anywhere; }
.nxesc-link { display: block; text-align: center; padding: 14px; border-radius: var(--radius); font-weight: 700; text-decoration: none;
  background: var(--bg-tertiary); border: 1px solid var(--border-strong); color: var(--accent-primary); }

.nxesc-extra { border-radius: var(--radius); padding: 10px; background: var(--warning-soft); border: 1px solid var(--warning-border); display: flex; flex-direction: column; gap: 8px; }
.nxesc-extra-tit { font-size: 13px; font-weight: 700; color: var(--accent-warning); }
.nxesc-mini { display: flex; gap: 10px; align-items: center; background: var(--bg-tertiary); border-radius: var(--radius-sm); padding: 6px; }
.nxesc-mini img, .nxesc-mini-vacia { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.nxesc-mini div { display: flex; flex-direction: column; min-width: 0; }
.nxesc-mini b { font-size: 14px; }
.nxesc-mini em { font-size: 13px; font-style: normal; font-weight: 700; color: var(--accent-primary); }
.nxesc-mini small { font-size: 12px; color: var(--text-secondary); }

.nxesc-no { border-radius: var(--radius); padding: 16px; background: var(--danger-soft); border: 1px solid var(--danger-border); color: var(--text-primary); text-align: center; }
.nxesc-no b { font-size: 17px; color: var(--accent-danger); }
.nxesc-no p { margin: 8px 0 0; font-size: 14px; color: var(--text-secondary); }
.nxesc-no code { overflow-wrap: anywhere; color: var(--text-primary); }

/* Pie con botones grandes */
.nxesc-pie { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg-secondary); border-top: 1px solid var(--border-color); }
.nxesc-botones { display: flex; gap: 8px; }
.nxesc-btn { flex: 1; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  background: var(--accent-primary); color: #04130C; box-shadow: var(--shadow-accent); }
.nxesc-btn:active { background: var(--accent-primary-strong); }
.nxesc-btn--sec { flex: 0 0 auto; padding: 0 18px; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-strong); box-shadow: none; }
.nxesc-btn--sec:active { background: var(--bg-hover); }
.nxesc-manual summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); padding: 6px 0; text-align: center; }
.nxesc-fila { display: flex; gap: 8px; margin-top: 6px; }
.nxesc-fila input { flex: 1; min-width: 0; min-height: 48px; padding: 0 12px; border-radius: var(--radius); font: inherit; font-size: 16px; /* 16px evita el zoom de iOS */
  border: 1px solid var(--border-strong); background: var(--bg-tertiary); color: var(--text-primary); -webkit-user-select: text; user-select: text; }
.nxesc-fila input:focus { outline: none; border-color: var(--accent-primary); box-shadow: var(--focus-ring); }
.nxesc-fila .nxesc-btn--sec { min-height: 48px; font-size: 15px; }

/* Foto ampliada */
.nxesc-zoom { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, .94); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.nxesc-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; }
.nxesc-zoom span { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; }

/* Escritorio: tarjeta centrada sobre fondo oscuro */
@media (min-width: 700px) {
  .nxesc-modal { align-items: center; background: rgba(0, 0, 0, .7); }
  .nxesc-sheet { max-width: 520px; height: min(94dvh, 900px); border-radius: 20px; overflow: hidden; padding-top: 0;
    background: var(--bg-primary); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
}