/* ============================================================================
 * map.css — Estilos del mapa, marcadores y gráfico de elevación
 * ----------------------------------------------------------------------------
 * - Leaflet container
 * - Anulaciones de Leaflet para temas
 * - Marcadores: usuario (azul), sombra (rojo), inicio/fin (bandera)
 * - Popups con estilo del tema
 * - Tooltip de velocidad en el marcador
 * - Gráfico de elevación (canvas)
 * ============================================================================ */

/* Contenedor del mapa */
.mapa {
  width: 100%;
  height: 100%;
  min-height: 200px;
  background-color: var(--color-fondo-mapa);
  position: relative;
  z-index: var(--z-mapa);
}

/* Leaflet: quitar fondo transparente para heredar el tema */
.leaflet-container {
  background-color: var(--color-fondo-mapa) !important;
  font-family: var(--font-family-aplicada, inherit) !important;
}

/* Leaflet: controles de zoom, usar el color del tema */
.leaflet-control-zoom a {
  background-color: var(--color-panel) !important;
  color: var(--color-texto) !important;
  border-color: var(--color-borde-2) !important;
}
.leaflet-control-zoom a:hover {
  background-color: var(--color-hover-lista) !important;
}

/* Leaflet: barra de escala */
.leaflet-control-scale-line {
  background-color: var(--color-panel) !important;
  color: var(--color-texto) !important;
  border-color: var(--color-borde) !important;
}

/* Leaflet: atribución (minimalista, configurable) */
.leaflet-control-attribution {
  background-color: var(--color-panel) !important;
  color: var(--color-texto-3) !important;
  font-size: 10px !important;
  opacity: 0.8;
}
.leaflet-control-attribution a {
  color: var(--color-acento) !important;
}

/* Leaflet: popups */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background-color: var(--color-panel) !important;
  color: var(--color-texto) !important;
  box-shadow: var(--shadow-md) !important;
}
.leaflet-popup-content {
  margin: var(--space-2) var(--space-3) !important;
  font-size: var(--font-size-sm) !important;
}

/* ----------------------------------------------------------------------------
 * MARCADOR DE USUARIO (punto azul con halo)
 * ---------------------------------------------------------------------------- */
.marcador-usuario {
  width: 24px;
  height: 24px;
  background-color: var(--color-usuario);
  border: 3px solid #fff;
  border-radius: var(--radius-full);
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.5);
  position: relative;
}
.marcador-usuario::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid var(--color-usuario);
  border-radius: var(--radius-full);
  opacity: 0.4;
  animation: haloUsuario 2s ease-in-out infinite;
}
@keyframes haloUsuario {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.4); opacity: 0; }
}
/* Precisión del GPS (círculo de incertidumbre) */
.marcador-usuario-precision {
  background-color: var(--color-usuario);
  opacity: 0.15;
  border: 1px solid var(--color-usuario);
  border-radius: var(--radius-full);
}

/* ----------------------------------------------------------------------------
 * MARCADOR DE SOMBRA (pin fantasma rojo)
 * ---------------------------------------------------------------------------- */
.marcador-sombra {
  width: 28px;
  height: 28px;
  background-color: var(--color-sombra);
  border: 3px solid #fff;
  border-radius: var(--radius-full) var(--radius-full) var(--radius-full) 0;
  transform: rotate(-45deg);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
  position: relative;
}
.marcador-sombra::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-full);
  transform: rotate(45deg);
}
.marcador-sombra--delante {
  /* Cuando la sombra va por delante, halo verde */
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.3),
              0 4px 12px rgba(239, 68, 68, 0.5);
}
.marcador-sombra--detras {
  /* Cuando la sombra va por detrás, halo naranja */
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.3),
              0 4px 12px rgba(239, 68, 68, 0.5);
}

/* Icono SVG dentro del marcador SOMBRA */
.marcador-sombra-icono {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-sombra);
  background-color: var(--color-panel);
  border: 2px solid var(--color-sombra);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
}

/* ----------------------------------------------------------------------------
 * MARCADOR DE INICIO / FIN DE RUTA
 * ---------------------------------------------------------------------------- */
.marcador-inicio {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--boton-positivo-fondo);
  color: #fff;
  border: 3px solid #fff;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
}
.marcador-fin {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--boton-negativo-fondo);
  color: #fff;
  border: 3px solid #fff;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
}

/* ----------------------------------------------------------------------------
 * TOOLTIP DE VELOCIDAD (junto al marcador)
 * ---------------------------------------------------------------------------- */
.tooltip-velocidad {
  background-color: var(--color-panel) !important;
  color: var(--color-texto) !important;
  border: 1px solid var(--color-borde-2) !important;
  border-radius: var(--radius-sm) !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
  white-space: nowrap;
}
.tooltip-velocidad::before {
  border-top-color: var(--color-borde-2) !important;
}

/* ----------------------------------------------------------------------------
 * POLYLINE (rutas)
 * ---------------------------------------------------------------------------- */
/* La ruta activa del usuario */
.ruta-usuario {
  stroke: var(--color-usuario);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
/* La ruta de la SOMBRA (estilo discontinuo) */
.ruta-sombra {
  stroke: var(--color-sombra);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 8, 6;
  fill: none;
  opacity: 0.85;
}
/* Ruta del histórico (atenuada) */
.ruta-historico {
  stroke: var(--color-acento);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
  fill: none;
}

/* ----------------------------------------------------------------------------
 * (Perfil de elevación eliminado por solicitud del usuario)
 * ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
 * COMPÁS del mapa (cuando el botón de brújula se usa para orientar al norte)
 * ---------------------------------------------------------------------------- */
.boton-mapa--brujula-activa .icono {
  color: var(--color-acento);
  transform: rotate(0deg);
  transition: transform 240ms ease-out;
}

/* ----------------------------------------------------------------------------
 * LEAFLET: paneles adicionales (sombra, animaciones)
 * ---------------------------------------------------------------------------- */
.leaflet-pane { z-index: auto; }
.leaflet-overlay-pane { z-index: 2; }
.leaflet-marker-pane { z-index: 3; }
.leaflet-popup-pane { z-index: 4; }
.leaflet-tooltip-pane { z-index: 5; }

/* Animación de "dibujar" la polyline */
.ruta-usuario-animacion {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dibujarRuta 1.5s ease-out forwards;
}
@keyframes dibujarRuta {
  to { stroke-dashoffset: 0; }
}

/* Cuando el mapa-wrapper está en pantalla completa, ocupar todo */
.mapa-wrapper:fullscreen,
.mapa-wrapper:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  background: var(--color-fondo-mapa);
}

/* Leaflet: controles de zoom visibles en pantalla completa */
.mapa-wrapper:fullscreen .leaflet-container,
.mapa-wrapper:-webkit-full-screen .leaflet-container {
  width: 100% !important;
  height: 100% !important;
}