/* ==========================================================================
   Buscador y filtro — según Figma "MobilDelvac/PDVMapaDefault"
   (desktop 307:3647 · mobile 481:7257)
   Tokens: azul #14499A · borde #E3E3E3 · sombra 0 0 8px rgba(0,0,0,.08)
   ========================================================================== */

.ubicaciones-city-search,
.ubicaciones-tax-filter {
  --ubic-blue: #14499a;
  --ubic-border: #e3e3e3;
  --ubic-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
  font-family: "EMprint", sans-serif;
  font-size: 16px;
  line-height: normal;
  color: #000;
}

/* ---- Buscador (pill 335px; en móvil ocupa todo el ancho) ---- */

.ubicaciones-city-search {
  position: relative;
  width: 100%;
  max-width: 335px;
}

.ubicaciones-city-search .input-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
  padding: 4px 4px 4px 20px;
  background: #fff;
  border: 0.6px solid var(--ubic-border);
  border-radius: 40px;
  box-shadow: var(--ubic-shadow);
}

.ubicaciones-city-search .input-wrapper:focus-within {
  outline: 2px solid var(--ubic-blue);
  outline-offset: 2px;
}

.ubicaciones-city-search .ubicaciones-city-input {
  flex: 1 1 0;
  min-width: 0;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  font: 400 16px/normal "EMprint", sans-serif;
  color: #000;
  -webkit-appearance: none;
  appearance: none;
}

.ubicaciones-city-search .ubicaciones-city-input::placeholder {
  color: #000;
  opacity: 1;
}

.ubicaciones-city-search .ubicaciones-city-input::-webkit-search-cancel-button,
.ubicaciones-city-search .ubicaciones-city-input::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}

.ubicaciones-city-search .icon-button {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  line-height: 0;
}

.ubicaciones-city-search .icon-button svg {
  display: block;
  width: 32px;
  height: 32px;
}

.ubicaciones-city-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 100;
  box-sizing: border-box;
  max-height: 200px;
  overflow-y: auto;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border: 0.6px solid var(--ubic-border);
  border-radius: 20px;
  box-shadow: var(--ubic-shadow);
}

.ubicaciones-city-suggestions li {
  padding: 8px 20px;
  cursor: pointer;
}

.ubicaciones-city-suggestions li:hover,
.ubicaciones-city-suggestions li:focus,
.ubicaciones-city-suggestions li.is-active {
  background: #f2f2f2;
}

/* ---- Filtro (tabs en pill de 40px de alto, gap 8px) ---- */

.ubicaciones-tax-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.ubicaciones-tax-filter .ubicaciones-tax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 12px;
  box-sizing: border-box;
  height: 40px;
  margin: 0;
  padding: 12px 20px;
  background: #fff;
  border: 0.6px solid var(--ubic-border);
  border-radius: 40px;
  box-shadow: var(--ubic-shadow);
  color: #000;
  font: 400 16px/normal "EMprint", sans-serif;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.ubicaciones-tax-filter .ubicaciones-tax-btn:hover,
.ubicaciones-tax-filter .ubicaciones-tax-btn:focus {
  background: #fff;
  color: #000;
}

.ubicaciones-tax-filter .ubicaciones-tax-btn:focus-visible {
  outline: 2px solid var(--ubic-blue);
  outline-offset: 2px;
}

.ubicaciones-tax-filter .ubicaciones-tax-btn.is-active,
.ubicaciones-tax-filter .ubicaciones-tax-btn.is-active:hover,
.ubicaciones-tax-filter .ubicaciones-tax-btn.is-active:focus {
  background: var(--ubic-blue);
  border-color: var(--ubic-blue);
  color: #fff;
  font-weight: 600;
}

/* "Todo" solo con icono: círculo de 40px */
.ubicaciones-tax-filter .ubicaciones-tax-btn:has(> img.ubicaciones-tax-icon:only-child) {
  width: 40px;
  padding: 0;
}

.ubicaciones-tax-icon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.ubicaciones-tax-icon img,
img.ubicaciones-tax-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.ubicaciones-tax-icon--svg svg {
  width: 16px;
  height: 16px;
}

/* Icono en negro (inactivo) / blanco (activo), como en Figma. Se fuerza el
   color para que no dependa del relleno del SVG subido en ACF (p.ej. blanco). */
.ubicaciones-tax-filter .ubicaciones-tax-btn .ubicaciones-tax-icon {
  filter: brightness(0);
}

.ubicaciones-tax-filter .ubicaciones-tax-btn.is-active .ubicaciones-tax-icon {
  filter: brightness(0) invert(1);
}

/* Móvil: tabs en una sola fila con scroll horizontal (el último se corta en el borde) */
@media (max-width: 767px) {
  .ubicaciones-city-search {
    max-width: none;
  }

  .ubicaciones-tax-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 4px 0 12px; /* aire para que no se recorte la sombra */
    margin-bottom: -8px;
    scrollbar-width: none;
  }

  .ubicaciones-tax-filter::-webkit-scrollbar {
    display: none;
  }
}

.ubicaciones-openfreemap {
  min-height: 300px;
}

.maplibregl-marker,
.maplibregl-popup {
  pointer-events: auto;
}

/* Popup: contenedor neutro. Sin estilos visuales propios — el diseño lo
   aporta exclusivamente la plantilla Elementor (Ajustes → Integraciones).
   Solo se anula el aspecto por defecto de MapLibre (fondo blanco, padding,
   punta y sombra) para que nada estorbe a Elementor. */
.maplibregl-popup.ubic-popup .maplibregl-popup-content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: inherit;
  font: inherit;
  overflow: visible;
}

.maplibregl-popup.ubic-popup .maplibregl-popup-tip {
  display: none;
}

/* Animación de entrada y salida del popup (la salida la dispara map.js con la
   clase .is-closing y elimina el popup al terminar: mantener 350ms = UBIC_POPUP_MS).
   Se anima el contenido, no el wrapper: MapLibre posiciona el wrapper con transform. */
.maplibregl-popup.ubic-popup .maplibregl-popup-content {
  transform-origin: 50% 100%;
  animation: ubic-popup-in .35s cubic-bezier(.22, .61, .36, 1) both;
}

.maplibregl-popup.ubic-popup.is-closing {
  pointer-events: none;
}

.maplibregl-popup.ubic-popup.is-closing .maplibregl-popup-content {
  animation: ubic-popup-out .35s ease-in both;
}

@keyframes ubic-popup-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ubic-popup-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  .maplibregl-popup.ubic-popup .maplibregl-popup-content,
  .maplibregl-popup.ubic-popup.is-closing .maplibregl-popup-content {
    animation-duration: .01ms;
  }
  .ubic-panel { transition-duration: .01ms; }
}

span.TiposComercio{
    font-family: 'Visby';
}

/* ==========================================================================
   Panel lateral izquierdo
   Solo geometría: posición, tamaño, estado abierto/cerrado y botón ×.
   Sin estilos visuales ni tipográficos — el contenido (plantilla Elementor
   o panel ACF de respaldo) define su propio aspecto.
   ========================================================================== */

.ubic-map-wrap {
  position: relative;
  width: 100%;
}

.ubic-panel {
  position: absolute;
  /* Figma: 20px bajo el buscador/filtro (map.js ajusta 'top' según su posición real),
     20px de margen lateral e inferior, 335px de ancho. 164px = 104 + 40 + 20. */
  top: 164px;
  left: 20px;
  bottom: 20px;
  z-index: 5;
  width: 335px;
  max-width: calc(100% - 40px);
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none; /* el scroll no debe estrechar la tarjeta de la plantilla */

  /* Estado cerrado: oculto con animación */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-16px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1), visibility .45s;
}

.ubic-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Los elementos con atributo hidden deben ocultarse aunque tengan display propio */
.ubic-panel::-webkit-scrollbar {
  display: none;
}

.ubic-panel [hidden] {
  display: none !important;
}

/* Estado de carga de la plantilla Elementor del panel */
.ubic-panel__tpl-status {
  margin: 12px 0;
  font-size: 14px;
}

/* Con plantilla de panel activa se oculta el contenido ACF por defecto,
   excepto el propio contenedor de la plantilla. */
.ubic-panel--tpl > :not(.ubic-panel__tpl) {
  display: none !important;
}

/* El contenedor raíz de la plantilla Elementor del panel suele venir con
   posición absoluta y 'top' propio (p.ej. top:130px, de cuando se maquetó sobre
   el mapa). Dentro del panel eso lo desplaza hacia abajo, así que se neutraliza:
   la raíz ocupa todo el panel y es este quien fija su posición (top/left/bottom). */
.ubic-panel__tpl,
.ubic-panel__tpl > .elementor {
  height: 100%;
}

.ubic-panel .ubic-panel__tpl .elementor > .e-con.e-parent {
  position: relative !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100%;
  box-sizing: border-box;
}

/* Móvil: el panel pasa a ser una hoja inferior */
@media (max-width: 767px) {
  /* Figma móvil (481:7260): panel a 16px de los bordes, 16px bajo el buscador.
     map.js fija 'top' y 'height' según la posición real del buscador y el viewport. */
  .ubic-panel {
    top: 152px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: none;
    transform: translateY(16px);
  }

  .ubic-panel.is-open { transform: translateY(0); }
}

/* ==========================================================================
   Controles del mapa (zoom, compás, geolocalización) — sistema de diseño
   Mismos tokens que buscador/filtro: blanco, borde #E3E3E3 0.6px, sombra
   suave, azul #14499A, rojo #ED1E24 (error). Botones de 40px; cada grupo es
   una píldora (el de geolocalización queda como círculo).
   Estados: reposo · hover · pressed · focus-visible · disabled · y, en
   geolocalización: waiting · active · background · active-error · background-error.
   ========================================================================== */

.ubicaciones-openfreemap {
  --ubic-blue: #14499a;
  --ubic-red: #ed1e24;
  --ubic-border: #e3e3e3;
  --ubic-ctrl-hover: #f2f5fa;
  --ubic-ctrl-press: #e3eaf5;
}

.ubicaciones-openfreemap .maplibregl-ctrl-bottom-right .maplibregl-ctrl {
  margin: 0 20px 8px 0;
}

.ubicaciones-openfreemap .maplibregl-ctrl-group,
.ubicaciones-openfreemap .maplibregl-ctrl-group:not(:empty) {
  overflow: hidden;
  background: #fff;
  border: 0.6px solid var(--ubic-border);
  border-radius: 40px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}

.ubicaciones-openfreemap .maplibregl-ctrl-group button {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.ubicaciones-openfreemap .maplibregl-ctrl-group button + button {
  border-top: 0.6px solid var(--ubic-border);
}

/* Iconos: máscara con el color del texto, así cada estado solo cambia 'color' */
.ubicaciones-openfreemap .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: var(--ubic-ico) center / 20px 20px no-repeat;
  mask: var(--ubic-ico) center / 20px 20px no-repeat;
}

.ubicaciones-openfreemap .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon { --ubic-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z%22/%3E%3C/svg%3E"); }
.ubicaciones-openfreemap .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon { --ubic-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M5 11h14v2H5z%22/%3E%3C/svg%3E"); }
.ubicaciones-openfreemap .maplibregl-ctrl-compass .maplibregl-ctrl-icon { --ubic-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2l6 18-6-4.5L6 20z%22/%3E%3C/svg%3E"); }
.ubicaciones-openfreemap .maplibregl-ctrl-geolocate .maplibregl-ctrl-icon { --ubic-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 8a4 4 0 100 8 4 4 0 000-8zm8.94 3A8.994 8.994 0 0013 3.06V1h-2v2.06A8.994 8.994 0 003.06 11H1v2h2.06A8.994 8.994 0 0011 20.94V23h2v-2.06A8.994 8.994 0 0020.94 13H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z%22/%3E%3C/svg%3E"); }
.ubicaciones-openfreemap .maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon { --ubic-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 8a4 4 0 100 8 4 4 0 000-8zm8.94 3A8.994 8.994 0 0013 3.06V1h-2v2.06A8.994 8.994 0 003.06 11H1v2h2.06A8.994 8.994 0 0011 20.94V23h2v-2.06A8.994 8.994 0 0020.94 13H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zM2.1 3.5l1.4-1.4 18.4 18.4-1.4 1.4z%22/%3E%3C/svg%3E"); }

/* Hover / pressed / focus */
.ubicaciones-openfreemap .maplibregl-ctrl-group button:not(:disabled):hover {
  background-color: var(--ubic-ctrl-hover);
  color: var(--ubic-blue);
}

.ubicaciones-openfreemap .maplibregl-ctrl-group button:not(:disabled):active {
  background-color: var(--ubic-ctrl-press);
  color: var(--ubic-blue);
}

.ubicaciones-openfreemap .maplibregl-ctrl-group button:focus {
  box-shadow: none;
}

.ubicaciones-openfreemap .maplibregl-ctrl-group button:focus-visible {
  outline: 2px solid var(--ubic-blue);
  outline-offset: -2px;
}

/* Disabled (p.ej. geolocalización sin permiso/soporte) */
.ubicaciones-openfreemap .maplibregl-ctrl-group button:disabled {
  color: #000;
  opacity: 0.35;
  cursor: not-allowed;
}

/* Geolocalización: waiting (buscando) · active (siguiendo) · background (activo sin seguir) */
.ubicaciones-openfreemap .maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon {
  animation: ubic-geo-pulse 1s ease-in-out infinite;
}

.ubicaciones-openfreemap .maplibregl-ctrl-geolocate-active,
.ubicaciones-openfreemap .maplibregl-ctrl-geolocate-background {
  background-color: var(--ubic-ctrl-press);
  color: var(--ubic-blue);
}

.ubicaciones-openfreemap .maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon {
  opacity: 0.6;
}

/* Geolocalización con error: rojo */
.ubicaciones-openfreemap .maplibregl-ctrl-geolocate-active-error,
.ubicaciones-openfreemap .maplibregl-ctrl-geolocate-background-error,
.ubicaciones-openfreemap .maplibregl-ctrl-geolocate-active-error:not(:disabled):hover,
.ubicaciones-openfreemap .maplibregl-ctrl-geolocate-background-error:not(:disabled):hover {
  color: var(--ubic-red);
}

@keyframes ubic-geo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .ubicaciones-openfreemap .maplibregl-ctrl-group button { transition-duration: .01ms; }
  .ubicaciones-openfreemap .maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon { animation: none; }
}

@media (max-width: 767px) {
  .ubicaciones-openfreemap .maplibregl-ctrl-bottom-right .maplibregl-ctrl {
    margin: 0 16px 8px 0;
  }
}

/* ---------- Indicador de carga del mapa ---------- */
.ubic-loader {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  background: #fff;
  border: 0.6px solid #e3e3e3;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
  color: #000;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ubic-loader.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ubic-loader__spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid #e3e3e3;
  border-top-color: #14499a;
  animation: ubic-spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .ubic-loader { transition: none; }
  .ubic-loader__spinner { animation-duration: 2s; }
}