/* CAPASU — estilos compartidos del mapa de socios (/mapa y /mapa-embed) */

.mapa-stats { font-size: .9rem; color: #5a6472; }

/* ---- Filtro de cadena: desplegable con buscador ------------------------- */
.filtro-cadena { position: relative; display: inline-block; }

.fc-boton {
  display: inline-flex; align-items: center; gap: .55rem;
  background: #fff; border: 1px solid #c8d2e0; border-radius: 999px;
  padding: .45rem .9rem; font: inherit; font-size: .92rem; color: #1c2430;
  cursor: pointer; min-width: 230px; max-width: 100%; transition: border-color .15s, box-shadow .15s;
}
.fc-boton:hover { border-color: #1a4b8c; }
.fc-boton:focus-visible { outline: 2px solid #1a4b8c; outline-offset: 2px; }
.fc-boton.con-filtro { border-color: #1a4b8c; box-shadow: inset 0 0 0 1px #1a4b8c; }
.fc-dot { width: .72rem; height: .72rem; border-radius: 50%; flex: none; }
.fc-label { font-weight: 600; flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-count { color: #8a94a2; font-size: .82rem; font-variant-numeric: tabular-nums; }
.fc-chev { font-size: .7rem; color: #8a94a2; transition: transform .18s; }
.fc-boton[aria-expanded="true"] .fc-chev { transform: rotate(180deg); }

.fc-panel {
  position: absolute; z-index: 1200; top: calc(100% + 6px); left: 0;
  width: min(330px, 86vw); background: #fff;
  border: 1px solid #c8d2e0; border-radius: 14px;
  box-shadow: 0 12px 34px rgba(10, 45, 84, .2); padding: .6rem;
}
.fc-search {
  width: 100%; box-sizing: border-box; border: 1px solid #d0d7e2;
  border-radius: 9px; padding: .5rem .75rem; font: inherit; font-size: .9rem; margin-bottom: .5rem;
}
.fc-search:focus-visible { outline: 2px solid #1a4b8c; outline-offset: 1px; border-color: #1a4b8c; }
.fc-lista { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.fc-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: 9px; cursor: pointer; font-size: .92rem;
}
.fc-item:hover { background: #eef2f8; }
.fc-item.activo { background: #e7eefa; font-weight: 700; }
.fc-item-dot { width: .8rem; height: .8rem; border-radius: 50%; flex: none; }
.fc-item-todas { display: flex; align-items: center; justify-content: center;
  background: #1a4b8c; color: #fff; font-size: .5rem; }
.fc-item-nombre { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-item-count { color: #8a94a2; font-size: .82rem; font-variant-numeric: tabular-nums; }
.fc-vacio { padding: .7rem .6rem; color: #8a94a2; font-size: .88rem; text-align: center; }

/* Tarjeta del local (popup) */
.leaflet-popup-content-wrapper { border-radius: 14px; overflow: hidden; padding: 0; }
.leaflet-popup-content { margin: 0; width: 272px !important; }
.popup-local .pl-foto { width: 100%; height: 124px; object-fit: cover; display: block; }
.popup-local .pl-cuerpo { padding: .8rem .95rem .95rem; }
.popup-local .pl-cadena { font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: .15rem; }
.popup-local h6 { margin: 0 0 .5rem; font-weight: 700; font-size: 1rem; color: #1a1a1a; }
.popup-local p { margin: 0 0 .3rem; font-size: .84rem; color: #39424e;
  display: flex; gap: .45rem; align-items: baseline; }
.popup-local p i { width: .95rem; text-align: center; color: #8a94a2; flex: none; }
.popup-local a { text-decoration: none; }
.popup-local .pl-botones { display: flex; gap: .45rem; margin-top: .65rem; }
.popup-local .pl-botones .btn { flex: 1; font-size: .8rem; }

/* Agrupamientos (clusters) en el azul CAPASU */
.cluster-capasu { background: rgba(26, 75, 140, .25); border-radius: 50%; }
.cluster-capasu > div {
  background: #1a4b8c; color: #fff;
  width: 34px; height: 34px; margin: 4px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem;
  box-shadow: 0 1px 6px rgba(10, 45, 84, .4);
}

/* ---- Barra de acciones: Cerca mío / Compartir ---- */
.mapa-acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; position: relative; }
.ma-btn { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid #c8d2e0;
  background: #fff; color: #1a4b8c; border-radius: 999px; padding: .45rem .95rem;
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.ma-btn:hover { background: #1a4b8c; color: #fff; border-color: transparent; }
.ma-btn:disabled { opacity: .65; cursor: default; }
.share-menu { position: absolute; z-index: 1300; top: calc(100% + 4px); right: 0;
  background: #fff; border: 1px solid #c8d2e0; border-radius: 12px; box-shadow: 0 10px 30px rgba(10,45,84,.2);
  padding: .4rem; display: flex; flex-direction: column; min-width: 190px; }
.sm-item { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border-radius: 8px;
  background: none; border: 0; font: inherit; font-size: .9rem; color: #1c2430; text-align: left;
  text-decoration: none; cursor: pointer; }
.sm-item:hover { background: #eef2f8; }
.sm-item .fa-whatsapp { color: #25d366; }

/* ---- Pin del usuario ---- */
.user-pin { position: relative; }
.user-pin .up-dot { position: absolute; left: 5px; top: 5px; width: 12px; height: 12px;
  background: #1a73e8; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(26,115,232,.5); z-index: 2; }
.user-pin .up-pulse { position: absolute; left: 0; top: 0; width: 20px; height: 20px;
  background: rgba(26,115,232,.35); border-radius: 50%; animation: upulse 1.8s ease-out infinite; }
@keyframes upulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .user-pin .up-pulse { animation: none; } }

/* ---- Panel de socios cercanos ---- */
.mapa-cercanos { background: #fff; border: 1px solid #dbe2ec; border-radius: 12px; margin-top: .7rem;
  box-shadow: 0 2px 14px rgba(10,45,84,.08); overflow: hidden; }
.mc-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .65rem .9rem; background: #f4f7fb; border-bottom: 1px solid #dbe2ec; color: #0a2d54; }
.mc-cerrar { background: none; border: 0; font-size: 1.3rem; line-height: 1; color: #8a94a2; cursor: pointer; }
.mc-lista { list-style: none; margin: 0; padding: .3rem; max-height: 320px; overflow-y: auto; }
.mc-lista li { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: 9px; cursor: pointer; }
.mc-lista li:hover { background: #eef2f8; }
.mc-dot { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.mc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-nom { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-dir { font-size: .78rem; color: #8a94a2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-dist { font-size: .82rem; font-weight: 700; color: #1a4b8c; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-ir { width: 34px; height: 34px; border-radius: 50%; background: #1a4b8c; color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none; text-decoration: none; }
.mc-ir:hover { background: #0a2d54; color: #fff; }

/* ---- Marcador con logo de la cadena (fallback: punto de color) ---- */
.mk-logo { position: relative; width: 40px; height: 40px; }
.mk-logo .mk-ring { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.mk-logo img { position: absolute; left: 4px; top: 4px; width: 32px; height: 32px; border-radius: 50%; object-fit: contain; background: #fff; display: block; }

/* Logo de la cadena en la ficha */
.popup-local .pl-cab { display: flex; align-items: center; gap: .4rem; }
.popup-local .pl-logo img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid #e3e8ef; display: block; }

/* Pin del usuario: personita (street-view) azul con pulso */
.user-pin .up-ico { position: absolute; left: 0; top: 0; width: 30px; line-height: 30px; text-align: center;
  font-size: 22px; color: #1a73e8; text-shadow: 0 1px 2px rgba(255,255,255,.95); z-index: 2; }
.user-pin .up-pulse { left: 4px; top: 8px; width: 22px; height: 22px; }