/* Container */
.map-container {
  position: relative;
  width: 100%;
  /* max-width: 800px; */
  margin: auto;
}
.map-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* Overlay for dots */
#itm-display {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Admin Canvas */
#itm-admin-canvas {
  position: relative;
  width: 100%;
  height: 400px;
  border: 1px solid #ccc;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 20px 0;
}
#itm-admin-controls { display: flex; gap: 20px; }
#itm-items-list { width: 250px; padding: 10px; border:1px solid #ccc; }
#itm-items { list-style:none; margin:0; padding:0; }
.itm-item { cursor: move; margin:5px 0; display:flex; align-items:center; gap:8px; }

/* Filters */
.itm-filters { display: flex; gap:10px; margin-bottom:20px; }
.itm-filters select { padding: 8px; border-radius:4px; border:1px solid #ccc; }

/* Dots */
/* Replace the old .itm-dot, .marker block with this: */
.itm-dot,
.marker {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: transparent;       /* quitamos el fondo rojo */
  background-size: contain;            /* ajusta la imagen al contenedor */
  background-repeat: no-repeat;
  background-position: center center;  /* centra la miniatura */
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;
}
.itm-dot {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: transparent;     /* sin color de relleno */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;
}


/* Tooltips */
.itm-tip, .tooltip {
  position: absolute;
  transform: translate(-50%, -120%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 15;
}
.itm-dot:hover + .itm-tip,
.itm-dot.active + .itm-tip,
.marker:hover + .tooltip {
  opacity: 1;
}
.tooltip::after, .itm-tip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: rgba(0,0,0,0.75) transparent transparent;
}

@media(max-width:768px) {
  .itm-dot { width:30px; height:30px; }
  .itm-tip { font-size:12px; padding:4px 8px; }
}