/**
 * 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; }

/* ── Modo oscuro: "papel" claro detrás de las imágenes de contenido ──
   Las figuras se producen sin fondo y con trazo/texto negro (ver
   project_image_prompt_style): sobre #121218 el negro desaparece. En vez de
   rehacer cientos de imágenes, en oscuro se les pone una superficie clara,
   como una hoja impresa. No es blanco puro para que no deslumbre; el negro
   sobre #ECEAF2 da ~17:1. Cubre bloques V2, enunciados legacy (image_url),
   opciones del exam-runner, repaso, overlay de errores, diagnóstico y lightbox. */
[data-theme="dark"] :is(
  .block-image-img,
  img[data-zoomable],
  img[data-sim-zoomable],
  .opt-media img,
  .err-review-option-img,
  .imgbox-img
) {
  background: #ECEAF2;
  padding: 10px;
  border-radius: 8px;
}

/* ── 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; }
}