:root {
	--primario: #0D6A7F;

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

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

	--ambar: #DB9500;

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


	--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);

	--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;

	--muyInteresado: #49AD0B;
	--interesado: #BA980E;
	--seguimiento: #2F1CE4;
	--noDesea: #EE1111;
	--noAsignado: #4C4C4C;
}
.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);

	--gray1: #3d3d3d;

	--aprobadoA: #D5FFBA;
	--errorA: #f5a0a0;

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

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

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

/* ESTADOS */
.on 								{background: var(--aprobado) !important;}
.off 								{background: var(--error) !important;}
.ambar 								{background: var(--ambar) !important;}
.normal								{background: var(--primario) !important;}
.off2 								{background: var(--error-dark) !important;}

.muyInteresado						{background: var(--muyInteresado) !important;}
.interesado							{background: var(--interesado) !important;}
.seguimiento						{background: var(--seguimiento) !important;}
.noDesea							{background: var(--noDesea) !important;}
.noAsignado							{background: var(--noAsignado) !important;}

.onTxt 								{color: var(--aprobado) !important;}
.offTxt								{color: var(--error) !important;}


/* 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: 0px 12px 1px 12px; border-radius: 16px; background: var(--primario); 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);}
}
/* Lo que arranca oculto no parpadea antes de que cargue el JS */
[x-cloak]                       	{display: none !important;}

/* Los input de archivo que abre otro boton */
.ocultoDeVerdad                 	{display: none !important;}

/* Botón de solo ícono: gana a los anchos fijos que .bt1 toma en responsive */
.btnIcon                        	{width: fit-content !important; justify-content: center;}



/* 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(--aprobadoA); color: var(--aprobadoA);}
        &:hover::placeholder        {color: var(--aprobadoA);}
        &:focus                     {border: 1px solid var(--aprobadoA); color: var(--aprobadoA); transform: scale(1.02); box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.5);}
        &:focus::placeholder        {color: var(--aprobadoA);}
    }
    .ico2de                         {font-size: 20px; margin: 0px 0px 0px -32px;}
}


.campo2								{position:relative; width:100%;
	&:hover .campo2b				{color: var(--aprobadoA);}

	.campo2a						{width:100%; height: 40px; border: 1px solid var(--black); border-radius: 16px; padding: 2px 14px 0px 14px; font-weight: 500; box-sizing: border-box; transition: .2s; display: flex; align-items: center;
		&:hover 					{border: 1px solid var(--aprobadoA); color: var(--aprobadoA);}
		&::placeholder				{color:transparent;}
		&:focus						{border: 1px solid var(--aprobadoA); color: var(--aprobadoA);}
		&:not(:placeholder-shown)	{border: 1px solid var(--aprobadoA); color: var(--aprobadoA);}
	}

	.campo2b						{position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color:var(--black05); pointer-events: none; font-weight: 500; transition:.2s ease;}

	.campo2a:focus + .campo2b,
	.campo2a:not(:placeholder-shown) + .campo2b
									{top:0; transform:translateY(-50%); font-size: 15px; color:var(--aprobadoA); background: var(--white); padding:0 8px;}
	
	.campoText						{height: auto; padding: 14px 14px 14px 14px;}
	.labelText						{top: 20px;}
}



/* 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; border-radius: 16px; padding: 0px 36px 0px 12px; transition: .2s;
		&::placeholder          	{color: var(--black); transition: .2s;}
		&:hover                 	{border: 1px solid var(--aprobadoA); color: var(--aprobadoA); background: var(--white);}
		&:hover::placeholder    	{color: var(--aprobadoA);}
		&:focus                 	{border: 1px solid var(--aprobadoA); color: var(--aprobadoA); background: var(--white); transform: scale(1.02); box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.5);}
		&:focus::placeholder    	{color: var(--aprobadoA);}
	}
	.icoSearch                  	{cursor: pointer; font-size: 20px; margin: 0px 0px 2px 0px; position: relative; z-index: 1;
		&:hover                 	{color: var(--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(--gray3);}
	}
}



/* VER MAS */
.numeration 						{width: 100%; display: flex; justify-content: center; margin: 30px 0px 50px 0px; position: sticky; left: 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;}
}