* {
    -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%;
	
}

[data-theme="light"] {
	
	--color-ka: #006FBA; /*2176FF - FF6700 - 16a34a*/
	--color-kac: #FFFFFF;
	--color-kal: #F2F7F2;
	--color-kb: #184072;
	--color-kbc: #FFFFFF;
	
	--color-5: #1b1b1d;
	--color-4: #626265;
	--color-3: #d0d0d5;
	--color-2: #e4e4e4;
	--color-1: #f1f1f1; /*f1f1f1*/
	--color-0: #ffffff;
	
	--color-ro: #FF2D55;
	--color-rol: #feebed;
	--color-roc: #FFFFFF;
	--color-az: #4285F4;
	--color-azl: #e4f2ff;
	--color-azc: #FFFFFF;
	--color-ve: #34A853;
	--color-vel: #e7f6eb;
	--color-vec: #FFFFFF;
	--color-am: #FBBC04;
	--color-aml: #fff7e1;
	--color-amd: #FFCC00;
	
	--color-na: #FF9500;
	
	--texto-5: 28px;
	--texto-4: 24px;
	--texto-3: 17px;
	--texto-2: 14px;
	--texto-1: 12px;
	
	--overlay: rgba(0,0,0,0.4);
	
	--filter-co: invert(99%) sepia(0%) saturate(3%) hue-rotate(76deg) brightness(105%) contrast(100%);
	--filter-ba: invert(0%) sepia(0%) saturate(7500%) hue-rotate(301deg) brightness(94%) contrast(104%);
	--filter-ba-off: invert(80%) sepia(0%) saturate(7500%) hue-rotate(301deg) brightness(94%) contrast(104%);
	--filter-wm: invert(96%) sepia(0%) saturate(7500%) hue-rotate(301deg) brightness(94%) contrast(104%);
  
	--shadow-0: 0px 1px 0px 0px rgba(0,0,0,0.07);
	--shadow-1: rgba(0, 0, 0, 0.2) 0px 1px 4px -1px, rgba(0, 0, 0, 0.15) 0px 0px 1px 0px;
	--shadow-float-1: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
	--shadow-hero: rgba(0, 0, 0, 0.03) 0px 0px 0px 6px, rgba(0, 0, 0, 0.2) 0px 2px 3px -1px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
	
	--shadow-inset: inset 0px 1px 2px rgba(0,0,0,0.2), inset -2px 2px 4px rgba(0,0,0,0.1);
}

[data-theme="dark"] {
	
	--color-ka: #2176FF; /* #2962FF */
	--color-kac: #FFFFFF;
	--color-kal: #E3F2FD;
	--color-kb: #E9F4FF;
	--color-kbc: #FFFFFF;
	
	--color-300: #fbfbfd;
	--color-200: #ababad;
	--color-000: #2B2C3C;
	--color-00: #1B1C2C;
	
	--color-5: #f1f1f1;
	--color-4: #8d8d92;
	--color-3: #474749;
	--color-2: #2b2b2d;
	--color-1: #000000;
	--color-0: #1b1b1d;
	
	--color-ro: #EA4335;
	--color-roc: #FFFFFF;
	--color-az: #4285F4;
	--color-azc: #FFFFFF;
	--color-ve: #34A853;
	--color-vec: #FFFFFF;
	--color-am: #FBBC04;
	
	--texto-5: 28px;
	--texto-4: 24px;
	--texto-3: 17px;
	--texto-2: 14px;
	--texto-1: 12px;
	
	--overlay: rgba(0,0,0,0.4);
	
	--filter-ba: invert(99%) sepia(0%) saturate(3%) hue-rotate(76deg) brightness(105%) contrast(100%);
	--filter-ba-off: invert(50%) sepia(0%) saturate(3%) hue-rotate(76deg) brightness(105%) contrast(100%);
	--filter-co: invert(0%) sepia(0%) saturate(7500%) hue-rotate(301deg) brightness(94%) contrast(104%);
	--filter-wm: invert(8%) sepia(0%) saturate(7500%) hue-rotate(301deg) brightness(94%) contrast(104%);
	
	--shadow-1: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
	--shadow-float-1: 2px 2px 16px 2px rgba(0,0,0,0.1);
	--shadow-float-1c: 0px 0px 8px -2px #2AE9AA;
	--shadow-inset: inset -4px 8px 16px rgba(0,0,0,0.08);
	
}

@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 {background-color:var(--color-1);color: var(--color-4);font-family: 'Roboto', sans-serif; font-size: var(--texto-2); font-weight: 400;padding: 0; margin: 0; overscroll-behavior: none;}

h1{font-size: var(--texto-5); font-weight: 500; margin: 0; padding: 0 0 24px 0; color: var(--color-5);letter-spacing: -0.5px; position: relative;}
h2{font-size: var(--texto-4); font-weight: 500; margin: 0; padding: 0 0 24px 0; color: var(--color-5); letter-spacing: -0.5px; position: relative; display: inline-block;}
h3{font-size: var(--texto-3); font-weight: 500; margin: 0; padding: 0 0 16px 0; color: var(--color-5);letter-spacing: -0.5px; position: relative; pointer-events: none;}
h3 .btn{position: absolute; top: -4px; right: 0; background-color: var(--color-2); color: var(--color-5); margin: 0; padding: 0 16px; height: 32px; line-height: 32px; display: inline-block; border-radius: 40px; font-size: var(--texto-2) !important;}
h4{font-size: var(--texto-2); font-weight: 500; margin: 0; padding: 0; color: var(--color-5);}

a {color: var(--color-5); text-decoration: none;-webkit-tap-highlight-color: transparent;}
b {color: var(--color-5); font-weight: 500;}
p{margin:0px; padding: 0 0 16px 0;}
p:last-child{margin:0px; padding: 0px;}
small{font-size: var(--texto-1) !important; color: var(--color-4);}
hr { border: 0; border-bottom: 1px var(--color-2) solid;margin: 24px 0px; padding: 0;}
mark{background: transparent; font-weight: 400; padding-left: 12px; margin-left: 12px; border-left: 1px solid var(--color-3); color: var(--color-4);}

.nm{margin: 0px !important}
.np{padding: 0px !important}
.nbr{border-radius:0 !important;}
.nb{border:0 !important;}
.ns{box-shadow: none !important}

.spd{margin-bottom: 16px !important}
.spdh{margin-bottom: 8px !important}
.dspd{margin-bottom: 32px !important}
.spu{margin-top: 16px !important}
.spuh{margin-top: 8px !important}
.dspu{margin-top: 32px !important}

.offlr{margin-left: -16px !important; margin-right: -16px !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;}

.tx-rojo{color: var(--color-ro) !important}
.link{text-decoration: underline; color: var(--color-ka);}

/* 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-0);}
.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: 46px; position: relative;}
.micro-loader{position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; opacity: 1; background-color: var(--color-0);}
.micro-loader span{position: absolute; top: calc(50% - 16px); left: calc(50% - 16px); width: 32px; height: 32px; 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;}

/* Modal */

.modal-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;}
.modal-overlay-out{animation-name: fade-out;animation-duration: 300ms;opacity:0}
.modal{position:relative; background-color: var(--color-1); margin: 0 auto;  opacity: 1; width: 480px; padding: 0; box-sizing: border-box; border-radius: 6px; box-shadow: var(--shadow-float-1); overflow: hidden;}
.modal .micro-loader{border-radius: 16px}
.modal .modal-contenido{padding: 24px; box-sizing: border-box;}
.modal .modal-contenido .msg{margin: 0 -32px; padding: 16px 32px;}
.modal h1{font-size: var(--texto-3); font-weight: 500; margin: 0; padding: 24px 24px 0 24px;}
.modal hr { border: 0; border-bottom: 1px var(--color-2) solid;margin: 24px -24px; padding: 0;}
.modal .modal-cerrar {position: absolute; top: 5px; right: 5px; z-index: 3; width: 56px; height: 56px; text-indent: -6000px; background-color: transparent;}
.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: 32px auto; width: 56px;filter: var(--filter-ba-off); -webkit-filter: var(--filter-ba-off);}

/* Lateral */

.lateral-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: 40px;}
.lateral-overlay-out{animation-name: fade-out;animation-duration: 300ms;opacity:0}
.lateral{position:relative; background-color: var(--color-1); margin: 0 auto;  opacity: 1; width: 560px; padding: 0; box-sizing: border-box; border-radius: 6px; box-shadow: var(--shadow-float-1); overflow: hidden;}
.lateral .micro-loader{border-radius: 16px}
.lateral .lateral-contenido{padding: 24px; box-sizing: border-box;}
.lateral h1{font-size: var(--texto-3); font-weight: 500; margin: 0; padding: 24px 24px 0 24px; border-bottom: 0 solid var(--color-2);}
.lateral hr { border: 0; border-bottom: 1px var(--color-2) solid;margin: 24px -24px; padding: 0;}
.lateral .lateral-cerrar {position: absolute; top: 10px; right: 12px; z-index: 3; width: 48px; height: 48px; text-indent: -6000px; background-color: transparent;}
.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: 56px;filter: var(--filter-ba-off); -webkit-filter: var(--filter-ba-off);}

/* Details */

details{margin: 0; padding: 0; border-top: 1px solid var(--color-2);}
details:last-child{border-bottom: 1px solid var(--color-2) !important;}
details summary {outline: none; margin: 0 0 0 -9px; padding: 12px 0 !important; cursor: pointer; position: relative; font-size: var(--texto-2); font-weight: 500; color: var(--color-5);}
details[open] {}
details[open] summary{border-radius: 7px 7px 0 0;}
details .details-content{margin: 0 !important; padding: 0px 0 16px 0;}
details summary::-webkit-details-marker {color: transparent;padding: 0; margin: 0;}

/* BX */

.bx-1{display: grid; grid-gap: 24px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr;}
.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-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-1-2{display: grid; grid-gap: 24px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr 2fr;}
.bx-1-2s{display: grid; grid-gap: 16px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr 2fr;}

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

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

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

.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;}

ul.bx-links{display: grid; grid-gap: 0; margin: 0; padding: 4px 0 4px 16px; grid-template-columns: 1fr; border-radius: 6px; overflow: hidden; background-color: var(--color-0); position: relative; border: 0px solid var(--color-3); }
ul.bx-links li{list-style: none; margin: 0; padding: 0; position: relative; width: 100%; border-bottom: 1px solid var(--color-2);}
ul.bx-links li:last-child{border:0 !important}
ul.bx-links li a{padding: 12px 16px 12px 0; display: block; color: var(--color-5);}
ul.bx-links li a::before{content:""; position: absolute; top: 0; right: 16px; bottom: 0; background: url(../gui/ico/arrow-right.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-ba-off); -webkit-filter: var(--filter-ba-off);}
ul.bx-links li a h3{margin: 0; padding: 0; font-size: var(--texto-3);}
ul.bx-links li a.key{background-color: var(--color-kb); color: var(--color-kbc);}
ul.bx-links li.activo{border-bottom: 1px solid var(--color-ka)}
ul.bx-links li a.disabled{color: var(--color-3); pointer-events: none;}
ul.bx-links li a.disabled::before{background: none}
ul.bx-links li a .cols{display: flex; gap: 16px}
ul.bx-links li a .cols div{flex: auto;}

ul.bx-links.bx-sort li a{padding-right: 64px;}
ul.bx-links.bx-sort li .handle{position: absolute; top: 0; right: 0; bottom: 0; width: 64px;}
ul.bx-links.bx-sort li .handle::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/sort.svg) 50% 50% no-repeat; background-size: 20px auto; width: 64px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
ul.bx-links.bx-sort li.handle-activo{z-index: 1; border: 0; box-shadow: var(--shadow-float-1);}
ul.bx-links.bx-sort li.handle-target{background-color: var(--color-0);}
.handle{width: 100%;}

ul.bx-links-hero{display: grid; grid-gap: 0; margin: 0; padding: 0; grid-template-columns: 1fr; border-radius: 6px; overflow: hidden; background-color: var(--color-0); position: relative; border: 0px solid var(--color-3); box-shadow: var(--shadow-hero);}
ul.bx-links-hero li{list-style: none; margin: 0; padding: 0; position: relative; width: 100%; border-bottom: 1px solid var(--color-2);}
ul.bx-links-hero li:last-child{border:0 !important}
ul.bx-links-hero li a{padding: 20px 32px; font-weight: 400; font-size: var(--texto-3); display: block; color: var(--color-5);}
ul.bx-links-hero li a::before{content:""; position: absolute; top: 0; right: 20px; bottom: 0; background: url(../gui/ico/arrow-right.svg) 50% 50% no-repeat; background-size: 24px auto; width: 24px;filter: var(--filter-ba-off); -webkit-filter: var(--filter-ba-off);}
ul.bx-links-hero li a .cols{display: flex; gap: 16px}
ul.bx-links-hero li a .cols div{flex: auto;}

.bx-card {display: grid; grid-gap: 16px; margin: 0; padding: 0;} 
.bx-card-2 {grid-template-columns: 1fr 1fr;}
.bx-card-3 {grid-template-columns: 1fr 1fr 1fr;}
.bx-card .bx {margin: 0; position: relative; padding: 16px; display: block; background-color: var(--color-0) !important; border-radius: 6px; box-shadow: var(--shadow-1); overflow: hidden;}
.bx-card .bx-inputs{margin: -16px; box-shadow: none !important;}
/*.bx-card a {list-style: none; margin: 0; position: relative; padding: 24px; display: block; background-color: var(--color-2) !important; border-radius: 6px; box-shadow: var(--shadow-1);}
.bx-card a.ico{padding-left: 64px;}
.bx-card a.check{}*/

.bx-card .ico-check {box-sizing: border-box;position: absolute; top: 8px; left: 40px;display: block;width: 24px;height: 24px;border-radius: 100px;background-color: var(--color-ka);}
.bx-card .ico-check::after {content: "";display: block;box-sizing: border-box;position: absolute;left: 6px;top: 2px;width: 6px;height: 10px;border-color: var(--color-kac);border-width: 0 2px 2px 0;border-style: solid;transform-origin: bottom left;transform: rotate(45deg)}

.bx-roster {display: grid; grid-gap: 16px; margin: 0; padding: 0;} 
.bx-roster-2 {grid-template-columns: 1fr 1fr;}
.bx-roster-3 {grid-template-columns: 1fr 1fr 1fr;}
.bx-roster-4 {grid-template-columns: 1fr 1fr 1fr 1fr;}
.bx-roster .bx{}

.bx-centro{position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center}
.bx-centro .bx-narrow{width: 400px}
.bx-centro .bx-wide{width: 800px}

ul.bx-lista{display: grid; grid-gap: 0; margin: 0; padding: 16px; grid-template-columns: 1fr; position: relative; border-radius: 6px; background-color: var(--color-0); border: 0px solid var(--color-2); overflow: hidden;}
ul.bx-lista li {margin: 0 0 16px 0; padding: 0; list-style: none; position: relative; border-bottom: 0px solid var(--color-2); color: var(--color-5);}
ul.bx-lista li.alerta {border-right: 4px solid var(--color-ro);}
ul.bx-lista li:last-child {margin-bottom: 0}
ul.bx-lista li .cols{display: flex; gap: 16px}
ul.bx-lista li .cols div{flex: auto;}
ul.bx-lista li .cols div.p33{flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 33% !important;}
ul.bx-lista li .cols div.blr{flex-grow: 0 !important; margin: -16px -16px -16px 0}
ul.bx-lista li .poll{display: grid; grid-gap: 16px; grid-template-columns: 1fr auto;}
ul.bx-lista li .poll .pregunta{}
ul.bx-lista li .poll .opciones{margin: -16px -16px -16px 0}
ul.bx-lista li .poll .obs{grid-column: 1 / 3}
ul.bx-lista li .bx-dentado{padding: 8px 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: 16px; border-top: 1px solid var(--color-2); border-bottom: 0 !important;}


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 .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 ul {margin:0 0 0 32px; padding: 8px 0 0 0;}
ol.bx-flat li ul li {}

.bx-kpis-lineal{display: flex; flex-wrap: wrap; gap: 16px}
.bx-kpis-lineal .kpi{flex: 160px;background-color: var(--color-0); border-radius: 6px; padding: 16px;}
.bx-kpis-lineal .kpi-fake{display:none;}
.bx-kpis-lineal .kpi .data{font-size: var(--texto-3); line-height: var(--texto-4); font-weight: 500; color: var(--color-5)}
.bx-kpis-lineal .kpi .data small{color: var(--color-5); font-weight: 500;}
.bx-kpis-lineal .kpi .info{color: var(--color-4); margin-top: 0px;}

.bx-base {background-color: var(--color-0); border-radius: 6px; padding: 16px;}
.bx-base-off {background-color: var(--color-1); border-radius: 6px; padding: 16px;}
.bx-hero {background-color: var(--color-ka); border-radius: 6px; padding: 16px; color: var(--color-0);}
.bx-hero h1, .bx-hero h2, .bx-hero h3, .bx-hero p, .bx-hero b {color: var(--color-0)}


/* Icos*/

.ico-tx {background-size: 24px auto !important; background-position: 0 50% !important; background-repeat: no-repeat !important; padding-left: 32px !important; display: block; position: relative;}

.ico-tx-mid {background-size: 32px auto !important; background-position: 0 50% !important; background-repeat: no-repeat !important; padding-left: 48px !important; display: block;}

.ico-nav{ background: url(../gui/ico/nav.svg);background-size: 50px auto !important;}

.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: 24px auto; width: 24px;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);}

/* Tags */

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

.tag-on{background-color: var(--color-kal); color: var(--color-ka);}
.tag-off{background-color: var(--color-kal); color: var(--color-4);}
.tag-ro{background-color: var(--color-ro); color: var(--color-0);}
.tag-ve{background-color: var(--color-vel); color: var(--color-ve);}
.tag-am{background-color: var(--color-am); color: var(--color-0);}
.tag-az{background-color: var(--color-azl); color: var(--color-az);}
.tag-na{background-color: var(--color-na); color: var(--color-0);}

/* Tabla */

.px10{width: 10px}
.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-tabla-base{margin: 0px; padding: 0px; border-radius: 6px; background-color: var(--color-0); position: relative; border: 0px solid var(--color-2); overflow: hidden; display: grid; }
.bx-tabla-base .tabla-contenido{overflow: auto; white-space:nowrap;  }
.bx-tabla-base .tabla-contenido{overflow: auto; white-space:nowrap;  }

.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-1)}
.tabla-base tr th {padding: 0 32px 0 0; height: 40px; text-align: left; font-weight: 500; position: relative; border-bottom: 1px solid var(--color-2); color: var(--color-5);}
.tabla-base tr th:first-child {padding-left: 16px;}
.tabla-base tr th::before{content:""; position: absolute; top: 0; right: 8px; bottom: 0; background: url(../gui/ico/sort.svg) 50% 50% no-repeat; background-size: 16px auto; width: 20px;filter: var(--filter-ba-off); -webkit-filter: var(--filter-ba-off);}
.tabla-base.nosort tr th::before{display:none}
.tabla-base tr td {padding: 0 16px 0 0; height: 40px; border-bottom: 1px solid var(--color-2); color: var(--color-5); position: relative;}
.tabla-base tr td:first-child {padding-left: 16px;}

.tabla-base tr:last-child td {border:0;}
.tabla-base tr.key{background-color: var(--color-ka); color: var(--color-kac);}
.tabla-base tr.rowAlerta{background-color: var(--color-rol);}
.tabla-base tr.rowAlerta input, .tabla-base tr.rowAlerta select{background-color: var(--color-rol) !important;}
.tabla-base tr.disabled{pointer-events: none !important; background-color: var(--color-2) !important; color: var(--color-3) !important;}

.tabla-base input[type="text"],.tabla-base input[type="email"],.tabla-base input[type="date"],.tabla-base input[type="datetime-local"],.tabla-base input[type="password"],.tabla-base select{height: 28px; text-indent: 8px; margin: -4px 0; padding: 0; background-color: var(--color-0) !important; border: 1px solid var(--color-1) !important; box-shadow: none !important;}
.tabla-base .btn-alt{height: 26px; line-height: 26px;}
.tabla-base input.ff-requerido, .tabla-base select.ff-requerido{background-color: var(--color-rol) !important;}

.bx-tabla-base .paging_simple_numbers{height: 32px; padding: 4px; position: relative; display: flex; border-top: 1px solid var(--color-2);}
.bx-tabla-base .paging_simple_numbers .paginate_button{display: inline-block; padding: 0 12px; height: 32px; line-height: 32px; color: var(--color-4);}
.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-1); color: var(--color-4); border-radius: 6px;}
.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-4);}
.bx-tabla-base .tabla-info{position: absolute; bottom: 0; right: 16px; height: 40px; line-height: 40px;}

.bx-tabla-base .dt-buttons{flex: 0; padding: 8px;}
.bx-tabla-base .dt-buttons button{height: 32px; padding: 0 16px; border: 0; background-color: var(--color-2); color: var(--color-ka); border-radius: 6px; font-size: var(--texto-2);}

.tabla-base .alerta{width:12px; height: 12px; border-radius: 12px; background-color: var(--color-2); text-indent: -6000px;}
.tabla-base .alerta-ro{background-color: var(--color-ro);}
.tabla-base .alerta-ve{background-color: var(--color-ve);}
.tabla-base .alerta-az{background-color: var(--color-az);}
.tabla-base .alerta-am{background-color: var(--color-am);}


.bx-tabla-flat{background-color: var(--color-0); border-radius: 6px; box-shadow: var(--shadow-1);}
.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: 8px; border-bottom: 1px solid var(--color-2); color: var(--color-5); text-align: left;}
.tabla-flat tr:last-child td {border:0;}


.table-timeline-container {width: 100%; border: 0px solid var(--color-3); border-radius: 6px;overflow: scroll; background-color: var(--color-0); box-shadow: var(--shadow-1);}
table.timeline {text-align: left; border-collapse: collapse; border-radius: 6px; background-color: var(--color-2);}

table.timeline tr th {padding: 0; border-bottom: 1px solid var(--color-3); border-right: 1px solid var(--color-3); text-align: left; color: var(--color-5); font-weight: 500; background-color: var(--color-0); position: relative;} 

table.timeline tr td {padding: 0 1px; border-bottom:1px solid var(--color-3); border-right: 1px solid var(--color-3); color: var(--color-5)}

table.timeline tr th:first-child,
table.timeline td:first-child {position: sticky;white-space: nowrap;left: 0;z-index: 10; padding: 16px;}

table.timeline tr th:first-child {z-index: 11;}
table.timeline tr:first-child th:first-child {border-radius: 6px 0 0 0;}
table.timeline tr td:first-child {background-color: var(--color-0); width: 300px !important;}
table.timeline tr:last-child td:first-child{border-radius: 0 0 0 8px}
table.timeline tr:last-child td{border-bottom: 0}

table.timeline tr th {position: sticky;top: 0;z-index: 9;}
table.timeline .colFija{width: 120px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
table.timeline tr th.titulo{padding: 0 0 0 16px; position: sticky; left: 148px;}

table.timeline tr .slots{display: flex; gap: 2px; margin: 0;}
table.timeline tr .slots .slot{flex: 1; width: 56px; height: 40px; border-radius: 6px;}
table.timeline tr .slots .slot.slotHoraKey{display: flex; align-items: center; justify-content: center; font-size: var(--texto-1);}

table.timeline tr .slots .slot-disabled{background-color: var(--color-2); color: var(--color-3); text-decoration: line-through;}
/*table.timeline tr .slots .slot-disponible{background-color: var(--color-3);}*/
table.timeline tr .slots .slot-ocupado{background-color: var(--color-3); color: var(--color-4);}
table.timeline tr .slots .slot-seleccionado{background-color: var(--color-ka); color: var(--color-kac); }


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

.pop-call{position: relative;}
.pop{display:none; z-index: 13; background-color: var(--color-kb) !important; color: var(--color-kbc) !important; border-radius: 6px !important; margin: 0 !important; padding: 8px !important; box-shadow: var(--shadow-float-1);}
.pop-br{position: absolute; bottom: calc(100% + 8px); right: 0px;z-index: 13;}
.pop-tr{position: absolute; top: calc(100% + 8px); right: 8px;z-index: 13;}
.pop-tl{position: absolute; top: calc(100% + 8px); left: 0;z-index: 13;}
.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:last-child{}
.pop li a{text-align:left !important; margin: 0px !important; padding: 8px !important; letter-spacing: normal; color: var(--color-kbc); font-size: var(--texto-2); display: block !important; background-color: transparent !important; height: auto !important; line-height: normal !important; border-radius: 0 !important; font-weight: 400 !important;}

/* CBPN Cards */

.cbpn-card-perfil{position:relative; width: 100%; background-color: var(--color-2); border-radius: 6px;}
.cbpn-card-perfil:before{content:''; display: block; padding-top: 50%;}
.cbpn-card-perfil .cbpn-card-perfil-contenedor {border-radius: 6px !important;overflow: hidden !important;position: absolute;top: 0; right: 0; bottom: 0; left: 0;}
.cbpn-card-perfil .cbpn-card-perfil-contenedor .cbpn-card-perfil-contenedor-loading {position: absolute;top: 0; right: 0; bottom: 0; left: 0; z-index: 2; border-radius: 6px !important; background-color: rgba(255,255,255,0.5);}
.cbpn-card-perfil .cbpn-card-perfil-contenedor .cbpn-card-perfil-contenedor-loading span{position: absolute; top: calc(50% - 12px); left: calc(50% - 12px); width: 24px; height: 24px; background: url(../gui/ico/loading.svg) 50% 50% no-repeat; background-size: 100% auto; animation-name: rotate;animation-duration: 2s;animation-iteration-count:infinite;}
.cbpn-card-perfil .cbpn-card-perfil-contenedor .cbpn-card-perfil-contenedor-img {position: absolute;top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-size: cover !important; background-position: 50% 50% !important;}
.cbpn-card-perfil .cbpn-card-perfil-accion {position: absolute;bottom: 8px;right: 8px; z-index: 3; background-color: var(--color-0);transition: all .3s cubic-bezier(.175, .885, .32, 1.275);width: 40px; height: 40px; border-radius: 40px;}
.cbpn-card-perfil .cbpn-card-perfil-accion:hover {transition: all .3s cubic-bezier(.175, .885, .32, 1.275);}
.cbpn-card-perfil .cbpn-card-perfil-accion .cbpn-card-perfil-accion-campo {display: none;}
/*.cbpn-card-perfil .cbpn-card-perfil-accion .cbpn-card-perfil-accion-btn {width: 40px; height: 40px; background: url(../gui/ico/camara.svg) 50% 50% no-repeat; background-size: 24px auto;}*/
.cbpn-card-perfil .cbpn-card-perfil-accion .cbpn-card-perfil-accion-btn::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/camara.svg) 50% 50% no-repeat; background-size: 24px auto; width: 40px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

/* Mensajes */

.msg-norecords{background-color: var(--color-2); display: grid; align-items: center; justify-content: center; border-radius: 6px; height: 120px;}

.msg{display: grid; align-items: center; justify-content: center; padding: 16px; border: 1px solid var(--color-3); border-radius: 6px; background-color: var(--color-2); color: var(--color-5);}
.msg-info{background-color: var(--color-azl); color: var(--color-az);border: 1px solid var(--color-az);}
.msg-aviso{background-color: var(--color-aml); color: var(--color-amd);border: 1px solid var(--color-am);}
.msg-alerta{background-color: var(--color-rol); color: var(--color-ro); border: 1px solid var(--color-ro);}

.msg-start{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 320px; padding: 96px 0 0 0; box-sizing: border-box; text-align: center;}
.msg-start-norecords::before{content:""; position: absolute; top: 8px; left: 50%; transform: translate(-50%,0); background: url(../gui/ico/msg1.svg) 50% 50% no-repeat; background-size: 80px auto; width: 80px; height: 80px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

@keyframes blinker { 25% {opacity: 0;} 50% {opacity: 1;} }
.blink {animation: blinker 2s linear infinite; }

/* Formularios */

.ffbx{display: flex; flex-direction: column; padding: 0 0 8px 0; position: relative;}
.ffbx:last-child{padding: 0}
.ffbx .ff-label{font-size: var(--texto-2); color: var(--color-5); font-weight: 400; padding: 0 0 4px 0;}
.ffbx .ff-nota{margin-top:5px; font-size: var(--texto-1); color: var(--color-4);}
.ffbx .ff-label-requerido{color: var(--color-ro);}
.ffbx .ff-requerido{border: 2px solid var(--color-ro) !important; }

input, textarea, select, input[type=date], input[type=datetime-local], input[type=email], input[type="password"], input[type="number"]{background-color: var(--color-0) !important; border: 1px solid var(--color-3); border-radius: 4px; -webkit-appearance:none; outline:none; font-size: var(--texto-2); margin: 0; padding: 0; text-indent: 11px; color: var(--color-4); font-weight: 400; box-sizing: border-box; width: 100%; caret-color: var(--color-ka); box-shadow: var(--shadow-0); text-align: left;}
input[type="text"],input[type="email"],input[type="date"],input[type="datetime-local"],input[type="password"], input[type="number"], select{height: 38px}
textarea{padding: 12px; text-indent: 0;}
select{width:100%; height: 38px; position: relative;}
select + .ico-input::before{content:""; position: absolute; bottom: 0; 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-ba-off); -webkit-filter: var(--filter-ba-off);}
input[type=date] + .ico-input::before{content:""; position: absolute; bottom: 0; right: 0px; bottom: 0; pointer-events: none; background: url(../gui/ico/fecha2.svg) 50% 50% no-repeat; background-size: 20px auto; width: 40px; height: 40px; filter: var(--filter-ba-off); -webkit-filter: var(--filter-ba-off);}
input:focus{border: 2px solid var(--color-ka); height: 38px; outline: none; text-indent: 10px;}
textarea:focus{border-color: var(--color-ka); outline: none;}

.input-valido {box-sizing: border-box;position: absolute; top: 50%; right: 4px; transform: translate(0,-50%); display: block;width: 24px;height: 24px;border-radius: 100px;background-color: var(--color-ve);}
.input-valido::after {content: "";display: block;box-sizing: border-box;position: absolute;left: 6px;top: 2px;width: 6px;height: 10px;border-color: var(--color-vec);border-width: 0 2px 2px 0;border-style: solid;transform-origin: bottom left;transform: rotate(45deg)}

.input-novalido {box-sizing: border-box;position: absolute; top: 50%; right: 4px; transform: translate(0,-50%); display: block;width: 24px;height: 24px;border-radius: 100px;background-color: var(--color-ro);}
.input-novalido::after {content: "";display: block;box-sizing: border-box;position: absolute;left: 6px;top: 2px;width: 6px;height: 10px;border-color: var(--color-vec);border-width: 0 2px 2px 0;border-style: solid;transform-origin: bottom left;transform: rotate(45deg)}

.buscador {position: relative; border: 0px solid var(--color-3); border-radius: 40px; background-color: var(--color-0); box-shadow: var(--shadow-1); overflow: hidden;}
.buscador input{ background-color: transparent !important; padding: 0 !important; text-indent: 16px; height: 40px; border: 0; box-shadow: none;}
.buscador .ico-buscar::before{content:""; position: absolute; top: 0; right: 0px; bottom: 0; background: url(../gui/ico/buscar.svg) 50% 50% no-repeat !important; background-size: 20px auto !important; width: 40px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.buscador .ico-add::before{content:""; position: absolute; top: 0; right: 0; bottom: 0; background: url(../gui/ico/add.svg) 50% 50% no-repeat !important; background-size: 24px auto !important; width: 40px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.buscador-plus {padding-right: 40px}
.buscador-plus input{border-right: 1px solid var(--color-2); border-radius: 0;}
.buscador-plus .ico-buscar::before {right: 40px}

.fileinput + label {background-color: var(--color-0); border-radius: 6px; cursor: pointer; height: 48px; line-height: 48px; padding-left: 40px; color: var(--color-5); position: relative; box-shadow: var(--shadow-hero);}
.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-4);}

.checkbox {display: block;position: relative;padding: 4px 0 4px 35px;margin-bottom: 10px;cursor: pointer;font-size: var(--texto-2);font-weight: 400;-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-2);border-radius: 6px;}
.checkbox input:checked ~ .checkmark {background-color: var(--color-ka);}
.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-0);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; }
.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: 16px;display: inline-block;margin: 0;border: 2px solid var(--color-2);background-color: var(--color-2) !important;transition: all 0.2s ease; box-shadow: none;}
.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-0);transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35); box-shadow: var(--shadow-1);}
.checkbox-toggle .toggle:checked {border-color: var(--color-ka);background-color: var(--color-ka) !important;}
.checkbox-toggle .toggle:checked:after {transform: translate(16px);background: var(--color-kac);}

.checkbox-toggle-alerta {-webkit-tap-highlight-color: transparent; position: relative;}
.checkbox-toggle-alerta span {padding: 4px 0 4px 52px; display: block;}
.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: 16px;display: inline-block;margin: 0;border: 2px solid var(--color-2);background-color: var(--color-2) !important;transition: all 0.2s ease; box-shadow: none;}
.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-0);transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35); box-shadow: var(--shadow-1);}
.checkbox-toggle-alerta .toggle:checked {border-color: var(--color-ro);background-color: var(--color-ro) !important;}
.checkbox-toggle-alerta .toggle:checked:after {transform: translate(16px);background: var(--color-kac);}

.checkbox-img {-webkit-tap-highlight-color: transparent; position: relative;}
.checkbox-img span.img{display: block;border: 3px solid var(--color-2); border-radius: 6px 8px 0 0;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; background-color: var(--color-0) !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50% !important;}
.checkbox-img span.img:before{content:''; display: block; padding-top: calc(100% - 32px);}
.checkbox-img span.titulo{display: block;position: relative; margin: -3px 0 0 0; padding: 0 8px; height: 32px; line-height: 32px; border-radius: 0 0 8px 8px; cursor: pointer;font-size: var(--texto-2);font-weight: 400; text-align: center; background-color: var(--color-2); color: var(--color-4); -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.checkbox-img input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkbox-img input:checked + span.img {padding: 0px; border: 3px solid var(--color-ka);}
.checkbox-img input:checked + span.img + span.titulo {background-color: var(--color-ka); color: var(--color-kac);}



.checkbox-tag-bx{display: flex; flex-flow: row wrap; gap:8px;}
.checkbox-tag{flex-basis: auto;}
.checkbox-tag span{display: inline-block;position: relative;padding: 0 24px; border: 1px solid var(--color-2); height: 38px; line-height: 38px; border-radius: 40px; cursor: pointer;font-size: var(--texto-2);font-weight: 400; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: var(--color-0); text-align: left;}
.checkbox-tag input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkbox-tag input:checked + span {border: 1px solid var(--color-ka); background-color: var(--color-ka); color: var(--color-kac);}


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

.radio-cta {}

.radio-cta span{display: block;position: relative;padding: 16px; border: 1px solid var(--color-2); border-radius: 6px; margin-bottom: 8px;cursor: pointer;font-size: var(--texto-2);font-weight: 400; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: var(--color-0); text-align: left;}
.radio-cta span .seleccionado{position: absolute; background-color: var(--color-ka); top: -10px; right: -10px; width: 20px; height: 20px; border-radius: 24px; margin: 0; padding: 0; display: none; border: 0;}
.radio-cta span .seleccionado::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/listo.svg) 50% 50% no-repeat; background-size: 12px auto; width: 20px;filter: var(--filter-co); -webkit-filter: var(--filter-co);}

.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: 15px; border: 2px solid var(--color-ka);}
.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-2) solid;margin: 8px 0px !important; padding: 0;}

.radio-inline{background-color: var(--color-2); display: flex; border-radius: 6px; padding: 2px;}
.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: 38px; line-height: 38px;font-size: var(--texto-2);border-radius: 4px;font-weight: 400;margin: 0; color: var(--color-4);}
.radio-inline input[type="radio"]:checked + label {background-color: var(--color-0); color: var(--color-5); font-weight: 500;}

.radio-poll{background-color: transparent; display: flex; border-radius: 40px; padding: 6px; justify-content: right}
.radio-poll input[type="radio"] {opacity: 0;position: fixed;width: 0; margin: 0;}
.radio-poll label {flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 36px !important; text-align: center;display: inline-block;background-color: var(--color-2); width: 36px; height: 36px; line-height: 36px; font-size: var(--texto-1);border-radius: 40px;font-weight: 400;margin: 0 4px 0 0; color: var(--color-4);}
.radio-poll label:last-child{margin:0}
.radio-poll input[type="radio"]:checked + label {background-color: var(--color-ka); color: var(--color-kac);}

.radio-img-bx {display: grid; grid-gap: 24px; 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-2); border-radius: 6px 8px 0 0;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; background-color: var(--color-0) !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);font-weight: 400; text-align: center; background-color: var(--color-2); color: var(--color-4); -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-ka);}
.radio-img input:checked + span.img + span.titulo {background-color: var(--color-ka); color: var(--color-kac);}

.controles-incremento{position: relative; width: 100%; height: 48px;-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: 48px; background-color: var(--color-1);}
.controles-incremento div{text-align: center; line-height: 40px; font-size: 20px; cursor: pointer !important; border-radius: 40px; background-color: var(--color-0);}
.controles-incremento .incremento-menos{width: 40px; height: 40px; position: absolute; left: 4px; top: 4px;}
.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: 4px; left: 48px; right: 48px; font-size: var(--texto-2) !important; font-weight: 600; color: var(--color-5); box-shadow: none; border: 0; background-color: var(--color-1) !important;}
.controles-incremento .incremento-mas{width: 40px; height: 40px; position: absolute; right: 4px; top: 4px; }
.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-2);}
::-webkit-scrollbar{display:block}

::-webkit-scrollbar {width: 10px; height: 10px; background-color: transparent;}
::-webkit-scrollbar-track {margin: 0px; }
::-webkit-scrollbar-thumb {-webkit-border-radius: 4px;border-radius: 4px; background-color: var(--color-4);}
::-webkit-scrollbar-thumb:window-inactive {background-color: var(--color-4);}

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 {
  -webkit-text-fill-color: var(--color-4);
  -webkit-box-shadow: 0 0 0px 1000px var(--color-0) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.btn{ background-color: var(--color-ka); color: var(--color-kac); font-size: var(--texto-2); font-weight: 500; padding: 0 24px; height: 40px; line-height: 40px; display: inline-block; text-decoration: none; border-radius: 6px; text-align: center;}
.btn-off{background: var(--color-2); color: var(--color-4);}
.btn-alt{ background-color: var(--color-0); color: var(--color-5); font-size: var(--texto-2); font-weight: 500; padding: 0 16px; height: 30px; line-height: 30px; display: inline-block; text-decoration: none; border: 1px solid var(--color-3); box-shadow: var(--shadow-0); border-radius: 4px; text-align: center;}
.btn-flat{color: var(--color-ka); font-size: var(--texto-2); font-weight: 400; padding: 0 16px; height: 30px; line-height: 30px; display: inline-block; text-decoration: none; text-align: center;}
.btn-wide{display: block; box-sizing: border-box !important;}
.btn-disabled{pointer-events: none !important; background-color: var(--color-1) !important; color: var(--color-3) !important; box-shadow: none; border: 1px solid var(--color-2);}
.btn-pop{ background-color: var(--color-kb); display: inline-block; width: 50px; height: 50px; border-radius: 48px; position: relative;}
.btn-pop::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/opcion-w.svg) 50% 50% no-repeat; background-size: 24px auto; width: 50px;}

.cta{background-color: var(--color-ka); color: var(--color-kac); font-size: var(--texto-2); font-weight: 500; padding: 0 24px; height: 40px; line-height: 40px; display: inline-block; text-decoration: none; border-radius: 40px; text-align: center;}
.cta-alt{background-color: var(--color-0); color: var(--color-5); font-size: var(--texto-2); font-weight: 500; padding: 0 24px; height: 38px; line-height: 38px; display: inline-block; text-decoration: none; border-radius: 40px; text-align: center; border: 1px solid var(--color-2);}

.bx-btns{display: flex; flex-flow: row wrap; gap:8px; margin: 0 -16px -16px -16px; padding: 16px;}
.bx-btns-space{justify-content: space-between}
.bx-btns .btn, .bx-btns .btn-alt{flex-basis: auto;}
.bx-tabla-base .bx-btns{margin: 0; padding: 16px; border-top: 1px solid var(--color-2);}

.bx-inputs{background-color: var(--color-0); border: 0px solid var(--color-2); border-radius: 6px; padding: 4px 0 4px 16px; overflow: hidden;}
.bx-inputs > p {padding: 12px 0;}
.bx-inputs .bx-2{grid-gap: 16px;}
.bx-inputs .bx-2 .ffbx{padding: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-2);}
.bx-inputs .ffbx:last-child{border:0}
.bx-inputs .ffbx .ff-label{font-weight: 400; font-size: var(--texto-2); color: var(--color-5); padding: 0; height: 40px; line-height: 40px;}
.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-4); background-color: var(--color-1); display: none;}
.bx-inputs .ffbx .ff-requerido{background-color: var(--color-0) !important; border: 0 !important; border-bottom: 1px solid var(--color-ro) !important; color: var(--color-5) !important;}
.bx-inputs input, .bx-inputs select{border:0; border-radius: 0; background-color: transparent !important; box-shadow: none !important; padding: 0; height: 40px !important; text-indent: 0;}
.bx-inputs textarea{grid-column: 1 / 3; border:0; border-radius: 0; background-color: transparent !important; box-shadow: none !important; padding: 11px 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-4)}
.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-ba-off); -webkit-filter: var(--filter-ba-off);}
.bx-inputs-r input{text-align: right; padding-right: 16px;}
.bx-inputs-r input:read-only{text-align: right; padding-right: 40px;}

.bx-inputs .checkbox-toggle {display: block; }
.bx-inputs .checkbox-toggle span {padding: 12px 64px 12px 0; border-bottom: 1px solid var(--color-2);}
.bx-inputs .checkbox-toggle:last-child span {padding: 12px 64px 12px 0 !important; border: 0;}
.bx-inputs .checkbox-toggle input[type=checkbox]{top: 9px; left: auto; right: 16px !important; height: 24px !important;width: 40px !important; padding: 0;}

.bx-inputs .checkbox-toggle-alerta {display: block;}
.bx-inputs .checkbox-toggle-alerta span {padding: 12px 64px 12px 0; border-bottom: 1px solid var(--color-2);}
.bx-inputs .checkbox-toggle-alerta:last-child span {padding: 12px 64px 12px 0 !important; border: 0;}
.bx-inputs .checkbox-toggle-alerta input[type=checkbox]{top: 9px; left: auto; right: 16px !important; height: 24px !important;width: 40px !important;padding: 0;}

.bx-inputs .checkbox {padding: 12px 16px 12px 35px;margin-bottom: 0;border-bottom: 1px solid var(--color-2);}
.bx-inputs .checkbox:last-child{border: 0;}
.bx-inputs .checkbox .checkmark {top: 8px;}

.bx-inputs .radio {padding: 12px 16px 12px 35px;margin-bottom: 0;border-bottom: 1px solid var(--color-2);}
.bx-inputs .radio:last-child{border: 0;}
.bx-inputs .radio .radiomark {top: 8px;}

.bHeader{border-bottom: 1px solid var(--color-2); margin: -16px -16px 16px -16px; padding: 16px; position: relative;}
.bHeader .bLink{position: absolute; top: 16px; right: 16px; color: var(--color-ka); font-weight: 400; text-decoration: underline;}
.bHeader h4 ~ p{margin-top: 8px}
.bx-tabla-base .bHeader{border-bottom: 1px solid var(--color-2); margin: 0; padding: 16px; position: relative;}
.bx-inputs .bHeader{margin: -4px -16px 4px -16px;}

.bx-numpad{display: grid; padding: 0px; grid-gap: 4px; grid-template-columns: 1fr 1fr 1fr; border-radius: 6px; background-color: var(--color-1); overflow: hidden;}
.bx-numpad .buscador {grid-column: 1 / 4; position: relative; border: 0; border-radius: 0px; background-color: var(--color-0); box-shadow: none; overflow: hidden;}
.bx-numpad .buscador input{ background-color: transparent !important; padding: 0 !important; font-size: var(--texto-3); text-indent: 0; text-align: center; font-size: var(--texto-3); height: 64px; border: 0; box-shadow: none;}
.bx-numpad .item{height: 64px; line-height: 64px; text-align: center; font-size: var(--texto-4); color: var(--color-5); font-weight: 400; border-radius: 0px; background-color: var(--color-0);}
.bx-numpad .item.activo{background-color: var(--color-2) !important}
.bx-numpad .buscador-cta {grid-column: 1 / 4; background-color: var(--color-5); color: var(--color-0); height: 64px; line-height: 64px; text-align: center; font-size: var(--texto-3);}


/* Layout Admin */

.layout-admin {display: grid; grid-gap: 40px; padding: 40px; box-sizing: border-box; grid-template-columns: 1fr;}

.layout-admin .login {position: fixed; top: 0; right: 0; bottom: 0; left: 0;}
.layout-admin .login .bx-login{position: absolute; top: 50%;left: 50%; transform: translate(-50%,-50%); width: 320px;}
.layout-admin .login .bx-login .logo {position: relative; bottom: 40px; margin: 0 auto; width: 32px; height: 56px;}
.layout-admin .login .bx-login .logo::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/logo.svg?1) 50% 50% no-repeat; background-size: 32px 56px; width: 32px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.layout-admin .login .bx-login .bx-acceso{}

.layout-admin .header-overlay{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; background-color: var(--overlay); animation-name: fade-in;animation-duration: 300ms; opacity: 1; overflow: auto !important;}

.layout-admin .header{position: relative; z-index: 2; display: grid; grid-gap: 0 32px; margin: -40px -40px 0 -40px; padding: 16px; box-sizing: border-box; grid-template-columns: auto auto 1fr auto; background-color: var(--color-0); overflow: hidden;}
.layout-admin .header .header-nav-call{padding: 0; grid-column: 1 / 2; grid-row: 1 / 2;}
.layout-admin .header .header-titulo{padding: 0; grid-column: 2 / 3; grid-row: 1 / 2;}
.layout-admin .header .header-buscador{padding: 0; grid-column: 3 / 4; grid-row: 1 / 2;}
.layout-admin .header .header-nav-modulo{padding: 0; grid-column: 4 / 5; grid-row: 1 / 2;}
.layout-admin .header .header-tools{grid-column: 1 / 5; grid-row: 2 / 3;}

.layout-admin .header .nav-call{position: relative; width: 64px; height: 64px; border-radius: 0px; margin: -16px 0px -16px -16px; background-color: var(--color-0); border-right: 1px solid var(--color-2); display: block;}
.layout-admin .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: 40px auto; width: 64px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

.layout-admin .header h1{font-size: var(--texto-3); color: var(--color-5); margin: 0; padding: 0; height: 32px; line-height: 32px;}

.layout-admin .header .buscar {position: relative; }
.layout-admin .header .buscar input{border-radius: 40px; height: 32px; text-indent: 40px; font-size: var(--texto-2); border: 1px solid var(--color-2); background-color: var(--color-1) !important; box-shadow: none;}
.layout-admin .header .buscar input:focus{border: 1px solid var(--color-ka);}
.layout-admin .header .buscar input::-webkit-input-placeholder {color: var(--color-3);}
.layout-admin .header .buscar .ico-buscar::before{content:""; position: absolute; top: 0; left: 4px; bottom: 0; z-index: 1; background: url(../gui/ico/buscar.svg) 50% 50% no-repeat !important; background-size: 20px auto !important; width: 32px; height: 32px; filter: var(--filter-ba-off); -webkit-filter: var(--filter-ba-off); pointer-events: none;}

.layout-admin .header .nav-modulo{position: relative;}
.layout-admin .header .nav-modulo ul{display: flex; gap: 8px; margin: 0; padding: 0;}
.layout-admin .header .nav-modulo ul li{list-style: none;margin: 0; padding: 0;}
.layout-admin .header .nav-modulo ul li a{display: block; background-color: var(--color-2); color: var(--color-5); font-size: var(--texto-2); font-weight: 500; letter-spacing: normal; padding: 0 16px; height: 32px; line-height: 32px; border-radius: 6px;}
.layout-admin .header .nav-modulo ul li a.key{background-color: var(--color-ka); color: var(--color-kac);}

.layout-admin .header .modulo-tools{display: grid; grid-gap: 0; margin: 16px -16px -16px -16px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr auto; overflow: hidden; border-top: 1px solid var(--color-2);}
.layout-admin .header .modulo-tools ul.nav-tabs {color: var(--color-4); padding: 0; margin:0; display: flex; flex-flow: row wrap; gap: 0; list-style: none; }
.layout-admin .header .modulo-tools ul.nav-tabs li{}
.layout-admin .header .modulo-tools ul.nav-tabs li a{flex-basis: auto; padding: 0 16px; height: 48px; line-height: 48px; display: block; font-weight: 400; color: var(--color-4);}
.layout-admin .header .modulo-tools ul.nav-tabs li a.activo{border-bottom: 4px solid var(--color-5); font-weight: 500; height: 44px; color: var(--color-5);}

.layout-admin .menu-overlay{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; background-color: --overlay; animation-name: fade-in;animation-duration: 300ms; opacity: 1; overflow: auto !important;}
.layout-admin .menu {position: absolute; top: 80px; left: 40px; z-index: 4; width: 280px; padding: 0; border-radius: 6px; background-color: var(--color-0); display: none; box-shadow: var(--shadow-float-1);}
.layout-admin .menu .nav {padding: 16px}
.layout-admin .menu .nav ul.nav-items{margin: 0; padding: 0;}
.layout-admin .menu .nav ul.nav-items li{display: block; margin: 0; padding: 0;}
.layout-admin .menu .nav ul.nav-items li ul {display: none; margin: 0 0 0 24px; padding: 0;}
.layout-admin .menu .nav ul.nav-items li a{padding: 8px; margin: 0; display: block; font-size: var(--texto-2); font-weight: 400; color: var(--color-5); position: relative;}
.layout-admin .menu .nav ul.nav-items li a.count-holder{padding-right: 32px;}
.layout-admin .menu .nav ul.nav-items li a.activo{background-color: var(--color-2); border-radius: 6px; color: var(--color-5)}
.layout-admin .menu .nav ul.nav-items li a .count{background-color: var(--color-ka); color: var(--color-kac); border-radius: 32px; position: absolute; top: 50%; right: 8px; transform: translate(0,-50%); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;}

.layout-admin .menu .nav ul.nav-items li a.activo::before{filter: var(--filter-ba) !important; -webkit-filter: var(--filter-ba) !important;}

.layout-admin .menu .nav-footer {border-top: 1px solid var(--color-3); padding: 16px;}
.layout-admin .menu .nav-footer ul.nav-items-footer{margin: 0; padding: 0;}
.layout-admin .menu .nav-footer ul.nav-items-footer li{display: block; margin: 0;}
.layout-admin .menu .nav-footer ul.nav-items-footer li a{padding: 10px 16px 10px 40px; display: block; font-size: var(--texto-2); font-weight: 400; color: var(--color-4); position: relative;}
.layout-admin .menu .nav-footer ul.nav-items-footer li a.logout::before{content:""; position: absolute; top: 8px; left: 8px; bottom: 0; background: url(../gui/ico/logout.svg) 50% 50% no-repeat; background-size: 20px auto; width: 24px; height: 24px; filter: var(--filter-ba-off); -webkit-filter: var(--filter-ba-off);}
.layout-admin .menu .nav-footer ul.nav-items-footer li a.usuario::before{content:""; position: absolute; top: 8px; left: 8px; bottom: 0; background: url(../gui/ico/usuario.svg) 50% 50% no-repeat; background-size: 20px auto; width: 24px; height: 24px; filter: var(--filter-ba-off); -webkit-filter: var(--filter-ba-off);}
.layout-admin .menu .nav-footer ul.nav-items-footer li a.mode::before{content:""; position: absolute; top: 8px; left: 8px; bottom: 0; background: url(../gui/ico/mode.svg) 50% 50% no-repeat; background-size: 20px auto; width: 24px; height: 24px; filter: var(--filter-ba-off); -webkit-filter: var(--filter-ba-off);}

.layout-admin .contenido {position: relative; z-index: 1;}
.layout-admin .contenido .breadcrumb{margin: -20px 0 16px 0;}
.layout-admin .contenido .breadcrumb a {height: 32px; line-height: 32px; padding: 0 28px 0 0; position: relative;}
.layout-admin .contenido .breadcrumb a::before{content:""; position: absolute; top: -4px; right: 0; bottom: 0; background: url(../gui/ico/arrow-right.svg) 50% 50% no-repeat; background-size: 20px auto; width: 24px; height: 24px; filter: var(--filter-ba-off); -webkit-filter: var(--filter-ba-off);}
.layout-admin .contenido .breadcrumb a:last-child {padding: 0;}
.layout-admin .contenido .breadcrumb a:last-child::before{background-image: none;}

.layout-admin .contenido .pop-sub-modulo{position: absolute; z-index: 1; top: 2px; right: -56px; background-color: var(--color-2); width: 40px; height: 24px; border-radius: 32px; display: inline-block;}
.layout-admin .contenido .pop-sub-modulo::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/opcion.svg) 50% 50% no-repeat; background-size: 32px auto; width: 40px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

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

.layout-admin .grid-1-2{position: absolute; top: 56px; right: 0; bottom: 0; left: 0; overflow: hidden;}
.layout-admin .grid-1-2 .col1{position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 32%; overflow: scroll; padding: 40px; box-sizing: border-box;}
.layout-admin .grid-1-2 .col2{position: absolute; top: 0; right: 0; bottom: 0; left: 32%; z-index: 1; overflow: auto; padding: 40px 40px 40px 0; box-sizing: border-box;}


/*.layout-admin .grid-pos{position: fixed; top: 120px; right: 32px; bottom: 32px; left: 32px; display: grid; grid-gap: 24px; padding: 0; grid-template-columns: 1fr 1fr 1fr;}

.layout-admin .grid-pos .catalogo {grid-column: 1 / 3; overflow: scroll; position: relative; padding: 8px;}
.layout-admin .grid-pos .catalogo .items {display: grid; grid-gap: 16px; padding: 0; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: 1fr; }
.layout-admin .grid-pos .catalogo .items .item{position:relative; background-color: var(--color-0); box-shadow: var(--shadow-1); border-radius: 6px; padding: 16px; box-sizing: border-box; aspect-ratio: 1}
.layout-admin .grid-pos .catalogo .items .item-fake{position:relative; background-color: var(--color-3); opacity: 0.2; border-radius: 6px; padding: 16px; box-sizing: border-box; aspect-ratio: 1}

.layout-admin .grid-pos .catalogo .items .item .img{background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; background-color: var(--color-1) !important; border-radius: 7px; position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; z-index: 1;}
.layout-admin .grid-pos .catalogo .items .item .data-float{position: absolute; bottom: 0; right: 0; left: 0; z-index: 2; background-color: var(--color-2); padding: 8px; border-radius: 0 0 8px 8px;}
.layout-admin .grid-pos .catalogo .items .item .data-float .titulo{margin: 0; padding: 0; color: var(--color-5);}
.layout-admin .grid-pos .catalogo .items .item .data-float .precio{margin: 0; padding: 0; font-size: var(--texto-1);}

.layout-admin .grid-pos .catalogo .items .item .data{}
.layout-admin .grid-pos .catalogo .items .item .data h3{margin: 0; padding: 0; font-size: calc(0.8em + 0.8vw); overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-word; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;}
.layout-admin .grid-pos .catalogo .items .item .data .titulo{margin: 0; padding: 0; color: var(--color-5);}
.layout-admin .grid-pos .catalogo .items .item .data .precio{margin: 0; padding: 0; font-size: var(--texto-1);}
.layout-admin .grid-pos .catalogo .items .item .items-count{position: absolute; bottom: 16px; left: 16px;}

.layout-admin .grid-pos .catalogo .items .item-opciones{position:relative; background-color: var(--color-0); box-shadow: var(--shadow-1); border-radius: 6px; padding: 16px; box-sizing: border-box; aspect-ratio: 1}
.layout-admin .grid-pos .catalogo .items .item-opciones .data{position: absolute; bottom: 16px; left: 16px; right: 16px; text-align: center; color: var(--color-5);}
.layout-admin .grid-pos .catalogo .items .opcion-ico::before{content:""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: 50% 50% !important; background-repeat: no-repeat !important; background-size: 56px !important; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.layout-admin .grid-pos .catalogo .items .opcion-start::before{background: url(../gui/ico/grid-menu.svg)}
.layout-admin .grid-pos .catalogo .items .opcion-back::before{background: url(../gui/ico/back.svg)}
.layout-admin .grid-pos .catalogo .items .opcion-cliente::before{background: url(../gui/ico/usuario.svg)}
.layout-admin .grid-pos .catalogo .items .opcion-custom::before{background: url(../gui/ico/custom-add.svg)}
.layout-admin .grid-pos .catalogo .items .opcion-notas::before{background: url(../gui/ico/notas.svg)}
.layout-admin .grid-pos .catalogo .items .opcion-cancelar::before{background: url(../gui/ico/del.svg)}
.layout-admin .grid-pos .catalogo .items .opcion-envio::before{background: url(../gui/ico/direccion.svg)}
.layout-admin .grid-pos .catalogo .items .opcion-descuento::before{background: url(../gui/ico/descuento.svg)}
.layout-admin .grid-pos .catalogo .items .opcion-imprimir::before{background: url(../gui/ico/print-ticket.svg)}

.layout-admin .grid-pos .catalogo .items .item-opciones .check {box-sizing: border-box;position: absolute; top: 8px; right: 8px;display: block;width: 24px;height: 24px;border-radius: 100px;background-color: var(--color-ka);}
.layout-admin .grid-pos .catalogo .items .item-opciones .check::after {content: "";display: block;box-sizing: border-box;position: absolute;left: 6px;top: 2px;width: 6px;height: 10px;border-color: var(--color-kac);border-width: 0 2px 2px 0;border-style: solid;transform-origin: bottom left;transform: rotate(45deg)}*/

/*.layout-admin .grid-pos .catalogo .grid-catalogo .item:before{content: ''; display: block; padding-top: 50%;}*/

/*.layout-admin .grid-pos .cuenta {grid-column: 3 / 4; display: grid; grid-gap: 16px; margin: 8px; padding: 0; grid-template-columns: 1fr; grid-template-rows: 1fr auto; position: relative; background-color: var(--color-0); box-shadow: var(--shadow-1); border-radius: 6px; overflow: auto;}
.layout-admin .grid-pos .cuenta .items{overflow: auto;}
.layout-admin .grid-pos .cuenta .items .item{box-sizing: border-box; border-bottom: 1px solid var(--color-2);display: grid; grid-gap: 8px; padding: 16px; box-sizing: border-box; grid-template-columns: 48px 1fr 80px; color: var(--color-5);}
.layout-admin .grid-pos .cuenta .call-cuenta{padding: 0 16px 16px 16px}
.layout-admin .grid-pos .call-cuenta-pre{display:none}

.pos-cuenta-modal {display: grid; grid-gap: 16px; padding: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow: scroll; position: relative;}
.pos-cuenta-modal .items{background-color: var(--color-2); overflow: scroll; border-radius: 6px; box-shadow: var(--shadow-0); position: relative;}
.pos-cuenta-modal .items .item{box-sizing: border-box; border-bottom: 0.5px solid var(--color-3);display: grid; grid-gap: 8px; padding: 16px; grid-template-columns: 48px 1fr 80px; color: var(--color-5);}*/


/* Layout POS */

.layout-pos {position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; display: grid; grid-gap: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; background-color: var(--color-0);}

.layout-pos .login {position: fixed; top: 0; right: 0; bottom: 0; left: 0;}
.layout-pos .login .bx-login{position: absolute; top: 50%;left: 50%; transform: translate(-50%,-50%); width: 320px;}
.layout-pos .login .bx-login .logo {position: relative; bottom: 40px; margin: 0 auto; width: 32px; height: 56px;}
.layout-pos .login .bx-login .logo::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/logo.svg?1) 50% 50% no-repeat; background-size: 32px 56px; width: 32px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.layout-pos .login .bx-login .bx-acceso{}

.layout-pos .header-overlay{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; background-color: var(--overlay); animation-name: fade-in;animation-duration: 300ms; opacity: 1; overflow: auto !important;}
.layout-pos .header{position: relative; z-index: 2; display: grid; grid-gap: 0 24px; grid-template-columns: auto 1fr;  padding: 20px 40px; border-bottom: 1px solid var(--color-2); background-color: var(--color-0);}
.layout-pos .header .header-nav-call{padding: 0; grid-column: 1 / 2; grid-row: 1 / 2;}
.layout-pos .header .header-titulo{padding: 0; grid-column: 2 / 3; grid-row: 1 / 2;}

.layout-pos .header .nav-call{position: relative; width: 40px; height: 40px; border-radius: 40px; background-color: var(--color-0); border: 1px solid var(--color-2); display: block;}
.layout-pos .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: 40px auto; width: 40px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

.layout-pos .header h1{font-size: var(--texto-3); color: var(--color-5); margin: 0; padding: 0; height: 40px; line-height: 40px;}

.layout-pos .menu {position: absolute; top: 80px; left: 24px; z-index: 4; width: 280px; padding: 0; border-radius: 6px; background-color: var(--color-0); display: none; box-shadow: var(--shadow-float-1);}
.layout-pos .menu .nav {padding: 16px}
.layout-pos .menu .nav ul.nav-items{margin: 0; padding: 0;}
.layout-pos .menu .nav ul.nav-items li{display: block; margin: 0; padding: 0;}
.layout-pos .menu .nav ul.nav-items li ul {display: none; margin: 0 0 0 24px; padding: 0;}
.layout-pos .menu .nav ul.nav-items li a{padding: 8px; margin: 0; display: block; font-size: var(--texto-2); font-weight: 400; color: var(--color-5); position: relative;}

.layout-pos .contenido {position: relative; z-index: 1; overflow-x: hidden; overflow-y: auto;}
.layout-pos .contenido .modulo-contenido{padding:40px; position: relative;}
.layout-pos .contenido .modulo-contenido-narrow{max-width: 720px; margin: 0 auto;}

.layout-pos .grid-pos{position: fixed; top: 80px; right: 0; bottom: 80px; left: 0; display: grid; padding: 0; grid-gap: 0; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr;}
.layout-pos .grid-pos .catalogo {overflow: scroll; position: relative; padding: 40px;}
.layout-pos .grid-pos .catalogo .items {display: grid; grid-gap: 16px; padding: 0; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: 1fr; }
.layout-pos .grid-pos .catalogo .items .item{position:relative; background-color: var(--color-1); border-radius: 6px; padding: 16px; box-sizing: border-box; aspect-ratio: 1}

.layout-pos .grid-pos .catalogo .items .item .img{background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; background-color: var(--color-1) !important; border-radius: 7px; position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; z-index: 1;}
.layout-pos .grid-pos .catalogo .items .item .data-float{position: absolute; bottom: 0; right: 0; left: 0; z-index: 2; background-color: var(--color-2); padding: 8px; border-radius: 0 0 8px 8px;}
.layout-pos .grid-pos .catalogo .items .item .data-float .titulo{margin: 0; padding: 0; color: var(--color-5);}
.layout-pos .grid-pos .catalogo .items .item .data-float .precio{margin: 0; padding: 0; font-size: var(--texto-1);}

.layout-pos .grid-pos .catalogo .items .item .data{}
.layout-pos .grid-pos .catalogo .items .item .data h3{margin: 0; padding: 0; font-size: calc(0.8em + 0.8vw); overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-word; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;}
.layout-pos .grid-pos .catalogo .items .item .data .titulo{margin: 0; padding: 0; color: var(--color-5);}
.layout-pos .grid-pos .catalogo .items .item .data .precio{position: absolute; bottom: 16px; left: 16px;}
.layout-pos .grid-pos .catalogo .items .item .data .items-count{position: absolute; bottom: 16px; left: 16px;}

.layout-pos .grid-pos .catalogo .items .item-opciones{position:relative; background-color: var(--color-1); border-radius: 6px; padding: 16px; box-sizing: border-box; aspect-ratio: 1}
.layout-pos .grid-pos .catalogo .items .item-opciones .data{position: absolute; bottom: 16px; left: 16px; right: 16px; text-align: center; color: var(--color-5);}
.layout-pos .grid-pos .catalogo .items .opcion-ico::before{content:""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: 50% 50% !important; background-repeat: no-repeat !important; background-size: 56px !important; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.layout-pos .grid-pos .catalogo .items .opcion-start::before{background: url(../gui/ico/grid-menu.svg)}
.layout-pos .grid-pos .catalogo .items .opcion-back::before{background: url(../gui/ico/back.svg)}
.layout-pos .grid-pos .catalogo .items .opcion-cliente::before{background: url(../gui/ico/usuario.svg)}
.layout-pos .grid-pos .catalogo .items .opcion-custom::before{background: url(../gui/ico/custom-add.svg)}
.layout-pos .grid-pos .catalogo .items .opcion-notas::before{background: url(../gui/ico/notas.svg)}
.layout-pos .grid-pos .catalogo .items .opcion-cancelar::before{background: url(../gui/ico/del.svg)}
.layout-pos .grid-pos .catalogo .items .opcion-envio::before{background: url(../gui/ico/direccion.svg)}
.layout-pos .grid-pos .catalogo .items .opcion-descuento::before{background: url(../gui/ico/descuento.svg)}
.layout-pos .grid-pos .catalogo .items .opcion-imprimir::before{background: url(../gui/ico/print-ticket.svg)}

.layout-pos .grid-pos .catalogo .items .item-opciones .check {box-sizing: border-box;position: absolute; top: 8px; right: 8px;display: block;width: 24px;height: 24px;border-radius: 100px;background-color: var(--color-ka);}
.layout-pos .grid-pos .catalogo .items .item-opciones .check::after {content: "";display: block;box-sizing: border-box;position: absolute;left: 6px;top: 2px;width: 6px;height: 10px;border-color: var(--color-kac);border-width: 0 2px 2px 0;border-style: solid;transform-origin: bottom left;transform: rotate(45deg)}

.layout-pos .grid-pos .cuenta {padding: 40px; background-color: var(--color-0); overflow: auto; border-left: 1px solid var(--color-2);}
.layout-pos .grid-pos .cuenta .items{overflow: auto; position: relative;} 
.layout-pos .grid-pos .cuenta .items .item{box-sizing: border-box; border-bottom: 1px solid var(--color-2);display: grid; grid-gap: 0; padding: 16px 0; box-sizing: border-box; grid-template-columns: 40px 1fr 80px; color: var(--color-5);}
.layout-pos .grid-pos .cuenta .items .item:first-child{padding-top: 0;}
.layout-pos .grid-pos .cuenta .items .item:last-child{border:0; padding-bottom: 0;}

.layout-pos .footer{position: relative; z-index: 2; display: grid; grid-gap: 0; box-sizing: border-box; grid-template-columns: 25% 50% 25%; grid-template-rows: 40px; padding: 20px 40px; background-color: var(--color-0); border-top: 1px solid var(--color-2);}
.layout-pos .t-footer-1{text-align: left;}
.layout-pos .t-footer-2{display: flex; gap:16px; justify-content: center}
.layout-pos .t-footer-3{text-align: right;}

/* Layout Caseta */

.layout-caseta {position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; display: grid; grid-gap: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; background-color: var(--color-1);}

.layout-caseta .login {position: fixed; top: 0; right: 0; bottom: 0; left: 0;}
.layout-caseta .login .bx-login{position: absolute; top: 50%;left: 50%; transform: translate(-50%,-50%); width: 320px;}
.layout-caseta .login .bx-login .logo {position: relative; bottom: 40px; margin: 0 auto; width: 32px; height: 56px;}
.layout-caseta .login .bx-login .logo::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/logo.svg?1) 50% 50% no-repeat; background-size: 32px 56px; width: 32px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
.layout-caseta .login .bx-login .bx-acceso{}

.layout-caseta .header-overlay{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; background-color: var(--overlay); animation-name: fade-in;animation-duration: 300ms; opacity: 1; overflow: auto !important;}
.layout-caseta .header{position: relative; z-index: 2; display: grid; grid-gap: 0 24px; grid-template-columns: auto 1fr;  padding: 20px 40px; background-color: var(--color-0);}
.layout-caseta .header .header-nav-call{padding: 0; grid-column: 1 / 2; grid-row: 1 / 2;}
.layout-caseta .header .header-titulo{padding: 0; grid-column: 2 / 3; grid-row: 1 / 2;}

.layout-caseta .header .nav-call{position: relative; width: 40px; height: 40px; border-radius: 40px; background-color: var(--color-0); border: 1px solid var(--color-2); display: block;}
.layout-caseta .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: 40px auto; width: 40px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

.layout-caseta .header h1{font-size: var(--texto-3); color: var(--color-5); margin: 0; padding: 0; height: 40px; line-height: 40px;}

.layout-caseta .menu {position: absolute; top: 80px; left: 24px; z-index: 4; width: 280px; padding: 0; border-radius: 6px; background-color: var(--color-0); display: none; box-shadow: var(--shadow-float-1);}
.layout-caseta .menu .nav {padding: 16px}
.layout-caseta .menu .nav ul.nav-items{margin: 0; padding: 0;}
.layout-caseta .menu .nav ul.nav-items li{display: block; margin: 0; padding: 0;}
.layout-caseta .menu .nav ul.nav-items li ul {display: none; margin: 0 0 0 24px; padding: 0;}
.layout-caseta .menu .nav ul.nav-items li a{padding: 8px; margin: 0; display: block; font-size: var(--texto-2); font-weight: 400; color: var(--color-5); position: relative;}
.layout-caseta .menu .nav ul.nav-items li a.count-holder{padding-right: 32px;}
.layout-caseta .menu .nav ul.nav-items li a.activo{background-color: var(--color-2); border-radius: 6px; color: var(--color-5)}
.layout-caseta .menu .nav ul.nav-items li a .count{background-color: var(--color-ka); color: var(--color-kac); border-radius: 32px; position: absolute; top: 50%; right: 8px; transform: translate(0,-50%); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;}

.layout-caseta .menu .nav ul.nav-items li a.activo::before{filter: var(--filter-ba) !important; -webkit-filter: var(--filter-ba) !important;}

.layout-caseta .menu .nav-footer {border-top: 1px solid var(--color-3); padding: 16px;}
.layout-caseta .menu .nav-footer ul.nav-items-footer{margin: 0; padding: 0;}
.layout-caseta .menu .nav-footer ul.nav-items-footer li{display: block; margin: 0;}
.layout-caseta .menu .nav-footer ul.nav-items-footer li a{padding: 10px 16px 10px 40px; display: block; font-size: var(--texto-2); font-weight: 400; color: var(--color-4); position: relative;}
.layout-caseta .menu .nav-footer ul.nav-items-footer li a.logout::before{content:""; position: absolute; top: 8px; left: 8px; bottom: 0; background: url(../gui/ico/logout.svg) 50% 50% no-repeat; background-size: 20px auto; width: 24px; height: 24px; filter: var(--filter-ba-off); -webkit-filter: var(--filter-ba-off);}
.layout-caseta .menu .nav-footer ul.nav-items-footer li a.usuario::before{content:""; position: absolute; top: 8px; left: 8px; bottom: 0; background: url(../gui/ico/usuario.svg) 50% 50% no-repeat; background-size: 20px auto; width: 24px; height: 24px; filter: var(--filter-ba-off); -webkit-filter: var(--filter-ba-off);}
.layout-caseta .menu .nav-footer ul.nav-items-footer li a.mode::before{content:""; position: absolute; top: 8px; left: 8px; bottom: 0; background: url(../gui/ico/mode.svg) 50% 50% no-repeat; background-size: 20px auto; width: 24px; height: 24px; filter: var(--filter-ba-off); -webkit-filter: var(--filter-ba-off);}

.layout-caseta .contenido {position: relative; z-index: 1; overflow-x: hidden; overflow-y: auto;}
.layout-caseta .contenido .modulo-contenido{padding:40px; position: relative;}
.layout-caseta .contenido .modulo-contenido-narrow{max-width: 720px; margin: 0 auto;}

.layout-caseta .footer{position: relative; z-index: 2; display: grid; grid-gap: 0; box-sizing: border-box; grid-template-columns: 25% 50% 25%; grid-template-rows: 40px; padding: 20px 40px; background-color: var(--color-0);}
.layout-caseta .t-footer-1{text-align: left;}
.layout-caseta .t-footer-2{display: flex; gap:16px; justify-content: center}
.layout-caseta .t-footer-3{text-align: right;}


/* Get */

.layout-get {position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; display: grid; grid-gap: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto;}
.layout-get .contenido {position: relative; z-index: 1; overflow-x: none; overflow-y: scroll;}
.layout-get .contenido .modulo-contenido{padding:48px;}
.layout-get .contenido .modulo-contenido-narrow{max-width: 720px; margin: 0 auto;}
.layout-get .contenido h1 { color: var(--color-ka); font-weight: 600; }

/* Dropzone */

.bx-dropzone{background-color:var(--color-0); border-radius: 4px; padding: 16px; display: block;}
.bx-dropzone .area-drop{position: relative; border: 2px dashed var(--color-3); border-radius: 4px; margin: 0; padding: 16px; display: grid; align-items: center; justify-content: center}
.bx-dropzone .area-drop span{position: relative; padding: 0; pointer-events: none;}
/*.bx-dropzone .area-drop span::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/upload.svg) 50% 50% no-repeat; background-size: 20px auto; width: 20px;filter: var(--filter-co); -webkit-filter: var(--filter-co);}*/

.bx-dropzone .area-repo{display: grid; grid-gap: 0; grid-template-columns: 1fr;}
.bx-dropzone .area-repo .dz-preview{position: relative; margin: 0px !important; padding: 12px 0 !important; border-bottom: 1px solid var(--color-3);}
.bx-dropzone .area-repo .dz-preview:last-child{border: 0; padding-bottom: 0px !important;}

.bx-dropzone .area-repo .dz-preview .dz-details {word-break: break-all; padding-right: 80px;}
.bx-dropzone .area-repo .dz-preview .dz-details > div{display: inline-block}
.bx-dropzone .area-repo .dz-preview .dz-details .dz-size{}
.bx-dropzone .area-repo .dz-preview .dz-details .dz-filename{}
.bx-dropzone .area-repo .dz-preview .dz-error-message{}
.bx-dropzone .area-repo .dz-preview .dz-progress{position: absolute; top: 0; right: 0; text-indent: 0px; height: 40px;}

.bx-dropzone .area-repo .dz-preview .dz-abrir{position: absolute; top: 0; right: 64px; text-indent: 0px; height: 40px; line-height: 40px; border-radius: 32px; background-color: var(--kal);}
/*.bx-dropzone .area-repo .dz-preview .dz-abrir::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/open.svg?1) 50% 50% no-repeat; background-size: 16px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}*/

.bx-dropzone .area-repo .dz-preview .dz-upload.subiendo{position: absolute; top: 0; right: 0; text-indent: 0px; height: 40px; line-height: 40px; border-radius: 32px; background-color: var(--aml); display: none;}
/*.bx-dropzone .area-repo .dz-preview .dz-upload.subiendo::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/upload.svg) 50% 50% no-repeat; background-size: 20px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}*/

.bx-dropzone .area-repo .dz-preview .dz-upload.listo{position: absolute; top: 0; right: 0; text-indent: 0px; height: 40px; line-height: 40px; border-radius: 32px; background-color: var(--vel);}
/*.bx-dropzone .area-repo .dz-preview .dz-upload.listo::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/listo.svg?1) 50% 50% no-repeat; background-size: 12px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}*/

.bx-dropzone .area-repo .dz-preview .dz-remove{position: absolute; top: 0; right: 0; text-indent: 0px; height: 40px; line-height: 40px; border-radius: 32px; background-color: var(--rol);}
/*.bx-dropzone .area-repo .dz-preview .dz-remove::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/basura.svg) 50% 50% no-repeat; background-size: 16px auto; filter: var(--filter-ro); -webkit-filter: var(--filter-ro);}*/

/* Dropzone Thumbs */

.bx-dropzone-thumbs{display: block;}
.bx-dropzone-thumbs .area-drop{position: relative; border: 2px dashed var(--c3); border-radius: 4px; margin: 0; padding: 0px;}
.bx-dropzone-thumbs .area-drop:before{content:''; display: block; padding-top: 100%;}
.bx-dropzone-thumbs .area-drop span{position: absolute; top: 50%; right: 8px; left: 8px; transform: translate(0,-50%); padding: 40px 0 0 0; pointer-events: none; text-align: center;}
.bx-dropzone-thumbs .area-drop span::before{content:""; position: absolute; top: 0; left: 50%; transform: translate(-50%,0);; background: url(../gui/ico/upload.svg) 50% 50% no-repeat; background-size: 24px auto; width: 32px; height: 32px; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

.bx-dropzone-thumbs .area-repo{display: grid; grid-gap: 16px; grid-template-columns: 1fr 1fr 1fr 1fr;}
.bx-dropzone-thumbs .area-repo .dz-preview{position: relative; margin: 0; padding: 0; border-radius: 4px; overflow: hidden;}
.bx-dropzone-thumbs .area-repo .dz-preview:before{content:''; display: block; padding-top: 100%;}

.bx-dropzone-thumbs .area-repo .dz-preview .dz-image{margin: 0; padding: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50% !important;}
.bx-dropzone-thumbs .area-repo .dz-preview .dz-image img{width: 100%}

.bx-dropzone-thumbs .area-repo .dz-preview .dz-details {position: absolute; bottom: 8px; left: 8px; overflow-wrap: break-word !important;}
.bx-dropzone-thumbs .area-repo .dz-preview .dz-details .dz-size{font-size: var(--t1); background-color: var(--c1); height: 16px; line-height: 16px; padding: 0 4px; border-radius: 8px;}
.bx-dropzone-thumbs .area-repo .dz-preview .dz-details .dz-size strong{font-weight: 400;}
.bx-dropzone-thumbs .area-repo .dz-preview .dz-details .dz-filename{display: none !important;}
.bx-dropzone-thumbs .area-repo .dz-preview .dz-error-message{position: absolute; top: 50%; left: 8px; right: 8px; transform: translate(0,-50%);}
.bx-dropzone-thumbs .area-repo .dz-preview .dz-error-message span{display:block; background-color: var(--color-ro); color: var(--color-roc); padding: 4px; border-radius: 4px; font-size: var(--t1); line-height: var(--t1);}
.bx-dropzone-thumbs .area-repo .dz-preview .dz-progress{position: absolute; top: 8px; right: 8px; text-indent: -6000px; width: 24px; height: 24px;}

.bx-dropzone-thumbs .area-repo .dz-preview .dz-abrir{position: absolute; bottom: 8px; right: 8px; text-indent: -6000px; width: 32px; height: 32px; border-radius: 32px; background-color: var(--c1);}
.bx-dropzone-thumbs .area-repo .dz-preview .dz-abrir::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/open.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}

.bx-dropzone-thumbs .area-repo .dz-preview .dz-upload.subiendo{position: absolute; top: 0; right: 0; text-indent: -6000px; width: 24px; height: 24px; background-color: var(--c1); border-radius: 24px;}
.bx-dropzone-thumbs .area-repo .dz-preview .dz-upload.subiendo::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/upload.svg?1) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}

.bx-dropzone-thumbs .area-repo .dz-preview .dz-upload.listo{position: absolute; top: 0; right: 0; text-indent: -6000px; width: 24px; height: 24px; background-color: var(--c1); border-radius: 24px;}
.bx-dropzone-thumbs .area-repo .dz-preview .dz-upload.listo::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/listo.svg?1) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}

.bx-dropzone-thumbs .area-repo .dz-preview .dz-remove{position: absolute; top: 8px; right: 8px; z-index: 10; text-indent: 0px; width: 32px; height: 32px; border-radius: 32px; background-color: var(--c1);}
.bx-dropzone-thumbs .area-repo .dz-preview .dz-remove::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/basura.svg?1) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}


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

@media screen and (max-width: 769px){
	
	@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-admin .header{grid-gap:0px; grid-template-columns: auto 1fr auto; padding: 0 16px;}
	.layout-admin .header .header-nav-call{grid-column: 1 / 2; grid-row: 1 / 2;}
	.layout-admin .header .header-titulo{grid-column: 2 / 3; grid-row: 1 / 2; text-align: center;}
	.layout-admin .header .header-nav-modulo{grid-column: 3 / 4; grid-row: 1 / 2;}
	.layout-admin .header .header-buscador{padding: 0 0 16px 0; grid-column: 1 / 4; grid-row: 2 / 3;}
	.layout-admin .header .header-tools{grid-column: 1 / 4; grid-row: 3 / 4;}
	
	.layout-admin .header .buscar {}
	
	.layout-admin .header .nav-modulo{position: relative; width: 32px; height: 32px; border-radius: 4px; background-color: var(--color-0); border: 1px solid var(--color-2); display: block;}
	.layout-admin .header .nav-modulo::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/opcion.svg) 50% 50% no-repeat; background-size: 32px auto; width: 32px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
	.layout-admin .header .nav-modulo ul{position: absolute; top: 100%; right: 0; background-color: var(--color-0); min-width: 180px; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 8px 16px; display: none; box-shadow: var(--shadow-float-1);}
	.layout-admin .header .nav-modulo ul li{list-style: none;margin: 0; padding: 0;}
	.layout-admin .header .nav-modulo ul li a{display: block; background-color: var(--color-0); color: var(--color-5); font-size: var(--texto-2); font-weight: 400; letter-spacing: normal; padding: 0; height: 32px; line-height: 32px; border: 0; border-radius: 0;}
	.layout-admin .header .nav-modulo ul li a.key{background-color: var(--color-0); color: var(--color-5);}
	
	.layout-admin .header .modulo-tools{display: grid; grid-gap: 0; margin: 0; padding: 0; box-sizing: border-box; grid-template-columns: 1fr auto; border-top: 1px solid var(--color-2); height: 48px; overflow: hidden; }
	
	.layout-admin .contenido .modulo-contenido{padding:8px}
	
	/* Get */

	.layout-get {position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; display: grid; grid-gap: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto;}
	.layout-get .contenido {position: relative; z-index: 1; overflow-x: none; overflow-y: scroll;}
	.layout-get .contenido .modulo-contenido{padding:16px;}
	.layout-get .contenido .modulo-contenido-narrow{max-width: 720px; margin: 0 auto;}
	
	.bx-1, .bx-2, .bx-3, .bx-1-2, .bx-2-1, .bx-1-3, .bx-3-1{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;}
	
	.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: 16px 16px 0 0; box-shadow: var(--shadow-float-1); overflow-x: hidden; overflow-y: scroll;}
	.modal .modal-contenido{padding: 24px;}
	.modal h1{padding: 24px 24px 0 24px;}
	.modal .modal-cerrar {position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; 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; z-index: 1;}
	.lateral h1{position: -webkit-sticky; position: sticky; top: 0; z-index: 2; text-align: center;}

	.lateral .lateral-cerrar {right: auto; left: 0;}
	.lateral .lateral-cerrar::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(../gui/ico/arrow-left.svg) 50% 50% no-repeat; background-size: 32px auto; width: 56px;filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}
	
	.bx-tabla-base .tabla-info{display:none}
	
	ul.bx-links{grid-gap: 4px;}
	
	.bx-card {grid-template-columns: 1fr;}
	
	.bx-kpis-lineal{grid-template-columns: 1fr;}
	
	.msg-start{width: 100%; padding: 120px 32px 32px 32px;}
	
	
}

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