/* ═══════════════════════════════════════════════════════════════════════
   _folha.css — a FOLHA DA CRIANÇA.

   O _ferramentas.css ao lado é o caderno do PAI: papel creme, serifada de
   exibição, texto para ler. Esta folha é outra coisa — é a folha que a
   criança risca, pinta e recorta. Herda a paleta e o A4 real dali, e muda
   três coisas de propósito:

   1. MUITO MAIS BRANCO. A folha do pai é densa; a folha da criança é vazia,
      porque o vazio é onde ela trabalha.
   2. TRAÇO GROSSO, e a grossura muda por faixa de idade (--traco). Linha
      fina some debaixo do lápis de cera de uma criança de 4 anos.
   3. O enunciado é para a criança OUVIR, não ler — frase de uma linha, em
      corpo grande. Quem lê é o pai, em voz alta, uma vez só.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── As três faixas ──────────────────────────────────────────────────────
   Não é só tamanho de letra: é o que a mão daquela idade consegue seguir.
   --traco  espessura do contorno das figuras, em mm
   --pont   espessura do pontilhado de traçar
   --figura tamanho padrão de uma figura, em mm (nunca menor que 40 nas
            folhas de recorte dos prés — a criança corta torto) */

.folha { --traco: 1.6; --pont: 1.2; --figura: 34; }

.folha.faixa-pequenos { --traco: 1.7;  --pont: 1.3;  --figura: 36; }
.folha.faixa-alfab    { --traco: 1.15; --pont: 0.95; --figura: 28; }
.folha.faixa-grandes  { --traco: 0.55; --pont: 0.45; --figura: 22; }

/* ── A cor da folha ──────────────────────────────────────────────────────

   A folha do PAI é creme com tinta navy — é a papelaria da marca, e continua
   assim na capa. A folha da CRIANÇA é branca com tinta preta, e isso não é
   economia de tinta: é o que faz a folha parecer atividade, e não documento.

   A primeira versão usou navy sobre creme nas duas, e ficou no pior meio-termo:
   nem preto e branco honesto, nem colorido de verdade. Papel colorido também
   come o lápis de cor da criança — o giz amarelo sobre creme não aparece.

   O ouro e o navy da marca sobrevivem num lugar só: o carimbo do rodapé. */

.folha:not(.capa-sem) {
  --paper: #ffffff;
  --card:  #ffffff;
  --navy:  #111111;
  --ink:   #1a1a1a;
  --line:  #d6d6d6;
  --muted: #6f6f6f;
}

/* Modo colorido: a folha continua branca (é papel), mas as figuras saem na
   paleta viva. Quem manda na figura é o _motor.js; aqui só muda o que é
   moldura, para o colorido não brigar com o desenho. */
.folha.modo-cor:not(.capa-sem) {
  --navy: #20242c;
  --ink:  #20242c;
}

/* ── A folha ─────────────────────────────────────────────────────────────
   Mesmas medidas físicas do _ferramentas.css. */

.folha {
  position: relative;
  width: 210mm;
  min-height: 297mm;
  margin: 8mm auto;
  padding: 12mm 14mm 10mm;
  background: var(--paper);
  border-top: 6px solid var(--navy);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  page-break-after: always;
}

.folha.paisagem { width: 297mm; min-height: 210mm; }
.folha:last-child { page-break-after: auto; }

/* ── O cabeçalho ─────────────────────────────────────────────────────────
   As folhas grátis do Google trazem ESCOLA / PROFESSOR / ALUNO / DATA /
   TURMA, e é esse carimbo que faz a mãe reconhecer a folha como material
   sério. A nossa é de CASA: não há escola, não há professor, não há turma.
   Sobra o que existe de verdade — o NOME dela, a DATA, e a semana do
   currículo, que é o que devolve a folha ao seu lugar quando ela cai atrás
   do sofá em março. */

.fcab {
  display: flex; align-items: flex-end; gap: 10mm;
  border: 1.6px solid var(--navy);
  border-radius: 8px;
  padding: 5mm 6mm 4mm;
}
.fcab .campo { flex: 1; }
.fcab .campo.data { flex: 0 0 46mm; }
.fcab .campo .rot {
  font: 700 8.5px var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy);
}
.fcab .campo .ln { display: block; border-bottom: 1.4px solid var(--navy); height: 7mm; }
.fcab .campo.data .ln {
  display: flex; align-items: flex-end; gap: 3mm;
  font: 400 13px var(--sans); color: var(--muted);
}
.fcab .selo {
  flex: 0 0 auto; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  border-left: 1.4px solid var(--line);
  padding-left: 6mm;
  text-align: center;
}
.fcab .selo .curso { font: 700 9px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.fcab .selo .sem   { font: 700 20px var(--serif); color: var(--navy); line-height: 1.05; margin-top: 1px; }

/* ── O enunciado ─────────────────────────────────────────────────────────
   Uma linha. Se não couber numa linha, a tarefa é grande demais para a
   folha — e o problema é a tarefa, não o enunciado. */

.fenun {
  margin: 7mm 0 0;
  font: 700 17px var(--sans);
  color: var(--navy);
  line-height: 1.3;
}
.fenun .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-right: 8px;
  background: var(--navy); color: #fff;
  border-radius: 50%;
  font: 700 13px var(--sans);
  vertical-align: -4px;
}
.fsub { margin: 2mm 0 0 32px; font: 400 11.5px var(--sans); color: var(--muted); }

.faixa-pequenos .fenun { font-size: 19px; }
.faixa-grandes  .fenun { font-size: 14.5px; }
.faixa-grandes  .fenun .n { width: 20px; height: 20px; font-size: 11px; }

/* ── A área de trabalho ──────────────────────────────────────────────────
   flex:1 de propósito: o desenho ocupa o que sobrar da folha, e o que
   sobrar é sempre muito. Folha de criança com pouco branco é folha que ela
   não consegue usar. */

.fcorpo { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6mm; margin: 6mm 0; }
.fcorpo.topo { justify-content: flex-start; }
.fcorpo svg { display: block; width: 100%; height: auto; }

/* ── O rodapé: a nota do pai ─────────────────────────────────────────────
   Vinho, como o "o que se evita" do caderno do pai. É a única coisa da
   folha escrita para o adulto — por isso é pequena e fica fora do caminho
   da criança. */

.frod {
  margin-top: auto; padding-top: 4mm;
  border-top: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 8mm;
}
.frod .nota { flex: 1; font: 400 9.5px/1.5 var(--sans); color: var(--muted); }
.frod .nota b { color: var(--wine); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 8.5px; }
.frod .marca { flex: 0 0 auto; text-align: right; font: 400 8.5px var(--sans); color: var(--muted); letter-spacing: .04em; }
.frod .marca strong { display: block; color: var(--navy); font-weight: 700; letter-spacing: .1em; }

/* ── Aviso de recorte ────────────────────────────────────────────────────
   Folha de recorte é de UM LADO SÓ. Cortou, matou o verso — então nada de
   atividade atrás, e o aviso precisa estar visível antes de a tesoura sair
   da gaveta. Vem em PAR: esta folha e a folha-base onde se cola. */

.frecorte {
  display: flex; align-items: center; gap: 8px;
  background: var(--gold-soft); border: 1px solid #e3d5b2;
  border-radius: 8px; padding: 3mm 5mm; margin-top: 5mm;
  font: 600 10.5px var(--sans); color: var(--gold-deep);
}
.frecorte .par { margin-left: auto; font-weight: 400; color: var(--muted); }

/* ── Capa do combo ───────────────────────────────────────────────────────
   Mesma banda navy da capa do caderno do pai; só o miolo muda. */

.folha.capa-sem { padding: 0; border-top: 0; }
.folha.capa-sem .band {
  background: var(--navy);
  background-image:
    radial-gradient(ellipse at 12% -25%, rgba(169,127,43,.32), transparent 55%),
    radial-gradient(ellipse at 112% 118%, rgba(18,58,92,.6), transparent 55%);
  color: #fff; padding: 18mm 16mm 13mm;
}
.folha.capa-sem .band .marca-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12mm; }
.folha.capa-sem .band .marca-topo img { height: 42px; }
.folha.capa-sem .band .marca-topo .peca {
  font: 700 9px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft);
  border: 1px solid rgba(239,228,201,.4); border-radius: 20px; padding: 5px 14px;
}
.folha.capa-sem .band .kicker { color: var(--gold-soft); }
.folha.capa-sem .band h1 { font-family: var(--serif); font-weight: 700; font-size: 46px; line-height: 1.02; color: #fff; margin: 8px 0 6px; }
.folha.capa-sem .band .sub { font: 400 13.5px/1.5 var(--sans); color: rgba(255,255,255,.82); max-width: 128mm; }
/* A capa é UMA folha. A lista de onze folhas mais a regência não cabiam com o
   espaçamento do caderno do pai, e a lista transbordava para uma página vazia —
   por isso os itens do sumário são mais apertados aqui do que lá. */
.folha.capa-sem .corpo { padding: 9mm 16mm 8mm; display: flex; flex-direction: column; flex: 1; }
.folha.capa-sem .toc li { padding: 4.5px 0; }
.folha.capa-sem .toc .tx h4 { font-size: 11.5px; }
.folha.capa-sem .toc .tx p { font-size: 9.5px; }
.folha.capa-sem .toc .num { padding: 5px 0; min-width: 34px; font-size: 9px; }
.folha.capa-sem .regra { margin-top: 6mm; }
.folha.capa-sem .regra p { font-size: 14px; }

/* Cartões do que a semana DECLARA — é daqui que as folhas saem, e o pai
   precisa ver a origem para confiar no material. */
.regencia { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; margin-top: 2mm; }
.regencia .r {
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 7px; background: var(--card); padding: 3mm 4mm;
}
.regencia .r .k { font: 700 8px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.regencia .r .v { font: 600 11px/1.35 var(--sans); color: var(--navy); margin-top: 2px; }

/* ── Impressão ───────────────────────────────────────────────────────────
   printBackground do Chrome cobre o creme; o que quebra sem isto é a
   margem de 8mm da tela virando margem de papel. */

/* O @page mora no _pagina.css, e não aqui.
 *
 * `@page` vale para o DOCUMENTO INTEIRO — não dá para limitar a um pedaço da
 * página. Quando este arquivo passou a ser carregado também dentro do app (para
 * a apostila poder sair junto com os complementares num PDF só), a regra daqui
 * passou a mandar em toda impressão do app, inclusive na da lição.
 *
 * Então ela saiu para um arquivo que os dois carregam de propósito. */

@media print {
  html, body { background: #fff; }

  /* height, e não min-height: com min-height o Chrome arredondava a folha de
     297,00 mm para 297,01 e empurrava um fio de papel para a página seguinte —
     o PDF de 12 folhas saía com 13, a última em branco. */
  .folha { margin: 0; height: 297mm; min-height: 0; }
  .folha.paisagem { height: 210mm; }
}

/* ── As folhas de ATIVIDADE ──────────────────────────────────────────────
   Aqui o que manda é texto corrido, e por isso estas folhas são HTML e não
   SVG — `<text>` de SVG não quebra linha, e reimplementar quebra de linha à
   mão seria refazer pior o que o navegador já faz.

   A regra da área: SVG para o que se desenha, HTML para o que se lê. */

.fa { font: 400 9.5px/1.5 var(--sans); color: var(--ink); }

/* O nome da aula de onde vem o bloco de exercícios. Sem ele a criança não
   sabe de qual dia é cada pedaço da folha. */
.fa-licao {
  margin: 5mm 0 2.5mm;
  padding-bottom: 1.4mm;
  border-bottom: 1px solid var(--line);
  font: 700 8.5px var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.fa-licao:first-child { margin-top: 0; }

.fa-item { margin-bottom: 4.5mm; break-inside: avoid; }
.fa-cab { display: flex; align-items: baseline; gap: 6px; font: 700 11px var(--sans); color: var(--navy); }
.fa-n {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font: 700 9px var(--sans);
}
.fa-enun { margin: 1.6mm 0 2.4mm 21px; font-size: 9.5px; line-height: 1.5; }

/* A pauta de responder: linha grossa embaixo, espaço confortável entre elas.
   7,4 mm é a altura de uma linha de letra cursiva de criança de 9 anos. */
.fa-pauta { margin-left: 21px; }
.fa-pauta i { display: block; height: 7.4mm; border-bottom: 1px solid var(--ink); }

/* O quadro em branco: para o que se desenha, se calcula ou se tabela. */
.fa-quadro {
  margin-left: 21px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: repeating-linear-gradient(0deg, transparent 0 6.9mm, rgba(0,0,0,.05) 6.9mm 7mm);
}

/* "No caderno" não é resposta aqui — a folha vira lembrete com marcação de
   feito, e não finge oferecer um lugar que não serve. */
.fa-caderno {
  margin-left: 21px; display: flex; align-items: center; gap: 7px;
  font: 600 9px var(--sans); color: var(--muted);
}
.fa-caderno .cx {
  width: 4.5mm; height: 4.5mm; border: 1.2px solid var(--ink); border-radius: 2px;
}

/* O gabarito: parágrafo corrido, denso, para o adulto ler antes de corrigir. */
.fa-gab .fa-g {
  display: flex; gap: 6px; align-items: baseline;
  margin-bottom: 2.6mm; font-size: 9px; line-height: 1.45;
  break-inside: avoid;
}
.fa-gab .fa-g b { color: var(--navy); }
.folha-gabarito { border-top-color: var(--wine); }

/* ── O quadro de vocabulário ─────────────────────────────────────────────
   Termo impresso, definição e exemplo em branco. */
.fv { width: 100%; border-collapse: collapse; font: 400 10px var(--sans); }
.fv th {
  font: 700 8px var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 0 3mm 2mm; border-bottom: 1.4px solid var(--ink);
}
.fv td { border-bottom: 1px solid var(--ink); height: 14mm; padding: 0 3mm; vertical-align: bottom; }
.fv td + td { border-left: 1px solid var(--line); }
.fv .fv-t { font: 600 10.5px var(--sans); color: var(--navy); width: 26%; }
.fv tbody tr td:nth-child(2) { width: 40%; }

/* ── A lista do caderno ──────────────────────────────────────────────────
   O que a semana manda fazer FORA da folha. Antes cada uma dessas gastava
   meia página para dizer "feito no caderno"; agora são uma lista só, de uma
   olhada, que diz à família o que ainda falta na semana. */

.lc { list-style: none; margin: 0; padding: 0; }
.lc li {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 2.6mm 0; border-bottom: 1px solid var(--line);
  break-inside: avoid;
}
.lc li:last-child { border-bottom: 0; }
.lc .cx {
  flex: 0 0 auto; margin-top: 0.6mm;
  width: 4.6mm; height: 4.6mm;
  border: 1.3px solid var(--ink); border-radius: 2px;
}
.lc b { font: 700 10px var(--sans); color: var(--navy); }
.lc .lc-onde {
  margin-left: 7px; font: 600 8px var(--sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.lc p { margin: 1mm 0 0; font: 400 9px/1.45 var(--sans); color: var(--ink); }

/* ── O CARIMBO DA CONTA ─────────────────────────────────────────────────────
   Nome e e-mail de quem pagou, mais a data e a hora em que o papel saiu. Fica
   no pé de CADA folha, porque cada `.folha` daqui é uma página inteira de A4.

   Cinza claro e 6,4pt: tem de ser legível para quem for conferir a origem, e
   não pode competir com a atividade da criança — um carimbo gritando estraga
   o material que a família pagou para usar. */
.folha-carimbo {
  position: absolute;
  left: 14mm; right: 14mm; bottom: 6mm;
  display: flex; justify-content: space-between; gap: 8mm;
  font-size: 6.4pt; line-height: 1.3; color: #9AA3A0;
  border-top: .3pt solid #E2DDD2; padding-top: 1.6mm;
}
.folha-carimbo span:first-child { font-weight: 700; }
.folha-carimbo span:last-child { white-space: nowrap; }