/* ============================================================================
   VISOR DE FOTOS EN GRANDE (lightbox). DISEÑADOR 3.0, 5/10/2026, con el OK de Antonio.
   Pieza común: maquetas-opus/ajustes/visor_comun.py la mete en las maquetas que la piden (producto, directo) y la portada la
   integra otro agente con estas mismas clases. Solo variables de la guía: --bg, --s1, --tx, --tx2, --line2, --acc, --mono, --body.
   Dos piezas:
     1. El DISPARADOR, sobre la miniatura: .vz-disparo (enlace a la foto grande, funciona sin JS) o .vz-boton (botón de ampliar en
        una esquina, para el antes y después, donde tocar mueve el deslizador). Los dos llevan el icono .vz-ico de 44 px.
     2. El VISOR, uno por página: #vz.vz, role="dialog", con la foto contenida, su pie, la X de 48 px y las flechas.
   Estados del visor (clases en .vz): [hidden] cerrado · .vz--abierto · .vz--varias (hay más de una foto: flechas y contador) ·
   .vz--arrastra (deslizando hacia abajo, con --vz-dy) · .vz--zoom (ampliada con dos dedos, con --vz-s, --vz-x, --vz-y) ·
   .vz--carga (la foto grande aún no ha llegado). En <html>: .vz-bloqueo mientras está abierto (sin scroll detrás).
   ============================================================================ */

/* ---------- 1. Disparador sobre la miniatura ---------- */
.vz-disparo{position:relative;display:block;cursor:zoom-in;color:inherit;-webkit-tap-highlight-color:transparent}
.vz-disparo img{display:block}
/* El icono de ampliar: 44 px, en la esquina de abajo a la derecha. Chapa oscura al 78 % con aro blanco: sobre una foto blanca la
   chapa queda en #45494C y el icono blanco da 9,5:1; sobre una negra, el aro blanco da 18:1 con la foto. Igual en los dos temas,
   porque va sobre la foto y no sobre la página. */
.vz-ico{position:absolute;right:10px;bottom:10px;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(16,21,24,.78);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.92),0 2px 10px rgba(0,0,0,.28);color:#fff;pointer-events:none;
  transition:transform .16s ease,background-color .16s ease}
.vz-ico svg{width:20px;height:20px;display:block}
.vz-disparo:hover .vz-ico,.vz-boton:hover{background:rgba(16,21,24,.9);transform:scale(1.06)}
.vz-disparo:focus-visible{outline:none}
.vz-disparo:focus-visible .vz-ico,.vz-boton:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
/* El botón de ampliar del antes y después: es la propia chapa, en la esquina de arriba a la derecha (abajo van «Antes» y
   «Después»). Va FUERA de la caja que arrastra el deslizador, para que pulsarlo no mueva la línea. */
.vz-boton{position:absolute;top:10px;right:10px;z-index:3;width:44px;height:44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;
  background:rgba(16,21,24,.78);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.92),0 2px 10px rgba(0,0,0,.28);color:#fff;cursor:zoom-in;
  transition:transform .16s ease,background-color .16s ease;-webkit-tap-highlight-color:transparent}
.vz-boton .vz-ico{position:static;background:none;box-shadow:none;width:auto;height:auto}
@media (prefers-reduced-motion:reduce){.vz-ico,.vz-boton{transition:none}.vz-disparo:hover .vz-ico,.vz-boton:hover{transform:none}}

/* ---------- 2. El visor ---------- */
html.vz-bloqueo{overflow:hidden}
html.vz-bloqueo body{overflow:hidden}
.vz{position:fixed;inset:0;z-index:2147483000;display:grid;color:var(--tx);font-family:var(--body);
  --vz-dy:0px;--vz-p:0;--vz-s:1;--vz-x:0px;--vz-y:0px;--vz-hueco:clamp(12px,3vw,40px);--vz-lado:clamp(12px,6vw,88px)}
.vz[hidden]{display:none}
/* Fondo: --bg al 92 %, con desenfoque suave. Al deslizar hacia abajo se va aclarando con la distancia. */
.vz-fondo{position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 92%,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(.9);backdrop-filter:blur(10px) saturate(.9)}
.vz--arrastra .vz-fondo{opacity:calc(1 - var(--vz-p,0))}   /* --vz-p, de 0 a .6, lo pone el JS con la distancia */
@supports not (background:color-mix(in srgb,red 50%,blue)){.vz-fondo{background:rgba(16,21,24,.92)}:root[data-theme="light"] .vz-fondo{background:rgba(242,244,245,.92)}}

/* El marco: la foto arriba, el pie debajo; siempre cabe en la pantalla. La X y las flechas van aparte, fijas. */
.vz-marco{position:relative;margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;min-height:0;height:100%;
  padding:calc(var(--vz-hueco) + 56px) var(--vz-lado) calc(var(--vz-hueco) + env(safe-area-inset-bottom,0px));
  transform:translate3d(0,var(--vz-dy),0)}
.vz--arrastra .vz-marco{transition:none}
.vz-marco{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
/* El lienzo: aquí va el pellizco. En la maqueta, touch-action:pinch-zoom deja el pellizco al navegador y nos da el arrastre de un
   dedo (deslizar hacia abajo). En la web, recomendado: .vz--zoom-js con touch-action:none y la escala en la imagen (notas del JS). */
.vz-lienzo{position:relative;min-height:0;display:grid;place-items:center;overflow:hidden;touch-action:pinch-zoom}
.vz--zoom-js .vz-lienzo{touch-action:none}
.vz-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;   /* el JS le pone el ancho y el alto que caben */
  border-radius:4px;
  box-shadow:0 18px 60px rgba(0,0,0,.35);user-select:none;-webkit-user-drag:none;
  transform:translate3d(var(--vz-x),var(--vz-y),0) scale(var(--vz-s));transform-origin:center;will-change:transform}
.vz--zoom .vz-img{cursor:grab}
.vz--carga .vz-img{opacity:.35}
.vz--carga .vz-lienzo::after{content:"";position:absolute;width:28px;height:28px;border-radius:50%;border:2.5px solid var(--line2);border-top-color:var(--tx);animation:vz-gira .8s linear infinite}
@keyframes vz-gira{to{transform:rotate(360deg)}}

/* El pie, SIEMPRE: quién o dónde (Instrument Sans) y el dato (DM Mono), más el contador si hay varias. Sobre el fondo, no sobre la
   foto: --tx y --tx2 sobre --bg dan 14:1 y 7:1 en oscuro y 15:1 y 7:1 en claro. */
.vz-pie{justify-self:center;max-width:min(72ch,100%);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;column-gap:14px;row-gap:4px;text-align:center}
.vz-titulo{font-family:var(--body);font-size:16px;font-weight:600;line-height:1.35;color:var(--tx);letter-spacing:0}
.vz-dato{font-family:var(--mono);font-size:12.5px;font-weight:500;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--tx2)}
.vz-cuenta{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;color:var(--tx2);display:none}
.vz--varias .vz-cuenta{display:inline}

/* La X: 48 px, arriba a la derecha, siempre a mano (también con la muesca del iPhone). */
.vz-cerrar,.vz-flecha{position:absolute;z-index:2;width:48px;height:48px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--s1);color:var(--tx);border:1px solid var(--line2);box-shadow:0 4px 18px rgba(0,0,0,.22);
  transition:background-color .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}
.vz-cerrar{top:calc(var(--vz-hueco) + env(safe-area-inset-top,0px));right:calc(var(--vz-hueco) + env(safe-area-inset-right,0px))}
.vz-cerrar svg{width:22px;height:22px}
.vz-flecha svg{width:22px;height:22px}
.vz-cerrar:hover,.vz-flecha:hover{background:var(--s2)}
.vz-cerrar:focus-visible,.vz-flecha:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
/* Flechas: solo en ordenador y solo con varias fotos. En el táctil se pasa de foto deslizando de lado. */
.vz-flecha{top:50%;margin-top:-24px;display:none}
.vz-ant{left:calc(var(--vz-hueco) + env(safe-area-inset-left,0px))}
.vz-sig{right:calc(var(--vz-hueco) + env(safe-area-inset-right,0px))}
@media (hover:hover) and (pointer:fine){.vz--varias .vz-flecha{display:grid}}
@media (max-width:900px){.vz--comp .vz-flecha{top:calc(50% + 48px)}} /* DISEÑADOR 18/10: no tapan el tirador del antes y después */
.vz-flecha[disabled]{opacity:.35;cursor:default}

/* Teléfono: menos margen a los lados, la foto a todo el ancho y el pie más corto */
@media (max-width:600px){
  .vz{--vz-hueco:10px;--vz-lado:10px}
  .vz-marco{padding-top:calc(10px + 48px + 10px + env(safe-area-inset-top,0px))}
  .vz-img{border-radius:2px}
  .vz-titulo{font-size:15px}
  .vz-dato,.vz-cuenta{font-size:12px}
}

/* Apertura: un fundido corto. Con «Reducir movimiento», sin animación ninguna (ni al abrir, ni al volver del arrastre). */
.vz--abierto .vz-fondo{animation:vz-fundido .18s ease-out}
.vz--abierto .vz-marco{animation:vz-entra .22s cubic-bezier(.2,.8,.2,1)}
@keyframes vz-fundido{from{opacity:0}}
@keyframes vz-entra{from{opacity:0;transform:translate3d(0,12px,0) scale(.985)}}
@media (prefers-reduced-motion:reduce){
  .vz--abierto .vz-fondo,.vz--abierto .vz-marco{animation:none}
  .vz-marco,.vz-cerrar,.vz-flecha{transition:none}
  .vz--carga .vz-lienzo::after{animation-duration:2.4s}
}
/* Modo de alto contraste de Windows: que la X y las chapas sigan teniendo borde */
@media (forced-colors:active){.vz-cerrar,.vz-flecha,.vz-boton,.vz-ico{border:2px solid CanvasText}.vz-fondo{background:Canvas}}

/* ============================================================================
   TEMA processingraw-3 (IMPLEMENTADOR WEB, 5/10/2026). Lo de arriba es la hoja del DISEÑADOR tal cual (data-prw-tema pasa a
   data-theme). Lo de abajo, solo la colocación en las pantallas de la web: inc/visor.php.
   ============================================================================ */

/* Ficha de fotografía, cabecera SIN vídeo ni capítulo abierto: el propio a.marco es el disparador (toda la foto). En ordenador el
   texto de la ficha va encima de la parte de abajo de la foto, así que el icono sube a la esquina de arriba a la derecha. */
@media (min-width:901px){.hv .marco.vz-disparo .vz-ico{top:14px;right:14px;bottom:auto}}

/* Ficha de fotografía, cabecera CON vídeo o capítulo abierto: la foto sigue siendo el «play», y el visor va solo en el botón de
   la esquina, fuera del enlace. En el teléfono la foto es lo último de .hv, así que la esquina de abajo es la suya. */
.hv>.vz-boton{top:14px;right:14px}
@media (max-width:900px){.hv>.vz-boton{top:auto;bottom:10px;right:10px}}
/* Cuando el vídeo ya se ha montado en lugar de la foto, no hay foto que ampliar */
.hv>.prw3-vimeo~.vz-boton{display:none}

/* El antes y después de la ficha, debajo de «De qué va» (maqueta producto: pd-ba) */
.vz-ba{margin:0 0 46px;max-width:66ch}
.vz-ba-tit{font-size:1.125rem;margin:0 0 12px}
.vz-ba .prw3j-ba{margin:0}
.prw3j-ba>.vz-boton{top:10px;right:10px}
/* 5/10 (DISEÑADOR, DPC-1): mientras carga la foto grande, la provisional se ajusta al lienzo (antes, una vertical sin caché salía recortada) */
.vz-lienzo{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.vz--carga .vz-img{width:100%;height:100%;object-fit:contain}
/* ---- Antes y después dentro del visor (comunidad, 11/10/2026): el «antes» va encima de la foto, recortado, con el mismo
   tirador, línea y rótulos del deslizador de la portada. .vz-comp mide lo mismo que la foto (lo pone el JS). ---- */
.vz-comp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none;--x:50%}
.vz-comp[hidden]{display:none}
.vz-comp .vz-antes{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--bg);clip-path:inset(0 calc(100% - var(--x,50%)) 0 0);border-radius:inherit;-webkit-user-drag:none;user-select:none}
.vz-comp .bah{position:absolute;top:0;bottom:0;left:var(--x,50%);width:1px;background:rgba(255,255,255,.8)}
.vz-comp .knob{position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--acc);color:var(--acctx);display:grid;place-items:center;font-weight:700;font-size:1rem;line-height:1;box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(0,0,0,.55);touch-action:none;cursor:ew-resize;pointer-events:auto;user-select:none;-webkit-user-select:none}
.vz-comp .knob:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #101518}
.vz-comp .tg{position:absolute;top:14px;padding:6px 10px;font-family:var(--mono);font-size:0.6875rem;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#fff;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);border-radius:var(--r)}
.vz-comp .tg.a{left:14px}
.vz-comp .tg.b{right:14px}
.vz--carga .vz-comp{visibility:hidden}
@media (max-width:560px){.vz-comp .tg{top:8px;padding:4px 8px;letter-spacing:.1em}.vz-comp .tg.a{left:8px}.vz-comp .tg.b{right:8px}}

/* 17/10 (aviso #11): mientras llega la foto grande se ve la miniatura de la página, entera y sin velo (con la ruedecita) */
.vz--carga.vz--respaldo .vz-img{opacity:1}