/**
 * image-lightbox.css — Visor de imagen a pantalla completa (pinch + pan).
 *
 * Extraído de css/pages/exam-runner.css, donde vivía como `.sim-image-lightbox-*`
 * y sólo aplicaba dentro de #sim-exam-layout. Ahora es global: la misma imagen
 * `.block-image-img` aparece en lecciones, quiz, examen, simulacro, diagnóstico,
 * skip-test, el repaso y el overlay de errores, y todas la abren igual.
 *
 * Se carga desde index.html (no por ruta) porque esas superficies están repartidas
 * entre nueve rutas distintas. Autocontenido a propósito: no depende de
 * `.sim-modal-overlay` ni de `--sim-ease-out`, que viven en hojas de ruta.
 *
 * JS: js/utils/image-lightbox.js
 */

/* ── Afordancia: qué imágenes se pueden ampliar ────────────── */
/* Sin esto no hay forma de saber que la imagen es tocable: index.html fija
   user-scalable=no, así que el pinch nativo del navegador no existe. */
.block-image-img,
img[data-zoomable],
img[data-sim-zoomable] {
  cursor: zoom-in;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .block-image-img:hover,
  img[data-zoomable]:hover,
  img[data-sim-zoomable]:hover {
    transform: scale(1.01);
  }
}

/* Badge de lupa sobre las imágenes de bloque. En touch siempre visible (no hay
   hover que delate la afordancia); en escritorio aparece al pasar el cursor. */
.block-image-figure {
  position: relative;
}

.block-image-figure::after {
  content: 'zoom_in';
  font-family: 'Material Symbols Outlined';
  font-size: 18px;
  line-height: 1;
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px;
  border-radius: 999px;
  color: #fff;
  background: rgba(13, 13, 26, 0.55);
  backdrop-filter: blur(4px);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .block-image-figure::after { opacity: 0; }
  .block-image-figure:hover::after { opacity: 1; }
}

/* El placeholder de asset no resuelto no es una imagen: sin badge. */
.block-image-figure:not(:has(.block-image-img))::after { content: none; }

/* ── Overlay ───────────────────────────────────────────────── */
/* z-index 10100: por encima de .err-review-overlay (9998), de los overlays a
   9999 y de las hojas inline de report.js (10000-10002). El lightbox se puede
   abrir DESDE cualquiera de ellos, así que tiene que montarse encima. */
.imgbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg, 16px);
  background: rgba(0, 0, 0, 0.55);
}

.imgbox-overlay[hidden] { display: none; }

[data-theme="dark"] .imgbox-overlay { background: rgba(0, 0, 0, 0.72); }

@keyframes imgboxEnter {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.imgbox-card {
  position: relative;
  background: var(--bg-white, #fff);
  border-radius: var(--r-xl, 16px);
  max-width: 96vw;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.35);
  animation: imgboxEnter 220ms cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
  padding: var(--sp-lg, 16px);
}

.imgbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-main, #1a1a2e);
  background: var(--bg-white, #fff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.imgbox-close:hover { background: var(--bg-secondary, #f0f0f5); }

.imgbox-stage {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* El JS maneja pinch + pan; que el navegador no scrollee ni haga zoom aquí. */
  touch-action: none;
  position: relative;
}

.imgbox-img {
  display: block;
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  will-change: transform;
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.imgbox-img:active { cursor: grabbing; }

.imgbox-caption {
  flex-shrink: 0;
  margin-top: var(--sp-md, 12px);
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-secondary, #6b7280);
  padding: 0 var(--sp-md, 12px);
}

.imgbox-caption:empty { display: none; }

@media (max-width: 768px) {
  .imgbox-card {
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    padding: var(--sp-md, 12px);
  }
  .imgbox-img { max-height: 78vh; }
}

@media (prefers-reduced-motion: reduce) {
  .imgbox-card { animation: none; }
  .imgbox-img { transition: none !important; }
  .block-image-img,
  img[data-zoomable],
  img[data-sim-zoomable] { transition: none; }
  .block-image-img:hover,
  img[data-zoomable]:hover,
  img[data-sim-zoomable]:hover { transform: none; }
}