/*
 * Estilos del mapa. Ver mapa.js.
 *
 * Prefijo .bzmapa- porque esto se carga dentro de páginas con hojas propias.
 */

.bzmapa {
  position: relative;
  overflow: hidden;
  background: #0d1418;
  border: 1px solid #294455;
  border-radius: 8px;
  min-height: 380px;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.bzmapa.arrastrando { cursor: grabbing; }

.bzmapa-teselas,
.bzmapa-marcas {
  position: absolute;
  inset: 0;
}

.bzmapa-marcas { pointer-events: none; }

/* Con las teselas apagadas el mapa NO se esconde: se dibuja una rejilla y los
   puntos siguen en su sitio. Se pierde el dibujo del terreno, no el mapa. */
.bzmapa-teselas.sin-teselas {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

.bzmapa-tesela {
  position: absolute;
  display: block;
  -webkit-user-drag: none;
  /* Las teselas de OSM son claras y el panel es oscuro: se apagan un poco para
     que los marcadores se lean encima. */
  filter: saturate(0.85) brightness(0.86);
}

.bzmapa-punto,
.bzmapa-grupo {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.bzmapa-punto {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #f2f4f5;
  background-color: #0b5566;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.bzmapa-punto:hover {
  width: 44px;
  height: 44px;
  z-index: 5;
  border-color: #ffd666;
}

.bzmapa-grupo {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 17px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: #0b5566;
  color: #f2f4f5;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 30px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.bzmapa-grupo:hover { background: #12798f; }

/* Un grupo que lleva fotos dentro: la primera se ve de fondo y el número va en
   una chapa, que si no se perdería encima de la imagen. */
.bzmapa-grupo.con-foto {
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 50%;
  border-color: #f2f4f5;
  line-height: normal;
}

.bzmapa-grupo.con-foto:hover { width: 48px; height: 48px; min-width: 48px; z-index: 5; }

.bzmapa-cuenta {
  position: absolute;
  right: -6px;
  bottom: -6px;
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 10px;
  background: rgba(10, 16, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #ffd666;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  text-align: center;
}

.bzmapa-controles {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bzmapa-controles button {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(10, 16, 20, 0.85);
  color: #f2f4f5;
  border-radius: 6px;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.bzmapa-controles button:hover { background: rgba(30, 48, 58, 0.95); }

.bzmapa-aviso {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: min(520px, 88%);
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(10, 16, 20, 0.92);
  border: 1px solid #294455;
  color: #dfe6e9;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.bzmapa-aviso[hidden] { display: none; }
.bzmapa-aviso b { color: #ffd666; }

/* La atribución de OpenStreetMap es obligatoria por su licencia mientras se
   usen sus teselas. No se quita: se oculta sola cuando no hay teselas. */
.bzmapa-atribucion {
  position: absolute;
  right: 4px;
  bottom: 3px;
  z-index: 6;
  font-size: 10px;
  color: #cfd8dc;
  background: rgba(10, 16, 20, 0.72);
  padding: 2px 6px;
  border-radius: 4px;
}

.bzmapa-atribucion:empty { display: none; }