/*
========================================================================================================================
RESET CSS
========================================================================================================================
Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)                                                                   */

*,::after,::before{box-sizing:border-box}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section,menu{display:block}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}a:not([href]){color:inherit;text-decoration:none}a:not([href]):hover{color:inherit;text-decoration:none}hr{box-sizing:content-box;height:0;overflow:visible}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}code,kbd,pre,samp{font-family:Consolas,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}



/*
========================================================================================================================
GRID
========================================================================================================================
Grid nativo basado en la terminologí­a Bootstrap                                                                       */

.row {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 0 var(--12px);
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
	position: relative;
	width: 100%;
	min-height: 1px;
	grid-column: span 12;
}

.col-1  { grid-column: span 1  }
.col-2  { grid-column: span 2  }
.col-3  { grid-column: span 3  }
.col-4  { grid-column: span 4  }
.col-5  { grid-column: span 5  }
.col-6  { grid-column: span 6  }
.col-7  { grid-column: span 7  }
.col-8  { grid-column: span 8  }
.col-9  { grid-column: span 9  }
.col-10 { grid-column: span 10 }
.col-11 { grid-column: span 11 }
.col-12 { grid-column: span 12 }

@media (min-width: 768px) {
	.col-sm-1  { grid-column: span 1  }
	.col-sm-2  { grid-column: span 2  }
	.col-sm-3  { grid-column: span 3  }
	.col-sm-4  { grid-column: span 4  }
	.col-sm-5  { grid-column: span 5  }
	.col-sm-6  { grid-column: span 6  }
	.col-sm-7  { grid-column: span 7  }
	.col-sm-8  { grid-column: span 8  }
	.col-sm-9  { grid-column: span 9  }
	.col-sm-10 { grid-column: span 10 }
	.col-sm-11 { grid-column: span 11 }
	.col-sm-12 { grid-column: span 12 }
}
@media (min-width: 1024px) {
	.col-md-1  { grid-column: span 1  }
	.col-md-2  { grid-column: span 2  }
	.col-md-3  { grid-column: span 3  }
	.col-md-4  { grid-column: span 4  }
	.col-md-5  { grid-column: span 5  }
	.col-md-6  { grid-column: span 6  }
	.col-md-7  { grid-column: span 7  }
	.col-md-8  { grid-column: span 8  }
	.col-md-9  { grid-column: span 9  }
	.col-md-10 { grid-column: span 10 }
	.col-md-11 { grid-column: span 11 }
	.col-md-12 { grid-column: span 12 }
}
@media (min-width: 1280px) {
	.col-lg-1  { grid-column: span 1  }
	.col-lg-2  { grid-column: span 2  }
	.col-lg-3  { grid-column: span 3  }
	.col-lg-4  { grid-column: span 4  }
	.col-lg-5  { grid-column: span 5  }
	.col-lg-6  { grid-column: span 6  }
	.col-lg-7  { grid-column: span 7  }
	.col-lg-8  { grid-column: span 8  }
	.col-lg-9  { grid-column: span 9  }
	.col-lg-10 { grid-column: span 10 }
	.col-lg-11 { grid-column: span 11 }
	.col-lg-12 { grid-column: span 12 }
}
@media (min-width: 1920px) {
	.col-xl-1  { grid-column: span 1  }
	.col-xl-2  { grid-column: span 2  }
	.col-xl-3  { grid-column: span 3  }
	.col-xl-4  { grid-column: span 4  }
	.col-xl-5  { grid-column: span 5  }
	.col-xl-6  { grid-column: span 6  }
	.col-xl-7  { grid-column: span 7  }
	.col-xl-8  { grid-column: span 8  }
	.col-xl-9  { grid-column: span 9  }
	.col-xl-10 { grid-column: span 10 }
	.col-xl-11 { grid-column: span 11 }
	.col-xl-12 { grid-column: span 12 }
}



/*
========================================================================================================================
VARIABLES
========================================================================================================================
Definimos las variables globales del proyecto                                                                         */

	/* VARIABLES > REM
	======================================================================================================================
	Son las medidas en pí­xeles con su correspondiente valor en rem                                                      */

	:root {
		
		/* Valores del 1 al 100 */
		--1px:.0625rem;--2px:.125rem;--3px:.1875rem;--4px:.250rem;--5px:.3125rem;--6px:.375rem;--7px:.4375rem;--8px:.5rem;--9px:.5625rem;--10px:.625rem;--11px:.6875rem;--12px:.750rem;--13px:.8125rem;--14px:.875rem;--15px:.9375rem;--16px:1rem;--17px:1.0625rem;--18px:1.125rem;--19px:1.1875rem;--20px:1.250rem;--21px:1.3125rem;--22px:1.375rem;--23px:1.4375rem;--24px:1.500rem;--25px:1.5625rem;--26px:1.625rem;--27px:1.6875rem;--28px:1.750rem;--29px:1.8125rem;--30px:1.875rem;--31px:1.9375rem;--32px:2rem;--33px:2.0625rem;--34px:2.125rem;--35px:2.1875rem;--36px:2.250rem;--37px:2.3125rem;--38px:2.375rem;--39px:2.4375rem;--40px:2.500rem;--41px:2.5625rem;--42px:2.625rem;--43px:2.6875rem;--44px:2.750rem;--45px:2.8125rem;--46px:2.875rem;--47px:2.9375rem;--48px:3rem;--49px:3.0625rem;--50px:3.125rem;--51px:3.1875rem;--52px:3.250rem;--53px:3.3125rem;--54px:3.375rem;--55px:3.4375rem;--56px:3.500rem;--57px:3.5625rem;--58px:3.625rem;--59px:3.6875rem;--60px:3.750rem;--61px:3.8125rem;--62px:3.875rem;--63px:3.9375rem;--64px:4rem;--65px:4.0625rem;--66px:4.125rem;--67px:4.1875rem;--68px:4.250rem;--69px:4.3125rem;--70px:4.375rem;--71px:4.4375rem;--72px:4.500rem;--73px:4.5625rem;--74px:4.625rem;--75px:4.6875rem;--76px:4.750rem;--77px:4.8125rem;--78px:4.875rem;--79px:4.9375rem;--80px:5rem;--81px:5.0625rem;--82px:5.125rem;--83px:5.1875rem;--84px:5.250rem;--85px:5.3125rem;--86px:5.375rem;--87px:5.4375rem;--88px:5.500rem;--89px:5.5625rem;--90px:5.625rem;--91px:5.6875rem;--92px:5.750rem;--93px:5.8125rem;--94px:5.875rem;--95px:5.9375rem;--96px:6rem;--97px:6.0625rem;--98px:6.125rem;--99px:6.1875rem;--100px:6.250rem;

	}


	/* VARIABLES > TIPOGRAFÍA
	======================================================================================================================
	Definición de las fuentes tipográficas                                                                              */

	:root {

		--font-general: "Manager";
		--font-icons  : "Material Symbols Outlined";

	}

	@font-face {
		font-family: "Manager";
		font-style: normal;
		font-weight: 100 900;
		font-display: swap;
		src: url( 'https://manager.polarik.com/ka/apps/manager_assets/fonts/InterVariable.woff2' ) format( 'woff2' );
	}


	/* VARIABLES > TIPOGRAFÍA ICONOGRÁFICA
	======================================================================================================================
	Definición de las fuente iconográfica Material Symbols Outlined de Google Fonts. Lo hacemos así porque no queremos
	utilizar la clase .material-symbols-outlined cada vez que haya que poner un icono. Ahora funciona con .icon
	https://fonts.google.com/icons                                                                                      */

	.icon {
		font-family: var(--font-icons);
		font-weight: normal;
		font-style: normal;
		font-size: var(--24px);
		line-height: 1;
		letter-spacing: normal;
		text-transform: none;
		display: inline-block;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		-webkit-font-feature-settings: 'liga';
		-webkit-font-smoothing: antialiased;
	}


	/* VARIABLES > COLORES BASE
	======================================================================================================================
	Definición de la paleta de colores base para el proyecto                                                            */

	:root {
		
		/* COLORES BASE */

		--color-25 : #FCFAFF;
		--color-50 : #F9F5FF;
		--color-100: #F4EBFF;
		--color-200: #E9D7FE;
		--color-300: #D6BBFB;
		--color-400: #B692F6;
		--color-500: #9E77ED;
		--color-600: #7F56D9;
		--color-700: #6941C6;
		--color-800: #53389E;
		--color-900: #42307D;
		--color-950: #2C1C5F;
		
		--color-gray-25 : #FCFCFD;
		--color-gray-50 : #F9FAFB;
		--color-gray-100: #F2F4F7;
		--color-gray-200: #EAECF0;
		--color-gray-300: #D0D5DD;
		--color-gray-400: #98A2B3;
		--color-gray-500: #667085;
		--color-gray-600: #475467;
		--color-gray-700: #344054;
		--color-gray-800: #1D2939;
		--color-gray-900: #101828;
		--color-gray-950: #0C111D;

		--color-green-25 : #F6FEF9;
		--color-green-50 : #ECFDF3;
		--color-green-100: #DCFAE6;
		--color-green-200: #ABEFC6;
		--color-green-300: #75E0A7;
		--color-green-400: #47CD89;
		--color-green-500: #17B26A;
		--color-green-600: #079455;
		--color-green-700: #067647;
		--color-green-800: #085D3A;
		--color-green-900: #074D31;
		--color-green-950: #053321;
		
		--color-amber-25 : #FFFCF5;
		--color-amber-50 : #FFFAEB;
		--color-amber-100: #FEF0C7;
		--color-amber-200: #FEDF89;
		--color-amber-300: #FEC84B;
		--color-amber-400: #FDB022;
		--color-amber-500: #F79009;
		--color-amber-600: #DC6803;
		--color-amber-700: #B54708;
		--color-amber-800: #93370D;
		--color-amber-900: #7A2E0E;
		--color-amber-950: #4E1D09;
		
		--color-red-25 : #FFFBFA;
		--color-red-50 : #FEF3F2;
		--color-red-100: #FEE4E2;
		--color-red-200: #FECDCA;
		--color-red-300: #FDA29B;
		--color-red-400: #F97066;
		--color-red-500: #F04438;
		--color-red-600: #D92D20;
		--color-red-700: #B42318;
		--color-red-800: #912018;
		--color-red-900: #7A271A;
		--color-red-950: #55160C;

				--primary-25 : var(--color-25);
				--primary-50 : var(--color-50);
				--primary-100: var(--color-100);
				--primary-200: var(--color-200);
				--primary-300: var(--color-300);
				--primary-400: var(--color-400);
				--primary-500: var(--color-500);
				--primary-600: var(--color-600);
				--primary-700: var(--color-700);
				--primary-800: var(--color-800);
				--primary-900: var(--color-900);
				--primary-950: var(--color-950);
				
				--success-25 : var(--color-green-25 );
				--success-50 : var(--color-green-50 );
				--success-100: var(--color-green-100);
				--success-200: var(--color-green-200);
				--success-300: var(--color-green-300);
				--success-400: var(--color-green-400);
				--success-500: var(--color-green-500);
				--success-600: var(--color-green-600);
				--success-700: var(--color-green-700);
				--success-800: var(--color-green-800);
				--success-900: var(--color-green-900);
				--success-950: var(--color-green-950);
				
				--warning-25 : var(--color-amber-25 );
				--warning-50 : var(--color-amber-50 );
				--warning-100: var(--color-amber-100);
				--warning-200: var(--color-amber-200);
				--warning-300: var(--color-amber-300);
				--warning-400: var(--color-amber-400);
				--warning-500: var(--color-amber-500);
				--warning-600: var(--color-amber-600);
				--warning-700: var(--color-amber-700);
				--warning-800: var(--color-amber-800);
				--warning-900: var(--color-amber-900);
				--warning-950: var(--color-amber-950);
				
				--error-25 : var(--color-red-25);
				--error-50 : var(--color-red-50);
				--error-100: var(--color-red-100);
				--error-200: var(--color-red-200);
				--error-300: var(--color-red-300);
				--error-400: var(--color-red-400);
				--error-500: var(--color-red-500);
				--error-600: var(--color-red-600);
				--error-700: var(--color-red-700);
				--error-800: var(--color-red-800);
				--error-900: var(--color-red-900);
				--error-950: var(--color-red-950);



		/* COLORES SECUNDARIOS */

		--color-blue-25 : #F5F8FF;
		--color-blue-50 : #EFF4FF;
		--color-blue-100: #D1E0FF;
		--color-blue-200: #B2CCFF;
		--color-blue-300: #84ADFF;
		--color-blue-400: #528BFF;
		--color-blue-500: #2970FF;
		--color-blue-600: #155EEF;
		--color-blue-700: #004EEB;
		--color-blue-800: #0040C1;
		--color-blue-900: #00359E;
		--color-blue-950: #002266;

	}


	:root [data-status="error"],
	.error
	{
		--color-25 : var(--error-25);
		--color-50 : var(--error-50);
		--color-100: var(--error-100);
		--color-200: var(--error-200);
		--color-300: var(--error-300);
		--color-400: var(--error-400);
		--color-500: var(--error-500);
		--color-600: var(--error-600);
		--color-700: var(--error-700);
		--color-800: var(--error-800);
		--color-900: var(--error-900);
		--color-950: var(--error-950);
	}
	
	:root [data-status="warning"],
	.warning
	{
		--color-25 : var(--warning-25 );
		--color-50 : var(--warning-50 );
		--color-100: var(--warning-100);
		--color-200: var(--warning-200);
		--color-300: var(--warning-300);
		--color-400: var(--warning-400);
		--color-500: var(--warning-500);
		--color-600: var(--warning-600);
		--color-700: var(--warning-700);
		--color-800: var(--warning-800);
		--color-900: var(--warning-900);
		--color-950: var(--warning-950);
	}

	:root [data-status="success"],
	.success
	{
		--color-25 : var(--success-25 );
		--color-50 : var(--success-50 );
		--color-100: var(--success-100);
		--color-200: var(--success-200);
		--color-300: var(--success-300);
		--color-400: var(--success-400);
		--color-500: var(--success-500);
		--color-600: var(--success-600);
		--color-700: var(--success-700);
		--color-800: var(--success-800);
		--color-900: var(--success-900);
		--color-950: var(--success-950);
	}



	/* VARIABLES > SOMBRAS
	======================================================================================================================
	Definición de las diferentes tipos de sombra para los objetos                                                       */

	:root {

		--shadow-xs: 0 var(--1px) var(--2px) 0 rgba(16, 24, 40, 0.05);
		--shadow-sm: 0 var(--1px) var(--3px) 0 rgba(16, 24, 40, 0.10), 0 var(--1px) var(--2px) 0 rgba(16, 24, 40, 0.06);
		--shadow-md: 
			0 var(--4px) var(--8px) calc( var(--2px) * -1 ) rgba(16, 24, 40, 0.10),
			0 var(--2px) var(--4px) calc( var(--2px) * -1 ) rgba(16, 24, 40, 0.06)
		;
		--shadow-lg:
			0 var(--12px) var(--16px) calc( var(--4px) * -1 ) rgba(16, 24, 40, 0.08),
			0 var(--4px) var(--6px) calc( var(--2px) * -1 ) rgba(16, 24, 40, 0.03)
		;
		--shadow-xl:
			0 var(--20px) var(--24px) calc( var(--4px) * -1 ) rgba(16, 24, 40, 0.08),
			0 var(--8px) var(--8px) calc( var(--4px) * -1) rgba(16, 24, 40, 0.03)
		;
		--shadow-2xl: 0 var(--24px) var(--48px) calc( var(--12px) * -1 ) rgba(16, 24, 40, 0.18);
		--shadow-3xl: 0 var(--32px) var(--64px) calc( var(--12px) * -1 ) rgba(16, 24, 40, 0.14);

	}



/*
========================================================================================================================
BASE
========================================================================================================================
Definimos los elementos HTML comunes y los elementos estructurales de la página                                       */

html {
	font-size: 100%; /* Capturamos el valor predeterminado del navegador, que generalmente es de 16 píxeles */
}

body {
	padding: 0;
	margin:0;
	overflow-x: hidden; /* IMPORTANTE! Ocultamos lo que sobre a nivel horizontal */

	font-family: var(--font-general), -apple-system, "Segoe UI", "Roboto","Helvetica Neue", "Arial", sans-serif;
  font-size: 1rem;
	font-weight: 400;
	font-weight: normal;
	font-feature-settings: 'liga' 1, 'calt' 1; /* Fix para la fuente Inter (Manager) en Chrome */
	
	line-height: 1.5;
	letter-spacing: normal;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	-webkit-font-feature-settings: 'kern' 1;
	-moz-font-feature-settings: 'kern' 1;
	
  text-align: left;
  background-color: #fff;
	color: var(--color-gray-900);
}

a {
	text-shadow: none;
	text-decoration: none;
	color: var(--color-gray-600);
	background-color: transparent;
}
a:focus,
a:hover,
a:active {
	outline: 0;
	text-decoration: none;
	transition:
		color .1s linear 0s,
		background-color .1s linear 0s,
		opacity .2s linear 0s
	;
	color: var(--color-700);
}

p {
	display: block;
	margin: 0 0 var(--16px) 0;

	font-size: var(--20px);
	font-weight: normal;
	font-style: normal;
	line-height: var(--30px);
	white-space: normal;
}

hr {
	border: 0;
	border-bottom: var(--4px) solid var(--color-gray-500);
	margin-top: var(--25px);
	margin-bottom: var(--25px);
}

input {
	font-family: var(--font-general);
}

h1 {
	font-size: var(--72px);
	line-height: var(--90px);
	letter-spacing: -2%;
}

h2 {
	font-size: var(--60px);
	line-height: var(--72px);
	letter-spacing: -2%;
}

h3 {
	font-size: var(--48px);
	line-height: var(--60px);
	letter-spacing: -2%;
}

h4 {
	font-size: var(--36px);
	line-height: var(--44px);
	letter-spacing: -2%;
}

h5 {
	font-size: var(--30px);
	line-height: var(--38px);
}

h6 {
	font-size: var(--24px);
	line-height: var(--32px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 400;
	margin-top: 0;
	margin-bottom: .5rem;
}


.text-xl {
	font-size: var(--20px);
	line-height: var(--30px);
}
.text-lg {
	font-size: var(--18px);
	line-height: var(--28px);
}
.text-md {
	font-size: var(--16px);
	line-height: var(--24px);
}
.text-sm {
	font-size: var(--14px);
	line-height: var(--20px);
}
.text-xs {
	font-size: var(--12px);
	line-height: var(--18px);
}


.medium {
	font-weight: 500;
}
.semibold {
	font-weight: 600;
}
.bold {
	font-weight: 700;
}
							

::-moz-selection {
	background: rgba(0,0,0,.1);
}
::selection {
	background: rgba(0,0,0,.1);
}

::-webkit-input-placeholder {
	opacity: .5;
	text-transform: none;
}
::-moz-placeholder {
	opacity: .5;
	text-transform: none;
}
:-ms-input-placeholder {
	opacity: .5;
	text-transform: none;
}
:-moz-placeholder {
	opacity: .5;
	text-transform: none;
}

::-webkit-scrollbar {
	height: var(--6px);
	width: var(--6px);
	 -webkit-appearance: 
}
::-webkit-scrollbar-track {
	background: rgba(0,0,0,.2);
}
::-webkit-scrollbar-thumb {
	background-color: rgba(0,0,0,.6);
}

@media (max-width: 48rem ) { /* 768px */
	::-webkit-scrollbar {
		height: var(--4px);
		width: var(--4px);
	}
}



.container-fluid {
	padding-left: var(--32px);
	padding-right: var(--32px);
}

@media (max-width: 64rem) { /* 1024px  */
	.container-fluid {
		padding-left: var(--16px);
		padding-right: var(--16px);
	}
}



:root {

	--nav-spacing: var(--16px);


}



/*
========================================================================================================================
TEMPLATE
========================================================================================================================
Definimos las plantillas que vamos a utilizar en el desktop                                                           */


body {
	display: grid;
	grid-template-areas: 'nav aside main';
	grid-template-columns: auto auto 1fr;
	grid-template-rows: 1fr;
	height: 100vh;
}



/*
========================================================================================================================
NAV
========================================================================================================================
Definimos los estilos y el comportamiento del menú principal del APP                                                  */

#NAV {
	grid-area: nav;

	display: grid;
	grid-template-areas:
		'logo'
		'searcher'
		'menu_main'
		'menu_secondary'
		'logout'
	;
	grid-template-rows:
		auto
		auto
		1fr
		auto
		auto
	;

	height: 100vh;
	max-height: 100vh;
	width: var(--82px);
	border-right: 1px solid var(--color-gray-200);

	transition: all .5s ease;
}

	
	/* NAV > ELEMENTOS COMUNES
	====================================================================================================================*/

	#NAV i {
		display: flex;
		width: var(--50px);
		height: var(--50px);
		justify-content: center;
		align-items: center;
	}

	#NAV menu,
	#NAV ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	#NAV menu {
		padding-left: var(--16px);
		padding-right: var(--16px);
		overflow-y: auto;
		overflow-x: hidden;
	}
		#NAV menu li {
			min-width: var(--50px);
		}
			#NAV menu li a {
				display: grid;
				grid-template-columns: auto 1fr;

				align-items: center;
				
				min-height: var(--50px);
				width: 100%;
				margin-bottom: var(--4px);
				border-radius: var(--6px);

				font-style: normal;
				font-weight: 600;
				line-height: var(--24px);
				color: var(--color-gray-700);
				
				transition: all .3s ease;
			}
			#NAV a:hover {
				background-color: var(--color-gray-100);
				color: black;
			}
			#NAV a:active {
				background-color: var(--color-amber-50);
				color: black;
			}
			#NAV a.active {
				background-color: var(--color-100);
				color: var(--color-800);
			}
				#NAV menu li span {
					opacity: 0;
					transform: translateX(4px);
					transition: all .5s ease;
				}
				#NAV menu a.active span {
					transform: none !important;
				}


	/* NAV > LOGO
	====================================================================================================================*/

	#NAV .logo {
		grid-area: logo;
		margin-top: var(--32px);
		margin-bottom: var(--24px);
		margin-left: var(--nav-spacing);
		margin-right: var(--nav-spacing);
	}
		#NAV .logo a {
			display: block;
			height: var(--34px);
			background-image: url( '/ka/apps/manager_assets/images/logo.svg' );
			background-repeat: no-repeat;
			background-size: auto var(--34px);
		}
		#NAV .logo a:hover {
			background-color: transparent;
		}


	/* NAV > BUSCADOR
	====================================================================================================================*/

	#NAV .searcher {
		grid-area: searcher;
	}

	
	/* NAV > MENÚ PRINCIPAL
	====================================================================================================================*/

	#NAV menu.main {
		grid-area: menu_main;
		overflow-y: auto;
		overflow-x: hidden;
	}

	
	/* NAV > MENÚ SECUNDARIO
	====================================================================================================================*/

	#NAV menu.secondary {
		grid-area: menu_secondary;
	}

	
	/* NAV > BUSCADOR CON CAJA
	======================================================================================================================
	Lo desactivo por ahora porque no tengo claro que vaya a utilizarlo                                                  */

	/*
			#NAV .searcher input {
				display: flex;
				width: 100%;
				padding: var(--10px) var(--14px);
				border-radius: var(--8px);
				border: var(--1px) solid var(--color-gray-200);
				background: #fff;
				box-shadow: var(--shadow-xs);
			}
			#NAV .searcher input:focus-visible {
				outline: 0;
				border-radius: 8px;
				border-color: var(--color-300);
				background: var(--Base-White, #FFF);
				box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #F4EBFF;
			}
	*/


	/* NAV > LOGOUT
	====================================================================================================================*/
	
	#NAV .logout {
		grid-area: logout;
		margin: var(--nav-spacing);
		padding-top: var(--nav-spacing);
		border-top: 1px solid var(--color-gray-200);
	}
	#NAV .logout a {
		display: grid;
		grid-template-columns: auto var(--50px);
		border-radius: var(--6px);
		transition: all .3s ease;
	}
			#NAV .logout .left {
				overflow-x: hidden;
				display: grid;
				grid-template-areas:
					'avatar name'
					'avatar email'
				;
				grid-template-columns: var(--50px) 1fr;
				font-size: var(--14px);
			}
				#NAV .logout .avatar {
					grid-area: avatar;
					width: var(--50px);
					opacity: 0;
					transition: all .4s ease;
				}
					#NAV .logout .avatar img {
						max-width: 100%;
						border-radius: 50%;
						padding: var(--8px);
					}

				#NAV .logout .name {
					grid-area: name;
					display: flex;
					align-self: end;
					line-height: 1;
					font-weight: 600;
					color: black;
				}

				#NAV .logout .email {
					grid-area: email;
					line-height: 1;
					color: var(--color-600);
				}

				#NAV .logout button {
					display: flex;
					width: var(--50px);
					height: 100%;
					align-items: center;
					align-content: center;
					padding: 0;
					margin: 0;
					outline: 0;
					border: 0;
					background: transparent;
				}

			#NAV .logout .symbol {
				grid-area: icon;
				line-height: 1;
			}


	/* NAV > ESTADOS
	====================================================================================================================*/

	#NAV.open {
		width: calc( var(--32px) * 10 ); /* 320px */
	}

	#NAV.open menu span {
		opacity: 1;
		transform: translateX(0);
	}

	#NAV.open menu a:hover span {
		transform: translateX( 2px );
	}

	#NAV.open .logout a {
		grid-template-columns: auto var(--50px);
	}
	#NAV.open .logout .avatar,
	#NAV.open .logout .details {
		opacity: 1;
	}


	/* NAV > TOGGLE
	====================================================================================================================*/

	#NAV-TOGGLE {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: var(--6px);
		z-index: 99999;
		cursor: pointer;
		background: var(--color-100);
		opacity: 0;
		transform: translateX( -50% );
		transition: opacity .4s ease, transform .4s ease;
		transition-delay: 0s;
	}
	#NAV-TOGGLE:hover {
		opacity: 1;
		transform: translateX( 0 );
		transition-delay: .3s;
	}
	#NAV-TOGGLE:active {
		background: var(--color-amber-100)
	}






#ASIDE {
	grid-area: aside;
	overflow-y: auto;
	padding: var(--32px) var(--16px) 0 var(--16px);
	max-width: 250px;
	border-right: 1px solid var(--color-gray-200);
}


#MAIN {
	grid-area: main;
	overflow-y: scroll;
	padding: var(--32px);
}










/*
========================================================================================================================
BOTONES
========================================================================================================================
Estilos de los botones genéricos en pantalla                                                                          */

.btn {
	display: inline-flex;
	padding: var(--8px) var(--14px);
	justify-content: center;
	align-items: center;
	align-self: stretch;
	gap: var(--8px);

	color: var(--color-700);
	background: #FFF;
	border: var(--1px) solid var(--color-300);
	border-radius: var(--8px);
	outline: 0 !important;
	box-shadow: var(--shadow-xs);

	font-family: var(--font-general);
	font-size: var(--14px);
	line-height: var(--20px);
	font-weight: 600;
	font-style: normal;

	/* transition: all .3s ease !important; */

	transition:
		color .5s linear 0s,
		background-color .3s linear 0s,
		opacity .2s linear 0s !important
	;


	&:hover {
		background: var(--color-50);
		color: var(--color-800);
	}
	&:focus {
		background: #fff;
		color: var(--gray-700);
		box-shadow: 0 var(--1px) var(--2px) 0 rgba(16, 24, 40, 0.05), 0 0 0 var(--4px) var(--color-100);
	}
		& i.icon {
			font-size: var(--20px);
		}

}



	/* BOTONES > TAMAÑO
	====================================================================================================================*/

	.btn.md {
		padding: var(--10px) var(--16px);
	}
	.btn.lg {
		padding: var(--10px) var(--18px);
		font-size: var(--16px);
		line-height: var(--24px);
	}
	
	.btn.xl {
		padding: var(--12px) var(--20px);
		font-size: var(--16px);
		line-height: var(--24px);
	}

	.btn.xxl {
		padding: var(--16px) var(--28px);
		font-size: var(--18px);
		line-height: var(--28px);
		gap: var(--12px);
	}
		.btn.xxl i.icon {
			font-size: var(--24px);
		}        


	/* BOTONES > PRIMARIO
	====================================================================================================================*/

	.btn.primary {
		border-color: var(--color-gray-300);
		background: var(--color-600);
		color: #fff; 
	}
	.btn.primary:hover {
		background: var(--color-700);
		border-color:var(--color-700);
		color: #fff;
	}
	.btn.primary:focus,
	.btn.primary:active {
		background: var(--color-600);
		border-color:var(--color-600);
		box-shadow: 0 var(--1px) var(--2px) 0 rgba(16, 24, 40, 0.05), 0 0 0 var(--4px) var(--color-100);
	}


	/* BOTONES > SECUNDARIO
	====================================================================================================================*/

	.btn.secondary {
		border-color: var(--color-200);
		background: var(--color-50);
		color: var(--color-700);
	}
	.btn.secondary:hover {
		background: var(--color-100);
		color: var(--color-800);
	}
	.btn.secondary:focus {
		color: var(--color-700);
		background: var(--color-50);
		box-shadow: 0 var(--1px) var(--2px) 0 rgba(16, 24, 40, 0.05), 0 0 0 var(--4px) var(--color-100);
	}


					/* BOTONES > SECUNDARIO GRIS
					====================================================================================================================*/

					.btn.secondary-gray {
						border-color: var(--color-200);
						background: var(--color-50);
						color: var(--color-700);
					}
					.btn.secondary-gray:hover {
						background: var(--color-100);
						color: var(--color-800);
					}
					.btn.secondary-gray:focus {
						color: var(--color-700);
						background: var(--color-50);
						box-shadow: 0 var(--1px) var(--2px) 0 rgba(16, 24, 40, 0.05), 0 0 0 var(--4px) var(--color-100);
					}


	/* BOTONES > TERCIARIO
	====================================================================================================================*/

	.btn.terciary {
		border-color: transparent;
		background: transparent;
		color: var(--color-700);
		box-shadow: none;
	}
	.btn.terciary:hover {
		background: var(--color-50);
		color: var(--color-800);
	}
	.btn.terciary:focus {
		background: transparent;
		color: var(--color-700);
	}
	.btn.terciary[disabled] {
		color: var(--color-gray-700);
	}


	/* BOTONES > GRIS
	====================================================================================================================*/

	.btn.gray {
		border-color: transparent;
		background: transparent;
		color: var(--color-gray-600);
		box-shadow: none;
	}
	.btn.gray:hover {
		background: var(--color-gray-50);
		color: var(--color-gray-700);
	}
	.btn.gray:focus {
		background: transparent;
		color: var(--primary-600);
	}


	/* BOTONES > VARIOS
	====================================================================================================================*/

	.btn.link {
		padding: 0;
		border: 0;
	}

	.btn.block {
		width: 100%;
	}

	.btn[disabled] {
		opacity: .4;
		pointer-events: none !important;
	}




.parent {

    color: black;

		& .child {
				color: blue;

			& .grandchild {
				color: red;
      }

    }
}











/*
========================================================================================================================
FOMULARIO
========================================================================================================================
Estilos de los campos de formulario                                                                                   */






													.form-group {
														position: relative;
														border: 0;
														padding: 0;
														width: 100%;
														max-width: 100%;
														transition: background .3s ease, color .3s ease, border .3s ease;
														display: grid;
														grid-template-columns: auto 1fr auto auto;
														grid-template-areas: 
															'label   label   label   label'
															'preffix element icon    suffix'
															'preffix counter icon    suffix'
															'note    note    note    note'
															'error   error   error   error'
														;
														margin-bottom: var(--20px);
													}



														.form-group label {
															grid-area: label;
															color: var(--gray-700);
															font-size: var(--14px);
															font-weight: 500;
															line-height: var(--20px);
														}

														.form-group input {
															grid-area: element;
															padding: var(--10px) var(--14px);
															border-radius: var(--8px);
															border: var(--1px) solid var(--color-gray-300);
															background: #fff;
															box-shadow: var(--shadow-xs);
															font-size: var(--16px);
															font-weight: 400;
															line-height: var(--24px);
															color: var(--color-gray-900);
														}

														.form-group input:focus {
															border: var(--1px) solid var(--color-300, #D6BBFB);
															background: #fff;
															box-shadow: 0 0 0 var(--4px) #F4EBFF, 0 var(--1px) var(--2px) 0 rgba(16, 24, 40, 0.05);
															outline: 0;
														}



														/* .form-group:not(.file) label,
														.form-group .label {
															grid-area: label;
															display: grid;
															grid-template-columns: auto 1fr;
															grid-template-areas: 'main required';
															
															position: relative;
															font-size: var(--11px);
															margin: 0;
															font-family: var(--font-secondary);
															letter-spacing: .04em;
															text-transform: uppercase;
															font-weight: 600;
															color: #000;
																																word-break: break-all;
														}
														.form-group.required > .label:after {
															grid-area: required;
															content: " ";
															width: var(--5px);
															height: var(--5px);
															border-radius: 50%;
															background: var(--color-pink-a400);
															margin-left: var(--5px);
															margin-right: var(--10px);
														}
														.form-group input:not([type="radio"]):not([type="checkbox"]),
														.form-group input[type="file"] + label,
														.form-group select,
														.form-group textarea {
															grid-area: element;
															background: #fff;
															border: var(--2px) solid var(--color-300);
															border-radius: var(--3px);
															height: auto;
															padding: 0 var(--10px);
															margin: 0;
															width: 100%;
															min-height: var(--45px);
															color: #333;
															transition: border .3s ease, padding .2s ease;
														}
														.form-group select,
														.form-group input:not([type="radio"]):not([type="checkbox"]),
														.form-group input[type="file"] + label {
															height: var(--45px);
															line-height: var(--45px);
														}

														.form-group:hover input:not([type="radio"]):not([type="checkbox"]),
														.form-group:hover input[type="file"] + label,
														.form-group:hover select,
														.form-group:hover textarea,
														.form-group:hover .preffix,
														.form-group:hover .suffix {
															border-color: var(--color-500);
														}

														.form-group select {
															line-height: var(--45px);
															cursor: pointer;
														}
															.form-group select optgroup {
																font-weight: normal;
																background: var(--color-50);
															}

														.form-group option {
															color: black;
															background: #fff;
														}

														.form-group textarea {
															resize: none;
															padding: var(--10px);
														}
														.form-group .error {
															grid-area: error;
															display: none;
														} */




/*
========================================================================================================================
HELPERS
========================================================================================================================
Clases de ayuda que se utilizan de forma frecuente en todos los proyectos                                             */

body.dev:before {
	content: "dev";
	position: fixed;
	bottom: 0;
	left: 0;
	background: rgba(216, 26, 96, 1);
	pointer-events: none;
	color: #fff;
	padding: 3px 10px;
	font-family: Consolas;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: 600;
	z-index: 999;
} 
@media screen and (min-width: 1024px) {
	body.dev:before {
		padding: 5px 15px;
		font-size: 13px;
	}
}

.noselect {
	-webkit-touch-callout: none;
		-webkit-user-select: none;
		 -khtml-user-select: none;
			 -moz-user-select: none;
				-ms-user-select: none;
						user-select: none;
}

.noscroll {
	position: fixed;
	overflow: hidden !important;
	width: 100%;
	height: 100%;
}

.nowrap {
	white-space: nowrap;
}
.wrap {
	white-space: normal;
}
.break-word {
	word-break: break-word;
}
.lowercase {
	text-transform: lowercase;
}
.uppercase {
	text-transform: uppercase;
}


.text-center {
	text-align: center !important;
}
.text-left {
	text-align: left !important;
}
.text-right {
	text-align: right !important;
}
.text-justify {
	text-align: justify !important;
}
.text-uppercase {
	text-transform: uppercase;
}


.img-fluid,
.img-responsive {
	max-width: 100%;
}


.pull-right {
	float: right;
}
.pull-left {
	float: left;
}
.clear {
	clear: both;
}



.hidden {
	display: none !important;
}

@media (min-width: 768px) {
	.hidden-xs-up {
		display: none !important;
	} 
}

@media (min-width: 1025px) {
	.hidden-sm-up {
		display: none !important;
	} 
}

@media (min-width: 1920px) {
	.hidden-md-up {
		display: none !important;
	} 
}


@media (max-width: 767px) {
	.hidden-xs-down {
		display: none !important;
	} 
}

@media (max-width: 1024px) {
	.hidden-sm-down {
		display: none !important;
	} 
}

@media (max-width: 1919px) {
	.hidden-md-down {
		display: none !important;
	} 
}