/* PIEZA: zoom-imagenes (capa de imagen ampliada al hacer clic en el cuerpo)
 * ---------------------------------------------------------------------------
 * `.single` delante por el mismo motivo que en `notas.css` y `articulo.css`:
 * el CSS del Personalizador se imprime despues de las hojas encoladas y hay
 * que ganarle en especificidad, no en orden.
 *
 * El cursor de "se puede ampliar" solo se pone en las imagenes del cuerpo del
 * articulo, nunca en la destacada ni en las de los relacionados: esas no
 * abren nada al hacer clic.
 * --------------------------------------------------------------------------- */

.single .entry-content img {
  cursor: zoom-in;
}

body.single.dl-zoom-abierto {
  overflow: hidden;
}

.dl-zoom {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dl-esp-xl);
  background-color: rgba(0, 0, 0, 0.92);
  cursor: zoom-out;
}

/* ESTA REGLA NO SOBRA: SIN ELLA LA CAPA NO SE CIERRA NUNCA.
 *
 * El JavaScript cierra poniendo `overlay.hidden = true`, y el atributo `hidden`
 * vale `display: none` en la hoja del NAVEGADOR. El `display: flex` de aqui
 * arriba es del AUTOR, y el del autor gana siempre: la capa se quedaba puesta,
 * en negro y sobre toda la pantalla, con `hidden` a true.
 *
 * Y ademas se quedaba ATASCADA, porque `cerrar()` empieza con
 * `if (overlay.hidden) return;`: a partir del primer intento, ni la X ni Esc ni
 * el clic fuera hacian ya nada. Reportado el 2026-09-09 («se rompe y no sale»).
 *
 * `.dl-zoom[hidden]` tiene mas especificidad que `.dl-zoom`, asi que gana sin
 * necesidad de `!important`. */
.dl-zoom[hidden] {
  display: none;
}

.dl-zoom__imagen {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* `zoom-out` tambien encima de la foto: desde el 2026-09-09 el clic cierra
   * caiga donde caiga, y el cursor tiene que decir lo mismo que hace. */
  cursor: zoom-out;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Solo la X, en blanco y sin caja.
 *
 * Antes llevaba un circulo (`border-radius: 50%` sobre 2,5rem en cuadrado) y
 * salia OVALADO: GeneratePress le pone su propio `padding` a todo `button`, que
 * es mas ancho que alto, asi que la caja dejaba de ser cuadrada y el 50% daba
 * una elipse. Y el aspa quedaba descentrada dentro de ella, porque la tinta de
 * un glifo no va centrada en su propia caja.
 *
 * Se quita la caja entera en vez de pelearse con ella: sobre un fondo negro al
 * 92%, una X blanca se ve de sobra. Pedido asi el 2026-09-09.
 *
 * El doble `.dl-zoom` es para ganarle en especificidad al CSS del
 * Personalizador, que se imprime despues (mismo motivo que el resto del fichero).
 * Y `padding` y `background` van explicitos porque hay que deshacer los del
 * tema, no basta con no ponerlos. */
.dl-zoom .dl-zoom__cerrar {
  position: absolute;
  top: 0;
  right: 0;
  /* El area pulsable sigue siendo comoda aunque no se vea ninguna caja: son
   * 44 px de lado contando el relleno, que es el minimo recomendado para el
   * dedo. */
  padding: var(--dl-esp-md);
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}

.dl-zoom .dl-zoom__cerrar:hover,
.dl-zoom .dl-zoom__cerrar:focus-visible {
  background: none;
  opacity: 1;
}

.dl-zoom__cerrar:focus-visible,
.dl-zoom:focus-visible {
  outline: 2px solid var(--dl-foco);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .dl-zoom {
    padding: var(--dl-esp-sm);
  }

  .dl-zoom__cerrar {
    top: var(--dl-esp-sm);
    right: var(--dl-esp-sm);
  }
}