/* INDICE

	——— Formulario

	——— Buttons
		—— Button Base
		—— Button Tools
		—— Button Tag
		—— Button Inline

	——— Menus
		—— Menu (all)
		—— Menu actions
		—— Bar tools
		—— Menu categories

	——— Alerts

	——— Inputs
		—— label.title

*/


/*-------------------------------------------------------------------------- 
////////////////////////////////////////////////////////////////////////////
MENUS INPUTS  /////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
-------------------------------------------------------------------------*/
.formulario {
	height:auto;
	width:100%;
	}


/*-------------------------------------------------------------------------- 
BUTTONS ////////////////////////////////////////////////////////////////////
--------------------------------------------------------------------------*/
/*--------------------------------------------
BUTTON BASE  ////////////////////////////////
-------------------------------------------*/
/* ////////////// SET: DESIGN
------------------------------*/
.button,
.button + label,
ul.add-button li > a,
ul.add-button li > span,
ul.add-button li > input[type=submit] + label,
ul.add-button li > input[type=button] + label,
ul.add-button li > input[type=file] + label,
ul.add-button li > button {
	background-color:var(--color-white);
	color:var(--color-black);
	border-radius:4px;
	}

/* Icons
------------------------------*/
.button .svg-icon,
.button + label .svg-icon,
ul.add-button .svg-icon {
	fill:var(--color-black-70);
	}


/* Hover
------------------------------*/
.button:hover,
.button + label:hover,
ul.add-button li > a:hover,
ul.add-button li > span:hover,
ul.add-button li > input[type=submit] + label:hover,
ul.add-button li > input[type=button] + label:hover,
ul.add-button li > input[type=file] + label:hover,
ul.add-button li > button:hover {
	background-color:var(--color-white-80);
	color:var(--color-black);
	text-decoration:none;
	}

.button:hover .svg-icon,
.button + label:hover .svg-icon,
ul.add-button :hover .svg-icon {
	fill:var(--color-black);
	}


/* + Outline
------------------------------*/
.button.outline,
.button.outline + label,
ul.add-button.outline li > a,
ul.add-button.outline li > span,
ul.add-button.outline li > input[type=submit] + label,
ul.add-button.outline li > input[type=button] + label,
ul.add-button.outline li > input[type=file] + label,
ul.add-button.outline li > button {
	background-color:transparent;
	border:1px solid var(--color-white);
	color:var(--color-white);
	}
.button.outline .svg-icon,
.button.outline + label .svg-icon,
ul.add-button.outline  li > * .svg-icon {
	fill:var(--color-white);
	}

.button.outline:hover .svg-icon,
.button.outline + label:hover .svg-icon,
ul.add-button.outline li > *:hover .svg-icon {
	fill:var(--color-white);
	}


.button.outline:hover,
.button.outline + label:hover,
ul.add-button.outline li > a:hover,
ul.add-button.outline li > span:hover,
ul.add-button.outline li > input[type=submit] + label:hover,
ul.add-button.outline li > input[type=button] + label:hover,
ul.add-button.outline li > input[type=file] + label:hover,
ul.add-button.outline li > button:hover {
	border:1px solid transparent;
	background-color:var(--color-white-30);
	color:var(--color-white);
	}





/* General
------------------------------*/
.button,
.button + label,
ul.add-button li > a,
ul.add-button li > span,
ul.add-button li > input[type=submit] + label,
ul.add-button li > input[type=button] + label,
ul.add-button li > input[type=file] + label,
ul.add-button li > button{
	align-items:center;
	border:0px;
	cursor: pointer;
	display:inline-flex;
	flex-direction:row;
	font-size:var(--fs-medium);
	font-weight:var(--fw-normal);
	height:46px;
	line-height:1.2em;
	letter-spacing:1px;
	gap:4px;
	justify-content:center;
	margin:0px;
	min-width:120px;
	outline:0;
	padding:0px 16px;
	position:relative;
	text-decoration:none;
	text-transform:uppercase;
	transition:all 0.12s;
	width:auto;
	}


input.button[type=submit],
input.button[type=button],
input.button[type=file],
ul.add-button li > input[type=submit],
ul.add-button li > input[type=button],
ul.add-button li > input[type=file] {
	display:none;
	visibility: hidden;
	}



/* Icons
------------------------------*/
.button .svg-icon,
.button + label .svg-icon,
ul.add-button .svg-icon {
	aspect-ratio: auto 1 / 1; 
	height:46px;
	margin:0px 0px 0px 0px;
	padding:6px;
	width:46px;
	}



/* + Rounded
------------------------------*/
.button.rounded,
.button.rounded + label,
ul.add-button.rounded li > a,
ul.add-button.rounded li > span,
ul.add-button.rounded li > input[type=submit] + label,
ul.add-button.rounded li > input[type=button] + label,
ul.add-button.rounded li > input[type=file] + label,
ul.add-button.rounded li > button {
	border-radius:23px;
	}



/* @media
------------------------------*/
@media only screen and (max-width:1500px) {
.button,
.button + label,
ul.add-button li > a,
ul.add-button li > span,
ul.add-button li > input[type=submit] + label,
ul.add-button li > input[type=button] + label,
ul.add-button li > input[type=file] + label,
ul.add-button li > button{
height:36px;
}
.button .svg-icon,
.button + label .svg-icon,
ul.add-button .svg-icon {
height:36px;
padding:6px;
width:36px;
}
.button.rounded,
.button.rounded + label,
ul.add-button.rounded li > a,
ul.add-button.rounded li > span,
ul.add-button.rounded li > input[type=submit] + label,
ul.add-button.rounded li > input[type=button] + label,
ul.add-button.rounded li > input[type=file] + label,
ul.add-button.rounded li > button {
border-radius:18px;
}}


@media only screen and (max-width:620px) {
.button,
.button + label,
ul.add-button li > a,
ul.add-button li > span,
ul.add-button li > input[type=submit] + label,
ul.add-button li > input[type=button] + label,
ul.add-button li > input[type=file] + label,
ul.add-button li > button{
height:46px;
}
.button .svg-icon,
.button + label .svg-icon,
ul.add-button .svg-icon {
height:46px;
padding:6px;
width:46px;
}
.button.rounded,
.button.rounded + label,
ul.add-button.rounded li > a,
ul.add-button.rounded li > span,
ul.add-button.rounded li > input[type=submit] + label,
ul.add-button.rounded li > input[type=button] + label,
ul.add-button.rounded li > input[type=file] + label,
ul.add-button.rounded li > button {
border-radius:23px;
}}




/* + Small
------------------------------*/
.button.small,
.button.small + label,
ul.add-button.small li > a,
ul.add-button.small li > span,
ul.add-button.small li > input[type=submit] + label,
ul.add-button.small li > input[type=button] + label,
ul.add-button.small li > input[type=file] + label,
ul.add-button.small li > button{
	font-size:var(--fs-medium);
	height:36px;
	padding:0px 12px;
	}

/* Icons
------------------------------*/
.button.small .svg-icon,
.button.small + label .svg-icon,
ul.add-button.small .svg-icon {
	height:36px;
	padding:4px;
	width:36px;
	}


/* + small + Rounded
------------------------------*/
.button.small.rounded,
.button.small.rounded + label,
ul.add-button.small.rounded li > a,
ul.add-button.small.rounded li > span,
ul.add-button.small.rounded li > input[type=submit] + label,
ul.add-button.small.rounded li > input[type=button] + label,
ul.add-button.small.rounded li > input[type=file] + label,
ul.add-button.small.rounded li > button {
	border-radius:18px;
	}


/* @media
------------------------------*/
@media only screen and (max-width:1500px) {
.button.small,
.button.small + label,
ul.add-button.small li > a,
ul.add-button.small li > span,
ul.add-button.small li > input[type=submit] + label,
ul.add-button.small li > input[type=button] + label,
ul.add-button.small li > input[type=file] + label,
ul.add-button.small li > button{
height:28px;
}
.button.small .svg-icon,
.button.small + label .svg-icon,
ul.add-button.small .svg-icon {
height:28px;
padding:4px;
width:28px;
}
.button.small.rounded,
.button.small.rounded + label,
ul.add-button.small.rounded li > a,
ul.add-button.small.rounded li > span,
ul.add-button.small.rounded li > input[type=submit] + label,
ul.add-button.small.rounded li > input[type=button] + label,
ul.add-button.small.rounded li > input[type=file] + label,
ul.add-button.small.rounded li > button {
	border-radius:14px;
	}}


@media only screen and (max-width:620px) {
.button.small,
.button.small + label,
ul.add-button.small li > a,
ul.add-button.small li > span,
ul.add-button.small li > input[type=submit] + label,
ul.add-button.small li > input[type=button] + label,
ul.add-button.small li > input[type=file] + label,
ul.add-button.small li > button{
height:32px;
}
.button.small .svg-icon,
.button.small + label .svg-icon,
ul.add-button.small .svg-icon {
height:32px;
padding:4px;
width:32px;
}
.button.small.rounded,
.button.small.rounded + label,
ul.add-button.small.rounded li > a,
ul.add-button.small.rounded li > span,
ul.add-button.small.rounded li > input[type=submit] + label,
ul.add-button.small.rounded li > input[type=button] + label,
ul.add-button.small.rounded li > input[type=file] + label,
ul.add-button.small.rounded li > button {
	border-radius:16px;
	}}











/*--------------------------------------------
BUTTON TOOLS ////////////////////////////////
-------------------------------------------*/
/* ////////////// SET: DESIGN
------------------------------*/
.button-tools,
.button-tools + label,
ul.add-button-tools li > a,
ul.add-button-tools li > span,
ul.add-button-tools li > input[type=submit] + label,
ul.add-button-tools li > input[type=button] + label,
ul.add-button-tools li > input[type=file] + label,
ul.add-button-tools li > button {
	background-color:var(--color-neutro-soft);
	color:var(--color-white-70);
	}



/* +  iconos
------------------------------*/
.button-tools .svg-icon,
.button-tools + label .svg-icon,
ul.add-button-tools .svg-icon {
	fill:var(--color-white-70);
	}


/* Hover
------------------------------*/
.button-tools:hover,
.button-tools + label:hover,
ul.add-button-tools li > a:hover,
ul.add-button-tools li > span:hover,
ul.add-button-tools li > input[type=submit] + label:hover,
ul.add-button-tools li > input[type=button] + label:hover,
ul.add-button-tools li > input[type=file] + label:hover,
ul.add-button-tools li > button:hover {
	background-color:var(--color-neutro);
	color:var(--color-white);
	text-decoration: none;
	}

.button:hover .svg-icon,
.button-tools + label:hover .svg-icon,
ul.add-button-tools :hover .svg-icon {
	fill:var(--color-white);
	}


/* + Outline
------------------------------*/
.button-tools.outline,
.button-tools.outline + label,
ul.add-button-tools.outline li > a,
ul.add-button-tools.outline li > span,
ul.add-button-tools.outline li > input[type=submit] + label,
ul.add-button-tools.outline li > input[type=button] + label,
ul.add-button-tools.outline li > input[type=file] + label,
ul.add-button-tools.outline li > button {
	background-color:transparent;
	border:1px solid var(--color-white);
	color:var(--color-white);
	}
.button-tools.outline .svg-icon,
.button-tools.outline + label .svg-icon,
ul.add-button-tools.outline  li > * .svg-icon {
	fill:var(--color-white);
	}

.button-tools.outline:hover .svg-icon,
.button-tools.outline + label:hover .svg-icon,
ul.add-button-tools.outline li > *:hover .svg-icon {
	fill:var(--color-white);
	}


.button-tools.outline:hover,
.button-tools.outline + label:hover,
ul.add-button-tools.outline li > a:hover,
ul.add-button-tools.outline li > span:hover,
ul.add-button-tools.outline li > input[type=submit] + label:hover,
ul.add-button-tools.outline li > input[type=button] + label:hover,
ul.add-button-tools.outline li > input[type=file] + label:hover,
ul.add-button-tools.outline li > button:hover {
	border:1px solid transparent;
	background-color:var(--color-main);
	color:var(--color-white);
	}






/* General 
------------------------------*/
.button-tools,
.button-tools + label,
ul.add-button-tools li > a,
ul.add-button-tools li > span,
ul.add-button-tools li > input[type=submit] + label,
ul.add-button-tools li > input[type=button] + label,
ul.add-button-tools li > input[type=file] + label,
ul.add-button-tools li > button{
	align-items:center;
	border-radius:11px;
	border:0px;
	cursor:pointer;
	display:inline-flex;
	flex-direction:row;
	font-size:var(--fs-small);
	font-weight:var(--fw-normal);
	gap:2px;
	justify-content:center;
	height:22px;
	line-height:22px;
	letter-spacing:1px;
	margin:0px;	
	outline:0px;
	position: relative;
	padding:0px 12px;
	text-decoration: none;
	text-transform:uppercase;
	transition:all 0.12s;
	width:auto!important;
	}


input.button-tools[type=submit],
input.button-tools[type=button],
input.button-tools[type=file],
ul.add-button-tools li > input[type=submit],
ul.add-button-tools li > input[type=button],
ul.add-button-tools li > input[type=file] {
	display:none;
	visibility: hidden;
	}



/* +  iconos
------------------------------*/
.button-tools .svg-icon,
.button-tools + label .svg-icon,
ul.add-button-tools .svg-icon {
	aspect-ratio: auto 1 / 1; 
	height:22px;
	margin-left:-6px;
	padding:2px;
	width:22px;
	}









/*--------------------------------------------
BUTTON TAG ///////////////////////////////////
-------------------------------------------*/
/* ////////////// SET: DESIGN
------------------------------*/
.button-tags,
.button-tags + label,
ul.add-button-tags li > a,
ul.add-button-tags li > span,
ul.add-button-tags li > input[type=submit] + label,
ul.add-button-tags li > input[type=button] + label,
ul.add-button-tags li > input[type=file] + label,
ul.add-button-tags li > button {
	background-color:var(--color-white-20);
	color:var(--color-white-70);
	}


/*  +  iconos
------------------------------*/
.button-tags .svg-icon,
.button-tags + label .svg-icon,
ul.add-button-tags .svg-icon {
	fill:var(--color-white-70);
	}


/* Hover
------------------------------*/
.button-tags:hover,
.button-tags + label:hover,
ul.add-button-tags li > a:hover,
ul.add-button-tags li > span:hover,
ul.add-button-tags li > input[type=submit] + label:hover,
ul.add-button-tags li > input[type=button] + label:hover,
ul.add-button-tags li > input[type=file] + label:hover,
ul.add-button-tags li > button:hover {
	background-color:var(--color-white-30);
	text-decoration:none;
	color:var(--color-white);
	}

.button-tags:hover .svg-icon,
.button-tags + label:hover .svg-icon,
ul.add-button-tags :hover .svg-icon {
	fill:var(--color-white);
	}




/* General
------------------------------*/
.button-tags,
.button-tags + label,
ul.add-button-tags li > a,
ul.add-button-tags li > span,
ul.add-button-tags li > input[type=submit] + label,
ul.add-button-tags li > input[type=button] + label,
ul.add-button-tags li > input[type=file] + label,
ul.add-button-tags li > button{
	border-radius:0px;
	cursor: pointer;
	align-items:center;
	border:0px;
	display:inline-flex;
	flex-direction:row;
	font-size:var(--fs-small);
	font-weight:var(--fw-normal);
	justify-content:center;
	gap:2px;
	height:28px;
	line-height:1.4em;
	letter-spacing:1px;
	margin:0px;
	outline:0;
	padding:0px 6px;
	position:relative;
	text-decoration:none;
	transition:all 0.12s;
	text-transform:uppercase;
	width:auto;
	}



input.button-tags[type=submit],
input.button-tags[type=button],
input.button-tags[type=file],
ul.add-button-tags li > input[type=submit],
ul.add-button-tags li > input[type=button],
ul.add-button-tags li > input[type=file] {
	display:none;
	visibility: hidden;
	}


/*  +  iconos
------------------------------*/
.button-tags .svg-icon,
.button-tags + label .svg-icon,
ul.add-button-tags .svg-icon {
	height:28px;
	margin:0px 0px 0px 0px;
	padding:4px;
	width:28px;
	}




/* @media
------------------------------*/
@media only screen and (max-width:1500px) {
.button-tags,
.button-tags + label,
ul.add-button-tags li > a,
ul.add-button-tags li > span,
ul.add-button-tags li > input[type=submit] + label,
ul.add-button-tags li > input[type=button] + label,
ul.add-button-tags li > input[type=file] + label,
ul.add-button-tags li > button{
height:26px;
}
.button-tags .svg-icon,
.button-tags + label .svg-icon,
ul.add-button-tags .svg-icon {
height:26px;
width:26px;
}}


@media only screen and (max-width:620px) {
.button-tags,
.button-tags + label,
ul.add-button-tags li > a,
ul.add-button-tags li > span,
ul.add-button-tags li > input[type=submit] + label,
ul.add-button-tags li > input[type=button] + label,
ul.add-button-tags li > input[type=file] + label,
ul.add-button-tags li > button{
height:28px;
}
.button-tags .svg-icon,
.button-tags + label .svg-icon,
ul.add-button-tags .svg-icon {
height:28px;
width:28px;
}}







/*--------------------------------------------
BUTTON INLINE  ///////////////////////////////
-------------------------------------------*/
/* ////////////// SET: DISEÑO 
------------------------------*/
.button-inline,
.button-inline + label,
.menu-button-inline a,
.menu-button-inline span,
.menu-button-inline input[type=submit] + label,
.menu-button-inline input[type=button] + label,
.menu-button-inline input[type=file] + label{
	background-color:none;
	color:inherit;
	}

/* +  iconos
------------------------------*/
.button-inline .svg-icon,
.button-inline + label .svg-icon,
.menu-button-inline a .svg-icon,
.menu-button-inline span .svg-icon,
.menu-button-inline input[type=submit] + label .svg-icon,
.menu-button-inline input[type=button] + label .svg-icon,
.menu-button-inline input[type=file] + label .svg-icon{
	fill:inherit;
	}

/* Hover
------------------------------*/
.button-inline:hover,
.button-inline + label:hover,
.menu-button-inline a:hover,
.menu-button-inline span:hover,
.menu-button-inline input[type=submit] + label:hover,
.menu-button-inline input[type=button] + label:hover,
.menu-button-inline input[type=file] + label:hover{
	background-color:none;
	color:inherit;
	text-decoration:underline;
	}

.button-inline:hover .svg-icon,
.button-inline:hover + label .svg-icon,
.menu-button-inline  :hover .svg-icon{
	fill:inherit;
	}



/* General
------------------------------*/
.button-inline,
.button-inline + label,
.menu-button-inline a,
.menu-button-inline span,
.menu-button-inline input[type=submit] + label,
.menu-button-inline input[type=button] + label,
.menu-button-inline input[type=file] + label{
	display:inline;
	flex-direction:row;
	font-size:inherit;
	font-weight:inherit;
	height:auto;
	justify-content:flex-start;
	cursor: pointer;
	gap:6px;
	margin:0px;
	overflow:hidden;
	position:relative;
	transition:all 0.12s;
	text-decoration:underline;
	width:auto;
	}


input.button-inline[type=submit],
input.button-inline[type=button],
input.button-inline[type=file],
.menu-button-inline  input[type=submit],
.menu-button-inline  input[type=button],
.menu-button-inline  input[type=file] {
	display:none;
	visibility: hidden;
	}



/* +  iconos
------------------------------*/
.button-inline .svg-icon,
.button-inline + label .svg-icon,
.menu-button-inline a .svg-icon,
.menu-button-inline span .svg-icon,
.menu-button-inline input[type=submit] + label .svg-icon,
.menu-button-inline input[type=button] + label .svg-icon,
.menu-button-inline input[type=file] + label .svg-icon{
	display:inline;
	aspect-ratio: auto 1 / 1; 
	height:16px;
	margin:0px 0px -3px 0px;
	padding:0px;
	width:16px;
	}







/*-------------------------------------------------------------------------- 
MENUS //////////////////////////////////////////////////////////////////////
--------------------------------------------------------------------------*/
/*--------------------------------------------
MENU  ///////////////////////////////////////
-------------------------------------------*/
ul.menu{
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	gap:8px;
	height:auto;
	margin:0px 0px;
	padding:0px 0px;
	width:100%;
	}

ul.menu li {
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	list-style:none;
	padding:0px;
	margin:0px;
	position:relative;
	width:auto;
	}






/*--------------------------------------------
MENU ACTIONS  ////////////////////////////////
-------------------------------------------*/
ul.menu-actions {
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	gap:8px;
	height:auto;
	margin:0px 0px;
	padding:0px 0px;
	width:100%;
	}


ul.menu-actions li {
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	list-style:none;
	padding:0px;
	margin:0px;
	position:relative;
	width:auto;
	}


ul.menu-actions .alert {
	text-align:left;
	}



/* BREAK : MOVIL
------------------------------*/
@media only screen and (max-width:620px) {
	ul.menu-actions{
	padding:0px 10vw!important;
	font-size:1rem;
	}
	ul.menu-actions li{
	width:100%!important;
	}
	ul.menu-actions li > *{
	width:100%!important;
	}
	ul.menu-actions .alert {
	width:100%;
	}
	ul.menu-actions .alert {
	text-align:center;
	}
}

@media only screen and (max-width:520px) {
	ul.menu-actions{
	padding:0px 4vw;
	}}

@media only screen and (max-width:420px) {
	ul.menu-actions{
	padding:0px 0vw;
	}}





/* Alineaciones alternativas
------------------------------*/
ul.menu.center,
ul.menu-actions.center{
	justify-content:center;
	}

ul.menu.center .alert,
ul.menu-actions.center .alert {
	width:100%;
	}

ul.menu.center .alert,
ul.menu-actions.center .alert{
	text-align:center;
	width:100%;
	}

ul.menu.left,
ul.menu-actions.left {
	justify-content:flex-start;
	}

ul.menu.right,
ul.menu-actions.right {
	justify-content:flex-end;
	}




/* Vertical
------------------------------*/





/* Reset BUTTON
------------------------------*/
ul.menu-actions li.reset > *,
ul.menu-actions.small li.reset > * {
	background-color:transparent!important;
	border-radius:0px!important;
	color:var(--color-neutro)!important;
	font-size:0.6rem;
	height:auto!important;
	line-height:1em!important;
	min-width:0px!important;
	padding:0px 2px!important;
	text-transform:uppercase;
	transition:all 0.12s;
	width:100%;
	}







/* + small
------------------------------*/
ul.menu.small,
ul.menu-actions.small{
	gap:4px;
	}





	@media only screen and (max-width:620px) {
	ul.menu-actions.small{
	justify-content:space-between;
	padding:0px 0vw;
	}}
	@media only screen and (max-width:620px) {
	ul.menu-actions.small li{
	min-width:49%;
	width:auto;
	}}







/*--------------------------------------------
BAR TOOLS /// ////////////////////////////////
-------------------------------------------*/
/* ////////////// SET: DISEÑO 
------------------------------*/
ul.bar-tools {
	border-bottom:1px solid var(--color-neutro-softer);
	border-top:1px solid var(--color-neutro-softer);
	color:var(--color-neutro);
	}







/* General
------------------------------*/
ul.bar-tools {
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	gap:6px;
	justify-content:flex-start;
	height:auto;
	list-style:none;
	margin:0px 0px;
	padding:6px 0px;
	width:100%;
	}



ul.bar-tools li{
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	flex-grow:0px;
	height:auto;
	list-style:none;
	text-align: center;
	padding:0px;
	width:auto;
	}



ul.bar-tools li.grow{
	flex-grow:12;
	}




/* Font default
------------------------------*/
ul.bar-tools {
	font-size:var(--fs-medium);
	font-weight:var(--fw-normal);
	}



/* Title
------------------------------*/
ul.bar-tools li[data-element='title']{
	font-weight:var(--fw-bold);
	text-transform: uppercase;
	}


/* Text link
------------------------------*/
ul.bar-tools li[data-element='link'] a{
	color:inherit;
	background-color:transparent;
	font-weight:inherit;
	font-size:inherit;
	padding:inherit;
	text-decoration:none;
	text-transform:none;
	}

ul.bar-tools li[data-element='link'] a:hover{
	text-decoration:underline;
	}



/* Separator
------------------------------*/
ul.bar-tools li[data-element='separator']{
	background-color:var(--color-neutro-soft);
	height:14px;
	width:1px;
	}



/* Vertical
------------------------------*/
ul.bar-tools.vertical li{
	width:100%;
	}

ul.bar-tools.vertical li[data-element='separator']{
	height:1px;
	width:100%;
	}

ul.bar-tools.vertical li > *{
	min-width:160px;
	}

ul.bar-tools.vertical li[data-element='link'] a{
	min-width:auto;
	}



/*--------------------------------------------
MENU CATEGORIES  ////////////////////////////
-------------------------------------------*/
ul.menu-categories {
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	gap:4px;
	height:auto;
	margin:0px 0px;
	padding:0px 0px;
	width:100%;
	}


ul.menu-categories li {
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	list-style:none;
	padding:0px;
	margin:0px;
	position:relative;
	width:auto;
	}


ul.menu-categories > li input[type=checkbox],
ul.menu-categories > li input[type=radio] {
	visibility: hidden;
	display: none;
	}


ul.menu-categories > li input[type=checkbox] + label,
ul.menu-categories > li input[type=radio] + label,
div.tab-box.categories > label {
	align-items:center;
	align-content:center;
	cursor:pointer;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	font-size:var(--fs-small);
	font-weight:var(--fw-normal);
	gap:2px;
	justify-content:flex-start;
	height:28px;
	letter-spacing:1px;
	line-height:28px;
	outline:0;
	padding:0px 8px;
	position:relative;
	margin:0px;
	text-decoration:none;
	transition:all 0.12s;
	text-transform:uppercase;
	width:auto;
	}




ul.menu-categories > li input[type=checkbox] + label,
ul.menu-categories > li input[type=radio] + label,
div.tab-box.categories > label  {
	background-color:var(--color-white-30);
	border:1px solid var(--color-white-60);
	color:var(--color-white-80);
	border-radius:14px;
	}


/*  +  iconos
------------------------------*/
ul.menu-categories .svg-icon,
div.tab-box.categories > label .svg-icon {
	height:28px;
	margin:0px 0px 0px -8px;
	padding:4px;
	width:28px;
	}



/*  +  iconos
------------------------------*/
ul.menu-categories .svg-icon,
div.tab-box.categories > label .svg-icon {
	fill:var(--color-white);
	}


/* Hover
------------------------------*/
ul.menu-categories > li input[type=checkbox] + label:hover,
ul.menu-categories > li input[type=radio] + label:hover,
div.tab-box.categories > label:hover {
	background-color:var(--color-white-30);
	border:1px solid var(--color-white-60);
	color:var(--color-white);
	}

ul.menu-categories > li input[type=checkbox] + label:hover .svg-icon,
ul.menu-categories > li input[type=radio] + label:hover .svg-icon,
div.tab-box.categories > label:hover .svg-icon {
	fill:var(--color-white);
	}


/* Checker
------------------------------*/
ul.menu-categories > li input[type=checkbox]:checked + label,
ul.menu-categories > li input[type=radio]:checked + label,
div.tab-box.categories > input:checked + label{
	background-color:var(--color-white-60);
	border:1px solid var(--color-white-90);
	color:var(--color-white);
	}

ul.menu-categories > li input[type=checkbox]:checked + label .svg-icon,
ul.menu-categories > li input[type=radio]:checked + label .svg-icon,
div.tab-box.categories > input:checked + label {
	fill:var(--color-white-80);
	}




/*--------------------------------------------
MENU BAR ////////////////////////////////////
-------------------------------------------*/
/*
ul.menu-bar {
	align-items:flex-start;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	font-weight:300;
	font-size:0.7rem;
	gap:4px;
	height: auto;
	margin:4px 0px;
	padding:0px;
	width:100%;
	}

	
ul.menu-bar li {
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	list-style:none;
	gap:4px;
	padding:0px;
	margin:0px;
	text-align:center;
	position:relative;
	width:auto;
	}



ul.menu-bar li input[type="submit"],
ul.menu-bar li input[type="button"]{
	visibility: hidden;
	display:none;
	}


ul.menu-bar li > a,
ul.menu-bar li > span,
ul.menu-bar li > input[type=submit] + label,
ul.menu-bar li > input[type=button] + label,
ul.menu-bar li > button{
	align-items:center;
	background-color:var(--color-neutro-soft);
	border:0px;
	border-radius:13px;
	color:var(--color-white-70);
	display:flex;
	flex-direction:row;
	justify-content:center;
	cursor:pointer;
	font-size:1em;
	height:22px;
	line-height:22px;
	margin:0px;	
	outline:0px;
	padding:0px 12px; 
	position: relative;
	text-decoration: none;
	text-transform:uppercase;
	transition:all 0.12s;
	width:auto;
	}



ul.menu-bar li > a:hover,
ul.menu-bar li > span:hover,
ul.menu-bar li > input[type=submit] + label:hover,
ul.menu-bar li > input[type=button] + label:hover,
ul.menu-bar li > button:hover {
	background-color:var(--color-neutro-soft);
	color:var(--color-white);
	}




ul.menu-bar li > .add-icon{
	padding-left:0px!important;
	}

ul.menu-bar li > .add-icon .svg-icon {
	height:22px;
	fill:var(--color-white-70);
	margin:0px 0px 0px 2px;
	transition:all 0.12s;
	padding:4px;
	width:22px;
	}
	
ul.menu-bar li > .add-icon:hover .svg-icon {
	fill:var(--color-white);
	}




ul.menu-bar.vertical li{
	width:100%;
	}



ul.menu-bar li p{
	color:var(--color-neutro);
	font-size:0.8rem;
	padding:0px;
	margin:0px;
	width:auto;
	}

ul.menu-bar.vertical li p{
	width:100%;
	}

*/

/*-------------------------------------------------------------------------- 
ALERTS ////////////////////////////////////////////////////////////////////
--------------------------------------------------------------------------*/
.alert{
	color:var(--color-neutro);
	font-size:0.5rem;
	height:auto!important;
	margin:0px 0px;
	letter-spacing:0.6px;
	text-align:left;
	text-transform:uppercase;
	overflow:hidden;
	padding:0px 0px;
	width:auto;
	}



.alert.color-ok,
.alerterror {
	color:var(--color-ok);
	}

.alert.color-warning,
.alertok {
	color:var(--color-warning);
	}


/*-------------------------------------------------------------------------- 
INPUTS /////////////////////////////////////////////////////////////////////
--------------------------------------------------------------------------*/
form {
	align-items:flex-start;
	border:0px;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	gap:8px;
	height:auto;
	justify-content:space-between;
	padding:0px;
	margin:0px;
	outline:0px;
	width:100%;
	}



/* General
------------------------------*/
input, textarea,
input:focus, textarea:focus  {
	outline:0px;
	}



input[type=text],
input[type=number],
input[type=password],
input[type=email],
input[type=tel], 
input[type="text"]:focus,
textarea,
textarea:focus,
select:focus,
div.input > span {
	background-color:var(--color-white-20);
	
	}



input[type=text],
input[type=number],
input[type=password],
input[type=email],
input[type=tel], 
textarea,
div.input > span{
	align-items:center;
	border:0px;
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	flex-grow:2;
	justify-content:flex-start;
	padding:0px;
	text-indent:10px;
	width:100%; 
	}


/* border radius
------------------------------*/
input[type=text],
input[type=number],
input[type=password],
input[type=email],
input[type=tel], 
textarea,
div.input{
	border-radius:4px;
	}



/* input a la mitad
------------------------------*/
form label.title.split,
input.split {
	width:40%;
	}



textarea {
	line-height:36px;
	min-height:200px; 
	}
	@media only screen and (max-width:1500px) {
	textarea{
	line-height:26px;
	min-height:140px; 
	}}



/* SET: Altura
------------------------------*/
input[type=text],
input[type=number],
input[type=password],
input[type=email],
input[type=tel],
select,
div.input,
div.input > span,
div.input .svg-icon {
	height:60px;
	line-height:64px;
	}
	@media only screen and (max-width:1500px) {
	input[type=text],
	input[type=number],
	input[type=password],
	input[type=email],
	input[type=tel],
	select,
	div.input,
	div.input > span,
	div.input .svg-icon {
	height:40px;
	line-height:44px;
	}}
	@media only screen and (max-width:620px) {
	input[type=text],
	input[type=number],
	input[type=password],
	input[type=email],
	input[type=tel],
	select,
	div.input,
	div.input > span,
	div.input .svg-icon {
	height:50px;
	line-height:54px;
	}}



/* Set:Font
------------------------------*/
input[type=text],
input[type=number],
input[type=password],
input[type=email],
input[type=tel], 
textarea,
div.input > span,
::placeholder{
	font-size:var(--fs-medium)!important;
	font-weight:var(--fw-thin)!important;
	font-family:inherit!important;
	}





/* Labels
------------------------------*/
label.title{
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	flex-grow:9;
	gap:4px;
	height:18px;
	justify-content:flex-start;
	text-transform:uppercase;
	font-size:var(--fs-small);
	font-weight:var(--fw-normal);
	margin:4px 0px 2px 0px;
	text-align:left;
	width:100%;
	}


label.title .svg-icon{
	fill:var(--color-black);
	aspect-ratio: 1 / 1;
	height:18px;
	margin:0px;
	width:18px;
	}






/* Placeholder
------------------------------*/
::placeholder {
	color:var(--color-white);
	}



/* div input
------------------------------*/
div.input {
	position:relative;
	overflow:hidden;
	width:100%;
	}



div.input .svg-icon{
	padding:10px;
	position:absolute;
	left:0px;
	top:0px;
	width:60px;
	}
	@media only screen and (max-width:1500px) {
	div.input .svg-icon{
	padding:8px;
	width:40px;
	}}
	@media only screen and (max-width:620px) {
	div.input .svg-icon{
	padding:8px;
	width:50px;
	}}



div.input input[type=text],
div.input input[type=password],
div.input > span{
	text-indent:60px;
	}
	@media only screen and (max-width:1500px) {
	div.input input[type=text],
	div.input input[type=password],
	div.input > span{
	text-indent:40px;
	}}
	@media only screen and (max-width:620px) {
	div.input input[type=text],
	div.input input[type=password],
	div.input > span{
	text-indent:50px;
	}}










/* escondemos input submit para sustituirlo por label*/
input[type=submit],
input[type=button] {
	display:none;
	visibility:hidden;
	}

input[type=range] {
	width:100%;
	}









/* Checkbox, radio
------------------------------*/
div.checkbox-set {
	width:100%;
	}


div.checkbox-set input[type=checkbox],
div.checkbox-set input[type=radio] {
	visibility: hidden;
	display: none;
	}


/* label */
div.checkbox-set input[type=checkbox] + label,
div.checkbox-set input[type=radio] + label {
	align-items:center;
	cursor:pointer;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	height:auto;
	min-width:60%;
	padding:0px;
	margin:0px 0px;
	width:auto;
	}

/* cuadro - circle  */
div.checkbox-set input[type=checkbox] + label span,
div.checkbox-set input[type=radio] + label span{
	display:block;
	background-color:#fff;
	border:0px solid var(--color-neutro-soft);
	cursor: pointer;
	height:20px; 
	margin-right:10px;
	outline:1px solid var(--color-neutro-soft);
	position: relative;
	transition:all 0.1s;
	width:20px;
	}


div.checkbox-set input[type=checkbox] + label span {
	border-radius:2px;
	}

div.checkbox-set input[type=radio] + label span {
	border-radius:50%;
	}


/* hover */
div.checkbox-set input[type=checkbox] + label span:hover,
div.checkbox-set input[type=radio] + label span:hover{
	box-shadow:0px 0px 4px rgba(0, 0, 0, 0.6);
	}

/* checked */
div.checkbox-set input[type=checkbox]:checked + label span,
div.checkbox-set input[type=radio]:checked + label span{
	background-color:var(--color-ok);
	outline:1px solid var(--color-neutro-soft);
	}
div.checkbox-set input[type=checkbox]:checked + label span{
	border:0px solid var(--color-white);
	}
div.checkbox-set input[type=radio]:checked + label span{
	border:4px solid var(--color-white);
	}


/* texto */
div.checkbox-set input[type=checkbox] + label i,
div.checkbox-set input[type=radio] + label i{
	align-items:center;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	flex-grow:99;
	font-style: normal;
	height:20px;
	line-height:20px;
	overflow: hidden;
	text-overflow:ellipsis!important;
	white-space: nowrap!important;
	width:60px;
	}

/* icon */
div.checkbox-set input[type=checkbox] + label span .svg-icon{
	fill:transparent;
	height:20px;
	padding:2px;
	width:20px;
	}

div.checkbox-set input[type=checkbox]:checked + label span .svg-icon{
	fill:var(--color-white);
	}



/*--------------------------------------------
BUSCADOR /////////////////////////////////////
-------------------------------------------*/

/* Box search
------------------------------*/
div.box-search {
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	font-size:0.8rem;
	height:auto;
	width:100%;
	}


/* Form
------------------------------*/
div.box-search form{
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	font-size:inherit;
	gap: 0px;
	justify-content:flex-start;
	height: auto;
	width:100%;
	}


/* input + button altura
------------------------------*/
div.box-search form input[type=search],
div.box-search form input[type=submit] + label{
	font-size:1em;
	height:38px;
	line-height:38px;
	outline:0px;
	}
	@media only screen and (max-width:1500px) {
	div.box-search form input[type=search],
	div.box-search form input[type=submit] + label{
	height:28px;
	line-height:28px;
	}}
	@media only screen and (max-width:620px) {
	div.box-search form input[type=search],
	div.box-search form input[type=submit] + label{
	height:38px;
	line-height:38px;
	}}




/* tall
------------------------------*/
div.box-search.tall form input[type=search],
div.box-search.tall form input[type=submit] + label{			
	font-size:1.1em;
	height:48px;
	line-height:48px;
	}
	div.box-search.tall form input[type=search]  {
	border-radius:24px;	
	}

	@media only screen and (max-width:1500px) {
	div.box-search.tall form input[type=search],
	div.box-search.tall form input[type=submit] + label{
	height:38px;
	line-height:38px;
	}
	div.box-search.tall form input[type=search]  {
	border-radius:19px;	
	}}
	@media only screen and (max-width:620px) {
	div.box-search.tall form input[type=search],
	div.box-search.tall form input[type=submit] + label{
	height:42px;
	line-height:42px;
	}
	div.box-search.tall form input[type=search]  {
	border-radius:21px;	
	}}






/* SET:  DESIGN
------------------------------*/
div.box-search form input[type=search] {
	background-color:var(--color-neutro-softer);
	border:1px solid var(--color-neutro-soft);
	border-radius:19px;
	color:var(--color-neutro-dark);
	margin:0px!important;
	padding:0px 10px;
	width:100%;
	/*puntos suspensivos*/
	overflow: hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	}
	@media only screen and (max-width:1500px) {
	div.box-search form input[type=search]{
	border-radius:14px;
	}}
	@media only screen and (max-width:620px) {
	div.box-search form input[type=search]{
	border-radius:19px;
	}}


/* input search  */
div.box-search input.search[type=search] {
	border-radius:19px 0px 0px 19px;
	border-right:0px solid var(--color-neutro-dark)!important;
	} 
	@media only screen and (max-width:1500px) {
	div.box-search input.search[type=search]{
	border-radius:14px 0px 0px 14px;
	}}
	@media only screen and (max-width:620px) {
	div.box-search input.search[type=search]{
	border-radius:19px 0px 0px 19px;
	}}




/* Botón */
div.box-search form input[type="submit"]{
	visibility: hidden;
	display:none;
	}
div.box-search input[type=submit] + label{
	align-items:center;
	display:flex;
	background-color:var(--color-neutro);
	border:1px solid var(--color-neutro-dark);
	border-radius:0px 19px 19px 0px;
	cursor:pointer;
	flex-direction:row;
	justify-content:space-between;
	margin:0px!important;
	padding:0px 6% 0px 3%;
	width:auto;
	}
	@media only screen and (max-width:1500px) {
	div.box-search input[type=submit] + label{
	border-radius:0px 14px 14px 0px;
	}}
	@media only screen and (max-width:620px) {
	div.box-search input[type=submit] + label{
	border-radius:0px 19px 19px 0px;
	}}

div.box-search input[type=submit] + label span {
	color:var(--color-white);
	font-size:1em;
	font-weight:500;
	width:auto;
	}
div.box-search input[type=submit] + label .svg-icon {
	height:28px;
	fill:var(--color-white);
	padding:2px;
	width:28px;
	}
	@media only screen and (max-width:1500px) {
	div.box-search input[type=submit] + label .svg-icon{
	height:22px;
	padding:2px;
	width:22px;
	}}


/*---------------------------------
/// SELECT ///
----------------------------------*/
div.select{
	font-size:var(--fs-medium);
	}


div.select {
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	border-radius:4px;
	background-color:var(--color-white);
	border:1px solid var(--color-neutro-soft);
	font-weight:var(--fw-normal);
	margin:0px;
	padding:0px;
	position:relative;
	text-align:left;
	width:100%;
	}






div.select,
div.select:after,
div.select select {
	height:36px;
	line-height:36px;
	} 




div.select select{
	background-color:transparent;
	border:0px;
	border-radius:0px;
	display:block;
	color:inherit;
	margin:0px;
	outline:none;
	overflow: hidden;
	text-shadow: none;
	text-align:left!important;
	text-indent:6px;
	-webkit-appearance:none!important;
	-moz-appearance: none!important;
	appearance: none!important;
	width:100%;
	}

div.select:after {
	color:inherit;
	content: "▼";
	position: absolute;
	top:0;
	right: 0;
	bottom:0;
	font-size:12px;
	margin:0px;
	padding:0px 10px;	
	pointer-events:none;
	}

div.select select option{
	border:0px!important;
	box-shadow: 0px;
	height: auto;
	margin:0px;
	outline:none;
	text-align:left!important;
	width:100%;
	}

/* Option: small
------------------------------*/
div.select.small {
	font-size:var(--fs-medium);
	}


div.select.small,
div.select.small:after,
div.select.small select {
	height:30px;
	line-height:30px;
	} 



/* Option: Half
------------------------------*/
div.select.half{
	margin:5px 0px 15px 1%;
	float:right;
	width:49%!important; 
	}
	@media only screen and (max-width:620px) {
	div.select.half{
	margin:5px 0px 5px 0%;
	/*float: left;*/
	width:100%!important; 
	}}



div.select.half:first-child{
	float:left;
	margin:5px 1% 15px 0%; 
	}
	@media only screen and (max-width:620px) {
	div.select.half:first-child{
	margin:5px 0% 5px 0%; 
	}}



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



/* BUTTON TOOL: COPY 
(add class .btn-copy)
------------------------------*/
.btn-copy > span{
	display:flex;
	position:relative;
	width:76px!important;
	} 


.btn-copy:after {
	content:"COPY:HTML";
	height:22px;
	line-height:22px;
	text-align:center;
	transition:all 0.12s;
	width:90px;
	position:absolute;
	bottom:auto;
	left:22px;
	top:0px;
	right:auto;
	} 


.btn-copy.copied:after  {
  content:"COPIED!";
	}