:root { --m11-red:#dc2626; --m11-deep:#2e2640; --m11-ink:#1e293b; --m11-muted:#64748b; --m11-line:#e2e8f0; --m11-paper:#f8fafc; }
* { box-sizing:border-box; }
body { margin:0; font-family:Manrope,system-ui,sans-serif; color:var(--m11-ink); background:var(--m11-paper); }
.lesson-deck { height:100vh; overflow:hidden; }
.lesson-slides { height:calc(100vh - 58px); position:relative; }
.lesson-slide { display:none; height:100%; overflow:auto; padding:clamp(18px,4.5vh,52px) clamp(20px,5vw,72px); max-width:1320px; margin:auto; }
/* `safe center` distribui o espaço vertical sem cortar o topo quando o
   conteúdo excede a altura; navegador que não suporta ignora e alinha ao topo. */
.lesson-slide.active { display:flex; flex-direction:column; justify-content:safe center; animation:lessonIn .28s ease-out; }
.lesson-cover.active { justify-content:safe center; }
@keyframes lessonIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.lesson-cover { background:linear-gradient(135deg,#450a0a,#b91c1c 52%,#f87171); color:#fff; max-width:none; padding:clamp(40px,12vh,140px) clamp(28px,9vw,150px); }
.lesson-cover h1 { font-size:clamp(2.6rem,6vw,5.4rem); max-width:900px; margin:18px 0; line-height:1.02; }
.lesson-cover p { max-width:820px; font-size:clamp(1rem,2.6vh,1.7rem); line-height:1.5; color:rgba(255,255,255,.88); }
.lesson-cover small { color:rgba(255,255,255,.7); }
.lesson-kicker { display:inline-block; color:var(--m11-red); font-size:clamp(.7rem,1.6vh,1.2rem); font-weight:900; letter-spacing:.16em; text-transform:uppercase; margin-bottom:clamp(6px,1.2vh,16px); }
.lesson-cover .lesson-kicker { color:#ffe3e3; }
.lesson-slide h2 { font-size:clamp(1.5rem,4.4vh,3.5rem); line-height:1.12; margin:0 0 clamp(10px,2.2vh,28px); color:var(--m11-deep); }
.lesson-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:clamp(8px,1.5vh,18px); }
.lesson-card,.lesson-callout { background:#fff; border:1px solid var(--m11-line); border-radius:14px; padding:clamp(12px,2.1vh,30px); box-shadow:0 4px 14px rgba(46,38,64,.06); }
.lesson-card b { color:var(--m11-red); font-size:clamp(.66rem,1.3vh,.88rem); letter-spacing:.12em; text-transform:uppercase; }
.lesson-card h3 { margin:clamp(4px,.9vh,12px) 0; font-size:clamp(.95rem,2.5vh,2rem); color:var(--m11-deep); }
.lesson-card p,.lesson-card li,.lesson-callout { line-height:1.5; font-size:clamp(.85rem,2.3vh,1.85rem); color:#374151; }
.lesson-wide { max-width:960px; }
.lesson-card ol,.lesson-card ul { margin:clamp(3px,.7vh,8px) 0 0; padding-left:1.2rem; }
.lesson-card ol li { margin-bottom:clamp(3px,.7vh,9px); }
.lesson-callout { border-left:6px solid var(--m11-red); margin:0 0 clamp(10px,1.9vh,22px); font-size:clamp(.95rem,2.5vh,2rem) !important; flex:0 0 auto; }
/* slide de conceito: texto à esquerda, checklist à direita, erro comum embaixo */
.lesson-split { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(9px,1.5vh,18px); margin-bottom:clamp(9px,1.5vh,18px); align-items:stretch; }
.lesson-split .lesson-card p { font-size:clamp(.9rem,2.5vh,2rem); }
.lesson-split ul { margin:clamp(3px,.7vh,8px) 0 0; padding-left:1.15rem; }
.lesson-split li { margin-bottom:clamp(3px,.7vh,9px); }
.lesson-hint { font-size:clamp(.72rem,1.7vh,1.35rem) !important; font-weight:600; color:var(--m11-muted) !important; margin:2px 0 clamp(4px,.9vh,10px) !important; }
.lesson-warn { background:#fff7ed; border:1px solid #fed7aa; border-left:6px solid #d97706; border-radius:12px; padding:clamp(10px,1.8vh,24px) clamp(14px,2vh,26px); line-height:1.5; font-size:clamp(.85rem,2.2vh,1.75rem); color:#7c2d12; flex:0 0 auto; }
.lesson-warn strong { color:#9a3412; }
.lesson-code { flex:1 1 auto; min-height:0; margin:0 0 clamp(10px,1.8vh,20px); padding:clamp(12px,2vh,24px); overflow:auto; border-radius:14px; background:var(--m11-deep); color:var(--m11-paper); font:500 clamp(.62rem,1.45vh,1.02rem)/1.55 'JetBrains Mono','Courier New',monospace; white-space:pre-wrap; tab-size:2; }
.lesson-footer { height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 22px; background:#fff; border-top:1px solid var(--m11-line); }
.lesson-footer button,.lesson-footer a { border:0; border-radius:9px; padding:9px 14px; background:var(--m11-deep); color:#fff; text-decoration:none; font:700 .85rem Manrope,sans-serif; cursor:pointer; }
.lesson-footer a { background:#f1f4f8; color:var(--m11-deep); }
.lesson-counter { font-weight:800; color:var(--m11-deep); }
.material-head,.plan-head { padding:54px max(24px,calc((100% - 1120px)/2)); background:linear-gradient(135deg,#2e2640,#7a2230 52%,#dc2626); color:#fff; }
.material-head span,.plan-head span { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; }
.material-head h1,.plan-head h1 { margin:14px 0 8px; font-size:clamp(2rem,5vw,3.4rem); }
.material-head p,.plan-head p { margin:0; color:rgba(255,255,255,.8); font-size:1.05rem; }
.material-body,.plan-body { max-width:900px; margin:0 auto; padding:38px 24px 80px; }
.material-box,.material-section,.plan-body section { background:#fff; border:1px solid var(--m11-line); border-radius:14px; padding:26px; margin-bottom:22px; box-shadow:0 3px 12px rgba(46,38,64,.05); }
.material-section h2,.material-box h2,.plan-body h2 { color:var(--m11-deep); margin-top:0; border-bottom:2px solid var(--m11-line); padding-bottom:10px; }
.material-section h3 { color:var(--m11-deep); }
.material-section p,.material-section li,.material-box p,.material-box li,.plan-body p,.plan-body li { line-height:1.75; color:#374151; }
.material-note { background:#fff7ed; border-left:4px solid #d97706; padding:14px 16px; margin-top:18px; }
/* Laboratórios SQL executáveis no DBeaver. */
.sql-lab { padding:0; overflow:hidden; }
.sql-lab-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:26px; border-bottom:2px solid var(--m11-line); background:var(--m11-paper); }
.sql-lab-head h2 { margin:6px 0 8px; padding:0; border:0; }
.sql-lab-head p { margin:0; }
.sql-engine { display:inline-block; border-radius:999px; padding:4px 10px; background:var(--m11-deep); color:var(--m11-paper); font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.sql-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.sql-actions button,.code-copy { border:0; border-radius:9px; padding:9px 12px; background:var(--m11-deep); color:var(--m11-paper); font:700 .76rem Manrope,sans-serif; cursor:pointer; }
.sql-actions button:last-child { background:var(--m11-red); }
.sql-step { padding:26px; border-bottom:1px solid var(--m11-line); }
.sql-step:last-child { border-bottom:0; }
.sql-step h3 { margin:0 0 8px; color:var(--m11-deep); }
.sql-step > p { margin:0 0 14px; }
.code-wrap { margin:14px 0; overflow:hidden; border:1px solid var(--m11-line); border-radius:12px; background:var(--m11-deep); }
.code-label { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px 8px 16px; border-bottom:1px solid var(--m11-muted); color:var(--m11-paper); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.code-copy { padding:6px 10px; background:var(--m11-red); }
.code-block { max-height:620px; margin:0; padding:18px; overflow:auto; color:var(--m11-paper); background:var(--m11-deep); font:500 .82rem/1.62 'JetBrains Mono','Courier New',monospace; tab-size:2; }
.sql-observe { margin-top:14px; padding:14px 16px; border-left:4px solid var(--m11-red); background:var(--m11-paper); color:var(--m11-ink); line-height:1.65; }
.sql-observe strong { color:var(--m11-deep); }
/* ponte com a Aula 1 no material: RF, RNF, ADR e cenário de aceite */
.material-sdd { display:grid; gap:12px; }
.material-sdd div { border:1px solid var(--m11-line); border-left:4px solid var(--m11-red); border-radius:12px; padding:14px 16px; background:#fbfdff; line-height:1.7; color:#374151; }
.material-sdd b { display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--m11-red); margin-bottom:6px; }
@media (max-width:900px) { .lesson-split { grid-template-columns:1fr; } }
@media (max-width:720px) { .lesson-grid { grid-template-columns:1fr; } .lesson-footer { padding:0 10px; } .lesson-footer a { display:none; } }

/* O bloco principal de cada slide ocupa a altura livre; o conteúdo do card é
   centrado verticalmente. Evita tela com 60% de vazio sem aumentar a fonte. */
.lesson-slide.active > .lesson-grid,
.lesson-slide.active > .lesson-split,
.lesson-slide.active > .lesson-card,
.lesson-slide.active > .mermaid-wrap { flex:1 1 auto; min-height:0; }
.lesson-split .lesson-card,
.lesson-grid .lesson-card { display:flex; flex-direction:column; justify-content:center; min-height:0; overflow:auto; }
.lesson-grid .lesson-card > b { flex:0 0 auto; }

/* Diagrama Mermaid — exemplo visual de um bloco teórico (slides e material). */
.mermaid-wrap { display:flex; justify-content:center; align-items:center; min-height:0; overflow:auto; background:#fff; border:1px solid var(--m11-line); border-radius:14px; padding:clamp(10px,1.8vh,22px); box-shadow:0 4px 14px rgba(46,38,64,.06); }
.mermaid-wrap .mermaid { width:100%; height:100%; display:flex; justify-content:center; align-items:center; font-family:'Manrope',sans-serif !important; }
.mermaid-wrap svg { max-width:100%; max-height:100%; width:auto; height:auto; }
.lesson-slide .mermaid-wrap.tight { max-height:260px; }
.lesson-slide .mermaid-wrap.medium { max-height:400px; }
.lesson-slide .mermaid-wrap.tall { max-height:520px; }
.material-section .mermaid-wrap { margin:16px 0; max-height:none; }

/* Nota fiscal sintetizada (dados fictícios) — tabela com aparência de cupom fiscal. */
.receipt-wrap { flex:1 1 auto; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.receipt-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--m11-line); border-radius:10px; font-size:clamp(.62rem,1.35vh,1rem); }
.receipt-table caption { text-align:left; caption-side:top; font-size:clamp(.62rem,1.3vh,.95rem); color:var(--m11-muted); padding:10px 12px; border-bottom:1px dashed var(--m11-line); line-height:1.45; }
.receipt-table th, .receipt-table td { padding:4px 10px; text-align:right; border-bottom:1px dashed var(--m11-line); font-family:'Courier New',monospace; }
.receipt-table th:first-child, .receipt-table td:first-child { text-align:left; font-family:inherit; }
.receipt-table thead th { color:var(--m11-deep); border-bottom:1px solid var(--m11-line); }
.receipt-table tfoot td { font-weight:700; border-top:1px solid var(--m11-line); border-bottom:none; color:var(--m11-deep); }
.receipt-footer { list-style:none; margin:0; padding:0; display:grid; gap:2px; font-size:clamp(.6rem,1.2vh,.85rem); color:var(--m11-muted); flex:0 0 auto; }

/* Blocos de aprofundamento do material e do plano (deepDive): trilha de
   continuidade, contrato de dimensão conformada, Bus Matrix, drill-across,
   governança semântica e roadmap incremental. */
.dd-steps,.dd-num,.dd-releases { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.dd-steps { grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); counter-reset:none; }
.dd-steps li { border:1px solid var(--m11-line); border-top:4px solid var(--m11-red); border-radius:12px; padding:12px 14px; background:#fbfdff; }
.dd-steps b { display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--m11-red); margin-bottom:4px; }
.dd-steps span { font-weight:700; color:var(--m11-deep); line-height:1.4; }
.dd-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:10px; margin:16px 0 0; }
.dd-fields div { border:1px solid var(--m11-line); border-left:4px solid var(--m11-deep); border-radius:12px; padding:12px 14px; background:#fff; }
.dd-fields dt { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:var(--m11-deep); }
.dd-fields dd { margin:5px 0 0; line-height:1.6; color:#374151; }
.dd-scroll { overflow-x:auto; margin:16px 0 0; }
.dd-table { width:100%; border-collapse:collapse; font-size:.92rem; background:#fff; }
.dd-table caption { caption-side:top; text-align:left; color:var(--m11-muted); font-size:.82rem; line-height:1.5; padding-bottom:8px; }
.dd-table th,.dd-table td { border:1px solid var(--m11-line); padding:9px 12px; text-align:left; line-height:1.5; }
.dd-table thead th { background:var(--m11-deep); color:#fff; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; }
.dd-table tbody th { background:var(--m11-paper); color:var(--m11-deep); font-weight:700; white-space:nowrap; }
.dd-table td.bad { color:#9a3412; background:#fff7ed; }
.dd-table td.good { color:#166534; background:#f0fdf4; }
.dd-table.matrix td { text-align:center; font-weight:800; }
.dd-table.matrix td.on { color:var(--m11-red); background:#fef2f2; }
.dd-table.matrix td.off { color:var(--m11-muted); }
.dd-prio { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; margin-right:6px; border-radius:50%; background:var(--m11-red); color:#fff; font-size:.7rem; font-weight:800; }
.dd-axes { margin:14px 0 0; padding-left:1.2rem; }
.dd-split { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:12px; margin:14px 0 0; }
.dd-split > div { border:1px solid var(--m11-line); border-radius:12px; padding:14px 16px; background:#fff; }
.dd-split h4 { margin:0 0 8px; color:var(--m11-deep); font-size:.95rem; }
.dd-split ul,.dd-split ol { margin:0; padding-left:1.2rem; }
.dd-split li { margin-bottom:6px; }
.dd-ok { border-left:4px solid #16a34a !important; }
.dd-ok h4 { color:#166534; }
.dd-bad { border-left:4px solid #dc2626 !important; background:#fff7ed !important; }
.dd-bad h4 { color:#9a3412; }
.dd-num li { display:grid; grid-template-columns:2.4rem 1fr; gap:4px 12px; align-items:baseline; border:1px solid var(--m11-line); border-radius:12px; padding:12px 14px; background:#fff; counter-increment:ddnum; }
.dd-num { counter-reset:ddnum; }
.dd-num li::before { content:counter(ddnum,decimal-leading-zero); grid-row:span 2; text-align:left; font-size:1.4rem; font-weight:900; color:var(--m11-red); }
.dd-num b { color:var(--m11-deep); }
.dd-num span { grid-column:2; line-height:1.6; color:#374151; }
.dd-releases li { border:1px solid var(--m11-line); border-left:4px solid var(--m11-red); border-radius:12px; padding:12px 14px; background:#fff; }
.dd-releases b { display:block; color:var(--m11-deep); margin-bottom:4px; }
.dd-releases span { display:block; line-height:1.6; color:#374151; }
.dd-releases em { display:inline-block; margin-top:8px; padding:3px 10px; border-radius:999px; background:#fef2f2; color:var(--m11-red); font-size:.72rem; font-weight:800; font-style:normal; letter-spacing:.06em; text-transform:uppercase; }
.dd-closing { border-left:6px solid var(--m11-red); }
.dd-closing p { font-size:1.08rem; line-height:1.7; }

/* Barra de progresso de leitura e nav flutuante — mesmo padrão dos materiais
   artesanais (specs/lesson-materials.md), na paleta do módulo 11. Injetados por
   mountFloatNav() no material e no plano; `css/encontro.css` oculta ambos na
   impressão, preservando a exportação em PDF. */
#progress-bar { position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--m11-red),#f87171); z-index:9999; transition:width .1s; }
#float-nav { position:fixed; bottom:28px; right:28px; display:flex; flex-direction:column; gap:8px; z-index:9998; opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .3s,transform .3s; }
#float-nav.visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.fn-btn { display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 16px; border-radius:999px; font-size:.82rem; font-weight:700; text-decoration:none; box-shadow:0 4px 18px rgba(0,0,0,.25); transition:transform .15s,box-shadow .15s; white-space:nowrap; }
.fn-btn:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.32); text-decoration:none; }
.fn-btn-slides { background:#fff; color:var(--m11-red); border:2px solid var(--m11-red); }
.fn-btn-alt { background:#fff; color:var(--m11-deep); border:2px solid var(--m11-deep); }
.fn-btn-back { background:var(--m11-deep); color:#fff; border:2px solid var(--m11-deep); }
@media (max-width:720px) { #float-nav { bottom:16px; right:16px; gap:6px; } .fn-btn { padding:8px 13px; font-size:.76rem; } }
@media (max-width:720px) { .sql-lab-head { flex-direction:column; } .sql-actions { justify-content:flex-start; } .code-block { font-size:.72rem; } }
@media print { .code-block { max-height:none; overflow:visible; white-space:pre-wrap; } .sql-actions,.code-copy { display:none !important; } }

/* Sumário lateral (specs/lesson-materials.md). O corpo mantém as classes
   .material-body / .plan-body — de que dependem as regras de tipografia — e perde
   apenas a largura máxima e a centralização, que agora são do grid. Em tela estreita
   a coluna some e o texto volta a ocupar a página inteira; na impressão, css/encontro.css
   já oculta .mat-sidebar. */
.mat-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:32px; max-width:1240px; margin:0 auto; padding:40px 24px; align-items:start; }
.mat-layout .material-body,.mat-layout .plan-body { max-width:none; margin:0; padding:0 0 60px; }
.mat-article { min-width:0; }
.mat-sidebar { position:sticky; top:24px; align-self:start; max-height:calc(100vh - 48px); overflow-y:auto; }
.mat-toc { background:#fff; border:1px solid var(--m11-line); border-radius:14px; padding:20px; box-shadow:0 2px 8px rgba(46,38,64,.05); }
.mat-toc h4 { margin:0 0 12px; font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--m11-muted); }
.mat-toc a { display:flex; justify-content:space-between; gap:8px; padding:5px 0 5px 12px; border-left:2px solid transparent; color:var(--m11-muted); font-size:.82rem; line-height:1.3; text-decoration:none; transition:color .2s,border-color .2s; }
.mat-toc a:hover,.mat-toc a.active { color:var(--m11-red); border-left-color:var(--m11-red); }
.mat-toc .t { font-variant-numeric:tabular-nums; font-size:.72rem; opacity:.7; white-space:nowrap; }
.toc-total { margin-top:12px; padding-top:12px; border-top:1px solid var(--m11-line); font-size:.75rem; color:var(--m11-muted); }
.toc-total strong { color:var(--m11-red); }
@media (max-width:960px) { .mat-layout { grid-template-columns:1fr; gap:0; padding:24px 16px; } .mat-sidebar { display:none; } }