/* ============================================================
   LESSONAI · SISTEMA DE EXPORTAÇÃO (PRINT-FIRST, MONOCROMÁTICO)
   Referência: docs/lessonai-export-master.html

   Fonte única do visual dos materiais: as mesmas regras valem na
   tela de visualização e no PDF, que antes tinham cópias próprias
   e por isso divergiam.

   Carregado em dois lugares:
     • Views/Shared/_Layout.cshtml                 → tela
     • Views/Document/ViewDocumentMaterial.cshtml  → PDF
       (o Playwright navega uma URL real do app, então o arquivo é
        baixado normalmente pelo Chromium headless)

   Sem cor por design: a hierarquia vem de peso tipográfico, escala,
   espaçamento e traço. Medidas em mm/pt onde a fidelidade de
   impressão importa.
   ============================================================ */

:root {
  /* Prefixo --lai-* porque o arquivo é global e convive com as
     variáveis do app (--primary, --bs-*): nomes como --text ou
     --border colidiriam. */
  --lai-ink:      #111827;  /* texto principal / traço forte */
  --lai-text:     #374151;  /* corpo de texto */
  --lai-muted:    #6b7280;  /* legendas */
  --lai-hairline: #d1d5db;  /* borda fina de apoio */
  --lai-border:   #e5e7eb;  /* borda de card */
  --lai-paper:    #ffffff;
  --lai-radius:   10px;

  /* Preenchimento suave: zebra de tabela e fundo da legenda. */
  --lai-surface:  #f3f4f6;
}

/* ============================================================
   CAÇA-PALAVRAS

   A grade vem pronta do microserviço (eduxeai_back/WordSearch.cs)
   como <table class="wordsearch" border="1"> com <td> sem classe —
   daí os seletores por tag. As três classes (.wordsearch,
   .word-list, .texto-caca-palavras) são exclusivas deste material,
   por isso não precisam de escopo.
   ============================================================ */

/* Sem linhas internas: o aluno circula as palavras, e as divisórias
   competiam com o traço dele. Só a moldura externa fica.
   O !important também neutraliza o atributo border="1", que é HTML
   e não CSS, e vence a regra genérica `.material-content table
   { width: 100% }` do ViewDocumentMaterial, que esticaria a grade. */
.wordsearch {
  width: auto !important;
  max-width: 100% !important;
  margin: 14px auto 0 !important;
  border: 2.5px solid var(--lai-ink) !important;
  border-collapse: collapse !important;
  font-family: 'Courier New', monospace;
  page-break-inside: avoid;
  break-inside: avoid;
}

.wordsearch td {
  width: 8.5mm !important;
  height: 8.5mm !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  font-size: 11pt;
  font-weight: 600;
  line-height: 1;
  color: var(--lai-ink);
  background: var(--lai-paper);
}

/* Banco de palavras em chips (.chip-word do mestre), no lugar da
   lista com marcador. */
.word-list {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  width: 100% !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}

.word-list::before,
.word-list li::before { content: none !important; }

.word-list li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 9mm;
  padding: 0 12px;
  margin: 0 6px 10px 0;
  border: 1px solid var(--lai-hairline);
  border-radius: var(--lai-radius);
  background: var(--lai-paper);
  font-size: 9pt;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--lai-ink);
}

/* Texto com lacunas. A entrelinha é um pouco maior que a de corpo
   normal (1.6) para caber a escrita na lacuna, mas sem esticar o
   bloco — o texto da IA já vem com <br><br> entre os parágrafos, e
   os dois efeitos se somam. */
.texto-caca-palavras {
  font-size: 11pt;
  line-height: 1.8;
  color: var(--lai-text);
}

.texto-caca-palavras strong,
.texto-caca-palavras b { color: var(--lai-ink); }

/* ============================================================
   PALAVRA CRUZADA

   O alvo é o layout que o PDF já tinha: células flutuantes (só as
   casas jogáveis têm borda), numeração no canto e dicas em duas
   colunas com o número em selo sólido.

   Os NOMES das classes são contrato: ConstruirQuadroProfessor e
   ParseCrosswordGrid fazem regex em class="...empty..." e em
   <span class="word-number">, e os templates digitais parseiam o
   mesmo markup. Mudamos só propriedades.

   .crossword-* e .word-number são exclusivas deste material, então
   valem soltas. Já .copy > span é o wrapper genérico usado por
   outros materiais — essa fica escopada em .palavra-cruzada-export,
   classe que o controller emite no markup (e que por isso vale na
   tela, não só no clone da exportação).
   ============================================================ */

.crossword-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 6mm auto 0 !important;
  table-layout: fixed;
  border: 0 !important;
  background: transparent;
  max-width: 100%;
  page-break-inside: avoid;
  break-inside: avoid;
}

.crossword-cell {
  position: relative;
  width: 9mm;
  height: 9mm;
  padding: 0;
  border: 1px solid var(--lai-ink);
  background: var(--lai-paper);
  text-align: center;
  vertical-align: middle;
  font-family: 'Courier New', monospace;
  font-size: 14pt;
  font-weight: 600;
  color: var(--lai-ink);
}

/* Casa bloqueada some por completo: o contorno da grade é o das
   próprias palavras. */
.crossword-cell.empty {
  background: transparent !important;
  border: 0 !important;
}

.word-number {
  position: absolute;
  top: 0.6mm;
  left: 0.8mm;
  font-size: 6.5pt;
  font-weight: 700;
  line-height: 1;
  color: var(--lai-ink);
}

/* A letra do gabarito é posicionada, não só estilizada: sem o inset
   a numeração empurraria a letra para fora do centro da casa. */
.crossword-answer-letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--lai-ink);
}

/* ---------- Dicas ---------- */
.palavra-cruzada-export .copy > span {
  display: block;
  columns: 2;
  column-gap: 8mm;
  column-rule: 1px solid var(--lai-border);
  font-size: 10.5pt;
  line-height: 1.7;
  color: var(--lai-ink);
  padding: 3mm 0;
  margin: 0;
}

/* Selo sólido no número da dica. O par fundo+cor precisa vir junto:
   declarar só a cor deixaria o número tinta sobre tinta. */
.palavra-cruzada-export .copy > span > b {
  display: inline-block;
  background: var(--lai-ink);
  color: var(--lai-paper);
  border-radius: 1mm;
  padding: 0.5mm 2mm;
  margin-right: 2mm;
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.palavra-cruzada-export .copy > span > br { line-height: .5; }

.palavra-cruzada-professor .crossword-cell { font-weight: 700; }

/* ============================================================
   JOGO DA VELHA — componentes do template mestre

   Mapeamento (docs/lessonai-export-master.html):
     caixas de instruções/legenda → .howto  (borda fina, rótulo em
       versalete; sem barra preenchida)
     numeração do tabuleiro       → .cnum   (número discreto no canto)
     numeração das perguntas      → .questao .num (bloco sólido)
     tabela do gabarito           → table.data (régua grossa sob o
       cabeçalho, zebra; sem moldura)
     marcas X e O                 → monocromáticas

   Escopo em #jdv-aluno / #jdv-gabarito: ids que existem na tela e
   sobrevivem no clone da exportação, então servem os dois lados.
   Regras que valem só no impresso levam .pdf-export.
   ============================================================ */

/* Só no PDF a seção perde a moldura — lá quem emoldura é a folha.
   Na tela o .sim-section continua sendo o card do design system. */
.pdf-export #jdv-aluno .sim-section,
.pdf-export #jdv-gabarito .sim-section {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
}

.pdf-export #jdv-aluno .sim-section-body,
.pdf-export #jdv-gabarito .sim-section-body { padding: 0 !important; }

/* Tabuleiro e grade de perguntas dividem a mesma folha. */
#jdv-aluno .jdv-folha-secao {
  break-inside: avoid;
  page-break-inside: avoid;
}

#jdv-aluno .jdv-folha-chamada {
  margin: 0 0 3mm;
  font-size: 8.5pt;
  line-height: 1.5;
  color: var(--lai-text);
}

#jdv-aluno .jdv-folha-corpo {
  display: flex;
  align-items: stretch;
  gap: 6mm;
}

/* aspect-ratio + align-self:flex-start deixam as casas quadradas: a
   altura vem da largura, e o quadro não estica junto com a lateral.
   92mm é o teto que mantém tudo em uma folha só. */
#jdv-aluno .jdv-folha-grade {
  flex: 0 0 92mm;
  align-self: flex-start;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border: 2.5px solid var(--lai-ink);
  overflow: hidden;
  background: var(--lai-paper);
}

/* Bordas só à direita/abaixo, zeradas na última coluna e na última
   linha: sem isso as bordas vizinhas se somam e ficam mais grossas
   que a moldura. */
#jdv-aluno .jdv-folha-casa {
  position: relative;
  border-right: 1px solid var(--lai-hairline);
  border-bottom: 1px solid var(--lai-hairline);
}

#jdv-aluno .jdv-folha-casa:nth-child(3n) { border-right: 0; }
#jdv-aluno .jdv-folha-casa:nth-child(n + 7) { border-bottom: 0; }

/* .cnum: a casa é espaço de escrita, o número não pode competir com
   o X ou O que o aluno desenha. */
#jdv-aluno .jdv-folha-num {
  position: absolute;
  top: 1.5mm;
  left: 2mm;
  font-size: 7pt;
  font-weight: 700;
  line-height: 1;
  color: var(--lai-muted);
}

#jdv-aluno .jdv-folha-lateral {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4mm;
}

/* Ancora a legenda na base da coluna, alinhada ao fim do tabuleiro. */
#jdv-aluno .jdv-folha-lateral > .jdv-folha-box:last-child { margin-top: auto; }

/* ---------- Caixas (.howto) ---------- */
#jdv-aluno .jdv-folha-box {
  background: #fafafa;
  border: 1px solid var(--lai-border);
  border-radius: var(--lai-radius);
  padding: 14px 18px;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* A legenda usa o fundo suave do .legend do mestre. */
#jdv-aluno .jdv-folha-lateral > .jdv-folha-box:last-child {
  background: var(--lai-surface);
  border-color: var(--lai-surface);
}

/* .howto-label: rótulo em versalete, sem barra preenchida. */
#jdv-aluno .jdv-folha-box-titulo {
  margin: 0 0 6px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--lai-ink);
}

#jdv-aluno .jdv-folha-box-corpo {
  padding: 0;
  font-size: 8pt;
  line-height: 1.5;
  color: var(--lai-text);
}

#jdv-aluno .jdv-folha-box-corpo p { margin: 0 0 1.8mm; }
#jdv-aluno .jdv-folha-box-corpo p:last-child { margin-bottom: 0; }
#jdv-aluno .jdv-folha-box-corpo ul,
#jdv-aluno .jdv-folha-box-corpo ol { margin: 0 0 1.8mm; padding-left: 4mm; }

/* ---------- Legenda (.leg-item / .leg-sym) ---------- */
#jdv-aluno .jdv-folha-legenda {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9pt;
  color: var(--lai-text);
}

#jdv-aluno .jdv-folha-legenda + .jdv-folha-legenda { margin-top: 2.5mm; }

/* Monocromático: o mestre é explícito ("nada de cor"), e em impressão
   P&B a distinção por cor se perdia de qualquer forma. O contraste
   passa a vir do peso. */
#jdv-aluno .jdv-folha-marca {
  flex: 0 0 auto;
  width: 1.3em;
  text-align: center;
  font-size: 13pt;
  font-weight: 800;
  line-height: 1;
  color: var(--lai-ink);
}

/* ---------- Grade de perguntas (.questao) ---------- */
#jdv-aluno .jdv-tabuleiro {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  width: 100%;
  gap: 0 !important;
  border: 1px solid var(--lai-border);
  border-radius: 12px;
  overflow: hidden;
  margin: 4mm 0 0;
  break-inside: auto;
  page-break-inside: auto;
}

#jdv-aluno .jdv-celula {
  position: relative;
  border-right: 1px solid var(--lai-border);
  border-bottom: 1px solid var(--lai-border);
  min-height: 32mm;
  padding: 2mm 2mm 1.5mm;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--lai-paper);
  text-align: left;
  break-inside: avoid;
  page-break-inside: avoid;
}

#jdv-aluno .jdv-celula:nth-child(3n) { border-right: 0; }
#jdv-aluno .jdv-celula:nth-child(n + 7) { border-bottom: 0; }

/* .questao .num: bloco sólido. top igual ao padding da célula, para o
   número nascer na mesma linha da primeira linha do enunciado, que
   corre no recuo aberto à direita dele. */
#jdv-aluno .jdv-celula-num {
  position: absolute;
  top: 2mm;
  left: 2mm;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5mm;
  height: 5.5mm;
  padding: 0 1mm;
  border-radius: 2mm;
  background: var(--lai-ink);
  color: var(--lai-paper);
  font-size: 7.5pt;
  font-weight: 800;
  line-height: 1;
}

#jdv-aluno .jdv-celula-texto {
  font-size: 8.5pt;
  line-height: 1.35;
  color: var(--lai-ink);
  font-weight: 600;
  margin-bottom: 1.5mm;
  padding-left: 7mm;
}

#jdv-aluno .jdv-alternativas {
  margin: 0;
  padding-left: 4.5mm;
  color: var(--lai-text);
  font-size: 7.2pt;
  line-height: 1.3;
  text-align: left;
}

#jdv-aluno .jdv-alternativas li + li { margin-top: .4mm; }

/* ---------- Folha do professor ---------- */
/* Só no PDF: o #folha-professor é compartilhado por oito telas, que
   na tela usam o h1 do Bootstrap. */
.pdf-export #folha-professor { margin: 8mm 0 3mm; }

.pdf-export #folha-professor h1 {
  margin: 0;
  font-size: 12pt;
  font-weight: 700;
  color: var(--lai-ink);
}

/* ---------- Gabarito (table.data) ---------- */
#jdv-gabarito .jdv-gabarito-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 9pt;
}

#jdv-gabarito .jdv-gabarito-table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--lai-ink);
  font-size: 8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--lai-ink);
  background: none;
}

#jdv-gabarito .jdv-gabarito-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--lai-border);
  vertical-align: middle;
  color: var(--lai-text);
}

#jdv-gabarito .jdv-gabarito-table tr:nth-child(even) td { background: var(--lai-surface); }
#jdv-gabarito .jdv-gabarito-table th:first-child,
#jdv-gabarito .jdv-gabarito-table td:first-child { text-align: center; }
#jdv-gabarito .jdv-gabarito-table tbody tr { break-inside: avoid; page-break-inside: avoid; }

#jdv-gabarito .jdv-gabarito-num {
  font-weight: 800;
  color: var(--lai-ink);
}

#jdv-gabarito .bncc-badge {
  display: inline-block;
  border: 1px solid var(--lai-ink);
  border-radius: 999px;
  padding: 1px 10px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 7.5pt;
  font-weight: 700;
  color: var(--lai-ink);
  background: var(--lai-paper);
}