/*
=============================================================
 APROVAMENTORIA — MEU CONCURSO / CENTRAL EMPTY STATE V7
=============================================================
*/


/* ==========================================================
   FUNDO DO MÓDULO
========================================================== */

body:has(.qti-concurso-wrap) main {
    min-height: calc(100vh - 150px);

    padding:
        34px 0 74px;

    background:
        radial-gradient(
            circle at 16% -8%,
            rgba(49,84,125,.15),
            transparent 34%
        ),
        radial-gradient(
            circle at 95% 8%,
            rgba(36,189,183,.08),
            transparent 27%
        ),
        #edf2f7 !important;
}


/* ==========================================================
   CONTAINER
========================================================== */

.qti-concurso-wrap {
    width:
        min(1180px, calc(100% - 34px)) !important;

    margin:
        0 auto !important;
}


/* ==========================================================
   HERO
========================================================== */

.qti-concurso-topo {
    position:
        relative;

    overflow:
        hidden;

    align-items:
        center !important;

    margin:
        0 0 18px !important;

    padding:
        27px 29px;

    border:
        1px solid rgba(115,221,215,.14);

    border-radius:
        21px;

    background:
        radial-gradient(
            circle at 92% 4%,
            rgba(36,189,183,.20),
            transparent 34%
        ),
        radial-gradient(
            circle at 70% 140%,
            rgba(49,84,125,.62),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #111d31,
            #203556
        );

    box-shadow:
        0 18px 46px rgba(23,36,59,.14);
}


.qti-concurso-kicker {
    padding:
        6px 10px !important;

    border:
        1px solid rgba(115,221,215,.20);

    background:
        rgba(36,189,183,.10) !important;

    color:
        #73ddd7 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .075em !important;
}


.qti-concurso-topo h1 {
    margin:
        10px 0 5px !important;

    color:
        #ffffff !important;

    font-size:
        clamp(1.75rem, 3.7vw, 2.45rem) !important;

    font-weight:
        900;

    letter-spacing:
        -.035em;
}


.qti-concurso-topo p {
    margin:
        0 !important;

    color:
        #c8d5e3 !important;

    opacity:
        1 !important;

    line-height:
        1.55;
}


/* ==========================================================
   BOTÃO PRINCIPAL
========================================================== */

.qti-btn-primary {
    min-height:
        44px !important;

    padding:
        11px 17px !important;

    border:
        1px solid rgba(115,221,215,.22) !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            135deg,
            #24bdb7,
            #73ddd7
        ) !important;

    color:
        #111d31 !important;

    font-weight:
        900 !important;

    box-shadow:
        0 8px 22px rgba(36,189,183,.16) !important;

    transition:
        transform .15s ease,
        filter .15s ease;
}


.qti-btn-primary:hover {
    transform:
        translateY(-1px);

    filter:
        brightness(1.04);
}


/* ==========================================================
   KPIs
========================================================== */

.qti-resumo-grid {
    gap:
        12px !important;

    margin:
        0 0 16px !important;
}


.qti-card.qti-resumo {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        112px;

    padding:
        19px 21px !important;

    border:
        1px solid rgba(115,221,215,.11) !important;

    border-radius:
        17px !important;

    background:
        linear-gradient(
            145deg,
            #17243b,
            #203556
        ) !important;

    box-shadow:
        0 11px 28px rgba(23,36,59,.10) !important;
}


.qti-card.qti-resumo::after {
    content:
        "";

    position:
        absolute;

    width:
        100px;

    height:
        100px;

    top:
        -50px;

    right:
        -30px;

    border-radius:
        50%;

    background:
        rgba(36,189,183,.08);
}


.qti-resumo small {
    position:
        relative;

    z-index:
        1;

    margin-bottom:
        8px !important;

    color:
        #9eb2c6 !important;

    opacity:
        1 !important;

    font-weight:
        700;
}


.qti-resumo strong {
    position:
        relative;

    z-index:
        1;

    color:
        #73ddd7 !important;

    font-size:
        1.8rem !important;

    line-height:
        1;
}


/* ==========================================================
   CARD DE ESTADO VAZIO
========================================================== */

.qti-card.qti-vazio {
    position:
        relative;

    min-height:
        315px;

    padding:
        54px 28px !important;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border:
        1px solid rgba(115,221,215,.13) !important;

    border-radius:
        21px !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(36,189,183,.11),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #17243b,
            #203556
        ) !important;

    box-shadow:
        0 15px 38px rgba(23,36,59,.12) !important;
}


.qti-card.qti-vazio::before {
    content:
        "AI";

    display:
        grid;

    width:
        48px;

    height:
        48px;

    margin-bottom:
        18px;

    place-items:
        center;

    border:
        1px solid rgba(115,221,215,.20);

    border-radius:
        14px;

    background:
        rgba(36,189,183,.10);

    color:
        #73ddd7;

    font-size:
        .78rem;

    font-weight:
        950;

    letter-spacing:
        .06em;
}


.qti-vazio h2 {
    margin:
        0 0 9px !important;

    color:
        #ffffff !important;

    font-size:
        1.32rem;

    font-weight:
        900;
}


.qti-vazio p {
    max-width:
        590px !important;

    margin:
        0 auto 22px !important;

    color:
        #c8d5e3 !important;

    opacity:
        1 !important;

    line-height:
        1.62;
}


/* ==========================================================
   CARDS DE CONCURSOS JÁ CADASTRADOS
========================================================== */

.qti-concurso-card {
    padding:
        22px !important;

    border:
        1px solid rgba(115,221,215,.11) !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            145deg,
            #17243b,
            #203556
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 12px 30px rgba(23,36,59,.10) !important;
}


.qti-concurso-card h2,
.qti-concurso-card strong {
    color:
        #ffffff !important;
}


.qti-concurso-card
:is(p,span,small) {
    color:
        #c8d5e3 !important;

    opacity:
        1 !important;
}


.qti-status {
    border:
        1px solid rgba(115,221,215,.17);

    background:
        rgba(36,189,183,.10) !important;

    color:
        #73ddd7 !important;
}


.qti-progresso-linha {
    background:
        rgba(255,255,255,.09) !important;
}


.qti-progresso-linha > div {
    background:
        linear-gradient(
            90deg,
            #24bdb7,
            #73ddd7
        ) !important;
}


/* ==========================================================
   CENTRAL REAL - QUANDO HOUVER CONCURSO
========================================================== */

.qti-central-head {
    padding:
        26px 28px !important;

    margin-bottom:
        17px !important;

    border:
        1px solid rgba(115,221,215,.14);

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            #111d31,
            #203556
        ) !important;

    color:
        #ffffff !important;
}


.qti-central-head h1 {
    color:
        #ffffff !important;
}


.qti-central-head
:is(p,span,small) {
    color:
        #c8d5e3 !important;

    opacity:
        1 !important;
}


.qti-central-action,
.qti-central-card,
.qti-central-stat {

    border:
        1px solid rgba(115,221,215,.11) !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            145deg,
            #17243b,
            #203556
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 12px 30px rgba(23,36,59,.10) !important;
}


.qti-central-action
:is(h1,h2,h3,strong),

.qti-central-card
:is(h1,h2,h3,strong),

.qti-central-stat
:is(h1,h2,h3,strong) {

    color:
        #ffffff !important;
}


.qti-central-action
:is(p,span,small,li),

.qti-central-card
:is(p,span,small,li),

.qti-central-stat
:is(p,span,small,li) {

    color:
        #c8d5e3 !important;

    opacity:
        1 !important;
}


.qti-central-stat strong {
    color:
        #73ddd7 !important;
}


.qti-central-concurso {
    background:
        rgba(255,255,255,.055) !important;

    border:
        1px solid rgba(255,255,255,.07);
}


.qti-central-item {
    border-color:
        rgba(255,255,255,.08) !important;
}


/* ==========================================================
   MENU DESKTOP
   NÃO REMOVE NENHUM ITEM
========================================================== */

@media (min-width: 1001px) {

    .topo .topo-conteudo {
        width:
            min(1580px, calc(100% - 28px)) !important;

        max-width:
            none !important;

        gap:
            14px !important;
    }


    .topo .logo {
        flex:
            0 0 auto;

        min-width:
            0 !important;
    }


    .topo .qti-brand-uploaded-logo {
        width:
            auto !important;

        height:
            58px !important;

        max-height:
            58px !important;

        max-width:
            245px !important;
    }


    .topo .menu {
        flex:
            1 1 auto;

        min-width:
            0;

        display:
            flex;

        align-items:
            center;

        justify-content:
            flex-end;

        gap:
            2px !important;

        white-space:
            nowrap;
    }


    .topo .menu > a {
        flex:
            0 0 auto;

        padding:
            8px 7px !important;

        font-size:
            .79rem !important;

        line-height:
            1.14 !important;
    }


    .topo .qti-nav-meu-concurso {
        gap:
            4px !important;
    }


    .topo .qti-nav-ai {
        padding:
            2px 5px !important;

        font-size:
            .58rem !important;
    }


    .topo .menu-usuario {
        flex:
            0 1 190px;

        min-width:
            160px;

        max-width:
            190px;
    }


    .topo .menu-usuario-resumo {
        padding:
            7px 9px !important;

        gap:
            8px !important;
    }


    .topo .menu-usuario-identificacao {
        min-width:
            0;

        overflow:
            hidden;
    }


    .topo .menu-usuario-identificacao strong {
        display:
            block;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

        font-size:
            .72rem !important;
    }
}


/*
  Em telas onde 11 itens realmente não cabem,
  passamos mais cedo para o menu móvel em vez
  de deixar a navegação ultrapassar a viewport.
*/

@media (min-width: 1001px) and (max-width: 1240px) {

    .topo .qti-brand-uploaded-logo {
        max-width:
            195px !important;

        height:
            52px !important;
    }


    .topo .menu > a {
        padding:
            7px 5px !important;

        font-size:
            .72rem !important;
    }


    .topo .menu-usuario {
        max-width:
            155px;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 760px) {

    body:has(.qti-concurso-wrap) main {
        padding:
            18px 0 48px;
    }


    .qti-concurso-wrap {
        width:
            calc(100% - 20px) !important;
    }


    .qti-concurso-topo {
        padding:
            20px 18px;

        border-radius:
            17px;
    }


    .qti-concurso-topo > a {
        width:
            100%;
    }


    .qti-resumo-grid {
        grid-template-columns:
            1fr 1fr !important;

        gap:
            8px !important;
    }


    .qti-card.qti-resumo {
        min-height:
            96px;

        padding:
            15px !important;

        border-radius:
            14px !important;
    }


    .qti-resumo strong {
        font-size:
            1.5rem !important;
    }


    .qti-card.qti-vazio {
        min-height:
            290px;

        padding:
            38px 17px !important;

        border-radius:
            17px !important;
    }


    .qti-card.qti-vazio .qti-btn-primary {
        width:
            100%;
    }
}