/* =====================================================
   MODAL DE INACTIVIDAD
===================================================== */

.modal-inactividad-sesion{

    width: min(92vw, 470px);
    padding: 0;

    color: var(--bio-texto-claro);

    background:
        linear-gradient(
            145deg,
            var(--bio-fondo-principal),
            var(--bio-fondo-secundario)
        );

    border:
        1px solid rgba(148, 163, 184, 0.22);

    border-radius: 18px;

    box-shadow:
        0 28px 80px rgba(15, 23, 42, 0.42);

}


/* Oscurece el resto de la aplicación */
.modal-inactividad-sesion::backdrop{

    background:
        rgba(15, 23, 42, 0.68);

    backdrop-filter:
        blur(4px);

}


/* =====================================================
   CONTENIDO
===================================================== */

.contenido-inactividad-sesion{

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 32px;

    text-align: center;

}


.icono-inactividad-sesion{

    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;
    margin-bottom: 16px;

    color: #ffffff;

    background:
        rgba(var(--bio-acento-rgb), 0.18);

    border:
        1px solid rgba(var(--bio-acento-rgb), 0.55);

    border-radius: 50%;

    font-size: 1.45rem;
    font-weight: 800;

}


.etiqueta-inactividad-sesion{

    margin: 0 0 8px;

    color: var(--bio-acento);

    font-size: 0.78rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.08em;

}


.contenido-inactividad-sesion h2{

    margin: 0 0 12px;

    color: #ffffff;

    font-size: 1.55rem;
    line-height: 1.2;

}


#descripcion-inactividad-sesion{

    max-width: 360px;
    margin: 0;

    color: var(--bio-texto-suave);

    line-height: 1.55;

}


/* =====================================================
   CUENTA REGRESIVA
===================================================== */

.tiempo-inactividad-sesion{

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    margin: 24px 0;
    padding: 14px 16px;

    color: #cbd5e1;

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid rgba(148, 163, 184, 0.16);

    border-radius: 12px;

}


#contador-inactividad-sesion{

    min-width: 46px;

    color: #ffffff;

    font-size: 1.12rem;

    font-variant-numeric:
        tabular-nums;

}


/* =====================================================
   BOTONES
===================================================== */

.acciones-inactividad-sesion{

    display: flex;
    justify-content: flex-end;
    gap: 12px;

    width: 100%;

}


.acciones-inactividad-sesion button{

    min-height: 42px;
    padding: 10px 18px;

    border-radius: 10px;

    font: inherit;
    font-weight: 700;

    cursor: pointer;

}


.btn-cerrar-inactividad{

    color: #fecaca;

    background:
        rgba(220, 38, 38, 0.10);

    border:
        1px solid rgba(248, 113, 113, 0.30);

}


.btn-continuar-inactividad{

    color: #ffffff;

    background:
        var(--bio-acento);

    border:
        1px solid var(--bio-acento);

}


.acciones-inactividad-sesion button:focus-visible{

    outline:
        2px solid #ffffff;

    outline-offset: 3px;

}


/* =====================================================
   PANTALLAS PEQUEÑAS
===================================================== */

@media (max-width: 520px){

    .contenido-inactividad-sesion{

        padding: 26px 22px;

    }


    .acciones-inactividad-sesion{

        flex-direction: column-reverse;

    }


    .acciones-inactividad-sesion button{

        width: 100%;

    }

}