/* --------------------------------------------------------------------------------------
alto header: 36px
gap: 5px x 2 = 10px
alto footer: 34px
-------------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------------- */
/* imagen de fondo (Antes del sub-body) */
.cont-imagen-fondo
{
    width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -100;
    overflow: hidden; display: flex; justify-content: center; align-items: center;
}

#img-fondo {width: 200%; filter: opacity(15%); transform: scale(1.8);}
/* ----------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------------- */
/* ID: sub-body */
body
{
    
    overflow: hidden;

    #sub-body
    {
        align-items: center; padding: 5px; height: 100%; max-height: 100%; gap: 5px;
        /* min-height: max-content; */ overflow: hidden;
    }

}

/* ----------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------------- */
/* header y contenido */
#header-ajwebx
{
    
    display: flex; width: 100%; align-items: center; gap: 5px; height: 36px;
    background-color: var(--cl-blanco); padding: 5px; border-radius: 3px;
    border: solid 1px var(--cl-gris2);

    /* ------------------------------------------------------------------------------- */
    /* Logo */
    .link-logo-principal {display: flex; justify-content: center; align-items: center;}
    #logo-corporativo {width: 28px; height: 28px;}

    .lineaV {height: 22px;}

    /* #logo-parte-1 {fill: #01498c;} */  /* color logo, parte superior */
    /* #logo-parte-2 {fill: #1795d0;} */  /* color logo, parte inferior */

}

.mensajes-sin-leer {animation: sinleer 1.5s ease 0s infinite normal none;}
@keyframes sinleer {
    0%          {fill: #ff0000; transform: scale(1);}
    50%         {fill: var(--cl-pri1); transform: scale(1);}
    100%        {fill: #ff0000; transform: scale(1);}
}

/* ----------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------------- */
/* main y contenido */
main
{
    
    width: 100%; height: calc(100% - 80px); position: relative; /* min-height: 582px; */


    /* ------------------------------------------------------------------------------- */
    /* Objeto: formulario perfil */
    .main-app
    {
        width: 100%; min-height: 100%; height: max-content; position: absolute; left: 0;
        top: 0; background-color: rgba(255, 255, 255, 0.7); border-radius: 3px;
    }

    .main-app .mini-app
    {
        position: absolute; display: flex; justify-content: center; align-items: center;
        width: 100%; height: 100%;
    }
    
    #form-login
    {
        width: max-content; display: flex; flex-direction: column; gap: 5px; margin: auto;
    }

    #form-cambio-contra
    {
        width: max-content; display: flex; flex-direction: column; gap: 5px; margin: auto;
    }


    /* ------------------------------------------------------------------------------- */
    /* Objeto: Notiusuario */
    .main-notiusuario
    {
        width: 100%; max-width: 475px; min-height: 100%; height: max-content; position: absolute;
        right: 0; top: 0; background-color: rgba(255, 255, 255, 0.7);
        border-radius: 3px; border: solid 1px var(--cl-gris2);
    }

    .cont-notiusuario
    {
        position: absolute; display: flex; flex-direction: column; width: 100%;
        height: 100%; padding: 10px;
    }

    .cont-notiusuario > p
    {
        text-align: center; padding: 2px 0 10px 0; font-family: textoB;
        border-bottom: solid 1px var(--cl-gris3);
    }

    #lista-noti
    {
        display: flex; width: 100%; flex-direction: column; gap: 30px; padding: 5px;
        border-radius: 3px; overflow-y: auto; margin-top: 10px; height: calc(100% - 48px);
    }

    .noti
    {
        display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 10px;
        border: solid 1px var(--cl-gris3); border-radius: 3px;
    }
    .noti-nueva {border: solid 1px var(--cl-pri1); background-color: var(--cl-pri3);}
    .noti-encabezado {display: flex; justify-content: space-between; margin-bottom: 5px; gap: 5px;}
    .noti-encabezado span {font-size: 13px; color: var(--cl-gris2); width: 75px; text-align: right;}
    .noti .asunto{font-family: textoB; font-size: 18px;}
    .noti .detalle {color: var(--cl-gris1); text-align: justify;}



    /* ------------------------------------------------------------------------------- */
    /* Objeto: Menú apps */
    #cont-menu-apps
    {
        display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center;
        background-color: rgba(255, 255, 255, 0.7); border-radius: 3px; padding: 10px 0px;
        position: absolute; left: 0; top: 0;
    }
    .cabecera-menu-apps
    {
       display: flex; gap: 5px; align-items: center; width: 100%; max-width: 895px;
       border-bottom: solid 1px var(--cl-gris3); padding-bottom: 3px; padding-inline: 5px;
       position: relative;
    }
    .cabecera-menu-apps > button {position: absolute; right: 5px;}
    #cont-lista-categorias-apps
    {
        width: 100%; max-width: 895px; height: calc(100% - 32px); border-radius: 3px;
        padding: 25px 0 10px 0; display: flex; flex-direction: column; gap: 100px;
        overflow-y: auto;
    }
    .cont-categoria-apps
    {
        width: 100%; max-width: 895px; border-radius: 3px; padding-top: 5px;
        display: flex; flex-direction: column; gap: 5px; border-top: solid 1px var(--cl-pri3);
    }
    .cont-categoria-apps > p {padding-left: 5px;}

    .cont-lista-menu-apps
    {
        width: 100%; border-radius: 3px; display: flex; flex-wrap: wrap; gap: 10px;
        justify-content: space-between; overflow: hidden; padding-bottom: 10px;
    }
    .btn-app
    {
        background-color: transparent; border: none; display: flex; flex-direction: column;
        border-radius: 3px; align-items: center; width: 100px; padding: 5px; cursor: pointer;
        transition: .3s; height: 80px; font-family: textoL; font-size: 0.9rem;
        position: relative;
    }
    .btn-app svg {fill: var(--cl-pri1); width: 50px; height: 50px; transition: .1s;}
    .btn-app:hover {transform: scale(1.1);}
    .btn-app span {position: absolute; width: 100px; top: 51px;}
    .cont-comodin-apps-1 {width: 100px;}
    .cont-comodin-apps-2 {display: none; width: 100px;}
    .cont-comodin-apps-3 {display: none; width: 100px;}
    .cont-comodin-apps-4 {display: none; width: 100px;}
    .cont-comodin-apps-5 {display: none; width: 100px;}
    .cont-comodin-apps-6 {display: none; width: 100px;}
    @media screen and (min-width: 430px) {.cont-comodin-apps-2 {display: block;}}
    @media screen and (min-width: 540px) {.cont-comodin-apps-3 {display: block;}}
    @media screen and (min-width: 650px) {.cont-comodin-apps-4 {display: block;}}
    @media screen and (min-width: 760px) {.cont-comodin-apps-5 {display: block;}}
    @media screen and (min-width: 870px) {.cont-comodin-apps-6 {display: block;}}

}

/* ----------------------------------------------------------------------------------- */





/* ------------------------------------------------------------------------------- */
/* Objeto: Área de trabajo */
#main-area-trabajo
{
    width: 100%; height: 100%; position: absolute; left: 0;
    top: 0;
}
.fondo-app
{
    width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.4);
    border-radius: 3px; position: absolute; left: 0; top: 0; padding: 45px 0px 0px 5px;
    border: solid 1px var(--cl-gris2); transition: 0.5s; display: flex; flex-direction: column;
    align-items: center;
}
.titulo-app
{
    font-family: textoB; position: absolute; left: 10px; top: 13px; color: var(--cl-pri1);
    font-size: 18px;
}
.app-min-on
{
    position: absolute; transform: scale(0.4); border: solid 1px var(--cl-gris3);
    overflow: hidden; width: calc(100% - 20%); left: calc(50% - 40%);
}
.app-min-off
{
    position: absolute; transform: scale(0); border: solid 1px var(--cl-gris3);
    overflow: hidden; left: 0; top: 0;
}
.btn-minimizar {position: absolute; top: 10px; right: 50px;}
.cont-app-iframe
{
    position: absolute; top: 45px; left: 5px; width: calc(100% - 10px); height: calc(100% - 45px);
    border-radius: 3px; border-top: solid 1px var(--cl-gris2);
}





/* ----------------------------------------------------------------------------------- */
/* footer y contenido */
footer
{
    margin-top: auto; width: 100%; border: solid 1px var(--cl-gris2); display: flex;
    align-items: center; padding: 0px 5px; background-color: var(--cl-blanco); gap: 5px;
    border-radius: 3px; position: relative; height: 34px;
}
footer > p:nth-of-type(1) {color: var(--cl-pri0); min-width: 90px;}
footer > .lineaV {height: 20px;}

#lista-apps-en-uso
{
    display: flex; align-items: center; gap: 10px; overflow-y: auto; padding: 2px 0px 10px 0px;
    border-radius: 3px; width: calc(100% - 118px); margin-left: auto; position: absolute; top: 5px;
    left: 112px;
}

.item-btn
{
    background-color: transparent; border: none; min-width: 100px; width: max-content;
    max-width: 150px; padding-inline: 5px; cursor: pointer; border-radius: 3px;
    text-align: center; font-family: textoL;
}
.item-btn-on
{
    background-color: var(--cl-pri1); border: none; min-width: 100px; width: max-content;
    max-width: 150px; padding-inline: 5px; cursor: pointer; border-radius: 3px;
    text-align: center; font-family: textoL; color: var(--cl-blanco);
}

.item-btn:hover {background-color: var(--cl-pri2); color: var(--cl-blanco);}
.item-btn:focus {outline: none; background-color: var(--cl-pri2); color: var(--cl-blanco);}
/* ----------------------------------------------------------------------------------- */









.cont-foto
{
    width: 100%;
    max-width: 340px;                       /* Definir el ancho máximo de la ventana */
    height: max-content;
    /* --------------------------------------- */
    > p {                                   /* Título de la ventana */
        border-bottom: solid 1px var(--cl-gris3);
        padding-bottom: 7px;
    }
    /* --------------------------------------- */
    .cont-cuerpo {                          /* Contenido de la ventana */
        width: 100%;                        /* Ancho el máximo posible */
        height: max-content;                /* Definir la altura del contenido */
        padding-top: 10px;
        /* ----------------------------------- */
        .cont-foto-perfil {
            border: solid 1px var(--cl-gris3); border-radius: 3px;
            width: 300px; height: 300px; margin-inline: auto;
            display: flex; justify-content: center;
            align-items: center;
            background-color: rgb(255, 255, 255);
            /* ------------------------------- */
            img {max-width: 100%; max-height: 100%;}
        }
        .cont-herramientas {
            display: flex; align-items: center;
            margin-top: 10px; gap: 15px; width: 300px;
            margin-inline: auto; justify-content: space-around;
        }
        /* ----------------------------------- */
        #foto-btn-accion {margin-top: 25px;}
    }
}





.cont-firma
{
    width: 100%;
    max-width: 30rem;

    height: 100%;
    max-height: 18rem;

    .cont-cuerpo
    {
        width: 100%;
        height: calc(100% - 2rem);
        max-height: calc(100% - 2rem);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        .herramientas
        {
            display: flex; gap: 1.5rem;
        }

        #firma-cont-vista-previa
        {
            width: 100%;

            border: solid 0.1rem var(--cl-gris3);
            border-radius: 0.1rem;

            display: flex;
            justify-content: center;
            align-items: center;

            img
            {
                max-width: 100%; max-height: 100%;
            }
        }
    }
}











/* ----------------------------------------------------------------------------------- */
/* Si pantalla es mayor a 1023px */
@media screen and (min-width: 1024px) {
    /* ------------------------------------------------------------------------------- */
    /* hedaer y contenido */
    /* #header-ajwebx > .lineaV {height: 22px;} */
    #logo-corporativo {width: 24px; height: 24px;}
    /* ------------------------------------------------------------------------------- */
    /* main o area de trabajo */
    /* ------------------------------------------------------------------------------- */
    /* footer y contenido */
    /* ------------------------------------------------------------------------------- */
}
/* ----------------------------------------------------------------------------------- */