/* ##### GENERAL ###### */
:root {
    --salmon-color: #FE5B67;
    --error-color: #FF0303;
    --warning-color: #ffe152;
    --success-color: #95C929;
    --error-light-color: #FF030333;
    --warning-light-color: #ffe15244;
    --success-light-color: #95C92944;
    --window-height: 100%;
    --navbar-height: 50px;
    --max-width: 1200px;
    --leyend-height: 0px;
}
/* ##### END GENERAL ### */

/* ##### LAYOUT GENERAL ######### */

body {
    height: 100vh; 
    height: var(--window-height);
    font-size:14px;
}

.app {
    height: 100vh; 
    height: var(--window-height);
    max-width: var(--max-width);
}

.content-cabezal .cabezal {height:100%;}

.content-cabezal .cabezal .back {position:absolute; z-index:10; color:#FFFFFF; }
.content-cabezal .cabezal .back.close {font-size:2em; top:15px; left:15px; line-height:1;}
.content-cabezal .cabezal .back.close:hover, .content-cabezal .cabezal .back.close:focus {color:#DDD;}
.content-cabezal .cabezal .back.arrow { top: 1.2em; left:1.2em; background-color:#FFFFFF; border-radius: 10em; width: 2em; height:2em; font-size:0.9em; color:#363636; box-shadow: 0 0 10px 0 #363636AA; background-image: var(--svg-back-arrow); background-size:20px; background-position:center center; background-repeat:no-repeat; }
.content-cabezal .cabezal .back.arrow:hover, .content-cabezal .cabezal .back.arrow:focus {box-shadow: 0 0 10px 0 #363636; background-color:#FAFAFA;}

.h245{height: 245px;}
.app {grid-template-rows: none; display:block; overflow-y: auto;}
.app .content-cabezal {min-height:80px; max-height:160px; height:25%; background-color:#DDD;}
.app.front-producto .content-cabezal {max-height:250px; height:40%; }
.app.front-producto .content-cabezal .cabezal {background-size: cover;}
.app.front-producto .content-cabezal .precio {position:absolute; bottom:15px; right:15px; font-size:2em; font-weight:bold;}
.app.front .content-filtro { padding:0.25em 0;}
.app .menu-user {position:fixed; height:var(--navbar-height); left:0; bottom:0;}
.app::after {content:""; display:block; height:var(--navbar-height);}


/* ##### END LAYOUT GENERAL ##### */

/* ##### HEADER ############ */
.app .cabezal .nombre {font-size:1.5em;}
.app .cabezal .mesa {font-size:1.5em; left:1em; bottom:1em; line-height:1;}
.app .cabezal .iso {right:1em; bottom:0.5em; width:3em; height:3em;}

/* ##### END HEADER ######## */

/* ##### HEALTH FILTER ##### */

.filters {position:relative; font-size:0.9em; height:2.2em;}
.filter {display:inline-block; margin:0 0.1em; width:2.2em; height:2.2em; border-radius:5em; cursor:pointer;}
.filter.noaction {cursor:default;}
.filter.big {width:3em; height:3em;}
.filter:last-of-type {margin-right:0;}
.filter:first-of-type {margin-left:0;}

.filters input {position: absolute; clip: rect(0,0,0,0);pointer-events: none;}


.filter i {display:block; width:100%; height:100%; mask-size: contain; -webkit-mask-size: contain; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; background-color:#969696;}
.filter i.health_bc { mask-image:var(--svg-health-bc); -webkit-mask-image:var(--svg-health-bc);}
.filter i.health_veggie { mask-image:var(--svg-health-veggie); -webkit-mask-image:var(--svg-health-veggie);}
.filter i.health_vegan { mask-image:var(--svg-health-vegan); -webkit-mask-image:var(--svg-health-vegan);}
.filter i.health_tacc { mask-image:var(--svg-health-tacc); -webkit-mask-image:var(--svg-health-tacc);}
.filter i.fast {mask-image:var(--svg-fast); -webkit-mask-image:var(--svg-fast);}

.filters input:checked+.filter, .filter.active, .filter:not(.noaction):hover, .filter:not(.noaction):focus {background-color:#363636; outline:1px solid #363636;}
.filters input:checked+.filter i, .filter.active i, .filter:not(.noaction):hover i,.filter:not(.noaction):focus i {background-color:#FFFFFF;}

    /* ####### HEALTH FILTER MODAL ####### */
    
    /* ####### END HEALTH FILTER MODAL ### */

/* ##### END HEALTH FILTER #### */

/* ##### BTN, TAG & SUBCATEGORIES FILTER ######## */

.btn, .content-subcategorias nav ul li .btn, .tag {
    font-size:0.9em;
    color: #fff;
    background-color: #363636;
    transition: background-color 0.3s ease;
    border-radius: 10em;
    text-decoration: none;
    padding-left: 1em;
    display: inline-flex;
    align-items: center;
    margin: 0 0 0 5px;
    position: relative;
    z-index: 1;
    outline: 0;
    line-height: normal;
    cursor: pointer;
    width:auto;
    height: auto;
    padding: 0.3em 1em;
    font-family: 'qanelas-bold', sans-serif;
}

.tag.tag-xs {font-size:0.7em; padding: 0.2em 0.5em;}

.btn:hover, .content-subcategorias nav ul li a.btn:hover, 
.btn:focus, .content-subcategorias nav ul li a.btn:focus, 
.btn.active, .content-subcategorias nav ul li a.btn.active {background-color: #FE5B67; color:#FFF;}

.x {
    order: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    cursor: pointer;
    font-family: Arial;
    width: 1em;
    height: 1em;
    margin-left: 0.3em;
    margin-right:-0.5em;
    overflow: hidden;
    transition: .2s ease-out;
    color: #FE5B67;
    font-size: 1.2em;
}
.x:hover {background-color:#c77777; color:#FFF;}

.active .x {color:#363636;}
.active .x:hover {color:#FFFFFF; background-color:#363636;}

.x::after {content: "×"; transition: .3s,color 0s;}

.content-subcategorias h1 {font-size:1.25em; margin-bottom:5px;}


.tag.warning {background-color:var(--warning-color); color:#363636;}
.tag.success {background-color:var(--success-color); color:#FFFFFF;}
.tag.danger {background-color:var(--error-color); color:#363636;}

.tag.primary {background-color:var(--salmon-color); color:#FFFFFF;}

.btn.btn-main.with-icon {display:flex; justify-content:center; align-items:center; gap:0.5em;}

.btn .mercadopago-icon {display:inline-block; background:var(--svg-mercadopago-blanco) no-repeat center; background-size:cover; width:30px; height:20px;}

/* ##### END BTN & SUBCATEGORIES FILTER #### */

/* ##### PRODUCT LIST ##### */

.content-categorias {padding:0.5em 1em; gap:1em; padding-bottom: calc(var(--leyend-height) + 1.5em);}

.content-subcategorias nav ul {grid-template-columns: none; display:flex; overflow-x:auto;}

.content-subcategorias .subcategorias {gap:1em; padding:0.5em 0;}

.products .card {border-color:#EEE; text-decoration:none;}
.products .card:hover, .products .card:focus {border-color:#E0E0E0; box-shadow:0 0 3px 0 #E0E0E0; }

.products .card::after {content: ''; display:none;}

.products .card .content { line-height: 1; color:  #7b7b7b; display: flex; flex-direction: column; justify-content: start; gap:5px;}
.products .card .image {display:block; position: relative; width: 100%; border-radius: 1em; background-position: center center; background-size: cover; background-repeat: no-repeat; height:calc(var(--window-height) * 0.18); max-height:120px; min-height:110px; padding:5px; text-align:right;}
.products .card .title {display:block; font-size: 1em; line-height: 1; color:  #686868; font-family: 'qanelas-medium'; font-weight: 500;}
.products .card .description {font-size: 0.8em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.products .card .label {border-radius: 10px; padding:4px 5px 3px; color: #FFFFFF; font-size:12px; display:inline-block;}
.products .card .title .label {float:right; margin-left:5px; }
.products .card .price-container {margin-top:5px;}
.products .card .strikethrough_price {margin-bottom:0;}
.products .card .price {font-size: 1.25em; line-height:1;}
.products .card .add {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSI1MiIgaGVpZ2h0PSI1MiIgdmVyc2lvbj0iMS4xIiBpZD0ibG5pX2xuaS1wbHVzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY0IDY0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik02MCwyOS44SDM0LjNWNGMwLTEuMi0xLTIuMy0yLjMtMi4zYy0xLjIsMC0yLjMsMS0yLjMsMi4zdjI1LjhINGMtMS4yLDAtMi4zLDEtMi4zLDIuM2MwLDEuMiwxLDIuMywyLjMsMi4zaDI1LjhWNjAKCWMwLDEuMiwxLDIuMywyLjMsMi4zYzEuMiwwLDIuMy0xLDIuMy0yLjNWMzQuM0g2MGMxLjIsMCwyLjMtMSwyLjMtMi4zQzYyLjMsMzAuOCw2MS4yLDI5LjgsNjAsMjkuOHoiLz4KPC9zdmc+Cg==);
    background-size:15px;
    background-repeat: no-repeat;
    background-position: center center;
    height: 33px;
    width: 33px;
    position: absolute;
    display: block;
    bottom: 0px;
    right: 0px;
    border-radius:10em 10em 0 10em;
    background-color: #FE5B67;
}
.subcategorias .item {padding:0.5em; gap:5px;}
.subcategorias .item .add:hover, .subcategorias .item .add:focus {background-color: #363636;}

.products .empty {grid-column: 1 / 3; text-align:center; }

.categoria .imagen {margin-bottom:0.25em; height:calc(var(--window-height) * 0.18); max-height:120px; min-height:110px; background-color:#DDD;}
/*.categoria h2 {font-size:1.1em; margin-bottom:0;}*/
.categoria h2 {font-size:1.3em; font-family:'qanelas-bold'; color:#363636 !important; margin-bottom:0;}

.content-categorias .categoria.restricted { position:relative; }
.content-categorias .categoria.restricted *:not(.restricted-leyend) {opacity:0.7; filter: grayscale(0.5);}
.restricted-leyend {opacity:0.85; position:absolute; top:0; left:0; right:0; background-color:#AAA; color:#222; text-align:center; font-size:0.8em; padding:0.25em 0; z-index:50; border-radius:14px 14px 0 0;}

.products .card.restricted {position:relative; pointer-events: none;}
.restricted *:not(.restricted-leyend) {opacity:0.7; filter: grayscale(0.5);}

/* ##### END PRODUCT LIST ##### */

/* ##### PRODUCT ##### */

.content-subcategorias, .content-producto {padding: 0.5em 1em;}

.content-product-header {position:relative;}
.content-product-header .link {position:absolute; top:0.25em; font-size:1.5em; z-index:20; color:var(--salmon-color);}
.content-product-header .link:hover, .content-product-header .link:focus {color:#000;} 
.content-product-header .link.previous {left:1em;}
.content-product-header .link.next {right:1em;}

.content-producto {padding-bottom: var(--navbar-height);} /* This must be equal to product-bottom height*/
.content-producto .errors {color: var(--error-color); font-size: 0.9em; margin-bottom:0.25em;}
.content-producto h1 {font-size:1.3em;}
.content-producto .descripcion p {margin-bottom:0.5em;}


.content-producto h2{font-family: 'qanelas-bold', sans-serif; color: #686868;font-size: 1.15em;}

.content-producto .opciones::before {display:none;}

.content-producto .personalizables {padding-bottom:0.5em;}
.content-producto .personalizables ul li {align-items:center; min-height:1.5em;}
.content-producto .personalizables .customizable {padding-bottom:0.5em;}
.content-producto .personalizables .customizable-limits-leyend {font-size:0.7em; font-family: 'helvetica-light', sans-serif;}

.content-producto .share-clients-list i, .content-producto .share-clients-list .i {width:1.5em; height:1.5em;}

.btn.btn-main {margin: 1em auto; width:100%; padding:0.75em 0; border:none; border-radius:50px; display:block; font-size:1.1em; font-family: 'qanelas-bold'; background-color: var(--salmon-color);}
.btn.btn-main:hover {background-color:var(--bs-body-color);}
.btn.btn-main:active {background:none;}
.btn.btn-main .spinner-border {display:none;}
.btn.btn-main.loading .text {display:none;}
.btn.btn-main.loading .spinner-border {display:inline-block;} 

.quantity {font-size:1.1em;}
.quantity .form-control {line-height:1;}
.quantity a.input-group-text {padding: .375rem .35em; display:inline-block; background-color:#FFF; color:#686868; line-height:1; }
.quantity a.input-group-text:hover, .quantity a.input-group-text:active {background-color:#363636; color:#FFF;}
.quantity a.input-group-text i.lni {font-size:0.7em !important;}
.quantity .value {margin:0;}

.quantity.component-quantity {width:auto;}
.quantity.component-quantity .form-control {font-size:0.9em;}
.quantity.component-quantity a.input-group-text i.lni {font-size:0.6em !important;}

.components-leyend {
    font-size:0.8em;
    padding: 2.5px 7.5px;
    border-radius: 10px;
    display: block;
    text-align: center;
}
.missing{background-color: #FE5B67; color: #FFFFFF;}
.done{background-color: var(--success-color); color: #FFFFFF;}

.tooltip.tooltip-error {--bs-tooltip-bg:var(--error-color); --bs-tooltip-font-size: 1em; --bs-tooltip-opacity:1; font-family: 'helvetica-light', sans-serif; }
.tooltip.tooltip-error .tooltip-inner {box-shadow:0 0 5px #333A}

.tooltip.tooltip-success {--bs-tooltip-font-size: 1em;}

.product-bottom {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    position: fixed;
    bottom: var(--navbar-height);
    left:0;
    width:100%;
    background-color:#FAFAFA;
}
.product-bottom .container {padding:0.35em 0.7em; max-width: var(--max-width);}

.product-bottom .quantity {font-size:1em;}

.product-bottom .btn.btn-main {margin:0; padding:0.5em 2em; font-size:1em; width:auto; text-transform:uppercase; }

.product-bottom .current-total {font-family: 'helvetica-bold', sans-serif; font-size:1.3em; white-space:nowrap;}

.strikethrough_price {text-decoration:line-through; font-style:italic; font-size:0.9em; line-height:1; margin-bottom:-0.25em; display:block; opacity:0.5;}

/* ##### END PRODUCT ##### */

/* ##### CHECK ########### */
#lacuenta {max-width: none; padding: 0 0.5em; z-index:90; overflow:hidden; padding-top:1.5em; transition: transform 1s cubic-bezier(.65,0,.35,1);}

#lacuenta.show {bottom:calc(60px + var(--leyend-height));}

#lacuenta .content {max-width: calc(var(--max-width) - 1em); margin:0 auto; height: calc(var(--window-height) - 70px - var(--leyend-height)); overflow:hidden;}

#lacuenta .step{
    padding: 3em 1em 0;
    overflow-y: auto;
}
#lacuenta .content .step::after {display:block; content:""; height: var(--navbar-height);}

#lacuenta .step-1 {z-index: 94; transform: translateX(0); opacity: 1;}
#lacuenta .step-2 {z-index: 93; transform: translateX(100%);}
#lacuenta .step-3 {z-index: 92; transform: translateX(200%);}
#lacuenta .step-4a {z-index: 91; transform: translateX(300%);}
#lacuenta .step-4b {z-index: 91; transform: translateX(300%);}

#lacuenta.hide {transition: transform 1s cubic-bezier(.65,0,.35,1);}
#lacuenta::before {top:0;}


#lacuenta h2 {font-size:1.3em; }

#lacuenta .note {background-color:#f5e6a5; border-radius: 0.5em; color:var(--bs-body-color); padding: 0.75em 1em; font-size:0.9em; margin: 1em 0;}

#lacuenta .items {border-bottom: none; margin-bottom:0; align-items:baseline;}

#lacuenta .detalle {padding:0;}

#lacuenta .line {border-bottom: 1px solid #6C6A6A; padding:0.25em 1em; position:relative;}
#lacuenta.salon .detalle .line:last-child {border-bottom:none;}
#lacuenta .line .item {font-family: 'helvetica-light', sans-serif; flex:auto; line-height:1.1em;}
#lacuenta .line:not(.client-service) .item .value {font-family: 'helvetica-bold', sans-serif;}
#lacuenta .line .valor {margin-left:0.75em; flex:initial;}
#lacuenta .line .valor.unit {font-size:0.9em;}
#lacuenta .line .valor.subtotal {font-family: 'helvetica-bold';}
#lacuenta .line .order-line-sharing {display:inline-block; line-height:1.2em; vertical-align:middle; margin-left:0.25em;}
#lacuenta .line .i {mask-position:center; mask-size:contain; mask-repeat:no-repeat; height:1.2em; width:1.2em; display:inline-block;}
#lacuenta .line .i.people {mask-image:var(--svg-people); background-color: #FFE150;}
#lacuenta .line .i.people-add {mask-image:var(--svg-people-add); background-color: var(--salmon-color);}
#lacuenta .line .i.person {mask-image:var(--svg-person); background-color: var(--salmon-color);}

#lacuenta .line .order-line-sharing:active .i {background-color: #FFE150; }

#lacuenta .line .order-product-remove {position:absolute; top:5px; left:-7px; display:block; background:none; padding:0; border-radius:20em; font-size:1em; color:var(--salmon-color); line-height:1; padding:3px;}
#lacuenta .line .order-product-remove:hover, #lacuenta .line .order-product-remove:focus {color:#363636; background:var(--salmon-color);}

#lacuenta .subTotal, #lacuenta .total {font-size:1.2em; white-space:nowrap; text-wrap:nowrap;}

#lacuenta .components {padding-left:0.5em;}

#lacuenta .valor {text-wrap:nowrap; white-space: nowrap;}

#lacuenta .customizable {font-size:0.9em; }
#lacuenta .component-line {display:flex; justify-content: space-between; align-items:baseline; font-size:0.9em;}
#lacuenta .component-line .component {flex:auto; font-size:0.9em;}
#lacuenta .component-line .valor {flex:initial;}
#lacuenta .component-line .component .unit {font-family: 'helvetica-bold'; margin-left:0.25em;}

#lacuenta .empty-message {display:none; text-align:center;}
#lacuenta.empty .empty-message {display:block;}
#lacuenta.empty .content {height:calc(40vh - 70px); min-height:200px;}
#lacuenta.empty .step {top:auto; bottom:0;}
#lacuenta.empty .step .bottom {display:none;}
#lacuenta.empty .check-client-payment {display:none;}
#lacuenta.empty.salon .detalle {display:none;}

#lacuenta .hide {display:none;}

#lacuenta .error {color: var(--salmon-color); font-size: 0.9em;}

#lacuenta .bottom .subtotal {margin-bottom: 1em; }
#lacuenta .bottom .total {margin-top:0.5em;}

#lacuenta .extra {display:flex; padding:0 15px; justify-content: space-between; font-size:0.9em;}
#lacuenta .bottom .subtotal .extra {font-size:1em;}
#lacuenta .extra .with-leyend::after {content: "(*)"; font-size:0.8em; margin-left:0.25em; }
#lacuenta .extra.hide {display:none;}
#lacuenta .extra .btn {margin-top:0; background-color:var(--bs-body-color);}
#lacuenta .extra .btn:hover, #lacuenta .extra .btn:focus {background-color:var(--salmon-color);}
#lacuenta .extra .tag {margin-left:0;}

#lacuenta .check-client-total {display: flex; align-items:center; gap:0.5em;}
#lacuenta .check-client-total .value {font-family: 'helvetica-bold', sans-serif; font-size:1.1em; white-space:nowrap; text-wrap: nowrap;}

#lacuenta .salon-total {border:1px solid #7b7b7b; padding:0.5em 0.75em; margin-bottom:1em; border-radius: .6rem; }
#lacuenta.empty .salon-total {display:none; }

#lacuenta .salon-total h3 {font-size: 1.1em; font-family: 'helvetica-bold', sans-serif;}
#lacuenta .salon-total .order-total {font-size:1.2em; font-family: 'helvetica-bold', sans-serif;}

#lacuenta .comments-container {margin-top:1em;}
#lacuenta .comments-container p {margin-bottom:0.5em; color:#FFF; font-size:0.9em;}
#lacuenta .comments-input {border:none; width:100%; line-height:1; margin:0; padding:0;}
#lacuenta .comments-input:focus {outline:none;}

#check-toggle {text-decoration:none; position:relative;}
#check-toggle .quantity {display:none; position:absolute; top:-5px; left:100%; background-color:#FFF; line-height:13px; border-radius:13px; font-size:0.5em; color:#000; min-height: 13px; min-width: 13px; text-align:center; font-family: 'qanelas-bold', sans-serif;}
#check-toggle .quantity.show {display:block;}

#lacuenta .radioSelect label {margin:0.25em 0;}

#lacuenta .radioSelect input[type="radio"]:checked + label .tag {background-color:#363636;}

#lacuenta .radioSelect .payment-type-message {display:none;}

#lacuenta .radioSelect input[type="radio"]:checked + label + .payment-type-message {display:block;}

.radioSelect{
    display: grid;
    gap:5px;
}
.step-3 .detalle{width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.step-3 .detalle .ftotal{ font-family: 'helvetica-bold', sans-serif; font-size: 1.2rem;}

#lacuenta .total-to-pay small {color:var(--salmon-color); font-size:0.8em; font-family:'helvetica-light', sans-serif; margin-right:1em; text-decoration: line-through;}

.aviso-camarero .dot-container {margin:0 auto;}

    /* ##### CHECK SALON ########## */
    #lacuenta.empty.salon .content {height: auto; min-height:calc(50vh - 70px);}
    
    #lacuenta .check-client {
        background-color: #535852;
        text-decoration: none;
        color: white;
        padding: 0.5em 0.75em;
        border-radius: .6rem;
        font-size: 1.1em;
        margin-bottom:0.5em;
        cursor:pointer;
    }
    #lacuenta .check-client.me {background-color:#7b7b7b;}
    #lacuenta .check-client .check-client-content { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
    #lacuenta .check-client strong {font-family:'helvetica-bold', sans-serif;}
    #lacuenta .check-client .edit {color: var(--salmon-color); font-size:0.8em; margin-left:1em;}
    #lacuenta .check-client .edit:hover {opacity:0.8;}
    #lacuenta .check-client .arrow {font-size:0.7em !important;}


    #lacuenta .check-client-payment {flex-direction:column; display:flex; position:relative; align-items:end;}
    #lacuenta .check-client-payment .form-switch { margin-top:-0.125rem;}
    #lacuenta .check-client-payment .form-switch .form-check-input {width:3.5em;}
    #lacuenta .check-client-payment .form-switch .form-check-input:active {filter:none;} /* Estoy corrige un bug que hace que baje el texto del ::before */
    #lacuenta .check-client-payment .form-switch .form-check-input::before {content: "Invitar"; position:absolute; font-size:0.7em; left: auto; right:0.5em; top: 0.75em; line-height:1;}
    #lacuenta .check-client-payment .form-switch .form-check-input:checked::before {left: 0.5em; right:auto; color:#FFF;}
    #lacuenta .check-client.me .check-client-payment .form-switch .form-check-input::before {content: "Pagar";}

    #lacuenta .payment-leyend { font-size:0.75em; }
    #lacuenta .payment-leyend::before {font-family: 'LineIcons'; border-radius:5em; padding:0.2em 0.4em; display:inline-block; font-size:0.9em; margin-right:0.5em; color:var(--bs-body-color);}
    #lacuenta .payment-leyend.paid::before {background-color:var(--success-color); content: "\ea55";}
    #lacuenta .payment-leyend.requested::before {background-color:var(--warning-color); content: "\eada";}

    #lacuenta .payment-leyend a {color:var(--salmon-color);}

    /* ##### END CHECK SALON ###### */

/* ##### END CHECK ####### */

/* ##### SHARE POPUP ##### */
.share-clients-list i {display:block; height:1em; padding:0.3em; border-radius:50px; box-sizing: content-box;}
.share-clients-list .i {mask-position:center; mask-size:contain; mask-repeat:no-repeat; height:1em; width:1em; display:inline-block;}
.share-clients-list .i.person {mask-image:var(--svg-person); background-color: #FFFFFF;}
/* ##### END SHARE POPUP # */

/* ##### NAVBAR ##### */

.menu-user nav {height: 100%; min-width:auto; min-height:auto; padding: 0 1em; border-radius:0.75em 0.75em 0 0;}
.menu-user nav .tubelight { transform: translateX(0); }
.menu-user nav ul {height: 100%; margin-bottom:0;}
.menu-user nav ul li {margin-top:5px;}
.menu-user.menu-camarero nav {gap:0.5em;}
.menu-user.menu-camarero .btn {font-size:1.1em; margin:0;}
.menu-user.menu-camarero .btn:not(.active) {border: 2px solid #FFF; background: #000;}
.menu-user.menu-camarero .btn.active {border: 2px solid var(--salmon-color);}
.menu-user.menu-camarero .btn:active {background-color:var(--salmon-color); border-color: var(--salmon-color);}
.menu-user.menu-camarero nav ul li {width:100%;}

.menu-user .order-open-icon {
    display:inline-block;
    height:1.3em;
    width:1.3em;

    mask-image: url(..../img/dely_state.svg);
    mask-position:center;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../img/dely_state.svg);
    -webkit-mask-position:center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;

    background-color:var(--salmon-color);
}

.menu-user .order-open {
    position:relative;
}

.menu-user .order-open .dot-container {
    position:absolute;
    top:0.65em;
    left:-0.2em;
}

.menu-user .order-open .status-end {color:var(--salmon-color); font-size:0.8em !important; position:absolute; top:0.5em; left:-0.1em; background-color:#000;}

.menu-user .bottom-leyend {position:absolute; bottom:100%; left:0; width:100%; z-index:80; background-color:#FAFAFA;} /* .bottom-leyend in product page is not nested inside .menu-user, but inside product-bottom. This does not take effect in that case */



/*.container-leyend .leyend, .bottom-leyend .leyend {text-align:center; font-size:0.8em; padding:0.25em 0; }*/
.container-leyend .leyend, .bottom-leyend .leyend {text-align:center; font-size:1em; padding:0.5em 0; }
.container-leyend .leyend strong, .bottom-leyend .leyend strong {font-family: 'helvetica-bold', sans-serif;}
.container-leyend .leyend i, .bottom-leyend .leyend i {margin-right:0.5em;}
.container-leyend .leyend.success, .bottom-leyend .leyend.success {background-color: var(--success-light-color);}
.container-leyend .leyend.warning, .bottom-leyend .leyend.warning {background-color: var(--warning-light-color);}
.container-leyend .leyend.danger, .bottom-leyend .leyend.danger {background-color: var(--error-light-color);}
.container-leyend .leyend.success i, .bottom-leyend .leyend.success i {}
.container-leyend .leyend.warning i, .bottom-leyend .leyend.warning i {border-radius:10em;}
.container-leyend .leyend.danger i, .bottom-leyend .leyend.danger i {}

/* ##### END NAVBAR # */

/* ##### ORDER SCREEN ######## */

.pedido-estado .detalle {border-radius:1em;}
.pedido-estado .detalle:first-child {margin-top:0;}
.pedido-estado .unit {padding-left:0.75em; font-size:0.9em; opacity:0.8; text-wrap: nowrap; text-align:right;}
.pedido-estado .subtotal {padding-left:0.75em; text-wrap: nowrap; text-align:right;}
.pedido-estado .component {font-size:0.9em;}
.pedido-estado .component td:first-child {padding-left:1.6em;}
.pedido-estado .cant {margin-right:0.2em;}

.pedido-estado .green {color:#83D52F;}

.btn.btn-mp:hover {background-color:#009ee3;}
.btn.btn-mp img {width:2em; margin-left:0.5em;}
/* ##### END ORDER SCREEN #### */

/* ##### PROFILE SCREEN ###### */

.content-perfil, .content-espera, .content-estado {padding:1em;}

.content-estado h2 {font-size:1.3em;}

.profile, #lacuenta .profile {color:var(--bs-body-color); position:relative;}
.profile .editar {position:absolute; top:1em; right:1em;}
.profile label {
    font-family: 'helvetica-bold';
}
.profile p.form-value {margin-bottom:0.5em;}

/* ##### END PROFILE SCREEN ## */

/* #### BEGIN RESPONSIVE FIXES ##### */

@media screen and (max-width:250px) {
    .content-categorias {
        grid-template-columns: repeat(1, 1fr);
    }
    .content-subcategorias .subcategorias {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (min-width:251px) and (max-width:500px) {
    .content-categorias {
        grid-template-columns: repeat(2, 1fr);
    }
    .content-subcategorias .subcategorias {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width:501px) and (max-width:750px) {
    .content-categorias {
        grid-template-columns: repeat(3, 1fr);
    }
    .content-subcategorias .subcategorias {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width:751px) {
    .content-categorias {
        grid-template-columns: repeat(4, 1fr);
    }
    .content-subcategorias .subcategorias {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* #### END RESPONSIVE FIXES ####### */