/* ─── Mapas: semáforo, polígono, clusters, selección y leyenda ───
   Fuente única de colores de mapa para el landing (landing_map.js) y la
   ficha de colonia (colonia_map.js). Se carga en head_extra, después del
   CSS de la paleta, así que pisa las reglas base de .qc-mm / .qc-mc.
   Cada paleta puede sobreescribir los colores con --qc-pin-* en su :root. */

:root {
  --pin-good:        var(--qc-pin-good, #1F7A68);     /* teal-verde, blanco 5.2:1 */
  --pin-mid:         var(--qc-pin-mid, #E3A33B);      /* ámbar brillante */
  --pin-mid-text:    var(--qc-pin-mid-text, var(--qc-text-primary, #1A202C)); /* texto del heading: 7.4:1 */
  --pin-bad:         var(--qc-pin-bad, #C24B37);      /* coral, blanco 4.8:1 */
  --pin-neutral:     var(--qc-pin-neutral, #EEF0F2);  /* gris claro + borde */
  --pin-neutral-edge: var(--qc-pin-neutral-edge, #7E8794);
  --pin-neutral-text: var(--qc-pin-neutral-text, #3A4150);
  --pin-cluster:     var(--qc-pin-cluster, #5F6774);  /* blanco 5.7:1 */
  --pin-cluster-soft: var(--qc-pin-cluster-soft, #8A9099);
  --pin-select-ring: var(--qc-pin-select-ring, #1A202C);
  --pin-cluster-bg:  var(--qc-pin-cluster-bg, #F7F7F8);
  --pin-cluster-edge: var(--qc-pin-cluster-edge, #7E8794); /* 3.2:1 vs mapa */
  --pin-cluster-text: var(--qc-pin-cluster-text, #3A4150);
  /* Polígono de colonia: un solo color neutro en todos los mapas. El
     semáforo vive solo en pines, popup y leyenda. */
  --poly-stroke:     var(--qc-poly-stroke, #1A202C);
  --poly-fill:       var(--qc-poly-fill, #3A4150);
}

/* Semáforo — mismas clases para marker, pill del popup y leyenda */
.qc-pin--good    { background: var(--pin-good); color: #fff; }
.qc-pin--mid     { background: var(--pin-mid); color: var(--pin-mid-text); }
.qc-pin--bad     { background: var(--pin-bad); color: #fff; }
.qc-pin--neutral {
  background: var(--pin-neutral);
  color: var(--pin-neutral-text);
  box-shadow: inset 0 0 0 2px var(--pin-neutral-edge);
}

/* Marker con score: anillo blanco + contorno oscuro sutil para que el ámbar
   y el gris claro no se pierdan sobre el mapa claro. */
.qc-mm {
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(26, 32, 44, 0.28), 0 2px 8px rgba(26, 32, 44, 0.22);
  transform-origin: 50% 100%;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.qc-mm.qc-pin--neutral {
  box-shadow: inset 0 0 0 2px var(--pin-neutral-edge), 0 0 0 1px rgba(26, 32, 44, 0.28), 0 2px 8px rgba(26, 32, 44, 0.18);
}
/* Calificada pero bajo el umbral: blanco con borde gris, sin número y más
   chica que las calificadas para que no compita con ellas. */
.qc-mm--empty {
  width: 22px;
  height: 22px;
  border-radius: 7px 7px 7px 2px;
  background: #fff;
  border: 2px solid var(--pin-neutral-edge);
  box-shadow: 0 1px 4px rgba(26, 32, 44, 0.18);
}
.qc-mm--dot {
  background: var(--pin-neutral-edge);
  border: 0;
  box-shadow: 0 1px 4px rgba(26, 32, 44, 0.2);
}

/* Clusters: claros y neutros, solo el número. Pesan menos que los pines
   calificados (relleno de color) para que éstos resalten. */
.qc-mc {
  background: var(--pin-cluster-bg, #F7F7F8);
  color: var(--pin-cluster-text, #3A4150);
  border: 2px solid var(--pin-cluster-edge, #7E8794);
  box-shadow: 0 1px 4px rgba(26, 32, 44, 0.14);
  transition: opacity 0.15s ease;
}
/* Clusters de colonias sin reseñas: mismo estilo, más pequeño */
.qc-mc--soft {
  font-size: 12px;
}

/* Selección: conserva el color del semáforo, agrega halo blanco + contorno
   oscuro y atenúa el resto mientras el popup está abierto. */
.qc-mm.is-selected,
.qc-mm.qc-pin--neutral.is-selected {
  transform: scale(1.18);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--pin-select-ring), 0 6px 16px rgba(26, 32, 44, 0.35);
}
.qc-mm--empty.is-selected {
  transform: scale(1.25);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pin-select-ring), 0 4px 12px rgba(26, 32, 44, 0.3);
}
.qc-mm--dot.is-selected {
  opacity: 1;
  transform: scale(1.6);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--pin-select-ring);
}
.qc-lmap-container.has-selection .qc-mm:not(.is-selected),
.qc-lmap-container.has-selection .qc-mc {
  opacity: 0.45;
}
.qc-lmap-container.has-selection .qc-mm--dot:not(.is-selected) {
  opacity: 0.3;
}

/* Pill del score en el popup: mismo color que el marker. No se encoge ni
   parte en dos líneas cuando el texto de evidencia es largo. */
.qc-mp-score { flex-shrink: 0; white-space: nowrap; }
.qc-mp-score.qc-pin--neutral { box-shadow: inset 0 0 0 1.5px var(--pin-neutral-edge); }

/* Popup de colonia sin reseñas: dice explícitamente por qué no hay score */
.qc-mp-empty {
  margin-top: 6px;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--qc-text-secondary, #555);
}
.qc-mp-empty strong { color: var(--qc-text-primary, #333); font-weight: 600; }

/* [POLÍGONO] Aviso en el popup: colonia sin límites dibujables */
.qc-mp-nopoly {
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--qc-bg, #f6f7f7);
  color: var(--qc-text-tertiary, #5e6a77);
  font-size: 0.7rem;
  line-height: 1.35;
}

/* ─── Leyenda ─── */
.qc-lmap-legend {
  position: absolute;
  right: 12px;
  bottom: 26px;               /* deja libre la atribución de CARTO */
  z-index: 500;
  max-width: 230px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--qc-border-light, #edf1f5);
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(26, 32, 44, 0.10);
  font-size: 0.74rem;
  color: var(--qc-text-secondary, #555);
}
.qc-lmap-legend summary {
  list-style: none;
  cursor: pointer;
  padding: 7px 12px;
  font-weight: 600;
  color: var(--qc-text-primary, #333);
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.qc-lmap-legend summary::-webkit-details-marker { display: none; }
.qc-lmap-legend summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-135deg) translateY(-1px);
  transition: transform 0.15s ease;
}
.qc-lmap-legend[open] summary::after { transform: rotate(45deg) translateY(-2px); }
.qc-lmap-legend summary:focus-visible {
  outline: 2px solid var(--qc-accent, #2563EB);
  outline-offset: 2px;
  border-radius: 10px;
}
.qc-lmap-legend-short { display: none; }

.qc-lmap-legend ul {
  list-style: none;
  margin: 0;
  padding: 2px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qc-lmap-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.25;
}
.qc-lmap-legend small {
  color: var(--qc-text-muted, #5F646C);
  font-size: 0.68rem;
  margin-left: auto;
  padding-left: 6px;
  white-space: nowrap;
}
.qc-lg-pin {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 5px 5px 5px 1px;
  box-shadow: 0 0 0 1px rgba(26, 32, 44, 0.18);
}
.qc-lg-pin.qc-pin--neutral {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--pin-neutral-edge);
}
.qc-lg-dot-wrap {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qc-lg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pin-neutral-edge);
}
.qc-lg-cluster {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pin-cluster-bg);
  color: var(--pin-cluster-text);
  box-shadow: inset 0 0 0 1.5px var(--pin-cluster-edge);
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .qc-lmap-legend { right: 8px; bottom: 22px; max-width: 200px; font-size: 0.7rem; }
  .qc-lmap-legend-full { display: none; }
  .qc-lmap-legend-short { display: inline; }
  .qc-lmap-legend small { display: none; }
}