/* Leitura Fria — folha única. */

*{box-sizing:border-box}
body{margin:0;background:#14161c;color:#dfe3ea;font:14px/1.55 system-ui,-apple-system,sans-serif}
a{color:#7fc7ff;text-decoration:none}
a:hover{text-decoration:underline}
kbd{border:1px solid #4a5364;border-bottom-width:2px;border-radius:4px;padding:0 5px;
    font:11px ui-monospace,monospace;background:#1c212b;color:#cfd6e4}
button{font:13px system-ui;padding:8px 14px;border-radius:6px;border:1px solid #4a5364;
       background:#242b37;color:#dfe3ea;cursor:pointer}
button:hover{background:#2d3542}
button.ok{background:#2a7a5c;border-color:#3ddc97;color:#eafff6}
button.ok:hover{background:#33906c}
button.proximo{background:#2b3a55;border-color:#7fc7ff;color:#dbeeff}
button.proximo:hover{background:#35496b}

/* ------------------------------------------------ barra do topo */
.barra{position:sticky;top:0;z-index:20;background:#1a1e27;border-bottom:1px solid #2a2f3a;
       display:flex;align-items:center;gap:14px;padding:9px 16px;height:47px}
.barra .indice{color:#9fb0c9;padding:5px 11px;border:1px solid #333a47;border-radius:6px;white-space:nowrap}
.barra .indice:hover{background:#232935;text-decoration:none}
.barra .meio{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.barra .titulo{color:#fff;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra .sub{color:#8b94a6;font-size:12px}
.setas{display:flex;gap:6px}
.setas a,.setas span{padding:6px 11px;border:1px solid #333a47;border-radius:6px;color:#cfd6e4;font-size:13px}
.setas a:hover{background:#232935;text-decoration:none}
.setas span{opacity:.3}
.progresso{height:3px;background:#2a2f3a}
.progresso i{display:block;height:100%;background:#3ddc97}

/* faixa da pasta de anotações */
.pasta{display:flex;align-items:center;gap:10px;background:#241f14;border-bottom:1px solid #3a3320;
       padding:7px 16px;font-size:12.5px;color:#c9bd94}
.pasta button{padding:4px 11px;font-size:12px;background:#3a3320;border-color:#6b5f36;color:#f0e2b8}
.pasta.oculta{display:none}

/* ------------------------------------------------ duas colunas */
.duas{display:grid;grid-template-columns:var(--esq,58%) 7px 1fr;align-items:start}
.esq{position:sticky;top:47px;align-self:start;min-width:0}
.dir{padding:0 0 70px;min-width:0}
.divisor{position:sticky;top:47px;height:calc(100vh - 47px);cursor:col-resize;background:#2a2f3a;
         display:flex;align-items:center;justify-content:center}
.divisor::after{content:'';width:2px;height:34px;background:#5a6373;border-radius:2px}
.divisor:hover{background:#3ddc97}
.divisor:hover::after{background:#14161c}
body.redimensionando{user-select:none;cursor:col-resize}
body.redimensionando #palco{pointer-events:none}

/* ------------------------------------------------ visualizador */
#palco{position:relative;height:420px;background:#000;overflow:hidden;cursor:grab;
       touch-action:pan-y}   /* vertical rola a página, horizontal é nosso: troca de imagem */
#palco.arrastando{cursor:grabbing}
#palco img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;display:none;
           transform-origin:0 0;user-select:none;-webkit-user-drag:none}
#palco img.ativa{display:block}
/* o vídeo ocupa o mesmo palco das capturas, mas sem zoom nem arrasto — os controles precisam
   receber o clique, e o transform atrapalharia a barra de progresso */
#palco video{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;display:none;
             background:#000;z-index:2}
#palco video.ativa{display:block}
.tira.video{background:#2a1f38;border-color:#6b4d8a;color:#c9a6f0;display:flex;
            align-items:center;justify-content:center;font-size:10px;gap:3px}
#grafico{position:absolute;inset:0;width:100%;height:100%;display:none;background:#0d1015;z-index:3}
#zoomhud{position:absolute;right:12px;top:10px;background:#000b;padding:5px 11px;border-radius:6px;
         font:12px ui-monospace,monospace;color:#cfd6e4;pointer-events:none;z-index:4}
#etiqueta{position:absolute;left:12px;top:10px;background:#000000cc;padding:6px 14px;border-radius:7px;
          font:700 22px/1 ui-monospace,monospace;color:#ffd76a;letter-spacing:1px;
          pointer-events:none;display:none;border:1px solid #6b5f36;z-index:4}
#vazio{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
       color:#5f6878;font-size:14px;text-align:center;padding:0 40px}
.tiras{display:flex;gap:7px;padding:7px 10px;align-items:center;flex-wrap:wrap;background:#171b23}
.tira{width:78px;height:42px;border:2px solid #333a47;border-radius:4px;background-size:cover;
      background-position:center;cursor:pointer;position:relative;flex:0 0 auto}
.tira.on{border-color:#3ddc97}
.tira .rot{position:absolute;left:0;bottom:0;background:#000c;font:10px ui-monospace,monospace;
           padding:1px 4px;border-radius:0 4px 0 0;color:#cfd6e4}
.tira.trancada{background:#1b1f28;display:flex;align-items:center;justify-content:center;
               border-style:dashed;color:#5f6878;font-size:10px;text-align:center;cursor:not-allowed}
.tira.resultado{background:#12303f;border-color:#2a5f7a;color:#7fc7ff;display:flex;
                align-items:center;justify-content:center;font-size:10px}
.ajuda{margin-left:auto;color:#6b7486;font-size:11px}

/* ------------------------------------------------ o que se aprende */
.ensina{background:#20262f;border-bottom:1px solid #2a2f3a;padding:11px 16px;font-size:14px}
.ensina b{color:#ffd76a;font-weight:600;margin-right:5px}
.cofre{color:#d8b84a;font-size:12px;margin-left:8px}

/* ------------------------------------------------ passos */
.passo{border-top:1px solid #2a2f3a;background:#1a1e27;scroll-margin-top:96px}
.passo:first-child{border-top:none}
.passo>h3{margin:0;padding:12px 16px;font-size:15px;display:flex;align-items:center;gap:11px;
          background:#20262f;color:#fff;font-weight:600;position:sticky;top:47px;z-index:5}
.passo .n{width:22px;height:22px;border-radius:50%;background:#3ddc97;color:#0d1117;display:flex;
          align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto}
.passo .tempo{margin-left:auto;font:12px ui-monospace,monospace;color:#8b94a6;font-weight:400}
.passo .corpo{padding:14px 16px}
.passo.travado>h3{background:#191d25;color:#5f6878}
.passo.travado .n{background:#333a47;color:#6b7486}
.passo.travado .corpo{display:none}
.aviso{padding:11px 16px;color:#7a8396;font-size:13px;font-style:italic}
.dica{margin:0 0 8px;color:#8b94a6;font-size:12px}

input.c,textarea.c{width:100%;background:#12151b;border:1px solid #2f3542;border-radius:5px;
                   color:#dfe3ea;font:13px system-ui;padding:6px 8px}
input.c:focus,textarea.c:focus{outline:none;border-color:#3ddc97}
textarea.c{min-height:64px;resize:vertical}
.rot2{color:#8b94a6;font-size:12px;margin:12px 0 4px}

/* ------------------------------------------------ passo 1 */
.moedas{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0 9px}
#moVer{margin-top:16px;margin-bottom:12px}
.mo{border:2px solid;border-radius:999px;padding:3px 8px;font:12px ui-monospace,monospace;
    font-weight:700;background:transparent;cursor:pointer}
.mo:hover{filter:brightness(1.25)}
.mo.on{box-shadow:0 0 0 2px #14161c,0 0 0 4px currentColor}
.mo:disabled{opacity:.22;cursor:not-allowed;filter:grayscale(1)}

.tfbloco{border:1px solid #262c37;border-radius:8px;margin-bottom:8px;background:#171b23;
         display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:start;padding:9px 11px}
.tf{color:#ffd76a;font:13px ui-monospace,monospace;font-weight:700}
.dizer{font-size:13px;line-height:1.6;color:#9aa5b5}
.dizer b{color:#e8edf4;font-weight:600}

/* o que ele fala de cada timeframe — opcional, escondido por padrão */
#vozTF{margin:2px 0 10px;background:none;border:1px solid #2f3542;color:#8b94a6;
       border-radius:7px;padding:5px 11px;font-size:12.5px;cursor:pointer}
#vozTF:hover{border-color:#3f4a5c;color:#c2cbd9}
#vozTF.on{border-color:#3ddc97;color:#3ddc97}
.tfvoz{grid-column:2;margin-top:2px;border-top:1px dashed #2a3140;padding-top:8px}
.tfvoz .tocar{background:none;border:1px solid #3a4353;color:#9aa5b5;border-radius:6px;
              padding:3px 9px;font:12px ui-monospace,monospace;cursor:pointer;margin-bottom:6px}
.tfvoz .tocar:hover{border-color:#3ddc97;color:#3ddc97}
.tfvoz .tocar.tocando{border-color:#3ddc97;color:#3ddc97;background:#18332a}
.tfvoz .fala{font-size:12.5px;line-height:1.65;color:#7f8a9b;max-height:128px;overflow-y:auto}
.tfvoz .fala.aberta{max-height:none}
.tfvoz .mais{background:none;border:0;color:#6f7a8b;font-size:11.5px;cursor:pointer;padding:4px 0}
.tfvoz .mais:hover{color:#9aa5b5}

.soma{border:1px solid #2f3542;border-radius:8px;padding:10px 12px;background:#191d26;margin-top:12px}
.soma .lin{display:grid;grid-template-columns:96px 1fr;gap:9px;align-items:center;margin-bottom:6px}
.soma .rot{color:#ffd76a;font:12px ui-monospace,monospace;text-align:right}
.soma input{font-size:12px}
.lado{margin-top:10px}
.lado>h4{margin:0 0 2px;font-size:13px;font-weight:700}
.lado.forca>h4{color:#3ddc97}
.lado.fraqueza>h4{color:#ff7a7a}

/* ------------------------------------------------ passo 2 */
audio{width:100%;margin-bottom:10px}
details.transcricao summary{cursor:pointer;color:#9fb0c9;font-size:13px;padding:4px 0}
details.transcricao pre{white-space:pre-wrap;font:13px/1.6 system-ui;color:#c3ccda;
                        background:#12151b;padding:12px;border-radius:6px;max-height:320px;overflow:auto}

/* ------------------------------------------------ passo 4 */
.fcard{border:1px solid #2a3340;border-left:3px solid #d8b84a;border-radius:7px;
       padding:10px 12px;margin-bottom:9px;background:#191d26}
.fcard .q{color:#f0e2b8;font-size:15px;line-height:1.55}
.fcard .q::before{content:'\201C'} .fcard .q::after{content:'\201D'}
.fcard .pr{color:#8b94a6;font-size:12.5px;margin-top:6px;line-height:1.45}
.fcard .cam{display:inline-block;background:#2a3340;color:#9fb0c9;border-radius:4px;
            padding:1px 6px;font-size:10px;margin-right:6px}
.fcard label{display:flex;align-items:center;gap:6px;margin-top:8px;color:#8b94a6;font-size:12px;cursor:pointer}
.fcard input[type=checkbox]{accent-color:#3ddc97;width:15px;height:15px}
.fcard.fixada{border-left-color:#3ddc97}
.fcard.fixada label{color:#3ddc97}
.minhas{margin-top:14px;border-top:1px solid #2a2f3a;padding-top:12px}
.frase{display:flex;gap:8px;margin-bottom:7px}
.frase input{flex:1}
.frase button{flex:0 0 auto}
.salvo{color:#3ddc97;font-size:12px;margin-left:10px}

/* ------------------------------------------------ índice */
.pagina{max-width:960px;margin:0 auto;padding:24px 16px 70px}
h1{font-size:24px;margin:0 0 4px;color:#fff}
.faixa{display:flex;align-items:center;gap:12px;background:#1a1e27;border:1px solid #2a2f3a;
       border-radius:10px;padding:13px 16px;margin-top:14px}
.faixa .barra2{flex:1;height:8px;background:#232935;border-radius:4px;overflow:hidden}
.faixa .barra2 i{display:block;height:100%;background:#3ddc97}
.faixa.regra{border-color:#3a3320;background:#241f14;color:#c9bd94;font-size:13px}
.bloco{margin-top:28px}
.bloco h2{font-size:17px;color:#fff;margin:0 0 3px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bloco h2 small{color:#8b94a6;font-size:12px;font-weight:400}
.bloco p.res{color:#8b94a6;margin:0 0 10px;font-size:13px}
.dia{display:grid;grid-template-columns:40px 150px 52px 1fr 92px;gap:12px;align-items:center;
     padding:9px 12px;border-top:1px solid #232935;color:#c3ccda}
.dia .dur{font:12px ui-monospace,monospace;color:#8b94a6;text-align:center}
.cofre{display:none}
.dia.feito .dur{opacity:.5}
.dia:hover{background:#1a1e27;text-decoration:none}
.dia .num{font:13px ui-monospace,monospace;color:#8b94a6;text-align:right}
.dia .ses{color:#7fc7ff;font-size:13px}
.dia .txt{font-size:13px;color:#a9b4c5}
.dia .est{font-size:11px;text-align:right;color:#5f6878}
.dia.semses .ses{color:#5f6878}
.dia.feito .num,.dia.feito .txt{opacity:.5}
.dia.feito .est{color:#3ddc97}
.dia.andamento .est{color:#d8b84a}

/* ------------------------------------------------ dia de consolidação */
#consTxt{color:#c3ccda;font-size:14px;line-height:1.65;margin:0 0 14px}
#consTxt b{color:#ffd76a;font-weight:600}
.conslista{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.conslista a{border:1px solid #333a47;border-radius:6px;padding:5px 10px;font-size:12.5px;color:#9fb0c9}
.conslista a:hover{background:#232935;border-color:#3ddc97;color:#dfe3ea;text-decoration:none}
.conslista a b{color:#7fc7ff;font-weight:600}
#sortear{font-size:14px;padding:10px 18px}

/* ------------------------------------------------ busca no acervo */
.buscacx{display:flex;gap:14px;align-items:center;margin:6px 0 12px}
.buscacx input{font-size:16px;padding:10px 12px}
.verTudo{display:flex;align-items:center;gap:7px;color:#8b94a6;font-size:12.5px;white-space:nowrap;cursor:pointer}
.verTudo input{accent-color:#3ddc97;width:15px;height:15px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.chip{padding:4px 11px;font-size:12px;border-radius:999px;background:#1c212b;border-color:#333a47;color:#9fb0c9}
.chip:hover{background:#242b37;border-color:#3ddc97;color:#dfe3ea}
.achado{border:1px solid #262c37;border-radius:9px;margin-bottom:10px;background:#1a1e27;overflow:hidden}
.achado .cab{display:flex;align-items:center;gap:12px;padding:9px 13px;background:#20262f;flex-wrap:wrap}
.achado .cab a{color:#7fc7ff;font-size:13.5px}
.achado .cab .qt{color:#8b94a6;font-size:12px}
.achado .trechos{padding:4px 13px 10px}
.trecho{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-top:1px solid #232935;
        font-size:13px;line-height:1.6;color:#a9b4c5}
.trecho:first-child{border-top:none}
.trecho mark{background:#3a3320;color:#ffd76a;padding:0 2px;border-radius:2px}
.trecho.mais{color:#5f6878;font-style:italic;justify-content:center}
.ouvir{flex:0 0 auto;padding:2px 8px;font-size:11px;border-radius:5px;background:#232b36;
       border-color:#3a4250;color:#9fb0c9;margin-top:1px}
.ouvir:hover{border-color:#3ddc97;color:#dfe3ea}
.ouvir.tocando{background:#2a7a5c;border-color:#3ddc97;color:#eafff6}
.achado.velado .trechos{filter:blur(4px);opacity:.35;pointer-events:none;user-select:none}
.revelar{margin-left:auto;padding:3px 10px;font-size:11.5px;background:#3a3320;border-color:#6b5f36;color:#f0e2b8}
.buscalink{color:#9fb0c9;padding:5px 11px;border:1px solid #333a47;border-radius:6px;white-space:nowrap}
.buscalink:hover{background:#232935;text-decoration:none}

/* ------------------------------------------------ legenda sobre a captura */
#legenda{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 12px;display:none;
         background:linear-gradient(to top,#000000ee 0%,#000000cc 45%,#0000 100%);pointer-events:none;z-index:5}
#legenda.on{display:block}
#ltexto{font-size:20px;line-height:1.45;color:#fff;text-align:center;text-shadow:0 2px 6px #000;
        min-height:29px;font-weight:500}
#ltexto w{opacity:.45;transition:opacity .12s}
#ltexto w.dita{opacity:1}
#legenda .ctrl{display:flex;align-items:center;gap:11px;margin-bottom:8px;pointer-events:auto}
#legenda .ctrl button{padding:2px 11px;font-size:14px;background:#000000aa;border-color:#ffffff44;color:#fff}
#legenda .ctrl button:hover{background:#000d;border-color:#3ddc97}
#ltempo{font:12px ui-monospace,monospace;color:#cfd6e4;text-shadow:0 1px 3px #000}
.lajuda{margin-left:auto;font-size:11px;color:#9aa5b5;text-shadow:0 1px 3px #000}
.lajuda kbd{background:#000000aa;border-color:#ffffff33;color:#dfe3ea}
:fullscreen #ltexto{font-size:27px}

/* ------------------------------------------------ transcrição cronometrada no passo 2 */
.tcron{max-height:340px;overflow:auto;background:#12151b;border-radius:6px;padding:6px 4px}
.tl{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:5px 8px;border-radius:6px;
    cursor:pointer;color:#8b94a6;font-size:13.5px;line-height:1.6}
.tl:hover{background:#1a1e27}
.tl .tt{font:11px ui-monospace,monospace;color:#5f6878;padding-top:3px}
.tl.passou{color:#69748a}
.tl.atual{background:#1e2632;color:#dfe3ea}
.tl.atual .tt{color:#3ddc97}
.tl w.dita{color:#fff;font-weight:600}

/* ------------------------------------------------------------------ toque e tela cheia
   Os controles ficam DENTRO do #palco de propósito: em tela cheia só o palco está na tela, e
   as miniaturas ficam de fora. Sem isto não haveria como trocar de imagem em tela cheia. */
#palco .nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
            width:44px;height:64px;border:0;border-radius:8px;background:#0009;color:#fff;
            font-size:26px;line-height:1;cursor:pointer;display:none;align-items:center;
            justify-content:center;-webkit-tap-highlight-color:transparent}
#palco .nav.ant{left:8px} #palco .nav.prox{right:8px}
#palco .nav:disabled{opacity:.25}
#palco .telacheia{position:absolute;right:12px;bottom:10px;z-index:6;border:0;border-radius:8px;
                  background:#0009;color:#fff;font-size:17px;padding:9px 12px;cursor:pointer;
                  display:none;-webkit-tap-highlight-color:transparent}
#palco .conta{position:absolute;left:12px;bottom:10px;z-index:6;background:#0009;color:#cfd6e4;
              border-radius:8px;padding:6px 11px;font:12px ui-monospace,monospace;display:none}
/* em tela cheia e no toque os controles aparecem; no desktop com mouse o teclado dá conta */
#palco:fullscreen .nav, #palco:fullscreen .telacheia, #palco:fullscreen .conta{display:flex}
#palco:fullscreen{height:100% !important;width:100%}
#palco:fullscreen video{max-height:100%}
body.toque #palco .nav, body.toque #palco .telacheia, body.toque #palco .conta{display:flex}
body.toque .ajuda, body.toque .lajuda, body.toque .divisor{display:none}

@media (max-width:820px){
  .duas{grid-template-columns:1fr;--esq:100% !important}
  .esq{position:static}                    /* o sticky prendia o palco e comia a tela */
  .dir{padding:0 0 90px}
  .divisor{display:none}
  .barra{flex-wrap:wrap;gap:6px;padding:7px 10px}
  .barra .sub{font-size:11px}
  .tiras{padding:6px}
  .tira{width:62px;height:34px}
  .passo .corpo{padding:10px}
  .soma .lin{grid-template-columns:76px 1fr}
  .dia{grid-template-columns:32px 1fr 46px;row-gap:2px}
  #etiqueta{font-size:16px;padding:4px 10px}
  /* alvos de toque: o Chrome exige 44px para não pedir zoom, e os campos com fonte < 16px
     fazem o iOS dar zoom sozinho ao focar */
  input.c,textarea.c,select{font-size:16px}
  .mo{padding:6px 11px;font-size:13px}
  button{min-height:38px}
}