/* ═══════════════════════════════════════════════════════════════════════
   TIPOGRAFIA DE LEITURA — bloco de texto e texto+galeria
   Arquivo COMPARTILHADO entre a plataforma do aluno (index.html) e o admin
   (pré-visualização do editor de unidade). O mesmo CSS pinta os dois lados,
   então o preview é fiel por construção — não existe cópia pra divergir.
   Fontes: --sans (Outfit 200–600) e --serif (Cormorant Garamond 300–600).
   Variáveis com fallback (--fs-body, --nav-h, --serif-stable, --accent-strong)
   porque o admin não define todas.
   ═══════════════════════════════════════════════════════════════════════ */

.tb-para-title{
  font-family:var(--serif);font-weight:400;color:var(--accent);
  font-size:1.05rem;margin:1.4rem 0 .6rem;line-height:1.3;
}
/* Subtítulo = divisor de seção dentro do bloco (agrupa os parágrafos abaixo).
   Mesma fonte do título do bloco (--serif-stable) e em negrito. SEM divisória. */
.tb-section-title{
  font-family:var(--serif-stable,var(--serif));font-weight:700;color:var(--text);
  font-size:1.3rem;line-height:1.3;margin:2.4rem 0 .9rem;
  scroll-margin-top:calc(var(--nav-h,0px) + 1.2rem);
}
.tb-section-title:first-child{margin-top:.4rem}
/* Alvo do scroll quando o aluno clica num parágrafo na sidebar: espaço acima
   pro título não ficar escondido sob a topbar sticky. */
.tb-paragraph{scroll-margin-top:calc(var(--nav-h,0px) + 1.2rem)}
.tb-para-desc{display:none}

.text-block .tb-body,
.textgallery-block .tb-body{
  font-family:var(--sans);font-weight:300;font-size:var(--fs-body,1rem);
  line-height:1.85;color:var(--text-dim);max-width:760px;
}
.text-block .tb-body p,
.textgallery-block .tb-body p{margin-bottom:1rem}
/* NEGRITO de verdade. O corpo é leve (300 na sans, 400 na serif) e o strong
   sobe DOIS degraus (500 na sans, 600 na serif — ver as regras [data-font]
   no fim). Antes o strong era fixado em 400: no modo serif ficava com o
   MESMO peso do texto e o negrito simplesmente não aparecia. */
.text-block .tb-body strong,.text-block .tb-body b,
.textgallery-block .tb-body strong,.textgallery-block .tb-body b{color:var(--text);font-weight:500}
.text-block .tb-body em,
.textgallery-block .tb-body em{color:var(--accent);font-style:italic}
.text-block .tb-body h3,.text-block .tb-body h4,
.textgallery-block .tb-body h3,.textgallery-block .tb-body h4{
  font-family:var(--serif);font-weight:400;color:var(--text);
  margin:1.4rem 0 .6rem;line-height:1.3;
}
.text-block .tb-body h3,.textgallery-block .tb-body h3{font-size:1.25rem}
.text-block .tb-body h4,.textgallery-block .tb-body h4{font-size:1.05rem;color:var(--accent)}
.text-block .tb-body blockquote,
.textgallery-block .tb-body blockquote{
  margin:1.4rem 0;padding:.6rem 1.2rem;
  border-left:2px solid var(--accent);
  font-family:var(--serif);font-size:1.1rem;color:var(--text);
  font-style:italic;
}
.text-block .tb-body a,
.textgallery-block .tb-body a{color:var(--accent);border-bottom:1px dotted var(--accent-strong,var(--accent))}
/* Listas: o reset global zera o padding — o marcador caía FORA da coluna do
   parágrafo e o texto ficava sem o recuo clássico. */
.tb-body ul,
.tb-body ol{margin:.4rem 0 1rem;padding-left:1.6rem}
.tb-body li{margin-bottom:.5rem;padding-left:.2rem}
.tb-body li:last-child{margin-bottom:0}
.tb-body li::marker{color:var(--accent)}
.tb-body ul ul,
.tb-body ol ol,
.tb-body ul ol,
.tb-body ol ul{margin:.5rem 0}
.text-block .tb-body iframe{width:100%;aspect-ratio:16/9;border:none;margin:1rem 0;border-radius:3px}

/* Bloco de GRAMÁTICA: variante do bloco de texto nas matérias de idioma
   (content.variante = 'gramatica'). Sem a coluna da galeria, usa a largura
   toda da página. A explicação gerada por IA traz tabelas (.gr-tabela, no
   desenho da .tbl da maquete de componentes, com o realce da linha sob o
   mouse) e lista de exemplos (.gr-exemplos). Cada exemplo tem a frase
   (.gr-frase), a tradução (.gr-trad) e a nota do que ele mostra (.gr-nota).
   A frase vem marcada conforme a regra: o marca-texto no que a exemplifica
   (.gr-destaque), o sublinhado nas partes que a regra liga (.gr-sub) e a
   palavra com o que ela é escrito embaixo (.gr-anot, rótulo em data-r: a
   leitura em voz alta e as buscas leem só a palavra). */
.is-gramatica .tb-body{max-width:none}
.tb-body table.gr-tabela{
  width:100%;border-collapse:collapse;margin:.4rem 0 1.4rem;
  font-family:var(--sans);font-weight:300;font-size:.9em;line-height:1.55;
}
.tb-body .gr-tabela th{
  text-align:left;padding:.6rem .9rem;
  font-family:var(--sans);font-weight:400;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--accent-border);background:var(--accent-xlo);
}
.tb-body .gr-tabela td{
  padding:.6rem .9rem;color:var(--text);vertical-align:top;
  border-bottom:1px solid var(--accent-border-soft);
}
.tb-body .gr-tabela tr:last-child td{border-bottom:none}
.tb-body .gr-tabela tbody tr{transition:background .25s var(--ease)}
@media(hover:hover){.tb-body .gr-tabela tbody tr:hover{background:var(--accent-xlo)}}
.tb-body .gr-tabela caption{
  caption-side:top;text-align:left;padding:0 0 .5rem;
  font-family:var(--sans);font-weight:400;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);
}
.tb-body ul.gr-exemplos{
  list-style:none;margin:.4rem 0 1.4rem;padding:.2rem 0 .2rem 1rem;
  border-left:2px solid var(--accent-border);
}
.tb-body .gr-exemplos li{margin-bottom:.55rem;padding-left:0}
.tb-body .gr-exemplos li:last-child{margin-bottom:0}
.tb-body .gr-exemplos li::marker{content:none}
.tb-body .gr-frase{color:var(--text)}
.tb-body .gr-trad{display:block;font-size:.9em;color:var(--text-mute);font-style:italic;font-weight:300}
.tb-body .gr-nota{display:block;margin-top:.15rem;font-family:var(--sans);font-size:.84em;font-weight:300;line-height:1.5;color:var(--text-dim)}
.tb-body mark.gr-destaque{
  background:var(--accent-lo);color:var(--accent);padding:0 .2em;border-radius:2px;
  box-shadow:inset 0 -1.5px 0 var(--accent);
}
.tb-body u.gr-sub{
  text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:1.5px;text-underline-offset:.24em;
}
.tb-body .gr-anot{display:inline-flex;flex-direction:column;align-items:center;line-height:1.4;margin:0 .2em}
.tb-body .gr-anot::after{
  content:attr(data-r);margin-top:.05rem;white-space:nowrap;
  font-family:var(--sans);font-weight:400;font-size:.6rem;font-style:normal;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.3;color:var(--accent);
}
@media(max-width:640px){
  .tb-body table.gr-tabela{display:block;overflow-x:auto}
}

/* Texto da ATIVIDADE DE IDIOMA: o texto da questão, como na prova, em cima dos itens.
   Mesma letra da leitura (a classe .tb-body leva as regras de data-font do fim do
   arquivo), parágrafos numerados à esquerda (os itens citam os parágrafos) e a fonte
   no fim. Variáveis com fallback: o aluno usa --bg-elevated e --border; o admin,
   --bg-elev e --accent-border-soft. */
.la-texto{
  border:1px solid var(--border,var(--accent-border-soft));border-radius:var(--radius,4px);
  background:var(--bg-elevated,var(--bg-elev));padding:.85rem 1.1rem .9rem;margin:0 0 1rem;
}
.la-texto-head{display:flex;align-items:baseline;gap:.4rem .8rem;flex-wrap:wrap}
.la-texto-rot{
  font-family:var(--sans);font-weight:400;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-mute);
}
.la-texto-tit{flex:1;min-width:10rem;font-family:var(--serif);font-weight:500;font-size:1.08rem;line-height:1.3;color:var(--text)}
.la-texto-toggle{margin-left:auto}
.la-texto .la-texto-corpo{
  font-family:var(--sans);font-weight:300;font-size:var(--fs-body,1rem);
  line-height:1.8;color:var(--text);margin-top:.75rem;
}
.la-texto-par{display:grid;grid-template-columns:1.5rem minmax(0,1fr);column-gap:.5rem}
.la-texto-par p{margin:0 0 .85rem;overflow-wrap:anywhere}
.la-texto-n{
  font-family:var(--mono);font-size:.62rem;line-height:2.4;color:var(--text-mute);
  text-align:right;user-select:none;-webkit-user-select:none;
}
.la-texto.is-dialogo .la-texto-par strong{color:var(--accent);font-weight:500}
.la-texto-fonte{
  margin:.2rem 0 0 2rem;font-family:var(--sans);font-weight:300;font-size:.74rem;
  line-height:1.5;color:var(--text-mute);font-style:italic;
}
.la-texto-fonte a{color:var(--accent);text-decoration:none;font-style:normal}
.la-texto-fonte a:hover{text-decoration:underline}
.la-texto.is-recolhido .la-texto-corpo{display:none}
@media(max-width:640px){
  .la-texto{padding:.75rem .8rem .8rem}
  .la-texto-par{grid-template-columns:1.1rem minmax(0,1fr);column-gap:.4rem}
  .la-texto-fonte{margin-left:1.5rem}
}

/* Termo com verbete (tooltip) */
.frag-term{
  border-bottom:1.5px dotted rgba(200,169,126,.45);cursor:help;
  transition:border-color .15s ease,color .15s ease;
}
.frag-term:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* Preferência de fonte: data-font no <html> (aluno) ou no wrapper do preview
   (admin). Ficam por ÚLTIMO de propósito: mesma especificidade das regras
   acima, ganham pela ordem. A Cormorant tem o "olho" ~13% menor que a Outfit
   no mesmo corpo — sem a compensação, trocar pra serif encolhia o texto. */
[data-font="serif"] .tb-body{font-family:var(--serif);font-weight:400;font-size:calc(var(--fs-body,1rem) * 1.13)}
[data-font="sans"] .tb-body{font-family:var(--sans);font-weight:300}
[data-font="serif"] .tb-body strong,[data-font="serif"] .tb-body b{font-weight:600}
[data-font="sans"] .tb-body strong,[data-font="sans"] .tb-body b{font-weight:500}