/* =========================================================
   JOGO DINÂMICO FGV
   CSS PRINCIPAL
   PARTE 1/5
========================================================= */


/* =========================
   RESET
========================= */

* {

    margin:0;

    padding:0;

    box-sizing:border-box;

    font-family:
    'Segoe UI',
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;

}



:root {

    --bg-dark:#0f172a;

    --bg-card:#1e293b;

    --bg-hover:#334155;

    --primary:#2563eb;

    --primary-hover:#1d4ed8;

    --success:#16a34a;

    --danger:#dc2626;

    --warning:#fbbf24;

    --text:#f8fafc;

    --muted:#94a3b8;

    --border:#334155;

}



/* =========================
   BASE
========================= */


html,
body {

    width:100%;

    height:100%;

}



body {

    background:var(--bg-dark);

    color:var(--text);

    overflow:hidden;

}





/* =========================
   TELAS
========================= */


.screen {

    display:none;

    width:100%;

    height:100vh;

    padding:20px;

}



.screen.active {

    display:flex;

    flex-direction:column;

}




/* =========================
   TITULOS
========================= */


.title {

    text-align:center;

    margin-bottom:20px;

}



.subtitle {

    text-align:center;

    color:var(--muted);

}





/* =========================================================
   LAYOUT ADMIN
========================================================= */


.admin-layout {


    display:flex;

    width:100%;

    height:100vh;

    overflow:hidden;


}




/* =========================
   SIDEBAR ADMIN
========================= */


.admin-sidebar {


    width:260px;

    height:100vh;

    flex-shrink:0;

    background:#020617;

    padding:20px;

    overflow-y:auto;


}



.admin-sidebar h2 {


    text-align:center;

    margin-bottom:30px;

}




.admin-menu-btn {


    width:100%;

    padding:14px;

    margin-bottom:12px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    background:#334155;

    color:white;

    font-size:16px;

    transition:.2s;


}



.admin-menu-btn:hover {


    background:#475569;


}



.admin-menu-btn.ativo {


    background:var(--primary);


}





/* =========================================================
   CONTEÚDO ADMIN
========================================================= */


.admin-conteudo {


    flex:1;

    min-height:0;

    height:100vh;

    padding:20px;

    background:#111827;

    display:flex;

    flex-direction:column;

    overflow-y:auto;

    overflow-x:hidden;


}




/* Painéis internos */

.painel-questoes {


    flex:1;

    display:flex;

    flex-direction:column;

    min-height:0;


}




.admin-cabecalho {


    flex-shrink:0;


}




.admin-info {


    flex-shrink:0;

    margin-bottom:10px;


}



/* Área que segura tabela */

.admin-area-conteudo {


    flex:1;

    min-height:0;

    display:flex;

    flex-direction:column;


}

/* =========================================================
   DASHBOARD ADMIN
========================================================= */


/* CONTAINER DASHBOARD */
#painel-dashboard{

    background:#1f2937;

    border-radius:16px;

    padding:25px;

    overflow:visible;

}




.dashboard-topo{

    background:#1f2937;

    padding:10px 0 20px;

}





/* =========================
   CARDS DASHBOARD
========================= */


.dashboard-cards {


    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));


    gap:20px;

    margin-top:25px;


}





.dashboard-card {


    background:#1e293b;

    border:1px solid #334155;

    border-radius:18px;

    padding:25px;


    display:flex;

    align-items:center;

    gap:20px;


    box-shadow:

    0 10px 30px rgba(0,0,0,.25);


}

.dashboard-card-tabela {

    display:block;

}



.dashboard-card span {


    font-size:40px;


}



.dashboard-card h3 {


    color:#cbd5e1;

    margin-bottom:5px;


}



.dashboard-card strong {


    font-size:35px;

    color:#38bdf8;


}





/* =========================
   TABELA DASHBOARD
========================= */




.dashboard-card-tabela h3 {


    margin-bottom:18px;


}





.dashboard-tabela-wrapper{


    overflow-x:auto;


}





.dashboard-tabela {


    width:100%;

    border-collapse:collapse;


}




.dashboard-tabela thead{

    background:#020617;

    position:sticky;
    

    top:0;

    z-index:5;

    box-shadow: 4px 8px rgba(34, 56, 158, 0.8);

}




.dashboard-tabela th {


    padding:14px;

    text-align:left;

    font-weight:600;

    position:sticky;

    top:0;

    background:#1e293b;

    z-index:5;


}




.dashboard-tabela td {


    padding:12px 14px;

    border-bottom:

    1px solid rgba(255,255,255,.08);


}




.dashboard-tabela tbody tr:hover {


    background:#334155;


}





.dashboard-loading {


    text-align:center;

    padding:25px;

    opacity:.7;


}





/* =========================
   BOTÕES GERAIS
========================= */

.btn-proxima{

    display:none;

    width:auto;

    padding:12px 25px;

    margin-top:0;

    background:#2563eb;

}


.btn-proxima.show{

    display:inline-block;

    animation:aparecerBotao .3s ease;

}



@keyframes aparecerBotao{

    from{

        opacity:0;

        transform:translateY(10px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}

.btn-primary {


    background:var(--primary);

    color:white;

    border:none;

    padding:14px 25px;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;

    transition:.2s;


}



.btn-primary:hover {


    background:var(--primary-hover);


}





.btn-voltar {


    background:transparent;

    color:#cbd5e1;

    border:

    1px solid #64748b;


    padding:12px 20px;

    border-radius:10px;

    cursor:pointer;


}



.btn-voltar:hover {


    background:#334155;

    color:white;


}

/* =========================================================
   BANCO DE QUESTÕES
========================================================= */


/* =========================
   FILTROS
========================= */


.admin-filtros {


    flex-shrink:0;


    display:flex;

    align-items:center;

    gap:12px;


    flex-wrap:wrap;


    background:#1e293b;


    padding:20px;


    border-radius:12px;


    margin:20px 0;



}



.admin-filtros input {


    flex:1;


    min-width:320px;


}



.admin-filtros select {


    min-width:220px;


}




.admin-filtros input,
.admin-filtros select {


    padding:12px;


    border-radius:8px;


    border:

    1px solid #334155;


    background:#0f172a;


    color:white;


    font-size:15px;


}



.admin-filtros button {


    padding:12px 22px;


    border:none;


    border-radius:8px;


    background:#2563eb;


    color:white;


    cursor:pointer;


}







/* =========================
   FORMULÁRIO EDITAR QUESTÃO
========================= */


.form-editar-questao {


    flex-shrink:0;


    background:#1e293b;


    padding:25px;


    border-radius:12px;


    margin-bottom:15px;


}



.form-editar-questao h2 {


    margin-bottom:20px;


}



.form-editar-questao label {


    display:block;


    margin-top:12px;


    margin-bottom:6px;


    color:#cbd5e1;


    font-weight:bold;


}



.form-editar-questao input,
.form-editar-questao select,
.form-editar-questao textarea {


    width:100%;


    padding:12px;


    border-radius:8px;


    border:

    1px solid #475569;


    background:#0f172a;


    color:white;


}



.form-editar-questao textarea {


    resize:vertical;


}




#editar-enunciado {


    line-height:1.6;


    text-align:justify;


}





/* =========================
   ÁREA DA TABELA
========================= */


.admin-tabela-wrapper {


    flex:1;


    min-height:0;


    overflow-y:auto;


    overflow-x:auto;


    background:#1e293b;


    border-radius:12px;


}





/* =========================
   TABELA
========================= */


.admin-tabela {


    width:100%;


    border-collapse:collapse;


}





.admin-tabela thead th {


    position:sticky;


    top:0;


    z-index:10;


    background:#020617;


}





.admin-tabela th {


    padding:14px;


    color:white;


    text-align:left;


    font-weight:600;


}





.admin-tabela td {


    padding:14px;


    color:#e2e8f0;


    border-bottom:

    1px solid #334155;


    vertical-align:top;


}



.admin-tabela tbody tr:hover {


    background:#334155;


}





/* COLUNA ENUNCIADO */


.admin-tabela td:nth-child(5) {


    max-width:450px;


    text-align:justify;


    line-height:1.5;


}





/* =========================
   BOTÕES DA TABELA
========================= */


.admin-tabela button {


    border:none;


    border-radius:6px;


    padding:8px 12px;


    cursor:pointer;


    margin-right:5px;


    font-size:14px;


}





.admin-tabela button:first-child {


    background:#2563eb;


    color:white;


}



.admin-tabela button:last-child {


    background:#dc2626;


    color:white;


}





/* =========================
   PAGINAÇÃO
========================= */


.admin-paginacao {


    flex-shrink:0;


    display:flex;


    justify-content:center;


    align-items:center;


    gap:8px;


    padding:15px 0;


}


#paginacao-dashboard{

    width:100%;

    margin-top:15px;

    display:flex;

    justify-content:center;

    gap:8px;

    clear:both;

}


.admin-paginacao button {


    padding:8px 14px;


    border:none;


    border-radius:8px;


    background:#334155;


    color:white;


    cursor:pointer;


}




.admin-paginacao button:hover {


    background:#475569;


}




.admin-paginacao button.ativo {


    background:#2563eb;


    font-weight:bold;


}




.admin-paginacao button:disabled {


    opacity:.45;


    cursor:not-allowed;


}

/* =========================================================
   GERADOR IA
========================================================= */


.ia-formulario {


    width:100%;


    max-width:650px;


    margin:20px auto;


    padding:25px;


    background:#1e293b;


    border-radius:16px;


    display:flex;


    flex-direction:column;


    gap:12px;


}




#screen-admin label {


    color:#cbd5e1;


    font-size:14px;


    font-weight:bold;


    margin-top:8px;


}




#screen-admin input,
#screen-admin select,
#screen-admin textarea {


    width:100%;


    padding:12px;


    border-radius:8px;


    border:

    1px solid #475569;


    background:#0f172a;


    color:white;


}




#screen-admin textarea {


    min-height:160px;


    resize:vertical;


}





#screen-admin input:focus,
#screen-admin select:focus,
#screen-admin textarea:focus {


    outline:none;


    border-color:#38bdf8;


}







/* =========================================================
   RESULTADO IA
========================================================= */


.questao-ia {


    background:#1e293b;


    padding:20px;


    border-radius:12px;


    margin-top:15px;


}




.questao-ia p {


    line-height:1.6;


    text-align:justify;


}




.alternativas-ia {


    margin-top:15px;


}



.alternativa-ia {


    margin-bottom:8px;


    line-height:1.5;


}





.resposta-ia,
.explicacao-ia {


    text-align:justify;


}







/* =========================================================
   LOADING IA
========================================================= */


.ia-loading {


    position:fixed;


    inset:0;


    background:

    rgba(0,0,0,.65);


    display:flex;


    justify-content:center;


    align-items:center;


    z-index:99999;


}




.ia-loading.oculto {


    display:none;


}





.ia-loading-box {


    width:360px;


    background:white;


    color:#111827;


    padding:35px;


    border-radius:16px;


    text-align:center;


    box-shadow:

    0 10px 40px rgba(0,0,0,.4);


}




.ia-spinner {


    font-size:45px;


    margin-bottom:15px;


}





.ia-progress-bar {


    width:100%;


    height:22px;


    background:#e5e7eb;


    border-radius:20px;


    overflow:hidden;


    margin-top:20px;


}




.ia-progress-fill {


    height:100%;


    width:0%;


    background:#2563eb;


    color:white;


    font-size:13px;


    font-weight:bold;


    display:flex;


    align-items:center;


    justify-content:center;


    transition:.4s;


}





.ia-status-log {


    margin-top:15px;


    max-height:140px;


    overflow-y:auto;


    padding:10px;


    border-radius:8px;


    border:

    1px solid #e5e7eb;


    background:#f8fafc;


    color:#1f2937;


    text-align:left;


    font-size:13px;


    line-height:1.5;


}





.ia-status-log div {


    margin-bottom:5px;


}









/* =========================================================
   NOTIFICAÇÕES
========================================================= */


.notificacoes-btn {


    position:relative;


}




.badge-notificacoes {


    position:absolute;


    right:15px;


    top:50%;


    transform:translateY(-50%);



    min-width:22px;


    height:22px;


    border-radius:50%;


    background:#ef4444;


    color:white;


    font-size:12px;


    font-weight:bold;


    display:flex;


    align-items:center;


    justify-content:center;


    padding:0 6px;


}







.painel-notificacoes {


    position:fixed;


    top:20px;


    right:-430px;


    width:400px;


    height:

    calc(100vh - 40px);



    background:#1e293b;


    border-radius:16px 0 0 16px;


    box-shadow:

    -8px 0 30px rgba(0,0,0,.45);


    transition:.35s;


    z-index:9999;


    display:flex;


    flex-direction:column;


}





.painel-notificacoes.aberto {


    right:0;


}





.notificacoes-topo {


    padding:18px;


    display:flex;


    justify-content:space-between;


    align-items:center;


    border-bottom:

    1px solid #334155;


}





#lista-notificacoes {


    flex:1;


    overflow-y:auto;


    padding:15px;


}






.notificacao {


    padding:14px;


    margin-bottom:12px;


    border-radius:10px;


    background:#0f172a;


    border-left:

    4px solid #38bdf8;


}





.notificacao h4 {


    margin-bottom:8px;


}




.notificacao p {


    color:#cbd5e1;


    font-size:14px;


    margin-bottom:8px;


}




.notificacao small {


    color:#94a3b8;


}

/* =========================================================
   PERFIL DO JOGADOR
========================================================= */


.area-fixa {


    flex-shrink:0;


    position:sticky;


    top:0;


    z-index:1000;


    background:#0f172a;


    padding-bottom:15px;


}




.profile-panel {


    background:#1e293b;


    border:

    1px solid rgba(255,255,255,.1);


    border-radius:15px;


    padding:15px 25px;


    display:flex;


    justify-content:space-between;


    align-items:center;


    gap:15px;


    flex-wrap:wrap;


}





.profile-stats {


    display:flex;


    gap:20px;


    flex-wrap:wrap;


}





.stat-item {


    display:flex;


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

    text-align:center;


}



.stat-label {


    color:#94a3b8;


    font-size:.8rem;


}



.stat-value {


    color:#fbbf24;


    font-size:1.1rem;


    font-weight:bold;


}







/* =========================================================
   RANKING
========================================================= */


#ranking-wrapper {


    background:#111827;


    padding:15px;


    border-radius:15px;


    max-height:40vh;


    overflow-y:auto;


}





#ranking-wrapper:empty {


    display:none;


}






/* =========================================================
   MAPA DE MÓDULOS
========================================================= */


.painel-modulos {


    flex-shrink:0;


    position:sticky;


    top:0;


    background:#0f172a;


    z-index:500;


}





.tabs-modulos {


    display:flex;


    justify-content:center;


    gap:12px;


    flex-wrap:wrap;


}




.tab-modulo {


    border:none;


    border-radius:12px;


    padding:14px 24px;


    background:#1e293b;


    color:white;


    cursor:pointer;


    font-weight:bold;


}





.tab-modulo.ativo {


    background:#2563eb;


}





.modulo-container {


    background:rgba(15,23,42,.4);


    padding:20px;


    border-radius:15px;


    


    margin-bottom:30px;


}




.modulo-title {


    color:#60a5fa;


    margin-bottom:15px;


}





/* =========================================================
   CARDS DISCIPLINAS
========================================================= */


.map-grid {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));


    gap:20px;


}




.card-disciplina {


    background:#1e293b;


    border:

    1px solid rgba(255,255,255,.1);


    border-radius:12px;


    padding:20px;


    display:flex;


    align-items:center;


    gap:15px;


    cursor:pointer;


    transition:.25s;


}




.card-disciplina:hover {


    background:#334155;


    transform:translateY(-3px);


}




.card-icon {


    font-size:2rem;


    background:#0f172a;


    padding:10px;


    border-radius:10px;


}




.card-content {


    flex:1;


}





.card-title {


    font-weight:bold;


}




.card-info {


    color:#94a3b8;


    font-size:.85rem;


}





.card-stats {


    margin-top:15px;


    padding-top:10px;


    border-top:

    1px dashed #475569;


    display:flex;


    justify-content:space-between;


    color:#fbbf24;


}





.btn-reset-disc {


    background:#dc2626;


    border:none;


    color:white;


    padding:4px 8px;


    border-radius:5px;


    cursor:pointer;


}







/* =========================================================
   QUIZ
========================================================= */


.question-container {

    background:rgba(30,41,59,.75);

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

    border-radius:15px;

    padding:30px;

    margin-bottom:20px;

    backdrop-filter:blur(8px);

    box-shadow:
    0 10px 25px rgba(0,0,0,.35);

}

.btn-alternativa .letra {

    font-weight:bold;

    margin-right:12px;

    color:#60a5fa;

}

/* ==========================================
   CABEÇALHO FIXO DO QUIZ
========================================== */

.quiz-header{

    position:sticky;

    top:0;

    z-index:100;

    background:#0f172a;

    padding:15px 20px;

    margin-bottom:20px;

    border-radius:15px;

    box-shadow:0 8px 20px rgba(0,0,0,.35);

}

.progress-bar{

    position:sticky;

    top:110px;   /* ajuste conforme a altura do cabeçalho */

    z-index:99;

    background:#334155;

    margin-bottom:25px;

}

/* BLOCO DO FEEDBACK + BOTÃO */

.feedback-container{

    margin-top:20px;

    margin-bottom:20px;

    padding:18px 20px;

    border-radius:12px;

    border:1px solid transparent;

    line-height:1.6;

}

.feedback-container.show{

    display:block;

}

.feedback-container.success{

    background:rgba(22,163,74,.12);

    border-color:#22c55e;

}

.feedback-container.error{

    background:rgba(220,38,38,.12);

    border-color:#ef4444;

}

.feedback-title{

    font-size:18px;

    font-weight:700;

    margin-bottom:10px;

}


.enunciado {

    font-size:1.10rem;

    line-height:1.65;

    margin-bottom:30px;

    text-align:justify;

    text-justify:inter-word;

    white-space:pre-line;
    hyphens:auto;

}





.alternativas {


    display:flex;


    flex-direction:column;


    gap:12px;


}





.btn-alternativa {

    background:rgba(51,65,85,.55);

    color:#f8fafc;

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

    padding:15px 20px;

    border-radius:10px;

    cursor:pointer;

    text-align:left;

    line-height:1.5;

    transition:.20s;

    display:flex;

    align-items:flex-start;

}





.btn-alternativa:hover:not(:disabled){

    background:#475569;

    border-color:#3b82f6;

    transform:translateY(-2px);

}





.btn-alternativa.correct {


    background:#166534;


    border-color:#22c55e;


}




.btn-alternativa.incorrect {


    background:#991b1b;


    border-color:#ef4444;


}







/* =========================================================
   BOTÕES AÇÕES
========================================================= */


.acoes-rodape {


    display:flex;


    justify-content:center;


    gap:15px;


    flex-wrap:wrap;


}





.btn-action{

    display:inline-block;

    width:auto;

    margin-top:0;

    padding:12px 25px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

}

.btn-action:hover{

    background:#1d4ed8;

}




.btn-reset-global {


    background:#dc2626;


    color:white;


    border:none;


    padding:10px 15px;


    border-radius:8px;


    cursor:pointer;


}








/* =========================================================
   RESPONSIVO
========================================================= */


@media(max-width:900px){


    body {

        overflow:auto;

    }



    .admin-layout {


        flex-direction:column;


    }




    .admin-sidebar {


        width:100%;


        height:auto;


    }





    .admin-conteudo {


        height:auto;


        min-height:100vh;


    }




}





@media(max-width:600px){


    .profile-panel {


        flex-direction:column;


        align-items:stretch;


    }



    .admin-filtros {


        flex-direction:column;


    }



    .admin-filtros input,
    .admin-filtros select {


        width:100%;


    }




    .question-container {


        padding:20px;


    }


}

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

.login-admin-box {

    width:420px;

    max-width:90%;

    margin:40px auto;

    background:#1e293b;

    border:1px solid #334155;

    border-radius:18px;

    padding:35px;

    display:flex;

    flex-direction:column;

    gap:18px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.45);

}

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

.login-admin-box input {

    width:100%;

    padding:14px;

    border-radius:10px;

    border:1px solid #475569;

    background:#0f172a;

    color:white;

}

/* CENTRALIZAR BOX LOGIN NA TELA */

/* =====================================
   CENTRALIZAR TELA DE LOGIN
===================================== */

#screen-start {

    justify-content:center;

}


#screen-start .hero {

    margin-bottom:20px;

}