:root {
    --appcolor: #BE1F0A;
    --palette-1:#BE1F0A;
    --palette-2:#1C1C1C;
    --palette-3:#E3C12F;
    --palette-4:#CBC9C6;
    --palette-5:#FFFFFF;
    --basecolor:#242939;
    --app2color: #545c64;
    --base2color: #212121;
    --altcolor:#707bfd;
    --alt2color:white;
    --menuwidth:180px;
    --danger:#F56C6C;
    --warning:#E6A23C;
    --success:#409EFF;
    --info:#67C23A;
    --primary:#409EFF;
    --md-offset:95px;
    --xs-offset:95px;
    --md-banner:250px;
    --xs-banner:150px;
}
main{
    width:100%;
}

/* Admin layout: sidebar + main content */
body:has(#asidemenu) {
    display: flex;
    flex-wrap: nowrap;
}
body:has(#asidemenu) #asidemenu {
    flex-shrink: 0;
}
body:has(#asidemenu) main {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.app-button{
    color:var(--palette-5);
    background:var(--appcolor);
    padding:10px 30px;
    border:none;
    border-radius:0px;
    cursor:pointer;
}
.app-button:hover{
    opacity:0.8;
}

.app-button.alt{
    background:var(--palette-5);
    color:var(--appcolor);
}

.ver-mas{
    border-radius: 5px;
    padding: 2px 7px;
    color: var(--palette-3);
}

.ver-mas:hover{
    color: var(--palette-2);
    background:var(--palette-3);
}

.comprar{
    color: white;
    border-radius: 5px;
    padding: 2px 7px;
    background:var(--appcolor);
}

.comprar:hover{
    opacity:0.80;
}

.banner-shadow{
    width: 100%;
    height: 100%;
    background: #0000004d;
    position: absolute;
    top: 0;
}

.cart-qty{
    position: absolute;
    top: -5px;
    height: 25px;
    width: 25px;
    background: var(--appcolor);
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    font-size: 0.7em;
    right: 0px;
}

#main{
    padding-top:var(--md-offset);
    background: white;
}
#main-shop{
    background: white;
    padding-top:calc(var(--md-offset) + 50px);
}


.variant-card{
    height: 540px;
    margin: 30px;
    position:relative;
    box-shadow:0px 0px 11px #0000001f
}

.variant-card:hover{
     box-shadow:0px 0px 20px #00000040;
    transform: scale(1.05);
}

.variant-card .title{
    margin: 0;
    margin-top:20px;
    color: var(--appcolor);
    font-size: 1.16em;
}

.add-cart{
    width: calc(100% - 110px);
    background: var(--appcolor);
    color: var(--alt2color);
    background: var(--appcolor);
    transition:all 0.5s;
}

.add-cart:hover, .add-cart:focus, .add-cart:active{
    background: var(--base2color);
    color: var(--appcolor);
}

.variant-card .description, .variant-card .price, .variant-card .old-price{
    margin:5px 0;
}

.variant-card .price{
    font-size: 1.7em;
}

.variant-card .old-price{
    font-weight:400;
    font-size:1.2em;
}

.variant-card .discount{
    padding: 3px 20px;
    background: #348c34;
    color: white;
    font-size: 1.2em;
    box-shadow: 0 0 9px #00000066;
}

.variant-card .super-descuento{
    position: absolute;
    top: 5px;
    background: var(--appcolor);
    color: var(--alt2color);
    font-size: 1.4em;
    padding: 5px 10px;
    border-radius: 0 5px 5px 0;
}

.variant-card .out-of-stock{
    position: absolute;
    top: 150px;
    background: var(--base2color);
    color: var(--alt2color);
    padding: 10px;
    width:100%;
    text-align:center;
    opacity:0.9;
}

.variant-card .image{
    height:300px; 
    justify-content: center;
    display: flex;
}

.variant-sin-tacc{
    position:absolute;
    top:250px; 
    right:5px;
}
.variant-comment{
    position:absolute;
    top:5px;
    right:5px;
    font-size:2em;
    color:var(--palette-3);
    cursor:pointer;
}

.categoria-card{
    min-height: 300px;
    background: white;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    margin: 15px;
}

.categoria-card .image{
    width: 100%;
    height: 100%;
    min-height:300px;
    background-position: center;
    background-size: cover;  
    background-repeat: no-repeat;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -o-transition: all .25s;
    transition: all .25s;
    cursor:pointer;
}

.categoria-card:hover .image,
.categoria-card:focus .image {
    transform: scale(1.2);
    filter: grayscale(0.5);
}

.el-col-12.categoria-card{
    width: calc(50% - 30px);
}


#cartrelated .product-item{
    width: 300px;
    position:relative;
    min-height:365px;
    padding:10px 10px 20px;
}

#cartrelated img{
    height: 180px;
    border-radius: 60%;
    width: 180px;
}

#cartrelated button{
    position: absolute;
    bottom: 20px;
    border:1px solid var(--palette-5);
    background:transparent;
    color:var(--palette-5);
    border-radius: 0px;
}

#cartrelated button:hover{
    opacity: 0.85;
    background: var(--app2color);
}

.sucursal-card{
    background: white;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    margin: 15px;
    border-radius: 3px;
    padding: 10px;
    border: 1px solid #80808047;
    height: 150px;
}

.sucursal-card:hover{
    box-shadow:0px 0px 9px #00000038;
}

.sucursal-card h3, .sucursal-card p{
    margin:2px 0;
}
.sucursal-card h3{
    color:var(--appcolor);
}
.sucursal-card p{
    color:grey;
    font-size:0.8em;
}
.el-col-6.sucursal-card {
    width: calc(20% - 30px);
}

.banner-page{
    height:300px;
}


.categoria-card .title {
    font-size: 1.4em;
    color: #ffffff !important;
    background:var(--appcolor);
    text-align: center;
    bottom: 0px;
    display: inline-block;
    left: 0px;
    letter-spacing: 1px;
    padding: 10px 30px;
    position: absolute;
}

.notify-me{
    padding: 5px 10px;
    border-radius: 5px;
    background: var(--base2color);
    color: white;
    margin: 10px;
    display: block;
}

#banner-section{
    position:relative;
}
#banner-section .title{
    height: 50px;
    text-align: center;
    color: white;
    z-index: 990;
    position: absolute;
    width: 100%;
    top: calc(50% - 50px);
    font-size: 2em;
    text-shadow: 0px 0px 11px black;
}

.title-underline{
    border-bottom: 5px solid var(--appcolor);
    position: relative;
}

.title-underline .caret{
    font-size: 1.6em;
    position: absolute;
    bottom: -36px;
    right: calc(50% - 16px);
    color: var(--appcolor);
    width: 32px;
    text-shadow: none;
}



.title-productos{
    margin-top:0;
    padding-top:50px;
    text-align:center;
    font-size:2em;
}
.title-productos span{
    border-bottom:5px solid var(--appcolor);
    position:relative;
}
.title-productos .caret{
    font-size: 1.6em;
    position: absolute;
    bottom: -36.5px;
    right: calc(50% - 16px);
    color: var(--appcolor);
    width: 32px;
}

.banner-page{
    width:100%;
}
.product-image{
    height:300px;
}
.product-card{
    height:400px;
    text-align:center;
    margin:20px 0;
}


#products-section .el-card__header{
    background-color: #ed1c24ad;
}

.floatlabel{
    opacity: 0;
    transition: all 0.5s;
    font-size: 0.8em;
    z-index: 99;
    position: absolute;
    top: -10px;
    background: white;
    left: 5px;
}

.floatlabel.active{
    opacity: 1;
}

.categoria-avatar{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
.categoria-avatar .image{
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    cursor: pointer;
}

.categoria-avatar .image:hover{
    box-shadow:0px 0px 20px #0000007a;
}
.categoria-avatar h3{
    cursor: pointer;
}

/*

    CAROUSEL

*/


.carousel-h, .el-carousel__container{
    height:calc(100vh - var(--md-offset));
    width:100%;
    min-height: 150px;
}

.carousel-h .el-carousel__arrow{
    background-color: transparent;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 1px 0px 3px #130a0a;
    color: #da0000;
}

.carousel-shop .el-carousel__item, .carousel-h .el-carousel__item{
    opacity:0.90;
    transition:opacity 0.5s;
}
.carousel-shop .el-carousel__item.is-animating,.carousel-h .el-carousel__item.is-animating {
    opacity:1;
    transition:opacity 0.5s;
}

.carousel-shop, .el-carousel__container{
    height:55vh;
    width:100%;
}

.carousel-como-comprar{
    margin-bottom:-50px;
}

.carousel-como-comprar .el-carousel__arrow{
    background-color: transparent;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 1px 0px 3px black;
    color: #000;
}


.carousel-como-comprar, .carousel-como-comprar  .el-carousel__container{
    height:250px;
    background: #ffffff2e;
}
.el-image.carousel-comprar{
    height:100%;
}
.carousel-como-comprar .pasos-text{
    position: absolute;
    top: 30%;
    width: 100%;
    text-align: center;
    font-size: 1.5em;
    color:white;
}

.carousel-como-comprar .pasos-new-text{
    text-align: right;
    font-size: 1.5em;
    color:white;
}

#como-comprar-section{
    background-repeat: no-repeat;
    background-size: cover;
}

.carousel-como-comprar .el-carousel__indicators .el-carousel__indicator .el-carousel__button{
    width: 20px;
    height: 20px;
    background-color: #000;
    border-radius: 50%;
}

.carousel-como-comprar .el-carousel__indicators .el-carousel__indicator.is-active .el-carousel__button{
    background-color: var(--palette-5);
}
/*

    LOADER 

*/
    .loader-logo{
        max-width: 250px; 
        height: 200px;
    }
    .loader-sysmac{
        max-width: 350px; 
        height:50px;
    }
    #loader{
        backdrop-filter: blur(4px);
        width: 100vw;
        position: fixed;
        height: 100vh;
        z-index: 99999;
        top: 0;
    }
    
    #loader .row{
        max-width:250px;
        margin:auto;
    }
    .body--dark #loader{
        background: #121212;
    }

/*

    PAGINADO
    
*/

    .pageBtn{
        display: inline-block;
        padding: 5px;
        margin: 4px 5px 0;
        line-height: 1;
        cursor:pointer;
    }
    
    .pageInput{
    	width:50px;
    	display:inline-block;
    	
    }
    .pageInput .el-input__inner{
        padding:5px !important;
    	text-align:center !important
    }
    
/*

    CART
    
*/

    .product-cart{
        align-items: center;
        display: flex;
        border-bottom: 1px solid #d7ded7;
    }
    
    .product-cart .image, .cart-row .image{
        width:250px;
    }
    
    .product-cart .row{
        padding:20px;
    }
    
    .cart-row td{
        padding:10px 5px;
    }
    
    
    .cart-row{
        border-top: 1px solid #d7ded7;
    }
    
    .cart-row .image-container{
        display:flex;
        align-items:center;
    }


/*

    COMMON
    
*/

    
    ::-moz-selection { 
        color: var(--alt2color); 
        background: var(--appcolor);
    }
    
    ::selection {
        color: var(--alt2color); 
        background:  var(--appcolor);
    }
    
    
    .hidden{
        display:none;
    }
    
    html, body{
        margin: 0;
    }
    html{
        min-height:100vh
    }
    
    a{
        text-decoration:none;
    }
    .text-danger{
        color:#ff5454 !important;
    }
    .text-success{
        color:#3cd055 !important;
    }
    .text-warning{
        color:#f5b94b !important;
    }
    .text-info{
        color:#6cbbff !important;
    }
    .main-content{
        min-height: 100vh;
        padding:25px 25px 15px;
        background:#c2bef936;
    }
    .el-drawer__body{
        overflow-y:auto !important;
    }
    .to-right, .toright{
        display: flex;
        justify-content: flex-end;
    }
    .centered, .to-center{
        display: flex;
        justify-content: center;
    }
    .el-row, .el-select{
        width:100% !important;
    }
    .el-date-editor.el-input, .el-date-editor.el-input__inner{
        width:auto !important;
    }
    .cardhead, .headcard, .headercard, .cardheader, .cardheading, .headingcard {
        border-bottom:2px solid #545c6473;
        padding:0 0 10px 0;
        margin-bottom:10px !important;
    }
    .cardhead h4, .cardheader h4{
        margin-bottom:5px;
    }
    .cardhead h4 i, .cardheader h4 i{
        color:var(--altcolor);
    }
    .cardfooter, .footercard, .footcard, .cardfoot{
        border-top:2px solid #545c6473;
        padding:10px 0 0 0;
        margin-top:10px !important;
    }
    .contenedor{
        width: 100%;
        min-height: 83vh;
    }
    .el-table__row--level-0{
     background:#f2f3f8 !important;
    }
    
    .tc{
        text-align:center !important;
    }
    .shadow{
        box-shadow:0px 0px 5px #00000038;
    }
    .thead{
        background: #545c6473;
        color: #303133;
    }
    .mb10{
        margin-bottom:10px;
    }
    .mbt10, .mtb10{
        margin:10px 0;
    }
    .mbt20, .mtb20{
        margin:20px 0;
    }
    .m5{
        margin:5px;
    }
    .sysicon{
        color:var(--altcolor);
    }
    
    
    .drawer{
        position:absolute;
        z-index:999;
        height:100vh;
        box-shadow:0px 0px 20px #00000030;
        padding:30px 20px;
        overflow:auto;
    }
    .drawer.right{
        right:0;
    }
    .drawer .close{
        color: #00000096;
        font-size: 2em;
        margin-bottom: 10px;
        cursor: pointer;
    }
    .cursor,.pointer{
        cursor:pointer;
    }
    
    #footer{
        padding: 3px;
        text-decoration: none;
        color:var(--alt2color);
        background:var(--base2color);
    }
    #footer .contact{
        padding:20px 50px 30px;
    }
    #footer h4{
        font-weight: 500;
    }
    
    #footer .copy{
        text-align: center;
        font-size: 0.75em;
    }
    
    .bg-danger{
    	background: #ff000029 !important;
    }
    .bg-success{
    	background: #4caf5036 !important;
    }
    .bg-warning{
    	background: #fbd41226 !important;
    }
    .text-danger{
        color:var(--danger);
    }
    .text-warning{
        color:var(--warning);
    }
    .text-info{
        color:var(--info);
    }
    .text-success{
        color:var(--success);
    }
    .text-primary{
        color:var(--primary);
    }
    .el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {
        background: var(--altcolor) !important;
        border-color: var(--altcolor)  !important;
        color: #FFF  !important;
    }
    .el-button--primary.is-plain {
        color: var(--altcolor)  !important;
        background: #707bfd2e  !important;
        border-color: #707bfd5c  !important;
    }
    
    body, .el-button, .el-input__inner, .el-input__inner::placeholder, .el-textarea__inner, .el-textarea__inner::placeholder{
        font-family: 'Poppins', sans-serif;
    }
    .row, .container{
    	margin-left:0;
    	margin-right:0;
    }
    
    .content{
    	margin-bottom:10px;
    	margin-top:10px;
    }
    
    .m0{
        margin:0 !important;
    }
    .p0{
        padding:0 !important;
    }
    .w100{
        width:100%;
    }
  
#cartrelated .el-row{
    max-width: 90%;
    margin: auto;
} 

#cartrelated .el-col{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
}

    

/*

    RESPONSIVE

*/

    @media only screen and (max-width:1199px){
        #main{
            padding-top:var(--xs-offset);
        }
        .categoria-card, .categoria-card .image{
            min-height:150px;
        }
        .variant-card .image{
            height:250px  
        }
        .variant-sin-tacc{
            top:200px;
        }
    }
    
    
    @media only screen and (max-width: 767px){
        .el-col-xs-24.categoria-card, .el-col-xs-24.sucursal-card {
            width: calc(100% - 30px);
        }
        .banner-page{
            height:150px;
        }
        
        .el-dialog{
            width:90% !important;
        }
    
    }
    
    @media only screen and (max-width: 682px){
        #main-shop{
            padding-top:calc(var(--md-offset) + 70px);
        }
        .variant-card{
            height:450px  
        }
        .variant-card .image{
            height:200px  
        }
        .variant-sin-tacc{
            top:150px; 
        }
        .product-cart .image-container, .cart-row .image-container, .cart-image-title{
            display:none !important;  
            width:0;
            padding:0;
        }
        
        .carousel-como-comprar img{
            display:none;
        }
        .carousel-como-comprar .pasos-text:nth-child(2){
            top: 25%;
            
        }
        
        .carousel-h, .el-carousel__container{
            height:calc(40vh - var(--md-offset));
        }
    }
    
    @media only screen and (max-width: 454px){
        #main-shop{
            padding-top:calc(var(--md-offset) + 100px);
        }
        
    }

/*

    FONTS 
    
*/
    @font-face {
      font-family: 'Poppins';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: local('Poppins Regular'), local('Poppins-Regular'), url("../fonts/poppins.woff2") format('woff2');
      unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
    }
    
    @font-face {
      font-family: 'Poppins';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: local('Poppins Regular'), local('Poppins-Regular'), url("../fonts/poppins.woff2") format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    
    @font-face {
      font-family: 'Poppins';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: local('Poppins Regular'), local('Poppins-Regular'), url("../fonts/poppins-latin.woff2") format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: local('Roboto Bold'), local('Roboto-Bold'), url("../fonts/roboto.woff2") format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }