/* Mapa de comercios de manilva.ws — mismo lenguaje visual que las fichas */

.mcom-mapadir{
  --mc-azul:#0c6b8a; --mc-navy:#0a2c3d; --mc-sol:#f0a63c;
  --mc-ink:#102532; --mc-muted:#62798a; --mc-line:#dde8ee;
  max-width:1160px; margin:0 auto 26px; padding:0 16px;
  color:var(--mc-ink); font-size:16px; line-height:1.6;
}
.mcom-mapadir *{ box-sizing:border-box; }

.mcom-mapadir__h{ margin:0 0 6px; font-size:26px; line-height:1.25; }
.mcom-mapadir__pie{ margin:0 0 12px; font-size:14px; color:var(--mc-muted); }
.mcom-mapadir__pie span{ display:inline-block; }

/* El mapa, en su PROPIO contexto de apilamiento. Leaflet pinta sus capas con
   z-index de 200 a 1000 y el submenú del tema es 99, así que el desplegable de
   «Servicios» se metía por detrás del mapa. Con `z-index:0` en la caja, todo lo
   de dentro se apila DENTRO de ella —el orden interno de Leaflet no se toca— y
   el menú vuelve a pasar por delante. */
.mcom-mapadir__lienzo{
  width:100%; border-radius:18px; overflow:hidden;
  border:1px solid var(--mc-line); background:#eef4f7;
  box-shadow:0 2px 6px rgba(16,37,50,.07), 0 18px 44px -22px rgba(16,37,50,.3);
  position:relative; z-index:0;
}
@media (max-width:600px){
  .mcom-mapadir__lienzo{ height:400px !important; border-radius:14px; }
}

.mcom-mapadir__aviso{ padding:20px; color:var(--mc-muted); text-align:center; }

/* La tarjetita que sale al tocar un punto */
.leaflet-popup-content{ margin:12px 14px; min-width:190px; }
.mcom-pop__cat{
  display:inline-block; background:#e8f1f6; color:var(--mc-azul);
  border-radius:999px; padding:3px 10px; font-size:12px; font-weight:700; margin-bottom:6px;
}
.mcom-pop__tit{ display:block; font-size:15px; font-weight:800; line-height:1.3; color:var(--mc-ink); }
.mcom-pop__dir{ display:block; font-size:13px; color:var(--mc-muted); margin-top:2px; }
.mcom-pop__ver{
  display:inline-block; margin-top:9px; font-size:13px; font-weight:700;
  color:#fff !important; background:var(--mc-navy); border-radius:999px; padding:6px 14px;
  text-decoration:none;
}
.mcom-pop__ver:hover{ background:var(--mc-azul); }

/* Los destacados llevan el punto en color sol, para que se distingan */
.mcom-pin--dst{ filter:hue-rotate(165deg) saturate(1.5); }

/* El globo de un grupo de comercios, con los colores de la casa */
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div{
  background:var(--mc-azul); color:#fff; font-weight:700;
}
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large{
  background:rgba(12,107,138,.28);
}