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

SCRIPT:         base-sodis-v-2.2
Descripción:    Estilos personalizados de la base SODIS (copia de v-2.1).
                R1: sin cambios de layout; solo enlaza popups-v-1.0.
Versión:        2.2
Última edición: 2026-11-01

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



/* --------------------------------------------------------------------------------------
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(9%); 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;}

/* R1.1 — versión visible en el pie (la rellena base-sodis-v-2.2.js desde #app-version) */
footer > .version-plataforma
{
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-family: textoL; font-size: 11px; line-height: 1; letter-spacing: .02em;
    color: var(--aj-ink-3, #5E7085); white-space: nowrap; user-select: text;
    background-color: var(--cl-blanco); padding-left: 8px;
}
footer > .version-plataforma:empty {display: none;}

#lista-apps-en-uso
{
    display: flex; align-items: center; gap: 10px; overflow-x: auto; overflow-y: hidden;
    padding: 2px 0px 10px 0px; border-radius: 3px; width: calc(100% - 160px); margin-left: auto;
    position: absolute; top: 5px; left: 112px;
    scrollbar-width: none;                 /* la barra no cabe en un pie de 34 px */
    -webkit-overflow-scrolling: touch;
}
#lista-apps-en-uso::-webkit-scrollbar {display: none;}

/* R2: pista de desplazamiento cuando hay más apps de las que caben */
#lista-apps-en-uso.puede-scroll:not(.al-final)
{
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
}

.item-btn
{
    background-color: transparent; border: none; min-width: 72px; width: max-content;
    max-width: none; flex: 0 0 auto; padding-inline: 8px; cursor: pointer; border-radius: 3px;
    text-align: center; font-family: textoL; white-space: nowrap;
}
.item-btn-on
{
    background-color: var(--cl-pri1); border: none; min-width: 72px; width: max-content;
    max-width: none; flex: 0 0 auto; padding-inline: 8px; cursor: pointer; border-radius: 3px;
    text-align: center; font-family: textoL; color: var(--cl-blanco); white-space: nowrap;
}

.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%;
            }
        }
    }
}





.cont-firmar
{
    width: 100%;
    max-width: calc(100% - 10px);
    height: calc(100% - 10px);
    
    .titulo-modal {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .badge-pendientes {
        background-color: var(--cl-pri1);
        color: white;
        border-radius: 50%;
        padding: 0.15rem 0.5rem;
        font-size: 0.75rem;
        font-weight: bold;
        min-width: 1.2rem;
        text-align: center;
        display: none;
    }
    
    .cont-cuerpo {
        width: 100%;
        height: calc(100% - 3rem);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Vistas */
    .vista-firmar {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        overflow: hidden;
    }

    .header-vista {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--cl-gris3);

        h3 {
            margin: 0;
            font-size: 1rem;
            font-weight: 600;
            flex: 1;
        }
    }

    /* Mensajes */
    #firmar-mensaje {
        min-height: 0;
        transition: all 0.3s ease;
        
        .alerta-error {
            background-color: #fee;
            border: 1px solid #fcc;
            color: #c00;
            padding: 0.5rem;
            border-radius: 4px;
            margin-bottom: 0.5rem;
        }

        .alerta-exito {
            background-color: #efe;
            border: 1px solid #cfc;
            color: #060;
            padding: 0.5rem;
            border-radius: 4px;
            margin-bottom: 0.5rem;
        }
    }

    /* Lista de solicitudes */
    .contenedor-lista {
        flex: 1;
        overflow-y: auto;
        padding: 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        
        .text-center {
            text-align: center;
            color: var(--cl-gris1);
            padding: 2rem;
            font-size: 0.9rem;
        }
    }

    .lista-solicitudes {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .item-solicitud {
        background-color: white;
        border: 1px solid var(--cl-gris3);
        border-radius: 6px;
        padding: 0.75rem;
        cursor: pointer;
        transition: all 0.2s ease;

        &:hover {
            border-color: var(--cl-pri1);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transform: translateY(-1px);
        }

        .solicitud-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;

            strong {
                color: var(--aj-ink, #1B2735);
                font-size: 0.95rem;
            }

            .solicitud-fecha {
                font-size: 0.75rem;
                color: var(--cl-gris1);
            }
        }

        .solicitud-body {
            p {
                margin: 0 0 0.5rem 0;
                font-size: 0.85rem;
                color: var(--cl-gris1);
            }

            small {
                font-size: 0.75rem;
                color: var(--cl-pri1);
            }
        }
    }

    /* Detalle del documento */
    .contenedor-detalle {
        flex: 1;
        overflow-y: auto;
        padding: 0.75rem;
        background-color: white;
        border: 1px solid var(--cl-gris3);
        border-radius: 6px;

        .documento-header {
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--cl-gris3);

            h3 {
                margin: 0 0 0.5rem 0;
                font-size: 1.1rem;
                color: var(--cl-pri1);
            }

            p {
                margin: 0 0 0.25rem 0;
                font-size: 0.9rem;
                color: var(--aj-ink, #1B2735);
            }

            small {
                font-size: 0.75rem;
                color: var(--cl-gris1);
            }
        }

        .documento-contenido {
            font-size: 0.9rem;
            line-height: 1.6;
        }
    }

    /* Canvas de firma */
    .contenedor-canvas {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;

        .instruccion {
            margin: 0;
            font-size: 0.85rem;
            color: var(--cl-gris1);
            text-align: center;
        }

        #firmar-canvas-contenedor {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem;
        }

        canvas {
            touch-action: none;
            user-select: none;
        }
    }

    /* Botones de acción */
    .botones-accion {
        display: flex;
        gap: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--cl-gris3);
        justify-content: flex-end;

        .btn-secundario {
            background-color: white;
            border: 1px solid var(--cl-gris3);
            color: var(--aj-ink, #1B2735);

            &:hover {
                background-color: var(--cl-gris3);
            }
        }
    }
}











/* ----------------------------------------------------------------------------------- */
/* 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 */
    /* ------------------------------------------------------------------------------- */
}
/* ----------------------------------------------------------------------------------- */

/* ============================================================================
   R3 — Shell de vidrio (2026-11-01)
   Header, pie, login, cambio de contraseña y ventana de app.
   Se añade al final para sobrescribir los bloques base sin editarlos.
   ============================================================================ */

/* --- Lienzo: aurora estática detrás del shell ------------------------------ */
body
{
    background-color: transparent;
}
body::before
{
    content: "";
    position: fixed;
    inset: 0;
    z-index: -101;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 12% -5%, var(--aj-aurora-a, rgba(1, 116, 223, .07)), transparent 60%),
        radial-gradient(ellipse 55% 45% at 88% 8%, var(--aj-aurora-b, rgba(133, 193, 233, .16)), transparent 62%),
        radial-gradient(ellipse 70% 55% at 50% 105%, var(--aj-aurora-c, rgba(214, 234, 248, .45)), transparent 65%),
        var(--aj-canvas, #F4F7FB);
}

body #sub-body
{
    padding: var(--aj-gap, 8px);
    gap: var(--aj-gap, 8px);
}

/* --- Header ---------------------------------------------------------------- */
/* El vidrio va en un pseudo-elemento: si el header tuviera backdrop-filter,
   crearía un contexto de apilamiento y el menú desplegable quedaría por debajo
   del main (se vería, pero los clics caerían en #main-area-trabajo). */
#header-ajwebx
{
    position: relative;
    height: var(--aj-header-h, 44px);
    gap: 8px;
    padding: 0 10px;
    background-color: transparent;
    border: none;
    box-shadow: none;
}
#header-ajwebx::before
{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-color: var(--aj-s1, rgba(255, 255, 255, .72));
    -webkit-backdrop-filter: blur(var(--aj-blur-lg, 20px)) saturate(var(--aj-sat, 140%));
    backdrop-filter:         blur(var(--aj-blur-lg, 20px)) saturate(var(--aj-sat, 140%));
    border: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
    border-radius: var(--aj-r-lg, 14px);
    box-shadow: var(--aj-sh2, 0 8px 24px rgba(2, 32, 71, .08)), var(--aj-edge, inset 0 1px 0 rgba(255, 255, 255, .75));
}
#header-ajwebx > p {font-size: 15px;}
#header-ajwebx .lineaV {height: 22px;}

/* --- Main: alto calculado con tokens (antes 80 px fijos) ------------------- */
main
{
    height: calc(100% - var(--aj-chrome, 98px));
}

/* --- Login / cambio de contraseña ------------------------------------------ */
main #main-app-login,
main #main-app-cambio-contra
{
    height: 100%;
    background-color: rgba(244, 247, 251, .55);
    border-radius: var(--aj-r-lg, 14px);
}

/* El centrado solo aplica cuando la ventana está visible (respeta display="off") */
main #main-app-login:not([display="off"]),
main #main-app-cambio-contra:not([display="off"])
{
    display: flex;
    align-items: center;
    justify-content: center;
}

main #main-app-login .mini-app,
main #main-app-cambio-contra .mini-app
{
    position: relative;
    display: block;
    width: 360px;
    max-width: calc(100vw - 40px);
    height: auto;
    margin: 0;
    padding: 32px 28px 26px;

    background-color: var(--aj-s3, rgba(255, 255, 255, .9));
    -webkit-backdrop-filter: blur(var(--aj-blur-xl, 24px)) saturate(var(--aj-sat, 140%));
    backdrop-filter:         blur(var(--aj-blur-xl, 24px)) saturate(var(--aj-sat, 140%));
    border: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
    border-radius: var(--aj-r-xl, 18px);
    box-shadow: var(--aj-sh3, 0 24px 64px rgba(2, 32, 71, .18)), var(--aj-edge, inset 0 1px 0 rgba(255, 255, 255, .75));
}

main #main-app-login .mini-app > .btn-null,
main #main-app-cambio-contra .mini-app > .btn-null
{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

main #form-login,
main #form-cambio-contra
{
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

main #form-login .contput-block,
main #form-cambio-contra .contput-block
{
    width: 100%;
    gap: 4px;
}

main #form-login label,
main #form-cambio-contra label
{
    font-size: 12.5px;
    color: var(--aj-ink-2, #4A5A6E);
}

main #form-login .camput,
main #form-cambio-contra .camput
{
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--aj-line-strong, rgba(15, 23, 42, .14));
    border-radius: var(--aj-r-md, 10px);
    background-color: #FFFFFF;
    font-size: 14px;
    color: var(--aj-ink, #1B2735);
}
main #form-login .camput:focus,
main #form-cambio-contra .camput:focus
{
    outline: none;
    border-color: var(--aj-link, #0B4F9E);
    box-shadow: var(--aj-focus, 0 0 0 2px #FFF, 0 0 0 4px #0B4F9E);
    background-color: #FFFFFF;
}

main #form-login .contput-flex,
main #form-cambio-contra .contput-flex {gap: 10px;}

main #form-login .btn,
main #form-cambio-contra .btn
{
    width: 100%;
    height: 44px;
    margin-top: 6px;
    border-radius: var(--aj-r-md, 10px);
    font-size: 14px;
}

main #form-login .titulo-xform,
main #form-cambio-contra .titulo-xform
{
    font-size: 20px;
    color: var(--aj-ink, #1B2735);
    padding-bottom: 4px;
}

/* --- Ventana de app -------------------------------------------------------- */
.fondo-app
{
    padding: var(--aj-appbar-h, 52px) 0 0 0;
    background-color: #FBFDFF;
    border: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
    border-radius: var(--aj-r-lg, 14px);
    box-shadow: var(--aj-sh2, 0 8px 24px rgba(2, 32, 71, .08));
    overflow: hidden;
}

.titulo-app
{
    top: 15px;
    left: 16px;
    max-width: calc(100% - 150px);
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-minimizar {top: 8px; right: 54px;}

.fondo-app > .uAbsoluteTR10 {top: 8px; right: 14px;}

/* Botones de la barra de la app: iconos fantasma en vez de cuadros azules */
.fondo-app .btn-null1
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: transparent;
    border-radius: var(--aj-r-pill, 999px);
    transition: background-color var(--aj-t1, 120ms) var(--aj-ease, ease);
}
.fondo-app .btn-null1 svg
{
    width: 20px;
    height: 20px;
    fill: var(--aj-ink-2, #4A5A6E);
}
.fondo-app .btn-null1:hover {background-color: rgba(15, 23, 42, .06);}
.fondo-app .btn-null1:hover svg {fill: var(--aj-ink, #1B2735);}

.cont-app-iframe
{
    top: var(--aj-appbar-h, 52px);
    left: 0;
    width: 100%;
    height: calc(100% - var(--aj-appbar-h, 52px));
    border-top: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
    border-radius: 0 0 var(--aj-r-lg, 14px) var(--aj-r-lg, 14px);
}

/* --- Pie ------------------------------------------------------------------- */
footer
{
    height: var(--aj-footer-h, 38px);
    padding: 0 10px;
    gap: 8px;

    background-color: var(--aj-s1, rgba(255, 255, 255, .72));
    -webkit-backdrop-filter: blur(var(--aj-blur-lg, 20px)) saturate(var(--aj-sat, 140%));
    backdrop-filter:         blur(var(--aj-blur-lg, 20px)) saturate(var(--aj-sat, 140%));
    border: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
    border-radius: var(--aj-r-lg, 14px);
    box-shadow: var(--aj-sh2, 0 8px 24px rgba(2, 32, 71, .08)), var(--aj-edge, inset 0 1px 0 rgba(255, 255, 255, .75));
}

footer > p:nth-of-type(1) {min-width: 84px; font-size: 12.5px;}

footer > .version-plataforma {background-color: transparent;}

#lista-apps-en-uso
{
    top: 7px;
    left: 108px;
    width: calc(100% - 156px);
}


/* ============================================================================
   R5 — z-index de las capas del shell (antes en style inline del HTML)
   ============================================================================ */
#main-app-login {z-index: 99000000;}
#main-app-cambio-contra,
#main-app-notiusuario {z-index: 98999900;}
#main-app-menu {z-index: 98500000;}