/* ==========================================================================
   GALLERY MODULE - Frontend styles
   ========================================================================== */

/* Contenedor principal de la galería (módulo en la página) */
.pm-gallery-lightbox {
  position: relative;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  cursor: pointer;
}

/* Figure wrapper */
.pm-gallery-lightbox .pm-item-figure,
.pm-gallery-lightbox .pm-gallery-trigger {
  position: relative;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* Imagen de la galería */
.pm-gallery-lightbox .rw-pm-image,
.pm-gallery-lightbox .pm-gallery-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  box-sizing: border-box;
  transition: opacity 0.3s ease;
}

/* En caso de wrappers con altura explícita (modo full/half) */
.project-module.pm-height-mode-full .pm-gallery-lightbox .rw-pm-image,
.project-module.pm-height-mode-half .pm-gallery-lightbox .rw-pm-image {
  height: 100% !important;
  object-fit: cover;
}

/* Hover effect para indicar que es clickeable */
.pm-gallery-lightbox:hover .rw-pm-image,
.pm-gallery-lightbox:hover .pm-gallery-image {
  opacity: 0.95;
}

/* ==========================================================================
   PM GALLERY LIGHTBOX - Overlay modal (SINCRONIZADO CON RW-LIGHTBOX)
   ========================================================================== */

/* Base del lightbox - Idéntico a .rw-lightbox */
.pm-gallery-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(217, 217, 217, 1);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pm-gallery-lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Overlay de fondo clickeable */
.pm-gallery-lightbox-backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

/* Contenedor principal del lightbox - Idéntico a .rw-lightbox-container */
.pm-gallery-lightbox-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Header del lightbox - Idéntico a .rw-lightbox-header */
.pm-gallery-lightbox-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  z-index: 10;
  background: transparent;
  max-width: 1592px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Logo en el header - Idéntico a .rw-lightbox-logo */
.pm-gallery-lightbox-logo {
  display: inline-block !important;
  width: 125px !important;
  height: 24px !important;
  background-image: url("https://ohlab.rwdesarrollos.es/wp-content/uploads/2025/07/ohlab.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  line-height: 0 !important;
}

/* Botón de cerrar - SVG personalizado con hover background blanco */
.pm-gallery-lightbox-close {
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
}

.pm-gallery-lightbox-close::before {
  content: '';
  width: 38px;
  height: 38px;
  background-image: url('data:image/svg+xml;utf8,<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="37" height="37" rx="18.5" stroke="black"/><path d="M23.2427 14.7574L14.7574 23.2427" stroke="black" stroke-miterlimit="10"/><path d="M14.7574 14.7574L23.2426 23.2427" stroke="black" stroke-miterlimit="10"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: all 0.2s ease;
}

.pm-gallery-lightbox-close:hover::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="37" height="37" rx="18.5" stroke="black" fill="white"/><path d="M23.2427 14.7574L14.7574 23.2427" stroke="black" stroke-miterlimit="10"/><path d="M14.7574 14.7574L23.2426 23.2427" stroke="black" stroke-miterlimit="10"/></svg>');
}

/* Contenido del lightbox - Idéntico a .rw-lightbox-content */
.pm-gallery-lightbox-content {
  width: 100%;
  max-width: 1200px;
  background: transparent;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding-top: 80px;
}

.pm-gallery-lightbox-image-wrapper {
  width: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  min-height: auto;
}

.pm-gallery-lightbox-image {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  display: block;
  background: #fff;
}

/* Contador de imágenes - OCULTO (no se usa en gallery) */
.pm-gallery-lightbox-counter {
  display: none !important;
}

/* Botones de navegación - Exactamente igual que la galería de referencia */
.pm-gallery-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  transition: all 0.2s ease;
  padding: 0;
  font-size: 0;
}

/* Posicionamiento alineado con el max-width del header (1592px) - igual que la referencia */
.pm-gallery-lightbox-prev {
  left: max(40px, calc((100vw - 1592px) / 2 + 40px));
}

.pm-gallery-lightbox-next {
  right: max(40px, calc((100vw - 1592px) / 2 + 40px));
}

/* Ocultar imágenes PNG - solo usar SVG */
.pm-gallery-lightbox-nav img {
  display: none !important;
}

/* Estado normal - SVG sin fondo (para todos los estados excepto hover) */
.pm-gallery-lightbox-prev,

.pm-gallery-lightbox-prev:focus {
  background-image: url("data:image/svg+xml;utf8,<svg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0.5' y='0.5' width='37' height='37' rx='18.5' stroke='black'/><path d='M18 26.4422C16.5974 23.1993 14.0669 20.5742 10.9073 19.0888V18.3534C14.0669 16.868 16.5974 14.2429 18 11' stroke='black' stroke-miterlimit='10'/><path d='M11 18.7207L27 18.7207' stroke='black' stroke-miterlimit='10'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.pm-gallery-lightbox-next,

.pm-gallery-lightbox-next:focus {
  background-image: url("data:image/svg+xml;utf8,<svg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0.5' y='0.5' width='37' height='37' rx='18.5' stroke='black'/><path d='M20 26.4422C21.4026 23.1993 23.9332 20.5742 27.0927 19.0888V18.3534C23.9332 16.868 21.4026 14.2429 20 11' stroke='black' stroke-miterlimit='10'/><path d='M27 18.7207L11 18.7207' stroke='black' stroke-miterlimit='10'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* SOLO hover - SVG con fondo blanco */
.pm-gallery-lightbox-prev:hover {
  background-image: url("data:image/svg+xml;utf8,<svg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0.5' y='0.5' width='37' height='37' rx='18.5' fill='white' stroke='black'/><path d='M18 26.4422C16.5974 23.1993 14.0669 20.5742 10.9073 19.0888V18.3534C14.0669 16.868 16.5974 14.2429 18 11' stroke='black' stroke-miterlimit='10'/><path d='M11 18.7207L27 18.7207' stroke='black' stroke-miterlimit='10'/></svg>") !important;
}

.pm-gallery-lightbox-next:hover {
  background-image: url("data:image/svg+xml;utf8,<svg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0.5' y='0.5' width='37' height='37' rx='18.5' fill='white' stroke='black'/><path d='M20 26.4422C21.4026 23.1993 23.9332 20.5742 27.0927 19.0888V18.3534C23.9332 16.868 21.4026 14.2429 20 11' stroke='black' stroke-miterlimit='10'/><path d='M27 18.7207L11 18.7207' stroke='black' stroke-miterlimit='10'/></svg>") !important;
}

/* Focus - solo quitar outline, mantener SVG normal */
.pm-gallery-lightbox-prev:focus,
.pm-gallery-lightbox-next:focus {
  outline: none;
}

/* Disabled/hidden */
.pm-gallery-lightbox-nav.hidden,
.pm-gallery-lightbox-nav[disabled] { 
  opacity: 0.32; 
  pointer-events: none; 
}



.pm-gallery-lightbox-nav:focus {
  outline: none;
}

/* Disabled/hidden */
.pm-gallery-lightbox-nav.hidden,
.pm-gallery-lightbox-nav[disabled] { 
  opacity: 0.32; 
  pointer-events: none; 
}

/* Responsive - Idéntico a media queries de rw-lightbox */
@media (max-width: 767px) {
  .pm-gallery-lightbox-header {
    padding: 16px 20px 40px;
  }
  
  .pm-gallery-lightbox-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  .pm-gallery-lightbox-image {
    max-height: 60vh;
  }
}

@media (max-width: 520px) {
  .pm-gallery-lightbox-nav { 
    width: 42px; 
    height: 42px; 
  }
  
  .pm-gallery-lightbox-nav img { 
    width: 18px; 
    height: 18px; 
  }
  
  .pm-gallery-lightbox-prev { 
    left: 12px; 
  }
  
  .pm-gallery-lightbox-next { 
    right: 12px; 
  }
}

/* Evitar scroll en body cuando lightbox está activo */
body.pm-gallery-lightbox-active {
  overflow: hidden;
}