/* Leitores de material (vídeo, imagem, documento, PDF): mesma paleta do site, com tema claro/escuro. */
:root{--bg:#fff5d6;--card:#fffcf3;--fg:#2a1424;--mut:#6a5560;--bd:#e3c983;--roxo:#4e1f63;--roxo-fg:#fff;--roxo-soft:#f1e4f4;--am:#f2a516;--am-soft:#fff1c9;--bad:#b3261e;--bad-soft:#fbe4e1;--ok:#3e7b39;--sombra:0 6px 24px rgba(42,20,36,.18);--tela:#e9dfc0;--f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--f-disp:"Fraunces",Georgia,"Times New Roman",serif}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]){color-scheme:dark;--bg:#1c1021;--card:#27172d;--fg:#fff1cc;--mut:#c4b0c2;--bd:#56405e;--roxo:#ddb6f2;--roxo-fg:#22102c;--roxo-soft:#382342;--am:#f7b52c;--am-soft:#3a2d12;--bad:#ff8a80;--bad-soft:#3d1c1c;--ok:#7cc46e;--sombra:0 6px 24px rgba(0,0,0,.5);--tela:#120a16}}
:root[data-tema="escuro"]{color-scheme:dark;--bg:#1c1021;--card:#27172d;--fg:#fff1cc;--mut:#c4b0c2;--bd:#56405e;--roxo:#ddb6f2;--roxo-fg:#22102c;--roxo-soft:#382342;--am:#f7b52c;--am-soft:#3a2d12;--bad:#ff8a80;--bad-soft:#3d1c1c;--ok:#7cc46e;--sombra:0 6px 24px rgba(0,0,0,.5);--tela:#120a16}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font:1.0625rem/1.55 var(--f-body)}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:3px solid var(--roxo);outline-offset:2px;border-radius:8px}
h1,h2,h3{font-family:var(--f-disp);font-variation-settings:"SOFT" 100,"WONK" 0;line-height:1.25}
button,.bt{font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;border:1.5px solid var(--bd);background:var(--card);color:var(--fg);border-radius:12px;padding:6px 12px;min-height:42px;min-width:42px;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;-webkit-tap-highlight-color:transparent}
@media (hover:hover){button:not(:disabled):hover,.bt:hover{border-color:var(--roxo)}}
button:disabled{opacity:.45;cursor:default}
button.on,.bt.on{background:var(--roxo);color:var(--roxo-fg);border-color:var(--roxo)}

/* barra de cima */
.vbarra{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:max(8px,env(safe-area-inset-top)) 12px 8px;background:var(--bg);border-bottom:1.5px solid var(--bd)}
.vbarra h1{margin:0;font-size:1.1rem;flex:1 1 140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbarra .grupo{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vbarra .pg-num{display:flex;align-items:center;gap:4px;font-weight:700}
.vbarra .pg-num input{width:4.2em;font:inherit;text-align:center;border:1.5px solid var(--bd);border-radius:10px;padding:6px 4px;background:var(--card);color:var(--fg);min-height:42px}

/* mensagem de espera / erro */
#m{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px}
.bola{width:44px;height:44px;border-radius:50%;border:5px solid var(--am);border-top-color:var(--roxo);margin:0 auto 14px;animation:g 1s linear infinite}
@keyframes g{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bola{animation:none}}
#m p{margin:0 0 10px;color:var(--mut);max-width:34em}
#m .erro{color:var(--bad);font-weight:700}
#m a,#m button{font-weight:700;color:var(--roxo)}
#m button{margin:4px}
.barra-prog{width:min(320px,80vw);height:10px;border-radius:99px;background:var(--bd);overflow:hidden;margin:6px auto 12px}
.barra-prog i{display:block;height:100%;width:0;background:var(--roxo);transition:width .2s}

/* vídeo */
.video-caixa{max-width:1100px;margin:16px auto;padding:0 12px}
.video-quadro{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;box-shadow:var(--sombra)}
.video-quadro iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-info{margin:14px 2px}
.video-info h2{margin:0 0 4px;font-size:1.3rem}
.video-info p{margin:4px 0;color:var(--mut)}
.aviso-criador{background:var(--am-soft);border:1.5px dashed var(--am);border-radius:12px;padding:8px 12px;margin:12px 0;font-size:.93rem}

/* imagem */
.img-palco{overflow:auto;height:calc(100vh - 66px);display:flex;padding:12px;background:var(--tela);-webkit-overflow-scrolling:touch}
.img-palco img{margin:auto;display:block;max-width:none;flex:none;box-shadow:var(--sombra);border-radius:6px;background:#fff;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.img-palco img.ajusta{max-width:100%;max-height:100%;width:auto;height:auto}

/* rodapé de aviso pequeno */
.vaviso{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;max-width:min(92vw,460px);padding:10px 14px;border-radius:12px;background:#2a1424;color:#fff;font-weight:600;font-size:.95rem;box-shadow:var(--sombra)}
.img-palco{touch-action:pan-x pan-y}

.vprevia{position:relative;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:center;padding:8px 12px;background:#7c3aed;color:#fff;font-weight:600;font-size:.9rem;text-align:center}
.vprevia a{color:#fff;font-weight:800;text-decoration:underline}
@media print{.vprevia{display:none!important}}
/* 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}
}
/* no celular a barra do alto some ao rolar para baixo e volta ao rolar para cima (js/some-ao-rolar.mjs); --barra-some = quanto ela sobe */
.vbarra{transition:transform .32s cubic-bezier(.2,.9,.25,1)}
.vbarra.barra-oculta{transform:translateY(var(--barra-some,-100%))}
@media (prefers-reduced-motion:reduce){.vbarra{transition:none}}
/* trocar o tema: por um instante as cores mudam suavemente, em vez do "flash" (a classe sai sozinha depois de 0,32 s) */
html.tema-trocando,html.tema-trocando *,html.tema-trocando *::before,html.tema-trocando *::after{transition:background-color .25s ease,color .25s ease,border-color .25s ease,fill .25s ease!important}