/* Zoom de los visores de imágenes (zoom.js): el del panel (.im-visor) y el de
   la página pública (.pp-lightbox). Mismos colores que esos dos visores
   —blanco sobre el velo negro—, así que se ve igual en los cuatro temas y con
   cualquier paleta de la página pública. */

.zoom-lienzo {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.zoom-lienzo img { max-width: 100%; max-height: 100%; }

/* Ampliada: el lienzo scrollea (con el dedo, o arrastrando con el mouse). */
.es-ampliada { cursor: default; }
.es-ampliada .zoom-lienzo {
  align-items: flex-start; justify-content: flex-start;
  overflow: auto; cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.es-ampliada .zoom-lienzo.es-arrastrando { cursor: grabbing; }
/* margin: auto centra la imagen si es más chica que la pantalla en algún
   sentido, y a diferencia de justify/align center NO corta el borde de arriba
   o de la izquierda cuando es más grande. */
.es-ampliada .zoom-lienzo img {
  max-width: none; max-height: none;
  flex-shrink: 0; margin: auto; border-radius: 0;
}

.zoom-controles {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, .6);
}
.zoom-controles button {
  min-width: 40px; height: 40px; padding: 0 8px;
  background: transparent; border: 0; border-radius: 999px;
  color: #fff; font-size: 20px; line-height: 1; cursor: pointer; opacity: .85;
  font-family: inherit;
}
.zoom-controles button:hover:not(:disabled) { opacity: 1; }
.zoom-controles button:disabled { opacity: .3; cursor: default; }
.zoom-controles .zoom-nivel { font-size: 13px; min-width: 72px; }