/* Asegúrate de que este CSS esté en tu global.css o en <style> */
#imageModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#imageModal[aria-hidden="false"] {
  display: flex;
}

#imageModal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  /* evita que el click sobre la imagen burbujee hacia el fondo */
  pointer-events: auto;
}

/* aspa como botón (mejor usar <button> por accesibilidad) */
#imageModal .close {
  position: absolute;
  top: 20px;
  right: 35px;
  font-size: 40px;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10001; /* más alto que la imagen/modal */
  pointer-events: auto; /* aseguramos que pueda recibir clicks */
}

#imageModal .close:focus {
  outline: 2px solid #fff;
  outline-offset: 4px;
}