/* =========================================================
   tallermaquetas.com — lightbox
   Visor de imagen a pantalla completa (dialog nativo).
   Cargado por las páginas de categoría.
   ========================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: var(--space-3);
  border: none;
  background: transparent;
  display: none;
  align-items: center;
  justify-content: center;
}

.lightbox[open] {
  display: flex;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.lightbox__viewport {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  /* Sin esto, un arrastre horizontal (swipe para cambiar de foto, ver
     gallery.js) puede disparar gestos táctiles nativos del navegador
     (p.ej. "volver atrás" con swipe desde el borde en iOS) en vez de
     llegar a nuestro pointermove. */
  touch-action: none;
  /* Distancia de la cámara virtual para el giro 3D entre fotos (gallery.js,
     transitionTilt). Cuanto mayor el valor, más plano/sutil se ve el giro;
     cuanto menor, más pronunciado. Ajustable aquí. */
  perspective: 2200px;
}

.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  cursor: zoom-in;
}

/* Copia efímera de la foto saliente durante la transición entre fotos
   (creada y destruida por transitionTilt() en gallery.js). Se superpone a
   la imagen real, que mientras tanto pasa a mostrar la foto entrante. */
.lightbox__image--ghost {
  position: absolute;
  inset: 0;
  /* .lightbox__image trae width/height: auto (para encajarse por su propio
     tamaño intrínseco como hijo de flex). Aquí, en cambio, hace falta que
     ocupe toda la caja de inset: 0 — si no, con ambos lados fijados a la vez
     que width/height en auto, el navegador la encoge a su relación de
     aspecto y la deja pegada a la izquierda en vez de centrada. */
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Ampliada a tamaño real: el propio overflow: auto acota el desplazamiento,
   no hace falta calcular límites de pan a mano. Las barras de scroll se
   ocultan porque el desplazamiento es por arrastre (ratón/dedo), no por
   scroll — dejarlas visibles sería ruido. */
.lightbox--zoomed .lightbox__viewport {
  align-items: flex-start;
  justify-content: flex-start;
  overflow: auto;
  cursor: move;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lightbox--zoomed .lightbox__viewport::-webkit-scrollbar {
  display: none;
}

.lightbox--zoomed .lightbox__image {
  max-width: none;
  max-height: none;
  cursor: inherit;
}

.lightbox__prev,
.lightbox__next {
  position: absolute;
  z-index: 1;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__top-right {
  position: absolute;
  z-index: 1;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lightbox__close {
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__counter {
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.lightbox__counter:empty {
  display: none;
}

.lightbox__toolbar {
  position: absolute;
  z-index: 1;
  top: var(--space-2);
  left: var(--space-2);
  display: flex;
  gap: var(--space-1);
}

.lightbox__toolbar button {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

.lightbox__toolbar button:hover,
.lightbox__toolbar button:focus-visible {
  background: rgba(0, 0, 0, 0.55);
}

.lightbox__toolbar button[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.lightbox__toolbar-icon {
  grid-area: 1 / 1;
  width: 1.15rem;
  height: 1.15rem;
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
  transition: opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.lightbox__toolbar-icon--enter,
.lightbox__toolbar-icon--play {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.lightbox__fullscreen[aria-pressed="true"] .lightbox__toolbar-icon--enter,
.lightbox__slideshow[aria-pressed="true"] .lightbox__toolbar-icon--play {
  opacity: 0;
  transform: scale(0.5) rotate(90deg);
}

.lightbox__fullscreen[aria-pressed="true"] .lightbox__toolbar-icon--exit,
.lightbox__slideshow[aria-pressed="true"] .lightbox__toolbar-icon--pause {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.lightbox__prev {
  left: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__next {
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__caption {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  padding-block: var(--space-1);
  padding-inline: var(--space-4);
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  color: #fff;
}

.lightbox__title {
  font-weight: 500;
}

.lightbox__text {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
}

.lightbox__text:empty {
  display: none;
}