.loader-inicial {
   
    position: absolute;
    top: 35vh;
    left: 51%;
}



.breadcrumbs {
    padding: 0;
}

    .breadcrumbs i {
        color: #b9b5b5;
        font-size: 0.8rem;
    }

.msj_inicio a {
    color: #1F1F1F;
    font-size: clamp(12.5px, 1vw, 14px);
    text-decoration: none;
    font-weight:400
}

 

.span_medio a {
    color: #1F1F1F;
     font-size: clamp(12.5px, 1vw, 14px);
    text-decoration: none;
     font-weight:400
}



.span_medio2 a {
     font-size: clamp(12.5px, 1vw, 14px);
    color: #1F1F1F;
    text-decoration: none;
     font-weight:400
}



.span_final {
    font-size: clamp(12.5px, 1vw, 14px);
    color: #606060;
    font-weight: 400;
    cursor:default
}







.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #ccc;
    border-top-color: dimgrey; /* color del spinner */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}



.contenedor_resultadosCantidad {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap:wrap;
}






.breadcrumbs_cat .msj_inicio a {
    color: #9e9e9e;
    font-size: 13px;
    text-decoration: none;
}

    .breadcrumbs_cat .msj_inicio a:hover {
        color: #929090;
        text-decoration: none;
    }

.breadcrumbs_cat i {
    color: #b9b5b5;
    font-size: 1.3rem;
}

.breadcrumbs_cat .span_final {
    font-size: 12px;
    color: #949595;
    font-weight: 600;
}

.contenedor_productos {
    display: flex;
    gap: 1vh;
    flex-direction: column;
    position: relative
}



.filtros {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap
}

.contenedorChips2{
   display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: solid 1px #e4e4e4;
    padding: 1vh;
    border-radius: 6px;
}


.offcanvas-header h5{
    font-size:19px;
    font-weight:600;
    text-align:center
}

.modoVista{display:none}


/*ELEMENTOS QUE SE OCULTAN EN MOBILE*/
.contenedor-completo {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.cont_FiltrosProductos {
    display: flex;
    flex-direction: column;
    gap:0.5rem
}

.subcantidad_busqueda {
    font-size: clamp(16px, 1vw, 19px);
    color: #1F1F1F;
    font-weight: 700;
    margin-bottom:3px
}

.cantidad_busqueda {
    display: flex;
    font-size: clamp(13px, 1vw, 14px);
    color: #1F1F1F;
    font-weight:600
}

.cantidad_busquedaEnd {
    display: flex;
    font-size: clamp(13px, 1vw, 14px);
    color: #9E9E9E;
    justify-content: center;
}

.buscarMarcaModelo {
    text-decoration: none !important;
    padding: 4px;
    color: white;
    background: #f1671a;
    border-radius: 23px;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 500;
    transition: all .2s ease;
    width: 90%;
}

    .buscarMarcaModelo:hover {
        color: #bc5014
    }

    .buscarMarcaModelo:visited {
        color: #fff
    }

/*seccion productos*/


.goup {
    background: #ff7020;
    bottom: 10px;
    display: block;
    height: 50px;
    position: fixed;
    right: 50%;
    cursor: pointer;
    width: 50px;
    border-radius: 50%;
    text-align: center;
    z-index: 999;
}

    .goup i {
        color: white;
        font-size: 35px
    }


    /*FILTROS*/


    .Subfiltro_dinamico {
          display:flex;
        flex-direction: column;
        gap:0.5rem;
    }


  .btnLimpiarChips {
    font-size: clamp(14px, 1vw, 15px);
    color: white;
    cursor: pointer;
    background-color: #9c9c9c;
    border-radius: 20px;
    width: 230px;
    align-self: start;
    font-weight: 500;
}


  .btnLimpiarChips:hover {
      font-size: clamp(14px, 1vw, 15px);
   background-color: #878787 !important;
   color: white;
}





/*TEXTO FOOTER*/


#div_texto_lateral {
    background-color: rgb(242, 242, 242);
    border-top: 1px solid rgb(215, 215, 215);
    margin-top:3vh
}




    .seccion-SEO p {
        color: #888;
        font-size: 14px;
        line-height: inherit;
    }





ul.listaSeoCat {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    padding: 0;
}



    ul.listaSeoCat li {
        flex: 1 1 calc(100% - 10px); /* 1 columna base */
        max-width: calc(100% - 10px); /* Asegura que no se estire más del 100% */
    }

.me-3 {
    margin-right: 0 !important;
}

.link_cat_bread {
    text-decoration: none;
    color: #676767;
    font-size: clamp(10px, 2vh, 13px);
}

.titulo-SEO {
    color: #777;
    font-size: clamp(14px, 2vh, 17px);
    font-weight: 500;
    margin-bottom: 10px;
}

.subtitulo-SEO {
    color: #777 !important;
    font-size: calc(.7em + 1vh) !important;
    font-weight: 500;
}

    .subtitulo-SEO a {
        color: #777;
    }

.texto-SEO {
    color: #777;
    font-size: 14px;
}

    .texto-SEO a {
        color: #777;
        font-size: 14px;
    }
    





.btnCargarMas2 {
    text-decoration: none !important;
    padding: 4px 18px;
    color: #fff;
    background: #f1671a;
    border-radius: 23px;
    font-size: 16px;
    font-weight: 500;
    transition: all .2s ease;
    height:45px;
    width:250px
}

    .btnCargarMas2:hover {
        text-decoration: none !important;
        color: #fff;
        background: #d95f1a;
        transition: all .2s ease;
    }


/*//FILTROS */


.btn-vista.active {
    
    color: #f1671a;
 
}

#filtrosMobile {
    height: 80vh
}

.btnBuscarModelo {
    text-decoration: none !important;
    color: #fff;
    background: #f1671a;
    border-radius: 23px;
    font-size: clamp(12px, 1vw, 13px);
    font-weight: 500;
    transition: all .2s ease;
    width: 100%;
    border-color: #f1671a;
    padding: 5px;
}


.contenedor_filtros_buscador {
    display: flex;
    flex-direction: column;
    gap: 1rem;
   margin-top:1rem
}

.titleFiltro{
    color: #1F1F1F;
    font-size: 16px;
    font-weight: 500;
}


.filtro-marcas-container, .filtro-modelos-container, .filtro-productos-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: solid 1px #e4e4e4;
    padding: 1rem;
    border-radius: 6px;
}

    .filtro-marcas-container h5,
    .filtro-modelos-container h5,
    .filtro-productos-container h5 {
        color: #1F1F1F;
        font-size: 16px;
        margin: 0;
        font-weight: 500
    }

#buscarMarcaInput {
    font-size: clamp(10px, 2vh, 14px);
    color: #4b5864;
    border: 1px solid #b4bac0;
    padding: 3px 7px; 
}

#listaMarcas .item-marca,
#listaModelos .item-modelo,
#listaProductos .item-productos {
    font-size: 15px;
    color: #1F1F1F
}

.item-modelo label{
    display:flex
}


.item-marca .form-check-input,
.item-modelo .form-check-input,
.item-productos .form-check-input
{
    width: 16px;
    height: 16px;
    border: #545454c9 solid 1px;
    margin-right: 0.5rem;
    border-radius: 2px;
    margin-top: 0.25em;
}


.checkbox-custom {
  display: flex;
  align-items: center;
}

.checkbox-custom .form-check-input {
  display: none;
}

.check-icon {
  width: 20px;
  height: 20px;
  border: 2px solid #bbb;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  cursor: pointer;
}

.check-icon::after {
  content: "";
  width: 12px;
  height: 12px;
  display: none;
  background: url("/img/check.svg") 
}

/* estado checked */
.form-check-input:checked + .check-icon::after {
  display: block;
}

.form-check-input:checked {
  background-color: #9c9c9c;     
  border-color: #828282;

}






#listaMarcas .form-check,
#listaModelos .form-check,
#listaProductos .form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: .5rem;
}





#buscarModeloInput {
    font-size: clamp(10px, 2vh, 14px);
    color: #4b5864
}





.badge span {
    font-size: 14px;
    font-weight: 100;
    color: #000000;
    max-width: 270px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    line-height: normal;
}

.badge i {
    font-size: 13px;
    color: #6c757d;
}




#btnLimpiarTodo {
    font-size: clamp(14px, 1vw, 15px);
    color: white;
    cursor: pointer;
    background-color: #9c9c9c;
    border-radius:20px;
    width: 230px;
    align-self: start;
    font-weight: 500;
}



.search-sidebar {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
    display: flex;
    flex-direction: column;
}


/*.btn-filtroMobile {
    font-size: clamp(12px, 1vw, 15px);
    color: white;
    cursor: pointer;
    border: solid 1px #f1671a;
    border-radius: 20px;
    padding: 0.5rem;
    height: fit-content
}*/

.btn-filtroMobile {
    font-size: clamp(14px, 1vw, 15px);
    color: white;
    cursor: pointer;
    background-color: #f1671a;
    border: solid 1px #f1671a;
    border-radius: 5px;
    padding: 0.5rem;
    height: fit-content;
    border-radius: 20px;
    font-weight:500;
    width:230px
}



/* FILTROS BURBUJA*/

.btnBurbuja {
    color: #1F1F1F;
    border: solid 1px #9d9d9d;
    font-size: 13px;
    height:fit-content;
    font-weight:400
}

    .btnBurbuja:hover {
        background-color: #545454;
        color: white
    }


  .btn-active-filter {
    background-color: #9d9d9d !important; 
    color: #ffffff !important;
    border-color: #9d9d9d!important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#dropdownMasFiltros .btn-secondary {
    
    font-size: 13px;
    padding: 4px 8px;
    height: -webkit-fill-available;
}

#dropdownMasFiltros .dropdown-menu {
    max-height: 60vh;
    overflow-y: scroll;
    font-size: 13px;
    z-index:2
}


.filtroTextoCategorias {
    display: none
}


.contenedorBurbuja {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.5rem;
    align-items: normal;
    flex-direction: column
}

.txtFiltroCompleto {
    margin: 0;
}



  .contenedor_filtroB2 {
        display: flex;
        gap: 0.8rem;
        justify-content: start;
        flex-wrap:wrap;
        align-items:center
    }


   .contenedor_filtroB2_v2{
        display: flex;
        gap: 0.8rem;
        justify-content: start;
        flex-wrap:wrap;
        align-items:center
    }


     #contenido_productos {
        height: 73vh;
        overflow-y: auto; /* Solo scroll vertical */
        /* Ocultar para Chrome, Safari y Opera */
        &::-webkit-scrollbar

    {
        display: none;
    }

    /* Ocultar para IE, Edge y Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    }


     #contenido_productos2 {
        height: 90vh;
        overflow-y: auto; /* Solo scroll vertical */
        /* Ocultar para Chrome, Safari y Opera */
        &::-webkit-scrollbar

    {
        display: none;
    }

    /* Ocultar para IE, Edge y Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    }








@media only screen and (min-width: 460px) {
    ul.listaSeoCat li {
        flex: 1 1 calc(50% - 10px); /* 2 columnas base */
        max-width: calc(50% - 10px); /* Asegura que no se estire más de 1/2 */
    }

    .contenedorBurbuja {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 0.5rem;
        align-items: normal;
        flex-direction: row
    }
}


@media only screen and (min-width: 730px) {


    .btnLimpiarChips {

    width: 100%;

    }


    /* Contenedor para centrar el spinner dentro de los filtros */
    .spinner-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        width: 100%;
    }

    /* Si tu .spinner original es muy grande, puedes escalarlo así */
    .spinner-container .spinner {
        width: 30px; 
        height: 30px;
    }


    .txtFiltroCompleto {
        background-color: #fff;
        border: 1px solid #b4bac0;
        border-radius: 5px;
        color: #4b5864;
        font-weight: 500;
        font-size: clamp(14px, 1vw, 14.5px) !important;
        padding: 5px 7px;
        margin: 0;
        position: relative
    }
}


@media only screen and (min-width: 992px) {

    
    .filtroTextoCategorias {
        display: block;
    }


    .badge span {
    max-width: 180px;

}





.titulo_tablas_productos{
    background-color: #F0F0F0;
    border: solid 1px #D8D8D8;
    font-size:13px
    
}

.titulo_tablas_productos, tr, th{
    padding:5px
}



    #btnLimpiarTodo {

    width: 100%;

}

    #filtrosMobile {
        height: auto;
        background-color: pink
    }


    .cont_FiltrosProductos {
        gap: 1rem;
        display: grid;
        grid-template-columns: 23% 75%;
        margin: 0;
    }


    .contenedor_resultadosCantidad {
        display: flex;
        gap:0.3rem
    }


    .encabezado_izquierda {
        display: flex;
        flex-direction: column;
        gap: 0.5rem
    }


  


    .search-sidebar {
        display: flex;
        display: flex;
        flex-direction: column;
    }




    .seccion-SEO {
        padding: 2em 3em;
    }

    ul.listaSeoCat li {
        flex: 1 1 calc(33.33% - 10px);
        max-width: calc(33.33% - 10px);
        list-style: none;
    }


    .filtros {
        flex-direction: column;
        gap: 1rem;
    }



    .btn-filtroMobile {
        font-size: clamp(13px, 1vw, 15px);
        color: white;
        cursor: pointer;
        background-color: #f1671a;
        border: solid 1px #f1671a;
        border-radius: 5px;
        padding: 0.5rem;
        height: fit-content;
        border-radius: 20px;
        margin-bottom:3vh
    }

     .contenedor_filtroB2 {
        justify-content: space-between;
  
    }

       .contenedor_filtroB2_v2 {
        justify-content: end;
       flex-wrap:nowrap;
    }

}


@media only screen and (min-width: 1200px) {

   .modoVista{
       display:flex;
       align-items:center;
       gap:1rem
   }


   
}




@media only screen and (min-width: 1080px) {



    .cont_FiltrosProductos {
        grid-template-columns: 22% 76%;
        gap: 1%;
    }
}







@media only screen and (min-width: 1367px) {


    #encabezadoProductos .encabezados {
        padding: 1rem 2.6rem 0 2.6rem;
    }



    .cont_FiltrosProductos {
        gap: 1%;
        grid-template-columns: 20% 79%;
    }


    .seccion-SEO {
        padding: 2em 7em;
    }
}
