/* ============================================================
   W1 — Mapa (Localização) — MapLibre + camadas da marca
   ============================================================ */

.mapscreen { position: relative; height: 100%; width: 100%; background: var(--bg-0); }
.mapscreen__map { position: absolute; inset: 0; }
.mapscreen__map canvas { outline: none; }

.mapscreen__breadcrumb {
  position: absolute;
  top: 2.4rem; left: 2.4rem; z-index: 1000; /* acima dos panes do Leaflet */
  padding: 1rem 1.8rem;
  border-radius: 999px;
  color: var(--cream);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--hairline);
}

/* A porta temporária "Ver em 3D" foi removida em 14/08: o 3D deixou de ser
   alternativa e virou a própria Localização (decisão comercial). Esta tela
   Leaflet é fallback interno — não tem entrada de navegação. */

/* Chips de camada (topo, à direita) */
.mapscreen__chips {
  position: absolute;
  top: 2.4rem; right: 2.4rem; z-index: 1000;
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  white-space: nowrap;
}
.mapscreen__chips .chip {
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
/* Inativo: glass escuro translúcido; ativo mantém o bronze (components.css) */
.mapscreen__chips .chip:not(.is-active) { background: var(--glass-bg); opacity: 0.7; }

/* Grupo pai+sub e divisor */
.chip-group { display: inline-flex; gap: 0.6rem; align-items: center; }
.chip--sub {
  font-size: 1rem;
  padding: 0.6rem 1.4rem;
  min-height: 3.6rem;
  border-style: dashed;
}
.chip--sub.is-active { background: var(--accent-bright) !important; border-color: var(--accent-bright); color: #1B1917; opacity: 1; }
.chip-divider { width: 1px; align-self: stretch; margin: 0.4rem 0.6rem; background: var(--hairline); }

/* Chip de AÇÃO (Distâncias): natureza diferente — sem estado ativo persistente */
.chip--action {
  border-color: rgba(229, 224, 211, 0.5);
  background: rgba(27, 25, 23, 0.72) !important;
  color: var(--cream);
  opacity: 1 !important;
  gap: 0.8rem;
}
.chip--action:active { background: rgba(229, 224, 211, 0.15) !important; }
.icon--tiny { width: 1.6rem; height: 1.6rem; }

/* ---------- Painéis laterais (Distâncias + Pin/W2) ---------- */
.map-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 42rem;
  max-width: 92vw;
  z-index: 1100; /* acima dos chips/panes */
  padding: 5.6rem 4rem 4rem;
  overflow-y: auto;
  background: rgba(27, 25, 23, 0.88);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-left: 1px solid var(--hairline);
  transform: translateX(100%);
  transition: transform 320ms var(--ease-map);
}
.map-panel.is-open { transform: none; }
.map-panel__close { position: absolute; top: 1.6rem; right: 1.6rem; }
.map-panel__title {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  font-size: 2.6rem;
  line-height: 1.25;
  margin-bottom: 2.4rem;
}
.map-panel__title--pin { font-size: 2rem; margin-bottom: 0; }
.map-panel__head { display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; margin-bottom: 2rem; }
.map-panel__text { font-size: 1.35rem; line-height: 1.65; color: var(--cream); margin-bottom: 1.6rem; }
.map-panel .hr { margin: 2.4rem 0; }

/* Lista de distâncias */
.dist-list { list-style: none; display: flex; flex-direction: column; }
.dist-row {
  padding: 1.6rem 0.4rem;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: background var(--t-touch) ease;
}
.dist-row:active { background: rgba(229, 224, 211, 0.05); }
.dist-row:last-child { border-bottom: none; }
.dist-row__name {
  font-family: var(--font-body); font-weight: 500; font-size: 1.4rem; letter-spacing: 0.08em;
  display: inline-flex; align-items: center; gap: 1rem;
}
.dist-row__name .icon { color: var(--accent-bright); }
.dist-row--static { cursor: default; }
.dist-row--static:active { background: transparent; }
.dist-row__line { display: inline-flex; align-items: center; gap: 1rem; color: var(--text-2); }
.dist-row__line em { font-style: normal; font-size: 1.15rem; letter-spacing: 0.06em; }
.dist-row__line .icon { color: var(--cream); }

/* Galeria do card de pin (W2) */
.pin-gallery { position: relative; margin-bottom: 2rem; }
.pin-gallery__strip {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--radius-card);
  border: 1px solid var(--hairline);
}
.pin-gallery__strip::-webkit-scrollbar { display: none; }
.pin-gallery__strip img { width: 100%; flex: none; scroll-snap-align: center; display: block; }
.pin-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: var(--glass-bg); }
.pin-gallery__nav--prev { left: 1rem; }
.pin-gallery__nav--next { right: 1rem; }
.pin-gallery .dots { margin-top: 1.2rem; }

/* Escurecimento do mapa quando o card de pin está aberto */
.map-dim {
  position: absolute; inset: 0; z-index: 1050;
  background: rgba(0, 0, 0, 0.3);
}

/* iPad retrato / telas estreitas: painel vira bottom-sheet */
@media (max-aspect-ratio: 14/9) {
  .map-panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; max-width: none;
    max-height: 70vh;
    border-left: none; border-top: 1px solid var(--hairline);
    transform: translateY(100%);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
  .map-panel.is-open { transform: none; }
}

.mapscreen__loading {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); font-size: 1.4rem;
  background: var(--bg-0);
}

/* Botões +/− (obrigatório com touch infravermelho) */
.mapscreen__zoom {
  position: absolute; right: 2.4rem; bottom: 2.4rem; z-index: 1000;
  display: flex; flex-direction: column; gap: 1.2rem;
}
.map-btn {
  width: 6.4rem; height: 6.4rem;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  color: var(--cream);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-touch) ease, transform var(--t-touch) ease;
}
.map-btn:active { background: rgba(229, 224, 211, 0.12); transform: scale(0.94); }
.map-btn svg { width: 2.6rem; height: 2.6rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* Pins */
.map-pin {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
}
.map-pin__dot {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--accent-bright);
  border: 2px solid var(--cream);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.map-pin--air .map-pin__dot { background: var(--cream); }
.map-pin__tag {
  position: absolute;
  bottom: calc(100% + 0.8rem);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--accent-bright);
  background: rgba(27, 25, 23, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}

/* Pins do território (masterplan) — menores, cor por camada */
.map-pin--mp .map-pin__dot { width: 1.2rem; height: 1.2rem; border-width: 1.5px; }
.map-pin--amenities .map-pin__dot { background: var(--accent); }
.map-pin--residencial .map-pin__dot { background: var(--cream); }
.map-pin--privateResidences .map-pin__dot { background: var(--cream); }
.map-pin--emDesenvolvimento .map-pin__dot { background: var(--olive); }

/* Lados da tag (des-sobreposição de vizinhos): above = padrão */
.map-pin__tag--below {
  bottom: auto;
  top: calc(100% + 0.8rem);
}
.map-pin__tag--left {
  bottom: auto;
  left: auto;
  right: calc(100% + 1rem);
  top: 50%;
  transform: translateY(-50%);
}
.map-pin__tag--right {
  bottom: auto;
  left: calc(100% + 1rem);
  top: 50%;
  transform: translateY(-50%);
}

/* Longe: só os pontos do Residencial (as tags colidem); perto: tags visíveis */
.mapscreen[data-zoomband="far"] .map-pin--residencial .map-pin__tag { display: none; }
.map-pin__tag--mp {
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  border-color: var(--hairline);
  padding: 0.35rem 0.9rem;
}
.map-pin--emDesenvolvimento .map-pin__tag--mp { border-color: var(--olive); }
.mp-selo { color: #9BA07B; font-weight: 600; margin-left: 0.5rem; letter-spacing: 0.08em; }

/* Fazenda — pin central destacado com pulso */
.map-pin--farm .map-pin__dot { width: 2.2rem; height: 2.2rem; background: var(--accent); border-color: var(--cream); }
.map-pin__tag--farm {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.1em;
  border-color: var(--cream);
  font-size: 1.2rem;
}
.map-pin__pulse {
  position: absolute;
  top: 0; left: 50%;
  width: 2.2rem; height: 2.2rem;
  margin-left: -1.1rem;
  border-radius: 50%;
  background: var(--accent-bright);
  transform: translateZ(0);
  animation: pin-pulse 2s ease-out 3;
}
@keyframes pin-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}

/* Leaflet — fundo escuro e reset do divIcon (que vem branco por padrão) */
.leaflet-container { background: #1B1917; font: inherit; }
.leaflet-div-icon { background: transparent; border: none; }
.leaflet-container .map-pin { overflow: visible; }
.map-pin.leaflet-div-icon { width: auto !important; height: auto !important; }