/* Piezas del mapa propio, con el aire del mapa de Negocios San Martín. Dos
   copias iguales: web/estaticos/css/mapa.css y admin/static/css/mapa.css. */
.tc-mapa{ background:#eceef1; }
.tc-mapa .maplibregl-ctrl-group{ border-radius:12px; box-shadow:0 4px 14px rgba(15,23,42,.14); overflow:hidden; }
.tc-mapa .maplibregl-ctrl-group button{ width:36px; height:36px; }
.tc-mapa .maplibregl-ctrl-attrib{ font-size:10px; }

.tc-pin{ position:relative; display:grid; justify-items:center; cursor:pointer;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.22)); --pin:#ff4b0b; }
.tc-pin-cabeza{ position:relative; display:grid; place-items:center; width:32px; height:32px;
  border:3px solid #fff; border-radius:50%; background:var(--pin); box-sizing:border-box;
  color:#fff; font:700 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif; overflow:hidden; }
.tc-pin--punto .tc-pin-cabeza::after{ content:""; width:9px; height:9px; border-radius:50%; background:#fff; }
.tc-pin-punta{ display:block; width:3px; height:12px; margin-top:-1px; border-radius:0 0 2px 2px;
  background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.12); }
.tc-pin-etiqueta{ position:absolute; left:calc(50% + 20px); top:5px; white-space:nowrap;
  padding:3px 8px; border-radius:7px; background:#fff; color:#1d1d1f;
  font:600 12.5px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;
  box-shadow:0 1px 3px rgba(0,0,0,.18); max-width:200px; overflow:hidden; text-overflow:ellipsis; }
.tc-pin--tienda .tc-pin-cabeza{ width:50px; height:50px; background:#fff; padding:5px; }
.tc-pin--tienda .tc-pin-cabeza img{ display:block; width:100%; height:100%; object-fit:contain; }
.tc-pin--tienda .tc-pin-etiqueta{ left:calc(50% + 30px); top:12px; font-weight:700; }
.maplibregl-marker-draggable .tc-pin{ cursor:grab; }

.tc-mapa-yo{ position:relative; width:18px; height:18px; border:3px solid #fff; border-radius:50%;
  background:#0a84ff; box-sizing:border-box; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.tc-mapa-yo::before{ content:""; position:absolute; inset:-14px; border-radius:50%;
  background:rgba(10,132,255,.18); animation:tc-mapa-yo 2.2s ease-out infinite; z-index:-1; }
@keyframes tc-mapa-yo{ from{ transform:scale(.4); opacity:1; } to{ transform:scale(1.2); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .tc-mapa-yo::before{ animation:none; } }

.maplibregl-popup-content{ border-radius:12px; padding:12px 14px; font:13px/1.45 system-ui,sans-serif;
  box-shadow:0 12px 30px -10px rgba(15,23,42,.35); }