/* Vista de la bodega: pantalla táctil fija (Touch Display 2: 720×1280, vertical u horizontal). */
html, body { height: 100%; overflow: hidden; user-select: none; -webkit-user-select: none; }
body { display: flex; flex-direction: column; }

.barra {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 12px 8px;
  background: var(--fondo);
}

.modo { display: flex; border-radius: 14px; overflow: hidden; background: var(--superficie-2); }
.modo button {
  min-height: 64px;
  padding: 0 26px;
  font-size: 1.25rem;
  font-weight: 800;
  background: transparent;
  color: var(--texto-suave);
}
.modo button[aria-pressed="true"][data-modo="sacar"] { background: var(--acento); color: var(--acento-texto); }
.modo button[aria-pressed="true"][data-modo="meter"] { background: var(--ok); color: #fff; }

.categorias {
  flex: 1 1 320px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.categorias button {
  flex: 1 0 auto;
  min-height: 64px;
  padding: 0 20px;
  border-radius: 14px;
  background: var(--superficie);
  font-size: 1.15rem;
  font-weight: 700;
}
.categorias button[aria-pressed="true"] { background: var(--texto); color: var(--fondo); }

.rejilla {
  flex: 1;
  overflow-y: auto;
  padding: 4px 12px 120px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  grid-auto-rows: minmax(150px, auto);
  gap: 12px;
  align-content: start;
  overscroll-behavior: contain;
}

.producto {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 4px;
  padding: 14px 14px 12px 20px;
  border-radius: var(--radio);
  background: var(--superficie);
  text-align: left;
  overflow: hidden;
  transition: transform 0.08s;
}
.producto::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--color-estado);
}
.producto:active, .producto.pulsado { transform: scale(0.97); }
.producto.vacio { opacity: 0.5; }
.producto.ocupado { opacity: 0.6; }

.producto-cabecera { display: flex; align-items: center; gap: 10px; padding-right: 44px; }
.producto-icono { font-size: 2.4rem; line-height: 1; }
.producto-nombre { min-width: 0; font-size: 1.3rem; font-weight: 750; line-height: 1.15; hyphens: auto; overflow-wrap: anywhere; }
.producto-cantidad { font-size: 1.6rem; font-weight: 800; align-self: end; }
.producto-detalle { font-size: 0.95rem; color: var(--color-estado); font-weight: 650; }
.producto-rapida {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-weight: 750;
}
body.modo-meter .producto-rapida { background: var(--ok); color: #fff; }

.pista {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 10px 16px;
  text-align: center;
  color: var(--texto-suave);
  font-size: 0.95rem;
  background: linear-gradient(transparent, var(--fondo) 40%);
  pointer-events: none;
}
body.modo-meter .pista { display: none; }

.vacio-categoria { grid-column: 1 / -1; color: var(--texto-suave); text-align: center; padding: 40px; font-size: 1.2rem; }

@media (max-width: 480px) {
  .rejilla { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(130px, auto); }
  .modo button { padding: 0 16px; }
}