/* LIGHTBOX */

:root {
  --lb-overlay-bg:        #111111;
  --lb-overlay-opacity:   0.94;
  --lb-border-color:      #d4bc5c;   /* amarillo */
  --lb-border-width:      3px;
  --lb-border-radius:     0px;       
  --lb-container-bg:      #111111;
  --lb-text-color:        #e8e4d9;   /* crema */
  --lb-number-color:      #888880;   /* gris medio */
  --lb-caption-font:      'Playfair Display', 'Times New Roman', serif;
  --lb-ui-font:           'DM Sans', Helvetica, sans-serif;
  --lb-nav-speed:         0.4s;
  --lb-close-speed:       0.2s;}


body.lb-disable-scrolling { overflow: hidden; }

/* ---- Overlay oscuro ---- */
.lightboxOverlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background-color: var(--lb-overlay-bg);
  opacity: 0;
  display: none;
  transition: opacity 0.35s ease;
}
.lightboxOverlay.active { opacity: var(--lb-overlay-opacity); }

/* --Contenedor principal -- */
.lightbox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  outline: none;
}
.lightbox.active { display: flex; }

/* -Contenedor externo de la imagen - */
.lb-outerContainer {
  position: relative;
  margin: 0 auto;
  border-radius: var(--lb-border-radius);
  background-color: var(--lb-container-bg);
  /* borde amarillo signature */
  border: var(--lb-border-width) solid var(--lb-border-color);
  box-shadow: 0 0 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(212,188,92,0.15);
  transition: width 0.3s ease, height 0.3s ease;
}

.lb-outerContainer::after {
  content: "";
  display: table;
  clear: both;}

/* -- Imagen -- */
.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: 90vw;
  max-height: 80vh;
  border-radius: var(--lb-border-radius);
  border: none;
  object-fit: contain;
}

.lightbox a img { border: none; }

/* ---- Loader ---- */
.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  /* spinner CSS puro — sin imagen externa */
  border: 3px solid rgba(212,188,92,0.2);
  border-top-color: var(--lb-border-color);
  border-radius: 50%;
  animation: lb-spin 0.7s linear infinite;
}

@keyframes lb-spin {
  to { transform: rotate(360deg); }
}

/* Navegación prev / next */
.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-nav a {
  outline: none;

  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev,
.lb-next {
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  padding: 0 18px;
  transition: background-color var(--lb-nav-speed);
}

/* Flecha SVG inline — no depende de archivos externos */
.lb-prev {
  left: 0;
  width: 34%;
  justify-content: flex-start;
  background: linear-gradient(to right, rgba(17,17,17,0.55), transparent);
  opacity: 0;
  transition: opacity var(--lb-nav-speed);
}

.lb-next {
  right: 0;
  width: 34%;
  justify-content: flex-end;
  background: linear-gradient(to left, rgba(17,17,17,0.55), transparent);
  opacity: 0;
  transition: opacity var(--lb-nav-speed);
}

.lb-prev:hover,
.lb-next:hover {
  opacity: 1;
}

/* Flechas con CSS puro */
.lb-prev::after,
.lb-next::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  border-top: 2.5px solid var(--lb-border-color);
  border-right: 2.5px solid var(--lb-border-color);
}

.lb-prev::after {
  transform: rotate(-135deg);
  margin-left: 6px;
}

.lb-next::after {
  transform: rotate(45deg);
  margin-right: 6px;
}

/* ---- Datos: caption + número + cerrar ---- */
.lb-dataContainer {
  margin: 0 auto;
  padding: 10px 0 4px;
  width: 100%;
  max-width: 90vw;
}

.lb-dataContainer::after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 6px;
  color: var(--lb-text-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lb-data .lb-details {
  flex: 1;
  text-align: left;
  line-height: 1.2;
}

/* Caption */
.lb-data .lb-caption {
  font-family: var(--lb-caption-font);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 700;
  color: var(--lb-text-color);
  letter-spacing: 0.5px;
}

.lb-data .lb-caption a { color: var(--lb-border-color); }

/* Contador */
.lb-data .lb-number {
  display: block;
  padding-top: 4px;
  font-family: var(--lb-ui-font);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--lb-number-color);
}

/* botón de cerrar  */
.lb-data .lb-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--lb-close-speed), transform var(--lb-close-speed);
  flex-shrink: 0;
  margin-left: 12px;
  position: relative;
}

.lb-data .lb-close::before,
.lb-data .lb-close::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 2px;
  background-color: var(--lb-border-color);
}

.lb-data .lb-close::before { transform: rotate(45deg); }
.lb-data .lb-close::after  { transform: rotate(-45deg); }

.lb-data .lb-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

/*  Teclado / accesibilidad */
.lb-data .lb-close:focus { outline: 2px solid var(--lb-border-color); }

/* RESPONSIVE*/
@media (max-width: 600px) {
  .lightbox .lb-image {
    max-width: 96vw;
    max-height: 70vh;
  }

  .lb-prev, .lb-next { width: 28%; padding: 0 10px; }

  .lb-data .lb-caption { font-size: 0.82rem; }
}