/* ──────────────────────────────────────────────────────────────
   Pin de lote/quadra selecionado - definição canônica.
   Usado por: Site (Setor Oeste + Bela Vista II), Dashboard e Portal.
   Cor vem da variável --pin (por empreendimento); label sempre oculto.

   ESTE ARQUIVO É DUPLICADO em:
     - Site/public_html/map-pin.css
     - Dashboard/app/static/map-pin.css
   Manter os dois EM SINCRONIA (mesmo padrão do share-sim.js).
   ────────────────────────────────────────────────────────────── */
.pin,
.mapa-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 14;
  pointer-events: none;
  --pin: var(--accent, #F58634);
}

/* Label é calculado no JS, mas fica oculto em todos os mapas. */
.pin-lbl,
.mapa-pin-lbl { display: none; }

.pin-r1, .pin-r2,
.mapa-pin-r1, .mapa-pin-r2 {
  position: absolute;
  border-radius: 50%;
  animation: pinPulse 2s ease-out infinite;
}
.pin-r1, .mapa-pin-r1 {
  width: 40px; height: 40px; top: -20px; left: -20px;
  border: 3px solid color-mix(in srgb, var(--pin) 62%, transparent);
}
.pin-r2, .mapa-pin-r2 {
  width: 62px; height: 62px; top: -31px; left: -31px;
  border: 2px solid color-mix(in srgb, var(--pin) 32%, transparent);
  animation-delay: .4s;
}
.pin-dot, .mapa-pin-dot {
  position: absolute;
  width: 16px; height: 16px; top: -8px; left: -8px;
  border-radius: 50%;
  background: var(--pin);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pin) 40%, transparent),
              0 2px 12px rgba(0, 0, 0, .5);
}

/* Arcos pulsantes sob o número da quadra do lote selecionado.
   Mesma cor do pin (--pin, por empreendimento); um pouco menores que o pin. */
.qlbl.hl::before, .qlbl.hl::after,
.mapa-qlbl.hl::before, .mapa-qlbl.hl::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  animation: pinPulse 2s ease-out infinite;
}
.qlbl.hl::before, .mapa-qlbl.hl::before {
  width: 36px; height: 36px; top: -18px; left: -18px;
  border: 3px solid color-mix(in srgb, var(--pin, var(--accent, #F58634)) 80%, transparent);
}
.qlbl.hl::after, .mapa-qlbl.hl::after {
  width: 58px; height: 58px; top: -29px; left: -29px;
  border: 2px solid color-mix(in srgb, var(--pin, var(--accent, #F58634)) 50%, transparent);
  animation-delay: .4s;
}

@keyframes pinPulse {
  0%   { transform: scale(.8);  opacity: .9; }
  100% { transform: scale(1.8); opacity: 0;  }
}

@media (prefers-reduced-motion: reduce) {
  .pin-r1, .pin-r2,
  .mapa-pin-r1, .mapa-pin-r2,
  .qlbl.hl::before, .qlbl.hl::after,
  .mapa-qlbl.hl::before, .mapa-qlbl.hl::after { animation: none; }
}