:root {
    --saex-azul: #16324f;
    --saex-azul-secundario: #17395c;
    --saex-azul-claro: #eaf1f7;
    --saex-texto: #1d2939;
    --saex-texto-suave: #475569;
    --saex-borda: #cbd5e1;
    --saex-fundo: #f7f9fc;
    --saex-verde: #166534;
    --saex-vermelho: #991b1b;
    --saex-amarelo: #d97706;
}

/* =========================================================
   ÁREA PRINCIPAL SAEX
   Todas as regras ficam limitadas à área central.
   Cabeçalho e rodapé continuam usando o CSS original do site.
========================================================= */

.pagina-saex .layout-saex {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 70vh;
    margin: 0;
    padding: 28px 16px;
    background: var(--saex-fundo);
    color: var(--saex-texto);
    color-scheme: light;
    box-sizing: border-box;
}

.pagina-saex .layout-saex *,
.pagina-saex .layout-saex *::before,
.pagina-saex .layout-saex *::after {
    box-sizing: border-box;
}

.pagina-saex .container-saex {
    width: 100%;
    max-width: 920px;
    margin: calc(var(--saex-header-altura, 90px) + 24px) auto 0;
    padding: 0;
    background: transparent;
    color: var(--saex-texto);
}

/* =========================================================
   BREADCRUMB
========================================================= */

.pagina-saex .layout-saex .saex-breadcrumb {
    margin-bottom: 18px;
    color: var(--saex-texto-suave);
    font-size: 0.9rem;
}

.pagina-saex .layout-saex .saex-breadcrumb a {
    color: #12518a;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pagina-saex .layout-saex .saex-breadcrumb a:hover {
    color: var(--saex-azul);
}

/* =========================================================
   BLOCOS E CARTÕES
========================================================= */

.pagina-saex .layout-saex .saex-hero,
.pagina-saex .layout-saex .avaliacao-apresentacao,
.pagina-saex .layout-saex .saex-bloco,
.pagina-saex .layout-saex .questao-card,
.pagina-saex .layout-saex .avaliacao-resultado {
    margin-bottom: 22px;
    padding: 28px;
    color: var(--saex-texto);
    background: #ffffff;
    border: 1px solid var(--saex-borda);
    border-radius: 10px;
}

.pagina-saex .layout-saex .saex-hero {
    border-top: 7px solid var(--saex-azul);
}

.pagina-saex .layout-saex .saex-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.pagina-saex .layout-saex .saex-card {
    padding: 20px;
    color: var(--saex-texto);
    background: #ffffff;
    border: 1px solid var(--saex-borda);
    border-radius: 8px;
}

/* =========================================================
   TÍTULOS E TEXTOS
========================================================= */

.pagina-saex .layout-saex h1,
.pagina-saex .layout-saex h2,
.pagina-saex .layout-saex h3,
.pagina-saex .layout-saex h4,
.pagina-saex .layout-saex h5,
.pagina-saex .layout-saex h6 {
    color: var(--saex-azul);
}

.pagina-saex .layout-saex p,
.pagina-saex .layout-saex li,
.pagina-saex .layout-saex label,
.pagina-saex .layout-saex small {
    color: var(--saex-texto);
}

.pagina-saex .layout-saex .saex-hero h1,
.pagina-saex .layout-saex .avaliacao-cabecalho h1 {
    margin: 18px 0 12px;
    color: var(--saex-azul);
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    line-height: 1.15;
}

.pagina-saex .layout-saex .saex-card h2,
.pagina-saex .layout-saex .saex-card h3 {
    margin-top: 0;
}

/* =========================================================
   SELOS
========================================================= */

.pagina-saex .layout-saex .saex-selo,
.pagina-saex .layout-saex .avaliacao-caderno {
    display: inline-block;
    padding: 6px 10px;
    color: #ffffff !important;
    background: var(--saex-azul-secundario);
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Garante que elementos internos do selo também sejam brancos */
.pagina-saex .layout-saex .saex-selo *,
.pagina-saex .layout-saex .avaliacao-caderno * {
    color: #ffffff !important;
}

/* =========================================================
   LINKS E BOTÕES
========================================================= */

.pagina-saex .layout-saex a {
    color: #12518a;
}

.pagina-saex .layout-saex .saex-card a,
.pagina-saex .layout-saex .botao-avaliacao {
    display: inline-block;
    padding: 12px 18px;
    color: #ffffff !important;
    background: var(--saex-azul);
    border: 0;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.pagina-saex .layout-saex .saex-card a:hover,
.pagina-saex .layout-saex .botao-avaliacao:hover {
    filter: brightness(1.12);
}

.pagina-saex .layout-saex button:disabled,
.pagina-saex .layout-saex .botao-avaliacao:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* =========================================================
   AVISOS
========================================================= */

.pagina-saex .layout-saex .saex-aviso,
.pagina-saex .layout-saex .avaliacao-aviso {
    padding: 16px 18px;
    color: var(--saex-texto);
    background: #fff8e6;
    border-left: 5px solid var(--saex-amarelo);
    border-radius: 5px;
}

.pagina-saex .layout-saex .mensagem-rascunho {
    margin-top: 14px;
    color: #9a3412;
    font-weight: 700;
}

/* =========================================================
   RESUMO DA AVALIAÇÃO
========================================================= */

.pagina-saex .layout-saex .avaliacao-resumo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 24px 0;
}

.pagina-saex .layout-saex .avaliacao-resumo div {
    padding: 15px;
    text-align: center;
    color: var(--saex-texto);
    background: var(--saex-azul-claro);
    border-radius: 7px;
}

.pagina-saex .layout-saex .avaliacao-resumo strong,
.pagina-saex .layout-saex .avaliacao-resumo span {
    display: block;
    color: var(--saex-texto);
}

/* =========================================================
   HABILIDADES
========================================================= */

.pagina-saex .layout-saex .habilidades-box {
    margin: 24px 0;
}

.pagina-saex .layout-saex .habilidades-lista {
    display: grid;
    gap: 10px;
}

.pagina-saex .layout-saex .habilidade-item {
    padding: 13px;
    color: var(--saex-texto);
    background: #ffffff;
    border: 1px solid var(--saex-borda);
    border-radius: 6px;
}

.pagina-saex .layout-saex .habilidade-codigo {
    margin-right: 7px;
    color: var(--saex-azul);
    font-weight: 800;
}

/* =========================================================
   QUESTÕES
========================================================= */

.pagina-saex .layout-saex .questao-topo {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    color: var(--saex-texto);
    border-bottom: 1px solid var(--saex-borda);
}

.pagina-saex .layout-saex .barra-progresso {
    height: 8px;
    margin: 14px 0 24px;
    overflow: hidden;
    background: #e2e8f0;
    border-radius: 10px;
}

.pagina-saex .layout-saex .barra-progresso > span {
    display: block;
    height: 100%;
    background: var(--saex-azul);
}

.pagina-saex .layout-saex .alternativas {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.pagina-saex .layout-saex .alternativa {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    color: var(--saex-texto);
    background: #ffffff;
    border: 1px solid var(--saex-borda);
    border-radius: 7px;
    cursor: pointer;
}

.pagina-saex .layout-saex .alternativa:hover {
    background: var(--saex-azul-claro);
}

.pagina-saex .layout-saex .alternativa:has(input:checked) {
    background: var(--saex-azul-claro);
    border-color: var(--saex-azul);
}

.pagina-saex .layout-saex input[type="radio"] {
    accent-color: var(--saex-azul);
}

.pagina-saex .layout-saex .avaliacao-navegacao {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}

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

.pagina-saex .layout-saex .resultado-habilidade {
    margin: 15px 0;
}

.pagina-saex .layout-saex .resultado-barra {
    height: 10px;
    overflow: hidden;
    background: #e2e8f0;
    border-radius: 10px;
}

.pagina-saex .layout-saex .resultado-barra span {
    display: block;
    height: 100%;
    background: var(--saex-azul);
}

.pagina-saex .layout-saex .revisao-erro {
    margin: 16px 0;
    padding: 16px;
    color: var(--saex-texto);
    background: #fff7f7;
    border-left: 5px solid var(--saex-vermelho);
}

/* =========================================================
   IMAGENS
========================================================= */

.pagina-saex .layout-saex .imagem-questao {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 18px auto;
}

/* =========================================================
   RESPONSIVIDADE
========================================================= */

@media (max-width: 768px) {
    .pagina-saex .layout-saex {
        padding: 18px 10px;
    }

    .pagina-saex .container-saex {
        margin-top: calc(var(--saex-header-altura, 70px) + 14px);
    }
}

@media (max-width: 650px) {
    .pagina-saex .layout-saex {
        padding: 14px 8px;
    }

    .pagina-saex .layout-saex .saex-hero,
    .pagina-saex .layout-saex .avaliacao-apresentacao,
    .pagina-saex .layout-saex .saex-bloco,
    .pagina-saex .layout-saex .questao-card,
    .pagina-saex .layout-saex .avaliacao-resultado {
        padding: 19px;
    }

    .pagina-saex .layout-saex .avaliacao-resumo {
        grid-template-columns: 1fr;
    }

    .pagina-saex .layout-saex .avaliacao-navegacao {
        flex-direction: column;
    }

    .pagina-saex .layout-saex .avaliacao-navegacao button {
        width: 100%;
    }
}

.pagina-saex .layout-saex .simulado-card-topo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.pagina-saex .layout-saex .simulado-informacoes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}

.pagina-saex .layout-saex .simulado-card-topo > *,
.pagina-saex .layout-saex .simulado-informacoes > * {
    display: inline-block;
}