/* Definición del color Magenta Apagado solicitado (#000000) */
.text-custom {
    color: #000000 !important;
}

.bg-custom {
    background-color: #000000 !important;
}

/* Estilo para contenedor del mapa Leaflet */
#mapa-atractivo {
    height: 220px;
    width: 100%;
    border-radius: 0.75rem;
    z-index: 1;
}

/* Efecto hover sutil para el enlace de coordenadas */
.coord-link:hover {
    color: #000000 !important;
    text-decoration: underline !important;
}

/* Ocultar el botón de scroll al inicio de la página */
#btnScrollTop {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Mostrar el botón cuando el script agregue la clase show */
#btnScrollTop.show {
    opacity: 1;
    visibility: visible;
}

/* Estilos para nav-pills en modo dark con fondo más gris para los inactivos */
.nav-pills .nav-link {
    background-color: #495057;
    /* Un gris más claro y visible para los botones no seleccionados */
    color: #ced4da;
    /* Color de texto claro */
    margin: 0 4px;
    border: 1px solid #6c757d;
    transition: all 0.2s ease-in-out;
}

.nav-pills .nav-link:hover {
    background-color: #6c757d;
    /* Gris más claro al pasar el mouse */
    color: #ffffff;
}

.nav-pills .nav-link.active {
    background-color: #000000;
    /* Negro absoluto para el botón seleccionado */
    color: #ffffff;
    /* Texto blanco puro */
    border-color: #212529;
    /* Borde oscuro para el seleccionado */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    /* Sombra para destacar el activo */
}

/* Centrado perfecto de la imagen desde el centro hacia afuera con altura fija */
.img-fluid.object-fit-cover {
    height: 220px;
    object-position: center center;
}