:root {
    --vermelho: #d71920;
    --vermelho-escuro: #9d1015;
    --preto: #09090b;
    --branco: #ffffff;
    --cinza: #eeeeF2;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: #19191e;
    background:
        radial-gradient(circle at 90% 5%, rgba(215,25,32,.13), transparent 28%),
        #eeeeF2;
}

a {
    color: inherit;
}

.app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 265px 1fr;
}

.sidebar {
    min-height: 100vh;
    padding: 28px 20px;
    color: var(--branco);
    background:
        linear-gradient(160deg, rgba(215,25,32,.25), transparent 38%),
        var(--preto);
    border-right: 5px solid var(--vermelho);
}

.logo {
    width: 90px;
    height: 90px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border: 5px solid var(--branco);
    color: var(--branco);
    background:
        linear-gradient(
            135deg,
            var(--vermelho) 0 38%,
            var(--branco) 38% 62%,
            var(--preto) 62%
        );
    font-size: 22px;
    font-weight: 900;
    clip-path: polygon(50% 0, 96% 18%, 82% 78%, 50% 100%, 18% 78%, 4% 18%);
}

.sidebar strong,
.sidebar small {
    display: block;
}

.sidebar small {
    margin-top: 5px;
    color: #bdbdc5;
}

.sidebar nav {
    display: grid;
    gap: 9px;
    margin-top: 40px;
}

.sidebar nav a {
    padding: 14px;
    border-radius: 11px;
    color: #d7d7de;
    text-decoration: none;
    font-weight: 700;
}

.sidebar nav a:hover,
.sidebar nav a.ativo {
    color: var(--branco);
    background: var(--vermelho);
}

.app > main {
    padding: 42px;
}


.etiqueta {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--branco);
    background: var(--vermelho);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .11em;
}

.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.botao {
    display: inline-block;
    padding: 13px 18px;
    border-radius: 11px;
    color: var(--branco);
    background: var(--vermelho);
    text-decoration: none;
    font-weight: 800;
}

.botao.secundario {
    color: var(--preto);
    background: var(--branco);
}

.grade {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 24px;
}

.grade article {
    padding: 24px;
    border: 1px solid #d9d9df;
    border-radius: 18px;
    background: var(--branco);
}

.grade article > span {
    font-size: 34px;
}

.grade h2 {
    margin-bottom: 8px;
}

.grade p {
    color: #666672;
    line-height: 1.55;
}

.pagina-status {
    display: grid;
    place-items: center;
    padding: 25px;
    background:
        linear-gradient(135deg, #070709, #351014);
}

.status-container {
    width: min(720px, 100%);
    padding: 38px;
    border-radius: 22px;
    background: var(--branco);
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.status-lista {
    display: grid;
    gap: 10px;
    margin: 25px 0;
}

.status-lista div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 15px;
    border-radius: 10px;
    background: #f1f1f4;
}

.status-lista span {
    color: #157848;
    font-weight: 800;
}

@media (max-width: 900px) {
    .grade {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .app {
        display: block;
    }

    .sidebar {
        min-height: auto;
    }

    .app > main {
        padding: 18px;
    }


    .grade {
        grid-template-columns: 1fr;
    }
}

.conteudo-principal {
    padding: 42px;
}

.cabecalho-pagina {
    margin-bottom: 28px;
}

.cabecalho-pagina h1 {
    margin: 12px 0;
    font-size: clamp(38px, 5vw, 62px);
}

.cabecalho-pagina p {
    max-width: 760px;
    color: #62626d;
    font-size: 17px;
    line-height: 1.65;
}

.materias-grade {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.materia-card {
    padding: 26px;
    border: 1px solid #d9d9df;
    border-radius: 20px;
    background: white;
    box-shadow: 0 9px 25px rgba(0,0,0,.06);
}

.materia-icone {
    font-size: 40px;
}

.materia-card h2 {
    margin: 12px 0;
}

.materia-vazia {
    color: #73737e;
}

.lista-materiais {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.material-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 15px;
    padding: 14px;
    border-radius: 12px;
    background: #f1f1f4;
}

.material-item strong,
.material-item small {
    display: block;
}

.material-item small {
    margin-top: 5px;
    color: #696974;
}

.material-acoes {
    display: flex;
    gap: 8px;
}

.material-acoes form {
    margin: 0;
}

.botao.pequeno {
    padding: 8px 11px;
    border: 0;
    font-size: 12px;
    cursor: pointer;
}

.botao.escuro {
    background: #25252b;
}

.formulario-material {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 27px;
    border-radius: 20px;
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.formulario-material label {
    font-weight: 800;
}

.formulario-material input,
.formulario-material select {
    width: 100%;
    margin-top: 8px;
    padding: 13px;
    border: 1px solid #ccccd4;
    border-radius: 10px;
    background: #fafafa;
}

.formulario-material small {
    display: block;
    margin-top: 8px;
    color: #676772;
}

.campo-completo {
    grid-column: 1 / -1;
}

.alerta {
    margin-bottom: 18px;
    padding: 15px 18px;
    border-radius: 11px;
}

.alerta.erro {
    color: #95151a;
    background: #ffe6e7;
}

.alerta.sucesso {
    color: #08673d;
    background: #e5f8ef;
}

.alerta a {
    font-weight: 800;
}

.estado-vazio {
    padding: 40px;
    border: 2px dashed #c8c8cf;
    border-radius: 18px;
    text-align: center;
    background: white;
}

.tabela-container {
    overflow: auto;
    border-radius: 16px;
    background: white;
}

.tabela-container table {
    width: 100%;
    border-collapse: collapse;
}

.tabela-container th,
.tabela-container td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #e1e1e6;
}

.tabela-container th {
    color: white;
    background: #17171b;
}

@media (max-width: 800px) {
    .conteudo-principal {
        padding: 20px;
    }

    .materias-grade,
    .formulario-material {
        grid-template-columns: 1fr;
    }

    .campo-completo {
        grid-column: auto;
    }

    .material-item {
        grid-template-columns: 1fr;
    }
}

.quiz-apresentacao,
.pergunta-card,
.revisao-card,
.respostas-revisao {
    padding: 28px;
    border: 1px solid #ddddE3;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(0,0,0,.07);
}

.quiz-resumo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 25px;
}

.quiz-resumo div {
    padding: 18px;
    border-radius: 13px;
    background: #f1f1f4;
}

.quiz-resumo small,
.quiz-resumo strong {
    display: block;
}

.quiz-resumo small {
    margin-bottom: 7px;
    color: #73737d;
}

.forca-card {
    margin-bottom: 25px;
    padding: 20px;
    border-radius: 15px;
    color: #ffffff;
    background: #151519;
}

.forca-topo {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.forca-topo small,
.forca-topo strong {
    display: block;
}

.forca-topo small {
    margin-bottom: 5px;
    color: #bdbdc6;
}

.forca-topo > span {
    font-size: 28px;
    font-weight: 900;
}

.barra-forca,
.barra-quiz {
    overflow: hidden;
    height: 14px;
    border-radius: 999px;
    background: #d3d3d8;
}

.barra-forca div,
.barra-quiz div {
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #d71920,
            #ff4c52
        );
}

.barra-forca.grande {
    width: min(650px, 100%);
    height: 19px;
    margin: 20px auto 0;
}

.botao-grande {
    border: 0;
    font-size: 18px;
    cursor: pointer;
}

.quiz-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
}

.quiz-cabecalho h1 {
    margin: 12px 0;
}

.quiz-cabecalho > strong {
    font-size: 28px;
}

.barra-quiz {
    margin-bottom: 24px;
}

.pergunta-card h2 {
    margin: 15px 0 25px;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.25;
}

.conceito {
    display: inline-block;
    padding: 7px 11px;
    border-radius: 999px;
    color: #ffffff;
    background: #242429;
    font-size: 12px;
    font-weight: 800;
}

.alternativas {
    display: grid;
    gap: 12px;
}

.alternativa {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border: 2px solid #ddddE3;
    border-radius: 13px;
    cursor: pointer;
    transition: .18s;
}

.alternativa:hover {
    border-color: #d71920;
    transform: translateY(-1px);
}

.alternativa:has(input:checked) {
    border-color: #d71920;
    background: #fff0f1;
}

.alternativa input {
    width: 18px;
    height: 18px;
}

.alternativa-letra {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #ffffff;
    background: #17171b;
    font-weight: 900;
}

.caixa-pista {
    margin-top: 18px;
    padding: 16px;
    border-left: 5px solid #e2a900;
    border-radius: 10px;
    background: #fff7d8;
}

.quiz-acoes,
.quiz-final-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.secundario-escuro {
    border: 0;
    color: #ffffff;
    background: #29292f;
    cursor: pointer;
}

.resultado-hero {
    padding: 42px;
    border-radius: 24px;
    color: #ffffff;
    text-align: center;
    background:
        radial-gradient(
            circle at top,
            rgba(215,25,32,.55),
            transparent 45%
        ),
        #101014;
}

.resultado-icone {
    display: block;
    margin-bottom: 12px;
    font-size: 65px;
}

.resultado-hero h1 {
    margin: 16px 0 8px;
    font-size: clamp(40px, 6vw, 70px);
}

.resultado-hero p {
    color: #d2d2d8;
}

.resultado-percentual {
    margin-top: 20px;
    font-size: 55px;
    font-weight: 900;
}

.resultado-grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
    margin: 22px 0;
}

.resultado-grade article {
    padding: 22px;
    border-radius: 16px;
    text-align: center;
    background: #ffffff;
}

.resultado-grade span,
.resultado-grade strong,
.resultado-grade small {
    display: block;
}

.resultado-grade span {
    font-size: 31px;
}

.resultado-grade strong {
    margin: 8px 0;
    font-size: 34px;
}

.resultado-grade small {
    color: #696974;
}

.tags-conceitos {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.tags-conceitos span {
    padding: 9px 12px;
    border-radius: 999px;
    color: #8f1116;
    background: #ffe6e7;
    font-weight: 800;
}

.sucesso-total {
    border-color: #9edbbf;
    background: #edfaf4;
}

.respostas-revisao {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.respostas-revisao article {
    padding: 17px;
    border-left: 5px solid;
    border-radius: 11px;
    background: #f2f2f5;
}

.respostas-revisao article.correta {
    border-color: #168350;
}

.respostas-revisao article.incorreta {
    border-color: #d71920;
}

.respostas-revisao header {
    display: flex;
    gap: 9px;
}

.respostas-revisao p {
    margin-bottom: 0;
    color: #5f5f69;
    line-height: 1.55;
}

@media (max-width: 700px) {
    .quiz-resumo,
    .resultado-grade {
        grid-template-columns: 1fr;
    }

    .quiz-cabecalho {
        align-items: start;
    }

    .pergunta-card,
    .quiz-apresentacao,
    .resultado-hero {
        padding: 22px;
    }
}

.central-cabecalho {
    padding: 34px;
    border-radius: 22px;
    color: #ffffff;
    background:
        linear-gradient(
            115deg,
            rgba(0,0,0,.96),
            rgba(52,7,10,.94)
        );
}

.central-cabecalho p {
    color: #d4d4da;
}

.central-resumo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
    margin: 24px 0;
}

.central-resumo article {
    padding: 22px;
    border-radius: 16px;
    text-align: center;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.central-resumo span,
.central-resumo strong,
.central-resumo small {
    display: block;
}

.central-resumo span {
    font-size: 30px;
}

.central-resumo strong {
    margin: 8px 0;
    font-size: 34px;
}

.central-resumo small {
    color: #6b6b75;
}

.central-materias {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.central-materia-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    min-height: 165px;
    padding: 24px;
    border: 2px solid transparent;
    border-radius: 19px;
    color: inherit;
    background: #ffffff;
    text-decoration: none;
    box-shadow: 0 11px 30px rgba(0,0,0,.07);
    transition: .18s;
}

.central-materia-card:hover {
    border-color: #d71920;
    transform: translateY(-3px);
}

.central-materia-icone {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 18px;
    font-size: 38px;
    background: #f1f1f4;
}

.central-materia-info h2 {
    margin: 0 0 8px;
    font-size: 25px;
}

.central-materia-info p {
    margin: 0 0 12px;
    color: #696974;
}

.central-seta {
    color: #d71920;
    font-size: 44px;
    font-weight: 800;
}

.central-status span,
.aula-central-status span {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.status-disponivel {
    color: #087047;
    background: #e3f8ee;
}

.status-preparacao {
    color: #6c6c75;
    background: #ececf0;
}

.voltar-central {
    display: block;
    width: fit-content;
    margin-bottom: 20px;
    color: #a71217;
    text-decoration: none;
    font-weight: 800;
}

.lista-aulas-central {
    display: grid;
    gap: 13px;
}

.aula-central-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 17px;
    padding: 20px;
    border: 1px solid #ddddE3;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(0,0,0,.05);
}

.aula-central-numero {
    font-size: 22px;
}

.aula-central-conteudo h2 {
    margin: 0 0 6px;
    font-size: 18px;
}

.aula-central-conteudo small {
    display: block;
    margin-bottom: 10px;
    color: #70707a;
}

.aula-central-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.botao-quiz {
    background: #151519;
}

.botao.indisponivel {
    border: 0;
    color: #85858d;
    background: #e4e4e8;
    cursor: not-allowed;
}

@media (max-width: 850px) {
    .central-materias {
        grid-template-columns: 1fr;
    }

    .aula-central-card {
        grid-template-columns: auto 1fr;
    }

    .aula-central-acoes {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 650px) {
    .central-resumo {
        grid-template-columns: 1fr;
    }

    .central-materia-card {
        grid-template-columns: auto 1fr;
    }

    .central-seta {
        display: none;
    }
}

.filtros-materias {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 22px;
}

.filtros-materias a {
    padding: 9px 13px;
    border-radius: 999px;
    color: #ffffff;
    background: #29292f;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.filtros-materias a:hover {
    background: #d71920;
}

.preparador-lista {
    display: grid;
    gap: 12px;
}

.preparador-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 20px;
    border: 1px solid #ddddE3;
    border-radius: 16px;
    background: #ffffff;
}

.preparador-info h2 {
    margin: 8px 0 5px;
    font-size: 18px;
}

.preparador-info small {
    color: #70707a;
}

.preparador-materia {
    display: inline-block;
    padding: 6px 9px;
    border-radius: 999px;
    color: #ffffff;
    background: #202025;
    font-size: 11px;
    font-weight: 800;
}

.preparador-status {
    margin-top: 12px;
}

.status-extraido {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 999px;
    color: #805f00;
    background: #fff3c7;
    font-size: 12px;
    font-weight: 800;
}

.preparador-acoes form {
    margin: 0;
}

@media (max-width: 700px) {
    .preparador-card {
        grid-template-columns: 1fr;
    }
}

.preparar-lote-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    margin-bottom: 22px;
    padding: 22px;
    border: 2px solid #d71920;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.preparar-lote-box h2 {
    margin: 0 0 7px;
}

.preparar-lote-box p {
    margin: 0;
    color: #686873;
}

.preparar-lote-box form {
    flex: 0 0 auto;
    margin: 0;
}

.preparar-lote-box button {
    border: 0;
    cursor: pointer;
}

.resultado-lote {
    margin-bottom: 22px;
    padding: 22px;
    border-radius: 17px;
    color: #ffffff;
    background: #17171b;
}

.resultado-lote h2 {
    margin-top: 0;
}

.resultado-lote-grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.resultado-lote-grade article {
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    background: rgba(255,255,255,.08);
}

.resultado-lote-grade strong,
.resultado-lote-grade span {
    display: block;
}

.resultado-lote-grade strong {
    margin-bottom: 6px;
    font-size: 30px;
}

.resultado-lote-grade span {
    color: #d4d4da;
}

@media (max-width: 720px) {
    .preparar-lote-box {
        display: block;
    }

    .preparar-lote-box form {
        margin-top: 18px;
    }

    .resultado-lote-grade {
        grid-template-columns: 1fr;
    }
}

.visualizador-texto-box {
    overflow: hidden;
    border: 1px solid #dcdce3;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.visualizador-texto-barra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 17px 20px;
    border-bottom: 1px solid #dcdce3;
    background: #f4f4f6;
}

.visualizador-texto-box pre {
    overflow: auto;
    max-height: 70vh;
    margin: 0;
    padding: 24px;
    color: #25252b;
    background: #ffffff;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.65;
}

.botao-visualizar-texto {
    background: #555561;
}

.preparador-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 650px) {
    .visualizador-texto-barra {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Ajustes do Visualizador de Texto */

.cabecalho-pagina h1 {
    max-width: 100%;
    margin: 16px 0 10px;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.08;
}

.visualizador-texto-box {
    width: 100%;
    max-width: 100%;
}

.visualizador-texto-barra {
    flex-wrap: wrap;
}

.visualizador-texto-barra strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.visualizador-texto-box pre {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    tab-size: 4;
}

@media (max-width: 700px) {
    .cabecalho-pagina h1 {
        font-size: 30px;
    }

    .visualizador-texto-box pre {
        padding: 16px;
        font-size: 14px;
    }
}

.botao-gerar-perguntas {
    background: #17171b;
}

.gerador-perguntas-inicio,
.editor-quiz-dados,
.editor-pergunta {
    margin-bottom: 22px;
    padding: 22px;
    border: 1px solid #dcdce3;
    border-radius: 17px;
    background: #ffffff;
}

.editor-quiz-form label {
    display: block;
    margin-bottom: 16px;
    font-weight: 700;
}

.editor-quiz-form input[type="text"],
.editor-quiz-form textarea,
.editor-quiz-form select {
    display: block;
    width: 100%;
    margin-top: 7px;
    padding: 12px;
    border: 1px solid #cfcfd7;
    border-radius: 10px;
    background: #ffffff;
    font: inherit;
    font-weight: 400;
}

.editor-pergunta h2 {
    margin-top: 0;
}

.editor-pergunta fieldset {
    padding: 18px;
    border: 1px solid #dcdce3;
    border-radius: 12px;
}

.editor-alternativa {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.editor-alternativa input[type="text"] {
    margin: 0;
}

.editor-quiz-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 15px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 25px rgba(0,0,0,.12);
}

@media (max-width: 650px) {
    .editor-quiz-acoes {
        flex-direction: column;
    }
}