/* ------------------------------------------------------------------
   CAJA DEL VENDEDOR (POS) · js/mod-caja.js
   Copia la muestra aprobada por Luis el 28-oct-2026:
   herramientas/muestras/caja-pos.html («perfecto, me encanta»).
   Los botones y los sellos son los del sistema (css/vidrio.css, la misma
   familia de la muestra); aquí va lo propio de la pantalla. Todo nombre
   de primer nivel empieza por «caja». Se carga después de vidrio.css.
------------------------------------------------------------------- */
/* lo que el script esconde con «hidden» se esconde de verdad (el display de las clases le ganaba) */
#sec-caja [hidden]{display:none !important}
#sec-caja .num,.caja-velo .num{font-variant-numeric:tabular-nums}
/* las medidas de la muestra (vidrio.css las tiene un poco más chicas) */
#sec-caja .btn.grande,.caja-velo .btn.grande{min-height:56px;font-size:1.08rem;padding:0 1.5rem}
#sec-caja .btn.redondo{width:40px;min-height:40px;padding:0}
.caja-ancho{width:100%}

/* ---------- la franja de la caja (la cabecera de la muestra) ---------- */
.caja-estado{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;min-height:44px}
.caja-estado small{color:var(--tinta-3);font-size:.8rem}
.caja-estado .caja-der{margin-left:auto;display:flex;align-items:center;gap:10px}
.caja-estado .sello{text-transform:none}
/* el punto del sello, como en la muestra (estilos.css le pisaba el fondo a .sello.verde) */
#sec-caja .sello{background:radial-gradient(circle at .7rem 50%, currentColor 0 3.5px, transparent 4px) no-repeat, var(--sello-fondo)}
.caja-aviso-base{flex-basis:100%;font-size:.86rem;color:var(--ambar);background:#fbefd6;border-radius:14px;padding:10px 12px}

/* ---------- zona de trabajo ---------- */
.caja-mesa{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
.caja-mesa>*{min-width:0}
@media (max-width:900px){ .caja-mesa{grid-template-columns:minmax(0,1fr)} }
.caja-tarjeta{background:#fff;border-radius:22px;box-shadow:0 1px 2px rgba(23,19,65,.06), 0 8px 22px rgba(23,19,65,.05)}

.caja-buscador{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:999px;background:#fff;
  box-shadow:0 1px 2px rgba(23,19,65,.06), 0 8px 22px rgba(23,19,65,.06)}
.caja-buscador>svg{width:20px;height:20px;color:var(--tinta-3);flex:none}
.caja-buscador input{flex:1;border:0;outline:0;font:500 1.02rem/1 var(--ui);min-height:44px;background:transparent;min-width:0;color:var(--tinta)}
.caja-buscador:focus-within{box-shadow:0 0 0 2px rgba(72,57,255,.45), 0 8px 22px rgba(23,19,65,.06)}
.caja-buscador .btn svg{width:18px;height:18px}
.caja-pista{margin:8px 6px 16px;color:var(--tinta-3);font-size:.84rem}
.caja-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
@media (max-width:520px){ .caja-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -18px 14px;padding:2px 18px} .caja-chips::-webkit-scrollbar{display:none} .caja-chips .chip{flex:none} }

.caja-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.caja-prod{text-align:left;border:0;cursor:pointer;padding:14px;border-radius:20px;background:#fff;display:flex;flex-direction:column;gap:6px;
  font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 2px rgba(23,19,65,.06), 0 6px 18px rgba(23,19,65,.05);transition:transform .09s ease-out, box-shadow .15s ease-out}
.caja-prod:active{transform:scale(.97)}
.caja-prod:focus-visible{outline:3px solid rgba(72,57,255,.45);outline-offset:2px}
.caja-prod[aria-disabled="true"]{cursor:not-allowed;opacity:.55}
@media (hover:hover) and (pointer:fine){ .caja-prod:not([aria-disabled="true"]):hover{box-shadow:0 2px 4px rgba(23,19,65,.08), 0 12px 26px rgba(23,19,65,.09)} }
.caja-prod .caja-foto{height:84px;border-radius:14px;background:linear-gradient(135deg,#efeefe,#f8f7ff);display:grid;place-items:center;color:#9a95d8;overflow:hidden}
.caja-prod .caja-foto svg{width:38px;height:38px}
.caja-prod .caja-foto img{max-height:76px;max-width:90%;object-fit:contain}
.caja-prod b{font-size:.95rem;line-height:1.25}
.caja-prod .caja-fila{display:flex;align-items:center;justify-content:space-between;gap:6px}
.caja-prod .caja-precio{font:700 1.05rem/1 var(--ui);white-space:nowrap}   /* el «$» no se separa del monto (teléfono, 30-oct) */
.caja-prod small{color:var(--tinta-3);font-size:.78rem}
.caja-vacio{color:var(--tinta-3);font-size:.9rem;text-align:center;padding:18px 0}
.caja-grilla .caja-vacio{grid-column:1/-1}
@media (max-width:520px){ .caja-grilla{grid-template-columns:repeat(2,minmax(0,1fr))} .caja-prod b{overflow-wrap:anywhere} }

/* ---------- el carrito ---------- */
.caja-carrito{position:sticky;top:132px;padding:18px;display:flex;flex-direction:column;gap:14px}
@media (max-width:900px){ .caja-carrito{position:static;margin-top:6px} }
.caja-carrito h2{font:700 1.1rem/1.2 var(--ui);display:flex;align-items:center;justify-content:space-between;margin:0;letter-spacing:0}
.caja-cliente{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:#f6f5fc}
.caja-cliente .caja-av{width:36px;height:36px;border-radius:50%;background:#e9e7ff;color:var(--azul-osc);display:grid;place-items:center;font-weight:700;flex:none}
.caja-cliente .caja-q{flex:1;min-width:0} .caja-cliente .caja-q b{display:block;font-size:.93rem}
.caja-cliente .caja-q small{color:var(--tinta-3);font-size:.78rem}
.caja-cliente .caja-q small.caja-falta-cli{color:var(--ambar);font-weight:600}
.caja-linea{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid #efeef5}
.caja-linea:first-child{border-top:0}
.caja-linea .caja-q{flex:1;min-width:0} .caja-linea .caja-q b{display:block;font-size:.92rem}
.caja-linea .caja-q small{color:var(--tinta-3);font-size:.78rem}
.caja-linea .caja-q a{color:var(--azul-osc);font-weight:600}
.caja-linea .caja-monto{font-weight:700;white-space:nowrap}
.caja-linea.caja-regalo .caja-monto{color:var(--verde)}
.caja-modo{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:999px;background:#efeef6}
.caja-modo button{border:0;cursor:pointer;min-height:40px;border-radius:999px;font:600 .9rem/1 var(--ui);background:transparent;color:var(--tinta-2);
  -webkit-tap-highlight-color:transparent;transition:transform .09s ease-out}
.caja-modo button:active{transform:scale(.97)}
.caja-modo button:focus-visible{outline:3px solid rgba(72,57,255,.45);outline-offset:1px}
.caja-modo button[aria-pressed="true"]{background:#fff;color:var(--tinta);box-shadow:0 1px 3px rgba(23,19,65,.12)}
.caja-total{display:flex;align-items:baseline;justify-content:space-between}
.caja-total span{color:var(--tinta-2)} .caja-total b{font:700 1.7rem/1 var(--ui);letter-spacing:-.02em}
.caja-bs{color:var(--tinta-3);font-size:.82rem;text-align:right;margin-top:-8px}
.caja-pagos h3{font:700 .95rem/1 var(--ui);margin:0 0 8px;letter-spacing:0;text-transform:none;color:var(--tinta)}
.caja-pago{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.caja-pago select,.caja-pago input,.caja-pago-extra input,.caja-pago-extra select,.caja-vend select{min-height:44px;border-radius:14px;border:1.5px solid #e3e2ec;background:#fff;
  font:500 .95rem/1 var(--ui);padding:0 .7rem;min-width:0;color:var(--tinta)}
.caja-pago select{flex:1.2} .caja-pago input{flex:1;text-align:right}
.caja-pago input:focus,.caja-pago select:focus,.caja-pago-extra input:focus{outline:0;border-color:var(--azul)}
.caja-pago-extra{display:flex;flex-direction:column;gap:6px;margin:-2px 0 10px}
.caja-pago-extra input{width:100%;font-size:.9rem}
.caja-pago-extra small{color:var(--tinta-3);font-size:.76rem;padding:0 4px}
.caja-falta{display:flex;justify-content:space-between;font-size:.9rem;padding:10px 12px;border-radius:14px;background:#fbefd6;color:var(--ambar);font-weight:600;margin-top:10px}
.caja-falta.caja-listo{background:#e3f4ea;color:var(--verde)}
.caja-nota-credito{font-size:.88rem;color:var(--tinta-2);background:#f6f5fc;border-radius:14px;padding:12px;line-height:1.45}
.caja-porque{font-size:.8rem;color:var(--tinta-3);text-align:center;margin-top:-6px}
.caja-vend{display:flex;flex-direction:column;gap:6px}
.caja-vend span{font:700 .95rem/1 var(--ui)}

/* ---------- lo vendido hoy ---------- */
.caja-hoy{margin-top:22px;padding:16px 18px}
.caja-hoy h3{font:700 .95rem/1.2 var(--ui);margin:0 0 6px;letter-spacing:0;text-transform:none;color:var(--tinta)}
.caja-hoy ul{list-style:none;margin:0;padding:0}
.caja-hoy li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #efeef5}
.caja-hoy li:first-child{border-top:0}
.caja-hoy li .caja-q{flex:1;min-width:0} .caja-hoy li .caja-q b{display:block;font-size:.9rem}
.caja-hoy li .caja-q small{color:var(--tinta-3);font-size:.78rem}
.caja-hoy li.caja-anulada .caja-q b{text-decoration:line-through;color:var(--tinta-3)}

/* ---------- hoja de vidrio: venta lista ---------- */
.caja-velo{position:fixed;inset:0;background:rgba(23,19,65,.28);display:none;align-items:flex-end;justify-content:center;z-index:60}
.caja-velo.caja-ver{display:flex}
@media (min-width:700px){ .caja-velo{align-items:center} }
.caja-hoja{width:min(520px,100%);background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  border-radius:28px 28px 0 0;padding:22px 20px calc(26px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(23,19,65,.18), inset 0 1px 0 rgba(255,255,255,.9);
  animation:caja-sube .28s ease-out;max-height:92vh;overflow:auto}
@media (min-width:700px){ .caja-hoja{border-radius:28px;padding-bottom:26px} }
@keyframes caja-sube{from{transform:translateY(18px);opacity:.4} to{transform:none;opacity:1}}
.caja-hoja .caja-ok{width:52px;height:52px;border-radius:50%;background:#e3f4ea;color:var(--verde);display:grid;place-items:center;margin-bottom:12px}
.caja-hoja .caja-ok svg{width:28px;height:28px}
.caja-hoja h2{font:700 1.35rem/1.2 var(--ui);letter-spacing:-.02em;margin:0 0 4px}
.caja-hoja p{color:var(--tinta-2);margin:0 0 14px}
.caja-wa{background:#efe7dd;border-radius:18px;padding:14px;margin-bottom:16px;max-height:260px;overflow:auto}
.caja-burbuja{background:#d9fdd3;border-radius:14px 14px 4px 14px;padding:10px 12px;font-size:.88rem;line-height:1.45;white-space:pre-wrap;margin-left:auto;max-width:92%;color:var(--tinta)}
.caja-hoja .caja-acc{display:grid;gap:10px}
.caja-hoja a.btn{text-decoration:none}

/* ---------- el fondo al abrir la caja (dentro de la hoja del sistema) ---------- */
.caja-fondo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:.4rem 0 1rem}
.caja-fondo label{display:flex;flex-direction:column;gap:6px;font:600 .85rem/1.2 var(--ui);color:var(--tinta-2)}
.caja-fondo input{min-height:48px;border-radius:14px;border:1.5px solid #e3e2ec;background:#fff;font:600 1.05rem/1 var(--ui);padding:0 .8rem;text-align:right}
.caja-fondo input:focus{outline:0;border-color:var(--azul)}
.caja-err{color:var(--rojo);font-size:.88rem;margin:.2rem 0 .6rem;min-height:1.2em}
.caja-cli-res{display:flex;flex-direction:column;gap:6px;margin:.6rem 0 1rem}
.caja-cli-res button{text-align:left;border:1px solid var(--linea);border-radius:14px;background:#fff;padding:.7rem .9rem;cursor:pointer;font:inherit;color:inherit;min-height:48px}
.caja-cli-res button b{display:block;font-size:.95rem} .caja-cli-res button span{color:var(--tinta-3);font-size:.8rem}
.caja-cli-res button:active{transform:scale(.98)}
.caja-cli-nuevo{display:grid;gap:8px;margin-top:.4rem}
.caja-cli-nuevo input,.caja-cli-buscar{min-height:46px;border-radius:12px;border:1.5px solid #e3e2ec;background:#fff;font:500 1rem/1 var(--ui);padding:0 .8rem;width:100%}

/* ---------- teléfono: el carrito baja como barra fija (encima de la barra de secciones) ---------- */
.caja-barra-tel{display:none}
@media (max-width:900px){
  #sec-caja.activa .caja-barra-tel{display:flex;position:fixed;left:12px;right:12px;bottom:14px;z-index:43;align-items:center;gap:10px;padding:10px 10px 10px 18px;border-radius:30px;
    background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
    box-shadow:0 10px 30px rgba(23,19,65,.18), inset 0 1px 0 rgba(255,255,255,.85)}
  .caja-barra-tel .caja-t{flex:1} .caja-barra-tel .caja-t small{display:block;color:var(--tinta-3);font-size:.75rem}
  .caja-barra-tel .caja-t b{font-size:1.15rem}
  .caja-estado small{display:none}
  .caja-estado small.caja-siempre{display:inline}
  #sec-caja{padding-bottom:84px}
}
@media (max-width:640px){
  #sec-caja.activa .caja-barra-tel{bottom:calc(var(--abajo-barra) + 10px)}
  #sec-caja{padding-bottom:80px}
}

/* ---------- el botón flotante del vendedor en el teléfono: «Caja» ---------- */
#caja-btn-ir{display:none}
@media (max-width:640px){
  /* el vendedor no cobra: su botón principal pasa de «Borrador» a «Caja» (el borrador sigue en Caja → «A crédito») */
  .topbar:has(#btn-cobrar-ya[hidden]):has(#caja-btn-ir:not([hidden])) #venta-btn-borrador{display:none !important}
  .topbar:has(#btn-cobrar-ya[hidden]) #caja-btn-ir:not([hidden]){
    display:inline-flex;position:fixed;right:22px;bottom:calc(var(--abajo-barra) + 14px);z-index:46;
    min-height:52px;font-size:1.05rem;padding:0 1.5rem;
  }
  #caja-btn-ir svg{width:18px;height:18px}
  /* en la Caja el principal es «Cobrar»: no flota otro */
  #vista-empresa:has(#sec-caja.activa) #caja-btn-ir,
  #vista-empresa:has(#sec-caja.activa) #btn-cobrar-ya,
  #vista-empresa:has(#sec-caja.activa) .topbar:has(#btn-cobrar-ya[hidden]) #venta-btn-borrador{display:none !important}
  /* la pestaña «Caja» va en la barra de abajo del vendedor; dueño y cobranza la tienen en «Más» */
  .navtab[data-sec="caja"]{order:0}
  .navbanda:has(.navtab[data-sec="cobranza"]:not([hidden])) .navtab[data-sec="caja"]{display:none}
  .cab-sec[data-sec-ir="caja"]{display:none}
  #vista-empresa:has(.navtab[data-sec="cobranza"]:not([hidden])):has(.navtab[data-sec="caja"]:not([hidden])) .cab-sec[data-sec-ir="caja"]{display:inline-flex}
}

@media (prefers-reduced-transparency:reduce){
  .caja-hoja,.caja-barra-tel{background:#fff !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
}
@media (prefers-reduced-motion:reduce){
  .caja-prod,.caja-modo button{transition:none}
  .caja-prod:active,.caja-modo button:active{transform:none}
  .caja-hoja{animation:none}
}
/* en el teléfono, la tarjeta deja el precio en una línea y la condición debajo si no cabe */
@media (max-width:480px){ .caja-prod .caja-fila{flex-wrap:wrap;row-gap:.35rem} .caja-prod .caja-precio{font-size:1rem} }