/* ==========================================
   MAPA DE COBERTURA GOOGLE MAPS
   ========================================== */

/* Contenedor principal del mapa */
#colombia-coverage-map {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(0, 191, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 191, 255, 0.2);
}

/* Contenedor de Google Maps */
.google-maps-container {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: 15px;
  overflow: hidden;
}

.google-maps-container iframe {
  transition: all 0.3s ease;
  filter: brightness(0.9) contrast(1.1);
}

.google-maps-container:hover iframe {
  filter: brightness(1.1) contrast(1.2);
  transform: scale(1.01);
}

/* Overlay de marcadores */
.coverage-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
}

/* Marcadores de ciudades */
.coverage-marker {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  z-index: 15;
  transition: all 0.3s ease;
}

.coverage-marker:hover {
  transform: scale(1.2);
  z-index: 20;
}

/* Posicionamiento de marcadores por ciudad
   Coordenadas basadas en el embed de Google Maps centrado en Colombia (4.57°N, -76.12°W)
   con zoom level ~6 mostrando todo el territorio */
.coverage-marker.bogota {
  top: 56%;
  left: 58%;
  transform: translate(-50%, -50%);
}

.coverage-marker.medellin {
  top: 46%;
  left: 48%;
  transform: translate(-50%, -50%);
}

.coverage-marker.cali {
  top: 67%;
  left: 37%;
  transform: translate(-50%, -50%);
}

.coverage-marker.barranquilla {
  top: 14%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.coverage-marker.cartagena {
  top: 18%;
  left: 40%;
  transform: translate(-50%, -50%);
}

.coverage-marker.bucaramanga {
  top: 38%;
  left: 58%;
  transform: translate(-50%, -50%);
}

/* Pin de marcador con branding Paantec "P" */
.marker-pin {
  width: 36px;
  height: 36px;
  background: var(--paantec-primary, #0B1D78);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(11, 29, 120, 0.4);
  border: 2px solid white;
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.marker-letter {
  transform: rotate(45deg);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
}

.marker-pin:hover {
  transform: rotate(-45deg) scale(1.2);
}

.marker-pulse {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(11, 29, 120, 0.3);
  animation: marker-pulse 2s ease-out infinite;
  z-index: 1;
}

@keyframes marker-pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Punto del marcador (legacy) */
.marker-dot {
  width: 16px;
  height: 16px;
  background: linear-gradient(45deg, #005EB8, #00BFFF);
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  position: relative;
  box-shadow:
    0 0 15px rgba(0, 191, 255, 0.6),
    0 0 30px rgba(0, 191, 255, 0.3);
  animation: markerPulse 2s ease-in-out infinite;
}

.marker-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(0, 191, 255, 0.4);
  border-radius: 50%;
  animation: markerRipple 2s ease-out infinite;
}

/* Etiqueta del marcador */
.marker-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.marker-label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
}

.coverage-marker:hover .marker-label {
  opacity: 1;
  transform: translateX(-50%) translateY(2px);
}

/* Animaciones */
@keyframes markerPulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 15px rgba(0, 191, 255, 0.6),
      0 0 30px rgba(0, 191, 255, 0.3);
  }

  50% {
    transform: scale(1.1);
    box-shadow:
      0 0 20px rgba(0, 191, 255, 0.8),
      0 0 40px rgba(0, 191, 255, 0.5);
  }
}

@keyframes markerRipple {
  0% {
    width: 30px;
    height: 30px;
    opacity: 0.6;
  }

  100% {
    width: 60px;
    height: 60px;
    opacity: 0;
  }
}

/* Tooltip mejorado para marcadores */
.coverage-marker::after {
  content: attr(data-city) '\A' attr(data-phone);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: linear-gradient(135deg, #005EB8, #0D2C54);
  color: white;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.8rem;
  white-space: pre-line;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  min-width: 150px;
}

.coverage-marker::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  border: 8px solid transparent;
  border-top-color: #0D2C54;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1001;
}

.coverage-marker:hover::after,
.coverage-marker:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-5px);
}

/* Efectos de hover mejorados */
.coverage-marker:hover .marker-pin {
  transform: rotate(-45deg) scale(1.2);
}

.coverage-marker:hover .marker-dot {
  animation: markerPulseHover 1s ease-in-out infinite;
  transform: scale(1.2);
}

@keyframes markerPulseHover {

  0%,
  100% {
    box-shadow:
      0 0 20px rgba(0, 191, 255, 0.8),
      0 0 40px rgba(0, 191, 255, 0.5);
  }

  50% {
    box-shadow:
      0 0 30px rgba(0, 191, 255, 1),
      0 0 60px rgba(0, 191, 255, 0.7);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .google-maps-container {
    height: 300px;
  }

  .marker-dot {
    width: 12px;
    height: 12px;
  }

  .marker-dot::before {
    width: 24px;
    height: 24px;
  }

  .coverage-marker::after {
    font-size: 0.7rem;
    padding: 8px 12px;
    min-width: 120px;
  }

  .marker-label {
    font-size: 0.7rem;
    padding: 3px 6px;
  }
}

/* Efectos de carga */
.google-maps-container {
  position: relative;
}

.google-maps-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #005EB8, #3498db, #87CEEB, #005EB8);
  border-radius: 15px;
  z-index: -1;
  animation: borderGlow 4s linear infinite;
  background-size: 400% 400%;
}

@keyframes borderGlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Hover effects para el contenedor */
#colombia-coverage-map:hover {
  transform: translateY(-5px);
  box-shadow:
    0 30px 80px rgba(0, 94, 184, 0.4),
    0 0 60px rgba(0, 191, 255, 0.2);
}

/* Efectos de partículas flotantes para el mapa */
.google-maps-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 70%, rgba(0, 191, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(0, 191, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 5;
  border-radius: 15px;
}

/* Accesibilidad */
.coverage-marker:focus {
  outline: 2px solid #005EB8;
  outline-offset: 2px;
}

.coverage-marker:focus:not(:focus-visible) {
  outline: none;
}

/* Estados activos */
.coverage-marker.active .marker-pin {
  background: linear-gradient(45deg, #FFD700, #FFA500);
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.6);
}

.coverage-marker.active .marker-dot {
  background: linear-gradient(45deg, #FFD700, #FFA500);
  animation: markerPulseActive 1s ease-in-out infinite;
}

@keyframes markerPulseActive {

  0%,
  100% {
    box-shadow:
      0 0 20px rgba(255, 215, 0, 0.8),
      0 0 40px rgba(255, 215, 0, 0.5);
  }

  50% {
    box-shadow:
      0 0 30px rgba(255, 215, 0, 1),
      0 0 60px rgba(255, 215, 0, 0.7);
  }
}