@import url('./design-tokens.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   COLMENA SEGURA - DUAL VIEW (DESKTOP WORKSTATION & MOBILE PWA)
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Custom Tactical Glass Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 210, 255, 0.45);
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) rgba(0, 0, 0, 0.25);
}

html, body.citizen-body {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-display);
}

/* Master Viewport Container */
.app-viewport {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background-color: var(--bg-secondary);
}

/* ==========================================================================
   TOP UNIVERSAL HEADER (RESPONSIVE)
   ========================================================================== */
.app-header {
  height: clamp(54px, 8vh, 60px);
  min-height: 54px;
  padding: 0 clamp(10px, 2vw, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-glass);
  z-index: 1000;
  flex-shrink: 0;
}

.brand-wrapper {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 12px);
  min-width: 0;
  flex-shrink: 0;
}

.brand-squircle-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #0e1626;
  border: 1.5px solid #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
  flex-shrink: 0;
}

.brand-icon-hive {
  font-size: 1.25rem;
  filter: drop-shadow(0 0 6px rgba(255, 184, 0, 0.6));
}

.brand-text-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-beja-title {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #f59e0b;
  line-height: 1;
  font-family: var(--font-display);
}

.brand-title {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #f59e0b;
  line-height: 1.1;
  white-space: nowrap;
}

.brand-subtitle-desktop {
  font-size: 0.55rem;
  color: #94a3b8;
  letter-spacing: 0.8px;
  font-family: var(--font-mono);
  font-weight: 600;
  display: block;
}

/* Centered Interactive Search Bar (Camino a Casa / Destino) */
.header-search-wrapper {
  flex: 1 1 0;
  max-width: 440px;
  min-width: 140px;
  margin: 0 clamp(6px, 1.8vw, 16px);
  display: flex;
  align-items: center;
}

.header-search-box {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-full);
  padding: 3px 8px 3px 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.2s ease;
}

.header-search-box:focus-within, .header-search-box:hover {
  border-color: #f59e0b;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.25);
  background: rgba(15, 23, 42, 0.95);
}

.header-search-icon {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-right: 8px;
  flex-shrink: 0;
}

.header-search-input {
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 0.82rem;
  font-family: var(--font-display);
  font-weight: 500;
  outline: none;
}

.header-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.header-search-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f59e0b;
  color: #070a12;
  border: none;
  font-weight: 800;
  font-size: 0.72rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.header-search-btn:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}

/* Desktop Navigation Tabs (Preserved for compatibility) */
.desktop-nav-tabs {
  display: none !important;
}

.desktop-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-fast);
}

.desktop-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.desktop-tab-btn.active {
  background: var(--color-safe);
  color: #06111a;
  box-shadow: var(--shadow-neon-cyan);
}

.desktop-tab-btn[data-tab="report"].active {
  background: var(--color-critical);
  color: #fff;
  box-shadow: var(--shadow-neon-red);
}

/* Version Badge next to Beja Logo (Mockup: COLMENA v2.4) */
.brand-version-badge {
  display: none;
  align-items: center;
  padding: 3px 8px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 6px;
  color: #f59e0b;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  font-family: var(--font-mono);
  white-space: nowrap;
  user-select: none;
}

/* Wide Search Bar for Desktop (Mockup: Buscar destinos, barrios o direcciones seguras...) */
.desktop-wide-search {
  max-width: 540px !important;
  height: 40px !important;
}

.desktop-wide-search .header-search-input {
  font-size: 0.85rem !important;
}

/* Desktop Header Navigation Links (Mockup: Mapa, Alertas, Comunidad) */
.desktop-header-nav {
  display: none;
  align-items: center;
  gap: 28px;
  margin: 0 16px;
}

.header-nav-link {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 4px;
  position: relative;
  transition: all 0.2s ease;
  font-family: var(--font-display);
}

.header-nav-link:hover {
  color: #fff;
}

.header-nav-link.active {
  color: #f59e0b;
  font-weight: 800;
}

.header-nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #f59e0b;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

/* Notification Bell Button (Mockup) */
.header-bell-btn {
  display: none;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.header-bell-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #f59e0b;
  color: #f59e0b;
  transform: scale(1.05);
}

.bell-alert-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff3366;
  box-shadow: 0 0 8px #ff3366;
}

/* Header Right Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.2vw, 8px);
  flex-shrink: 0;
}

.gps-pill {
  font-size: clamp(0.6rem, 1.8vw, 0.68rem);
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 4px clamp(6px, 1.5vw, 10px);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.gps-active {
  background: rgba(0, 245, 160, 0.15);
  color: var(--color-safe);
  border: 1px solid rgba(0, 245, 160, 0.4);
  box-shadow: 0 0 8px rgba(0, 245, 160, 0.2);
}

.gps-manual {
  background: rgba(0, 210, 255, 0.15);
  color: var(--color-info);
  border: 1px solid rgba(0, 210, 255, 0.4);
}

.btn-header-link {
  font-size: clamp(0.68rem, 1.9vw, 0.75rem);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-info);
  background: rgba(0, 210, 255, 0.12);
  padding: 6px clamp(8px, 1.8vw, 12px);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 210, 255, 0.3);
  transition: var(--transition-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-header-link:hover {
  background: rgba(0, 210, 255, 0.25);
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.4);
}

.btn-label-mobile {
  display: none;
}

@media (max-width: 600px) {
  .btn-label-desktop {
    display: none;
  }
  .btn-label-mobile {
    display: inline;
  }
  .gps-coords-text {
    display: none;
  }
}

/* Geofence Proximity Warning Banner */
.geofence-banner {
  position: absolute;
  top: 68px;
  left: clamp(10px, 2vw, 18px);
  right: clamp(10px, 2vw, 18px);
  z-index: 2000;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  animation: slide-up 0.3s ease-out;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.geofence-banner.hidden { display: none !important; }

.banner-warning {
  background: rgba(255, 184, 0, 0.95);
  color: #0b0f19;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.banner-critical {
  background: rgba(255, 42, 85, 0.98);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: var(--shadow-neon-red);
}

.banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.banner-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.banner-text {
  min-width: 0;
}

.banner-text strong {
  display: block;
  font-size: clamp(0.78rem, 2.2vw, 0.88rem);
  line-height: 1.2;
}

.banner-text span {
  font-size: clamp(0.68rem, 1.8vw, 0.75rem);
  opacity: 0.9;
}

.banner-dismiss-btn {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  opacity: 0.75;
  transition: opacity var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.banner-dismiss-btn:hover {
  opacity: 1;
}

/* ==========================================================================
   MAIN DUAL WORKSPACE
   ========================================================================== */
.app-main-workspace {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.app-sidebar-panels {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--bg-secondary);
}

.app-map-canvas-pane {
  position: relative;
  width: 100%;
  height: 100%;
  background: #0b1120;
}

#citizen-map {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0;
  z-index: 10;
}

/* ==========================================================================
   MODERN FULL-SCREEN MAP VIEWPORT & FLOATING DRAWER OVERLAY
   ========================================================================== */

/* Drawer Top Bar with Close Button */
.sidebar-drawer-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(11, 16, 29, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.drawer-panel-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #f59e0b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-drawer-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-drawer-close:hover {
  background: rgba(255, 51, 102, 0.25);
  border-color: #ff3366;
  color: #ff3366;
  transform: scale(1.08);
}

@media (min-width: 900px) {
  .app-main-workspace {
    position: relative;
    width: 100%;
    height: calc(100% - 60px - 42px);
    display: block;
    overflow: hidden;
  }

  .app-map-canvas-pane {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10;
  }

  .app-sidebar-panels {
    position: absolute;
    top: 14px;
    bottom: 48px;
    left: 18px;
    width: 440px;
    max-width: calc(100vw - 36px);
    z-index: 40;
    border-radius: 20px;
    background: rgba(11, 16, 29, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(245, 158, 11, 0.25);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    overflow-y: auto;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  }

  .app-sidebar-panels.drawer-collapsed {
    transform: translateX(calc(-100% - 30px));
    opacity: 0;
    pointer-events: none;
  }

  /* Desktop Header & Floating Elements Activation */
  .brand-version-badge {
    display: inline-flex !important;
  }

  .desktop-header-nav {
    display: flex !important;
  }

  .header-bell-btn {
    display: flex !important;
  }

  .floating-geo-pill {
    display: flex !important;
  }

  #floating-desktop-metrics {
    display: flex !important;
  }

  #desktop-map-controls {
    display: flex !important;
  }

  #desktop-map-legend {
    display: flex !important;
  }

  #desktop-direct-c2-block {
    display: flex !important;
  }

  #app-desktop-footer {
    display: flex !important;
  }

  /* Desktop Position for Floating Incident Card */
  .floating-incident-card {
    bottom: 24px !important;
    left: 24px !important;
    transform: none !important;
    width: 390px !important;
    max-width: 420px !important;
  }

  /* Hide Mobile Bottom Nav Bar on Desktop (Replaced by Top Nav & Bottom-Right SOS) */
  .bottom-nav-bar {
    display: none !important;
  }
}

@media (max-width: 899px) {
  .app-main-workspace {
    position: relative;
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    display: block;
    overflow: hidden;
  }

  .app-map-canvas-pane {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 10;
    width: 100% !important;
    height: 100% !important;
  }

  /* Mobile Bottom Sheet Drawer */
  .app-sidebar-panels {
    position: absolute !important;
    bottom: 64px !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-height: 75vh !important;
    z-index: 40 !important;
    border-radius: 24px 24px 0 0 !important;
    background: rgba(11, 16, 29, 0.96) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: none !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.85) !important;
    overflow-y: auto !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .app-sidebar-panels.drawer-collapsed {
    transform: translateY(calc(100% + 20px)) !important;
    pointer-events: none !important;
  }

  /* Hide Desktop-Exclusive Layout Elements on Mobile */
  #app-desktop-footer,
  #desktop-map-legend,
  #desktop-direct-c2-block,
  #floating-geo-pill,
  .desktop-header-nav,
  .brand-version-badge,
  .header-bell-btn {
    display: none !important;
  }

  /* #floating-desktop-metrics contiene los botones "🔥 Capa de Calor" y "🛡️ Puntos Seguros": antes se
     ocultaba por completo en móvil (junto con el resto de la lista de arriba) sin dar ningún control
     equivalente para reemplazarlos, así que en celular esos dos botones no se "cortaban": de plano no
     existían. Se reubica compacto en la esquina y se oculta solo la píldora informativa de "Ruta Segura"
     (esa info ya se repite en la tarjeta de resultados de ruta) para no competir por espacio. */
  #floating-desktop-metrics {
    display: flex !important;
    top: 10px;
    right: 8px;
    gap: 6px;
  }
  .floating-top-metric-pill {
    display: none;
  }
  .top-layer-pill-btn {
    padding: 5px 9px;
    font-size: 0.68rem;
  }

  .bottom-nav-bar {
    display: flex !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important;
    background: rgba(8, 12, 22, 0.96) !important;
    backdrop-filter: blur(24px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    z-index: 50 !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* Mobile Position for Floating Incident Card */
  .floating-incident-card {
    bottom: 74px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 24px) !important;
    max-width: 440px !important;
  }

  /* Map Controls on Mobile */
  #desktop-map-controls {
    top: 66px !important;
    right: 12px !important;
    transform: none !important;
  }
}

/* ==========================================================================
   FLOATING ELEMENTS OVER MAP (MOCKUP ACCURACY)
   ========================================================================== */

/* Top-Left Floating Sector Pill Container & Geo Coordinates */
.floating-sector-badge-container {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}

.floating-sector-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(11, 16, 29, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #e2e8f0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  user-select: none;
  width: fit-content;
}

.badge-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00f5a0;
  box-shadow: 0 0 10px #00f5a0;
  animation: glow-badge 2s infinite ease-in-out;
  flex-shrink: 0;
}

.badge-sector-name {
  color: #fff;
  font-weight: 800;
}

.badge-sep {
  color: #64748b;
}

.badge-status-text {
  color: #00f5a0;
  font-weight: 600;
}

.badge-nodes-count {
  color: #94a3b8;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.2px;
}

.floating-geo-pill {
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(11, 16, 29, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: 0.68rem;
  color: #94a3b8;
  font-family: var(--font-mono);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  width: fit-content;
  user-select: none;
}

.geo-calibrated-text {
  color: #00f5a0;
  font-weight: 700;
}

/* Top-Right Floating Metrics & Layers Bar (Mockup Desktop) */
.floating-top-right-bar {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 25;
  display: none;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.floating-top-metric-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(11, 16, 29, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 245, 160, 0.35);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 0.78rem;
  color: #e2e8f0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  user-select: none;
}

.route-safety-score {
  color: #00f5a0;
  font-weight: 800;
}

.floating-top-layers-group {
  display: flex;
  align-items: center;
  background: rgba(11, 16, 29, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-full);
  padding: 3px 6px;
  gap: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.top-layer-pill-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  padding: 5px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.top-layer-pill-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.top-layer-pill-btn.active {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.4);
}

/* Right-Edge Vertical Map Controls (Mockup: +, -, North, GPS, Layers) */
.desktop-vertical-map-tools {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(11, 16, 29, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}

.vert-tool-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.vert-tool-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f59e0b;
}

.vert-tool-btn:active {
  transform: scale(0.92);
}

.map-top-right-tools {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.map-tool-circle-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(11, 16, 29, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}

.map-tool-circle-btn:hover {
  transform: scale(1.08);
  border-color: #f59e0b;
  color: #fff;
  background: rgba(15, 23, 42, 0.98);
}

.floating-layer-menu {
  position: absolute;
  top: 50px;
  right: 0;
  width: 170px;
  background: rgba(11, 16, 29, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.layer-menu-title {
  font-size: 0.68rem;
  font-weight: 800;
  color: #f59e0b;
  text-transform: uppercase;
  margin-bottom: 2px;
  letter-spacing: 0.5px;
}

.layer-menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Floating Bottom Incident / Smart Avoidance Card */
.floating-incident-card {
  position: absolute;
  bottom: 86px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 440px;
  z-index: 30;
  background: rgba(11, 16, 29, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 20px;
  padding: 12px 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.25s ease;
  pointer-events: auto;
}

.incident-card-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.incident-card-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.incident-card-info {
  flex: 1 1 0;
  min-width: 0;
}

.incident-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

.incident-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
}

.incident-time-dot {
  color: #f59e0b;
  font-size: 0.75rem;
}

.incident-time {
  font-size: 0.72rem;
  color: #94a3b8;
  white-space: nowrap;
}

.incident-sub {
  font-size: 0.7rem;
  color: #94a3b8;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.incident-safety-badge {
  background: rgba(0, 245, 160, 0.14);
  border: 1px solid rgba(0, 245, 160, 0.4);
  color: #00f5a0;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Connected Neighbors & Sensors Cluster Row (Desktop Mockup) */
.incident-cluster-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.avatar-cluster {
  display: flex;
  align-items: center;
}

.cluster-avatar-mini {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #0b101d;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -6px;
}

.cluster-avatar-mini:first-child {
  margin-left: 0;
}

.cluster-more-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #334155;
  border: 1.5px solid #0b101d;
  color: #e2e8f0;
  font-size: 0.58rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -6px;
}

.cluster-info-text {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.cluster-info-text strong {
  font-size: 0.76rem;
  color: #fff;
  font-weight: 800;
}

.cluster-info-text span {
  font-size: 0.65rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cluster-dist-tag {
  font-size: 0.68rem;
  font-weight: 800;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 6px;
  padding: 3px 6px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

.incident-card-actions {
  display: flex;
  gap: 8px;
}

.btn-incident-route {
  flex: 1 1 0;
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
  color: #fff;
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 9px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-incident-route:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-incident-notify {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 9px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-incident-notify:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Desktop Map Legend Bar (Bottom Center Mockup) */
.desktop-map-legend-pill {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: rgba(11, 16, 29, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  padding: 6px 18px;
  display: none;
  align-items: center;
  gap: 18px;
  font-size: 0.74rem;
  color: #94a3b8;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  user-select: none;
  white-space: nowrap;
}

.legend-dot-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot-verified {
  background: #00f5a0;
  box-shadow: 0 0 8px #00f5a0;
}

.dot-assigned {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
}

.dot-preventive {
  background: #ff3366;
  box-shadow: 0 0 8px #ff3366;
}

/* Desktop Direct Dispatch Enlace & SOS Button (Bottom Right Mockup) */
.desktop-direct-c2-block {
  position: absolute;
  bottom: 18px;
  right: 24px;
  z-index: 25;
  display: none;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
}

.direct-c2-text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}

.direct-c2-label {
  font-size: 0.62rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.direct-c2-target {
  font-size: 0.85rem;
  font-weight: 800;
  color: #e2e8f0;
}

.desktop-sos-big-btn {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff4d79, #d80032 75%);
  border: 3px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(255, 51, 102, 0.55), 0 0 16px rgba(255, 51, 102, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease, box-shadow 0.2s ease;
}

.desktop-sos-big-btn:hover {
  transform: scale(1.08);
  filter: brightness(1.15);
  box-shadow: 0 12px 34px rgba(255, 51, 102, 0.75), 0 0 24px rgba(255, 51, 102, 0.5);
}

.desktop-sos-big-btn:active {
  transform: scale(0.94);
}

/* Institutional Desktop Footer Bar */
.app-desktop-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 42px;
  z-index: 30;
  background: rgba(7, 10, 18, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 24px;
  display: none;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #64748b;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-squircle-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-link {
  color: #64748b;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}

.footer-link:hover {
  color: #e2e8f0;
  text-decoration: underline;
}

.footer-sep {
  color: #334155;
}

/* ==========================================================================
   ELEVATED CIRCULAR SOS PANIC FAB BUTTON (MOCKUP)
   ========================================================================== */
.nav-item-sos-fab {
  position: relative !important;
  overflow: visible !important;
  min-width: 64px !important;
  height: 52px !important;
}

.sos-fab-circle {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff3366 0%, #d80032 100%);
  box-shadow: 0 6px 24px rgba(255, 51, 102, 0.65), 0 0 12px rgba(255, 51, 102, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.nav-item-sos-fab:hover .sos-fab-circle {
  transform: translateX(-50%) scale(1.08);
  filter: brightness(1.1);
}

.nav-item-sos-fab:active .sos-fab-circle {
  transform: translateX(-50%) scale(0.95);
}

.sos-fab-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(255, 51, 102, 0.3);
  animation: sos-glow-pulse 2s infinite ease-out;
  pointer-events: none;
}

@keyframes sos-glow-pulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 0.2; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.sos-fab-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  gap: 1px;
}

.sos-text {
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  font-family: var(--font-display);
}

.nav-tab-item.active {
  color: #f59e0b !important;
}

.tab-panel {
  display: none;
  flex-direction: column;
  padding: clamp(12px, 3vw, 18px);
  padding-bottom: clamp(28px, 6vh, 56px);
  gap: 14px;
}

.tab-panel.active {
  display: flex !important;
  animation: slide-up 0.2s ease-out;
}

/* ==========================================================================
   TAB 1: RADAR SUMMARY
   ========================================================================== */
.desktop-radar-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.radar-summary-hero {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pulse-radar-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-safe);
  box-shadow: 0 0 12px var(--color-safe);
  animation: glow-badge 2s infinite;
  flex-shrink: 0;
}

.radar-summary-hero h3 {
  font-size: 0.95rem;
  font-weight: 700;
}

.radar-summary-hero p {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.desktop-quick-sos-card {
  background: rgba(255, 42, 85, 0.08);
  border: 1.5px solid var(--border-critical);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.desktop-quick-sos-card h4 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-critical);
}

.desktop-quick-sos-card p {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.btn-quick-sos {
  background: linear-gradient(145deg, #ff436e 0%, #d80032 100%);
  border: none;
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-neon-red);
  transition: var(--transition-fast);
  margin-top: 4px;
}

.btn-quick-sos:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.quadrant-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.q-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.q-stat-label {
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 600;
}

.q-stat-val {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
}
.val-safe { color: var(--color-safe); }

/* ==========================================================================
   TAB 3: INTERACTIVE NAVIGATION, THREAT DETECTION & DUAL ROUTES
   ========================================================================== */
.route-search-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-input-group {
  display: flex;
  gap: 6px;
}

.btn-search-go {
  background: var(--color-info);
  color: #060a14;
  border: none;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-search-go:hover {
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.5);
}

.search-results-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #0d1527;
  border: 1px solid var(--color-info);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-md);
  z-index: 2000;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 4px;
}

.search-results-dropdown.hidden { display: none; }

.search-result-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-glass);
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-result-item:hover {
  background: rgba(0, 210, 255, 0.15);
}

.search-result-item strong {
  font-size: 0.82rem;
  color: #fff;
}

.search-result-item small {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Route Pin Selector Bar */
.route-pin-selector-bar {
  display: flex;
  gap: 6px;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
}

.pin-mode-btn {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
}

.pin-mode-btn.active {
  background: var(--bg-card);
  color: #fff;
  border-color: var(--border-glass);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#btn-mode-dest.active {
  border-color: var(--color-critical);
  color: #ff6b8b;
}

#btn-mode-orig.active {
  border-color: var(--color-safe);
  color: var(--color-safe);
}

.btn-gps-reset {
  flex: 0 0 auto;
  padding: 8px 12px;
  background: rgba(0, 245, 160, 0.1);
  color: var(--color-safe);
  border: 1px solid rgba(0, 245, 160, 0.3);
}

.route-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-group-route {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group-route label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
}

.route-buttons-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.btn-primary-route {
  flex: 1;
  background: var(--color-safe);
  color: #06111a;
  border: none;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-neon-cyan);
  transition: var(--transition-fast);
}

.btn-primary-route:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 16px rgba(0, 245, 160, 0.5);
}

.btn-secondary-route {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* Threat Intersection Alert Card & Decision Controls */
.route-threat-alert-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 42, 85, 0.12);
  border: 1px solid var(--color-critical);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 12px;
}

.threat-badge-icon {
  font-size: 1.5rem;
}

.route-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.route-choice-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.choice-direct {
  border-color: rgba(255, 42, 85, 0.4);
}

.choice-detour {
  border-color: rgba(0, 245, 160, 0.4);
  background: rgba(0, 245, 160, 0.05);
}

.choice-title {
  font-size: 0.78rem;
  font-weight: 700;
}

.choice-meta {
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.choice-tag {
  font-size: 0.65rem;
  font-weight: 700;
  margin-top: 4px;
}
.tag-danger { color: var(--color-critical); }
.tag-safe { color: var(--color-safe); }

.route-decision-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}

.btn-detour-accept {
  background: linear-gradient(135deg, #00f5a0 0%, #00d2ff 100%);
  color: #06111a;
  border: none;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 0 14px rgba(0, 245, 160, 0.4);
  transition: var(--transition-fast);
}

.btn-detour-accept:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 20px rgba(0, 245, 160, 0.7);
}

.btn-detour-reject {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 42, 85, 0.4);
  color: var(--color-critical);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-detour-reject:hover {
  background: rgba(255, 42, 85, 0.15);
}

/* Route Result Cards */
.route-results-card {
  border-radius: var(--radius-lg);
  padding: 16px;
  font-size: 0.85rem;
  line-height: 1.5;
  animation: slide-up 0.3s ease-out;
}

.route-card-safe {
  background: rgba(0, 245, 160, 0.1);
  border: 1.5px solid var(--color-safe);
  box-shadow: 0 0 16px rgba(0, 245, 160, 0.2);
}

.route-card-caution {
  background: rgba(255, 184, 0, 0.12);
  border: 1.5px solid var(--color-warning);
  box-shadow: 0 0 18px rgba(255, 184, 0, 0.3);
}

.route-results-card.hidden {
  display: none !important;
}

.btn-gmaps-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1a73e8;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.4);
  transition: var(--transition-fast);
}

.btn-gmaps-link:hover {
  background: #1557b0;
  box-shadow: 0 0 16px rgba(26, 115, 232, 0.6);
}

.route-step-list {
  padding-left: 20px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-main);
}

/* Custom Draggable Pins on Map */
.custom-pin-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pin-bubble {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.pin-orig-bubble {
  background: var(--color-safe);
  color: #06111a;
  border: 1.5px solid #fff;
}

.pin-dest-bubble {
  background: var(--color-critical);
  color: #fff;
  border: 1.5px solid #fff;
  box-shadow: var(--shadow-neon-red);
}

.pin-point {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid currentColor;
}
.pin-origin-marker .pin-point { color: var(--color-safe); }
.pin-dest-marker .pin-point { color: var(--color-critical); }

/* Map Floating Controls */
.map-floating-controls {
  position: absolute;
  top: clamp(8px, 2vh, 14px);
  left: clamp(8px, 2vw, 14px);
  right: clamp(8px, 2vw, 14px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
  flex-wrap: wrap;
}

.time-filter-pill-group {
  display: flex;
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(12px);
  padding: 3px 4px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-glass);
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.time-filter-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: clamp(0.68rem, 1.8vw, 0.75rem);
  font-weight: 600;
  padding: 5px clamp(8px, 2vw, 14px);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.time-filter-btn.active {
  background: var(--color-info);
  color: #060911;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
}

.btn-recenter-float {
  pointer-events: auto;
  background: var(--bg-glass-heavy);
  border: 1px solid var(--border-glass);
  color: var(--color-safe);
  font-size: clamp(0.68rem, 1.8vw, 0.75rem);
  font-weight: 700;
  padding: 6px clamp(10px, 2vw, 14px);
  border-radius: var(--radius-full);
  cursor: pointer;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: var(--transition-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-recenter-float:hover {
  background: rgba(0, 245, 160, 0.2);
  box-shadow: 0 0 12px rgba(0, 245, 160, 0.4);
}

/* Map Legend */
.map-legend-pill {
  position: absolute;
  bottom: clamp(10px, 2vh, 18px);
  left: clamp(8px, 2vw, 14px);
  z-index: 500;
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(14px);
  padding: 5px clamp(8px, 2vw, 14px);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-glass);
  display: flex;
  gap: clamp(6px, 1.5vw, 12px);
  font-size: clamp(0.62rem, 1.7vw, 0.72rem);
  font-weight: 600;
  max-width: calc(100% - 16px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.map-legend-pill::-webkit-scrollbar { display: none; }

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.dot-legend {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-crit { background: var(--color-critical); box-shadow: 0 0 6px var(--color-critical); }
.dot-warn { background: var(--color-warning); box-shadow: 0 0 6px var(--color-warning); }
.dot-safe { background: var(--color-safe); box-shadow: 0 0 6px var(--color-safe); }

/* Mobile Floating Route Helper Bars */
.mobile-route-floating-guide {
  position: absolute;
  top: 56px;
  left: clamp(8px, 2vw, 14px);
  right: clamp(8px, 2vw, 14px);
  z-index: 600;
  background: rgba(11, 17, 32, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid var(--color-info);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-full);
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  animation: slide-up 0.25s ease-out;
}

.mobile-route-floating-guide span {
  font-size: clamp(0.7rem, 2vw, 0.78rem);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-guide-back {
  background: rgba(0, 210, 255, 0.2);
  border: 1px solid var(--color-info);
  color: var(--color-info);
  font-size: clamp(0.65rem, 1.8vw, 0.72rem);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.mobile-route-summary-pill {
  position: absolute;
  bottom: clamp(14px, 3vh, 24px);
  left: clamp(8px, 2vw, 14px);
  right: clamp(8px, 2vw, 14px);
  z-index: 600;
  background: rgba(11, 17, 32, 0.95);
  backdrop-filter: blur(18px);
  border: 1.5px solid var(--color-safe);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  animation: slide-up 0.3s ease-out;
}

/* ==========================================================================
   TAB 2: PANIC SOS TRIGGER PANEL
   ========================================================================== */
#tab-report {
  align-items: center;
  text-align: center;
  background: radial-gradient(circle at 50% 20%, rgba(255, 42, 85, 0.08) 0%, transparent 65%);
}

.sos-instruction-header h2 {
  font-size: clamp(1.2rem, 3.5vw, 1.45rem);
  font-weight: 800;
  margin-bottom: 4px;
}

.sos-instruction-header p {
  font-size: clamp(0.74rem, 2.2vw, 0.82rem);
  color: var(--text-muted);
  max-width: 340px;
}

.panic-button-wrapper {
  position: relative;
  margin: clamp(12px, 3vh, 24px) 0;
}

.panic-radar-ring {
  position: absolute;
  inset: -18px;
  border: 2px dashed rgba(255, 42, 85, 0.4);
  border-radius: 50%;
  animation: radar-sweep 12s linear infinite;
}

.panic-pulse-glow {
  position: absolute;
  inset: -8px;
  background: radial-gradient(circle, rgba(255, 42, 85, 0.35) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulse-critical 2s infinite ease-in-out;
}

.mega-panic-btn {
  width: clamp(130px, 36vw, 160px);
  height: clamp(130px, 36vw, 160px);
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(145deg, #ff436e 0%, #d80032 100%);
  box-shadow: var(--shadow-neon-red);
  color: #ffffff;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mega-panic-btn:active {
  transform: scale(0.92);
  box-shadow: 0 0 15px rgba(255, 42, 85, 0.8);
}

.panic-btn-icon {
  font-size: clamp(1.8rem, 5vw, 2.4rem);
}

.panic-btn-text {
  font-size: clamp(0.95rem, 3vw, 1.15rem);
  font-weight: 800;
  letter-spacing: 1px;
}

.panic-btn-sub {
  font-size: clamp(0.55rem, 1.8vw, 0.65rem);
  text-transform: uppercase;
  opacity: 0.85;
}

.report-location-indicator {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: clamp(0.68rem, 2vw, 0.76rem);
  color: var(--text-muted);
}

.report-location-indicator #report-location-text.manual-location-active {
  color: var(--color-warning, #ffb020);
  font-weight: 700;
}

.btn-reset-report-location {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-glass);
  color: var(--text-main);
  font-size: clamp(0.62rem, 1.8vw, 0.7rem);
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}

.btn-reset-report-location.hidden {
  display: none;
}

.category-selector-tray {
  width: 100%;
}

.tray-label {
  font-size: clamp(0.68rem, 1.8vw, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 6px;
  display: block;
  font-weight: 700;
}

.category-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.category-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-size: clamp(0.72rem, 2vw, 0.8rem);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
}
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.category-chip.active {
  background: rgba(255, 42, 85, 0.2);
  border-color: var(--color-critical);
  box-shadow: 0 0 14px rgba(255, 42, 85, 0.3);
}

.optional-note-box {
  width: 100%;
  margin-top: 10px;
}

.tactical-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  color: var(--text-main);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.82rem;
  outline: none;
  transition: var(--transition-fast);
}

.tactical-input:focus {
  border-color: var(--color-info);
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.3);
}

/* 3-Second Abort Countdown Overlay */
.panic-countdown-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 18, 0.94);
  backdrop-filter: blur(25px);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  animation: slide-up 0.2s ease-out;
}

.panic-countdown-overlay.hidden {
  display: none !important;
}

.countdown-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 4px solid var(--color-critical);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-weight: 800;
  color: var(--color-critical);
  box-shadow: var(--shadow-neon-red);
  animation: pulse-critical 1s infinite;
}

.btn-abort {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
}

/* ==========================================================================
   TAB 4: HIVE & DYNAMIC REPUTATION SYSTEM
   ========================================================================== */
.trust-gauge-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.trust-circle-badge {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 3.5px solid var(--color-safe);
  background: rgba(0, 245, 160, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  box-shadow: var(--shadow-neon-cyan);
  flex-shrink: 0;
  transition: var(--transition-medium);
}

.trust-circle-badge span {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}

.trust-circle-badge small {
  font-size: 0.62rem;
  color: var(--text-dim);
}

.trust-info h4 {
  font-size: 1.05rem;
  font-weight: 800;
}

.trust-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.trust-pill-tag {
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  border: 1px solid var(--border-glass);
}

/* Reputation History Event Cards */
.reputation-history-box {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reputation-events-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 160px;
  overflow-y: auto;
}

.reputation-event-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.25);
  border-left: 3px solid var(--color-safe);
}

.event-delta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.delta-pos { background: rgba(0, 245, 160, 0.2); color: var(--color-safe); }
.delta-neg { background: rgba(255, 42, 85, 0.2); color: var(--color-critical); }

.event-desc {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.event-desc strong {
  font-size: 0.75rem;
  color: #fff;
  line-height: 1.2;
}

.event-desc small {
  font-size: 0.65rem;
  color: var(--text-dim);
}

/* Interactive Witness Vote Button */
.btn-witness-vote {
  background: linear-gradient(135deg, rgba(0, 245, 160, 0.2) 0%, rgba(0, 210, 255, 0.2) 100%);
  border: 1px solid var(--color-safe);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-witness-vote:hover {
  background: var(--color-safe);
  color: #06111a;
  box-shadow: 0 0 12px rgba(0, 245, 160, 0.5);
}

.witness-dual-buttons {
  display: flex;
  gap: 8px;
  width: 100%;
}

.btn-witness-confirm {
  flex: 1;
  background: rgba(0, 230, 118, 0.15) !important;
  border: 1px solid #00e676 !important;
  color: #00e676 !important;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
  touch-action: manipulation;
}

.btn-witness-confirm:hover, .btn-witness-confirm:active {
  background: rgba(0, 230, 118, 0.3) !important;
  box-shadow: 0 0 12px rgba(0, 230, 118, 0.4);
  transform: translateY(-1px);
}

.btn-witness-refute {
  flex: 1;
  background: rgba(255, 23, 68, 0.15) !important;
  border: 1px solid #ff1744 !important;
  color: #ff5252 !important;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
  touch-action: manipulation;
}

.btn-witness-refute:hover, .btn-witness-refute:active {
  background: rgba(255, 23, 68, 0.3) !important;
  box-shadow: 0 0 12px rgba(255, 23, 68, 0.4);
  transform: translateY(-1px);
}

.witness-too-far-badge {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.feed-section-header {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.recent-incidents-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.incident-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: var(--transition-fast);
}

.card-critical {
  border-color: var(--border-critical);
  background: rgba(255, 42, 85, 0.12);
}

.card-warning {
  border-color: rgba(255, 184, 0, 0.4);
  background: rgba(255, 184, 0, 0.08);
}

.card-icon {
  font-size: 1.6rem;
}

.card-info {
  flex: 1;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.card-title {
  font-size: 0.88rem;
  font-weight: 700;
}

.card-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.badge-critical { background: var(--color-critical); color: #fff; }
.badge-warning { background: var(--color-warning); color: #000; }
.badge-info { background: var(--color-info); color: #000; }

.card-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Simulation Widget Card in Profile */
.simulation-box-card {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-top: 6px;
}

.sim-btn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.btn-sim {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  color: var(--text-main);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
}

.btn-sim:hover {
  background: rgba(139, 92, 246, 0.25);
  border-color: var(--color-accent);
}

/* ==========================================================================
   TAB 3: SAFE ROUTING CONTROLS & TRAVEL MODE STYLES
   ========================================================================== */
.routing-header {
  margin-bottom: 12px;
}
.routing-header h3 {
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  font-weight: 800;
  margin-bottom: 3px;
}
.routing-header p {
  font-size: clamp(0.74rem, 2vw, 0.82rem);
  color: var(--text-muted);
  line-height: 1.35;
}

.route-search-wrapper {
  margin-bottom: 12px;
  position: relative;
}
.search-input-group {
  display: flex;
  gap: 6px;
}
.btn-search-go {
  background: var(--color-info);
  color: #06111a;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0 14px;
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}
.btn-search-go:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
}

.search-results-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1200;
  background: rgba(11, 17, 32, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid var(--color-info);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  max-height: 200px;
  overflow-y: auto;
  margin-top: 4px;
}
.search-result-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-glass);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: var(--transition-fast);
}
.search-result-item:hover {
  background: rgba(0, 210, 255, 0.15);
}
.search-result-item strong {
  font-size: 0.78rem;
  color: #fff;
}
.search-result-item small {
  font-size: 0.68rem;
  color: var(--text-dim);
}

/* Route Pin Mode Buttons */
.route-pin-selector-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.pin-mode-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  font-size: clamp(0.7rem, 2vw, 0.76rem);
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  flex: 1 1 auto;
  text-align: center;
}
.pin-mode-btn.active {
  background: rgba(0, 210, 255, 0.18);
  border-color: var(--color-info);
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.35);
}
.pin-mode-btn.btn-gps-reset {
  flex: 0 0 auto;
  background: rgba(0, 245, 160, 0.12);
  border-color: var(--color-safe);
  color: var(--color-safe);
}

/* Route Form Card */
.route-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.form-group-route {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-group-route label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Travel Mode Selector (Walking vs Driving) */
.travel-mode-selector-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
  gap: 8px;
}
.mode-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
}
.mode-buttons-group {
  display: flex;
  gap: 6px;
}
.travel-mode-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: var(--transition-fast);
}
.travel-mode-btn.active {
  background: linear-gradient(135deg, rgba(0, 245, 160, 0.25) 0%, rgba(0, 210, 255, 0.25) 100%);
  border-color: var(--color-safe);
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 245, 160, 0.4);
}

.route-buttons-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.btn-primary-route {
  flex: 1;
  background: linear-gradient(135deg, #00f5a0 0%, #00d2ff 100%);
  color: #06111a;
  border: none;
  font-size: clamp(0.78rem, 2.2vw, 0.85rem);
  font-weight: 800;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
}
.btn-primary-route:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 16px rgba(0, 245, 160, 0.5);
}
.btn-secondary-route {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}
.btn-secondary-route:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Route Results & Danger Comparison Box */
.route-results-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: slide-up 0.25s ease-out;
}
.route-card-caution {
  border-color: var(--color-warning);
  background: rgba(255, 184, 0, 0.06);
}
.route-card-safe {
  border-color: var(--color-safe);
  background: rgba(0, 245, 160, 0.06);
}

.route-threat-alert-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 42, 85, 0.14);
  border: 1px solid var(--color-critical);
  border-radius: var(--radius-md);
}
.threat-badge-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.route-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 6px 0;
}
.route-choice-box {
  border-radius: var(--radius-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.choice-direct {
  background: rgba(255, 42, 85, 0.1);
  border: 1px solid rgba(255, 42, 85, 0.35);
}
.choice-detour {
  background: rgba(0, 245, 160, 0.1);
  border: 1px solid rgba(0, 245, 160, 0.4);
}
.choice-title {
  font-size: 0.78rem;
  font-weight: 800;
}
.choice-meta {
  font-size: 0.74rem;
  color: var(--text-main);
  font-family: var(--font-mono);
}
.choice-tag {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  margin-top: 2px;
  width: fit-content;
}
.tag-danger { background: var(--color-critical); color: #fff; }
.tag-safe { background: var(--color-safe); color: #06111a; }

.route-decision-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.btn-detour-accept {
  background: linear-gradient(135deg, #00f5a0 0%, #00d2ff 100%);
  color: #06111a;
  border: none;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
}
.btn-detour-accept:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 14px rgba(0, 245, 160, 0.5);
}
.btn-detour-reject {
  background: rgba(255, 42, 85, 0.12);
  border: 1px solid rgba(255, 42, 85, 0.4);
  color: var(--color-critical);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
}
.btn-detour-reject:hover {
  background: rgba(255, 42, 85, 0.25);
}
.btn-gmaps-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: rgba(0, 210, 255, 0.12);
  border: 1px solid var(--color-info);
  color: var(--color-info);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition-fast);
}
.btn-gmaps-link:hover {
  background: var(--color-info);
  color: #06111a;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.4);
}
.route-step-list {
  padding-left: 18px;
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Bottom Navigation Bar (Mobile Only) */
.bottom-nav-bar {
  height: clamp(58px, 9vh, 68px);
  min-height: 58px;
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-glass);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.nav-tab-item {
  background: transparent;
  border: none;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: clamp(0.62rem, 1.8vw, 0.7rem);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
  padding: 6px clamp(8px, 2.5vw, 16px);
  border-radius: var(--radius-md);
  min-height: 48px;
  justify-content: center;
}

.nav-icon {
  font-size: clamp(1.2rem, 3.5vw, 1.35rem);
}

.nav-tab-item.active {
  color: var(--color-safe);
}

.nav-tab-item.nav-sos.active {
  color: var(--color-critical);
}

/* Custom Marker Styling */
.user-geo-marker .user-beacon {
  position: relative;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 245, 160, 0.4);
  animation: pulse-critical 2s infinite ease-in-out;
}

.user-dot {
  width: 14px;
  height: 14px;
  background: var(--color-safe);
  border: 2px solid #ffffff;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 12px var(--color-safe);
}

.incident-custom-marker {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.incident-custom-marker .marker-radar-wave {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  display: none; /* By default no pulsation to avoid visual noise */
}

/* ONLY critical active alerts pulsate with aggressive warning wave */
.incident-custom-marker.critical .marker-radar-wave {
  display: block;
  border: 2px solid var(--color-critical);
  background: rgba(255, 42, 85, 0.25);
  animation: wave-expand 1.5s infinite cubic-bezier(0.1, 0.8, 0.3, 1);
}

/* Probing (preventivo): Punto amarillo fijo SIN palpitación */
.incident-custom-marker.probing .marker-radar-wave {
  display: none !important;
}

/* Patrol Attended: Punto azul patrullero SIN palpitación (calmado visualmente) */
.incident-custom-marker.patrol-attended .marker-radar-wave {
  display: none !important;
}

.incident-custom-marker.dispatched .marker-radar-wave {
  display: block;
  border: 2px solid var(--color-info);
  background: rgba(0, 210, 255, 0.15);
  animation: wave-expand 3s infinite ease-out;
}

.marker-core {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.critical .marker-core { color: var(--color-critical); box-shadow: var(--shadow-neon-red); }
.probing .marker-core { color: var(--color-warning); box-shadow: var(--shadow-neon-yellow); }
.dispatched .marker-core { color: var(--color-info); box-shadow: var(--shadow-neon-cyan); }
.patrol-attended .marker-core { color: #00b0ff; border-color: #00b0ff; box-shadow: 0 0 14px rgba(0, 176, 255, 0.45); }

.badge-patrol-attended {
  background: rgba(0, 176, 255, 0.15) !important;
  color: #00b0ff !important;
  border: 1px solid rgba(0, 176, 255, 0.4) !important;
}

.marker-icon { font-size: 1rem; }

.marker-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: currentColor;
  color: #0b0f19;
  font-size: 0.6rem;
  font-weight: 800;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tactical Popup Styling */
.tactical-popup {
  color: #f8fafc;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-width: 250px;
  max-width: 320px;
  line-height: 1.4;
}
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
}
.popup-category {
  font-weight: 800;
  font-size: 0.78rem;
  color: #cbd5e1;
  letter-spacing: 0.3px;
}
.popup-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.popup-badge.badge-critical {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #ff4d6d !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}
.popup-badge.badge-warning {
  background: rgba(245, 158, 11, 0.25) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}
.popup-badge.badge-info {
  background: rgba(0, 245, 160, 0.2) !important;
  color: #00f5a0 !important;
  border: 1px solid rgba(0, 245, 160, 0.45) !important;
  box-shadow: 0 0 8px rgba(0, 245, 160, 0.25);
}
.popup-body p { font-size: 0.75rem; margin-top: 4px; }
.leaflet-popup-content-wrapper {
  background: rgba(11, 17, 33, 0.95) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7) !important;
}

/* Toast Pills Container */
#toast-container {
  position: absolute;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  left: clamp(10px, 2.5vw, 24px);
  right: clamp(10px, 2.5vw, 24px);
  z-index: 4000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

@media (min-width: 900px) {
  #toast-container {
    left: auto;
    right: 24px;
    bottom: 24px;
    max-width: 380px;
  }
}

.toast-pill {
  padding: 10px 16px;
  border-radius: var(--radius-full);
  font-size: clamp(0.72rem, 2vw, 0.8rem);
  font-weight: 600;
  backdrop-filter: blur(16px);
  animation: slide-up 0.25s ease-out;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.toast-critical { background: rgba(255, 42, 85, 0.95); color: #fff; }
.toast-warning { background: rgba(255, 184, 0, 0.95); color: #000; }
.toast-info { background: rgba(0, 210, 255, 0.95); color: #000; }

.toast-fadeout {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s, transform 0.4s;
}

/* 3-Second Abort Countdown Overlay */
.panic-countdown-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 18, 0.96);
  backdrop-filter: blur(25px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  text-align: center;
  animation: slide-up 0.2s ease-out;
}

.panic-countdown-overlay.hidden {
  display: none !important;
}

.countdown-circle {
  width: clamp(100px, 30vw, 130px);
  height: clamp(100px, 30vw, 130px);
  border-radius: 50%;
  border: 4px solid var(--color-critical);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(3rem, 10vw, 4rem);
  font-weight: 800;
  color: var(--color-critical);
  box-shadow: var(--shadow-neon-red);
  animation: pulse-critical 1s infinite;
}

.btn-abort {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: clamp(0.78rem, 2.2vw, 0.9rem);
  font-weight: 700;
  padding: 12px 28px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-abort:hover {
  background: rgba(255, 42, 85, 0.3);
}

/* Official Broadcast Modal Alert */
.broadcast-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 18, 0.92);
  backdrop-filter: blur(20px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.broadcast-modal-backdrop.hidden { display: none !important; }

.broadcast-card-modal {
  background: linear-gradient(145deg, #1c1220 0%, #2a0b18 100%);
  border: 2px solid var(--color-critical);
  box-shadow: var(--shadow-neon-red);
  border-radius: var(--radius-xl);
  padding: clamp(16px, 4vw, 24px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: slide-up 0.3s ease-out;
  width: min(440px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
}

.broadcast-icon-mega {
  font-size: clamp(2.2rem, 6vw, 3rem);
  animation: pulse-critical 1.5s infinite;
}

.broadcast-card-modal h3 {
  font-size: clamp(1.05rem, 3.5vw, 1.25rem);
  font-weight: 800;
  color: var(--color-critical);
}

.broadcast-card-modal p {
  font-size: clamp(0.78rem, 2.4vw, 0.88rem);
  line-height: 1.4;
}

.btn-broadcast-ack {
  background: var(--color-critical);
  color: #fff;
  border: none;
  font-size: clamp(0.78rem, 2.2vw, 0.9rem);
  font-weight: 700;
  padding: 12px 30px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-broadcast-ack:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 16px rgba(255, 42, 85, 0.6);
}

/* ==========================================================================
   GOOGLE AUTHENTICATION & CITIZEN IDENTITY STYLES
   ========================================================================== */
.user-auth-header-container {
  display: inline-flex;
  align-items: center;
}

.btn-auth-google-header {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-glass);
  color: #fff;
  font-size: clamp(0.7rem, 2vw, 0.78rem);
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(10px);
  transition: var(--transition-fast);
  white-space: nowrap;
}

.btn-auth-google-header:hover {
  background: rgba(0, 210, 255, 0.18);
  border-color: var(--color-info);
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.4);
}

.user-logged-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 245, 160, 0.12);
  border: 1px solid var(--color-safe);
  padding: 4px 10px 4px 6px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
}

.user-logged-pill:hover {
  box-shadow: 0 0 12px rgba(0, 245, 160, 0.4);
}

.user-avatar-mini {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-safe);
  object-fit: cover;
}

.user-logged-name {
  font-size: clamp(0.68rem, 1.8vw, 0.76rem);
  font-weight: 800;
  color: #fff;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Google Verified Citizen Identity Card in Profile Tab */
.google-user-profile-card {
  background: linear-gradient(135deg, rgba(16, 25, 40, 0.85) 0%, rgba(10, 18, 30, 0.95) 100%);
  border: 1.5px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  margin-bottom: 12px;
  animation: slide-up 0.25s ease-out;
}

.user-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

.user-avatar-img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2.5px solid var(--color-safe);
  object-fit: cover;
  background: #0d1527;
}

.user-status-online-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: var(--color-safe);
  border: 2px solid #0b1120;
  border-radius: 50%;
  box-shadow: 0 0 6px var(--color-safe);
}

.user-identity-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.user-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.user-name-row h3 {
  font-size: clamp(0.95rem, 3vw, 1.1rem);
  font-weight: 800;
  color: #fff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-verified-email {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(0, 245, 160, 0.15);
  border: 1px solid var(--color-safe);
  color: var(--color-safe);
}

.user-email-text {
  font-size: 0.74rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.user-auth-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.btn-auth-google {
  background: linear-gradient(135deg, #00f5a0 0%, #00d2ff 100%);
  color: #06111a;
  border: none;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: var(--transition-fast);
}

.btn-auth-google:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 12px rgba(0, 245, 160, 0.5);
}

.btn-auth-logout {
  background: rgba(255, 42, 85, 0.12);
  border: 1px solid rgba(255, 42, 85, 0.4);
  color: var(--color-critical);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: var(--transition-fast);
}

.btn-auth-logout:hover {
  background: rgba(255, 42, 85, 0.25);
  color: #fff;
}

/* ==========================================================================
   MARKETING WELCOME & LOGIN HERO PORTAL STYLES
   ========================================================================== */
.marketing-login-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 15, 0.92);
  backdrop-filter: blur(25px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fade-in 0.25s ease-out;
}

.marketing-login-backdrop.hidden {
  display: none !important;
}

.marketing-login-card {
  position: relative;
  width: min(520px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  background: radial-gradient(circle at 50% 0%, #152238 0%, #080e1a 100%);
  border: 1.5px solid var(--border-glass);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 245, 160, 0.15);
  padding: clamp(20px, 5vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-close-marketing-modal {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-glass);
  color: var(--text-dim);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.btn-close-marketing-modal:hover {
  background: rgba(255, 42, 85, 0.25);
  color: #fff;
  border-color: var(--color-critical);
}

.marketing-hero-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.marketing-badge-glow {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 245, 160, 0.25) 0%, rgba(0, 210, 255, 0.1) 70%);
  border: 2px solid var(--color-safe);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px rgba(0, 245, 160, 0.4);
  margin-bottom: 4px;
}

.mega-bee {
  font-size: 2.2rem;
  animation: float-pulse 3s infinite ease-in-out;
}

.marketing-hero-header h2 {
  font-size: clamp(1.3rem, 4vw, 1.65rem);
  font-weight: 900;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #ffffff 0%, #00f5a0 50%, #00d2ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.marketing-tagline {
  font-size: clamp(0.78rem, 2.4vw, 0.88rem);
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.35;
}

.spark-free-badge {
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(0, 245, 160, 0.12);
  border: 1px solid var(--color-safe);
  color: var(--color-safe);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-top: 2px;
}

.marketing-auth-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-glass);
  padding: 16px;
  border-radius: var(--radius-lg);
}

.btn-mega-google-login {
  width: 100%;
  background: #ffffff;
  color: #1f2937;
  border: none;
  font-size: clamp(0.82rem, 2.4vw, 0.92rem);
  font-weight: 800;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: var(--transition-fast);
}

.btn-mega-google-login:hover {
  background: #f3f4f6;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 245, 160, 0.35);
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 2px 0;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.auth-divider span {
  padding: 0 8px;
}

.quick-email-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}
.input-with-icon .input-icon {
  position: absolute;
  left: 12px;
  font-size: 0.9rem;
  pointer-events: none;
}
.input-with-icon .tactical-input {
  width: 100%;
  padding-left: 36px;
  text-align: left;
}

.btn-email-signin {
  width: 100%;
  background: linear-gradient(135deg, #00f5a0 0%, #00d2ff 100%);
  color: #06111a;
  border: none;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-email-signin:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 14px rgba(0, 245, 160, 0.5);
}

.btn-guest-explore {
  background: transparent;
  border: 1px dashed var(--border-glass);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-guest-explore:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: var(--color-info);
}

.marketing-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  text-align: left;
}

.feature-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.feature-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.feature-text {
  display: flex;
  flex-direction: column;
}

.feature-text strong {
  font-size: 0.74rem;
  color: #fff;
  line-height: 1.2;
}

.feature-text small {
  font-size: 0.62rem;
  color: var(--text-dim);
  line-height: 1.2;
}

.marketing-footer-metrics {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.68rem;
  color: var(--text-dim);
  font-weight: 600;
}

@media (max-width: 480px) {
  .marketing-features-grid {
    grid-template-columns: 1fr;
  }
  .marketing-login-card {
    padding: 18px 12px;
    gap: 12px;
  }
}

@keyframes float-pulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.05); }
}

/* ==========================================================================
   ADVANCED MOBILE WEB OPTIMIZATIONS (PWA, ERGONOMICS & SAFE AREAS)
   ========================================================================== */

@media (max-width: 899px) {
  html, body.citizen-body {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .app-viewport {
    height: 100dvh;
    min-height: 100dvh;
  }

  .app-header {
    height: calc(54px + env(safe-area-inset-top, 0px));
    padding-top: max(env(safe-area-inset-top, 0px), 6px);
    padding-left: max(env(safe-area-inset-left, 0px), 12px);
    padding-right: max(env(safe-area-inset-right, 0px), 12px);
  }

  /* Bottom Navigation Bar - Native App Feel */
  .bottom-nav-bar {
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    min-height: calc(62px + env(safe-area-inset-bottom, 0px));
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
    padding-left: max(env(safe-area-inset-left, 0px), 8px);
    padding-right: max(env(safe-area-inset-right, 0px), 8px);
    background: rgba(8, 12, 22, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-tab-item {
    min-height: 48px;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.12s ease, color 0.15s ease;
  }

  .nav-tab-item:active {
    transform: scale(0.92);
  }

  /* Tactical Highlight for SOS in Bottom Bar */
  .nav-tab-item.nav-sos {
    position: relative;
  }

  .nav-tab-item.nav-sos .nav-icon {
    background: linear-gradient(135deg, rgba(255, 42, 85, 0.28), rgba(255, 42, 85, 0.08));
    border: 1px solid rgba(255, 42, 85, 0.5);
    border-radius: var(--radius-full);
    padding: 4px 12px;
    box-shadow: 0 0 14px rgba(255, 42, 85, 0.35);
    transition: all 0.2s ease;
    display: inline-block;
  }

  .nav-tab-item.nav-sos.active .nav-icon {
    background: var(--color-critical);
    color: #fff;
    box-shadow: 0 0 22px rgba(255, 42, 85, 0.7);
  }

  /* Prevent iOS Safari Automatic Zoom on Input Focus */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Floating Tactical Controls on Mobile Map */
  .map-floating-controls {
    top: max(env(safe-area-inset-top, 0px) + 8px, 12px);
    left: max(env(safe-area-inset-left, 0px) + 10px, 10px);
    right: max(env(safe-area-inset-right, 0px) + 10px, 10px);
  }

  .time-filter-pill-group {
    background: rgba(10, 16, 30, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 3px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-glass);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  }

  .time-filter-btn {
    padding: 6px 11px;
    font-size: 0.74rem;
    min-height: 34px;
    touch-action: manipulation;
  }

  .btn-recenter-float {
    min-height: 38px;
    padding: 6px 14px;
    font-size: 0.76rem;
    font-weight: 700;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    touch-action: manipulation;
  }

  .map-legend-pill {
    bottom: max(env(safe-area-inset-bottom, 0px) + 12px, 14px);
    left: max(env(safe-area-inset-left, 0px) + 10px, 10px);
    background: rgba(10, 16, 30, 0.92);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  }

  /* Leaflet Controls Offset on Mobile so they don't cover Header or Filters */
  .leaflet-top.leaflet-left {
    top: 66px !important;
    left: 10px !important;
  }

  .leaflet-bar a {
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    font-size: 17px !important;
    background-color: rgba(10, 16, 30, 0.92) !important;
    color: #fff !important;
    border-color: var(--border-glass) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  /* Tab Panel Content Padding on Mobile - Extra room for S25 gesture bar and bottom nav */
  .tab-panel {
    padding: 12px 14px !important;
    padding-bottom: calc(85px + env(safe-area-inset-bottom, 20px)) !important;
  }

  /* Header Actions Compact Sizing to prevent logo/action overlap */
  .header-actions {
    gap: 4px !important;
  }
  .btn-auth-google-header {
    padding: 5px 9px !important;
    font-size: 0.72rem !important;
  }
  .gps-pill {
    padding: 4px 6px !important;
    font-size: 0.65rem !important;
  }
  .btn-header-link {
    padding: 5px 8px !important;
    font-size: 0.72rem !important;
  }

  /* Panic Mega Button Responsive Clamp - Balanced for S25 without overflowing */
  .panic-button-wrapper {
    margin: 8px auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mega-panic-btn {
    width: clamp(140px, 42vw, 175px) !important;
    height: clamp(140px, 42vw, 175px) !important;
    padding: 8px !important;
    touch-action: manipulation;
  }

  .mega-panic-btn:active {
    transform: scale(0.95);
  }

  .panic-btn-text {
    font-size: clamp(0.78rem, 2.4vw, 0.92rem) !important;
    font-weight: 800 !important;
    max-width: 90% !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }

  .panic-btn-sub {
    font-size: clamp(0.52rem, 1.6vw, 0.62rem) !important;
    max-width: 85% !important;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .panic-btn-icon {
    font-size: clamp(1.6rem, 4.5vw, 2.1rem) !important;
  }

  /* Category Chips Responsive Mobile Grid */
  .category-chips-grid {
    grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)) !important;
    gap: 6px !important;
  }

  .category-chip {
    min-height: 42px !important;
    padding: 6px 8px !important;
    font-size: 0.74rem !important;
    touch-action: manipulation;
  }

  .category-chip:active {
    transform: scale(0.96);
  }

  /* Route Pin Selector Bar Mobile Alignment - No button overlap */
  .route-pin-selector-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto !important;
    gap: 6px !important;
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  .pin-mode-btn {
    min-height: 40px !important;
    padding: 6px 4px !important;
    font-size: 0.74rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    touch-action: manipulation;
  }

  /* Map Floating Controls: never wrap or overlap Leaflet controls */
  .map-floating-controls {
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  .time-filter-btn {
    padding: 5px 8px !important;
    font-size: 0.72rem !important;
    min-height: 32px !important;
  }

  .btn-recenter-float {
    padding: 5px 10px !important;
    font-size: 0.72rem !important;
    min-height: 32px !important;
  }

  /* Feed Cards Touch Ergonomics */
  .incident-card {
    padding: 12px 10px !important;
  }

  .btn-witness-vote {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    min-height: 44px;
    touch-action: manipulation;
  }

  .btn-witness-vote:active {
    transform: scale(0.96);
  }

  .sim-btn-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .btn-sim {
    min-height: 44px;
    font-size: 0.76rem;
    padding: 8px;
    touch-action: manipulation;
  }

  .btn-sim:active {
    transform: scale(0.95);
  }
}

/* Guest Reporting Restricted Card */
.guest-report-lock-card {
  background: rgba(18, 24, 40, 0.95);
  border: 1px solid rgba(255, 184, 0, 0.35);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 4vw, 24px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  margin-top: 8px;
}

.lock-card-icon {
  font-size: 2.2rem;
  background: rgba(255, 184, 0, 0.15);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 184, 0, 0.4);
}

.lock-card-body h3 {
  font-size: clamp(0.95rem, 3vw, 1.15rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.lock-card-body p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 380px;
  margin: 0 auto;
}

.lock-guest-perks {
  margin: 12px 0 16px;
  padding: 8px 12px;
  background: rgba(0, 245, 160, 0.08);
  border: 1px solid rgba(0, 245, 160, 0.25);
  border-radius: var(--radius-md);
  font-size: 0.76rem;
  color: var(--color-safe);
  line-height: 1.35;
}

.btn-guest-unlock-login {
  background: linear-gradient(135deg, #00d2ff 0%, #0072ff 100%);
  color: #fff;
  border: none;
  font-size: 0.84rem;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(0, 114, 255, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
}

.btn-guest-unlock-login:active {
  transform: scale(0.96);
}

/* Guest Open Navigation Banner in Tab Routes */
.guest-nav-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(0, 245, 160, 0.12) 0%, rgba(0, 210, 255, 0.12) 100%);
  border: 1px solid rgba(0, 245, 160, 0.3);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-bottom: 8px;
}

.nav-banner-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.nav-banner-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nav-banner-text strong {
  font-size: 0.78rem;
  color: #fff;
  line-height: 1.2;
}

.nav-banner-text span {
  font-size: 0.68rem;
  color: var(--color-safe);
}

/* Responsive Text Toggles */
.auth-btn-text-short {
  display: none;
}
.pin-text-short {
  display: none;
}

@media (max-width: 600px) {
  .auth-btn-text-full {
    display: none;
  }
  .auth-btn-text-short {
    display: inline;
  }
  .pin-text-full {
    display: none;
  }
  .pin-text-short {
    display: inline;
  }
}

/* 100% Free OpenStreetMap High-Contrast Tactical Cyber Map (Zero API Key) */
.leaflet-tile-pane .colmena-dark-tiles {
  filter: brightness(0.6) invert(1) contrast(2.5) hue-rotate(200deg) saturate(0.3) brightness(0.75);
}

.leaflet-container {
  background: #070a12 !important;
}

/* ==========================================================================
   CITIZEN APP - COMUNICADOR VECINAL & PANEL DE CONTACTOS MULTI-ROL (TAB CHAT)
   ========================================================================== */
.chat-module-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 480px;
  background: rgba(11, 17, 33, 0.95);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
  overflow: hidden;
  position: relative;
}

/* Chat Header */
.chat-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #0d1527;
  border-bottom: 1px solid var(--border-glass);
  gap: 10px;
}
.chat-active-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-active-icon {
  font-size: 1.4rem;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-glass);
}
.chat-active-title h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.chat-active-title p {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.2;
}
.chat-toggle-contacts-btn {
  background: rgba(0, 210, 255, 0.12);
  border: 1px solid rgba(0, 210, 255, 0.35);
  color: var(--color-info);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.chat-toggle-contacts-btn:hover {
  background: rgba(0, 210, 255, 0.25);
  color: #fff;
}

/* Channels Bar */
.chat-channels-bar {
  display: flex;
  padding: 8px 12px;
  background: #080d19;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  gap: 8px;
  overflow-x: auto;
}
.chat-channel-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.chat-channel-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.chat-channel-btn.active {
  background: rgba(0, 210, 255, 0.18);
  border-color: var(--color-info);
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.2);
}
.chat-channel-btn.channel-urgent.active {
  background: rgba(255, 42, 85, 0.2);
  border-color: var(--color-critical);
  box-shadow: 0 0 10px rgba(255, 42, 85, 0.25);
}
.chat-channel-btn.channel-patrol.active {
  background: rgba(0, 176, 255, 0.2);
  border-color: #00b0ff;
  box-shadow: 0 0 10px rgba(0, 176, 255, 0.25);
}

/* Contacts Drawer (Segmented by Roles) */
.chat-contacts-drawer {
  position: absolute;
  top: 50px;
  right: 0;
  width: min(340px, 90%);
  height: calc(100% - 50px);
  background: #0b1122;
  border-left: 1px solid var(--border-glass);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease-out;
}
.chat-contacts-drawer.hidden {
  display: none !important;
}
.contacts-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.contacts-drawer-header h4 {
  font-size: 0.85rem;
  color: #fff;
}
.btn-close-contacts {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
}
.chat-role-filters {
  display: flex;
  padding: 8px 12px;
  gap: 6px;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.role-filter-chip {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.role-filter-chip.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.contacts-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-contact-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.2s ease;
}
.chat-contact-card:hover {
  background: rgba(0, 210, 255, 0.08);
  border-color: rgba(0, 210, 255, 0.3);
}
.chat-contact-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
}
.chat-contact-info {
  flex: 1;
  min-width: 0;
}
.chat-contact-info h5 {
  font-size: 0.8rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-contact-info p {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-role-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 2px;
}
.badge-role-admin { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.4); }
.badge-role-patrol { background: rgba(0, 176, 255, 0.2); color: #00b0ff; border: 1px solid rgba(0, 176, 255, 0.4); }
.badge-role-citizen { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.4); }

/* Messages Viewport */
.chat-messages-viewport {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-msg-row {
  display: flex;
  gap: 10px;
  max-width: 88%;
}
.chat-msg-row.msg-self {
  margin-left: auto;
  flex-direction: row-reverse;
}
.msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
  flex-shrink: 0;
}
.msg-bubble {
  background: #111a30;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-msg-row.msg-self .msg-bubble {
  background: #132742;
  border-color: rgba(0, 210, 255, 0.25);
}

/* Priority Card Accents */
.msg-bubble.priority-emergency {
  border-left: 4px solid var(--color-critical);
  background: rgba(255, 42, 85, 0.12);
}
.msg-bubble.priority-warning {
  border-left: 4px solid var(--color-warning);
  background: rgba(255, 184, 0, 0.1);
}
.msg-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
}
.msg-sender-name {
  font-weight: 700;
  color: #e2e8f0;
}
.msg-time {
  color: var(--text-muted);
  font-size: 0.65rem;
}
.msg-priority-badge {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}
.badge-p-emergency { background: #ff2a55; color: #fff; }
.badge-p-warning { background: #ffb800; color: #0b0f19; }
.badge-p-normal { background: rgba(255, 255, 255, 0.1); color: var(--text-muted); }
.msg-text-content {
  font-size: 0.82rem;
  color: #fff;
  line-height: 1.4;
  word-break: break-word;
}

/* Chat Composer */
.chat-composer-form {
  padding: 10px 14px;
  background: #080d19;
  border-top: 1px solid var(--border-glass);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-priority-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.priority-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
}
.priority-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.2s ease;
}
.priority-chip input {
  display: none;
}
.priority-chip.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.priority-chip.priority-warning.active {
  background: rgba(255, 184, 0, 0.2);
  color: #ffb800;
  border-color: #ffb800;
}
.priority-chip.priority-emergency.active {
  background: rgba(255, 42, 85, 0.2);
  color: #ff2a55;
  border-color: #ff2a55;
}
.chat-input-row {
  display: flex;
  gap: 8px;
}
.chat-input-field {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  font-size: 0.82rem;
}
.btn-chat-send {
  background: var(--color-info);
  color: #0b0f19;
  border: none;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.2s ease;
}
.chat-contact-card:hover {
  background: rgba(0, 210, 255, 0.08);
  border-color: rgba(0, 210, 255, 0.3);
}
.chat-contact-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
}
.chat-contact-info {
  flex: 1;
  min-width: 0;
}
.chat-contact-info h5 {
  font-size: 0.8rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-contact-info p {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-role-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 2px;
}
.badge-role-admin { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.4); }
.badge-role-patrol { background: rgba(0, 176, 255, 0.2); color: #00b0ff; border: 1px solid rgba(0, 176, 255, 0.4); }
.badge-role-citizen { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.4); }

/* Messages Viewport */
.chat-messages-viewport {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-msg-row {
  display: flex;
  gap: 10px;
  max-width: 88%;
}
.chat-msg-row.msg-self {
  margin-left: auto;
  flex-direction: row-reverse;
}
.msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
  flex-shrink: 0;
}
.msg-bubble {
  background: #111a30;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-msg-row.msg-self .msg-bubble {
  background: #132742;
  border-color: rgba(0, 210, 255, 0.25);
}

/* Priority Card Accents */
.msg-bubble.priority-emergency {
  border-left: 4px solid var(--color-critical);
  background: rgba(255, 42, 85, 0.12);
}
.msg-bubble.priority-warning {
  border-left: 4px solid var(--color-warning);
  background: rgba(255, 184, 0, 0.1);
}
.msg-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
}
.msg-sender-name {
  font-weight: 700;
  color: #e2e8f0;
}
.msg-time {
  color: var(--text-muted);
  font-size: 0.65rem;
}
.msg-priority-badge {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}
.badge-p-emergency { background: #ff2a55; color: #fff; }
.badge-p-warning { background: #ffb800; color: #0b0f19; }
.badge-p-normal { background: rgba(255, 255, 255, 0.1); color: var(--text-muted); }
.msg-text-content {
  font-size: 0.82rem;
  color: #fff;
  line-height: 1.4;
  word-break: break-word;
}

/* Chat Composer */
.chat-composer-form {
  padding: 10px 14px;
  background: #080d19;
  border-top: 1px solid var(--border-glass);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-priority-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.priority-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
}
.priority-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.2s ease;
}
.priority-chip input {
  display: none;
}
.priority-chip.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.priority-chip.priority-warning.active {
  background: rgba(255, 184, 0, 0.2);
  color: #ffb800;
  border-color: #ffb800;
}
.priority-chip.priority-emergency.active {
  background: rgba(255, 42, 85, 0.2);
  color: #ff2a55;
  border-color: #ff2a55;
}
.chat-input-row {
  display: flex;
  gap: 8px;
}
.chat-input-field {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  font-size: 0.82rem;
}
.btn-chat-send {
  background: var(--color-info);
  color: #0b0f19;
  border: none;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}
.btn-chat-send:hover {
  filter: brightness(1.15);
  box-shadow: var(--shadow-neon-cyan);
}

/* ==========================================================================
   GOOGLE ACCOUNT CHOOSER MODAL (1-TAP MOBILE & DESKTOP AUTH)
   ========================================================================== */
.brand-hexagon-logo {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, filter 0.2s ease;
  cursor: pointer;
}

.brand-hexagon-logo:hover {
  transform: scale(1.08) rotate(2deg);
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.6));
}

.beja-logo-img {
  width: 100%;
  height: 100%;
  display: block;
}

.footer-hexagon-logo {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.beja-footer-logo-img {
  width: 100%;
  height: 100%;
  display: block;
}

.mega-beja-hexagon {
  width: 80px;
  height: 80px;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 22px rgba(245, 158, 11, 0.6));
  animation: float-pulse 3s infinite ease-in-out;
}

.brand-squircle-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #0e1626;
  border: 1.5px solid #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
  flex-shrink: 0;
}

.brand-icon-hive {
  font-size: 1.25rem;
  filter: drop-shadow(0 0 6px rgba(255, 184, 0, 0.6));
}

.google-chooser-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 15, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
  animation: fadeInModal 0.2s ease-out;
}

.google-chooser-backdrop.hidden {
  display: none !important;
}

.google-chooser-sheet {
  background: #1a2234;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: scaleUpModal 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.google-chooser-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.google-brand-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-close-google-chooser {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.btn-close-google-chooser:hover {
  color: #fff;
}

.google-accounts-list {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.google-account-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  width: 100%;
}

.google-account-item:hover, .google-account-item:active {
  background: rgba(0, 245, 160, 0.1);
  border-color: rgba(0, 245, 160, 0.35);
  transform: translateY(-1px);
}

.google-account-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: #0f172a;
  flex-shrink: 0;
}

.google-account-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.account-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.account-email {
  font-size: 0.8rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-role-pill {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  text-transform: uppercase;
}

.badge-role-pill.admin-pill {
  background: rgba(239, 68, 68, 0.2);
  color: #ff5c77;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.badge-role-pill.patrol-pill {
  background: rgba(0, 176, 255, 0.2);
  color: #00b0ff;
  border: 1px solid rgba(0, 176, 255, 0.4);
}

.badge-role-pill.citizen-pill {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.account-arrow {
  color: #64748b;
  font-size: 0.9rem;
}

.custom-google-account-section {
  margin-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 8px;
}

.btn-toggle-custom-google {
  background: transparent;
  border: none;
  color: #38bdf8;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.btn-toggle-custom-google:hover {
  text-decoration: underline;
}

.custom-email-drawer {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.google-custom-input {
  flex: 1;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 10px 12px;
  color: #fff;
  font-size: 0.88rem;
}

.google-custom-input:focus {
  border-color: #38bdf8;
  outline: none;
}

.btn-confirm-custom-google {
  background: #0284c7;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

.google-chooser-footer {
  padding: 12px 20px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.4;
  text-align: center;
}

@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleUpModal {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   BEJA SUPPORT DESK & HELP CENTER (EXCLUSIVO ATENCIÓN A SOPORTE)
   ========================================================================== */
.support-desk-container {
  border-color: rgba(245, 158, 11, 0.25) !important;
}

.support-header-bar {
  background: linear-gradient(135deg, #0c1322 0%, #111a30 100%) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2) !important;
}

.support-active-icon {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  font-size: 1.3rem !important;
}

.support-status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-dot 1.8s infinite;
}

.support-notice-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(245, 158, 11, 0.08);
  border-bottom: 1px solid rgba(245, 158, 11, 0.15);
  font-size: 0.72rem;
  color: #cbd5e1;
}

.support-notice-banner .notice-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.support-notice-banner .notice-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.support-notice-banner .notice-text strong {
  color: #f59e0b;
  font-weight: 700;
}

/* Support Message Bubbles */
.chat-msg-row.msg-support-official .msg-bubble {
  background: #0f1c2e;
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.msg-avatar-support {
  background: #0b1122;
  padding: 2px;
  border: 1.5px solid #f59e0b !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.sender-support-name {
  color: #fbbf24 !important;
  font-weight: 800 !important;
}

/* Tactical Marked Hotspots Styling (Bogotá Heat Zones) */
.hotspot-pulse-marker {
  cursor: pointer;
  filter: drop-shadow(0 0 6px rgba(255, 23, 68, 0.75));
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease;
}

.hotspot-pulse-marker:hover {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.95)) brightness(1.25);
  transform: scale(1.2);
}

.leaflet-popup-content-wrapper {
  background: rgba(11, 17, 33, 0.95) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7) !important;
}

.leaflet-popup-tip {
  background: rgba(11, 17, 33, 0.95) !important;
}

/* ==========================================================================
   BEJA HEXAGONAL HIVE CARE ZONES (PANALES DE CUIDADO DE ALTA FRECUENCIA)
   ========================================================================== */
.hive-care-zone-polygon {
  transition: all 0.3s ease;
  cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(255, 23, 68, 0.45));
}

.hive-care-zone-polygon:hover {
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8)) brightness(1.3);
}

.hive-badge-icon {
  background: transparent;
  border: none;
}

.hive-hex-pin {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hive-hex-pin:hover {
  transform: scale(1.35);
}

.hive-hex-pin .hex-symbol {
  font-size: 26px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.hive-hex-pin.hex-crit .hex-symbol {
  color: #ff1744;
  filter: drop-shadow(0 0 8px #ff1744);
}

.hive-hex-pin.hex-warn .hex-symbol {
  color: #f59e0b;
  filter: drop-shadow(0 0 8px #f59e0b);
}

.hive-hex-pin.hex-acci .hex-symbol {
  color: #00d2ff;
  filter: drop-shadow(0 0 8px #00d2ff);
}

.hive-hex-pin .hex-cat-icon {
  font-size: 11px;
  position: relative;
  z-index: 2;
  margin-top: -1px;
}

.hive-cell-count-pill {
  position: absolute;
  top: -4px;
  right: -6px;
  background: #ff1744;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  border-radius: 8px;
  padding: 1px 4px;
  line-height: 1.1;
  border: 1px solid #ffffff;
  box-shadow: 0 0 6px rgba(255, 23, 68, 0.8);
  z-index: 5;
}

/* Honeycomb Care Zone Popup Card */
.hive-popup-card {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-width: 250px;
  max-width: 320px;
  color: #f8fafc;
  line-height: 1.4;
  padding: 4px;
}

.hive-popup-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.hive-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}

.hive-tag.tag-crit {
  background: rgba(239, 68, 68, 0.25);
  color: #ff4d6d;
  border: 1px solid rgba(239, 68, 68, 0.45);
}

.hive-tag.tag-warn {
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.hive-tag.tag-acci {
  background: rgba(0, 210, 255, 0.25);
  color: #38bdf8;
  border: 1px solid rgba(0, 210, 255, 0.45);
}

.hive-time-tag {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 700;
}

.hive-popup-title {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.hive-popup-desc {
  font-size: 11px;
  color: #cbd5e1;
  margin: 0 0 10px 0;
}

.hive-freq-meter {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 8px;
}

.freq-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  margin-bottom: 4px;
}

.freq-label-row span {
  color: #94a3b8;
}

.freq-label-row strong {
  color: #fbbf24;
}

.freq-meter-bar {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.freq-meter-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.freq-meter-fill.fill-crit {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.freq-meter-fill.fill-warn {
  background: linear-gradient(90deg, #10b981, #f59e0b);
}

.hive-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hive-meta-grid span {
  color: #64748b;
  display: block;
}

.hive-meta-grid strong {
  color: #f1f5f9;
}


/* ==========================================================================
   AJUSTES RESPONSIVE MÓVIL (S25 Ultra y pantallas angostas)
   Van al final a propósito: varias reglas base (.floating-top-metric-pill,
   .top-layer-pill-btn, .vert-tool-btn) estaban declaradas DESPUÉS de sus
   ajustes móviles y los anulaban; por eso en celular la barra de capas se
   salía de la pantalla, el header se cortaba y los elementos se encimaban.
   ========================================================================== */
@media (max-width: 899px) {
  /* --- Header: todo cabe en una línea, el buscador es lo que se encoge --- */
  .app-header {
    overflow: hidden;
    gap: 6px;
  }
  .brand-wrapper {
    gap: 6px;
  }
  .header-search-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin: 0 2px;
  }
  .desktop-wide-search {
    height: 36px !important;
    max-width: none !important;
  }
  .header-search-box {
    padding: 3px 4px 3px 10px;
  }
  .header-search-input {
    min-width: 0;
    text-overflow: ellipsis;
  }
  .header-actions {
    min-width: 0;
  }
  #cloud-sync-status-badge .pill-label {
    display: none;
  }
  .user-logged-name {
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* --- Barra superior del mapa: solo las capas, centradas y sin salirse --- */
  .floating-sector-badge-container,
  .floating-top-metric-pill {
    display: none !important;
  }
  #floating-desktop-metrics {
    top: 8px;
    left: 8px;
    right: 8px;
    justify-content: center;
  }
  .floating-top-layers-group {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .floating-top-layers-group::-webkit-scrollbar {
    display: none;
  }
  .top-layer-pill-btn {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 0.72rem;
  }

  /* --- Controles verticales: debajo de la barra de capas, más compactos --- */
  #desktop-map-controls {
    top: 58px !important;
    right: 8px !important;
    padding: 4px;
    gap: 2px;
    max-height: calc(100% - 58px - 150px);
    overflow-y: auto;
    scrollbar-width: none;
  }
  #desktop-map-controls::-webkit-scrollbar {
    display: none;
  }
  .vert-tool-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    font-size: 1.05rem;
  }
  /* El menú de horario se abre hacia la izquierda de la columna, no encima de ella */
  .floating-layer-menu {
    top: 0;
    right: calc(100% + 8px);
    width: min(190px, calc(100vw - 80px));
  }

  /* --- Aviso de proximidad: dentro de la pantalla y sin tapar el header --- */
  .geofence-banner {
    top: calc(54px + env(safe-area-inset-top, 0px) + 6px);
    left: 8px;
    right: 8px;
    padding: 8px 10px;
  }
  .banner-icon {
    font-size: 1.4rem;
  }

  /* --- Tarjeta "Atención Preventiva": por encima del botón SOS elevado --- */
  .floating-incident-card {
    bottom: 92px !important;
    width: calc(100% - 20px) !important;
    padding: 10px 12px;
    gap: 0;
    border-radius: 16px;
  }
  .incident-card-content {
    gap: 10px;
    min-width: 0;
  }
  .incident-title-row {
    min-width: 0;
    overflow: hidden;
  }
  .incident-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .incident-safety-badge {
    font-size: 0.64rem;
    padding: 4px 7px;
  }

  /* --- Popup del radar: ancho acotado para no chocar con los controles --- */
  .tactical-radar-popup .leaflet-popup-content {
    margin: 10px 12px;
    max-width: calc(100vw - 100px);
  }
  .tactical-radar-popup .popup-header {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* --- Panel inferior: nunca más alto que el espacio disponible --- */
  .app-sidebar-panels {
    max-height: min(75vh, calc(100% - 72px)) !important;
  }

  /* --- Avisos (toasts): encima de la barra inferior y del SOS --- */
  #toast-container {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

/* Teléfonos estándar (S25, S25 Ultra, iPhone): se libera espacio para el buscador */
@media (max-width: 480px) {
  .brand-subtitle-desktop,
  .header-search-icon,
  #gps-status-pill {
    display: none !important;
  }
  .beja-logo-img {
    width: 32px;
    height: 32px;
  }
  .top-layer-pill-btn {
    padding: 5px 8px;
    font-size: 0.68rem;
  }
  .incident-time-dot,
  .incident-time {
    display: none;
  }
}

/* Teléfonos muy angostos (≤360px, ej. Galaxy Fold cerrado) */
@media (max-width: 360px) {
  .brand-text-block {
    display: none;
  }
  .user-logged-name {
    display: none;
  }
}

/* Celular en horizontal: poca altura, controles y tarjeta más compactos */
@media (max-width: 899px) and (max-height: 520px) {
  #desktop-map-controls {
    max-height: calc(100% - 58px - 80px);
  }
  .vert-tool-btn {
    width: 32px;
    height: 32px;
  }
  .app-sidebar-panels {
    max-height: calc(100% - 68px) !important;
  }
}

/* El zoom nativo de Leaflet duplica los botones +/− de la columna derecha y en móvil
   quedaba medio escondido detrás de la barra inferior (se veía un "+" suelto). */
#citizen-map .leaflet-control-zoom {
  display: none !important;
}

/* Escritorio: el footer es fixed (42px) y el mapa se extendía por debajo, cortando
   la leyenda y el botón SOS. Se le reserva su espacio al contenedor. */
@media (min-width: 900px) {
  .app-viewport {
    padding-bottom: 42px;
  }
}

/* Laptops (900–1440px): el header no alcanzaba y el buscador quedaba aplastado */
@media (min-width: 900px) and (max-width: 1440px) {
  .brand-version-badge {
    display: none !important;
  }
  .desktop-header-nav {
    gap: 18px;
    margin: 0 8px;
  }
  .header-nav-link {
    font-size: 0.86rem;
  }
  .gps-coords-text,
  #cloud-sync-status-badge .pill-label {
    display: none;
  }
  .header-search-wrapper {
    min-width: 200px;
  }
}

@media (min-width: 900px) and (max-width: 1100px) {
  .brand-subtitle-desktop,
  .auth-btn-text-full {
    display: none;
  }
  .auth-btn-text-short {
    display: inline;
  }
  .desktop-header-nav {
    gap: 12px;
  }
  .header-search-wrapper {
    min-width: 150px;
  }
}

/* Pantallas medianas (tablets en horizontal): las píldoras decorativas de arriba chocaban con la barra de capas */
@media (min-width: 900px) and (max-width: 1100px) {
  .floating-geo-pill,
  .floating-top-metric-pill {
    display: none !important;
  }
}

/* Buscador de direcciones: los resultados y avisos se muestran DENTRO del panel (empujan el
   contenido hacia abajo) en vez de flotar encima de los botones Destino / Origen / Mi GPS. */
.route-search-wrapper .search-results-dropdown {
  position: static;
  margin-top: 6px;
  max-height: 240px;
  z-index: auto;
}
.search-message-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font-size: 0.76rem;
  line-height: 1.4;
}
.btn-search-message-close {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  font-size: 0.75rem;
}

@media (max-width: 899px) {
  /* Guía "Toca una calle para fijar DESTINO": debajo de la barra de capas y sin tapar los controles */
  .mobile-route-floating-guide {
    top: 58px;
    left: 8px;
    right: 56px;
    z-index: 26;
  }
}