/* Leitor do hiperlivro (F-004) — porta v2+v5+v6 do leitor da tese (crítica em
   skills/livro-retratil/references/anatomia-do-leitor.md), quase verbatim.
   Acrescenta: tema claro/escuro (troca de token --preto/--branco/--cinza,
   mesma lógica de 'superfície chapada' do design system, agora também no eixo
   claro-escuro), badges de proveniência (círculo, ao lado do rótulo de bloco,
   abre popover) e aviso de nível ainda não escrito. Ver decisions.md. */

/* Leitor v2 — expansão recursiva. Design system FAROL (canon CIn-UFPE): quatro cores, superfície chapada,
   Hanken Grotesk, nenhum canto arredondado, nenhuma sombra. */
:root{--vermelho:#DB1E2F;--vermelho-escuro:#AF0421;--preto:#231F20;--cinza:#E0E1E0;--branco:#FFFFFF;
  --preto-rgb:35,31,32;--branco-rgb:255,255,255;--cinza-rgb:224,225,224;--vermelho-texto:#DB1E2F;
  --fonte:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--largura:820px;--indice-w:320px;--topo-h:64px;--barra-h:60px;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);color-scheme:light dark;
  transition:background-color .15s,color .15s}

/* ---- tema escuro: troca de token, não redesenho -----------------------------
   O design system é "superfície chapada": profundidade vem de trocar o fundo
   (branco ↔ vermelho ↔ preto), nunca de sombra/gradiente. O tema escuro estende
   essa mesma lógica para o eixo claro/escuro: --preto e --branco trocam de papel
   (o que hoje é "tinta" vira "papel" e vice-versa). Todo painel que já era chapa
   fixa (capítulo em faixa vermelha, herói da obra em fundo preto) inverte
   polaridade junto — o painel escuro do modo claro vira um painel claro no modo
   escuro, o que mantém o mesmo contraste que já existia, sem precisar reescrever
   as ~250 declarações herdadas da v2/v5/v6 que usam var(--preto)/var(--branco)
   como cor de fundo OU de texto conforme o contexto.
   --vermelho-texto é a exceção: o vermelho de marca (#DB1E2F) usado como cor de
   texto pequeno cai para ~3,7:1 sobre o novo fundo escuro (abaixo do AA de 4,5:1
   para texto normal — só passaria como "texto grande"). Por isso ganha um tom
   mais claro só quando é TEXTO; como preenchimento (faixa do capítulo, quadrado
   ativo) o vermelho não muda, porque aí o contraste é sempre com --branco/--preto,
   que já trocam de valor sozinhos. Ver `PROTOCOLO`-style nota em decisions.md. */
:root[data-tema="escuro"]{--preto:#F2EEEC;--branco:#171314;--cinza:#2C2729;
  --preto-rgb:242,238,236;--branco-rgb:23,19,20;--cinza-rgb:44,39,41;
  --vermelho-texto:#FF6B7A;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]):not([data-tema="escuro"]){
  --preto:#F2EEEC;--branco:#171314;--cinza:#2C2729;
  --preto-rgb:242,238,236;--branco-rgb:23,19,20;--cinza-rgb:44,39,41;
  --vermelho-texto:#FF6B7A;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--branco);color:var(--preto);font-family:var(--fonte);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit} button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--vermelho);outline-offset:2px}
img{max-width:100%;display:block} [hidden]{display:none!important}
.rotulo-v{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--vermelho-texto)}
.rotulo-branco{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--branco)}

#progresso{position:fixed;top:0;left:0;height:4px;width:0;background:var(--vermelho);z-index:60;transition:width .15s linear}
#topo{position:fixed;top:0;left:0;right:0;height:calc(var(--topo-h) + var(--sat));padding:var(--sat) 20px 0;background:var(--branco);border-bottom:3px solid var(--preto);display:flex;align-items:center;gap:24px;z-index:50}
.marca{display:flex;flex-direction:column;text-decoration:none;line-height:1.1;min-width:0}
.marca-rotulo{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vermelho-texto);white-space:nowrap}
.marca-titulo{font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.topo-direita{margin-left:auto;display:flex;align-items:center;gap:16px}
.tempo{font-size:13px;font-weight:500;white-space:nowrap}.tempo b{font-weight:800}
.btn-indice{display:flex;align-items:center;gap:10px;background:var(--preto);color:var(--branco);border:0;height:40px;padding:0 14px;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.btn-indice:hover{background:var(--vermelho)}
.tracos{display:inline-flex;flex-direction:column;gap:4px}.tracos i{display:block;width:18px;height:3px;background:currentColor}

/* controle global: abrir tudo até o nível */
.profundidade{display:flex;position:relative;flex:0 1 640px;min-width:420px;margin:0 auto;padding-top:6px}
.profundidade::before{content:"";position:absolute;left:calc(8.33% - 2px);right:calc(8.33% - 2px);top:14px;height:3px;background:var(--preto)}
.parada{position:relative;flex:1;background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--preto)}
.parada .quadrado{width:18px;height:18px;border:3px solid var(--preto);background:var(--branco);display:block;position:relative;z-index:1;transition:transform .15s,background .15s}
.parada:hover .quadrado{transform:scale(1.15)}
.parada .nome{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:.65}
.parada.ativa .quadrado{background:var(--vermelho);border-color:var(--vermelho-texto);transform:scale(1.25)}
.parada.ativa .nome{opacity:1;color:var(--vermelho-texto)}
.parada.passada .quadrado{background:var(--preto)}
#barra-mobile{display:none;position:fixed;left:0;right:0;bottom:0;height:calc(var(--barra-h) + var(--sab));padding-bottom:var(--sab);background:var(--preto);z-index:50}
#barra-mobile .parada-m{flex:1;border:0;border-right:1px solid rgba(var(--branco-rgb),.18);background:var(--preto);color:var(--branco);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 2px;height:var(--barra-h)}
#barra-mobile .parada-m:last-child{border-right:0}
#barra-mobile .parada-m .q{width:12px;height:12px;border:2px solid var(--branco);display:block}
#barra-mobile .parada-m .n{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1}
#barra-mobile .parada-m.ativa{background:var(--vermelho)}#barra-mobile .parada-m.ativa .q,#barra-mobile .parada-m.passada .q{background:var(--branco)}

/* índice */
#indice{position:fixed;top:calc(var(--topo-h) + var(--sat));left:0;bottom:0;width:var(--indice-w);background:var(--branco);border-right:3px solid var(--preto);overflow-y:auto;z-index:40;padding:8px 0 40px}
.indice-cab{display:none}
#indice-lista,#indice-lista ol{list-style:none;margin:0;padding:0}
#indice-lista a{display:block;text-decoration:none;padding:10px 20px 10px 24px;border-left:5px solid transparent;font-size:14px;line-height:1.3}
#indice-lista .cap>a{font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:13px;margin-top:14px;display:flex;gap:10px}
#indice-lista .cap>a .num{color:var(--vermelho-texto);min-width:22px}
#indice-lista .sec a{padding-left:56px;font-weight:500}#indice-lista .sec a .num{color:var(--vermelho-texto);font-weight:700;margin-right:6px;font-size:12px}
#indice-lista a:hover,#indice-lista a.ativo{background:var(--cinza)}#indice-lista a.ativo{border-left-color:var(--vermelho-texto)}

/* árvore */
#arvore{margin-left:var(--indice-w);padding-top:calc(var(--topo-h) + var(--sat))}
.no{position:relative}
.cab{display:block;width:100%;text-align:left;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.cab .qd{width:16px;height:16px;border:3px solid var(--preto);background:var(--branco);display:inline-block;vertical-align:middle;flex:none;transition:background .15s}
.no.aberto>.cab .qd{background:var(--vermelho);border-color:var(--vermelho-texto)}
.cab:hover .qd{border-color:var(--vermelho-texto)}
.filhos{display:none}.no.aberto>.filhos{display:block}
.dica{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.55;white-space:nowrap}
.no.aberto>.cab .dica.abrir{display:none}.no:not(.aberto)>.cab .dica.fechar{display:none}

/* nível 0 — tese (hero) */
.n0>.cab{background:var(--preto);color:var(--branco);padding:clamp(48px,7vw,96px) clamp(20px,5vw,72px) clamp(36px,5vw,60px)}
.n0>.cab .int{max-width:960px;margin:0 auto}
.n0>.cab h1{font-size:clamp(34px,5.4vw,72px);line-height:.98;letter-spacing:-.025em;font-weight:800;margin:14px 0 22px;text-wrap:balance}
.n0>.cab .autor{font-size:clamp(16px,1.6vw,20px);font-weight:500;margin:0 0 6px}.n0>.cab .autor b{font-weight:800}
.n0>.cab .orient{font-size:14px;opacity:.75;margin:0 0 28px}
.n0>.cab .res{font-size:clamp(19px,2vw,26px);line-height:1.35;font-weight:500;letter-spacing:-.01em;max-width:900px;margin:0}
.n0>.cab .regua{margin-top:32px;border-top:3px solid var(--branco);padding-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.n0>.cab .regua .qd{border-color:var(--branco);background:var(--preto)}
.n0.aberto>.cab .regua .qd{background:var(--vermelho);border-color:var(--vermelho-texto)}
.n0>.cab .regua .dica{color:var(--branco);opacity:.85}
.n0>.cab:hover .res{text-decoration:underline;text-decoration-color:var(--vermelho-texto);text-decoration-thickness:3px;text-underline-offset:6px}

/* nível 1 — capítulo (faixa vermelha) */
.n1>.cab{background:var(--vermelho);color:var(--branco);padding:clamp(28px,4vw,48px) clamp(20px,5vw,72px);border-top:3px solid var(--vermelho-escuro);scroll-margin-top:calc(var(--topo-h) + var(--sat) + 8px)}
.n1>.cab:hover{background:var(--vermelho-escuro)}
.n1>.cab .int{max-width:960px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:8px clamp(16px,3vw,36px);align-items:start}
.n1>.cab .numero{font-size:clamp(64px,9vw,120px);font-weight:800;line-height:.8;letter-spacing:-.05em;grid-row:1/3}
.n1>.cab .tit{font-size:clamp(20px,2.6vw,34px);line-height:1.05;letter-spacing:-.02em;font-weight:800;text-transform:uppercase;text-wrap:balance;margin:6px 0 0}
.n1>.cab .rotulo-branco{display:block;opacity:.85;margin-top:8px}
.n1>.cab .res{grid-column:2;font-size:clamp(16px,1.4vw,19px);line-height:1.45;margin:14px 0 0;max-width:780px;border-top:2px solid rgba(var(--branco-rgb),.6);padding-top:12px}
.n1>.cab .regua{grid-column:2;display:flex;align-items:center;gap:12px;margin-top:14px}
.n1>.cab .regua .qd{border-color:var(--branco);background:var(--vermelho)}
.n1.aberto>.cab .regua .qd{background:var(--branco)}
.n1>.cab .regua .dica{color:var(--branco);opacity:.9}
.n1>.filhos{padding:8px 0 24px}

/* nível 2 — seção */
.n2{margin:0 clamp(20px,5vw,72px);border-top:1px solid var(--cinza)}
.n2>.cab{padding:26px 0 22px;max-width:var(--largura);margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:baseline;scroll-margin-top:calc(var(--topo-h) + var(--sat) + 8px)}
.n2>.cab .qd{margin-top:6px;align-self:start}
.n2>.cab .rot{grid-column:2;display:flex;align-items:center;gap:12px}
.n2>.cab .rot .linha{flex:1;height:2px;background:var(--preto)}
.n2>.cab .pag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.45}
.n2>.cab .tit{grid-column:2;font-size:clamp(22px,2.3vw,30px);line-height:1.1;letter-spacing:-.02em;font-weight:800;margin:6px 0 8px;text-wrap:balance}
.n2.abertura>.cab .tit{font-size:18px;color:var(--vermelho-texto);text-transform:uppercase;letter-spacing:.04em}
.n2>.cab .res{grid-column:2;margin:0;font-size:17px;line-height:1.5;max-width:66ch}
.n2>.cab:hover .tit{color:var(--vermelho-texto)}
.n2>.filhos{max-width:var(--largura);margin:0 auto;padding:0 0 18px;border-left:3px solid var(--preto);margin-left:max(0px,calc((100% - var(--largura))/2))}
.n2>.filhos .n3{margin-left:18px}

/* nível 3 — parágrafo, figura, campo, como-ler */
.n3{border-left:3px solid var(--cinza);margin:6px 0}
.n3.aberto{border-left-color:var(--vermelho-texto)}
.n3>.cab{display:grid;grid-template-columns:auto auto 1fr;gap:0 12px;align-items:baseline;padding:10px 14px 10px 16px}
.n3>.cab:hover{background:var(--cinza)}
.n3>.cab .qd{width:14px;height:14px;border-width:2px;transform:translateY(1px)}
.n3>.cab .rot{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--vermelho-texto);white-space:nowrap}
.n3>.cab .res{margin:0;font-size:17px;line-height:1.45;font-weight:500}
.n3.t-fig>.cab .res,.n3.t-leitura>.cab .res,.n3.t-campo>.cab .res{font-weight:700}
.n3>.filhos{padding:4px 14px 12px 16px}

/* nível 4 — texto integral */
.n4>.cab{padding:6px 0 4px;display:block}
.n4>.cab p{margin:0 0 .9em;max-width:66ch;hyphens:auto}
.n4>.cab p:last-of-type{margin-bottom:.4em}
.n4>.cab ul,.n4>.cab ol{margin:0 0 .9em;padding-left:1.3em;max-width:66ch}
.n4>.cab ul.marc{list-style:none;padding-left:0}.n4>.cab ul.marc li{padding-left:20px;position:relative;margin-bottom:.35em}
.n4>.cab ul.marc li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--vermelho)}
.n4.sem-notas>.cab{cursor:default}
.n4>.cab .glosa{background:none;border-bottom:3px solid var(--vermelho);padding:0}
.n4.aberto>.cab .glosa{background:var(--vermelho);color:var(--branco)}
.n4>.cab .notas-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--vermelho-texto);margin-top:2px}
.n4>.cab .notas-tag .qd{width:12px;height:12px;border-width:2px;border-color:var(--vermelho-texto)}
.n4>.filhos{padding:6px 0 10px}
figure{margin:8px 0 12px;max-width:var(--largura)}figure img{border:2px solid var(--preto);width:100%}
figcaption{margin-top:8px;font-size:14px;line-height:1.4}figcaption .rotulo-v{margin-right:8px}
.ficha-campo{max-width:66ch}.ficha-campo ul{margin:0;padding-left:0;list-style:none}.ficha-campo li{padding-left:18px;position:relative;margin-bottom:6px}.ficha-campo li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--vermelho)}
.ficha-cab{font-size:13px;margin:0 0 10px;color:var(--vermelho-texto);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
table.catalogo{border-collapse:collapse;width:100%;font-size:15px;border:3px solid var(--preto);margin:6px 0 10px}
table.catalogo th{background:var(--preto);color:var(--branco);text-align:left;padding:10px 12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
table.catalogo td{padding:10px 12px;border-top:1px solid var(--cinza);vertical-align:top;line-height:1.4}table.catalogo td.cod{font-weight:800;color:var(--vermelho-texto);white-space:nowrap}
.rolagem{overflow-x:auto}

/* nível 5 — notas */
.n5{background:var(--cinza);border-left:6px solid var(--vermelho);padding:12px 18px;max-width:66ch;margin:2px 0 10px}
.n5 dl{margin:0}.n5 dt{font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--vermelho-texto);margin-top:10px}.n5 dt:first-child{margin-top:0}
.n5 dd{margin:2px 0 0;font-size:16px;line-height:1.5}
.leitura-txt{background:var(--preto);color:var(--branco);padding:16px 20px;max-width:66ch}.leitura-txt p{margin:0;font-size:17px}

/* anexos */
.anexo{margin:24px clamp(20px,5vw,72px) 0;border-top:3px solid var(--preto);padding:28px 0}
.anexo>.cab{max-width:var(--largura);margin:0 auto;display:flex;gap:14px;align-items:baseline}
.anexo>.cab .tit{font-size:clamp(20px,2.2vw,28px);font-weight:800;letter-spacing:-.02em}
.anexo>.filhos{max-width:var(--largura);margin:12px auto 0}
.anexo ol{margin:0;padding:0;list-style:none}.anexo li{position:relative;padding:8px 0 8px 64px;border-top:1px solid var(--cinza);font-size:15px;line-height:1.45}.anexo li .idx{position:absolute;left:0;top:8px;font-weight:800;color:var(--vermelho-texto);font-size:13px}

#rodape{background:var(--preto);color:var(--branco);margin-left:var(--indice-w);padding:clamp(40px,6vw,72px) clamp(20px,5vw,72px) calc(clamp(40px,6vw,72px) + var(--barra-h))}
.rodape-int{max-width:var(--largura);margin:0 auto}.rodape-rotulo{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--vermelho-texto);margin:0 0 14px}
#rodape p{font-size:15px;line-height:1.55;margin:0 0 12px}.rodape-fino{opacity:.7;margin-top:20px!important}
#toast{position:fixed;left:50%;bottom:calc(var(--barra-h) + var(--sab) + 18px);transform:translateX(-50%) translateY(20px);background:var(--vermelho);color:var(--branco);padding:12px 20px;font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;z-index:70;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap}
#toast.mostrar{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:1099px){
  #indice{transform:translateX(-100%);transition:transform .25s;width:min(100vw,420px);background:var(--vermelho);color:var(--branco);border-right:0;top:0;padding-top:0;z-index:80}
  #indice.aberto{transform:none}
  .indice-cab{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--sat) + 18px) 20px 10px;border-bottom:3px solid var(--branco);position:sticky;top:0;background:var(--vermelho)}
  .fechar{background:none;border:0;color:var(--branco);font-size:34px;line-height:1;padding:0 6px}
  #indice-lista a,#indice-lista .cap>a .num,#indice-lista .sec a .num{color:var(--branco)}
  #indice-lista a:hover,#indice-lista a.ativo{background:var(--vermelho-escuro);border-left-color:var(--branco)}
  #veu{position:fixed;inset:0;background:rgba(var(--preto-rgb),.55);z-index:75}
  #arvore,#rodape{margin-left:0}.profundidade{display:none}#barra-mobile{display:flex}.tempo{display:none}.btn-indice-txt{display:none}.btn-indice{padding:0 12px}#topo{gap:12px}
}
@media (min-width:1100px){#veu{display:none!important}}
@media (max-width:640px){
  body{font-size:17px}.marca-titulo{font-size:15px}
  .n1>.cab .int{grid-template-columns:1fr}.n1>.cab .numero{grid-row:auto;font-size:clamp(56px,18vw,96px)}.n1>.cab .res,.n1>.cab .regua{grid-column:1}
  .n2{margin:0 12px}.n2>.filhos{margin-left:0}.n2>.filhos .n3{margin-left:8px}
  .n3>.cab{grid-template-columns:auto 1fr;padding:10px 10px 10px 12px}.n3>.cab .rot{grid-column:2}.n3>.cab .res{grid-column:2}.n3>.cab .qd{grid-row:1/3;align-self:start;margin-top:4px}
  .n3>.filhos{padding:4px 8px 10px 12px}
  .anexo{margin:24px 12px 0}
}

/* ---- v5 (sobre v2): estrutura x detalhe, dois controles ---- */
@import url("../v2/estilo.css");
:root{--trilho:6px}
#leitor{margin-left:var(--indice-w);padding-top:calc(var(--topo-h) + var(--sat) + 30px)}
#topo{gap:16px}

/* controles globais: dois mini-sliders de quadrados com rótulo embaixo */
.globais{display:flex;gap:28px;margin:0 auto;align-items:flex-start;justify-content:center}
.grupo{display:flex;align-items:flex-start;gap:0;position:relative;padding-top:4px}
.grupo-rot{font-size:14px;font-weight:800;color:var(--preto);opacity:.55;margin-right:10px;line-height:18px;width:16px;text-align:center}
.grupo .faixa{display:flex;position:relative}
.grupo .faixa::before{content:"";position:absolute;left:14px;right:14px;top:8px;height:2px;background:var(--preto)}
.gb{position:relative;width:56px;background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;color:var(--preto)}
.gb .q{width:14px;height:14px;border:2px solid var(--preto);background:var(--branco);display:block;position:relative;z-index:1;transition:transform .12s}
.gb .n{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:.6}
.gb.passada .q{background:var(--preto)}
.gb.ativo .q{background:var(--vermelho);border-color:var(--vermelho-texto);transform:scale(1.25)}
.gb.ativo .n{opacity:1;color:var(--vermelho-texto)}
.gb:hover .q{border-color:var(--vermelho-texto)}
.gb.misto .q{outline:2px dashed var(--vermelho);outline-offset:2px}
#barra-mobile{display:none;position:fixed;left:0;right:0;bottom:0;padding:8px 6px calc(6px + var(--sab));background:var(--preto);z-index:50;justify-content:space-around;gap:8px}
#barra-mobile .grupo-rot{color:var(--branco);opacity:.7}
#barra-mobile .gb{width:44px;color:var(--branco)}#barra-mobile .gb .q{border-color:var(--branco);background:var(--preto)}#barra-mobile .gb.passada .q{background:var(--branco)}#barra-mobile .gb.ativo .q{background:var(--vermelho);border-color:var(--vermelho-texto)}#barra-mobile .gb .n{opacity:.7}#barra-mobile .gb.ativo .n{color:var(--branco);opacity:1}
#barra-mobile .grupo .faixa::before{background:var(--branco)}

/* trilha */
#trilha{position:fixed;top:calc(var(--topo-h) + var(--sat));left:var(--indice-w);right:0;height:30px;background:var(--cinza);border-bottom:2px solid var(--preto);display:flex;align-items:center;gap:8px;padding:0 clamp(20px,5vw,72px);font-size:12px;font-weight:700;z-index:45;white-space:nowrap;overflow:hidden}
#trilha .tr-cap{color:var(--vermelho-texto);font-weight:800}#trilha .tr-sep{opacity:.45}#trilha .tr-vazio{opacity:.6;font-weight:500}

/* controles de bloco: só símbolos */
.linha{display:flex;align-items:center;gap:10px;min-width:0}
.chev{flex:none;width:30px;height:30px;border:2px solid var(--preto);background:var(--branco);color:var(--preto);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.chev .tri{display:block;width:0;height:0;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent currentColor;transition:transform .15s;margin-left:2px}
.chev[aria-expanded="true"] .tri{transform:rotate(90deg);margin-left:0;margin-top:2px}
.chev:hover{border-color:var(--vermelho-texto);color:var(--vermelho-texto)}
.gran{display:inline-flex;gap:5px;margin-left:auto;flex:none;align-items:center}
.gran .gp{width:14px;height:14px;border:2px solid var(--preto);background:var(--branco);padding:0;display:block;cursor:pointer}
.gran .gp.passada{background:var(--preto)}
.gran .gp.ativo{background:var(--vermelho);border-color:var(--vermelho-texto)}
.gran .gp:not([disabled]):hover{border-color:var(--vermelho-texto)}
.gran .gp[disabled]{border-color:var(--cinza);cursor:default}
.gran .nome{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.5;margin-left:4px;min-width:44px}

/* TESE */
.tese{background:var(--preto);color:var(--branco);padding:clamp(36px,5vw,64px) clamp(20px,5vw,72px) clamp(24px,3vw,40px)}
.tese .int{max-width:960px;margin:0 auto}
.tese h1{font-size:clamp(28px,4.2vw,54px);line-height:.98;letter-spacing:-.025em;font-weight:800;margin:10px 0 14px;text-wrap:balance}
.tese .autor{font-size:clamp(15px,1.4vw,18px);margin:0 0 4px}.tese .autor b{font-weight:800}
.tese .orient{font-size:14px;opacity:.75;margin:0 0 22px}
.tese .linha{margin-bottom:14px}
.tese .chev{border-color:var(--branco);color:var(--branco);background:var(--preto)}
.tese .gran .gp{border-color:var(--branco);background:var(--preto)}.tese .gran .gp.passada{background:var(--branco)}.tese .gran .gp.ativo{background:var(--vermelho);border-color:var(--vermelho-texto)}.tese .gran .nome{color:var(--branco)}
.tese .texto-frase{font-size:clamp(20px,2.2vw,28px);line-height:1.3;font-weight:600;margin:0;max-width:900px}
.tese .texto-res{font-size:clamp(17px,1.7vw,22px);line-height:1.4;font-weight:500;margin:0;max-width:900px}
.tese .ajuda{margin-top:18px;font-size:12px;opacity:.7}

/* CAPÍTULO */
.cap{scroll-margin-top:calc(var(--topo-h) + var(--sat) + 40px)}
.cap>.cab-cap{background:var(--vermelho);color:var(--branco);padding:clamp(18px,2.6vw,28px) clamp(20px,5vw,72px);border-top:3px solid var(--vermelho-escuro)}
.cap>.cab-cap .int{max-width:960px;margin:0 auto}
.cap>.cab-cap .linha{gap:clamp(12px,2vw,22px)}
.cap>.cab-cap .numero{font-size:clamp(40px,5vw,72px);font-weight:800;line-height:.85;letter-spacing:-.05em;margin:0;flex:none}
.cap>.cab-cap .tit{font-size:clamp(16px,1.9vw,24px);line-height:1.05;letter-spacing:-.02em;font-weight:800;text-transform:uppercase;margin:0;flex:1 1 auto;min-width:0;text-wrap:balance}
.cap>.cab-cap .chev{border-color:var(--branco);color:var(--branco);background:var(--vermelho)}
.cap>.cab-cap .gran .gp{border-color:var(--branco);background:var(--vermelho)}.cap>.cab-cap .gran .gp.passada{background:var(--branco)}.cap>.cab-cap .gran .gp.ativo{background:var(--branco);border-color:var(--branco);outline:2px solid var(--vermelho-escuro)}.cap>.cab-cap .gran .nome{color:var(--branco);opacity:.8}
.cap>.cab-cap .texto{margin:12px 0 0;font-size:clamp(16px,1.4vw,19px);line-height:1.45;max-width:820px}.cap>.cab-cap .texto p{margin:0}
.cap.aberto>.cab-cap{position:sticky;top:calc(var(--topo-h) + var(--sat) + 30px);z-index:40;padding-top:8px;padding-bottom:8px}
.cap.aberto>.cab-cap .numero{font-size:clamp(24px,2.6vw,34px)}
.cap.aberto>.cab-cap .tit{font-size:clamp(12px,1.2vw,15px)}
.cap.aberto>.cab-cap .texto{display:none}
.cap-filhos{border-left:var(--trilho) solid var(--vermelho);margin-left:clamp(8px,2.5vw,36px);padding:6px 0 16px clamp(10px,2.5vw,36px)}

/* SEÇÃO — um cabeçalho de uma linha */
.sec{margin:12px clamp(20px,5vw,72px) 0;border-left:var(--trilho) solid var(--preto);padding:10px 0 12px clamp(12px,2vw,22px);scroll-margin-top:calc(var(--topo-h) + var(--sat) + 96px)}
.cap-filhos .sec{margin-left:0;margin-right:0}
.sec>.int{max-width:var(--largura)}
.sec .num{color:var(--vermelho-texto);font-weight:800;font-size:15px;flex:none;letter-spacing:.02em}
.sec .tit{font-size:clamp(17px,1.8vw,22px);line-height:1.15;letter-spacing:-.02em;font-weight:800;margin:0;flex:1 1 auto;min-width:0}
.sec.abertura .tit{font-size:14px;color:var(--vermelho-texto);text-transform:uppercase;letter-spacing:.06em}
.sec .texto{max-width:66ch;margin-top:10px}
.sec .texto-frase{font-size:17px;line-height:1.45;font-weight:500;margin:0}
.sec .texto-res{font-size:17px;line-height:1.5;margin:0}
.sec .texto p{margin:0 0 .95em;hyphens:auto}.sec .texto p:last-child{margin-bottom:0}
.sec .texto ul,.sec .texto ol{margin:0 0 .95em;padding-left:1.3em}.sec .texto ul.marc{list-style:none;padding-left:0}.sec .texto ul.marc li{padding-left:20px;position:relative;margin-bottom:.35em}.sec .texto ul.marc li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--vermelho)}
.sec-filhos{border-left:var(--trilho) solid var(--cinza);margin:10px 0 0 6px;padding:0 0 2px clamp(10px,2vw,18px)}

/* PARÁGRAFO */
.par{padding:8px 0 10px;border-bottom:1px solid var(--cinza)}
.par:last-child{border-bottom:0}
.par .linha{margin-bottom:4px}
.par .lbl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--preto);opacity:.55;white-space:nowrap}
.par .gran .gp{width:12px;height:12px}
.par .texto-frase{font-size:16px;line-height:1.45;font-weight:500;margin:0;max-width:66ch}
.par .texto p{margin:0 0 .8em;font-size:17px;max-width:66ch;hyphens:auto}.par .texto p:last-child{margin-bottom:0}
.par .texto ul,.par .texto ol{margin:0;padding-left:1.3em;max-width:66ch}
mark.glosa{background:none;box-shadow:inset 0 -3px 0 var(--vermelho);color:inherit}
.notas{background:var(--cinza);border-left:6px solid var(--vermelho);padding:12px 18px;max-width:66ch;margin:10px 0 0}
.notas dl{margin:0}.notas dt{font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--vermelho-texto);margin-top:10px}.notas dt:first-child{margin-top:0}.notas dd{margin:2px 0 0;font-size:16px;line-height:1.5}
.leitura-txt{background:var(--preto);color:var(--branco);padding:14px 18px;max-width:66ch;margin:0 0 12px}.leitura-txt p{margin:0;font-size:16px}.leitura-txt .rotulo-v{display:block;margin-bottom:6px}
figure{margin:8px 0 6px;max-width:var(--largura)}figure img{border:2px solid var(--preto);width:100%}figcaption{margin-top:8px;font-size:14px}
.ficha{border:3px solid var(--preto);margin:6px 0 14px}.ficha-cab{background:var(--vermelho);color:var(--branco);padding:12px 16px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline}
.ficha-cab .cod,.ficha-cab .nome{font-weight:800;font-size:19px}.ficha-cab .camada{flex-basis:100%;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.ficha dl{margin:0;display:grid;grid-template-columns:minmax(110px,150px) 1fr}.ficha dt{padding:12px 14px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--vermelho-texto);border-top:1px solid var(--cinza)}.ficha dd{margin:0;padding:12px 16px 12px 0;font-size:15px;line-height:1.5;border-top:1px solid var(--cinza)}.ficha dd ul{margin:0;padding-left:0;list-style:none}.ficha dd li{padding-left:16px;position:relative;margin-bottom:5px}.ficha dd li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--vermelho)}
.ficha-campo{max-width:66ch}.ficha-campo p{margin:0}.ficha-campo ul{margin:0;padding-left:0;list-style:none}.ficha-campo li{padding-left:18px;position:relative;margin-bottom:6px}.ficha-campo li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--vermelho)}
table.catalogo{border-collapse:collapse;width:100%;font-size:14px;border:3px solid var(--preto)}table.catalogo th{background:var(--preto);color:var(--branco);text-align:left;padding:9px 11px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}table.catalogo td{padding:9px 11px;border-top:1px solid var(--cinza);vertical-align:top}table.catalogo td.cod{font-weight:800;color:var(--vermelho-texto);white-space:nowrap}.rolagem{overflow-x:auto}
.anexo{margin:28px clamp(20px,5vw,72px) 0;border-top:3px solid var(--preto);padding:24px 0}
.anexo .int{max-width:var(--largura)}.anexo .linha{gap:12px}.anexo h3{font-size:clamp(18px,2vw,26px);font-weight:800;margin:0}
.anexo ol{margin:16px 0 0;padding:0;list-style:none}.anexo li{position:relative;padding:8px 0 8px 64px;border-top:1px solid var(--cinza);font-size:15px;line-height:1.45;max-width:820px}.anexo li .idx{position:absolute;left:0;top:8px;font-weight:800;color:var(--vermelho-texto);font-size:13px}
#rodape{margin-left:var(--indice-w)}
#indice-lista li.sec,#indice-lista li.cap{border:0;padding:0;margin:0;scroll-margin:0}
@media (max-width:1280px){.gb{width:46px}.gb .n{font-size:8px}}
@media (max-width:1099px){#leitor,#rodape{margin-left:0}.globais{display:none}#barra-mobile{display:flex}#trilha{left:0}#rodape{padding-bottom:120px}}
@media (max-width:640px){
  .cap>.cab-cap{padding-left:12px;padding-right:12px}.cap-filhos{margin-left:6px;padding-left:8px}
  .sec{margin-left:12px;margin-right:12px;padding-left:10px}.cap-filhos .sec{margin-left:0;margin-right:0}
  .sec-filhos{margin-left:2px;padding-left:8px}.sec .tit{font-size:16px}
  .gran .nome{display:none}
  .cap.aberto>.cab-cap{position:static}
  .anexo{margin:24px 12px 0}
  #barra-mobile .gb{width:34px}#barra-mobile .gb .n{display:none}#barra-mobile .grupo .faixa::before{left:10px;right:10px}
}
@media (max-width:640px){.sec .linha,.par .linha{flex-wrap:wrap;row-gap:6px}.sec .gran,.par .gran{margin-left:auto}.sec .tit{flex-basis:calc(100% - 90px)}}

/* ---- v6 (sobre v5): gestos + glossário ---- */
@import url("../v5/estilo.css");
.bloco{touch-action:pan-y}.rolagem,.rolagem *{touch-action:auto}
.arrastando,.arrastando *{user-select:none!important;cursor:ew-resize!important}
.gl{background:rgba(var(--preto-rgb),.08);border-bottom:1px dotted rgba(var(--preto-rgb),.4);cursor:help;padding:0 1px}
.gl:hover{background:rgba(219,30,47,.14);border-bottom-color:var(--vermelho-texto)}
.tese .gl,.cap>.cab-cap .gl{background:rgba(var(--branco-rgb),.14);border-bottom-color:rgba(var(--branco-rgb),.5)}
.notas .gl,.leitura-txt .gl{background:rgba(var(--preto-rgb),.07)}
#pop{position:fixed;z-index:90;width:min(380px,calc(100vw - 24px));background:var(--branco);color:var(--preto);border:3px solid var(--preto);padding:10px 14px 10px}
#pop .pop-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
#pop .pop-rot{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--vermelho-texto)}
#pop .pop-x{border:0;background:none;font-size:22px;line-height:1;padding:0 4px;cursor:pointer;color:var(--preto)}
#pop .pop-t{font-weight:800;font-size:17px;margin:0 0 6px;letter-spacing:-.01em}
#pop .pop-n{margin:0;font-size:15px;line-height:1.5}
#pop .pop-r{margin:10px 0 0;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.5}
#pop::before{content:"";position:absolute;left:-3px;top:-3px;width:14px;height:14px;background:var(--vermelho)}
.anexo.glossario li{padding-left:0}.anexo.glossario li b{display:block;color:var(--vermelho-texto);font-size:13px;letter-spacing:.02em}
@media (max-width:640px){#pop{left:12px!important;right:12px;bottom:calc(var(--sab) + 96px);top:auto!important;width:auto}}
/* etiqueta do gesto: a régua de quadrados com o alvo aceso */
#dica{position:fixed;z-index:95;display:flex;align-items:center;gap:9px;background:var(--branco);color:var(--preto);border:2px solid var(--preto);padding:7px 11px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;pointer-events:none;white-space:nowrap;transform:translate(16px,-50%)}
#dica.pre{opacity:.55}
#dica.limite{background:var(--preto);color:var(--branco);border-color:var(--preto)}
#dica .dq{display:inline-flex;gap:4px}
#dica .dq i{display:block;width:13px;height:13px;border:2px solid var(--preto);background:var(--branco)}
#dica .dq i.passada{background:var(--preto)}
#dica .dq i.ativo{background:var(--vermelho);border-color:var(--vermelho-texto);transform:scale(1.2)}
#dica .dq i.off{border-color:var(--cinza)}
#dica.limite .dq i{border-color:var(--branco);background:var(--preto)}#dica.limite .dq i.passada{background:var(--branco)}#dica.limite .dq i.ativo{background:var(--vermelho);border-color:var(--vermelho-texto)}
#dica .dtri{display:block;width:0;height:0;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent currentColor}
#dica .dtri.fechar{transform:rotate(90deg)}
#dica .dn{line-height:1}

/* ---- F-004: botão de tema claro/escuro ---- */
.btn-tema{display:flex;align-items:center;gap:8px;background:none;border:2px solid var(--preto);color:var(--preto);height:36px;padding:0 12px;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.btn-tema:hover{border-color:var(--vermelho-texto);color:var(--vermelho-texto)}
.btn-tema .pt{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-radius:50%}
[data-tema="escuro"] .btn-tema .pt{background:currentColor}
@media (max-width:640px){.btn-tema .rot-tema{display:none}.btn-tema{padding:0 10px}}

/* ---- F-004: proveniência — círculo ao lado do rótulo do bloco, símbolo não rótulo.
   Forma (círculo) deliberadamente diferente do quadrado usado no controle de
   detalhe, para não confundir "quanto texto" com "quem escreveu". Clique abre o
   mesmo #pop do glossário, com conteúdo de proveniência. Nunca fica ausente por
   padrão: todo bloco mostra o círculo, inclusive quando a proveniência não foi
   informada (contorno tracejado) — o esquema da obra não tem valor-padrão para
   este campo, e a interface segue a mesma regra. */
.prov{display:inline-flex;flex:none;width:11px;height:11px;border-radius:50%;border:2px solid var(--preto);background:none;padding:0;cursor:pointer;margin-right:2px;vertical-align:middle}
.prov:hover{border-color:var(--vermelho-texto)}
.prov-autor{background:var(--preto)}
.prov-gerado{background:var(--vermelho-texto);border-color:var(--vermelho-texto)}
.prov-terceiro{background:none;border-style:dashed}
.prov-indefinido{background:repeating-linear-gradient(45deg,var(--preto) 0 2px,transparent 2px 4px);border-style:dotted;opacity:.7}
.tese .prov,.cap>.cab-cap .prov{border-color:var(--branco)}
.tese .prov-autor,.cap>.cab-cap .prov-autor{background:var(--branco)}
#pop.pop-prov::before{background:var(--vermelho-texto)}
.pop-prov-legenda{margin:8px 0 0;font-size:12px;line-height:1.45;opacity:.75}

/* ---- F-004: nível ainda não escrito — nunca vazio em silêncio ---- */
.nao-escrito{border:2px dashed var(--cinza);background:rgba(var(--preto-rgb),.03);padding:10px 14px;margin:6px 0;font-size:14px;line-height:1.5;max-width:66ch}
.nao-escrito .rotulo-v{display:block;margin-bottom:4px}
.nao-escrito p{margin:0}
.gran .gp.pendente{position:relative}
.gran .gp.pendente::after{content:"";position:absolute;inset:-3px;border:2px dotted var(--cinza)}