/* ==========================================================================
   estilo-26.css · VENTAS DE RECEPCION (app-97). Code, 18-oct-2026, encargo 961.
   Todo con prefijo .vn- y sobre las variables del marco de recepcion (--o-*,
   estilo-10): el modo nocturno y las paletas de estilo-13/16 lo alcanzan solos.
   Reusa las piezas de Complementos (.cx-*, estilo-19) para encabezado, filtros,
   avisos y vacio: la misma familia en las tres secciones de recepcion.
   Celular primero; la rejilla crece a 2 columnas en 700 y a 3 en 1280.
   ========================================================================== */

.vn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.vn-sinscroll{overflow:hidden}

/* ── La vitrina ─────────────────────────────────────────────────────────── */
.vn-bpant{display:inline-flex;align-items:center;gap:var(--o-e2)}
.vn-grid{display:grid;gap:var(--o-e4);grid-template-columns:1fr}
@media(min-width:700px){.vn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.vn-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vn-card{background:var(--o-super);border:1px solid var(--o-linea);border-radius:16px;
  box-shadow:var(--o-sombra);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.vn-foto{height:180px;background:var(--o-linea) center/cover no-repeat;padding:var(--o-e3);
  display:flex;align-items:flex-start}
@media(min-width:700px){.vn-foto{height:160px}}
.vn-gr{font-size:11px;font-weight:var(--o-fuerte);color:#1F3B4D;background:rgba(255,255,255,.92);
  border-radius:999px;padding:4px 10px;letter-spacing:.06em;text-transform:uppercase}
.vn-cu{padding:var(--o-e3) var(--o-e4) var(--o-e4);display:flex;flex-direction:column;gap:var(--o-e3);flex:1}
.vn-cu h3{margin:0;font-size:var(--o-cuerpo-f);font-weight:var(--o-fuerte);color:var(--o-texto)}
.vn-cu p{margin:var(--o-e1) 0 0;font-size:var(--o-cuerpo);color:var(--o-texto3);line-height:1.45}
.vn-pie{display:flex;align-items:center;justify-content:space-between;gap:var(--o-e2);margin-top:auto}
.vn-pr{display:flex;flex-direction:column;min-width:0}
.vn-pr b{font-size:var(--o-titulo);color:var(--o-texto)}
.vn-pr span{font-size:var(--o-nota);color:var(--o-texto3)}
.vn-pie .ohb{flex:0 0 auto;min-height:44px}

/* La pantalla completa para el huesped: sin menu, sin botones de venta. */
.vn-full{position:fixed;inset:0;z-index:9000;background:var(--o-fondo);overflow:auto;
  padding:calc(var(--o-e5) + env(safe-area-inset-top)) var(--o-e4) calc(var(--o-e6) + env(safe-area-inset-bottom))}
@media(min-width:700px){.vn-full{padding-left:var(--o-e6);padding-right:var(--o-e6)}}
.vn-full-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--o-e3);
  max-width:1280px;margin:0 auto var(--o-e4)}
.vn-full-h{font-size:var(--o-nota);letter-spacing:.08em;text-transform:uppercase;color:var(--o-texto3)}
.vn-full h2{margin:var(--o-e1) 0 0;font-size:var(--o-cifra);font-weight:var(--o-fuerte);color:var(--o-texto)}
.vn-full .cx-chips,.vn-full #vnlistaf{max-width:1280px;margin-left:auto;margin-right:auto}
.vn-full .vn-foto{height:220px}

/* ── Las capas: armar la venta, la liga y las fotos ─────────────────────── */
.vn-capa{position:fixed;inset:0;z-index:8000}
.vn-velo{position:absolute;inset:0;background:rgba(20,32,42,.45)}
.vn-panel{position:absolute;top:0;right:0;bottom:0;width:100%;max-width:540px;
  background:var(--o-super);display:flex;flex-direction:column;box-shadow:var(--o-sombra-alta)}
/* Sin animacion de entrada a proposito: el panel se vuelve a dibujar en cada
   toque (elegir huesped, forma de pago) y la animacion se repetia cada vez. */
.vn-dh{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--o-e3);
  padding:calc(var(--o-e4) + env(safe-area-inset-top)) var(--o-e5) var(--o-e3);border-bottom:1px solid var(--o-linea)}
.vn-dh h2{margin:0;font-size:var(--o-titulo);font-weight:var(--o-fuerte);color:var(--o-texto)}
.vn-dh span{font-size:var(--o-cuerpo);color:var(--o-texto2)}
.vn-cerrar{flex:0 0 auto;width:44px;height:44px;border-radius:var(--o-radio-ctl);border:0;background:none;
  color:var(--o-texto);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.vn-cerrar:hover{background:var(--o-linea)}
.vn-db{flex:1;overflow:auto;padding:var(--o-e4) var(--o-e5);display:flex;flex-direction:column;gap:var(--o-e4)}
.vn-df{padding:var(--o-e3) var(--o-e5) calc(var(--o-e3) + env(safe-area-inset-bottom));border-top:1px solid var(--o-linea);
  display:flex;justify-content:flex-end;gap:var(--o-e3);flex-wrap:wrap}
.vn-df .ohb{min-height:48px}
/* En la columna flex del panel, encabezado y pie no se encogen; el cuerpo es lo que
   hace scroll. Y el buscador de .cx-bus trae flex-basis 260px, que en columna
   seria ALTURA: aqui va a su medida natural. */
.vn-dh,.vn-df{flex:0 0 auto}
.vn-db{min-height:0}
.vn-db>*{flex:0 0 auto}
@media(max-width:560px){.vn-dh,.vn-db,.vn-df{padding-left:var(--o-e4);padding-right:var(--o-e4)}
  .vn-df .ohb{flex:1 1 0}}

.vn-fila{display:flex;align-items:center;justify-content:space-between;gap:var(--o-e2);flex-wrap:wrap}
.vn-lbl{font-size:var(--o-nota);font-weight:var(--o-fuerte);color:var(--o-acento-t);text-transform:uppercase;letter-spacing:.04em}
.vn-seg{display:inline-flex;background:var(--o-linea);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap}
.vn-seg button{min-height:36px;padding:0 var(--o-e3);border-radius:999px;border:0;background:transparent;
  color:var(--o-texto2);font:inherit;font-size:var(--o-cuerpo);cursor:pointer}
.vn-seg button.on{background:var(--o-super);color:var(--o-texto);font-weight:var(--o-fuerte);box-shadow:var(--o-sombra)}
.vn-bus{position:relative}
.vn-ayuda{margin:0;font-size:var(--o-nota);color:var(--o-texto3);line-height:1.45}
.vn-lhue{border:1px solid var(--o-linea);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.vn-hue{display:flex;align-items:center;justify-content:space-between;gap:var(--o-e3);min-height:58px;
  padding:var(--o-e2) var(--o-e3);border:0;border-bottom:1px solid var(--o-linea);background:var(--o-super);
  color:var(--o-texto);font:inherit;text-align:left;cursor:pointer}
.vn-hue:last-child{border-bottom:0}
.vn-hue:hover,.vn-hue.on{background:var(--o-acento-suave)}
.vn-hue>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.vn-hue b{font-size:var(--o-cuerpo-f)}
.vn-hue>span>span{font-size:var(--o-nota);color:var(--o-texto2)}
.vn-cambia{align-self:flex-start}
.vn-et{flex:0 0 auto;font-style:normal;font-size:var(--o-nota);font-weight:var(--o-fuerte);border-radius:999px;
  padding:4px 10px;white-space:nowrap;justify-self:start}
.vn-ok{background:var(--o-bien-suave);color:var(--o-bien)}
.vn-esp{background:rgba(198,120,20,.12);color:var(--o-atencion-t)}
.vn-can{background:var(--o-linea);color:var(--o-texto2)}
.vn-esp-t{color:var(--o-atencion-t)}

.vn-campo{display:flex;flex-direction:column;gap:6px;font-size:var(--o-nota);font-weight:var(--o-fuerte);
  color:var(--o-acento-t);min-width:0}
.vn-campo input,.vn-campo textarea{min-height:44px;border:1px solid var(--o-linea-f);border-radius:var(--o-radio-ctl);
  padding:0 var(--o-e3);font:inherit;font-size:var(--o-cuerpo-f);font-weight:var(--o-normal);color:var(--o-texto);
  background:var(--o-super);width:100%;box-sizing:border-box}
.vn-campo textarea{padding:var(--o-e2) var(--o-e3);resize:vertical;line-height:1.45}
.vn-campo input:focus,.vn-campo textarea:focus{outline:2px solid var(--o-acento);outline-offset:0;border-color:transparent}
.vn-dos{display:grid;grid-template-columns:1fr;gap:var(--o-e3)}
.vn-tres{display:grid;grid-template-columns:1fr 1fr;gap:var(--o-e3)}
.vn-tres>:last-child{grid-column:1/-1}
@media(min-width:480px){.vn-dos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vn-tres{grid-template-columns:repeat(3,minmax(0,1fr))}.vn-tres>:last-child{grid-column:auto}}
.vn-paso{display:flex;align-items:center;gap:var(--o-e1)}
.vn-paso button{width:44px;height:44px;border-radius:var(--o-radio-ctl);border:1px solid var(--o-linea-f);
  background:var(--o-super);color:var(--o-texto);font:inherit;font-size:20px;cursor:pointer}
.vn-paso b{min-width:36px;text-align:center;font-size:18px;color:var(--o-texto)}
.vn-cant{flex-direction:row;align-items:center;justify-content:space-between}
.vn-bien{font-size:var(--o-cuerpo);color:var(--o-bien)}
.vn-mal{font-size:var(--o-cuerpo);color:var(--o-alarma);margin:0}

.vn-fs{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--o-e2)}
.vn-fs legend{padding:0;margin-bottom:var(--o-e2);font-size:var(--o-nota);font-weight:var(--o-fuerte);
  color:var(--o-acento-t);text-transform:uppercase;letter-spacing:.04em}
.vn-ops{display:grid;grid-template-columns:1fr;gap:var(--o-e2)}
@media(min-width:480px){.vn-ops{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vn-op{min-height:70px;padding:var(--o-e3);border-radius:14px;border:1px solid var(--o-linea-f);background:var(--o-super);
  color:var(--o-texto);font:inherit;text-align:left;display:flex;flex-direction:column;gap:4px;cursor:pointer}
.vn-op b{font-size:var(--o-cuerpo)}
.vn-op span{font-size:var(--o-nota);color:var(--o-texto2);line-height:1.35}
.vn-op.on{border:2px solid var(--o-acento);background:var(--o-acento-suave)}
.vn-op[disabled]{opacity:.55;cursor:not-allowed}
.vn-res{background:var(--o-fondo);border-radius:14px;padding:var(--o-e3) var(--o-e4);display:flex;
  justify-content:space-between;align-items:center;gap:var(--o-e3)}
.vn-res span{font-size:var(--o-cuerpo);color:var(--o-texto2)}
.vn-res b{font-size:18px;color:var(--o-texto)}

/* La liga */
.vn-qr{display:flex;gap:var(--o-e4);align-items:center;flex-wrap:wrap}
.vn-qrc{width:176px;height:176px;flex:0 0 auto;border-radius:16px;border:1px solid var(--o-linea);overflow:hidden;background:#fff}
.vn-qrc svg{display:block;width:100%;height:100%}
.vn-qr>div:last-child{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:6px}
.vn-qr p{margin:0;font-size:var(--o-cuerpo);color:var(--o-texto2)}
.vn-url{font-size:var(--o-cuerpo-f);word-break:break-all;color:var(--o-texto)}
.vn-envia{display:flex;flex-direction:column;gap:var(--o-e2)}
.vn-envia .ohb{min-height:48px;justify-content:center;text-decoration:none;width:100%}
.vn-por{background:rgba(198,120,20,.12);border-radius:14px;padding:var(--o-e3) var(--o-e4);display:flex;flex-direction:column;gap:4px;color:var(--o-atencion-t)}
.vn-por span{font-size:var(--o-cuerpo);line-height:1.45}

/* ── El historico ───────────────────────────────────────────────────────── */
.vn-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--o-e3);margin:0 0 var(--o-e5)}
@media(min-width:900px){.vn-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* La tercera tarjeta (la comision) ocupa el renglon entero en telefono y
   tableta: con tres, ningun hueco queda donde estaba la meta (encargo 980). */
@media(max-width:899px){.vn-kpis .vn-k-o{grid-column:1/-1}}
.vn-k{background:var(--o-super);border:1px solid var(--o-linea);border-radius:14px;padding:var(--o-e4);
  display:flex;flex-direction:column;gap:6px;min-width:0}
.vn-k span{font-size:var(--o-nota);color:var(--o-texto3)}
.vn-k b{font-size:26px;color:var(--o-texto)}
.vn-k em{font-style:normal;font-size:var(--o-nota);color:var(--o-texto3)}
.vn-k-o{background-image:var(--gnavy);background-color:var(--navy);border-color:transparent}
.vn-k-o span,.vn-k-o em{color:#C9D3DA}
.vn-k-o b{color:#fff}
.vn-hist{background:var(--o-super);border:1px solid var(--o-linea);border-radius:16px;display:flex;flex-direction:column}
.vn-hr{display:grid;grid-template-columns:1fr auto;gap:var(--o-e1) var(--o-e3);align-items:center;
  padding:var(--o-e3) var(--o-e4);border-top:1px solid var(--o-linea)}
.vn-hr:first-child{border-top:0}
.vn-hcab{display:none}
.vn-hf{grid-column:1/-1;font-size:var(--o-nota);color:var(--o-texto3)}
.vn-hc{display:flex;flex-direction:column;gap:2px;min-width:0}
.vn-hc b{font-size:var(--o-cuerpo-f);color:var(--o-texto)}
.vn-hc span{font-size:var(--o-nota);color:var(--o-texto2)}
.vn-hm{font-size:var(--o-nota);color:var(--o-texto2)}
.vn-ht{font-size:var(--o-cuerpo-f);color:var(--o-texto);text-align:right;grid-row:2;grid-column:2}
.vn-ht.no{color:var(--o-texto3)}
.vn-hr .vn-et{grid-column:1}
.vn-hextra{grid-column:1/-1}
.vn-hac{display:flex;gap:var(--o-e2);flex-wrap:wrap}
.vn-hx{display:flex;flex-direction:column;gap:var(--o-e2);padding-top:var(--o-e2)}
@media(min-width:900px){
  .vn-hr{grid-template-columns:120px minmax(0,1fr) 140px 190px 100px}
  .vn-hcab{display:grid;font-size:var(--o-nota);font-weight:var(--o-fuerte);color:var(--o-texto3);
    text-transform:uppercase;letter-spacing:.04em;padding-top:var(--o-e2);padding-bottom:var(--o-e2)}
  .vn-hcab span:last-child{text-align:right}
  .vn-hf{grid-column:auto;font-size:var(--o-cuerpo)}
  .vn-hm{font-size:var(--o-cuerpo)}
  .vn-ht{grid-row:auto;grid-column:auto}
  .vn-hr .vn-et{grid-column:auto}
  .vn-hextra{grid-column:2/-1}}

/* ── Complementos: la foto en la tarjeta y el editor ────────────────────── */
.vn-cxf{display:flex;align-items:center;gap:var(--o-e3);flex-wrap:wrap;border-top:1px solid var(--o-linea);
  padding-top:var(--o-e3);margin-top:var(--o-e1)}
.vn-cxmini{width:64px;height:48px;border-radius:10px;background:var(--o-linea) center/cover no-repeat;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center}
.vn-sinf{background:rgba(198,120,20,.08);border:2px dashed rgba(198,120,20,.6);font-size:11px;
  font-weight:var(--o-fuerte);color:var(--o-atencion-t)}
.vn-cxt{font-size:var(--o-nota);color:var(--o-texto2);flex:1 1 auto}
.vn-minis{display:flex;gap:var(--o-e2);flex-wrap:wrap}
.vn-mini{position:relative;width:96px;height:72px;border-radius:10px;background:var(--o-linea) center/cover no-repeat}
.vn-mini button{position:absolute;top:2px;right:2px;width:32px;height:32px;border-radius:999px;border:0;
  background:rgba(0,0,0,.55);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.vn-mini button svg{width:16px;height:16px}
.vn-mini em{position:absolute;left:4px;bottom:4px;font-style:normal;font-size:10px;font-weight:var(--o-fuerte);
  color:#1F3B4D;background:rgba(255,255,255,.92);border-radius:999px;padding:2px 6px}
.vn-sube{width:96px;height:72px;border-radius:10px;border:2px dashed var(--o-linea-f);display:inline-flex;
  align-items:center;justify-content:center;font-size:var(--o-nota);font-weight:var(--o-fuerte);color:var(--o-acento-t);cursor:pointer;position:relative}
.vn-sube:focus-within{outline:2px solid var(--o-acento)}