/* Estilos adicionais para as novas fases */

/* Cores específicas para cada fase */
.phase-1-1 .location-icon {
  fill: #E31E24; /* Vermelho */
}

.phase-1-2 .location-icon {
  fill: #00A651; /* Verde */
}

.phase-1-3 .location-icon {
  fill: #D89B00; /* Amarelo/dourado */
}

.phase-2 .location-icon {
  fill: #007bff; /* Azul */
}

/* Estilos para ícones sem background */
.custom-leaflet-icon-no-bg {
  background: none !important;
  border: none !important;
}

/* Efeito de destaque para o painel de informações */
.station-info-panel.highlight {
  background: rgba(216, 155, 0, 0.1);
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(216, 155, 0, 0.3);
}

/* Responsividade melhorada */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 50vh;
    overflow-y: auto;
    z-index: 1000;
    border-radius: 20px 20px 0 0;
  }
  
  .map-container {
    height: calc(100vh - 35vh - 50vh);
    min-height: 300px;
  }
  
  .phase-checkboxes {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .phase-checkbox-custom {
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
  }
}

/* Melhorias visuais para os marcadores */
.station-icon-container svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: all 0.3s ease;
}

.station-icon-container:hover svg {
  transform: scale(1.1);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* Animação suave para os círculos de cobertura */
.leaflet-interactive {
  transition: all 0.3s ease;
}

/* Melhorias para o popup */
.leaflet-popup-content-wrapper {
  animation: popupFadeIn 0.3s ease-out;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}