/* Layout novo nos leitores (guia, PDF, documento, imagem, vídeo e materiais offline): o mesmo estilo da página inicial (css/visual.css).
   Interface em preto, branco e cinzas, linhas finas, cantos menores e foco bem visível. A cor fica no que é conteúdo: a cor que o Criador
   escolheu para o guia (--acc), os acertos/erros do quiz, as páginas do PDF e do documento. Só vale com o layout "novo" (js/layout.js liga
   e desliga esta folha, id="layoutNovo", conforme a escolha em "Meu perfil"); sem ela, tudo fica como no layout clássico.
   As regras de segurança destas páginas não deixam baixar fontes: a letra é a do sistema, como no painel. */

:root{
  --bg:#fafafa;--card:#ffffff;--fg:#171717;--mut:#666666;--bd:#eaeaea;--bd-forte:#d4d4d4;--bd-hover:#a3a3a3;--soft:#f2f2f2;
  --tela:#f2f2f2;--sombra:0 1px 2px rgba(0,0,0,.04);--sombra-alta:0 2px 4px rgba(0,0,0,.04),0 12px 28px -12px rgba(0,0,0,.16);--shadow:var(--sombra-alta);
  --anel:0 0 0 2px var(--card),0 0 0 4px rgba(23,23,23,.55);
  /* leitores de PDF, documento, imagem e vídeo: o "roxo" da interface vira o preto principal */
  --roxo:#171717;--roxo-fg:#ffffff;--roxo-soft:#f2f2f2;--am-soft:#f7f7f7;--am:#a3a3a3;
  --f-body:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--f-disp:var(--f-body);--f-head:var(--f-body);
  --r-g:12px;--r-m:10px;--r-p:6px;
}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]):not([data-theme="light"]){
  --bg:#000000;--card:#0a0a0a;--fg:#ededed;--mut:#a1a1a1;--bd:#1f1f1f;--bd-forte:#2e2e2e;--bd-hover:#525252;--soft:#1a1a1a;
  --tela:#000000;--sombra:0 1px 2px rgba(0,0,0,.5);--sombra-alta:0 0 0 1px #262626,0 16px 32px -12px rgba(0,0,0,.9);
  --anel:0 0 0 2px var(--card),0 0 0 4px rgba(237,237,237,.6);
  --roxo:#ededed;--roxo-fg:#0a0a0a;--roxo-soft:#1a1a1a;--am-soft:#111111;--am:#525252;
  --papel:#0f0f0f;--tinta:#ededed;--tinta-mut:#a1a1a1;--linha:#2e2e2e;
}}
:root[data-tema="escuro"],:root[data-theme="dark"]{
  --bg:#000000;--card:#0a0a0a;--fg:#ededed;--mut:#a1a1a1;--bd:#1f1f1f;--bd-forte:#2e2e2e;--bd-hover:#525252;--soft:#1a1a1a;
  --tela:#000000;--sombra:0 1px 2px rgba(0,0,0,.5);--sombra-alta:0 0 0 1px #262626,0 16px 32px -12px rgba(0,0,0,.9);
  --anel:0 0 0 2px var(--card),0 0 0 4px rgba(237,237,237,.6);
  --roxo:#ededed;--roxo-fg:#0a0a0a;--roxo-soft:#1a1a1a;--am-soft:#111111;--am:#525252;
  --papel:#0f0f0f;--tinta:#ededed;--tinta-mut:#a1a1a1;--linha:#2e2e2e;
}

/* ---------- base ---------- */
body{font-family:var(--f-body);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{font-family:var(--f-body);font-variation-settings:normal;letter-spacing:-.01em}
:focus-visible{outline:0;box-shadow:var(--anel);border-radius:var(--r-p)}
::selection{background:var(--fg);color:var(--card)}

/* botões: 1px, cantos de 6px, peso médio; o que está ligado fica preto (no escuro, branco) */
button,.bt{font-family:var(--f-body);font-weight:500;font-size:.875rem;border:1px solid var(--bd-forte);border-radius:var(--r-p);background:var(--card);color:var(--fg);min-height:36px;transition:background-color .15s,border-color .15s,color .15s}
@media (hover:hover){button:not(:disabled):hover,.bt:hover{border-color:var(--bd-hover);background:var(--bg)}}
button:active:not(:disabled),.bt:active{transform:scale(.98)}
button.on,.bt.on,button.pri,.bt.pri{background:var(--fg);color:var(--card);border-color:var(--fg)}
@media (hover:hover){button.on:not(:disabled):hover,.bt.on:hover,button.pri:not(:disabled):hover,.bt.pri:hover{background:color-mix(in srgb,var(--fg) 85%,var(--card));border-color:transparent}}
button.perigo{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
@media (hover:hover){button.perigo:not(:disabled):hover{background:var(--bad-soft);border-color:var(--bad)}}

/* ---------- tela de carregamento: o maracujá no centro, com um traço fino girando em volta ---------- */
#m{min-height:100vh;min-height:100dvh;gap:0}
#m .bola{position:relative;width:56px;height:56px;margin:0 auto 20px;border:0;border-radius:50%;animation:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='34' r='27' fill='%235b2a73'/%3E%3Ccircle cx='32' cy='34' r='21' fill='%23ffd257'/%3E%3Ccircle cx='32' cy='34' r='17' fill='%23f6b71c'/%3E%3Cg fill='%232a1533'%3E%3Cellipse cx='26' cy='29' rx='2' ry='2.8'/%3E%3Cellipse cx='36' cy='27' rx='2' ry='2.8'/%3E%3Cellipse cx='40' cy='37' rx='2' ry='2.8'/%3E%3Cellipse cx='31' cy='38' rx='2' ry='2.8'/%3E%3Cellipse cx='23' cy='39' rx='2' ry='2.8'/%3E%3Cellipse cx='34' cy='45' rx='2' ry='2.8'/%3E%3C/g%3E%3Cpath d='M33 8c2-4 7-6 11-5-1 4-5 7-10 7z' fill='%233f7d3a'/%3E%3C/svg%3E") center/30px no-repeat}
#m .bola::before,#m .bola::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--bd)}
#m .bola::after{border-color:transparent;border-top-color:var(--fg);animation:lv-gira .9s cubic-bezier(.5,.15,.5,.85) infinite}
#m p{font-size:.875rem;color:var(--mut);letter-spacing:.01em}
#m .bola,#m .bola~p:not(.erro){animation-name:surge;animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both;animation-delay:.12s}
#m .erro{color:var(--bad);font-weight:500}
#m a,#m button{color:var(--fg);font-weight:500}
#m button{border:1px solid var(--bd-forte);border-radius:var(--r-p);padding:8px 14px}
@keyframes lv-gira{to{transform:rotate(360deg)}}
@keyframes surge{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#m .bola::after{animation:none;border-top-color:var(--bd)}#m .bola,#m .bola~p{animation:none}}
.barra-prog{height:2px;border-radius:2px;background:var(--bd)}
.barra-prog i{background:var(--fg)}

/* ---------- barra de cima dos leitores (PDF, documento, imagem, vídeo) ---------- */
.vbarra{background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(10px);backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--bd);gap:6px}
.vbarra h1{font-size:.95rem;font-weight:600;letter-spacing:-.005em}
.vbarra .pg-num{font-weight:500;font-variant-numeric:tabular-nums}
.vbarra .pg-num input{border:1px solid var(--bd-forte);border-radius:var(--r-p);min-height:36px}
.pdf-cab2 .sep{width:1px;background:var(--bd);border-radius:0}
.cor-bt{width:24px;height:24px;min-width:24px;min-height:24px;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.cor-bt.on{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--fg)}
.vprevia{background:var(--fg);color:var(--card)}
.vprevia a{color:var(--card)}

/* PDF, documento e imagem: as folhas sobre um fundo neutro */
.pdf-pg{box-shadow:0 0 0 1px var(--bd),var(--sombra-alta)}
.doc-fundo{background:var(--tela)}
.pagina{box-shadow:0 0 0 1px var(--bd),var(--sombra-alta)}
.doc-fluido .pagina{border:1px solid var(--bd);border-radius:var(--r-g);box-shadow:none}
.img-palco{background:var(--tela)}
.img-palco img{border-radius:var(--r-p);box-shadow:0 0 0 1px var(--bd),var(--sombra-alta)}
.pdf-notas{border-left:1px solid var(--bd);box-shadow:var(--sombra-alta)}
.pdf-notas h2{font-size:1rem;font-weight:600}
.pdf-notas li small{font-weight:500}
.pdf-edita{border:1px solid var(--fg)}

/* vídeo */
.video-caixa{margin-top:24px}
.video-quadro{border-radius:var(--r-g);box-shadow:0 0 0 1px var(--bd)}
.video-info{margin:16px 2px}
.video-info h2{font-size:1.25rem;font-weight:600;letter-spacing:-.015em}
.aviso-criador{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-m)}

/* avisos que somem sozinhos e diálogos do Criador */
.vaviso,.ui-toast{background:var(--fg);color:var(--card);border-radius:var(--r-m);font-weight:500;box-shadow:var(--sombra-alta)}
.ui-toast.erro{background:var(--bad);color:#fff}
.ui-fundo{background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.ui-dlg{border:1px solid var(--bd);border-radius:var(--r-g);box-shadow:var(--sombra-alta)}
.ui-dlg h2{font-size:1.125rem;font-weight:600}
.ui-campo input[type=text],.ui-campo input[type=url],.ui-campo input[type=number],.ui-campo textarea,.ui-campo select,.ui-campo input[type=file]{border:1px solid var(--bd-forte);border-radius:var(--r-p);background:var(--card)}
.ui-campo input:focus,.ui-campo textarea:focus,.ui-campo select:focus{border-color:var(--fg);box-shadow:var(--anel)}
.ui-dlg-a button,.ui-pri,.ui-sec,.ui-perigo{border-radius:var(--r-p);font-weight:500;font-size:.875rem;min-height:40px}
.ui-menu{border:1px solid var(--bd);border-radius:var(--r-m);box-shadow:var(--sombra-alta)}
.ui-menu button{border-radius:var(--r-p);font-weight:400;font-size:.875rem;min-height:36px}

/* ---------- materiais offline (só o Criador) ---------- */
.off{padding:40px 16px 56px}
.off h1{font-size:1.75rem;font-weight:600;letter-spacing:-.025em;margin:0 0 6px}
.off .intro{font-size:.9375rem;margin:0 0 24px;max-width:60ch}
.off .aviso{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-m);padding:12px 14px;font-size:.9375rem}
.off .aviso.ruim{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent);color:var(--bad)}
.off ul{gap:0;border:1px solid var(--bd);border-radius:var(--r-g);background:var(--card);overflow:hidden}
.off li{border:0;border-top:1px solid var(--bd);border-radius:0;background:transparent;padding:16px 18px}
.off li:first-child{border-top:0}
.off li .t{font-weight:600;font-size:1rem}
.off li .m{font-size:.875rem}
.off li .a{margin-top:10px}
.off li .a a.bt.pri{background:var(--fg);color:var(--card);border-color:var(--fg)}
.off .rodape{margin-top:24px}

/* ---------- guia interativo ---------- */
/* barra de cima: fundo translúcido, abas sublinhadas (como no painel) e barra de progresso de 2px */
#top{background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(10px);backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--bd)}
#top .in{padding:10px 16px 0}
.brand{font-weight:600;font-size:.9375rem;letter-spacing:-.005em}
#pt{font-weight:600;font-size:.875rem;color:var(--fg)}
.ic{border-radius:var(--r-p)!important;border-color:var(--bd-forte)!important;min-height:36px!important;font-size:1rem}
#top .tr a.ic,#top .tr button.ic{font-weight:500!important;font-size:.875rem!important}
.ic[aria-pressed="true"]{background:var(--fg);color:var(--card);border-color:var(--fg)!important;box-shadow:none}
#bar{height:2px;border-radius:2px;background:var(--bd);margin:10px 0 2px}
#bar i{background:var(--fg)}
.nvA{border-radius:var(--r-p);width:32px;min-width:32px;height:32px;min-height:32px;font-size:1.1rem;color:var(--mut)}
#nav{gap:2px;padding:0 2px;scrollbar-width:none}
#nav::-webkit-scrollbar{display:none}
#nav button{border:0;border-radius:0;background:transparent;color:var(--mut);min-height:44px;padding:0 12px;font-size:.875rem;font-weight:500;box-shadow:inset 0 -2px 0 transparent}
@media (hover:hover){#nav button:not(:disabled):hover{color:var(--fg);background:transparent}}
#nav button.on{background:transparent;color:var(--fg);box-shadow:inset 0 -2px 0 var(--fg)}
#nav button small{font-variant-numeric:tabular-nums}
#tmr,#cir,#hlBar{border-top:1px solid var(--bd)}
#tmr .tmr-t,#cir .tmr-t{font-weight:600;letter-spacing:-.02em}
#tmr .tmr-b,#cir .tmr-b{height:2px}
#tmr .tmr-b i,#cir .tmr-b i{background:var(--fg)}

/* conteúdo */
#app{padding:32px 16px 56px}
.eyebrow{font-size:.75rem;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--mut)}
article header h1{font-size:2rem;font-weight:600;letter-spacing:-.03em;margin:4px 0 6px}
.sub{font-size:1rem}
.how{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-m)}
.sec{border-radius:var(--r-g);box-shadow:var(--sombra);margin:8px 0}
.sh{font-weight:500;font-size:1rem;border-radius:var(--r-g);padding:14px 16px}
.sec.open .sh{border-radius:var(--r-g) var(--r-g) 0 0;border-bottom-color:var(--bd)}
.ch{color:var(--mut)}
.dn,.cnt,.tcnt{border-radius:999px;font-weight:500;background:var(--card);border-color:var(--bd-forte)}
.dn input{accent-color:var(--fg)}
.sec.done{border-color:var(--bd)}
.sec.done .sh{background:transparent}
.sec.done .dn{background:var(--fg);color:var(--card);border-color:var(--fg)}
.sb{padding:6px 16px 16px}
.tb button[aria-pressed="true"],.fc-modes button[aria-pressed="true"],.tbtn[aria-pressed="true"],.pq-tools button[aria-pressed="true"],.wb[aria-pressed="true"],#drBar .tbtn[aria-pressed="true"]{background:var(--fg);color:var(--card);border-color:var(--fg)}
.card,.qc,.end,.tbox,.via{border-radius:var(--r-m)}
.box,.check,.fb,.sl,details.cp,.resp{border-radius:var(--r-m)}
.opt,.cut{border-width:1px;border-radius:var(--r-m)}
.opt .ol{font-weight:600}
@media (hover:hover){.opt:not(:disabled):hover{border-color:var(--bd-hover)}}
.fc-card{border-width:1px;border-radius:var(--r-g)}
.capa{border-radius:var(--r-g)}
#drBar{border-radius:var(--r-g);box-shadow:var(--sombra-alta)}
.mdl-bg{background:rgba(0,0,0,.45)}
.mdl-box{border:1px solid var(--bd);border-radius:var(--r-g)}
#toast{border-radius:var(--r-m);font-family:var(--f-body);font-weight:500}
#cred{border-top:1px solid var(--bd);font-size:.875rem}
#cred .made{font-weight:500}

@media (max-width:520px){
  #nav button{border-radius:0;white-space:nowrap;max-width:none;min-height:44px;font-size:.8125rem}
  #app{padding-top:24px}
  article header h1{font-size:1.625rem}
}
@media (prefers-reduced-motion:reduce){button:active:not(:disabled),.bt:active{transform:none}}
/* alvos de toque: no celular (dedo) nada que se toca fica com menos de 44 px de altura (o mínimo da Apple); no computador nada muda */
@media (pointer:coarse),(max-width:640px){
  .ic{min-height:44px!important;min-width:44px}
  .nvA{width:44px;min-width:44px;height:44px;min-height:44px}
  .tb button,.pn button,#tmr button,#cir button,#tmr .tmr-bt button,#cir .tmr-bt button,.qb button,.prova-f button,.qnav button,.fc-nav button,.fc-modes button,.mdl button{min-height:44px}
  .dn{min-height:44px;display:inline-flex;align-items:center;padding:4px 10px}
  .d{position:relative}
  .d::after{content:"";position:absolute;inset:-9px} /* (a bolinha continua pequena; a área do toque é que cresce) */
}
/* alvos de toque: no celular (dedo) nada que se toca fica com menos de 44 px de altura (o mínimo da Apple); no computador nada muda */
@media (pointer:coarse),(max-width:640px){
  .vbarra button,.vbarra a.bt,.vbarra .pg-num input{min-height:44px}
}
/* "reduzir transparência" e "aumentar contraste" do aparelho: as barras de vidro ficam sólidas (e, com mais contraste, com borda bem marcada) */
@media (prefers-reduced-transparency:reduce){
  #top,.vbarra,.ui-fundo{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  #top,.vbarra{background:var(--bg)!important}
}
@media (prefers-contrast:more){
  #top,.vbarra{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--bg)!important;border-bottom-color:var(--fg)!important}
  .sec,.obj,.ic,button{border-color:var(--fg)}
}