// Leaflet Map Styles
.vehicle-marker {
  background: transparent !important;
  border: none !important;
  
  .marker-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border: 2px solid white;
    
    &.moving, &.transmisionNormal {
      background: #28a745;
      animation: pulse-moving 2s infinite;
    }
    
    &.stopped, &.parado {
      background: #dc3545;
    }
    
    &.speeding, &.excesoVelocidad {
      background: #ff6b35;
      animation: pulse-moving 1s infinite;
    }
    
    &.no-coverage, &.sinCobertura {
      background: #f39c12;
      color: #000000;
    }
    
    &.maintenance, &.mantenimiento {
      background: #3498db;
    }
  }
}

@keyframes pulse-moving {
  0% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
  }
}

@keyframes pulse-moving-dark {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.8);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(0, 255, 136, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 136, 0);
  }
}

// Vehicle popup styles
.vehicle-popup {
  min-width: 200px;
  
  h6 {
    margin-bottom: 10px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  p {
    margin: 5px 0;
    font-size: 13px;
    color: #666;
    
    strong {
      color: #333;
    }
  }
}

// Dark theme support
[data-theme="dark"] {
  .vehicle-popup {
    h6 {
      color: #ffffff !important; // Completamente blanco
    }
    
    p {
      color: #ffffff !important; // Completamente blanco
      
      strong {
        color: #ffffff !important; // Completamente blanco
      }
    }
  }
  
  // Dark theme markers - colores vibrantes para resaltar
  .vehicle-marker {
    .marker-icon {
      &.moving {
        background: #00ff88 !important; // Verde vibrante para resaltar
        color: #ffffff !important; // Icono blanco
        box-shadow: 0 2px 12px rgba(0, 255, 136, 0.6);
        animation: pulse-moving-dark 2s infinite;
        border: 2px solid #ffffff !important; // Borde blanco para contraste
      }
      
      &.stopped {
        background: #ff4757 !important; // Rojo vibrante para resaltar
        color: #ffffff !important; // Icono blanco
        box-shadow: 0 2px 12px rgba(255, 71, 87, 0.6);
        border: 2px solid #ffffff !important; // Borde blanco para contraste
      }
    }
  }
}

// Map container styles
#world-map-marker {
  #leaflet-map {
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
}

// Leaflet control styles
.leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
  
  a {
    background: white !important;
    color: #333 !important;
    border: none !important;
    
    &:hover {
      background: #f8f9fa !important;
    }
  }
}

.leaflet-control-scale {
  background: rgba(255,255,255,0.8) !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  color: #333 !important;
}

// Dark theme for controls
[data-theme="dark"] {
  .leaflet-control-zoom {
    a {
      background: #2c3e50 !important;
      color: #ffffff !important; // Completamente blanco
      
      &:hover {
        background: #34495e !important;
        color: #ffffff !important; // Completamente blanco
      }
    }
  }
  
  .leaflet-control-scale {
    background: rgba(44, 62, 80, 0.8) !important;
    border-color: #34495e !important;
    color: #ffffff !important; // Completamente blanco
  }
  
  // Asegurar que todos los textos en el mapa sean blancos
  .leaflet-popup-content {
    color: #ffffff !important;
    
    * {
      color: #ffffff !important;
    }
  }
  
  .leaflet-popup-tip {
    background: #2c3e50 !important;
  }
  
  .leaflet-popup-content-wrapper {
    background: #2c3e50 !important;
    color: #ffffff !important;
  }
  
  // Forzar texto blanco en todos los elementos del mapa
  .leaflet-container {
    color: #ffffff !important;
    
    * {
      color: #ffffff !important;
    }
  }
  
  // Mejorar contraste del texto en CartoDB Dark
  .leaflet-tile-container {
    filter: brightness(0.95) contrast(1.05);
  }

  // Dark theme markers - colores vibrantes para resaltar
  .vehicle-marker {
    .marker-icon {
      &.moving, &.transmisionNormal {
        background: #00ff88 !important; // Vibrant green
        color: #ffffff !important; // White icon
        box-shadow: 0 2px 12px rgba(0, 255, 136, 0.6);
        animation: pulse-moving-dark 2s infinite;
        border: 2px solid #ffffff !important; // White border
      }
      &.stopped, &.parado {
        background: #ff4757 !important; // Vibrant red
        color: #ffffff !important; // White icon
        box-shadow: 0 2px 12px rgba(255, 71, 87, 0.6);
        border: 2px solid #ffffff !important; // White border
      }
      &.speeding, &.excesoVelocidad {
        background: #ff6b35 !important; // Vibrant orange
        color: #ffffff !important; // White icon
        box-shadow: 0 2px 12px rgba(255, 107, 53, 0.6);
        animation: pulse-moving-dark 1s infinite;
        border: 2px solid #ffffff !important; // White border
      }
      &.no-coverage, &.sinCobertura {
        background: #ffd93d !important; // Vibrant yellow
        color: #000000 !important; // Black icon
        box-shadow: 0 2px 12px rgba(255, 217, 61, 0.6);
        border: 2px solid #ffffff !important; // White border
      }
      &.maintenance, &.mantenimiento {
        background: #3742fa !important; // Vibrant blue
        color: #ffffff !important; // White icon
        box-shadow: 0 2px 12px rgba(55, 66, 250, 0.6);
        border: 2px solid #ffffff !important; // White border
      }
    }
  }
}