/*///////////////////////////////estilos seccion de camiones y maquinarias*/

/*fluid container*/
.cat-d6t-fluid-container {
    padding-right: 20px;
    padding-left: 20px;
}
/*fluid*/
/*banner especial*/
/* Estilos específicos para el carrusel de bulldozer */
.bulldozer-carousel-container {
    max-width: 100%;
    height: 500px;
    overflow: hidden;
}

.bulldozer-carousel-image {
    width: 100%;
    height: auto;
    min-height: 500px; /* Asegura que la imagen tenga al menos 500px de alto */
}

/* Asegúrate de que el texto sea legible sobre imágenes oscuras o claras */
.bulldozer-carousel-caption {
    position: absolute;
    left: 15%; /* Ajusta según sea necesario para la alineación horizontal */
    top: 50%; /* Modifica este valor para mover el texto arriba o abajo */
    transform: translateY(-50%); /* Centra el texto con respecto a su nueva posición */
    color: white;
    text-align: left;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
    .bulldozer-carousel-caption p {
        font-size: 22px;
    }
    .bulldozer-title {
        position: relative; /* La posición relativa es necesaria para que z-index funcione */
        z-index: 10; /* Un valor alto para asegurar que esté por encima de otros elementos */
        color: white; /* Establece el color del texto a blanco */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para mejorar la legibilidad */
        font-size: 70px;
        /* Otros estilos que desees aplicar específicamente al título */
    }

@media (max-width: 768px) {
    .bulldozer-carousel-caption {
        left: 5%;
        top: 50%; /* Asegúrate de que el texto se vea bien en dispositivos móviles */
        transform: translateY(-50%);
        font-size: smaller; /* Ajusta el tamaño del texto para pantallas más pequeñas si es necesario */
    }

    .bulldozer-title {
        font-size: 2.0rem; /* Ajusta el tamaño del texto para pantallas más pequeñas si es necesario */
        font-weight: bold;
    }
}

        /*banner especial manejo ocontenidor especial fluid*/
        .mi-container-fluid {
            padding-right: 30px;
            padding-left: 30px;
            margin-top: 30px;
            margin-bottom: 30px;
            max-width: 100%;
            margin-right: auto;
            margin-left: auto;
        }
        /* Asegúrate de que las imágenes se escalen correctamente */

.custom-btn {
    padding: 10px 20px; /* Ajusta el relleno según necesites */
    color: white; /* Color del texto */
    text-decoration: none; /* Elimina el subrayado del enlace */
    margin-right: 40px; /* Espacio entre botones */
    display: inline-block; /* Para que los botones se muestren en línea */
    width: 250px;
    text-align: center;
}

.black-btn {
    background-color: black;
}

.orange-btn {
    background-color: #FF6702;
    left: 0; /* Para el último botón, puedes quitar el margen derecho */
}

.black-btn:hover, .black-btn:active {
    background-color: black; /* un naranja un poco más oscuro para el hover */
    color: white; /* mantiene el texto blanco al pasar el mouse */
    text-decoration: none; /* asegura que no haya subrayado al pasar el mouse */
}
.orange-btn:hover, .orange-btn:active {
    background-color: #ff6a00; /* un naranja un poco más oscuro para el hover */
    color: white; /* mantiene el texto blanco al pasar el mouse */
    text-decoration: none; /* asegura que no haya subrayado al pasar el mouse */
}





/*//////////////////////////////////////////////////////////*/
/* Estilo personalizado para las imágenes dentro del carrusel */
.mi-carousel .slick-slide img {
    width: 100%; /* Ajusta la imagen para que ocupe todo el ancho del contenedor */
    height: 300px; /* Ajusta la altura fija para mantener uniformidad */
    object-fit: cover; /* Asegura que la imagen cubra el área asignada sin perder su proporción de aspecto */
    padding: 10px; /* Espacio alrededor de la imagen */
}

/* Centra las imágenes horizontal y verticalmente dentro de cada slide */
.mi-carousel .slick-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ajusta la posición y el estilo de los puntos de navegación */
.mi-carousel .slick-dots {
    position: absolute;
    bottom: -30px; /* Ajusta este valor para posicionar los puntos debajo del carrusel */
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
}

    /* Ajusta el tamaño y el espacio de los puntos para que se vean alineados */
    .mi-carousel .slick-dots li {
        display: inline-block;
        margin: 0 5px;
    }

        .mi-carousel .slick-dots li button {
            font-size: 0; /* Remueve el espacio en blanco por defecto */
        }

            .mi-carousel .slick-dots li button:before {
                font-size: 12px; /* Tamaño deseado para los puntos */
                color: #FF6702; /* Color naranjo para los puntos activos */
            }

/* Estilos para las flechas de navegación del carrusel */
.slick-prev,
.slick-next {
    width: 40px;
    height: 40px;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.5); /* Fondo semi-transparente */
    border-radius: 50%; /* Hacer las flechas redondas */
    border: none; /* Remover cualquier borde */
 
}

.slick-prev {
    left: 10px;
}

.slick-next {
    right: 10px;
}

    .slick-prev:before,
    .slick-next:before {
        font-size: 30px;
        color: #000; /* Color negro para las flechas */
        content: '\f104'; /* Código Unicode para la flecha izquierda */
    }

    .slick-next:before {
        content: '\f105'; /* Código Unicode para la flecha derecha */
    }

/* Ajuste para pantallas más pequeñas */
@media (max-width: 768px) {
    .mi-carousel .slick-slide {
        padding: 0 5px; /* Menos espacio lateral en dispositivos móviles */
    }

        .mi-carousel .slick-slide img {
            padding: 10px;
            margin-left: 0; /* Centra las imágenes en dispositivos móviles */
        }

    .mi-carousel {
        margin-left: 0;
    }

    .slick-prev,
    .slick-next {
        width: 30px;
        height: 30px;
    
    }

        .slick-prev:before,
        .slick-next:before {
            font-size: 20px;
         
        }
}

/* Estilo personalizado con prefijos para evitar conflictos */
.mi-col-datos .mi-table {
    /* Estilos para la tabla */
    width: 100%;
    margin-bottom: 1rem; /* Espacio debajo de la tabla */
}

/* Ajustar los puntos de navegación del carrusel */
.mi-carousel .slick-dots {
    position: absolute;
    bottom: -30px; /* Ajusta este valor para posicionar los puntos debajo del carrusel */
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
}

    .mi-carousel .slick-dots li button:before {
        color: #FF6702; /* Color naranjo para los puntos activos */
    }

/*///////////////////////////////*/

/* Estilo personalizado con prefijos para evitar conflictos */
.mi-col-datos .mi-table {
    /* Estilos para la tabla */
    width: 100%;
    margin-bottom: 1rem; /* Espacio debajo de la tabla */
}

/* Ajustar los puntos de navegación del carrusel */
.mi-carousel .slick-dots {
    position: absolute;
    bottom: -30px; /* Ajusta este valor para posicionar los puntos debajo del carrusel */
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
}

    .mi-carousel .slick-dots li button:before {
        color: #FF6702; /* Color naranjo para los puntos activos */
    }


    /**************/

/* Estilo personalizado con prefijos para evitar conflictos */
.mi-col-datos .mi-table {
    /* Estilos para la tabla */
    width: 100%;
    margin-bottom: 1rem; /* Espacio debajo de la tabla */
}

/* Ajustar los puntos de navegación del carrusel */
.mi-carousel .slick-dots {
    position: absolute;
    bottom: -30px; /* Ajusta este valor para posicionar los puntos debajo del carrusel */
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
}

    .mi-carousel .slick-dots li button:before {
        color: #FF6702; /* Color naranjo para los puntos activos */
    }


/* Estilos para las flechas de navegación del carrusel */
.slick-prev,
.slick-next {
    width: 40px;
    height: 40px;
    z-index: 1;
}

.slick-prev {
    left: 10px;
}

.slick-next {
    right: 10px;
}

    .slick-prev:before,
    .slick-next:before {
        font-size: 30px;
        color: #000; /* Color de las flechas */
    }

/* Ajuste para pantallas más pequeñas */
@media (max-width: 768px) {
    .mi-carousel .slick-slide {
        padding: 0 5px; /* Menos espacio lateral en dispositivos móviles */
    }

        .mi-carousel .slick-slide img {
            padding: 10px;
            margin-left: 0; /* Centra las imágenes en dispositivos móviles */
        }

    .mi-carousel {
        margin-left: 0;
    }

    .slick-prev,
    .slick-next {
        width: 30px;
        height: 30px;
    }

        .slick-prev:before,
        .slick-next:before {
            font-size: 20px;
        }
}

/* Estilo personalizado con prefijos para evitar conflictos */
.mi-col-datos .mi-table {
    /* Estilos para la tabla */
    width: 100%;
    margin-bottom: 1rem; /* Espacio debajo de la tabla */
}

/* Ajustar los puntos de navegación del carrusel */
.mi-carousel .slick-dots {
    position: absolute;
    bottom: -30px; /* Ajusta este valor para posicionar los puntos debajo del carrusel */
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
}

    .mi-carousel .slick-dots li button:before {
        color: #FF6702; /* Color naranjo para los puntos activos */
    }


/*alineacion de elementos botones*/





/* Asegúrate de que los estilos de .mi-acciones no estén afectados por otros */
/* Contenedor para las acciones de cotizar y descargar */
.mi-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Modificado para separar los elementos */
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
}

.mi-btn-cotizar {
    background-color: #FF6702; /* Color de fondo naranjo */
    color: white; /* Color de texto blanco */
    border: none; /* Sin bordes */
    padding: 0.2rem 1rem; /* Ajusta el relleno */
    font-size: 1rem; /* Tamaño de texto */
    border-radius: 0; /* Botones sin esquinas redondeadas */
    cursor: pointer; /* Cambia el cursor */
}

.mi-select-container {
    position: relative; /* Necesario para el posicionamiento absoluto del ícono */
    display: flex; /* Asegura que el select y el ícono estén en línea */
}

.mi-select-descarga {
    background-color: #FF6702; /* Color de fondo naranjo */
    color: white; /* Color de texto blanco */
    border: none !important; /* Sin bordes */
    padding: 0.4rem 1rem; /* Ajusta el relleno */
    font-size: 1rem; /* Tamaño de texto */
    border-radius: 0; /* Botones sin esquinas redondeadas */
    cursor: pointer; /* Cursor como puntero */
}

    /* Estilo para el ícono '+' que aparece a la derecha del select */
    .mi-select-descarga::after {
        content: '+'; /* El contenido es el signo '+' */
        color: white; /* Color blanco para el signo '+' */
        position: absolute; /* Posicionamiento absoluto */
        right: 1rem; /* A la derecha */
        top: 50%; /* Centrado verticalmente */
        transform: translateY(-50%); /* Ajuste para centrar verticalmente */
        pointer-events: none; /* El pseudo-elemento no es clickeable */
        font-size: 1.5rem; /* Tamaño del signo '+' */
        font-weight: bold; /* Negrita para el signo '+' */
        border: none !important;
    }

    /* Ajusta el tamaño y el relleno del select */
    .mi-select-descarga option {
        padding: 0.5rem; /* Relleno para las opciones */
        background-color: white; /* Fondo blanco para las opciones */
        color: #495057; /* Color de texto para las opciones */
        border: none; /* Elimina el borde */
        width:100%;
    }

    .mi-select-descarga:focus {
        outline: none !important; /* Sin contorno al enfocar */
        border: none !important; /* Sin bordes al enfocar */
        box-shadow: none !important; /* Sin sombras que puedan parecer bordes */
    }
    mi-select-descarga option:focus,
    .mi-select-descarga option:active,
    .mi-select-descarga option:checked {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }
  



/* Ajustes para pantallas más pequeñas si es necesario */
@media (max-width: 768px) {
    .mi-acciones {
        flex-direction: column; /* Los elementos se apilan verticalmente */
        align-items: stretch; /* Alinea los elementos al ancho completo */
    }

    .mi-select-container {
        width: 100%; /* El select ocupa todo el ancho disponible */
        margin-top: 0.5rem; /* Espacio entre botones */
    }
}
/*alineacion de elementos botones*/

/*diseño table*/
.mi-col-datos .mi-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1rem; /* Espacio debajo de la tabla */
}

    .mi-col-datos .mi-table th, .mi-col-datos .mi-table td {
        border: 1px solid #ccc; /* Líneas de un gris claro */
        padding: 0.1rem;
        font-size: 0.8rem; /* Reduce el tamaño de la fuente */
        color: black;
    }

    .mi-col-datos .mi-table tbody tr:nth-child(odd) {
        background-color: #e8e8e8; /* Color de fondo para filas impares */
    }

    .mi-col-datos .mi-table tbody tr:nth-child(even) {
        background-color: #ffffff; /* Color de fondo para filas pares */
    }

    .mi-col-datos .mi-table th {
        font-weight: normal; /* Esto quitará el estilo negrita de los encabezados de la tabla */
        /* Mantén el resto de tus estilos aquí, como el padding y el border */
    }


/*diseño table*/

/*otros*/
.negroTextMaq {
    color: black;
    font-weight: 900;
}
/*otros*/
/*////////////////////////////// estilos seccion de camiones y maquinarias*/