/***************************
    2. HEADER > colores menu
****************************/
.btn-shopping-bag:hover{
    text-decoration:none;
}
.bs-login { 
    max-width: 6.25rem;
    display:flex;
    align-items:center;
}

.bs-sticky-header{
    /*se aplica automatiamente cuando el header tiene data-info="sticky" */
    box-shadow: 0px 2px 10px -4px rgba(0,0,0,0.75);
    background:var(--header-bg-color);
}
.bs-header { 
    background:var(--header-bg-color);
    border-top: 10px solid #fff;
}

.bs-header .dropdown-menu .row {
    margin:-1px;
    overflow:hidden;
}

.bs-header .dropdown-menu .row [class*="col-"]{
    padding:0 ;
}
.navbar-toggler{
    margin:.25rem 0;
} 
.bs-menu-lv1, .bs-menu-lv2, .bs-menu-lv3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* bs-menu-lv1 */
.bs-menu-lv1 {
    white-space: normal;
    color: var(--lv1-txt-color);
    font-size: var(--lv1-size);
    padding:.75rem 1rem;
    font-weight:600;
    text-align: center;    
}
.bs-menu-lv1:hover, .nav-item.show > .bs-menu-lv1
{
    box-shadow: 0 -5px inset var(--lv1-hover-decoration);
    color: var(--lv1-hover-txt-color);
}

.bs-menu-title,.bs-menu-lv2,.bs-menu-lv3{
   padding:.5rem 1rem; 
}

/* bs-menu-lv2 */
.bs-menu-lv2 {
    color:var(--lv2-txt-color);
    background-color: var(--lv2-bg-color);
    font-size: var(--lv2-size);
}

.bs-menu-lv2:hover {
    color:var(--lv2-hover-txt-color);
    background:var(--lv2-hover-bg-color);
}

/* bs-menu-lv3 */
.bs-menu-lv3 {
    color:var(--lv3-txt-color);
    background-color: var(--lv3-bg-color);
    font-size: var(--lv3-size);
  
}
.bs-menu-lv3:hover {
    color:var(--lv3-hover-txt-color);
    background:var(--lv3-hover-bg-color);
}

/*lv2 si tiene hijos lv3 */
.bs-menu-title{
    font-weight:var(--menu-title-weight);
    font-size:var(--menu-title-size);
    color:var(--menu-title-txt-color);
}

/***********************************
   2. HEADER > social media
************************************/
@media screen and (min-width: 1200px){
.bs-header .bs-social-media a {
    margin: 0px 1%;
}}

.bs-header .bs-social-media a {
    padding: 0.5rem;
    color: var(--rrss-txt-color);
    background: var(--rrss-bg);
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid rgb(195, 196, 197);
    border-radius: 50%;
    font-size: 14px;
    line-height: 2.8125rem;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    border-color: var(--rrss-bg);
}
.bs-header .bs-social-media a:hover {
    opacity:0.7;
}
.bs-header-navbar{
    background:var(--header-navbar-bg-color);
}
@media screen and (max-width:992px){
.bs-header-navbar {
    background: var(--header-navbar-bg-color);
    padding-bottom: 0px;
}
}
/*se eliminan los margenes del navbar para permitir ordenar elementos con col*/
.bs-header-navbar .container .navbar {
    margin: 0;
    padding:0;
}
/*se eliminan los padding del los col hijos directos para poder usar menus de anchos 100%*/
.bs-header-navbar .container .navbar > [class*="col"] {
    padding:0;
}
/*para menu de ancho de pantalla*/
.dropdown-menu{
    margin:0;
    overflow:hidden;
    border-radius: var(--default-border-radius);
}
.dropdown-menu.show {
    width:100%;
}

/*el menu usa el 100% del ancho de su padre*/
.bs-nav-menu {
    width:100%;
}



.bs-header-search {
    display:flex;
    width:100%;
    min-width:100px;
}
.collapse.show .bs-header-search {
    z-index:1000;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    padding:0 1rem;
}

/* Boton login activado*/
.show>.btn-primary.dropdown-toggle {
  background:#664f7f; 
}

.login-items:hover {
    color:#664f7f;
    font-weight:bold;
}

.bs-menu-title {
    width: 100%;
    font-size: 12pt;
}

@media screen and (min-width:1200px) {
    .navbar-expand-xl .bs-menu-lv1 {
        height:100%;
    }
    
    .navbar-expand-xl .bs-menu-close {
        display:none;
    }
    
    .navbar-expand-xl .navbar-collapse.collapse,
    .navbar-expand-xl .navbar-collapse.collapsing,
    .navbar-expand-xl .navbar-collapse.collapse.show {
        position:static !important;
        background:transparent;
        overflow-y:initial;
        max-width:100%;
        padding:0;
        box-shadow:none;
        height:auto !important;
        width:auto;
    }
    
    .navbar-expand-xl .bs-menu-big {
        position:static;
    }
    
    .navbar-expand-xl .bs-menu-big .bs-menu-lv1 + .dropdown-menu.show {
        width:100%;
        display:flex;
        flex-wrap:wrap;
    }
    
    .navbar-expand-xl .bs-menu-big .bs-menu-lv1 + .dropdown-menu.show>* {
        width:25%;
    }
    
    /*ancho maximo de buscador*/
    .navbar-expand-xl .bs-header-search{
        max-width:10rem;
    }
}

@media screen and (min-width:992px) {
    .navbar-expand-lg .bs-menu-lv1 {
        height:100%;
    }
}

@media screen and (min-width:768px) {
    .navbar-expand-md .bs-menu-lv1{
        height:100%;
    }
}

@media screen and (min-width:576px) {
    .navbar-expand-md .bs-menu-lv1{
        height:100%;
    }
}

/*** new mobile menu ***/
.collapsing button.close,
.collapse.show button.close,
.collapsing button.close:hover,
.collapse.show button.close:hover {
    background:inherit;
    line-height:inherit;
    color:inherit;
    float:none;
    opacity:1;
    text-shadow:none;
}

.navbar-collapse.collapse,
.navbar-collapse.collapse.show,
.navbar-collapse.collapsing {
    position:fixed !important;
        top:0;
        left:0;
    height:100vh !important;
    z-index:1000;
    /*aqui aplica color de fonde del menú*/
    background: var(--header-navbar-mobile-bg-color);
    box-shadow: 0 10px 20px rgba(0,0,0,0.19),0 6px  6px rgba(0,0,0,0.23);
    transition: all .25s ease;

}

.navbar-collapse.collapse,
.navbar-collapse.collapsing {
    width:0;
    max-width:0;
    padding:0;
}

.navbar-collapse.collapse.show {
    overflow-y:auto;
    max-width:360px;
    width:100%;
    padding:0 1rem;
}

@media screen and (min-width:320px){
    .navbar-expand-sm .navbar-collapse.collapse,
    .navbar-expand-sm .navbar-collapse.collapsing,
    .navbar-expand-sm .navbar-collapse.collapse.show {
        position:static !important;
        background:transparent;
        overflow-y:initial;
        max-width:100%;
        padding:0;
        box-shadow:none;
    }
    
    .navbar-expand-sm .navbar-collapse.collapse,
    .navbar-expand-sm .navbar-collapse.collapse.show,
    .navbar-expand-sm .navbar-collapse.collapsing {
        height:auto !important;
        width:auto;
    }
}


@media screen and (min-width:576px) {
    .navbar-expand-sm .navbar-collapse.collapse,
    .navbar-expand-sm .navbar-collapse.collapsing,
    .navbar-expand-sm .navbar-collapse.collapse.show {
        position:static !important;
        background:transparent;
        overflow-y:initial;
        max-width:100%;
        padding:0;
        box-shadow:none;
    }
    
    .navbar-expand-sm .navbar-collapse.collapse,
    .navbar-expand-sm .navbar-collapse.collapse.show,
    .navbar-expand-sm .navbar-collapse.collapsing {
        height:auto !important;
        width:auto;
    }
}

@media screen and (min-width:768px) {
    .navbar-expand-md .navbar-collapse.collapse,
    .navbar-expand-md .navbar-collapse.collapsing,
    .navbar-expand-md .navbar-collapse.collapse.show {
        position:static !important;
        background:transparent;
        overflow-y:initial;
        max-width:100%;
        padding:0;
        box-shadow:none;
    }
    
    .navbar-expand-md .navbar-collapse.collapse,
    .navbar-expand-md .navbar-collapse.collapse.show,
    .navbar-expand-md .navbar-collapse.collapsing {
        height:auto !important;
        width:auto;
    }
}

@media screen and (min-width:992px) {
    .navbar-expand-lg .navbar-collapse.collapse,
    .navbar-expand-lg .navbar-collapse.collapsing,
    .navbar-expand-lg .navbar-collapse.collapse.show{
        position:static !important;
        background:transparent;
        overflow-y:initial;
        max-width:100%;
        padding:0;
        box-shadow:none;
    }
    
    .navbar-expand-lg .navbar-collapse.collapse,
    .navbar-expand-lg .navbar-collapse.collapse.show,
    .navbar-expand-lg .navbar-collapse.collapsing{
        height:auto !important;
        width:auto;
    }
    
}

@media screen and (min-width:1200px) {
    .navbar-expand-xl .navbar-collapse.collapse,
    .navbar-expand-xl .navbar-collapse.collapsing,
    .navbar-expand-xl .navbar-collapse.collapse.show{
        position:static !important;
        background:transparent;
        overflow-y:initial;
        max-width:100%;
        padding:0;
        box-shadow:none;
    }
    
    .navbar-expand-xl .navbar-collapse.collapse,
    .navbar-expand-xl .navbar-collapse.collapse.show,
    .navbar-expand-xl .navbar-collapse.collapsing {
        height:auto !important;
        width:auto;
    }
}
/***********************************
   3. Estilos para el login y usuario logueado en menu mobile
************************************/
.login .bs-menu__lv1,
.dropdown .bs-menu__lv1 {
   display: flex;
   align-items: center;
   padding: 0.5rem 1rem;
   color: white;
   text-decoration: none;
   transition: color 0.2s ease-in-out;
   background-color: var(--primary-color);
   border-radius: 6px;
}

.login .bs-menu__lv1:hover,
.dropdown .bs-menu__lv1:hover {
   color: #ffffff;);
   background-color: var(--primary-hover-color);
}

#usermenu.dropdown-menu {
   min-width: 200px;
   padding: 0.5rem 0;
   margin-top: 0.5rem;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#usermenu .dropdown-item {
   padding: 0.5rem 1rem;
   color: #212529;
   transition: background-color 0.2s ease-in-out;
}

#usermenu .dropdown-item:hover {
   background-color: #f8f9fa;
   color: #0056b3;
}

#usermenu .dropdown-item i {
   width: 20px;
   text-align: center;
}