/* SCROLLBAR */
::-webkit-scrollbar                 {width: 12px; border-radius: ; transition: .2s; overflow: auto; background: initial;}
::-webkit-scrollbar-track           {background: var(--primario); margin: 40px 0px; border-radius: 20px; transition: .2s; }
::-webkit-scrollbar-thumb           {transition: .2s; background: var(--white07); border-radius: 20px; }




/* GENERALES */
.bodyMain                           {display: flex; align-items: center; justify-content: center; height: 100vh; min-height: 600px;}
.main                               {backgrounds: rgba(255, 0, 0, 0.149); width: 88%; height: 88%; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: flex-start;}
.wrap                               {width: 100%; height: calc(100% - 70px); display: flex; align-items: center; justify-content: flex-end; position: relative;}
.contenido                          {background: var(--white02); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0px 80px 70px -50px rgba(0, 0, 0, 0.6); border: 1px solid var(--white); width: calc(100% - 64px); height: 100%; display: flex; flex-direction: column; justify-content: space-between; border-radius: 26px; padding: 8px; overflow: hidden;}

@media ( width <= 960px )           {
    .main                           {width: 100%; height: 100%; justify-content: flex-end;}
    .wrap                           {justify-content: center; height: calc(100% - 90px); padding: 0px 0px 22px 0px;}
    .contenido                      {width: calc(100% - 40px); border-radius: 18px;}
}



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




/* STATUS BAR */
.statusBar                          {width: fit-content; box-shadow: 0px 24px 36px -12px rgba(0, 0, 0, 0.7); margin: 0px 0px 0px 70px; padding: 0px 8px 0px 0px; display: flex; overflow: hidden; background: var(--white03); height: 50px; align-items: center; gap: 14px; border-radius: 24px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 2;
    .logo                           {background: var(--primario); height: 100%; align-content: center; padding: 7px 12px 4px 12px; border-radius: 18px;}
    .logoFEP                        {filter: invert(1); width: 100px;}
    .right                          {display: flex; align-items: center; height: 100%;}
    .item                           {display: flex; gap: 12px; border: 1px solid var(--white); height: calc(100% - 16px); background: var(--white05); align-items: center; padding: 0px 10px; border-radius: 20px;}
    .menu                           {display: none; gap: 3px; border: 1px solid var(--primarioWhite); color: var(--primarioWhite); height: calc(100% - 16px); background: var(--white07); align-items: center; padding: 0px 10px; font-weight: 500; border-radius: 20px; margin: 0px 0px 0px 16px; cursor: pointer; transition: .2s;
        &:hover                     {background: var(--primarioWhite); color: var(--white); transform: scale(1.08);}
        &:active                    {transform: scale(.96);}
    }
    .mes                            {text-transform: uppercase; font-weight: 700; font-size: 15px;}
    .btnStatusBar                   {display: flex; font-size: 16px; font-weight: 500; gap: 4px; align-items: center; position: relative; color: var(--black); transition: .3s;
        &:hover                     {color: var(--primarioWhite);}
    }
    .icoItem                        {font-size: 22px; cursor: pointer;}
    .nro                            {background: var(--error); color: white; font-size: 13px; font-weight: 700; padding: 1px 5px 2px 5px; border-radius: 100px; position: absolute; top: 0px; margin: -10px 0px 0px 10px;}
    .txtUser                        {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; max-width: 90px; width: fit-content;}
    .mode                           {font-size: 30px; cursor: pointer; display: flex; padding: px; width: 32px; height: 32px; justify-content: center; margin: 0px 10px;}
    .dark                           {transition: .2s;
        &:hover                     {text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); transform: scale(1.07);}
        &:active                    {transform: scale(.96);}
    }
    .light                          {transition: .2s;
        &:hover                     {text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); transform: scale(1.07);}
        &:active                    {transform: scale(.96);}
    }
    .modeOff                        {font-size: 0px;}
}
@media ( width <= 960px )           {
    .statusBar                      {position: fixed; align-items: flex-end; top: 0px; margin: 0px; width: 100%; box-shadow: 0px 24px 36px -12px rgba(0, 0, 0, 0.4); justify-content: space-between; height: 80px; border-radius: 0px 0px 24px 24px;
        .right                      {height: 52px;}
        .logo                       {height: 52px; margin: 0px 0px 8px 8px;}
        .menu                       {display: flex;}
        .logoFEP                    {width: 120px;}
    }
}
@media ( width <= 800px )           {
    .statusBar                      {
        .item                       {padding: 0px; height: auto; border-radius: 0px; background: none; border: none;}
        .icoItem                    {font-size: 28px;}
        .logoFEP                    {width: 90px;}
        .sale800                    {display: none !important;}
    }
}




/* NAVEGADOR */
.nav                                {width: 50px; height: auto; backgrounds: gray; position: absolute; left: 0px; z-index: 1; display: flex; flex-direction: column; gap: 14px;
    .icoHome                        {border-radius: 20px; cursor: pointer; font-size: 28px; width: 50px; height: 50px; color: var(--primario); background: white; display: flex; justify-content: center; align-items: center; transition: .2s;
        &:hover                     {background: var(--primarioWhite); color: var(--white); transform: scale(1.06);}
        &:active                    {transform: scale(.96);}
    }
    .navInt                         {border: 1px solid var(--white); background: var(--white05); width: 50px; border-radius: 20px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 10px 5px; overflow-x: hidden; overflow-y: auto; min-height: auto; max-height: 332px; transition: .2s; scrollbar-width: none;
        &::-webkit-scrollbar        {width: 0px;}
    }
    .item                           {display: flex; cursor: pointer; align-items: center; gap: 4px; font-weight: 600; width: fit-content;
        &:hover                     {color: var(--primarioWhite); text-shadow: 0px 0px 10px white;}
        &:hover .icoNav             {transform: scale(1.08);}
        &:active .icoNav            {transform: scale(.96);}
    }
    .icoNav                         {border-radius: 20px; font-size: 26px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; transition: .2s;}
    .txtNav                         {transition: .2s; width: calc(100% - 45px);}
    .line                           {display: flex; width: 80%; height: 1px; background: var(--black); margin: 8px auto;}

    .navOn                          {border-radius: 24px; width: 200px; padding: 10px 8px; background: var(--white); box-shadow: 10px 10px 50px -10px rgba(0, 0, 0, 0.6); transition: .2s;
        .item                       {gap: 1px;}
        .line                       {width: 95%;} 
    }
}
@media ( width <= 960px )           {
    .nav                            {background: var(--white09); transition: .5s; width: 100%; position: fixed; height: 100vh; top: 0px; justify-content: center; opacity: 0; visibility: hidden; 
        .icoHome                    {display: none;}
        .navInt                     {transform: translateY(-100vh); top: 110px; bottom: 20px; position: fixed; width: 100%; height: initial; max-height: initial; overflow-y: auto; padding: 0px 20px 20px; background: rgba(0, 0, 0, 0); border: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: .5s;}
        .line                       {width: 100%;}
        
        .navOn                      {top: 110px; bottom: 20px; position: fixed; width: 100%; height: initial; max-height: initial; overflow-y: auto; padding: 0px 20px 20px; background: rgba(0, 0, 0, 0); border: none; box-shadow: initial;
            .item                   {gap: 4px;}
            .line                   {width: 100%;}
        }

        .navMobIntOn                {transform: translateY(0vh); transition: .4s .1s;}
    }
    .navMobOn                       {opacity: 1; visibility: visible; transition: .4s;}
}





/* CABECERAS */
.cabecera1                          {width: 100%; display: flex; align-items: flex-start; justify-content: flex-end;
    .title                          {background: var(--primario); border-radius: 16px 16px 0px 16px; position: absolute; top: 0px; left: 0px; gap: 10px; color: white; display: flex; align-items: center; font-size: 24px; font-weight: 700; padding: 12px 18px;}
    .icoTitle                       {}

    .right                          {display: flex; align-items: flex-start; gap: 14px;
        &::-webkit-scrollbar        {height: 3px;}
        &::-webkit-scrollbar-track  {margin: 0px 50px;}
    }
    .tipoVista                      {display: flex; width: fit-content; background: var(--white04); border: 1px solid var(--white); height: 40px; align-items: center; gap: 4px; padding: 4px; border-radius: 16px;}
    .btnVista                       {display: flex; gap: 2px; padding: 0px 8px; border-radius: 12px; transition: .3s; font-weight: 600; font-size: 16px; color: var(--black07); background: initial; cursor: pointer; height: 100%; align-items: center;
        &:hover                     {color: var(--black); transform: scale(1.02); background: var(--white); box-shadow: 0px 4px 26px -7px rgba(0, 0, 0, 0.5);}
        &:active                    {transform: scale(.92);}
    }
    .btnVistaOk                     {color: var(--black); transform: scale(1.02); background: var(--white); box-shadow: 0px 4px 26px -7px rgba(0, 0, 0, 0.5);}
    .icoVista                       {font-size: 14px;}

    .bt1                            {width: fit-content; gap: 20px; position: sticky; right: 0px;}
    .buscarWrap                     {min-width: 150px; width: 150px;}
}
@media ( width <= 1240px )          {
    .cabecera1                      {
        .right                      {max-width: 390px; overflow: auto; padding: 0px 0px 8px 20px;}
    }
}
@media ( width <= 800px )           {
    .cabecera1                      {flex-wrap: wrap; gap: 8px; height: 78px; flex-direction: column; justify-content: flex-end;
        .title                      {width: 100%; font-size: 20px; padding: 7px 10px 10px 20px; padding: 7px 10px 8px 20px; border-radius: 14px;} 
        .right                      {width: 100%; justify-content: space-between; padding: 0px; max-width: 100%;}
        .mitadPant                  {width: 100% !important;}
    }
}





/* ESTADO DE CARGA (Livewire) */
.cargando                           {opacity: .45; pointer-events: none; transition: opacity .2s;}
.btCargando                         {opacity: .5; cursor: wait; pointer-events: none;}
.spinner                            {width: 20px; height: 20px; border: 3px solid var(--white05); border-top-color: var(--white); border-radius: 50%; animation: girar .7s linear infinite; flex-shrink: 0;}
.spinnerBuscar                      {width: 18px; height: 18px; border: 3px solid var(--black03); border-top-color: var(--black); margin: 0px 8px 0px -26px;}
@keyframes girar                    {
    100%                            {transform: rotate(360deg);}
}


/* TABLA 1 */
.tabla1                             {width: 100%; background: var(--white03); height: calc(100% - 54px); align-content: flex-start; border-radius: 18px; display: flex; flex-wrap: wrap; gap: 12px; overflow: auto; margin: 0px 0px 0px 0px;}
.itemTable1                         {background: var(--white05); display: flex; width: 100%; min-width: fit-content; height: 40px; align-items: center;
    .itemLeft                       {height: 40px; gap: 10px; align-items: center; text-align: center; display: flex; background: var(--white09); border-radius: 0px 40px 40px 0px; position: sticky; left: 0px; margin: 2px 0px 0px 0px;}
    .itemRight                      {height: 40px; gap: 10px; align-items: center; text-align: center; display: flex; margin: 0px 0px 0px 40px;}
    .column                         {font-size: 18px; font-weight: 500; text-align: center;}
    .celda1                         {width: 190px; height: 100%; align-content: center;}
    .celda2                         {width: 240px; height: 100%; align-content: center; text-align: center; overflow: hidden;}
    .rptasColumn                    {font-size: 17px; font-weight: 400;}
    .txtCreado                      {font-size: 15px;}
    .cuadroColor                    {width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--black03); background: var(--colorEvento); margin: 0px auto; display: block;}
    .checkOk                        {margin: 3px 0px 0px 0px;}

    .icoAccion                      {font-size: 22px; transition: .2s; cursor: pointer;
        &:hover                     {color: var(--aprobado); transform: scale(1.15);}
        &:active                    {transform: scale(.96);}
    }
    .check                          {padding: 0px 0px 0px 16px;}
    .acciones                       {display: flex; width: 36px; justify-content: center; gap: 7px;}
    .nombre                         {width: 260px; margin: 0px 7px 0px 0px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}
}
/* Marcada con el check: el texto entero pasa al primario */
.itemTable1On                       {background: var(--white); color: var(--primarioWhite);
    .itemLeft                       {background: var(--white);}
}
/* Opciones del icono de acciones. Van en position fixed (no absolute) porque
   .tabla1 tiene overflow y recortaria el menu en las ultimas filas */
.accOpciones                        {position: fixed; 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: 20;
    .accOpcion                      {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);}
    }
}
.accOpcionesOn                      {display: flex;}
/* La fila con el menu abierto se eleva: .itemLeft es sticky y crea su propio
   contexto de apilado, asi que el z-index del menu solo vale dentro de esa
   fila y las siguientes lo taparian */
.filaMenuOn                         {position: relative; z-index: 30;}
.itemStick                          {position: sticky; top: 0px; z-index: 1; height: 50px; margin: 0px 0px 10px 0px; background: var(--white09);
    .ordenable                      {cursor: pointer; transition: .2s; display: flex; align-items: center; justify-content: center; gap: 4px;
        &:hover                     {color: var(--aprobado);}
    }
    .icoOrden                       {font-size: 16px;}
    .ordenOn                        {color: var(--aprobado);}
    .itemLeft                       {background: var(--black09); color: var(--white); margin: 0px 0px 0px 0px; z-index: 2; height: 100%;}
    .column                         {font-weight: 600;}
    .checkOk                        {
        .box                        {border: 2px solid var(--white);}
    }
}

@media ( width <= 800px )           {
    .tabla1                         {height: calc(100% - 100px);}
    .itemTable1                     {
        .nombre                     {width: 100px;}
        .itemRight                  {margin: 0px 0px 0px 0px;}
        .acciones                   {width: 80px;}
    }
}

/* Cuando la tabla no trae ninguna fila */
.sinDatos                           {width: 100%; text-align: center; font-weight: 500; font-size: 18px; color: var(--black05); padding: 40px 20px;}

.tabla1::-webkit-scrollbar          {width: 0px !important; height: 14px; border-radius: 100px; background: initial;}
.tabla1::-webkit-scrollbar-track    {background: var(--primario); border-radius: 30px; margin: 0px 30px;}
.tabla1::-webkit-scrollbar-thumb    {background: var(--white06); border-radius: 999px;}






/* POPS */
.pop1                               {position: fixed; top: 0px; left: 0px; background: var(--white03); width: 100%; height: 0vh; transition: .4s .1s; display: flex; align-items: flex-end; justify-content: center; z-index: 10; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    .icoClose                       {position: fixed; background: var(--primario); display: flex; font-size: 30px; top: 20px; left: 20px; color: var(--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);}
        &:active                    {transform: scale(.98);}
    }
    .pop1Wrap                       {margin: 0px 0px -115vh 0px; transition: .3s .0s; background: var(--white); height: auto; max-height: 60%; overflow: auto; padding: 10px 10px 50px 10px; border-radius: 20px 20px 0px 0px; display: flex; gap: 10px 0px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; width: 100%; max-width: 480px; box-shadow: 0px -10px 50px -26px rgba(0,0,0,0.5);
        &::-webkit-scrollbar        {width: 0px;}
    }
    .title                          {font-size: 20px; width: fit-content; max-width: calc(100% - 155px); font-weight: 700; line-height: 1.1; padding: 10px 16px 12px 18px; background: var(--primario); color: white; position: sticky; top: -10px; margin: -10px 0px 20px -10px; border-radius: 20px 0px; z-index: 10;}
    .btnPop                         {display: flex; gap: 6px; position: sticky; top: 0px; z-index: 10;}
    .icoPop                         {color: white; padding: 0px 6px 0px 6px; font-size: 20px; width: fit-content; min-width: 40px; height: 30px; border-radius: 12px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: .2s; gap: 3px;
        &:hover                     {background: var(--black) !important; color: var(--white); transform: scale(1.08);}
        &:active                    {transform: scale(.98);}
    }
    .icoPopEspera                   {background: var(--gray3) !important; cursor: wait; opacity: .6; transform: none !important;
        &:hover                     {background: var(--gray3) !important; color: var(--white); transform: none !important;}
    }
    .campo1                         {}
    .campo1a                        {background: var(--white);}
    .file                           {padding: 6px 10px 0px 10px;}
    .imgAdj                         {border-radius: 20px; overflow: hidden; height: 200px;}
    .txtOk                          {font-size: 16px; font-weight: 500; padding: 0px 3px 2px 0px; font-weight: 500;}

    .pop1WrapOn                     {margin: 0px 0px 0px 0px; transition: .3s .15s;}
}
.pop1On                             {height: 100vh; transition: .3s .0s;}


/* POP DE LA SELECCION DE LAS TABLAS */
/* Sale de abajo y no lleva cortina: la tabla se sigue viendo y se sigue
   pudiendo marcar con el pop abierto */
.popSelec                           {position: fixed; bottom: 0px; left: 0px; right: 0px; margin: 0px auto -350px auto; transition: .3s; width: 100%; max-width: 400px; background: var(--primario); color: white; padding: 18px 18px 32px 18px; border-radius: 26px 26px 0px 0px; z-index: 9;
    .title                          {font-weight: 600; text-align: center; width: 100%; font-size: 24px; margin: 0px 0px 20px 0px;}
    .opt1                           {width: 100%; display: flex; align-items: center; justify-content: space-between; font-weight: 500; cursor: pointer; transition: .3s;
        &:hover                     {color: var(--aprobado-light); padding: 0px 0px 0px 10px;}
        &:hover .icodl9             {transform: scale(1.15);}
    }
    .icodl9                         {font-size: 22px; transition: .3s;}
    .line                           {width: 100%; height: 1px; background: white; margin: 14px 0px;}
}
.popSelectOn                        {margin: 0px auto 0px auto;}