@charset "utf-8";

header {
    position: fixed;
    width: calc(100% - 2 * var(--margen));
    left: var(--margen);
    top: 0px;    
    padding: var(--margen);
    padding-right: 0px;
    display: flex;
    justify-content: space-between;
    background-color: var(--colorblanco);
    z-index: 10;
    transition: background-color .4s ease-in 0s,padding .4s ease-in 0s;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
}
header.pequeno {
    padding-top: 1em;
    padding-bottom: 1em;
}
#logo, #menulateral > img {
    height: 1.75em;;
    width: auto;
    cursor: pointer;
    transition: width .4s ease-in 0s,height .4s ease-in 0s;
}
#logo.pequeno {
    height: 1.5em;
}
#iconoabrirmenu {
    display: none;
    color: var(--morado500);
}
header > nav {
    flex-grow: 1;
    display: flex;
    justify-content: space-around;
    padding-left: var(--margen);
    padding-right: var(--margen);
    align-items: flex-end;
}

header > nav > a, #menulateral > nav > a, .submenulateral a, .subsubmenulateral a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    line-height: 1em;
    background-image:url("../imagenes/puntomenu500.png");
    background-position: left bottom;
    background-size: 0px 1px;
    transition: background-size .2s linear 0s, opacity .2s linear 0s,color .2s linear 0s;
    color: var(--morado500);
    background-repeat: no-repeat;
    flex-wrap: nowrap;
}
header > nav > a {
    height: 100%;
    justify-content: flex-end;
}
header > nav > a:hover, #menulateral > nav > a:hover, .submenulateral a:hover, .subsubmenulateral a:hover  {
    background-size: 100% 1px;
}
#tapamenu {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    transform: scale(0,1);
    transform-origin: left center;
    background-color: var(--morado400al60); 
    transition: transform .4s linear 0s;  
    z-index: 10;
}
#tapamenu.abierto {
    transform: scale(1);
}
#menulateral, .submenulateral, .subsubmenulateral {
    position: fixed;
    top: 0px;
    right: 100%;
    height: 100vh;
    padding: var(--margen);
    background-color: var(--colorblanco);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index:13;
    transition: left .4s linear 0s, transform .4s linear 0s,opacity .1s linear .4s; 
    opacity: 0;    
    min-width: 290px;
}

#menulateral.abierto , .submenulateral.abierto , .subsubmenulateral.abierto  {
    transition: left .4s linear 0s, transform .4s linear 0s; 
}
#menulateral.abierto {
    opacity:1;
    transform: translateX(100%);
}
.submenulateral.abierto {
    opacity: 1;
    transform: translateX(0px);
}
.submenulateral {
    border-left: solid 1px var(--colornegro);
    z-index: 12;
    right: auto;
    left: 0px;
    transform: translateX(-100%);
    height: 100vh;
    padding-right: 0px;
}

.deslizadormenu, #contenedorfiltros {
    width: 100%;
    margin-top: var(--margen);
    flex-grow: 1;
    overflow-x:hidden;
    overflow-y: auto;
    padding-right: var(--margen);
}
@media (min-width: 500px) {
*::-webkit-scrollbar, #contenedorfiltros::-webkit-scrollbar {
		width: .5em;
		height: .5em;
	}
	 
*::-webkit-scrollbar-track, #contenedorfiltros::-webkit-scrollbar-track {
    /*box-shadow: inset 0 0 4px rgba(0,0,0,0.3); */
    border-radius: .5em;
    /*background-color:rgba(177,177,177,1.00);*/
}

*::-webkit-scrollbar-thumb {
   /* box-shadow: inset 0 0 4px rgba(0,0,0,0.5); */
    border-radius: .5em;
    background-color:rgba(177,177,177,1.00);
}
}
.subsubmenulateral {
    z-index: 11;
    left: 0%;
    right: auto;
    border-left: solid 1px var(--colornegro);
    transform: translateX(-100%);
   /* transition: transform .5s linear .0s;*/
    padding-right: 0px;
    opacity: 0;
}
/*.subsubmenulateral:nth-of-type(2n) {
    transform: translateY(100%);
}*/
.subsubmenulateral.abierto {
    /*transition: transform .5s linear 0s;*/
    transform: translateX(0%);
    opacity: 1;
}


#menulateral > nav {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-top: var(--margen);
}
#menulateral > nav > a {
    margin-top: .25em;
    height: var(--margen);
}

#menulateral > nav > a:hover {
    opacity: 1;
}
#imagenbuscarproducto {
    height: 1em;
    width: auto;
    opacity: .6;
    transisiton: opacity .2s linear 0s;
    cursor: pointer;
    margin-left: .5em;
    margin-right: .5em;
}
#imagenbuscarproducto:hover {
    opaicty: 1;
}
#contenedorbuscar {
    border: 1px solid var(--morado500transparencia);  
    margin-bottom: 1em;
    border-radius: 8px;
    display: flex;
}
#buscarproducto {
    border: none;
    flex-grow: 1;
    color: var(--morado600);
    margin-left: .5em;
}
#buscarproducto::placeholder {
    color: var(--morado500transparencia);
}
#vinculopuntocarga {
    margin-top: 1em;
}
.submenulateral > img, .subsubmenulateral > img {
    height: .875em;
    width: auto;
    margin-bottom: 1em;
    align-self: flex-end;
    cursor: pointer;
    margin-right: var(--margen);
}
.submenulateral > nav, .subsubmenulateral > nav {
    margin-top: var(--margen);
}
.submenulateral .nocortar, .subsubmenulateral .nocortar {
    display: flex;
    height: 2em;
    align-items: center;
}

.submenulateral .redondel, .subsubmenulateral .redondel{
    font-size: .75em;
    display: inline-flex;
    width: 2.25em;
    height: 2.25em;
    justify-content: center;
    align-items: center;
    border: solid 1px var(--morado500transparencia);
    border-radius: 50%;
    margin-left: 1em;
    color: var(--morado500);
}
#contenedordestinatarios, .subsubmenulateral span.nocortar:not(:first-of-type) {
    margin-left: 1em;
}
.submenulateral nav, #contenedordestinatarios, .subsubmenulateral nav {
    display: flex;
    flex-direction: column;
}
#menulateral nav {
    justify-content: space-around;
}
.submenulateral a, .subsubmenulateral a, .subsubmenulateral span {
    text-decoration: none;
    color: var(--morado500);
}
.masgrande {
    font-size: larger;
    font-weight: 700;
}
.

#contenedorgrupos {
    margin-top: 2em;
}
.submenulateral span.nocortar, .subsubmenulateral span.nocortar {
    display: flex;
    justify-content: space-between;
}
#contenedorgrupos span.nocortar {
    border-top: 1px solid var(--morado500transparencia);
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    transition: border-top-color .2s linear .4s,border-bottom-color .2s linear .4s;
}
#contenedorgrupos span.nocortar, #contenedorgrupos  span.nocortar a {
    color: var(--morado500transparencia);
    background-image: none;
    cursor: default;
}
#contenedorgrupos span.nocortar:hover {
    border-top-color: var(--morado500);
}
#contenedorgrupos span.nocortar:hover a{
    color: var(--morado500);
}
#contenedorgrupos span.nocortar:last-of-type:hover, #contenedorgrupos span.nocortar:hover + span {
    border-top-color: var(--morado500);
}
#contenedorgrupos span.nocortar:last-of-type {
    border-bottom: 1px solid var(--morado500transparencia);
}
#contenedorgrupos span.nocortar:last-of-type:hover {
    border-bottom-color: var(--morado500);
}
.redondel {
    border-color: var(--morado500transparencia);
    transition: color .2s linear .0s, background-color .2s linear .0s;
}
 span.nocortar:hover .redondel {
    color: var(--colorblanco);
    background-color: var(--morado500);
    border-color: var(--morado500);
}
.subsubmenulateral > img {
    visibility: hidden;
}

.submenulateral span.nocortar {
    transform-origin: center top;
    transform: scale(1,0); 
    transition: transform .2s linear .0s;
}
.submenulateral span.nocortar.abierto {
    transform:scale(1,1);
}

#menulateral > nav > a, .submenulateral a, .subsubmenulateral a {
    color: var(--morado500);
    background-image:url("../imagenes/puntomenu500.png");
}
@media (min-width: 901px) {
    #menulateral #vinculosoluciones {
        opacity: 1;
       /* background-size: 100% 1px;*/
    }
}

@media (max-width: 900px) {
     header > nav > a:hover, #menulateral > nav > a:hover, .submenulateral a:hover, .subsubmenulateral a:hover  {
        background-size: 0% 1px;
    }
    header {
        padding-right: var(--margen);
    }
    header > nav {
        display: none;
    }
    #iconoabrirmenu {
        display: block;
        font-weight: 500;
        font-size: 1.25em;
        line-height: 0.9em;
        cursor: pointer;
        align-self: flex-end;
    }
    #encabezado.pequeno #iconoabrirmenu {
        color: var(--morado500);
    }
    
    #menulateral, .submenulateral, .subsubmenulateral {
        right: auto;
        left: 100%;
        width: 100%;
        border-left: none;
        transform: translateX(0px);
        transition: left .6s linear 0s,opacity 0s linear .65s;
        font-size: 1.5em;
    }
  
    #menulateral.abierto, .submenulateral.abierto, .subsubmenulateral.abierto { 
        transition: left .6s linear 0s,opacity 0s linear 0s;
        left: 0px;
        opacity: 1;
        transform: translateX(0px);
    }
    #menulateral.fuera1, .submenulateral.fuera1 {
        transition: left .6s linear 0s,opacity 0s linear 0s;
        left: -50%;
    } 
    #menulateral.fuera2 {
        transition: left .6s linear 0s,opacity 0s linear 0s;
        left: -100%;
    }
    #menulateral {
        z-index: 11;
        font-size: 1em;
    }
    #menulateral > img {
        display: none;
    }
    .submenulateral {
        z-index: 13;
    }
    .subsubmenulateral {
        z-index: 14;
    }
    .subsubmenulateral > img {
        visibility: visible;
    }
    #tapamenu {        
        opacity: 1;
        transition: transform 1s linear 0s,top 0s linear 1.2s, height 0s linear 1.2s;
        transform-origin: right center;
        transform: scale(0,1);
    }
    #tapamenu.abierto {
        opacity: 1;
        transform: scale(1,1);
        transition: transform .4s linear 0s;
        transform-origin: right center;  
    }
    #menulateral > nav > a {
        opacity: 1;
        margin-bottom: .35em;
        font-size: 2em;
        font-weight: 450;
        margin-left: .5em;
    }
        
}