/* ==========================================================================
   licao.css — os blocos do texto da aula.

   Vocabulário visual de livro didático: caixa de definição, figura com
   legenda, tabela, curiosidade e citação. A variação entre eles é o que faz
   a criança ler quatro páginas sem cansar — página de parágrafo corrido
   cansa qualquer um, e uma criança de nove anos abandona.

   Tudo é pensado para os dois meios ao mesmo tempo: a tela e o papel. O que
   está aqui em cima vale para a tela; o bloco @media print no fim reformata
   para A4 sem perder nada.
   ========================================================================== */

/* ── Subtítulo de seção ──────────────────────────────────────────────────── */

.curr-texto-corpo .tx-sub {
  font-family: var(--font); font-size: 1.02rem; font-weight: 900;
  letter-spacing: -0.02em; color: var(--dc, var(--primary));
  margin: 1.7rem 0 .6rem; padding-bottom: .3rem;
  border-bottom: 2px solid color-mix(in srgb, var(--dc, var(--primary)) 22%, transparent);
}
.curr-texto-corpo .tx-sub:first-child { margin-top: 0; }

/* ── Destaque ────────────────────────────────────────────────────────────── */

.curr-texto-corpo .tx-destaque {
  border-left: 4px solid var(--dc, var(--primary));
  background: color-mix(in srgb, var(--dc, var(--primary)) 6%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .8rem 1.1rem; margin: 1.2rem 0;
  font-style: italic; font-size: 1.04rem; color: #3A342A;
}

/* ── Caixa de definição ──────────────────────────────────────────────────── */

/* A caixa azul dos livros didáticos. É o recurso com melhor retorno da
   página: a criança volta nela quando esquece, sem reler tudo. */
.curr-texto-corpo .tx-definicao {
  background: linear-gradient(135deg, #DDEBFA 0%, #CFE2F7 100%);
  border: 2px solid #A9C9EC; border-radius: var(--radius);
  padding: 1rem 1.3rem; margin: 1.3rem 0; text-align: center;
  font-family: var(--font); line-height: 1.65;
}
.curr-texto-corpo .tx-def-termo {
  display: block; font-size: .72rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em;
  color: #1B4C99; margin-bottom: .3rem;
}
.curr-texto-corpo .tx-def-txt { font-size: 1rem; font-weight: 800; color: #16325C; }

/* ── Frase-foco de inglês (a frase inteira + a voz nativa) ───────────────── */

.curr-texto-corpo .tx-fala {
  background: linear-gradient(135deg, #E6ECF7 0%, #D8E1F2 100%);
  border: 2px solid #B3C2E0; border-radius: var(--radius);
  padding: 1rem 1.3rem; margin: 1.3rem 0;
  font-family: var(--font); line-height: 1.55;
}
.tx-fala-en {
  display: flex; align-items: center; gap: .6rem; justify-content: center;
  flex-wrap: wrap;
}
.tx-fala-frase { font-size: 1.15rem; font-weight: 900; color: #274690; }
.tx-fala-play {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: none; background: #274690; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .1s ease, background .15s ease;
}
.tx-fala-play:hover { background: #1C3670; transform: scale(1.08); }
.tx-fala-play:active { transform: scale(.95); }
.tx-fala-play svg { width: 15px; height: 15px; }
/* Sem voz de inglês no aparelho: botão apagado, não fala errado (o title explica). */
.tx-fala-play.sem-voz { background: #9AA6BF; cursor: help; }
.tx-fala-play.sem-voz:hover { background: #9AA6BF; transform: none; }
.tx-fala-vel {
  flex: none; font-family: var(--font); font-size: .78rem; font-weight: 800;
  color: #274690; background: #fff; border: 2px solid #B3C2E0;
  border-radius: 999px; padding: .18rem 1.5rem .18rem .5rem; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23274690' stroke-width='3' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .45rem center;
}
.tx-fala-vel:hover { border-color: #274690; }
.tx-fala-pt {
  text-align: center; font-size: .95rem; font-weight: 700;
  color: #16325C; margin-top: .45rem;
}
.tx-fala-quando {
  text-align: center; font-size: .82rem; color: var(--text-muted);
  margin-top: .3rem;
}

/* ── Bilíngue: toggle PT|EN + narração da aula inteira ───────────────────── */
.curr-lang { display: inline-flex; border: 2px solid #274690; border-radius: 999px; overflow: hidden; }
.curr-lang .cl-bt {
  border: none; background: #fff; color: #274690; font-weight: 800;
  font-size: .78rem; padding: .2rem .7rem; cursor: pointer;
}
.curr-lang .cl-bt.on { background: #274690; color: #fff; }
.curr-narrar {
  display: flex; flex-direction: column; gap: .55rem;
  background: linear-gradient(135deg, #E6ECF7 0%, #D8E1F2 100%);
  border: 2px solid #B3C2E0; border-radius: var(--radius);
  padding: .75rem 1rem; margin: 0 0 1.3rem;
}
.curr-narrar .np-label {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font); font-weight: 800; color: #274690; font-size: .92rem;
}
.curr-narrar .np-label svg { width: 13px; height: 13px; }
.curr-narrar .np-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.curr-narrar .np-btn {
  flex: none; border: none; background: #274690; color: #fff; cursor: pointer;
  border-radius: 8px; padding: .32rem .55rem; font-weight: 800; font-size: .78rem;
  line-height: 1; font-family: var(--font);
}
.curr-narrar .np-btn.np-play {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.curr-narrar .np-btn:active { transform: translateY(1px); }
.curr-narrar .np-btn.sem-voz { background: #9AA6BF; cursor: help; }
.curr-narrar .np-prog { flex: 1; min-width: 120px; height: 6px; accent-color: #274690; cursor: pointer; }
.curr-narrar .np-time {
  font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 700;
  color: #274690; white-space: nowrap;
}
.curr-narrar .tx-fala-vel { margin-left: auto; }

/* Follow-highlight: a frase/bloco sendo lido na narração (marca-texto). */
.curr-texto-corpo .ns { border-radius: 3px; transition: background-color .25s ease, box-shadow .25s ease; }
.curr-texto-corpo span.ns.narr-lendo {
  background: #FFEE9C; box-shadow: 0 0 0 3px #FFEE9C;
}
.curr-texto-corpo div.ns.narr-lendo {
  outline: 3px solid #FFD84D; outline-offset: 3px; border-radius: 8px;
}

/* ── Figura ──────────────────────────────────────────────────────────────── */

.curr-texto-corpo .tx-figura { margin: 1.5rem 0; }
.tx-fig-caixa {
  background: #fff; border: 2px solid var(--border);
  border-radius: var(--radius); padding: .6rem; overflow: hidden;
}
.fig-svg { display: block; width: 100%; height: auto; }
.curr-texto-corpo .tx-figura figcaption {
  font-family: var(--font); font-size: .8rem; line-height: 1.55;
  color: var(--text-muted); text-align: center;
  margin-top: .55rem; padding: 0 .5rem;
}

/* ── Diagrama de frase (análise sintática em caixas, JÁ RESOLVIDO) ────────── */

.curr-texto-corpo .tx-diagrama { margin: 1.6rem 0; }
.txd-frase {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center; align-items: stretch;
  background: #fff; border: 2px solid var(--border);
  border-radius: var(--radius); padding: 1rem .8rem;
}
.txd-seg {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .55rem .8rem .5rem;
  border: 2px solid var(--pc); border-bottom-width: 4px;
  border-radius: 10px; background: color-mix(in srgb, var(--pc) 8%, #fff);
}
.txd-palavra { font-family: var(--font); font-weight: 600; font-size: 1.05rem; color: var(--text); }
.txd-papel {
  font-family: var(--font); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--pc);
}
.curr-texto-corpo .tx-diagrama figcaption {
  font-family: var(--font); font-size: .82rem; line-height: 1.55;
  color: var(--text-muted); text-align: center; margin-top: .6rem; padding: 0 .5rem;
}

.txd-rk { display: block; padding: 1.1rem .8rem; }

/* Versão impressa: sem cor de fundo, só contorno e rótulo. */
.pr-diagrama { margin: 8pt 0; text-align: center; }
.prd-frase { display: flex; flex-wrap: wrap; gap: 5pt; justify-content: center; }
.prd-seg {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2pt;
  padding: 4pt 7pt; border: 1pt solid; border-bottom-width: 2.5pt; border-radius: 5pt;
}
.prd-palavra { font-weight: 600; font-size: 11pt; }
.prd-papel { font-size: 7pt; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.pr-diagrama figcaption { font-size: 8.5pt; color: #555; margin-top: 4pt; }

/* ── Obra de arte para buscar ────────────────────────────────────────────── */

.curr-texto-corpo .tx-obra {
  background: #FAF6EE; border: 2px dashed #C9A05C;
  border-radius: var(--radius); padding: .95rem 1.2rem; margin: 1.4rem 0;
  font-family: var(--font);
}
.tx-obra-cab {
  display: flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: .08em; color: #8A6410; margin-bottom: .5rem;
}
.tx-obra-cab svg { width: 15px; height: 15px; }
.tx-obra-ficha { line-height: 1.5; }
.tx-obra-ficha strong { font-size: .98rem; display: block; color: #4A3A16; }
.tx-obra-ficha span { font-size: .85rem; color: #7A6440; }
.tx-obra-museu { display: block; font-style: italic; }
.tx-obra-ver {
  font-size: .87rem !important; line-height: 1.65; margin-top: .6rem;
  padding-top: .55rem; border-top: 1px solid #E0CDA8; color: #4A4030;
}

/* Aviso de obra que NÃO PODE vir dentro da plataforma (direito autoral vivo).
   Fica antes do "O que olhar" de propósito: o pai precisa saber que tem de
   abrir a imagem por fora ANTES de ler o que deve procurar nela. */
.tx-obra-sem {
  display: flex; align-items: flex-start; gap: .45rem;
  font-size: .84rem !important; line-height: 1.6; margin-top: .6rem;
  padding: .5rem .65rem; border-radius: calc(var(--radius) * .6);
  background: #F3E7CE; color: #6B5220;
}
.tx-obra-sem svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: .18rem; }

/* ── Chamada ao atlas ────────────────────────────────────────────────────── */

.curr-texto-corpo .tx-atlas {
  background: #E8F4F1; border: 2px solid #00B3A4;
  border-radius: var(--radius); padding: .95rem 1.2rem; margin: 1.4rem 0;
  font-family: var(--font);
}
.tx-atlas-cab {
  display: flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: .08em; color: #00776D; margin-bottom: .45rem;
}
.tx-atlas-cab svg { width: 16px; height: 16px; }
.tx-atlas-onde { font-size: .95rem; color: #044A44; }
.curr-texto-corpo .tx-atlas-txt {
  font-size: .88rem !important; line-height: 1.65; margin-top: .5rem; color: #0A3F3A;
}
.curr-texto-corpo .tx-atlas-nota {
  font-size: .78rem !important; font-style: italic; color: #4A7A74;
  margin-top: .6rem; padding-top: .5rem; border-top: 1px solid #B5DDD7;
}

/* ── Tabela ──────────────────────────────────────────────────────────────── */

.curr-texto-corpo .tx-tabela { margin: 1.4rem 0; }
.tx-tab-rolagem { overflow-x: auto; border-radius: var(--radius-sm); }
.curr-texto-corpo .tx-tabela table {
  width: 100%; border-collapse: collapse; font-family: var(--font); font-size: .88rem;
}
.curr-texto-corpo .tx-tabela th {
  background: color-mix(in srgb, var(--dc, var(--primary)) 16%, #fff);
  color: #2A2620; font-weight: 900; text-align: left;
  padding: .6rem .8rem; border: 1px solid var(--border);
}
.curr-texto-corpo .tx-tabela td {
  padding: .55rem .8rem; border: 1px solid var(--border);
  line-height: 1.55; vertical-align: top; background: #fff;
}
.curr-texto-corpo .tx-tabela tbody tr:nth-child(even) td { background: #FBF9F4; }
.curr-texto-corpo .tx-tabela figcaption {
  font-size: .78rem; color: var(--text-muted); text-align: center; margin-top: .45rem;
}

/* ── Curiosidade ─────────────────────────────────────────────────────────── */

.curr-texto-corpo .tx-curiosidade {
  background: #FEF6E0; border: 2px solid #F5C954;
  border-radius: var(--radius); padding: .9rem 1.2rem; margin: 1.4rem 0;
  font-family: var(--font);
}
.tx-cur-cab {
  display: flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 900; color: #8A6410; margin-bottom: .35rem;
}
.tx-cur-cab svg { width: 15px; height: 15px; }
.curr-texto-corpo .tx-curiosidade p {
  font-size: .92rem !important; line-height: 1.7; color: #4A4030; margin: 0 !important;
}

/* ── Citação de fonte ────────────────────────────────────────────────────── */

.curr-texto-corpo .tx-citacao {
  border: none; background: #F4F1EB; border-radius: var(--radius);
  padding: 1rem 1.4rem; margin: 1.3rem 0; position: relative;
}
.curr-texto-corpo .tx-citacao::before {
  content: '\\201C'; position: absolute; top: -.1rem; left: .5rem;
  font-family: Georgia, serif; font-size: 3rem; color: #C9C2B4; line-height: 1;
}
.curr-texto-corpo .tx-citacao p {
  font-style: italic; font-size: 1.02rem; padding-left: 1.4rem; margin: 0 !important;
}
.curr-texto-corpo .tx-citacao cite {
  display: block; margin-top: .5rem; padding-left: 1.4rem;
  font-family: var(--font); font-size: .8rem; font-style: normal;
  font-weight: 800; color: var(--text-muted);
}

/* ── Listas ──────────────────────────────────────────────────────────────── */

.curr-texto-corpo .tx-lista { padding-left: 1.5rem; margin: .9rem 0; list-style: revert; }
.curr-texto-corpo .tx-lista li { margin-bottom: .45rem; line-height: 1.75; }

/* ── Botões de impressão ─────────────────────────────────────────────────── */

.curr-pdf-menu { position: relative; display: inline-block; }
.curr-pdf-lista {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 60;
  background: var(--bg-card); border: 2px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 290px; padding: .4rem; display: none;
}
.curr-pdf-menu.aberto .curr-pdf-lista { display: block; }
.curr-pdf-lista button {
  display: flex; align-items: flex-start; gap: .6rem; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font); padding: .6rem .7rem; border-radius: var(--radius-sm);
  transition: var(--transition);
}
.curr-pdf-lista button:hover { background: var(--bg-muted); }
.curr-pdf-lista svg { width: 17px; height: 17px; color: var(--primary); flex-shrink: 0; margin-top: .15rem; }
.curr-pdf-lista strong { display: block; font-size: .86rem; font-weight: 800; }
.curr-pdf-lista span { display: block; font-size: .76rem; color: var(--text-muted); line-height: 1.45; }

@media (max-width: 860px) {
  .curr-texto-corpo .tx-definicao { padding: .85rem 1rem; }
  .curr-texto-corpo .tx-def-txt { font-size: .94rem; }
  .curr-pdf-lista { right: auto; left: 0; min-width: 260px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   IMPRESSÃO — a folha e a apostila
   ══════════════════════════════════════════════════════════════════════════ */

@media print {

  #curr-print h2.pr-h2 {
    font-size: 12pt; font-weight: 900; color: #001e3e;
    margin: 14pt 0 5pt; text-transform: none; letter-spacing: 0;
    border-bottom: 1.5pt solid #001e3e; padding-bottom: 2pt;
  }

  /* Texto da aula em duas colunas: é o que faz caber uma aula por folha sem
     apertar a fonte. Coluna estreita ainda é a mais fácil de ler em voz alta. */
  .pr-texto { columns: 2; column-gap: 16pt; margin-top: 6pt; }
  .pr-texto > * { break-inside: avoid; }
  .pr-texto p { font-size: 9.8pt; line-height: 1.52; margin-bottom: 6pt; text-align: justify; }
  .pr-texto h4 {
    font-size: 10pt; font-weight: 900; color: #001e3e;
    margin: 8pt 0 3pt; break-after: avoid;
  }

  .pr-def {
    background: #DDEBFA !important; border: 1pt solid #A9C9EC;
    border-radius: 4pt; padding: 6pt 9pt; margin: 7pt 0; text-align: center;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    break-inside: avoid;
  }
  .pr-def-termo {
    display: block; font-size: 7pt; font-weight: 900; text-transform: uppercase;
    letter-spacing: .08em; color: #1B4C99; margin-bottom: 2pt;
  }
  .pr-def-txt { font-size: 9.5pt; font-weight: 800; color: #16325C; }

  .pr-destaque {
    border-left: 2.5pt solid #001e3e; background: #f4efe3 !important;
    padding: 5pt 8pt; margin: 7pt 0; font-style: italic; font-size: 9.5pt;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid;
  }

  .pr-fig { margin: 8pt 0; break-inside: avoid; column-span: all; }
  .pr-fig svg { width: 100%; height: auto; max-height: 200pt; display: block; }
  .pr-fig figcaption {
    font-size: 8pt; color: #4a4436; text-align: center; margin-top: 3pt; font-style: italic;
  }

  .pr-obra {
    border: 1pt dashed #a97f2b; background: #fffdf9 !important;
    padding: 6pt 9pt; margin: 7pt 0; font-size: 9pt; break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .pr-obra strong { display: block; font-size: 9.5pt; }
  /* No papel o aviso importa ainda mais: quem imprime a apostila não tem a tela
     por perto para descobrir sozinho por que aquele quadro não veio junto. */
  .pr-obra-sem {
    margin-top: 3pt; padding: 3pt 5pt; font-size: 8.5pt; color: #6B5220;
    background: #f6ecd8 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  .pr-atlas {
    border: 1pt solid #a97f2b; background: #f4efe3 !important;
    padding: 5pt 8pt; margin: 7pt 0; font-size: 9pt; break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .pr-atlas strong { color: #123a5c; }

  .pr-tab { margin: 8pt 0; break-inside: avoid; }
  .pr-tab table { width: 100%; border-collapse: collapse; font-size: 8.6pt; }
  .pr-tab th {
    background: #f4efe3 !important; font-weight: 900; text-align: left;
    padding: 3pt 5pt; border: .6pt solid #a97f2b;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .pr-tab td { padding: 3pt 5pt; border: .6pt solid #ddd5c4; line-height: 1.4; }

  .pr-cur {
    border: 1pt solid #efe4c9; background: #efe4c9 !important;
    padding: 5pt 8pt; margin: 7pt 0; font-size: 9pt; break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .pr-cur strong { color: #8A6410; }

  .pr-cit {
    background: #f4efe3 !important; padding: 6pt 9pt; margin: 7pt 0;
    font-style: italic; font-size: 9.4pt; break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .pr-cit cite { display: block; font-style: normal; font-weight: 800; font-size: 8pt; margin-top: 3pt; }

  /* Atividades */
  .pr-ativ { margin-top: 10pt; break-inside: avoid; }
  .pr-ativ-item { margin-bottom: 8pt; break-inside: avoid; }
  .pr-ativ-item h4 { font-size: 9.6pt; font-weight: 900; }
  .pr-ativ-item p { font-size: 9.4pt; line-height: 1.55; margin-top: 2pt; }
  .pr-gab {
    font-size: 8.4pt; color: #123a5c; background: #f4efe3 !important;
    border-left: 2pt solid #a97f2b; padding: 4pt 7pt; margin-top: 3pt;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* ── A MARGEM DO PAPEL E O CARIMBO ─────────────────────────────────────
     Os dois moram na mesma regra porque são o mesmo problema.

     Antes, a margem era um `padding` no #curr-print e o carimbo era um
     elemento `position: fixed` no pé. Padding de div só existe na PRIMEIRA e
     na ÚLTIMA folha: da segunda em diante o texto começava colado na borda de
     cima e descia até a de baixo, onde o carimbo fixo ficava por cima da
     última linha. O dono viu isso em 07/09/2026, nas apostilas que imprimiu
     no dia do lançamento.

     O único jeito de uma margem repetir em TODA folha é `@page`. E o único
     lugar onde um rodapé cabe sem cobrir texto é a caixa de margem da página
     (`@bottom-left`), que o Chrome desenha desde a versão 131. `position:
     fixed` foi testado junto com páginas nomeadas e saiu errático: aparecia no
     alto de uma folha e sumia da seguinte.

     O texto do carimbo entra por variável CSS, que o curriculo.js grava no
     <html> na hora de imprimir (currCarimbo). Caixa de margem só aceita
     `content`, e `content` não lê o DOM — mas lê `var()` herdada da raiz.

     As caixas de cima recebem um espaço em branco de propósito: caixa de
     margem ocupada faz o Chrome deixar de imprimir a data e o título dele
     ali. Sem isso, com a margem aberta, ele volta a carimbar "07/09/2026,
     19:17" no canto da folha da criança.

     Esta regra tem de vir DEPOIS do `@page { margin: 0 }` do _pagina.css —
     por isso o app/index.html carrega aquele arquivo antes deste. `@page`
     vale para o documento inteiro e a última declaração ganha. */
  @page {
    size: A4;
    margin: 16mm 14mm 18mm;
    @top-left   { content: " "; }
    @top-center { content: " "; }
    @top-right  { content: " "; }
    @bottom-left {
      content: var(--pr-carimbo-conta, "");
      font: 700 7pt var(--font, 'Inter', system-ui, sans-serif);
      color: #8f8878; letter-spacing: .01em;
      vertical-align: top; padding-top: 3mm;
    }
    @bottom-center { content: " "; }
    @bottom-right {
      content: var(--pr-carimbo-quando, "");
      font: 400 7pt var(--font, 'Inter', system-ui, sans-serif);
      color: #8f8878; white-space: nowrap;
      vertical-align: top; padding-top: 3mm;
    }
  }

  /* A capa e a folha da criança continuam sangrando até a borda: página
     nomeada, sem margem. Na página sem margem a caixa de margem tem altura
     zero e não desenha nada — o carimbo delas é o ::after logo abaixo. */
  @page sangra { margin: 0; }
  .pr-capa, .pr-contracapa, .pr-complementares .folha { page: sangra; }

  /* O carimbo da capa e da contracapa. Cinza claro e 7pt: tem de ser
     legível quando alguém for conferir, e não tem de competir com a capa. A
     folha da criança NÃO entra aqui: ela já nasce com o próprio carimbo
     (IMPF.carimbo, no _folhas.js), e um segundo por cima saía duplicado. */
  .pr-capa::after, .pr-contracapa::after {
    content: var(--pr-carimbo-conta, "") "   " var(--pr-carimbo-quando, "");
    position: absolute; bottom: 3mm; left: 14mm; right: 14mm;
    font: 400 7pt var(--font, 'Inter', system-ui, sans-serif);
    color: #8f8878; line-height: 1.3; white-space: pre-wrap;
    border-top: .4pt solid #ddd5c4; padding-top: 2pt;
    text-align: left;
  }

  /* ── A CAPA ───────────────────────────────────────────────────────────
     Papelaria da marca: faixa azul-marinho em cima, corpo creme embaixo, ouro
     nos rótulos. A mesma da folha de complementares — a família que imprime as
     duas vê que saíram da mesma casa.

     O BRASÃO É GRANDE E CENTRADO. Capa é a página que a família olha de longe,
     na pilha em cima da mesa, e o que ela reconhece de longe é a marca — não a
     linha de texto. A versão anterior tinha o brasão do tamanho de um favicon
     no canto, e de longe a capa era um retângulo azul qualquer.

     A cor sobrevive à impressora graças ao `print-color-adjust` do _pagina.css:
     o Chrome imprime SEM gráficos de fundo por padrão, e sem aquela regra esta
     capa chega ao papel branca. */

  .pr-capa {
    break-after: page;
    /* Sangra até as QUATRO bordas porque vive numa página nomeada sem margem
       (`page: sangra`, acima). Capa que não fecha na borda parece erro de
       impressão, não escolha. `position: relative` é para o carimbo ::after. */
    margin: 0; position: relative;
    min-height: 297mm;
    display: flex; flex-direction: column;
    text-align: center;
  }

  .pr-capa-band {
    background: #001e3e; color: #fff;
    padding: 24mm 18mm 18mm;
  }
  /* `logo.png`, e NÃO `logo-branco-azul.png`: aquele traz uma placa navy
     própria (rgb 0,24,61) que não bate com o azul da marca (#001e3e), e o
     retângulo aparecia recortado no meio da faixa. Este é o brasão em branco
     puro sobre transparência — some na faixa, como brasão deve fazer. */
  .pr-capa-brasao { height: 62mm; margin: 0 auto 7mm; display: block; }
  .pr-capa-casa {
    font-size: 8.5pt; font-weight: 800; letter-spacing: .2em;
    text-transform: uppercase; color: #efe4c9;
  }
  .pr-capa-fio {
    width: 46mm; height: 1.6pt; background: #a97f2b;
    margin: 7mm auto 6mm;
  }
  .pr-capa-selo {
    font-size: 8.5pt; font-weight: 800; letter-spacing: .18em;
    text-transform: uppercase; color: #c3d0dd;
  }
  .pr-capa h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 52pt; font-weight: 600; letter-spacing: -0.01em;
    margin: 2pt 0 5pt; line-height: 1; color: #fff;
  }
  .pr-capa-sub { font-size: 12pt; color: #c3d0dd; margin: 0; }

  .pr-capa-corpo {
    padding: 12mm 18mm 20mm; background: #f4efe3; flex: 1;
    text-align: left;
  }

  /* A PLACA DO ALUNO. Fica no alto do creme, sozinha, porque é o que a mãe
     procura quando separa a pilha de um filho da pilha do outro. */
  .pr-capa-aluno {
    display: flex; align-items: baseline; gap: 8pt;
    border-bottom: 1.2pt solid #ddd5c4;
    padding-bottom: 5pt; margin-bottom: 11mm;
  }
  .pr-capa-aluno .k {
    font-size: 8pt; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: #8A6410; flex-shrink: 0;
  }
  .pr-capa-aluno .v {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20pt; font-weight: 600; color: #001e3e; line-height: 1.1;
    flex: 1; min-height: 20pt;   /* a linha existe mesmo sem nome, para escrever à mão */
  }

  /* A FICHA: ano, semana e aula em letras de placa, logo abaixo do aluno.
     É o que se lê de longe, na pilha: de qual ano é, de qual semana, de qual
     aula. Os detalhes miúdos ficam para a lista de baixo. */
  .pr-capa-ficha {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8pt 12pt;
    margin-bottom: 11mm;
  }
  .pr-capa-ficha > div { border-top: 1.6pt solid #a97f2b; padding-top: 5pt; min-width: 0; }
  .pr-capa-ficha strong {
    display: block; font-size: 7.5pt; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: #8A6410; margin-bottom: 2pt;
  }
  .pr-capa-ficha span {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 16pt; font-weight: 600; color: #001e3e; line-height: 1.15;
    display: block; overflow-wrap: anywhere;
  }

  .pr-capa-kicker {
    font-size: 8pt; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: #8A6410; margin: 0 0 6pt;
  }
  .pr-capa-meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6pt 16pt;
    font-size: 9.5pt; color: #4a4436; line-height: 1.45; margin-bottom: 12mm;
  }
  .pr-capa-meta > div {
    border-left: 2pt solid #ddd5c4; padding-left: 7pt; break-inside: avoid;
  }
  .pr-capa-meta strong {
    display: block; font-size: 7.5pt; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: #736c5c;
  }
  .pr-capa-regra {
    border: 1.2pt solid #a97f2b; border-radius: 4pt;
    padding: 8pt 10pt; font-size: 9pt; color: #4a4436; line-height: 1.5;
  }
  .pr-capa-regra b {
    display: block; font-size: 8pt; letter-spacing: .1em; text-transform: uppercase;
    color: #8A6410; margin-bottom: 3pt;
  }

  /* ── A CONTRACAPA ─────────────────────────────────────────────────────
     Última página de tudo (currContracapaImpressa, na porta única). A capa
     invertida: azul-marinho inteiro, brasão grande no meio, o nome da casa.

     `height` e não `min-height`, e `overflow: hidden`: com min-height o Chrome
     arredondava 297,00 mm para 297,01 e empurrava um fio para uma página
     seguinte em branco — a mesma armadilha registrada no _folha.css. */
  .pr-contracapa {
    break-before: page; position: relative;
    height: 297mm; box-sizing: border-box; overflow: hidden;
    background: #001e3e; color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 20mm 18mm 24mm;
  }
  .pr-contracapa-brasao { height: 84mm; display: block; margin: 0 auto 10mm; }
  .pr-contracapa-nome {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 30pt; font-weight: 600; letter-spacing: -0.01em;
    margin: 0 0 4pt; line-height: 1; color: #fff;
    text-transform: none; border: 0; padding: 0;
  }
  .pr-contracapa-casa {
    font-size: 9pt; font-weight: 800; letter-spacing: .2em;
    text-transform: uppercase; color: #efe4c9;
  }
  .pr-contracapa-fio { width: 46mm; height: 1.6pt; background: #a97f2b; margin: 8mm auto; }
  .pr-contracapa-site { font-size: 11.5pt; color: #c3d0dd; letter-spacing: .04em; }
  .pr-contracapa-nota {
    font-size: 8.5pt; color: #c3d0dd; margin: 14mm 0 0; line-height: 1.55; max-width: 120mm;
  }
  .pr-contracapa-nota b { color: #fff; font-weight: 700; }
  .pr-contracapa::after { color: #9fb0c4; border-top-color: rgba(255,255,255,.22); }

  /* ── A CAPA DAS FOLHAS DENTRO DO APP ───────────────────────────────────
     O caderno de folhas soltas veste o _ferramentas.css: as variáveis de cor
     e fonte e as classes .kicker, .toc, .regra e .rodape. O app não carrega
     aquele arquivo — ele restilizaria o body inteiro — e a capa das folhas
     saía toda azul, sem lista e sem rodapé, no PDF da semana com
     complementares. Aqui vai só o que a capa usa, com o escopo fechado. */
  .pr-complementares {
    --paper: #f4efe3; --card: #fffdf9; --navy: #001e3e; --navy2: #123a5c;
    --ink: #22303d; --muted: #736c5c; --line: #ddd5c4;
    --gold: #a97f2b; --gold-deep: #8a6415; --gold-soft: #efe4c9;
    --wine: #8a3324; --wine-soft: #efdfd9;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  }
  .pr-complementares .kicker {
    font: 700 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep);
  }
  .pr-complementares .regra {
    background: var(--gold-soft); border: 1px solid #e3d5b2; border-left: 4px solid var(--gold);
    border-radius: 8px; padding: 11px 15px; margin-top: 12px;
  }
  .pr-complementares .regra .k { font: 700 9px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
  .pr-complementares .regra p { font-family: var(--serif); font-weight: 600; font-size: 15.5px; color: var(--navy); margin: 4px 0 0; line-height: 1.4; }
  .pr-complementares .rodape {
    margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: center;
    font: 400 9px var(--sans); color: var(--muted); letter-spacing: .03em;
  }
  .pr-complementares .rodape strong { color: var(--navy); font-weight: 700; letter-spacing: .06em; }
  .pr-complementares .rodape .pg { font-weight: 700; color: var(--navy); }
  .pr-complementares .toc { list-style: none; margin: 0; padding: 0; }
  .pr-complementares .toc li { display: flex; gap: 13px; align-items: center; padding: 8px 0; border-bottom: 1px solid #ebe4d3; }
  .pr-complementares .toc li:last-child { border-bottom: 0; }
  .pr-complementares .toc .num {
    flex: 0 0 auto; background: var(--gold-soft); color: var(--navy);
    font: 700 10px var(--sans); border-radius: 6px; padding: 7px 0; min-width: 40px; text-align: center;
  }
  .pr-complementares .toc .tx h4 { font: 700 12.5px var(--sans); color: var(--navy); margin: 0; }
  .pr-complementares .toc .tx p { font: 400 10.5px var(--sans); color: var(--muted); margin: 2px 0 0; }

  /* Sumário */
  .pr-sumario { break-after: page; }
  .pr-sum-item {
    display: flex; justify-content: space-between; gap: 8pt;
    font-size: 10pt; padding: 3pt 0; border-bottom: .5pt dotted #ddd5c4;
  }
  .pr-sum-item span:first-child { font-weight: 700; }
  .pr-sum-item span:last-child { color: #736c5c; white-space: nowrap; }

  /* Cada lição da apostila começa em página nova */
  .pr-licao { break-before: page; }
  .pr-licao:first-of-type { break-before: auto; }
  .pr-licao-tag {
    font-size: 8pt; font-weight: 900; text-transform: uppercase;
    letter-spacing: .09em; color: #001e3e;
  }
  .pr-licao h1 {
    font-size: 17pt; font-weight: 900; letter-spacing: -0.02em;
    line-height: 1.15; margin: 2pt 0 4pt;
  }
  .pr-licao-meta { font-size: 8.5pt; color: #736c5c; margin-bottom: 8pt; }
}

/* ── Mapa de imagem ──────────────────────────────────────────────────────── */

/* Mapa é o único caso em que a imagem ganha do desenho, e por larga margem:
   forma de país não se aproxima, se reproduz. */
.curr-texto-corpo .tx-mapa { margin: 1.6rem 0; }
.tx-mapa-caixa {
  background: #fff; border: 2px solid var(--border); border-radius: var(--radius);
  padding: .5rem; overflow: hidden;
}
.tx-mapa-caixa img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-sm); cursor: zoom-in;
}
.curr-texto-corpo .tx-mapa figcaption {
  font-family: var(--font); font-size: .82rem; line-height: 1.6;
  color: var(--text-muted); margin-top: .6rem; text-align: center; padding: 0 .5rem;
}
.curr-texto-corpo .tx-mapa figcaption strong {
  display: block; font-size: .92rem; color: var(--text); margin-bottom: .2rem;
}
.tx-mapa-fonte {
  display: block; font-size: .74rem; font-style: italic;
  color: var(--text-light); margin-top: .35rem;
}
.tx-mapa-ver {
  display: flex; gap: .5rem; align-items: flex-start;
  background: var(--info-bg); border-radius: var(--radius-sm);
  padding: .65rem .9rem; margin-top: .7rem;
  font-family: var(--font); font-size: .86rem; line-height: 1.6; color: #1E3A8A;
}
.tx-mapa-ver svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: .15rem; }

/* Arquivo ainda não instalado: falha honesta, com o caminho e a busca. */
.tx-mapa-falta {
  display: grid; justify-items: center; gap: .4rem; text-align: center;
  padding: 2.2rem 1.2rem; background: var(--bg-muted);
  border: 2px dashed var(--border); border-radius: var(--radius-sm);
  font-family: var(--font);
}
.tx-mapa-falta svg { color: var(--text-light); }
.tx-mapa-falta strong { font-size: 1rem; }
.tx-mapa-falta span { font-size: .84rem; color: var(--text-muted); }
.tx-mapa-falta code {
  font-family: ui-monospace, monospace; font-size: .8rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .25rem .6rem; color: var(--primary-dark);
}
.tx-mapa-busca { font-size: .78rem !important; font-style: italic; }
.tx-mapa-busca em { font-style: normal; font-weight: 800; }

@media print {
  .pr-mapa { margin: 8pt 0; break-inside: avoid; column-span: all; text-align: center; }
  .pr-mapa img { max-width: 100%; max-height: 240pt; height: auto; }
  .pr-mapa figcaption {
    font-size: 8pt; color: #4a4436; margin-top: 3pt; line-height: 1.4;
  }
  .pr-mapa figcaption em { display: block; font-size: 7.5pt; color: #736c5c; }
}

/* ── Acervo de mapas ─────────────────────────────────────────────────────── */

.mapas-filtros { display: grid; gap: .7rem; margin-bottom: 1.2rem; }
.mapas-busca { max-width: 520px; }

.mapas-grade {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.mapa-card {
  background: var(--bg-card); border: 2px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
  display: grid; grid-template-rows: auto 1fr; transition: var(--transition);
}
.mapa-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }

.mapa-visual { position: relative; aspect-ratio: 3 / 2; background: var(--bg-muted); overflow: hidden; }
.mapa-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapa-falta-selo {
  display: none; position: absolute; inset: 0; place-items: center;
  font-size: .78rem; font-weight: 800; color: var(--text-light);
  background: var(--bg-muted); text-align: center; padding: 1rem;
}
.mapa-card.falta .mapa-visual img { display: none; }
.mapa-card.falta .mapa-falta-selo { display: grid; }

.mapa-card figcaption { padding: .8rem .9rem 1rem; display: grid; gap: .4rem; align-content: start; }
.mapa-card figcaption h3 { font-size: .9rem; font-weight: 900; letter-spacing: -0.015em; line-height: 1.25; }
.mapa-card figcaption p {
  font-size: .8rem; color: var(--text-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mapa-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .1rem; }
.mapa-ano {
  font-size: .68rem; font-weight: 900; background: var(--primary-light);
  color: var(--primary-dark); border-radius: var(--radius-full); padding: .1rem .45rem;
}
.mapa-bncc {
  font-size: .66rem; font-weight: 800; background: var(--bg-muted);
  color: var(--text-muted); border-radius: var(--radius-full); padding: .1rem .45rem;
  font-family: ui-monospace, monospace;
}

/* Lupa: o mapa em tela grande, dentro do modal. */
.mapa-lupa {
  background: var(--bg-muted); border-radius: var(--radius);
  overflow: hidden; display: grid; place-items: center; max-height: 60vh;
}
.mapa-lupa img { max-width: 100%; max-height: 60vh; object-fit: contain; display: block; }
.mapa-lupa-falta { padding: 3rem; color: var(--text-light); font-size: .9rem; text-align: center; }

.mapa-ficha { display: grid; gap: .4rem; }
.mapa-ficha > div {
  display: grid; grid-template-columns: 90px 1fr; gap: .6rem;
  font-size: .84rem; padding: .35rem 0; border-bottom: 1px dashed var(--border);
}
.mapa-ficha > div:last-child { border-bottom: none; }
.mapa-ficha span { color: var(--text-muted); font-weight: 700; }
.mapa-ficha strong { font-weight: 800; }
.mapa-ficha code { font-family: ui-monospace, monospace; font-size: .76rem; color: var(--primary-dark); word-break: break-all; }

.mapa-cat-lista {
  display: grid; gap: .3rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.mapa-cat-item {
  display: flex; justify-content: space-between; gap: .6rem;
  font-size: .82rem; padding: .35rem .6rem; background: var(--bg-muted);
  border-radius: var(--radius-sm);
}
.mapa-cat-item strong { color: var(--primary-dark); }