/* Estilo del mapa */
        #map {
            height: 400px;
            width: 100%;
            margin-top: 10px;
            border-radius: 8px;
            position: relative; /* Para posicionar el overlay correctamente */
        }

     

        @keyframes blink-caret {
            from, to {
                border-color: transparent;
            }
            50% {
                border-color: #000;
            }
        }

        /* Estilos generales del popup */
        .popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 50; /* Asegurar que esté por encima de otros elementos */
            transition: opacity 0.3s ease, visibility 0.3s ease; /* Animación suave */
            opacity: 0; /* Inicialmente oculto */
            visibility: hidden; /* Inicialmente oculto */
        }

        .popup.visible {
            opacity: 1; /* Hacer visible */
            visibility: visible; /* Hacer visible */
        }

        .popup-content {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
            max-width: 500px;
            width: 90%;
            text-align: left; /* Alineación justificada */
            animation: slideDown 0.5s ease-out; /* Animación de entrada */
        }

        /* Animación para hacer que el popup aparezca suavemente */
        @keyframes slideDown {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Estilo del overlay de carga dentro del mapa */
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10; /* Asegurar que esté por debajo de los elementos interactivos */
            font-size: 1rem;
            color: #333;
            border-radius: 8px;
        }

        /* Estilos para los mensajes */
        #message {
            display: none; /* Ocultar por defecto */
        }

        #message.visible {
            display: block;
        }

        /* Estilo para las tarjetas en móvil */
        .card {
            background: white;
            padding: 16px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Shadow similar a Tailwind's shadow-md */
            margin-bottom: 16px;
        }