/*------------------------------------------------------------------------ 
GLOBAL ///////////////////////////////////////////////////////////////////
------------------------------------------------------------------------*/
div.header {
	border-bottom:1px solid var(--color-neutro-softer);
	}


div.sidebar {
	background-color:var(--color-main);
	}

div.header {
	background-color:var(--color-white);
	}


div[class*="container"] {
	background-color:var(--color-neutro-softer);
	}

div[class*="container-single"] {
	background-color:var(--color-white);
	}

div.aside {
	background-color:var(--color-neutro-softer);
	}

div.box {
	background-color:var(--color-white);
	border-radius:var(--rounded-small);
	gap:var(--gap);
	padding-block:26px;
	padding-inline:clamp(20px, 5vw, 32px);
	}









/*--------------------------------------------------
HEADER ////////////////////////////////////////////
---------------------------------------------------*/



.menu-top {
	position:absolute;
	}

/*--------------------------------------------------
SIDEBAR ////////////////////////////////////////////
---------------------------------------------------*/
div.sidebar hr{
	background-color:var(--color-white-30);
	}


ul.nav li[data-element='cover'] *{
	color:inherit;
	}



/* Menu principal
------------------------------*/
/* Botones  */
ul.nav li a,
ul.nav li[data-seccion='dropdown-button'] label{
	border-radius:6px;
	color:var(--color-white-80);
	font-size:var(--fs-medium);
	font-weight:var(--fw-bold);
	}

ul.nav li a .svg-icon,
ul.nav li[data-seccion='dropdown-button'] label .svg-icon{
	fill:var(--color-white-80);
	}

/* hover */
ul.nav li a:hover,
ul.nav li[data-seccion='dropdown-button'] label:hover{
	color:var(--color-black);
	text-decoration: none;
	}

ul.nav li a:hover .svg-icon,
ul.nav li[data-seccion='dropdown-button'] label:hover .svg-icon {
	fill:var(--color-black);
	}


/* Botones activos
------------------------------*/
body.inicio ul[class*="menu"] li[data-seccion='inicio'] a, 
body.inicio ul[class*="menu"] li[data-seccion='inicio'] a:hover,
body.dashboard ul[class*="menu"] li[data-seccion='dashboard'] a, 
body.dashboard ul[class*="menu"] li[data-seccion='dashboard'] a:hover,
body.catalogos ul[class*="menu"] li[data-seccion='catalogos'] a, 
body.catalogos ul[class*="menu"] li[data-seccion='catalogos'] a:hover,
body.services ul[class*="menu"] li[data-seccion='services'] a, 
body.services ul[class*="menu"] li[data-seccion='services'] a:hover,
body.productos ul[class*="menu"] li[data-seccion='productos'] a, 
body.productos ul[class*="menu"] li[data-seccion='productos'] a:hover, 
body.users ul[class*="menu"] li[data-seccion='users'] a, 
body.users ul[class*="menu"] li[data-seccion='users'] a:hover,
body.accounts ul[class*="menu"] li[data-seccion='accounts'] a, 
body.accounts ul[class*="menu"] li[data-seccion='accounts'] a:hover,
body.clientes ul[class*="menu"] li[data-seccion='clientes'] a, 
body.clientes ul[class*="menu"] li[data-seccion='clientes'] a:hover,
body.progress ul[class*="menu"] li[data-seccion='progress'] a, 
body.progress ul[class*="menu"] li[data-seccion='progress'] a:hover,
body.downloads ul[class*="menu"] li[data-seccion='downloads'] a, 
body.downloads ul[class*="menu"] li[data-seccion='downloads'] a:hover,
body.uploads ul[class*="menu"] li[data-seccion='uploads'] a, 
body.uploads ul[class*="menu"] li[data-seccion='uploads'] a:hover,
body.media ul[class*="menu"] li[data-seccion='media'] a, 
body.media ul[class*="menu"] li[data-seccion='media'] a:hover,
body.gallery ul[class*="menu"] li[data-seccion='gallery'] a, 
body.gallery ul[class*="menu"] li[data-seccion='gallery'] a:hover,
body.list ul[class*="menu"] li[data-seccion='list'] a, 
body.list ul[class*="menu"] li[data-seccion='list'] a:hover,
body.timeline ul[class*="menu"] li[data-seccion='timeline'] a, 
body.timeline ul[class*="menu"] li[data-seccion='timeline'] a:hover,
body.theme ul[class*="menu"] li[data-seccion='theme'] a, 
body.theme ul[class*="menu"] li[data-seccion='theme'] a:hover {
	background-color:var(--color-white)!important;
	border-radius:var(--rounded-small);
	color:var(--color-black); 
	}

body.inicio ul[class*="menu"] li[data-seccion='inicio'] a .svg-icon, 
body.inicio ul[class*="menu"] li[data-seccion='inicio'] a:hover .svg-icon,
body.dashboard ul[class*="menu"] li[data-seccion='dashboard'] a .svg-icon, 
body.dashboard ul[class*="menu"] li[data-seccion='dashboard'] a:hover .svg-icon,
body.catalogos ul[class*="menu"] li[data-seccion='catalogos'] a .svg-icon, 
body.catalogos ul[class*="menu"] li[data-seccion='catalogos'] a:hover .svg-icon,
body.services ul[class*="menu"] li[data-seccion='services'] a .svg-icon, 
body.services ul[class*="menu"] li[data-seccion='services'] a:hover .svg-icon,
body.productos ul[class*="menu"] li[data-seccion='productos'] a .svg-icon, 
body.productos ul[class*="menu"] li[data-seccion='productos'] a:hover .svg-icon, 
body.users ul[class*="menu"] li[data-seccion='users'] a .svg-icon, 
body.users ul[class*="menu"] li[data-seccion='users'] a:hover .svg-icon,
body.accounts ul[class*="menu"] li[data-seccion='accounts'] a .svg-icon, 
body.accounts ul[class*="menu"] li[data-seccion='accounts'] a:hover .svg-icon,
body.clientes ul[class*="menu"] li[data-seccion='clientes'] a .svg-icon, 
body.clientes ul[class*="menu"] li[data-seccion='clientes'] a:hover .svg-icon,
body.progress ul[class*="menu"] li[data-seccion='progress'] a .svg-icon, 
body.progress ul[class*="menu"] li[data-seccion='progress'] a:hover .svg-icon,
body.downloads ul[class*="menu"] li[data-seccion='downloads'] a .svg-icon, 
body.downloads ul[class*="menu"] li[data-seccion='downloads'] a:hover .svg-icon,
body.uploads ul[class*="menu"] li[data-seccion='uploads'] a .svg-icon, 
body.uploads ul[class*="menu"] li[data-seccion='uploads'] a:hover .svg-icon,
body.media ul[class*="menu"] li[data-seccion='media'] a .svg-icon, 
body.media ul[class*="menu"] li[data-seccion='media'] a:hover .svg-icon,
body.gallery ul[class*="menu"] li[data-seccion='gallery'] a .svg-icon, 
body.gallery ul[class*="menu"] li[data-seccion='gallery'] a:hover .svg-icon,
body.list ul[class*="menu"] li[data-seccion='list'] a .svg-icon, 
body.list ul[class*="menu"] li[data-seccion='list'] a:hover .svg-icon,
body.timeline ul[class*="menu"] li[data-seccion='timeline'] a .svg-icon, 
body.timeline ul[class*="menu"] li[data-seccion='timeline'] a:hover .svg-icon,
body.theme ul[class*="menu"] li[data-seccion='theme'] a .svg-icon, 
body.theme ul[class*="menu"] li[data-seccion='theme'] a:hover .svg-icon{
	fill:var(--color-main);
	}


/*-------------------------------------------------- 
---     SIDEBAR  ///////////////////////////////////
---------------------------------------------------*/
div.aside {
	color:inherit;
	}

div.aside [class*="subtitle"]{
	text-transform:uppercase;
	}


div.aside hr:not([class*="space"]){
	background-color:var(--color-neutro-soft)!important;
	}

div.aside div.box {
	background-color:var(--color-white-50);
	padding-block:26px;
	padding-inline:clamp(20px, 5vw, 32px);
	}








/* ----------------------------------------
---------------------------------- 720 ---
-----------------------------------------*/
@media only screen and (max-width:720px) {





	ul.nav li a,
	ul.nav li a:hover{
	background-color:transparent;
	border:1px solid var(--color-white-60);
	border-radius:18px;
	color:var(--color-white-60);
	height:36px;
	margin:0px 0px;
	padding:0px 16px 0px 8px!important;
	width:auto;
	}

	ul.nav li a .svg-icon,
	ul.nav li a:hover .svg-icon  {
	fill:var(--color-white-60)!important;
	height:36px!important;
	margin:0px 0px 0px 0px;
	padding:4px!important;
	width:36px;
	}

	body#inicio ul.nav li[data-seccion='inicio'] a, 
	body#inicio ul.nav li[data-seccion='inicio'] a:hover,
	body#dashboard ul.nav li[data-seccion='dashboard'] a, 
	body#dashboard ul.nav li[data-seccion='dashboard'] a:hover,
	body.services ul.nav li[data-seccion='services'] a, 
	body.services ul.nav li[data-seccion='services'] a:hover,
	body.productos ul.nav li[data-seccion='productos'] a, 
	body.productos ul.nav li[data-seccion='productos'] a:hover, 
	body.users ul.nav li[data-seccion='users'] a, 
	body.users ul.nav li[data-seccion='users'] a:hover,
	body.accounts ul.nav li[data-seccion='accounts'] a, 
	body.accounts ul.nav li[data-seccion='accounts'] a:hover,
	body.progress ul.nav li[data-seccion='progress'] a, 
	body.progress ul.nav li[data-seccion='progress'] a:hover,
	body.downloads ul.nav li[data-seccion='downloads'] a, 
	body.downloads ul.nav li[data-seccion='downloads'] a:hover,
	body.uploads ul.nav li[data-seccion='uploads'] a, 
	body.uploads ul.nav li[data-seccion='uploads'] a:hover,
	body.media ul.nav li[data-seccion='media'] a, 
	body.media ul.nav li[data-seccion='media'] a:hover,
	body.gallery ul.nav li[data-seccion='gallery'] a, 
	body.gallery ul.nav li[data-seccion='gallery'] a:hover,
	body.list ul.nav li[data-seccion='list'] a, 
	body.list ul.nav li[data-seccion='list'] a:hover,
	body.theme ul.nav li[data-seccion='theme'] a, 
	body.theme ul.nav li[data-seccion='theme'] a:hover {
		background-color:var(--color-white);
		color:var(--color-black); 
		}

	body#inicio ul.nav li[data-seccion='inicio'] a .svg-icon, 
	body#inicio ul.nav li[data-seccion='inicio'] a:hover .svg-icon,
	body#dashboard ul.nav li[data-seccion='dashboard'] a .svg-icon, 
	body#dashboard ul.nav li[data-seccion='dashboard'] a:hover .svg-icon,
	body.services ul.nav li[data-seccion='services'] a .svg-icon, 
	body.services ul.nav li[data-seccion='services'] a:hover .svg-icon,
	body.productos ul.nav li[data-seccion='productos'] a .svg-icon, 
	body.productos ul.nav li[data-seccion='productos'] a:hover .svg-icon, 
	body.users ul.nav li[data-seccion='users'] a .svg-icon, 
	body.users ul.nav li[data-seccion='users'] a:hover .svg-icon,
	body.accounts ul.nav li[data-seccion='accounts'] a .svg-icon, 
	body.accounts ul.nav li[data-seccion='accounts'] a:hover .svg-icon,
	body.progress ul.nav li[data-seccion='progress'] a .svg-icon, 
	body.progress ul.nav li[data-seccion='progress'] a:hover .svg-icon,
	body.downloads ul.nav li[data-seccion='downloads'] a .svg-icon, 
	body.downloads ul.nav li[data-seccion='downloads'] a:hover .svg-icon,
	body.uploads ul.nav li[data-seccion='uploads'] a .svg-icon, 
	body.uploads ul.nav li[data-seccion='uploads'] a:hover .svg-icon,
	body.media ul.nav li[data-seccion='media'] a .svg-icon, 
	body.media ul.nav li[data-seccion='media'] a:hover .svg-icon,
	body.gallery ul.nav li[data-seccion='gallery'] a .svg-icon, 
	body.gallery ul.nav li[data-seccion='gallery'] a:hover .svg-icon,
	body.list ul.nav li[data-seccion='list'] a .svg-icon, 
	body.list ul.nav li[data-seccion='list'] a:hover .svg-icon,
	body.theme ul.nav li[data-seccion='theme'] a .svg-icon, 
	body.theme ul.nav li[data-seccion='theme'] a:hover .svg-icon{
		fill:var(--color-main)!important;
		}


div[class*="container-single"] div.aside {
	background-color:transparent!important;
	padding-inline:0px!important;
	min-height:auto;
	order:1;
	}

div[class*="container-single"] div.section{
	order:2;
	}

div[class*="container-single"] div.aside div.box{
	background-color:transparent!important;
	padding-inline:0px!important;
	}


}








/*------------------------------------------------------------------------ 
LOGIN ///////////////////////////////////////////////////////////////////
------------------------------------------------------------------------*/
body.login div.main{
	background-color:var(--color-neutro-softer);
	}

.box-login .item-row{
	border-radius:var(--rounded);
	overflow:hidden;
	}

.box-login .col-cover {
	background:var(--gradient-main);
	}

.box-login .col-cover [class^="title"] {
	color:var(--color-white);
	}

.box-login .col-cover [class^="subtitle"] {
	color:var(--color-main-softer);
	}

.box-login .col-formulario {
	background-color:var(--color-white);
	}

.box-login .col-formulario form{
	gap: var(--gap-small);
	}

.box-login .col-formulario [class*="title"]:not(label) {
	display:none!important;
	}
	

.box-login .col .background{
	opacity:0.4!important;
	}
	

@media only screen and (max-width:720px) {


	.box-login .item-row{
		border-radius:0px!important
		}

	.box-login .col{
		width:100%;
		}


	.box-login .col-content [class*="title"]{
		display:none!important;
		}


	.box-login,
	.item-row,
	.box-login .col-cover,
	.box-login .col-formulario{
		height:100vh!important;
		position:absolute!important;
		bottom:0px;
		left:0px;
		right:0px;
		top:0px;
		z-index:1;
		}

	.box-login .col-formulario{
		background:transparent!important;
		gap: var(--gap-large);
		z-index:2;
		}

	.box-login .col-formulario form{
	gap: var(--gap-large);
	}

	.box-login .col-formulario [class*="title"]:not(label) {
		display:flex!important;
		}

	.box-login .col-cover .title,
	.box-login .col-cover p{
		display:none!important;
		}

	.box-login .col-formulario label.title{
		display:none!important;
		}

	.box-login .col-formulario form div.input{
		background-color:var(--color-white-20)!important;
		border:1px solid transparent!important;
		outline:0px;
		}

	.box-login .col-formulario form div.input input{
		color: var(--color-white)!important;
		background-color:transparent!important;
		border:1px solid transparent!important;
		outline:0px;
		}

	.box-login .col-formulario form div.input ::placeholder{
		color: var(--color-white)!important;
		}


	.box-login .col-formulario form div.input .svg-icon{
		fill:var(--color-white);
		}

	.box-login form [class*="menu"] [class*="alert"] {
		color:var(--color-white)!important;
		}


}

/*------------------------------------------------------------------------ 
CLIENTES /////////////////////////////////////////////////////////////////
------------------------------------------------------------------------*/
@media only screen and (max-width:720px) {

	body.clientes .aside {order:2!important;}
	body.clientes .section {order:1;}
}