/* ======================================================================
   GENERAL  //////////////////////////////////////////////////////////
====================================================================== */
/* ======================================================================
   HEADER  /////////////////////////////////////////////////////////////
====================================================================== */
/* ======================================================================
   SIDEBAR  ////////////////////////////////////////////////////////////
====================================================================== */
/* ======================================================================
   CONTAINER  //////////////////////////////////////////////////////////
====================================================================== */


/*---------------------------------------------------------- 
GLOBAL /////////////////////////////////////////////////////
----------------------------------------------------------*/
/*------------------------------------------------
--- COLOR MAIN   /////////////////////////////////
------------------------------------------------*/
/*------------------------------------------------ 
--- COLOR SECOND   ///////////////////////////////
------------------------------------------------*/
/*------------------------------------------------ 
--- COLOR WHITE  /////////////////////////////////
------------------------------------------------*/
/*------------------------------------------------ 
--- COLOR BLACK   ////////////////////////////////
------------------------------------------------*/
/*------------------------------------------------ 
--- COLOR NEUTRO   //////////////////////////////
------------------------------------------------*/
/*------------------------------------------------ 
--- GRADIENTES  /////////////////////////////////
------------------------------------------------*/


/* =======================================================================
//////////////////////////////////////////////////////////////////////////
GENERAL //////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
======================================================================== */

/* Z index
------------------------------*/
input.boton-movil[type=checkbox] + label {z-index:11;}
div.sidebar {order:1; z-index:10;}
div.bar-actions {order:1; z-index:10;}
div.header {order:2; z-index:9;}
div[class*="container"] {order:3; z-index:8;}

	@media only screen and (max-width:720px) {
	div.sidebar {order:1; z-index:10;}
	div.bar-actions {order:1; z-index:10;}
	div.header {order:2; z-index:9;}
	div[class*="container"] {order:3; z-index:8;}
	}

/*-------------------------------------------------- 
---     SIDEBAR   //////////////////////////////////
---------------------------------------------------*/
div.sidebar {
	height:auto;
	min-height:100vh;
	width:320px;
	position:fixed;
	bottom:0px;
	left:0px;
	top:0px;
	}


/*-------------------------------------------------- 
---     HEADER   ///////////////////////////////////
---------------------------------------------------*/
div.header {
	height:clamp(40px, 8vh, 90px);
	position:fixed;
	left:320px; 
	right:0px;
	top:0px;
	}


/*-------------------------------------------------- 
---     CONTAINER  /////////////////////////////////
---------------------------------------------------*/
div[class*="container"] {
	height:auto;
	min-height:calc( 100dvh - clamp(40px, 8vh, 90px));
	max-width:100%;
	position:absolute;
	width:auto;
	bottom:auto;
	left:320px;
	right:0px;
	top:clamp(40px, 8vh, 90px)!important;
	}




/*-------------------------------------------------- 
---     BAR ACTIONS  ///////////////////////////////
---------------------------------------------------*/
div.bar-actions {
	height:70px;
	max-width:100%;
	position:absolute;
	width:auto;
	bottom:auto;
	left:320px;
	right:0px;
	top:50px;
	}






/*-------------------------------------------------- 
---     SECTION  ///////////////////////////////////
---------------------------------------------------*/
div.section {
	flex-grow:9;
	height:auto;
	width:60%; /* but grow  */
	}



/*-------------------------------------------------- 
---     ASIDE  ////////////////////////////////////
---------------------------------------------------*/
div.aside{
	flex-grow:9;
	height:auto;
	min-height:100vh;
	min-width:220px;
	max-width:400px;
	width:18%;
	}



/*-------------------------------------------------- 
---     FOOTER  ////////////////////////////////////
---------------------------------------------------*/
div.footer{
	width:100%;
	}





/* ----------------------------------------
---------------------------------- 1600 ---
-----------------------------------------*/
@media only screen and (max-width:1600px) {
	div.sidebar {
	width:260px;
	}
	div.header {

	left:260px;
	}	
	div.bar-actions {
	height:60px;
	left:260px;
	top:40px;
	}
	div[class*="container"]{
	min-height:calc( 100vh - 40px);
	right:0px;
	left:260px;
	
	}
	div[class*="container"].single {
	top:100px;
	}
	div.aside{
	width:260px;
	}

}



/* ----------------------------------------
---------------------------------- 1400 ---
-----------------------------------------*/
@media only screen and (max-width:1400px) {
	div.sidebar {
	width:220px;
	}
	div.header {
	left:220px;
	}
	div.bar-actions {
	left:220px;
	}
	div[class*="container"]{
	left:220px;
	}
	}


/* ----------------------------------------
---------------------------------- 1200 ---
-----------------------------------------*/
@media only screen and (max-width:1200px) {
	div.sidebar {
	width:60px;
	}
	div.header {
	left:60px;
	}
	div.bar-actions {
	left:60px;
	}
	div[class*="container"]{
	left:60px;
	}
}


/* ----------------------------------------
----------------------------------- 720 ---
-----------------------------------------*/
@media only screen and (max-width:720px) {
	div.header {
	left:0px;
	}
	div.bar-actions {
	left:0px;
	position:fixed;
	top:0px;
	}
	div[class*="container"]{
	min-height:calc( 100vh - 0px);
	top:0px;
	left:0px;
	}
	div[class*="container"].single {
	top:60px;
	}
	div.sidebar {
	position:fixed;
	bottom:0px;
	left:0px;
	right:0px;
	top:0px;
	width:100%;
	}
	div.aside{
	max-width:100%;
	width:100%;
	}

}

/*------------------------------------------------------------------------- 
/////////////////////////////////////////////// ---------- / END GENERAL
-------------------------------------------------------------------------*/
/* =======================================================================
//////////////////////////////////////////////////////////////////////////
HEADER ///////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
======================================================================== */
div.header{
	align-items:center;
	align-content:center;
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	padding-inline:40px;
	}


div.header > *{
	width:auto;
	}

div.header > nav,
div.header > nav ul{
	justify-content:flex-end;
	}


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


/* =======================================================================
//////////////////////////////////////////////////////////////////////////
SIDEBAR //////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
======================================================================== */

div.sidebar	{
	align-items:center;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:flex-start;
	overflow:hidden;
	padding:20px 2vw;
	}


/* GAP
----------------------------------------*/
div.sidebar,
ul.nav {
	gap:var(--gap-small);
	}



/* separadores */
div.sidebar hr{
	opacity:0.2;
	width:100%;
	}


/* Cover
------------------------------*/
div.sidebar > .cover {
	background-color:transparent;
	border-radius:0%;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	height:auto;
	margin:0px;
	overflow:hidden;
	padding:6px 0px;
	width:100%;
	}

div.sidebar > .cover img{
	height:auto;
	width:100%;
	}




/* Menu principal
------------------------------*/
div.sidebar ul[class*="menu"]{
	width:100%;
	}






/* Menu end
------------------------------*/
div.sidebar ul[class*="end"]{
	margin-top: auto!important;
	}





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

	div.sidebar{
	padding:20px 0vw!important;
	}

	div.sidebar ul[class*="menu"] li a {
	flex-grow:0!important;
	padding:0px!important;
	max-height:40px!important;
	height:40px!important;
	width:40px!important;
	}

	div.sidebar ul[class*="menu"] li > * > span{
	display:none!important;
	}

	div.sidebar ul[class*="menu"] li > * > svg{
	aspect-ratio: 1 / 1;
	height:40px!important;
	width:40px!important;
	}
	
}




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


	div.sidebar {
	align-items:center;
	flex-direction:column;
	gap:6px;
	justify-content:center;
	height:auto;
	visibility:hidden;
	opacity:0.0;
	transition:all 0.16s;
	transition-timing-function:ease-out;
	padding:20px 10vw;
	}

	div.sidebar,
	ul.nav {
	gap:12px;
	}

	div.sidebar .cover {
	padding:0px 16vw;
	justify-content:center;
	}

	div.sidebar .cover img{
	max-width:200px;
	}

	ul.nav li[data-element='cover']{
	font-size:var(--fs-regular);
	margin-top:0px;
	}
	ul.nav li[data-element='cover'] span.icon-cover{
	border:6px solid var(--color-white-80);
	height:48px;
	width:48px;
	}
	ul.nav li[data-element='cover'] span{
	color:var(--color-white);
	line-height:48px;
	height:48px;
	}

	ul.nav{
	align-items:center;
	justify-content:center;
	flex-direction:row;
	max-width:100%;
	margin:0px 0px;
	padding:0px 0px 0px 0px;
	}

	ul.nav li{
	padding:0px;
	width:auto!important;
	}


	ul.nav li span{
	display:inline-block;
	line-height:36px;
	height:36px;
	width:auto;
	}


	ul.nav.end{
	bottom:auto;
	padding:0px 0px; /* = sidebar */
	position:relative;
	}


	ul.nav.end li a{
	opacity:0.5;
	}

	
	ul.nav.end li[data-element='logout']{
	display:flex;
	}


}

/*------------------------------------------------------------------------- 
///////////////////////////////////////////////// ---------- / END SIDEBAR
-------------------------------------------------------------------------*/


/* =======================================================================
//////////////////////////////////////////////////////////////////////////
CONTAINER ////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
======================================================================== */

div[class*="container"] {
	align-items:stretch;
	align-content:flex-start;
	display:flex;
	flex-flow:row wrap;
	flex-grow:9!important;
	justify-content:space-between;
	overflow-x:hidden;
	padding:0px;
	}



/* Gaps
------------------------------*/
div[class*="section"],
div[class*="col"]  {
	gap:var(--gap-medium);
	}





/* hr
------------------------------*/
div[class*="container"] hr,
div[class*="container"] div.section > hr{
	margin:0px 0px;
	}


/*-------------------------------------------------- 
---     SECTION    /////////////////////////////////
---------------------------------------------------*/
div.section {
	align-items:flex-start;
	align-content:flex-start;
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	padding:20px 5vw;
	}



/*-------------------------------------------------- 
---     BLOQUE    /////////////////////////////////
---------------------------------------------------*/

/* css-base.css */




/*-------------------------------------------------- 
---     COLUMNA    /////////////////////////////////
---------------------------------------------------*/

/* css-base.css */



/*--------------------------------------------------
ASIDE //////////////////////////////////////////////
---------------------------------------------------*/
div.aside{
	align-content:flex-start;
	display:flex;
	flex-flow:row wrap;
	gap:var(--gap-inside);
	justify-content:flex-start;
	font-size:0.8rem;
	overflow-x:hidden;
	padding-block:20px;
	padding-inline:clamp(0px, 6vw, 18px);
	}

div.aside p{
	padding:0px;
	}



/*--------------------------------------------------
FOOTER //////////////////////////////////////////////
---------------------------------------------------*/
div.footer {
	align-items:center;
	color:var(--color-neutro-soft);
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-end;
	font-size:0.8rem;
	margin:0px;
	padding:8px 0px;
	position:relative;
	}


div.footer p{
	text-align:left;
	line-height:1.2em;
	width:auto;
	}


div.footer .firma{
	color:var(--color-neutro-soft);
	flex-grow:0px!important;
	margin:0px;
	padding:0px;
	width:auto!important;
	}




/* ----------------------------------------
----------------------------------- 720 ---
-----------------------------------------*/
@media only screen and (max-width:720px) {
	div[class*="container"] {
	padding:20px 5vw;
	}
	div.section{
	padding:20px 0vw;
	}

}





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

div.cols-3 > div.col {
	width:100%;
	}

}

/*---------------------------------------------------
//////////            TITLES            //////////
---------------------------------------------------*/


.subtitle-1 {
	color:var(--color-neutro-darker);
	font-size:1rem;
	height:auto;
	font-size:var(--fs-medium);
	font-weight:var(--fw-bold);
	text-transform:uppercase;
	line-height:1.2em;
	margin:0px;
	margin-top:8px;
	padding: 0px;
	width:100%;
	}

.subtitulo-1 {
	color:var(--color-neutro-darker);
	font-size:1rem;
	font-weight:var(--fw-bold);
	height:auto;
	text-transform:uppercase;
	line-height:1.2em;
	margin:0px;
	margin-top:8px;
	padding: 0px;
	width:100%;
	}


.subtitulo-2 {
	color:var(--color-neutro-darker);
	font-size:0.8rem;
	font-weight:var(--fw-bold);
	height:auto;
	text-transform:uppercase;
	line-height:1.2em;
	margin:0px;
	margin-top:8px;
	padding: 0px;
	width:100%;
	}


.subtitulo-3 {
	color:var(--color-neutro-darker);
	font-size:0.6rem;
	font-weight:var(--fw-bold);
	height:auto;
	text-transform:uppercase;
	line-height:1.2em;
	margin:0px;
	margin-top:8px;
	padding: 0px;
	width:100%;
	}








/*--------------------------------------------
CONTENT  ////////////////////////////////////
-------------------------------------------*/
.content {
	font-size:inherit;
	font-weight:inherit;
	height:auto;
	width:100%;
	}



.content p{
	font-size:inherit;
	height:auto;
	padding:0px 0px 0px 0px;
	margin:0px 0px 18px 0px;
	width:100%;
	}











/*--------------------------------------------
BOX USER ACCOUNT  ///////////////////////////
-------------------------------------------*/
.box-user-account {
	align-items: stretch;
	border-radius: var(--rounded);
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:safe flex-start;
	gap:20px;
	height:auto;
	padding:30px 0px;
	width:100%;
	}


.box-user-account .cover{
	align-items:center;
	background-color:var(--color-neutro-darker);
	border-radius:8px 0px 0px 8px;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:center;
	height: auto;
	width:200px;
	}


.box-user-account .cover .svg-icon{
	fill:var(--color-neutro-soft);
	height:60px;
	width:60px;
	}


.box-user-account .data{
	display:flex;
	flex-wrap:wrap;
	flex-grow:9;
	gap:2px;
	min-width:300px;
	order:2;
	width:40%;
	}

.box-user-account .data input{
	color: var(--color-neutro);
	}

#tab-user-account:checked ~ #content-user-account,
#tab-user-account-edit:checked ~ #content-user-account-edit{
  display:flex!important;
	}


#tab-user-account-edit:checked ~ #content-user-account-edit .box-user-account .cover .svg-icon{
  	fill:var(--color-white);
	}


#tab-user-account-edit:checked ~ #content-user-account-edit .box-user-account .data input{
  	color:initial;
	}


/* Break
------------------------------*/
@media only screen and (max-width:720px) {
.box-user-account .cover{
	border-radius:8px 8px 0px 0px;
	padding:10px 40px;
	width:100%;
	}
}




/*------------------------------------------------------------------------- 
/////////////////////////////////////////////// ---------- / END CONTAINER
-------------------------------------------------------------------------*/

/*---------------------------------------------------------------- 
ELEMENTS  ////////////////////////////////////////////////////////
----------------------------------------------------------------*/



/*--------------------------------------------
FOUND LIST   /////////////////////////////////
-------------------------------------------*/
#found-list,
.found-list {width:100%;}








/*---------------------------------------------------------------- 
///////////////////////////////////////////////////// END ELEMENTS
----------------------------------------------------------------*/
/*---------------------------------------------------------------- 
/////////////////////////////////////////////////////////////////
SECCIONES  /////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
----------------------------------------------------------------*/

/*--------------------------------------------
LOGIN   /////////////////////////////////////
-------------------------------------------*/

/* assets/css-login.css */



/*--------------------------------------------
THEME   /////////////////////////////////////
-------------------------------------------*/
body#theme div[class*="container"]{

	} 


body#theme div.section{
	background-color:var(--color-white);
	order:1;
	} 

body#theme div.aside{
	order:2;
	width:380px;
	} 

body#theme div.box{
	border:1px solid var(--color-neutro-softer);
	height:100%;
	} 




/*--------------------------------------------
VIEW   //////////////////////////////////////
-------------------------------------------*/

/* Tab box
------------------------------*/

/* Pestañas a la derecha  */
body.view div.section div.tab-box{
	justify-content:flex-end;
	padding:0px;
	}


/* Pestaña actva */
body.view div.section div.tab-box > input:checked + label {
	border-top:1px solid var(--color-white)!important;/* set */
	}



/* bar-tools
------------------------------*/
body.view ul.bar-tools {
	justify-content:safe flex-end;
	order:99;
	}








/*---------------------------------------------------------------- 
//////////////////////////////////////////////////// END SECCIONES
----------------------------------------------------------------*/
/*---------------------------------------------------------------- 
MOVIL  ///////////////////////////////////////////////////////////
----------------------------------------------------------------*/
/*----- OCULTAMOS CHECKBOX  -----*/
input.boton-movil[type=checkbox] {
	visibility: hidden;
	display:none;
	}

/*----- LABEL DE CHECKBOX  -----*/
input.boton-movil[type=checkbox] + label{
	cursor:pointer;
	display:none;
	position:fixed;
	bottom:20px;
	left:auto;
	right:20px;
	top:auto;
	}


/*--------------------------------------------
Button movil  ////////////////////////////////
-------------------------------------------*/
input.boton-movil[type=checkbox] + label {
	background-color:var(--color-main);
	border-radius:20px;
	height:36px;
	min-width:102px!important;
	width:106px!important;
	}

input.boton-movil[type=checkbox] + label:after {
	color:var(--color-white-80);
	font-size:0.8em;
	font-weight:400;
	height:36px;
	line-height:36px;
	text-transform:uppercase;
	position:absolute;
	left:44px;
	right:auto;
	top:0px;
	width:auto;
	}

input.boton-movil[type=checkbox] + label .svg-icon{
	display:none;
	height:36px;
	fill:var(--color-white);
	margin-left:8px;
	padding:6px;
	width:36px;
	transition:all 0.22s;
	}

#btn-movil,
.btn-movil {
	position:absolute;
	bottom:20px;
	top:auto;
	right:20px;
	}

/* Qué estado mostramos
------------------------------*/
input.boton-movil[type=checkbox] + label .svg-icon.btnmovil{
	display:block;
	opacity:1.0;
	}
input.boton-movil[type=checkbox]:checked + label .svg-icon.btnmovil{
	display:none;
	opacity:0.0;
	}

input.boton-movil[type=checkbox] + label .svg-icon.btnmovil2{
	display:none;
	opacity:0.0;
	}
input.boton-movil[type=checkbox]:checked + label .svg-icon.btnmovil2{
	display:block;
	opacity:1.0;
	}

input.boton-movil[type=checkbox] + label:after {
	content:"Menu";
	}
input.boton-movil[type=checkbox]:checked + label:after {
	content:"Cerrar";
	}




/*--------------------------------------------
MOVIL SIDEBAR   /////////////////////////////
-------------------------------------------*/

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


input.boton-movil[type=checkbox] + label{
	display:flex;
	}



/*--------------------------------------------
ACTION MOVIL  ///////////////////////////////
-------------------------------------------*/

/* mostramos sidebar */
div.sidebar.action-movil{
	opacity:1.0;
	visibility:visible;
	}

/*  Bloqueamso scroll */
div[class*="container"].action-movil{
	max-height:100vh;
	overflow-y:hidden;
	}
}









/* pendientes por distribuir 


boton eliminar se pude añador a cs-inputs en www/

lo referente a subir archivos puede dejarse en esta misma hoja en un apartado de inputs o en una seccion 

 */




/*---------------------------------------------------------------- 
//////////////////////////////////////////////////////////////////
MENUS Y FORMS  //////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
----------------------------------------------------------------*/






ul.actions li.delete > *,
ul.actions li.delete input[type=submit] + label,
ul.actions li.delete input[type=button] + label,
ul.actions li.delete a,
ul.actions li.delete > *:hover,
ul.actions li.delete input[type=submit] + label:hover,
ul.actions li.delete input[type=button] + label:hover,
ul.actions li.delete a:hover {
	background-color:var(--color-warning);
	}




/*---------------------------------------------------------------- 
/////////////////////////////////////////////////////////////////
FORMS  //////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
----------------------------------------------------------------*/



/*---------------------------------
/// BOX UOLOAD IMAGEN  ///
----------------------------------*/

div.box-upload-imagen {
	height:auto;
	position:relative;
	width:100%;
	}


div.box-upload-imagen input[type=file]{
	visibility: hidden;
	display: none;
	}

div.box-upload-imagen input[type=file] + label{
	background-color:var(--color-white);
	box-shadow:0px 0px 4px rgba(0, 0, 0, 0.1);
	display:flex;
	cursor:pointer;
	margin:5px 0px 5px 0px;
	min-height:50px;
	padding:10px;
	position:relative;
	overflow:hidden;
	}
	div.box-upload-imagen input[type=file] + label{
	height:200px;
	width:100%;
	}
	@media only screen and (max-width:1500px) {
	div.box-upload-imagen input[type=file] + label{
	height:160px;
	}}
	@media only screen and (max-width:1200px) {
	div.box-upload-imagen input[type=file] + label{
	height:140px;
	}}
	@media only screen and (max-width:900px) {
	div.box-upload-imagen input[type=file] + label{
	height:100px;
	}}
	@media only screen and (max-width:620px) {
	div.box-upload-imagen input[type=file] + label{
	height:240px;
	}}


div.box-upload-imagen input[type=file] + label:hover{
	box-shadow:0px 0px 4px rgba(0, 0, 0, 0.2);
	}


div.box-upload-imagen input[type=file] + label output{
	position:initial;
	width:100%;
	}

/* Este span no aparece en el html, sino hasta version online*/
div.box-upload-imagen input[type=file] + label output span{
	display:block;
	height:auto;
	position: absolute;
	top:10px;
	left:10px;
	right:10px;
	bottom:10px;
	width:auto;
	}

div.box-upload-imagen input[type=file] + label output img{
	background-color:var(--color-neutro-softer);
	object-fit: cover;
	transition:all 0.12s;
	height:100%;
	width:100%;
	}







/*---------------------------------------------------------------- 
DASHBOARD ///////////////////////////////////////////////////////
----------------------------------------------------------------*/
/* Colors
------------------------------*/
.card-dashboard-1{
	background-color:var(--color-second-dark);
	}

.card-dashboard-1 .title{
	color:var(--color-main-soft);
	}

.card-dashboard-1 .svg-icon{
	fill:var(--color-main-soft);
	}

.card-dashboard-1 .subtitle{
	color:var(--color-white-80);
	}


/* If: a
------------------------------*/
a[class*="card-dashboard"] {
	text-decoration:none;
	}
a[class*="card-dashboard"]:hover {
	background-color:var(--color-black);
	text-decoration:none;
	}





/*--------------------------------------------
CARD DASHBOARD-1 /////////////////////////////
-------------------------------------------*/
.card-dashboard-1{
	align-items:flex-start;
	border-radius:var(--rounded);
	box-shadow:var(--box-shadow);
	color:inherit;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	flex-grow:1.5;
	font-size:1rem;
	gap:var(--gap-inside);
	height:auto;
	max-height:90px;
	padding:16px;
	text-decoration:none;
	justify-content:flex-start;
	width:auto;
	}


.card-dashboard-1 .svg-icon{
	height:32px!important;
	margin:0px 0px 0px 0px;
	width:32px;
	}

.card-dashboard-1 .title{
	height:32px;
	line-height:32px;
	font-size:1.4em;
	font-weight:500;
	text-decoration:none;
	padding:0px 0px;
	width:auto;
	}

.card-dashboard-1 .subtitle{
	display:inline-block;
	font-size:0.6em;
	height:22px;
	line-height:22px;
	margin:0px;
	text-align:left;
	text-transform:uppercase;
	padding:0px;
	width:100%;
	}


.card-dashboard-1  a{
	text-decoration:none;
	}

.card-dashboard-1  a:hover{
	text-decoration:none;
	}








/* CARD NUEVO
------------------------------*/
.card-dashboard-1.card-nuevo {
	background-image: linear-gradient(to bottom, var(--color-main-soft) -30%, var(--color-main) 140%);
	justify-content:center;
	padding:16px 8px;
	min-width:120px;
	width:auto;
	}

.card-dashboard-1.card-nuevo:hover {
	background-image:none;
	background-color: var(--color-main);
	text-decoration:none;
	}


.card-dashboard-1.card-nuevo .title {
	align-items:center;
	background-color: var(--color-main);
	border-radius:50%;
	color:var(--color-white-80);
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	text-align:center;
	height:32px;
	padding:0px;
	margin:0px;
	text-decoration:none;
	width:32px;
	}

.card-dashboard-1.card-nuevo:hover .title {
	background-color: var(--color-main);
	color:var(--color-white);
	text-decoration:none!important;
	}


.card-dashboard-1.card-nuevo .subtitle {
	color:var(--color-white);
	text-align:center;
	text-decoration:none;
	width:100%;
	}

.card-dashboard-1.card-nuevo:hover .subtitle {
	text-decoration:none;
	}





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


	*[data-element='space']{
	display:none!important;
	}

}


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

	*[data-element='dashboard-card-nuevo']{
	width:100%!important;
	}

	*[data-element='dashboard-card']{
	flex-grow:2;
	width:40%!important;
	}




}







/*--------------------------------------------
CARD PROFILE  ///////////////////////////////
-------------------------------------------*/
.card-profile {
	align-items:center;
	background-image: linear-gradient(to top, var(--color-main-softer) 0%, var(--color-main-soft) 100%);
	border-radius:var(--rounded);
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	gap:12px;
	justify-content:center;
	height:auto;
	padding:28px 32px;
	width:100%;
	}


/*If:  form;
------------------------------*/
.card-profile form{
	}




/* Profile
------------------------------*/
.card-profile .cover{
	background-color:var(--color-neutro-softer);
	border-radius:50%;
	border:3px solid var(--color-white-10);
	height:80px;
	overflow:hidden;
	order:1;
	width:80px;
	}


.card-profile .cover img{
	height:100%;
	object-fit:cover;
	width:100%;
	}



/* Data
------------------------------*/
.card-profile .data{
	display:flex;
	flex-wrap:wrap;
	flex-grow:9;
	gap: 6px;
	min-width:160px;
	order:2;
	width:60%;
	}


/* Break
------------------------------*/
	@media only screen and (max-width:620px) {
	.card-profile .data{
	width:100%;
	}}




.card-profile .data > *{
	width:100%;
	}


.card-profile .title{
	align-items:center;
	color:var(--color-white);
	font-size:var(--fs-regular);
	font-weight:var(--fw-bold);
	height:auto;
	text-align:center;
	text-transform:none;
	}


.card-profile .subtitle{
	align-items:center;
	color:var(--color-white);
	font-size:var(--fs-medium);
	text-align:center;
	}


.card-profile hr{
	background-color:var(--color-white-50);
	margin:0px;
	}



/* + assets/cs-inputs.css
------------------------------*/
.card-profile div.input  {
	background-color:transparent;
	border: 1px solid var(--color-white-20);
	}


form .card-profile  div.input  {
	border: 1px solid transparent;
	}

.card-profile div.input > span {
	background-color:transparent;
	color:var(--color-white);
	font-weight:var(--fw-bold)!important;
	font-size:var(--fw-regular)!important;
	}


.card-profile div.input .svg-icon {
	fill:var(--color-white);
	}

form .card-profile  div.input .svg-icon {
	fill:inherit;
	}






/*--------------------------------------------
DASHBOARD CARDS  ////////////////////////////
-------------------------------------------*/
div.dashboard-cards {
	align-items:stretch;
	display:grid;
	grid-gap:1.6vmax;/*set*/
	grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); /*set*/
	width:100%;
	}


div.dashboard-cards > *{
	width:auto!important;
	}



/* span text 
ul.nav li span,
ul.nav li[data-seccion='dropdown-button'] label span,
ul.nav li[data-seccion='dropdown-button'] ul li a span{
	align-items: center;
	display:flex-block;
	flex-direction:row;
	justify-content:flex-start;
	flex-wrap:wrap;
	flex-grow:9;
	line-height:32px;
	height:32px;
	text-align:left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space:nowrap;
	width:100px; /* but grow */
	}

/* menu dropdown 
ul.nav li[data-seccion='dropdown-button'] ul.menu-dropdown{
	display:none;
	border:1px solid blue;
	overflow:hidden;
	padding:0px;
	}
*/
/* menu dropdown action 
ul.nav li[data-seccion='dropdown-button'] ul.menu-dropdown.action{
	border:1px solid red;
	display:block;
	}

*/



/* Icon cover  
ul.nav li[data-element='cover']{
	font-weight:var(--fw-bold);
	font-size:var(--fs-medium);
	margin-top:20px;
	text-transform:uppercase;
	}


ul.nav li[data-element='cover'] span.icon-cover,
ul.nav li > * .svg-icon{
	height:32px;
	width:32px;
	}


ul.nav li[data-element='cover'] span.icon-cover{
	background-color:var(--color-white);
	border:3px solid var(--color-neutro-softer);
	border-radius:50%;
	flex-grow:0;
	overflow:hidden;
	padding:0px!important;
	}

ul.nav li[data-element='cover'] span.icon-cover img{
	height:100%;
	object-fit: cover!important;
	width:100%;
	}

*/

/* Botones 
ul.nav li a,
ul.nav li[data-seccion='dropdown-button'] label{
	align-items:center;
	cursor:pointer;
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	padding:0px 0px;
	text-decoration:none;
	width:100%;
	}


ul.nav li[data-seccion='dropdown-button'] input{
	display:none;
	}
 */

/* puntos suspensivos 
ul.nav li a,
ul.nav li[data-seccion='dropdown-button'] label{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}


ul.nav li a .svg-icon,
ul.nav li[data-seccion='dropdown-button'] label .svg-icon {
	padding:2px;
	}

*/