/* Fallback utilities for custom XENTRY Tailwind tokens.
   Ensures custom base/accent colors render even if Tailwind runtime config is not applied. */

:root {
  --x-base-950: #0b0b0d;
  --x-base-900: #111214;
  --x-accent-100: #dbeafe;
  --x-accent-200: #bfdbfe;
  --x-accent-300: #93c5fd;
  --x-accent-400: #5aa7ff;
  --x-accent-500: #4c9bff;
  --x-accent-600: #2f7bff;
}

body,
.font-sans {
  font-family:
    Inter, "SF Pro Display", "SF Pro Text", system-ui, sans-serif !important;
}

.shadow-glow {
  box-shadow: 0 0 30px rgb(90 167 255 / 0.35);
}

.hover\:shadow-glow:hover {
  box-shadow: 0 0 30px rgb(90 167 255 / 0.35);
}

.bg-base-950 {
  background-color: var(--x-base-950);
}
.bg-base-900 {
  background-color: var(--x-base-900);
}

.bg-base-900\/40 {
  background-color: rgb(17 18 20 / 0.4);
}
.bg-base-900\/50 {
  background-color: rgb(17 18 20 / 0.5);
}
.bg-base-900\/60 {
  background-color: rgb(17 18 20 / 0.6);
}
.bg-base-900\/70 {
  background-color: rgb(17 18 20 / 0.7);
}
.bg-base-900\/80 {
  background-color: rgb(17 18 20 / 0.8);
}
.bg-base-900\/90 {
  background-color: rgb(17 18 20 / 0.9);
}
.bg-base-900\/95 {
  background-color: rgb(17 18 20 / 0.95);
}

.bg-base-950\/40 {
  background-color: rgb(11 11 13 / 0.4);
}
.bg-base-950\/50 {
  background-color: rgb(11 11 13 / 0.5);
}
.bg-base-950\/60 {
  background-color: rgb(11 11 13 / 0.6);
}
.bg-base-950\/70 {
  background-color: rgb(11 11 13 / 0.7);
}
.bg-base-950\/80 {
  background-color: rgb(11 11 13 / 0.8);
}
.bg-base-950\/95 {
  background-color: rgb(11 11 13 / 0.95);
}

.bg-accent-400 {
  background-color: var(--x-accent-400);
}
.bg-accent-500 {
  background-color: var(--x-accent-500);
}
.bg-accent-500\/10 {
  background-color: rgb(76 155 255 / 0.1);
}
.bg-accent-500\/15 {
  background-color: rgb(76 155 255 / 0.15);
}
.bg-accent-500\/20 {
  background-color: rgb(76 155 255 / 0.2);
}
.bg-accent-600\/10 {
  background-color: rgb(47 123 255 / 0.1);
}

.text-accent-100 {
  color: var(--x-accent-100);
}
.text-accent-200 {
  color: var(--x-accent-200);
}
.text-accent-300 {
  color: var(--x-accent-300);
}
.text-accent-400 {
  color: var(--x-accent-400);
}

.border-accent-400\/30 {
  border-color: rgb(90 167 255 / 0.3);
}
.border-accent-400\/40 {
  border-color: rgb(90 167 255 / 0.4);
}
.border-accent-400\/90 {
  border-color: rgb(90 167 255 / 0.9);
}
.border-accent-500\/40 {
  border-color: rgb(76 155 255 / 0.4);
}

.hover\:bg-accent-400:hover {
  background-color: var(--x-accent-400);
}
.hover\:bg-accent-500\/30:hover {
  background-color: rgb(76 155 255 / 0.3);
}
.hover\:text-accent-300:hover {
  color: var(--x-accent-300);
}

.focus\:border-accent-400:focus {
  border-color: var(--x-accent-400);
}

.focus-visible\:ring-accent-400:focus-visible {
  --tw-ring-color: rgb(90 167 255 / 1);
}

.focus-visible\:ring-offset-base-950:focus-visible {
  --tw-ring-offset-color: var(--x-base-950);
}

/* Gradient stop helpers */
.from-accent-500\/20 {
  --tw-gradient-from: rgb(76 155 255 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(76 155 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-base-950\/80 {
  --tw-gradient-from: rgb(11 11 13 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(11 11 13 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-base-900 {
  --tw-gradient-to: rgb(17 18 20 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
    var(--tw-gradient-from), #111214 var(--tw-gradient-via-position),
    var(--tw-gradient-to);
}

.via-base-950\/30 {
  --tw-gradient-to: rgb(11 11 13 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
    var(--tw-gradient-from),
    rgb(11 11 13 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-accent-500\/10 {
  --tw-gradient-to: rgb(76 155 255 / 0.1) var(--tw-gradient-to-position);
}

.to-base-950 {
  --tw-gradient-to: #0b0b0d var(--tw-gradient-to-position);
}

/* --- Mapa actividad XENTRY (MapLibre) --- */
/* Atribución legal va en texto bajo el mapa (index); ocultar control flotante del canvas. */
#xentry-activity-map .maplibregl-ctrl-attrib,
#xentry-activity-map .maplibregl-ctrl-logo {
  display: none !important;
}

@keyframes xentryPulse {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.85);
    opacity: 0;
  }
}

.xentry-marker {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transform-origin: center;
  transition: transform 0.2s ease;
}

.xentry-marker:hover,
.xentry-marker:focus-visible {
  transform: scale(1.08);
  outline: none;
}

.xentry-marker__dot {
  position: absolute;
  inset: 8px;
  background: #00f5a0;
  border-radius: 999px;
  box-shadow:
    0 0 18px rgba(0, 245, 160, 0.75),
    0 0 6px rgba(76, 155, 255, 0.45);
  z-index: 2;
}

.xentry-marker__pulse {
  position: absolute;
  inset: 0;
  background: rgba(0, 245, 160, 0.22);
  border-radius: 999px;
  animation: xentryPulse 1.8s ease-out infinite;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .xentry-marker__pulse {
    animation: none;
    opacity: 0.35;
    transform: scale(1.15);
  }

  .xentry-marker:hover,
  .xentry-marker:focus-visible {
    transform: none;
  }
}

@media (max-width: 639px) {
  .xentry-marker {
    width: 24px;
    height: 24px;
  }

  .xentry-marker__dot {
    inset: 7px;
  }

  .xentry-map-popup-inner {
    max-width: 240px;
  }
}

.maplibregl-popup.xentry-map-popup .maplibregl-popup-content {
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 14px;
  box-shadow: none;
}

.maplibregl-popup.xentry-map-popup .maplibregl-popup-close-button {
  color: rgba(255, 255, 255, 0.65);
  font-size: 20px;
  line-height: 1;
  padding: 6px 8px;
  right: 4px;
  top: 4px;
}

.maplibregl-popup.xentry-map-popup .maplibregl-popup-close-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.xentry-map-popup-inner {
  padding: 14px 16px 14px;
  max-width: 260px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(17, 18, 20, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-family:
    Inter,
    "SF Pro Display",
    system-ui,
    sans-serif;
}

.xentry-map-popup-inner__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #f8fafc;
  letter-spacing: 0.01em;
}

.xentry-map-popup-inner__meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(148, 163, 184, 0.95);
}

.xentry-map-popup-inner__row {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.xentry-map-popup-inner__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #00f5a0;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 245, 160, 0.12);
  border: 1px solid rgba(0, 245, 160, 0.28);
}

.xentry-map-popup-inner__type {
  font-size: 11px;
  color: rgba(203, 213, 225, 0.9);
}

.xentry-map-popup-inner__note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(186, 198, 216, 0.95);
}

.xentry-map-popup-inner__cta {
  display: inline-flex;
  margin-top: 12px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: #0b0b0d;
  background: linear-gradient(135deg, #5aa7ff, #4c9bff);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.xentry-map-popup-inner__cta:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}