body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
}

/* Estilo de la barra de navegación */
.navbar {
    background: linear-gradient(to right, #ffffff6f, rgba(100, 196, 222, 0.194)); /* Degradado similar al del botón */
    backdrop-filter: blur(10px); /* Desenfoque de fondo */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Borde más sutil */
    padding: 10px 20px; /* Relleno de la barra de navegación */
}

.navbar-logo {
    height: 40px; /* Ajusta la altura de la imagen según sea necesario */
    width: auto; /* Mantiene la proporción de la imagen */
}

/* Estilos para pantallas grandes (modo computadora) */
@media (min-width: 769px) {
    .navbar-logo {
        height: 50px; /* Ajusta el tamaño de la imagen para pantallas grandes */
    }
}

/* Estilos para pantallas pequeñas (modo móvil) */
@media (max-width: 768px) {
    .navbar-logo {
        height: 40px; /* Ajusta el tamaño de la imagen para pantallas pequeñas */
    }
}


/* Estilos para la imagen flotante */
.floating-image {
    animation: float 6s ease-in-out infinite; /* Aplica la animación */
}

.floating-image img {
    width: 100px;
    width: 340px; /* Ajusta el tamaño de la imagen */
}

/* Animación de flotación */
@keyframes float {
    0%, 100% {
        transform: translateY(0); /* Sin desplazamiento vertical al inicio y final */
    }
    50% {
        transform: translateY(-20px); /* Desplazamiento vertical en el centro de la animación */
    }
}

#map {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%; /* Ocupa toda la altura en pantallas grandes */
    width: 100%;
    z-index: 0; /* Asegura que el mapa esté en el fondo */
}

/* Estilos para pantallas grandes (modo computadora) */
@media (min-width: 769px) {
    .overlay {
        position: absolute;
        top: 0; /* Alinea al principio del mapa */
        left: 0;
        height: 100%; /* Ocupa toda la altura en pantallas grandes */
        width: 40%; /* Ocupa la mitad izquierda en pantallas grandes */
        z-index: 1; /* Asegura que el formulario esté sobre el mapa */
        display: flex;
        justify-content: center; /* Centra horizontalmente */
        align-items: center; /* Centra verticalmente */
        padding: 20px;
        box-sizing: border-box;
        background: linear-gradient(to right, rgb(255, 255, 255), rgba(100, 196, 222, 0.194)); /* Degradado con opacidad */
    }
    

    .left-side {
        width: 100%;
        max-width: 400px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centra verticalmente el contenido */
        align-items: center;
    }

    .form-container {
        background: #ffffff; /* Fondo blanco opaco */
        padding: 20px;
        border-radius: 12px; /* Bordes redondeados */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
        width: 100%;
        max-width: 400px; /* Ajusta el tamaño máximo del formulario */
    }

    h1 {
        font-family: 'Arial Black', 'Arial Bold', sans-serif; /* Tipografía gruesa */
        font-size: 1rem; /* Tamaño ajustado para pantallas grandes */
        font-weight: bold;
        background: linear-gradient(to right, #ff6f61, #de64a5); /* Degradado en tonos rosa y coral */
        -webkit-background-clip: text; /* Aplicar el degradado al texto */
        -webkit-text-fill-color: transparent; /* Hacer el texto transparente para mostrar el degradado */
        text-align: center; /* Centrar el texto */
        margin-bottom: 20px;
        color: #e21717; /* Color del texto para compatibilidad */
    }

    .input-group {
        display: flex;
        flex-direction: column; /* Ajusta la disposición en pantallas grandes */
        gap: 12px; /* Espacio entre el input y el botón */
    }

    .form-input {
        border: 2px solid #ff6f61; /* Borde en color coral */
        border-radius: 8px; /* Bordes redondeados */
        padding: 12px;
        outline: none;
        background: #fef2f2; /* Fondo rosa pálido */
        font-size: 1rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
        transition: border-color 0.3s, box-shadow 0.3s; /* Transición suave */
    }

    .form-input:focus {
        border-color: #de64a5; /* Cambia el borde al enfocarse */
        box-shadow: 0 4px 16px rgba(222, 100, 165, 0.3); /* Sombra más prominente al enfocarse */
        background: #fff4f7; /* Fondo rosa más claro al enfocarse */
    }

    .btn-search {
        border: none;
        border-radius: 25px; /* Bordes redondeados */
        padding: 12px 20px; /* Relleno ajustado */
        background: linear-gradient(to right, #ff6f61, #de64a5); /* Degradado en tonos coral y rosa */
        color: #fff;
        font-size: 1rem;
        cursor: pointer;
        transition: background 0.3s, transform 0.2s; /* Transición suave */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra del botón */
        text-transform: uppercase; /* Texto en mayúsculas */
        letter-spacing: 0.5px; /* Espaciado entre letras */
    }

    .btn-search:hover {
        background: linear-gradient(to right, #e65c6f, #d12a5b); /* Degradado más intenso en hover */
        transform: scale(1.03); /* Efecto de escala al pasar el ratón */
    }
}

/* Estilos para pantallas pequeñas (modo móvil) */
@media (max-width: 768px) {
    #map {
        height: 50%; /* Ocupa la mitad superior en móviles */
        width: 100%;
        z-index: 0; /* Asegura que el mapa esté detrás del formulario */
    }

    .overlay {
        position: absolute;
        top: 50%; /* Empuja la overlay a la mitad inferior del viewport */
        left: 0;
        height: 50%; /* Ocupa la mitad inferior del viewport */
        width: 100%;
        z-index: 1; /* Asegura que el formulario esté sobre el mapa */
        background: rgba(255, 255, 255, 0.9); /* Fondo blanco semitransparente */
        display: flex;
        flex-direction: column;
        padding: 15px; /* Ajusta el relleno para pantallas pequeñas */
        box-sizing: border-box;
        overflow-y: auto; /* Permite el desplazamiento vertical */
        overflow-x: hidden; /* Oculta el desplazamiento horizontal */
    }

    .left-side {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto; /* Permite que el contenedor se ajuste según el contenido */
        justify-content: center; /* Centra el contenido verticalmente */
    }

    .form-container {
        padding: 15px; /* Ajusta el relleno para pantallas pequeñas */
        background: rgba(255, 255, 255, 0.95); /* Fondo blanco más opaco */
        border-radius: 10px; /* Bordes redondeados más suaves */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
    }

    h1 {
        font-size: 1.8rem; /* Ajusta el tamaño del texto del título */
        margin-bottom: 15px; /* Espacio reducido en pantallas pequeñas */
        background: linear-gradient(to right, #ff6f61, #de64a5); /* Degradado en tonos rosa y coral */
        -webkit-background-clip: text; /* Aplicar el degradado al texto */
        -webkit-text-fill-color: transparent; /* Hacer el texto transparente para mostrar el degradado */
        text-align: center; /* Centra el texto */
        color: #e21717; /* Color del texto para compatibilidad */
    }

    .input-group {
        display: flex;
        flex-direction: column; /* Ajusta la disposición en pantallas pequeñas */
        gap: 15px; /* Espacio entre el input y el botón */
    }

    .form-input {
        border: 2px solid #ff6f61; /* Borde en color coral */
        border-radius: 8px; /* Bordes redondeados */
        padding: 12px; /* Relleno del input */
        outline: none;
        background: #fef2f2; /* Fondo rosa pálido */
        font-size: 1rem; /* Tamaño del texto del input */
        width: calc(100% - 30px); /* Ajusta el ancho del input para que se acomode bien */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
        transition: border-color 0.3s, box-shadow 0.3s; /* Transición suave */
    }

    .form-input:focus {
        border-color: #de64a5; /* Cambia el borde al enfocarse */
        box-shadow: 0 4px 12px rgba(222, 100, 165, 0.3); /* Sombra más prominente al enfocarse */
        background: #fff4f7; /* Fondo rosa más claro al enfocarse */
    }

    .btn-search {
        border: none;
        border-radius: 25px; /* Bordes redondeados */
        padding: 12px 20px; /* Relleno ajustado */
        background: linear-gradient(to right, #ff6f61, #de64a5); /* Degradado en tonos coral y rosa */
        color: #fff;
        font-size: 1rem;
        cursor: pointer;
        transition: background 0.3s, transform 0.2s; /* Transición suave */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra del botón */
        text-transform: uppercase; /* Texto en mayúsculas */
        letter-spacing: 0.5px; /* Espaciado entre letras */
        width: calc(100% - 30px); /* Ajusta el ancho del botón */
        text-align: center; /* Centra el texto del botón */
    }

    .btn-search:hover {
        background: linear-gradient(to right, #e65c6f, #d12a5b); /* Degradado más intenso en hover */
        transform: scale(1.03); /* Efecto de escala al pasar el ratón */
    }
}


/* Estilo para el contenedor del resultado */
#result {
    padding: 20px;
    border-radius: 10px; /* Bordes redondeados más prominentes */
    background-color: #e7c8b962; /* Fondo blanco */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Sombra más prominente */
    border: 1px solid #e1e1e1; /* Borde gris claro */
    max-width: 100%;
    margin: 20px auto 0; /* Margen superior para separar del botón */
    max-height: 300px; /* Altura máxima para permitir el scroll */
    overflow-y: auto; /* Permitir el desplazamiento vertical */
    overflow-x: hidden; /* Ocultar el desplazamiento horizontal */
}

/* Estilo para los párrafos dentro del contenedor de resultados */
#result p {
    margin: 7px 0; /* Espaciado vertical entre párrafos */
    font-size: 1rem; /* Tamaño de fuente */
    color: #555; /* Color de texto gris oscuro */
    line-height: 1.6; /* Altura de línea para mejor legibilidad */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Tipografía */
}

/* Estilo para etiquetas fuertes dentro de los párrafos */
#result p strong {
    color: #007bff; /* Color azul para las etiquetas fuertes */
    font-weight: 600; /* Negrita para mayor énfasis */
}

/* Estilo para el mensaje de error y advertencia */
.result {
    border: 1px solid #dee2e6; /* Borde gris más claro */
    background-color: #f8f9fa; /* Fondo gris claro */
}

.result .alert-info {
    border-color: #d9ecf2; /* Borde azul claro para la alerta informativa */
    background-color: #d9ecf2; /* Fondo azul claro */
    color: #31708f; /* Color de texto azul oscuro */
}

.result .alert-warning {
    border-color: #fff3cd; /* Borde amarillo claro para la alerta de advertencia */
    background-color: #fff3cd; /* Fondo amarillo claro */
    color: #856404; /* Color de texto amarillo oscuro */
}

.result .alert-danger {
    border-color: #f5c6cb; /* Borde rosa claro para la alerta de error */
    background-color: #f5c6cb; /* Fondo rosa claro */
    color: #721c24; /* Color de texto rosa oscuro */
}

/* Estilos personalizados para el scrollbar */
#result::-webkit-scrollbar {
    width: 8px; /* Ancho del scrollbar */
}

#result::-webkit-scrollbar-track {
    background: #f1f1f1; /* Fondo del track del scrollbar */
    border-radius: 10px; /* Bordes redondeados del track */
}

#result::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #ff6f61, #de64a5); /* Fondo del thumb con degradado */
    border-radius: 10px; /* Bordes redondeados del thumb */
    border: 2px solid #ffffff; /* Borde blanco alrededor del thumb */
}

#result::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to right, #e65c6f, #d12a5b); /* Fondo del thumb en hover */
}