/* Fichas de matemática adaptada: página de leitura simples + folhas A4 brancas para imprimir.
   Títulos em Sniglet, texto em Lexend. A folha é sempre branca (economiza tinta); cor só nos detalhes. */
:root {
    --ink: #111; --ink-2: #4a4a4a; --line: #d9d9d6; --paper: #fff; --paper-2: #f4f4f2;
    --accent: #16703a; --mark: #fff36b; --mark-soft: #fff9c2;
    --display: 'Sniglet', 'Comic Sans MS', system-ui, sans-serif;
    --body: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font: 16px/1.6 var(--body); margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.pular { background: var(--ink); color: #fff; left: 12px; padding: 8px 12px; position: absolute; top: -60px; z-index: 5; }
.pular:focus { top: 12px; }

.topo { align-items: center; border-bottom: 1.5px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; margin: 0 auto; max-width: 1100px; padding: 16px 18px; }
.marca-site { color: var(--ink); font: 800 19px var(--display); letter-spacing: .04em; text-decoration: none; }
.topo nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; }
.topo nav a { color: var(--ink-2); text-decoration: none; }
.topo nav a:hover { color: var(--ink); text-decoration: underline; }

main { padding: 26px 16px 40px; }
.texto { margin: 0 auto; max-width: 720px; }
.trilha { color: var(--ink-2); font-size: 13px; margin: 0 0 18px; }
.trilha ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.trilha li + li::before { content: '›'; margin-right: 4px; }
.trilha a { color: var(--ink-2); }
.rotulo { color: var(--ink-2); font: 400 12px var(--display); letter-spacing: .1em; margin: 0 0 6px; text-transform: uppercase; }
h1 { font: 800 clamp(30px, 6vw, 42px)/1.1 var(--display); margin: 0 0 12px; }
.texto h2 { font: 800 24px/1.2 var(--display); margin: 34px 0 10px; }
.linha-fina { color: var(--ink-2); font-size: 18px; margin: 0 0 18px; }
.texto p, .texto li { font-size: 17px; line-height: 1.7; }
.texto li { margin-bottom: 6px; }
.texto li::marker { color: var(--accent); font-weight: 600; }
.nota { background: var(--paper-2); border-radius: 14px; font-size: 15px !important; padding: 12px 16px; }
.ficha-dados { display: grid; gap: 4px 16px; grid-template-columns: max-content 1fr; margin: 20px 0 0; }
.ficha-dados dt { font-weight: 600; }
.ficha-dados dd { margin: 0; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.btn98 {
    align-items: center; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 99px; color: var(--ink); cursor: pointer;
    display: inline-flex; font: 500 14px var(--body); min-height: 38px; padding: 6px 16px; text-decoration: none;
}
.btn98:hover, .btn98.escuro { background: var(--ink); color: var(--paper); }
.gabarito { border: 1.5px solid var(--line); border-radius: 14px; margin: 24px 0 0; padding: 10px 16px; }
.gabarito summary { cursor: pointer; font-weight: 600; }
.vizinhas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin: 34px 0 10px; }
.voltar { font-weight: 600; }
.rodape { background: #b9e6c6; font-size: 14px; padding: 18px; text-align: center; }
.rodape p { margin: 0 0 4px; }
.rodape a { color: var(--ink); }

/* ---------- folhas A4 ---------- */
.folhas { align-items: center; display: flex; flex-direction: column; gap: 22px; margin: 18px 0 0; }
.folha {
    background: #fff; box-shadow: 0 0 0 1px #cfcfcb, 0 6px 18px rgba(0, 0, 0, .08); color: #111;
    display: flex; flex-direction: column; font-family: var(--body); height: 297mm; overflow: hidden; padding: 12mm 13mm 9mm; width: 210mm;
}
.folha-topo { align-items: center; border-bottom: 1.5px solid #111; display: flex; font-size: 11pt; gap: 10px; justify-content: space-between; padding-bottom: 2.5mm; }
.nivel b { font-family: var(--display); font-weight: 800; }
.bolas { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: -1px; }
.bolas i { border: 1.5px solid #111; border-radius: 50%; display: inline-block; height: 10px; width: 10px; }
.bolas i.cheia { background: #fff36b; }
.hab { color: #4a4a4a; font-size: 9.5pt; }
.aluno { display: flex; font-size: 12pt; gap: 8mm; margin: 4mm 0 1mm; }
.aluno span { align-items: flex-end; display: flex; flex: 0 0 auto; gap: 2mm; }
.aluno span:first-child { flex: 1; }
.traco { border-bottom: 1.5px solid #111; display: inline-block; height: 1em; width: 30mm; }
.traco.longo { flex: 1; width: auto; }
.folha-titulo { font: 800 24pt/1.1 var(--display); margin: 4mm 0 3mm; }
.folha-rodape { border-top: 1px solid #bdbdb8; color: #4a4a4a; font-size: 8.5pt; margin-top: auto; padding-top: 2mm; text-align: center; }

.bloco { margin: 0 0 4.5mm; }
.instrucao { align-items: flex-start; display: flex; font: 500 14pt/1.3 var(--body); gap: 3mm; margin: 0 0 2mm; }
.instrucao .num {
    align-items: center; background: #fff36b; border: 2px solid #111; border-radius: 50%; display: inline-flex; flex: 0 0 auto;
    font: 800 13pt var(--display); height: 9mm; justify-content: center; width: 9mm;
}
.dica { color: #4a4a4a; font-size: 10.5pt; margin: -1mm 0 2mm 12mm; }
.bloco-corpo { margin-left: 12mm; }
.grade { display: grid; gap: 3mm; grid-template-columns: repeat(var(--colunas), 1fr); }
.item {
    align-items: center; border: 1.5px solid #9a9a96; border-radius: 4mm; display: flex; flex-direction: column; gap: 2mm;
    justify-content: center; padding: 3mm; position: relative;
}
.item.largo { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.item.largo .desenho { width: 100%; align-items: center; display: flex; flex-wrap: wrap; gap: 3mm; }
.item.exemplo { border: 2px dashed #111; }
.selo-exemplo { background: #fff36b; border: 1.5px solid #111; border-radius: 99px; font: 800 8.5pt var(--display); left: 3mm; letter-spacing: .08em; padding: 0 2.5mm; position: absolute; text-transform: uppercase; top: -2.6mm; }
.desenho { width: 100%; align-items: center; display: flex; flex-wrap: wrap; gap: 2mm; justify-content: center; }
.desenho svg { max-width: 100%; height: auto; }
.mais { font: 600 26pt var(--body); }
.opcoes { display: flex; gap: 5mm; }
.opcao {
    align-items: center; border: 1.5px solid #111; border-radius: 3mm; display: inline-flex; font: 600 20pt var(--body); justify-content: center;
    min-height: 15mm; min-width: 15mm; padding: 1mm 3mm;
}
.opcao svg { display: block; }
.opcao.marcada { box-shadow: 0 0 0 1.6mm #fff, 0 0 0 2.4mm #111; border-radius: 50%; }
.resposta {
    border: 2px solid #111; border-radius: 2mm; display: inline-flex; align-items: center; justify-content: center; font: 600 17pt var(--body);
    height: 12mm; min-width: 14mm; vertical-align: middle;
}
.conta { font: 500 18pt var(--body); margin: 1mm 0; white-space: nowrap; }
.legenda { font: 600 14pt var(--body); margin: 0; text-align: center; }
.du { font-size: 13pt; margin: 0; }
.du .resposta { font-size: 14pt; height: 10mm; min-width: 12mm; }
.mini svg { display: block; }
.marcar { border: 2px solid #111; border-radius: 1.5mm; display: inline-block; height: 10mm; width: 10mm; }
.caixa-desenho { border: 1.5px dashed #6b6b6b; border-radius: 3mm; position: relative; width: 100%; }
.rotulo-caixa { color: #6b6b6b; font-size: 9pt; left: 3mm; position: absolute; top: 1.5mm; }
.problema p { font-size: 13pt; margin: 0 0 2mm; }
.problema .resp-linha { align-items: flex-end; display: flex; gap: 2mm; margin-top: 2mm; }
.linha-resp { border-bottom: 1.5px solid #111; display: inline-block; flex: 1; height: 1em; min-width: 30mm; }
.linhas { display: grid; gap: 7mm; padding-top: 4mm; width: 100%; }
.linhas span { border-bottom: 1.5px solid #111; display: block; }
.seq-num { display: flex; gap: 2.5mm; margin: 0 0 3mm; }
.seq-num .cel { align-items: center; border: 2px solid #111; border-radius: 2mm; display: inline-flex; font: 600 17pt var(--body); height: 13mm; justify-content: center; min-width: 17mm; padding: 0 2mm; box-sizing: border-box; }
.seq-num .cel.vazia { border-style: dashed; }
.regra { align-items: flex-end; display: flex; font-size: 12pt; gap: 2mm; margin: -1mm 0 3mm; }
.digital { border: 2px solid #111; border-radius: 2mm; font: 600 15pt var(--body); letter-spacing: .05em; margin: 0; padding: 1mm 3mm; }
.produto { align-items: center; display: flex; gap: 3mm; }
.preco { background: #fff36b; border: 1.5px solid #111; border-radius: 2mm; font: 600 15pt var(--body); padding: 0 2.5mm; }
.linha-produto { flex-direction: row; justify-content: space-between; }
.linha-produto .desenho { justify-content: flex-start; }
.tabela-folha { border-collapse: collapse; font-size: 13pt; width: 100%; }
.tabela-folha th, .tabela-folha td { border: 1.5px solid #111; height: 11mm; padding: 1mm 3mm; text-align: left; }
.tabela-folha th { background: #f4f4f2; font-weight: 600; }
.tabela-folha td svg { vertical-align: middle; }
.ligar { display: grid; gap: 4mm; }
.ligar-par { align-items: center; display: grid; grid-template-columns: 58mm 6mm 1fr 6mm 58mm; }
.ligar-lado { align-items: center; display: flex; font-size: 15pt; gap: 3mm; }
.ligar-lado.direita { justify-content: flex-start; }
.ponto { background: #111; border-radius: 50%; display: block; height: 4mm; width: 4mm; }

/* nível A: letra e espaços maiores */
.folha[data-versao="A"] .instrucao { font-size: 17pt; }
.folha[data-versao="A"] .bloco { margin-bottom: 7mm; }
.folha[data-versao="A"] .grade { gap: 5mm; }
.folha[data-versao="C"] .instrucao { font-size: 13pt; }
.folha[data-versao="C"] .conta { font-size: 16pt; }

/* folha do professor */
.folha-prof h3 { font: 800 13pt var(--display); margin: 3mm 0 1mm; }
.folha-prof p, .folha-prof li { font-size: 10.5pt; line-height: 1.45; }
.folha-prof p { margin: 0 0 1.5mm; }
.folha-prof ul, .folha-prof ol { margin: 0 0 1.5mm; padding-left: 5mm; }
.folha-prof .lembrete { border: 1.5px solid #111; border-radius: 3mm; margin-top: 3mm; padding: 2mm 3mm; }

/* kit de apoio */
.intro-folha { font-size: 11pt; margin: 0 0 4mm; }
.cartoes { display: grid; gap: 3mm; grid-template-columns: repeat(4, 1fr); }
.cartao-num { align-items: center; border: 1.5px dashed #6b6b6b; display: flex; flex-direction: column; gap: 1mm; padding: 2mm; }
.cartao-num b { font: 800 24pt/1 var(--display); }
.prim-dep { display: grid; gap: 5mm; grid-template-columns: 1fr 1fr; }
.prim-dep div { border: 2px solid #111; border-radius: 4mm; display: flex; flex-direction: column; padding: 3mm; }
.prim-dep b { font: 800 18pt var(--display); }
.prim-dep span { height: 42mm; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { align-items: center; display: flex; font-size: 15pt; gap: 4mm; margin: 0 0 3mm; }
.checklist span { border: 2px solid #111; border-radius: 1.5mm; display: inline-block; flex: 0 0 auto; height: 9mm; width: 9mm; }

@media (max-width: 860px) {
    .folhas { overflow: hidden; }
}

@page { size: A4; margin: 0; }
@media print {
    body > *:not(main), main > .texto, .pular { display: none !important; }
    main { padding: 0; }
    .folhas { display: block; margin: 0; }
    .folha { box-shadow: none; break-after: page; margin: 0; page-break-after: always; zoom: 1 !important; }
    .folha:last-child { break-after: auto; page-break-after: auto; }
    .folha.nao-imprimir { display: none !important; }
}

/* peças das fichas por ano */
.quadro-cem { display: grid; grid-template-columns: repeat(var(--colunas), 1fr); width: 100%; }
.quadro-cem span { align-items: center; border: 1.2px solid #111; display: flex; font: 500 12pt var(--body); height: 9.5mm; justify-content: center; margin: -0.6px; }
.quadro-cem span.vazia { background: #fff9c2; }
.quadro-cem span.destaque { font-weight: 700; }
.caixa-grupo { border: 2px solid #111; border-radius: 3mm; display: flex; flex-direction: column; min-height: 34mm; padding: 2mm 3mm; }
.caixa-grupo b { font: 800 13pt var(--display); }
.ligar-grupos { display: grid; gap: 14mm; }
.caixas-cor { display: flex; gap: 6mm; justify-content: space-around; }
.cor { border: 2px solid #111; border-radius: 3mm; font-weight: 600; padding: 6mm 8mm; }
.cor.rosa { background: #fbdcd8; } .cor.verde { background: #d8f0de; } .cor.amarelo { background: #fff3a8; }
.sep { border-left: 2px dashed #111; height: 14mm; margin: 0 4mm; }
.frases { display: grid; gap: 2.5mm; margin-top: 2mm; }
.frases p { align-items: flex-end; display: flex; font-size: 13pt; gap: 2mm; margin: 0; }
.frases-op div { align-items: center; border-bottom: 1px dashed #9a9a96; display: flex; gap: 4mm; justify-content: space-between; padding: 1.5mm 0; }
.frases-op .opcao { font-size: 12pt; min-height: 10mm; }
.opcoes-dias { flex-wrap: wrap; gap: 3mm; }
.opcoes-dias .opcao { font-size: 13pt; min-height: 12mm; }
.calendario { border-collapse: collapse; margin: 0 0 2mm; }
.calendario caption { font: 800 14pt var(--display); margin-bottom: 1.5mm; text-align: left; }
.calendario th, .calendario td { border: 1.5px solid #111; font-size: 12pt; height: calc(var(--cel) * .8); text-align: center; width: var(--cel); }
.calendario th { background: #f4f4f2; font-size: 10pt; font-weight: 600; }
.calendario td.destaque { background: #fff3a8; font-weight: 700; }
.meses { display: grid; gap: 4mm 8mm; grid-template-columns: 1fr 1fr 1fr; }
.meses span { align-items: flex-end; display: flex; gap: 2mm; }
.opcao.texto { font-size: 13pt; min-height: 11mm; padding: 1mm 3mm; white-space: nowrap; }
.opcao.texto.marcada { border-radius: 99px; }
.du:has(.linha-resp), .regra { align-items: flex-end; display: flex; gap: 2mm; width: 100%; }
.folha[data-versao="A"] .opcao.texto { font-size: 16pt; min-height: 13mm; }
.caixa-vazia { border: 2px dashed #111; border-radius: 3mm; display: inline-block; height: 26mm; width: 60mm; }
.linha-medir { align-items: center; display: flex; font-size: 13pt; gap: 4mm; margin: 0 0 4mm; }
.pares { display: grid; gap: 3mm; justify-items: start; }
.conta-menor .conta { font-size: 13pt; }

.pilha-contas { display: flex; flex-direction: column; align-items: center; }
.pilha-contas .conta { margin: 2mm 0; }