/* ============================================================
   CAJEVA — Visor de fotos (compartido por panel y tienda)
   Lo carga js/visor.js. Solo usa tokens de css/tokens.css.
   ============================================================ */
/* ============================================================
   Visor de fotos: pellizco, doble toque, rueda y arrastre
   El fondo es papel (no negro) porque las fotos de producto
   vienen recortadas en blanco: con multiply se funden sin caja.
   ============================================================ */
html.visor-abierto{overflow:hidden}
.visor{position:fixed;inset:0;z-index:200;isolation:isolate;touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;opacity:0;transition:opacity .16s ease}
.visor.entra{opacity:1}
.visor-fondo{position:absolute;inset:0;background:var(--paper)}
.visor-lienzo{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:zoom-in}
.visor-lienzo.zoom{cursor:grab}
.visor-lienzo.zoom:active{cursor:grabbing}
.visor-foto{position:absolute;top:0;left:0;max-width:none;transform-origin:0 0;mix-blend-mode:multiply;opacity:0;transition:opacity .18s ease;-webkit-user-drag:none}
.visor-foto.lista{opacity:1}
.visor.arrastrando .visor-foto{mix-blend-mode:normal}
.visor-cargando{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid var(--line);border-top-color:var(--olive-700);border-radius:50%;animation:visor-giro .7s linear infinite}
@keyframes visor-giro{to{transform:rotate(360deg)}}
.visor [hidden]{display:none!important}
.visor-ui{position:absolute;inset:0;pointer-events:none}
.visor-ui>*{pointer-events:auto}
.visor-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 14px 30px;background:linear-gradient(rgba(246,244,239,.97),rgba(246,244,239,0));pointer-events:none}
.visor-top>*{pointer-events:auto}
.visor-cuenta{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-soft)}
.visor-cap{flex:1;min-width:0;font-size:12.5px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visor-btn{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--olive-900);font-size:17px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(61,63,34,.13)}
.visor-btn:hover{border-color:var(--olive-700)}
.visor-cerrar{margin-left:auto}
.visor-flecha{position:absolute;top:50%;margin-top:-21px;font-size:22px}
.visor-flecha.ant{left:14px}
.visor-flecha.sig{right:14px}
.visor-pie{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--line);background:var(--white);box-shadow:0 6px 18px rgba(61,63,34,.13)}
.visor-zbtn,.visor-pct{border:0;background:transparent;color:var(--olive-900);font:inherit;border-radius:999px;cursor:pointer}
.visor-zbtn{width:34px;height:34px;font-size:17px;line-height:1}
.visor-pct{min-width:60px;height:34px;font-size:11.5px;font-weight:700;letter-spacing:.05em}
.visor-zbtn:hover,.visor-pct:hover{background:var(--paper)}
.visor-tip{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(68px + env(safe-area-inset-bottom));max-width:88vw;margin:0;padding:9px 15px;border-radius:999px;background:rgba(36,38,26,.86);color:#fff;font-size:11.5px;text-align:center}
@media (max-width:640px){
  .visor-flecha{display:none}
  .visor-btn{width:38px;height:38px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .visor,.visor-foto{transition:none}
}