body { background: #f4f5f7; }
.entrar { min-height: 100dvh; display: grid; place-items: center; padding: 20px 16px; }
.entrar form { width: min(100%, 400px); }
.entrar h1 { font-size: 28px; }

.caja { max-width: 720px; margin: 0 auto; padding: 12px 16px 32px; display: grid; gap: 14px; }
.barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; }
.barra-negocio { font-weight: 750; font-size: 18px; }
.titulo-chico { font-size: 17px; }

.escaner {
  position: relative; background: #0d0e10; border-radius: 18px; overflow: hidden;
  aspect-ratio: 4 / 3; max-height: 62dvh; width: 100%;
}
.escaner video { width: 100%; height: 100%; object-fit: cover; }
.escaner-vacio {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
  color: #fff; text-align: center; padding: 20px;
}
.escaner-vacio .suave { color: #c4c8ce; }
.escaner-apagar {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; min-height: 44px; padding: 0 16px;
  background: rgb(0 0 0 / .6); color: #fff; border: 2px solid #fff; border-radius: 999px; font-weight: 700;
}

.resultado {
  position: fixed; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 12px;
  text-align: center; padding: 24px; background: var(--ok); color: #fff;
}
.resultado[data-tipo=no] { background: var(--no); }
.resultado[data-tipo=premio] { background: #0e5a8a; }
.resultado-icono { font-size: 72px; line-height: 1; }
.resultado h2 { font-size: clamp(30px, 8vw, 48px); }
.resultado p { font-size: 20px; max-width: 30ch; }
.resultado button { background: #fff; color: var(--tinta); border-color: #fff; min-width: 180px; }
.resultado button.principal { background: var(--tinta); color: #fff; border-color: var(--tinta); }

#form-buscar input { flex: 1 1 180px; width: auto; }
#encontrado { display: grid; gap: 10px; justify-items: start; }
#encontrado .qr { width: 220px; background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--linea); }

.demo { border-style: dashed; }

/* Paquete 5C */
#caja-agotados summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.lista-caja { display: grid; gap: 4px; }
.fila-caja { padding: 8px 0; border-bottom: 1px solid var(--linea); }
.fila-caja button { min-height: 40px; padding: 6px 12px; font-size: 15px; }
.agotado-txt { color: var(--no); }

/* Venta rápida */
.venta-rapida { gap: 12px; }
.vr-cuerpo { display: grid; gap: 14px; }
.vr-catalogo, .vr-lado { display: grid; gap: 10px; align-content: start; min-width: 0; }
.vr-subtitulo { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.vr-botones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 10px; }
.vr-boton {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 2px; align-items: start; justify-items: start;
  text-align: left; min-height: 0; padding: 0 0 10px; overflow: visible; border-radius: 14px;
  font-size: 15px; font-weight: 700; line-height: 1.2; background: #fff;
}
.vr-boton img, .vr-sin-foto {
  width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 12px 12px 0 0; margin-bottom: 6px; background: var(--linea);
}
.vr-sin-foto {
  display: grid; place-items: center; font-size: 34px; font-weight: 800; color: var(--marca-texto);
  background: color-mix(in srgb, var(--marca) 80%, #000);
}
.vr-nombre, .vr-precio { padding: 0 10px; }
.vr-nombre { overflow-wrap: break-word; hyphens: auto; }
.vr-precio { font-weight: 500; font-size: 14px; color: var(--suave); }
.vr-elegido { border-color: var(--marca); box-shadow: 0 0 0 2px var(--marca); }
.vr-agotado { opacity: .55; }
.vr-n {
  position: absolute; top: -8px; right: -8px; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; background: var(--marca); color: var(--marca-texto); font-size: 15px;
  border: 2px solid #fff;
}
#vr-buscar { width: 100%; }
.vr-ticket { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: #f4f6f9; }
.vr-ticket[data-vacio] :is(.vr-total, .vr-cambio, .vr-ayuda) { display: none; }
.vr-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vr-lineas:empty { display: none; }
.vr-lineas li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.vr-lineas li > span:first-child { overflow-wrap: anywhere; }
.vr-lineas strong { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }

/* Computadora: platillos a la izquierda y la cuenta fija a la derecha, como en un punto de venta. */
@media (min-width: 960px) {
  .caja { max-width: 1180px; }
  .caja > .escaner { max-width: 720px; justify-self: center; }
  .vr-cuerpo { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .vr-lado { position: sticky; top: 12px; }
  .vr-botones { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
/* Celular: 3 columnas compactas y una barra fija que lleva a la cuenta. */
@media (max-width: 600px) {
  .vr-botones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .vr-boton { font-size: 13px; padding-bottom: 8px; }
  .vr-boton img, .vr-sin-foto { aspect-ratio: 1; margin-bottom: 4px; }
  .vr-nombre, .vr-precio { padding: 0 6px; }
  .vr-nombre { letter-spacing: -.01em; }
  .vr-precio { font-size: 12px; }
  .vr-n { min-width: 26px; height: 26px; top: -6px; right: -6px; font-size: 13px; }
}
@media (max-width: 359px) {
  .vr-botones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vr-ir-cuenta {
  /* Arriba de la etiqueta "DEMO" para no taparla. */
  position: fixed; left: 12px; right: 12px; bottom: calc(46px + env(safe-area-inset-bottom)); z-index: 20;
  min-height: 56px; justify-content: space-between; box-shadow: 0 6px 20px rgb(0 0 0 / .25);
}
@media (min-width: 960px) { .vr-ir-cuenta { display: none !important; } }
.contador { display: inline-flex; align-items: center; gap: 4px; }
.contador button { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; font-size: 20px; }
.contador output { min-width: 22px; text-align: center; font-weight: 700; }
.vr-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 22px; }
.vr-cambio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vr-cambio input { width: 110px; }
/* Efectivo es el más común: botón ancho arriba; tarjeta y transferencia debajo. */
.vr-metodos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vr-metodos [data-metodo=efectivo] { grid-column: 1 / -1; }
.vr-metodos button { min-height: 58px; padding: 8px 10px; }
.vr-metodos button:disabled { opacity: .35; box-shadow: none; }
.vr-hoy summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; font-weight: 700; }
.vr-anulada > span { text-decoration: line-through; opacity: .6; }

/* Corte de caja */
.dialogo { width: min(94vw, 520px); border: 0; border-radius: 18px; padding: 20px; }
.dialogo::backdrop { background: rgb(0 0 0 / .45); }
.formulario { display: grid; gap: 12px; }
.corte-resultado { display: grid; gap: 12px; }
.corte-dif { margin: 0; padding: 14px; border-radius: 12px; font-size: 24px; font-weight: 800; text-align: center; }
.corte-dif[data-signo=cuadra] { background: var(--ok-fondo); color: var(--ok); }
.corte-dif[data-signo=falta] { background: var(--no-fondo); color: var(--no); }
.corte-dif[data-signo=sobra] { background: #fff1d6; color: #7a4b00; }
.corte-tabla { width: 100%; border-collapse: collapse; font-size: 16px; }
.corte-tabla td { padding: 7px 4px; border-bottom: 1px solid var(--linea); }
.corte-tabla td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* Pedidos en línea */
.lista-pedidos-caja { display: grid; gap: 10px; }
.pedido-caja { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--linea); background: #fff; }
.pedido-caja[data-estado=pagado] { border-color: var(--ok); }
.pedido-caja[data-estado=listo] { opacity: .8; }
.pedido-items { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: 17px; }
.pedido-caja button { min-height: 44px; }
.pedido-caja[data-estado=en_camino] { opacity: .85; }
.minutos-caja { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.minutos-caja select { min-height: 44px; }
.etq-domicilio { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #e3efff; color: #1d4f91; }.entrega-caja { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #f4f6f9; }
.entrega-caja p { margin: 0; }
.entrega-caja .fila { flex-wrap: wrap; gap: 8px; }
.entrega-caja .boton, .entrega-caja button { min-height: 44px; }