/*
 * Simulado ENEM 2026 da Métria: a primeira tela (templates/pages/simulado-enem-2026.php, sem ?questao).
 * É a página de chegada da semana do ENEM. Celular primeiro: título, a folha de respostas no bloco da marca
 * (o mesmo bloco da Tabuada e do Delta: fundo da marca, lima para o que o aluno já fez) e o botão, sem rolar.
 * As telas da prova e do resultado continuam em pages/mapa-da-base.css. Cores e medidas: base/tokens.css.
 */

.sim { padding-top: var(--m-2); padding-bottom: var(--m-16); }
@media (min-width: 744px) { .sim { padding-top: var(--m-10); } }

/* ---------- Abertura: título e a folha de respostas ---------- */
.sim-topo { display: grid; gap: var(--m-5); align-items: center; }
@media (min-width: 744px) { .sim-topo { gap: var(--m-6); } }
@media (min-width: 1024px) { .sim-topo { grid-template-columns: 1.1fr 0.9fr; gap: var(--m-12); } }

.sim-cabeca { display: grid; gap: var(--m-2); }
@media (min-width: 744px) { .sim-cabeca { gap: var(--m-3); } }
.sim-cabeca__rotulo { margin: 0; color: var(--m-texto-2); font-size: var(--m-fs-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.sim-cabeca__titulo {
    margin: 0; max-width: 13em; color: var(--m-texto); font-family: var(--m-fonte-titulo);
    font-size: var(--m-fs-xl); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance;
}
@media (min-width: 744px) { .sim-cabeca__titulo { font-size: var(--m-fs-2xl); } }
.sim-cabeca__frase { margin: 0; max-width: 34em; color: var(--m-texto-2); font-size: var(--m-fs-sm); line-height: 1.55; }
@media (min-width: 744px) { .sim-cabeca__frase { font-size: var(--m-fs-md); line-height: 1.6; } }

.sim-folha {
    display: grid; gap: var(--m-4); padding: var(--m-5) var(--m-4);
    background: var(--m-marca); color: var(--m-sobre-marca); border: 1px solid var(--m-borda-marca); border-radius: var(--m-raio-g);
}
@media (min-width: 744px) { .sim-folha { gap: var(--m-5); padding: var(--m-8); } .sim-folha__numero { font-size: var(--m-fs-2xl); } }
.sim-folha__topo { display: grid; gap: var(--m-1); }
.sim-folha__numero { margin: 0; color: var(--m-lima); font-family: var(--m-fonte-titulo); font-size: var(--m-fs-xl); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.sim-folha__estado { margin: 0; color: var(--m-sobre-marca-2); font-size: var(--m-fs-sm); }

/* As 45 casas, 9 por linha, como uma folha de respostas */
.sim-folha__grade { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--m-1); margin: 0; padding: 0; list-style: none; }
@media (min-width: 744px) { .sim-folha__grade { gap: var(--m-2); } }
.sim-folha__casa { aspect-ratio: 4 / 3; border-radius: var(--m-raio-p); background: var(--m-marca-casa); transition: background-color 300ms ease; }
.sim-folha__casa.e-feita { background: var(--m-lima); }
@media (prefers-reduced-motion: reduce) { .sim-folha__casa { transition: none; } }

.sim-folha__acoes { display: grid; gap: var(--m-3); }
.sim-folha__acoes .m-botao[hidden] { display: none; }
.sim-botao { width: 100%; background: var(--m-sobre-marca); border-color: var(--m-sobre-marca); color: var(--m-marca); font-weight: 600; }
.sim-botao:focus-visible { outline: 2px solid var(--m-lima); outline-offset: 2px; box-shadow: none; }
@media (hover: hover) { .sim-botao:hover { background: var(--m-sobre-marca-2); border-color: var(--m-sobre-marca-2); color: var(--m-marca); } }
.sim-botao.sim-botao--leve { background: transparent; border-color: var(--m-marca-casa-2); color: var(--m-sobre-marca); font-weight: 500; }
@media (hover: hover) { .sim-botao.sim-botao--leve:hover { background: var(--m-marca-casa); color: var(--m-sobre-marca); } }
.sim-folha__nota { margin: 0; color: var(--m-sobre-marca-2); font-size: var(--m-fs-xs); text-align: center; }

/* ---------- Três números e o aviso ---------- */
.sim-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--m-4); margin: var(--m-8) 0 0; padding-top: var(--m-6); border-top: 1px solid var(--m-borda); }
@media (min-width: 744px) { .sim-numeros { grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--m-6) var(--m-12); } }
.sim-numeros dt { color: var(--m-texto); font-family: var(--m-fonte-titulo); font-size: var(--m-fs-lg); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sim-numeros dd { margin: 2px 0 0; color: var(--m-texto-3); font-size: var(--m-fs-xs); line-height: 1.4; }
.sim-aviso { margin: var(--m-4) 0 0; max-width: 44em; color: var(--m-texto-3); font-size: var(--m-fs-xs); line-height: 1.5; }

/* ---------- Seções ---------- */
.sim-secao { margin-top: var(--m-12); }
@media (min-width: 744px) { .sim-secao { margin-top: var(--m-16); } }
.sim-secao > .m-titulo-2, .sim-fim__texto > .m-titulo-2 { margin: 0 0 var(--m-6); }
.sim-texto { margin: 0; max-width: 44em; color: var(--m-texto-2); line-height: 1.6; }

/* Como foi feito: três passos numerados, sem caixa */
.sim-passos { counter-reset: sim; display: grid; gap: var(--m-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 744px) { .sim-passos { grid-template-columns: repeat(3, 1fr); gap: var(--m-8); } }
.sim-passos li { counter-increment: sim; display: grid; gap: var(--m-2); align-content: start; }
.sim-passos li::before {
    content: counter(sim); display: inline-grid; place-items: center; width: 32px; height: 32px; margin-bottom: var(--m-1);
    border: 1px solid var(--m-borda-forte); border-radius: 50%; color: var(--m-texto-2); font-size: var(--m-fs-sm); font-weight: 600;
}
.sim-passos strong { color: var(--m-texto); font-weight: 600; }
.sim-passos p { margin: 0; color: var(--m-texto-2); line-height: 1.6; }

/* O que aparece no fim: a lista e o exemplo do resultado */
.sim-fim { display: grid; gap: var(--m-8); }
@media (min-width: 1024px) { .sim-fim { grid-template-columns: 1fr 1fr; gap: var(--m-12); align-items: start; } }
.sim-lista { display: grid; gap: var(--m-3); margin: 0; padding-left: 1.2em; color: var(--m-texto-2); line-height: 1.6; }

.sim-exemplo { display: grid; gap: var(--m-1); max-width: 420px; margin: 0; }
.sim-exemplo__rotulo { justify-self: start; font-style: normal; margin-bottom: var(--m-3); padding: 2px var(--m-2); border-radius: var(--m-raio-p); background: var(--m-superficie-2); color: var(--m-texto-2); font-size: var(--m-fs-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.sim-exemplo__nota-rotulo { margin: 0; color: var(--m-texto-2); font-size: var(--m-fs-sm); }
.sim-exemplo__nota { margin: 0; color: var(--m-texto); font-family: var(--m-fonte-titulo); font-size: var(--m-fs-2xl); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sim-exemplo__acertos { margin: 0; color: var(--m-texto-2); font-size: var(--m-fs-sm); }
.sim-exemplo__acertos strong { color: var(--m-texto); }
.sim-exemplo__perdeu { margin-top: var(--m-4); padding-top: var(--m-4); border-top: 1px solid var(--m-borda); display: grid; gap: var(--m-2); }
.sim-exemplo__subtitulo { margin: 0 0 var(--m-1); color: var(--m-texto); font-size: var(--m-fs-sm); font-weight: 600; }
.sim-exemplo__linha { display: flex; justify-content: space-between; gap: var(--m-3); margin: 0; color: var(--m-texto-2); font-size: var(--m-fs-sm); }
.sim-exemplo__linha .m-num { color: var(--m-texto); font-weight: 600; }

/* Perguntas: linhas que abrem, sem caixa */
.sim-perguntas { max-width: 44em; border-top: 1px solid var(--m-borda); }
.sim-pergunta { border-bottom: 1px solid var(--m-borda); }
.sim-pergunta summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--m-3); min-height: var(--m-toque); padding: var(--m-3) 0;
    color: var(--m-texto); font-weight: 600; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.sim-pergunta summary::-webkit-details-marker { display: none; }
.sim-pergunta summary:focus-visible { outline: none; box-shadow: var(--m-foco); border-radius: var(--m-raio-p); }
.sim-pergunta__seta { flex: none; color: var(--m-texto-3); transition: transform var(--m-transicao); }
.sim-pergunta[open] .sim-pergunta__seta { transform: rotate(180deg); }
.sim-pergunta p { margin: 0 0 var(--m-4); color: var(--m-texto-2); line-height: 1.6; }

/* O fim da página: a frase e o mesmo botão de cima (sua-prova.js copia o texto dele) */
.sim-final { display: grid; gap: var(--m-4); justify-items: start; margin-top: var(--m-12); padding-top: var(--m-8); border-top: 1px solid var(--m-borda); }
.sim-final__frase { margin: 0; color: var(--m-texto); font-size: var(--m-fs-md); font-weight: 600; }
@media (max-width: 743px) { .sim-final .m-botao { width: 100%; } }