/* Estilo para el triángulo */
#profile-menu::before {
    content: ''; /* Necesario para que el pseudoelemento funcione */
    position: absolute;
    top: -10px; /* Coloca el triángulo justo encima del menú */
    right: 1rem; /* Ajusta horizontalmente */
    width: 0;
    height: 0;
    border-left: 10px solid transparent; /* Lado izquierdo del triángulo */
    border-right: 10px solid transparent; /* Lado derecho del triángulo */
    border-bottom: 10px solid white; /* Base del triángulo (color del menú) */
  }

  #notification-popup::before {
    content: ''; /* Necesario para que el pseudoelemento funcione */
    position: absolute;
    top: -10px; /* Coloca el triángulo justo encima del menú */
    right: 15rem; /* Ajusta horizontalmente */
    width: 0;
    height: 0;
    border-left: 10px solid transparent; /* Lado izquierdo del triángulo */
    border-right: 10px solid transparent; /* Lado derecho del triángulo */
    border-bottom: 10px solid white; /* Base del triángulo (color del menú) */
  }


  #message-popup::before {
    content: ''; /* Necesario para que el pseudoelemento funcione */
    position: absolute;
    top: -10px; /* Coloca el triángulo justo encima del menú */
    right: 1rem; /* Ajusta horizontalmente */
    width: 0;
    height: 0;
    border-left: 10px solid transparent; /* Lado izquierdo del triángulo */
    border-right: 10px solid transparent; /* Lado derecho del triángulo */
    border-bottom: 10px solid white; /* Base del triángulo (color del menú) */
  }

  /* Estilo base para el modo claro */
body {
    background-color: white;
    color: black;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .no-scroll {
    overflow: hidden;
    height: 100vh; /* Opcional, asegura que no se pueda desplazar */
}

  /* Estilo para el modo oscuro */
  body.dark-mode {
    background-color: #1f2937; /* Fondo oscuro */
    color: #ffffff; /* Texto claro */
  }

  /* Estilos adicionales para el switch */
  #dark-mode-toggle:checked + .bg-gray-300 {
    background-color: #3b82f6; /* Cambia el color del slider cuando está activado */
  }

  #dark-mode-toggle:checked + .bg-gray-300 + .translate-x-0 {
    transform: translateX(1.5rem); /* Mueve el círculo a la derecha */
  }


  /* Spinner de carga */
#loading-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Resultados de búsqueda */
#search-results {
    display: none; /* Oculto por defecto */
}

#search-results div {
    padding: 0.5rem 1rem;
    cursor: pointer;
}

#search-results div:hover {
    background-color: #f0f8ff;
}


#route-results {
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(-10px);
}

#route-results:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}
#route-results::-webkit-scrollbar {
    width: 8px;
}

#route-results::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 4px;
}

#route-results::-webkit-scrollbar-track {
    background-color: #f7fafc;
}