/* ============================================================
   Proalmacén — Hoja de estilos
   Estilo Sortly: violeta, tarjetas redondeadas, fotos grandes y
   todo pensado primero para el teléfono.
   ============================================================ */

:root {
  --violeta:        #6c4df6;
  --violeta-oscuro: #5638d6;
  --violeta-suave:  #f0ecff;
  --violeta-borde:  #ddd4ff;

  --ok:     #12b886;
  --bajo:   #f08c00;
  --malo:   #e03131;
  --info:   #1c7ed6;

  --fondo:   #f5f6fa;
  --tarjeta: #ffffff;
  --texto:   #1b1b2f;
  --tenue:   #6b6b80;
  --borde:   #e6e6ef;

  --sombra:    0 1px 3px rgba(20,20,50,.06), 0 1px 2px rgba(20,20,50,.04);
  --sombra-md: 0 4px 16px rgba(20,20,50,.10);
  --sombra-lg: 0 12px 40px rgba(20,20,50,.16);

  --r:    14px;
  --r-sm: 10px;
  --r-lg: 20px;

  --barra: 64px;   /* alto de la barra inferior en móvil */
  --menu:  248px;  /* ancho del menú lateral en escritorio */
}

@media (prefers-color-scheme: dark) {
  :root {
    --violeta-suave: #221c44;
    --violeta-borde: #3b2f7a;
    --fondo:   #131320;
    --tarjeta: #1c1c2e;
    --texto:   #ececf4;
    --tenue:   #9a9ab4;
    --borde:   #2c2c44;
    --sombra:    0 1px 3px rgba(0,0,0,.4);
    --sombra-md: 0 4px 16px rgba(0,0,0,.45);
    --sombra-lg: 0 12px 40px rgba(0,0,0,.55);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--violeta); text-decoration: none; }

/* height:auto es obligatorio: las imágenes llevan width/height en el HTML
   (para que el navegador reserve el sitio y la página no salte al cargar),
   y sin esto ese alto fijo gana sobre el CSS y la imagen sale estirada. */
img { max-width: 100%; height: auto; display: block; }

h1 { font-size: 1.5rem; margin: 0 0 .25rem; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; font-weight: 650; }
h3 { font-size: 1rem; margin: 0 0 .5rem; font-weight: 650; }

/* ============================================================
   ESTRUCTURA
   ============================================================ */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem;
  background: var(--tarjeta);
  border-bottom: 1px solid var(--borde);
}
.topbar .marca { display: flex; align-items: center; gap: .5rem; font-weight: 750; letter-spacing: -.02em; }
.topbar .marca .logo {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--violeta), #9b7bff);
  display: grid; place-items: center; color: #fff; font-size: 1.05rem;
}
.topbar .crece { flex: 1; }

.contenido { flex: 1; padding: 1rem; padding-bottom: calc(var(--barra) + 1.5rem); max-width: 1200px; width: 100%; margin: 0 auto; }

/* Barra inferior (móvil) — el patrón de Sortly: lo más usado a un toque */
.barra-inf {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-around;
  height: var(--barra);
  background: var(--tarjeta);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-inf a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--tenue); font-size: .68rem; font-weight: 600; padding: .4rem 0;
}
.barra-inf a .ic { font-size: 1.3rem; line-height: 1; }
.barra-inf a.activo { color: var(--violeta); }

/* Botón central de escanear: el más grande porque es el más usado */
.barra-inf .escanear {
  flex: 0 0 auto; margin-top: -22px;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violeta), #9b7bff);
  color: #fff; font-size: 1.5rem;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(108,77,246,.45);
}
.barra-inf .escanear.activo { color: #fff; }

/* Menú lateral (escritorio) */
.lateral { display: none; }

@media (min-width: 900px) {
  .app { flex-direction: row; }
  .lateral {
    display: flex; flex-direction: column; gap: .15rem;
    width: var(--menu); flex: 0 0 var(--menu);
    padding: 1rem .75rem;
    background: var(--tarjeta);
    border-right: 1px solid var(--borde);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
  }
  .lateral .marca { display: flex; align-items: center; gap: .6rem; font-weight: 750; font-size: 1.1rem; padding: .5rem .6rem 1.1rem; }
  .lateral .marca .logo { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--violeta), #9b7bff); display: grid; place-items: center; color: #fff; }
  .lateral a {
    display: flex; align-items: center; gap: .7rem;
    padding: .62rem .7rem; border-radius: var(--r-sm);
    color: var(--texto); font-weight: 550; font-size: .93rem;
  }
  .lateral a .ic { font-size: 1.15rem; width: 1.4rem; text-align: center; }
  .lateral a:hover { background: var(--fondo); }
  .lateral a.activo { background: var(--violeta-suave); color: var(--violeta); font-weight: 650; }
  .lateral .separa { height: 1px; background: var(--borde); margin: .6rem .4rem; }

  .barra-inf { display: none; }
  .principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .contenido { padding: 1.5rem 2rem; padding-bottom: 3rem; }
  .topbar { padding: .85rem 2rem; }
  .topbar .marca { display: none; }
}

/* ============================================================
   TARJETAS Y BLOQUES
   ============================================================ */
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 1rem;
  box-shadow: var(--sombra);
}
.tarjeta + .tarjeta { margin-top: 1rem; }
.tarjeta .cab { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.tarjeta .cab h2, .tarjeta .cab h3 { margin: 0; flex: 1; }

/* Cifras del panel de inicio */
.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1rem; }
@media (min-width: 720px) { .cifras { grid-template-columns: repeat(4, 1fr); } }

.cifra {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r); padding: .9rem 1rem; box-shadow: var(--sombra);
}
.cifra .et { font-size: .75rem; color: var(--tenue); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.cifra .val { font-size: 1.6rem; font-weight: 750; letter-spacing: -.03em; margin-top: .15rem; }
.cifra.alerta .val { color: var(--bajo); }
.cifra.peligro .val { color: var(--malo); }
.cifra.bien .val { color: var(--ok); }

/* ============================================================
   REJILLA DE ARTÍCULOS — el corazón visual (estilo Sortly)
   ============================================================ */
.rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 640px)  { .rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .rejilla { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
@media (min-width: 1300px) { .rejilla { grid-template-columns: repeat(5, 1fr); } }

.art {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sombra); display: flex; flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease;
}
.art:active { transform: scale(.985); }
@media (hover: hover) { .art:hover { box-shadow: var(--sombra-md); } }

.art .foto {
  position: relative; aspect-ratio: 1/1; background: var(--fondo);
  display: grid; place-items: center; overflow: hidden;
}
.art .foto img { width: 100%; height: 100%; object-fit: cover; }
.art .foto .sin { font-size: 2rem; opacity: .28; }

.art .cuerpo { padding: .6rem .7rem .7rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.art .nom {
  font-weight: 620; font-size: .88rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.art .meta { font-size: .74rem; color: var(--tenue); }
.art .pie { display: flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .4rem; }

/* Insignia de existencia: el semáforo verde / ámbar / rojo */
.pastilla {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .18rem .5rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.pastilla.ok      { background: rgba(18,184,134,.12);  color: var(--ok); }
.pastilla.bajo    { background: rgba(240,140,0,.14);   color: var(--bajo); }
.pastilla.agotado { background: rgba(224,49,49,.12);   color: var(--malo); }
.pastilla.neutra  { background: var(--violeta-suave);  color: var(--violeta); }

/* Etiqueta de carpeta con su color */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--fondo); border: 1px solid var(--borde);
  font-size: .74rem; font-weight: 600; color: var(--tenue);
}
.chip .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--violeta); }

/* Lista compacta (alternativa a la rejilla, mejor en escritorio) */
.lista { display: flex; flex-direction: column; gap: .5rem; }
.fila {
  display: flex; align-items: center; gap: .75rem;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r-sm); padding: .6rem .75rem; box-shadow: var(--sombra);
}
.fila .mini { width: 46px; height: 46px; border-radius: var(--r-sm); object-fit: cover; background: var(--fondo); flex: 0 0 46px; }
.fila .mini.sin { display: grid; place-items: center; font-size: 1.2rem; opacity: .35; }
.fila .txt { flex: 1; min-width: 0; }
.fila .txt .t { font-weight: 620; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .txt .s { font-size: .76rem; color: var(--tenue); }

/* ============================================================
   BOTONES
   ============================================================ */
/* Botones con forma de pastilla: se ven más amables y el dedo los acierta
   mejor que un rectángulo de esquinas duras. El degradado y la sombra de
   color hacen que el botón principal se note sin gritar. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .7rem 1.25rem; border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--violeta) 0%, #8567ff 100%);
  color: #fff;
  font-size: .93rem; font-weight: 650; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(108,77,246,.28);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease, filter .15s ease;
}
.btn:hover  { box-shadow: 0 6px 18px rgba(108,77,246,.38); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); box-shadow: 0 2px 6px rgba(108,77,246,.3); }
.btn:focus-visible { outline: 3px solid rgba(108,77,246,.4); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.3); }

.btn.claro {
  background: var(--tarjeta); color: var(--texto); border-color: var(--borde);
  box-shadow: var(--sombra);
}
.btn.claro:hover { box-shadow: var(--sombra-md); border-color: var(--violeta-borde); }

.btn.suave {
  background: var(--violeta-suave); color: var(--violeta); box-shadow: none;
}
.btn.suave:hover { background: var(--violeta-borde); box-shadow: none; }

.btn.peligro { background: linear-gradient(135deg, var(--malo) 0%, #f06565 100%); box-shadow: 0 3px 10px rgba(224,49,49,.28); }
.btn.peligro:hover { box-shadow: 0 6px 18px rgba(224,49,49,.38); }
.btn.verde   { background: linear-gradient(135deg, var(--ok) 0%, #38d39f 100%); box-shadow: 0 3px 10px rgba(18,184,134,.28); }
.btn.verde:hover { box-shadow: 0 6px 18px rgba(18,184,134,.38); }

.btn.fantasma { background: transparent; color: var(--tenue); box-shadow: none; }
.btn.fantasma:hover { background: var(--fondo); color: var(--texto); box-shadow: none; transform: none; }

.btn.ancho   { width: 100%; }
.btn.grande  { padding: .95rem 1.6rem; font-size: 1.02rem; }
.btn.chico   { padding: .42rem .85rem; font-size: .82rem; box-shadow: none; }
.btn.chico:hover { transform: none; box-shadow: var(--sombra); }
.btn.redondo { width: 44px; height: 44px; padding: 0; border-radius: 50%; }

/* Botones de sumar y restar del detalle: grandes, para usar con guantes */
.contador { display: flex; align-items: center; gap: .8rem; justify-content: center; }
.contador button {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 1.5rem; font-weight: 700; font-family: inherit;
  display: grid; place-items: center;
}
.contador .menos { background: rgba(224,49,49,.12); color: var(--malo); }
.contador .mas   { background: rgba(18,184,134,.14); color: var(--ok); }
.contador .val   { font-size: 2rem; font-weight: 750; min-width: 4rem; text-align: center; letter-spacing: -.03em; }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.campo { margin-bottom: .9rem; }
.campo label { display: block; font-size: .82rem; font-weight: 650; margin-bottom: .3rem; color: var(--texto); }
.campo .ayuda { font-size: .76rem; color: var(--tenue); margin-top: .25rem; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], select, textarea {
  width: 100%; padding: .65rem .8rem;
  border: 1px solid var(--borde); border-radius: var(--r-sm);
  background: var(--tarjeta); color: var(--texto);
  font-size: 16px;   /* 16px evita que iOS haga zoom al enfocar */
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--violeta);
  box-shadow: 0 0 0 3px rgba(108,77,246,.15);
}
textarea { min-height: 92px; resize: vertical; }

.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 480px) { .fila-campos.apila { grid-template-columns: 1fr; } }

/* Campo de contraseña con el ojo para verla.
   Poder mirar lo que se escribe evita la mitad de los errores de tecleo,
   sobre todo con contraseñas que llevan símbolos. */
.clave { position: relative; }
.clave input { padding-right: 3rem; }
.clave .ojo {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  width: 2.3rem; height: 2.3rem; border: none; background: none;
  cursor: pointer; font-size: 1.1rem; line-height: 1;
  display: grid; place-items: center; border-radius: 50%; color: var(--tenue);
}
.clave .ojo:hover { background: var(--fondo); }

/* Lista de requisitos que se va marcando sola al escribir */
.requisitos { list-style: none; padding: 0; margin: .5rem 0 0; }
.requisitos li {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; color: var(--tenue); padding: .12rem 0;
  transition: color .15s ease;
}
.requisitos li .marca {
  width: 1.05rem; height: 1.05rem; border-radius: 50%; flex: 0 0 1.05rem;
  display: grid; place-items: center; font-size: .62rem; font-weight: 800;
  background: var(--borde); color: var(--tenue);
  transition: background .15s ease, color .15s ease;
}
.requisitos li.listo { color: var(--ok); }
.requisitos li.listo .marca { background: var(--ok); color: #fff; }

/* Aviso bajo un campo: verde si va bien, rojo si no */
.pista { font-size: .78rem; margin-top: .3rem; min-height: 1.1em; }
.pista.bien { color: var(--ok); font-weight: 600; }
.pista.mal  { color: var(--malo); }

.check { display: flex; align-items: center; gap: .55rem; padding: .5rem 0; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--violeta); flex: 0 0 20px; }
.check span { font-size: .9rem; }

/* Buscador con lupa */
.buscador { position: relative; margin-bottom: .9rem; }
.buscador input { padding-left: 2.5rem; }
.buscador .lupa { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); opacity: .45; }

/* Filtros en línea que se deslizan */
.filtros { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: .5rem; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button {
  flex: 0 0 auto; padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--tenue);
  font-size: .83rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
.filtros button.activo { background: var(--violeta); color: #fff; border-color: var(--violeta); }

/* ============================================================
   VENTANAS EMERGENTES
   ============================================================ */
.velo {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15,15,35,.5); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 640px) { .velo { align-items: center; } }

.modal {
  background: var(--tarjeta); width: 100%; max-width: 520px;
  max-height: 92vh; overflow-y: auto;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 1.1rem; box-shadow: var(--sombra-lg);
  animation: sube .2s ease;
}
@media (min-width: 640px) { .modal { border-radius: var(--r-lg); animation: aparece .18s ease; } }
@keyframes sube    { from { transform: translateY(100%); } }
@keyframes aparece { from { opacity: 0; transform: scale(.96); } }

.modal .cab-modal { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.modal .cab-modal h2 { margin: 0; flex: 1; font-size: 1.15rem; }
.modal .cerrar {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--fondo); color: var(--tenue); font-size: 1.2rem; line-height: 1;
}
.modal .pie-modal { display: flex; gap: .6rem; margin-top: 1.1rem; }
.modal .pie-modal .btn { flex: 1; }

/* Tirador de la hoja deslizante en móvil */
.modal .tirador { width: 40px; height: 4px; border-radius: 2px; background: var(--borde); margin: -.4rem auto .8rem; }
@media (min-width: 640px) { .modal .tirador { display: none; } }

/* ============================================================
   AVISOS
   ============================================================ */
.avisos { position: fixed; bottom: calc(var(--barra) + 1rem); left: 1rem; right: 1rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
@media (min-width: 900px) { .avisos { bottom: 1.5rem; left: auto; right: 1.5rem; width: 340px; } }

.aviso {
  background: var(--texto); color: var(--fondo);
  padding: .75rem 1rem; border-radius: var(--r-sm);
  font-size: .89rem; font-weight: 550; box-shadow: var(--sombra-lg);
  display: flex; align-items: center; gap: .55rem;
  animation: aparece .18s ease;
}
.aviso.bien  { background: var(--ok);   color: #fff; }
.aviso.error { background: var(--malo); color: #fff; }
.aviso.ojo   { background: var(--bajo); color: #fff; }

.alerta {
  padding: .75rem .9rem; border-radius: var(--r-sm);
  font-size: .88rem; margin-bottom: .9rem;
  display: flex; align-items: flex-start; gap: .5rem;
}
.alerta.error { background: rgba(224,49,49,.1);  color: var(--malo); }
.alerta.ojo   { background: rgba(240,140,0,.12); color: #b45309; }
.alerta.info  { background: var(--violeta-suave); color: var(--violeta); }
.alerta.bien  { background: rgba(18,184,134,.12); color: var(--ok); }

/* Barra de conexión: aparece cuando se trabaja sin señal */
.sin-senal {
  position: sticky; top: 0; z-index: 60;
  background: var(--bajo); color: #fff;
  padding: .45rem 1rem; font-size: .82rem; font-weight: 650;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
}
.sin-senal.sincronizando { background: var(--info); }

/* ============================================================
   VACÍO Y CARGA
   ============================================================ */
.vacio { text-align: center; padding: 2.5rem 1.5rem; color: var(--tenue); }
.vacio .emoji { font-size: 3rem; margin-bottom: .6rem; opacity: .55; }
.vacio .dibujo { width: 100%; max-width: 220px; margin: 0 auto .9rem; display: block; }
.vacio h3 { color: var(--texto); margin-bottom: .35rem; }
.vacio p { margin: 0 0 1.1rem; font-size: .9rem; max-width: 34ch; margin-left: auto; margin-right: auto; }

/* Ilustraciones de las pantallas */
.ilustra { width: 100%; max-width: 260px; margin: 0 auto 1rem; display: block; }
.ilustra.chica { max-width: 190px; }

.esqueleto { background: linear-gradient(90deg, var(--borde) 25%, var(--fondo) 50%, var(--borde) 75%); background-size: 200% 100%; animation: brilla 1.3s infinite; border-radius: var(--r-sm); }
@keyframes brilla { to { background-position: -200% 0; } }
.esqueleto.foto { aspect-ratio: 1/1; border-radius: var(--r); }
.esqueleto.linea { height: 12px; margin-top: .5rem; }

/* ============================================================
   BARRA DE USO DEL PLAN
   ============================================================ */
.uso { margin-top: .5rem; }
.uso .et { display: flex; justify-content: space-between; font-size: .78rem; color: var(--tenue); margin-bottom: .3rem; }
.uso .canal { height: 7px; background: var(--borde); border-radius: 999px; overflow: hidden; }
.uso .lleno { height: 100%; background: var(--violeta); border-radius: 999px; transition: width .3s ease; }
.uso .lleno.ojo  { background: var(--bajo); }
.uso .lleno.tope { background: var(--malo); }

/* ============================================================
   ESCÁNER
   ============================================================ */
.escaner { position: fixed; inset: 0; z-index: 150; background: #000; display: flex; flex-direction: column; }
.escaner video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.escaner .mira {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(72vw, 300px); aspect-ratio: 1/1;
  border: 3px solid rgba(255,255,255,.9); border-radius: var(--r-lg);
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.55);
}
.escaner .mira::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px;
  background: var(--violeta); box-shadow: 0 0 12px var(--violeta);
  animation: barre 2s ease-in-out infinite;
}
@keyframes barre { 0%,100% { top: 12%; } 50% { top: 88%; } }

.escaner .cab-esc { position: relative; z-index: 2; display: flex; align-items: center; gap: .6rem; padding: 1rem; color: #fff; }
.escaner .pie-esc { position: relative; z-index: 2; margin-top: auto; padding: 1.2rem; text-align: center; color: #fff; }
.escaner .pie-esc p { margin: 0 0 .9rem; font-size: .9rem; opacity: .85; }

/* ============================================================
   TABLAS (reportes en escritorio)
   ============================================================ */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--r); background: var(--tarjeta); }
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th, td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--borde); white-space: nowrap; }
th { background: var(--fondo); font-weight: 650; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--fondo); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   ENTRAR / REGISTRARSE
   ============================================================ */
.entrada {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: linear-gradient(160deg, var(--violeta) 0%, #4c2fc4 100%);
}
.entrada .caja {
  background: var(--tarjeta); border-radius: var(--r-lg); padding: 1.75rem;
  width: 100%; max-width: 420px; box-shadow: var(--sombra-lg);
}
.entrada .marca { text-align: center; margin-bottom: 1.4rem; }
.entrada .marca .logo { width: 58px; height: 58px; border-radius: 17px; background: linear-gradient(135deg, var(--violeta), #9b7bff); display: grid; place-items: center; margin: 0 auto .7rem; font-size: 1.8rem; }
.entrada .marca h1 { font-size: 1.4rem; margin-bottom: .2rem; }
.entrada .marca p { margin: 0; color: var(--tenue); font-size: .88rem; }
.entrada .abajo { text-align: center; margin-top: 1.1rem; font-size: .88rem; color: var(--tenue); }

/* Ilustración de bienvenida.
   En el teléfono va pequeña arriba del formulario, para que los campos no
   queden empujados fuera de la pantalla. En pantalla ancha se pone al lado,
   grande, que es donde hay sitio de sobra. */
.entrada .presenta { display: none; }
.entrada .caja .dibujo-mini {
  width: 132px; margin: 0 auto .5rem; display: block;
  filter: drop-shadow(0 6px 14px rgba(76,47,196,.18));
}

@media (min-width: 900px) {
  .entrada { padding: 2rem; }
  .entrada .marco {
    display: flex; align-items: center; gap: 3rem;
    max-width: 940px; width: 100%;
  }
  .entrada .presenta { display: block; flex: 1; color: #fff; }
  .entrada .presenta img {
    width: 100%; max-width: 380px; margin-bottom: 1.2rem;
    filter: drop-shadow(0 14px 34px rgba(0,0,0,.28));
  }
  .entrada .presenta h2 { font-size: 1.9rem; line-height: 1.2; margin-bottom: .6rem; }
  .entrada .presenta p { font-size: 1rem; opacity: .9; margin: 0 0 1.2rem; max-width: 36ch; }
  .entrada .presenta ul { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
  .entrada .presenta li { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; opacity: .95; }
  .entrada .caja { flex: 0 0 400px; margin: 0; }
  .entrada .caja .dibujo-mini { display: none; }
}

/* ============================================================
   ETIQUETAS PARA IMPRIMIR
   ============================================================ */
.hoja-etiquetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; }
.etiqueta {
  border: 1px dashed var(--borde); border-radius: 6px; padding: 4mm;
  text-align: center; break-inside: avoid; background: #fff; color: #000;
}
.etiqueta canvas, .etiqueta img { margin: 0 auto; }
.etiqueta .nom { font-size: 9pt; font-weight: 700; margin-top: 2mm; line-height: 1.2; }
.etiqueta .sku { font-size: 7pt; color: #555; }

@media print {
  .topbar, .barra-inf, .lateral, .no-imprimir { display: none !important; }
  body { background: #fff; }
  .contenido { padding: 0; max-width: none; }
  .hoja-etiquetas { grid-template-columns: repeat(3, 1fr); gap: 4mm; }
  .etiqueta { border: 1px solid #ccc; }
}

/* ============================================================
   VARIOS
   ============================================================ */
.tenue { color: var(--tenue); }
.chico { font-size: .82rem; }
.centro { text-align: center; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.flex { display: flex; align-items: center; gap: .5rem; }
.crece { flex: 1; }
.envuelve { flex-wrap: wrap; }
.oculto { display: none !important; }
.mt { margin-top: 1rem; } .mb { margin-bottom: 1rem; }
.num { font-variant-numeric: tabular-nums; }