/* LuupiGO Mobile Map Rebuild 04
   Fuente unica para la experiencia movil del mapa/PWA.
   Sustituye a luupigo-map-clean, luupigo-ux-target y menu_animals en index.html. */

:root {
  --lg-safe-bottom: env(safe-area-inset-bottom, 0px);
  --lg-side: clamp(8px, 3vw, 14px);
  --lg-top: calc(env(safe-area-inset-top, 0px) + clamp(6px, 1.1dvh, 10px));
  --lg-ui-gap: clamp(5px, .9dvh, 8px);
  --lg-header-h: clamp(42px, 6.2dvh, 48px);
  --lg-filter-h: clamp(38px, 5.7dvh, 44px);
  --lg-radius-top: calc(env(safe-area-inset-top, 0px) + clamp(122px, 17.8dvh, 142px));
  --lg-radius-h: clamp(38px, 5.7dvh, 44px);
  --lg-side-actions-top: calc(env(safe-area-inset-top, 0px) + clamp(220px, 31dvh, 286px));
  --lg-dock-h: clamp(72px, 9.4dvh, 84px);
  --lg-walker-h: clamp(68px, 8.6dvh, 82px);
  --lg-nearby-max-h: clamp(168px, 22dvh, 202px);
  --lg-card-h: clamp(56px, 7.2dvh, 64px);
  --lg-avatar: clamp(36px, 10vw, 42px);
  --lg-gap: clamp(8px, 2.4vw, 12px);
  --lg-bg: #050914;
  --lg-glass: rgba(6, 12, 24, .86);
  --lg-card: rgba(8, 16, 31, .92);
  --lg-border: rgba(255, 255, 255, .1);
  --lg-green: #59f35f;
  --lg-purple: #7e67ff;
  --lg-pink: #ff4c7a;
  --lg-yellow: #ffd91f;
}

html,
body.mapa-activo {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden !important;
  background: var(--lg-bg) !important;
}

body.mapa-activo *,
body.mapa-activo *::before,
body.mapa-activo *::after {
  box-sizing: border-box;
}

body.mapa-activo #map,
body.menu-inferior-presente #map {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  z-index: 1 !important;
  background: #b8dff1 !important;
  filter: none !important;
}

body.mapa-activo .leaflet-container,
body.mapa-activo .leaflet-pane,
body.mapa-activo .leaflet-map-pane,
body.mapa-activo .leaflet-tile-pane,
body.mapa-activo .leaflet-tile-container {
  background: #b8dff1 !important;
}

body.mapa-activo .luupigo-map-screen {
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
  background: var(--lg-bg) !important;
}

body.mapa-activo .luupigo-map-screen::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(1, 4, 10, .38) 0%, rgba(1, 4, 10, .07) 31%, rgba(1, 4, 10, 0) 58%, rgba(1, 4, 10, .2) 100%);
}

/* Header y filtros */
body.mapa-activo .luupigo-map-top-ui {
  position: fixed !important;
  top: var(--lg-top) !important;
  left: var(--lg-side) !important;
  right: var(--lg-side) !important;
  z-index: 5000 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--lg-ui-gap) !important;
  pointer-events: none !important;
}

body.mapa-activo .luupigo-map-top-ui > * {
  pointer-events: auto !important;
}

body.mapa-activo .luupigo-map-header {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: var(--lg-header-h) !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  padding: clamp(2px, .5dvh, 4px) !important;
  border-radius: clamp(24px, 7vw, 30px) !important;
  background: rgba(0, 0, 0, .84) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .34) !important;
  backdrop-filter: blur(18px) saturate(155%) !important;
}

body.mapa-activo .luupigo-status-live {
  height: clamp(30px, 4.8dvh, 36px) !important;
  min-height: clamp(30px, 4.8dvh, 36px) !important;
  padding: 0 clamp(9px, 3vw, 13px) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: clamp(5px, 1.8vw, 8px) !important;
  border-radius: 999px !important;
  background: rgba(20, 28, 52, .94) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  color: #fff !important;
}

body.mapa-activo .live-dot {
  width: clamp(9px, 2.8vw, 12px) !important;
  height: clamp(9px, 2.8vw, 12px) !important;
  border-radius: 999px !important;
  background: var(--lg-pink) !important;
  box-shadow: 0 0 16px rgba(255, 76, 122, .8) !important;
}

body.mapa-activo .live-text {
  font-size: clamp(10px, 3vw, 12px) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body.mapa-activo .luupigo-map-brand {
  justify-self: center !important;
  color: #fff !important;
  font-size: clamp(1.22rem, 6.1vw, 1.52rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

body.mapa-activo .map-header-icon-btn {
  all: unset !important;
  box-sizing: border-box !important;
  width: clamp(38px, 10.8vw, 44px) !important;
  height: clamp(38px, 10.8vw, 44px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(22, 31, 49, .94) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
}

body.mapa-activo #luupigo-map-filters {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(6px, 2.2vw, 10px) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.mapa-activo #luupigo-map-filters > .filter-chip {
  all: unset !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  height: var(--lg-filter-h) !important;
  min-height: var(--lg-filter-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(5px, 1.8vw, 8px) !important;
  padding: 0 clamp(8px, 2.6vw, 12px) !important;
  border-radius: 999px !important;
  color: #111827 !important;
  font-size: clamp(12px, 3.7vw, 15px) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 10px 24px rgba(0, 0, 0, .24) !important;
  text-align: center !important;
}

body.mapa-activo #luupigo-map-filters > .filter-chip[data-categoria="animal_perdido"] {
  background: linear-gradient(180deg, #ffc342 0%, #ff9d13 100%) !important;
}

body.mapa-activo #luupigo-map-filters > .filter-chip[data-categoria="animal_encontrado"] {
  background: linear-gradient(180deg, #4ce276 0%, #1fc65d 100%) !important;
}

body.mapa-activo #luupigo-map-filters > .filter-chip[data-categoria="animal_en_adopcion"] {
  display: none !important;
}

body.mapa-activo .filter-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: clamp(16px, 4.7vw, 20px) !important;
  height: clamp(16px, 4.7vw, 20px) !important;
  padding: 0 clamp(4px, 1.5vw, 6px) !important;
  border-radius: 999px !important;
  background: rgba(255, 76, 122, .88) !important;
  color: #fff !important;
  font-size: clamp(10px, 2.9vw, 11px) !important;
  font-weight: 900 !important;
}

/* Radio */
body.mapa-activo .luupigo-radius-slider-horizontal {
  position: fixed !important;
  top: var(--lg-radius-top) !important;
  left: var(--lg-side) !important;
  right: var(--lg-side) !important;
  width: auto !important;
  max-width: none !important;
  height: var(--lg-radius-h) !important;
  padding: clamp(4px, .8dvh, 5px) !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(4px, 1.5vw, 6px) !important;
  z-index: 4990 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .84) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(18px) saturate(155%) !important;
}

body.mapa-activo .luupigo-radius-slider-horizontal > .radius-step {
  all: unset !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: calc(var(--lg-radius-h) - clamp(8px, 1.6dvh, 10px)) !important;
  min-height: calc(var(--lg-radius-h) - clamp(8px, 1.6dvh, 10px)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, .72) !important;
  background: transparent !important;
  font-size: clamp(12px, 3.5vw, 14px) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body.mapa-activo .luupigo-radius-slider-horizontal > .radius-step.activo {
  color: #fff !important;
  background: linear-gradient(180deg, #8f7cff 0%, #6654ff 100%) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .88), 0 0 22px rgba(126, 103, 255, .72) !important;
}

/* Controles laterales */
body.mapa-activo .luupigo-map-side-actions {
  position: fixed !important;
  top: var(--lg-side-actions-top) !important;
  right: var(--lg-side) !important;
  bottom: auto !important;
  width: clamp(44px, 12vw, 50px) !important;
  z-index: 7600 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  pointer-events: none !important;
}

body.mapa-activo .luupigo-map-side-actions .luupigo-zoom-slider,
body.mapa-activo .luupigo-map-side-actions #btn-cerca-ti,
body.mapa-activo .luupigo-map-side-actions #btn-relieve-mapa {
  position: static !important;
  inset: auto !important;
  width: clamp(44px, 12vw, 50px) !important;
  transform: none !important;
  transform-origin: top right !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  isolation: isolate !important;
}

body.mapa-activo .luupigo-map-side-actions #btn-cerca-ti {
  order: -1 !important;
}

body.mapa-activo .luupigo-map-side-actions .luupigo-zoom-slider {
  order: 0 !important;
}

body.mapa-activo .luupigo-map-side-actions #btn-relieve-mapa {
  order: 1 !important;
}

body.mapa-activo .luupigo-map-side-actions .luupigo-zoom-slider {
  min-height: clamp(142px, 20dvh, 168px) !important;
  padding: clamp(8px, 1.5dvh, 11px) clamp(5px, 1.5vw, 7px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(6px, 1.2dvh, 9px) !important;
  border-radius: 999px !important;
  background: rgba(20, 28, 40, .82) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-top-color: rgba(255, 255, 255, .28) !important;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, .34),
    0 0 0 .5px rgba(255, 255, 255, .12) inset,
    0 1px 0 rgba(255, 255, 255, .1) inset,
    0 0 22px rgba(139, 92, 246, .16) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

body.mapa-activo .luupigo-map-side-actions .zoom-step {
  all: unset !important;
  box-sizing: border-box !important;
  width: clamp(34px, 9.4vw, 38px) !important;
  height: clamp(34px, 9.4vw, 38px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 30px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .09) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, .18),
    0 1px 0 rgba(255, 255, 255, .08) inset !important;
  backdrop-filter: blur(4px) !important;
  font-size: clamp(20px, 5.7vw, 24px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease !important;
}

body.mapa-activo .luupigo-map-side-actions .zoom-step:first-child {
  border-radius: 30px 30px 20px 20px !important;
}

body.mapa-activo .luupigo-map-side-actions .zoom-step:last-child {
  border-radius: 20px 20px 30px 30px !important;
}

body.mapa-activo .luupigo-map-side-actions .zoom-track {
  width: 3px !important;
  height: clamp(46px, 7dvh, 56px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .26) !important;
  box-shadow: 0 0 12px rgba(139, 92, 246, .25) !important;
}

body.mapa-activo .luupigo-map-side-actions .zoom-track span {
  width: 8px !important;
  height: 8px !important;
  display: block !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .74) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, .36) !important;
}

body.mapa-activo .luupigo-map-side-actions #btn-cerca-ti,
body.mapa-activo .luupigo-map-side-actions #btn-relieve-mapa {
  all: unset !important;
  box-sizing: border-box !important;
  width: clamp(44px, 12vw, 50px) !important;
  height: clamp(44px, 12vw, 50px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: rgba(20, 28, 40, .84) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-top-color: rgba(255, 255, 255, .3) !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, .34),
    0 0 0 .5px rgba(255, 255, 255, .12) inset,
    0 0 22px rgba(139, 92, 246, .18) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  font-size: clamp(18px, 5.2vw, 21px) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease !important;
}

body.mapa-activo .luupigo-map-side-actions .zoom-step:active,
body.mapa-activo .luupigo-map-side-actions #btn-cerca-ti:active,
body.mapa-activo .luupigo-map-side-actions #btn-relieve-mapa:active {
  transform: scale(.94) !important;
  background: rgba(100, 108, 255, .48) !important;
}

body.mapa-activo .luupigo-map-side-actions #btn-cerca-ti.activo,
body.mapa-activo .luupigo-map-side-actions #btn-relieve-mapa.activo {
  background: linear-gradient(135deg, rgba(99, 102, 241, .82), rgba(139, 92, 246, .82)) !important;
  border-color: rgba(255, 255, 255, .42) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, .34),
    0 0 22px rgba(99, 102, 241, .48) !important;
}

@media (hover: hover) {
  body.mapa-activo .luupigo-map-side-actions .luupigo-zoom-slider:hover {
    background: rgba(25, 35, 50, .9) !important;
    transform: scale(1.02) !important;
  }

  body.mapa-activo .luupigo-map-side-actions .zoom-step:hover {
    background: rgba(100, 108, 255, .52) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(100, 108, 255, .3) !important;
  }

  body.mapa-activo .luupigo-map-side-actions #btn-cerca-ti:hover,
  body.mapa-activo .luupigo-map-side-actions #btn-relieve-mapa:hover {
    background: rgba(25, 35, 50, .9) !important;
    color: #a78bfa !important;
    transform: scale(1.05) !important;
  }
}

/* Lista cerca de ti */
body.mapa-activo .luupigo-map-bottom-stack {
  position: fixed !important;
  left: var(--lg-side) !important;
  right: var(--lg-side) !important;
  bottom: calc(var(--lg-dock-h) + var(--lg-walker-h) + var(--lg-safe-bottom) + clamp(20px, 3.2dvh, 30px)) !important;
  z-index: 5400 !important;
  max-height: var(--lg-nearby-max-h) !important;
  padding: clamp(8px, 2.4vw, 11px) !important;
  border-radius: clamp(20px, 6vw, 24px) !important;
  background: var(--lg-glass) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow: 0 -14px 44px rgba(0, 0, 0, .3) !important;
  backdrop-filter: blur(18px) saturate(155%) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  transition: opacity .22s ease, transform .22s ease, bottom .22s ease !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .28) transparent;
}

body.mapa-activo .luupigo-map-bottom-stack::-webkit-scrollbar {
  width: 3px;
}

body.mapa-activo .luupigo-map-bottom-stack::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .28);
  border-radius: 999px;
}

body.mapa-activo .luupigo-menu-drawer[hidden] {
  display: none !important;
}

body.mapa-activo .luupigo-menu-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483600 !important;
}

body.mapa-activo .luupigo-menu-drawer__backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(3, 8, 20, .56) !important;
  backdrop-filter: blur(10px) !important;
}

body.mapa-activo .luupigo-menu-drawer__panel {
  position: absolute !important;
  top: calc(18px + env(safe-area-inset-top, 0px)) !important;
  right: 14px !important;
  width: min(360px, calc(100vw - 28px)) !important;
  padding: 16px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(16, 25, 42, .98), rgba(8, 14, 27, .98)) !important;
  color: #fff !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42) !important;
}

body.mapa-activo .luupigo-menu-drawer__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

body.mapa-activo .luupigo-menu-drawer__head strong {
  font-size: 1.25rem !important;
  font-weight: 950 !important;
}

body.mapa-activo .luupigo-menu-drawer__head button {
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
  font-size: 1.4rem !important;
  cursor: pointer !important;
}

body.mapa-activo .luupigo-menu-drawer__links {
  display: grid !important;
  gap: 10px !important;
}

body.mapa-activo .luupigo-menu-drawer__links a {
  display: grid !important;
  grid-template-columns: 38px 1fr !important;
  gap: 2px 10px !important;
  align-items: center !important;
  min-height: 72px !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .06) !important;
  color: #fff !important;
  text-decoration: none !important;
}

body.mapa-activo .luupigo-menu-drawer__links a span {
  grid-row: span 2 !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .09) !important;
}

body.mapa-activo .luupigo-menu-drawer__links a strong {
  font-size: .95rem !important;
  line-height: 1.1 !important;
}

body.mapa-activo .luupigo-menu-drawer__links a small {
  color: rgba(255, 255, 255, .68) !important;
  font-size: .78rem !important;
  line-height: 1.25 !important;
}

body.mapa-activo .luupigo-menu-link--primary {
  border-color: rgba(92, 255, 155, .34) !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, .22), rgba(99, 102, 241, .18)) !important;
}

body.mapa-activo .nearby-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(6px, 2vw, 9px) !important;
  margin: 0 0 clamp(6px, 1.1dvh, 8px) !important;
  padding: 0 clamp(4px, 1.7vw, 7px) !important;
}

body.mapa-activo .nearby-section-title {
  color: #fff !important;
  font-size: clamp(15px, 4.4vw, 18px) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body.mapa-activo .nearby-section-count {
  margin-left: auto !important;
  color: rgba(255, 255, 255, .62) !important;
  font-size: clamp(11px, 3.1vw, 12px) !important;
  font-weight: 700 !important;
}

body.mapa-activo .nearby-section-close {
  all: unset !important;
  box-sizing: border-box !important;
  width: clamp(28px, 7.8vw, 32px) !important;
  height: clamp(28px, 7.8vw, 32px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, .86) !important;
  background: rgba(255, 255, 255, .1) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  font-size: clamp(18px, 5.4vw, 21px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

body.mapa-activo .nearby-animal-card {
  min-height: var(--lg-card-h) !important;
  display: grid !important;
  grid-template-columns: var(--lg-avatar) minmax(0, 1fr) 16px !important;
  align-items: center !important;
  gap: clamp(6px, 2.2vw, 9px) !important;
  padding: clamp(7px, 1.7dvh, 9px) clamp(8px, 2.5vw, 11px) !important;
  margin: 0 0 clamp(6px, 1.2dvh, 8px) !important;
  border-radius: clamp(14px, 4.5vw, 18px) !important;
  background: var(--lg-card) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body.mapa-activo .nearby-animal-card:focus-visible {
  outline: 2px solid rgba(139, 92, 246, .9) !important;
  outline-offset: 2px !important;
}

body.mapa-activo .nearby-animal-list {
  display: block !important;
}

body.mapa-activo.luupigo-nearby-hidden .luupigo-map-bottom-stack {
  max-height: 54px !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

body.mapa-activo.luupigo-nearby-hidden .nearby-animal-card {
  display: none !important;
}

body.mapa-activo.luupigo-nearby-hidden .nearby-animal-list {
  display: none !important;
}

body.mapa-activo.luupigo-paseante-off .luupigo-map-bottom-stack {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  transform: translateY(14px) !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.mapa-activo.luupigo-paseante-off #paseante-active-banner,
body.mapa-activo.luupigo-paseante-off #modo-paseante-activo-banner,
body.mapa-activo.luupigo-paseante-off .paseante-active-banner {
  opacity: 0 !important;
  transform: translateY(calc(100% + 18px)) !important;
  pointer-events: none !important;
}

body.mapa-activo .nearby-animal-icon {
  width: var(--lg-avatar) !important;
  height: var(--lg-avatar) !important;
  border-radius: 50% !important;
  border: 3px solid var(--lg-pink) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(20px, 6vw, 24px) !important;
  background: rgba(255, 76, 122, .14) !important;
  overflow: hidden !important;
  transition: opacity .22s ease, transform .22s ease !important;
}

body.mapa-activo .nearby-animal-icon.encontrado {
  border-color: #38d353 !important;
  background: rgba(56, 211, 83, .14) !important;
}

body.mapa-activo .nearby-animal-icon img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

body.mapa-activo .nearby-animal-empty {
  min-height: var(--lg-card-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 2dvh, 16px) !important;
  border-radius: clamp(14px, 4.5vw, 18px) !important;
  color: rgba(255, 255, 255, .68) !important;
  background: rgba(9, 17, 33, .66) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  font-size: clamp(12px, 3.4vw, 14px) !important;
  font-weight: 800 !important;
  text-align: center !important;
}

body.mapa-activo .nearby-animal-info {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 8px !important;
}

body.mapa-activo .nearby-animal-name {
  grid-column: 1 / -1 !important;
  color: #fff !important;
  font-size: clamp(13px, 3.8vw, 15px) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.mapa-activo .nearby-animal-status {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: clamp(4px, 1.5vw, 7px) !important;
  padding: 3px clamp(6px, 2vw, 9px) !important;
  border-radius: 8px !important;
  color: #fff !important;
  background: rgba(255, 76, 122, .82) !important;
  font-size: clamp(9px, 2.7vw, 10px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body.mapa-activo .nearby-animal-status.encontrado {
  background: rgba(55, 199, 86, .82) !important;
}

body.mapa-activo .nearby-animal-details {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 2px clamp(6px, 2vw, 9px) !important;
  color: rgba(255, 255, 255, .74) !important;
  font-size: clamp(9px, 2.8vw, 11px) !important;
  font-weight: 700 !important;
}

body.mapa-activo .nearby-animal-time,
body.mapa-activo .nearby-animal-distance {
  grid-column: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.mapa-activo .nearby-animal-probability {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  padding: 2px clamp(6px, 2vw, 9px) !important;
  border-radius: 999px !important;
  color: var(--lg-yellow) !important;
  background: rgba(255, 217, 31, .14) !important;
  font-size: clamp(9px, 2.8vw, 11px) !important;
  font-weight: 900 !important;
}

body.mapa-activo .nearby-animal-arrow {
  color: rgba(255, 255, 255, .5) !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

/* Banner paseante separado de cards */
body.mapa-activo #paseante-active-banner,
body.mapa-activo #modo-paseante-activo-banner,
body.mapa-activo .paseante-active-banner {
  position: fixed !important;
  left: calc(var(--lg-side) + clamp(4px, 1.4vw, 6px)) !important;
  right: calc(var(--lg-side) + clamp(4px, 1.4vw, 6px)) !important;
  bottom: calc(var(--lg-dock-h) + var(--lg-safe-bottom) + clamp(12px, 2dvh, 17px)) !important;
  z-index: 6500 !important;
  min-height: var(--lg-walker-h) !important;
  max-height: calc(var(--lg-walker-h) + 8px) !important;
  margin: 0 !important;
  padding: clamp(8px, 1.8dvh, 11px) clamp(10px, 3vw, 13px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: clamp(7px, 2.2vw, 10px) !important;
  border-radius: clamp(20px, 6vw, 24px) !important;
  color: #fff !important;
  background: rgba(3, 10, 20, .94) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .36) !important;
  backdrop-filter: blur(18px) saturate(155%) !important;
  overflow: hidden !important;
}

body.mapa-activo.luupigo-walker-hidden #paseante-active-banner,
body.mapa-activo.luupigo-walker-hidden #modo-paseante-activo-banner,
body.mapa-activo.luupigo-walker-hidden .paseante-active-banner {
  opacity: 0 !important;
  transform: translateY(calc(100% + 18px)) !important;
  pointer-events: none !important;
}

body.mapa-activo.luupigo-walker-hidden .luupigo-map-bottom-stack {
  bottom: calc(var(--lg-dock-h) + var(--lg-safe-bottom) + clamp(20px, 3.2dvh, 30px)) !important;
}

body.mapa-activo .paseante-active-info {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: clamp(46px, 12vw, 52px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(7px, 2.2vw, 10px) !important;
}

body.mapa-activo .paseante-active-icon {
  width: clamp(44px, 12vw, 50px) !important;
  height: clamp(44px, 12vw, 50px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  color: #0e5fff !important;
  background: radial-gradient(circle at 34% 26%, #8dff90 0%, #29ec60 48%, #0fb43a 100%) !important;
  box-shadow: 0 0 28px rgba(89, 243, 95, .42) !important;
  font-size: clamp(19px, 5.7vw, 22px) !important;
}

body.mapa-activo .paseante-active-text {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

body.mapa-activo .paseante-active-title {
  color: var(--lg-green) !important;
  font-size: clamp(15px, 4.4vw, 18px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

body.mapa-activo .paseante-active-subtitle {
  color: rgba(255, 255, 255, .76) !important;
  font-size: clamp(10px, 2.9vw, 12px) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.mapa-activo .paseante-active-time {
  padding: clamp(5px, 1.4dvh, 7px) clamp(8px, 2.7vw, 11px) !important;
  border-radius: 999px !important;
  color: var(--lg-green) !important;
  background: rgba(37, 190, 83, .18) !important;
  border: 1px solid rgba(89, 243, 95, .26) !important;
  font-size: clamp(13px, 3.8vw, 15px) !important;
  font-weight: 900 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  white-space: nowrap !important;
}

body.mapa-activo .paseante-active-close {
  width: clamp(38px, 10.8vw, 44px) !important;
  height: clamp(38px, 10.8vw, 44px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, .85) !important;
  background: rgba(255, 255, 255, .1) !important;
  font-size: clamp(18px, 5.2vw, 21px) !important;
}

/* Dock inferior */
body.mapa-activo .menu-inferior {
  position: fixed !important;
  left: var(--lg-side) !important;
  right: var(--lg-side) !important;
  bottom: calc(var(--lg-safe-bottom) + clamp(8px, 1.8dvh, 12px)) !important;
  z-index: 7000 !important;
  height: var(--lg-dock-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
}

body.mapa-activo .menu-inferior-container {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr clamp(66px, 18vw, 76px) 1fr 1fr !important;
  align-items: center !important;
  gap: clamp(3px, 1.1vw, 5px) !important;
  padding: clamp(7px, 1.6dvh, 9px) clamp(8px, 2.7vw, 11px) !important;
  border-radius: clamp(23px, 7vw, 30px) !important;
  background: rgba(22, 34, 55, .88) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  box-shadow: 0 -16px 42px rgba(0, 0, 0, .34) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  pointer-events: auto !important;
}

body.mapa-activo .btn-menu-inferior {
  all: unset !important;
  box-sizing: border-box !important;
  position: relative !important;
  min-width: 0 !important;
  height: calc(var(--lg-dock-h) - clamp(18px, 3.3dvh, 22px)) !important;
  padding: clamp(3px, .8dvh, 5px) 3px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border-radius: 18px !important;
  color: rgba(255, 255, 255, .72) !important;
  font-size: clamp(10px, 3vw, 12px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

body.mapa-activo .btn-menu-inferior .icono {
  font-size: clamp(18px, 5.2vw, 21px) !important;
  line-height: 1 !important;
}

body.mapa-activo .btn-menu-inferior .texto {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.mapa-activo #btn-paseante-bottom {
  grid-column: 1 !important;
}

body.mapa-activo #btn-abrir-formulario {
  grid-column: 3 !important;
}

body.mapa-activo #btn-alertas-bottom {
  grid-column: 4 !important;
}

body.mapa-activo #btn-radar-bottom {
  grid-column: 5 !important;
}

body.mapa-activo .btn-menu-inferior.activo,
body.mapa-activo .btn-menu-inferior[aria-current="page"],
body.mapa-activo .btn-paseante-main.activo {
  color: var(--lg-green) !important;
}

body.mapa-activo .btn-menu-inferior.activo::after,
body.mapa-activo .btn-menu-inferior[aria-current="page"]::after,
body.mapa-activo .btn-paseante-main.activo::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 2px !important;
  width: 22px !important;
  height: 3px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: #8f7cff !important;
  box-shadow: 0 0 14px rgba(143, 124, 255, .85) !important;
}

body.mapa-activo #btn-abrir-formulario {
  align-self: start !important;
  width: clamp(66px, 18vw, 76px) !important;
  height: clamp(66px, 18vw, 76px) !important;
  margin-top: calc(clamp(28px, 4.3dvh, 36px) * -1) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 45% 24%, rgba(160, 255, 255, .95), transparent 25%),
    linear-gradient(180deg, #27c8ff 0%, #2765ff 100%) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 6px rgba(39, 120, 255, .2),
    0 14px 34px rgba(39, 120, 255, .46) !important;
}

body.mapa-activo #btn-abrir-formulario .icono {
  font-size: clamp(26px, 7.4vw, 31px) !important;
  font-weight: 900 !important;
}

@media (max-height: 780px) {
  :root {
    --lg-dock-h: clamp(68px, 9dvh, 76px);
    --lg-walker-h: clamp(64px, 8.3dvh, 72px);
    --lg-nearby-max-h: clamp(156px, 21dvh, 184px);
    --lg-card-h: clamp(54px, 7dvh, 58px);
    --lg-side-actions-top: calc(env(safe-area-inset-top, 0px) + clamp(208px, 30dvh, 250px));
  }

  body.mapa-activo .luupigo-map-bottom-stack {
    max-height: var(--lg-nearby-max-h) !important;
  }

  body.mapa-activo .nearby-animal-card {
    min-height: var(--lg-card-h) !important;
  }
}

/* Fix hit-test controles bajo zoom: el canvas Leaflet no puede tapar estos botones. */
body.mapa-activo .luupigo-map-side-actions {
  z-index: 2147483000 !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

body.mapa-activo .luupigo-map-side-actions .luupigo-zoom-slider,
body.mapa-activo .luupigo-map-side-actions .zoom-step,
body.mapa-activo .luupigo-map-side-actions #btn-cerca-ti,
body.mapa-activo .luupigo-map-side-actions #btn-relieve-mapa {
  position: relative !important;
  z-index: 2147483001 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Splash inicial: evita pantalla negra/parpadeos mientras arrancan mapa y casos. */
.luupigo-boot-splash {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(20px, env(safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom, 0px)) !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(54, 201, 255, .22), transparent 31%),
    radial-gradient(circle at 18% 82%, rgba(40, 255, 119, .16), transparent 26%),
    linear-gradient(180deg, #030914 0%, #07111f 100%) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .32s ease, visibility .32s ease !important;
}

.luupigo-boot-splash.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.luupigo-boot-splash__card {
  width: min(340px, 100%) !important;
  display: grid !important;
  justify-items: center !important;
  gap: 14px !important;
  text-align: center !important;
}

.luupigo-boot-splash__radar {
  position: relative !important;
  width: 104px !important;
  height: 104px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, .78) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 0 0 1px rgba(109, 76, 255, .18), 0 22px 70px rgba(25, 118, 255, .28) !important;
  overflow: hidden !important;
}

.luupigo-boot-splash__radar::before,
.luupigo-boot-splash__radar::after {
  content: "" !important;
  position: absolute !important;
  inset: 14px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(143, 124, 255, .42) !important;
}

.luupigo-boot-splash__radar::after {
  inset: 31px !important;
}

.luupigo-boot-splash__radar span {
  position: absolute !important;
  inset: 50% 50% auto auto !important;
  width: 46px !important;
  height: 46px !important;
  transform-origin: 0 0 !important;
  background: linear-gradient(45deg, rgba(45, 212, 191, .58), transparent 68%) !important;
  animation: luupigoBootSweep 1.35s linear infinite !important;
}

.luupigo-boot-splash__radar i {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background: #4ade80 !important;
  box-shadow: 0 0 24px rgba(74, 222, 128, .85) !important;
}

.luupigo-boot-splash__brand {
  font-size: 36px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

.luupigo-boot-splash__brand span {
  color: #4ade80 !important;
}

.luupigo-boot-splash__title {
  margin: 0 !important;
  color: rgba(255, 255, 255, .86) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.luupigo-boot-splash__steps {
  width: 100% !important;
  display: grid !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

.luupigo-boot-splash__steps span {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, .72) !important;
  background: rgba(255, 255, 255, .06) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.luupigo-boot-splash__steps span::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .35) !important;
}

.luupigo-boot-splash__steps span.is-done {
  color: #dcfce7 !important;
}

.luupigo-boot-splash__steps span.is-done::before {
  background: #4ade80 !important;
  box-shadow: 0 0 12px rgba(74, 222, 128, .75) !important;
}

@keyframes luupigoBootSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}