/*
*	ESTE ARCHIVO FUE CREADO PARA INCORPORAR ESTILOS PERSONALIZADOS 
*	SE DEBEN INCORPORAR REGLAS DE ESTILO BASICAS SOBRE COLORES DE TEXTO, BACKGROUND, ETC.
*/

/* DECLARA LAS VARIABLES */
:root{
	--white: #FFFFFF;
	--black: #000000;
	--color-principal: #00A6FF;
	--color-principal-lighter: #6EC6F5;
	--color-principal-lightest: #CBE8F7;
	--color-principal-darker: #0037EC;
	--verde: #8DC63F;
	--verde-lightest: #B2C499;
	--naranja: #DF903D;
	--naranja-lightest: #DEB081;
	--rojo: #c63f3f;
	--rojo-lighter: #d26666;
	--rojo-darker: #7b2424;
	--cyan: #35bfcc;
	--gris: #58595B;
	--gris-lighter: #86878A;
	--gris-darker: #48494A;
	--gris-texto: #18181B;
	--gris-texto-2: #64748B;
	--gris-fondos: #F2F4F7;
	--gris-inactivo: #E7EAEE;
	--gris-inactivo-lighter: #F0F0F0;
	--gris-inactivo-darker: #D5D8DB;
	--gris-fondo-inputs: #F8FAFC;
	--gris-bordes: #CBD5E1;
}

/*************************/
/* CLASES DE LOS COLORES */
.white {
	color: var(--white);
}
.white-imp {
	color: var(--white) !important;
}

.black {
	color: var(--black);
}
.black-imp {
	color: var(--black) !important;
}

.color-principal {
	color: var(--color-principal);
}
.color-principal-imp {
	color: var(--color-principal) !important;
}

.verde {
	color: var(--verde);
}
.verde-imp {
	color: var(--verde) !important;
}

.naranja {
	color: var(--naranja);
}
.naranja-imp {
	color: var(--naranja) !important;
}

.rojo{
	color: var(--rojo);
}
.rojo-imp{
	color: var(--rojo) !important;
}

.gris {
	color: var(--gris);
}
.gris-imp {
	color: var(--gris) !important;
}

.gris-texto {
	color: var(--gris-texto);
}
.gris-texto-imp {
	color: var(--gris-texto) !important;
}

.gris-texto-2{
	color: var(--gris-texto-2);
}
.gris-texto-2-imp{
	color: var(--gris-texto-2) !important;
}

.gris-fondos {
	color: var(--gris-fondos);
}
.gris-fondos-imp {
	color: var(--gris-fondos) !important;
}

.gris-inactivo {
	color: var(--gris-inactivo);
}
.gris-inactivo-imp {
	color: var(--gris-inactivo) !important;
}


/***********************************/
/* CLASES DE BACKGROUND DE COLORES */
.bg-white {
	background: var(--white);
}
.bg-white-imp {
	background: var(--white) !important;
}

.bg-black {
	background: var(--black);
}
.bg-black-imp {
	background: var(--black) !important;
}

.bg-color-principal {
	background: var(--color-principal);
}
.bg-color-principal-imp {
	background: var(--color-principal) !important;
}

.bg-verde {
	background: var(--verde);
}
.bg-verde-imp {
	background: var(--verde) !important;
}

.bg-naranja {
	background: var(--naranja);
}
.bg-naranja-imp {
	background: var(--naranja) !important;
}

.bg-rojo{
	background: var(--rojo);
}
.bg-rojo-imp{
	background: var(--rojo) !important;
}


.bg-gris {
	background: var(--gris);
}
.bg-gris-imp {
	background: var(--gris) !important;
}

.bg-gris-texto {
	background: var(--gris-texto);
}
.bg-gris-texto-imp {
	background: var(--gris-texto) !important;
}

.bg-gris-fondos {
	background: var(--gris-fondos);
}
.bg-gris-fondos-imp {
	background: var(--gris-fondos) !important;
}

.bg-gris-inactivo {
	background: var(--gris-inactivo);
}
.bg-gris-inactivo-imp {
	background: var(--gris-inactivo) !important;
}