/* Base cartográfica compartilhada. Extraída de public/pontes/styles.css quando
   o segundo produto passou a precisar de mapa. Depende das variáveis de tema
   --line, --ink, --muted e --chart-blue-dark da folha do produto. */
.ep-map {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #e8eeeb;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
.ep-map-tiles { position: absolute; inset: 0; }
.ep-map-tiles img { position: absolute; width: 256px; height: 256px; }
.ep-map-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ep-map-controls { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; }
.ep-map-controls button {
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 94%);
  border-radius: 8px;
  cursor: pointer;
  font: inherit; font-size: 15px; line-height: 1;
  color: var(--ink);
}
.ep-map-controls button:hover { border-color: var(--chart-blue-dark); color: var(--chart-blue-dark); }
.ep-map-credit,
.ep-map-hint {
  position: absolute;
  margin: 0;
  padding: 3px 8px;
  font-size: 10.5px;
  background: rgb(255 255 255 / 88%);
  border-radius: 6px;
  color: var(--muted);
}
.ep-map-credit { right: 8px; bottom: 8px; }
.ep-map-hint { left: 8px; bottom: 8px; }

/* Faixa de estado da delimitação: o que o serviço devolveu, ou o que fazer
   quando ele não respondeu. Vive com o mapa, não com o produto. */
.map-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin: 10px 0 0;
}
.map-status strong { color: var(--ink); font-weight: 500; }
.map-status.is-error { border-color: #edc4bd; background: #fdf3f1; color: #97331f; }
.map-status.is-ok { border-color: #bfe3d3; background: #f2fbf7; }
.map-status code { padding: 1px 5px; border-radius: 4px; background: rgb(16 23 21 / 7%); font-size: 11px; }

/* Enquanto o serviço delimita, o mapa mostra que está trabalhando. Sem isso os
   segundos de espera parecem travamento, e clicar de novo parece não responder. */
.ep-map.is-busy { cursor: progress; }
.ep-map.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 34%);
  pointer-events: none;
}
.ep-map.is-busy .ep-map-hint::after { content: " · delimitando…"; }

/* Camada de rótulos sobre a base. Transparente, sem capturar ponteiro. */
.ep-map-labels { position: absolute; inset: 0; pointer-events: none; }
.ep-map-labels img { position: absolute; width: 256px; height: 256px; }

/* O overlay não captura ponteiro, mas as feições desenhadas pelo produto sim —
   é o que permite selecionar e arrastar um elemento sem arrastar o mapa. */
.ep-map-overlay [data-feature] { pointer-events: auto; cursor: pointer; }
.ep-map-overlay [data-feature].is-dragging { cursor: grabbing; }

/* Seletor de base, no canto superior esquerdo do mapa. */
.ep-map-basemaps {
  position: absolute; top: 10px; left: 10px;
  display: flex; gap: 3px; padding: 3px;
  background: rgb(255 255 255 / 94%);
  border: 1px solid var(--line); border-radius: 9px;
}
.ep-map-basemaps button {
  padding: 4px 9px; border: 0; border-radius: 6px; background: transparent;
  font: inherit; font-size: 11px; color: var(--muted); cursor: pointer;
}
.ep-map-basemaps button:hover { color: var(--ink); }
.ep-map-basemaps button[aria-pressed="true"] { background: var(--navy); color: #fff; }