.cabeceraAltern						{height: 40px !important;}

@media ( width <= 800px )          	{
	.tabla1Altern 					{height: calc(100% - 46px) !important;}
}


/* GENERAL */
.stickyOn 							{position: sticky !important; top: -14px !important;}
.wrapProspectoDetalle				{background: none; justify-content: space-between; position: relative;
	/* Fijo en la esquina de la vista, por encima de la ficha: no entra al
	   scroll de la ficha, que se lo llevaría hacia arriba */
	.btnEditarFicha					{position: absolute; right: 0px; bottom: 0px; width: fit-content; gap: 14px; z-index: 5;}
}
@media ( width <= 960px )          	{
	.wrapProspectoDetalle			{flex-direction: column; gap: 0px;}
}

.listadoProspect 					{height: 100%; width: 300px; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 10px; overflow: auto;
	&::-webkit-scrollbar			{width: 0px;}

	/* Parte la columna en dos: arriba las trabajadas y abajo las que nadie
	   toco todavia */
	.tituloGrupo					{width: 100%; font-weight: 700; font-size: 13px; text-transform: uppercase; color: var(--black06); border-top: 1px solid var(--white05); padding: 12px 4px 2px 4px;}
}
@media ( width <= 1520px )          {
	.listadoProspect				{width: 270px;}
}
@media ( width <= 960px )          	{
	.listadoProspect				{width: 100%; height: 80px; flex-wrap: nowrap; padding: 0px 50px 0px 0px;
		&::-webkit-scrollbar		{height: 3px;}
		&::-webkit-scrollbar-track	{margin: 0px 50px;}
		/* Acostada la columna es una fila: el titulo pasa a ser separador */
		.tituloGrupo			{width: auto; flex-shrink: 0; height: 50px; display: flex; align-items: center; border-top: none; border-left: 1px solid var(--white05); padding: 0px 0px 0px 10px;}
	}
	.numeration						{margin: 0px 0px 0px 40px;
		.wrapInt 					{align-items: center; display: flex;}
		.bt1 						{width: 140px;}
		.txt						{width: 120px; margin: 0px;}
	}
}

.contentDetalle 					{background: var(--white02); width: calc(100% - 320px); border-radius: 18px; overflow: auto; padding: 10px; height: 100%; gap: 24px 0px; overflow-x: hidden;
	&::-webkit-scrollbar			{width: 0px;}

	.leftProspectDetalle 			{width: calc(100% - 420px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 0px;}
}
@media ( width <= 1520px )          {
	.contentDetalle					{width: calc(100% - 290px);}
}
@media ( width <= 1430px )          {
	.contentDetalle					{
		.leftProspectDetalle		{width: 100%;}
	}
}
@media ( width <= 960px )          	{
	.contentDetalle					{width: 100%;}
}



.listadoItem 						{background: var(--white07); cursor: pointer; border: 1px solid var(--white); border-radius: 18px; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 4px; position: relative; transition: .2s;
	/* Solo donde hay mouse de verdad: en Safari y en tactiles el hover se
	   queda pegado despues de tocar, y como el hover se ve igual que
	   .listadoItemOn parecian dos seleccionados */
	@media (hover: hover)			{
		&:hover 					{background: var(--white); box-shadow: 0px 26px 20px -20px rgba(0, 0, 0, 0.8); border: 1px solid var(--primario); color: var(--primarioWhite);}
	}
	&:active 						{transform: scale(.96); box-shadow: 0px 0px 0px 0px black;}

	.iniciales 						{background: var(--primario); color: var(--white); font-size: 16px; font-weight: 700; width: 50px; height: 50px; border-radius: 14px; display: flex; justify-content: center; align-items: center;}
	.info 							{width: calc(100% - 56px); padding: 0px 10px 0px 0px;}
	.name1 							{font-weight: 500; text-transform: capitalize; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}
	.name2 							{text-transform: uppercase; font-size: 13px; font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}
	.indicador 						{background: gray; display: block; width: 10px; height: 10px; border-radius: 100px; position: absolute; right: 5px; top: 26px; bottom: 0px;}
}
@media ( width <= 960px )          	{
	.listadoItem					{width: 260px; flex-shrink: 0;}
}
.listadoItemOn						{background: var(--white); box-shadow: 0px 26px 20px -20px rgba(0, 0, 0, 0.8); border: 1px solid var(--primario); color: var(--primarioWhite);}

/* La ficha entera se apaga y se enciende como una sola pieza, no bloque por
   bloque. Apagar es instantaneo y encender lleva fundido: mientras el pedido
   va y vuelve el navegador queda ocupado y una animacion de apagado no se
   llega a ver */
.contentProspectDetalle 			{display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; align-content: flex-start; position: relative; transition: opacity .35s;}
/* El spinner vive afuera de la ficha, si no se apagaria con ella */
.spinnerFicha						{width: 34px; height: 34px; border: 4px solid var(--black03); border-top-color: var(--black); position: fixed; top: 50%; left: 0px; right: 0px; margin: 0px auto; display: none; z-index: 10;}
/* La clase va en el contenedor de la vista, no en la ficha: la ficha la
   repinta Livewire y en el repintado se perdia */
.fichaCargando						{
	.contentProspectDetalle 		{opacity: 0; pointer-events: none; transition: none;}
	.spinnerFicha 					{display: block;}
}

@media ( width <= 960px )          	{
	.contentProspectDetalle			{height: calc(100% - 80px);}
}

.contentDataWrap					{
	/* Este si scrollea: el titulo se queda arriba mientras se baja. Va con la
	   cadena entera para que gane sobre el relative de .contentData .title,
	   que en la hoja aparece mas abajo */
	.contentData .title 			{position: sticky; top: -14px;}
	.contentData 					{width: 400px; height: 400px; overflow: auto;
		&::-webkit-scrollbar		{width: 10px;}
	}
	.prospectData 					{height: 400px;}
	/* En clientes la columna de al lado es mas alta: lleva las cuotas */
	.clienteData 					{height: 492px;}
}
@media ( width <= 1430px )          {
	.contentDataWrap				{width: 100%;
		.contentData 				{width: 100%; height: auto;}
		.prospectData 				{height: auto;}
		.clienteData 				{height: auto;}
	}
}


.contentData 						{width: 100%; background: var(--white07); padding: 14px; box-shadow: 0px 26px 40px -26px rgba(0, 0, 0, 0.7); border-radius: 14px; overflow: auto; border: 1px solid var(--white);
	&::-webkit-scrollbar			{width: 0px;}

	/* relative y no sticky: Safari, con position sticky adentro de un
	   contenedor con overflow, pinta el fondo del contenedor por encima de su
	   propio hijo y el titulo se veia agrisado. Solo se deja sticky abajo, en
	   los dos bloques que de verdad scrollean y donde el titulo tiene que
	   quedarse a la vista */
	.title 							{background: var(--white); width: fit-content; font-weight: 600; padding: 10px 14px 10px 14px; font-size: 20px; margin: -14px 0px 14px -14px; border-radius: 12px 0px; position: relative; z-index: 1;}
	.label 							{background: var(--primario); color: white; width: fit-content; font-weight: 600; font-size: 15px; padding: 5px 8px; border-radius: 10px; text-transform: uppercase;}
}
.titleSect1 						{display: flex; align-items: flex-start; gap: 4px; font-weight: 600; margin: 30px 0px 0px 0px; text-transform: uppercase;
	.icoTitleSect 					{margin: -1px 0px 0px 0px;}
}
.itemWrap 							{width: 100%; margin: 10px 0px 0px 0px; text-wrap: auto;
	.item 							{font-weight: 600;}
	/* Correos, telefonos y webs que se pueden tocar */
	.enlaceDato 					{color: var(--primarioWhite); text-decoration: underline; word-break: break-all; display: inline-block;}
}
.subtitle							{font-weight: 800; text-transform: uppercase; font-size: 18px; margin: 10px 0px 0px 0px; color: var(--primario);}

.btnsDirectWrap 					{display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%;}
.btnDirect 							{color: var(--primarioWhite); border-radius: 14px; font-size: 16px; font-weight: 500; background: var(--white); display: flex; width: 19%; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px 8px; border: 1px solid var(--primario); cursor: pointer; transition: .2s;
	&:hover 						{background: var(--primario); color: white;}
	&:active 						{transform: scale(.9);}

	.icoDirect 						{font-size: 30px;}
}
@media ( width <= 650px )          	{
	.btnsDirectWrap					{gap: 10px 0px;
		.btnDirect					{width: 48.5%;}
	}
}


.EventoModWrap 						{width: 48.5%;
	.contentData 					{display: flex; flex-wrap: wrap; gap: 14px 0px; height: 130px; align-items: flex-start; align-content: flex-start;}
	.title 							{margin: -14px 0px 0px -14px;}
	.contentProspect				{justify-content: space-between; position: relative; cursor: pointer;
		.feriaList					{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: var(--white); border-radius: 14px; padding: 14px; display: none; flex-wrap: wrap; gap: 8px; align-content: flex-start; overflow: auto; z-index: 5;
			.feriaItem				{background: var(--white); color: var(--black); border: 1px solid var(--black); font-weight: 600; font-size: 15px; padding: 6px 12px; border-radius: 10px; height: fit-content; cursor: pointer;}
			.feriaItemOn			{background: var(--black); color: var(--white);}
		}
		.feriaListOn				{display: flex;}
		&:has(.feriaListOn)			{
			.feriasGroup			{display: none;}
		}
	}
}
@media ( width <= 1430px )          {
	.EventoModWrap					{
		.contentData				{height: 100%;}
	}
}
@media ( width <= 650px )          	{
	.EventoModWrap					{width: 100%;}
}


.feriasGroup 						{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 0px;}
.clienteEvento 						{display: flex; width: 100%; align-items: center; justify-content: space-between; color: white; flex-wrap: wrap; font-size: 24px; font-weight: 700; padding: 4px 10px; border-radius: 10px;
	.feria 							{width: 110px;}
	.infoMedida 					{}
	.nro 							{}
}
.prospectEevnto						{width: 48%; justify-content: center; height: 62px;
	img 							{height: 100%;}
}


/* El color lo pone el evento: el hex viaja como variable en la fila */
.colorFeria 						{background: var(--colorEvento) !important;}
.bgGastro 							{background: #FA9405 !important;}
.bgDrinks 							{background: #000000 !important;}
.bgAlimen 							{background: #33B82A !important;}
.bgGasPack 							{background: #6E4B1B !important;}
.bgPlast 							{background: #C71C1C !important;}


.cuotasModWrap 						{width: 100%;
	.contentData 					{display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0px; gap: 20px 0px;}
}

.totalCuotas 						{background: var(--white); height: 70px; padding: 0px 12px; display: flex; align-items: center; border-radius: 14px; color: var(--aprobadoA); font-weight: 600;
	.totalTitle 					{width: 60px; text-align: center;}
	.nroTotal 						{font-size: 40px; font-weight: 700;}
}
@media ( width <= 650px )          	{
	.totalCuotas					{width: 100%; justify-content: center;}
}

.totalItemWrap 						{display: flex; flex-wrap: wrap; gap: 1px; border-radius: 14px; overflow: hidden; font-weight: 700; font-size: 30px;
	.totalItem 						{color: white; display: flex; align-items: center; flex-direction: column; width: 100px; justify-content: center;}
	.totalSubtitle 					{font-size: 14px; font-weight: 600; text-transform: uppercase;}
}
@media ( width <= 650px )          	{
	.totalItemWrap					{width: 100%; justify-content: space-between; height: 70px;
		.totalItem					{width: 33%; height: 100%;}
		.totalSubtitle				{font-size: 12px;}
	}
}

.pagadas							{background: var(--aprobado);}
.vencidas							{background: var(--error);}
.pendientes							{background: var(--ambar);}


.historial 							{font-weight: 600; display: flex; align-items: flex-start; font-size: 20px; text-wrap: auto; gap: 1px; width: 100%;}

.activWrap							{width: 100%;
	.historial 						{font-weight: 400; margin: 12px 0px 0px 0px; width: 100%; overflow: hidden;}
}
.actividadesWrap 					{padding: 12px; background: var(--white04); margin: 14px 0px 0px 0px; border: 1px solid var(--white); border-radius: 10px; overflow: hidden; position: relative;
	.labelActiv 					{position: absolute; top: 0px; right: 0px; display: flex; gap: 3px; font-size: 14px; font-weight: 500; background: var(--black07); color: var(--white); padding: 4px 12px 5px 12px; border-radius: 10px 0px;}
	.icoLabel 						{margin: 1px 0px 0px 0px;}
	.titleActiv 					{font-weight: 600; font-size: 20px;}
	.nro 							{font-size: 28px; line-height: 1; font-weight: 700;}
	.txt 							{text-wrap: auto; margin: 10px 0px 0px 0px;}
	.icoEditActiv 					{position: absolute; bottom: 8px; right: 10px; font-size: 20px; cursor: pointer; transition: .2s;
		&:hover 					{color: var(--aprobado); transform: scale(1.15);}
		&:active 					{transform: scale(.95);}
	}
}
.activProx							{color: var(--aprobado); background: var(--aprobado-light); border: 1px solid var(--aprobado);
	.labelActiv						{background: var(--aprobado-dark); color: var(--aprobado-light);}
}

.zonaExpoWrap						{width: 100%; overflow: hidden; box-shadow: 0px 26px 40px -26px rgba(0, 0, 0, 0.7);
	.contentData					{
		&::-webkit-scrollbar-track 	{margin: 0px 40px;}
		&::-webkit-scrollbar 		{height: 10px;}
	}
	.title 							{position: sticky; left: -14px;}
}
.zonaItemWrap 						{width: 100%;}
.zonaOverflow 						{display: flex; align-items: center; gap: 20px; width: fit-content; padding: 0px 50px 0px 20px;}
.zonaLine 							{width: 2px; height: 40px; background: var(--black05);}
.zonaItem 							{display: flex; align-items: center; gap: 9px; width: fit-content;
	.zonaResult 					{font-size: 30px; font-weight: 700; white-space: nowrap; color: var(--black05);}
	.zonaItemInt 					{width: fit-content; white-space: nowrap;}
}


.lineaVenta 						{width: 100%; text-align: center; height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;}
.titleVenta 						{font-weight: 700; color: var(--primarioWhite); text-transform: uppercase; margin: 0px 0px 10px 0px; position: relative;} 
.lineaVentaWrap 					{display: flex; justify-content: center; gap: 24px; color: var(--black05); font-size: 15px; font-weight: 600;
	.lineaItem 						{width: 80px; display: flex; flex-direction: column; align-items: center; position: relative;}
	.indicador 						{width: 24px; height: 24px; background: var(--black05); border-radius: 10px; margin: 0px 0px 5px 0px;}
	.lineaTxt 						{}
	.lineRight						{width: 40px; height: 4px; background: var(--black05); position: absolute; right: -12px; top: 10px;}
	.lineLeft						{width: 40px; height: 4px; background: var(--black05); position: absolute; left: -12px; top: 10px;}

	.lineaItemOn					{color: var(--aprobadoA);
		.indicador 					{background: var(--aprobadoA);}
		.lineRight					{background: var(--aprobadoA);}
		.lineLeft					{background: var(--aprobadoA);}
	}

	.lineaItemOff					{color: var(--errorA);
		.indicador 					{background: var(--errorA);}
		.lineRight					{background: var(--errorA);}
		.lineLeft					{background: var(--errorA);}
	}
}
@media ( width <= 650px )          	{
	.lineaVenta						{height: auto; padding: 20px 0px;}
	.lineaVentaWrap					{gap: 42px; flex-direction: column;
		.lineRight					{display: none;}
		.lineLeft					{left: 0px; right: 0px; margin: auto; width: 4px; height: 30px; top: -29px;}
	}
}



.contenAcuerdo 						{padding: 0px 20px;
	.titleAcuerdo 					{font-weight: 700; text-transform: uppercase; font-size: 20px; margin: 0px 0px -10px 0px; color: var(--primarioWhite);}
	.titleSect1 					{margin: 30px 0px 0px 0px;}
	.itemWrap 						{margin: 8px 0px 0px 0px;}
}


.pagosPopWrap 						{padding: 0px 10px; width: 100%;
	.cuotasModWrap					{}
}
.itemPagoPop 						{font-size: 16px; margin: 15px 0px 0px 0px; font-weight: 500; display: flex; flex-wrap: wrap; justify-content: space-between; border: 1px solid var(--ambar); align-items: center; padding: 8px 10px; border-radius: 12px; color: var(--ambar);
	.concepto 						{font-size: 18px; font-weight: 600;}
	.vence 							{display: flex; gap: 6px;}
	.fechaVence 					{}
	.linePago 						{width: 2px; height: 20px; background: var(--ambar);}
	.pricePop 						{}
	.cuotaAction 					{display: flex; gap: 6px;}
	.icoCuotaPOp 					{font-size: 22px; cursor: pointer; transition: .2s;
		&:hover 					{transform: scale(1.15);}
		&:active 					{transform: scale(.96);}
	}
	/* Reemplaza al icono de subir mientras el comprobante viaja */
	.spinnerCuota 					{width: 20px; height: 20px; border: 3px solid var(--black03); border-top-color: var(--black); margin: 1px 0px 0px 0px;}
	/* Se lo mantiene apretado dos segundos para borrar el comprobante: el
	   rojo y el achicarse avisan que esta contando */
	.icoBorrando 					{color: var(--error); transform: scale(.6); transition: 2.5s linear;}
}
.cuotaPagada 						{border: 1px solid var(--aprobado); color: var(--aprobado);
	.linePago 						{background: var(--aprobado);}
}
.cuotaVencida 						{border: 1px solid var(--error); color: var(--error);
	.linePago 						{background: var(--error);}
}

@media ( width <= 460px )          	{
	.itemPagoPop					{
		.concepto 					{width: 100%;}
		.vence						{flex-direction: column;}
		.linePago					{display: none;}
	}
}



.tabulacion 						{border: 1px solid var(--black); font-weight: 500; display: flex; flex-wrap: wrap; flex-direction: column; gap: 8px; border-radius: 18px; align-items: center;
	.titleTab 						{font-weight: 700; font-size: 20px; padding: 12px 14px 0px 14px; width: 100%;}
	.lineTab 						{width: calc(100% - 16px); margin: 0px auto 8px auto; height: 1px; background: var(--black);}
	.itemTab 						{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0px 16px; width: 100%;}
	.leftTab 						{}
	.priceTab 						{}
	.line2Tab 						{width: calc(100% - 24px); height: 1px; background: var(--black03);}
	.dsctoTab 						{background: var(--black02); width: calc(100% - 20px); padding: 6px 10px; border-radius: 10px; margin: 10px 0px;}
	.totalTab 						{border-radius: 14px; font-size: 20px; font-weight: 500; background: var(--black); color: var(--white);width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;}
}
.tabPopUp							{margin: 20px 0px 0px 0px;}
/* El armador del cronograma se abre sobre el pop de Estado de Pagos, que es
   de los que suben desde abajo y pesan mas en el apilado */
.popDetalle.popCrono				{z-index: 15;}
/* Un modulo por cuota en el armador del cronograma. La guia solo trae como se
   ven las cuotas ya cargadas, no el formulario para crearlas */
.cuotaMod							{width: 100%; background: var(--white07); border: 1px solid var(--white); border-radius: 14px; padding: 12px; margin: 14px 0px 0px 0px; display: flex; flex-wrap: wrap; gap: 10px; position: relative;
	.campo2 						{width: calc(50% - 5px);}
	.icoDelCuota					{position: absolute; right: 10px; top: -8px; font-size: 20px; color: var(--error); cursor: pointer; background: var(--white); border-radius: 8px; padding: 4px;
		&:hover 					{transform: scale(1.1);}
	}
}

.cotiWrap 							{display: flex; flex-direction: column; gap: 8px; align-items: flex-start; 
	.line							{width: 100%; height: 1px; background: var(--black); margin: 20px 0px;}
}
.cotiItem 							{display: flex; align-items: flex-start; gap: 1px; font-size: 20px; cursor: pointer; width: fit-content; max-width: 100%; position: relative; text-wrap: auto;
	/* Se ancla al borde derecho del item y no lo pasa: con un nombre de dos
	   lineas el item ocupa todo el ancho y el menu se salia del pop */
	.cotiOpciones 					{position: absolute; right: 10px; top: 50%; transform: translateY(-50%); max-width: 100%; background: var(--primario); border-radius: 12px; box-shadow: 0px 26px 40px -12px rgba(0, 0, 0, 0.7); padding: 6px; display: none; flex-direction: column; gap: 4px; z-index: 15;
		.cotiOpcion 				{color: white; font-size: 16px; font-weight: 600; padding: 6px 24px 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
			&:hover 				{background: var(--black05); color: var(--white);}
		}
	}
	.cotiOpcionesOn 				{display: flex;}
	/* La aprobada, que es una sola por empresa */
	&.cotiAprobada 					{color: var(--aprobado);}
	.spinnerCoti 					{width: 18px; height: 18px; border: 3px solid var(--black03); border-top-color: var(--black); margin: 0px 6px 0px 0px;}
	&:has(.cotiOpcionesOn)			{color: var(--primario);}
}

.accesos 							{font-size: 15px; display: flex; justify-content: space-between; background: var(--primario); width: 100%; color: white; text-align: center; padding: 6px 10px 7px 10px; font-weight: 500; border-radius: 12px;}
.itemZoneActiv 						{color: var(--primarioWhite);}
.itemZone 							{margin: 14px 0px 0px 0px;
	.titleZone 						{display: flex; align-items: flex-start; width: 100%; justify-content: space-between; font-weight: 600; cursor: pointer;
		&:hover 					{color: var(--primarioWhite);}
	}
	.left 							{padding: 0px 20px 0px 0px;}
	.icoZone 						{font-size: 22px;}
}
.contentZone 						{margin: 0px 0px 30px 0px;
	.lineZone 						{width: 100%; height: 1px; background: var(--primarioWhite); display: block; margin: 8px 0px 0px 0px;}
	.itemWrap 						{padding: 0px 12px;}
	.subtitle 						{font-size: 14px; margin: 12px 0px 2px 0px;}
}
/* Borrar la actividad que se está editando: al final del pop y centrado */
.borrarActiv 						{width: 100%; text-align: center; font-weight: 600; color: var(--errorA); cursor: pointer; margin: 10px 0px 0px 0px; transition: .2s;
	&:hover 						{text-decoration: underline;}
	&:active 						{transform: scale(.96);}
}

.activPopWrap 						{gap: 20px 0px; display: flex; flex-wrap: wrap; justify-content: space-between;
	.campo2:nth-child(2)			{width: 160px;}
	.campo2:nth-child(3)			{width: 264px;}
}
.activOption 						{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px 0px; margin: 0px 0px 14px 0px;}
.btOption 							{display: flex; border-radius: 10px; font-weight: 500; gap: 3px; font-size: 15px; align-items: center; width: 23%; justify-content: center; color: var(--black); height: 30px; cursor: pointer; border: 1px solid var(--black); transition: .2s;
	&:hover 						{background-color: var(--aprobado-light); color: var(--aprobado-dark); border: 1px solid var(--aprobado-dark); transform: scale(1.06); box-shadow: 0px 10px 12px -9px rgba(0, 0, 0, 0.7);}
	&:active 						{transform: scale(.96); box-shadow: 0px 0px 0px 0px;}
}
.btOptionOn							{background-color: var(--aprobado-light); color: var(--aprobado-dark); border: 1px solid var(--aprobado-dark); transform: scale(1.06); box-shadow: 0px 10px 12px -9px rgba(0, 0, 0, 0.7);}

@media ( width <= 480px )          	{
	.activPopWrap 					{
		.campo2:nth-child(2)		{width: 100%;}
		.campo2:nth-child(3)		{width: 100%;}
		.btOption 					{width: 48%;}
	}
}


.popDetalle							{display: flex; overflow: hidden; position: fixed; top: 0px; right: 0px; width: 0%; transition: .4s .2s; height: 100vh; background: var(--white05); z-index: 5;
	.icoClose                       {position: absolute; background: var(--primario); display: flex; font-size: 30px; top: 20px; right: 20px; color: white; cursor: pointer; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 12px; transition: .2s;
        &:hover                     {transform: scale(1.1); background: var(--black); color: var(--white);}
        &:active                    {transform: scale(.98);}
    }
	.wrapPop						{background: var(--gray1); flex-shrink: 0; overflow: auto; width: 100%; max-width: 500px; border-radius: 0px 26px 26px 0px; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 12px 12px 40px 12px; align-items: flex-start; align-content: flex-start; gap: 28px 0px; margin: 0px 0px 0px -1200px; transition: .5s .0s; box-shadow: 20px 0px 40px -20px rgba(0, 0, 0, 0.5);
		&::-webkit-scrollbar		{width: 0px;}
	}

	.infoMedida						{font-size: 16px;}
	.contentData					{}
	/* Envuelve el contenido para poder esconderlo mientras carga, sin que
	   los bloques pierdan la distribucion que les da .wrapPop. Se apaga en
	   opacidad y no en display, asi lo nuevo entra con un fundido; los datos
	   del evento anterior no se ven nunca */
	.contentPop						{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; gap: 28px 0px; opacity: 0; pointer-events: none; transition: opacity .35s;}
	.contentPopOn					{opacity: 1; pointer-events: auto;}
	/* El mailing va encerrado acá: se ve como lo pintaria el navegador,
	   al ancho que tenga el pop, sin que sus estilos se mezclen */
	.marcoMailing					{width: 100%; height: 420px; border: 1px solid var(--black03); border-radius: 10px; background: var(--white); display: block;}
	.spinnerPop						{width: 34px; height: 34px; border: 4px solid var(--black03); border-top-color: var(--black); margin: 40px auto; position: absolute; top: 50%; left: 0px; right: 0px;}

	.wrapPopOn	 					{margin: 0px 0px 0px 0px; transition: .4s .1s;}
}
.btnPopLeft 						{width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 0px;}
.popDetalleOn 						{width: 100%; transition: .3s .0s;}

@media ( width <= 650px )          	{
	.btnPopLeft						{
		.btnDirect 					{width: 48.5%;}
	}
}


.wrapClienteEvento					{background: none; display: flex; flex-wrap: nowrap; gap: 24px;}
.eventoWrap 						{display: flex; flex-shrink: 0; align-items: flex-start; align-content: flex-start; justify-content: center; flex-wrap: wrap; background: var(--white04); height: 100%; overflow: auto; border: 1px solid var(--white); border-radius: 18px; width: 320px;  gap: 14px 0px; padding: 0px 0px 7px 0px;
	&::-webkit-scrollbar			{width: 0px;}
	
	.eventoTitle 					{gap: 8px; padding: 4px 4px 4px 12px; font-weight: 700; white-space: nowrap; overflow: hidden; background: gray; color: white; height: 40px; border-radius: 18px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 1px; width: 100%; z-index: 3; margin: 0px 0px 10px 0px;}
	.tituloCol 						{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
	.nroCliente 					{background: var(--black04); aspect-ratio: 1/1; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 20px; border-radius: 100px; font-size: 17px;}
	/* El "Ver mas" de cada columna: la misma pastilla de las tablas,
	   pero metida en una columna de 320px */
	.numeration						{margin: 10px 0px 0px 0px;
		.wrapInt					{align-items: center; display: flex;}
		.bt1						{width: 130px;}
		.txt						{width: auto; margin: 0px 8px 0px 8px;}
	}
}
.itemEvento 						{background: var(--white09); width: 96%; padding: 10px; border-radius: 14px; overflow: hidden; transition: .2s; cursor: pointer;
	&:hover 						{background: var(--white); box-shadow: 0px 20px 28px -20px rgba(0, 0, 0, 0.6);}
	&:active 						{transform: scale(.96); box-shadow: 0px 10px 4px -10px rgba(0, 0, 0, 0.6);}

	.label 							{background: var(--primario); color: white; font-weight: 500; font-size: 15px; padding: 5px 10px;  display: block; width: fit-content; margin: -10px 0px 0px -10px; border-radius: 12px 0px;}
	.title 							{font-weight: 600; font-size: 20px; margin: 4px 0px 6px 0px;}
	.name 							{font-size: 16px;}
	.cargo 							{font-size: 16px;}
	.info 							{display: flex; gap: 18px; margin: 12px 0px;}
	.itemInfo 						{display: flex; align-items: center; gap: 3px;}
	.icoItem 						{font-size: 24px;}
	.tipoPerson 					{text-transform: uppercase; font-size: 14px; font-weight: 600; color: var(--black05);}
}


.wrapCotiDetalle					{background: none;}
.cotizacion 						{padding: 10px 16px; background: var(--white07); border: 1px solid var(--white); width: 100%; border-radius: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
	.left 							{width: calc(100% - 120px);}
	.title 							{font-size: 20px; font-weight: 600; margin: 0px 0px 6px 0px;}
	.subtitle 						{font-size: 14px; margin: 6px 0px 0px 8px; font-weight: 500; text-wrap: balance;}
	.action 						{display: flex; gap: 8px;}
	.icoCotiAct						{font-size: 22px; transition: .2s; cursor: pointer;
		&:hover 					{color: var(--aprobado); transform: scale(1.1);}
		&:active 					{transform: scale(.96);}
	}
}
@media ( width <= 960px )          	{	
	.wrapCotiDetalle				{border-radius: 14px;}
	.cotizacion						{border-radius: 10px;}
}

.cotiListPop 						{display: flex; justify-content: space-between; align-items: flex-start; width: 100%; margin: 10px 0px 0px 0px;
	.left 							{width: calc(100% - 80px);}
	.actCotPop 						{display: flex; gap: 4px;}
	.icoActpop 						{font-size: 22px; transition: .2s; cursor: pointer;
		&:hover 					{color: var(--aprobado); transform: scale(1.1);}
		&:active 					{transform: scale(.96);}
	}
}


.wrapPrintDetalle					{background: none; gap: 20px 20px;}
@media ( width <= 960px )          	{
	.wrapPrintDetalle				{border-radius: 14px;}
}

.printItem 							{background: var(--white07); width: 32%; padding: 10px; border-radius: 18px; border: 1px solid var(--white); cursor: pointer; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; overflow: hidden; transition: .2s;
	&:hover 						{background: var(--white); box-shadow: 0px 17px 30px -10px rgba(0, 0, 0, 0.5);}
	&:active 						{transform: scale(.96);}
	
	.title 							{margin: 0px 0px 10px 0px; font-weight: 600; font-size: 20px; width: calc(100% - 44px);}
	.printNro 						{font-weight: 800; background: var(--primario); color: white; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 16px; margin: -10px -10px 0px 0px;}
	.subtitle 						{font-weight: 500; font-size: 14px; width: 100%; margin: 10px 0px 2px 0px;}
}
@media ( width <= 1320px )          {
	.wrapPrintDetalle				{gap: 20px 0px; justify-content: space-between;}
	.printItem 						{width: 49%;}
}
@media ( width <= 960px ) 			{
	.printItem						{border-radius: 14px; width: 100%;}
}

 

.prospectStatus 					{background: gray; width: calc(100% - 280px); color: white; margin: 0px 20px 0px 0px; border-radius: 14px; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; cursor: pointer;
	.estado 						{font-weight: 500;}
	.estadoDesc 					{font-weight: 700; font-size: 24px;}
	.estadoList 					{position: absolute; top: calc(100% + 6px); left: 0px; width: 100%; background: var(--white); border-radius: 14px; box-shadow: 0px 30px 60px -8px rgba(0, 0, 0, 0.9); padding: 6px; display: none; flex-direction: column; gap: 6px; z-index: 5;
		.estadoItem 				{color: var(--white); font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 10px; cursor: pointer;}
	}
	.estadoListOn 					{display: flex;}
}
.prospectStatusPop					{width: calc(100% - 220px); height: 90px;}
.directProspect 					{
	.btnDirect 						{width: 120px;}
}
@media ( width <= 650px ) 			{
	.prospectStatus					{width: 100%; margin: 0px; padding: 12px 0px;}
	.directProspect 				{
		.btnDirect 					{width: 48.5%;}
	}	
}






/* FORMULARIO CREAR EMPRESA */
.top1 								{margin: 20px 0px 0px 0px !important;}
.crearEmpresa 						{display: flex; flex-wrap: wrap; align-items: flex-start; padding: 12px; gap: 12px 14px;
	.subtitle 						{width: 100%; font-size: 22px; margin: 30px 0px -2px 0px;}
	.lineDiv						{width: 100%; height: 1px; background: var(--black03); margin: 30px 0px;}
	.bt1							{gap: 20px; width: fit-content;}

	.wrapBloque 					{background: var(--white); width: 100%; display: flex; flex-wrap: wrap; gap: 12px 14px; padding: 12px; border-radius: 12px;}
	.campoColor 					{height: 19px;}
	.wrapLogo 						{width: 200px; height: 200px; overflow: hidden; border-radius: 14px; border: 1px solid var(--black); margin: 0px 0px 10px 0px; background: var(--white); display: flex; align-items: center; justify-content: center;}
	.campoFile						{padding: 0px 12px;}
	.titleCampo 					{width: 100%; font-weight: 600; padding: 0px 16px; margin: 0px 0px 6px 0px; font-size: 20px;}
	.campoTop1 						{margin: 30px 0px 0px 0px;}
	.icoCamp 						{font-size: 60px; color: var(--black05);}
	.icoTrash 						{font-size: 22px; cursor: pointer; margin: 10px 0px 0px 12px; display: block; width: fit-content;}
	.campoForm1a					{transition: .3s !important;}
}

.titleItem							{width: 100%; display: flex; align-items: center;
	.titleBloque					{font-weight: 700; width: 100%; font-size: 26px; padding: 2px 0px 0px 10px;}
	.icoNewMod 						{background: var(--primario); color: white; font-size: 24px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer;
		&:hover 					{background: var(--black); color: var(white);}
	}
}

.grupoAdjuntar						{display: flex; flex-direction: column; gap: 10px;
	.verDoc 						{text-transform: uppercase; font-size: 14px; font-weight: 500; padding: 0px 5px; width: fit-content;}
}

.agregarItemExpo 					{width: 100%; display: flex; gap: 6px; margin: 12px 0px 0px 0px;
	.agregarItem 					{background: var(--black); color: var(--white); text-transform: uppercase; font-weight: 500; font-size: 13px; border-radius: 6px; padding: 4px 8px; cursor: pointer; transition: .2s;
		&:active 					{transform: scale(.9);}
	}
}

/* El campo que se está arrastrando de sitio */
.arrastrando 						{opacity: .4;}


.tipoEmpresa 						{background: var(--white06); display: flex; margin: 0px auto; padding: 20px 20px 16px; gap: 20px; border-radius: 14px;
	.tipoItem 						{font-size: 22px; font-weight: 500; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 120px; cursor: pointer; transition: .3s;
		&:hover 					{text-shadow: 0px 0px 20px; color: var(--aprobadoA);}
		&:active 					{transform: scale(.9); text-shadow: 0px 0px 4px;}
	}
	.tipoItemOn 					{text-shadow: 0px 0px 20px; color: var(--aprobadoA);}
	.icoTipoOn 						{font-size: 30px;}
	.line 							{width: 1px; background: var(--black);}
}
.campoForm 							{background: var(--white06); display: flex; gap: 4px; align-items: center; border: 1px solid var(--black); padding: 10px 12px 8px 10px; border-radius: 12px;
	.titleForm 						{white-space: nowrap; font-weight: 600;}
	.campoForm1a 					{width: 100%; color: var(--primarioWhite); font-weight: 500; transition: .3s;
		&::placeholder 				{color: var(--black06);}
		/* Los que no se escriben: los que manda otro lado y los que se calculan */
		&:disabled 					{color: var(--black05); cursor: not-allowed;}
	}
	&:has(.campoForm1a:disabled)	{background: none;
		.titleForm 					{color: var(--black05);}
	}
	.icoMover						{cursor: grab; font-size: 20px; margin: -4px 0px 0px 0px; transition: .2s;
		&:hover 					{color: var(--aprobado);}
		&:active 					{cursor: grabbing;}
	}
	.icoDel							{cursor: pointer; font-size: 22px; margin: -4px 0px 0px 0px; transition: .2s;
		&:hover 					{color: var(--aprobado);}
	}
}
.campoActive 						{border: 1px solid var(--aprobadoA); background: var(--white); box-shadow: 0px 20px 24px -10px rgba(0,0,0,0.4);
	.titleForm						{color: var(--aprobadoA);}
}
.campoError 						{border: 1px solid var(--errorA); background: var(--white); box-shadow: 0px 20px 24px -10px rgba(0,0,0,0.4);
	.titleForm						{color: var(--errorA);}
}
.space3								{width: calc((100% - 28px) / 3);}
.space1								{width: 100%;}
.wrapBtn							{width: 100%; display: flex; justify-content: center; margin: 30px 0px 30px 0px;}
/* Carga masiva: la celda se lee como texto y recién al hacerle click se
   convierte en input o select. Con 300 filas por 38 columnas, armar todos
   los select de entrada cuelga al navegador */
.celdaCarga							{cursor: pointer;
	&:hover							{color: var(--primarioWhite);}
	.campoCelda						{width: 100%; height: 30px; border: 1px solid var(--primario); border-radius: 6px; padding: 0px 6px; font-size: 16px; font-weight: 400; background: var(--white); color: var(--black);}
}
.celdaMal							{color: var(--error);}
.chequeoCarga						{margin: 20px 0px 0px 0px;}
.avisoCarga							{width: 100%; font-size: 15px; font-weight: 400; margin: 0px 0px 20px 0px; text-wrap: balance;}

@media ( width <= 1180px )          {
	.space3							{width: 49%;}
	.tipoEmpresa					{width: 100%; gap: 0px; justify-content: space-between;
		.tipoItem					{width: 48%;}
	}
	.crearEmpresa					{gap: 16px 0px; justify-content: space-between;}
}

@media ( width <= 815px )          	{
	.space3							{width: 100%;}
}





/* BOTONES SUB OPCIONES */
.btnSubCategoria 					{background: var(--white); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 20px; width: calc((100% - 38px) / 4); border-radius: 20px; padding: 20px 20px; cursor: pointer; transition: .3s;
	&:hover 						{background: var(--primario); color: white;}
	&:active 						{transform: scale(.9);}

	.icoBtCat 						{font-size: 34px;}
	.txtBtn 						{}
}