html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
        background: radial-gradient(circle at center, #05183c 0%,rgb(3, 17, 42) 100%);
}

#map {
    height: calc(100vh - 50px); /* Ajustar la altura del mapa para que ocupe todo el espacio disponible menos la altura del navbar */
    width: 100%;
    z-index: 1;
    position: relative;
    border-radius: 30px; /* Redondeo de bordes */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Sombra suave */
}
  

  

/* Navbar */
    .navbar-orange {
    background-color: #052153;
    border-bottom: 2px solid #052153;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding-top: 10px;
    padding-bottom: 10px; /* Dejá que el contenido defina la altura */
}

    
    .navbar-brand {
        font-size: 1.7rem; 
        color: #ffffff; 
        font-weight: 700;
        letter-spacing: 1px;
        transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
    }
        
    .navbar-brand:hover {
        color: #ffd700; 
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
    }


    .navbar-nav {
        flex: 1;
        justify-content: flex-end; 
    }

    .navbar-nav .nav-item .nav-link {
        color: #ffffff;
        font-size: 1.1rem;
        margin-right: 15px;
        transition: color 0.3s ease-in-out; 
    }
    
    .navbar-nav .nav-item .nav-link:hover {
        color: #ffd700; 
    }
    
    .welcome-message {
        color: #fff; 
        font-size: 1rem;
        font-weight: bold;
        margin-left: 20px; 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        text-decoration: none; 
    }
    
    .welcome-message:hover {
        color: #fff; 
        text-decoration: none;
    }

    .btn-outline-orange {
        color: #ff9800;
        border-color: #ff9800;
    }
    
    .btn-outline-orange:hover {
        color: #fff;
        background-color: #ff9800;
        border-color: #ff9800;
    }

    h6{
        color:#89c7d3 ;
    }

    #suggestions {
        border: 1px solid #ddd;
        max-height: 200px;
        overflow-y: auto;
        z-index: 999;
        background-color: white;
        width: 100%;
        position: absolute;
        top: 100%; 
        left: 0;
    }
    .suggestion-item {
        padding: 10px;
        cursor: pointer;
    }
    .suggestion-item:hover {
        background-color: #f0f0f0;
    }

  
    /* Responsive */
        @media (max-width: 992px) {
            .navbar-brand {
                font-size: 1.5rem; /* Ajusta el tamaño de la fuente en pantallas más pequeñas */
            }
        
            .navbar-nav {
                flex-direction: column; /* Cambia la dirección de los elementos en pantallas pequeñas */
                align-items: center; /* Centra los elementos en pantallas pequeñas */
            }
        
            .navbar-nav .nav-item {
                margin-right: 0; /* Elimina el margen en pantallas pequeñas */
                margin-bottom: 10px; /* Añade un margen inferior en pantallas pequeñas */
            }
        }
    
.btn-orange {
    background-color: rgb(255, 157, 0);
}

.label1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: larger;
}



/*Register*/
.card {
    border: none; /* Quita el borde predeterminado */
  border-radius: 15px; /* Redondeo */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09); /* Sombra sutil */
  background-color: #f0f0f0;
}

.card-title {
    font-weight: bold;
    font-size: 24px;
    color: #333;
}

/* Inputs */
.form-control {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 50px; /* Bordes redondeados en forma de píldora */
    background-color: #f3f4f6; /* Fondo suave */
    border: 1px solid #ced4da; /* Color de borde suave */
    transition: all 0.3s ease; /* Transición suave */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente profesional */
}

.form-control:focus {
    background-color: #ffffff; /* Cambia el fondo al hacer foco */
    border-color: #4ba6b9; /* Color de borde al hacer foco */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.2); /* Sombra más definida al hacer foco */
    outline: none; /* Eliminar borde predeterminado */
  }

  .btn-primary {
    background-color: #4ba6b9;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #367b89;
}

label, label.label1, label.venda-su-servicio {
    font-size: 18px;
    font-weight: bold;
    color: #666;
}
.btn-ingresar-custom {
    background-color: #545375; /* o el color que quieras */
    border-color: #6c63ff;
    color: white;
}

.btn-ingresar-custom:hover {
    background-color: #574fd6;
    border-color: #574fd6;
}

/* Inputs select */
.form-select {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 50px; /* Bordes redondeados en forma de píldora */
    background-color: #f3f4f6; /* Fondo suave */
    border: 1px solid #ced4da; /* Color de borde suave */
    transition: all 0.3s ease; /* Transición suave */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente profesional */
}

.form-select:focus {
    background-color: #ffffff; /* Cambia el fondo al hacer foco */
    border-color: #ff9800; /* Color de borde al hacer foco */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.2); /* Sombra más definida al hacer foco */
    outline: none; /* Eliminar borde predeterminado */
  }

/*Editar perfil*/
.file-label {
    cursor: pointer; /* Cambia el cursor al pasar sobre el label */
    display: inline-block; /* Asegura que se comporte como un bloque en línea */
    background-color: #ff9800; /* Azul predeterminado */
    color: white; /* Color del texto */
    font-weight: bold; /* Texto en negrita */
    padding: 0.5rem 1rem; /* Espaciado interno */
    border-radius: 50px; /* Bordes redondeados */
    transition: background-color 0.3s ease; /* Efecto suave en hover */
    font-family: Arial, Helvetica, sans-serif;
}

.file-label:hover {
    background-color: #e28a06; /* Color en hover más oscuro */
}

.hidden {
    display: none; /* Oculta el input */
}

/* Estilos para ambos botones */
.btn {
    border-radius: 25px; /* Bordes bien redondeados */
    padding: 0.7rem 1.5rem; /* Tamaño más grande */
    font-size: 1rem; /* Texto más grande */
    font-weight: bold; /* Negrita para resaltar el texto */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

/* Estilos específicos para el botón de "Descartar cambios" */
.btn-secondary {
    background-color: #6c757d; /* Gris */
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268; /* Oscurecer el gris en hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada en hover */
}

/* Estilos específicos para el botón de "Guardar" */
.btn-success {
    background-color: #28a745; /* Verde */
    color: white;
}

.btn-success:hover {
    background-color: #218838; /* Oscurecer el verde en hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada en hover */
}

/* Enfoque para ambos botones (accesibilidad) */
.btn:focus {
    outline: none; /* Eliminar borde por defecto */
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25); /* Sombra de enfoque */
}

/* Asegura que el input no tenga overflow */
.tagify {
    white-space: nowrap; /* Evitar que los tags se ajusten en múltiples líneas */
    overflow: hidden; /* Ocultar el contenido que sobrepasa el input */
    text-overflow: ellipsis; /* Mostrar "..." si es necesario */
    padding: 1px; /* Ajustar padding para darle espacio a los tags */
    max-width: 100%; /* Asegurar que no exceda el ancho disponible */
    border-radius: 25px;
    box-sizing: border-box; /* Incluye padding y bordes dentro del ancho total */
}

/* Asegura que Tagify se ajuste bien en dispositivos móviles o pantallas pequeñas */
.tagify__input {
    min-width: 50px; /* Evitar que el input colapse demasiado cuando no hay tags */
    width: auto; /* Que se ajuste dinámicamente según el contenido */
}

/* Estilo general del carrusel */
#rubroCarousel {
    max-width: 500px; /* Ajusta el ancho máximo del carrusel */
    margin: 0 auto; /* Centra el carrusel en la página */
    border-radius: 10px; /* Bordes redondeados para el contenedor */
    overflow: hidden; /* Oculta cualquier desbordamiento de las imágenes */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Sombra para darle un efecto elevado */
}

/* Estilos para las imágenes del carrusel */
#rubroCarousel .carousel-item img {
    width: 100%; /* Asegura que las imágenes ocupen todo el ancho del carrusel */
    height: 200px; /* Altura fija para mantener consistencia */
    object-fit: cover; /* Ajusta el recorte de las imágenes sin deformarlas */
    transition: transform 0.3s ease; /* Animación suave al hacer hover */
}

#rubroCarousel .carousel-item img:hover {
    transform: scale(1.05); /* Efecto de zoom al pasar el cursor */
}

/* Estilos para los textos de los rubros */
#rubroCarousel .carousel-caption {
    background-color: rgba(0, 0, 0, 0.6); /* Fondo semitransparente */
    padding: 15px; /* Espacio interno para los textos */
    border-radius: 5px; /* Bordes redondeados */
    color: #fff; /* Color del texto */
}

/* Botones de navegación del carrusel */
#rubroCarousel .carousel-control-prev-icon,
#rubroCarousel .carousel-control-next-icon {
    background-color: #ff5733; /* Color personalizado para los íconos de navegación */
    border-radius: 50%; /* Hacerlos redondos */
    padding: 10px; /* Tamaño del ícono */
}

/* Texto del botón "Anterior" y "Siguiente" solo visible para lectores de pantalla */
#rubroCarousel .sr-only {
    display: none;
}



/* Estilo de la sección Sobre Nosotros */
.about-section {
    background-color: #ffffff; /* Blanco para destacar */
    border-radius: 10px;
    padding: 20px;
}

.about-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
}

.about-title {
    color: #ff6347; /* Usa el color que prefieras, aquí es un tono de rojo */
    font-weight: bold;
}

.carousel-caption h5 {
    font-size: 1.5rem;
}

.carousel-caption p {
    font-size: 1rem;
}

@media (max-width: 768px) {
    .carousel-caption h5 {
        font-size: 1.2rem;
    }


    .carousel-caption p {
        font-size: 0.9rem;
    }
}
@media (max-width: 768px) {
    .carousel-caption {
        display: block !important;
        text-align: center;
    }
}

.navbar-logo {
    height: 85px;
    width: auto; /* Mantén las proporciones originales */
    max-width: 100%; /* Asegura que no exceda el contenedor */
    max-height: 85px;
    margin-bottom: 2px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efectos suaves */
}





/* Laptops pequeñas y tablets grandes (1024px a 1200px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .navbar-logo {
        max-height: 80px; /* Tamaño adecuado para laptops pequeñas y tablets grandes */
        margin-bottom: -5px;
    }
}

/* Tablets (horizontal y vertical, 768px a 1024px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .navbar-logo {
        max-height: 80px; /* Tamaño para tablets */
        margin-top: -5px;
    }
}

@media (min-width: 768px) and (max-width: 1018px) {
    .navbar-logo {
        max-height: 80px; /* Tamaño para tablets */
        margin-top: -5px;
    }
}

/* Dispositivos medianos (teléfonos grandes y tablets pequeñas, hasta 768px) */
@media (max-width: 768px) {
    .navbar-logo {
        max-height: 80px; /* Reduce el tamaño en pantallas medianas */
        margin-top: -5px;
    }
}

/* Teléfonos pequeños y muy pequeños (vertical y horizontal, hasta 576px) */
@media (max-width: 576px) {
    .navbar-logo {
        max-height: 65px; /* Tamaño compacto */
        margin-top: -5px;
    }
}

/* Estilos adicionales con flexbox */
.row {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente */
    justify-content: center; /* Centra verticalmente si hay más de un elemento */
}

/* CSS para centrar los botones en el contenedor */
.col-12.d-flex.justify-content {
    display: flex;               /* Usar flexbox */
    justify-content: center;     /* Centrar los botones horizontalmente */
    gap: 10px;                   /* Espacio entre los botones */
    align-items: center;         /* Centrar verticalmente, si es necesario */
}

/* Contenedor del switch */
.mb-3 {
    font-family: Arial, sans-serif;
    margin-bottom: 20px;
}

/* Estilo del label */
/* Estilo del label */
.mb-3 .form-label {
    font-size: 18px; /* Un tamaño de fuente ligeramente mayor */
    color: #333; /* Color del texto */
    margin-bottom: 12px; /* Un margen un poco mayor para separación */
    font-weight: 600; /* Peso más destacado para mejor visibilidad */
    line-height: 1.5; /* Espaciado entre líneas */
    background-color: #f9fafb; /* Fondo más suave y elegante */
    padding: 8px 12px; /* Añadir relleno alrededor del texto para hacerlo más cómodo visualmente */
    border-radius: 5px; /* Bordes redondeados para un estilo más suave */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera para un efecto de elevación */
    display: inline-block; /* Hace que el label se comporte como un bloque inline */
    transition: all 0.3s ease; /* Transición suave para interacciones */
}

/* Efecto al pasar el mouse por encima */
.mb-3 .form-label:hover {
    background-color: #e3e7ec; /* Cambio sutil de color en el fondo */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Aumentar la sombra para resaltar */
}
/* Efecto al enfocar el input asociado */
.mb-3 .form-label:focus-within {
    border: 2px solid #4caf50; /* Resaltar con un borde verde cuando el input esté enfocado */
    padding: 7px 11px; /* Reducir ligeramente el relleno al hacer foco */
}

/* Contenedor del switch */
.form-check.form-switch {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alineación predeterminada */
}

/* Estilo base del switch */
.form-check-input {
    width: 40px; /* Mantener el tamaño básico del switch */
    height: 20px; /* Mantener la altura básica */
    background-color: #ccc; /* Color base */
    border-radius: 50px; /* Bordes redondeados */
    position: relative;
    appearance: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transición suave */
    border: 2px solid #ccc;
}



/* Cuando el switch está activado */
.form-check-input:checked {
    background-color: #4caf50; /* Verde cuando está activado */
    border-color: #4caf50;
}

/* Movimiento del círculo cuando está activado */
.form-check-input:checked::before {
    transform: translateX(20px); /* Desplazamiento hacia la derecha */
    background-color: #28a745;
}

/* Personalización de enfoque */
.form-check-input:focus {
    outline: none; /* Eliminar borde predeterminado del navegador */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* Sombra sutil verde */
}


/* Estilos para el título h3 */
.card-title {
    font-size: 26px; /* Tamaño de fuente adecuado para un diseño profesional */
    color: #333; /* Color oscuro para un toque profesional */
    font-weight: 600; /* Peso moderado para mayor claridad sin ser demasiado fuerte */
    margin-bottom: 20px; /* Espacio adecuado debajo del título */
    letter-spacing: 0.5px; /* Un pequeño espaciado entre letras para dar mayor claridad */
    line-height: 1.5; /* Buena altura de línea para facilitar la lectura */
    text-align: center; /* Centrar el texto para un aspecto más equilibrado */
    text-transform: capitalize; /* Capitalizar la primera letra de cada palabra para darle un toque más elegante */
}

/* Estilo para el tooltip */
.card-title[data-bs-toggle="tooltip"]:hover {
    color: #0056b3; /* Cambiar a un azul suave en el hover */
}

/* Estilo de la caja del título */
.card-title {
    border-bottom: 2px solid #e0e0e0; /* Añadir una línea sutil debajo para separar el título */
    padding-bottom: 10px; /* Espacio extra para el borde */
}

/* Hover - efecto sutil */
.card-title:hover {
    color: #007bff; /* Cambiar el color cuando se pasa el ratón, pero de forma discreta */
    cursor: pointer; /* Cambiar el cursor para indicar que el título es interactivo */
}

/* Estilo para .label1 y .venda */
.label1, .venda {
    font-size: 18px; /* Tamaño adecuado para un subtítulo */
    color: #555; /* Color gris oscuro para un tono profesional, pero suave */
    font-weight: 600; /* Peso moderado para el subtítulo */
    margin-bottom: 10px; /* Espacio debajo del subtítulo para separar de los contenidos */
    line-height: 1.4; /* Altura de línea para mejorar la legibilidad */
    text-transform: uppercase; /* Convierte el texto a mayúsculas para hacerlo más destacado */
    letter-spacing: 1px; /* Espaciado de las letras para darle un toque más moderno */
    text-align: left; /* Alineación a la izquierda, para los subtítulos es más natural */
    padding-left: 10px; /* Espacio a la izquierda para dar un margen visual */
    border-left: 3px solid #003975; /* Línea vertical a la izquierda para resaltar el subtítulo */
}

/* Estilo cuando el cursor pasa sobre el subtítulo (opcional) */
.label1:hover, .venda:hover {
    color: #014389; /* Cambiar el color a azul cuando se pasa el mouse */
    cursor: pointer; /* Cambiar el cursor para indicar que es interactivo */
}

/* Estilo para subtítulos pequeños */
label[for="verificar ubicación"], 
label[for="consulta"], 
label[for="consulta"]:last-of-type {
    font-size: 19px; /* Tamaño más pequeño para subtítulos secundarios */
    color: #555; /* Color gris oscuro, suave pero legible */
    font-weight: 500; /* Peso moderado para los subtítulos secundarios */
    margin-bottom: 8px; /* Menor espacio debajo de los subtítulos pequeños */
    line-height: 1.4; /* Altura de línea para mejorar la legibilidad */
    text-transform: none; /* No es necesario usar mayúsculas aquí */
    letter-spacing: 0.5px; /* Un poco de espacio entre letras */
    text-align: left; /* Alineación a la izquierda */
    padding-left: 8px; /* Espacio a la izquierda para una separación visual */
    border-left: 2px solid #007bff; /* Línea vertical a la izquierda para resaltar el subtítulo */
}

/* Estilo cuando el cursor pasa sobre los subtítulos pequeños */
label[for="verificar ubicación"]:hover, 
label[for="consulta"]:hover, 
label[for="consulta"]:last-of-type:hover {
    color: #007bff; /* Cambiar el color a azul al pasar el mouse */
    cursor: pointer; /* Cursor de puntero para indicar interactividad */
}

/* Estilo para el título h2 */
h2 {
    font-size: 32px; /* Título más grande para destacarlo */
    font-weight: 600; /* Peso de fuente más fuerte para resaltar */
    color: #2c3e50; /* Gris oscuro, más elegante y profesional */
    margin-bottom: 20px; /* Espacio debajo para separación */
    text-align: center; /* Centrado para balance visual */
    line-height: 1.4; /* Mejor legibilidad con mayor interlineado */
    text-transform: uppercase; /* Mayúsculas para dar presencia */
    letter-spacing: 1px; /* Mayor espaciado entre letras para un toque moderno */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Tipografía profesional */
}

.btn-volver {
    position: absolute;
    top: 100px;
    left: 20px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    background-color: #b8e0e5; /* Color warning de Bootstrap */
    color: #2c3e50;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Sombra sutil */
    transition: all 0.3s ease; /* Animación suave */
    z-index: 999;
}

.btn-volver:hover {
    background-color: #a2d4da; /* Color más oscuro al pasar el mouse */
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Sombra un poco más fuerte */
    text-decoration: none;
}

@media (max-width: 576px) {
    .btn-volver {
        top: 100px;
        left: 10px;
        font-size: 0.9rem;
        padding: 5px 10px;
    }
}