/* ═══════════════════════════════════════════════════════════════════════════
   MAPITA — Analytics Layer CSS
   Scope guards: todas las animaciones viven dentro .analytics-active
   para garantizar ZERO impacto de performance cuando el modo está OFF.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables propias (extienden variables-luxury.css) ──────────────────── */
:root {
  --al-halo-sm:   36px;
  --al-halo-md:   48px;
  --al-halo-lg:   64px;
  --al-anim-fast: 1.6s;
  --al-anim-med:  2.4s;
  --al-anim-slow: 3.2s;
  --rgb-al-blue: 27, 59, 111;
  --rgb-al-gold: 212, 175, 55;
  --rgb-al-red:  230, 57, 70;
  --rgb-al-green: 76, 175, 80;
}

/* ── Botón toggle Analytics ──────────────────────────────────────────────── */
#analytics-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 11px;
  /* Dimensiones fijas para evitar reflow al cambiar estado */
  min-width: 88px;
  box-sizing: border-box;
  border: 2px solid #1B3B6F;
  border-radius: 20px;
  background: white;
  color: #1B3B6F;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  /* Solo color y sombra cambian — sin cambios de layout */
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
  line-height: 1;
  margin-left: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
#analytics-toggle-btn:hover {
  background: #f0f4ff;
  box-shadow: 0 2px 8px rgba(27,59,111,0.18);
}
#analytics-toggle-btn.is-active {
  background: #1B3B6F;
  color: white;
  box-shadow: 0 3px 12px rgba(27,59,111,0.35);
}

/* Panel de controles analíticos (aparece bajo el botón) */
#analytics-controls-panel {
  display: none;
  /* position: fixed — coordinadas se calculan en JS */
  position: fixed;
  background: rgba(255,255,255,0.99);
  border: 1px solid #dde3f0;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 3000;
  gap: 6px;
  flex-direction: column;
  /* evitar que clics en el panel burbujeen al document listener */
  pointer-events: auto;
}
#analytics-controls-panel.visible {
  display: flex;
}
#analytics-controls-panel label {
  font-size: 11px;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 2px;
  display: block;
}
#analytics-controls-panel select {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid #d0d7e8;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  color: #1B3B6F;
  background: white;
  cursor: pointer;
  outline: none;
  margin-bottom: 6px;
}
#analytics-controls-panel .al-connections-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #2c3e50;
  cursor: pointer;
  padding: 4px 0;
}
#analytics-controls-panel .al-connections-toggle input[type=checkbox] {
  width: 14px;
  height: 14px;
  accent-color: #1B3B6F;
  cursor: pointer;
}

/* ── Wrapper del botón ───────────────────────────────────────────────────── */
#analytics-toggle-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Separador entre analytics ON/OFF y la sección de opciones */
.al-panel-divider {
  border: none;
  border-top: 1px solid #e8edf5;
  margin: 6px 0 4px;
}

/* Toggle switch para activar/desactivar analytics dentro del panel */
.al-activate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 6px;
}
.al-activate-label {
  font-size: 12px;
  font-weight: 700;
  color: #1B3B6F;
}
.al-toggle-switch {
  position: relative;
  width: 38px;
  height: 20px;
  flex-shrink: 0;
}
.al-toggle-switch input { opacity: 0; width: 0; height: 0; }
.al-toggle-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s;
}
.al-toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.al-toggle-switch input:checked + .al-toggle-slider { background: #1B3B6F; }
.al-toggle-switch input:checked + .al-toggle-slider::before { transform: translateX(18px); }

/* ── Sistema de Halos ────────────────────────────────────────────────────── */
/*
   .al-halo se inyecta como primer hijo del wrapper del marker Leaflet.
   Usa pseudo-elementos para los efectos (zero DOM extra).
*/
.al-halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}

.al-halo::before,
.al-halo::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

/* --- Estado: active (glow azul suave) --- */
.al-halo--active::before {
  width: var(--al-halo-md);
  height: var(--al-halo-md);
  background: radial-gradient(circle,
    rgba(var(--rgb-al-blue), 0.28) 0%,
    rgba(var(--rgb-al-blue), 0.08) 60%,
    transparent 100%);
  animation: none;
}
.analytics-active .al-halo--active::before {
  animation: alHaloBreathing var(--al-anim-med) ease-in-out infinite;
}

/* --- Estado: live (radar rojo — 2 anillos) --- */
.al-halo--live::before,
.al-halo--live::after {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(var(--rgb-al-red), 0.85);
  background: transparent;
  animation: none;
}
.analytics-active .al-halo--live::before {
  animation: alHaloRadar var(--al-anim-fast) linear infinite;
}
.analytics-active .al-halo--live::after {
  animation: alHaloRadar var(--al-anim-fast) linear infinite calc(var(--al-anim-fast) * -0.5);
}

/* --- Estado: tendencia (gold breathing) --- */
.al-halo--tendencia::before {
  width: var(--al-halo-lg);
  height: var(--al-halo-lg);
  background: radial-gradient(circle,
    rgba(var(--rgb-al-gold), 0.35) 0%,
    rgba(var(--rgb-al-gold), 0.10) 55%,
    transparent 100%);
  animation: none;
}
.analytics-active .al-halo--tendencia::before {
  animation: alHaloBreathing var(--al-anim-slow) ease-in-out infinite;
}

/* --- Estado: event (expansion ring dorado) --- */
.al-halo--event::before {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(var(--rgb-al-gold), 0.9);
  background: transparent;
  animation: none;
}
.analytics-active .al-halo--event::before {
  animation: alHaloExpand 2s ease-out infinite;
}

/* --- Estado: destacado (glow verde) --- */
.al-halo--destacado::before {
  width: var(--al-halo-sm);
  height: var(--al-halo-sm);
  background: radial-gradient(circle,
    rgba(var(--rgb-al-green), 0.30) 0%,
    transparent 70%);
  animation: none;
}
.analytics-active .al-halo--destacado::before {
  animation: alHaloBreathing var(--al-anim-med) ease-in-out infinite 0.5s;
}

/* ── Keyframes de halos ───────────────────────────────────────────────────── */
@keyframes alHaloBreathing {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.7; }
  50%       { transform: translate(-50%, -50%) scale(1.3); opacity: 1;   }
}

@keyframes alHaloRadar {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0;   }
}

@keyframes alHaloExpand {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 1;   }
  70%  { transform: translate(-50%, -50%) scale(2.8); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0;   }
}

/* ── Label analítico dentro del SVG (.al-svg-label) ─────────────────────── */
/*
   El <text class="al-svg-label"> se incluye en el SVG por createSvgIcon().
   Se oculta a zooms bajos para evitar ruido visual.
*/
.al-badge-hidden .al-svg-label {
  display: none;
}

/* ── Barras 3D ───────────────────────────────────────────────────────────── */
.al-bar-wrapper {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) perspective(120px) rotateX(12deg);
  transform-origin: bottom center;
  pointer-events: none;
  transition: height 0.4s ease;
}
.analytics-active .al-bar-wrapper {
  display: block;
}

.al-bar-svg rect {
  transition: height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              y      0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Líneas de conexión (polylines vía Leaflet) ──────────────────────────── */
.al-connection-line {
  /* Las polylines de Leaflet tienen su propia clase; esto es para tooltip */
}

/* Tooltip de conexión */
.al-connection-tooltip {
  background: rgba(15, 23, 42, 0.88);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.al-connection-tooltip::before { display: none; }

/* ── Indicador de modo activo (badge en esquina del mapa) ────────────────── */
.al-mode-indicator {
  display: none;
  position: absolute;
  bottom: 90px;
  left: 12px;
  z-index: 900;
  background: rgba(27, 59, 111, 0.92);
  color: white;
  border-radius: 20px;
  padding: 5px 12px 5px 8px;
  font-size: 11px;
  font-weight: 700;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.analytics-active .al-mode-indicator {
  display: flex;
}
.al-mode-indicator .al-mode-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4CAF50;
  animation: none;
}
.analytics-active .al-mode-indicator .al-mode-dot {
  animation: alHaloBreathing 1.8s ease-in-out infinite;
  will-change: transform, opacity;
}

/* ── Nuevo panel de controles rediseñado ────────────────────────────────── */
#analytics-controls-panel {
  min-width: 260px;
}
.al-panel-header {
  border-bottom: 1px solid #e8edf5;
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.al-panel-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1B3B6F;
  margin-bottom: 3px;
}
.al-panel-desc {
  display: block;
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
}
.al-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.al-field-label {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  margin: 0 !important;
}
.al-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d0d7e8;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  color: #1B3B6F;
  background: #f8faff;
  cursor: pointer;
  outline: none;
}
.al-select:focus {
  border-color: #1B3B6F;
  box-shadow: 0 0 0 2px rgba(27,59,111,0.1);
}
.al-field-hint {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.3;
}
/* Fila-botón de opción (reemplaza checkboxes individuales) */
.al-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* Mínimo 48px de altura — target táctil seguro */
  min-height: 48px;
  padding: 8px 10px;
  background: #f8faff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.al-option-row:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.al-option-row--active {
  background: #eff6ff;
  border-color: #1B3B6F;
}
.al-option-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.al-option-text {
  flex: 1;
  min-width: 0;
}
.al-option-text strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
}
.al-option-hint {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
  line-height: 1.3;
}
/* Indicador de estado (check / círculo vacío) en el extremo derecho */
.al-option-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: white;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}
.al-option-row--active .al-option-check {
  background: #1B3B6F;
  border-color: #1B3B6F;
}
.al-option-row--active .al-option-check::after {
  content: '';
  position: absolute;
  left: 5px; top: 2px;
  width: 5px; height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* ── Responsive Mobile ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #analytics-toggle-btn {
    font-size: 16px;
    padding: 5px 8px;
    gap: 0;
    min-width: 0;
    margin-left: 0;
  }
  #analytics-toggle-btn .btn-label {
    display: none;
  }

  /* Halos más pequeños en mobile para evitar superposición */
  .al-halo--active::before  { width: calc(var(--al-halo-md) * 0.7); height: calc(var(--al-halo-md) * 0.7); }
  .al-halo--tendencia::before { width: calc(var(--al-halo-lg) * 0.7); height: calc(var(--al-halo-lg) * 0.7); }
  .al-halo--destacado::before { width: calc(var(--al-halo-sm) * 0.7); height: calc(var(--al-halo-sm) * 0.7); }

  #analytics-controls-panel {
    right: auto;
    left: 0;
    min-width: 180px;
  }
}