/* ============================================
   MODO RADAR - LUUPIGO
   Archivo: assets/css/modo-radar.css

   VERSIÓN EXTRA PRO — iOS / Glass Premium
   - PWA mobile first
   - Bottom sheet estilo app nativa
   - Glassmorphism premium
   - Compatible con:
     #panel-avistamientos-cercanos
     #contenedor-modo-radar
   - Alineado con modo-radar.js / ui-shell-mapa.js
   - ORQUESTADO CON: notificaciones.css, modo-paseante.css, alertas.css
   ============================================ */

/* ============================================
   VARIABLES Y JERARQUÍA Z-INDEX
   ============================================ */
:root {
  /* Colores y efectos visuales */
  --radar-overlay-bg: rgba(6, 12, 22, 0.48);
  --radar-panel-bg: rgba(255, 255, 255, 0.78);
  --radar-panel-bg-strong: rgba(255, 255, 255, 0.9);
  --radar-panel-border: rgba(255, 255, 255, 0.36);
  --radar-panel-blur: blur(34px) saturate(210%);
  --radar-panel-radius: 34px 34px 0 0;
  --radar-panel-shadow: 0 -24px 60px rgba(15, 23, 42, 0.16),
                        0 -2px 0 rgba(255, 255, 255, 0.35) inset,
                        0 1px 0 rgba(255, 255, 255, 0.22) inset;

  --radar-card-bg: rgba(255, 255, 255, 0.58);
  --radar-card-bg-hover: rgba(255, 255, 255, 0.76);
  --radar-card-border: rgba(15, 23, 42, 0.06);
  --radar-card-shadow: 0 10px 30px rgba(15, 23, 42, 0.08),
                       0 1px 0 rgba(255, 255, 255, 0.22) inset;

  --radar-text-primary: #102033;
  --radar-text-secondary: #617086;
  --radar-text-soft: #8c98ab;

  --radar-accent: #10b981;
  --radar-accent-strong: #059669;
  --radar-accent-soft: rgba(16, 185, 129, 0.14);

  --radar-primary-chip: rgba(91, 103, 242, 0.1);
  --radar-success-soft: #d1fae5;
  --radar-warning-soft: #fef3c7;
  --radar-danger-soft: #fee2e2;

  --radar-success-text: #065f46;
  --radar-warning-text: #92400e;
  --radar-danger-text: #991b1b;

  --radar-close-bg: rgba(15, 23, 42, 0.06);
  --radar-close-border: rgba(15, 23, 42, 0.06);
  --radar-divider: rgba(15, 23, 42, 0.08);
  --radar-btn-shadow: 0 12px 24px rgba(16, 185, 129, 0.22);

  /* Transiciones */
  --radar-transition-fast: 0.22s cubic-bezier(0.2, 0.9, 0.4, 1);
  --radar-transition-panel: 0.4s cubic-bezier(0.2, 0.9, 0.4, 1);
  --radar-transition-soft: 0.3s ease;

  /* ============================================
     JERARQUÍA Z-INDEX (ORQUESTADA CON OTROS MÓDULOS)
     Nivel 1: Alertas críticas/urgentes - 10000
     Nivel 2: Modales (confirmación, alertas push) - 9999
     Nivel 3: Modo Radar/Paseante (overlays principales) - 9998
     Nivel 4: Banners (PWA, iOS, modo paseante activo) - 9997
     Nivel 5: Notificaciones flotantes - 9996
     Nivel 6: Toasts y feedback temporal - 9995
     Nivel 7: Offline indicator - 9994
     ============================================ */
  --z-radar-overlay: 9998;
  --z-radar-panel: 9999;
}

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
  :root {
    --radar-overlay-bg: rgba(2, 8, 16, 0.58);
    --radar-panel-bg: rgba(10, 18, 30, 0.78);
    --radar-panel-bg-strong: rgba(10, 18, 30, 0.9);
    --radar-panel-border: rgba(255, 255, 255, 0.08);
    --radar-panel-shadow: 0 -24px 60px rgba(0, 0, 0, 0.36),
                          0 -1px 0 rgba(255, 255, 255, 0.05) inset,
                          0 1px 0 rgba(255, 255, 255, 0.03) inset;
    --radar-card-bg: rgba(21, 31, 47, 0.62);
    --radar-card-bg-hover: rgba(27, 40, 60, 0.78);
    --radar-card-border: rgba(255, 255, 255, 0.08);
    --radar-card-shadow: 0 14px 30px rgba(0, 0, 0, 0.22),
                         0 1px 0 rgba(255, 255, 255, 0.03) inset;
    --radar-text-primary: #f4f7fb;
    --radar-text-secondary: #cad4e0;
    --radar-text-soft: #94a4b8;
    --radar-primary-chip: rgba(130, 145, 255, 0.14);
    --radar-close-bg: rgba(255, 255, 255, 0.06);
    --radar-close-border: rgba(255, 255, 255, 0.06);
    --radar-divider: rgba(255, 255, 255, 0.08);
  }
}

/* ============================================
   BODY LOCK (cuando el radar está abierto)
   ============================================ */
body.luupigo-radar-open {
  overflow: hidden;
  overscroll-behavior: contain;
}

body.luupigo-radar-open .menu-inferior {
  pointer-events: none;
}

body.luupigo-radar-open #contenedor-modo-radar,
body.luupigo-radar-open #panel-avistamientos-cercanos,
body.luupigo-radar-open .radar-overlay {
  pointer-events: auto;
}

/* ============================================
   OVERLAY (fondo semitransparente)
   ============================================ */
.radar-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-radar-overlay);
  background: linear-gradient(
    to top,
    rgba(8, 14, 24, 0.64) 0%,
    rgba(8, 14, 24, 0.4) 45%,
    rgba(8, 14, 24, 0.24) 100%
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.radar-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ============================================
   PANEL PRINCIPAL (BOTTOM SHEET)
   ============================================ */
#contenedor-modo-radar,
#panel-avistamientos-cercanos {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height: 300px;
  max-height: min(90vh, 920px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: var(--z-radar-panel);
  padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px)) 14px;
  background: var(--radar-panel-bg);
  border: 1px solid var(--radar-panel-border);
  backdrop-filter: var(--radar-panel-blur);
  -webkit-backdrop-filter: var(--radar-panel-blur);
  border-radius: var(--radar-panel-radius);
  box-shadow: var(--radar-panel-shadow);
  color: var(--radar-text-primary);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
  isolation: isolate;
  contain: layout paint style;
  transition: transform var(--radar-transition-panel),
              opacity 0.28s ease,
              visibility 0.28s ease;
}

/* Barra indicadora superior (drag handle) */
#contenedor-modo-radar::before,
#panel-avistamientos-cercanos::before {
  content: "";
  display: block;
  width: 54px;
  height: 5px;
  border-radius: 999px;
  margin: 2px auto 14px auto;
  background: linear-gradient(
    90deg,
    rgba(140, 152, 171, 0.2),
    rgba(140, 152, 171, 0.5),
    rgba(140, 152, 171, 0.2)
  );
}

/* Efecto glass shine superior */
#contenedor-modo-radar::after,
#panel-avistamientos-cercanos::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at top center, rgba(255, 255, 255, 0.18), transparent 38%),
              linear-gradient(to bottom, rgba(255, 255, 255, 0.08), transparent 18%);
  opacity: 0.9;
}

/* Estado activo del panel */
#contenedor-modo-radar.activo,
#panel-avistamientos-cercanos.activo {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Estado oculto por ARIA */
#contenedor-modo-radar[aria-hidden="true"],
#panel-avistamientos-cercanos[aria-hidden="true"] {
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ============================================
   HEADER DEL PANEL
   ============================================ */
.radar-header,
.panel-avistamientos-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 4px 4px 14px 4px;
  border-bottom: 1px solid var(--radar-divider);
  background: linear-gradient(
    to bottom,
    var(--radar-panel-bg-strong) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.radar-header h3,
.panel-avistamientos-header h2 {
  margin: 0;
  font-size: 1.14rem;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--radar-text-primary);
}

.panel-avistamientos-header .panel-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.panel-icono {
  font-size: 1.48rem;
  filter: drop-shadow(0 6px 12px rgba(16, 185, 129, 0.2));
}

/* ============================================
   BOTÓN CERRAR
   ============================================ */
.btn-cerrar-radar,
.btn-cerrar-panel,
#cerrar-modo-radar,
#cerrar-avistamientos-cercanos {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid var(--radar-close-border);
  border-radius: 999px;
  background: var(--radar-close-bg);
  color: var(--radar-text-secondary);
  font-size: 1.34rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06),
              0 1px 0 rgba(255, 255, 255, 0.18) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--radar-transition-fast),
              background var(--radar-transition-fast),
              color var(--radar-transition-fast),
              border-color var(--radar-transition-fast),
              box-shadow var(--radar-transition-fast);
}

.btn-cerrar-radar:hover,
.btn-cerrar-panel:hover,
#cerrar-modo-radar:hover,
#cerrar-avistamientos-cercanos:hover {
  transform: scale(1.05);
  background: rgba(16, 185, 129, 0.12);
  color: var(--radar-text-primary);
  border-color: rgba(16, 185, 129, 0.18);
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08),
              0 1px 0 rgba(255, 255, 255, 0.18) inset;
}

/* ============================================
   LISTA DE AVISTAMIENTOS
   ============================================ */
#lista-animales-radar,
#lista-avistamientos-cercanos {
  position: relative;
  z-index: 2;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 4px;
}

/* ============================================
   TARJETA DE AVISTAMIENTO (FICHA)
   ============================================ */
.ficha-radar {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 12px;
  margin: 0;
  background: var(--radar-card-bg);
  border: 1px solid var(--radar-card-border);
  border-radius: 24px;
  box-shadow: var(--radar-card-shadow);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  transition: transform var(--radar-transition-fast),
              background var(--radar-transition-fast),
              border-color var(--radar-transition-fast),
              box-shadow var(--radar-transition-fast);
  overflow: hidden;
}

/* Efecto de brillo interno en la tarjeta */
.ficha-radar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0) 24%
  );
}

.ficha-radar:hover {
  transform: translateY(-2px);
  background: var(--radar-card-bg-hover);
  border-color: rgba(16, 185, 129, 0.16);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12),
              0 1px 0 rgba(255, 255, 255, 0.22) inset;
}

/* Imagen del animal */
.imagen-radar {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 20px;
  background: #dbe4ee;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08),
              0 1px 0 rgba(255, 255, 255, 0.28) inset;
}

/* Contenido textual de la tarjeta */
.contenido-radar {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.contenido-radar h3 {
  margin: 0 0 6px 0;
  font-size: 1rem;
  line-height: 1.24;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--radar-text-primary);
}

.ubicacion-radar {
  margin: 0 0 10px 0;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--radar-text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.ubicacion-radar::before {
  content: "📍";
  font-size: 0.82rem;
  margin-top: 1px;
}

/* ============================================
   METADATOS (tiempo, distancia)
   ============================================ */
.meta-radar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.78rem;
}

.tiempo-radar,
.distancia-radar,
.distancia-publicacion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: -0.01em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

.tiempo-radar {
  background: rgba(15, 23, 42, 0.05);
  color: var(--radar-text-secondary);
}

.tiempo-radar.fresco {
  background: var(--radar-success-soft);
  color: var(--radar-success-text);
}

.tiempo-radar.intermedio {
  background: var(--radar-warning-soft);
  color: var(--radar-warning-text);
}

.tiempo-radar.antiguo {
  background: var(--radar-danger-soft);
  color: var(--radar-danger-text);
}

.distancia-radar,
.distancia-publicacion {
  background: var(--radar-primary-chip);
  color: var(--radar-text-secondary);
}

.distancia-radar::before {
  content: "📏";
  font-size: 0.75rem;
}

/* ============================================
   BOTONES DE ACCIÓN (confirmar/rechazar)
   ============================================ */
.confirmacion-avistamiento {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 2px;
}

.btn-confirmar-avistamiento,
.btn-rechazar-avistamiento {
  flex: 1 1 0;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 16px;
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: -0.015em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: transform var(--radar-transition-fast),
              background var(--radar-transition-fast),
              color var(--radar-transition-fast),
              box-shadow var(--radar-transition-fast),
              border-color var(--radar-transition-fast);
}

.btn-confirmar-avistamiento {
  border: none;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 35%),
              linear-gradient(135deg, var(--radar-accent), var(--radar-accent-strong));
  box-shadow: var(--radar-btn-shadow),
              0 1px 0 rgba(255, 255, 255, 0.14) inset;
}

.btn-confirmar-avistamiento:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(16, 185, 129, 0.28),
              0 1px 0 rgba(255, 255, 255, 0.14) inset;
}

.btn-rechazar-avistamiento {
  border: 1px solid var(--radar-card-border);
  background: rgba(15, 23, 42, 0.04);
  color: var(--radar-text-secondary);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.03),
              0 1px 0 rgba(255, 255, 255, 0.14) inset;
}

.btn-rechazar-avistamiento:hover {
  transform: translateY(-1px);
  background: rgba(15, 23, 42, 0.08);
  color: var(--radar-text-primary);
}

/* ============================================
   ESTADOS (cargando, error, sin resultados)
   ============================================ */
.cargando,
.error,
.sin-resultados {
  text-align: center;
  padding: 24px 18px;
  margin: 2px 0 8px 0;
  font-size: 0.98rem;
  border-radius: 24px;
  color: var(--radar-text-secondary);
  background: var(--radar-card-bg);
  border: 1px solid var(--radar-card-border);
  box-shadow: var(--radar-card-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.cargando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cargando::before {
  content: "";
  width: 40px;
  height: 40px;
  border: 3px solid rgba(16, 185, 129, 0.16);
  border-top-color: var(--radar-accent);
  border-radius: 50%;
  animation: radarSpin 0.85s linear infinite;
}

.error {
  color: var(--radar-danger-text);
  background: rgba(239, 68, 68, 0.08);
}

.sin-resultados {
  background: rgba(255, 255, 255, 0.26);
  border: 1px dashed var(--radar-card-border);
}

@keyframes radarSpin {
  to { transform: rotate(360deg); }
}

/* ============================================
   BOTÓN LEGACY (abrir modo radar)
   ============================================ */
#btn-abrir-modo-radar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 900;
  font-size: 0.92rem;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 35%),
              linear-gradient(135deg, var(--radar-accent), var(--radar-accent-strong));
  box-shadow: 0 14px 28px rgba(16, 185, 129, 0.24),
              0 1px 0 rgba(255, 255, 255, 0.14) inset;
  transition: transform var(--radar-transition-fast),
              box-shadow var(--radar-transition-fast);
}

#btn-abrir-modo-radar:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(16, 185, 129, 0.3),
              0 1px 0 rgba(255, 255, 255, 0.14) inset;
}

/* ============================================
   RESPONSIVE: MÓVIL (max-width: 640px)
   ============================================ */
@media (max-width: 640px) {
  #contenedor-modo-radar,
  #panel-avistamientos-cercanos {
    padding: 12px 12px calc(18px + env(safe-area-inset-bottom, 0px)) 12px;
    border-radius: 30px 30px 0 0;
    max-height: 91vh;
  }

  #contenedor-modo-radar::before,
  #panel-avistamientos-cercanos::before {
    margin-bottom: 12px;
  }

  .radar-header,
  .panel-avistamientos-header {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  .radar-header h3,
  .panel-avistamientos-header h2 {
    font-size: 1.08rem;
  }

  .ficha-radar {
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 22px;
  }

  .imagen-radar {
    width: 100%;
    height: 178px;
    border-radius: 18px;
  }

  .contenido-radar h3 {
    font-size: 1.03rem;
  }

  .meta-radar {
    gap: 6px;
    margin-bottom: 10px;
  }

  .confirmacion-avistamiento {
    flex-direction: column;
    gap: 8px;
  }

  .btn-confirmar-avistamiento,
  .btn-rechazar-avistamiento {
    min-height: 50px;
    border-radius: 15px;
    font-size: 0.91rem;
  }
}

/* ============================================
   RESPONSIVE: TABLET (641px - 1024px)
   ============================================ */
@media (min-width: 641px) and (max-width: 1024px) {
  #contenedor-modo-radar,
  #panel-avistamientos-cercanos {
    left: 50%;
    right: auto;
    width: min(92%, 560px);
    max-width: 560px;
    transform: translate(-50%, 100%);
    border-radius: 34px 34px 0 0;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)) 16px;
  }

  #contenedor-modo-radar.activo,
  #panel-avistamientos-cercanos.activo {
    transform: translate(-50%, 0);
  }

  #contenedor-modo-radar[aria-hidden="true"],
  #panel-avistamientos-cercanos[aria-hidden="true"] {
    transform: translate(-50%, 100%);
  }
}

/* ============================================
   RESPONSIVE: DESKTOP (min-width: 1025px)
   ============================================ */
@media (min-width: 1025px) {
  #contenedor-modo-radar,
  #panel-avistamientos-cercanos {
    left: 50%;
    right: auto;
    width: min(92vw, 600px);
    max-width: 600px;
    transform: translate(-50%, 100%);
    border-radius: 34px 34px 0 0;
    padding: 18px 18px 20px 18px;
  }

  #contenedor-modo-radar.activo,
  #panel-avistamientos-cercanos.activo {
    transform: translate(-50%, 0);
  }

  #contenedor-modo-radar[aria-hidden="true"],
  #panel-avistamientos-cercanos[aria-hidden="true"] {
    transform: translate(-50%, 100%);
  }
}

/* ============================================
   MODO PWA (body.pwa-mode)
   ============================================ */
body.pwa-mode .radar-overlay {
  background: linear-gradient(
    to top,
    rgba(4, 8, 16, 0.72) 0%,
    rgba(4, 8, 16, 0.46) 45%,
    rgba(4, 8, 16, 0.24) 100%
  );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.pwa-mode #contenedor-modo-radar,
body.pwa-mode #panel-avistamientos-cercanos {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(38px) saturate(220%);
  -webkit-backdrop-filter: blur(38px) saturate(220%);
  border-radius: 36px 36px 0 0;
  box-shadow: 0 -26px 60px rgba(15, 23, 42, 0.18),
              0 -1px 0 rgba(255, 255, 255, 0.48) inset,
              0 1px 0 rgba(255, 255, 255, 0.18) inset;
}

body.pwa-mode .ficha-radar {
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}

body.pwa-mode .btn-confirmar-avistamiento {
  box-shadow: 0 16px 30px rgba(16, 185, 129, 0.26),
              0 1px 0 rgba(255, 255, 255, 0.16) inset;
}

/* Modo oscuro dentro de PWA */
@media (prefers-color-scheme: dark) {
  body.pwa-mode #contenedor-modo-radar,
  body.pwa-mode #panel-avistamientos-cercanos {
    background: rgba(8, 14, 24, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -26px 60px rgba(0, 0, 0, 0.36),
                0 -1px 0 rgba(255, 255, 255, 0.05) inset,
                0 1px 0 rgba(255, 255, 255, 0.02) inset;
  }

  body.pwa-mode .ficha-radar {
    background: rgba(21, 31, 47, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* ============================================
   ORQUESTACIÓN CON OTROS MÓDULOS
   ============================================ */
/* Cuando el modo paseante está activo, el radar debe respetar su espacio */
body.modo-paseante-activo #contenedor-modo-radar,
body.modo-paseante-activo #panel-avistamientos-cercanos {
  bottom: 80px; /* Espacio para el banner de modo paseante */
}

/* Cuando hay una alerta urgente, el radar no debe solaparla */
.alerta-urgente ~ #contenedor-modo-radar,
.alerta-urgente ~ #panel-avistamientos-cercanos {
  top: 60px; /* Espacio para la alerta urgente */
}

/* Evitar conflictos con notificaciones flotantes */
body:not(.luupigo-radar-open) .notificacion-flotante,
body:not(.luupigo-radar-open) .toast-luupigo {
  z-index: 9996; /* Por debajo del radar cuando está cerrado */
}

body.luupigo-radar-open .notificacion-flotante,
body.luupigo-radar-open .toast-luupigo {
  z-index: 9994; /* Por debajo del overlay del radar */
}

/* ============================================
   ACCESIBILIDAD (reducir movimiento)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .radar-overlay,
  #contenedor-modo-radar,
  #panel-avistamientos-cercanos,
  .ficha-radar,
  .btn-confirmar-avistamiento,
  .btn-rechazar-avistamiento,
  #btn-abrir-modo-radar {
    animation: none;
    transition: none;
  }


/* ============================================
   FOCUS VISIBLE (accesibilidad teclado)
   ============================================ */
.btn-cerrar-radar:focus-visible,
.btn-cerrar-panel:focus-visible,
#cerrar-modo-radar:focus-visible,
#cerrar-avistamientos-cercanos:focus-visible,
.btn-confirmar-avistamiento:focus-visible,
.btn-rechazar-avistamiento:focus-visible,
#btn-abrir-modo-radar:focus-visible,
.ficha-radar:focus-visible {
  outline: 2px solid var(--radar-accent);
  outline-offset: 2px;
} }

/* =========================================================
   RADAR CONTEXTUAL
   Radar deja de ser navegación principal
   ========================================================= */

.radar-contextual-hidden {
  display: none !important;
}