/* Reset básico y tipografía */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  font-family: sans-serif;
  background: #f5f5f5;
  color: #111;
}

/* Panel de controles en pantalla */
#controls {
  position: fixed;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;           /* apila controles */
  align-items: flex-start;
  gap: 1rem;                        /* espacio entre cada control */
  background: rgba(255,255,255,0.9);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  z-index: 2000;                     /* por encima de POIs y panel */
  width: 260px;
  backdrop-filter: blur(2px);
}

/* Inputs a ancho completo */
.control-item input,
.control-item select {
  width: 100%;
  margin: 0;
}

/* --- POI (botón) --- */
.poi {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%); /* centra el marcador en el punto */
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  pointer-events: auto;             /* clicable */
  z-index: 200;                     /* por encima del canvas */
  user-select: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

/* Botón POI como icono */
.poi.poi--icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;               /* sin fondo opaco */
  background-image: url('info.png');     /* ← ruta a tu icono */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;            /* ajusta a tu PNG */
  box-shadow: 0 2px 8px rgba(0,0,0,.15); /* sutil elevación */
  cursor: pointer;
}



/* --- Tooltip en hover sobre el icono --- */
.poi.poi--icon::after {
  content: attr(data-label);
  position: absolute;
  bottom: 100%;                       /* arriba del icono */
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  padding: 4px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;               /* no interfiere con clics */
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 300;
}



/* Mostrar tooltip al pasar el ratón */
.poi.poi--icon:hover::after,
.poi.poi--icon:hover::before {
  opacity: 1;
}

/* === Overlay de carga === */
.loading-overlay[hidden] { display: none !important; }

.loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(2px);
  z-index: 1200; /* por encima de panel PDF (1000) y controles (300) */
  pointer-events: all; /* bloquea interacción mientras carga */
}

.loading-overlay__text {
  margin: 0;
  font-size: 14px;
  color: #222;
}

/* Spinner */
.loading-overlay__spinner {
  width: 56px;
  height: 56px;
  border: 4px solid rgba(0,0,0,0.15);
  border-top-color: rgba(0,0,0,0.65);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}