/* BACKGROUND */
.bgLogin                            {position: fixed; width: 100%; height: 100vh; top: 0px; left: 0px; z-index: -1;
    .shadow                         {background: var(--white01); width: 100%; height: 100%; position: absolute;}
}




/* MAIN */
.bodyMain                           {display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background: var(--dark);}
.main                               {width: calc(100% - 120px); height: calc(100vh - 120px); display: flex; flex-direction: column; justify-content: space-between;}
@media ( width <= 600px )           {
    .main                           {width: calc(100% - 50px); height: calc(100vh - 50px);}
}
.fullw                              {width: 100%;}



/* HEADER */
.header                             {display: flex; align-items: flex-start; justify-content: space-between; width: 100%; padding: 0px 10px; 
    .left                           {display: flex; gap: 10px; width: fit-content; position: relative;}
    .right                          {display: flex; gap: 10px; width: fit-content;}

    .titleOficial                   {display: flex; align-items: center; padding: 0px 9px 0px 9px; border-radius: 50px; background: var(--primario); color: var(--secundario); font-size: 15px; height: 40px; cursor: pointer; transition: .2s;
        .titleTxt1                  {text-transform: uppercase; font-weight: 800; transition: .2s;}
        .titleTxt2                  {text-transform: lowercase; display: flex; align-items: center; max-width: 0px; opacity: 0; overflow: hidden; white-space: nowrap; font-weight: 400; transition: .2s;
            &.titleTxt2On           {max-width: 120px; opacity: 1;}
        }
        .circle                     {width: 2px; height: 2px; background: var(--secundario); border-radius: 100px; margin: 0px 1px; transition: .2s;}
    }
    .logo                           {border: 1px solid var(--secundario);
        &:hover                     {background: var(--secundario); color: var(--primario); box-shadow: 0px 0px 50px -5px var(--primario); border: 1px solid var(--primario);}
        &:active                    {transform: scale(.9); box-shadow: 0px 0px 20px -5px var(--primario);}
    }
    .btn1                           {display: flex; align-items: center; width: fit-content; padding: 0px 9px 0px 9px; border-radius: 50px; background: var(--primario); color: var(--secundario); font-size: 15px; height: 40px; cursor: pointer; gap: 4px;  border: 1px solid var(--secundario); font-weight: 400; transition: .2s;
        &:hover                     {background: var(--secundario); color: var(--primario); box-shadow: 0px 0px 50px -5px var(--primario); border: 1px solid var(--primario);}
        &:active                    {transform: scale(.9); box-shadow: 0px 0px 20px -5px var(--primario);}
        
        .icoBtn                     {font-size: 20px;}
        .txtLogin                   {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; max-width: 88px; width: fit-content;}
    }
    .btnIcon                        {width: 40px; height: 40px; font-size: 22px; display: flex; align-items: center; justify-content: center; color: var(--secundario); background: var(--primario); border-radius: 50px; border: 1px solid var(--secundario); cursor: pointer; transition: .2s; flex-shrink: 0;
        &:hover                     {background: var(--secundario); color: var(--primario); box-shadow: 0px 0px 30px -2px var(--primario); border: 1px solid var(--primario);}
        &:active                    {transform: scale(.9); box-shadow: 0px 0px 10px 0px var(--primario);}
    }
    .subItems                       {position: relative; gap: 2px; width: 0px; overflow: hidden; justify-content: center; padding: 0px; transition: .25s;}
    .subItemsGlider                 {position: absolute; top: 2px; left: 0px; height: calc(100% - 4px); width: 0px; background: var(--secundario); border-radius: 50px; opacity: 0; transition: left .2s, width .2s, opacity .2s; z-index: 0; pointer-events: none;
        &.gliderOn                  {opacity: 1;}
    }
    .btLink                         {position: relative; z-index: 1; background: transparent; color: var(--secundario); height: calc(100% - 4px); display: flex; align-items: center; padding: 0px 10px 2px 10px; border-radius: 50px; cursor: pointer; font-weight: 400; transition: .2s;
        &.btLinkOn                  {color: var(--primario);}
        &:active                    {transform: scale(.9);}
    }
    .subItemsOn                     {width: 323px; transition: .25s;}
    .menu                           {display: none;}
}
@media ( width <= 850px )           {
    .header                         {
        /* .menu                       {display: flex;} */
        .subItems                   {top: 0px; left: 0px; position: absolute;}
    }
}
@media ( width <= 600px )           {
    .header                         {padding: 0px 0px;
        .btLink                     {padding: 0px 6px 0px 6px; color: var(--primario);
            &:hover                 {color: var(--secundario);}
        }
        .subItemsOn                 {width: 294px;}
        .subItems                   {background: black;}
        .subItemsGlider             {background: var(--primario);}
    }
}






/* CONTENIDO */
.content                            {background: rgba(107, 66, 13, .7); width: 100%; height: calc(100% - 50px); background: var(--trans1); border-radius: 26px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0px 30px 90px -20px rgba(0, 0, 0, .7); overflow: auto;
    &::-webkit-scrollbar            {width: 0px;}
}
.home                               {background: none; box-shadow: none; backdrop-filter: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 14px;}
.mainInt                            {padding: 12px 12px 20px 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px 0px;}



/* HOME - CONSULTADOR IA */
.wrapConsulta                       {width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 14px; background: var(--trans1); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid var(--primario); border-radius: 24px; padding: 12px;
    .campo1                         {
        .campo1a                    {border: 1px solid var(--primario); height: 46px; border-radius: 14px; padding: 0px 40px 0px 12px;
            &:hover                 {background: var(--trans2a); color: var(--secundario);}
            &:hover::placeholder    {color: var(--secundario);}
            &:focus::placeholder    {color: var(--secundario);}
            &:focus                 {background: var(--trans2a); color: var(--secundario); box-shadow: 0px 0px 20px 4px var(--primario);}
        }
        .icoBtn                     {}
    }
    .title                          {font-size: 16px; font-weight: 300;}
}





/* HOME - ACCESOS DIRECTOS */
.accesDirect                        {width: 100%; height: 0px; overflow: hidden; max-width: 380px; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; background: var(--trans1); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 24px; padding: 0px 12px; transition: .35s;
    .item                           {font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; margin: 12px 0px 0px 0px; transition: .2s;
        &:hover                     {
            .icoDirect              {background: var(--trans2); box-shadow: 0px 0px 20px 0px var(--primario); text-shadow: 0px 0px 5px var(--primario), 0px 0px 10px var(--primario);}
        }
        &:active                    {
            .icoDirect              {transform: scale(.9); box-shadow: 0px 0px 10px 0px var(--primario);}
        }
    }
    .icoDirect                      {border: 1px solid var(--primario); font-size: 26px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 14px; transition: .1s;}
    .title                          {width: 100%; font-size: 18px; text-align: center; margin: 14px 0px 6px 0px; transition: .1s;}
}
.accesDirectOn                      {height: 140px; transition: .35s;}

@media ( width <= 600px )           {
    .accesDirect                    {border-radius: 20px; padding: 0px 6px;
        .item                       {margin: 6px 0px 0px 0px;}
        .icoDirect                  {width: 52px; height: 52px;}
        .title                      {font-size: 15px; margin: 8px 0px 6px 0px;}
    }
    .accesDirectOn                  {height: 120px;}
}





/* TITULOS GENERALES */
.titleGen1                          {background: var(--secundario); width: fit-content; height: 50px; padding: 0px 20px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; border-radius: 22px 0px; font-weight: 800; font-size: 20px;}




/* CABECERA SECCION */
.cabeceraSect                       {display: flex; align-items: flex-start; justify-content: space-between; position: sticky; top: 0px;}




/* OPTIONES FILTROS DERECHA */
.optionRight                        {padding: 10px; display: flex; gap: 20px; position: relative;}



/* MODULOS INTERNOS */
.modulo1                            {width: 100%; border-radius: 20px; border: 1px solid var(--primario); padding: 10px; display: flex; flex-direction: column; justify-content: space-between; flex-shrink: 0;
    .title1                         {padding: 4px; display: flex; flex-direction: column; gap: 4px; font-size: 22px; font-weight: 600;}
    .subtitle1                      {text-transform: uppercase; font-size: 14px; font-weight: 700;}
    .nro                            {font-size: 32px; width: 100%; text-align: right; font-weight: 700;}
}
@media ( width <= 800px )           {
    .modulo1                        {
        .title1                     {font-size: 20px;}
        .nro                        {font-size: 26px;}
    }
}



/* GRAFICOS INGRESOS */
.graficosAnuales                    {width: 100%; height: 140px;}




/* MODULOS BALANCE MES */
.wrapFullBalance                    {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 26px 0px;}
.modBalance                         {width: 24%;}

@media ( width <= 1280px )          {
    .modBalance                     {width: 49%;}
}
@media ( width <= 800px )           {
    .wrapFullBalance                {gap: 12px 0px;}
    .modBalance                     {width: 100%;}
}


/* TABLA 1 */
.tabla1 							{width: 100%; font-size: 17px;
	.cabecera 						{display: flex; flex-wrap: wrap; width: 100%; align-items: flex-start; justify-content: space-between; margin: 0px 0px 20px 0px;}
	.title 							{font-size: 24px; font-weight: 800; width: calc(100% - 100px);}
	.btn 							{background: var(--primario); color: var(--secundario); font-size: 15px; padding: 6px 9px; border-radius: 14px; border: 1px solid var(--primario); font-weight: 500; cursor: pointer; transition: .2s;
        &:hover                     {background: var(--secundario); color: var(--primario); box-shadow: 0px 0px 40px -5px var(--primario); border: 1px solid var(--primario);}
        &:active                    {transform: scale(.9); box-shadow: 0px 0px 15px -5px var(--primario);}
    }
	
	.item 							{display: flex; flex-wrap: wrap; width: 100%; align-items: flex-start; justify-content: space-between; margin: 12px 0px 0px 0px; padding: 0px 10px;}
	.descripcion 					{width: calc(100% - 280px); font-weight: 400;}
	.detalle 						{display: flex; gap: 20px;}
	.detalleInt 					{}
	.line 							{width: 100%; height: 1px; background: var(--primario); margin: 12px 0px 0px 0px;}
}

@media ( width <= 800px )           {
    .tabla1                         {
        .cabecera                   {margin: 0px 0px 0px 0px;}
        .item                       {gap: 5px;}
        .descripcion                {width: 100%; font-size: 20px;}
        .detalle                    {width: 100%;}
        .title                      {font-size: 20px; margin: 4px 0px 0px 0px;}
    }
}



/* RESUMEN INGRESOS */
.wrapFull                           {width: 100%;}
.resumenMes                         {width: fit-content; margin: 30px auto; display: flex; flex-direction: row; gap: 40px; padding: 20px 24px 16px 24px;
    .itemResumen                    {display: flex; flex-direction: column; align-items: center; gap: 4px;}
    .title                          {font-weight: 600;}
    .monto                          {font-size: 30px; font-weight: 400;}
}
.wrapColumn2                        {width: 48%;}
.lineBalance1                       {width: 1px; background: var(--primario);}

@media ( width <= 1280px )          {
    .wrapColumn2                    {width: 100%;}
    .lineBalance1                   {display: none;}
}
@media ( width <= 800px )           {
    .resumenMes                     {flex-wrap: wrap; width: 320px;}
}
@media ( width <= 480px )           {
    .resumenMes                     {width: 100%; gap: 30px 0px; padding: 12px 14px 12px 14px;
        .itemResumen                {width: 49%;}
        .monto                      {font-size: 26px;}
        .title                      {font-size: 16px;}
    }
}   






/* POPS */
.popDetalle                         {opacity: 0; visibility: hidden; transition: .3s .4s; position: fixed; top: 0px; left: 0px; background: rgba(0,0,0,0.4); width: 100%; height: 100vh; z-index: 20; padding: 30px 0px 30px 0px;
    .wrapDetail                     {transition: .25s .1s; background: black; min-width: 30px; min-height: 0px; max-width: 30px; max-height: 0px; border-radius: 22px; overflow: auto; padding: 0px 0px 0px 0px; margin: auto;
        &::-webkit-scrollbar        {width: 0px;}
    }
    .wrapPopInt                     {opacity: 0; transition: .2s .0s; width: 100%; display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between;}
    
    .line                           {width: 100%; height: 1px; border: 1px solid var(--primario); margin: 0px 0px 14px 0px;}
    .title                          {width: calc(100% - 70px); font-weight: 600; padding: 14px 0px 0px 18px; font-size: 22px; margin: 0px 0px 10px 0px;}
    .icoClose                       {background: var(--secundario); font-size: 26px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 0px 20px; position: sticky; top: 0px; cursor: pointer; transition: .2s;
        &:hover                     {background: var(--primario); color: var(--secundario);}
        &:active                    {transform: scale(.9);}
    }
    .itemDetailPop                  {width: 100%; display: flex; justify-content: space-between; margin: 20px 0px 0px 0px; padding: 0px 18px; flex-wrap: wrap;}
    .left                           {width: calc(100% - 80px); display: flex; flex-wrap: wrap; gap: 4px 12px;}
    .titleItem                      {font-weight: 500; font-size: 16px; width: 100%;}
    .itemVineta                     {font-size: 13px; font-weight: 400;}
    .actions                        {display: flex; gap: 16px;}
    .icoAction                      {font-size: 22px; cursor: pointer; transition: .2s;
        &:hover                     {text-shadow: 0px 0px 6px var(--primario), 0px 0px 6px var(--primario);}
        &:active                    {transform: scale(.9);}
    }
    .ver                            {margin: 40px 0px 0px 0px; width: 100%; text-align: center; font-weight: 400; transition: .2s;
        &:hover                     {text-shadow: 0px 0px 6px var(--primario), 0px 0px 6px var(--primario);}
        &:active                    {transform: scale(.9);}
    }
 
    .wrapDetailOn                   {min-width: 100px; max-width: 400px; min-height: 100px; max-height: 500px; padding: 0px 0px 20px 0px; transition: .25s .3s; }
    .wrapPopIntOn                   {opacity: 1; transition: 1.4s .2s;}
}
.popDetalleOn                       {opacity: 1; visibility: visible; transition: .3s 0s;}

@media ( width <= 650px )           {
    .popDetalle                     {
        .wrapDetailOn               {max-width: 88%;}
    }
}


.popPrincipal                       {position: fixed; top: 0px; left: 0px; background: rgba(0,0,0,0.5); width: 100%; height: 100dvh; display: flex; justify-content: flex-end; opacity: 0; visibility: hidden; transition: .3s .2s;
    .wrap                           {background: black; width: 88%; max-width: 550px; padding: 22px; overflow: auto; border-radius: 30px 0px 0px 30px; margin: 0px -700px 0px 0px; transition: .3s .0s;
        &::-webkit-scrollbar            {width: 0px;}
    }
    .title                          {font-weight: 700; font-size: 24px;}
    .subtitlePop                    {font-weight: 500; font-size: 13px;}
    .icoClose                       {position: absolute; background: var(--primario); color: var(--dark); display: flex; width: 40px; height: 40px; top: 0px; right: 0px; font-size: 30px; justify-content: center; align-items: center; border-radius: 0px 0px 0px 14px; padding: 0px 0px 2px 3px; cursor: pointer;}
    .line                           {width: 100%; height: 1px; background: var(--primario); display: block; margin: 20px 0px;}

    .wrapIntOn                      {margin: 0px 0px 0px 0px; transition: .4s .1s;}
}
.popPrincipalOn                     {opacity: 1; visibility: visible; transition: .4s 0s;}


.formGen                            {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px 0px;
    .tipo                           {width: 18%; border: 1px solid var(--primario); display: flex; align-items: center; justify-content: center; height: 44px; font-weight: 600; font-size: 16px; border-radius: 12px; padding: 0px 0px 1px 0px; transition: .2s; cursor: pointer;
        &:hover                     {box-shadow: 0px 0px 20px 0px var(--primario), inset 0px 0px 22px 0px var(--primario);}
        &:active                    {box-shadow: 0px 0px 3px 0px var(--primario), inset 0px 0px 10px 0px var(--primario); transform: scale(.9);}
        &.tipoOn                    {box-shadow: 0px 0px 20px 0px var(--primario), inset 0px 0px 22px 0px var(--primario);}
    }
    .campoProyect                   {width: 100%; border: 1px solid var(--primario); border-radius: 12px; padding: 8px 8px 6px 8px; transition: .2s;
        &:focus-within              {box-shadow: 0px 0px 14px 0px var(--primario), inset 0px 0px 12px 0px var(--primario); transition: .2s;}
    }
    .label                          {text-transform: uppercase; font-weight: 600; font-size: 12px;}
    .campo1a                        {width: 100%; padding: 2px 10px 0px 8px; font-weight: 400; color: white; transition: .2s;}
    select.campo1a                  {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .bt1                            {justify-content: center; color: var(--secundario); font-weight: 400; height: 50px; font-size: 22px; transition: .2s;
        &:hover                     {background: var(--primario); transform: scale(1); box-shadow: 0px 0px 40px -6px var(--primario);}
        &:active                    {transform: scale(.96);}
    }
    .wrapPago                       {display: flex; justify-content: space-between; flex-wrap: wrap;}
    .fullw                          {display: flex; gap: 20px; margin: 12px 0px 0px 0px; align-items: center; padding: 0px 12px; width: 100%;}
    .fullw2                         {display: flex; gap: 20px; margin: -10px 0px 0px 0px; align-items: center; padding: 0px 12px; width: 100%;}
    .icoDel                         {font-size: 24px; cursor: pointer;}
    .check                          {display: flex; align-items: center; gap: 3px; color: var(--error); cursor: pointer; transition: .2s;
        .icoCheck                   {font-size: 24px;}
        &.checkOn                   {color: var(--aprobado);}
    }
    .wrapAgree                      {display: flex; justify-content: center; width: 100%;}
    .btnAgreeg                      {font-weight: 500; font-size: 14px; text-transform: uppercase; width: fit-content; cursor: pointer; text-align: center; transition: .2s;
        &:hover                     {color: white;}
    }
}
.campo2                             {width: 48% !important;}
.campo3                             {width: 31% !important;}
.top1                               {margin: 20px 0px 0px 0px;}
.iluxionForm                        {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px 0px;}
.lwContents                         {display: contents;}
.editable                           {cursor: pointer; transition: .2s;
    &:hover                         {text-shadow: 0px 0px 10px var(--primario);}
}

.listaOpc                           {position: relative;
    .campoLista                     {display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 2px 10px 0px 8px; font-weight: 400; color: white; cursor: pointer;
        .txtLista                   {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
        .icoLista                   {font-size: 18px; transition: .2s;}
    }
    .opciones                       {position: absolute; top: 100%; left: 0px; background: var(--dark); border: 1px solid var(--primario); width: 100%; max-height: 220px; overflow-y: auto; border-radius: 12px; margin: 6px 0px 0px 0px; padding: 6px; z-index: 3; display: none;
        &::-webkit-scrollbar        {width: 0px;}
    }
    .opcionNueva                    {width: 100%; padding: 4px 8px; font-weight: 400; color: white; border-bottom: 1px solid var(--primario); margin: 0px 0px 4px 0px;}
    .opcion                         {padding: 5px 8px; border-radius: 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .2s;
        &:hover                     {background: var(--trans2);}
        &.opcionOn                  {background: var(--trans2a); color: var(--dark);}
    }
    &.listaOpcOn                    {
        .opciones                   {display: block;}
        .icoLista                   {transform: rotate(180deg);}
    }
}

.avisos                             {position: fixed; top: 20px; left: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px;}
.aviso                              {position: relative; display: flex; align-items: center; gap: 10px; background: var(--dark); border: 1px solid var(--aprobado); color: var(--aprobado); padding: 12px 20px 14px 14px; border-radius: 16px; overflow: hidden; box-shadow: 0px 20px 40px -14px rgba(0, 0, 0, 0.7); animation: avisoIn .3s ease;
    .icoAviso                       {font-size: 24px;}
    .txtAviso                       {font-weight: 500; font-size: 16px; white-space: nowrap;}
    .lineAviso                      {position: absolute; bottom: 0px; left: 0px; height: 3px; background: var(--aprobado); animation: avisoLine 4s linear forwards;}
}
@keyframes avisoIn                  {
    from                            {transform: translateX(-120%); opacity: 0;}
    to                              {transform: translateX(0px); opacity: 1;}
}
@keyframes avisoLine                {
    from                            {width: 100%;}
    to                              {width: 0%;}
}

@media ( width <= 650px )           {
    .formGen                        {
        .tipo                       {width: 48%;}
    }
    .campo2                         {width: 100% !important;}
    .campo3                         {width: 100% !important;}
}



/* ICONOS BALANCE */
.btnIcon                            {width: 40px; height: 40px; font-size: 22px; display: flex; align-items: center; justify-content: center; color: var(--secundario); background: var(--primario); border-radius: 50px; border: 1px solid var(--secundario); cursor: pointer; transition: .2s; flex-shrink: 0;
    &:hover, &.btnComprimOn         {background: var(--secundario); color: var(--primario); box-shadow: 0px 0px 30px -2px var(--primario); border: 1px solid var(--primario);}
    &:active                        {transform: scale(.9); box-shadow: 0px 0px 10px 0px var(--primario);}
    &.btnComprimHide                {display: none;}
}



/* MENU COMPRIMIDO */
.balanceComprimido                  {margin: -80px 0px 20px 0px; top: -60px; display: flex; gap: 10px; right: 0px; position: sticky; transition: .25s; background: var(--dark); left: 0px; z-index: 5; height: 60px; align-items: center; justify-content: space-between; overflow-y: hidden; overflow-x: auto; width: 100%; border-radius: 26px;
    &::-webkit-scrollbar            {width: 0px; height: 0px;}

    .actionBalance                  {display: flex; gap: 10px; position: sticky; right: 0px; background: var(--secundario); padding: 10px 12px 10px 12px; border-radius: 24px;}
    .buscarBalance                  {margin: 0px 12px 0px 12px; width: 300px;}
}
.campoBuscar                        {background: var(--primario); width: 100%; color: var(--secundario); border-radius: 14px; padding: 0px 10px; font-weight: 400; border: 1px solid var(--primario); height: 36px; flex-shrink: 0; transition: .25s;
    &:focus                         {box-shadow: 0px 0px 14px 0px var(--primario); border: 1px solid var(--dark);}
}
.comprimidoOn                       {margin: 0px 0px 20px 0px; top: 0px; transition: .7s;}