@import url("topbar-float-experiment.css?v=68");

:root {
  --brand: #306636;
  --brand-dark: #254f2b;
  --bg: #101725;
  --panel: #306636;
  --panel-2: #202b42;
  --text: #f4f6fb;
  --muted: #aeb8cc;
  --accent: #f6c453;
  --accent-2: #ffffff;
  --danger: #ff7676;
  --ok: #8fd694;
  --shadow: 0 12px 30px rgba(0, 0, 0, .28);
  /* Fondo del visor en vista polígonos/capas (también fallback antes de JS). */
  --map-paper: #f1f2ed;
  --topbar-border: rgba(255, 255, 255, .08);
  --site-footer-height: 52px;
  --z-topbar: 40;
  --z-suggestions: 41;
  /* Capas del mapa (plano → controles). UF disponibles queda bajo controles flotantes. */
  --z-map-polygon-veil: 0;
  --z-map-polygon-ref: 1;
  --z-map-markers: 1;
  --z-map-uf-disponibles: 2;
  --z-map-command-category: 3;
  --z-map-route-path: 3;
  --z-map-route-markers: 4;
  --z-map-selected: 5;
  --z-map-amenity-sel: 6;
  --z-map-loading: 30;
  --z-map-hint: 20;
  --z-map-actions: 21;
  --z-map-zoom: 22;
  --z-map-uf-pill: 23;
  --z-map-places-btn: 24;
  --z-map-places-menu: 25;
  --z-map-layers-btn: 24;
  --z-map-layers-menu: 25;
  --z-map-zone-alert: 26;
  /* Avisos breves en #mapHint sobre controles del plano. */
  --z-map-hint-notice: 28;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { overflow: hidden; }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
button, input { font: inherit; }
button { touch-action: manipulation; }

/* La columna es minmax(0, 1fr) y no auto: una columna auto no baja del
   min-content de su contenido, así que un texto largo en la barra superior
   —por ejemplo la transcripción del micrófono mientras se dicta— ensancharía
   la columna y con ella el mapa. Con mínimo 0 el ancho nunca depende del
   contenido. */
.app-shell {
  width: 100vw;
  height: calc(100vh - var(--site-footer-height, 52px));
  height: calc(var(--app-vh, 100dvh) - var(--site-footer-height, 52px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.app-shell > .places-workspace {
  min-height: 0;
  min-width: 0;
}

.topbar {
  position: relative;
  z-index: var(--z-topbar);
  overflow: visible;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 12px 12px;
  background: linear-gradient(180deg, var(--brand), var(--brand-dark));
  border-bottom: 1px solid var(--topbar-border);
  box-shadow: var(--shadow);
}

.title-row {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  min-width: 0;
}

.header-logo {
  display: block;
  height: 55px;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.05;
  min-width: 0;
}

.brand-title {
  font-weight: 800;
  font-size: 21px;
  white-space: nowrap;
}

.brand-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

.search-row {
  position: relative;
  z-index: var(--z-suggestions);
  display: block;
  margin-top: 0;
}

.search-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 50px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
}

.search-field-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(246, 196, 83, .16);
}

.search-field-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-right: 9px;
  fill: none;
  stroke: rgba(174, 184, 204, 0.85);
  stroke-linecap: round;
  stroke-width: 2;
}

.search-row input {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  outline: none;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
}
.search-row input::placeholder {
  color: rgba(174, 184, 204, .7);
  font-weight: 400;
}
.search-row input:focus {
  border: 0;
  box-shadow: none;
}

/* «×» de limpiar (type=search): mismo tono que el micrófono, un poco más suave. */
.search-row input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  cursor: pointer;
  opacity: 0.68;
  background: center / 14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aeb8cc' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.search-row input[type="search"]::-webkit-search-cancel-button:hover {
  opacity: 0.88;
}

.suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: var(--z-suggestions);
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: min(240px, 38vh);
  overflow: auto;
  border-radius: 14px;
  background: rgba(12, 19, 33, .98);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.suggestions[hidden] { display: none; }
.suggestions button {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.suggestions button:active,
.suggestions button:hover {
  background: rgba(246, 196, 83, .14);
}

.suggestions button.suggestion-amenity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.suggestion-title {
  font-size: 17px;
  font-weight: 700;
}

.suggestion-sub {
  font-size: 12px;
  font-weight: 600;
  opacity: .65;
}

.suggestions-recent-header {
  padding: 2px 0 4px;
  pointer-events: none;
}

.suggestions-section-label {
  display: block;
  margin: 0;
  padding: 6px 12px 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(174, 184, 204, .88);
}

.candidate-box button,
.zoom-controls button,
.map-action {
  border: 0;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.search-row .btn-search {
  min-height: 50px;
  padding: 0 18px;
  font-size: 15px;
  border: 0;
  border-radius: 14px;
  background: #f4df36;
  color: #111111;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:active { transform: translateY(1px); }

/* Las UF recientes viven en #suggestions; el contenedor legacy queda oculto. */
.recent-ufs {
  display: none !important;
}
.recent-ufs[hidden] { display: none !important; }
.recent-chip {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(246, 196, 83, .28);
  border-radius: 999px;
  background: rgba(246, 196, 83, .12);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

/* Mensajes de estado (errores, avisos): solo lectores de pantalla; no en el header. */
.status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.status.is-empty,
.status:empty {
  visibility: hidden;
}
.status.error { color: var(--accent); }
.status.warning { color: var(--accent); }

.candidate-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-size: 12px;
}
.candidate-box[hidden] { display: none; }
.candidate-box button {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 12px;
}
.candidate-box span {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mismo gris que el borde del plano (plano-la-martona.webp): el visor se
   funde con la imagen y no se nota dónde termina el archivo. */
.map-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: var(--map-paper);
  overflow: hidden;
}

/* Modo día: color liso #639622 en .map-day-field-backdrop mientras no están
   el plano ni el césped; visor y loader transparentes. */
html:not([data-map-polygons]) .map-wrap.map-scene-day {
  background: #639622;
}

html:not([data-map-polygons]) .map-scroller.map-scene-day,
html:not([data-map-polygons]) .map-loading.map-scene-day,
html[data-map-scene="day"]:not([data-map-polygons]) .map-scroller,
html[data-map-scene="day"]:not([data-map-polygons]) .map-loading {
  background: transparent;
}

.map-day-field-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #639622;
}

/* Día: visible con data-map-scene en <html> (antes de que JS ponga .map-scene-day). */
html[data-map-scene="day"]:not([data-map-polygons]) .map-day-field-backdrop,
html:not([data-map-polygons]) .map-wrap.map-scene-day .map-day-field-backdrop {
  display: block;
}

/* Césped con árboles detrás del plano de día. Tamaño y posición los fija
   syncParkLayer() en px de plano; z-index -1 la deja debajo del plano y de
   los marcadores. Se muestra (y se descarga) recién con el plano listo y
   solo en día: oculta en noche y polígonos. */
.map-park-layer {
  display: none;
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-color: #639622;
  background-image: url("../assets/parque-tile.webp");
  background-repeat: repeat;
}

html[data-map-scene="day"]:not([data-map-polygons]) .map-park-layer.is-ready,
html:not([data-map-polygons]) .map-wrap.map-scene-day .map-park-layer.is-ready {
  display: block;
}

html[data-map-polygons] .map-wrap,
html[data-map-polygons] .map-scroller,
html[data-map-polygons] .map-loading {
  background: #f1f2ed;
}

.map-wrap.map-scene-night,
.map-scroller.map-scene-night,
.map-loading.map-scene-night {
  background: #000000;
}

/* Noche desde el primer pintado: data-map-scene lo fija el script del <head>
   antes de que map-scene ponga .map-scene-night. */
html[data-map-scene="night"]:not([data-map-polygons]) .map-wrap,
html[data-map-scene="night"]:not([data-map-polygons]) .map-scroller,
html[data-map-scene="night"]:not([data-map-polygons]) .map-loading {
  background: #000000;
}
html[data-map-scene="night"]:not([data-map-polygons]) .map-loading {
  color: #cfe0cb;
}
html[data-map-scene="night"]:not([data-map-polygons]) .map-loading__spinner {
  border-color: rgb(207 224 203 / 18%);
  border-top-color: currentColor;
}

html[data-map-scene="day"]:not([data-map-polygons]) .map-loading {
  color: #ffffff;
}
html[data-map-scene="day"]:not([data-map-polygons]) .map-loading__spinner {
  border-color: rgb(255 255 255 / 30%);
  border-top-color: currentColor;
}

.map-loading {
  position: absolute;
  inset: 0;
  z-index: var(--z-map-loading);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--map-paper);
  color: var(--brand);
  pointer-events: auto;
  transition: opacity 280ms ease;
}
.map-loading.is-done {
  opacity: 0;
  pointer-events: none;
}
.map-loading[hidden] { display: none; }

.map-loading__spinner {
  width: 26px;
  height: 26px;
  border: 1.5px solid rgb(48 102 54 / 16%);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: smartmap-loader-spin 0.75s linear infinite;
}

.map-loading__text {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

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

.map-wrap.is-map-loading .map-scroller {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.zone-alert-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-map-zone-alert);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 23, 37, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}
.zone-alert-overlay:not([hidden]) {
  pointer-events: auto;
}
.zone-alert-overlay[hidden] { display: none; }
.zone-alert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: min(92vw, 360px);
  padding: 24px 22px 22px;
  border-radius: 18px;
  border: 2px solid rgba(246, 196, 83, 0.55);
  background: linear-gradient(180deg, rgba(48, 102, 54, 0.96), rgba(37, 79, 43, 0.98));
  box-shadow: var(--shadow);
  text-align: center;
}
.zone-alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 3px solid var(--accent);
  color: var(--accent);
  background: rgba(246, 196, 83, 0.12);
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
}
.zone-alert-title {
  color: var(--accent);
  font-size: clamp(18px, 4.8vw, 22px);
  font-weight: 800;
  line-height: 1.25;
}
.zone-alert-dismiss {
  margin-top: 4px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(246, 196, 83, 0.45);
  border-radius: 999px;
  background: rgba(246, 196, 83, 0.14);
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.zone-alert-dismiss:active { opacity: 0.8; }

.zone-alert-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.speed-limit-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: block;
}

#directionsSafetyOverlay .speed-limit-icon {
  width: 84px;
  height: 84px;
}

.directions-safety-card .notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
}
.directions-safety-card .notice-cancel {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.directions-safety-card .notice-continue {
  background: var(--accent);
  color: #111;
}

@media (max-width: 520px) {
  #directionsSafetyOverlay .speed-limit-icon {
    width: 72px;
    height: 72px;
  }
}

.map-scroller {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  background: var(--map-paper);
  scrollbar-width: thin;
  overscroll-behavior: contain;
  /* flex + margin:auto en el hijo: centra el plano cuando es más chico
     que el visor sin recortar contenido cuando desborda (a diferencia
     de justify-content/align-items center). */
  display: flex;
}

.map-content {
  position: relative;
  width: 100px;
  height: 100px;
  transform-origin: 0 0;
  flex: 0 0 auto;
  margin: auto;
}

.map-plano-stack {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.map-base-image,
#planImage {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.map-plano-stack .map-plano-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map-plano-stack .map-plano-layer:not(.is-active) {
  visibility: hidden;
}

.map-plano-stack .map-plano-layer.is-active {
  visibility: visible;
}

.map-scene-btn.is-disabled,
.map-scene-btn:disabled {
  opacity: 0.55;
  cursor: wait;
  pointer-events: none;
}

html:not([data-map-polygons]) .polygon-ref-layer,
html:not([data-map-polygons]) .polygon-ref-veil,
html:not([data-map-polygons]) .polygon-ref-chip {
  display: none;
}

.polygon-ref-veil {
  position: absolute;
  inset: 0;
  z-index: var(--z-map-polygon-veil);
  pointer-events: none;
  background: rgba(255, 255, 255, 0.44);
  opacity: 0;
  visibility: hidden;
}

/* Visor: letterboxing y márgenes (queda detrás de #mapContent al hacer scroll). */
.polygon-ref-veil--viewport {
  z-index: 0;
}

/* Plano: misma capa sobre la imagen (los números van encima en .polygon-ref-layer). */
.polygon-ref-veil--plan {
  z-index: 0;
}

.polygon-ref-veil.is-user-visible {
  opacity: 1;
  visibility: visible;
}

.polygon-ref-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  height: var(--map-layers-btn-size, 40px);
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(7, 88, 58, 0.16);
  background: #ffffff;
  color: #07583a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.polygon-ref-chip[hidden] {
  display: none !important;
}

.polygon-ref-chip:hover,
.polygon-ref-chip:focus-visible {
  background: #f3f8f5;
  outline: none;
}

.polygon-ref-chip.is-active {
  background: var(--lm-gradient-green);
  border-color: transparent;
  color: #ffffff;
}

.polygon-ref-chip.is-active:hover,
.polygon-ref-chip.is-active:focus-visible {
  background: var(--lm-gradient-green-hover);
}

.polygon-ref-chip__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: inherit;
}

.polygon-ref-chip__icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.polygon-ref-chip__text {
  line-height: 1.2;
  white-space: nowrap;
}

.polygon-ref-layer {
  position: absolute;
  inset: 0;
  z-index: var(--z-map-polygon-ref);
  pointer-events: none;
  transition: opacity 180ms ease;
}

.polygon-ref-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: rgba(252, 252, 248, 0.94);
  border: 1px solid rgba(96, 136, 112, 0.7);
  color: #14482f;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  letter-spacing: -0.02em;
  box-shadow: 0 1px 2px rgba(20, 50, 35, 0.12);
  user-select: none;
  pointer-events: none;
}

.polygon-ref-label--compact {
  letter-spacing: -0.05em;
  font-weight: 800;
}

.polygon-ref-label.is-search-highlight {
  animation: polygon-ref-search-highlight 1.15s ease-in-out 3;
}

@keyframes polygon-ref-search-highlight {
  0%,
  100% {
    filter: none;
  }
  50% {
    filter: drop-shadow(0 0 5px rgba(7, 88, 58, 0.55)) drop-shadow(0 0 10px rgba(7, 88, 58, 0.28));
  }
}

.polygon-ref-layer.is-user-hidden {
  visibility: hidden;
  opacity: 0;
}

.markers-layer {
  position: absolute;
  inset: 0;
  z-index: var(--z-map-markers);
}
.markers-layer.is-uf-hover { cursor: pointer; }

/* Zonas clickeables de instalaciones (x/y de SMARTMAP_PLACES_DATA). */
.amenity-map-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.amenity-map-marker {
  position: absolute;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  padding: 0;
  z-index: 0;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.marker {
  position: absolute;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  /* El toque lo resuelve app.js por distancia (bindUfTapSelection). */
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.marker::before,
.marker::after {
  display: none;
  content: none;
}

/* Indicador de selección.
   Dice "esto es lo que está seleccionado", no "atención acá". Cuatro piezas,
   de afuera hacia adentro: un pulso lento que ayuda a encontrar el punto en
   un plano cargado, un anillo del acento con doble filo (blanco afuera,
   oscuro adentro) para que se lea igual sobre lote verde que sobre calle
   clara, un punto central relleno que marca la posición exacta, y la
   etiqueta centrada arriba, unida al anillo por una pequeña flecha.
   El área de 68px es la zona clickeable del marcador y no se dibuja. */
.marker.selected {
  z-index: var(--z-map-selected);
  width: 68px;
  height: 68px;
  margin-left: -34px;
  margin-top: -34px;
  background: transparent;
}

.marker.selected::before {
  display: block;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 3px solid var(--accent);
  box-shadow:
    inset 0 0 0 1px rgba(12, 19, 33, .45),
    0 0 0 1.5px rgba(255, 255, 255, .95),
    0 0 0 7px rgba(246, 196, 83, .16),
    0 2px 10px rgba(12, 19, 33, .32);
  pointer-events: none;
}

/* El punto en sí: relleno del acento con filo blanco. Chico, para señalar la
   posición exacta sin cubrir el número del lote. */
.marker.selected::after {
  display: block;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--accent);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .95),
    0 0 0 3px rgba(12, 19, 33, .35),
    0 1px 4px rgba(12, 19, 33, .45);
  pointer-events: none;
}

/* Pulso: un aro que nace del anillo, se expande y se desvanece. Lento y
   tenue, para orientar sin competir con el plano. Solo transform/opacity,
   así no cuesta repintado. */
.marker-pulse {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6);
  opacity: 0;
  pointer-events: none;
}
.marker.selected .marker-pulse,
.amenity-selected-marker .marker-pulse {
  display: block;
  animation: selectionPulse 2.2s cubic-bezier(.2, .6, .35, 1) .5s infinite;
}
.amenity-selected-marker .marker-pulse {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
}

@keyframes selectionPulse {
  0% {
    transform: scale(.85);
    opacity: .7;
  }
  70% {
    transform: scale(2.1);
    opacity: 0;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

/* Una sola entrada al seleccionar. La clase `flash` la pone y la saca el
   propio selector de UF, así que reaparecer sobre el mismo punto vuelve a
   animar; quedarse seleccionado, no. */
.marker.flash::before,
.marker.flash::after,
.amenity-selected-marker::before {
  animation: selectionRingIn 260ms cubic-bezier(.2, .7, .3, 1) both;
}
.marker.flash .marker-label {
  animation: selectionLabelIn 260ms cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes selectionRingIn {
  from {
    transform: translate(-50%, -50%) scale(.7);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes selectionLabelIn {
  from {
    transform: translate(-50%, 6px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-loading { transition: none !important; }
  .map-loading__spinner {
    animation: none !important;
    border-color: rgb(48 102 54 / 22%);
    border-top-color: var(--brand);
  }
  .marker.flash::before,
  .marker.flash::after,
  .marker.flash .marker-label,
  .amenity-selected-marker::before { animation: none; }
  .marker.selected .marker-pulse,
  .amenity-selected-marker .marker-pulse {
    animation: none;
    display: none;
  }
}

/* Etiqueta: centrada sobre el anillo, con flecha hacia el punto. El borde del
   acento la emparenta con el anillo; el fondo oscuro la separa del plano. */
.marker-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 10px);
  transform: translate(-50%, 0);
  display: none;
  min-width: 78px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(12, 19, 33, .96);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .18),
    0 8px 22px rgba(0, 0, 0, .4);
  border: 2px solid var(--accent);
  pointer-events: none;
  letter-spacing: .2px;
}
.marker-label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(12, 19, 33, .96);
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  border-bottom-right-radius: 2px;
}
.marker.selected .marker-label { display: block; }

.selected-uf-number {
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  width: 100%;
}

.selected-uf-owner {
  font-size: 12px;
  line-height: 1.2;
  opacity: 0.85;
  margin-top: 2px;
  max-width: 220px;
  white-space: normal;
  font-weight: 600;
  text-align: left;
  display: block;
  width: 100%;
}

.selected-uf-owner.is-empty {
  opacity: 0.6;
  font-weight: 500;
  font-style: italic;
}

.selected-uf-socio {
  font-size: 12px;
  line-height: 1.2;
  opacity: 0.7;
  margin-top: 2px;
  text-align: left;
  display: block;
  width: 100%;
}

.directions-button {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 14px;
  border: none;
  border-radius: 10px;
  background: #f4df36;
  color: #111111;
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  text-decoration: none;
  text-align: left;
  align-self: flex-start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.directions-button:active {
  transform: translateY(1px);
}

/* Acciones del destino seleccionado: "Cómo llegar" + "Mostrar QR" */
.destination-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}

.destination-actions .directions-button {
  margin-top: 8px;
  align-self: auto;
}

.qr-button {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  color: #111111;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.qr-button:active {
  transform: translateY(1px);
}

.geo-note,
.geo-unavailable {
  display: block;
  width: 100%;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.2;
  text-align: left;
  align-self: flex-start;
}

.geo-note {
  opacity: 0.7;
  color: rgba(244, 246, 251, .85);
}

.geo-unavailable {
  opacity: 0.65;
  color: rgba(244, 246, 251, .75);
  font-weight: 600;
}

/* Leyenda referencial (solo día/noche; oculta en polígonos vía data-map-polygons). */
.map-plan-reference-note {
  position: absolute;
  left: 50%;
  bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-map-hint);
  margin: 0;
  width: max-content;
  max-width: min(22rem, calc(100% - 7.5rem));
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  user-select: none;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.015em;
  color: rgba(255, 255, 255, 0.75);
}

html:not([data-map-polygons]) .map-plan-reference-note {
  display: block;
}

html[data-map-polygons] .map-plan-reference-note {
  display: none;
}

html[data-map-scene="night"] .map-plan-reference-note {
  color: rgba(236, 240, 245, 0.7);
}

.map-hint {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: var(--z-map-hint);
  max-width: calc(100% - 112px);
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(16, 23, 37, .92);
  color: rgba(244, 246, 251, .9);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.map-hint[hidden] { display: none; }
.map-hint-active {
  color: #fff;
  border-radius: 14px;
  border-color: rgba(48, 102, 54, .55);
  background: rgba(16, 36, 20, .94);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 10px 14px;
  cursor: default;
}

/* Avisos breves: misma tarjeta verde, texto legible. */
.map-hint.map-hint--notice {
  z-index: var(--z-map-hint-notice);
  max-width: min(420px, calc(100% - 20px));
  border-radius: 14px;
  padding: 12px 14px;
  cursor: default;
  white-space: normal;
}
.map-hint.map-hint--notice .zone-alert-text {
  margin: 0;
  font-size: clamp(13px, 3.6vw, 15px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.94);
}

.map-hint.map-hint--notice .map-hint-notice-sub {
  margin-top: 4px;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
}

/* Avisos breves en móvil: centro de la pantalla (eje horizontal y vertical). */
@media (max-width: 719px) {
  .map-hint.map-hint--notice:not(.map-hint-active) {
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: min(360px, calc(100% - 32px));
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  .map-hint.map-hint--notice .zone-alert-text {
    text-align: center;
  }
}

/* En escritorio el aviso va arriba al centro para no tapar la ficha (izquierda). */
@media (min-width: 720px) {
  #mapNotice.map-hint--notice {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* El área de 32 px queda alta a propósito: así el centro óptico de la × cae a
   la altura del centro de la primera línea de la ficha, que es con lo que el
   ojo la compara. Con top mayor la × se lee visualmente caída. */
.info-card-close {
  position: absolute;
  top: 1px;
  right: 6px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, .62);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.info-card-close:hover,
.info-card-close:focus-visible {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .92);
  outline: none;
}

.uf-disponibles-active-pill {
  position: absolute;
  top: calc(10px + 40px + 8px);
  right: 10px;
  z-index: var(--z-map-uf-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(300px, calc(100% - 20px));
  padding: 7px 8px 7px 12px;
  border: 1px solid rgba(48, 102, 54, .45);
  border-radius: 999px;
  background: rgba(16, 36, 20, .9);
  color: rgba(244, 246, 251, .92);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.uf-disponibles-active-pill[hidden] { display: none; }

.uf-disponibles-active-pill-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uf-disponibles-active-pill-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -4px -2px -4px 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(244, 246, 251, .95);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.uf-disponibles-active-pill-close:hover,
.uf-disponibles-active-pill-close:focus-visible {
  background: rgba(246, 196, 83, .18);
  border-color: rgba(246, 196, 83, .35);
  color: #fff;
  outline: none;
}

@media (max-width: 480px) {
  .uf-disponibles-active-pill {
    top: calc(8px + 38px + 6px);
    right: 8px;
    max-width: min(320px, calc(100% - 16px));
    padding: 6px 6px 6px 10px;
    font-size: 10px;
  }

  .uf-disponibles-active-pill-close {
    width: 36px;
    height: 36px;
    margin: -6px -4px -6px 0;
  }
}

.map-actions {
  position: absolute;
  left: 10px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-map-actions);
  display: flex;
  gap: 8px;
}

.map-action {
  min-height: 50px;
  padding: 0 12px;
  border-radius: 16px;
  background: rgba(23, 32, 51, .96);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.12);
}
.map-action-primary {
  background: #f4df36;
  color: #111111;
  border-color: rgba(244, 223, 54, .45);
}
.map-action-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.map-action-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  line-height: 0;
}
.map-action-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}
.map-action-label {
  min-width: 0;
}


/* Día / noche: misma columna que zoom (right 16px, ancho 33px). */
.map-scene-btn {
  position: absolute;
  right: 16px;
  top: 10px;
  z-index: var(--z-map-zoom);
  width: 33px;
  height: 33px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: rgba(23, 32, 51, .94);
  color: var(--text);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.map-scene-btn__icon {
  display: none;
  line-height: 0;
}
.map-scene-btn__icon svg {
  display: block;
}
.map-scene-btn.is-day .map-scene-btn__icon--day,
.map-scene-btn.is-night .map-scene-btn__icon--night,
.map-scene-btn.is-polygons .map-scene-btn__icon--polygons {
  display: inline-flex;
}
.map-scene-btn__auto {
  display: none;
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(12, 19, 33, .85);
}
.map-scene-btn.is-auto .map-scene-btn__auto {
  display: block;
}
.map-scene-btn:hover,
.map-scene-btn:focus-visible {
  filter: brightness(1.12);
  outline: none;
}
.map-scene-btn:active {
  filter: brightness(1.35);
}

/* Zoom: barra inferior derecha (base Leaflet/Pilar +25 % tamaño y más aire al borde). */
.zoom-controls {
  position: absolute;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-map-zoom);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}
.zoom-controls button {
  width: 33px;
  height: 33px;
  padding: 2px 0 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 0;
  background: rgba(23, 32, 51, .94);
  color: var(--text);
  font-size: 23px;
  font-weight: 500;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.zoom-controls button:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.zoom-controls button:last-child {
  border-bottom: 0;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
#zoomOut {
  padding-top: 1px;
}
/* Sin el translateY(1px) global: los controles de zoom no se mueven al
   pulsar; la respuesta visual es solo un cambio de brillo. */
.zoom-controls button:active {
  transform: none;
  filter: brightness(1.35);
}

@media (hover: none) and (pointer: coarse) {
  .map-scene-btn {
    width: 38px;
    height: 38px;
    border-radius: 3px;
  }
  .zoom-controls button {
    width: 38px;
    height: 38px;
    font-size: 25px;
    padding-top: 2px;
  }

  #zoomOut {
    padding-top: 1px;
  }
  .zoom-controls button:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .zoom-controls button:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }
}

/* Área táctil ampliada (unos 44 px) con un pseudo-elemento invisible: el
   botón conserva su tamaño y aspecto. */
@media (hover: none) and (pointer: coarse) {
  .zoom-controls {
    overflow: visible;
  }
  .zoom-controls button {
    position: relative;
  }
  .zoom-controls button::before,
  .map-scene-favorite-btn::before,
  .map-scene-auto-btn::before,
  .search-voice::before {
    content: '';
    position: absolute;
    inset: -6px;
  }
  #zoomIn::before { inset: -6px -6px 0; }
  #zoomOut::before { inset: 0 -6px -6px; }
  .search-voice::before { inset: -5px; }
}

@media (max-width: 600px) {
  .topbar {
    gap: 8px;
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .header-logo { height: 47px; }
  .brand-title { font-size: 19px; }
  .brand-subtitle { font-size: 14px; }
  .selected-uf-owner {
    font-size: 11px;
    max-width: 180px;
  }
}

/* En teléfono el halo exterior se recorta un poco: el mismo anillo ocupa
   proporcionalmente más pantalla y taparía lo que está alrededor. */
@media (max-width: 480px) {
  .marker.selected::before {
    box-shadow:
      inset 0 0 0 1px rgba(12, 19, 33, .45),
      0 0 0 1.5px rgba(255, 255, 255, .95),
      0 0 0 5px rgba(246, 196, 83, .16),
      0 2px 8px rgba(12, 19, 33, .32);
  }
  .amenity-selected-marker::before {
    width: 52px;
    height: 52px;
    box-shadow:
      0 0 0 1px rgba(12, 19, 33, .3),
      0 0 0 5px rgba(246, 196, 83, .12),
      0 2px 10px rgba(12, 19, 33, .28);
  }
}

@media (max-width: 420px) {
  .topbar { padding-left: 8px; padding-right: 8px; gap: 7px; }
  .recent-ufs { gap: 5px 6px; }
  .recent-chip { min-height: 32px; padding: 0 9px; font-size: 12px; }
  .search-row input { min-height: 42px; height: 42px; font-size: 1rem; }
  .search-row .btn-search { min-height: 48px; padding: 0 14px; }
  .map-action { min-height: 48px; font-size: 13px; }
}

@media (max-width: 719px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
  }
  .title-row {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }
  .topbar-end {
    grid-column: 2;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .search-row {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
  }
  .recent-ufs {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .candidate-box {
    grid-column: 1 / -1;
  }
  .voice-status {
    grid-column: 1 / -1;
  }
  .places-menu-btn-label {
    display: none;
  }
  .places-menu-btn {
    width: 46px;
    min-width: 46px;
    padding: 0;
  }

  /* Acciones del plano: como Pilar en móvil (iconos cuadrados, fila abajo a la izquierda). */
  .map-actions {
    left: 10px;
    right: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: calc(100% - 20px);
    flex-wrap: nowrap;
    align-items: center;
    /* Por encima de .route-bar (25): si hay solape, el toque llega al botón. */
    z-index: 27;
  }

  .map-action {
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 9px;
    border-radius: 12px;
  }

  .map-action-with-icon {
    gap: 0;
  }

  .map-action-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
  }

  .map-action-icon {
    width: 20px;
    height: 20px;
  }

  .map-action-icon svg {
    width: 20px;
    height: 20px;
  }

  /* Leyenda referencial: misma columna que .map-actions (abajo izquierda). */
  .map-plan-reference-note {
    left: 10px;
    right: auto;
    transform: none;
    text-align: left;
    max-width: calc(100% - 20px);
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }

  .map-wrap:has(.route-bar:not([hidden])) .map-plan-reference-note {
    left: 10px;
    transform: none;
    text-align: left;
  }
}

@media (min-width: 720px) {
  .topbar {
    display: grid;
    /* Misma lógica que Pilar: marca | buscador flexible | acción derecha (auto). */
    grid-template-columns: minmax(200px, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 20px;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 22px 14px;
  }
  .title-row { margin-bottom: 0; grid-column: 1; grid-row: 1; padding-right: 0; align-self: center; }
  /* El campo ocupa todo el ancho tras la marca (como la barra de candidatos). */
  .search-row {
    grid-column: 2 / 4;
    grid-row: 1;
    margin-top: 0;
    align-self: center;
    min-width: 0;
  }
  .search-field-wrap {
    width: 100%;
  }
  .topbar:has(#placesMenuBtn:not([hidden])) .search-row {
    padding-right: 132px;
  }
  .recent-ufs { grid-column: 2 / 4; grid-row: 2; margin-top: 0; }
  .topbar-end {
    grid-column: 3;
    grid-row: 1;
    margin-top: 0;
    align-self: center;
    justify-self: end;
    position: relative;
    z-index: calc(var(--z-topbar) + 1);
  }
  /* Sin ubicación explícita caía en la primera columna, debajo del logo y con
     220 px de ancho. Va en su propia fila y a todo el ancho: es texto corrido y
     así no compite con ninguna columna ni se pisa con la caja de candidatos. */
  .voice-status { grid-column: 1 / 4; grid-row: 4; margin-top: 0; }
  .candidate-box { grid-column: 2 / 4; grid-row: 3; }
  .map-actions {
    left: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .map-hint { left: 18px; top: 18px; }
  .map-plan-reference-note {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    max-width: min(24rem, calc(100% - 8.5rem));
    font-size: 10.5px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(120px, max-content);
    gap: 6px 10px;
    align-items: start;
    padding-top: calc(6px + env(safe-area-inset-top));
    padding-bottom: 6px;
  }
  .title-row { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .search-row { grid-column: 2; grid-row: 1; margin-top: 0; }
  .header-logo { height: 44px; }
  .brand-title { font-size: 17px; }
  .brand-subtitle { font-size: 13px; }
  .topbar-end { grid-column: 3; grid-row: 1; margin-top: 0; align-self: center; }
  .voice-status { grid-column: 1 / 4; grid-row: 4; margin-top: 0; max-height: 2.6em; }
  .recent-ufs { margin-top: 0; gap: 5px 7px; }
  .candidate-box { grid-column: 2 / 4; margin-top: 0; padding: 6px; }
  .map-actions {
    left: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .map-action { min-height: 44px; }
  .map-plan-reference-note {
    left: 8px;
    right: auto;
    transform: none;
    text-align: left;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    font-size: 9.5px;
    max-width: calc(100% - 16px);
  }
}

/* Recorrido abierto: la barra sube desde ~70px; subir la leyenda para no solaparla. */
.map-wrap:has(.route-bar:not([hidden])) .map-plan-reference-note {
  bottom: calc(128px + env(safe-area-inset-bottom, 0px));
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.title-row .brand {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}

.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 0;
  padding: 5px 12px calc(5px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(10, 15, 25, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__brand {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.site-footer__brand:hover,
.site-footer__brand:focus-visible {
  color: var(--accent);
  outline: none;
}

.site-footer__legal,
.site-footer__tagline {
  margin: 0;
  max-width: min(100%, 42rem);
  padding-inline: 2px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.38);
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 420px) {
  .site-footer {
    font-size: 10px;
    padding-inline: 8px;
  }
  .site-footer__legal,
  .site-footer__tagline {
    font-size: 8px;
    line-height: 1.25;
  }
}

/* Cluster superior derecho: Polígonos · Capas · día/noche (Lugares va en el header). */
.map-top-actions {
  --map-top-actions-inset-top: 10px;
  --map-top-actions-inset-right: 16px;
  --map-layers-btn-size: 40px;
  --map-top-actions-stack-gap: 8px;
  --map-scene-cluster-gap: 6px;
  position: absolute;
  top: var(--map-top-actions-inset-top);
  right: var(--map-top-actions-inset-right);
  z-index: var(--z-map-layers-btn);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--map-top-actions-stack-gap);
  width: max-content;
  max-width: calc(100% - 32px);
}

/* Arriba aunque el chip «Polígonos» alargue la columna de escena: el menú de
   opciones se abre a una altura fija debajo del botón. */
.map-top-actions > .layers-menu-btn {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  align-self: flex-start;
  z-index: 1;
}

/* Selector día/noche + chip Polígonos: columna alineada a la derecha del botón de escena. */
.map-scene-cluster {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--map-scene-cluster-gap);
  flex: 0 0 auto;
  min-width: 0;
}

.map-scene-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex: 0 0 auto;
  align-self: flex-end;
}

.map-scene-cluster > .map-scene-toolbar,
.map-scene-cluster > .polygon-ref-chip {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  align-self: flex-end;
}

.map-scene-toolbar > .map-scene-btn,
.map-scene-favorite-btn,
.map-scene-auto-btn {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
}

.map-scene-favorite-btn,
.map-scene-auto-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 0;
  background: rgba(23, 32, 51, .94);
  color: rgba(244, 246, 251, .88);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.map-scene-favorite-btn__fill {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.map-scene-favorite-btn.is-active {
  color: #ffd039;
}

.map-scene-favorite-btn.is-active .map-scene-favorite-btn__fill {
  opacity: 1;
}

.map-scene-favorite-btn.is-active .map-scene-favorite-btn__outline {
  opacity: 0;
}

.map-scene-favorite-btn:hover,
.map-scene-favorite-btn:focus-visible,
.map-scene-auto-btn:hover,
.map-scene-auto-btn:focus-visible {
  filter: brightness(1.12);
  outline: none;
}

.map-scene-favorite-btn:active,
.map-scene-auto-btn:active {
  filter: brightness(1.35);
}

.map-scene-favorite-btn.is-disabled,
.map-scene-auto-btn.is-disabled,
.map-scene-favorite-btn:disabled,
.map-scene-auto-btn:disabled {
  opacity: 0.55;
  cursor: wait;
  pointer-events: none;
}

.map-scene-auto-btn__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

.map-scene-auto-btn.is-active {
  color: #ffd039;
  box-shadow:
    0 0 0 1px rgba(255, 208, 57, 0.45),
    0 1px 5px rgba(0, 0, 0, 0.65);
}

@media (hover: none) and (pointer: coarse) {
  .map-scene-favorite-btn,
  .map-scene-auto-btn {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 420px) {
  .map-scene-favorite-btn,
  .map-scene-auto-btn {
    width: 32px;
    height: 32px;
    border-radius: 3px;
  }
}

/* Lugares en el header (misma posición y criterio que «Capas» en SmartMap Pilar). */
.topbar-end {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 10px;
  min-width: 0;
}

.topbar-places {
  position: relative;
  flex: 0 0 auto;
  z-index: calc(var(--z-topbar) + 1);
}

.places-menu-btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  background: rgba(12, 19, 33, .38);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  -webkit-tap-highlight-color: transparent;
}
.places-menu-btn[hidden] { display: none; }
.places-menu-btn-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.places-menu-btn-label {
  flex: 0 1 auto;
}
.places-menu-btn:hover,
.places-menu-btn:focus-visible {
  background: rgba(12, 19, 33, .52);
  border-color: rgba(246, 196, 83, .45);
  outline: none;
}
.places-menu-btn[aria-expanded="true"] {
  color: var(--brand-dark);
  background: var(--accent);
  border-color: var(--accent);
}
.places-menu-btn[aria-expanded="true"]:hover,
.places-menu-btn[aria-expanded="true"]:focus-visible {
  background: #f4b83d;
  border-color: #f4b83d;
}

/* Workspace mapa + panel Lugares (sidebar | map-stage, como Pilar). */
.places-workspace {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.places-workspace[data-places-panel="open"],
.places-workspace:has(#placesMenu:not([hidden])) {
  grid-template-columns: 316px minmax(0, 1fr);
}

.places-workspace > .map-stage {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.places-workspace[data-places-panel="open"] > .map-stage,
.places-workspace:has(#placesMenu:not([hidden])) > .map-stage {
  grid-column: 2;
}

.places-workspace > .places-menu:not([hidden]) {
  grid-column: 1;
  grid-row: 1;
}

.map-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.map-stage > .map-wrap {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.places-menu {
  z-index: 800;
  display: none;
  flex-direction: column;
  width: 316px;
  max-width: 316px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  color: var(--text);
  background: linear-gradient(180deg, rgba(16, 23, 37, .98), rgba(12, 19, 33, .99));
  border: 0;
  border-right: 1px solid rgba(48, 102, 54, .38);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.places-menu:not([hidden]) {
  display: flex;
}

.places-menu[hidden] {
  display: none !important;
}

.places-menu-scroll {
  display: grid;
  flex: 1 1 0;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  padding: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
  grid-auto-rows: max-content;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(246, 196, 83, .45) transparent;
}

.places-menu-scroll::-webkit-scrollbar {
  width: 6px;
}
.places-menu-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(246, 196, 83, .45);
}

.places-menu-block {
  min-width: 0;
  max-width: 100%;
  padding: 12px;
  overflow-x: hidden;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  box-sizing: border-box;
}

.places-menu-block-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
  margin-bottom: 10px;
}

.places-menu-block-title,
.places-menu-category {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(246, 196, 83, .92);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  background: transparent;
}

.places-menu-block-list {
  display: grid;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.places-menu-item {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  padding: 8px;
  overflow-x: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: rgba(12, 19, 33, .55);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.places-menu-item-icon {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(48, 102, 54, .85), rgba(41, 84, 47, .72));
  border: 0;
  color: #fff;
}
.places-menu-item-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.places-menu-item-label {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.places-menu-share {
  display: grid;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.places-menu-share .places-menu-share-btn[hidden] { display: none; }

/* Acciones generales (compartir, instalar): ícono en contorno para separarlas
   de los lugares del mapa. */
.places-menu-share .places-menu-item-icon {
  background: transparent;
  border: 1px solid rgba(246, 196, 83, .55);
  color: rgba(246, 196, 83, .95);
}

.places-menu-share-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.places-menu-share-title,
.places-menu-share-sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.places-menu-share-title {
  font-weight: 600;
}

.places-menu-share-sub {
  color: var(--muted);
  font-size: 0.76rem;
}

.places-menu-item:hover,
.places-menu-item:focus-visible {
  background: rgba(246, 196, 83, .12);
  border-color: rgba(246, 196, 83, .32);
  outline: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.places-menu-item.is-selected {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-color: rgba(246, 196, 83, .45);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}
.places-menu-item.is-selected .places-menu-item-icon {
  background: rgba(255, 255, 255, .16);
  color: var(--accent);
}

.places-menu-close {
  display: none;
  flex: 0 0 auto;
  gap: 6px;
  align-items: center;
  justify-content: center;
  align-self: start;
  height: 36px;
  padding: 0 16px;
  margin: 0 14px calc(14px + env(safe-area-inset-bottom, 0px));
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(12, 19, 33, .72);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.places-menu-close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}
.places-menu-close:hover,
.places-menu-close:focus-visible {
  background: rgba(48, 102, 54, .35);
  border-color: rgba(246, 196, 83, .35);
  outline: none;
}

.places-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 850;
  display: none;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(12, 19, 33, .52);
  cursor: pointer;
}
.places-menu-backdrop:not([hidden]) {
  display: block;
}

@media (max-width: 1200px) {
  .places-workspace[data-places-panel="open"],
  .places-workspace:has(#placesMenu:not([hidden])) {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .places-workspace > .places-menu:not([hidden]) {
    width: 300px;
    max-width: 300px;
  }
}

@media (max-width: 900px) {
  .places-workspace[data-places-panel="open"],
  .places-workspace:has(#placesMenu:not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
  }

  .places-workspace[data-places-panel="open"] > .map-stage,
  .places-workspace:has(#placesMenu:not([hidden])) > .map-stage {
    grid-column: 1;
  }

  .places-menu:not([hidden]) {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 940;
    width: min(320px, 88vw);
    max-width: min(320px, 88vw);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .42);
  }

  .places-menu-close {
    display: inline-flex;
  }

  /* Sin oscurecer el mapa: capa invisible solo para cerrar al tocar fuera (criterio Pilar en móvil). */
  .places-menu-backdrop:not([hidden]) {
    background: transparent;
  }
}

/* Panel Capas (botón ícono + menú desplegable) */
.layers-menu-btn {
  position: relative;
  z-index: var(--z-map-layers-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
}
.layers-menu-btn[hidden] { display: none; }
.layers-menu-btn:hover,
.layers-menu-btn:focus-visible {
  background: var(--brand-dark);
  outline: none;
}
.layers-menu-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.layers-menu-btn-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.layers-menu {
  position: absolute;
  top: calc(
    var(--map-top-actions-inset-top, 10px) +
    var(--map-layers-btn-size, 40px) +
    10px
  );
  right: var(--map-top-actions-inset-right, 10px);
  z-index: var(--z-map-layers-menu);
  display: flex;
  flex-direction: column;
  width: min(300px, calc(100% - 20px));
  max-height: calc(100% - 64px);
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(16, 23, 37, .98) 0%, rgba(32, 43, 66, .97) 55%, rgba(37, 79, 43, .22) 100%);
  color: var(--text);
  border: 1px solid rgba(48, 102, 54, .45);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(255, 255, 255, .04) inset;
  backdrop-filter: blur(10px);
  overscroll-behavior: contain;
}
.layers-menu[hidden] { display: none; }
/* Medidas de .map-top-actions: es hermano, no hereda, y abre bajo su botón. */
.layers-menu {
  --map-top-actions-inset-top: 10px;
  --map-top-actions-inset-right: 16px;
  --map-layers-btn-size: 40px;
}
@media (max-width: 420px) {
  .layers-menu {
    --map-top-actions-inset-top: 8px;
    --map-layers-btn-size: 38px;
  }
}
@media (min-width: 720px) {
  .layers-menu {
    --map-top-actions-inset-top: 18px;
    --map-top-actions-inset-right: 18px;
  }
}

.layers-menu-header {
  flex: 0 0 auto;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.25;
  color: #fff;
  background: linear-gradient(180deg, rgba(48, 102, 54, .42), rgba(48, 102, 54, .08));
}

.layers-menu-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(246, 196, 83, .45) transparent;
}

.layers-menu-body::-webkit-scrollbar {
  width: 6px;
}
.layers-menu-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(246, 196, 83, .45);
}

.layers-menu-section + .layers-menu-section,
.layers-menu-divider + .layers-menu-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.layers-menu-divider {
  margin: 10px 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.layers-menu-title {
  display: inline-block;
  margin: 0 0 8px 2px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(246, 196, 83, .12);
  border: 1px solid rgba(246, 196, 83, .28);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}

.layers-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.layers-menu-item + .layers-menu-item {
  margin-top: 4px;
}

.layers-menu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(48, 102, 54, .55);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
}
.layers-menu-item-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.layers-menu-item-label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.layers-menu-item:hover,
.layers-menu-item:focus-visible {
  background: rgba(246, 196, 83, .14);
  border-color: rgba(246, 196, 83, .35);
  outline: none;
  box-shadow: 0 0 0 2px rgba(246, 196, 83, .12);
}

.layers-menu-item.is-selected {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-color: rgba(246, 196, 83, .55);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(246, 196, 83, .25),
    0 8px 18px rgba(0, 0, 0, .28);
}
.layers-menu-item.is-selected .layers-menu-item-icon {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .22);
  color: var(--accent);
}

.layers-menu-item-action {
  cursor: pointer;
}

@media (max-width: 420px) {
  .map-top-actions {
    --map-top-actions-inset-top: 8px;
    --map-top-actions-inset-right: 16px;
    --map-layers-btn-size: 38px;
    --map-top-actions-stack-gap: 8px;
  }
  .polygon-ref-chip {
    height: 38px;
    padding: 0 10px;
    font-size: 11px;
    border-radius: 7px;
    gap: 6px;
  }
  .polygon-ref-chip__icon svg {
    width: 14px;
    height: 14px;
  }
  .layers-menu-btn {
    width: 38px;
    height: 38px;
  }
  .map-scene-btn {
    width: 38px;
    height: 38px;
    border-radius: 3px;
  }
  .layers-menu {
    width: min(300px, calc(100% - 16px));
  }
  .layers-menu-header {
    font-size: 14px;
    padding: 12px 14px 10px;
  }
  .uf-disponibles-active-pill {
    top: 8px;
    right: 8px;
  }
}

@media (min-width: 720px) {
  .map-top-actions {
    --map-top-actions-inset-top: 18px;
    --map-top-actions-inset-right: 18px;
  }
  .uf-disponibles-active-pill {
    top: calc(18px + 40px + 8px);
    right: 18px;
  }
}

.selected-uf-disponible {
  display: block;
  width: 100%;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  text-align: left;
  color: var(--accent);
}

.selected-uf-lote-sector,
.selected-uf-lote-superficie,
.selected-uf-lote-nota,
.selected-uf-estado {
  display: block;
  width: 100%;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
  color: rgba(255, 255, 255, .92);
}

.selected-uf-lote-disclaimer {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.25;
  font-style: italic;
  text-align: left;
  color: rgba(255, 255, 255, .75);
}

/* Capa lotes públicos (clases legacy uf-disponibles-*): dentro del plano. */
.uf-disponibles-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-map-uf-disponibles);
}

.infra-operativa-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-map-command-category);
}

.infra-operativa-layer .command-category-marker {
  pointer-events: auto;
}

.uf-disponible-map-marker {
  position: absolute;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.uf-disponible-map-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 8px rgba(246, 196, 83, .4);
  opacity: .9;
  pointer-events: none;
}

.uf-disponible-map-marker-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--brand);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  pointer-events: none;
}

@media (max-width: 480px) {
  .places-menu-item {
    min-height: 46px;
  }
}

/* Marcador de amenity seleccionado (uno solo, dinámico):
   badge verde institucional con ícono de la categoría y pulso amarillo. */
.amenity-selected-marker {
  position: absolute;
  width: 68px;
  height: 68px;
  margin-left: -34px;
  margin-top: -34px;
  border-radius: 999px;
  z-index: var(--z-map-amenity-sel);
  pointer-events: none;
}
/* Mismo anillo que en las UF, más ancho porque acá rodea la chapa del lugar
   en vez de un punto. Se dibuja por fuera de ella y deja el ícono a la vista. */
.amenity-selected-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 3px solid var(--accent);
  box-shadow:
    inset 0 0 0 1px rgba(12, 19, 33, .4),
    0 0 0 1.5px rgba(255, 255, 255, .95),
    0 0 0 7px rgba(246, 196, 83, .14),
    0 2px 12px rgba(12, 19, 33, .28);
}

.amenity-marker-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--brand);
  border: 3px solid #fff;
  color: #fff;
  box-shadow:
    0 0 0 6px rgba(246, 196, 83, .30),
    0 4px 14px rgba(0, 0, 0, .45);
}
.amenity-marker-badge svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Modal "Mostrar QR": fondo blanco, QR grande y centrado, cierre claro.
   Verde institucional para el título y el botón (sin violeta). */
.qr-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.qr-modal[hidden] { display: none; }

.qr-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 25, .72);
}

.qr-modal-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(380px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 20px 20px 16px;
  border-radius: 18px;
  background: #fff;
  color: #1c2430;
  box-shadow: var(--shadow);
  text-align: center;
}

.qr-modal-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--brand);
  word-break: break-word;
}

.qr-modal-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: #44506a;
}

.qr-modal-canvas {
  display: block;
  width: min(300px, 76vw, 52vh);
  height: auto;
  background: #fff;
  image-rendering: pixelated;
}

.qr-modal-close {
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.qr-modal-close:hover,
.qr-modal-close:focus-visible {
  background: var(--brand-dark);
  outline: none;
}

.install-modal-card {
  align-items: stretch;
  text-align: left;
}
.install-modal-card .qr-modal-title,
.install-modal-intro {
  text-align: center;
}
.install-modal-steps {
  display: grid;
  gap: 9px;
  margin: 4px 0 0;
  padding-left: 22px;
  color: #1c2430;
  font-size: 14px;
  line-height: 1.4;
}
.install-modal-steps svg {
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.install-modal-note {
  margin: 2px 0 0;
  color: #44506a;
  font-size: 12.5px;
  line-height: 1.35;
}
.install-modal-note[hidden] { display: none; }

@media (max-width: 480px) {
  .qr-modal { padding: 10px; }
  .qr-modal-card { width: 100%; }
  .qr-modal-canvas { width: min(82vw, 56vh); }
}

/* Modal QR de acceso al mapa (carteles / señalética). */
.map-access-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.map-access-qr-modal[hidden] { display: none; }

.map-access-qr-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 25, .72);
}

.map-access-qr-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(320px, calc(100% - 16px));
  max-height: calc(100dvh - 24px);
  overflow: visible;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: #fff;
  color: #1c2430;
  box-shadow: var(--shadow);
  text-align: center;
}

.map-access-qr-wrap {
  width: min(62vw, 280px, calc(100dvh - 200px));
  aspect-ratio: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-access-qr-canvas {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  image-rendering: pixelated;
}

.map-access-qr-download,
.map-access-qr-close {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.map-access-qr-download {
  background: rgba(48, 102, 54, .1);
  color: var(--brand);
  border: 1px solid rgba(48, 102, 54, .35);
}
.map-access-qr-download:hover,
.map-access-qr-download:focus-visible {
  background: rgba(48, 102, 54, .18);
  outline: none;
}

.map-access-qr-close {
  background: var(--brand);
  color: #fff;
}
.map-access-qr-close:hover,
.map-access-qr-close:focus-visible {
  background: var(--brand-dark);
  outline: none;
}

@media (max-width: 480px) {
  .map-access-qr-modal { padding: 8px; }
  .map-access-qr-card {
    width: min(300px, calc(100% - 8px));
    padding: 14px 12px 12px;
    gap: 8px;
  }
  .map-access-qr-wrap {
    width: min(58vw, 240px, calc(100dvh - 190px));
  }
}

/* Marcadores dev de amenities (solo con ?coords=1) */
.amenity-dev-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.amenity-dev-marker {
  position: absolute;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  border-radius: 999px;
  background: #b13bd4;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(177, 59, 212, .4), 0 2px 8px rgba(0, 0, 0, .4);
  z-index: 8;
  cursor: pointer;
}

/* Panel de desarrollo de coordenadas (solo con ?coords=1). */
.coord-debug-panel {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 30;
  width: min(300px, calc(100% - 20px));
  max-height: calc(100% - 66px);
  overflow: auto;
  padding: 12px;
  border-radius: 12px;
  background: rgba(12, 19, 33, .96);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}

.coord-debug-header {
  font-weight: 800;
  font-size: 13px;
}

.coord-debug-note {
  margin-top: 4px;
  opacity: .75;
}

.coord-debug-subtitle {
  margin-top: 12px;
  font-weight: 700;
}

.coord-debug-output {
  margin: 6px 0;
  padding: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .12);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  white-space: pre;
  user-select: text;
}

.coord-debug-copy {
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: #f4df36;
  color: #111;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.coord-debug-copy:disabled {
  opacity: .45;
  cursor: default;
}

.coord-debug-list {
  margin-top: 6px;
}

.coord-debug-item {
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.coord-debug-item-title {
  font-weight: 700;
}

.coord-debug-item-meta {
  margin-top: 2px;
  opacity: .75;
  word-break: break-word;
}

/* ==========================================================================
   La Martona — evolución visual mediante degradados.
   Conserva la función cromática original de cada componente.
   ========================================================================== */

:root {
  --lm-green: #306636;
  --lm-green-dark: #29542f;
  --lm-green-black: #1b3d21;
  --lm-yellow: #f4df36;
  --lm-yellow-soft: #f6cd48;
  --lm-orange: #edb22b;
  --lm-white: #ffffff;
  --lm-white-soft: #f4f6fb;
  --lm-neutral: #202b42;
  --lm-neutral-dark: #101725;
  --lm-neutral-black: #0c1321;

  --lm-gradient-green:
    linear-gradient(
      135deg,
      var(--lm-green) 0%,
      var(--lm-green-dark) 68%,
      var(--lm-green-black) 100%
    );
  --lm-gradient-green-hover:
    linear-gradient(
      135deg,
      var(--lm-green-dark) 0%,
      var(--lm-green-black) 100%
    );
  --lm-gradient-yellow:
    linear-gradient(
      135deg,
      var(--lm-yellow) 0%,
      var(--lm-yellow-soft) 52%,
      var(--lm-orange) 100%
    );
  --lm-gradient-yellow-hover:
    linear-gradient(
      135deg,
      var(--lm-yellow-soft) 0%,
      var(--lm-orange) 100%
    );
  --lm-gradient-white:
    linear-gradient(
      180deg,
      var(--lm-white) 0%,
      var(--lm-white-soft) 100%
    );
  --lm-gradient-dark:
    linear-gradient(
      145deg,
      var(--lm-neutral) 0%,
      var(--lm-neutral-dark) 62%,
      var(--lm-neutral-black) 100%
    );
  --lm-gradient-dark-soft:
    linear-gradient(
      180deg,
      rgba(32, 43, 66, .98) 0%,
      rgba(12, 19, 33, .98) 100%
    );
  --lm-gradient-green-soft:
    linear-gradient(
      135deg,
      rgba(48, 102, 54, .96) 0%,
      rgba(41, 84, 47, .98) 72%,
      rgba(27, 61, 33, .98) 100%
    );
  --lm-gradient-yellow-soft:
    linear-gradient(
      135deg,
      rgba(244, 223, 54, .18) 0%,
      rgba(237, 178, 43, .1) 100%
    );
}

.topbar {
  background: var(--lm-gradient-green);
}

/* Encabezado flotante: anula el verde opaco de arriba cuando html tiene topbar-float. */
html.topbar-float .topbar {
  box-shadow: none;
}

.search-field-wrap {
  background: linear-gradient(180deg, #101725 0%, var(--lm-neutral-black) 100%);
}

.search-row .search-field-wrap input {
  background: transparent;
}

.map-action {
  background: var(--lm-gradient-dark);
}

.map-hint {
  background: var(--lm-gradient-dark-soft);
}

.search-row .btn-search,
.map-action-primary,
.directions-button,
.directions-safety-card .notice-continue,
.coord-debug-copy {
  background: var(--lm-gradient-yellow);
}

.search-row .btn-search:hover,
.search-row .btn-search:focus-visible,
.map-action-primary:hover,
.map-action-primary:focus-visible,
.directions-button:hover,
.directions-button:focus-visible,
.directions-safety-card .notice-continue:hover,
.directions-safety-card .notice-continue:focus-visible,
.coord-debug-copy:hover,
.coord-debug-copy:focus-visible {
  background: var(--lm-gradient-yellow-hover);
}

.suggestions,
.coord-debug-panel {
  background: var(--lm-gradient-dark-soft);
}

.suggestions button:hover,
.suggestions button:active,
.recent-chip,
.layers-menu-title,
.zone-alert-icon,
.zone-alert-dismiss {
  background: var(--lm-gradient-yellow-soft);
}

.candidate-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
}

.candidate-box button,
.zoom-controls button,
.map-scene-btn {
  background: var(--lm-gradient-dark);
}

.zone-alert-card,
.map-hint-active,
.uf-disponibles-active-pill {
  background: var(--lm-gradient-green-soft);
}

/* El punto central del marcador seleccionado va en el acento (ver
   .marker.selected::after): en verde se perdía sobre los lotes. */
.layers-menu-btn,
.uf-disponible-map-marker-badge,
.amenity-marker-badge,
.qr-modal-close,
.map-access-qr-close {
  background: var(--lm-gradient-green);
}

.topbar .places-menu-btn {
  background: linear-gradient(135deg, rgba(12, 19, 33, .55), rgba(27, 61, 33, .4));
  border-color: rgba(255, 255, 255, .24);
}
.topbar .places-menu-btn:hover,
.topbar .places-menu-btn:focus-visible {
  background: linear-gradient(135deg, rgba(12, 19, 33, .68), rgba(37, 79, 43, .52));
  border-color: rgba(246, 196, 83, .45);
}
.topbar .places-menu-btn[aria-expanded="true"] {
  background: var(--lm-gradient-yellow);
  color: var(--brand-dark);
  border-color: transparent;
}
.topbar .places-menu-btn[aria-expanded="true"]:hover,
.topbar .places-menu-btn[aria-expanded="true"]:focus-visible {
  background: var(--lm-gradient-yellow-hover);
  border-color: transparent;
}

.layers-menu-btn:hover,
.layers-menu-btn:focus-visible,
.qr-modal-close:hover,
.qr-modal-close:focus-visible,
.map-access-qr-close:hover,
.map-access-qr-close:focus-visible {
  background: var(--lm-gradient-green-hover);
}

.marker-label,
.site-footer {
  background: var(--lm-gradient-dark-soft);
}

.qr-button,
.qr-modal-card,
.map-access-qr-card {
  background: var(--lm-gradient-white);
}

.uf-disponibles-active-pill-close,
.info-card-close:hover,
.info-card-close:focus-visible,
.directions-safety-card .notice-cancel {
  background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
}

.places-menu,
.layers-menu {
  background: linear-gradient(
    155deg,
    rgba(32, 43, 66, .99) 0%,
    rgba(12, 19, 33, .98) 68%,
    rgba(27, 61, 33, .96) 100%
  );
}

.layers-menu-header {
  background: linear-gradient(
    135deg,
    rgba(48, 102, 54, .72) 0%,
    rgba(41, 84, 47, .4) 68%,
    rgba(27, 61, 33, .24) 100%
  );
}

.places-menu-block {
  background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
}

.layers-menu-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
}

.places-menu-item-icon,
.layers-menu-item-icon {
  background: linear-gradient(135deg, rgba(48, 102, 54, .72), rgba(41, 84, 47, .5));
}

.places-menu-item:hover,
.places-menu-item:focus-visible,
.layers-menu-item:hover,
.layers-menu-item:focus-visible {
  background: var(--lm-gradient-yellow-soft);
}

.places-menu-item.is-selected,
.layers-menu-item.is-selected {
  background: var(--lm-gradient-green);
}

.map-access-qr-download {
  background: linear-gradient(135deg, rgba(48, 102, 54, .14), rgba(41, 84, 47, .06));
}

.map-access-qr-download:hover,
.map-access-qr-download:focus-visible {
  background: linear-gradient(135deg, rgba(48, 102, 54, .22), rgba(41, 84, 47, .12));
}

/* Comandos escritos y por voz
   El micrófono se apoya dentro del campo de búsqueda existente y el aviso de
   voz se ubica debajo de la línea de estado, sin tapar las sugerencias.
   Todo el bloque usa la paleta institucional ya definida. */

.search-voice {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 4px;
  z-index: 1;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: auto;
  margin-bottom: auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(174, 184, 204, .92);
  cursor: pointer;
  transform: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.search-voice[hidden] { display: none; }

.search-voice svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

.search-voice:hover,
.search-voice:focus-visible {
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  outline: none;
}

.search-voice.is-listening {
  background: rgba(246, 196, 83, .18);
  color: var(--accent);
}

.search-voice.is-listening::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: voicePulse 1.2s ease-in-out infinite;
}

.search-voice.is-processing {
  background: rgba(246, 196, 83, .14);
  color: var(--accent);
}

.search-voice.is-processing svg {
  opacity: .88;
}

.search-voice.is-error {
  background: rgba(255, 118, 118, .16);
  color: var(--danger);
}

@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(246, 196, 83, .38); }
  50% { box-shadow: 0 0 0 7px rgba(246, 196, 83, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .search-voice.is-listening::after { animation: none; }
}

/* El campo deja lugar al micrófono solo cuando el micrófono existe. */
.search-row .search-field-wrap.has-voice input {
  padding-right: 42px;
}

/* Estado de voz solo para lectores de pantalla; el feedback visual va en .search-voice. */
.voice-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.voice-status[hidden] { display: none; }

/* Capa de categoría: varios puntos comunes a la vez, con el mismo lenguaje
   visual del marcador de amenity seleccionado pero más chico. */
.command-category-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-map-command-category);
}

.command-category-marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 132px;
  margin-left: -66px;
  margin-top: -21px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.command-category-marker-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid #fff;
  background: var(--lm-gradient-green);
  box-shadow:
    0 0 0 5px rgba(246, 196, 83, .26),
    0 4px 12px rgba(0, 0, 0, .42);
}

.command-category-marker-badge svg {
  width: 18px;
  height: 18px;
  display: block;
}

.command-category-marker-label {
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(16, 23, 37, .9);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-category-marker:hover .command-category-marker-label,
.command-category-marker:focus-visible .command-category-marker-label {
  border-color: rgba(246, 196, 83, .45);
  background: rgba(27, 61, 33, .96);
  outline: none;
}

/* Píldora de la categoría activa: misma pieza que la de lotes del club. */
.command-category-pill.is-stacked { top: 96px; }

@media (max-width: 480px) {
  .command-category-pill.is-stacked { top: 92px; }
  .command-category-marker { width: 116px; margin-left: -58px; }
  .command-category-marker-label { font-size: 10px; }
}

/* Ayuda breve dentro de la ficha de información. */
.command-help-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.command-help-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  line-height: 1.35;
}

.command-help-title {
  font-weight: 800;
  color: rgba(244, 246, 251, .95);
}

.command-help-example {
  color: var(--lm-yellow-soft);
  font-weight: 700;
}

/* Recorridos
   Trazado por calles proyectado sobre el plano, paradas numeradas y panel.
   El SVG usa el sistema de coordenadas del plano original: el zoom solo cambia
   su tamaño en pantalla, así que los puntos se calculan una sola vez. */

.route-path-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: var(--z-map-route-path);
  pointer-events: none;
  overflow: visible;
}
.route-path-layer[hidden] { display: none; }

.route-path-halo {
  fill: none;
  stroke: rgba(255, 255, 255, .85);
  stroke-width: 9;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.route-path-line {
  fill: none;
  stroke: var(--lm-green);
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.route-marker-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-map-route-markers);
}

.route-marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 128px;
  margin-left: -64px;
  margin-top: -19px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.route-marker-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 3px solid #fff;
  background: var(--lm-gradient-green);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  box-shadow:
    0 0 0 4px rgba(48, 102, 54, .28),
    0 4px 12px rgba(0, 0, 0, .42);
}

.route-marker-name {
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(16, 23, 37, .9);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-marker.is-visited .route-marker-badge {
  background: linear-gradient(135deg, rgba(120, 132, 150, .95), rgba(80, 92, 110, .95));
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.route-marker.is-visited .route-marker-name { opacity: .72; }

.route-marker.is-current .route-marker-badge {
  background: var(--lm-gradient-yellow);
  color: #111;
  box-shadow:
    0 0 0 6px rgba(246, 196, 83, .3),
    0 4px 14px rgba(0, 0, 0, .45);
}

.route-marker-origin .route-marker-badge {
  width: 24px;
  height: 24px;
  font-size: 11px;
  background: linear-gradient(135deg, #2f6fd0, #22509b);
}

/* Barra de recorrido.
   Una sola pieza abajo del mapa, apoyada por encima de la fila de acciones del
   plano. Colapsada mide una línea; expandida agrega la lista de paradas con
   scroll propio. No hay panel aparte ni botón flotante: la barra es el control. */
.route-bar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-map-places-menu);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid rgba(48, 102, 54, .45);
  background: linear-gradient(165deg, rgba(16, 23, 37, .98) 0%, rgba(32, 43, 66, .97) 55%, rgba(37, 79, 43, .22) 100%);
  color: var(--text);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.route-bar[hidden] { display: none; }

.route-bar-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
}

.route-bar-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px 0 6px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.route-bar-title:hover,
.route-bar-title:focus-visible {
  background: rgba(255, 255, 255, .06);
  outline: none;
}

.route-bar-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--lm-gradient-green);
  color: #fff;
}
.route-bar-icon svg { width: 17px; height: 17px; display: block; }

.route-bar-copy { display: grid; gap: 1px; min-width: 0; }
.route-bar-headline {
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route-bar-sub {
  font-size: 11px;
  font-weight: 600;
  color: rgba(244, 246, 251, .62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route-bar-sub[hidden] { display: none; }

.route-bar-chevron {
  flex: 0 0 auto;
  font-size: 13px;
  color: rgba(244, 246, 251, .55);
  transition: transform .16s ease;
}
.route-bar.is-expanded .route-bar-chevron { transform: rotate(180deg); }

.route-bar-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.route-bar-btn[hidden] { display: none; }
.route-bar-btn:hover,
.route-bar-btn:focus-visible { border-color: rgba(246, 196, 83, .45); outline: none; }

.route-bar-primary {
  background: var(--lm-gradient-yellow);
  border-color: transparent;
  color: #111;
}
.route-bar-primary:hover,
.route-bar-primary:focus-visible { background: var(--lm-gradient-yellow-hover); }

.route-bar-more {
  width: 44px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
.route-bar-more.is-active { border-color: rgba(246, 196, 83, .5); }

.route-bar-status {
  padding: 0 12px 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(244, 246, 251, .78);
}
.route-bar-status[hidden] { display: none; }
.route-bar-status[data-tone="error"] { color: var(--danger); }
.route-bar-status[data-tone="warning"] { color: var(--accent); }

/* Lista de paradas: solo cuando el usuario la pide. */
.route-bar-sheet {
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.route-bar-sheet[hidden] { display: none; }

/* Alto acotado para que la barra completa, incluso desplegada, no pase del 40%
   del mapa en el viewport más bajo que soportamos (tablet apaisada). */
.route-sheet-list {
  margin: 0;
  padding: 8px;
  list-style: none;
  display: grid;
  gap: 6px;
  max-height: min(20dvh, 170px);
  overflow: auto;
}

.route-sheet-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
}
.route-sheet-item.is-next { background: var(--lm-gradient-green-soft); }
.route-sheet-item.is-visited { opacity: .62; }

.route-item-order {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--lm-gradient-green);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.route-item-copy {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.route-item-name {
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route-item-sub {
  font-size: 11px;
  font-weight: 600;
  color: rgba(244, 246, 251, .62);
}

.route-item-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.route-item-btn:hover,
.route-item-btn:focus-visible {
  background: var(--lm-gradient-yellow-soft);
  outline: none;
}

/* Menú de la barra: todo lo que no es la acción primaria del estado. */
.route-bar-menu {
  position: absolute;
  right: 6px;
  bottom: calc(100% + 6px);
  z-index: 1;
  display: grid;
  gap: 2px;
  min-width: 220px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(48, 102, 54, .5);
  background: linear-gradient(155deg, rgba(32, 43, 66, .99) 0%, rgba(12, 19, 33, .98) 70%, rgba(27, 61, 33, .96) 100%);
  box-shadow: var(--shadow);
}
.route-bar-menu[hidden] { display: none; }

.route-menu-item {
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.route-menu-item:hover,
.route-menu-item:focus-visible {
  background: var(--lm-gradient-yellow-soft);
  outline: none;
}
.route-menu-item-danger { color: var(--accent); }

/* Botón de recorrido dentro de la ficha. */
.route-card-actions { margin-top: 6px; }
.route-card-button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.route-card-button.is-active { background: var(--lm-gradient-yellow); color: #111; border-color: transparent; }
.route-card-button:hover,
.route-card-button:focus-visible { border-color: rgba(246, 196, 83, .45); outline: none; }

/* Desde tablet la barra no necesita todo el ancho: queda como tarjeta
   compacta a la izquierda, apoyada sobre la fila de acciones del plano. */
@media (min-width: 720px) {
  .route-bar {
    right: auto;
    width: min(520px, calc(100% - 20px));
  }
  .route-bar-menu { right: auto; left: 6px; }
}

/* Con la lista abierta en pantallas chicas el zoom quedaría debajo del panel.
   Mientras se lee la lista no se usa el zoom, así que se retira. */
@media (max-width: 719px) {
  .map-wrap.route-sheet-open .zoom-controls {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 480px) {
  .route-marker { width: 112px; margin-left: -56px; }
  .route-marker-name { font-size: 10px; }
  .route-bar-btn { padding: 0 11px; font-size: 12px; }
  .route-bar-headline { font-size: 12px; }
  .route-sheet-list { max-height: min(20dvh, 156px); }
}

/* ==========================================================================
   Panel Lugares (#placesMenu) — paleta diurna v2 (identidad SmartMap).
   Solo html[data-map-scene="day"] + #placesMenu. Noche y #layersMenu sin cambios.
   ========================================================================== */

html[data-map-scene="day"] #placesMenu.places-menu {
  --lm-places-day-bg: #f3f1e8;
  --lm-places-day-block: #ffffff;
  --lm-places-day-green: #07583a;
  --lm-places-day-text: #163e31;
  --lm-places-day-border: #c7d9c9;
  --lm-places-day-accent: #ffd039;

  color: var(--lm-places-day-text) !important;
  background: var(--lm-places-day-bg) !important;
  border-right-color: var(--lm-places-day-border) !important;
  box-shadow: none;
}

@media (max-width: 900px) {
  html[data-map-scene="day"] #placesMenu.places-menu:not([hidden]) {
    box-shadow:
      0 12px 32px rgba(22, 62, 49, 0.14),
      0 0 0 1px rgba(7, 88, 58, 0.08) !important;
    border: 1px solid var(--lm-places-day-border);
  }
}

html[data-map-scene="day"] #placesMenu .places-menu-scroll {
  background: var(--lm-places-day-bg);
  scrollbar-color: rgba(7, 88, 58, 0.4) transparent;
}

html[data-map-scene="day"] #placesMenu .places-menu-scroll::-webkit-scrollbar-thumb {
  background: rgba(7, 88, 58, 0.4);
  border-radius: 999px;
}

html[data-map-scene="day"] #placesMenu .places-menu-block {
  background: var(--lm-places-day-block) !important;
  border: 1px solid var(--lm-places-day-border) !important;
  box-shadow: 0 1px 3px rgba(22, 62, 49, 0.06);
}

html[data-map-scene="day"] #placesMenu .places-menu-block-head {
  align-items: center;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--lm-places-day-green) !important;
}

html[data-map-scene="day"] #placesMenu .places-menu-block-title,
html[data-map-scene="day"] #placesMenu .places-menu-category {
  background: transparent !important;
  color: var(--lm-places-day-accent) !important;
  line-height: 1.3;
}

html[data-map-scene="day"] #placesMenu .places-menu-item {
  background: #ffffff !important;
  color: var(--lm-places-day-text) !important;
  border: 1px solid var(--lm-places-day-border) !important;
  box-shadow: 0 1px 2px rgba(22, 62, 49, 0.05);
}

html[data-map-scene="day"] #placesMenu .places-menu-item-icon {
  background: linear-gradient(135deg, var(--lm-places-day-green) 0%, #054a31 100%) !important;
  border: 1px solid rgba(7, 88, 58, 0.25) !important;
  color: #ffffff !important;
}

html[data-map-scene="day"] #placesMenu .places-menu-item:hover,
html[data-map-scene="day"] #placesMenu .places-menu-item:focus-visible {
  background: #ffffff !important;
  border-color: var(--lm-places-day-green) !important;
  box-shadow:
    0 0 0 2px rgba(255, 208, 57, 0.35),
    0 2px 6px rgba(22, 62, 49, 0.08) !important;
  color: var(--lm-places-day-text) !important;
}

html[data-map-scene="day"] #placesMenu .places-menu-item.is-selected {
  background: linear-gradient(135deg, var(--lm-places-day-green) 0%, #054a31 100%) !important;
  border-color: rgba(255, 208, 57, 0.55) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(255, 208, 57, 0.22),
    0 6px 14px rgba(7, 88, 58, 0.2) !important;
}

html[data-map-scene="day"] #placesMenu .places-menu-item.is-selected .places-menu-item-icon {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 208, 57, 0.45) !important;
  color: var(--lm-places-day-accent) !important;
}

html[data-map-scene="day"] #placesMenu .places-menu-share {
  border-top-color: var(--lm-places-day-border);
}

html[data-map-scene="day"] #placesMenu .places-menu-share-sub {
  color: #5b7268;
}

html[data-map-scene="day"] #placesMenu .places-menu-share .places-menu-item-icon {
  background: #ffffff !important;
  border: 1px solid var(--lm-places-day-green) !important;
  color: var(--lm-places-day-green) !important;
}

html[data-map-scene="day"] #placesMenu .places-menu-close {
  background: #ffffff !important;
  border: 1px solid var(--lm-places-day-border) !important;
  color: var(--lm-places-day-text) !important;
}

html[data-map-scene="day"] #placesMenu .places-menu-close:hover,
html[data-map-scene="day"] #placesMenu .places-menu-close:focus-visible {
  background: #ffffff !important;
  border-color: var(--lm-places-day-green) !important;
  box-shadow: 0 0 0 2px rgba(255, 208, 57, 0.3) !important;
}

/* ==========================================================================
   Controles flotantes del mapa en modo día: sol/luna, zoom +/−, Centrar destino.
   Solo IDs indicados; noche sin cambios.
   ========================================================================== */

html[data-map-scene="day"] #mapSceneBtn.map-scene-btn {
  background: #ffffff !important;
  color: #07583a !important;
  border: 1px solid #c7d9c9 !important;
  box-shadow:
    0 2px 8px rgba(22, 62, 49, 0.12),
    0 0 0 1px rgba(7, 88, 58, 0.05) !important;
  filter: none;
}

html[data-map-scene="day"] #mapSceneBtn.map-scene-btn:hover,
html[data-map-scene="day"] #mapSceneBtn.map-scene-btn:focus-visible {
  background: #f3f8f5 !important;
  filter: none;
  outline: none;
}

html[data-map-scene="day"] #mapSceneBtn.map-scene-btn:active {
  background: #e8f2ec !important;
  filter: none;
}

html[data-map-scene="day"] #mapSceneBtn.map-scene-btn .map-scene-btn__auto {
  background: #07583a;
  box-shadow: 0 0 0 1px #c7d9c9;
}

html[data-map-scene="day"] #mapSceneFavoriteBtn.map-scene-favorite-btn,
html[data-map-scene="day"] #mapSceneAutoBtn.map-scene-auto-btn {
  background: #ffffff !important;
  color: #07583a !important;
  border: 1px solid #c7d9c9 !important;
  box-shadow:
    0 2px 8px rgba(22, 62, 49, 0.12),
    0 0 0 1px rgba(7, 88, 58, 0.05) !important;
  filter: none;
}

html[data-map-scene="day"] #mapSceneFavoriteBtn.map-scene-favorite-btn.is-active {
  color: #c98a00 !important;
}

html[data-map-scene="day"] #mapSceneAutoBtn.map-scene-auto-btn.is-active {
  color: #07583a !important;
  box-shadow:
    0 0 0 2px rgba(255, 208, 57, 0.45),
    0 2px 8px rgba(22, 62, 49, 0.12) !important;
}

html[data-map-scene="day"] .zoom-controls {
  border: 1px solid #c7d9c9;
  box-shadow:
    0 2px 8px rgba(22, 62, 49, 0.12),
    0 0 0 1px rgba(7, 88, 58, 0.05);
}

html[data-map-scene="day"] #zoomIn,
html[data-map-scene="day"] #zoomOut {
  background: #ffffff !important;
  color: #07583a !important;
  border-bottom: 1px solid #c7d9c9 !important;
  filter: none;
}

html[data-map-scene="day"] #zoomOut {
  border-bottom: 0 !important;
}

html[data-map-scene="day"] #zoomIn:hover,
html[data-map-scene="day"] #zoomIn:focus-visible,
html[data-map-scene="day"] #zoomOut:hover,
html[data-map-scene="day"] #zoomOut:focus-visible {
  background: #f3f8f5 !important;
  filter: none;
}

html[data-map-scene="day"] #zoomIn:active,
html[data-map-scene="day"] #zoomOut:active {
  background: #e8f2ec !important;
  filter: none;
}

html[data-map-scene="day"] #zoomSelected.map-action {
  background: #ffffff !important;
  color: #07583a !important;
  border: 1px solid #c7d9c9 !important;
  box-shadow:
    0 2px 8px rgba(22, 62, 49, 0.12),
    0 0 0 1px rgba(7, 88, 58, 0.05) !important;
}

html[data-map-scene="day"] #zoomSelected.map-action:hover,
html[data-map-scene="day"] #zoomSelected.map-action:focus-visible {
  background: #f3f8f5 !important;
  outline: none;
}

html[data-map-scene="day"] #zoomSelected.map-action:active {
  background: #e8f2ec !important;
}

html[data-map-scene="day"] #zoomSelected .map-action-icon,
html[data-map-scene="day"] #zoomSelected .map-action-label {
  color: #07583a;
}

/* Aviso de vista ilustrativa (antes de mostrar día o noche): el mismo cartel
   que «Circulación interna», pero sobre toda la pantalla para que no lo tapen
   el encabezado, el menú de lugares ni las barras del sistema. */
.scene-notice-overlay {
  position: fixed;
  z-index: 1000;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.scene-notice-card {
  position: relative;
  max-width: min(92vw, 380px);
  max-height: 100%;
  margin: auto;
  padding: 26px 24px 22px;
}
.scene-notice-icon {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  display: block;
}
.scene-notice-card .zone-alert-text {
  font-size: 15px;
}
.scene-notice-card .scene-notice-accept {
  min-width: 150px;
  min-height: 44px;
  border-color: transparent;
  background: var(--lm-gradient-yellow);
  color: #111;
}
.scene-notice-card .scene-notice-accept:hover,
.scene-notice-card .scene-notice-accept:focus-visible {
  background: var(--lm-gradient-yellow-hover);
}
.scene-notice-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
  color: rgba(255, 255, 255, 0.9);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.scene-notice-close:hover,
.scene-notice-close:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
@media (max-width: 520px) {
  .scene-notice-icon {
    width: 60px;
    height: 60px;
  }
  .scene-notice-card .zone-alert-text {
    font-size: 14px;
  }
}
@media (max-height: 460px) {
  .scene-notice-card {
    gap: 8px;
    padding: 16px 20px 14px;
  }
  .scene-notice-icon {
    width: 44px;
    height: 44px;
  }
}