.active-text{color:var(--color-brand-main-40)}.dots{width:100%;padding:var(--space-150) var(--space-100);justify-content:space-between;align-items:center;gap:var(--space-300);display:flex;& .dot-arrow{&:after{line-height:0;display:block}&.disabled{opacity:.5;cursor:default}&.previus{&:after{content:url(/icons/icon-arrow-previus.svg)}}&.next{&:after{content:url(/icons/icon-arrow-next.svg)}}}& .dots-container{gap:var(--space-500);display:flex}& .dot{width:var(--space-250);height:var(--space-250);background-color:var(--color-alpha-black-20);cursor:pointer;transition:var(--transition);border-radius:50%;display:block;&:hover,&.active{background-color:var(--color-alpha-black-60);transform:scale(1.09)}}}.availability-label{border-radius:0 var(--radius-100) var(--radius-100) 0;border-left:6px solid var(--color-success-40);background-color:var(--color-neutral-20);padding:var(--space-100) var(--space-200);font-weight:400;font-size:var(--font-size-caption);color:var(--color-neutral-60)}.qty-changer{padding:var(--space-100);border-radius:var(--radius-200);background-color:var(--color-neutral-20);flex-flow:row;justify-content:space-between;align-items:center;display:flex;& .decrease,& .increase{cursor:pointer;transition:var(--transition);padding:var(--space-250);justify-content:center;align-items:center;display:flex;&:disabled{opacity:.5;cursor:not-allowed}&:after{line-height:0;display:block}}& .decrease{&:after{content:url(/icons/icon-minus.svg)}}& .increase{&:after{content:url(/icons/icon-plus.svg)}}& .qty{text-align:center;background-color:unset;border:none;width:60%}}body{&>header{background-color:var(--color-brand-main-40);box-shadow:var(--shadow-02);z-index:2;border-radius:0 0 var(--radius-300) var(--radius-300);width:100%;position:fixed;top:0;& .nav-bar{grid-template-columns:repeat(var(--grid-columns), 1fr);gap:var(--grid-gutter);padding:var(--space-250) var(--space-500);align-items:center;display:grid;& .header-logo{object-fit:contain;object-position:left center;cursor:pointer;width:100%;max-height:32px}& .sellers-section{justify-content:center;align-items:center;display:flex;& button.customer-button.button-secondary{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}}& .actions-section{justify-content:flex-end;gap:var(--space-200);flex-direction:row;display:flex;overflow:visible;& button.button-search{padding:var(--space-150);border-radius:var(--radius-150);border:1.8px solid #0000;&:after{content:url(/icons/icon-search-white.svg);line-height:0;display:block}&:hover{background-color:var(--color-neutral-20);border:1.8px solid var(--color-alpha-black-10);color:var(--color-neutral-60);&:after{content:url(/icons/icon-search.svg)}}}& .container-of-button-cart{position:relative;overflow:visible;& button.button-cart{padding:var(--space-150);border-radius:var(--radius-150);&:after{content:url(/icons/icon-cart-white.svg);line-height:0;display:block}&:hover{background-color:var(--color-neutral-20);border:1.8px solid var(--color-alpha-black-10);color:var(--color-neutral-60);&:after{content:url(/icons/icon-cart.svg)}}}& .cart-qty{background-color:var(--color-critical-20);border:1px solid var(--color-alpha-black-10);padding:var(--space-50) var(--space-150);border-radius:var(--radius-full);color:var(--color-neutral-10);font-weight:500;font-size:var(--font-size-caption);line-height:1rem;position:absolute;top:-4px;right:-4px}}}}& .finder{padding:var(--space-200) var(--space-500);background-color:var(--color-neutral-10);& input{background-image:url(/icons/icon-search.svg);background-repeat:no-repeat;background-position:left var(--space-250) center;background-size:var(--font-size-large);padding-left:calc(var(--space-300) + 1rem + var(--space-200))}}}&>footer{background-color:var(--color-brand-main-40);box-shadow:var(--shadow-02);z-index:2;border-radius:var(--radius-300) var(--radius-300) 0 0;width:100%;position:fixed;bottom:0;& .footer-nav-bar{width:100%;padding:var(--space-250) var(--space-500);& section{flex-direction:column;align-items:center;display:flex;position:relative;&.active{& button{background-color:var(--color-neutral-20);border:1.8px solid var(--color-neutral-30);color:var(--color-neutral-60);&.button-home{&:after{content:url(/icons/icon-home.svg)}}&.button-user{&:after{content:url(/icons/icon-user.svg)}}&.button-offer{&:after{content:url(/icons/icon-discount.svg)}}}& .nav-label{color:var(--color-brand-main-40)}}& button{border-radius:var(--radius-150);border:1.8px solid #0000;padding:.63rem;&:after{line-height:0;display:block;transform:translateY(-8px)}&:hover{background-color:var(--color-neutral-20);border:1.8px solid var(--color-neutral-30);color:var(--color-neutral-60)}&.button-home{&:after{content:url(/icons/icon-home-white.svg)}&:hover{&:after{content:url(/icons/icon-home.svg)}}}&.button-user{&:after{content:url(/icons/icon-user-white.svg)}&:hover{&:after{content:url(/icons/icon-user.svg)}}}&.button-offer{&:after{content:url(/icons/icon-discount-white.svg)}&:hover{&:after{content:url(/icons/icon-discount.svg)}}}}& .nav-label{text-align:center;font-weight:500;line-height:1;font-size:var(--font-size-caption);white-space:nowrap;color:var(--color-neutral-10);bottom:var(--space-100);left:var(--percent-50);transform:translateX(var(--percent-n50));position:absolute}}}}}.menu-and-logo{place-items:center;gap:var(--gap);flex-flow:row;display:flex}.menu-options{z-index:1;background-color:var(--color-neutral-10);position:fixed;bottom:5dvh;right:5vw;& li{padding:var(--padding);& a{color:var(--color-neutral-70)}& details>summary{font-weight:900}& details>ul{padding:var(--padding);& li{padding:var(--padding)}}}}.session-comp{z-index:5;border-radius:var(--border-radius);background-color:var(--color-neutral-20);position:fixed;inset:66px 0 71px;& h1{font-size:var(--font-size-large);color:var(--color-neutral-70);margin:var(--space-600) 0 0}& .date{margin-bottom:var(--space-600);display:block}& ul{gap:var(--space-300);flex-direction:column;display:flex;& li{background-color:unset;padding:0;& a{background-color:var(--color-neutral-10);border:2px solid var(--color-alpha-black-10);border-radius:var(--radius-300);padding:var(--space-250) var(--space-200);align-items:center;gap:var(--space-100);color:var(--color-neutral-70);font-weight:500;font-size:var(--font-size-small);margin:0;display:flex;position:relative;&:after{content:url(/icons/icon-arrow-down.svg);top:var(--percent-50);right:var(--space-200);transform:translateY(var(--percent-n50)) rotate(270deg);display:block;position:absolute}&:before{line-height:0;display:block}}&.routes{& a{&:before{content:url(/icons/account/icon-route.svg)}}}&.invoices{& a{&:before{content:url(/icons/account/icon-invoice.svg)}}}&.account{& a{&:before{content:url(/icons/account/icon-user.svg)}}}&.orders{& a{&:before{content:url(/icons/account/icon-orders.svg)}}}&.addresses{& a{&:before{content:url(/icons/account/icon-address.svg)}}}&.offices{& a{&:before{content:url(/icons/account/icon-offices.svg)}}}&.terms-and-conditions{& a{&:before{content:url(/icons/account/icon-terms-and-conditions.svg)}}}&.help{& a{&:before{content:url(/icons/account/icon-help.svg)}}}&.coupons{& a{&:before{content:url(/icons/account/icon-exit.svg)}}}&.credit{& a{&:before{content:url(/icons/account/icon-credit.svg)}}}&.exit{& a{background-color:unset;padding:var(--space-200) var(--space-200);border:none;&:before{content:url(/icons/account/icon-exit.svg)}}}}}}.button-options{font-size:1.5rem}.breadcrumbs{padding:var(--space-100) var(--space-500);width:100%;& .breadcrumbs__list{flex-wrap:nowrap;align-items:center;margin:0;padding:0;list-style:none;display:flex;& .breadcrumbs__item{display:flex;&:before{content:"/";margin:0 var(--space-200);color:var(--color-neutral-60)}& a{color:var(--color-neutral-60);white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}&.home{flex-direction:row;&:before{display:none}& a{color:var(--color-brand-main-40)}}&.current{& a{text-decoration:underline}}}}}.accordion{gap:var(--space-300);flex-direction:column;display:flex;& .summary-detail{border:2px solid var(--color-alpha-black-10);border-radius:var(--radius-200);& summary{background-color:var(--color-neutral-10);padding:var(--space-200) var(--space-250);font-size:var(--font-size-base);cursor:pointer;justify-content:space-between;align-self:stretch;align-items:center;font-weight:400;transition:all .3s;display:flex;&:after{content:url(/icons/icon-arrow-down.svg);width:20px;line-height:1;transition:all .3s;position:relative}}& .accordion-content{padding:var(--space-200) var(--space-250);background-color:var(--color-neutral-20);border-top:1px solid var(--color-alpha-black-10)}&[open]{& summary{background-color:var(--color-neutral-10);&:after{line-height:1;transition:all .3s;transform:rotate(180deg)}}}}}.button-primary{background-color:var(--color-brand-main-40);color:var(--color-neutral-10);&:hover{background-color:var(--color-brand-main-50)}}.go-back-button{max-width:40px;margin:var(--space-200) 0;place-content:center;display:flex;&:after{content:url(/icons/icon-arrow-down.svg);max-height:var(--space-500);line-height:1;display:block;transform:rotate(90deg)}}.button-secondary{border:1.8px solid var(--color-neutral-30);background-color:var(--color-neutral-10);color:var(--color-neutral-50);&:hover{background-color:var(--color-neutral-20);border:1.8px solid var(--color-neutral-30);color:var(--color-neutral-60)}}.button-tertiary{background-color:var(--color-neutral-10);color:var(--color-brand-main-40);&:hover{color:var(--color-brand-main-50);background-color:var(--color-neutral-20)}}.button-save{background-color:var(--color-brand-main-40)}.button-cancel,.button-quaternary{border-color:var(--color-brand-main-40);color:var(--color-brand-main-40);background-color:#0000;border-style:solid;border-width:1px}.button-save:after{content:"Grabar"}.button-cancel:after{content:"Atrás"}.button-add,.button-edit,.button-delete,.button-menu,.button-vertical-options,.button-forward,.button-tree,.button-pill{background-position:50%;background-repeat:no-repeat;background-size:contain;place-self:center;width:2rem;height:2rem}.button-add{background-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23555'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20xmlns='http://www.w3.org/2000/svg'%3e%3cline%20x1='12'%20y1='5'%20x2='12'%20y2='19'/%3e%3cline%20x1='5'%20y1='12'%20x2='19'%20y2='12'/%3e%3c/svg%3e")}.button-edit{background-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23555'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2020h9'/%3e%3cpath%20d='M16.5%203.5a2.121%202.121%200%200%201%203%203L7%2019l-4%201%201-4%2012.5-12.5z'/%3e%3c/svg%3e")}.button-delete{background-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23555'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpolyline%20points='3%206%205%206%2021%206'/%3e%3cpath%20d='M19%206l-1%2014a2%202%200%200%201-2%202H8a2%202%200%200%201-2-2L5%206'/%3e%3cpath%20d='M10%2011v6'/%3e%3cpath%20d='M14%2011v6'/%3e%3cpath%20d='M9%206V4a1%201%200%200%201%201-1h4a1%201%200%200%201%201%201v2'/%3e%3c/svg%3e")}.button-menu{filter:brightness(0)invert()contrast()saturate(0%);background-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23555'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20xmlns='http://www.w3.org/2000/svg'%3e%3cline%20x1='3'%20y1='12'%20x2='21'%20y2='12'/%3e%3cline%20x1='3'%20y1='6'%20x2='21'%20y2='6'/%3e%3cline%20x1='3'%20y1='18'%20x2='21'%20y2='18'/%3e%3c/svg%3e")}.button-vertical-options{background-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23555'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='12'%20cy='5'%20r='1.5'/%3e%3ccircle%20cx='12'%20cy='12'%20r='1.5'/%3e%3ccircle%20cx='12'%20cy='19'%20r='1.5'/%3e%3c/svg%3e")}.button-forward{background-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23555'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20xmlns='http://www.w3.org/2000/svg'%3e%3cline%20x1='5'%20y1='12'%20x2='19'%20y2='12'/%3e%3cpolyline%20points='12%205%2019%2012%2012%2019'/%3e%3c/svg%3e")}.button-tree{background-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23555'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20xmlns='http://www.w3.org/2000/svg'%3e%3c!--%20Nodo%20raíz%20--%3e%3ccircle%20cx='12'%20cy='5'%20r='2'/%3e%3c!--%20Rama%20izquierda%20--%3e%3cline%20x1='12'%20y1='7'%20x2='7'%20y2='12'/%3e%3ccircle%20cx='7'%20cy='14'%20r='2'/%3e%3c!--%20Rama%20derecha%20--%3e%3cline%20x1='12'%20y1='7'%20x2='17'%20y2='12'/%3e%3ccircle%20cx='17'%20cy='14'%20r='2'/%3e%3c/svg%3e")}.filter-action{& .icon{&:after{content:url(/icons/icon-filter.svg);line-height:0;display:block}}}.checkout-steps{margin-top:var(--space-400);justify-content:space-between;display:flex;& .steps{font-size:var(--font-size-small);color:var(--color-neutral-70);font-weight:500}& .dots{gap:var(--space-400);width:fit-content;& .dot{width:var(--space-500);height:var(--space-150);border-radius:var(--radius-pill);background-color:var(--color-neutral-40);&.active{background-color:var(--color-brand-main-40)}}}}.check-out-addresses-message,.check-out-payment-message{& .title{color:var(--color-neutral-70);font-weight:600;font-size:var(--font-size-large)}& span{color:var(--color-neutral-60);font-size:var(--font-size-small);font-weight:400}}.box-container{background-color:var(--color-neutral-10);border:2px solid var(--color-alpha-black-10);border-radius:var(--radius-300);padding:var(--space-250)}.summary-container{& .totals{&>.container{padding:0;& table{& tbody{& tr{& td{&:first-child{text-align:left;color:var(--color-neutral-60)}&:last-child{text-align:right;color:var(--color-neutral-70);font-weight:500}}}}& tfoot{border-top:1px solid var(--color-alpha-black-10);& tr{& td{color:var(--color-neutral-70);font-weight:600;&:first-child{text-align:left}&:last-child{text-align:right}}}}}}}}.field{gap:var(--space-100);flex-direction:column;display:flex}.customer-visit-timer{cursor:pointer;padding:var(--padding);color:var(--color-neutral-20);place-items:center;font-weight:900;display:grid;position:relative}.container-of-button-cart{cursor:pointer;place-items:center;display:grid;position:sticky}.loading{z-index:999;background-color:var(--color-alpha-black-40);place-items:center;width:100vw;height:100dvh;display:grid;position:fixed;top:0;left:0;&:after{content:"";background-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23555'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='8.5'%20cy='12'%20r='3.5'%20/%3e%3ccircle%20cx='15.5'%20cy='12'%20r='3.5'%20/%3e%3c/svg%3e");background-position:50%;background-repeat:no-repeat;background-size:60%;background-color:var(--color-neutral-10);border-radius:var(--radius-300);width:4rem;height:4rem;padding:var(--space-300)}}.notify,.toast{gap:var(--gap);max-width:90vw;padding:var(--padding);flex-direction:column;margin-inline:auto;display:flex;position:relative;inset-block-end:10%;& .info,& .error{padding:var(--padding);border-radius:20px;animation:.5s forwards fade-in,.5s 3s forwards fade-out}& .info:after,& .error:after{content:"";border-left:10px solid #0000;border-right:10px solid #0000;border-top:10px solid var(--color-neutral-10);opacity:.5}& .info{background-color:var(--color-brand-main-10)}& .error{background-color:var(--color-neutral-20);color:var(--color-neutral-10)}}.notify{background-color:var(--color-neutral-10);& .info,& .error{animation:.5s forwards fade-in}}@keyframes fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}.card,.shadow-card{height:auto;padding:var(--padding);place-content:space-between;gap:var(--gap);flex-wrap:wrap;display:flex;position:relative;top:0;left:0}.shadow-card{box-shadow:var(--shadow);background-color:var(--color-brand-main-10);& form{width:stretch}}.form-control{width:var(--width-for-form-control);height:fit-content;padding:var(--padding);flex-direction:column;display:flex}.form-actions{width:100%;height:100%;padding:var(--padding);flex-flow:row;place-content:space-between;place-items:center;display:flex;position:relative;top:0;left:0}.small-form{width:100%;height:100%;padding:var(--padding);gap:var(--gap);display:grid}select.on-td,input.on-td{min-width:var(--min-width-for-input-on-td);width:var(--width-for-input-on-td)}input.on-td-tiny{min-width:var(--min-width-for-input-on-td);width:var(--min-width-for-input-on-td);text-align:right}select.small,input.small{width:var(--min-width-for-input-on-td)}.text-on-cell{text-overflow:ellipsis;max-width:0;overflow:hidden}.overlay{z-index:4;background-color:var(--color-alpha-white-40);width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0;overflow:hidden}.collapse{flex-flow:column;width:100%;display:flex;& .toggle{display:none}& .trigger{cursor:pointer}& .content{display:none}& .toggle:checked~.content{width:100%;padding:var(--padding);gap:var(--gap);transition:var(--transition);flex-flow:column;display:flex}}.quote-and-favorite{width:stretch;padding:var(--padding);place-content:flex-end;place-items:center;gap:var(--gap);flex-flow:row;display:flex}.hero{text-align:center;place-content:center;align-items:center;gap:var(--gap);flex-direction:column;width:stretch;height:35dvh;margin:0 auto;display:flex}.info{height:45dvh;padding:var(--padding);& .wrapper{width:stretch;height:stretch;padding:var(--padding);gap:var(--gap);flex-wrap:wrap;place-content:space-between;display:flex;& .item{width:stretch;padding:var(--padding);gap:var(--gap);box-shadow:var(--shadow);transition:var(--transition);display:grid}& .item:nth-child(2n){box-shadow:0 2px 10px var(--color-brand-main-40)}& .item:last-child{box-shadow:0 2px 10px var(--color-brand-secondary-50)}}}._footer{width:100vw;position:absolute;bottom:0}.home{place-content:space-between;gap:var(--gap);flex-flow:column wrap;display:flex}.title{justify-content:left;align-items:center;gap:var(--space-200);width:100%;display:flex;& .icon{background-color:var(--color-brand-main-10);border-radius:var(--radius-200);padding:var(--space-200);width:40px;height:40px;font-size:var(--font-size-medium);color:var(--color-neutral-10);& img{width:100%}}& h1{-webkit-line-clamp:2;line-clamp:2;text-overflow:ellipsis;font-weight:600;font-size:var(--font-size-large);color:var(--color-brand-main-40);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}}.title:empty:before{content:" "}.copy{font-weight:900}.sort-options-container{z-index:5;width:var(--percent-90);background-color:var(--color-neutral-10);max-width:20rem;padding:0;position:fixed;top:0;bottom:0;left:0;& .filter-title{padding:var(--space-200) var(--space-300);border-bottom:1px solid var(--color-neutral-30);border-left:2px solid var(--color-brand-main-30);justify-content:space-between;align-items:center;display:flex;& h3{color:var(--color-neutral-70);font-weight:500;font-size:var(--font-size-base)}}& .filter-content{gap:var(--gap);box-sizing:border-box;padding:var(--space-250) var(--space-300);border-bottom:1px solid var(--color-neutral-30);display:grid;& .summary-detail{& summary{color:var(--color-neutral-70);font-weight:500;font-size:var(--font-size-small);justify-content:space-between;display:flex}& ul{& li{padding:var(--space-250) var(--space-300);justify-content:space-between;display:flex;& span{color:var(--color-neutral-60);font-size:var(--font-size-small)}& input[type=checkbox]{background-color:var(--color-neutral-10)}}}}}}.status-badge{width:fit-content;padding:var(--space-100) var(--space-200);border-radius:var(--border-radius);border:1px solid var(--color-alpha-black-10);& span{gap:var(--space-100);font-weight:900;font-size:var(--font-size-caption);text-transform:capitalize;align-items:center;font-weight:500;display:flex;&:before{content:"";border-radius:var(--radius-full);width:8px;height:8px}}&.status-in-progress{background-color:var(--color-brand-main-20);& span{color:var(--color-brand-main-40);&:before{background-color:var(--color-brand-main-40)}}}&.status-pending,&.status-ACT,&.status-OPN,&.status-PEN,&.status-AUT{background-color:var(--color-warning-20);& span{color:var(--color-warning-50);&:before{background-color:var(--color-warning-40)}}}&.status-cancelled,&.status-INA,&.status-REJ{background-color:var(--color-critical-10);& span{color:var(--color-critical-40);&:before{background-color:var(--color-critical-30)}}}&.status-delivered,&.status-CLO,&.status-PRO,&.status-completed{background-color:var(--color-success-20);& span{color:var(--color-success-40);&:before{background-color:var(--color-success-40)}}}}@media screen and (width>=768px){.nav-bar{& .header-logo{width:30%;height:30%}}& .customer-button{width:14vw}.button-add,.button-edit,.button-delete,.button-menu,.button-vertical-options,.button-forward,.button-tree,.button-pill{width:4rem;height:4rem}}
