). */
.lesson-footer-nav .lesson-return {
display: inline-flex;
align-items: center;
justify-content: center;
justify-self: center;
width: 2.4rem;
height: 2.4rem;
margin: 0;
border: 1px solid var(--border);
border-radius: 50%;
background: var(--surface-alt);
color: var(--primary);
font-size: 1.2rem;
line-height: 1;
transition: background 0.2s ease, border-color 0.2s ease;
}
.lesson-footer-nav .lesson-return:hover,
.lesson-footer-nav .lesson-return:focus-visible {
background: var(--primary-tint);
border-color: var(--primary-line);
}
.lesson-nav-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
max-width: 100%;
min-width: 0;
padding: 0.6rem 0.9rem;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface-alt);
color: var(--secondary);
font-size: 0.85rem;
font-weight: 700;
text-decoration: none;
}
.lesson-nav-link span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lesson-nav-link:hover,
.lesson-nav-link:focus-visible {
border-color: var(--primary-line);
background: var(--primary-tint);
}
.lesson-nav-link--prev {
justify-self: start;
}
.lesson-nav-link--next {
justify-self: end;
text-align: right;
}
/* ---- Aprofundamento e Resumo (contêineres) ---- */
.sources-section {
margin: 2rem 0;
padding: 1.5rem;
border: 1px solid var(--border);
border-radius: var(--radius-panel);
background: var(--surface);
scroll-margin-top: 92px;
}
.summarize {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: 1.4rem 1.3rem;
margin-top: 1.5rem;
scroll-margin-top: 92px;
}
@media (max-width: 760px) {
.page-header {
grid-template-columns: 1fr;
display: grid;
margin-bottom: 1.25rem;
}
.lesson-heading {
display: grid;
}
.lesson-actions {
justify-self: start;
}
.topic-nav__header {
display: block;
}
.topic-nav__list {
grid-template-columns: 1fr;
}
.lesson-footer-nav {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"return return"
"prev next";
row-gap: 0.6rem;
}
/* Rodapé de aula: o botão de concluir (rótulo longo) ocupa a linha de cima, e o "anterior" e o
retorno ao mapa ficam juntos embaixo. */
.lesson-footer-nav:has(.lesson-complete-bar) {
grid-template-areas:
"complete complete"
"prev return";
}
.lesson-footer-nav:has(.lesson-complete-bar) .lesson-return {
justify-self: end;
}
.lesson-complete-bar {
grid-area: complete;
}
.lesson-footer-nav .lesson-return {
grid-area: return;
}
.lesson-nav-link--prev {
grid-area: prev;
}
.lesson-nav-link--next {
grid-area: next;
}
/* Título longo some do visual (o link virava "Aula 2 · Auto…"), mas continua no nome acessível. */
.lesson-nav-title {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
}
/* ==========================================================================
6. content — markdown renderizado (.markdown-content) e seus blocos
O markdown só gera elementos HTML sem classes; o estilo vem destes
seletores. Os títulos de subtópico são sempre h3 (nunca h2).
========================================================================== */
@layer content {
.markdown-content > h3 {
margin-top: 1.25rem;
}
.markdown-content > h3:first-child {
margin-top: 0;
}
/* Subtópico com âncora (id dado pelo app.js): não fica escondido sob o cabeçalho fixo. */
.markdown-content h3[id] {
scroll-margin-top: 92px;
}
/* ---- sumário "Nesta aula" (gerado pelo app.js nas aulas com vários subtópicos) ----
Mora dentro de .markdown-content, por isso os seletores levam o prefixo: precisam vencer
as regras de lista e de link do markdown, que estão nesta mesma camada. */
.lesson-toc {
margin: 0 0 1.5rem;
padding: 0.7rem 1rem;
border: 1px solid var(--border);
border-radius: var(--radius-item);
background: var(--surface-tint);
}
.lesson-toc summary {
color: var(--primary);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
}
.markdown-content .lesson-toc__list {
margin: 0.6rem 0 0.15rem;
padding-left: 1.4rem;
columns: 2;
column-gap: 2.5rem;
font-size: 0.92rem;
}
.markdown-content .lesson-toc__list li {
margin-bottom: 0.3rem;
break-inside: avoid;
}
.markdown-content .lesson-toc a {
color: var(--text);
text-decoration: none;
}
.markdown-content .lesson-toc a:hover {
color: var(--primary);
text-decoration: underline;
}
@media (max-width: 760px) {
.markdown-content .lesson-toc__list {
columns: 1;
}
}
.markdown-content blockquote {
margin: 1rem 0;
padding: 0.9rem 1rem;
border-left: 4px solid var(--primary);
background: var(--surface-tint);
color: var(--muted);
}
.markdown-content pre {
overflow-x: auto;
margin: 1rem 0;
padding: 1rem;
border-radius: 12px;
background: var(--code-bg);
color: var(--code-text);
}
.markdown-content code {
padding: 0.1rem 0.3rem;
border-radius: 4px;
background: var(--code-inline-bg);
font-size: 0.9em;
}
.markdown-content pre code {
padding: 0;
background: transparent;
color: inherit;
}
/* Identificadores longos em código inline (variáveis de ambiente, caminhos) não
quebram sozinhos e estouravam a largura no mobile. Em blocos a rolagem
horizontal já resolve, por isso só o código inline quebra. */
.markdown-content :not(pre) > code {
overflow-wrap: anywhere;
}
/* Código curto (até 20 caracteres, marcado pelo app.js) não quebra: `2026-07-28` não pode virar
"2026-" e "07-28". Cabe folgado em 320px, então não reintroduz estouro no celular; o código
longo continua quebrando em qualquer ponto pela regra acima. */
.markdown-content code.code-short {
white-space: nowrap;
}
.markdown-content ul,
.markdown-content ol {
margin: 1rem 0;
padding-left: 1.4rem;
display: block;
}
.markdown-content li {
color: var(--muted);
margin-bottom: 0.4rem;
}
.markdown-content li:last-child {
margin-bottom: 0;
}
.markdown-content li strong {
color: var(--text);
}
/* Links no texto das aulas: azuis e sublinhados, para se distinguirem do texto
(o reset da camada base deixa sem cor e sem sublinhado). */
.markdown-content a {
color: var(--primary);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.markdown-content a:hover {
text-decoration-thickness: 2px;
}
/* ---- tabelas ---- */
.table-wrap {
overflow-x: auto;
margin: 1.25rem 0;
border: 1px solid var(--border);
border-radius: var(--radius-item);
}
.markdown-content table {
width: 100%;
border-collapse: collapse;
font-size: 0.92rem;
}
.markdown-content th,
.markdown-content td {
padding: 0.7rem 0.9rem;
border-bottom: 1px solid var(--border);
text-align: left;
vertical-align: top;
}
.markdown-content thead th {
background: var(--surface-alt);
color: var(--secondary);
font-weight: 700;
}
.markdown-content tbody tr:last-child td {
border-bottom: none;
}
/* ---- diagramas Mermaid ---- */
.diagram {
margin: 1.25rem 0;
background: var(--surface-tint);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: 1rem;
}
.diagram svg {
width: 100%;
height: auto;
border-radius: var(--radius-item);
}
.content-error {
color: var(--danger);
font-weight: 700;
}
/* ---- Resumo: competências como cartões e checklist de autoavaliação ---- */
.summarize .markdown-content ul,
.sources-section .markdown-content ul {
list-style: none;
padding: 0;
display: grid;
gap: 0.8rem;
}
.summarize .markdown-content li {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-item);
padding: 0.9rem 1rem 0.9rem 2.8rem;
}
.summarize .markdown-content li::before {
content: "✓";
position: absolute;
left: 1rem;
top: 0.9rem;
color: var(--success);
font-weight: 800;
}
/* Especificidade maior de propósito: precisa vencer .summarize .markdown-content li
(acima) dentro da mesma camada. */
.summarize .markdown-content .self-check-list li {
padding: 0;
border: none;
background: transparent;
}
.summarize .markdown-content .self-check-list li::before {
content: none;
}
.self-check-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem 1rem;
border: 1px solid var(--border);
border-radius: var(--radius-item);
background: var(--surface);
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease;
}
.self-check-item:hover {
border-color: var(--primary-line);
}
.self-check-item input[type="checkbox"] {
flex-shrink: 0;
width: 1.15rem;
height: 1.15rem;
margin-top: 0.15rem;
accent-color: var(--success);
cursor: pointer;
}
.self-check-item:has(input:checked) {
background: rgba(15, 159, 110, 0.06);
border-color: rgba(15, 159, 110, 0.3);
}
.self-check-item:has(input:checked) span {
color: var(--muted);
text-decoration: line-through;
text-decoration-color: rgba(15, 159, 110, 0.6);
}
/* ---- Aprofundamento: lista de fontes ---- */
.sources-section .markdown-content li {
color: var(--muted);
}
.sources-section .markdown-content li a {
color: var(--primary);
font-weight: 700;
text-decoration: none;
}
.sources-section .markdown-content li a:hover {
text-decoration: underline;
}
@media (max-width: 760px) {
.diagram {
overflow-x: auto;
}
.diagram svg {
width: auto;
min-width: 480px;
max-width: none;
}
}
}
/* ==========================================================================
7. utilities — acessibilidade e preferências do usuário
========================================================================== */
@layer utilities {
/* Texto acessível a leitores de tela e invisível na tela. Hoje sem uso nas
páginas, mantido como ferramenta padrão de acessibilidade. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---- impressão ----
Imprimir uma sessão saía quase vazio (as aulas ficam recolhidas). No papel: tudo expandido, sem
cabeçalho, navegação e controles, fundo branco e texto preto em qualquer tema (a paleta de
impressão é um terceiro conjunto dos mesmos tokens), sem quebrar tabela, diagrama ou código no
meio e com o endereço dos links externos visível. Uma página A4 tem menos de 760px de largura
útil, então as regras do ponto de quebra móvel também valem aqui. */
@media print {
:root,
:root[data-theme="dark"],
:root:not([data-theme]) {
color-scheme: light;
--bg: #ffffff;
--surface: #ffffff;
--surface-alt: #f1f3f6;
--surface-tint: #ffffff;
--primary: #1d4ed8;
--primary-strong: #123bb3;
--primary-tint: #e8eefc;
--primary-line: #9fb3e6;
--primary-line-strong: #9fb3e6;
--on-primary: #ffffff;
--secondary: #000000;
--text: #000000;
--muted: #333333;
--border: #c4c9d2;
--border-mid: #c4c9d2;
--border-strong: #c4c9d2;
--success: #0b6e4d;
--on-success: #ffffff;
--header-bg: #ffffff;
--glass: #ffffff;
--glass-strong: #ffffff;
--gradient-end: #ffffff;
--code-bg: #f1f3f6;
--code-text: #000000;
--code-inline-bg: #f1f3f6;
--shadow: none;
--shadow-mid: none;
--shadow-soft: none;
}
@page {
margin: 16mm 14mm;
}
html {
scroll-behavior: auto;
}
body {
font-size: 11pt;
line-height: 1.5;
}
.skip-link,
.site-header,
.breadcrumb,
.topic-nav,
.lesson-chevron,
.lesson-actions,
.lesson-toc,
.lesson-complete-bar,
.lesson-footer-nav,
.self-check-item input,
.hero-actions,
.progress-bar,
.card-actions,
#progresso,
.search-form,
.concept-panel__close {
display: none;
}
/* aulas, Aprofundamento e Resumo impressos por inteiro, mesmo recolhidos na tela */
.lesson-content {
display: block;
}
.container {
width: auto;
}
.page-shell,
.hero {
padding: 0;
}
.content-section,
.sources-section,
.summarize {
margin: 0 0 1.5rem;
padding: 0;
border: 0;
border-radius: 0;
}
h1 {
font-size: 20pt;
}
.lesson-heading h2 {
font-size: 15pt;
}
.markdown-content h3 {
font-size: 12pt;
}
h1,
h2,
h3,
.lesson-heading {
break-after: avoid;
}
pre,
blockquote,
.diagram,
.table-wrap,
tr,
.session-card,
.self-check-item {
break-inside: avoid;
}
pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
pre,
.table-wrap,
.diagram {
overflow: visible;
}
.diagram svg {
width: 100%;
min-width: 0;
max-width: 100%;
}
/* As cores do Mermaid ficam gravadas no SVG no tema da tela; no escuro, inverte para o papel. */
:root[data-theme="dark"] .diagram svg {
filter: invert(1) hue-rotate(180deg);
}
.markdown-content a[href^="http"]::after {
content: " (" attr(href) ")";
color: var(--muted);
font-size: 0.85em;
font-weight: 400;
overflow-wrap: anywhere;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.skip-link,
.button,
.theme-toggle,
.lesson-check,
.progress-bar__fill,
.session-card,
.topic-nav a,
.lesson-chevron,
.lesson-chevron::before,
.lesson-return,
.self-check-item {
transition: none;
}
}
}