:root {
	--aprobado: #49AD0B;
	--aprobadoA: #49AD0B;
	--ambar: #DB9500;
	--error: #EE1111;

	--white: white;
	--white07: rgba(255,255,255,0.7);
	--black: black;
	--black02: rgba(0,0,0,0.2);
	--black03: rgba(0,0,0,0.3);
}

/* ESTADO DE PAGOS — VERSION WEB */
*                             {box-sizing: border-box; font-family: "Barlow", serif; font-size: 18px; font-weight: 400;}
body                          {background: rgb(241, 241, 241);}


.wrap                         {width: 88%; max-width: 700px; background: white; margin: 90px auto 90px auto; padding: 12px; border-radius: 30px;}

.cabecera                     {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin: 0px 0px 20px 0px;
   .left                      {width: calc(100% - 120px);}
   .titleGen                  {background: black; color: white; width: fit-content; font-weight: 700; font-size: 15px; padding: 8px 14px; border-radius: 16px;}
   .company                   {text-transform: uppercase; padding: 10px; font-weight: 700; font-size: 22px;}
   .evento                    {text-transform: uppercase; padding: 0px 10px; font-size: 18px;}
   .logo                      {background: var(--colorEvento); width: 100px; height: 100px; overflow: hidden; border-radius: 20px; padding: 10px; display: flex; align-items: center; justify-content: center;}
   .logoEvent                 {}
}


/* El resumen de arriba, igual al del pop */
/* La tarjeta de abajo: de aca sale la sombra que se ve en el pop */
.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);}

.cuotasModWrap 					{width: 100%; margin: 0px 0px 30px 0px;
	.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;
	/* El * de arriba le pone tamano y peso a todo, asi que heredarlos de
	   .totalCuotas no alcanza: van escritos */
	.totalTitle 					{width: 60px; text-align: center; font-weight: 600;}
	.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; font-size: 30px; font-weight: 700;}
	.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);}


/* Las cuotas y el desglose, iguales a los del pop */
.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;}
}
.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: 50px 0px 0px 0px;}


/* La barra de los botones, la misma del acuerdo */
.actions                      {position: fixed; bottom: 0px; left: 0px; right: 0px; margin: auto; background: black; color: white; display: flex; height: 60px; justify-content: center; padding: 12px 20px 0px 20px; font-weight: 500; width: fit-content; border-radius: 20px 20px 0px 0px; align-items: flex-start; gap: 12px;
   .btnAct                    {cursor: pointer;}
   .lineAct                   {background: white; width: 1px; height: 24px;}
}