/*
 * visor-mapa-modal.css
 * Venado Virtual
 *
 * Visor reutilizable de imagen georreferenciada en modal Bootstrap:
 * - imagen ajustada / tamaño real
 * - desplazamiento por arrastre
 * - puntos desde lugares.geojson
 * - fichas fotográficas desde fotos.geojson
 * - ampliación de fotografía sobre el mismo modal
 * - símbolos diferenciables por tipo
 * - marcador opcional de geolocalización
 * - destacado temporal de un punto solicitado externamente
 * - dimensión opcional del modal integrado en una galería
 */


/* =========================================================
   VISOR
   ========================================================= */

.vmm-modal-dialog-galeria {
  width: 90vw;
  max-width: 90vw;
  height: 85vh;
  margin: 7.5vh auto;
}

.vmm-modal-dialog-galeria .modal-content {
  height: 100%;
  overflow: hidden;
}


.mapa-visor {
  position: relative;
  overflow: auto;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  touch-action: none;
}


/* =========================================================
   SUPERFICIE: IMAGEN + PUNTOS
   ========================================================= */

.mapa-superficie {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  line-height: 0;
}


/* =========================================================
   IMAGEN PRINCIPAL
   ========================================================= */

.mapa-imagen {
  display: block;

  width: auto;
  height: auto;

  user-select: none;
  -webkit-user-drag: none;
}


/* Estado inicial: imagen completa */

.mapa-imagen.ajustada {
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 70px);

  cursor: zoom-in;
}


/* Estado ampliado: tamaño real del archivo */

.mapa-imagen.ampliada {
  max-width: none !important;
  max-height: none !important;

  width: auto;
  height: auto;
}


/* Al ampliar, el visor pasa a comportarse como superficie desplazable */

.mapa-visor:has(.mapa-imagen.ampliada) {
  display: block;
  cursor: grab;
}

.mapa-visor:has(.mapa-imagen.ampliada):active {
  cursor: grabbing;
}


/* =========================================================
   PUNTOS
   ========================================================= */

.mapa-punto {
  --vmm-punto-fondo: #dc3545;
  --vmm-punto-borde: #fff;

  position: absolute;

  width: 18px;
  height: 18px;
  padding: 0;

  border: 2px solid var(--vmm-punto-borde);
  border-radius: 50%;

  background: var(--vmm-punto-fondo);

  transform: translate(-50%, -50%);

  cursor: pointer;
  z-index: 20;

  box-shadow: 0 1px 5px rgba(0, 0, 0, .6);
}

.mapa-punto:hover,
.mapa-punto:focus-visible {
  transform: translate(-50%, -50%) scale(1.25);
  z-index: 25;
}


/* Punto solicitado desde una galería u otro módulo externo */

.mapa-punto.mapa-punto--destacado {
  --vmm-punto-fondo: #6f42c1;
  --vmm-punto-borde: #fff;

  background: var(--vmm-punto-fondo);
  border-color: var(--vmm-punto-borde);

  z-index: 35;

  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .9),
    0 0 0 7px rgba(111, 66, 193, .82),
    0 2px 8px rgba(0, 0, 0, .75);
}


/*
 * Símbolos por tipo.
 *
 * El JS agrega automáticamente una clase:
 *
 *   .mapa-punto--medano
 *   .mapa-punto--laguna
 *   .mapa-punto--paleocanada
 *   etc.
 *
 * Estas reglas son deliberadamente simples y pueden modificarse
 * sin tocar el JavaScript.
 */

.mapa-punto--medano {
  width: 20px;
  height: 10px;

  border: 2px solid #5f6b58;
  border-radius: 20px 20px 0 0;

  background: #e8ad32;
}

.mapa-punto--laguna {
  border-radius: 2px;
  --vmm-punto-fondo: #0d6efd;
}

.mapa-punto--paleocanada {
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
  --vmm-punto-fondo: #6c757d;
}

.mapa-punto--paleocanada:hover,
.mapa-punto--paleocanada:focus-visible {
  transform: translate(-50%, -50%) rotate(45deg) scale(1.25);
}

.mapa-punto--paleocauce {
  width: 22px;
  height: 12px;
  border-radius: 999px;
  --vmm-punto-fondo: #0dcaf0;
}

.mapa-punto--tectonica,
.mapa-punto--estructura-tectonica {
  border-radius: 0;
  --vmm-punto-fondo: #fd7e14;
}


/* =========================================================
   PUNTO "MI UBICACIÓN"
   ========================================================= */

.mapa-mi-ubicacion {
  --vmm-ubicacion-fondo: #0d6efd;

  position: absolute;

  width: 20px;
  height: 20px;

  border: 3px solid #fff;
  border-radius: 50%;

  background: var(--vmm-ubicacion-fondo);

  transform: translate(-50%, -50%);

  z-index: 40;

  box-shadow:
    0 0 0 5px rgba(13, 110, 253, .22),
    0 2px 7px rgba(0, 0, 0, .55);

  pointer-events: none;
}

.mapa-mi-ubicacion::after {
  content: "";

  position: absolute;
  inset: -7px;

  border: 2px solid rgba(255, 255, 255, .65);
  border-radius: 50%;
}


/* Botón creado automáticamente si data-vmm-geolocalizacion="true" */

.mapa-geolocalizar-btn {
  white-space: nowrap;
}


/* =========================================================
   POPUP / FICHA FOTOGRÁFICA
   ========================================================= */

.mapa-popup {
  position: absolute;

  width: min(320px, calc(100vw - 30px));

  background: #fff;
  color: #212529;

  border-radius: .5rem;
  overflow: hidden;

  box-shadow: 0 5px 25px rgba(0, 0, 0, .55);

  z-index: 100;

  line-height: normal;
}


.mapa-popup-imagen-contenedor {
  position: relative;
  background: #111;
}


.mapa-popup-foto {
  display: block;

  width: 100%;
  max-height: 240px;

  object-fit: contain;

  background: #111;

  cursor: zoom-in;
}


/*
 * Variante de galería: ficha más pequeña y fotografía de referencia.
 * La ampliación se desactiva mediante data-vmm-ampliacion-foto="false".
 */

[data-vmm-ficha-compacta="true"] .mapa-popup {
  width: min(240px, calc(100vw - 20px));
}

[data-vmm-ficha-compacta="true"] .mapa-popup-foto {
  max-height: 135px;
}

[data-vmm-ampliacion-foto="false"] .mapa-popup-foto {
  cursor: default;
}

[data-vmm-ficha-compacta="true"] .mapa-popup-contenido {
  padding: .55rem .65rem;
}


.mapa-popup-contenido {
  padding: .75rem;
}


.mapa-popup-cerrar {
  position: absolute;

  top: 5px;
  right: 5px;

  width: 30px;
  height: 30px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: rgba(0, 0, 0, .65);
  color: #fff;

  font-size: 21px;
  line-height: 28px;

  z-index: 120;
}


.mapa-popup-anterior,
.mapa-popup-siguiente {
  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 32px;
  height: 44px;

  border: 0;

  background: rgba(0, 0, 0, .55);
  color: #fff;

  font-size: 28px;

  z-index: 110;
}


.mapa-popup-anterior {
  left: 0;
}


.mapa-popup-siguiente {
  right: 0;
}


/* =========================================================
   FOTO AMPLIADA SOBRE EL MISMO MODAL
   ========================================================= */

.mapa-foto-overlay {
  position: fixed;
  inset: 0;

  z-index: 1100;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 50px 20px 20px;

  background: rgba(0, 0, 0, .96);

  pointer-events: auto;
}


.mapa-foto-overlay.d-none {
  display: none !important;
}


.mapa-foto-overlay-contenido {
  max-width: 100%;
  max-height: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;
}


.mapa-foto-overlay-imagen {
  display: block;

  max-width: 100%;
  max-height: calc(100vh - 120px);

  width: auto;
  height: auto;

  object-fit: contain;

  user-select: none;
  -webkit-user-drag: none;
}


.mapa-foto-overlay-pie {
  max-width: 900px;

  padding: .65rem 1rem;

  color: #fff;
  text-align: center;

  line-height: 1.35;
}


.mapa-foto-overlay-texto {
  margin-top: .15rem;

  font-size: .875rem;

  color: rgba(255, 255, 255, .7);
}


.mapa-foto-overlay-cerrar {
  position: fixed;

  top: 15px;
  right: 20px;

  width: 40px;
  height: 40px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: rgba(255, 255, 255, .15);
  color: #fff;

  font-size: 30px;
  line-height: 36px;

  cursor: pointer;

  z-index: 1110;
}


.mapa-foto-overlay-cerrar:hover,
.mapa-foto-overlay-cerrar:focus-visible {
  background: rgba(255, 255, 255, .28);
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 575.98px) {

  .vmm-modal-dialog-galeria {
    width: 100vw;
    max-width: none;
    height: 100vh;
    margin: 0;
  }

  .vmm-modal-dialog-galeria .modal-content {
    border-radius: 0;
  }

  .mapa-popup {
    width: min(300px, calc(100vw - 20px));
  }

  .mapa-foto-overlay {
    padding: 48px 10px 10px;
  }

  .mapa-foto-overlay-imagen {
    max-height: calc(100vh - 115px);
  }

  .mapa-foto-overlay-pie {
    padding-left: .5rem;
    padding-right: .5rem;
  }

}