/*
 * reader.css — Leitor interativo do VadeMecum (Epic 6, D22).
 * Porte fiel do protótipo aprovado (leitor-proto). JS externo (assets/reader.js),
 * sem webfont/CDN (pilha serif do sistema). 3 modos via [data-modo] no <html>.
 *
 * Carregado ANTES do <style> crítico inline de reader.php (marca d'água + @media print),
 * que continua sendo a autoridade da proteção. Aqui vai TODO o visual do leitor.
 */

:root{
  color-scheme: light;
  --papel:#F7F5F0; --branco:#FFFFFF; --tinta:#191817; --tinta-2:#6E6A63; --tinta-3:#9A958C;
  --linha:#E7E4DC; --campo:#F2F0EB; --latao:#B08D57; --latao-esc:#8E6F3F;
  --am:#FCE6A0; --vd:#A9E0C0; --az:#B9D4FB; --rx:#D5C7F7; --rs:#F6C6DC; --lj:#F8D2A6;
  --ok:#22A06B;
  --fs:19px; --medida:70ch;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
:root[data-modo="sepia"]{--papel:#F1E7D3;--branco:#FAF3E4;--campo:#EADFC8;--linha:#DFD1B4;--tinta:#3A2E1D;--tinta-2:#6B5B44}
:root[data-modo="noite"]{
  color-scheme:dark;
  --papel:#15181D;--branco:#1B1F26;--campo:#232830;--linha:#2C323B;
  --tinta:#E2E6EB;--tinta-2:#98A0AB;--tinta-3:#767E89;--latao:#C9A24B;--latao-esc:#D9B76A;
  --am:#5B4A14;--vd:#20452F;--az:#1D3A57;--rx:#3A2E58;--rs:#4A2338;--lj:#4B3411;
}

*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);
  transition:background .2s ease,color .2s ease}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--latao);outline-offset:2px;border-radius:6px}
svg{display:block}

/* ================= barra superior ================= */
.bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:.85rem;
  height:64px;padding:0 1.1rem;background:var(--branco);border-bottom:1px solid var(--linha)}
.ico{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--tinta-2);
  text-decoration:none}
.ico:hover{background:var(--campo);color:var(--tinta)}
.marca{display:flex;align-items:center;gap:.6rem;min-width:0}
.marca .nome{font-family:var(--serif);font-size:1.06rem;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26vw}
.trilha{display:flex;align-items:center;gap:.45rem;padding:.4rem .75rem;background:var(--campo);
  border-radius:9px;font-size:.86rem;color:var(--tinta-2);white-space:nowrap;max-width:30vw;overflow:hidden}
.trilha .barra{color:var(--tinta-3)}
.trilha .atual{color:var(--latao-esc);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.busca{flex:1;max-width:400px;margin:0 auto;display:flex;align-items:center;gap:.6rem;
  height:42px;padding:0 .9rem;background:var(--campo);border-radius:12px;color:var(--tinta-3)}
.busca input{flex:1;border:0;background:none;font:inherit;font-size:.9rem;color:var(--tinta);outline:none}
.busca input::placeholder{color:var(--tinta-3)}
.busca .kbd{font-family:var(--sans);font-size:.76rem;color:var(--tinta-2);white-space:nowrap}
.dir{display:flex;align-items:center;gap:.15rem;margin-left:auto}
#btBusca{display:none} /* só aparece no celular/tablet, onde a barra .busca fica oculta */
.div{width:1px;height:24px;background:var(--linha);margin:0 .5rem}
.aa{font-family:var(--serif);font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
.avatar{cursor:pointer;padding:0;border:0;width:34px;height:34px;border-radius:50%;background:#B9A7EC;color:#241C3C;
  display:grid;place-items:center;font-size:.78rem;font-weight:700;letter-spacing:.02em}
.conta{position:relative;display:flex;align-items:center}
.conta-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:230px;
  background:var(--papel);border:1px solid var(--linha);border-radius:12px;padding:6px;
  box-shadow:0 14px 38px rgba(30,26,20,.16)}
.conta-menu[hidden]{display:none}
.conta-menu__nome{display:block;padding:8px 10px 6px;font-size:.76rem;font-weight:700;
  color:var(--tinta-2);text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--linha);margin-bottom:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conta-menu__it{display:flex;align-items:center;gap:.55rem;padding:10px;border-radius:9px;
  font-size:.9rem;color:var(--tinta);text-decoration:none}
.conta-menu__it:hover,.conta-menu__it:focus{background:var(--campo);color:var(--latao-esc)}
.bt-rot{display:inline-flex;align-items:center;gap:.4rem;height:34px;padding:0 .7rem;border-radius:9px;
  color:var(--tinta-2);font-size:.84rem;white-space:nowrap}
.bt-rot:hover{background:var(--campo);color:var(--tinta)}
.bt-rot[aria-pressed="true"]{background:var(--campo);color:var(--latao-esc);font-weight:600}
.bt-vel{min-width:40px;height:34px;padding:0 .45rem;border-radius:9px;color:var(--tinta-2);
  font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.bt-vel:hover{background:var(--campo);color:var(--tinta)}

/* parágrafo/palavra sendo lidos em voz alta */
.lendo{background:color-mix(in srgb,var(--am) 24%,transparent);border-radius:6px;
  box-shadow:0 0 0 .35rem color-mix(in srgb,var(--am) 24%,transparent)}
.w.falando{background:var(--am);border-radius:3px;box-shadow:0 0 0 2px var(--am);font-weight:600}
:root[data-modo="noite"] .w.falando{color:#F7EBCB}

/* ================= player de música ================= */
.player{position:fixed;top:60px;right:16px;z-index:56;display:none;flex-direction:column;gap:.7rem;
  width:min(320px,92vw);padding:1rem;background:var(--branco);border:1px solid var(--linha);
  border-radius:15px;box-shadow:0 16px 40px -12px rgba(0,0,0,.26);font-family:var(--sans)}
.player.on{display:flex}
.player h4{margin:0;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
.player .agora{display:flex;align-items:center;gap:.55rem;font-size:.95rem;font-weight:600}
.player .fav{font-size:.68rem;font-weight:700;color:#8A6D2F;background:var(--am);
  padding:.1rem .4rem;border-radius:5px;white-space:nowrap}
.player .barra{height:4px;background:var(--campo);border-radius:3px;overflow:hidden}
.player .barra i{display:block;height:100%;width:0;background:var(--latao);border-radius:3px;transition:width .9s linear}
.player .ctr{display:flex;align-items:center;justify-content:center;gap:.4rem}
.player .ctr button{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--tinta-2)}
.player .ctr button:hover{background:var(--campo);color:var(--tinta)}
.player .ctr .play{width:46px;height:46px;background:var(--tinta);color:var(--branco);border-radius:50%}
.player .ctr .play:hover{background:var(--tinta);opacity:.9;color:var(--branco)}
.player .lista{display:flex;flex-direction:column;gap:1px;max-height:170px;overflow-y:auto}
.player .lista button{display:flex;align-items:center;gap:.5rem;padding:.42rem .55rem;border-radius:8px;
  font-size:.85rem;color:var(--tinta-2);text-align:left}
.player .lista button:hover{background:var(--campo);color:var(--tinta)}
.player .lista button[aria-current="true"]{background:var(--campo);color:var(--tinta);font-weight:600}
.player .lista .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player .lista .min{font-size:.72rem;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.player .vazio{font-size:.82rem;line-height:1.5;color:var(--tinta-3);text-align:center;padding:1rem .4rem .4rem}
.player .aviso{font-size:.74rem;line-height:1.45;color:var(--tinta-3);border-top:1px solid var(--linha);padding-top:.6rem}

/* ================= sumário ================= */
/* Sumário à ESQUERDA; Dicionário flutuante à DIREITA (espelhado, à esquerda da trilha). */
.toolbtns{position:fixed;top:84px;left:22px;z-index:45;display:flex;gap:.5rem}
#btDic{position:fixed;top:84px;right:22px;z-index:45}
.sum-bt{display:flex;align-items:center;gap:.55rem;cursor:pointer;
  padding:.6rem .95rem;background:var(--branco);border:1px solid var(--linha);border-radius:11px;
  font-size:.9rem;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.sum-bt:hover{border-color:var(--tinta-3)}
.sum{position:fixed;top:64px;left:0;width:min(340px,86vw);height:calc(100dvh - 64px);z-index:44;
  background:var(--branco);border-right:1px solid var(--linha);padding:1.4rem 1rem 3rem 1.3rem;
  overflow-y:auto;transform:translateX(-102%);transition:transform .22s ease}
.sum.on{transform:none}
.sum h3{margin:.2rem 0 1rem;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-3)}
.sum a{display:block;padding:.4rem .6rem;border-radius:7px;text-decoration:none;color:var(--tinta-2);
  font-size:.88rem;line-height:1.4;border-left:2px solid transparent}
.sum a .des{display:block;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--latao-esc);margin-bottom:.08rem}
.sum a:hover{background:var(--campo);color:var(--tinta)}
.sum a.n2{padding-left:1.4rem} .sum a.n3{padding-left:2.2rem;font-size:.85rem}
.sum a[aria-current="true"]{background:var(--campo);color:var(--tinta);border-left-color:var(--latao);font-weight:600}
.sum .vazio{color:var(--tinta-3);font-size:.86rem;padding:1rem .6rem}

/* ================= folha / conteúdo real (vm-block) ================= */
.pagina{position:relative;display:flex;flex-wrap:wrap;justify-content:center;padding:3.2rem 1.5rem 22vh}
.folha{position:relative;width:100%;max-width:var(--medida);font-family:var(--serif);font-size:var(--fs);
  line-height:1.92;-webkit-font-smoothing:antialiased}
/* sentinela da rolagem contínua: quebra para uma linha própria ABAIXO da folha. */
#vm-sentinel{flex:0 0 100%;width:100%;height:1px}

/* Cada vm_block = um parágrafo justificado com hifenização pt-BR. */
.vm-block{position:relative;margin:0 0 1.5rem;scroll-margin-top:6rem}
.vm-block-text{text-align:justify;text-justify:inter-word;
  -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3}
.vm-block-label{font-weight:700}

/* Banner do TÍTULO DA LEI — nome bonito (canonical) centralizado + ◆, antes dos artigos. */
.vm-lawbanner{margin:1rem 0 3rem;text-align:center;scroll-margin-top:6rem}
.vm-lawbanner-nome{display:block;font-family:var(--serif);font-size:2.3em;font-weight:700;
  letter-spacing:.05em;line-height:1.15;text-wrap:balance;text-transform:uppercase;color:var(--tinta)}
.vm-lawbanner::after{content:"";display:block;width:8px;height:8px;margin:1.5rem auto 0;
  background:var(--latao);transform:rotate(45deg);border-radius:1px}

/* Títulos / capítulos / seções — CENTRALIZADOS, em faixas (pedido do dono,
   31/07/2026). Hierarquia: TÍTULO = faixa com fio de latão na base; CAPÍTULO =
   faixa mais leve; SEÇÃO/SUBSEÇÃO = entre filetes dourados, sem fundo. Tudo em
   variáveis (--campo/--linha/--latao), então os três modos de leitura (claro,
   sépia, noturno) acompanham sozinhos. */
.vm-block.vm-titulo,.vm-block.vm-capitulo,.vm-block.vm-secao,.vm-block.vm-subsecao,
.vm-block.vm-section-title{margin:3rem 0 1.6rem;text-align:center}
.vm-block.vm-titulo .vm-block-label,
.vm-block.vm-section-title .vm-block-label{display:inline-block;font-size:1.26em;font-weight:700;
  letter-spacing:-.01em;line-height:1.35;text-wrap:balance;
  padding:.8rem 1.6rem;background:var(--campo);border:1px solid var(--linha);border-radius:14px;
  box-shadow:inset 0 -3px 0 var(--latao)}
.vm-block.vm-capitulo .vm-block-label{display:inline-block;font-size:1.12em;font-weight:700;
  letter-spacing:-.006em;line-height:1.35;text-wrap:balance;
  padding:.55rem 1.3rem;background:var(--campo);border:1px solid var(--linha);border-radius:12px}
.vm-block.vm-secao .vm-block-label,.vm-block.vm-subsecao .vm-block-label{
  display:inline-block;font-size:1.02em;font-weight:700;line-height:1.35;color:var(--tinta-2);
  text-wrap:balance;padding:.35rem 1rem;
  border-top:1px solid var(--latao);border-bottom:1px solid var(--latao)}

/* Designador em negrito DENTRO do texto (Art. 1º / § 1º / XI - / a)) — sem rótulo duplicado. */
.vm-num{font-weight:700;letter-spacing:.005em}

.vm-block.vm-revoked{opacity:.55}
.vm-block.vm-divider hr{border:0;border-top:1px solid var(--linha);margin:2rem auto;width:40%}
.vm-empty,.vm-block.vm-note .vm-block-text{color:var(--tinta-2)}

/* grifo automático do dicionário (server: <span class="termo-chave">). */
.termo-chave{color:var(--latao-esc);font-weight:600}

/* ================= grifos / marcações do aluno ================= */
mark.hl{padding:.1em .06em;border-radius:3px;background:var(--am);color:inherit;cursor:pointer;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
mark.hl:focus-visible{outline:2px solid var(--latao);outline-offset:1px}
mark.hl-yellow{background:var(--am)} mark.hl-green{background:var(--vd)}
mark.hl-blue{background:var(--az)} mark.hl-purple{background:var(--rx)}
mark.hl-pink{background:var(--rs)} mark.hl-orange{background:var(--lj)}
/* Sublinhado (style=underline): sem fundo, borda na cor. */
mark.hl-underline{background:none;border-radius:0;padding-bottom:.02em;border-bottom:2px solid var(--latao)}
mark.hl-underline.hl-green{border-bottom-color:#4FB07A}
mark.hl-underline.hl-blue{border-bottom-color:#3E8EF7}
mark.hl-underline.hl-purple{border-bottom-color:#8E6BE0}
mark.hl-underline.hl-orange{border-bottom-color:#D98A3A}
/* Importante (style=box): traço de marca-texto âmbar. */
mark.hl-imp{background:none;border-radius:0;box-shadow:inset 0 -.62em 0 var(--am)}
/* Nota: destaque sutil azul, ancorado ao trecho. */
mark.hl-note{background:color-mix(in srgb,var(--az) 55%,transparent)}
/* Esconder (style=redact): TARJA opaca que cobre a palavra pra forçar a memória. Revela no
   hover (desktop) e no toque/clique/foco (celular, via classe .revelado). Funciona nos 3 modos:
   barra escura no claro/sépia, barra clara no noturno; ao revelar, fica um grifo âmbar. */
mark.hl-redact{background:#33322e!important;color:transparent!important;border-radius:3px;
  box-shadow:none!important;text-shadow:none;border-bottom:0!important;
  transition:background .12s ease,color .12s ease}
:root[data-modo="noite"] mark.hl-redact{background:#6f6d67!important}
/* Revela: hover (desktop, enquanto o mouse está em cima) ou classe .revelado (toque/clique,
   controlada por JS com auto-esconder). NÃO usa :focus — senão o foco do toque mantinha
   revelado e furava o timer de auto-esconder. */
mark.hl-redact:hover,mark.hl-redact.revelado{
  background:var(--am)!important;color:inherit!important}

/* Bloco recém-navegado pisca. */
.vm-block.vm-flashled{animation:vmFlash 1.2s ease}
@keyframes vmFlash{0%,100%{background:transparent}30%{background:color-mix(in srgb,var(--latao) 20%,transparent)}}

/* ícone de anotação na MARGEM — nunca entra no fluxo do texto */
.selo{position:absolute;left:-3rem;display:grid;place-items:center;width:26px;height:26px;
  background:#FBD24E;color:#3A2D05;border-radius:7px;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.14);transition:transform .12s ease;z-index:4}
.selo:hover{transform:scale(1.09)}
:root[data-modo="noite"] .selo{background:#C9A24B;color:#1A1508}
@media (max-width:1180px){ .folha{padding-right:2.6rem} .selo{left:auto;right:-.1rem} }

/* ================= rodapé de progresso ================= */
.rail{position:fixed;right:9px;top:96px;bottom:96px;width:3px;background:var(--linha);
  border-radius:2px;z-index:30}
.rail b{position:absolute;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:#2F7DF6;box-shadow:0 0 0 3px color-mix(in srgb,var(--papel) 80%,transparent);transition:top .15s linear}

/* ================= barra de seleção ================= */
.selbar{position:absolute;z-index:60;display:none;align-items:center;gap:.1rem;padding:.42rem .5rem;
  background:var(--branco);border:1px solid var(--linha);border-radius:15px;
  box-shadow:0 12px 34px -10px rgba(0,0,0,.26),0 3px 10px -4px rgba(0,0,0,.14)}
.selbar.on{display:flex}
.selbar .cor{width:19px;height:19px;border-radius:50%;margin:0 .13rem;border:1px solid rgba(0,0,0,.07)}
.selbar .cor[aria-pressed="true"]{box-shadow:0 0 0 2px var(--branco),0 0 0 4px var(--tinta-3)}
.selbar .sep{width:1px;height:22px;background:var(--linha);margin:0 .5rem}
.selbar .act{display:flex;align-items:center;gap:.4rem;padding:.34rem .6rem;border-radius:9px;
  font-family:var(--sans);font-size:.86rem;color:var(--tinta);white-space:nowrap}
/* Rubrica: o título do artigo ("Anterioridade da Lei" acima do Art. 1º). Vive
   fora do .vm-block-text, então não entra na medição de grifo. Discreta de
   propósito — a protagonista é a lei, não o rótulo. */
.vm-block-rubrica{font-weight:700;font-size:.92em;letter-spacing:.01em;color:var(--tinta-2);margin:0 0 .28rem}

.selbar .act:hover{background:var(--campo)}
/* Seleção que cruza vários blocos: Nota e Dicionário são ações de UM trecho (a
   nota guarda a citação de um bloco só; o dicionário busca uma palavra), então
   somem em vez de fazer algo diferente do que o botão promete. */
.selbar.multi .act[data-acao="nota"],.selbar.multi .act[data-acao="dicionario"]{display:none}
.selbar .act svg{color:var(--tinta-2);display:block}
/* ENTRELINHA (dono, 18/08/2026): a barra vive dentro da area de leitura e
   HERDAVA a entrelinha do texto — que e grande de proposito e ainda aumenta
   quando o aluno sobe a fonte. O <svg> e inline: ele pousava na base de uma
   caixa de linha de ate 50px, e sobrava um vazio enorme ACIMA dos icones. Era a
   "barra preta gorda e vazia" que aparecia no celular. Zerar a entrelinha da
   barra e tirar o svg da linha devolve a pilula do tamanho dos botoes. */
.selbar,.selbar .act,.selbar .cor{line-height:1}

/* ================= cartão de anotação ================= */
.nota{position:absolute;z-index:65;display:none;flex-direction:column;gap:.6rem;width:min(360px,88vw);
  padding:.9rem;background:var(--branco);border:1px solid var(--linha);border-radius:15px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.28),0 4px 12px -6px rgba(0,0,0,.16);font-family:var(--sans)}
.nota.on{display:flex}
.nota .ref{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--latao-esc)}
.nota .trecho{font-family:var(--serif);font-size:.9rem;line-height:1.5;color:var(--tinta-2);
  padding-left:.6rem;border-left:2px solid var(--am);max-height:3.6em;overflow:hidden}
.nota textarea{width:100%;min-height:96px;resize:vertical;padding:.6rem .7rem;border:1px solid var(--linha);
  border-radius:9px;background:var(--papel);color:var(--tinta);font:inherit;font-size:.9rem;line-height:1.5;outline:none}
.nota textarea:focus{border-color:var(--latao)}
.nota .acoes{display:flex;align-items:center;gap:.4rem}
.nota .bt2{padding:.42rem .8rem;border-radius:9px;font-size:.84rem;border:1px solid var(--linha);color:var(--tinta-2)}
.nota .bt2:hover{background:var(--campo);color:var(--tinta)}
.nota .bt2.pri{background:var(--tinta);border-color:var(--tinta);color:var(--branco);font-weight:600}
.nota .bt2.pri:hover{opacity:.9;background:var(--tinta);color:var(--branco)}
.nota .bt2.del{color:#C0392B;border-color:transparent}

/* ================= toast ================= */
.toast{position:fixed;right:22px;bottom:24px;z-index:70;display:none;align-items:center;gap:.7rem;
  padding:.8rem 1rem;background:var(--branco);border:1px solid var(--linha);border-radius:13px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.22);font-family:var(--sans);font-size:.88rem}
.toast.on{display:flex}
.toast .ck{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff}

/* ================= painel de marcações ================= */
.rev{position:fixed;top:64px;right:0;width:min(380px,90vw);height:calc(100dvh - 64px);z-index:46;
  background:var(--branco);border-left:1px solid var(--linha);transform:translateX(102%);
  transition:transform .22s ease;display:flex;flex-direction:column}
.rev.on{transform:none}
.rev header{display:flex;align-items:center;gap:.6rem;padding:1rem 1.1rem;border-bottom:1px solid var(--linha)}
.rev header h3{margin:0;font-size:.95rem;font-weight:600}
.abas{display:flex;gap:.3rem;padding:.7rem 1rem;border-bottom:1px solid var(--linha);flex-wrap:wrap}
.aba{padding:.34rem .7rem;border-radius:999px;font-size:.8rem;color:var(--tinta-2);border:1px solid var(--linha)}
.aba[aria-pressed="true"]{background:var(--tinta);color:var(--branco);border-color:var(--tinta)}
.rev .lista{flex:1;overflow-y:auto;padding:.6rem .8rem 2rem}
.item{display:block;width:100%;text-align:left;padding:.7rem .8rem;border-radius:10px;border:1px solid var(--linha);
  margin-bottom:.5rem;background:var(--branco)}
.item:hover{border-color:var(--tinta-3)}
.item .ref{font-family:var(--sans);font-size:.72rem;color:var(--latao-esc);font-weight:600;letter-spacing:.03em}
.item p{margin:.28rem 0 0;font-family:var(--serif);font-size:.92rem;line-height:1.55;color:var(--tinta)}
.item .obs{font-family:var(--sans);font-size:.83rem;line-height:1.5;color:var(--tinta-2);margin-top:.4rem}
.item .tag{display:inline-block;margin-top:.4rem;padding:.08rem .45rem;border-radius:5px;
  font-family:var(--sans);font-size:.68rem;background:var(--campo);color:var(--tinta-2)}
.vazio{padding:2rem 1rem;text-align:center;color:var(--tinta-3);font-size:.86rem}

/* ================= dicionário ================= */
.dic{position:fixed;top:64px;right:0;width:min(380px,90vw);height:calc(100dvh - 64px);z-index:46;
  background:var(--branco);border-left:1px solid var(--linha);transform:translateX(102%);
  transition:transform .22s ease;display:flex;flex-direction:column}
.dic.on{transform:none}
.dic header{display:flex;align-items:center;gap:.6rem;padding:1rem 1.1rem;border-bottom:1px solid var(--linha)}
.dic header h3{margin:0;font-size:.95rem;font-weight:600}
.dic-busca{display:flex;gap:.5rem;padding:.8rem 1rem;border-bottom:1px solid var(--linha)}
.dic-busca input{flex:1;min-width:0;padding:.55rem .7rem;border:1px solid var(--linha);border-radius:9px;
  font-size:.92rem;background:var(--campo);color:var(--tinta)}
.dic-busca input:focus{outline:2px solid var(--latao);outline-offset:1px;border-color:var(--latao)}
.dic-bt{padding:.55rem .9rem;border-radius:9px;background:var(--tinta);color:var(--branco);
  font-size:.86rem;font-weight:600;cursor:pointer;border:1px solid var(--tinta);white-space:nowrap}
.dic-bt:hover{opacity:.9}
.dic-res{flex:1;overflow-y:auto;padding:1rem 1.1rem 2rem}
.dic-load{padding:1.4rem 0;text-align:center;color:var(--tinta-3);font-size:.88rem}
.dic-termo{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--tinta);
  text-transform:capitalize;margin-bottom:.15rem}
.dic-classe{font-family:var(--sans);font-size:.74rem;font-style:italic;color:var(--latao-esc);margin-bottom:.5rem}
.dic-lema{font-family:var(--sans);font-size:.8rem;color:var(--tinta-2);margin:-.1rem 0 .6rem}
.dic-lista{margin:0;padding-left:1.3rem;display:flex;flex-direction:column;gap:.55rem}
.dic-lista li{font-family:var(--serif);font-size:.95rem;line-height:1.6;color:var(--tinta)}
.dic-ex-tit{margin:1.1rem 0 .4rem;font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.dic-ex{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.4rem;list-style:none}
.dic-ex li{font-family:var(--serif);font-size:.9rem;line-height:1.55;color:var(--tinta-2);font-style:italic;
  padding-left:.6rem;border-left:2px solid var(--linha)}
.dic-fonte{margin-top:1.1rem;padding-top:.7rem;border-top:1px solid var(--linha);
  font-family:var(--sans);font-size:.74rem;color:var(--tinta-3)}

/* ================= aparência (popover) ================= */
.pop{position:fixed;top:60px;right:120px;z-index:55;display:none;flex-direction:column;gap:.5rem;
  width:min(300px,92vw);padding:.85rem;background:var(--branco);border:1px solid var(--linha);border-radius:13px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.2);font-family:var(--sans);font-size:.85rem}
.pop.on{display:flex}
.pop .modos{display:flex;gap:.3rem}
.pop .modos button{padding:.34rem .7rem;border:1px solid var(--linha);border-radius:8px;font-size:.8rem}
.pop .modos button[aria-pressed="true"]{background:var(--tinta);color:var(--branco);border-color:var(--tinta)}
.pop .pl{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-3);
  display:flex;justify-content:space-between;align-items:baseline}
.pop input[type=range]{width:100%;accent-color:var(--latao)}
.pop .dica{margin:0;font-size:.75rem;line-height:1.45;color:var(--tinta-3);
  border-top:1px solid var(--linha);padding-top:.55rem}

/* ================= busca (resultados) ================= */
.buscapane{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:58;
  width:min(560px,94vw);max-height:min(60vh,520px);overflow-y:auto;
  background:var(--branco);border:1px solid var(--linha);border-radius:0 0 15px 15px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.3);font-family:var(--sans)}
.buscapane[hidden]{display:none}
.buscapane .lista{padding:.5rem}
.buscapane .item{border:0;border-radius:9px;margin-bottom:.15rem}
.buscapane .item:hover{background:var(--campo)}
.buscapane .snip{margin:.2rem 0 0;font-family:var(--serif);font-size:.9rem;line-height:1.5;color:var(--tinta)}
.buscapane .snip mark{background:var(--am);color:inherit;border-radius:2px;padding:0 .05em}
.buscapane .st{padding:.9rem 1rem;color:var(--tinta-3);font-size:.85rem}

/* ================= modo foco ================= */
body.foco .bar{display:none}
body.foco .pagina{padding-top:3rem}
body.foco .toolbtns{top:14px}
body.foco .rail{top:24px;bottom:24px}
.sairfoco{position:fixed;top:14px;right:16px;z-index:70;display:none;align-items:center;gap:.45rem;
  padding:.48rem .85rem;background:var(--branco);border:1px solid var(--linha);border-radius:10px;
  font-family:var(--sans);font-size:.82rem;color:var(--tinta-2);box-shadow:0 4px 14px -6px rgba(0,0,0,.2)}
.sairfoco:hover{color:var(--tinta)}
body.foco .sairfoco{display:flex}

/* ================= tablet ================= */
@media (max-width:1080px){
  :root{--fs:18px}
  .busca{max-width:210px}
  .trilha{display:none}
  .pagina{padding:2.4rem 1.2rem 18vh}
}
/* ================= celular ================= */
@media (max-width:760px){
  :root{--fs:17px}
  .bar{height:56px;padding:0 .5rem;gap:.35rem}
  .busca{display:none}
  #btBusca{display:grid}
  /* Busca no celular: o botão-lupa revela a barra como overlay abaixo do topo. */
  body.busca-mobile-open .busca{display:flex;position:fixed;top:56px;left:0;right:0;z-index:59;
    max-width:none;margin:0;height:52px;border-radius:0;border-bottom:1px solid var(--linha)}
  body.busca-mobile-open .busca .kbd{display:none}
  body.busca-mobile-open .buscapane{top:108px}
  .marca svg{display:none}
  .marca .nome{font-size:.92rem;max-width:38vw}
  .conta,#btMenor,#btMaior,.div{display:none}
  #btFull{display:none}
  .dir{gap:.05rem}
  .ico,.bt-vel{height:40px;min-width:40px}
  .bt-rot{height:40px;padding:0 .55rem}
  .toolbtns{top:64px;left:10px}
  #btDic{top:64px;right:10px}
  .sum-bt{padding:.55rem .85rem}
  .sum{top:56px;height:calc(100dvh - 56px);width:min(320px,88vw)}
  .pagina{padding:1.7rem 1rem 20vh}
  .folha{padding-right:0}
  .selo{left:auto;right:-.15rem;width:23px;height:23px;border-radius:6px}
  .selbar{padding:.35rem;border-radius:13px}
  .selbar .act{padding:.45rem .4rem}
  .selbar .act span{display:none}
  .selbar .sep{margin:0 .28rem}
  .selbar .cor{width:22px;height:22px;margin:0 .1rem}
  .pop,.player{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-width:none;border-radius:16px}
  .nota{width:calc(100vw - 20px)}
  .rev{width:100%;top:56px;height:calc(100dvh - 56px)}
  .buscapane{top:56px;left:8px;right:8px;transform:none;width:auto;max-width:none}
  .rail{display:none}
  .sairfoco{top:10px;right:10px}
}
/* ================= sumário lateral agrupado por matéria (feature A) ================= */
.sum-grupo{border-bottom:1px solid var(--linha)}
.sum-grupo:last-of-type{border-bottom:0}
.sum-lei{display:flex;align-items:center;gap:.5rem;padding:.55rem .6rem;border-radius:8px;
  cursor:pointer;list-style:none;font-size:.88rem;font-weight:600;color:var(--tinta);
  -webkit-user-select:none;user-select:none}
.sum-lei::-webkit-details-marker{display:none}
.sum-lei::marker{content:""}
.sum-lei:hover{background:var(--campo)}
.sum-lei .sum-lei-nome{flex:1;line-height:1.35;min-width:0}
.sum-lei .seta{flex:none;width:8px;height:8px;margin-right:.15rem;
  border-right:1.7px solid var(--tinta-3);border-bottom:1.7px solid var(--tinta-3);
  transform:rotate(-45deg);transition:transform .18s ease}
.sum-grupo[open]>.sum-lei{color:var(--latao-esc)}
.sum-grupo[open]>.sum-lei .seta{transform:rotate(45deg);border-color:var(--latao-esc)}
.sum-sub{padding:.1rem 0 .6rem .3rem;animation:sumAbre .2s ease}
@keyframes sumAbre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ================= capa: plano de leitura + sumário in-page (features B/C) ================= */
#pagina{overflow-anchor:none} /* o prepend do teleporte controla o scroll manualmente */
/* Capa = LINHA de largura total (empurra a lei p/ baixo); conteúdo centrado na largura de leitura. */
#vm-capa{flex:0 0 100%;width:100%;margin:0 0 3.4rem;
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;font-family:var(--sans)}
.capa-card{width:100%;max-width:var(--medida);background:var(--branco);border:1px solid var(--linha);
  border-radius:15px;padding:1.05rem 1.15rem 1.15rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.capa-titulo{margin:0 0 .8rem;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tinta-3);font-weight:700}
.capa-txt{margin:0 0 .85rem;font-size:.86rem;line-height:1.55;color:var(--tinta-2)}
#planoCard[data-state="loading"]::after{content:"Carregando…";display:block;
  font-size:.82rem;color:var(--tinta-3);padding:.4rem 0}
.bt-capa{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.52rem .95rem;border:1px solid var(--linha);border-radius:10px;
  font-size:.85rem;color:var(--tinta-2)}
.bt-capa:hover{background:var(--campo);color:var(--tinta)}
.bt-capa.pri{background:var(--latao);border-color:var(--latao);color:#fff;font-weight:600}
.bt-capa.pri:hover{background:var(--latao-esc);border-color:var(--latao-esc);color:#fff}
.bt-capa:disabled{opacity:.55;cursor:default;pointer-events:none}
:root[data-modo="noite"] .bt-capa.pri{color:#17130A}

/* — estado sem plano — */
.plano-vazio{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
.plano-vazio[hidden]{display:none}
.plano-dias{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.85rem}
.pd{padding:.4rem .72rem;border:1px solid var(--linha);border-radius:999px;
  font-size:.8rem;color:var(--tinta-2)}
.pd:hover{border-color:var(--tinta-3);color:var(--tinta)}
.pd.sel{background:var(--tinta);color:var(--branco);border-color:var(--tinta);font-weight:600}
.plano-vazio .bt-capa{margin-top:.15rem}

/* — estado com plano — */
.plano-atual{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.plano-atual[hidden]{display:none}
.plano-estado{margin:0;font-size:.78rem;font-weight:700;padding:.24rem .62rem;border-radius:999px}
.plano-estado.est-ok{background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok)}
.plano-estado.est-late{background:color-mix(in srgb,#C0392B 11%,transparent);color:#C0392B}
.plano-estado.est-ahead{background:color-mix(in srgb,#2F7DF6 11%,transparent);color:#2F7DF6}
:root[data-modo="noite"] .plano-estado.est-late{color:#EE8B7C}
:root[data-modo="noite"] .plano-estado.est-ahead{color:#84B4F9}
:root[data-modo="noite"] .plano-estado.est-ok{color:#5CC98E}
.plano-hoje{margin:0;font-size:.9rem;line-height:1.5;color:var(--tinta)}
.plano-barra{width:100%;height:6px;background:var(--campo);border-radius:4px;overflow:hidden}
.plano-barra i{display:block;height:100%;width:0;background:var(--latao);border-radius:4px;
  transition:width .3s ease}
.plano-progresso{margin:-.25rem 0 0;font-size:.78rem;color:var(--tinta-3)}
.plano-lista{width:100%;border-top:1px solid var(--linha);padding-top:.5rem}
/* Lista SEMPRE aberta (sem <details>): título fixo + dias visíveis, só rola por dentro. */
.plano-lista-tit{display:flex;align-items:center;gap:.4rem;padding:.2rem 0;margin:0;
  font-size:.82rem;color:var(--tinta-2)}
.plano-lista-dias{max-height:340px;overflow-y:auto;margin-top:.4rem;
  display:flex;flex-direction:column;gap:2px}
.pl-dia{display:flex;align-items:flex-start;gap:.5rem;padding:.34rem .45rem;border-radius:8px}
.pl-dia:hover{background:var(--campo)}
.pl-dia.hoje{background:color-mix(in srgb,var(--latao) 9%,transparent)}
.pl-check{display:flex;align-items:center;padding-top:.14rem}
.pl-check input{width:15px;height:15px;accent-color:var(--latao);cursor:pointer}
.pl-ir{flex:1;min-width:0;display:flex;flex-direction:column;gap:.05rem;text-align:left;
  font-size:.8rem;line-height:1.4;color:var(--tinta-2)}
.pl-ir b{font-size:.7rem;font-weight:700;letter-spacing:.04em;color:var(--latao-esc)}
.pl-ir:hover{color:var(--tinta)}
.pl-min{font-size:.66rem;color:var(--latao);opacity:.9;letter-spacing:.01em}
.pl-dia.feito .pl-ir span{text-decoration:line-through;opacity:.6}
.pl-dia.feito .pl-min{text-decoration:none;opacity:.45}

/* — SUMÁRIO in-page como PÁGINA DO DOCUMENTO (capa estilo PDF) — */
.sumario-capa{width:100%;max-width:var(--medida);background:var(--branco);border:1px solid var(--linha);
  border-radius:16px;padding:2.6rem 2.4rem 2.2rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.sc-titulo{margin:0;text-align:center;font-family:var(--serif);font-size:1.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta)}
.sc-orn{display:block;width:8px;height:8px;margin:1.15rem auto 2.1rem;
  background:var(--latao);transform:rotate(45deg);border-radius:1px}
.sc-lista{display:flex;flex-direction:column}
.cs-item{display:flex;align-items:baseline;gap:.5rem;padding:.62rem .3rem;text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--linha) 70%,transparent)}
.cs-item:last-child{border-bottom:0}
.cs-item .sc-nome{font-family:var(--serif);font-size:1.16rem;color:var(--tinta);
  letter-spacing:-.005em;transition:color .12s}
.cs-item .sc-dots{flex:1 1 auto;min-width:1.5rem;align-self:center;height:0;
  border-bottom:2px dotted var(--tinta-3);opacity:.45}
.cs-item .sc-ref{flex:0 0 auto;font-family:var(--sans);font-size:.76rem;color:var(--tinta-3);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.cs-item:hover .sc-nome{color:var(--latao-esc)}
.cs-item:hover .sc-dots{opacity:.8;border-color:var(--latao)}
.cs-item.esp{padding-left:1.3rem}
.cs-item.esp .sc-nome{font-size:1.02rem;color:var(--tinta-2)}
.cs-item.esp:hover .sc-nome{color:var(--tinta)}
.sc-grupo{display:flex;align-items:center;gap:.8rem;margin:1.5rem 0 .35rem}
.sc-grupo::before,.sc-grupo::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--linha),transparent)}
.sc-grupo span{font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--latao-esc);font-weight:700;white-space:nowrap}

/* ================= "carregar conteúdo anterior" (teleporte, feature D) ================= */
/* largura TOTAL (linha própria acima da folha) — senão fica com 70ch e senta ao lado do texto. */
.prevwrap{flex:0 0 100%;width:100%;display:flex;justify-content:center;margin:0 0 1.6rem}
.prevwrap[hidden]{display:none}
.bt-prev{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .95rem;
  background:var(--branco);border:1px solid var(--linha);border-radius:999px;
  font-family:var(--sans);font-size:.84rem;color:var(--tinta-2);
  box-shadow:0 1px 2px rgba(0,0,0,.05)}
.bt-prev:hover{border-color:var(--latao);color:var(--tinta)}
.bt-prev.carregando{opacity:.55;pointer-events:none}
@media print{.prevwrap,#vm-capa{display:none!important}}

/* ================= modal de confirmação do site (substitui window.confirm) ================= */
.vm-modal-ov{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;
  background:rgba(10,12,15,.5);opacity:0;transition:opacity .18s ease;font-family:var(--sans)}
.vm-modal-ov.on{opacity:1}
.vm-modal{width:min(430px,92vw);background:var(--branco);border:1px solid var(--linha);border-radius:16px;
  padding:1.4rem 1.4rem 1.1rem;box-shadow:0 24px 60px -18px rgba(0,0,0,.45);
  transform:translateY(10px) scale(.98);transition:transform .18s ease}
.vm-modal-ov.on .vm-modal{transform:none}
.vm-modal-t{margin:0 0 .5rem;font-size:1.12rem;font-weight:700;color:var(--tinta)}
.vm-modal-m{margin:0 0 1.25rem;font-size:.92rem;line-height:1.55;color:var(--tinta-2)}
.vm-modal-acts{display:flex;justify-content:flex-end;gap:.5rem}
.vm-modal-bt{padding:.55rem 1.05rem;border-radius:10px;font-size:.9rem;font-weight:600;
  border:1px solid var(--linha);color:var(--tinta-2)}
.vm-modal-bt:hover{background:var(--campo);color:var(--tinta)}
.vm-modal-bt.pri{background:var(--tinta);border-color:var(--tinta);color:var(--branco)}
.vm-modal-bt.pri:hover{opacity:.92;background:var(--tinta);color:var(--branco)}
.vm-modal-bt.pri.danger{background:#C0392B;border-color:#C0392B;color:#fff}
.vm-modal-bt.pri.danger:hover{background:#a5311f;color:#fff}

/* ================= capa: responsivo ================= */
@media (max-width:860px){
  #vm-capa{grid-template-columns:1fr}
}
@media (max-width:760px){
  #vm-capa{margin-bottom:1.9rem;gap:.9rem}
  .capa-card{padding:.95rem 1rem 1.05rem}
  .plano-vazio .bt-capa,.plano-atual .bt-capa{width:100%}
  .plano-lista-dias{max-height:230px}
  .sumario-capa{padding:1.7rem 1.2rem 1.4rem;border-radius:13px}
  .sc-titulo{font-size:1.35rem;letter-spacing:.1em}
  .sc-orn{margin:.9rem auto 1.6rem}
  .cs-item{padding:.56rem .1rem}
  .cs-item .sc-nome{font-size:1.04rem}
  .cs-item.esp .sc-nome{font-size:.96rem}
  .cs-item .sc-ref{font-size:.72rem}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------------------------------------------------------------- BIZUS
   Post-it colado ao artigo. O PROTAGONISTA E A LEI: o bizu e visualmente
   secundario — menor, recuado e discreto.

   COR PROPRIA (--bizu): azul-petroleo. NAO usa o latao/dourado, que e a cor da
   estrutura da LEI (banner, titulo, capitulo) — reaproveita-lo fazia o bizu se
   confundir com o texto legal. Tambem evita as 6 cores de grifo do aluno
   (am/vd/az/rx/rs/lj), senao pareceria marcacao dele.
   Definida nos 3 temas. Nunca usar --brand/--line: sao do admin e a declaracao
   inteira cairia (bizu sem borda, tabela sem grade). */
:root{--bizu:#0E6E7D;--bizu-bg:#E8F3F5;--bizu-tinta:#0B4E59}
:root[data-modo="sepia"]{--bizu:#1B6B72;--bizu-bg:#E4EDE6;--bizu-tinta:#134E54}
:root[data-modo="noite"]{--bizu:#4FB3C4;--bizu-bg:#16262B;--bizu-tinta:#8FD3DE}

.vm-block.vm-bizu{background:var(--bizu-bg);border-left:3px solid var(--bizu);
  border-radius:0 6px 6px 0;padding:.5rem .7rem;margin:.45rem 0 1rem .6rem;
  font-size:.88em;line-height:1.5}
.vm-bizu-cabeca{display:flex;gap:.45rem;align-items:baseline;margin-bottom:.2rem;flex-wrap:wrap}
.vm-bizu-tag{font-family:var(--sans);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:#fff;background:var(--bizu);border-radius:3px;padding:.05rem .4rem}
.vm-bizu-titulo{font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--bizu-tinta)}
/* pre-wrap: o bizu e escrito em varias linhas. Sem isto (a) as quebras somem e
   (b) o grifo do aluno desaparece apos recarregar (a selecao colapsa o 
). */
.vm-block.vm-bizu .vm-block-text{white-space:pre-wrap;color:var(--bizu-tinta)}
.vm-bizu-tab{overflow-x:auto}
.vm-bizu-tab table{border-collapse:collapse;width:100%;font-size:.95em}
.vm-bizu-tab th,.vm-bizu-tab td{border:1px solid var(--bizu);padding:.25rem .45rem;
  text-align:left;color:var(--bizu-tinta)}
.vm-bizu-tab th{font-family:var(--sans);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.04em;background:var(--bizu);color:#fff;border-color:var(--bizu)}
@media print{.vm-block.vm-bizu{break-inside:avoid}}

/* ================= cronômetro de estudo ================= */
/* Lugar padrão: na barra do topo, ao lado do "Sumário" (ver .toolbtns .vm-cron).
   Se a barra não existir, cai para o canto inferior esquerdo (reserva). */
.vm-cron{position:fixed;left:14px;bottom:14px;z-index:58;display:flex;align-items:center;gap:.4rem;
  padding:.3rem .6rem .3rem .35rem;border-radius:999px;background:var(--branco);
  border:1px solid var(--linha);box-shadow:0 6px 18px -8px rgba(0,0,0,.35);
  font-family:var(--sans);font-size:.8rem;font-weight:700;color:var(--tinta-2);
  font-variant-numeric:tabular-nums;opacity:.62;transition:opacity .18s ease}
.vm-cron:hover{opacity:1}
/* Dentro da barra flutuante: vira um "irmão" do botão Sumário. */
.toolbtns .vm-cron{position:static;opacity:1;gap:.5rem;
  padding:.5rem .85rem .5rem .5rem;border-radius:11px;font-size:.88rem;
  box-shadow:0 1px 2px rgba(0,0,0,.04)}
.toolbtns .vm-cron:hover{border-color:var(--tinta-3)}
.toolbtns .vm-cron-bt{width:24px;height:24px}
/* botão de recolher */
.vm-cron-ocultar{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;
  color:var(--tinta-3);flex:0 0 auto;margin-left:.1rem}
.vm-cron-ocultar:hover{background:var(--campo);color:var(--tinta)}
/* RECOLHIDO: vira uma abinha; o cronômetro segue contando por trás. */
.vm-cron.recolhido{gap:0;padding:.5rem .3rem;cursor:pointer}
.vm-cron.recolhido .vm-cron-t,.vm-cron.recolhido .vm-cron-bt{display:none}
.vm-cron.recolhido::after{display:none}
.vm-cron.recolhido .vm-cron-ocultar{margin:0;transform:rotate(180deg)}
.vm-cron[data-estado="rodando"]{opacity:.95;color:var(--tinta);border-color:color-mix(in srgb,var(--latao) 45%,var(--linha))}
.vm-cron-bt{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  background:var(--campo);color:var(--tinta-2);cursor:pointer}
.vm-cron-bt:hover{background:var(--latao);color:#fff}
.vm-cron .i-play{display:none;margin-left:1px}
.vm-cron[data-estado="pausado"] .i-pause,.vm-cron[data-estado="ocioso"] .i-pause,.vm-cron[data-estado="pronto"] .i-pause{display:none}
.vm-cron[data-estado="pausado"] .i-play,.vm-cron[data-estado="ocioso"] .i-play,.vm-cron[data-estado="pronto"] .i-play{display:block}
.vm-cron[data-estado="rodando"] .vm-cron-bt{background:color-mix(in srgb,var(--latao) 22%,transparent);color:var(--latao-esc)}
/* pontinho pulsando enquanto conta */
.vm-cron[data-estado="rodando"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);
  animation:vm-cron-pulse 2s ease-in-out infinite}
@keyframes vm-cron-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.vm-cron[data-estado="rodando"]::after{animation:none;opacity:.8}}
body.foco .vm-cron{left:14px;bottom:14px}
@media (max-width:760px){.vm-cron{left:8px;bottom:8px;font-size:.74rem;padding:.25rem .5rem .25rem .3rem}}
@media print{.vm-cron{display:none!important}}

/* ============================================================================
   CELULAR — área segura e colisão com o menu nativo (bugs reportados 01/08/2026)
   ============================================================================
   1) Os botões flutuantes (Sumário/cronômetro à esquerda, Dicionário à direita)
      são position:fixed em top:64px, logo abaixo da .bar sticky de 56px. Como
      são fixos, o texto rolava POR BAIXO deles o tempo todo — e no primeiro
      quadro já cobriam o título "Plano de leitura". Duas partes na correção:
      uma faixa opaca do mesmo papel atrás deles (o texto some sob a faixa, como
      já some sob a .bar) e recuo do conteúdo para não nascer coberto.
   2) O menu nativo do iOS/Android ("Copiar", "Pesquisar com o Google") aparece
      COLADO na seleção e ficava exatamente por cima da nossa barra de grifar.
      No celular a barra passa a ser ancorada no rodapé da tela: o menu do
      sistema nunca vai lá, então as duas convivem.
   ============================================================================ */
@media (max-width:760px){
  /* (1) faixa opaca sob a .bar, atrás dos botões flutuantes (z-index 45). */
  body:not(.foco) .bar::after{
    content:"";position:fixed;left:0;right:0;top:56px;height:52px;
    background:var(--papel);border-bottom:1px solid var(--linha);z-index:44;pointer-events:none;
  }
  body:not(.foco) .pagina{padding-top:4.2rem}

  /* Área segura do aparelho (notch/barra de gestos do iPhone). */
  .bar{padding-left:calc(.5rem + env(safe-area-inset-left,0px));
       padding-right:calc(.5rem + env(safe-area-inset-right,0px))}
  .pagina{padding-left:calc(1rem + env(safe-area-inset-left,0px));
          padding-right:calc(1rem + env(safe-area-inset-right,0px))}
  .toolbtns{left:calc(10px + env(safe-area-inset-left,0px))}
  #btDic{right:calc(10px + env(safe-area-inset-right,0px))}

  /* (2) A fuga do menu nativo é feita no JS (positionSelbar), NÃO aqui.
     Tentativa anterior: ancorar a barra no rodapé com position:fixed!important.
     Resultado no aparelho do dono: a barra sumiu de vez. Sem poder depurar no
     iPhone, o certo foi voltar ao posicionamento absoluto — que funcionava — e
     resolver a colisão por deslocamento, onde dá para raciocinar com números. */
}

/* ================= RAIO X — selo dos artigos mais cobrados =================
   Ligado pelo botao "Marcar esses artigos no meu vade mecum", na tela do Raio X.
   O servidor so poe a classe .vm-raiox no bloco; todo o desenho esta aqui.

   COR PROPRIA (--raiox): vermelhao. Mesmo criterio do bizu — nao usa o --latao
   (que e a cor da ESTRUTURA da lei: banner, titulo, capitulo), nao usa as 6
   cores de grifo (que sao do ALUNO) e nao usa o azul do bizu. Definida nos 3
   temas; nunca usar --brand/--line, que sao do admin.

   DESENHADO COM ::before, E ISSO NAO E ENFEITE DE IMPLEMENTACAO. O ancoramento
   de grifos mede offsets DENTRO de .vm-block-text; qualquer caractere real
   inserido ali deslocaria todas as marcacoes que o aluno ja salvou naquele
   bloco. Conteudo gerado por CSS nao vira no de texto — nao entra em
   textContent nem no TreeWalker que calcula os offsets.

   E vai INLINE, no comeco do texto, em vez de na margem: a margem esquerda ja e
   ocupada pelo .selo de anotacao (linha 205) e, abaixo de 1180px, ele passa para
   a direita. Um selo absoluto em qualquer das duas colidiria com ele. */
:root{--raiox:#B4462F}
:root[data-modo="sepia"]{--raiox:#A2452B}
:root[data-modo="noite"]{--raiox:#E5765E}

.vm-block.vm-raiox .vm-block-text::before{
  content:"!";
  display:inline-block;vertical-align:.08em;
  width:1.15em;height:1.15em;line-height:1.15em;margin-right:.45em;
  font-family:var(--sans);font-size:.78em;font-weight:800;text-align:center;
  color:#fff;background:var(--raiox);border-radius:4px;
  -webkit-user-select:none;user-select:none}

/* ============ check automático do plano de leitura ============ */
/* 50%: aviso DISCRETO de lado (pedido literal do dono). Encosta na direita, no
   terço de baixo, e some sozinho — sem botão, sem bloquear nada. aria role=
   status já o faz ser anunciado por leitor de tela sem roubar o foco. */
.pl-flash{position:fixed;right:0;bottom:22vh;z-index:60;max-width:min(300px,80vw);
  padding:.65rem 1rem .65rem .85rem;border-radius:12px 0 0 12px;
  background:var(--branco);border:1px solid var(--linha);border-right:0;
  border-left:3px solid var(--latao);box-shadow:0 8px 26px rgba(0,0,0,.14);
  font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--tinta);
  transform:translateX(105%);transition:transform .3s ease}
.pl-flash.on{transform:none}

/* 100%: a caixa de parabéns reaproveita o esqueleto do vm-modal; aqui só entra
   o que a diferencia — selo, centro e respiro. */
.vm-parabens{text-align:center;padding-top:1.7rem}
.vm-parabens-selo{width:54px;height:54px;margin:0 auto .8rem;border-radius:50%;
  display:grid;place-items:center;font-size:1.5rem;font-weight:800;
  background:var(--latao);color:#fff;box-shadow:0 6px 18px rgba(176,141,87,.45)}
.vm-parabens .vm-modal-t{font-size:1.3rem}
.vm-parabens .vm-modal-acts{justify-content:center}
@media (prefers-reduced-motion:reduce){
  .pl-flash{transition:none}
}

/* ── Barra "cheguei ao fim do dia" ─────────────────────────────────────────
   Aparece quando a rolagem alcança o fim da faixa do dia. A contagem
   automática continua sendo o caminho normal; esta barra é a saída garantida
   para quando ela não fecha sozinha — sem ela o aluno tinha que subir e
   descer a página de novo até o contador pegar os últimos blocos. */
.vm-fimdia{
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 84px);
  transform:translate(-50%,14px); z-index:70;
  display:flex; align-items:center; gap:12px;
  max-width:min(560px,calc(100vw - 24px));
  padding:11px 12px 11px 16px; border-radius:14px;
  background:var(--vm-sup,#12303a); color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.vm-fimdia.on{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.vm-fimdia-t{ font-size:.95rem; line-height:1.3; flex:1 1 auto; }
.vm-fimdia .vm-modal-bt{ flex:0 0 auto; white-space:nowrap; }
.vm-fimdia-x{
  flex:0 0 auto; width:30px; height:30px; border:0; border-radius:8px;
  background:transparent; color:inherit; opacity:.7; cursor:pointer; font-size:15px;
}
.vm-fimdia-x:hover{ opacity:1; background:rgba(255,255,255,.12); }
@media (max-width:520px){
  .vm-fimdia{ flex-wrap:wrap; padding:12px; }
  .vm-fimdia-t{ flex:1 1 100%; margin-bottom:2px; }
  .vm-fimdia .vm-modal-bt{ flex:1 1 auto; }
}

/* ── Aviso "crie seu plano de leitura" ─────────────────────────────────────
   Fixo no rodapé enquanto NÃO existe plano (o convite da capa só é visto por
   quem para na capa). O X esconde só na página atual — na próxima visita ele
   volta, até o plano ser criado. Não conflita com a barra de fim de dia: ela
   só existe QUANDO há plano. */
.vm-plano-aviso{
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 84px);
  transform:translate(-50%,14px); z-index:69;
  display:flex; align-items:center; gap:12px;
  max-width:min(600px,calc(100vw - 24px));
  padding:11px 12px 11px 16px; border-radius:14px;
  background:var(--vm-sup,#12303a); color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.vm-plano-aviso.on{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.vm-plano-aviso-t{ font-size:.92rem; line-height:1.35; flex:1 1 auto; }
.vm-plano-aviso .vm-modal-bt{ flex:0 0 auto; white-space:nowrap; }
.vm-plano-aviso-x{
  flex:0 0 auto; width:30px; height:30px; border:0; border-radius:8px;
  background:transparent; color:inherit; opacity:.7; cursor:pointer; font-size:15px;
}
.vm-plano-aviso-x:hover{ opacity:1; background:rgba(255,255,255,.12); }
@media (max-width:520px){
  .vm-plano-aviso{ flex-wrap:wrap; padding:12px; }
  .vm-plano-aviso-t{ flex:1 1 100%; margin-bottom:2px; }
  .vm-plano-aviso .vm-modal-bt{ flex:1 1 auto; }
}

/* Destaque do card ao clicar em "Criar agora": pisca a borda para o olho achar. */
.plano-destaque{ animation:planoPulse 1.2s ease 2; }
@keyframes planoPulse{
  0%,100%{ box-shadow:none; }
  50%{ box-shadow:0 0 0 3px rgba(240,180,41,.65); }
}
@media (prefers-reduced-motion:reduce){ .plano-destaque{ animation:none; box-shadow:0 0 0 3px rgba(240,180,41,.65); } }

/* Mnemonico: destaca o pedaco da palavra que forma a sigla ("SO = SOberania").
   O <b> e INSERIDO NA RENDERIZACAO (ReaderRenderer::negritoMnemonico), deduzido
   das maiusculas — o corpo do bizu continua texto puro no banco.
   Tag nao altera o texto do DOM, entao os grifos do aluno dentro do bizu
   continuam ancorando no mesmo lugar. */
.vm-block.vm-bizu-mnemonico .vm-mn{font-weight:800;color:var(--bizu)}

/* Pagina do Manual de Sinalizacao como IMAGEM.
   Fica FORA do .vm-block-text (ver ReaderRenderer::imagemDaPagina): dentro,
   entraria na medicao de deslocamento e moveria os grifos ja salvos.
   O texto da pagina continua no bloco, invisivel para o olho mas achavel pela
   busca — sem isso, 1.359 paginas viram buraco negro para quem procura "R-19". */
.vm-pagina-img{margin:.6rem 0 1.2rem}
.vm-pagina-img img{display:block;width:100%;height:auto;border-radius:6px;
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.14)}
/* (A regra que escondia o texto em 1px com user-select:none foi REMOVIDA:
   ela proibia a selecao e, como `user-select` nao era sobrescrito pela regra
   nova, continuava valendo. O texto agora e a camada visivel-invisivel por
   cima da imagem e PRECISA ser selecionavel.) */

/* PAGINA DO PDF: imagem embaixo, texto real e transparente por cima.
   O texto por cima E o .vm-block-text — de proposito. E nesse seletor que o
   leitor dispara a barra de selecao, o grifo, a nota e a tarja de memoria;
   numa camada separada nada disso aparecia. */
.vm-pagina-img{position:relative;margin:.6rem 0 1.2rem}
.vm-pagina-img>img{display:block;width:100%;height:auto;border-radius:6px;
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.14)}
.vm-block.vm-tem-pagina .vm-block-text{position:absolute;inset:0;
  white-space:normal;font-size:inherit;line-height:inherit;height:auto;overflow:visible}
.vm-block.vm-tem-pagina .vm-block-text>span{position:absolute;white-space:pre;
  color:transparent;cursor:text;overflow:hidden;font:400 1em/1 system-ui,sans-serif}
/* O tamanho de letra acima e so o ponto de partida: quem manda e o reader.js,
   que mede cada caixa e encaixa a linha nela (fonte pela ALTURA + entreletra
   pela LARGURA). Sem isso, no celular a letra invisivel fica 2,5x maior que a
   impressa, transborda a caixa e o dedo seleciona uma coisa enquanto o olho ve
   outra — era o grifo pegando so o comeco da linha.
   O ajuste NAO usa transform: `transform` cria contexto de empilhamento e o
   mix-blend-mode do grifo (la embaixo) pararia de enxergar a imagem, virando
   um bloco solido por cima da palavra. */

/* A selecao precisa APARECER, senao o aluno arrasta e nao ve nada acontecendo. */
.vm-block.vm-tem-pagina .vm-block-text ::selection{background:rgba(244,196,91,.45);color:transparent}
/* MARCACAO SOBRE A PAGINA.
   A regra anterior forcava background dourado com !important em TODO <mark> —
   e por isso as seis cores saiam amarelas e a tarja de esconder, que deveria ser
   escura, virava grifo. Aqui NAO se toca na cor: `multiply` deixa a cor escolhida
   tingir a pagina em vez de tapa-la, e cada cor continua sendo a sua.
   A tarja (hl-redact) fica de FORA: o proposito dela e cobrir, entao ela precisa
   continuar opaca. */
/* COR SEMITRANSPARENTE (dono, 18/08/2026) — trocou o `multiply`.
   O multiply tingia a pagina, mas sobre a letra impressa (preta) ele so
   escurecia: o grifo roxo saia quase preto e parecia a tarja de esconder.
   Com transparencia a cor entra por cima SEM apagar a palavra: 45% de tinta,
   55% da pagina. A tarja (hl-redact) fica de fora — ela PRECISA cobrir. */
.vm-block.vm-tem-pagina .vm-block-text mark:not(.hl-redact){mix-blend-mode:normal;opacity:.45}
/* SUBLINHADO nao existe aqui: a linha cairia na base da caixa do texto invisivel,
   que nao coincide com a base visual da letra na imagem — ficaria solta. O botao
   tambem some da barra (ver reader.js). */
.vm-block.vm-tem-pagina .vm-block-text mark.hl-underline{border-bottom:0}
.selbar.pagina [data-acao="sublinhar"]{display:none}
/* TARJA NA PAGINA: revelar significa DESTAPAR A IMAGEM, nao colorir o texto.
   A regra geral revela trocando o fundo por ambar e devolvendo `color:inherit` —
   o que funciona numa lei, onde o conteudo E o texto. Aqui o texto e a camada
   invisivel e o conteudo esta na imagem EMBAIXO: pintar de ambar continuaria
   tapando a palavra. Entao o fundo some e a imagem reaparece. */
.vm-block.vm-tem-pagina .vm-block-text mark.hl-redact:hover,
.vm-block.vm-tem-pagina .vm-block-text mark.hl-redact.revelado{
  background:transparent!important;box-shadow:inset 0 0 0 2px rgba(244,196,91,.85)!important}

/* PAGINA SEM CAMADA DE TEXTO (18/08/2026).
   Bloco que tem imagem da pagina mas NAO tem a camada `tl` posicionada: o texto
   original nao tem onde se encaixar e era desenhado por cima da pagina, grande e
   escuro (Resolucao CONTRAN 432/2013 — o conteudo e tabela, e a extracao saiu
   embaralhada). Aqui ele fica invisivel mas CONTINUA NO DOM, para a busca da
   pagina ainda encontrar a palavra.
   `position:static` desfaz o `inset:0` da regra de cima; sem isso o bloco
   transparente cobriria a imagem e roubaria o clique. */
.vm-block.vm-tem-pagina.vm-pagina-so-imagem .vm-block-text{
  position:static;
  height:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}

/* MARCA DE FIM DE DIA (18/08/2026) — só nos dias que terminam em manual de PDF.
   DOBRADA de tamanho a pedido do dono (2ª rodada). A 1ª versão era um selo fino
   entre duas linhas e sumia no meio de 200 páginas; a 2ª ainda passava batido.
   Agora ocupa quase uma tela inteira: quem rola o manual PARA aqui, que é o
   objetivo — o aluno precisa perceber que fechou o dia.
   Continua sendo enfeite do leitor: montada pelo JS a partir do recorte do plano,
   NUNCA gravada no material — replanejou, ela se remonta sozinha. */
.vm-fim-dia{margin:88px 0 96px;padding:0 4px;
  user-select:none;-webkit-user-select:none}
.vm-fim-dia__card{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:18px;padding:76px 40px 68px;border-radius:26px;
  background:linear-gradient(180deg,rgba(176,141,87,.16),rgba(176,141,87,.05));
  border:3px solid rgba(176,141,87,.45);
  box-shadow:0 18px 48px rgba(120,90,40,.14)}
.vm-fim-dia__ico{display:flex;align-items:center;justify-content:center;
  width:128px;height:128px;border-radius:50%;margin-bottom:8px;
  background:#B08D57;color:#fff;box-shadow:0 12px 32px rgba(176,141,87,.50)}
.vm-fim-dia__ico svg{width:68px;height:68px}
.vm-fim-dia__titulo{font-size:3.8rem;line-height:1.05;font-weight:800;
  letter-spacing:-.02em;color:#7a5c2e}
.vm-fim-dia__sub{font-size:2.2rem;line-height:1.25;color:#4a4a46}
.vm-fim-dia__sub b{color:#7a5c2e}
.vm-fim-dia__nota{font-size:1.4rem;color:#8a8378;margin-top:6px}
/* No celular a fonte de 3,8rem estouraria a largura: reduz mantendo o impacto. */
@media (max-width:560px){
  .vm-fim-dia{margin:56px 0 60px}
  .vm-fim-dia__card{padding:48px 20px 42px;border-radius:18px;gap:12px}
  .vm-fim-dia__ico{width:88px;height:88px} .vm-fim-dia__ico svg{width:48px;height:48px}
  .vm-fim-dia__titulo{font-size:2.4rem}
  .vm-fim-dia__sub{font-size:1.35rem}
  .vm-fim-dia__nota{font-size:1rem}
}
@media (prefers-color-scheme:dark){
  .vm-fim-dia__card{background:linear-gradient(180deg,rgba(176,141,87,.18),rgba(176,141,87,.06));
    border-color:rgba(200,165,110,.48);box-shadow:0 18px 48px rgba(0,0,0,.34)}
  .vm-fim-dia__titulo{color:#e6c68a}
  .vm-fim-dia__sub{color:#ddd8cf} .vm-fim-dia__sub b{color:#e6c68a}
  .vm-fim-dia__nota{color:#a9a296}
}

/* ================= TABELA DE VERDADE (Fase 3, 18/08/2026) =================
   Ate aqui a plataforma nao tinha tabela: o .docx era lido celula a celula e o
   quadro virava paragrafo corrido (Anexo do Codigo de Etica de Goias, Quadros I
   a IV). Agora a tabela chega inteira em metadata.tabela e e desenhada aqui.
   O rolo horizontal existe porque quadro de concurso costuma ter coluna larga
   demais para caber no celular — melhor arrastar de lado do que espremer a
   ponto de nao dar para ler. */
.vm-tabela-rolo{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:.9rem 0 1.1rem}
.vm-tabela{border-collapse:collapse;width:100%;min-width:min(560px,100%);
  font-family:var(--sans);font-size:.9rem;line-height:1.5}
.vm-tabela th,.vm-tabela td{border:1px solid var(--linha);padding:.5rem .65rem;
  vertical-align:top;text-align:left}
.vm-tabela th{background:var(--campo);font-weight:700;color:var(--tinta);
  position:sticky;top:0}
.vm-tabela tr:nth-child(even) td{background:color-mix(in srgb,var(--campo) 45%,transparent)}
/* Coluna numerica (Ord., Quant.) fica estreita e centralizada: sem isto o "1"
   e o "227" ganhavam a mesma largura da coluna de texto. */
.vm-tabela td:first-child,.vm-tabela th:first-child{width:1%;white-space:nowrap;text-align:center}
.vm-tabela td:last-child,.vm-tabela th:last-child{width:1%;white-space:nowrap;text-align:center;
  font-variant-numeric:tabular-nums}
/* O CABECALHO dessas colunas quebra linha (16/09/2026). Em nowrap, cabecalho
   comprido sobre conteudo curto alargava a coluna e empurrava as outras para fora:
   "TEMPO DE EFETIVO EXERCICIO NO CARGO DE PROCURADOR DO MUNICIPIO" sobre "0 a 3
   anos" (LC 353 de Goiania, Anexo X) deixava a coluna CATEGORIA inteira fora da
   tela no celular. A largura passa a vir do conteudo; o cabecalho se acomoda. */
.vm-tabela th:first-child,.vm-tabela th:last-child{white-space:normal;text-wrap:balance}
@media (max-width:760px){
  .vm-tabela{font-size:.82rem}
  .vm-tabela th,.vm-tabela td{padding:.4rem .45rem}
}

/* ================= leitura em voz (barra do player) =================
   Nome .voz, e nao .player: .player ja e o painel de musica, no canto de cima.
   A barra so existe enquanto a leitura esta acontecendo (ou pausada) e vive
   ancorada embaixo, longe da barra de ferramentas — no celular aquela ja esta
   cheia e some quase toda. */
.voz{position:fixed;left:50%;transform:translateX(-50%) translateY(120%);
  bottom:max(16px,env(safe-area-inset-bottom));z-index:64;
  display:none;align-items:center;gap:.15rem;padding:.45rem .55rem;
  max-width:min(680px,calc(100vw - 24px));
  background:var(--branco);border:1px solid var(--linha);border-radius:16px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.30),0 4px 12px -6px rgba(0,0,0,.16);
  transition:transform .22s ease}
.voz.on{display:flex;transform:translateX(-50%) translateY(0)}
.voz .ico{width:34px;height:34px;border-radius:9px;flex:0 0 auto}
.voz .play{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--tinta);color:var(--branco);flex:0 0 auto;margin:0 .1rem}
.voz .play:hover{opacity:.9}
/* O "onde estou" e a razao de a barra existir: quem pausou e rolou a tela para
   longe perde a referencia sem isto. */
.voz .onde{display:flex;flex-direction:column;justify-content:center;gap:1px;
  min-width:0;flex:1 1 auto;padding:0 .5rem}
.voz .onde b{font-size:.86rem;font-weight:600;color:var(--tinta);white-space:nowrap}
.voz .onde span{font-size:.76rem;color:var(--tinta-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.voz .vel{padding:.3rem .5rem;border-radius:9px;font-family:var(--sans);font-size:.82rem;
  font-weight:600;color:var(--tinta-2);font-variant-numeric:tabular-nums;flex:0 0 auto}
.voz .vel:hover{background:var(--campo);color:var(--tinta)}
/* O atributo hidden do HTML e uma regra fraca ([hidden]{display:none} da folha
   do navegador): a classe global .ico declara display:grid e vence, deixando o
   ↩ SEMPRE aceso — apareceu na conferencia visual, nao na medicao, porque o
   elemento existe e tem tamanho normal. Toda peca da barra que nasce escondida
   precisa desta regra. */
.voz .ico[hidden],.voz .play[hidden],.voz .vel[hidden]{display:none}
.voz .volta{color:var(--latao-esc)}
.voz .volta:hover{background:var(--am);color:var(--latao-esc)}
/* Atalho que aparece por alguns segundos quando a leitura retomou sozinha de
   uma sessao anterior — para quem queria outra coisa nao ficar refem da memoria
   do navegador. Fica ACIMA da barra, para nao empurrar os controles. */
.voz .topo{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 8px);
  white-space:nowrap;padding:.34rem .7rem;border-radius:999px;
  background:var(--tinta);color:var(--branco);font-family:var(--sans);font-size:.78rem}
.voz .topo[hidden]{display:none}
/* Espaco para a barra nao tampar a ultima linha do material. A altura vem
   medida do JS (--voz-alt): na previa publica existe a faixa "Sair do teste"
   embaixo, e a barra da voz sobe para cima dela. */
body.com-voz .folha{padding-bottom:calc(var(--voz-alt, 6.5rem) + .5rem)}
/* O aviso nasce no mesmo canto de baixo: sem isto ele cai POR CIMA dos
   controles justamente quando tem algo a dizer sobre a leitura. */
body.com-voz .toast{bottom:calc(var(--voz-alt, 90px) + 10px)}
/* O convite do plano de leitura mora no MESMO canto (bottom:84px, centralizado)
   e tem z-index maior: sem esta regra ele cobre os controles da voz. Sobe
   mantendo a mesma folga que ja tinha para o aviso, para os dois nao colidirem
   entre si quando aparecem juntos. */
body.com-voz .vm-plano-aviso{bottom:calc(var(--voz-alt, 90px) + 70px)}

/* ▶ ao lado do artigo (so no mouse; no toque o caminho e "Ouvir daqui" na barra
   de selecao). Um botao so, reposicionado — a lei carrega blocos continuamente
   e um botao por bloco encheria o DOM sem necessidade. */
.ouvir-aqui{position:absolute;z-index:40;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--branco);border:1px solid var(--linha);color:var(--tinta-2);
  box-shadow:0 4px 12px -6px rgba(0,0,0,.28);opacity:.55;transition:opacity .12s,color .12s}
.ouvir-aqui:hover{opacity:1;color:var(--tinta);border-color:var(--tinta-3)}
.ouvir-aqui[hidden]{display:none}

@media (max-width:760px){
  .voz{left:12px;right:12px;transform:translateY(120%);max-width:none;
    border-radius:15px;padding:.4rem .45rem}
  .voz.on{transform:translateY(0)}
  .voz .onde{padding:0 .35rem}
  .voz .onde span{display:none}   /* na tela estreita o rotulo do artigo basta */
  .ouvir-aqui{display:none}
}

/* 24/09/2026 — em tela de até 430 px (iPhone 12 a 15 têm 390) a barra passava da
   borda: "Minhas marcações" ficava fora da tela e a página ganhava largura extra,
   o que jogava tudo que é fixo no rodapé (faixa da prévia, faixa do teste grátis)
   para baixo da área visível. Sai o rótulo "Ouvir"; o ícone fica, e o title do
   botão continua dizendo o que ele faz. */
@media (max-width:430px){
  #btLerTxt{display:none}
  .bt-rot{padding:0 .5rem}
  /* o nome do material não cabe: sobrava uma letra cortada ao lado da seta */
  .marca{display:none}
}
/* Android de 360 px: ainda sobravam 18 px. Botões de 40 para 36 de largura
   (a altura de toque continua 40). */
@media (max-width:380px){
  .ico,.bt-vel{min-width:36px}
  .bt-rot{padding:0 .4rem}
}