/* ============================================================
   AULA (teoria rica) — Elite+
   Substitui o antigo <details class="teoria-box"> por uma seção de aula
   de verdade: cabeçalho com tempo de leitura, índice, blocos tipados
   (definição, exemplo resolvido, fórmula, figura SVG, dica, atenção,
   teste rápido, glossário, resumo). Fórmulas em LaTeX (KaTeX sob demanda).
   Tudo com os tokens do tema (dark padrão + html.tema-claro).
   ============================================================ */
.aula{ background:var(--surface,var(--panel)); border:1px solid var(--border); border-radius:var(--r-lg,18px); margin:18px 0 22px; overflow:hidden; }
.aula-head{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid transparent; }
.aula.aberta .aula-head{ border-bottom-color:var(--border); }
.aula-ic{ flex:0 0 38px; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--primary) 18%,transparent); color:var(--primary-2,var(--primary)); }
.aula-ic svg{ width:20px; height:20px; }
.aula-tit{ flex:1; min-width:0; }
.aula-tit h2{ margin:0; font-size:17px; line-height:1.2; }
.aula-meta{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.aula-toggle{ white-space:nowrap; }
.aula-corpo{ display:none; padding:6px 22px 22px; }
.aula.aberta .aula-corpo{ display:block; animation:aula-in var(--dur-3,.32s) var(--ease-out,ease-out); }
@keyframes aula-in{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none;} }
.aula .teoria{ padding:0; }

/* Índice da aula */
.aula-toc{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:10px 0 16px; padding:10px 12px; background:var(--panel-2); border:1px solid var(--border); border-radius:12px; }
.toc-l{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--tx-ouro-2,var(--gold)); margin-right:4px; }
.aula-toc a{ font-size:12.5px; color:var(--text); text-decoration:none; padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:var(--panel); transition:border-color var(--dur-2,.2s),color var(--dur-2,.2s); }
.aula-toc a:hover{ border-color:var(--primary); color:var(--primary-2,var(--primary)); }
.aula-fim{ margin-top:20px; display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }

/* Texto */
.aula .teoria{ line-height:1.78; font-size:15px; }
.teoria .t-sec{ margin:0 0 24px; scroll-margin-top:84px; }
.teoria .t-sec>h3{ font-size:19px; margin:26px 0 10px; color:var(--tx-ouro,var(--gold)); }
.teoria .t-sec:first-of-type>h3{ margin-top:6px; }
.teoria h4{ font-size:15.5px; margin:16px 0 6px; color:var(--text); }
.teoria .t-lead{ font-size:16px; color:var(--muted); margin-bottom:14px; }
.teoria .t-grande{ font-size:1.22em; line-height:1.9; }
.teoria .t-cor{ color:var(--tx-ouro-2,var(--gold)); font-weight:700; }
.teoria mark{ background:color-mix(in srgb,var(--gold) 32%,transparent); color:inherit; padding:0 4px; border-radius:4px; }
.teoria kbd{ font-family:'JetBrains Mono',Consolas,monospace; font-size:.9em; background:var(--code-bg); border:1px solid var(--border); border-radius:6px; padding:1px 6px; }

/* Caixas tipadas */
.teoria .t-def,.teoria .t-ex,.teoria .t-tip,.teoria .t-warn,.teoria .t-resumo,.teoria .t-formula,.teoria .t-glos,.teoria .t-caso{
  border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin:12px 0 16px; background:var(--panel-2); position:relative; }
.teoria .t-def{ border-left:4px solid var(--primary); }
.teoria .t-ex,.teoria .t-caso{ border-left:4px solid var(--accent); }
.teoria .t-tip{ border-left:4px solid var(--success); }
.teoria .t-warn{ border-left:4px solid var(--warning); }
.teoria .t-resumo{ border-left:4px solid var(--gold); }
.teoria .t-def>b:first-child,.teoria .t-ex>b:first-child,.teoria .t-caso>b:first-child,.teoria .t-tip>b:first-child,.teoria .t-warn>b:first-child,.teoria .t-resumo>b:first-child,.teoria .t-glos>b:first-child{
  display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.teoria .t-def>b:first-child{ color:var(--primary-2,var(--primary)); }
.teoria .t-ex>b:first-child,.teoria .t-caso>b:first-child{ color:var(--accent); }
.teoria .t-tip>b:first-child{ color:var(--success); }
.teoria .t-warn>b:first-child{ color:var(--warning); }
.teoria .t-resumo>b:first-child,.teoria .t-glos>b:first-child{ color:var(--gold); }
.teoria .t-def p:last-child,.teoria .t-ex p:last-child,.teoria .t-tip p:last-child,.teoria .t-warn p:last-child,.teoria .t-resumo ul,.teoria .t-resumo ol{ margin-bottom:0; }
.teoria .t-steps{ margin:6px 0 0; padding-left:22px; }
.teoria .t-steps li{ margin-bottom:6px; }
.teoria .t-steps li::marker{ color:var(--accent); font-weight:800; }

/* Fórmula */
.teoria .t-formula{ text-align:center; }
.teoria .t-formula>b:first-child{ display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--primary-2,var(--primary)); margin-bottom:4px; }
.teoria .t-f-main{ font-size:1.18em; padding:6px 0 4px; overflow-x:auto; overflow-y:hidden; }
.teoria .t-f-vars{ display:grid; grid-template-columns:auto 1fr; gap:3px 12px; text-align:left; margin:10px auto 0; max-width:560px; font-size:13.5px; }
.teoria .t-f-vars dt{ font-weight:700; color:var(--tx-ouro-2,var(--gold)); font-family:'JetBrains Mono',Consolas,monospace; }
.teoria .t-f-vars dd{ margin:0; color:var(--muted); }
.teoria .fx-raw .t-f-main,.fx-raw{ font-family:'JetBrains Mono',Consolas,monospace; font-size:.95em; color:var(--muted); }
.katex-display{ margin:.45em 0; overflow-x:auto; overflow-y:hidden; }
.katex{ font-size:1.06em; }
.enunciado .katex-display,.passo-txt .katex-display,.reveal-expl .katex-display{ margin:.3em 0; }

/* Figuras (SVG inline, cor do tema via currentColor) */
.teoria .t-fig{ margin:14px 0 18px; padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--panel-2); }
.teoria .t-fig svg{ display:block; width:100%; height:auto; max-height:400px; margin:0 auto; color:var(--text); }
.teoria .t-fig figcaption{ margin-top:10px; font-size:13px; color:var(--muted); text-align:center; line-height:1.5; }
.teoria .t-fig.pequena svg{ max-width:360px; }
.teoria .t-fig-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:14px 0 18px; }
.teoria .t-fig-row .t-fig{ margin:0; }
.ex-visual svg{ display:block; width:100%; height:auto; max-height:360px; color:var(--text); }

/* Teste rápido (recuperação ativa) */
.teoria .t-check{ border:1px dashed var(--border-2,var(--border)); border-radius:12px; padding:10px 14px; margin:12px 0; background:transparent; }
.teoria .t-check summary{ cursor:pointer; font-weight:700; color:var(--text); list-style:none; }
.teoria .t-check summary::-webkit-details-marker{ display:none; }
.teoria .t-check summary::before{ content:'Teste rápido'; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-right:8px; }
.teoria .t-check summary::after{ content:'ver resposta'; float:right; font-size:11.5px; color:var(--muted); font-weight:500; }
.teoria .t-check[open] summary::after{ content:'esconder'; }
.teoria .t-check[open]{ background:var(--panel-2); border-style:solid; }
.teoria .t-check>*:not(summary){ margin-top:8px; }

/* Glossário, tabela, comparação */
.teoria .t-glos dl{ display:grid; grid-template-columns:minmax(120px,auto) 1fr; gap:4px 14px; margin:0; }
.teoria .t-glos dt{ font-weight:700; color:var(--tx-ouro-2,var(--gold)); }
.teoria .t-glos dd{ margin:0; }
.teoria .t-scroll{ overflow-x:auto; }
.teoria .t-table{ width:100%; border-collapse:collapse; margin:10px 0 16px; font-size:14px; }
.teoria .t-table th,.teoria .t-table td{ border:1px solid var(--border); padding:8px 12px; text-align:left; vertical-align:top; }
.teoria .t-table th{ background:var(--panel-2); }
.teoria .t-table tr:nth-child(even) td{ background:color-mix(in srgb,var(--panel-2) 55%,transparent); }
.teoria .t-vs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:12px 0 16px; }
.teoria .t-vs>div{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--panel-2); }
.teoria .t-vs>div>b:first-child{ display:block; margin-bottom:6px; color:var(--tx-ouro-2,var(--gold)); }

@media (max-width:640px){
  .aula-corpo{ padding:4px 14px 16px; }
  .aula .teoria{ font-size:14.5px; }
  .teoria .t-f-vars,.teoria .t-glos dl{ grid-template-columns:1fr; }
  .teoria .t-fig{ padding:10px; }
  .aula-head{ padding:12px 14px; }
}
html.tema-claro .teoria .t-fig svg,html.tema-claro .ex-visual svg{ color:#1c1c2b; }
html.tema-claro .teoria mark{ background:#ffe9a8; }