@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@350&display=swap');

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #111;
  overflow: hidden;
  font-family: Roboto;
}

#map-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

#map-content {
  position: relative;
  transform-origin: center center;
}

#map-image {
  max-width: none;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.marker {
  position: absolute;
  width: 15px;
  /* Tamaño base del punto */
  height: 15px;
  /* Tamaño base del punto */
  background-color: #ffffffc4;
  /* Color del punto */
  border-radius: 50%;
  /* Para hacerlo redondo */
  border: 2px solid white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: rgb(0, 0, 0);
  font-weight: bold;
  /* El transform: translate(-50%, -50%) se mantiene para centrar el punto en sus coordenadas.
        La escala inversa se aplicará en JavaScript directamente al transform. */

  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;
  /* Para que estén por encima de la imagen */
  /* Ajusta el tamaño del punto y fuente en dispositivos móviles si es necesario */
  transition: transform 0.05s ease-out;
  /* Suavizar también la transformación de los puntos */
}

.marker-popup {
  position: absolute;
  display: none;
  z-index: 101;
  left: -210%;
}

.marker-popup img {
  max-width: 250px;
  height: auto;
  border-radius: 5px;
  display: block;
}


/**/
/* Estilos para el nuevo modal sin zoom */
#logoModal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#logoModal .imagen-contenedor {
  position: relative;
  max-width: 90%;
  max-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#logoModal .imagen-sin-zoom {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  transform-origin: center center;
}

#logoModal .cerrar-modal {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 1001;
}

#logoModal .cerrar-modal:hover,
#logoModal .cerrar-modal:focus {
  color: #bbb;
  text-decoration: none;
}

/**/
/**/

.footer-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 70px;
  padding: 10px 20px;
  flex-direction: row;
  justify-content: space-between;
  z-index: 10;
  color: white;
  box-sizing: border-box;
  display: flex;
}

.logos-left {
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: flex-start;
}

.logos-right {
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: flex-end;
  flex-direction: row;
}

.top-icons {
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: flex-end;
  gap: 10px;
}

.bandera {
  width: 30px;
  height: auto;
}

.logos-left img {
  height: 25px;
  padding-left: 0.2%;
  margin-right: 5px;
}

.marq-logo {
  height: 50px;
  object-fit: contain;
}

/**/

/**/
/* Nuevo contenedor para centrar los controles de zoom */
.zoom-controls-wrapper {
  position: absolute;
  bottom: 0px;
  /* Distancia desde la parte inferior */
  left: 50%;
  /* Centrar horizontalmente */
  transform: translateX(-50%);
  /* Ajustar para que el centro del wrapper esté en el 50% */
  z-index: 100;
  /* Asegura que estén por encima de todo */
}

/* Estilos para los botones de zoom (ahora dentro de .zoom-controls-wrapper) */
.ui-controls {
  display: flex;
  gap: 15px;
  padding: 10px 15px;
}

.zoom-button {
  width: 100%;
  height: 100%;
  border: none;
  color: white;
  font-size: 20px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Estilos específicos para las imágenes SVG dentro de los botones de zoom */
.zoom-button img {
  width: 100%;
  /* Ajusta el tamaño del SVG para que se vea bien dentro del botón */
  height: 100%;
  /* Hace que el SVG blanco se vea en el fondo azul */
}

.zoom-button:disabled {
  background-color: #cccccc;
  /* Color cuando el botón está deshabilitado */
  cursor: not-allowed;
}


/* Estilos para el overlay superior/inferior */
.top {
  position: fixed;
  /* Lo fijamos en la parte superior */
  width: 100%;
  height: 3%;
  /* Altura de la barra superior para móvil */
  background-color: rgba(255, 255, 255, 0.5);
  /* Color de fondo de la barra superior */
  display: flex;
  /* Usamos flexbox */
  align-items: center;
  /* Centrar verticalmente los elementos */
  justify-content: space-between;
  /* Reparte el espacio */
  z-index: 10;
  /* Asegura que esté por encima del resto del contenido */
}

.top>a {
  margin-left: 85%;
  white-space: nowrap;
}

.language-selector {
  position: relative;
  /* Para posicionar el desplegable respecto a este contenedor */
  display: inline-block;
  /* Ocupa solo el espacio necesario */
  margin-left: auto;
  /* ESTO ES CLAVE: Empuja el selector de idioma a la derecha */
  z-index: 11;
  /* Asegura que esté por encima de otros elementos */
  height: 100%;
  padding-right: 2%;
  padding-left: 1%;
  width: 1.9%;
}

.current-lang-button {
  background-color: rgba(255, 255, 255, 0);
  /* Fondo del botón actual */
  color: black;
  border-radius: 8px;
  border: none;
  /* Bordes redondeados */
  cursor: pointer;
  font-size: 1em;
  height: 100%;
  /* Ancho mínimo para que se vea bien "ES" o "EN" */
  text-align: center;
  width: 110%;

  display: flex;
  /* Usamos flexbox para alinear el texto y la flecha */
  align-items: center;
  /* Centramos verticalmente */
}

/* Estilo para el texto dentro del botón */
.lang-text {
  margin-right: 8px;
  /* Espacio entre el texto y la flecha */
}

/* Estilo para el icono de la flecha */
.dropdown-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
  /* La flecha apunta hacia abajo por defecto */
  transition: transform 0.3s ease;
}

/* Estilo para la flecha cuando el menú está abierto */
.dropdown-arrow.open {
  transform: rotate(180deg);
}

.lang-dropdown {
  display: none;
  /* Oculto por defecto */
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  /* Fondo del menú desplegable */
  z-index: 1;
  border-radius: 8px;
  right: 33%;
  /* Alinea el desplegable a la derecha del botón */
  top: 100%;
  /* Coloca el desplegable justo debajo del botón */
  margin-top: 5px;
  /* Pequeño espacio entre botón y desplegable */
  overflow: hidden;
  /* Asegura que los bordes redondeados se vean bien */

}

.lang-dropdown a {
  color: black;
  padding: 10px 12px;
  text-decoration: none;
  display: block;
  text-align: center;
  font-size: 0.9em;
  transition: background-color 0.2s ease;
}

.lang-dropdown a:hover {
  background-color: #575757;
  color: white;
  /* Color al pasar el ratón */
}

.lang-dropdown.show {
  display: block;
  /* Clase para mostrar el desplegable con JavaScript */
}

/**/

/* --- Estilos para el Tooltip de Imagen --- */

.image-tooltip {
  position: absolute;
  /* Inicialmente oculto */
  display: none;
  /* Fondo, padding, bordes */
  /* background-color: rgba(255, 255, 255, 0.95); */
  /* Comentado porque no lo tenías antes, pero es bueno tener un fondo para el tooltip */
  /* border: 1px solid #ccc; */
  /* Comentado */
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
  /* Comentado */
  padding: 10px;
  /* border-radius: 8px; */
  /* Comentado */
  z-index: 1000;
  /* Asegura que esté por encima de todo lo demás */
  max-width: 350px;
  /* Ancho máximo para el tooltip */
  box-sizing: border-box;
  /* Incluye padding y border en el ancho/alto */

  /* Centrar el tooltip en relación con su propio tamaño, para posicionamiento flexible */
  /* CAMBIO CLAVE: Para que el centro de la imagen coincida con el centro del punto */
  transform: translate(-20%, -50%);
  /* <--- MODIFICADO para que tape el punto */

  pointer-events: all;
  /* Permite interactuar con el tooltip (clics en la imagen, botón de cerrar) */
}

.image-tooltip.active {
  display: block;
  /* Muestra el tooltip cuando está activo */
}

.tooltip-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.close-tooltip-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: none;
  border: none;
  font-size: 20px;
  color: #333;
  cursor: pointer;
  padding: 5px;
  line-height: 1;
  /* Para que el icono se centre mejor */
  text-decoration: none;
  /* Asegura que no haya subrayado si es un enlace */
}

.close-tooltip-btn:hover {
  color: #f00;
}

/*Mapa y roseta*/
.img-container {
  position: fixed;
  top: 5%;
  right: 7%;
  display: flex;
  flex-direction: column;
  gap: 50%;
  z-index: 1000;
}

.img-container img {
  width: 100px;
  height: auto;
  margin-top: 10%;
}

.flechas {
  display: none;
}

/*Media Queris*/
@media (max-width: 768px) {
  .map-compass-container {
    top: 10%;
    /* Ajusta para móviles si el footer es más pequeño */
    right: 75px;
    /* Menos margen en móviles */
    max-width: 60px;

    display: none;
  }

  .map-compass-container .mini-map-spain {
    width: 60px;
    /* Más pequeño en móvil */
  }

  .map-compass-container .compass-rose {
    width: 45px;
    /* Más pequeño en móvil */
  }

  .lang-dropdown {
    right: 10%;
  }

  .zoom-button img {
    width: 50.5%;
  }

  .logos-left img {
    height: 20px;
    margin-right: 5px;
  }

  .marq-logo {
    height: 25px;
    object-fit: contain;
  }

  .language-selector {
    padding-right: 12%;
  }

  #logoModal .cerrar-modal {
    top: -15px;
  }

  #logoModal .imagen-contenedor {
    max-width: 80%;
    max-height: 80%;
  }

  .img-container {
    right: 20%;
    display: none;
  }

  .flechas {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* No bloquea clics en el mapa */
    z-index: 9999;
  }

  .flechas div {
    position: absolute;
    pointer-events: auto;
    /* Permite clic en cada flecha */
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    transition: background 0.2s;
  }


  /* Flecha arriba */
  .flecha-arriba {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Flecha abajo */
  .flecha-abajo {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Flecha izquierda */
  .flecha-izquierda {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Flecha derecha */
  .flecha-derecha {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

  .flechas img {
    width: 40px;
    height: 40px;
  }
}
@media(max-height: 500px) {
   #logoModal .cerrar-modal {
    top: -15px;
  }

  #logoModal .imagen-contenedor {
    max-width: 80%;
    max-height: 80%;
  }
}
@media (max-width: 768px) and (orientation: landscape) {
  .top {
    padding: 5px 0px;
    justify-content: center;
  }

  .language-selector {
    padding-right: 5%;
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  .top {
    padding: 5px 0px;
    justify-content: center;
  }

  .language-selector {
    padding-right: 5%;
  }
}

@media (max-width: 768px) {

  .top>a {
    margin-right: 5%;
    /* Ajusta el valor para mayor o menor espacio */
    margin-left: 70%;
    white-space: nowrap;
  }
}

/* Ajustar los botones de zoom para móviles */
@media (max-width: 768px) {
  .zoom-controls-wrapper {
    bottom: 10px;
    /* Menos margen en móviles */
  }

  .ui-controls {
    padding: 8px 12px;
    gap: 15px;
    display: none;
  }

  .zoom-button {
    width: 65, 78%;
    height: 65, 78%;
    font-size: 18px;
  }
}