/* PreparoLukisa: interface amigavel, mobile-first, cor de destaque por disciplina via --cor. */
:root {
    --roxo: #6d28d9;
    --tinta: #1e1b2e;
    --cinza: #6b7280;
    --fundo: #f6f5fb;
    --branco: #ffffff;
    --borda: #e5e3f0;
    --verde: #16a34a;
    --vermelho: #dc2626;
    --amarelo: #d97706;
    --raio: 14px;
    --sombra: 0 2px 10px rgba(30, 27, 46, .07);

    /* Tokens das figuras. Os SVGs usam var(--fig-x, #hex), com o hex repetido como
       fallback para que o arquivo continue legivel aberto fora da pagina. */
    --fig-a: #dbeafe;  --fig-a-tinta: #2563eb;
    --fig-b: #fee2e2;  --fig-b-tinta: #dc2626;
    --fig-c: #dcfce7;  --fig-c-tinta: #16a34a;
    --fig-d: #fef3c7;  --fig-d-tinta: #d97706;
    --fig-e: #ede9fe;  --fig-e-tinta: #6d28d9;
    --fig-papel: #ffffff;
    --fig-tinta: #1e1b2e;
    --fig-linha: #94a3b8;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--fundo);
    color: var(--tinta);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1; width: 100%; padding: 24px 16px 48px; }
img, svg { max-width: 100%; height: auto; }
.container { max-width: 880px; margin: 0 auto; width: 100%; }

/* ---- topo ---- */
.topo { background: var(--branco); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 20; }
.topo-inner { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; }
.marca { text-decoration: none; color: var(--tinta); font-weight: 800; font-size: 1.15rem; display: flex; gap: 8px; align-items: center; }
.marca em { color: var(--roxo); font-style: normal; }
.topo-nav { display: flex; align-items: center; gap: 12px; }
.ola { color: var(--cinza); font-size: .9rem; }
.btn-sair { background: none; border: 1px solid var(--borda); border-radius: 8px; padding: 4px 12px; cursor: pointer; color: var(--cinza); font: inherit; font-size: .85rem; }
.btn-sair:hover { border-color: var(--roxo); color: var(--roxo); }

/* ---- tipografia de pagina ---- */
.pagina-titulo { font-size: 1.7rem; margin: 8px 0 4px; }
.pagina-sub { color: var(--cinza); margin: 0 0 24px; }
.migalhas { font-size: .85rem; color: var(--cinza); margin-bottom: 8px; }
.migalhas a { color: var(--roxo); text-decoration: none; }

/* ---- botoes ---- */
.btn { display: inline-block; padding: 10px 20px; border-radius: 10px; border: 1px solid var(--borda); background: var(--branco); color: var(--tinta); text-decoration: none; font: inherit; font-weight: 600; cursor: pointer; }
.btn:hover { border-color: var(--roxo); color: var(--roxo); }
.btn-primario { background: var(--roxo); border-color: var(--roxo); color: #fff; }
.btn-primario:hover { background: #5b21b6; color: #fff; }
.btn-largo { width: 100%; text-align: center; font-size: 1.05rem; }

/* ---- login ---- */
.login-wrap { display: flex; justify-content: center; padding: 8vh 0; }
.login-card { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: 36px 32px; width: 100%; max-width: 400px; text-align: center; }
.login-logo { font-size: 3rem; }
.login-card h1 { margin: 4px 0 2px; }
.login-card h1 em { color: var(--roxo); font-style: normal; }
.login-sub { color: var(--cinza); margin: 0 0 24px; font-size: .95rem; }
.login-card form { text-align: left; }
.login-card label { display: block; font-weight: 600; font-size: .9rem; margin: 14px 0 4px; }
.login-card input { width: 100%; padding: 11px 12px; border: 1px solid var(--borda); border-radius: 10px; font: inherit; }
.login-card input:focus { outline: 2px solid var(--roxo); border-color: transparent; }
.login-card .btn { margin-top: 22px; }
.erro { color: var(--vermelho); font-size: .88rem; margin: 10px 0 0; }

/* ---- home: grade de disciplinas ---- */
.grade-disciplinas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.card-disciplina { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; text-decoration: none; color: var(--tinta); display: flex; flex-direction: column; gap: 4px; border-top: 4px solid var(--cor, var(--roxo)); transition: transform .12s ease, box-shadow .12s ease; }
.card-disciplina:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(30, 27, 46, .12); }
.card-icone { font-size: 1.9rem; }
.card-nome { font-weight: 800; font-size: 1.15rem; }
.card-info { font-size: .85rem; color: var(--cor, var(--roxo)); font-weight: 600; }
.card-info-vazia { color: var(--cinza); font-weight: 400; }
.card-vazio { opacity: .55; pointer-events: none; }

/* ---- lista de provas ---- */
.lista-provas { display: flex; flex-direction: column; gap: 12px; }
.card-prova { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px 20px; text-decoration: none; color: var(--tinta); border-left: 4px solid var(--cor, var(--roxo)); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.card-prova:hover { box-shadow: 0 6px 18px rgba(30, 27, 46, .12); }
.card-prova-titulo { font-weight: 700; }
.card-prova-data { color: var(--cinza); font-size: .88rem; }

/* ---- cabecalho da prova e abas ---- */
.prova-cabecalho { margin-bottom: 20px; }
.prova-subtitulo { color: var(--cinza); margin: 0 0 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.selo-data { background: var(--branco); border: 1px solid var(--borda); border-radius: 999px; padding: 2px 12px; font-size: .82rem; font-weight: 600; color: var(--tinta); }
.abas { display: flex; gap: 8px; border-bottom: 2px solid var(--borda); }
.aba { padding: 10px 18px; text-decoration: none; color: var(--cinza); font-weight: 700; border-radius: 10px 10px 0 0; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.aba:hover { color: var(--cor, var(--roxo)); }
.aba.ativa { color: var(--cor, var(--roxo)); border-bottom-color: var(--cor, var(--roxo)); background: var(--branco); }

/* ---- conteudo didatico ---- */
.conteudo { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: 28px 26px; }
.conteudo h2 { border-bottom: 2px solid var(--borda); padding-bottom: 6px; margin-top: 36px; color: var(--cor, var(--roxo)); }
.conteudo h2:first-child { margin-top: 0; }
.conteudo h3 { margin-top: 26px; }
.conteudo figure { margin: 24px 0; text-align: center; }
/* SVG inline sem width/height nos atributos: fixar a largura evita colapso de altura
   em navegadores que nao derivam o aspect-ratio do viewBox. */
.conteudo figure svg, .conteudo > svg, .questao svg { width: 100%; height: auto; display: block; margin: 0 auto; }
.conteudo figcaption { font-size: .85rem; color: var(--cinza); margin-top: 8px; text-align: center; }

/* ================= KIT DE FIGURAS =================
   Escala canonica: a largura do viewBox e sempre 340, 520 ou 800, e o max-width
   correspondente faz 1 unidade do viewBox valer ~1px na tela do desktop. Sem isso
   uma figura estreita e ampliada e outra larga e reduzida, e o mesmo font-size
   aparece com tamanhos diferentes em cada figura (era o defeito da versao anterior:
   o mesmo rotulo de 13 unidades saia entre 10px e 42px).
   Escada de corpo permitida dentro do SVG: 17, 15, 13 e 11 unidades. */
.figura--p svg { max-width: 340px; }
.figura--m svg { max-width: 520px; }
.figura--g svg { max-width: 800px; }

/* Figuras largas no celular: rolam dentro do proprio quadro em vez de encolher o
   texto abaixo do legivel. Mesmo idioma do .tabela-rolagem.
   O min-width entra SO em tela estreita: no desktop ele venceria o max-width da
   largura canonica e esticaria a figura (um mapa de 520 renderizava a 720). */
.figura-rolagem { overflow-x: auto; }
@media (max-width: 880px) {
    .figura--m .figura-rolagem > svg { min-width: 520px; }
    .figura--g .figura-rolagem > svg { min-width: 720px; }
}
.figura-dica-rolagem { display: none; font-size: .75rem; color: var(--cinza); margin-top: 4px; }

/* ---- Camada 0: esquemas em HTML, texto sempre nitido e que reflui ---- */

/* indice da apostila: com o conteudo aprofundado, uma apostila passa de 50 telas de
   celular, e sem ponto de entrada a aluna se perde. Ancora para cada capitulo. */
.indice { background: var(--fundo); border-radius: 12px; padding: 14px 18px; margin: 0 0 24px; text-align: left; }
.indice h3 { margin: 0 0 8px; font-size: .95rem; color: var(--cor, var(--roxo)); }
.indice ol { margin: 0; padding-left: 20px; font-size: .95rem; }
.indice li { margin: 4px 0; }
.indice a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--borda); }
.indice a:hover { color: var(--cor, var(--roxo)); border-bottom-color: var(--cor, var(--roxo)); }
.conteudo h2[id] { scroll-margin-top: 68px; }   /* o topo e sticky e cobriria o titulo */

/* linha do tempo */
.linha-tempo { list-style: none; margin: 20px 0; padding: 0 0 0 26px; border-left: 3px solid var(--borda); text-align: left; }
.linha-tempo > li { position: relative; padding: 0 0 18px; }
.linha-tempo > li:last-child { padding-bottom: 0; }
.linha-tempo > li::before {
    content: ''; position: absolute; left: -35px; top: 5px; width: 13px; height: 13px;
    border-radius: 50%; background: var(--cor, var(--roxo)); box-shadow: 0 0 0 3px var(--branco);
}
.linha-tempo .lt-data { display: block; font-weight: 800; color: var(--cor, var(--roxo)); font-size: .95rem; }
.linha-tempo .lt-fato { display: block; }
.linha-tempo .lt-nota { display: block; font-size: .85rem; color: var(--cinza); margin-top: 2px; }
.linha-tempo > li.lt-marco::before { background: var(--branco); border: 4px solid var(--cor, var(--roxo)); left: -37px; top: 3px; width: 15px; height: 15px; }
.linha-tempo > li.lt-marco .lt-fato { font-weight: 700; }

/* quadro comparativo de duas ou tres colunas */
.comparativo { display: grid; gap: 14px; margin: 20px 0; text-align: left; grid-template-columns: 1fr; }
@media (min-width: 640px) { .comparativo.cols-2 { grid-template-columns: 1fr 1fr; } .comparativo.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.comparativo-item { border: 1px solid var(--borda); border-radius: 12px; padding: 14px 16px; background: var(--branco); border-top: 4px solid var(--comp-cor, var(--cor, var(--roxo))); }
.comparativo-item h4 { margin: 0 0 2px; color: var(--comp-cor, var(--cor, var(--roxo))); font-size: 1.02rem; }
.comparativo-item .comp-sub { font-size: .82rem; color: var(--cinza); display: block; margin-bottom: 8px; }
.comparativo-item ul { margin: 0; padding-left: 18px; font-size: .93rem; }
.comparativo-item li { margin: 3px 0; }

/* fluxo de etapas numeradas */
.fluxo { list-style: none; counter-reset: fluxo; margin: 20px 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.fluxo > li { counter-increment: fluxo; position: relative; padding: 12px 16px 12px 52px; border: 1px solid var(--borda); border-radius: 12px; background: var(--branco); }
.fluxo > li::before {
    content: counter(fluxo); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px;
    border-radius: 50%; background: var(--cor, var(--roxo)); color: #fff; font-weight: 800; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
}
.fluxo > li::after { content: '↓'; position: absolute; left: 24px; bottom: -14px; color: var(--borda); font-size: 1rem; line-height: 1; }
.fluxo > li:last-child::after { content: none; }
.fluxo .fl-titulo { font-weight: 700; display: block; }
.fluxo .fl-corpo { font-size: .93rem; }

/* arvore sintatica: aninhamento com conectores, reflui no celular */
.arvore { margin: 20px 0; text-align: left; font-size: .95rem; }
.arvore .frase { background: var(--fundo); border-radius: 10px; padding: 10px 14px; font-weight: 700; margin-bottom: 10px; }
.arvore ul { list-style: none; margin: 0; padding-left: 22px; }
.arvore > ul { padding-left: 0; }
.arvore li { position: relative; padding: 4px 0 4px 0; }
.arvore ul ul > li { padding-left: 18px; }
.arvore ul ul > li::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 50%;
    width: 12px; border-left: 2px solid var(--borda); border-bottom: 2px solid var(--borda); border-bottom-left-radius: 6px;
}
.arvore ul ul > li:last-child::after { content: ''; position: absolute; left: 0; top: 50%; bottom: 0; width: 2px; background: var(--branco); }
.arvore .no { display: inline-block; border: 1px solid var(--borda); border-radius: 8px; padding: 3px 10px; background: var(--branco); }
.arvore .no-fn { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cor, var(--roxo)); font-weight: 800; display: block; }
.arvore .no-tx { font-weight: 600; }
.arvore .no-cl { font-size: .8rem; color: var(--cinza); }
.arvore .no--nucleo { border-color: var(--cor, var(--roxo)); box-shadow: inset 0 0 0 1px var(--cor, var(--roxo)); }

@media (max-width: 560px) {
    .figura-rolagem .figura-dica-rolagem, .figura-rolagem + .figura-dica-rolagem { display: block; }
}

/* diagrama de Linus Pauling como GRADE, nao como desenho: linhas = camadas, colunas =
   subniveis s p d f. A ordem de preenchimento vem do numero dentro de cada celula, o que
   elimina a ambiguidade das diagonais soltas do diagrama desenhado (era impossivel dizer
   qual seta chegava em qual subnivel justamente onde a precisao importa). */
.pauling {
    display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 6px;
    margin: 20px 0; text-align: left; align-items: stretch;
}
.pauling .pl-cab { font-size: .82rem; font-weight: 800; color: var(--cinza); text-align: center; padding-bottom: 2px; }
.pauling .pl-cab small { font-weight: 600; }
.pauling .pl-camada { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; padding-right: 6px; }
.pauling .pl-camada strong { font-size: .95rem; color: var(--cor, var(--roxo)); }
.pauling .pl-camada small { font-size: .7rem; color: var(--cinza); }
.pauling .pl-sub {
    display: flex; align-items: center; gap: 8px; padding: 7px 9px;
    border: 1px solid var(--borda); border-radius: 10px; background: var(--branco);
}
.pauling .pl-ordem {
    flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--cor, var(--roxo)); color: #fff;
    font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.pauling .pl-nome { font-weight: 700; font-size: .95rem; }
.pauling .pl-nome sup { font-size: .7em; }
.pauling-nota { font-size: .88rem; color: var(--cinza); }
@media (max-width: 560px) {
    .pauling { gap: 4px; }
    .pauling .pl-sub { flex-direction: column; gap: 2px; padding: 5px 4px; justify-content: center; }
    .pauling .pl-ordem { flex: 0 0 18px; height: 18px; font-size: .66rem; }
    .pauling .pl-nome { font-size: .85rem; }
    .pauling .pl-cab { font-size: .75rem; }
    .pauling .pl-cab small { display: none; }
}
/* ================= FIM DO KIT DE FIGURAS ================= */
.conteudo table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: .93rem; }
.conteudo th, .conteudo td { border: 1px solid var(--borda); padding: 8px 10px; text-align: left; }
.conteudo th { background: var(--fundo); }
.conteudo .tabela-rolagem { overflow-x: auto; }
.destaque { background: #f3effc; border-left: 4px solid var(--cor, var(--roxo)); border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 16px 0; }
.destaque.dica { background: #eefaf1; border-left-color: var(--verde); }
.destaque.atencao { background: #fef6e7; border-left-color: var(--amarelo); }

/* ---- exercicios de treino ---- */
.exercicio { border: 1px solid var(--borda); border-radius: var(--raio); margin: 20px 0; overflow: hidden; }
.exercicio-cabecalho { background: var(--fundo); padding: 10px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.exercicio-selo { font-weight: 800; color: var(--cor, var(--roxo)); font-size: .92rem; }
.exercicio-titulo { color: var(--cinza); font-size: .88rem; }
.exercicio-enunciado { padding: 14px 16px 4px; }
.exercicio-resolucao { border-top: 1px dashed var(--borda); }
.exercicio-resolucao summary { cursor: pointer; padding: 10px 16px; font-weight: 700; color: var(--cor, var(--roxo)); list-style: none; }
.exercicio-resolucao summary::before { content: '👀 '; }
.exercicio-resolucao[open] summary::before { content: '✅ '; }
.exercicio-resolucao-corpo { padding: 0 16px 14px; background: #fbfaff; }

/* ---- simulado ---- */
.simulado, .resultado, .historico { margin-top: 20px; }
.simulado-intro { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px 22px; margin-bottom: 20px; }
.simulado-intro h2 { margin: 0 0 8px; }
.simulado-progresso { font-weight: 700; color: var(--cor, var(--roxo)); margin: 8px 0 0; }
.questao { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px 22px; margin-bottom: 18px; }
.questao-topo { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.questao-numero { font-weight: 800; }
.questao-nivel { font-size: .75rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.nivel-facil { background: #e8f7ee; color: var(--verde); }
.nivel-media { background: #fef3e2; color: var(--amarelo); }
.nivel-dificil { background: #fdeaea; color: var(--vermelho); }
.questao-enunciado { margin-bottom: 14px; }
.questao-enunciado p { margin: 8px 0; }
.texto-base { background: var(--fundo); border-radius: 10px; padding: 12px 16px; font-size: .95rem; margin-bottom: 10px; }
.texto-base .fonte { display: block; font-size: .78rem; color: var(--cinza); margin-top: 6px; }

.alternativas { display: flex; flex-direction: column; gap: 8px; }
.alternativa { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: border-color .1s, background .1s; }
.alternativa:hover { border-color: var(--cor, var(--roxo)); }
.alternativa input { position: absolute; opacity: 0; }
.alternativa-letra { flex: 0 0 26px; height: 26px; border-radius: 50%; border: 2px solid var(--borda); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; }
.alternativa:has(input:checked) { border-color: var(--cor, var(--roxo)); background: #f6f2fd; }
.alternativa:has(input:checked) .alternativa-letra { background: var(--cor, var(--roxo)); border-color: var(--cor, var(--roxo)); color: #fff; }
.simulado-rodape { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px 22px; text-align: center; }
.simulado-rodape .simulado-progresso { margin-bottom: 12px; }

/* ---- resultado ---- */
.resultado-resumo { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: 24px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-bottom: 28px; }
.resultado-nota { flex: 0 0 120px; height: 120px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.resultado-nota-valor { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.resultado-nota-rotulo { font-size: .75rem; opacity: .9; }
.nota-boa { background: var(--verde); color: #fff; }
.nota-media { background: var(--amarelo); color: #fff; }
.nota-baixa { background: var(--vermelho); color: #fff; }
.resultado-detalhes h2 { margin: 0 0 6px; }
.resultado-niveis { list-style: none; padding: 0; margin: 10px 0; display: flex; gap: 16px; flex-wrap: wrap; }
.resultado-niveis li { display: flex; gap: 6px; align-items: center; font-weight: 600; }
.resultado-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.resultado-acoes.centro { justify-content: center; margin-top: 24px; }
.gabarito-titulo { margin: 0 0 16px; }
.questao-corrigida.acertou { border-left: 5px solid var(--verde); }
.questao-corrigida.errou { border-left: 5px solid var(--vermelho); }
.questao-veredito { margin-left: auto; font-weight: 700; font-size: .88rem; }
.alternativa-corrigida { cursor: default; }
.alternativa-corrigida.correta { border-color: var(--verde); background: #f0faf3; }
.alternativa-corrigida.correta .alternativa-letra { background: var(--verde); border-color: var(--verde); color: #fff; }
.alternativa-corrigida.marcada-errada { border-color: var(--vermelho); background: #fdf3f3; }
.alternativa-corrigida.marcada-errada .alternativa-letra { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.alternativa-selo { margin-left: auto; font-size: .75rem; font-weight: 800; color: var(--verde); text-transform: uppercase; align-self: center; }
.alternativa-selo.selo-sua { color: var(--vermelho); }
.comentario { margin-top: 14px; background: #fbf9f2; border: 1px solid #f0e9d2; border-radius: 10px; padding: 12px 16px; font-size: .95rem; }

/* ---- historico ---- */
.historico h2 { font-size: 1.1rem; margin: 0 0 10px; }
.historico-lista { display: flex; flex-direction: column; gap: 8px; }
.historico-item { display: flex; gap: 14px; align-items: center; background: var(--branco); border-radius: 10px; box-shadow: var(--sombra); padding: 8px 14px; text-decoration: none; color: var(--tinta); font-size: .92rem; }
.historico-nota { flex: 0 0 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.historico-data { margin-left: auto; color: var(--cinza); font-size: .82rem; }

/* ---- rodape ---- */
.rodape { border-top: 1px solid var(--borda); padding: 14px 16px; color: var(--cinza); font-size: .82rem; text-align: center; }

@media (max-width: 560px) {
    .pagina-titulo { font-size: 1.4rem; }
    .conteudo { padding: 20px 16px; }
    .questao { padding: 16px; }
    .resultado-resumo { justify-content: center; text-align: center; }
    .resultado-acoes { justify-content: center; }
}

/* ---- impressao ----
   Apostila impressa e caso real de estudo. Sem isto, uma figura de 800 unidades vai
   para uma pagina de 180mm de largura util e as resolucoes dos exercicios saem
   fechadas, porque <details> nao imprime o conteudo recolhido. */
@media print {
    body { background: #fff; }
    .topo, .rodape, .abas, .btn, .btn-sair, .simulado-rodape, .figura-dica-rolagem { display: none; }
    .conteudo { box-shadow: none; padding: 0; border-radius: 0; }
    main { padding: 0; }
    .container { max-width: none; }

    /* figura nunca ultrapassa a largura util da pagina e nao quebra no meio */
    .figura--g svg, .figura--m svg, .figura--p svg { max-width: 100%; }
    .figura-rolagem { overflow: visible; }
    .figura-rolagem > svg { min-width: 0; }
    figure, .exercicio, .questao, .comparativo-item, .linha-tempo > li { break-inside: avoid; }

    /* resolucao dos exercicios aberta no papel. Quem abre de fato e o handler de
       beforeprint no app.js: <details> fechado nao se abre so com display, porque o
       navegador esconde o conteudo pelo slot interno. Aqui apenas somem o "Ver
       resolucao", que no papel nao faz sentido, e a moldura de clique. */
    .exercicio-resolucao > summary { display: none; }
    .exercicio-resolucao { border-top: 1px solid var(--borda); }

    h2, h3 { break-after: avoid; }
    a { text-decoration: none; color: inherit; }
}