* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

:root {

	touch-action: pan-x pan-y;
	height: 100%;
	
	--br1: 4px;
	--br2: 8px;
	--br2t: 8px 8px 0 0;
	--br2b: 0 0 8px 8px;
	--br3: 16px;
	--br4: 24px;

	--t6: 1.8rem;
	--t5: 1.6rem;
	--t4: 1.4rem;
	--t3: 1.2rem;
	--t2: 1rem;
	--t1: 0.75rem;
	
}

/* https://hihayk.github.io/scale/#1/10/99/96/100/0/0/100/000000/0/0/0/white */
[data-theme="light"] {
	
	--ka: #191919;
	--kac: #FFFFFF;
	--kal: #F0F0F0;
	--kam: #D7D7D7;
	
	--c100: #191919;
	--c90: #313131;
	--c80: #494949;
	--c70: #626262;
	--c60: #7A7A7A;
	--c50: #939393;
	--c40: #ABABAB;
	--c30: #C4C4C4;
	--c20: #DCDCDC;
	--c10: #F5F5F5;
	--c0: #ffffff;
	--c0t: #ffffff00;

	
	--ro: #e11d48;
	--roc: #FFFFFF;
	--rol: #e11d4816;
	--rom: #e11d4832;
	
	--az: #2563eb;
	--azc: #FFFFFF;
	--azl: #2563eb16;
	--azm: #2563eb40;
	
	--ve: #16a34a;
	--vec: #FFFFFF;
	--vel: #16a34a16;
	--vem: #16a34a40;
	
	--am: #f59e0b;
	--amc: #FFFFFF;
	--aml: #f59e0b16;
	--amm: #f59e0b40;
	
	--filter-co: invert(9%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(97%) contrast(86%);
	--filter-ba: invert(99%) sepia(57%) saturate(128%) hue-rotate(284deg) brightness(111%) contrast(100%);
	--filter-md: invert(75%) sepia(0%) saturate(2422%) hue-rotate(224deg) brightness(93%) contrast(86%);
	--filter-ka: invert(44%) sepia(78%) saturate(6217%) hue-rotate(216deg) brightness(96%) contrast(92%);
	
	--shadow-0: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	--shadow-1: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	--shadow-1-in: inset rgba(25, 25, 25, 0.3) 0px 1px 1px -1px, inset rgba(25, 25, 25, 0.06) 1px 1px 4px 1px;
	
	--shadow-2: rgba(25, 25, 25, 0.4) 0px 1px 2px -1px, rgba(25, 25, 25, 0.08) 1px 1px 5px 1px;
	
	--overlay: rgba(0,0,0,0.2);
	
	--c10lineal: linear-gradient(180deg, var(--c10), var(--c0));
	
}

[data-theme="dark"] {
	
	--ka: #21C063;
	--kac: #FFFFFF;
	--kal: #eff6ff;
	--kam: #bdb7fb;
	
	--c0: #0a0a0a;
	--c0t: #1B1B1E00;
	--c10: #171717;
	--c20: #262626;
	--c70: #a1a1aa;
	--c100: #e4e4e7;
	
	--ro: #e11d48;
	--roc: #FFFFFF;
	--rol: #e11d4816;
	--rom: #e11d4832;
	
	--az: #2563eb;
	--azc: #FFFFFF;
	--azl: #2563eb16;
	--azm: #2563eb40;
	
	--ve: #16a34a;
	--vec: #FFFFFF;
	--vel: #16a34a16;
	--vem: #16a34a40;
	
	--am: #f59e0b;
	--amc: #FFFFFF;
	--aml: #f59e0b16;
	--amm: #f59e0b40;
	
	--filter-ba: invert(0%) sepia(89%) saturate(7457%) hue-rotate(326deg) brightness(92%) contrast(111%);
	--filter-co: invert(75%) sepia(1%) saturate(1201%) hue-rotate(349deg) brightness(101%) contrast(98%);
	--filter-md: invert(30%) sepia(1%) saturate(0%) hue-rotate(22deg) brightness(93%) contrast(89%);
	--filter-ka: invert(99%) sepia(57%) saturate(128%) hue-rotate(284deg) brightness(111%) contrast(100%);
	
	--shadow-1x: rgba(0, 0, 0, 0.25) 0px 1px 8px 1px, rgba(0, 0, 0, 0.3) 0px 1px 2px -1px;
	--shadow-modal:  rgba(249,255,251, 0.045) 0px 16px 40px 8px;
	
	--overlay: rgba(9,9,9,0.8);
	
}

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

@keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadeOut {from {opacity: 1;} to {opacity: 0;}}

@keyframes rightIn {from {opacity: 0;transform: translateX(16px);} to {opacity: 1;}}
@keyframes rightOut {from {opacity: 1;} to {opacity: 0;transform: translateX(16px);}}

@keyframes bottomIn {from {opacity: 0;transform: translateY(16px);} to {opacity: 1;}}
@keyframes bottomOut {from {opacity: 1;} to {opacity: 0;transform: translateY(16px);}}

@keyframes centerBottomIn {from {opacity: 0;transform: translate(-50%,16px);} to {opacity: 1;}}
@keyframes centerBottomOut {from {opacity: 1;} to {opacity: 0; transform: translate(-50%,16px);}}

.reveal.fadeIn{ opacity: 0; }
.reveal.fadeIn.animate {
  animation-name: fadeIn;
  animation-duration: 300ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.reveal.fadeIn-300{ opacity: 0; }
.reveal.fadeIn-300.animate {
  animation-name: fadeIn;
  animation-duration: 300ms;
  animation-delay: 300ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.reveal.fadeOut{ opacity: 0; }
.reveal.fadeOut.animate {
  animation-name: fadeOut;
  animation-duration: 300ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.reveal.fadeOut-300{ opacity: 1; }
.reveal.fadeOut-300.animate {
  animation-name: fadeOut;
  animation-duration: 300ms;
  animation-delay: 300ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.reveal.rightIn{ opacity: 0; }
.reveal.rightIn.animate {
  animation-name: rightIn;
  animation-duration: 300ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.reveal.rightIn-300{ opacity: 0; }
.reveal.rightIn-300.animate {
  animation-name: rightIn;
  animation-duration: 300ms;
  animation-delay: 300ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.reveal.rightOut{ opacity: 1; }
.reveal.rightOut.animate {
  animation-name: rightOut;
  animation-duration: 300ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.reveal.rightOut-300{ opacity: 1; }
.reveal.rightOut-300.animate {
  animation-name: rightOut;
  animation-duration: 300ms;
  animation-delay: 300ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.reveal.bottomIn{ opacity: 0; }
.reveal.bottomIn.animate {
  animation-name: bottomIn;
  animation-duration: 300ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.reveal.bottomOut{ opacity: 1; }
.reveal.bottomOut.animate {
  animation-name: bottomOut;
  animation-duration: 300ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.reveal.positionBottomIn{ opacity: 0; }
.reveal.positionBottomIn.animate {
  animation-name: centerBottomIn;
  animation-duration: 300ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.reveal.positionBottomIn-300{ opacity: 0; }
.reveal.positionBottomIn-300.animate {
  animation-name: centerBottomIn;
  animation-duration: 300ms;
  animation-delay: 300ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.reveal.positionBottomOut{ opacity: 1; }
.reveal.positionBottomOut.animate {
  animation-name: centerBottomOut;
  animation-duration: 300ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.reveal.positionBottomOut-300{ opacity: 1; }
.reveal.positionBottomOut-300.animate {
  animation-name: centerBottomOut;
  animation-duration: 300ms;
  animation-delay: 300ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

html{scroll-behavior: smooth;-webkit-text-size-adjust: 100%; letter-spacing: 0%; font-size: 15px;}

body { font-family: 'Inter', serif; background-color:var(--c0);color: var(--c70); font-size: var(--t2); line-height: 1.4rem; font-weight: 400; padding: 0; margin: 0; overflow: hidden; }

h1{  font-size: var(--t6); line-height: normal; color: var(--c100); font-weight: 500; margin: 0; padding: 0; position: relative; }
h2{  font-size: var(--t5); line-height: normal; color: var(--c100); font-weight: 500; margin: 0; padding: 0; position: relative; display: inline-block;}
h3{  font-size: var(--t4); line-height: normal; color: var(--c100); font-weight: 500; margin: 0; padding: 0; position: relative; }
h3 .bx-links{position: absolute; top: 50%; right: 0; z-index: 2; transform: translate(0,-50%); display: inline-flex; gap:8px}
h4{  font-size: var(--t3); font-weight: 500; color: var(--c100);  margin: 0; padding: 0; line-height: normal; position: relative; }
h4 .bx-links{position: absolute; top: 50%; right: 0; z-index: 2; transform: translate(0,-50%); display: inline-flex; gap:8px}
h4 .bx-links a, h4 .bx-links .link{flex: 1; white-space: nowrap; background-color: var(--c10); color: var(--c100) !important; margin: 0; padding: 4px 10px; line-height: normal; border-radius: 4px; font-size: var(--t2) !important; font-weight: 400; text-decoration: none;}
h4 span.tag{ position: absolute; top: 2px; white-space: nowrap; background-color: var(--c20); color: var(--c100); margin: 0 0 0 8px; padding: 3px 8px; height: auto !important; line-height: normal !important; border-radius: 24px; font-size: var(--t1) !important; font-weight: 500; text-decoration: none;}
h4 span.tag-on{ background-color: var(--c100); color: var(--c0);}

h4 a.swap { display: block; }
h4 a.swap::before{content:""; position: absolute; top: 0; right: 0; bottom: 0; background: url(../gui/ico/swap.svg) 50% 50% no-repeat; background-size: 20px auto; width: 48px;filter: var(--filter-co); -webkit-filter: var(--filter-co);}

h4 a.add { display: block; }
h4 a.add::before{content:""; position: absolute; top: 0; right: 0; bottom: 0; background: url(../gui/ico/add.svg) 50% 50% no-repeat; background-size: 20px auto; width: 48px;filter: var(--filter-co); -webkit-filter: var(--filter-co);}

mark{ background-color: transparent; color: var(--c60); font-weight: 400; border-left: 1px solid var(--c20); margin-left: 12px; padding-left: 12px; }

a {color: var(--c100); text-decoration: none;-webkit-tap-highlight-color: transparent;}
a h3{pointer-events:none;}
b, strong {  color: var(--c100); font-weight: 500;}
p{margin:0px; padding: 0 0 16px 0;}
p:last-child{margin:0px; padding: 0px;}
small{font-size: var(--t1) !important; line-height: normal !important; color: var(--c70); pointer-events: none; display: block;}
hr { border: 0; border-bottom: 1px var(--c20) solid;margin: 0px; padding: 0;}
hr.s {margin: 16px 0}
hr.sh {margin: 8px 0}
blockquote{border-left: 4px solid var(--c100); margin: 0 0 16px 0; padding: 8px 16px;}
blockquote:last-child{margin: 0}

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

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

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

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

.fx-sb { display: flex; justify-content: space-between; align-items: center; }

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

.tx-rojo{color: var(--ro)}
.link{text-decoration: underline; color: var(--ka) !important; display: inline-block;}
.link:hover{color: var(--c60) !important;}
.link-off{text-decoration: underline; color: var(--c70);}
.linkBtn {display: inline;padding: 4px 12px;margin: 0;line-height: inherit;vertical-align: baseline;border-radius: 32px; background-color: var(--ka); color: var(--kac); }

.sticky-contenedor { position: relative; }
.sticky-target { position: sticky; top: 0; }

.polka {
  background-color: var(--bg1);
  background-image: radial-gradient(var(--c20) 10%, transparent 11%), radial-gradient(var(--c20) 10%, transparent 11%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  background-repeat: repeat;
}

/* 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(--c0);pointer-events: none;}
.loader span{position: absolute; top: calc(50% - 16px); left: calc(50% - 16px); width: 32px; height: 32px; animation-name: rotate;animation-duration: 2s;animation-iteration-count:infinite;}
.loader span::before{content:""; position: absolute; top: 0px; left: 0; bottom: 0; background: url(../gui/ico/loading.svg?1) 50% 50% no-repeat; background-size: 32px auto; width: 32px;filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.loader-out{animation-name: fadeOut;animation-duration: 300ms; opacity: 0.1;}

.micro-loader-target{min-height: 32px; position: relative; overflow: hidden;pointer-events: none;}
.micro-loader{position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 11; opacity: 1; background-color: var(--c0);pointer-events: none;}
.micro-loader span{position: absolute; top: calc(50% - 16px); left: calc(50% - 16px); width: 32px; height: 32px; animation-name: rotate;animation-duration: 2s;animation-iteration-count:infinite;}
.micro-loader span::before{content:""; position: absolute; top: 0px; left: 0; bottom: 0; background: url(../gui/ico/loading.svg?1) 50% 50% no-repeat; background-size: 32px auto; width: 32px;filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.micro-loader-out{animation-name: fadeOut;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); overflow: auto !important; padding: 40px 0;}
.modal{position:fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: var(--c0); border: 1px solid var(--c0); width: 480px; max-height: 80vh; padding: 0; box-sizing: border-box; border-radius: var(--br2); overflow-y: auto; overflow-x: hidden; box-shadow: var(--shadow-1); }
.modal .modal-contenido{padding: 24px 24px 24px 24px; box-sizing: border-box; }
.modal h3.titulo{font-size: var(--t2); margin: 0; padding: 16px 24px; position: sticky; top: 0; z-index: 2; background-color: var(--c10); border-bottom: 1px solid var(--c20) }
.modal .modal-cerrar {}
.modal .micro-loader{background-color: var(--c0);}

/* Lateral */

.lateral-overlay{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 297; opacity: 1; overflow: auto !important; padding: 0px; background-color: var(--overlay); }
.lateral{position: fixed; top: 0; right: 0; bottom: 0; width: 640px; background-color: var(--c0); padding: 0px; border-radius: 0; box-sizing: border-box; overflow: hidden; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; box-shadow: var(--shadow-2); }
.lateral .lateral-titulo{ position: relative;  font-size: var(--t3); font-weight: 600; color: var(--c100); padding: 16px 24px; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--c20); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lateral h3.titulo{ position: relative;  font-size: var(--t2); font-weight: 500; color: var(--c100); background-color: var(--c10); padding: 16px 24px; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--c20); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lateral .lateral-cerrar { position: absolute; top: 50%; right: 16px; transform: translate(0,-50%); width: 32px; height: 32px; text-indent: -6000px; background-color: transparent; border-radius: 32px;}
.lateral .lateral-cerrar::before{content:""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../gui/ico/del.svg) 50% 50% no-repeat; background-size: 32px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.lateral .lateral-contenido{ overflow-x: hidden; overflow-y: auto; margin: 0; padding: 24px; box-sizing: border-box; position: relative; z-index: 1;}


/* Central */

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

.central{position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--c0); padding: 0px; border-radius: 0; box-sizing: border-box; overflow: hidden; display: grid; grid-template-columns: 1fr; grid-template-rows: 56px 1fr; }
.central h3.titulo{font-size: var(--t3); margin: 0; padding: 0 80px 0 24px; height: 56px; line-height: 56px; position: relative; top: 0; z-index: 2; background-color: var(--c0); border-bottom: 1px solid var(--c20); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
.central .central-cerrar {position: absolute; top: 12px; right: 16px; z-index: 3; width: 32px; height: 32px; text-indent: -6000px; background-color: var(--c0); border-radius: 32px;}
.central .central-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: 32px;filter: var(--filter-md); -webkit-filter: var(--filter-md);}
.central .central-contenido{ overflow-x: hidden; overflow-y: scroll; margin: 0; padding: 24px; box-sizing: border-box; position: relative; z-index: 1;}

.iframes{display: none; width: 100%; text-indent: -6000px;}



/* BX */

.bx-1{display: flex; flex-direction: column; gap: 24px; padding: 0; box-sizing: border-box;}

.bx-1-2{display: grid; grid-gap: 24px; 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; position: relative; }

.bx-helper{display: grid; grid-gap: 32px; padding: 0; box-sizing: border-box; grid-template-columns: 2fr 1fr; position: relative; }
.bx-helper > div:nth-child(2) div { position: sticky; top: 0; }

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

.bx-2f.last .ffbx{padding:0;}

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

.bx-base{background: var(--c10); padding: 16px; border-radius: var(--br1); }
.bx-base h4 { border-bottom: 1px solid var(--c20); font-size: var(--t2); padding-bottom: 12px; margin-bottom: 12px }
.bx-off{background-color: var(--c20); padding: 16px !important; border-radius: var(--br1); }

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

.bx-checkout .carrito .items { margin: 0; padding: 0; display: grid; grid-gap: 16px; grid-template-columns: 1fr; }
.bx-checkout .carrito .items .item { margin: 0; padding: 0; display: grid; grid-gap: 16px; grid-template-columns: 56px 1fr auto; }
.bx-checkout .carrito .items .item .media { grid-column: 1 / 2; grid-row: 1 / 2; }
.bx-checkout .carrito .items .item .media img {display: block; object-fit: cover; width: 100%; aspect-ratio: 1/1; border-radius: var(--br1);}
.bx-checkout .carrito .items .item .media .iniciales { display: flex; object-fit: cover; width: 100%; aspect-ratio: 1/1; border-radius: var(--br1); background-color: var(--c10); align-items: center; justify-content: center; }
.bx-checkout .carrito .items .item .media .iniciales span { font-size: var(--t5); color: var(--c20); font-weight: 500; }
.bx-checkout .carrito .items .item .descripcion { grid-column: 2 / 3; grid-row: 1 / 2; position: relative; }
.bx-checkout .carrito .items .item .descripcion .remover { position: absolute; top: 0; right: 0; text-indent: -6000px; border-radius: 32px; background-color: var(--c10); border: 0px solid var(--c20); width: 32px; height: 32px; }
.bx-checkout .carrito .items .item .descripcion .remover::before{content:""; position: absolute; background: url(/cbpn-media/basura.svg); top: 0; left: 0; bottom: 0; right: 0; background-repeat: no-repeat !important; background-size: 20px auto !important; background-position: 50% 50% !important; filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.bx-checkout .carrito .items .item .importe { grid-column: 3 / 4; grid-row: 1 / 2; position: relative; text-align: right; }

.bx-checkout .carrito .items .controles-incremento{position: relative; width: 96px; height: 32px;-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: var(--br1); background-color: var(--c10);}
.bx-checkout .carrito .items .controles-incremento div{text-align: center; line-height: 32px; font-size: var(--t2); cursor: pointer !important; }
.bx-checkout .carrito .items .controles-incremento .incremento-menos{width: 32px; height: 32px; position: absolute; left: 0; top: auto; bottom: 0; z-index: 2; border: 0;}
.bx-checkout .carrito .items .controles-incremento .incremento-menos::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/menos.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-md); -webkit-filter: var(--filter-md);}
.bx-checkout .carrito .items .controles-incremento .incremento-campo{width: 32px; height: 32px; text-align: center; padding: 0px; text-indent: 0px; position: absolute; top: 0; left: 32px; right: 0; color: var(--tx1); box-shadow: none; border: 0px; background-color: transparent !important;}
.bx-checkout .carrito .items .controles-incremento .incremento-mas{width: 32px; height: 32px; position: absolute; right: 0; top: 0; bottom: auto; border: 0;}
.bx-checkout .carrito .items .controles-incremento .incremento-mas::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/add.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-md); -webkit-filter: var(--filter-md);}






ul.bx-links{display: grid; grid-gap: 8px; margin: 0; padding: 0; grid-template-columns: 1fr; position: relative; background-color: var(--c0); border-radius: var(--br1); }
ul.bx-links li{list-style: none; margin: 0; padding: 0; box-sizing: border-box; position: relative; width: 100%;}
ul.bx-links li a{padding: 10px 12px; display: block;  border: 1px solid var(--c20); border-radius: var(--br1); background-color: var(--c0); }
ul.bx-links li a:hover { background-color: var(--c10); }
ul.bx-links li a::before{content:""; position: absolute; top: 0px; right: 0px; bottom: 0; background: url(../gui/ico/arrow-right.svg) 50% 50% no-repeat; background-size: 20px auto; width: 32px; filter: var(--filter-md); -webkit-filter: var(--filter-md);}
ul.bx-links li a h3, ul.bx-links li a p, ul.bx-links li a small, ul.bx-links li a b, ul.bx-links li a div{pointer-events:none}
ul.bx-links li a.cols{display: flex; gap: 16px; }
ul.bx-links li a.cols .keyCol{flex: auto; font-weight: 500; color: var(--c100);}
ul.bx-links li a.cols .keyCol small { color: var(--c70) !important; font-weight: 400; }

ul.bx-links.bx-sort li a{padding-right: 48px;}
ul.bx-links.bx-sort li a::before{background: none}
ul.bx-links.bx-sort li .handle{position: absolute; top: 0; right: 0; bottom: 0; width: 48px; }
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: 16px auto; width: 48px; filter: var(--filter-md); -webkit-filter: var(--filter-md);}
ul.bx-links.bx-sort li.handle-activo{z-index: 1; padding: 0;}
ul.bx-links.bx-sort li.handle-activo .handle{right:0;}
ul.bx-links.bx-sort li.handle-activo a{ border: 0; }
ul.bx-links.bx-sort li.handle-target{padding: 0; background-color: var(--c0);}
.handle{width: 100%;}

/* BX LISTA */

ul.bx-lista{display: grid; grid-gap: 0; margin: 0; padding: 0 0 0 12px; grid-template-columns: 1fr; position: relative; background-color: var(--c0); border-radius: var(--br1); border: 1px solid var(--c20); }
ul.bx-lista li {margin: 0; padding: 10px 12px 10px 0px; list-style: none; position: relative; border-bottom: 1px solid var(--c20); line-height: normal; }
ul.bx-lista li:last-child{border: 0;}
ul.bx-lista li.bx-controles{padding-right: 48px}
ul.bx-lista li.bx-controles .call { width: 32px; height: 32px; border-radius: 32px; background-color: var(--c10); border: 0px solid var(--c20); position: absolute; top: 50%; right: 12px; transform: translate(0, -50%); }
ul.bx-lista li.bx-controles .call::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/opcion.svg) 50% 50% no-repeat; background-size: 32px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}

ul.bx-lista li.cols{display: flex; gap: 12px; }
ul.bx-lista li.cols div{line-height: normal; }
ul.bx-lista li.cols .keyCol{flex: auto; color: var(--c100); line-height: normal;  }
ul.bx-lista li.cols input[type="text"],ul.bx-lista li.cols input[type="number"],ul.bx-lista li.cols select{height: 28px; text-indent: 8px; margin: -6px 0; padding: 0; background-color: var(--fm1) !important; border: 1px solid var(--fm1) !important; box-shadow: none !important;}
ul.bx-lista li.cols .btnm-alt{margin: -6px 0}

ul.bx-lista.bx-sort-media li a{padding-right: 48px;}
ul.bx-lista.bx-sort-media li a::before{background: none}
ul.bx-lista.bx-sort-media li.handle-activo{z-index: 1; padding: 0;}
ul.bx-lista.bx-sort-media li.handle-activo .handle{right:0;}
ul.bx-lista.bx-sort-media li.handle-activo a{ background-color: var(--c0); }
ul.bx-lista.bx-sort-media li.handle-target{background-color: var(--c20)}

ul.bx-lista li .slide-nav { display: none; position: absolute; top: 0; right: 0; bottom: 0; padding: 12px 16px; border-left: 1px solid var(--c20); background-color: var(--c0); }
ul.bx-lista li .slide-nav .slide-links { display: flex; gap:12px; flex-wrap: wrap; }
ul.bx-lista li .slide-nav .slide-links a {flex: auto; color: var(--c100); font-weight: 500; }

/* BX LISTA SORT INLINE */

ul.bx-sort-inline{display: grid; grid-gap: 8px; margin: 0; padding: 0; grid-template-columns: 1fr; position: relative; }
ul.bx-sort-inline li { display: flex; width: 100%; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; position: relative; }
ul.bx-sort-inline li > div { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; }
ul.bx-sort-inline li > div.full { width: 100%; margin: 0 0 8px 0; padding: 0; }
ul.bx-sort-inline li > div.auto { flex: 0 0 auto; margin: 0; padding: 0; }
ul.bx-sort-inline li > div.stretch { flex: 0 0 auto;  margin: 0; padding: 0; }
ul.bx-sort-inline li input[type="text"] {height: 38px; text-indent: 12px; margin: 0; padding: 0; background-color: var(--c0) !important; outline: 1px solid var(--c20) !important; }

/* BX LISTA TREE */

ul.bx-lista-tree{display: grid; grid-gap: 8px; margin: 0; padding: 0; grid-template-columns: 1fr; position: relative; }
ul.bx-lista-tree li {margin: 0; padding: 0; list-style: none; position: relative; color: var(--c100); }
ul.bx-lista-tree li .box { background-color: var(--c10); padding: 12px; border-radius: var(--br1); display: flex; gap: 8px }
ul.bx-lista-tree li .box span:nth-child(1){ flex: 1 1 0; display: flex; align-items: center; }

ul.bx-lista-tree li .box .opciones{ position: relative; width: 32px; height: 32px; border-radius: 32px; background-color: var(--c0); border: 1px solid var(--c20); }
ul.bx-lista-tree li .box .opciones::before{content:""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../gui/ico/opcion.svg) 50% 50% no-repeat; background-size: 20px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}

ul.bx-lista-tree li .box .editar{ position: relative; width: 32px; height: 32px; border-radius: 32px; background-color: var(--c0); border: 1px solid var(--c20); }
ul.bx-lista-tree li .box .editar::before{content:""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../gui/ico/editar.svg) 50% 50% no-repeat; background-size: 20px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}

ul.bx-lista-tree li .box .handle{ position: relative; width: 32px; height: 32px; border-radius: 32px; background-color: var(--c0); border: 1px solid var(--c20);}
ul.bx-lista-tree li .box .handle::before{content:""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../gui/ico/sort.svg) 50% 50% no-repeat; background-size: 16px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}

ul.bx-lista-tree ul.sub-box {display: grid; grid-gap: 8px; margin: 0; padding: 8px 0 0 32px; grid-template-columns: 1fr; position: relative; }


/* BX LISTA FLAT */

ul.bx-lista-flat{display: grid; grid-gap: 0; margin: 0; padding: 0; grid-template-columns: 1fr; position: relative; overflow: hidden; background-color: var(--c10); border: 1px solid var(--c20); border-radius: var(--br1);}
ul.bx-lista-flat li {margin: 0; padding: 8px 12px; list-style: none; position: relative;}

ul.bx-media{display: grid; grid-gap: 16px; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); position: relative; }
ul.bx-media li {margin: 0; padding: 8px; list-style: none; position: relative; background-color: var(--c10); border-radius: var(--br1); overflow: hidden;}
ul.bx-media li .img { aspect-ratio: 3 / 2; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; position: relative; }
ul.bx-media li .img .titulo { position: absolute; top: -8px; left: -8px; right: -8px; bottom: 0; padding: 8px; font-size: var(--t1); color: var(--c10); background: rgb(0,0,0); background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.32) 100%); }

ul.bx-media.bx-sort-media li a{}
ul.bx-media.bx-sort-media li a::before{background: none}
ul.bx-media.bx-sort-media li.handle-activo{z-index: 1; padding: 8px; max-width: 200px;}
ul.bx-media.bx-sort-media li.handle-activo .handle{}
ul.bx-media.bx-sort-media li.handle-activo a{ }
ul.bx-media.bx-sort-media li.handle-target{background-color: var(--c20); padding: 0; width: 100%; box-shadow: none;}

ul.bx-media .bx-btns{ margin-top: 8px; display: flex; justify-content: space-between;  }
ul.bx-media .bx-btns a{ text-align: center;}
ul.bx-media .bx-btns a:hover{color: var(--c50)}


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

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

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

.bx-kpis-lineal{display: grid; grid-gap: 8px; padding: 0; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));}
.bx-kpis-lineal .kpi{background-color: var(--c10); border: 0px solid var(--c20); border-radius: var(--br1); padding: 16px; }
.bx-kpis-lineal .kpi-fake{display:none;}
.bx-kpis-lineal .kpi .data{font-size: var(--t5); line-height: var(--t5); color: var(--c100); font-weight: 600; }
.bx-kpis-lineal .kpi .data small{color: var(--c70);}
.bx-kpis-lineal .kpi .info{margin: 0; padding: 0;}

.bx-filtros{display: inline-flex; flex-wrap: wrap; gap:8px }
.bx-filtros .item-key{position: relative; font-size: var(--t2); margin: 0; background-color: var(--c10); color: var(--c100); outline: 1px solid var(--c20); padding: 0 12px 0 32px; height: 32px; line-height: 32px; border-radius: 32px; display: inline-block; font-weight: 400; }
.bx-filtros .item-key::before{content:""; position: absolute; top: 0; left: 12px; bottom: 0; background: url(../gui/ico/filtro.svg) 50% 50% no-repeat; background-size: 16px auto; width: 16px;filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.bx-filtros .item{font-size: var(--t2); margin: 0; background-color: var(--c0); color: var(--c100); outline: 1px solid var(--c20); padding: 0px 12px; height: 32px; line-height: 32px; border-radius: 32px; display: inline-block; position: relative; }
.bx-filtros .item span { position: absolute; top: -7px;  font-size: var(--t1); padding: 0 2px; margin-left: -2px; height: 16px; line-height: 16px; background-color: var(--c0); color: var(--c50) }
.bx-filtros .item-on{background-color: var(--c0); color: var(--c100);}
.bx-filtros .item-clean{position: relative; font-size: var(--t2); margin: 0; background-color: var(--c0); color: var(--c70); padding: 0 12px 0 32px; height: 32px; line-height: 32px; border-radius: 32px; display: inline-block; cursor: pointer }
.bx-filtros .item-clean:hover{background-color: var(--c10); color: var(--c50); cursor: pointer;}
.bx-filtros .item-clean::before{content:""; position: absolute; top: 0; left: 12px; bottom: 0; background: url(../gui/ico/del.svg) 50% 50% no-repeat; background-size: 24px auto; width: 16px;filter: var(--filter-co); -webkit-filter: var(--filter-co);}

ul.tabs{ margin: 0; padding: 0; overflow: auto; white-space: nowrap; text-align: left; display: flex; gap: 16px; border-bottom: 1px solid var(--c20); }
ul.tabs::-webkit-scrollbar{display: none;}
ul.tabs li{ display: inline-block;}
ul.tabs li:last-child{ margin: 0; }
ul.tabs li a{padding: 0; height: 40px; line-height: 40px; text-align: center; text-decoration: none; display: block; font-weight: 400; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
ul.tabs li a:hover{color: var(--c100)}
ul.tabs li a.activo {  color: var(--c100); border-bottom: 3px solid var(--ka); }

/* Details */

details{margin: 0 0 8px 0; padding: 0; border-radius: var(--br1); border: 1px solid var(--c20); overflow: hidden; }
details:last-child{margin:0}
details summary {outline: none; margin: 0; padding: 0; height: 44px; cursor: pointer; position: relative; }
details summary span { position: absolute; top: 0; left: 12px; height: 44px; line-height: 44px; font-size: var(--t2);  color: var(--c100); }
details summary::-webkit-details-marker {color: transparent;padding: 0; margin: 0;}
details summary::before{content:""; position: absolute; top: 0; right: 0; bottom: 0; background: url(../gui/ico/arrow-down.svg) 50% 50% no-repeat; background-size: 24px auto; width: 44px;filter: var(--filter-md); -webkit-filter: var(--filter-md);}
details[open] {}
details[open] summary{border-radius: var(--br2t); border-bottom: 1px solid var(--c20); }
details[open] summary::before{content:""; position: absolute; top: 0; right: 0; bottom: 0; background: url(../gui/ico/arrow-up.svg) 50% 50% no-repeat; background-size: 24px auto; width: 44px;filter: var(--filter-md); -webkit-filter: var(--filter-md);}
details > div{margin: 0; padding: 12px 12px;}
details > div hr { border: 0; border-bottom: 1px var(--c20) solid;margin: 10px 0px; padding: 0;}

details .bx-inputs{border: 0 !important; box-shadow: none !important;}
details .bx-tabla-base { margin: 0; background-color: var(--c10); border: 0px solid var(--c20); }
details .bx-lista{ margin: -12px -16px; border: 0; border-radius: 0; background-color: transparent; }
details .bx-lista-flat{border: 0 !important; margin: 0 -12px !important; background-color: transparent !important; border-radius: 0 !important;}

.bx-full{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px;}

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

/* Tabs */

.tabs-nav {overflow-x: scroll; overflow-y: hidden; white-space:nowrap; position: relative; margin: 0; padding: 0; box-sizing: border-box; border-bottom: 1px solid var(--c20); }
.tabs-nav ul { margin: 0; padding: 0; display: flex; gap: 24px; }
.tabs-nav li { list-style: none; margin: 0 !important; padding: 0 !important; }
.tabs-nav a { display: block;height: 40px; line-height: 40px; margin: 0 !important; color: var(--c70); font-weight: 500; }
.tabs-nav li.active a{ color: var(--c100); border-bottom: 3px solid var(--c100); }

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

.layout-admin .contenedor .contenido .tabs-nav { position: relative; margin: 0;  }
.layout-admin .contenedor .contenido .tabs-content { padding: 0; }

/* Icos*/

.bx-ico-tx {display: flex;gap: 16px;align-items: top;}
.ico-tx {padding-left: 28px !important; display: block; position: relative; }
.ico-tx::before{content:""; position: absolute; top: -1px; left: 0; background-repeat: no-repeat !important; background-size: 20px auto !important; background-position: 0 50% !important; width: 20px; height: 20px; filter: var(--filter-co); -webkit-filter: var(--filter-co);  }

.bx-ico-ft {display: flex;gap: 16px;align-items: top;}
.ico-ft {display: inline; height: 32px; aspect-ratio: 1/1; line-height: inherit; vertical-align: baseline; pointer-events: none; position: relative; background-color: var(--c10); border-radius: 32px; }
.ico-ft::before{content:""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-repeat: no-repeat !important; background-size: 64% auto !important; background-position: 50% 50% !important; filter: var(--filter-co); -webkit-filter: var(--filter-co);  }

.ico-ft-az {background-color: var(--azm);}
.ico-ft-ve {background-color: var(--vem);}
.ico-ft-am {background-color: var(--amm);}
.ico-ft-ro {background-color: var(--rom);}

.ico-menuc {display: flex;gap: 16px;align-items: center;}
.ico-menu {display: inline; height: 20px; aspect-ratio: 1/1; line-height: inherit; vertical-align: baseline; pointer-events: none; position: relative;}
.ico-menu::before{content:""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-repeat: no-repeat !important; background-size: 100% auto !important; background-position: 0 50% !important; filter: var(--filter-co); -webkit-filter: var(--filter-co);  }

.ico-h1 {display: inline; width: 30px; height: 30px; line-height: inherit; vertical-align: baseline; pointer-events: none; position: relative;}
.ico-h1::before{content:""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-repeat: no-repeat !important; background-size: 100% auto !important; background-position: 0 50% !important; filter: var(--filter-co); -webkit-filter: var(--filter-co);  }

.bx-ico {display: flex;gap: 8px;align-items: top;}
.ico {display: inline; height: 20px; aspect-ratio: 1/1; line-height: inherit; vertical-align: baseline; pointer-events: none; position: relative;}
.ico::before {content:""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-repeat: no-repeat !important; background-size: 100% auto !important; background-position: 0 50% !important; filter: var(--filter-co); -webkit-filter: var(--filter-co);  }

/* Ya ordenados */

.ico-editar::before{ background: url(../gui/ico/editar.svg);}
.ico-eliminar::before{background: url(../gui/ico/del.svg)}
.ico-historial::before{background: url(../gui/ico/historial.svg)}
.ico-info::before{ background: url(../gui/ico/info.svg);}
.ico-nuevo::before{background: url(../gui/ico/nuevo.svg)}
.ico-sort::before{background: url(../gui/ico/sort.svg)}
.ico-tip::before{background: url(../gui/ico/tip.svg);}



.ico-arrow-right{background: url(../gui/ico/arrow-right.svg)}
.ico-arrow-left{background: url(../gui/ico/arrow-left.svg)}
.ico-arrow-down{background: url(../gui/ico/arrow-down.svg)}
.ico-cerrar{ background: url(../gui/ico/del.svg);}
.ico-nav{ background: url(../gui/ico/nav.svg);background-size: 50px auto !important;}

.ico-config::before{ background: url(../gui/ico/config.svg);}

.ico-logout::before{background: url(../gui/ico/logout.svg)}
.ico-mode::before{ background: url(../gui/ico/mode.svg);}
.ico-usuario::before{background: url(../gui/ico/usuario.svg)}


.ico-fb::before{ background: url(../gui/redes/facebook.svg);}
.ico-ig::before{ background: url(../gui/redes/instagram.svg);}

.ico-lock::before{ background: url(../gui/ico/lock.svg);}
.ico-paypal::before{ background: url(../gui/ico/paypal.svg);}
.ico-unlock::before{ background: url(../gui/ico/unlock.svg);}
.ico-grid-target::before{ background: url(../gui/ico/grid-target.svg);}

.ico-pin::before{background: url(../gui/ico/pin.svg)}
.ico-efectivo::before{background: url(../gui/ico/efectivo.svg)}
.ico-terminal::before{background: url(../gui/ico/terminal.svg)}
.ico-tarjeta::before{background: url(../gui/ico/tarjeta.svg)}
.ico-direccion::before{background: url(../gui/ico/direccion.svg)}
.ico-hand-pago::before{background: url(../gui/ico/hand-pago.svg)}


.ico-filtro::before{background: url(../gui/ico/filtro.svg)}
.ico-loading::before{background: url(../gui/ico/loading.svg)}

.ico-cliente::before{background: url(../gui/ico/cliente.svg);}
.ico-clientes::before{background: url(../gui/ico/clientes.svg);}
.ico-copy::before{background: url(../gui/ico/copy.svg);}
.ico-qr::before{background: url(../gui/ico/qr.svg);}

.ico-notas::before{background: url(../gui/ico/notas.svg)}
.ico-promo::before{background: url(../gui/ico/promo.svg)}
.ico-basura::before{background: url(../gui/ico/basura.svg)}
.ico-guardar::before{background: url(../gui/ico/guardar.svg)}
.ico-detener::before{background: url(../gui/ico/detener.svg)}

.ico-cambiar::before{background: url(../gui/ico/cambiar.svg)}
.ico-fecha::before{background: url(../gui/ico/fecha1.svg)}
.ico-hora::before{background: url(../gui/ico/hora.svg)}
.ico-hora-inicio::before{background: url(../gui/ico/hora-inicio.svg)}
.ico-hora-resumen::before{background: url(../gui/ico/hora-resumen.svg)}
.ico-whatsapp::before{background: url(../gui/ico/whatsapp.svg)}

.ico-doc::before{background: url(../gui/ico/doc.svg)}
.ico-bell::before{background: url(../gui/ico/bell.svg)}
.ico-ventas::before{background: url(../gui/ico/ventas.svg)}
.ico-ventas-pos::before{background: url(../gui/ico/ventas-pos.svg)}
.ico-clases::before{background: url(../gui/ico/clases.svg)}
.ico-tools::before{background: url(../gui/ico/tools.svg)}
.ico-sucursal::before{background: url(../gui/ico/sucursal.svg)}
.ico-reporte::before{background: url(../gui/ico/reporte.svg)}
.ico-reservas::before{background: url(../gui/ico/calendario-semana.svg)}
.ico-home::before{background: url(../gui/ico/home.svg)}
.ico-descuento::before{background: url(../gui/ico/descuento.svg)}
.ico-producto::before{background: url(../gui/ico/producto.svg)}
.ico-inventario::before{background: url(../gui/ico/inventario.svg)}



.ico-form::before{background: url(../gui/ico/form.svg)}

.ico-swap::before{background: url(../gui/ico/swap.svg)}
.ico-opcion::before{background: url(../gui/ico/opcion.svg)}

.ico-next::before{background: url(../gui/ico/arrow-right-ext.svg)}
.ico-prev::before{background: url(../gui/ico/arrow-right-ext.svg); rotate: -180deg}
.ico-down::before{background: url(../gui/ico/arrow-down.svg)}
.ico-back::before{background: url(../gui/ico/back.svg)}
.ico-play::before{background: url(../gui/ico/play.svg)}
.ico-ubicacion::before{background: url(../gui/ico/ubicacion.svg)}
.ico-download::before{background: url(../gui/ico/download.svg)}
.ico-open-tab::before{background: url(../gui/ico/open-tab.svg)}

.ico-msg-send::before{background: url(../gui/ico/msg-send.svg)}
.ico-msg-sent::before{background: url(../gui/ico/msg-sent.svg)}
.ico-msg-credits::before{background: url(../gui/ico/msg-credits.svg)}

.ico-calendario::before{background: url(../gui/ico/calendario.svg)}
.ico-calendario-semana::before{background: url(../gui/ico/calendario-semana.svg)}
.ico-calendario-menu::before{background: url(../gui/ico/calendario-menu.svg)}

.ico-documentos::before{background: url(../gui/ico/documentos.svg)}
.ico-documentos-menu::before{background: url(../gui/ico/menu.svg)}

.ico-documento-escudo::before{background: url(../gui/ico/documento-escudo.svg)}

.ico-grupo::before{background: url(../gui/ico/group.svg)}

.ico-catalogo::before{background: url(../gui/ico/catalogo.svg)}

.ico-chart::before{background: url(../gui/ico/chart.svg)}
.ico-chart-gantt::before{background: url(../gui/ico/chart-gantt.svg)}


/* Tags */

.batch-inline { display: inline;padding: 1px 6px;margin: 0;line-height: inherit;vertical-align: baseline;pointer-events: none; font-weight: 400 !important;border-radius: 40px; background-color: var(--kal); color: var(--ka); }

.bx-tags { display: flex; gap:8px; flex-wrap: wrap; }
.tag { display: inline; padding: 0 8px !important;margin: 0 !important;line-height: inherit !important;vertical-align: baseline;pointer-events: none; border-radius: 16px; outline: 1px solid var(--c20); background-color: var(--c10); color: var(--c70); font-size: var(--t1); font-weight: 500; white-space: nowrap; }

.tag.tag-az{background-color: var(--azl); color: var(--az); outline-color: var(--azm);}
.tag.tag-ro{background-color: var(--rol); color: var(--ro); outline-color: var(--rom);}
.tag.tag-ve{background-color: var(--vel); color: var(--ve); outline-color: var(--vem);}
.tag.tag-am{background-color: var(--aml); color: var(--am); outline-color: var(--amm);}


.bx-tag-dot {display: flex;gap: 8px;align-items: center;}
.tag-dot{ background-color: var(--c20); width: 12px; height: 12px; border-radius: 12px; display: inline-block; pointer-events: none; outline: 1px solid var(--c0); box-shadow: var(--shadow-0);}
.tag-dot.tag-az{background-color: var(--az);}
.tag-dot.tag-ro{background-color: var(--ro);}
.tag-dot.tag-ve{background-color: var(--ve);}
.tag-dot.tag-am{background-color: var(--am);}

.tooltip {position: relative;display: inline; padding: 2px; border-radius: 16px; background-color: var(--c20); color: var(--c100); line-height: inherit !important; text-align: center !important; font-size: var(--t2); font-weight: 400; }
.tooltip .tooltiptext {visibility: hidden; width: fit-content; min-width: 120px;max-width: 224px;line-height: normal !important; font-size: var(--t1); font-weight: 400; color: var(--c70); text-align: left;background-color: var(--c10);border-radius: var(--br1);padding: 8px 12px;position: absolute;top: calc(100% + 4px);left: 0;z-index: 1; }
.tooltip:hover .tooltiptext { visibility: visible; }

.tooltip-libre {position: relative;display: inline-block; }
.tooltip-libre .tooltiptext {visibility: hidden;min-width: 64px;max-width: 176px;line-height: normal !important; font-weight: 400; color: var(--c100); text-align: left;background: var(--c0);border-radius: var(--br1);padding: 4px 8px;position: absolute;top: 4px;left: 4px;z-index: 1; box-shadow: var(--shadow-1); outline: 0px solid var(--c20); }
.tooltip-libre:hover .tooltiptext { visibility: visible; }


/* Tabla */

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

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

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

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

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

.tabla-base {border-collapse: collapse; position: relative; width: 100%; }
.tabla-base thead {position: -webkit-sticky; position: sticky; top: 0px;}
.tabla-base tr { outline: none !important; border-bottom: 1px solid var(--c20); }

.tabla-base tr.odd{  }
.tabla-base tr.selected{background-color: var(--c10)}
.tabla-base tr th {  font-weight: normal; padding: 0 40px 0 0; height: 40px; line-height: 40px; text-align: left; color: var(--c100); font-weight: 500; border-bottom: 1px solid var(--c20); position: relative; outline: none !important;}
.tabla-base tr th:first-child {padding-left: 12px;}
.tabla-base tr th::before{content:""; position: absolute; top: 0px; right: 16px; bottom: 0; background: url(../gui/ico/sort.svg) 50% 50% no-repeat; background-size: 16px auto; width: 20px;filter: var(--filter-md); -webkit-filter: var(--filter-md);}
.tabla-base.nosort tr th{padding-right: 12px;}
.tabla-base.nosort tr th:last-child {padding-right: 0;}
.tabla-base.nosort tr th::before{display:none; padding-right: 12px;}
.tabla-base tr td {padding: 0 12px 0 0; height: 40px; line-height: 40px; color: var(--c70); position: relative; vertical-align: top; }
.tabla-base tr td:first-child {padding-left: 12px;}
.tabla-base tr td:last-child {padding-right: 12px;}
.tabla-base tr:last-child { border: 0; }
.tabla-base tr.disabled{pointer-events: none !important;}

.bx-tabla-base .buscador {position: relative; margin: 0 ; overflow: hidden; border: 0; border-radius: 0; background-color: var(--c0); box-shadow: none; border-bottom: 1px solid var(--c20); }
.bx-tabla-base .buscador::before{content:""; position: absolute; top: 0; left: 0px; bottom: 0; background: url(../gui/ico/buscar.svg) 50% 50% no-repeat !important; background-size: 20px auto !important; width: 40px;filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.bx-tabla-base .buscador input{ background-color: transparent !important; padding: 0 !important; text-indent: 40px; height: 40px; border: 0; border-radius: var(--br1); outline: none; box-shadow: none;}

.bx-tabla-base .paging_simple_numbers{margin: 0; padding: 0 12px; position: relative; display: flex; gap: 8px; border-top: 1px solid var(--c20); }
.bx-tabla-base .paging_simple_numbers .paginate_button{display: inline-block; padding: 0 8px; height: 40px; line-height: 40px; color: var(--c70);}
.bx-tabla-base .paging_simple_numbers .paginate_button.previous{ padding-left: 0; }
.bx-tabla-base .paging_simple_numbers .paginate_button.next{}
.bx-tabla-base .paging_simple_numbers .paginate_button.current{ color: var(--c100); font-weight: 500; }
.bx-tabla-base .paging_simple_numbers .ellipsis{}

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

.bx-tabla-base .controles-incremento-small { margin: 4px 0 0 0; }

.bx-tabla-flat{margin: 0; padding: 0; position: relative; overflow: auto; border: 1px solid var(--c20); border-radius: var(--br1); }
.bx-tabla-flat .tabla-contenido{overflow: auto !important; white-space:nowrap !important; }
.tabla-flat {border-collapse: collapse; position: relative; width: 100%;}
.tabla-flat tr th {  font-weight: 500; color: var(--c100); }
.tabla-flat tr th, .tabla-flat tr td {padding: 12px 12px 12px 0; border-bottom: 1px solid var(--c20); text-align: left; vertical-align: top;}
.tabla-flat tr td {  }
.tabla-flat tr th:first-child, .tabla-flat tr td:first-child {padding-left: 12px}
.tabla-flat tr:last-child td {border:0;}
.tabla-flat input, .tabla-flat input[type='date']{background-color: var(--c0) !important; outline: 1px solid var(--c20); margin: -7px 0; padding: 0 !important; height: 32px !important; text-indent: 8px !important; border-radius: var(--br1);}
.tabla-flat .controles-incremento-small, .tabla-flat .btnm-alt, .tabla-flat .btnm { margin: -7px 0; }
.bx-tabla-flat .bx-btns { border-top: 1px solid var(--c20); }
.bx-tabla-flat .bx-btns a { background-color: var(--c10) !important; color: var(--c100) !important; border-radius: 0 !important; }

.tabla-flat tr.alert, .tabla-flat tr td.alert { color: var(--ro); }

/* TABLA FETCH */

.bx-tabla-fetch{margin: 0; padding: 0; position: relative; overflow: hidden; }
.bx-tabla-fetch .tabla-search-wrapper {position: relative;display: block;padding: 1px;margin-bottom: 8px;}
.bx-tabla-fetch .tabla-search-input {padding-right: 30px;}
.bx-tabla-fetch .tabla-search-clear {position: absolute;right: 8px;top: 50%;transform: translateY(-50%);background: none;border: none;font-size: 16px;cursor: pointer;font-weight: 400;color: var(--c100);}
.bx-tabla-fetch .tabla-wraper{overflow: auto !important; white-space:nowrap !important; border: 1px solid var(--c20); border-radius: var(--br1); }
.bx-tabla-fetch .tabla-wraper .tabla-no-data {padding: 8px 12px; }
.tabla-fetch {width: 100%;border-collapse: collapse;background-color: var(--c0);font-size: var(--t2);overflow: hidden;}
.tabla-fetch thead {background-color: var(--c10);text-align: left; border-bottom: 1px solid var(--c20);}
.tabla-fetch tr {border-bottom: 1px solid var(--c20);}
.tabla-fetch tr:last-child { border: none; }
.tabla-fetch th {padding: 8px 12px;color: var(--c100);font-weight: 500;border-bottom: 0px solid var(--c20);user-select: none;white-space: nowrap;}
.tabla-fetch th.narrow {white-space: nowrap;width: 1px;}
.tabla-fetch td {padding: 8px 12px;color: var(--c70);}
.tabla-fetch tbody tr:nth-child(even) {}
.tabla-fetch tbody tr:hover { color: var(--c100); background-color: var(--c10);transition: background-color 0.2s;}

/* .tabla-pagination {display: flex; flex-wrap: wrap; justify-content: left;gap: 8px;margin: 16px 0;}
.tabla-pagination button {background-color: var(--c0);border: none;padding: 8px 12px; border: 1px solid var(--c0); border-radius: var(--br1);cursor: pointer;font-size: var(--t2);color: var(--c100);transition: all 0.2s ease;}
.tabla-pagination button:hover {background-color: var(--c10); border-color: var(--c20); }
.tabla-pagination button.active {background-color: var(--c0);color: var(--c100); border-color: var(--c20); } */

.tabla-pagination {display: inline-block; margin-top: 8px; padding: 1px}
.tabla-pagination label {display: none;}
.tabla-pagination select { width: 120px; position: relative; background: url(../gui/ico/arrow-down.svg) calc(100% - 4px) 50% no-repeat; background-size: 24px auto; }

.tabla-info { margin-top: 16px; margin-bottom: 16px; }

/* CHART */

.bx-chart { border: 1px solid var(--c20); border-radius: var(--br1); box-shadow: var(--shadow-1); background-color: #FFFFFF; padding: 8px; }
.bx-chart canvas { width: 100%; }

.chart-bar-contenedor{border: 1px solid var(--c20); box-shadow: var(--shadow-1); padding: 16px; border-radius: var(--br1); background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(0,0,0,0.04) 100%);}
.chart-bar {display: flex;gap: 4px;margin: 0;padding: 0;box-sizing: border-box; }
.chart-bar .chart-columna { flex: 1; position: relative; }
.chart-bar .chart-columna .chart-barra {position: relative;height: 160px;}
.chart-bar .chart-columna .chart-barra .chart-valor { position: absolute;bottom: 0;left: 0; right: 0;text-align: center;color: var(--c0);font-weight: bold;border-radius: var(--br1); height: 4px; transition: height 1s ease-out; min-height: 4px; background-color: var(--ka); }
.chart-bar .chart-columna .chart-barra .chart-valor span { font-size: 12px;}
.chart-bar .chart-label { position: relative; margin-top: 8px; padding: 0; height: 16px; line-height: 16px; text-align: center; box-sizing: border-box; }
.chart-bar .chart-label .chart-label-tx { font-size: var(--t1); transform-origin: top left; display: inline-block; white-space: nowrap; height: 16px; line-height: 16px; box-sizing: border-box; }

@keyframes chart-pie {from {transform: rotate(0deg) translate3d(0,0,0);}}
.chart-pie { min-height: 200px; display: grid; grid-gap: 16px; grid-template-columns: 200px 1fr; }
.chart-pie .pie {position: relative;margin: 0;}
.chart-pie .pie::before {content: "";display: block;position: absolute;z-index: 1;width: 100px;height: 100px;background: #FFF;border-radius: 50%;top: 50px;left: 50px;}
.chart-pie .slice {position: absolute;width: 200px;height: 200px;clip: rect(0px, 200px, 200px, 100px);animation: chart-pie 1s;}
.chart-pie .slice span {display: block;position: absolute;top: 0;left: 0;background-color: black;width: 200px;height: 200px;border-radius: 50%;clip: rect(0px, 200px, 200px, 100px);}
.chart-pie .legends { display: flex; align-items: center }
.chart-pie .legends .titulo { margin: 0; padding: 0; }
.chart-pie .legend {list-style-type: none;padding: 0;margin: 0;background: #FFF;display: grid;grid-template-rows: 1fr;grid-gap: 4px;font-size: 12px;}
.chart-pie .legend li {padding: 0 0 0 8px;border-left: 1.25em solid black;}
.chart-pie .legend em {font-style: normal;}
.chart-pie .legend span {padding-left: 4px;}

@keyframes grow-width {from {width: 0;}}
.chart-barline-contendor {border: 1px solid var(--c20); box-shadow: var(--shadow-1); padding: 16px; border-radius: var(--br1); background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(0,0,0,0.04) 100%);}
.chart-barline {list-style-type: none; margin: 0; padding: 0; display: grid; grid-gap: 8px; grid-template-columns: 1fr;
  li {position: relative; margin: 0; padding: 0;
    em, span {white-space: nowrap;display: block;border-bottom: 8px solid var(--c20);padding-bottom: 4px;}
    em { width: 0; font-style: normal; font-weight: 500; color: var(--c100); border-bottom-color: var(--ka);position: absolute;overflow: visible;animation: grow-width 2s;}
    span {text-align: right;}
  }
}

/* GANTT */

.gantt-dia {
	margin: 0; padding: 0; position: relative; overflow-x: auto; overflow-y: hidden; width: 100%;
	.chart {display: flex;flex-direction: column;gap: 2px;margin: 0;padding: 0; position: relative;}
	.group { position: sticky; left: 0; z-index: 1; flex: 0 0 200px; background-color: var(--c10); color: var(--c100); display: flex; align-items: center; padding: 0 12px; box-sizing: border-box; gap: 8px }
	.group .title{ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
	.hours, .tasks {display: flex;position: relative;height: 40px;}
	.hour {flex: 0 0 96px;height: 40px;line-height: 40px;text-align: center; color: var(--c100); background-color: var(--c10);border-right: 1px solid var(--c0);}
	.hour:last-child {border-right: none;}
	.task {position: absolute; height: 40px;background-color: var(--c100);color: var(--c0); outline: 2px solid var(--c0); text-align: left;padding: 0 12px;box-sizing: border-box;border-radius: 4px;font-size: 0.8em; font-weight: 500; white-space: nowrap;overflow: hidden;display: flex; gap: 8px; align-items: center}
	.task .flagPrev { width: 12px; height: 12px; background-color: var(--c0); border-radius: 8px; position: absolute; left: -6px; }
	.task .flagNext { width: 12px; height: 12px; background-color: var(--c0); border-radius: 8px; position: absolute; right: -6px; }
}

.gantt-semana {
	margin: 0; padding: 0; position: relative; overflow-x: auto; overflow-y: hidden; width: 100%;
	.chart {display: flex;flex-direction: column;gap: 2px;margin: 0;padding: 0; position: relative;
		width: 3560px;
		background-image:
			/* Líneas especiales (cada 24 líneas = cada 240px) */
				repeating-linear-gradient(
						to right,
						transparent,
						transparent 239px,
						rgba(0, 0, 0, 0.2) 239px,
						rgba(0, 0, 0, 0.2) 240px
				);

		background-position: 200px 0 !important;
	}
	.chart-stripes {
		width: 3560px;
		background-image:
			/* Líneas especiales (cada 24 líneas = cada 240px) */
				repeating-linear-gradient(
						to right,
						transparent,
						transparent 239px,
						rgba(0, 0, 0, 0.2) 239px,
						rgba(0, 0, 0, 0.2) 240px
				);

		background-position: 200px 0 !important;
	}
	.group { position: sticky; left: 0; z-index: 1; flex: 0 0 200px; background-color: var(--c10); color: var(--c100); display: flex; align-items: center; padding: 0 12px; box-sizing: border-box; gap: 8px }
	.group .title{ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
	.hours, .tasks {display: flex;position: relative;height: 40px;}
	.hour {flex: 0 0 240px;height: 40px;line-height: 40px;text-align: center; color: var(--c100); background-color: var(--c10);border-right: 1px solid var(--c0);}
	.hour:last-child {border-right: none;}
	.task {position: absolute; height: 40px;background-color: var(--c100);color: var(--c0); outline: 2px solid var(--c0); text-align: left;padding: 0;box-sizing: border-box;border-radius: 4px;font-size: 0.8em; font-weight: 500; white-space: nowrap;overflow: hidden;display: flex; gap: 8px; align-items: center}
	.task .flagPrev { width: 12px; height: 12px; background-color: var(--c0); border-radius: 8px; position: absolute; left: -6px; }
	.task .flagNext { width: 12px; height: 12px; background-color: var(--c0); border-radius: 8px; position: absolute; right: -6px; }
}

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

.pop-call{position: relative; cursor: pointer;}
.pop-call.link{cursor: pointer;}
.pop{display:none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 9999; background-color: var(--c0) !important; color: var(--c100) !important; border-radius: var(--br1) !important; margin: 0 !important; padding: 12px !important; white-space: nowrap; border: 1px solid var(--c20); box-shadow: var(--shadow-1); }
.pop-in{position: absolute; top: calc(100% + 8px); left: auto; right: 0;}
.pop-br{position: absolute; bottom: calc(100% + 8px); right: 0px;}

.pop li	{position: relative; margin: 0 0 12px 0 !important; padding: 0 !important; list-style: none !important; display: block !important; min-width: 160px; white-space: nowrap;}
.pop li { background-color: transparent !important; color: transparent !important; border-radius: 0 !important; border: 0 !important; }
.pop li:last-child{ margin: 0 !important; }
.pop li a{text-align:left !important; margin: 0 !important; padding: 0 !important; color: var(--c100) !important; font-size: var(--t2); display: flex !important; gap: 4px; flex-direction: column; background-color: transparent !important; height: auto !important; line-height: normal !important; border-radius: 0 !important; }
.pop li a span {  color: var(--c70) !important; width: 300px; display: inline-block; white-space: wrap; }
.pop li h4{ color: var(--c100) !important; font-size: var(--t3);  }
.pop hr { border: 0; border-bottom: 1px var(--c20) solid; opacity: 1; margin: 12px -12px; padding: 0;}

/* CBPN Cards */

.cbpn-card-perfil{position:relative; width: 100%; background-color: var(--color-90); border-radius: var(--br1);}
.cbpn-card-perfil:before{content:''; display: block; padding-top: 50%;}
.cbpn-card-perfil .cbpn-card-perfil-contenedor {border-radius: var(--br1) !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: var(--br1) !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-100);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: 20px auto; width: 40px;filter: var(--filter-co); -webkit-filter: var(--filter-co);}

/* Mensajes */

.msg-norecords{background-color: var(--c0); color: var(--c70); display: grid; align-items: center; justify-content: center; border: 1px dashed var(--c20); border-radius: var(--br1); padding: 24px 32px;}

.msg{display: block; padding: 12px; border-radius: var(--br1); background: var(--c0); color: var(--c70); overflow: hidden; border: 1px solid var(--ka); border-left: 4px solid var(--ka);}
.msg-aviso{ background: var(--kal); color: var(--ka); border: 1px solid var(--kam); }
.msg-aviso .ico-tx::before{ filter: var(--filter-ka); -webkit-filter: var(--filter-ka);}
.msg-aviso a.link { color: var(--kac) !important; }
.msg-aviso b { color: var(--ka) !important; }

.msg-info{ background: var(--azc); color: var(--az); }

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

.bx-copiar { position: relative; white-space: nowrap; width: calc(100% - 0px); overflow: hidden; text-overflow: ellipsis;  }
.bx-copiar .copiado { position: absolute; top: 50%; right: 0; z-index: 2; transform: translate(0,-50%); background-color: var(--ka); color: var(--kac); padding: 2px 6px; border-radius: var(--br1); display: inline-block; pointer-events: none; font-size: var(--t1); text-transform: uppercase; }

/* Signature */

#signature-pad {border: 1px solid var(--c20);width: 100%;max-width: 500px;height: 200px;border-radius: var(--br1);}

/* Formularios */

.ffbx{display: flex; flex-direction: column; padding: 0 0 16px 0; position: relative;}
.ffbx:last-child{padding: 0}
.bx-last .ffbx{padding: 0}
.ffbx .ff-label, .ff-label{position: relative; margin: 0 0 6px 0; padding: 0;  color: var(--c100); }
.ffbx .ff-nota{margin-top:5px; font-size: var(--t1); color: var(--tx2);}
.ffbx .ff-requerido{margin-top:5px; font-size: var(--t1); color: var(--ro);}
.ffbx .cta { background-color: var(--kal); color: var(--ka); padding: 4px 8px; border-radius: var(--br1); position: absolute; top: 4px; right: 4px; }

.ffbx-color {display: grid; grid-template-columns: 40px 1fr; grid-gap: 8px; }
.ffbx-color .ff-label { grid-column: 1 / 3; grid-row: 1 / 2; margin: 0; padding: 0; }
.ffbx-color .ffbx-select { grid-column: 1 / 2; grid-row: 2 / 3; }
.ffbx-color .ffbx-output { grid-column: 2 / 3; grid-row: 2 / 3; }

.ffbx-float { position: relative; }
.ffbx-float .ff-label{position: absolute; top: -10px; margin: 0; padding: 0 4px;  color: var(--c70); z-index: 1; font-size: var(--t1); background-color: var(--c0); }


input, textarea, select, input[type=date], input[type=time], input[type=datetime-local], input[type=email], input[type=color]{background-color: var(--c0) !important; border: 0; outline: 1px solid var(--c20); border-radius: var(--br1); -webkit-appearance:none; font-size: 1rem; margin: 0; padding: 0; text-indent: 12px; color: var(--c70); box-sizing: border-box; width: 100%; caret-color: var(--c100); position: relative;}
input[type="text"],input[type="email"],input[type="color"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="password"],select{height: 38px}
textarea{padding: 12px; text-indent: 0;}
select{width:100%; height: 40px; position: relative;}
select + .ico-input::before{content:""; position: absolute; right: 0; top: 28px; pointer-events: none; background: url(../gui/ico/arrow-down.svg) 50% 50% no-repeat; background-size: 24px auto; width: 38px; height: 38px; filter: var(--filter-md); -webkit-filter: var(--filter-md);}

input:read-only + .ico-input::before{content:""; position: absolute; right: 0; top: 27px; pointer-events: none; background: url(../gui/ico/lock.svg) 50% 50% no-repeat; background-size: 24px auto; width: 38px; height: 38px; filter: var(--filter-md); -webkit-filter: var(--filter-md);}

input[type="color"] { outline: 1px solid var(--c20); -webkit-appearance:none !important; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"]::-webkit-color-swatch { border: 0; }

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

.checkbox {display: block;position: relative;padding: 2px 0 2px 32px;margin-bottom: 12px;cursor: pointer;font-size: var(--t2);-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: 24px;width: 24px;background-color: var(--c20); border: 0; border-radius: var(--br3);}
.checkbox input:checked ~ .checkmark {background-color: var(--c100); border: 0; }
.checkmark:after {content: "";position: absolute;display: none;}
.checkbox input:checked ~ .checkmark:after {display: block;}
.checkbox .checkmark:after {left: 8px;top: 4px;width: 5px;height: 10px;border: solid var(--c0);border-width: 0 2px 2px 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: 2px 0 16px 48px; display: block;  font-weight: 400;}
.checkbox-toggle:last-child span {padding: 2px 0 0 48px !important;}
.checkbox-toggle input[type=checkbox]{position: absolute; top: 0; left: 0; -webkit-appearance: none;-moz-appearance: none;appearance: none;-webkit-tap-highlight-color: transparent;cursor: pointer;height: 24px;width: 40px !important;border-radius: var(--br3);display: inline-block;margin: 0; border: 0; outline: none; background-color: var(--c20) !important;transition: all 0.2s ease;}
.checkbox-toggle input[type=checkbox]:focus {outline: 0;}
.checkbox-toggle .toggle:after {content: "";position: absolute;top: 2px;left: 2px;width: 20px;height: 20px;border-radius: 50%;background: var(--c0);transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);}
.checkbox-toggle .toggle:checked {background-color: var(--c100) !important;}
.checkbox-toggle .toggle:checked ~ span { font-weight: 400;}
.checkbox-toggle .toggle:checked:after {transform: translate(16px);background: var(--c0);}

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

.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 16px; height: 32px; line-height: 32px; border-radius: 40px; cursor: pointer;font-size: var(--t2);font-weight: 400; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: var(--c0); text-align: left;}
.checkbox-tag input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkbox-tag input:checked + span {background-color: var(--c100); color: var(--c0);}


.radio {display: block;position: relative;padding: 0px 0 4px 35px;margin-bottom: 10px;cursor: pointer;font-size: var(--t2);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; transition: all 0.2s ease-in-out;}
.radio .radiomark {position: absolute;top: 0;left: 0;height: 16px;width: 16px;background-color: var(--c10); border: 1px solid var(--c20); border-radius: 50%; transition: all 0.2s ease-in-out; }
.radio input:checked ~ .radiomark {background-color: var(--c0); border: 1px solid var(--c100);}
.radio .radiomark:after {content: "";position: absolute;display: none;}
.radio input:checked ~ .radiomark:after {display: block;}
.radio .radiomark:after {top: 2px;left: 2px;width: 12px;height: 12px;border-radius: 50%;background: var(--c100);}

.radio-cta {  }

.radio-cta span{display: block;position: relative;padding: 10px 12px; outline: 1px solid var(--c20); border-radius: var(--br1); margin-bottom: 8px;cursor: pointer;font-size: var(--t2); -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;text-align: left; }
.radio-cta span.ico{background-size: auto 24px !important; background-repeat: no-repeat !important; padding-left: 45px;}
.radio-cta span.ico::before{ left:13px;}
.radio-cta input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.radio-cta input:checked + span {outline: 2px solid var(--c100); }
.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:last-child span { margin: 0; }

.bx-radio-tag {display: grid; grid-gap: 8px; grid-template-columns: repeat(5, 1fr);}
.radio-tag {  }
.radio-tag div{ display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; position: relative;padding: 0; border-radius: var(--br1); cursor: pointer;font-size: var(--t3);font-weight: 500; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: var(--c10); text-align: left;}
.radio-tag input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.radio-tag input:checked + div {padding: 0; background-color: var(--c100); color: var(--c0);}
.radio-tag input:checked + div .seleccionado {display: block}

.radio-inline{background-color: var(--color-90); display: flex; border-radius: var(--br1); padding: 4px;}
.radio-inline input[type="radio"] {opacity: 0;position: fixed;width: 0; margin: 0;}
.radio-inline label {flex: 1;text-align: center;display: inline-block;background-color: transparent; color: var(--tx2); height: 32px; line-height: 32px;font-size: var(--t2);border-radius: var(--br1);margin: 0;}
.radio-inline input[type="radio"]:checked + label {background-color: var(--fm2); color: var(--tx3);}

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

.radio-img-bx {display: grid; grid-gap: 16px; grid-template-columns: 1fr 1fr; grid-template-rows: auto}
.radio-img {-webkit-tap-highlight-color: transparent; position: relative;}
.radio-img span.img{display: block;border: 3px solid var(--fm1); border-radius: var(--br2t);cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; background-color: var(--color-95) !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(--t2);text-align: center; background-color: var(--fm1); color: var(--tx2); -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(--fm2);}
.radio-img input:checked + span.img + span.titulo {background-color: var(--fm2); color: var(--tx3);}

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

.controles-incremento-small{position: relative; width: 120px; height: 32px;-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: var(--br1); background-color: var(--c0); border: 1px solid var(--c20); }
.controles-incremento-small div{text-align: center; line-height: 32px; font-size: var(--t2); cursor: pointer !important; }
.controles-incremento-small .incremento-menos{width: 40px; position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; border-right: 1px solid var(--c20);}
.controles-incremento-small .incremento-menos::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/menos.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-md); -webkit-filter: var(--filter-md);}
.controles-incremento-small .incremento-campo{width: auto; height: 32px; text-align: center; padding: 0px; text-indent: 0px; position: absolute; top: 0; left: 0; right: 0; color: var(--tx1); box-shadow: none; border: 0px; background-color: transparent !important;}
.controles-incremento-small .incremento-mas{width: 40px; position: absolute; right: 0; top: 0; bottom: 0; border-left: 1px solid var(--c20);}
.controles-incremento-small .incremento-mas::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/add.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-md); -webkit-filter: var(--filter-md);}

.buscador {position: relative; margin: 0; padding: 0; }
.buscador input{ border-radius: var(--br1) !important; background-color: var(--c0); outline: 1px solid var(--c20); padding: 0 !important; border: 0; text-indent: 40px; }
.buscador .ico-buscar {position: absolute; top: 0; left: 0; bottom: 0; width: 40px; display: block;}
.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-co); -webkit-filter: var(--filter-co);}
.buscador .ico-scaner {position: absolute; top: 0; right: 52px; width: 40px; height: 40px; display: block;}
.buscador .ico-scaner::before{content:""; position: absolute; top: 0; right: 0px; bottom: 0; background: url(../gui/ico/scaner.svg) 50% 50% no-repeat !important; background-size: 20px auto !important; width: 40px;filter: var(--filter-md); -webkit-filter: var(--filter-md);}
.buscador .ico-add {position: absolute; top: 0; right: 0; width: 40px; height: 40px; display: block; background-color: var(--c100); border-radius: var(--br1); }
.buscador .ico-add::before{content:""; position: absolute; top: 0; right: 0px; 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: 48px;}
.buscador-plus input{}

.buscador .resultados{border-top: 1px solid var(--color-10); padding:0}
.buscador .resultados ul {margin:0; padding: 0;}
.buscador .resultados ul li {margin:0; padding: 0; border-bottom: 1px solid var(--color-10); list-style: none;}
.buscador .resultados ul li:last-child {border: 0}
.buscador .resultados ul li a{display: block; padding: 13px 16px;}

input:focus{outline: 1px solid var(--ka); border: 0;}
input:focus + .ff-label{background-color: var(--c0); color: var(--c0);}
textarea:focus{outline: 1px solid var(--ka); border: none; }
textarea:focus + .ff-label{background-color: var(--c0); color: var(--c0);}
select:focus{outline: 1px solid var(--ka); border: none; }
select:focus + .ff-label{background-color: var(--c0); color: var(--c0);}

input:read-only { outline: 1px solid var(--c20); color: var(--c70); }

::-webkit-input-placeholder {color: var(--c50);}
/*::-webkit-scrollbar{display:none}*/
::-webkit-scrollbar{}

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 {
  outline: 1px solid var(--c20);
  text-indent: 8px;
  -webkit-text-fill-color: var(--c100);
  -webkit-box-shadow: 0 0 0px 1000px var(--c0) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.btn{ position: relative; background-color: var(--ka); color: var(--c0); font-size: 1rem; font-weight: 500; outline: 1px solid var(--c100); padding: 8px 12px; display: inline-flex; gap:4px; align-items: center; justify-content: center; text-decoration: none; border-radius: var(--br1); }
.btn:hover{ background-color: var(--c80); background-color: var(--c80) }
.btn.xs{padding: 2px 8px; }
.btn.sm{padding: 3px 12px; gap: 4px; }
.btn.md{padding: 4px 12px; gap:4px; }
.btn.disabled{ pointer-events: none; background-color: var(--c70) !important; color: var(--c20) !important; }
.btn .ico { margin-left: -4px; }
.btn .ico::before{content:""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-repeat: no-repeat !important; background-size: 100% auto !important; background-position: 50% 50% !important; filter: var(--filter-ba); -webkit-filter: var(--filter-ba); }
.btn.alt{ background-color: var(--c10); color: var(--c70); outline-color: var(--c20); }
.btn.alt:hover{ background-color: var(--c0); }
.btn.alt .ico::before{content:""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-repeat: no-repeat !important; background-size: 100% auto !important; background-position: 0 50% !important; filter: var(--filter-co); -webkit-filter: var(--filter-co);  }

.btn.del{ background-color: var(--ro) !important; color: var(--roc) !important; outline-color: var(--ro); }
.btn.del .ico::before{content:""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-repeat: no-repeat !important; background-size: 100% auto !important; background-position: 0 50% !important; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);  }

.btn-ico { position: relative; background-color: var(--c100); width: 38px; height: 38px; border-radius: 38px; text-indent: -6000px; display: inline-block; outline: 1px solid var(--c100) }
.btn-ico::before {content:""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-repeat: no-repeat !important; background-size: 20px auto !important; background-position: 50% 50% !important; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);  }
.btn-ico.alt{ background-color: var(--c10); outline-color: var(--c20); }
.btn-ico.alt:hover{ background-color: var(--c0); }
.btn-ico.alt::before {filter: var(--filter-co); -webkit-filter: var(--filter-co);  }
.btn-ico.md {width: 32px; height: 32px; border-radius: 32px;}




.btnm{ position: relative; outline: 0; background-color: var(--c100); color: var(--c0); font-size: var(--t2); padding: 0 12px; height: 32px; line-height: 32px; display: inline-block; text-decoration: none; border-radius: var(--br1); text-align: center; }

.btnm-alt{ position: relative; outline: 1px solid var(--c20); background-color: var(--c10); color: var(--c100); font-size: var(--t2); padding: 0 12px; height: 32px; line-height: 32px; display: inline-block; text-decoration: none; border-radius: var(--br1); text-align: center; }

.btn-sort{position: relative; outline: 1px solid var(--c20); background-color: var(--c10); margin: 0; padding: 0; width: 40px; height: 40px; display: inline-block; border-radius: var(--br1); -webkit-appearance:none; }
.btn-sort::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/sort.svg) 50% 50% no-repeat; background-size: 20px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}

.btn-del{position: relative; outline: 1px solid var(--c20); background-color: var(--c10); margin: 0; padding: 0; width: 40px; height: 40px; display: inline-block; border-radius: var(--br1); -webkit-appearance:none; }
.btn-del::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/basura.svg) 50% 50% no-repeat; background-size: 20px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}

.btn-alerta{background-color: var(--ro); color: var(--roc);}
.btn-wide{display: block; box-sizing: border-box !important;}
.btn-disabled{pointer-events: none !important; background-color: var(--c10) !important; color: var(--c30) !important; outline-color: var(--c10); }

.bx-btns{display: flex; flex-flow: row wrap; gap: 16px; margin: 0;}
.bx-btns-stack{display: flex; flex-flow: column wrap; gap: 8px; margin: 0;}
.bx-btns a{flex:1; white-space: nowrap; }
.bx-btns a.key{flex-basis: 100%}
.bx-btns a.on, .bx-btns a.btn{ display: flex !important; }
.bx-btns a.btn.alt{ display: flex !important; }
.bx-btns a.off{ background-color: var(--c0); color: var(--c100);}
.bx-btns a.alerta{ background-color: var(--rol); color: var(--ro); outline: none;}

.bx-btns-lateral{display: flex; flex-flow: row wrap; gap: 8px; margin: 0;}
.bx-btns-lateral a{flex:1; text-align: center; background-color: var(--c20); color: var(--c70); line-height: normal; padding: 12px 24px; border-radius: var(--br1); font-weight: 500;}
.bx-btns-lateral a.key{flex-basis: 100%}
.bx-btns-lateral a.on{ background-color: var(--c100); color: var(--c0) !important;}
.bx-btns-lateral a.alerta{ background-color: var(--ro); color: var(--roc) !important;}

.bx-btns-modal{display: flex; flex-flow: column wrap; gap: 0; margin: 0 -24px -24px -24px;}
.bx-btns-modal a{flex:1; text-align: center; color: var(--c100); padding: 0 24px; height: 40px; line-height: 40px; font-weight: 500; border-top: 1px solid var(--c20); box-sizing: border-box; }
.bx-btns-modal a.on{ color: var(--c100) !important;}
.bx-btns-modal a.alerta{ color: var(--ro) !important;}

.bx-inputs{background-color: var(--c0); border: 1px solid var(--c20); border-radius: var(--br1); padding: 0 0 0 12px; }
.bx-inputs .ffbx{display: grid; padding: 0; grid-gap: 0 16px; grid-template-columns: minmax(72px, auto) 1fr; border-bottom: 1px solid var(--c20);}
.bx-inputs .ffbx:last-child{border:0}
.bx-inputs .ffbx .ff-label{margin: 0; padding: 0; height: 40px; line-height: 40px; grid-column: 1; position: relative; font-weight: 400; color: var(--c100); }
.bx-inputs .ffbx .ff-label-float{display: none;}
.bx-inputs .ffbx .ff-nota{margin: 0 0 0 0; padding:6px 8px; font-size: var(--t1); color: var(--color-60); display: none;}
.bx-inputs .ffbx .ff-requerido{background-color: var(--c0) !important; border: 0 !important; border-bottom: 1px solid var(--ro) !important; color: var(--c100) !important;}
.bx-inputs .ffbx .ff-requerido-label{color: var(--c100) !important;}
.bx-inputs input, .bx-inputs select{border:0; border-radius: 0; outline: 0; background-color: transparent !important; padding: 0; height: 40px !important; text-indent: 0; grid-column: 2;}
.bx-inputs textarea{grid-column: 1 / 3; border:0; border-radius: 0; background-color: transparent !important; box-shadow: none !important; padding: 0; text-indent: 0;}
.bx-inputs .ffbx:last-child input, .bx-inputs .ffbx:last-child select{border: 0}

.bx-inputs select.multiple{width:100%; height: auto !important; position: relative; }
.bx-inputs select + .ico-input::before{content:""; position: absolute; right: 0px; top: 0px; pointer-events: none; background: url(../gui/ico/arrow-down.svg) 50% 50% no-repeat; background-size: 24px auto; width: 40px; height: 40px; filter: var(--filter-md); -webkit-filter: var(--filter-md);}
.bx-inputs .fake { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--c20); }
.bx-inputs .fake:last-child{border:0}

.bx-inputs .ffbx-append{border-bottom: 1px solid var(--c20);}

.bx-inputs .checkbox {padding: 12px 12px 12px 32px;margin-bottom: 0;border-bottom: 1px solid var(--c20);}
.bx-inputs .checkbox:last-child{border: 0;}
.bx-inputs .checkbox .checkmark {top: 10px;}

.bx-inputs .checkbox-toggle {display: block; padding: 0; margin: 0;}
.bx-inputs .checkbox-toggle span {padding: 11px 64px 11px 0; border-bottom: 1px solid var(--c20);}
.bx-inputs .checkbox-toggle:last-child span {padding: 11px 64px 11px 0 !important; border: 0;}
.bx-inputs .checkbox-toggle input[type=checkbox]{top: 8px; left: auto; right: 12px !important; height: 24px !important;width: 40px !important; padding: 0;}
.bx-inputs .checkbox-toggle .toggle:after {content: "";position: absolute;top: 3px;left: 3px;width: 18px;height: 18px;border-radius: 50%;background: var(--c0);transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);}
.bx-inputs .checkbox-toggle .toggle:checked:after {transform: translate(16px);background: var(--c0);}

.bx-inputs .checkbox-toggle-alerta {display: block; padding: 0; margin: 0;}
.bx-inputs .checkbox-toggle-alerta span {padding: 11px 64px 11px 0; border-bottom: 1px solid var(--c20);}
.bx-inputs .checkbox-toggle-alerta:last-child span {padding: 11px 64px 11px 0 !important; border: 0;}
.bx-inputs .checkbox-toggle-alerta input[type=checkbox]{top: 8px; left: auto; right: 12px !important; height: 24px !important;width: 40px !important; padding: 0;}
.bx-inputs .checkbox-toggle-alerta .toggle:after {content: "";position: absolute;top: 3px;left: 3px;width: 18px;height: 18px;border-radius: 50%;background: var(--c0);transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);}
.bx-inputs .checkbox-toggle-alerta .toggle:checked:after {transform: translate(16px);background: var(--c0);}

.bx-inputs .radio {display: block;position: relative;padding: 12px 16px 12px 40px;margin-bottom: 0;cursor: pointer;font-size: var(--t2);font-weight: 400;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; border-bottom: 1px solid var(--c20);}
.bx-inputs .radio:last-child{ border: 0; }
.bx-inputs .radio input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0; transition: all 0.2s ease-in-out;}
.bx-inputs .radio .radiomark {position: absolute;top: 8px;left: 0;height: 20px;width: 20px;background-color: var(--c20); border: 2px solid var(--c20); border-radius: 50%; transition: all 0.2s ease-in-out; }
.bx-inputs .radio input:checked ~ .radiomark {background-color: var(--c0); border: 2px solid var(--c100);}
.bx-inputs .radio .radiomark:after {content: "";position: absolute;display: none;}
.bx-inputs .radio input:checked ~ .radiomark:after {display: block;}
.bx-inputs .radio .radiomark:after {top: 2px;left: 2px;width: 16px;height: 16px;border-radius: 50%;background: var(--c100);}

.bHeader{border-bottom: 1px solid var(--c20); margin: 0; padding: 10px 0; position: relative;}
.bHeader h4{ font-size: var(--t3); margin: 0; padding: 0; display: block;}
.bHeader .bLink{position: absolute; top: 0; right: 16px; color: var(--ka); background-color: var(--kal); font-weight: 500; height: 24px; line-height: 24px; padding: 0 10px; border-radius: 24px; font-size: var(--t2); }
.bHeader h4 ~ p{margin: 4px 0 0 0; color: var(--c70);}

.bx-lista-flat .bHeader h4{padding: 0 0 0 12px;}

/* POPOVERS */

[popover] {animation: openPopover 0.3s ease;}
[popover]::backdrop {background-color: var(--overlay); pointer-events: none; }

@keyframes openPopover {from {opacity: 0;transform: translateY(-16px);}to {opacity: 1;}}

.helper { position: relative; }

.helper:popover-open {width: 320px;min-height: 120px;max-height: 50vh;position: fixed;inset: unset;bottom: 32px;right: 32px;margin: 0;padding: 24px 24px 0 24px;border: 1px solid var(--c20);border-radius: var(--br1);box-shadow: var(--shadow-1);}

.helper:popover-open {
	h4 { margin-bottom: 16px; }
}

.helper .cerrar { position: sticky; bottom: 0px; margin: 0 -24px; padding: 24px; background: linear-gradient(180deg, transparent, var(--c0));}

.bx-ellipsis {width: 100%;}
.ellipsed {overflow: hidden;text-overflow: ellipsis;white-space: initial;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.no-pointer{ pointer-events: none; }
.bx-print-viewer { border: 1px solid var(--c20); border-radius: var(--br1); padding: 16px; height: 240px; overflow: auto; }


/* Dropzone */

.bx-dropzone{background-color:var(--c0); border-radius: var(--br1); padding: 0; display: block; }
.bx-dropzone .area-drop{position: relative; border: 1px dashed var(--c20); border-radius: var(--br1); margin: 0; padding: 24px; display: grid; align-items: center; justify-content: center}
.bx-dropzone .area-drop span{position: relative; padding: 0 0 0 32px; pointer-events: none; color: var(--c100);}
.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-10);}
.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{ font-size: var(--t1); color: var(--c70); }
/*.bx-dropzone .area-repo .dz-preview .dz-progress{position: absolute; top: 0; right: 0; text-indent: -6000px; width: 40px; height: 40px;}

.bx-dropzone .area-repo .dz-preview .dz-abrir{position: absolute; top: 5px; right: 36px; text-indent: -6000px; width: 32px; height: 32px; border-radius: 32px; background-color: var(--c100l);}
.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) 50% 50% no-repeat; background-size: 16px auto; filter: var(--filter-md); -webkit-filter: var(--filter-md);}

.bx-dropzone .area-repo .dz-preview .dz-upload.subiendo{position: absolute; top: 5px; right: 0; text-indent: -6000px; width: 32px; height: 32px;border-radius: 32px; background-color: var(--aml);}
.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-am); -webkit-filter: var(--filter-am);}

.bx-dropzone .area-repo .dz-preview .dz-upload.listo{position: absolute; top: 5px; right: 0; text-indent: -6000px; width: 32px; height: 32px; 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) 50% 50% no-repeat; background-size: 20px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}

.bx-dropzone .area-repo .dz-preview .dz-remove{position: absolute; top: 5px; right: 0; text-indent: -6000px; width: 32px; height: 32px; 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(--color-10); 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: 32px 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(--color-00); height: 16px; line-height: 16px; padding: 0 4px; border-radius: var(--br1);}
.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(--color-00);}
.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: 16px auto; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

.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(--color-00); 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) 50% 50% no-repeat; background-size: 20px auto; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

.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(--color-00); 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) 50% 50% no-repeat; background-size: 12px 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: -6000px; width: 32px; height: 32px; border-radius: 32px; background-color: var(--color-00);}
.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) 50% 50% no-repeat; background-size: 16px auto; filter: var(--filter-ba); -webkit-filter: var(--filter-ba);}

/* Auth */

.cbpn-auth{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--c0); }
.cbpn-auth .logo { position: absolute; top: 32px; left: 32px; }
.cbpn-auth .logo img { height: 32px; }
.cbpn-auth .cbpn-auth-form{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 480px; padding: 32px; box-sizing: border-box; border-radius: var(--br1); }

.cbpn-auth .cbpn-auth-form label.error{color: var(--ro); margin: 0; margin: -8px 0 8px 0; display: none !important;}
.cbpn-auth .cbpn-auth-form .required.error{border: 1px var(--ro) solid;}
.cbpn-auth .cbpn-auth-data{background-color: var(--c10); padding: 32px; box-sizing: border-box; border-radius: var(--br1);}
.cbpn-auth .cbpn-auth-footer{margin-top: 16px; text-align: center; display: none;}

/* Auth */

.cbpn-logout{}
.cbpn-logout .cbpn-logout-header .logo {position: relative; width: 56px; height: 24px; display: block; margin: 32px auto 0px auto;}
.cbpn-logout .cbpn-logout-header .logo::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; background: url(https://api.cbpn.mx/gui/logo.svg) 50% 50% no-repeat; background-size: 56px auto; width: 56px;filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.cbpn-logout .cbpn-logout-data{padding: 32px; box-sizing: border-box;}

/* Layout Admin */

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

.layout-admin .bx-nav{ grid-column: 1 / 2; grid-row: 1 / 2; position: relative; overflow-x: hidden; overflow-y: scroll; border-right: 1px solid var(--c20); background-color: var(--c0); }

.layout-admin .bx-nav .bx-nav-contenedor{ padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; }
.layout-admin .bx-nav .t-bx-modulos {display: flex; flex-direction: column; gap: 24px; }

.layout-admin .bx-nav .nav-call-mobile { width: fit-content; block-size: fit-content; height: 32px; line-height: 32px; border-radius: 32px; color: var(--c100); background-color: var(--c10); display: none;}
.layout-admin .bx-nav .nav-call-mobile::before{content:"Cerrar";  padding: 0 12px;}

.layout-admin .bx-nav .nav-logo { position: relative; display: none; padding: 0; margin: 0; height: 24px; }
.layout-admin .bx-nav .nav-logo::before {content:""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: url(../gui/logo.svg); background-repeat: no-repeat !important; background-size: auto 100% !important; background-position: 0 0 !important; filter: var(--filter-co); -webkit-filter: var(--filter-co);  }

.layout-admin .bx-nav .badge-usuario { position: sticky; top: 0; z-index: 1; margin: -24px -24px 0 -24px; padding: 24px; box-sizing: border-box; background-color: var(--c0); border-bottom: 1px solid var(--c20); }

.layout-admin .bx-nav h4 { font-size: var(--t3); line-height: normal; color: var(--c100); margin: 0 0 8px 0; padding:0;}
.layout-admin .bx-nav ul.bx-links{display: grid; grid-gap: 4px; grid-template-columns: 1fr; margin: 0; padding: 0px; position: relative; background-color: transparent; overflow: hidden; border: 0px solid var(--c20); box-shadow: none; }
.layout-admin .bx-nav ul.bx-links-hr { background-color: var(--c0); }
.layout-admin .bx-nav ul.bx-links li{list-style: none; margin: 0; padding: 0; box-sizing: border-box; position: relative; width: 100%;}
.layout-admin .bx-nav ul.bx-links li a{ font-size: var(--t2); padding: 4px 0; display: block;  border: 0; color: var(--c100); font-weight: 400; width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layout-admin .bx-nav ul.bx-links li a::before { background-image: none !important; }

.layout-admin .bx-nav .sidebar { margin: 0 -12px; padding: 0; display: grid; grid-gap: 1px; grid-template-columns: 1fr; }
.layout-admin .bx-nav .sidebar a {  position: relative;display: flex;gap: 8px;align-items: center;color: var(--c100); font-weight: 400; line-height: normal;padding: 8px 12px; margin: 0; transition: 0.3s; border-radius: var(--br1); }
.layout-admin .bx-nav .sidebar a:hover { background-color: var(--c0) }
.layout-admin .bx-nav .sidebar a.active { background-color: var(--c0) }
.layout-admin .bx-nav .sidebar a span:nth-child(1) {flex: 1 1 auto;}
.layout-admin .bx-nav .sidebar a span:nth-child(2) { width: 20px; height: 20px; rotate: 0deg; transition: 0.3s; }
.layout-admin .bx-nav .sidebar a span:nth-child(2)::before{content:""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../gui/ico/arrow-down.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-md); -webkit-filter: var(--filter-md);}
.layout-admin .bx-nav .sidebar a.open span:nth-child(2) {rotate: -180deg; transition: 0.3s;}

.layout-admin .bx-nav .sidebar a .badge { background-color: var(--c100); color: var(--c0); width: 24px; height: 24px; line-height: 20px; border-radius: 24px; text-align: center; font-size: var(--t1); font-weight: 500; }
.layout-admin .bx-nav .sidebar a .badge::before{ background: none !important; }

.layout-admin .bx-nav .subnav {position: relative;overflow: hidden;height: 0;transition: 0.3s; }
.layout-admin .bx-nav .subnav::before { content: ""; position: absolute; top: 20px; left: 22px; bottom: 20px; border-left: 1px solid var(--c20); }
.layout-admin .bx-nav .sidebar a span { pointer-events: none; }
.layout-admin .bx-nav .subnav-inner {position: absolute;top: 0;left: 0;width: 100%; display: grid; grid-gap: 1px;}
.layout-admin .bx-nav .subnav a {padding-left: 40px; font-weight: 400;}
.layout-admin .bx-nav .subnav a:hover {}
.layout-admin .bx-nav .subnav a::before {content: "";position: absolute;top: 50%;left: 20px;translate: 0 -50%;width: 5px;height: 5px;border-radius: 50%;background-color: var(--c20);}
.layout-admin .bx-nav .subnav a:hover::before {background-color: var(--c100);}
.layout-admin .bx-nav .sidebar a.active::before {background-color: var(--c100);}

.layout-admin .contenedor { grid-column: 2 / 3; grid-row: 1 / 2; overflow-x: hidden; overflow-y: scroll; padding: 24px;}
.layout-admin .contenedor .header-helper{ display: none; margin: -32px -32px 24px -32px; padding: 12px; border-bottom: 1px solid var(--c20); }
.layout-admin .contenedor .header { display: grid; grid-gap: 16px; grid-template-columns: 1fr 32px; margin: 0 0 24px 0; padding: 0; background-color: var(--c0); }
.layout-admin .contenedor .header .modulo-titulo { grid-column: 1 / 2; grid-row: 1 / 2; display: flex; align-items: center; justify-content: left; }
.layout-admin .contenedor .header .modulo-titulo h1 { margin: 0; padding: 0; font-size: var(--t4); }
.layout-admin .contenedor .header .nav-call { grid-column: 2 / 3; grid-row: 1 / 2; width: 32px; height: 32px; border-radius: 32px; position: relative; background-color: var(--c0); cursor: pointer; }
.layout-admin .contenedor .header .nav-call::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/burger.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.layout-admin .contenedor .header .modulo-nav { grid-column: 1 / 3; grid-row: 2 / 3; padding: 0; display: flex; gap: 8px; flex-wrap: wrap }
.layout-admin .contenedor .header .modulo-hint { grid-column: 1 / 3; grid-row: 3 / 4; padding: 0; display: none; }
.layout-admin .contenedor .contenido { padding: 0; box-sizing: border-box; }

.layout-admin-cerrado {grid-template-columns: 1fr;}
.layout-admin-cerrado .contenedor { grid-column: 1 / 2;}
.layout-admin-cerrado .bx-nav { display: none; }

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

.layout-admin ul.bx-bloques{display: grid; grid-gap: 24px; margin: 0; padding: 0; grid-template-columns: 1fr; position: relative; }
.layout-admin ul.bx-bloques li{list-style: none; margin: 0; padding: 12px; box-sizing: border-box; position: relative; width: 100%; background-color: var(--c0); border: 1px solid var(--c20);  border-radius: var(--br1); box-shadow: var(--shadow-1); }

.layout-admin ul.bx-bloques ul.bx-columnas{display: grid; grid-gap:4px; grid-template-columns: 1fr; margin: 0; padding: 0;}
.layout-admin ul.bx-bloques ul.bx-columnas li{margin: 0; padding: 12px; background-color: var(--c0); border-radius: var(--br1); border: 1px solid var(--c20); display: grid; grid-gap: 16px; grid-template-columns: 1fr auto auto; box-shadow: none; line-height: normal;}

.sortable-placeholder { background-color: var(--c0); }



.grid-book {display: grid; grid-gap: 16px; padding: 0px; box-sizing: border-box; grid-template-columns: 1fr 280px;}
.grid-book > div {padding: 0; box-sizing: border-box;}

.grid-book .clases { display: grid; grid-gap: 24px; grid-template-columns: 1fr; }
.grid-book .clases .clase { display: grid; grid-gap: 12px 16px; padding: 12px 16px; grid-template-columns: auto 1fr auto; border: 0px solid var(--c20); background-color: var(--c10); border-radius: var(--br1); }
.grid-book .clases .clase:last-child { }
.grid-book .clases .clase .horas { grid-row: 1 / 2; grid-column: 1 / 2; border-radius: var(--br1); overflow: hidden; }
.grid-book .clases .clase .horas .inicio { padding: 4px 12px; text-align: center; background-color: var(--c100); color: var(--c0); font-size: var(--t1); }
.grid-book .clases .clase .horas .fin { padding: 4px 12px; text-align: center; background-color: var(--c20); color: var(--c100); font-size: var(--t1); }
.grid-book .clases .clase .nombre { grid-row: 1 / 2; grid-column: 2 / 3; display: flex; align-items: center; }
.grid-book .clases .clase .acciones { grid-row: 1 / 2; grid-column: 3 / 4; display: flex; align-items: center; }
.grid-book .clases .clase .acciones .pop-call { width: 40px; height: 40px; border-radius: 40px; background-color: var(--c0); border: 1px solid var(--c20); position: relative; }
.grid-book .clases .clase .acciones .pop-call::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/opcion.svg) 50% 50% no-repeat; background-size: 32px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.grid-book .clases .clase .recover { grid-row: 1 / 2; grid-column: 3 / 4; display: flex; align-items: center; }
.grid-book .clases .clase .recover .link-recover { width: 40px; height: 40px; border-radius: 40px; background-color: var(--c0); border: 1px solid var(--c20); position: relative; }
.grid-book .clases .clase .recover .link-recover::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/back.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.grid-book .clases .clase .contenido { grid-row: 2 / 3; grid-column: 1 / 4; padding: 0; background-color: transparent; margin: 0 -16px -12px -16px; }
.grid-book .clases .clase .contenido .sin-reservas { border-top: 1px solid var(--c20); padding: 12px 16px; }
.grid-book .clases .clase .contenido details{margin: 0; padding: 0; border-radius: 0; border: 0; border-top: 1px solid var(--c20); background-color: transparent; overflow: hidden; }
.grid-book .clases .clase .contenido details[open] summary{border-radius: 0; background: var(--c10lineal); }


.calendario {width: 100%;border-radius: var(--br1); background-color: var(--c0); overflow: hidden; border: 1px solid var(--c20); }
.calendario .calendario-header {display: flex;align-items: center; margin: 0; padding: 4px 4px 4px 12px;justify-content: space-between; border-bottom: 1px solid var(--c20); }

.calendario .calendario-header .calendario-mes { margin: 0; padding: 0; height: 32px; line-height: 32px; }

.calendario .calendario-header .calendario-nav {display: flex;}
.calendario .calendario-header .calendario-nav .calendario-nav-prev{ width: 32px; aspect-ratio:1/1; position: relative; text-indent: -6000px; cursor: pointer; border-radius: 100%; }
.calendario .calendario-header .calendario-nav .calendario-nav-prev::before{content:""; position: absolute; top: 0; right: 0; bottom: 0; background: url(../gui/ico/arrow-left.svg) 50% 50% no-repeat; background-size: 24px auto; width: 32px;filter: var(--filter-md); -webkit-filter: var(--filter-md);}
.calendario .calendario-header .calendario-nav .calendario-nav-next{ width: 32px; aspect-ratio:1/1; position: relative; text-indent: -6000px; cursor: pointer; border-radius: 100%; }
.calendario .calendario-header .calendario-nav .calendario-nav-next::before{content:""; position: absolute; top: 0; right: 0; bottom: 0; background: url(../gui/ico/arrow-right.svg) 50% 50% no-repeat; background-size: 24px auto; width: 32px;filter: var(--filter-md); -webkit-filter: var(--filter-md);}
.calendario .calendario-header .calendario-nav span:last-child {margin-right: 0px;}

.calendario .calendario-body { margin: 0; padding: 0px;}
.calendario .calendario-body ul {list-style: none;flex-wrap: wrap;display: flex;text-align: center; margin: 0; padding: 0px;}
.calendario .calendario-body li {width: calc(100% / 7); font-size: var(--t2);}

.calendario .calendario-body .calendario-semana { border-bottom: 1px solid var(--c20); }
.calendario .calendario-body .calendario-semana li {cursor: default; padding: 10px 0; display: flex; align-items: center; justify-content: center; color: var(--c70); font-size: var(--t1);}
.calendario .calendario-body .calendario-dias {margin-bottom: 0px; }
.calendario .calendario-body .calendario-dias li {margin-top: 0;aspect-ratio: 1/1;position: relative;z-index: 1;cursor: pointer;display: flex; align-items: center; justify-content: center;}

.calendario .calendario-dias li::before {position: absolute;content: "";z-index: -1;top: 50%;left: 50%;width: calc(100% - 8px);aspect-ratio: 1/1;border-radius: 50%;transform: translate(-50%, -50%);}

.calendario .calendario-dias li.active {color: var(--c70);}
.calendario .calendario-dias li.active::before {background-color: var(--c20);}
.calendario .calendario-dias li:not(.active):hover::before {background: var(--c100); color: var(--c0) !important;}
.calendario .calendario-dias li:not(.active):hover {color: var(--c0) !important;}

.calendario .calendario-dias li.inactive {color: var(--c20); pointer-events: none !important;}

.calendario .calendario-dias li.selected {color: var(--c0);}
.calendario .calendario-dias li.selected::before {background-color: var(--c100) !important; color: var(--c0);}

/* MINICAL */

.minical {width: 100%;background-color: var(--c0); border: 1px solid var(--c20); border-radius: var(--br1);overflow: hidden; }
.minical .minical-header {display: flex;justify-content: space-between;align-items: center;background-color: var(--c0);color: var(--c100);padding: 0;}
.minical .minical-nav-button {background-color: transparent;border: none;cursor: pointer; margin: 0; padding: 0; }
.minical .minical-nav-button.prev { position: relative; width: 40px; height: 40px; text-indent: -6000px; }
.minical .minical-nav-button.prev::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/arrow-left.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.minical .minical-nav-button.next { position: relative; width: 40px; height: 40px; text-indent: -6000px; }
.minical .minical-nav-button.next::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/arrow-right.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}

.minical .minical-mes {font-weight: bold; font-size: var(--t3); line-height: 40px; }
.minical .minical-calendario {display: grid;grid-template-rows: auto 1fr;width: 100%;}
.minical .minical-dias-semana {display: grid;grid-template-columns: repeat(7, 1fr);background-color: var(--c0);color: var(--c100);text-align: center;padding: 0; height: 40px; line-height: 40px; border-top: 1px solid var(--c20); border-bottom: 1px solid var(--c20); }
.minical .minical-dias {display: grid;grid-template-columns: repeat(7, 1fr);gap: 1px;background-color: var(--c20);}
.minical .minical-dia {background-color: var(--c0); color: var(--c100); padding: 0; aspect-ratio: 1/1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.minical .minical-dia.inactivo {background-color: var(--c10);color: var(--c70);}

.minical .minical-dia.hoy {background-color: var(--c100);color: var(--c0);}



.bx-qr {display: grid; grid-gap: 16px; padding: 0px; border-radius: var(--br1); box-sizing: border-box; grid-template-columns: 1fr; background-color: var(--c0); max-width: 400px;}
.bx-qr .viewer { border-radius: var(--br1); overflow: hidden; aspect-ratio: 1/1; background-color: var(--c10); }
.bx-qr .respuesta {}

.easyeditor-wrapper { position: relative; }
.easyeditor {outline: none; background-color: var(--c0); border: 1px solid var(--c20);padding: 16px;margin-bottom: 0;overflow-y: auto;border-radius: 0 0 8px 8px; min-height: 120px; max-height: 400px;}
.easyeditor-toolbar {border: 1px solid var(--c20);border-bottom: 0;margin: 0;padding: 4px 4px 0px 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: var(--c0);border-radius: var(--br2t);}

.easyeditor-toolbar ul { margin: 0; padding: 0; }
.easyeditor-toolbar ul:after {content: "";display: block;clear: both;}
.easyeditor-toolbar li {list-style: none;float: left;position: relative;}
.easyeditor-toolbar li ul {position: absolute;left: 0;top: 48px;z-index: 5;display: none; background-color: var(--c0); box-shadow: var(--shadow-1); border-radius: var(--br1); padding: 8px; }
.easyeditor-toolbar li ul li button { min-width: 160px; min-height: 24px; text-align: left; padding: 0 4px; }
.easyeditor-toolbar li ul li button h1, .easyeditor-toolbar li ul li button h2, .easyeditor-toolbar li ul li button h3, .easyeditor-toolbar li ul li button h4 { margin: 0; padding: 0; }

.easyeditor-toolbar li button {background: var(--c0);color: var(--c70);font-weight: normal;cursor: pointer;display: inline-block;padding: 0;float: left;padding: 0px 16px;min-width: 32px;min-height: 32px;outline: none;border-radius: var(--br1);margin-right: 4px;margin-bottom: 4px;position: relative;font-size: var(--t2); border: 0;}

.easyeditor-toolbar li button:hover {background: var(--c20);}

.easyeditor-toolbar li button:active {background: var(--c20);}

.easyeditor-toolbar li button i { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; background-size: 20px !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }

.easyeditor-toolbar li button i::before{content:""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; filter: var(--filter-co); -webkit-filter: var(--filter-co);}

.easyeditor-toolbar li button i.bold { background: url(../gui/ico/editor/bold.svg); }
.easyeditor-toolbar li button i.italic { background: url(../gui/ico/editor/italic.svg); }
.easyeditor-toolbar li button i.link { background: url(../gui/ico/editor/link.svg); }
.easyeditor-toolbar li button i.left { background: url(../gui/ico/editor/left.svg); }
.easyeditor-toolbar li button i.center { background: url(../gui/ico/editor/center.svg); }
.easyeditor-toolbar li button i.right { background: url(../gui/ico/editor/right.svg); }
.easyeditor-toolbar li button i.quote { background: url(../gui/ico/editor/quote.svg); }
.easyeditor-toolbar li button i.list { background: url(../gui/ico/editor/bullet-list.svg?1); }
.easyeditor-toolbar li button i.list-numbers { background: url(../gui/ico/editor/bullet-numbers.svg?1); }
.easyeditor-toolbar li button i.source { background: url(../gui/ico/editor/code.svg); }
.easyeditor-toolbar li button i.clean { background: url(../gui/ico/editor/clean.svg); }
.easyeditor-toolbar li button i.texto { background: url(../gui/ico/editor/texto.svg); }
.easyeditor-toolbar li button i.boton { background: url(../gui/ico/editor/button.svg); }

.easyeditor-toolbar li button.is-view-source-mode { background-color: var(--c20); }

.easyeditor blockquote {border-left: 2px solid var(--c20);padding-left: 24px;color: var(--c70);}
.easyeditor h1, .easyeditor h2, .easyeditor h3, .easyeditor h4 { line-height: normal !important; height: auto !important; padding: 0 !important; margin: 0 !important; display: block !important; }

.easyeditor[contenteditable=true]:empty:before{content: attr(placeholder);display: block;opacity: 0.5;cursor: text;}

.easyeditor-toolbar.is-fixed {position: fixed;top: 0;background: #fff;border-bottom: 1px solid #ddd;z-index: 5;}

.easyeditor ul, .easyeditor ol {margin-left: 0px;}
.easyeditor a { text-decoration: underline; }

.easyeditor-temp {border-radius: 0 0 8px 8px;box-sizing: border-box;font-family: Consolas, monaco, monospace, "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter" !important;line-height: 18px;padding: 16px !important;border: 1px solid var(--c20);background-color: var(--c10);}

.easyeditor-character-remaining {text-align: right;position: relative;top: -17px;font-size: 90%;}
.easyeditor-character-remaining.is-invalid {color: #ff0000;}
.easyeditor-character-remaining.is-valid {color: #777;}

.editor-grid { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; display: grid; grid-template-columns: 1fr 400px }
.editor-grid > div:nth-child(1) { position: relative; border-right: 1px solid var(--c20);  }
.editor-grid > div:nth-child(1) .easyeditor-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; grid-gap: 0; padding: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.editor-grid > div:nth-child(1) .easyeditor-wrapper > div:nth-child(1) { border-radius: 0; border: 0; border-bottom: 1px solid var(--c20); }
.editor-grid > div:nth-child(1) .easyeditor-wrapper > div:nth-child(2) { border-radius: 0; border: 0; overflow-x: hidden; overflow-y: scroll; max-height: 100%; height: auto !important; }

.editor-grid > div:nth-child(2) { position: relative; padding: 24px; }

.bx-qrcode { border: 1px solid var(--c20); padding: 8px; border-radius: var(--br1); display: inline-block; }

.layout-clase-contenedor { position: relative; }
.layout-clase-area { width: 100%; aspect-ratio: 2/1; background-color: var(--c10); position: relative; border-radius: var(--br1);



    background-image:
        linear-gradient(to right, var(--c20) 1px, transparent 1px),
        linear-gradient(to bottom, var(--c20) 1px, transparent 1px);
    background-size: 25% 50%;
    background-position: left top;

	
}

.layout-clase-area .ctrl-columns { position: absolute; top: 12px; right: 12px; z-index: 9999; display: grid; grid-gap: 1px; grid-template-columns: 1fr 1fr; border-radius: 40px; overflow: hidden; box-shadow: var(--shadow-1);}
.layout-clase-area .ctrl-columns a { display: block; width: 40px; height: 32px; background-color: var(--c0); position: relative; }
.layout-clase-area .ctrl-columns a.menos{ }
.layout-clase-area .ctrl-columns a.menos::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/menos.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.layout-clase-area .ctrl-columns a.mas{ }
.layout-clase-area .ctrl-columns a.mas::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/add.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}

.layout-clase-area .ctrl-rows { position: absolute; bottom: 12px; right: 12px; z-index: 9999; display: grid; grid-gap: 1px; grid-template-columns: 1fr 1fr; border-radius: 40px; overflow: hidden; box-shadow: var(--shadow-1);}
.layout-clase-area .ctrl-rows a { display: block; width: 40px; height: 32px; background-color: var(--c0); position: relative; }
.layout-clase-area .ctrl-rows a.menos{ }
.layout-clase-area .ctrl-rows a.menos::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/menos.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.layout-clase-area .ctrl-rows a.mas{ }
.layout-clase-area .ctrl-rows a.mas::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/add.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}

.layout-clase-area .item { position: absolute; aspect-ratio: 1/1; background-color: var(--c100); color: var(--c0); border-radius: 100%; display: flex; align-items: center; justify-content: center;  border: 4px solid var(--c10);}
.layout-clase-area .item span { font-size: 2vw; }

.bx-grid-studio-book-semana { position: relative; margin: 0 -32px; }

.bx-grid-studio-book-semana .nav { display: flex; gap:8px; margin: 0 32px; padding: 0px; }
.bx-grid-studio-book-semana .navx a { margin: 0; padding: 0; height: 32px; line-height: 32px; background-color: var(--c0); outline: 1px solid var(--c20); color: var(--c100); border-radius: 32px; text-align: center; }

/*.bx-grid-studio-book-semana .nav { display: flex; gap:8px; margin: 0 32px; padding: 0px; }
.bx-grid-studio-book-semana .nav a { margin: 0; padding: 0; height: 32px; line-height: 32px; background-color: var(--c0); outline: 1px solid var(--c20); color: var(--c100); border-radius: 32px; text-align: center; }
.bx-grid-studio-book-semana .nav .this { padding: 0 16px; }
.bx-grid-studio-book-semana .nav .this.off { background-color: var(--c10); color: var(--c100); }
.bx-grid-studio-book-semana .nav .prev { position: relative; width: 32px; height: 32px; text-indent: -6000px; }
.bx-grid-studio-book-semana .nav .prev::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/arrow-left.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.bx-grid-studio-book-semana .nav .next { position: relative; width: 32px; height: 32px; text-indent: -6000px; }
.bx-grid-studio-book-semana .nav .next::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/arrow-right.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.bx-grid-studio-book-semana .nav .other { padding: 0 16px; }*/

.bx-grid-studio-book-semana .nav-slide { position: absolute; top: 24%; right: 16px; display: inline-grid; grid-gap:4px; grid-template-columns: 1fr; margin: 0; padding: 4px; border-radius: 64px; box-shadow: var(--shadow-2); background-color: var(--c0); }
.bx-grid-studio-book-semana .nav-slide a { margin: 0; padding: 0; height: 40px; line-height: 40px; background-color: var(--c10); border-radius: 40px; }
.bx-grid-studio-book-semana .nav-slide .slidePrevious { position: relative; width: 40px; height: 40px; text-indent: -6000px; }
.bx-grid-studio-book-semana .nav-slide .slidePrevious::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/arrow-left.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}
.bx-grid-studio-book-semana .nav-slide .slideNext { position: relative; width: 40px; height: 40px; text-indent: -6000px; }
.bx-grid-studio-book-semana .nav-slide .slideNext::before{content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../gui/ico/arrow-right.svg) 50% 50% no-repeat; background-size: 24px auto; filter: var(--filter-co); -webkit-filter: var(--filter-co);}

ul.grid-studio-book-semana { display: flex; gap: 16px; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding: 32px; width: 100%; padding-right: 80px;  }
ul.grid-studio-book-semana li { list-style: none; margin: 0; padding: 0; flex: 0 0 auto; scroll-snap-align: start; width: 200px; display: flex; flex-direction: column; gap: 8px }
ul.grid-studio-book-semana li .dia {  }
ul.grid-studio-book-semana li .clase { background-color: var(--c0); padding: 12px; border-radius: var(--br1); position: relative; border: 1px solid var(--c20); border-left: 4px solid var(--c20); line-height: normal; width: 100%; }
ul.grid-studio-book-semana li .clase .tag-ocupacion { position: absolute; top: 10px; right: 10px; font-size: var(--t1); background-color: var(--c0); outline: 1px solid var(--c20); padding: 1px 4px; border-radius: 24px; }
ul.grid-studio-book-semana li .clase.cancelada { background: repeating-linear-gradient(45deg,var(--c10),var(--c10) 4px,var(--c0) 4px,var(--c0) 8px);}
ul.grid-studio-book-semana li .clase.cancelada small { text-decoration: line-through; }

ul.grid-studio-book-semana li .clase.on { border-color: var(--ka); }

.pantone-card { width: 120px; background-color: var(--c0); border-radius: var(--br1); border: 1px solid var(--c20); box-shadow: var(--shadow-1); padding: 4px; }
.pantone-card input[type="color"] { width: 100%; height: 104px; border: 0 !important; outline: 0 !important; -webkit-appearance:none !important; border-radius: 4px 4px 0 0; }
.pantone-card input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.pantone-card input[type="color"]::-webkit-color-swatch { border: 0; }

@media screen and (max-width: 993px){
	
	.grid-editor .bx-nav{ width: 32%;}
	
}

@media screen and (max-width: 993px){
	
	.bx-1{gap: 24px;}
	.bx-2{grid-gap: 16px; grid-template-columns: 1fr;}
	.bx-2-1{display: grid; grid-gap: 16px; padding: 0; box-sizing: border-box; grid-template-columns: 1fr; }
	
	.bx-helper{grid-gap: 32px; grid-template-columns: 1fr;}
	.bx-helper > div:nth-child(1) { grid-row: 2 / 3; }
	.bx-helper > div:nth-child(2) { grid-column: 1 / 2; grid-row: 1 / 2; }
	
	.modal-overlay{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 299; background-color: var(--overlay); overflow: auto !important; padding: 40px 0; }
	.modal{ top: auto; left: 50%; bottom: 8px; transform: translate(-50%,0%); width: calc(100vw - 16px); max-height: 80vh; overflow-y: auto; padding: 0; border-radius: var(--br2); }
	
	.lateral{position: fixed; top: 8px; right: 8px; bottom: 8px; left: 8px; width: auto; background-color: var(--c0); padding: 0px; border-radius: var(--br2); box-sizing: border-box; overflow: hidden; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; box-shadow: var(--shadow-2); }
	
	.central h3.titulo{font-size: var(--t3); margin: 0; padding: 0 80px 0 16px; height: 56px; line-height: 56px; position: sticky; top: 0; z-index: 2; background-color: var(--c0); border-bottom: 1px solid var(--c20); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
	.central .central-contenido{ padding: 16px;}
	
	.bx-tabla-base .tabla-info { display: none; }
	
	.layout-admin { grid-template-columns: 1fr; padding: 0; border-radius: 0; grid-gap:0; }
	
	.layout-admin .bx-nav .nav-call-mobile { display: block; }
	.layout-admin .bx-nav{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 299; display: none; }
	
	
	.sidebar a { border-radius: 0;}
	
	.layout-admin .contenedor { grid-column: 1 / 2; padding: 16px; border-radius: 0; }
	
	.layout-admin-cerrado .bx-nav { display: block; }
	
	.grid-book {display: grid; grid-gap: 24px; padding: 0px; box-sizing: border-box; grid-template-columns: 1fr;}
	.grid-book > div:nth-child(0) { grid-row: 1/2 }
	.grid-book > div:nth-child(1) { grid-row: 2/3 }
	.grid-book .clases { grid-gap: 24px; }
	
	.bx-filtros{display: inline-flex; flex-wrap: wrap; gap:8px }
	.bx-filtros .item-key {flex-basis: auto;}
	.bx-filtros .item {flex: 1 1 auto; flex-basis: auto; text-align: center;}
	
	.editor-grid { position: relative; display: grid; grid-template-columns: 1fr; margin: -16px; }
	.editor-grid > div:nth-child(1) { grid-row: 2 / 3; position: relative; border: 0; border-top: 1px solid var(--c20); }
	.editor-grid > div:nth-child(1) .easyeditor-wrapper { position: relative; display: grid; grid-gap: 0; padding: 0; grid-template-columns: 1fr; grid-template-rows: 1fr; }
	.editor-grid > div:nth-child(1) .easyeditor-wrapper > div:nth-child(1) { border-radius: 0; border: 0; border-bottom: 1px solid var(--c20); }
	.editor-grid > div:nth-child(1) .easyeditor-wrapper > div:nth-child(2) { border-radius: 0; border: 0; overflow-x: hidden; overflow-y: scroll; max-height: 100%; height: auto !important; }
	
	.editor-grid > div:nth-child(2) { grid-row: 1 / 2; position: relative; padding: 24px; }
	
	.bx-qr {display: grid; grid-gap: 16px; padding: 0px; border-radius: var(--br1); box-sizing: border-box; grid-template-columns: 1fr; background-color: var(--c0); max-width: 400px;}
	
	.bx-kpis-lineal{display: flex; gap: 8px; padding: 0; overflow: auto; white-space: nowrap; margin: 0 -16px; padding: 0 16px;}
	
	.bx-grid-studio-book-semana { position: relative; margin: 0 -24px; }
   	.bx-grid-studio-book-semana .nav { display: grid; grid-template-columns: 1fr 32px 32px }
	.bx-grid-studio-book-semana .nav a:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 2; }
	.bx-grid-studio-book-semana .nav a:nth-child(2) { grid-column: 1 / 2; grid-row: 2 / 3; }
	.bx-grid-studio-book-semana .nav a:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; }
	.bx-grid-studio-book-semana .nav a:nth-child(4) { grid-column: 3 / 4; grid-row: 2 / 3; }
	
	.bx-grid-studio-book-semana .nav-slide { display: none; }
	
	ul.grid-studio-book-semana { padding-right: 24px;  }
	
	.helper:popover-open {width: auto;bottom: 32px;right: 32px;left: 32px;}
	
}