/* ventas-rapidas.css — Pantalla de toma de pedidos en tableta.
 *
 * Se apoya en los tokens de dashboard.css (--azul-osc, --azul, --radio…) para
 * que sea la misma casa. Lo propio de esta pantalla es OTRA COSA: aquí todo es
 * dedo, no ratón.
 *
 * Las tres reglas que mandan sobre la estética:
 *   1. NADA por debajo de 44 px de alto tocable. Un control bonito que la
 *      vendedora falla al tocar tres veces es un control malo.
 *   2. El total se lee de lejos y sin buscar: es el dato que se dice en voz
 *      alta al cliente.
 *   3. La página NO hace scroll. El scroll vive dentro de las dos listas. Así
 *      el buscador y el botón Guardar nunca se van de la pantalla, y enfocar un
 *      campo no empuja el layout — que en una tableta con teclado en pantalla
 *      es la diferencia entre capturar rápido y pelear con la pantalla.
 */

.vr-body {
  /* 100dvh donde exista: en una tableta, 100vh incluye la barra del navegador
     y el pie de la comanda queda cortado por debajo del borde. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--fondo);
}

/* ── Barra superior ───────────────────────────────────────────────────────── */
.vr-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--azul-osc);
  color: #fff;
  box-shadow: 0 2px 10px rgba(11, 72, 112, .18);
  z-index: 10;
}
.vr-brand { display: flex; align-items: baseline; gap: 10px; }
.vr-back {
  color: #fff; text-decoration: none; font-size: 22px; line-height: 1;
  padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,.12);
  min-height: 44px; display: inline-flex; align-items: center;
}
.vr-back:active { background: rgba(255,255,255,.24); }
.vr-logo { font-weight: 800; font-size: 20px; letter-spacing: 1px; }
.vr-sub { font-weight: 500; opacity: .85; font-size: 14px; }

.vr-top-actions { display: flex; align-items: center; gap: 10px; }

.vr-vend { display: flex; align-items: center; gap: 8px; }
.vr-vend-lbl { font-size: 12px; opacity: .8; font-weight: 600; }

/* Quién está vendiendo. NO es un desplegable: es quien se autenticó, y el servidor lo
   toma del token. Se pinta con la misma caja que tenía el selector para que la
   cabecera no cambie de forma, pero no se toca. */
.vr-vend-quien {
  min-height: 44px; display: flex; align-items: center;
  padding: 0 14px; border-radius: 10px;
  font-size: 15px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vr-select {
  min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 600;
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3);
  font-family: inherit; max-width: 220px;
}
.vr-select option { color: #1E2A36; background: #fff; }

.vr-num {
  font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: 18px; letter-spacing: .5px;
  padding: 8px 14px; border-radius: 10px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
}

/* Mientras se corrige una comanda guardada, el número de la cabecera es el de ESA
   comanda, y va en ámbar para que se lea como un estado y no como un contador. El
   número solo, sin nada que lo distinga, fue lo que hizo dudar al dueño
   (22-sep-2026): la esquina decía #0005 y en pantalla estaban los datos de la #0004. */
.vr-num-edi { background: #F5B942; border-color: #F5B942; color: #3A2A00; }
.vr-num-tag {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
  color: #FFE1A8; margin-left: -6px;
}

/* .btn de dashboard.css está pensado para la barra clara del dashboard: sobre
   el azul oscuro de aquí hereda bien, pero necesita la altura de tableta. */
.vr-btn {
  font-family: inherit; font-weight: 700; font-size: 15px;
  min-height: 44px; padding: 0 18px; border-radius: 11px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14); color: #fff;
  transition: background .12s, transform .08s;
}
.vr-btn:active { transform: translateY(1px); background: rgba(255,255,255,.26); }
.vr-btn:disabled { opacity: .45; cursor: not-allowed; }
.vr-btn-ghost { background: rgba(255,255,255,.10); }
.vr-btn-sm { min-height: 44px; font-size: 14px; padding: 0 14px; }
.vr-btn-mini { min-height: 44px; min-width: 48px; padding: 0 12px; font-size: 16px; }
.vr-btn-primary {
  background: linear-gradient(180deg, #21A6DC, var(--azul));
  border-color: #1790c4; box-shadow: 0 3px 12px rgba(27,150,200,.35);
}
.vr-btn-primary:active { background: #1690b8; }
.vr-btn-wa {
  background: linear-gradient(180deg, #3FC463, #25A047);
  border-color: #1f8f3d; box-shadow: 0 3px 12px rgba(37,160,71,.32);
}

/* ── Cuerpo: dos paneles ──────────────────────────────────────────────────── */
.vr-main {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  min-height: 0;              /* sin esto, el grid desborda en vez de encoger */
  overflow: hidden;
}
.vr-panel {
  display: flex; flex-direction: column; min-height: 0;
  background: #fff; border-radius: var(--radio);
  box-shadow: var(--sombra); overflow: hidden;
}

/* ── Panel de artículos ───────────────────────────────────────────────────── */
.vr-buscador { position: relative; padding: 12px 12px 8px; }
.vr-lupa {
  position: absolute; left: 26px; top: 50%; transform: translateY(-40%);
  font-size: 19px; opacity: .5; pointer-events: none;
}
.vr-q {
  width: 100%; min-height: 60px; padding: 0 46px 0 52px;
  font-size: 19px; font-weight: 600; font-family: inherit;
  border: 2px solid var(--borde); border-radius: 13px; background: #F8FAFC; color: var(--texto);
  transition: border-color .15s, background .15s;
}
.vr-q:focus { outline: none; border-color: var(--azul); background: #fff; }
.vr-q-clear {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: #E7EEF4; color: #4A5A69; font-size: 22px; line-height: 1; font-weight: 700;
}
.vr-q-clear:active { background: #d5e2ea; }

.vr-meta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 2px 16px 10px;
}
.vr-meta { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.vr-chk {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--muted); font-weight: 600; min-height: 36px; cursor: pointer;
}
.vr-chk input { width: 20px; height: 20px; accent-color: var(--azul); }

.vr-lista-art { flex: 1 1 auto; overflow-y: auto; padding: 0 10px 10px; -webkit-overflow-scrolling: touch; }

.vr-art {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; margin-bottom: 7px; min-height: 68px;
  border: 1px solid var(--borde); border-radius: 12px; background: #fff;
  font-family: inherit; text-align: left; cursor: pointer;
  transition: background .1s, border-color .1s, transform .07s;
}
.vr-art:active { background: var(--azul-claro); border-color: var(--azul); transform: scale(.995); }
.vr-art.agotado { opacity: .55; cursor: not-allowed; background: #FAFBFC; }
.vr-art.sinprecio { cursor: not-allowed; }
.vr-art-izq { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vr-art-des {
  font-size: 15.5px; font-weight: 700; color: var(--texto); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vr-art-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vr-art-cod {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 12.5px; font-weight: 700; color: var(--azul-osc);
  background: var(--azul-claro); padding: 2px 7px; border-radius: 6px;
}
.vr-art-gru { font-size: 12px; color: var(--muted); font-weight: 600; }
.vr-art-der { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }
.vr-art-pre { font-size: 17px; font-weight: 800; color: var(--texto); font-variant-numeric: tabular-nums; }
.vr-art-sinp { font-size: 13px; font-weight: 700; color: var(--negativo); }
.vr-art-exi { font-size: 12.5px; font-weight: 700; color: var(--positivo); white-space: nowrap; }
.vr-art-exi.bajo { color: #C88A15; }
.vr-art-exi.cero { color: var(--negativo); }

.vr-mas {
  margin: 0 12px 12px; min-height: 46px; border-radius: 11px; cursor: pointer;
  border: 1px dashed var(--borde); background: #F8FAFC; color: var(--azul-osc);
  font-family: inherit; font-weight: 700; font-size: 14px;
}
.vr-mas:active { background: var(--azul-claro); }

/* ── Panel de la comanda ──────────────────────────────────────────────────── */
.vr-panel-com { background: linear-gradient(180deg, #fff, #FBFDFE); }

.vr-cliente { padding: 12px 12px 10px; border-bottom: 1px solid var(--borde); position: relative; }
.vr-cli-row { display: flex; gap: 8px; margin-bottom: 8px; }
.vr-cli-row:last-child { margin-bottom: 0; }

/* Envoltura de cada campo de la ficha, para colgar la ✕ de limpiar DENTRO del
   campo. Va superpuesta a propósito: no consume ancho y no empuja el layout
   cuando se abre el teclado en pantalla de la tableta. */
.vr-campo { position: relative; display: flex; flex: 1 1 0; min-width: 0; }
.vr-campo-nom { flex: 1 1 auto; }
.vr-campo > input { width: 100%; padding-right: 50px; }

.vr-cli-nom {
  min-height: 54px; padding: 0 14px; font-size: 17px; font-weight: 700;
  font-family: inherit; border: 2px solid var(--borde); border-radius: 12px; background: #F8FAFC;
}
.vr-cli-nom:focus { outline: none; border-color: var(--azul); background: #fff; }
.vr-cli-mini {
  min-height: 48px; padding: 0 12px; font-size: 15px; font-weight: 600;
  font-family: inherit; border: 1px solid var(--borde); border-radius: 11px; background: #F8FAFC;
}
.vr-cli-mini:focus { outline: none; border-color: var(--azul); background: #fff; }

/* La ✕ sólo aparece cuando hay algo que borrar: en un campo vacío sería ruido,
   y en una tableta un blanco que no hace nada invita a tocarlo sin querer. */
.vr-campo-x {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 10px; border: none; cursor: pointer;
  background: #FDEEEE; color: var(--negativo); font-size: 20px; font-weight: 700; line-height: 1;
  display: none;
}
.vr-campo.con-texto .vr-campo-x { display: block; }
.vr-campo-x:active { background: #f9dcdc; }

.vr-cli-sug {
  position: absolute; left: 12px; right: 12px; top: 74px; z-index: 30;
  background: #fff; border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(11,72,112,.18); max-height: 300px; overflow-y: auto;
}
.vr-sug {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 11px 14px; min-height: 52px; border: none; border-bottom: 1px solid var(--borde);
  background: none; font-family: inherit; cursor: pointer;
}
.vr-sug:last-child { border-bottom: none; }
.vr-sug:active { background: var(--azul-claro); }
.vr-sug-nom { font-size: 15px; font-weight: 700; color: var(--texto); }
.vr-sug-sub { font-size: 12.5px; color: var(--muted); font-weight: 600; }

.vr-lista-com { flex: 1 1 auto; overflow-y: auto; padding: 10px; -webkit-overflow-scrolling: touch; }

.vr-linea {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto auto;
  gap: 8px; align-items: center;
  padding: 9px 10px; margin-bottom: 7px;
  border: 1px solid var(--borde); border-radius: 12px; background: #fff;
  box-shadow: 0 1px 2px rgba(11,72,112,.04);
}
.vr-linea-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vr-linea-des {
  font-size: 14.5px; font-weight: 700; color: var(--texto); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vr-linea-cod {
  font-family: ui-monospace, Consolas, monospace; font-size: 11.5px;
  color: var(--muted); font-weight: 700;
}

.vr-linea-cant { display: flex; align-items: center; gap: 4px; }
.vr-step {
  width: 46px; height: 46px; border-radius: 11px; border: 1px solid var(--borde);
  background: #F1F6FA; color: var(--azul-osc); font-size: 24px; font-weight: 800;
  line-height: 1; cursor: pointer; font-family: inherit;
}
.vr-step:active { background: var(--azul-claro); border-color: var(--azul); }
.vr-linea-inp {
  width: 66px; height: 46px; text-align: center; font-size: 16px; font-weight: 800;
  font-family: inherit; border: 1px solid var(--borde); border-radius: 11px;
  font-variant-numeric: tabular-nums; background: #fff;
}
.vr-linea-inp:focus { outline: none; border-color: var(--azul); }

.vr-linea-imp { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 82px; }
.vr-linea-pre { font-size: 12px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.vr-linea-sub { font-size: 16px; font-weight: 800; color: var(--texto); font-variant-numeric: tabular-nums; }

/* ── La lista de precio del renglón ───────────────────────────────────────── */
/* La etiqueta que dice con qué lista se vendió ESTE artículo. Se ve siempre que
   haya algo que elegir, y se toca para cambiarla. */
.vr-linea-lista {
  align-self: flex-start; margin-top: 4px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--borde); background: #F1F6FA;
  color: var(--azul-osc); font-family: inherit;
  font-size: 11.5px; font-weight: 800; letter-spacing: .3px;
}
.vr-linea-lista:active { background: var(--azul-claro); border-color: var(--azul); }
/* Precio fijo del cliente: no se elige, así que no se pinta como botón —
   pintarlo igual invitaría a tocarlo y a creer que la pantalla no responde. */
.vr-linea-lista.fija {
  cursor: default; background: #FFF6E5; border-color: #F0D9A8; color: #8A5A00;
}

/* Las listas disponibles para ese renglón, con el precio de cada una. Ocupa la
   fila entera de la rejilla de .vr-linea (ver grid-template-columns). */
.vr-linea-opciones {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.vr-opcion {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 6px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--borde); background: #fff; font-family: inherit;
}
.vr-opcion:active { background: var(--azul-claro); }
.vr-opcion.activa { border-color: var(--azul); background: var(--azul-claro); }
/* Sin precio en esa lista: se DESHABILITA en vez de esconderse. Una lista que
   desaparece según el artículo desconcierta más que una que dice "Sin precio". */
.vr-opcion.sinprecio { opacity: .45; cursor: not-allowed; }
.vr-opcion-l { font-size: 12.5px; font-weight: 800; color: var(--azul-osc); }
.vr-opcion-p { font-size: 13.5px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.vr-linea-x {
  width: 40px; height: 40px; border-radius: 10px; border: none; cursor: pointer;
  background: #FDEEEE; color: var(--negativo); font-size: 20px; font-weight: 700; line-height: 1;
}
.vr-linea-x:active { background: #f9dcdc; }

/* ── Pie: total y acciones ────────────────────────────────────────────────── */
/* Cuelga de la rejilla de .vr-main (NO de un panel): en horizontal ocupa la
   columna 2, justo debajo de la comanda; en vertical se pega al borde inferior
   de la pantalla mientras se recorre el catálogo. */
.vr-pie {
  grid-column: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: var(--radio);
  background: #fff; box-shadow: var(--sombra);
}
.vr-totales { display: flex; flex-direction: column; line-height: 1.1; }
.vr-tot-lbl { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.vr-tot {
  font-size: 34px; font-weight: 800; color: var(--azul-osc);
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.vr-tot-sub { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.vr-acciones { display: flex; gap: 8px; align-items: center; }
.vr-acciones .vr-btn-primary { min-height: 56px; font-size: 16px; padding: 0 24px; }

/* "Nueva": empezar una comanda desde cero. Va en el pie, junto a Guardar,
   porque es la otra acción que se usa todo el tiempo; el "＋" y el texto en
   voz activa la distinguen de un simple "Limpiar", que no decía nada. */
.vr-btn-nueva {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--azul-osc); border: 2px solid var(--borde);
  min-height: 56px; padding: 0 20px; font-size: 16px;
}
.vr-btn-nueva:hover { border-color: var(--azul); background: var(--azul-claro); }
.vr-btn-nueva:active { background: #d9edf6; }
.vr-btn-nueva .vr-btn-ico { font-size: 19px; font-weight: 800; line-height: 1; }

/* El aviso de la comanda (artículo quitado, existencia insuficiente…). */
.vr-nota {
  margin: 0 10px 8px; padding: 9px 12px; border-radius: 10px;
  background: #FFF6E5; border: 1px solid #F3D9A4; color: #8A5B00;
  font-size: 13px; font-weight: 600;
}

/* ── Estados vacíos ───────────────────────────────────────────────────────── */
.vr-vacio {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 180px; padding: 30px 20px; text-align: center;
  color: var(--muted); font-size: 15px; font-weight: 600;
}
.vr-vacio-ico { font-size: 40px; opacity: .55; }

/* ── Modales ──────────────────────────────────────────────────────────────── */
.vr-modal {
  position: fixed; inset: 0; z-index: 2300;
  background: rgba(11, 42, 66, .5); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.vr-modal-caja {
  background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  width: min(860px, 100%); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
}
.vr-modal-caja-ok { width: min(460px, 100%); padding: 30px 26px; text-align: center; align-items: center; }
.vr-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--borde);
}
.vr-modal-head h2 { margin: 0; font-size: 19px; }
.vr-modal-x {
  width: 44px; height: 44px; border-radius: 11px; border: none; cursor: pointer;
  background: #F1F6FA; color: var(--texto); font-size: 26px; line-height: 1; font-weight: 700;
}
.vr-modal-x:active { background: #e2ecf3; }

.vr-modal-filtros {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--borde); background: #FAFCFE;
}
.vr-modal-filtros input[type="search"],
.vr-modal-filtros input[type="date"],
.vr-modal-filtros select {
  min-height: 44px; padding: 0 12px; font-size: 14px; font-family: inherit; font-weight: 600;
  border: 1px solid var(--borde); border-radius: 10px; background: #fff;
}
.vr-modal-filtros input[type="search"] { flex: 1 1 220px; }
.vr-modal-filtros label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); font-weight: 600; }
.vr-modal-filtros .vr-btn { background: var(--azul); border-color: var(--azul); }

.vr-modal-lista { overflow-y: auto; padding: 10px; flex: 1 1 auto; }
.vr-com {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; padding: 12px 14px; min-height: 68px; margin-bottom: 7px;
  border: 1px solid var(--borde); border-radius: 12px; background: #fff;
  font-family: inherit; cursor: pointer;
}
.vr-com:active { background: var(--azul-claro); }
.vr-com-izq { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vr-com-num { font-size: 13px; font-weight: 800; color: var(--azul-osc); font-variant-numeric: tabular-nums; }
.vr-com-cli { font-size: 15.5px; font-weight: 700; color: var(--texto); }
.vr-com-sub { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.vr-com-der { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.vr-com-tot { font-size: 18px; font-weight: 800; color: var(--texto); font-variant-numeric: tabular-nums; }
.vr-com-tag {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 20px; background: #E8F6EE; color: #1B7A45;
}
.vr-com-tag-warn { background: #FFF6E5; color: #8A5B00; }
/* Quién tiene la comanda abierta ahora mismo. Va en azul de la casa y no en ámbar:
   no es una advertencia sobre el pedido, es información sobre quién trabaja en él. */
.vr-com-tag-bloq { background: var(--azul-claro); color: var(--azul-osc); text-transform: none; }

.vr-modal-detalle {
  border-top: 2px solid var(--borde); padding: 14px 18px; overflow-y: auto; max-height: 46vh;
  background: #FAFCFE;
}
.vr-det-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vr-det-head h3 { margin: 0; font-size: 17px; }
.vr-det-acciones { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.vr-det-acciones .vr-btn { background: var(--azul); border-color: var(--azul); white-space: nowrap; }
.vr-ok-ref { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
/* Se corrigió una comanda que ya se había enviado: el cliente tiene en el teléfono
   la versión anterior. Mismo ámbar que los demás avisos que piden hacer algo. */
.vr-ok-aviso {
  margin-top: 8px; background: #FFF6E5; border: 1px solid #F3D9A4; color: #8A5B00;
  padding: 8px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 700;
}
.vr-det-bloq {
  background: var(--azul-claro); border: 1px solid #C7DCF6; color: var(--azul-osc);
  padding: 8px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 600; margin-bottom: 10px;
}
.vr-det-meta { font-size: 13px; color: var(--muted); font-weight: 600; margin: 6px 0 10px; }
.vr-det-nota {
  background: #FFF6E5; border: 1px solid #F3D9A4; color: #8A5B00;
  padding: 8px 11px; border-radius: 9px; font-size: 13px; font-weight: 600; margin-bottom: 10px;
}
.vr-det-linea {
  display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: 14px;
}
.vr-det-cant { font-weight: 800; color: var(--azul-osc); font-variant-numeric: tabular-nums; }
.vr-det-des { font-weight: 600; }
.vr-det-sub { font-weight: 700; font-variant-numeric: tabular-nums; }
.vr-det-total {
  display: flex; justify-content: space-between; padding: 12px 0 4px;
  font-size: 19px; font-weight: 800; color: var(--azul-osc);
}

.vr-ok-ico {
  width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #E8F6EE; color: var(--positivo); font-size: 40px; font-weight: 800; margin-bottom: 14px;
}
.vr-modal-caja-ok h2 { margin: 0 0 8px; font-size: 22px; }
.vr-ok-sub { margin: 0 0 20px; font-size: 16px; color: var(--muted); font-weight: 600; }
.vr-ok-sub strong { color: var(--azul-osc); font-size: 19px; }
.vr-ok-nota {
  margin-top: 10px; padding: 9px 12px; border-radius: 10px; text-align: left;
  background: #FFF6E5; border: 1px solid #F3D9A4; color: #8A5B00; font-size: 13px; font-weight: 600;
}
.vr-ok-acciones { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.vr-ok-acciones .vr-btn { min-height: 56px; font-size: 16px; width: 100%; }

/* ── Tabletas estrechas ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vr-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* La línea NO se reacomoda aquí: el botón × se metía en una fila propia a
     todo lo ancho y se leía como una barra de error rosa debajo de cada
     artículo. En una tableta el ancho de la comanda alcanza para las 4
     columnas, así que se quedan como en el diseño base. */
  .vr-lista-com { padding: 8px; }
  .vr-linea { padding: 8px 8px; gap: 6px; }
  .vr-linea-imp { min-width: 72px; }
  .vr-linea-sub { font-size: 15px; }
}

/* ── TABLETA EN VERTICAL ────────────────────────────────────────────────────
   La tableta se va a usar en las dos orientaciones, así que el vertical no
   puede ser el horizontal encogido: a 768 px de ancho, dos columnas dejan el
   catálogo en ~400 px y la comanda en ~300, y ninguna de las dos alcanza para
   trabajar con el dedo.

   En vertical la pantalla pasa a ser UNA SOLA COLUMNA que se desplaza, con el
   orden de uso real: buscar arriba, comanda abajo. El pie (Total + Guardar)
   pasa a `sticky`: se queda pegado al borde inferior mientras se recorre el
   catálogo, para que el total siempre esté a la vista sin dejar de poder
   desplazarse por la lista.

   El bloqueo de scroll de .vr-body se levanta SOLO aquí: en horizontal el
   scroll vive dentro de cada lista, y en vertical la página entera es la que
   scrollea. */
@media (orientation: portrait) {
  .vr-body { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  .vr-main {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    min-height: 0;
    overflow: visible;
    gap: 10px;
    padding: 10px;
  }
  .vr-panel { min-height: 0; }
  .vr-panel-art { height: auto; }
  /* La lista de artículos se acota a la altura de la pantalla: sin esto, los
     resultados de una búsqueda empujan la comanda kilómetros hacia abajo y el
     pie pegajoso taparía media pantalla.
     El tope está calculado para que quepa además la FICHA DEL CLIENTE: la
     vendedora teclea el nombre y busca el artículo en el mismo gesto, así que
     las dos cosas tienen que verse a la vez. Con el buscador vacío la lista ni
     se acerca al tope —son cinco renglones—; el tope solo actúa al buscar. */
  .vr-lista-art { max-height: 34vh; }
  .vr-lista-com { max-height: 60vh; }

  /* Pero la lista CORTA —la de más vendidos, con el buscador vacío— no se acota
     como una búsqueda: son cinco renglones y tienen que verse enteros. Si se
     cortara, la vendedora tendría que hacer scroll dentro de una lista de cinco,
     que es exactamente lo que este atajo viene a evitar. */
  .vr-lista-art.corta { max-height: 42vh; }

  /* Pegado abajo: el total siempre a la vista mientras se busca. El margen
     inferior deja ver la barra del navegador y no deja el borde pegado. */
  .vr-pie {
    grid-column: 1;
    position: sticky;
    bottom: 8px;
    z-index: 20;
    flex-wrap: wrap;
  }
  .vr-tot { font-size: 30px; }
  .vr-acciones { flex: 0 0 auto; }

  /* En vertical sobra ancho: los controles pueden ser más generosos. */
  .vr-step { width: 52px; height: 52px; }
  .vr-linea-inp { width: 74px; height: 52px; font-size: 17px; }
  .vr-linea { grid-template-columns: minmax(0,1fr) auto auto auto; }

  .vr-cli-sug { top: 76px; }
  .vr-modal-filtros input[type="search"] { flex: 1 1 100%; }

  /* El aviso (toast) vive pegado abajo y en vertical tapaba justo el botón
     Guardar, que es lo único que no se puede tapar: en vertical se sube por
     encima del pie. */
  .vr-body .toast { bottom: 108px; }
}

/* En vertical y con poca altura (tableta pequeña en vertical) el rótulo de la
   vendedora se cae antes que el selector: el nombre es lo que se lee, la
   etiqueta no aporta. */
@media (orientation: portrait) and (max-width: 900px) {
  .vr-sub { display: none; }
  .vr-vend-lbl { display: none; }
  .vr-tot { font-size: 26px; }
  /* Tableta estrecha en vertical: menos pantalla, así que la lista cede antes
     para que la ficha del cliente siga a la vista. */
  .vr-lista-art { max-height: 28vh; }
}

/* ── Pantalla de acceso ───────────────────────────────────────────────────────
   La tableta es su propio mundo: aquí se entra con el usuario y la contraseña del
   sistema, no con la sesión del dashboard. Tapa todo lo demás mientras se pide,
   porque no hay nada que enseñar hasta que se sepa quién está vendiendo — y en un
   mostrador la pantalla la ve el cliente.

   Los campos van a 56px de alto: es el primer contacto del turno y el sitio donde
   un control pequeño cuesta más caro. */
.vr-acceso {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(180deg, var(--azul-osc), var(--azul));
}

.vr-acceso.hidden { display: none; }

.vr-acceso-caja {
  width: 100%;
  max-width: 380px;
  padding: 28px 26px 22px;
  border-radius: var(--radio);
  background: #fff;
  box-shadow: var(--sombra);
}

.vr-acceso-marca {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: center;
  color: var(--azul-osc);
}

.vr-acceso-sub {
  margin: 2px 0 22px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}

.vr-acceso-campo { display: block; margin-bottom: 14px; }

.vr-acceso-campo > span {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.vr-acceso-campo input {
  width: 100%;
  height: 56px;
  padding: 0 14px;
  font: inherit;
  font-size: 18px;
  border: 2px solid var(--borde);
  border-radius: 13px;
  background: #F8FAFC;
  color: var(--texto);
}

.vr-acceso-campo input:focus {
  outline: none;
  border-color: var(--azul);
  background: #fff;
}

/* El error va pegado a los campos y no en un toast: si se va solo, quien lo
   leyó tarde no sabe por qué no entró. */
.vr-acceso-error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #8A3030;
  background: #FBE6E6;
}

.vr-acceso-error.hidden { display: none; }

.vr-btn-acceso {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 13px;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  background: var(--azul);
  cursor: pointer;
}

.vr-btn-acceso:active { transform: scale(.99); }
.vr-btn-acceso:disabled { opacity: .6; cursor: default; }

.vr-acceso-pie {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}