html:has(.no_scroll){overflow:hidden;}
header{
  position:fixed; top:0px; left:0px;
  height:var(--header_height); width:100%;
  padding-left:1%; padding-right:1%;
  background:var(--header_back);
  display: flex; justify-content: space-between; align-items: center;
  
  .h_logo{max-height:6vh;width:auto;
    & img{max-height:6vh;}
  }
 .h_buscar{
    width:30%; height:4.5vh;
    padding-left:5px; 
    padding-right:5px;
    display: inline-flex; justify-content: space-between; align-items: center;
    font-size:0.7rem;
    border:1px solid var(--header_field_border); color:var(--header_field_fore);
    border-radius: 12px 12px;

    .seek{
      width:88%; height:25px;
      background-color:inherit; border:0; color:var(--header_field_fore); font-size:1rem;
      border-radius: 9px 9px;
      padding-left:10px;
    }
    .seek::placeholder{color:var(--header_field_ph);}
    .seek:focus{background-color:var(--header_field_focus);color:#000;}
    .seek:focus::placeholder{color:var(--header_back);}
  }
 .h_filtro{
    width:10%; height:4.5vh; padding-left:1%; padding-right:1%;
    display: inline-flex; justify-content: space-between; align-items: center;
    font-size:0.7rem;
    border:1px solid var(--header_field_border); color:var(--header_field_fore);
    border-radius: 12px 12px;
  }
  .to_find{cursor:pointer;font-weight: 600;}
  .to_catalogo{cursor:pointer;}
  .h_links .h_vl{ border-left: 1px solid #fff; height: 3.5vh;}
  .h_opc{display:flex; width:35.5%; justify-content: space-between; align-items: center; padding-left:1%;}
  ._icon_card{cursor:pointer; font-size:1.5rem; color:#735f4a;}

} /* FIN HEADER*/




.show_float_t{height: 50vh!important;}

.hide_main{
  filter: blur(1px)!important;
  filter: brightness(20%)!important;
  /* -webkit-filter: blur(10px); */
  /* opacity:0.8; */
}


/* CANASTO FLOTANTE R*/

.h_cnt{
  position:absolute; top:var(--header_height); left:100%; width:30%;
  height:calc(100dvh - var(--header_height));
  z-index:9999;
  /* transition: all 0.6s ease-in-out; */
  border:0px solid red; background:var(--main_back);
  overflow:auto; display:none;
  padding:15px;
  .hcnt_destino{
    position:relative;
    margin-top: 0.5rem;
    border: 1px solid #fff;
    background-color: rgb(106 91 76);
    height:3rem; max-height:3rem; overflow:hidden;
    width:100%; padding:10px;
    display:flex;width:100%; justify-content: space-between;

    & select{
      width:100%; height:1.8rem;
      background-color:inherit; font-size:1rem; font-weight:400;
      color:#fff; border:0; text-transform: uppercase;
      
      & option{color:#fff; background-color:rgb(106 91 76);}
    }
  }
  .hcnt_title{
    position:relative;
    height:2rem; max-height:2rem; overflow:hidden;
    width:100%; padding:5px;
    display:flex; justify-content: space-between;

    & label{font-size:1.2rem; font-weight:500;}
    & i{cursor:pointer;}
  }
  & details{font-size:0.75rem; color:#c0c0c0; font-weight:400;}
  .hcnt_type{
    position:relative;
    height:1.8rem; max-height:1.8rem; overflow:hidden;
    width:100%; padding:5px; align-items: center;
    display:flex;width:100%; justify-content: space-between;

    & label{font-size:0.8rem; font-weight:400;}
    & i{cursor:pointer; font-size:1.8rem;}
  }


} /* fin h_cnt*/

.h_cnt .skin_cnt{
  position:relative; background:var(--main_back);
  height:4.5rem; max-height:30rem; overflow:hidden;
  display:block; margin-top:1rem;
  border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;

  & :hover{}
  .cnt_title{
    position:absolute; top:0.2rem; left:2%; width:96%;
    font-size:0.75rem; 
    display: -webkit-box; height:2.5rem; text-align:left; text-overflow: ellipsis; overflow:hidden; -webkit-line-clamp: 2;    -webkit-box-orient: vertical;
    padding:4px; font-weight:400;
  }
  ._delete{
    position:absolute; top:2.6rem; left:90%; width:10%;
    font-size:1.2rem; text-align:center; cursor:pointer; 
    & :hover{color:red;}
  }
  .cnt_qty{
    position:absolute; top:2.4rem; left:4%; width:20%; height:1.4rem; 
    -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; 
    padding:5px; 
    border:0; font-size:1rem; text-align:center!important;
  }

  .cnt_precio{
    position:absolute; top:2.3rem; left:42%; width:50%;
    font-size:1rem; text-align:right; 
    padding:5px; font-weight:500;
  }
}
  
  
.h_cnt .balance{
  position:relative;
  height:2rem; max-height:2rem; overflow:hidden;
  width:100%; padding:5px;
  display:flex; justify-content: space-between;
  margin-top:1rem;
  
  & label:nth-child(1){font-size:1rem; font-weight:400;}
  & label:nth-child(2){font-size:1.1rem; font-weight:500; text-align:right;}
}


.btn_cx{
  width:14%; height:35px; 
  padding-left:12px; padding-right:12px;
  display: flex; justify-content: space-between; align-items: center;
  font-size:0.9rem;
  border:1px solid var(--cx_btn_border); border-radius: 20px 20px;
  background: var(--cx_btn_back); color:var(--cx_btn_fore);
  cursor:pointer; 
  transition: all 0.3s ease-in-out ; 
  
  & i{
    border:1px solid var(--cx_btn_border); color:var(--cx_btn_fore);
    padding:3px; border-radius: 50px 50px;
  }
  & :hover{background: var(--cx_btn_hover); scale:1.05;}
}

.h_dolar section{color: var(--cx_btn_dolar); font-weight: 600; text-align:center; width:100%;} 
.h_dolar{width:12%;}

.btn_fig{
  margin-top:1rem;  height:3rem; width:100%;
  display:flex; justify-content:center; align-items:center;
  font-family: 'Roboto'; font-size:1.1rem;
  
  & *{cursor:pointer;}

  & button{
    width:90%;
    background:var(--btn_main); color:var(--btn_fig_fore);
    border-style:none;
    display:flex; 
    justify-content:center; align-items:center;
    font-size:1.1rem; font-weight:500;
    /*color:#fff;*/
    border-radius: 30px;
    height: inherit;
    transition: 0.25s

    & span{padding-left:5px; font-size:1.6rem;}
    & :hover{transform: scale(1.05);}
  }
}
.btn_fig_sec{background:var(--btn_fig_back_sec)!important; color:var(--btn_fig_fore_sec);}
.btn_fig_ter{background:var(--btn_fig_back_ter)!important; color:var(--btn_fig_fore_ter);}



.h_login_show{opacity:1!important;z-index:9!important; }
.h_login{
  z-index:0;
  position:absolute; display:block; 
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width:50%; min-width:400px;
  height:80vh; min-height:300px; max-height:570px;
  background:var(--main_back);
  border-radius: 20px; border:1px solid #f1f1f1;
  opacity:0;
  transition: all 0.5s ease-in-out allow-discrete;
  padding:35px;

  .hlogin_title{
    position:relative;
    height:2rem; max-height:2rem; overflow:hidden;
    width:100%; padding:5px;
    display:flex;width:100%; justify-content: space-between;

    & label{font-size:1.2rem; font-weight:500;}
    & i{cursor:pointer;}
  }

  & input{
    height:3rem; width:100%; 
    color:var(--header_field_fore); background-color:transparent;
    margin-top:1.8rem;
    border:1px solid #fff; border-radius: 25px;
    font-size:1.1rem; padding-left:34px;
    text-align:center
  }
  & input::placeholder{color:var(--header_field_ph);}
  .lg_detail{font-size:0.7rem;margin-top:1.4rem;}
  .lg_olvido{height:2rem; margin-top:1.6rem; width:100%; text-align:center; color:var(--btn_fig_back); font-size:1.1rem;}
  ._registrar label{font-weight:400!important;}
  .lg_email{}
  .lg_pass{}
}

.h_user{
  position:absolute; top:var(--header_height); left:100%; width:30%;
  height:calc(100dvh - var(--header_height));
  z-index:9999;
  border:0px solid red; background:var(--main_back);
  overflow:auto; display:none;
  padding:15px;

  .huser_title{
    position:relative;
    height:2rem; max-height:2rem; overflow:hidden;
    width:100%; padding:5px;
    display:flex;width:100%; justify-content: space-between;
    
    & label{font-size:1rem; font-weight:500;}
    & i{cursor:pointer;}
  }
  .skin_firma{
    position:relative; background:var(--main_back_alt);
    height:7rem; max-height:30rem; overflow:hidden;
    display:block; margin-top:1rem;
    border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;

    .user_info{
      position:relative;
      height:1.8rem; max-height:2rem; overflow:hidden;
      width:100%; padding:5px;
      display:flex; justify-content: space-between; align-items:center;
      & *{font-size:0.8rem;}
    }

    & :hover{}
  }

}

._cp *{cursor:pointer;}




@media only screen and (min-width : 300px) and (max-width : 580px){
  
}