/* ═══════════════════════════════════════════════════════════════════════════
   PhotoSwipe — retoques de Weddika

   Va en hoja aparte y NO dentro de photoswipe-default-skin.css a propósito: esa
   es la hoja original de la librería y conviene poder actualizarla sin perder
   los cambios ni tener que adivinar cuáles eran nuestros.

   Se carga en las dos galerías: la de la invitación (Template_es::montaGaleria)
   y la del álbum colaborativo.

   Los selectores llevan `.pswp` delante para ganar por especificidad (0,2,x) a
   la hoja original (0,1,x), y no depender de en qué orden se enlacen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Flechas de navegación ───────────────────────────────────────────────── */
/* Por defecto son un sprite PNG/SVG con una flecha con astil. Aquí se sustituyen
   por un botón redondo con un chevron dibujado con bordes: sin imágenes que
   cargar, nítido en cualquier densidad de pantalla y del tamaño que queramos. */

.pswp .pswp__button--arrow--left,
.pswp .pswp__button--arrow--right {
  width: 76px;
  height: 76px;
  margin-top: -38px;
  background: none;
}

/* El círculo */
.pswp .pswp__button--arrow--left:before,
.pswp .pswp__button--arrow--right:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  /* background completo: anula también el sprite de la hoja original */
  background: rgba(255, 255, 255, .16);
  transition: background .15s;
}
.pswp .pswp__button--arrow--left:hover:before,
.pswp .pswp__button--arrow--right:hover:before {
  background: rgba(255, 255, 255, .28);
}

/* El chevron: dos bordes de un cuadrado girado 45°, sin astil */
.pswp .pswp__button--arrow--left:after,
.pswp .pswp__button--arrow--right:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  border: 2.5px solid #fff;
  border-right: 0;
  border-bottom: 0;
  border-radius: 1px;
}

/* 2px de corrección óptica: un chevron centrado por geometría se ve descentrado */
.pswp .pswp__button--arrow--left:after {
  transform: translate(-40%, -50%) rotate(-45deg);
}
.pswp .pswp__button--arrow--right:after {
  transform: translate(-60%, -50%) rotate(135deg);
}

/* Sin el sprite, el hueco de 6px que dejaba la hoja original ya no hace falta */
.pswp .pswp__button--arrow--left  { left: 4px; }
.pswp .pswp__button--arrow--right { right: 4px; }

@media (max-width: 600px) {
  .pswp .pswp__button--arrow--left,
  .pswp .pswp__button--arrow--right { width: 60px; height: 60px; margin-top: -30px; }
  .pswp .pswp__button--arrow--left:before,
  .pswp .pswp__button--arrow--right:before { width: 40px; height: 40px; }
}