:root {
	--riandeUrban1: #7EBACF;
	--riandeUrban2: #5E9BAC;
	--riandeUrban3: #59A6C4;

	--riandeAero1: #9C8275;
	--riandeAero2: #5D4C44;
	--riandeAero3: #9C735F;

	--color-gray1: #E8E8E8;
	--color-gray2: #C7C7C7;
	--color-gray3: #8E8E8E;
	--color-gray4: #4C4C4C;

	--color-aprobado: #49AD0B;
	--color-aprobadoA: #49AD0B;
	--color-aprobado-light: #D5FFBA;
	--color-aprobado-dark: #256000;

	--color-error: #EE1111;
	--color-error-light: #FFE5E5;
	--color-error-dark: #811313;


	--white01: rgba(255,255,255,0.1);
	--white02: rgba(255,255,255,0.2);
	--white03: rgba(255,255,255,0.3);
	--white04: rgba(255,255,255,0.4);
	--white05: rgba(255,255,255,0.5);
	--white06: rgba(255,255,255,0.6);
	--white07: rgba(255,255,255,0.7);
	--white08: rgba(255,255,255,0.8);
	--white09: rgba(255,255,255,0.9);

	--black01: rgba(0,0,0,0.1);
	--black02: rgba(0,0,0,0.2);
	--black03: rgba(0,0,0,0.3);
	--black04: rgba(0,0,0,0.4);
	--black05: rgba(0,0,0,0.5);
	--black05A: rgba(0,0,0,0.5);
	--black06: rgba(0,0,0,0.6);
	--black07: rgba(0,0,0,0.7);
	--black08: rgba(0,0,0,0.8);
	--black09: rgba(0,0,0,0.9);

	--white: white;
	--black: black;
	--primarioWhite: #0D6A7F;
	--whitePrimario: white;
}
.theme-dark {
	--white02: rgba(0,0,0,0.2);
	--white03: rgba(0,0,0,0.3);
	--white04: rgba(0,0,0,0.4);
	--white05: rgba(0,0,0,0.5);
	--white06: rgba(0,0,0,0.6);
	--white07: rgba(0,0,0,0.7);
	--white08: rgba(0,0,0,0.8);
	--white09: rgba(0,0,0,0.9);

	--black02: rgba(255,255,255,0.2);
	--black03: rgba(255,255,255,0.3);
	--black04: rgba(255,255,255,0.4);
	--black05: rgba(255,255,255,0.5);
	--black05A: rgba(255,255,255,0.7);
	--black06: rgba(255,255,255,0.6);
	--black07: rgba(255,255,255,0.7);
	--black08: rgba(255,255,255,0.8);
	--black09: rgba(255,255,255,0.9);

	--color-aprobadoA: #D5FFBA;

	--white: black;
	--black: white;
	--primarioWhite: white;
	--whitePrimario: #0D6A7F;
}

*, *::before, *::after {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

* 								    {font-family: "Poppins", sans-serif; box-sizing: border-box;}
body 							    {font-size: 18px; font-weight: 400; line-height: 1.2; color: var(--black);}
.img-int                            {width: 100%; height: 100%; object-fit: cover; transition: .2s;}
.bold700                        	{font-weight: 700;}
.bold800	                        {font-weight: 800;}

.btnOk 								{background: var(--color-aprobado) !important; color: white !important;}
.btnOff								{background: var(--color-error) !important; color: white !important;}


/* REJILLA */
.cl-normal							{width: 1200px; margin: auto;}
@media ( width <= 1400px )			{
	.cl-normal						{width: 900px; margin: auto;}
}
@media ( width <= 960px )			{
	.cl-normal						{width: 600px; margin: auto;}
}
@media ( width <= 650px )			{
	.cl-normal						{width: 88%; margin: auto;}
}



/* WTSP */
.icof4e 						    {background: rgb(45, 175, 45); transition: .3s; animation: wtsp 1s infinite; cursor: pointer; position: fixed; bottom: 20px; right: 20px; z-index: 90; color: white; display: flex; font-size: 32px; width: 56px; height: 56px; justify-content: center; align-items: center; border-radius: 18px 18px 0px 18px;
	&:hover 					    {background: black; transform: scale(1.1); animation: both;}
	&:active 					    {transform: scale(1);}
}
@keyframes wtsp 				    {
	0%                              {transform: scale(1);}
	50%                             {transform: scale(1.08);}
	100%                            {transform: scale(1);}
}




/* BOTONES */
.bt1                            	{width: 100%; box-sizing: border-box; height: 40px; padding: 2px 12px 0px 12px; border-radius: 16px; background: var(--riandeUrban3); color: white; font-size: 20px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; transition: .15s; cursor: pointer;
	&:hover                     	{background: var(--black); color: var(--white); transform: scale(1.01);}
	&:active                    	{transform: scale(.96);}
}



/* INPUTS */
.campo1                             {width: 100%; display: flex; align-items: center;
    .campo1a                        {border: 1px solid var(--black); background: var(--white); font-weight: 500; width: 100%; text-align: left; height: 40px; display: flex; align-items: center; border-radius: 16px; padding: 0px 12px; transition: .2s;
        &::placeholder              {color: var(--black05); transition: .2s;}
        &:hover                     {border: 1px solid var(--color-aprobado); color: var(--color-aprobado);}
        &:hover::placeholder        {color: var(--color-aprobado);}
        &:focus                     {border: 1px solid var(--color-aprobado); color: var(--color-aprobado); transform: scale(1.02); box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.5);}
        &:focus::placeholder        {color: var(--color-aprobado);}
    }
    .ico2de                         {font-size: 20px; margin: 0px 0px 0px -32px;}
}



/* BUSCADORES */
.buscarWrap                     	{width: 100%; height: 40px; display: flex; align-items: center;
	.buscar                     	{border: 1px solid var(--white); margin: 0px -30px 0px 0px; background: var(--white07); font-weight: 500; width: 100%; text-align: left; height: 40px; display: flex; align-items: center; padding: 0px 36px 0px 12px; border-radius: 16px; transition: .2s;
		&::placeholder          	{color: var(--black); transition: .2s;}
		&:hover                 	{border: 1px solid var(--color-aprobadoA); color: var(--color-aprobadoA); background: var(--white);}
		&:hover::placeholder    	{color: var(--color-aprobadoA);}
		&:focus                 	{border: 1px solid var(--color-aprobadoA); color: var(--color-aprobadoA); background: var(--white); transform: scale(1.02); box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.5);}
		&:focus::placeholder    	{color: var(--color-aprobadoA);}
	}
	.icoSearch                  	{cursor: pointer; font-size: 20px; margin: 0px 0px 2px 0px;
		&:hover                 	{color: var(--color-aprobadoA);}
	}
}



/* CHECKS */
.checkOk							{display: inline-flex; align-items: center; cursor: pointer; gap: 10px; user-select: none;
	input 							{display: none;
		&:checked + .box 			{background: var(--primarioWhite); border-color: var(--primarioWhite);
			&::after 				{transform: rotate(45deg) scale(1);}
		}
	}
	.box 							{width: 20px; height: 20px; border: 2px solid var(--primarioWhite); border-radius: 6px; position: relative; transition: all 0.25s ease;
		&::after 					{content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--whitePrimario); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.2s ease;}
	}

	&:hover 						{
		.box 						{background: var(--color-gray3);}
	}
}



/* VER MAS */
.numeration 						{width: 100%; display: flex; justify-content: center; margin: 30px 0px 50px 0px;
	.wrapInt 						{background: var(--white); padding: 7px; border-radius: 24px; box-shadow: 0px 20px 40px -10px rgba(0,0,0,0.3);}
	.bt1 							{width: 140px; justify-content: center;}
	.txt 							{font-size: 15px; text-align: center; text-transform: uppercase; font-weight: 600; color: var(--black05); margin: 8px 0px 3px 0px;}
}