/* https://hihayk.github.io/scale/#4/20/99/99/0/0/0/100/FE0002/254/0/2/white */

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

:root {

	touch-action: pan-x pan-y;
	height: 100%;
	
	--br1: 4px;
	--br2: 8px;
	--br3: 16px;
	
	--texto-6: 56px;
	--texto-5: 16.5pt;
	--texto-4: 15pt;
	--texto-3: 13.5pt;
	--texto-2: 10.5pt;
	--texto-1: 9pt;
	
	--color-ka: #FE0002;
	--color-kac: #FFFFFF;
	
	--color-kb: #FFE3E3;
	--color-kbc: #FE0002;
	
	--color-100: #000000;
	--color-95: #0D0D0D;
	--color-90: #191919;
	--color-85: #262626;
	--color-80: #323232;
	--color-75: #3F3F3F;
	--color-70: #4B4B4B;
	--color-65: #585858;
	--color-60: #646464;
	--color-55: #717171;
	--color-50: #7D7D7D;
	--color-45: #8A8A8A;
	--color-40: #969696;
	--color-35: #A3A3A3;
	--color-30: #AFAFAF;
	--color-25: #BCBCBC;
	--color-20: #C8C8C8;
	--color-15: #D5D5D5;
	--color-10: #E1E1E1;
	--color-05: #EEEEEE;
	--color-00: #FFFFFF;
	
	--color-ro: #FF2D55;
	--color-az: #0c86fe;
	--color-ve: #2ae8a9;
	--color-am: #f7df1e;
	
	--color-bg1: var(--color-00);
	--color-bg2: var(--color-05);
	--color-bg3: var(--color-10);
	--color-bg4: var(--color-15);
	
	--color-f1: var(--color-00);
	--color-f2: var(--color-05);
	--color-f3: var(--color-10);
	--color-f4: var(--color-15);
	--color-f5: var(--color-ka);
	--color-f5c: var(--color-kac);
	--color-f6: var(--color-kb);
	--color-f6c: var(--color-kbc);
	
	--color-bd: var(--color-10);
	
	--color-t1: var(--color-50);
	--color-t2: var(--color-70);
	--color-t3: var(--color-100);
	--color-t4: var(--color-00);
	
	--filter-co: invert(100%) sepia(0%) saturate(1%) hue-rotate(179deg) brightness(104%) contrast(101%);
	--filter-ba: invert(0%) sepia(14%) saturate(1566%) hue-rotate(339deg) brightness(90%) contrast(81%);
	--filter-ka: invert(9%) sepia(86%) saturate(6453%) hue-rotate(354deg) brightness(122%) contrast(118%);
	
	--shadow-0: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	--shadow-1: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
	--shadow-1c: 0px 0px 8px -2px #2AE9AA;
	--shadow-inset: inset -4px 8px 16px rgba(0,0,0,0.08);
	
	--overlay: rgba(0,0,0,0.4);
	
}

@keyframes rotate {from {-webkit-transform:rotate(0deg);}to {  -webkit-transform:rotate(360deg);}}

@keyframes slide-in {0% {right: -40px; opacity: 0;} 100% {right: 0; opacity: 1;}}
@keyframes slide-out {0% {right: 0; opacity: 1;} 100% {right: -40px; opacity: 0;}}

@keyframes modal-in {0% {margin-top: 16px; opacity: 0;} 100% {margin-top: 0; opacity: 1;}}
@keyframes modal-out {0% {margin-top: 0; opacity: 1;} 100% {margin-top: 16px; opacity: 0;}}

@keyframes fade-in {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes fade-out {0% {opacity: 1;} 100% {opacity: 0;}}

@keyframes menu-in {0% {left: 30px; opacity: 0;} 100% {left: 0; opacity: 1;}}
@keyframes menu-out {0% {left: 0; opacity: 1;} 100% {left: 30px; opacity: 0;}}

html{scroll-behavior: smooth;-webkit-text-size-adjust: 100%;}

body {font-family: 'Montserrat', sans-serif; background-color:var(--color-bg2);color: var(--color-t2); font-size: var(--texto-2); line-height: normal; font-weight: 500;padding: 0; margin: 0; background-image: url(../gui/bg1.svg);}

h1{font-size: var(--texto-5); font-weight: 700; color: var(--color-ka); margin: 0; padding: 0 0 24px 0; letter-spacing: -1px;  position: relative;}
h2{font-size: var(--texto-4); font-weight: 700; color: var(--color-ka);  margin: 0; padding: 0 0 24px 0; letter-spacing: -1px; position: relative; display: inline-block;}
h3{font-size: var(--texto-3); font-weight: 700; color: var(--color-ka);  margin: 0; padding: 0 0 16px 0; letter-spacing: -1px;}
h4{font-size: var(--texto-2); font-weight: 700; color: var(--color-t3);  margin: 0; padding: 0 0 16px 0;}

a {color: var(--color-t2); text-decoration: none;-webkit-tap-highlight-color: transparent;}
a h3{pointer-events:none;}
b, strong {color: var(--color-t3); font-weight: 700;}
p{margin:0px; padding: 0 0 16px 0;}
p:last-child{margin:0px; padding: 0px;}
small{font-size: var(--texto-1) !important; line-height: 0.2em !important; color: var(--color-t1);}
hr { border: 0; border-bottom: 1px var(--color-10) solid;margin: 24px 0px; padding: 0;}
blockquote{border-left: 4px solid var(--color-100); margin: 0 0 16px 0; padding: 8px 16px;}
blockquote:last-child{margin: 0}

.nm{margin: 0px !important}
.np{padding: 0px !important}
.nbr{border-radius:0 !important;}

.spd{margin-bottom: 16px !important}
.spdh{margin-bottom: 8px !important}
.dspd{margin-bottom: 24px !important}
.spu{margin-top: 16px !important}
.spuh{margin-top: 8px !important}
.dspu{margin-top: 24px !important}
.spl{margin-left: 48px !important}

.offd{margin-bottom: -32px !important}
.doffd{margin-bottom: -64px !important}
.offu{margin-top: -32px !important}
.doffu{margin-top: -64px !important}

.ac{text-align: center !important}
.al{text-align: left !important}
.ar{text-align: right !important}
.acc{display:flex; justify-content:center; align-items:center;}
.alc{display:flex;  align-items:center;}

.mostrar{display:block !important;}
.ocultar{display:none !important;}
.only-print{display: none;}
.only-desk{display: block;}
.only-mobile{display: none;}

.tx-rojo{color: var(--color-ro)}
.link{text-decoration: underline; color: var(--color-t3);}
.link-off{text-decoration: underline; color: var(--color-t2);}

/* Formularios */

.ffbx{display: flex; flex-direction: column; padding: 0 0 16px 0; position: relative;}
.ffbx:last-child{padding: 0}
.ffbx .ff-label{ font-size: var(--texto-2); color: var(--color-70); position: relative; z-index: 1; display: inline-block; margin: 0 0 4px 0; padding: 0; pointer-events: none;}
.ffbx .ff-nota{margin-top:5px; font-size: var(--texto-1); color: var(--color-70);}
.ffbx .ff-requerido{margin-top:5px; font-size: var(--texto-1); color: var(--color-ro); }

input, textarea, select, input[type=date], input[type=datetime-local], input[type=email]{background-color: var(--color-f1) !important; border: 2px solid var(--color-f3); border-radius: var(--br1); -webkit-appearance:none; outline:none; font-size: var(--texto-2); margin: 0; padding: 0; text-indent: 12px; color: var(--color-t2);  box-sizing: border-box; width: 100%; caret-color: var(--color-t2)}
input[type="text"],input[type="email"],input[type="date"],input[type="datetime-local"],input[type="password"],select, .fileinputX{height: 40px}
textarea{padding: 16px; text-indent: 0;}
select{width:100%; height: 40px; position: relative;}
select + .ico-input::before{content:""; position: absolute; right: 0px; bottom: 0; pointer-events: none; background: url(../gui/ico/arrow-down.svg) 50% 50% no-repeat; background-size: 24px auto; width: 40px; height: 40px; filter: var(--filter-co); -webkit-filter: var(--filter-co);}

input:focus{border: 2px solid var(--color-f5); outline: none; text-indent: 11px;}
textarea:focus{border: 2px solid var(--color-f5); outline: none; padding: 15px;}

.fileinput + label {background-color: var(--color-00); border: 1px solid var(--color-10); border-radius: var(--br1); cursor: pointer; height: 48px; line-height: 48px; padding-left: 40px; color: var(--color-70); position: relative;}
.fileinput + label::before{content:""; position: absolute; top: 0; left: 12px; bottom: 0; background: url(../gui/ico/archivo.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.fileinput + label span.activo{color: var(--color-70);}

.inputHero {position: relative; border: 1px solid var(--color-10); border-radius: var(--br1); background-color: var(--color-00); overflow: hidden;}
.inputHero input{ background-color: transparent !important; padding: 0 !important; font-size: var(--texto-3); text-indent: 16px; height: 44px; border: 0; box-shadow: none;}
.inputHero .btn{position: absolute; top: 4px; right: 4px; border-radius: 5px; height: 36px; line-height: 36px;}

.checkbox {display: block;position: relative;padding: 4px 0 4px 35px;margin-bottom: 10px;cursor: pointer;font-size: var(--texto-2);-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.checkbox input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark {position: absolute;top: 0;left: 0;height: 25px;width: 25px;background-color: var(--color-f2);border-radius: var(--br1);}
.checkbox input:checked ~ .checkmark {background-color: var(--color-f5);}
.checkmark:after {content: "";position: absolute;display: none;}
.checkbox input:checked ~ .checkmark:after {display: block;}
.checkbox .checkmark:after {left: 9px;top: 5px;width: 5px;height: 10px;border: solid var(--color-f5c);border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.checkbox:last-child{margin-bottom:0;}

.checkbox-toggle {-webkit-tap-highlight-color: transparent; position: relative;}
.checkbox-toggle span {padding: 4px 0 12px 52px; display: block;color: var(--color-t2);}
.checkbox-toggle:last-child span {padding: 4px 0 0 52px !important;}
.checkbox-toggle input[type=checkbox]{position: absolute; top: 0; left: 0; -webkit-appearance: none;-moz-appearance: none;appearance: none;-webkit-tap-highlight-color: transparent;cursor: pointer;height: 24px;width: 40px !important;border-radius: var(--br3);display: inline-block;margin: 0;border: 2px solid var(--color-f2);background-color: var(--color-f2) !important;transition: all 0.2s ease;}
.checkbox-toggle input[type=checkbox]:focus {outline: 0;}
.checkbox-toggle .toggle:after {content: "";position: absolute;top: 2px;left: 2px;width: 16px;height: 16px;border-radius: 50%;background: var(--color-f4);transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);}
.checkbox-toggle .toggle:checked {border-color: var(--color-f5);background-color: var(--color-f5) !important;}
.checkbox-toggle .toggle:checked:after {transform: translate(16px);background: var(--color-f5c);}

.checkbox-toggle-alerta {-webkit-tap-highlight-color: transparent; position: relative;}
.checkbox-toggle-alerta span {padding: 4px 0 4px 52px; display: block; color: var(--color-100);}
.checkbox-toggle-alerta:last-child span {padding: 4px 0 0 52px !important;}
.checkbox-toggle-alerta input[type=checkbox]{position: absolute; top: 0; left: 0; -webkit-appearance: none;-moz-appearance: none;appearance: none;-webkit-tap-highlight-color: transparent;cursor: pointer;height: 24px;width: 40px !important;border-radius: var(--br3);display: inline-block;margin: 0;border: 2px solid var(--color-f2);background-color: var(--color-f2) !important;transition: all 0.2s ease;}
.checkbox-toggle-alerta input[type=checkbox]:focus {outline: 0;}
.checkbox-toggle-alerta .toggle:after {content: "";position: absolute;top: 2px;left: 2px;width: 16px;height: 16px;border-radius: 50%;background: var(--color-f4);transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);}
.checkbox-toggle-alerta .toggle:checked {border-color: var(--color-ro);background-color: var(--color-ro) !important;}
.checkbox-toggle-alerta .toggle:checked ~ span {color: var(--color-ro)}
.checkbox-toggle-alerta .toggle:checked:after {transform: translate(16px);background: var(--color-00);}


.radio {display: block;position: relative;padding: 4px 0 4px 35px;margin-bottom: 10px;cursor: pointer;font-size: var(--texto-2); color: var(--color-100); -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.radio:last-child{margin:0}
.radio input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.radio .radiomark {position: absolute;top: 0;left: 0;height: 25px;width: 25px;background-color: var(--color-10);border-radius: 50%;}
.radio input:checked ~ .radiomark {background-color: var(--color-100);}
.radio .radiomark:after {content: "";position: absolute;display: none;}
.radio input:checked ~ .radiomark:after {display: block;}
.radio .radiomark:after {top: 8px;left: 8px;width: 9px;height: 9px;border-radius: 50%;background: var(--color-00);}

.radio-cta {}

.radio-cta span{display: block;position: relative;padding: 14px 16px; border: 1px solid var(--color-10); border-radius: var(--br1); margin-bottom: 8px;cursor: pointer;font-size: var(--texto-2); -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: var(--color-00); text-align: left;}
.radio-cta span.ico{background-size: auto 24px !important; background-repeat: no-repeat !important; padding-left: 45px;}
.radio-cta span.ico::before{ left:13px;}
.radio-cta input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.radio-cta input:checked + span {padding: 13px 15px; border: 2px solid var(--color-100);}
.radio-cta input:checked + span .seleccionado {display: block}
.radio-cta input:checked + span.ico {padding-left: 44px;}
.radio-cta input:checked + span.ico::before {left:12px}
.radio-cta hr { border: 0; border-bottom: 1px var(--color-00) solid;margin: 8px 0px !important; padding: 0;}

.radio-inline{background-color: var(--color-f2); display: flex; border-radius: var(--br2); padding: 4px;}
.radio-inline input[type="radio"] {opacity: 0;position: fixed;width: 0; margin: 0;}
.radio-inline label {flex: 1;text-align: center;display: inline-block;background-color: transparent;height: 32px; line-height: 32px;font-size: var(--texto-2);border-radius: var(--br1);margin: 0;}
.radio-inline input[type="radio"]:checked + label {background-color: var(--color-f1); color: var(--color-f5); font-weight: 500;}

.radio-inline-mini{background-color: var(--color-05); display: inline-flex; border-radius: var(--br2); padding: 4px;}
.radio-inline-mini input[type="radio"] {opacity: 0;position: fixed;width: 0; margin: 0;}
.radio-inline-mini label {flex: 1;text-align: center;display: inline-block;background-color: transparent;height: 32px; line-height: 32px;font-size: var(--texto-2);border-radius: var(--br1);margin: 0;}
.radio-inline-mini input[type="radio"]:checked + label {background-color: var(--color-f1); color: var(--color-f5); font-weight: 500;}

.radio-img-bx {display: grid; grid-gap: 16px; grid-template-columns: 1fr 1fr; grid-template-rows: auto}
.radio-img {-webkit-tap-highlight-color: transparent; position: relative;}
.radio-img span.img{display: block;border: 3px solid var(--color-f2); border-radius: var(--br2) 8px 0 0;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; background-color: var(--color-f1) !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50% !important;}
.radio-img span.img:before{content:''; display: block; padding-top: 100%;}
.radio-img span.titulo{display: block;position: relative; margin: -3px 0 0 0; padding: 8px; border-radius: 0 0 8px 8px; cursor: pointer;font-size: var(--texto-2); text-align: center; background-color: var(--color-f2); -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.radio-img input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.radio-img input:checked + span.img {padding: 0px; border: 3px solid var(--color-f5);}
.radio-img input:checked + span.img + span.titulo {background-color: var(--color-f5); color: var(--color-f5c); font-weight: 500;}

.controles-incremento-mini{position: relative; width: 120px; height: 40px;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; border-radius: 40px; background-color: var(--color-f2);}
.controles-incremento-mini .incremento-menos-mini{width: 40px; height: 40px; position: absolute; left: 0; top: 0;}
.controles-incremento-mini .incremento-menos-mini::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/menos.svg) 50% 50% no-repeat; background-size: 24px auto; width: 40px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.controles-incremento-mini .incremento-campo-mini{width: 40px !important; height: 40px !important; text-align: center !important; margin: 0 !important; padding: 0px !important; border: 0 !important; text-indent: 0px !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 40px !important; right: 40px !important; font-size: var(--texto-2) !important; font-weight: 500; color: var(--color-100); box-shadow: none !important; background-color: var(--color-f2) !important;}
.controles-incremento-mini .incremento-mas-mini{width: 40px; height: 40px; position: absolute; right: 0; top: 0; }
.controles-incremento-mini .incremento-mas-mini::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/add.svg) 50% 50% no-repeat; background-size: 24px auto; width: 40px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}


.controles-incremento{position: relative; width: 100%; height: 40px;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; border-radius: 40px; background-color: var(--color-10);}
.controles-incremento div{text-align: center; line-height: 40px; font-size: 20px; cursor: pointer !important; border-radius: 40px; background-color: var(--color-10);}
.controles-incremento .incremento-menos{width: 40px; height: 40px; position: absolute; left: 0; top: 0;}
.controles-incremento .incremento-menos::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/menos.svg) 50% 50% no-repeat; background-size: 24px auto; width: 40px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.controles-incremento .incremento-campo{width: auto; height: 40px; text-align: center; padding: 0px; text-indent: 0px; position: absolute; top: 0; left: 40px; right: 40px; font-size: var(--texto-2) !important; font-weight: 500; color: var(--color-100); box-shadow: none; border: 0; background-color: transparent !important;}
.controles-incremento .incremento-mas{width: 40px; height: 40px; position: absolute; right: 0; top: 0; }
.controles-incremento .incremento-mas::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/add.svg) 50% 50% no-repeat; background-size: 24px auto; width: 40px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}


::-webkit-input-placeholder {color: var(--color-40);}
::-webkit-scrollbar{display:none}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid var(--color-10);
  text-indent: 12px;
  -webkit-text-fill-color: var(--color-100);
  -webkit-box-shadow: 0 0 0px 1000px var(--color-00) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.btn{position: relative; background-color: var(--color-f5); color: var(--color-f5c); font-size: var(--texto-2); font-weight: 600; padding: 0 24px; height: 40px; line-height: 40px; display: inline-block; text-decoration: none; border-radius: var(--br2); text-align: center;}

.btn-alt{position: relative; background-color: var(--color-f6); color: var(--color-f6c); font-size: var(--texto-2); font-weight: 600; padding: 0 24px; height: 40px; line-height: 40px; display: inline-block; text-decoration: none; border-radius: var(--br2); text-align: center;}

.btnm{position: relative; background-color: var(--color-f5); color: var(--color-f5c); font-size: var(--texto-2);  padding: 0 12px; height: 32px; line-height: 32px; display: inline-block; text-decoration: none; border-radius: var(--br2); text-align: center;}

.btnm-alt{position: relative; background-color: var(--color-f6); color: var(--color-f6c); font-size: var(--texto-2);  padding: 0 12px; height: 32px; line-height: 32px; display: inline-block; text-decoration: none; border-radius: var(--br2); text-align: center;}

.btn-wide{display: block; box-sizing: border-box !important;}
.btn-disabled{pointer-events: none !important; background-color: var(--color-05) !important; color: var(--color-40) !important;}

.bx-btns{display: flex; flex-flow: row wrap; gap: 16px;}
.bx-btns a{flex:1;}
.bx-btns a.key{flex-basis: 100%}

.buscador {position: relative; border-radius: var(--br1); background-color: var(--color-00); border: 1px solid var(--color-10);}
.buscador input{ background-color: var(--color-00) !important; padding: 0 !important; text-indent: 48px; height: 44px; border: 0; box-shadow: none;}
.buscador .ico-buscar {position: absolute; top: -2px; left: 4px; width: 48px; height: 48px; display: block;}
.buscador .ico-buscar::before{content:""; position: absolute; top: 0; left: 0px; bottom: 0; background: url(../gui/ico/buscar.svg) 50% 50% no-repeat !important; background-size: 20px auto !important; width: 48px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.buscador .ico-scaner {position: absolute; top: -2px; right: 4px; width: 48px; height: 48px; display: block;}
.buscador .ico-scaner::before{content:""; position: absolute; top: 0; right: 0px; bottom: 0; background: url(../gui/ico/scaner.svg) 50% 50% no-repeat !important; background-size: 20px auto !important; width: 48px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.buscador .resultados{border-top: 1px solid var(--color-10); padding:0}
.buscador .resultados ul {margin:0; padding: 0;}
.buscador .resultados ul li {margin:0; padding: 0; border-bottom: 1px solid var(--color-10); list-style: none;}
.buscador .resultados ul li:last-child {border: 0}
.buscador .resultados ul li a{display: block; padding: 14px 16px;}

.bx-inputs{background-color: var(--color-bg1); border-radius: var(--br2); padding: 2px 0 2px 16px; overflow: hidden; box-shadow: var(--shadow-0);}
.bx-inputs .ffbx{display: grid; padding: 0; grid-gap: 0 16px; grid-template-columns: minmax(120px, auto) 1fr; border-bottom: 1px solid var(--color-bd);}
.bx-inputs .ffbx:last-child{border:0}
.bx-inputs .ffbx .ff-label{margin: 0; padding: 0; height: 40px; line-height: 40px; grid-column: 1; position: relative;}
.bx-inputs .ffbx .ff-label-float{display: none;}
.bx-inputs .ffbx .ff-nota{margin: 0 0 0 0; padding:6px 8px; font-size: var(--texto-1); color: var(--color-60); background-color: var(--color-05); display: none;}
.bx-inputs .ffbx .ff-requerido{background-color: var(--color-00) !important; border: 0 !important; border-bottom: 1px solid var(--ro) !important; color: var(--color-100) !important;}
.bx-inputs input, .bx-inputs select{border:0; border-radius: 0; background-color: transparent !important; padding: 0; height: 40px !important; text-indent: 0; grid-column: 2;}
.bx-inputs textarea{grid-column: 1 / 3; border:0; border-radius: 0; background-color: transparent !important; box-shadow: none !important; padding: 0; text-indent: 0;}
.bx-inputs .ffbx:last-child input, .bx-inputs .ffbx:last-child select{border: 0}
.bx-inputs input:read-only{color: var(--color-100)}
.bx-inputs input:read-only + .ico-input::before{content:""; position: absolute; bottom: 0; right: 0px; bottom: 0; pointer-events: none; background: url(../gui/ico/lock.svg) 50% 50% no-repeat; background-size: 20px auto; width: 40px; height: 40px; filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.bx-inputs select.multiple{width:100%; height: auto !important; position: relative; }
.bx-inputs select + .ico-input::before{content:""; position: absolute; right: 0px; top: 0px; pointer-events: none; background: url(../gui/ico/arrow-down.svg) 50% 50% no-repeat; background-size: 24px auto; width: 40px; height: 40px; filter: var(--filter-md); -webkit-filter: var(--filter-md);}

/* Global */

.global{position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: scroll;}

.loader{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; opacity: 1; background-color: var(--color-bg2);}
.loader span{position: absolute; top: calc(50% - 24px); left: calc(50% - 24px); width: 48px; height: 48px; background: url(../gui/ico/loading.svg) 50% 50% no-repeat; background-size: 100% auto; animation-name: rotate;animation-duration: 2s;animation-iteration-count:infinite;}
.loader-out{animation-name: fade-out;animation-duration: 300ms; opacity: 0.1;}

.micro-loader-target{min-height: 40px; position: relative;}
.micro-loader{position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; opacity: 1; background-color: var(--color-00);}
.micro-loader span{position: absolute; top: calc(50% - 12px); left: calc(50% - 12px); width: 24px; height: 24px; background: url(../gui/ico/loading.svg?1) 50% 50% no-repeat; background-size: 100% auto; animation-name: rotate;animation-duration: 2s;animation-iteration-count:infinite;}
.micro-loader-out{animation-name: fade-out;animation-duration: 300ms; opacity: 0.1;}

.waiting{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; opacity: 1; background-color: rgba(0,0,0,0.3);}
.waiting span{position: absolute; top: calc(50% - 12px); left: calc(50% - 12px); width: 24px; height: 24px; transform: translate(-50%,-50%); background: url(../gui/ico/loading.svg?1) 50% 50% no-repeat; background-size: 100% auto; animation-name: rotate;animation-duration: 2s;animation-iteration-count:infinite;}
.waiting-out{animation-name: fade-out;animation-duration: 300ms; opacity: 0.1;}

/* Splash */

.splash-overlay{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 299; background-color: var(--overlay); animation-name: fade-in;animation-duration: 300ms; opacity: 1; overflow: auto !important; padding: 40px;}
.splash-overlay-out{animation-name: fade-out;animation-duration: 300ms;opacity:0}

.splash{position:relative; background-color: var(--color-bg1); opacity: 1; width: 480px; margin: 0 auto; padding: 0px; box-sizing: border-box; border-radius: var(--br3); overflow: hidden; animation-name: modal-in !important;animation-duration: 300ms;}
.splash .splash-contenido{padding: 40px; box-sizing: border-box;}
.splash-out{animation-name: modal-out !important;animation-duration: 300ms; opacity: 0;}
.splash .splash-cerrar {position: absolute; top: 12px; right: 12px; z-index: 1; width: 40px; height: 40px; text-indent: -6000px; border-radius: 40px; background-color: var(--color-bg2);}
.splash .splash-cerrar::before{content:""; position: absolute; top: 0; left: 0; bottom: 0;  z-index: 1; background: url(../gui/ico/del.svg) 50% 50% no-repeat; background-size: 32px auto; width: 40px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

.splash ul.bx-links{border: 1px solid var(--color-10) !important}
.splash ul.bx-lista{border: 1px solid var(--color-10) !important}

.splash-recurso-2-1{background-color: var(--color-10); aspect-ratio: 2/1}
.splash-recurso-3-2{background-color: var(--color-10); aspect-ratio: 3/2}
.splash-recurso-start{background: url(../gui/recursos/start.svg) 50% 50% no-repeat; background-size: cover; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.splash-recurso-vencido{background: url(../gui/recursos/vencido.svg) 50% 50% no-repeat; background-size: cover; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

.bx-splash{background-color: var(--color-10); padding: 32px 33.33333% 32px 32px; box-sizing: border-box; border-radius: var(--br1); position: relative; border: 0px solid var(--color-10);}
.bx-splash .splash-recurso{position:absolute; top: 0; right: 0; bottom: 0; left: 66.66666%;}
.bx-splash .splash-recurso-guia{background: url(../gui/recursos/guia.svg?2) 0% 50% no-repeat; background-size: auto 130%; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

/* Hero */

.hero-overlay{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 298; background-color: var(--overlay); animation-name: fade-in;animation-duration: 300ms; opacity: 1; overflow: auto !important; padding: 64px;}
.hero-overlay-out{animation-name: fade-out;animation-duration: 300ms;opacity:0}

.hero{position:relative; background-color: var(--color-00); margin: 0 auto;  opacity: 1; width: 640px; padding: 0; box-sizing: border-box; border-radius: var(--br3); box-shadow: var(--shadow-1); overflow: hidden;}
.hero .hero-contenido{padding: 40px; box-sizing: border-box;}
.hero .hero-contenido hr { border: 0; border-bottom: 1px var(--color-10) solid;margin: 16px -40px; padding: 0;}
.hero .hero-cerrar {position: absolute; top: 16px; right: 16px; z-index: 3; width: 40px; height: 40px; text-indent: -6000px;}
.hero .hero-cerrar::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/del.svg) 50% 50% no-repeat; background-size: 32px auto; width: 40px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

/* Modal */

.modal-overlay{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 299; background-color: var(--overlay); opacity: 1; overflow: auto !important; padding: 40px;}
.modal-overlay-out{opacity:0}

.modal{position:relative; background-color: var(--color-bg1); margin: 0 auto; opacity: 1; width: 400px; padding: 0px; box-sizing: border-box; border-radius: var(--br1); box-shadow: var(--shadow-1); overflow: hidden; opacity: 1;}
.modal .modal-contenido{padding: 24px; box-sizing: border-box;}
.modal h1{font-size: var(--texto-3); line-height: var(--texto-3); margin: 0; padding: 24px 24px 0 24px;}
.modal hr { border: 0; margin: 32px -32px 0 -32px; padding: 0;}
.modal-out{animation-name: modal-out !important;animation-duration: 300ms; opacity: 0;}
.modal .modal-cerrar {position: absolute; top: 4px; right: 4px; z-index: 1; width: 40px; height: 40px; text-indent: -6000px; border-radius: 40px;}
.modal .modal-cerrar::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/del.svg) 50% 50% no-repeat; background-size: 24px auto; width: 40px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.modal .modal-cerrar-light {position: absolute; top: 12px; right: 12px; z-index: 1; width: 40px; height: 40px; text-indent: -6000px; border-radius: 40px;}
.modal .modal-cerrar-light::before{content:""; position: absolute; top: 0; left: 0; bottom: 0;  z-index: 1; background: url(../gui/ico/del.svg) 50% 50% no-repeat; background-size: 32px auto; width: 40px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.modal .bx-hero-1{background-color: var(--color-100); margin: -32px -32px 0 -32px; padding: 32px 32px 64px 32px; box-sizing: border-box; color: var(--color-10)}
.modal .bx-hero-1 h2, .modal .bx-hero-1 b, .modal .bx-hero-1 p{color: var(--color-10)}
.modal .bx-hero-2{background-color: var(--color-10); margin: -32px -32px -32px -32px; padding: 32px; box-sizing: border-box; border-radius: var(--br3) 16px 0 0;}

.modal ul.bx-links{border: 0px solid var(--color-10) !important}
.modal ul.bx-lista{border: 0px solid var(--color-10) !important}
.modal .bx-tabla-base{border: 0px solid var(--color-10)}

/* Lateral */

.lateral-overlay{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 298; background-color: var(--overlay); opacity: 1; overflow: auto !important; padding: 40px 0;}
.lateral-overlay-out{animation-name: fade-out;animation-duration: 300ms;opacity:0}

.lateral{position:relative; width: 560px; background-color: var(--color-bg1); margin: 0 auto;  opacity: 1; padding: 0; box-sizing: border-box; box-shadow: var(--shadow-1); overflow: hidden; border-radius: var(--br2);}
.lateral .lateral-contenido{padding: 32px; box-sizing: border-box; position: relative;}
.lateral h1{font-size: var(--texto-3); margin: 0; padding: 0 32px; height: 56px; line-height: 56px; background-color: var(--color-bg1); border-bottom: 1px solid var(--color-bd); position: sticky; top: 0; z-index: 10;}
.lateral hr { border: 0; border-bottom: 1px var(--color-00) solid;margin: 24px -24px; padding: 0;}
/*.modal-out{animation-name: modal-out;animation-duration: 300ms; opacity: 0;}*/
.lateral .lateral-cerrar {position: absolute; top: 0px; right: 8px; z-index: 11; width: 56px; height: 56px; text-indent: -6000px;}
.lateral .lateral-cerrar::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/del.svg) 50% 50% no-repeat; background-size: 32px auto; width: 64px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

.lateral .lateral-cerrar-light {position: absolute; top: 0; right: 0; z-index: 3; width: 56px; height: 56px; text-indent: -6000px; border-radius: 0px; background-color: transparent;}
.lateral .lateral-cerrar-light::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/del.svg) 50% 50% no-repeat; background-size: 32px auto; width: 56px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

.iframes{display: none; width: 100%;}

/* Details */

details{margin: 0 0 8px 0; padding: 0; border: 1px solid var(--color-f3); background-color: var(--color-f1); border-radius: var(--br2); overflow: hidden;}
details:last-child{margin:0}
details summary {outline: none; margin: 0 0 0 -10px; padding: 12px 16px !important; cursor: pointer; position: relative; font-size: var(--texto-2);  color: var(--color-t3);}
details summary::before{content:""; position: absolute; top: 0; right: 8px; bottom: 0; background: url(../gui/ico/arrow-down.svg) 50% 50% no-repeat; background-size: 24px auto; width: 32px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
details[open] {}
details[open] summary{border-bottom: 1px solid var(--color-f3);}
details[open] summary::before{content:""; position: absolute; top: 0; right: 8px; bottom: 0; background: url(../gui/ico/arrow-up.svg) 50% 50% no-repeat; background-size: 24px auto; width: 32px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
details > div{margin: 0 !important; padding: 16px; background-color: var(--color-f1);}
details summary::-webkit-details-marker {color: transparent;padding: 0; margin: 0;}

/* BX */

.bx-1{display: flex; flex-direction: column; gap: 24px; padding: 0; box-sizing: border-box;}
.bx-1 > div{}
.bx-1s{display: grid; grid-gap: 16px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr;}
.bx-2{display: grid; grid-gap: 24px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr 1fr;}
.bx-2f{display: grid; grid-gap: 16px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr 1fr;}
.bx-2s{display: grid; grid-gap: 16px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr 1fr;}
.bx-3{display: grid; grid-gap: 24px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr 1fr 1fr;}
.bx-3s{display: grid; grid-gap: 16px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr 1fr 1fr;}
.bx-3f{display: grid; grid-gap: 16px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr 1fr 1fr;}
.bx-4{display: grid; grid-gap: 24px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr 1fr 1fr 1fr;}

.bx-1-2{display: grid; grid-gap: 24px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr 2fr;}

.bx-1s .ffbx, .bx-2s .ffbx, .bx-3s .ffbx, .bx-1-2s .ffbx, .bx-2-1s .ffbx, .bx-1-3s .ffbx, .bx-3-1s .ffbx{padding:0;}

.banner-1-1{background-color: var(--color-00) !important; border-radius: var(--br2); aspect-ratio: 1 / 1; background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50% !important;}
.banner-2-1{background-color: var(--color-ka); border-radius: var(--br2); aspect-ratio: 2 / 1; background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50% !important;}
.banner-3-1{background-color: var(--color-ka); border-radius: var(--br2); aspect-ratio: 3 / 1; background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50% !important;}

.bg-pattern-1{background-image: url(../gui/bg1.svg); background-size: 200px 100px; }

#map{height:400px}

.bx-flex{display: flex; flex-wrap: wrap; gap: 24px}
.bx-flex > div, .bx-flex > ul{flex: 260px}
.bx-flex .break{flex-basis: 100%}

.bx-base{background-color: var(--color-00); padding: 16px; border-radius: var(--br1);}

.bx-cols{display: flex; gap: 24px}
.bx-cols div{flex: auto;}
.bx-cols .fit{flex: 0;}
.bx-cols .break{flex-basis: 100%}

ul.bx-links{display: grid; grid-gap: 0px; margin: 0; padding: 0; grid-template-columns: 1fr; position: relative; border-radius: var(--br2); background-color: var(--color-bg1); overflow: hidden;}
ul.bx-links li{list-style: none; margin: 0; padding: 0 0 0 0; box-sizing: border-box; position: relative; width: 100%;}
ul.bx-links li a{padding: 12px 48px 12px 16px; display: block;  border-radius: 0px; border-bottom: 1px solid var(--color-bd);}
ul.bx-links li a::before{content:""; position: absolute; top: 0px; right: 0; bottom: 0; background: url(../gui/ico/arrow-right.svg) 50% 50% no-repeat; background-size: 20px auto; width: 48px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
ul.bx-links li:last-child a{border:0}
ul.bx-links li a h3, ul.bx-links li a p, ul.bx-links li a small, ul.bx-links li a b, ul.bx-links li a div{pointer-events:none}
ul.bx-links li a.cols{display: flex; gap: 16px; }
ul.bx-links li a.cols .keyCol{flex: auto;}
ul.bx-links li a.key{background-color: var(--color-05); padding: 14px 16px;}
ul.bx-links li a.key .keyCol{}

ul.bx-links-inv li a{background-color: var(--color-10);}

ul.bx-lista{display: grid; grid-gap: 0; margin: 0; padding: 0; grid-template-columns: 1fr; position: relative; border-radius: var(--br2); overflow: hidden; box-shadow: var(--shadow-0);}
ul.bx-lista li {margin: 0; padding: 12px 16px; list-style: none; position: relative; background-color: var(--color-bg1); border-bottom: 1px solid var(--color-bd);}
ul.bx-lista li:last-child{border:0;}
ul.bx-lista li.bx-controles{padding-right: 96px}
ul.bx-lista li.cols{display: flex; gap: 16px; }
ul.bx-lista li.cols .keyCol{flex: auto}
ul.bx-lista li.cols .imgCol {width:80px;margin: -12px 0 -12px -16px;}
ul.bx-lista li.cols .imgCol .img{aspect-ratio: 3 / 3;  background-color: var(--color-bg2) !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; display: block;}
ul.bx-lista li .bx-dentado{padding: 0 0 0 52px}

ul.bx-lista ul.bx-links{box-shadow: none !important; margin: 0; padding: 0;}
ul.bx-lista ul.bx-links li{margin: 0; padding: 0; border:0;}

ul.bx-lista li ul.bx-lista-sub {margin: 16px -16px -16px -16px; padding: 0; position: relative; }
ul.bx-lista li ul.bx-lista-sub li {list-style: none; padding: 0; border-bottom: 0 !important;}
ul.bx-lista li ul.bx-lista-sub li a{list-style: none; padding: 16px; border-top: 1px solid var(--color-10); border-bottom: 0 !important;}
ul.bx-lista li ul.bx-lista-sub li a.cols{display: flex; gap: 16px; }
ul.bx-lista li ul.bx-lista-sub li a.cols .keyCol{flex: auto}



ul.bx-lista-opciones{display: grid; grid-gap: 16px; margin: 0; padding: 0; grid-template-columns: 1fr; position: relative;}
ul.bx-lista-opciones li {margin: 0; padding: 16px; list-style: none; position: relative; background-color: var(--color-bg1); border: 0px solid var(--color-bd); border-radius: var(--br2); box-shadow: var(--shadow-0);}
ul.bx-lista-opciones li.cols{display: flex; gap: 16px; }
ul.bx-lista-opciones li.cols .keyCol{flex: auto}
ul.bx-lista-opciones .bx-btns{margin-top: 16px}

ul.bx-flat{position:relative; margin:0px; padding: 0px !important;}
ul.bx-flat li {list-style: none; padding: 0 0 8px 0; display: block; position: relative;}
ul.bx-flat li:last-child {padding: 0;}
ul.bx-flat li .ptr{position:absolute; top: 0; right: 0;padding: 4px 0;}
ul.bx-flat li.ico {background-size: 20px auto; background-position: 13px 12px; background-repeat: no-repeat; padding-left: 40px;}

ol.bx-flat{position:relative; margin:0 0 0 18px; padding: 0px;}
ol.bx-flat li {padding: 0 0 8px 0;}
ol.bx-flat li:last-child {padding: 0;}

ol.bx-flat li ol {margin-top: 8px}
ol.bx-flat li ul {margin:0 0 0 32px; padding: 8px 0 0 0;}

ol.wiz {counter-reset: wiz-counter;list-style: none;margin: 0;padding: 0;padding-left: 32px;}
ol.wiz li {padding: 4px 0;margin: 0 0 8px 0;counter-increment: wiz-counter;position: relative;font-weight: 500;}
ol.wiz li::before {content: counter(wiz-counter);color: var(--color-00);font-size: var(--texto-2);position: absolute;--size: 24px;left: calc(-1 * var(--size) - 8px);line-height: var(--size);width: var(--size);height: var(--size);top: 0;background: var(--color-100);border-radius: 50%;text-align: center;}

ul.feat {list-style: none;margin: 0;padding: 0;padding-left: 24px;}
ul.feat li {padding: 4px 32px 4px 32px;margin: 0 0 4px 0;position: relative;}
ul.feat li::before {content: ''; position: absolute; width: 8px;height: 8px; top: 6px; left: 0; border: 3px solid var(--color-100); border-radius: 50%;text-align: center;}

ul.check {margin: 0;padding-left: 0px}
ul.check li {position: relative;list-style-type: none;padding: 0 0 0 24px;margin: 0 0 8px 0;}
ul.check li:before {content: '';display: block;position: absolute;left: 0;top: -4px;width: 4px;height: 10px;border-width: 0 3px 3px 0;border-style: solid;border-color: var(--color-100);transform-origin: bottom left;transform: rotate(45deg);}

.bx-full{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; background-color: var(--color-bg1); padding: 40px; border-radius: var(--br3); }

.bx-carousel{display: flex; gap: 16px; overflow: auto; scroll-snap-type: x mandatory; margin: 0 -40px; }
.bx-carousel::after{content:''; padding-right: 24px;}
.bx-carousel .item{min-width: 260px; max-width: 260px; min-height: 160px; scroll-snap-align: start; scroll-margin: 40px; background-color: var(--color-bg1); padding: 32px; box-sizing: border-box; border-radius: var(--br2);}
.bx-carousel .item .tag-ico{width: 40px; height: 40px; border-radius: 12px; display: block; position: relative; background-color: var(--color-bg3); margin-bottom: 16px;}
.bx-carousel .item .tag-ico::before{background-size: 24px auto !important; background-position: 50% 50% !important; background-repeat: no-repeat !important; width: 40px;}
.bx-carousel .item:first-child{margin-left: 40px}

/* Tabs */

.tabs-nav {overflow-x: auto; white-space:nowrap; position: absolute; top: 0; left: 0; right: 0; background-color: var(--color-bg1); box-sizing: border-box; border-bottom: 1px solid var(--color-bd);}
.tabs-nav ul {margin: 0;padding: 0 32px;}
.tabs-nav li {display: inline-block; margin: 0 16px 0 0; padding: 0; }
.tabs-nav a {display: block;padding: 0; height: 48px; line-height: 48px;}
.tabs-nav li.active {color: var(--color-ka); font-weight: 500;}
.tabs-nav li.active a {color: inherit;}

.tabs-content {padding: 48px 0 0 0;}
.tabs-content .content:not(:first-child) {display: none;}

/* Icos*/

.ico-tx {padding-left: 28px !important; display: block; position: relative;}
.ico-tx::before{content:""; position: absolute; top: 0; left: 0; bottom: 0;  background-size: 20px auto !important; background-position: 0 -1px !important; background-repeat: no-repeat !important; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

.ico-pin::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/pin.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-efectivo::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/efectivo.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-terminal::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/terminal.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-tarjeta::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/tarjeta.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-direccion::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/direccion.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-hand-pago::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/hand-pago.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-info::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/info.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-notas::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/notas.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-fecha::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/fecha1.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-filtro::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/filtro.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-usuario::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/usuario.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-cliente::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/usuario.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-iphone::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/iphone.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-tablero::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/tablero.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-producto::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/producto.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-carrito::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/carrito.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-opcion::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/opcion.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-ticket::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/print-ticket.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-transfer::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/transfer.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-grid::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/grid.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-grid-target::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/grid-target.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-promo::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/promo.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-comanda::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/comanda.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-sucursal::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/ubicacion.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-upgrade::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/upgrade.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-ocultar::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/ocultar.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-ayuda::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/ayuda.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-pos::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/pos.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-reporte::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/reporte.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-catalogo-digital::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/catalogo-digital.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-whatsapp::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/whatsapp.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.ico-tip::before{background: url(../gui/ico/tip.svg);}
.ico-cliente::before{background: url(../gui/ico/cliente.svg);}

/* Tags */

.tag{font-size: var(--texto-1); margin: 0 8px 0 0; background-color: var(--color-f3); color: var(--color-t1); padding: 6px 12px; border-radius: 32px; display: inline-block;}

.tag-on{font-size: var(--texto-1); margin: 0 8px 0 0; background-color: var(--color-f5); color: var(--color-f5c); padding: 4px 10px; border-radius: 32px; display: inline-block;}
.tag-off{font-size: var(--texto-1); margin: 0 8px 0 0; background-color: var(--color-f3); color: var(--color-t1); padding: 4px 10px; border-radius: 32px; display: inline-block;}

/* Tabla */

.t{display:table;width:100%;border-collapse: collapse;margin: 0; padding: 0;}
.t .th{font-weight: 500;display:table-row;text-align: left;}
.t .tr{display:table-row;text-align: left;}
.t .tr:nth-child(even){}
.t .tc{display:table-cell;padding: 16px;position: relative; vertical-align: top; box-sizing: border-box; color: var(--color-100);}
.t .tci{display:table-cell;padding: 16px 16px 16px 0px;position: relative; vertical-align: top; box-sizing: border-box;}
.t .tcd{display:table-cell;padding: 16px 0px 16px 16px;position: relative; vertical-align: top; box-sizing: border-box;}
.t .novp{padding-top:0px; padding-bottom:0px;}

.t-flat .tc{display:table-cell;padding: 4px 0;}

.px20{width: 20px}
.px30{width: 30px}
.px40{width: 40px}
.px50{width: 50px}
.px60{width: 60px}
.px70{width: 70px}
.px80{width: 80px}
.px90{width: 90px}
.px100{width: 100px}
.px110{width: 110px}
.px120{width: 120px}
.px130{width: 130px}
.px140{width: 140px}
.px150{width: 150px}
.px160{width: 160px}
.px170{width: 170px}
.px180{width: 180px}
.px190{width: 190px}
.px200{width: 200px}
.px210{width: 210px}
.px220{width: 220px}
.px230{width: 230px}
.px240{width: 240px}
.px250{width: 250px}
.px260{width: 260px}
.px270{width: 270px}
.px280{width: 280px}
.px290{width: 290px}
.px300{width: 300px}

.p33{width: 33.33333%}
.p50{width: 50%}
.p66{width: 66.66666%}
.p100{width: 100%}

.bx-t{background-color: var(--color-00); border-radius: var(--br1) !important; overflow: hidden; box-shadow: var(--shadow-0);}
.bx-t .tr{border-bottom: 1px solid var(--color-10)}
.bx-t .tr:last-child{border: 0}

.bx-tabla-base{margin: 0px; padding: 0px; border-radius: var(--br1); background-color: var(--color-bg1); position: relative; overflow: hidden;}
.bx-tabla-base .tabla-contenido{overflow: auto !important; white-space:nowrap !important;}

.tabla-base {border-collapse: collapse; position: relative; width: 100%;}
.tabla-base thead {position: -webkit-sticky; position: sticky; top: 0px;}
.tabla-base tr.odd{}
.tabla-base tr.selected{background-color: var(--color-bg2)}
.tabla-base tr th {padding: 12px 32px 12px 0; text-align: left; font-weight: 500; position: relative; border-bottom: 1px solid var(--color-bd);}
.tabla-base tr th:first-child {padding-left: 16px;}
.tabla-base tr th::before{content:""; position: absolute; top: 0px; right: 8px; bottom: 0; background: url(../gui/ico/sort.svg) 50% 50% no-repeat; background-size: 16px auto; width: 20px;filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.tabla-base.nosort tr th{padding-right: 16px;}
.tabla-base.nosort tr th:last-child {padding-right: 16px;}
.tabla-base.nosort tr th::before{display:none; padding-right: 16px;}
.tabla-base tr td {padding: 12px 16px 12px 0; border-bottom: 1px solid var(--color-bd); position: relative; vertical-align: top;}
.tabla-base tr td:first-child {padding-left: 16px;}
.tabla-base tr td:last-child {padding-right: 16px;}

.tabla-base tr:last-child td {border:0;}
.tabla-base tr.disabled{pointer-events: none !important; background-color: var(--color-00) !important; color: var(--color-10) !important;}

.tabla-base input[type="text"],.tabla-base input[type="number"],.tabla-base select{height: 28px; text-indent: 8px; margin: -6px 0; padding: 0; background-color: var(--color-00) !important; border: 1px solid var(--color-10) !important; box-shadow: none !important;}
.tabla-base input.ff-requerido, .tabla-base select.ff-requerido{background-color: var(--color-rol) !important;}

.tabla-base .controles-incremento{position:relative; background-color: var(--color-00); width: 136px; height: 28px; margin: -6px 0;}
.tabla-base .controles-incremento .incremento-menos{width: 40px; height: auto; position: absolute; left: 0px; top: 0px; bottom: 0; z-index: 2; background-color: transparent; border-right: 1px solid var(--color-10); border-radius: 0;}
.tabla-base .controles-incremento .incremento-menos::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/menos.svg) 50% 50% no-repeat; background-size: 20px auto; width: 40px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.tabla-base .controles-incremento .incremento-campo{width: 100%; height: auto; text-align: center; margin: 0 !important; padding: 0px !important; text-indent: 0px !important; position: absolute; top: 0px; left: 0px; bottom: -1px; z-index: 1; font-size: var(--texto-2) !important;  color: var(--color-100); box-shadow: none; border: 0; background-color: var(--color-00) !important;}
.tabla-base .controles-incremento .incremento-mas{width: 40px; height: auto; position: absolute; right: 0px; top: 0px; bottom: 0; z-index: 2; background-color: transparent; border-left: 1px solid var(--color-10); border-radius: 0;}
.tabla-base .controles-incremento .incremento-mas::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/add.svg) 50% 50% no-repeat; background-size: 20px auto; width: 40px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

.bx-tabla-base .buscador {position: relative; padding: 0; overflow: hidden; border: 0; border-bottom: 1px solid var(--color-bd); border-radius: 0;}
.bx-tabla-base .buscador input{ background-color: var(--color-bg1) !important; padding: 0 !important; text-indent: 16px; height: 40px; border: 0; border-radius: var(--br2); box-shadow: none;}

.bx-tabla-base .paging_simple_numbers{height: 32px; padding: 4px; margin: 0 0 0 0px; position: relative; display: flex; border-top: 1px solid var(--color-bd);}
.bx-tabla-base .paging_simple_numbers .paginate_button{display: inline-block; padding: 0 12px; height: 32px; line-height: 32px; color: var(--color-t1);}
.bx-tabla-base .paging_simple_numbers .paginate_button.previous{}
.bx-tabla-base .paging_simple_numbers .paginate_button.next{}
.bx-tabla-base .paging_simple_numbers .paginate_button.current{background-color: var(--color-bg2); color: var(--color-t2); border-radius: var(--br1);}
.bx-tabla-base .paging_simple_numbers .ellipsis{}

.bx-tabla-base .dataTables_filter{display: none;}
.bx-tabla-base .dataTables_empty{height: 80px; line-height: 80px; text-align: center; color: var(--color-70);}
.bx-tabla-base .tabla-info{position: absolute; bottom: 0; right: 16px; height: 40px; line-height: 40px; color: var(--color-t1);}
.bx-tabla-base .dataTables_processing {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-color: var(--color-00); padding: 24px; text-align: center;}

.bx-tabla-flat{background-color: var(--color-00); border-radius: var(--br1); border: 0px solid var(--color-10);}
.tabla-flat {border-collapse: collapse; position: relative; width: 100%;}
.tabla-flat tr th {font-weight: 500;}
.tabla-flat tr th, .tabla-flat tr td {padding: 14px 16px; border-bottom: 1px solid var(--color-10); color: var(--color-100); text-align: left; vertical-align: top;}
.tabla-flat tr th:first-child, .tabla-flat tr td:first-child {padding-left: 16px}
.tabla-flat tr:last-child td {border:0;}
.tabla-flat input{background-color: var(--color-00) !important; border: 1px solid var(--color-10); margin: -8px 0; padding: 0 !important; height: 32px !important; text-indent: 8px !important;}

/* POP ***************************************************************************************************************/

.pop-call{position: relative;}
.pop{display:none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 10; background-color: var(--color-bg1) !important; color: var(--color-t2) !important; border-radius: var(--br2) !important; margin: 0 !important; padding: 8px 16px !important; box-shadow: var(--shadow-1); border: 1px solid var(--color-bd);}
.pop-in{position: absolute; top: calc(100% + 8px); left: auto; right: 0;}
.pop-br{position: absolute; bottom: calc(100% + 8px); right: 0px;}

.pop li{position: relative; margin: 0 !important; padding: 0 !important; list-style: none !important; display: block !important; min-width: 144px; white-space: nowrap;}
.pop li a{text-align:left !important; margin: 0px !important; padding: 6px 0 !important; letter-spacing: normal; color: var(--color-t2); font-size: var(--texto-2); display: block !important; background-color: transparent !important; height: auto !important; line-height: normal !important; border-radius: 0 !important; }
.pop hr { border: 0; border-bottom: 1px var(--color-bd) solid;margin: 8px -16px; padding: 0;}

/* Mensajes */

.msg-norecords{background-color: var(--color-bg3); color: var(--color-t1); display: grid; align-items: center; justify-content: center; border-radius: var(--br1); height: 84px;}

.msg{display: block; padding: 12px 16px; border-radius: var(--br2); border: 1px solid var(--color-10); overflow: hidden;}
.msg-alerta{background: var(--color-100); color: var(--color-kbc);}
.msg-aviso{}
.msg-info{border-color: var(--color-ka); color: var(--color-ka); background-color: #FFE3E3 !important; background: repeating-linear-gradient(45deg,#FFE3E3,#FFE3E3 2px,rgba(255,255,255,0.6) 2px,rgba(255,255,255,0.6) 4px);}

.msg-start{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 340px; padding: 120px 0 0 0; box-sizing: border-box; text-align: center;}
.msg-start-productos::before{content:""; position: absolute; top: 8px; left: 50%; transform: translate(-50%,0); background: url(../gui/ico/producto.svg) 50% 50% no-repeat; background-size: 80px auto; width: 80px; height: 80px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.msg-start-pos::before{content:""; position: absolute; top: 8px; left: 50%; transform: translate(-50%,0); background: url(../gui/ico/pos.svg) 50% 50% no-repeat; background-size: 80px auto; width: 80px; height: 80px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.msg-start-pedidos::before{content:""; position: absolute; top: 8px; left: 50%; transform: translate(-50%,0); background: url(../gui/ico/carrito.svg) 50% 50% no-repeat; background-size: 80px auto; width: 80px; height: 80px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.msg-start-sucursales::before{content:""; position: absolute; top: 8px; left: 50%; transform: translate(-50%,0); background: url(../gui/ico/ubicacion.svg) 50% 50% no-repeat; background-size: 80px auto; width: 80px; height: 80px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.msg-start-transfers::before{content:""; position: absolute; top: 8px; left: 50%; transform: translate(-50%,0); background: url(../gui/ico/transfer.svg) 50% 50% no-repeat; background-size: 80px auto; width: 80px; height: 80px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.msg-start-grid::before{content:""; position: absolute; top: 8px; left: 50%; transform: translate(-50%,0); background: url(../gui/ico/grid.svg) 50% 50% no-repeat; background-size: 80px auto; width: 80px; height: 80px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.msg-start-grid-add::before{content:""; position: absolute; top: 8px; left: 50%; transform: translate(-50%,0); background: url(../gui/ico/add-grid.svg) 50% 50% no-repeat; background-size: 80px auto; width: 80px; height: 80px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.msg-start-promociones::before{content:""; position: absolute; top: 8px; left: 50%; transform: translate(-50%,0); background: url(../gui/ico/promo.svg) 50% 50% no-repeat; background-size: 80px auto; width: 80px; height: 80px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.msg-start-colaboradores::before{content:""; position: absolute; top: 8px; left: 50%; transform: translate(-50%,0); background: url(../gui/ico/usuario.svg) 50% 50% no-repeat; background-size: 80px auto; width: 80px; height: 80px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.msg-start-stop::before{content:""; position: absolute; top: 8px; left: 50%; transform: translate(-50%,0); background: url(../gui/ico/stop.svg) 50% 50% no-repeat; background-size: 80px auto; width: 80px; height: 80px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.msg-start-rrhhTurnos::before{content:""; position: absolute; top: 8px; left: 50%; transform: translate(-50%,0); background: url(../gui/ico/rrhhTurnos.svg) 50% 50% no-repeat; background-size: 80px auto; width: 80px; height: 80px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.msg-start-clientes::before{content:""; position: absolute; top: 8px; left: 50%; transform: translate(-50%,0); background: url(../gui/ico/cliente.svg) 50% 50% no-repeat; background-size: 80px auto; width: 80px; height: 80px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}


/* Layout Admin */

.layout-sitio {position:fixed; top: 0; right: 0; bottom: 0; left: 0; display: grid; grid-gap: 0; padding: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr;}

.layout-sitio .header {position: relative; z-index: 2; height: 64px; display: grid; grid-gap: 40px; padding: 16px 32px; grid-template-columns: auto 1fr; background-color: var(--color-ka); box-shadow: var(--shadow-0);}
.layout-sitio .header .nav-call{position: absolute; width: 64px; height: 64px; cursor: pointer; display: none;}
.layout-sitio .header .nav-call::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/nav.svg) 50% 50% no-repeat; background-size: 36px auto; width: 64px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.layout-sitio .header .logo {position: relative; display: flex; align-items: center; font-size: var(--texto-4); font-weight: 900; color: var(--color-ka); background: url(../gui/logoQuesipizzas.svg?v1) 0 50% no-repeat; background-size: 100% auto; text-indent: -6000px; width: 184px;}

.layout-sitio .menu-overlay{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; background-color: rgba(0,0,0,0.5); animation-name: fade-in;animation-duration: 300ms; opacity: 1; overflow: auto !important;}
.layout-sitio .menu {position: relative; display: flex; justify-content: space-between; align-items: center;}
.layout-sitio .menu-in {display: block;animation-name: fade-in;animation-duration: 300ms;}
.layout-sitio .menu .nav {padding: 0; margin: 0;}
.layout-sitio .menu .nav ul.nav-items{margin: 0; padding: 0; display: flex; gap:0}
.layout-sitio .menu .nav ul.nav-items li{margin: 0; padding: 0; list-style: none;}
.layout-sitio .menu .nav ul.nav-items li a{display:block; height: 40px; line-height: 40px; padding: 0 16px; margin: 0; font-size: var(--texto-2); font-weight: 700; color: var(--color-t4); position: relative;}
.layout-sitio .menu .nav ul.nav-items li a.activo{background-color: var(--color-bg2); border-radius: var(--br1); color: var(--color-t3);}

.layout-sitio .menu .nav-footer {margin: 0; padding: 0; position: relative;}
.layout-sitio .menu .nav-footer ul.nav-items-footer{margin: 0; padding: 0; display: flex; gap:16px}
.layout-sitio .menu .nav-footer ul.nav-items-footer li{margin: 0; padding: 0; list-style: none;}
.layout-sitio .menu .nav-footer ul.nav-items-footer li a{display:block; height: 40px; line-height: 40px; padding: 0; display: block; font-size: var(--texto-2);  color: var(--color-t3); position: relative;}
.layout-sitio .menu .nav-footer ul.nav-items-footer li a.call-carrito{display:block; height: 40px; line-height: 40px; padding: 0 16px 0 40px; display: block; font-size: var(--texto-2);  color: var(--color-100); background-color: var(--color-00); border-radius: 40px; position: relative;}
.layout-sitio .menu .nav-footer ul.nav-items-footer li a.call-carrito::before{content:""; position: absolute; top: 0; left: 4px; background: url(../gui/ico/carrito.svg) 50% 50% no-repeat; background-size: 20px auto; width: 40px; height: 40px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

.layout-sitio .contenido {position: relative; z-index: 1; overflow-x: hidden; overflow-y: scroll;}

.layout-sitio .contenido .modulo-contenido{padding:40px;}
.layout-sitio .contenido .modulo-contenido-narrow{max-width: 720px; margin: 0 auto;}

.layout-sitio .grid-1-2{position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; display: grid; grid-gap: 0; grid-template-columns: 32% 1fr;}
.layout-sitio .grid-1-2 .col1{position: relative; overflow: scroll; padding: 0; box-sizing: border-box; border-right: 1px solid var(--color-bd); background-color: var(--color-bg2);}
.layout-sitio .grid-1-2 .col1 .bx-filtros{position: sticky; top: 0; left: 0; right: 0; z-index: 1; background-color: var(--color-bg1); padding: 16px; box-shadow: var(--shadow-0);}
.layout-sitio .grid-1-2 .col1 .bx-filtros input{text-indent: 40px}
.layout-sitio .grid-1-2 .col1 .bx-filtros .ico-buscar {position: absolute; top: 16px; left: 16px; width: 40px; height: 40px; display: block; pointer-events: none;}
.layout-sitio .grid-1-2 .col1 .bx-filtros .ico-buscar::before{content:""; position: absolute; top: 0; left: 0px; bottom: 0; background: url(../gui/ico/buscar.svg) 50% 50% no-repeat !important; background-size: 20px auto !important; width: 48px;filter: var(--filter-ka); -webkit-filter: var(--filter-ka);}

.layout-sitio .grid-1-2 .col1 .bx-lista-sucursales{padding: 16px}
.layout-sitio .grid-1-2 .col2{position: relative; overflow: hidden; padding: 0; box-sizing: border-box; }
.layout-sitio .grid-1-2 .col2 .mapa{position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

.layout-sitio .grid-pos{position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; display: grid; grid-gap: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr;}
.layout-sitio .grid-pos .tools{ background-color: var(--color-bg3); color: var(--color-t3); padding: 16px 32px; display: grid; grid-template-columns: 1fr auto;}
.layout-sitio .grid-pos .tools .menu-categorias{display: flex; gap:16px; align-items: center; justify-content: center}
.layout-sitio .grid-pos .tools .menu-categorias a{color: var(--color-t3); font-weight: 700; height: 32px; line-height: 32px;}
.layout-sitio .grid-pos .tools .call-carrito{background-color: var(--color-kac); color: var(--color-ka); height: 32px; line-height: 32px; padding: 0 16px; border-radius: var(--br2);}
.layout-sitio .grid-pos .catalogo{padding: 32px; overflow-x: hidden; overflow-y: scroll; background-color: var(--color-bg2);}
.layout-sitio .grid-pos .catalogo .grid-items{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 16px; margin: 0; padding: 0;}
.layout-sitio .grid-pos .catalogo .grid-items .item{list-style: none;margin: 0; padding: 0; background-color: var(--color-bg1); border-radius: var(--br3); box-shadow: var(--shadow-0); overflow: hidden;}
.layout-sitio .grid-pos .catalogo .grid-items .item .img{aspect-ratio: 3 / 3; background-color: var(--color-bg1) !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; display: block;}
.layout-sitio .grid-pos .catalogo .grid-items .item .data{display: grid; grid-template-columns: 1fr auto; grid-gap: 16px; padding: 0 16px 16px 16px;}
.layout-sitio .grid-pos .carrito{padding: 32px;}

.bx-item-detalle{}
.bx-item-detalle .img{aspect-ratio: 3 / 3;  background-color: var(--color-bg1) !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; display: block; margin: -40px -40px 40px -40px;}
.bx-item-detalle .data{background-color: var(--color-bg2); margin: -40px; padding: 40px; border-radius: 16px 16px 0 0;}
.bx-item-detalle .data .controles{display: grid; grid-template-columns: 120px 1fr; grid-gap: 16px}

.layout-sitio .footer {position: relative; z-index: 2; height: 64px; background-color: var(--color-bg1); display: none;}

.StripeElement {
	color: var(--color-t3);
  box-sizing: border-box;

  height: 45px;

  padding: 12px 13px;

  border: 0px solid var(--color-bd);
  border-radius: var(--br2);
  background-color: var(--color-f1);
  margin-bottom: 10px;
  box-shadow: var(--shadow-0);
}

.StripeElement::placeholder{
	color: green;
}

.StripeElement--focus {
	border: 1px solid var(--color-ba);
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
	background-color: #fefde5 !important;}

@media screen and (max-width: 1025px){
	
	
}

@media screen and (max-width: 769px){
	
	.only-desk{display: none;}
	.only-mobile{display: block;}
	
	@keyframes modal-in {0% {bottom: -16px; opacity: 0;} 100% {bottom: 0; opacity: 1;}}
	@keyframes modal-out {0% {bottom: 0; opacity: 1;} 100% {bottom: -16px; opacity: 0;}}
	
	
	.layout-sitio .header .nav-call{display: block}
	.layout-sitio .header {height:56px; margin-left: 0px;}
	.layout-sitio .header .logo {left:16px;}
	
	.layout-sitio .menu {position: absolute; top: 0px; left: 0px; bottom: 0; right: 64px; z-index: 4; width: auto; transform: translate(-100%,0);}
	.layout-sitio .menu-in { transform: translate(0%,0);}
	.layout-sitio .menu .nav {margin: 0;}
	
	.layout-sitio .menu .nav-footer {margin: 0;}
	
	.layout-sitio .contenido .modulo-contenido{padding:16px}
	
	.layout-sitio .footer {height: 56px; margin-left: 0;}
	
	.bx-1{gap: 16px;}
	.bx-1s{display: grid; grid-gap: 8px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr;}
	.bx-2{display: grid; grid-gap: 16px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr;}
	.bx-2s{display: grid; grid-gap: 8px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr;}
	.bx-3{display: grid; grid-gap: 16px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr;}
	.bx-3s{display: grid; grid-gap: 8px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr;}
	.bx-4{display: grid; grid-gap: 16px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr;}
	
	.bx-2.invert div:first-child{grid-column: 1 / 2; grid-row: 2 / 3;}
	.bx-2.invert div:last-child{grid-column: 1 / 2; grid-row: 1 / 2;}
	
	.splash{position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: var(--color-00); opacity: 1; width: calc(100% - 32px); padding: 0px; box-sizing: border-box; border-radius: var(--br3); box-shadow: var(--shadow-1); overflow: hidden; animation-name: modal-in !important;animation-duration: 300ms; opacity: 1;}
	.splash .splash-contenido{padding: 40px; box-sizing: border-box;}
	
	.modal-overlay{padding: 0;}
	.modal{position:fixed; top: auto; bottom: 0; left: 0; right: 0; transform: translate(0,0); margin: 0 auto; width: auto; max-height: 80vh !important; padding: 0; box-sizing: border-box; border-radius: var(--br3) 16px 0 0; box-shadow: var(--shadow-1); overflow-x: hidden; overflow-y: scroll;}
	.modal .modal-contenido{padding: 16px;}
	.modal h1{padding: 16px 16px 0 16px;}
	.modal .modal-cerrar-light {top: 10px; right: 12px; width: 32px; height: 32px; text-indent: -6000px; border-radius: 40px;}
	
	.lateral{position:fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; border-radius: 0; box-shadow: none; overflow: scroll;}
	.lateral .lateral-contenido{padding: 16px;}
	.lateral h1{padding: 0 16px; height: 56px; line-height: 56px;}
	
	.hero{position:fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; border: 0; border-radius: 0; box-shadow: none; overflow: scroll;}
	.hero .hero-contenido{padding: 24px;}
	.hero .hero-cerrar {position: absolute; top: 0; right: 0; z-index: 3; width: 40px; height: 40px; text-indent: -6000px;}
	.hero .hero-contenido hr {margin: 16px -24px;}
	
	.tabs-nav ul {margin: 0;padding: 0 16px;}
	
	.pop-tl{position: absolute; top: calc(100% + 8px); left: auto; right: 0;}
	
	.msg-start{width: 100%; padding: 120px 32px 32px 32px;}
	.bx-full{position: relative; top: 0; left: 0; transform: translate(0,0); width: 100%;}
	
	.bx-tabla-base .tabla-info{display:none}
	
}

@media screen and (max-width: 769px) and (orientation:landscape) {
   /*body{display:none}*/
}