/* Modo celular (24/10/2026): só texto + vídeo, com o celular deitado (texto 20% à esquerda, vídeo 80% à direita).
   Tudo aqui só vale em celular (tela de toque pequena) ou com body.modo-celular; no computador e no tablet o site fica exatamente como era.
   Lógica em celular.js. */

/* ---- botão de entrada: fica no cabeçalho (que é fixo no alto), só em celular, fora do modo celular ---- */
.celular-entrada-topo { display: none; }
@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  body:not(.modo-celular) .celular-entrada-topo {
    display: flex; flex: 1 1 100%; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box;
    min-height: 44px; margin: 2px 0; padding: 0 14px; border: 0; border-radius: 10px; background: #2f6b4b; color: #fff;
    font: 700 .95rem/1.2 system-ui, "Segoe UI", sans-serif; cursor: pointer;
  }
  body:not(.modo-celular) .celular-entrada-topo small { font: 500 .75rem/1.2 system-ui, "Segoe UI", sans-serif; opacity: .92; display: block; }
  .celular-entrada-topo:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

  /* só o modo celular lê/toca: fora dele não há vídeo nem controles de leitura */
  body:not(.modo-celular) #trilha, body:not(.modo-celular) #barra-video { display: none !important; }

  /* cabeçalho do celular em pé: sem Seções, Mapa mental, A−/A+ nem avisos; logo e título menores */
  body:not(.modo-celular) #barra-voz .faixa-secoes,
  body:not(.modo-celular) #barra-voz .grupo-extras,
  body:not(.modo-celular) #barra-voz #status { display: none !important; }
  body:not(.modo-celular) #barra-voz { --marca-lv-h: 38px; --marca-lv-w: 124px; }
  body:not(.modo-celular) #barra-voz #topo-titulos .topo-material { padding-left: calc(var(--marca-lv-w) + 12px); min-height: calc(var(--marca-lv-h) + 6px); padding-bottom: 4px; }
  body:not(.modo-celular) #barra-voz .topo-material .mat-livro { border-left-width: 4px; padding-left: 10px; }
  body:not(.modo-celular) #barra-voz .topo-material .mat-nome { font-size: 1.02rem; line-height: 1.15; }
  body:not(.modo-celular) #barra-voz .mat-autor { font-size: .72rem; }
  body:not(.modo-celular) #barra-voz .mat-caminho { font-size: .78rem; }
}

/* ---- aviso e botão de sair: só no modo celular ---- */
#aviso-gire, #celular-sair { display: none; }

/* ---- celular em pé no modo celular: aviso para girar ---- */
@media (orientation: portrait) {
  body.modo-celular > *:not(#aviso-gire) { display: none !important; }
  body.modo-celular #aviso-gire {
    position: fixed; inset: 0; z-index: 2147483000; box-sizing: border-box; padding: 0 36px; gap: 26px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    background: #1b2a5e; color: #fff; font-family: system-ui, "Segoe UI", sans-serif;
  }
  body.modo-celular { overflow: hidden; }
}
#aviso-gire svg { color: #f2b01e; }
#aviso-gire h2 { margin: 0; font-size: 1.75rem; line-height: 1.2; font-weight: 800; }
#aviso-gire p { margin: 10px 0 0; font-size: 1rem; line-height: 1.5; color: #e4e7f2; }
#aviso-gire button { min-height: 48px; padding: 0 22px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 10px; background: transparent; color: #fff; font: 600 .95rem system-ui, "Segoe UI", sans-serif; cursor: pointer; }

/* ---- celular deitado no modo celular: 20% texto | 80% vídeo ----
   A altura vem de --alt (altura real visível, medida pelo celular.js), porque no Safari do iPhone 100vh é maior que a tela visível e cortava a barra de baixo. */
@media (orientation: landscape) {
  html:has(body.modo-celular) { --h-barra: 0px; }
  body.modo-celular { display: flex; flex-direction: column; height: 100vh; height: 100dvh; height: var(--alt, 100dvh); overflow: hidden; }
  body.modo-celular #barra-voz, body.modo-celular .nota-ia, body.modo-celular .celular-entrada-topo, body.modo-celular .titulo-topico,
  body.modo-celular .btn-tela-cheia, body.modo-celular #progresso-pct { display: none !important; }
  body.modo-celular #area { flex: 1; min-height: 0; display: grid; grid-template-columns: 20% 80%; }
  body.modo-celular #col-texto { order: 0; overflow: auto; overflow-x: hidden; border-right: 1px solid var(--borda); background: var(--fundo, var(--superficie)); }
  body.modo-celular #texto.conteudo { padding: 10px 8px 60px; font-size: .78rem; line-height: 1.5; max-width: none; margin: 0; }
  body.modo-celular #texto h1, body.modo-celular #texto h2, body.modo-celular #texto h3, body.modo-celular #texto h4 { font-size: .9rem; line-height: 1.3; }
  body.modo-celular #texto img, body.modo-celular #texto figure, body.modo-celular #texto table { max-width: 100%; }
  body.modo-celular .prox-topico { margin: 0 auto 12px; padding: 0 8px 4px; }
  body.modo-celular .prox-topico-btn { padding: 8px 10px; font-size: .8rem; }
  body.modo-celular #col-painel { order: 0; position: static; max-height: none; overflow: hidden; border-left: 0; border-bottom: 0; justify-content: center; }
  html body.modo-celular.modo-video .video-palco { width: min(100%, calc((var(--alt, 100dvh) - var(--h-ctl, 44px) - 4px) * 16 / 9)); }
  html body.modo-celular.modo-video #col-painel:has(.trilha-corpo[data-vista="video"]) .barra-video { width: min(100%, calc((var(--alt, 100dvh) - var(--h-ctl, 44px) - 4px) * 16 / 9)); }
  body.modo-celular .barra-video { position: static; flex-wrap: nowrap; padding: 4px 6px; gap: 6px; }
  body.modo-celular .barra-video button, body.modo-celular .barra-video select { min-height: 40px; }
  body.modo-celular .barra-video .tempo-restante { min-width: 0; }
  html body.modo-celular .barra-video button.primario,
  html body.modo-celular .barra-video button.primario:hover,
  html body.modo-celular .barra-video button.primario:focus,
  html body.modo-celular .barra-video button.primario:active { background: #f4f7f2 !important; color: #0b2a1f !important; border-color: #f4f7f2 !important; opacity: 1; }
  html body.modo-celular .barra-video button.primario:focus-visible { outline: 3px solid #9be15d; outline-offset: 2px; }
  body.modo-celular #celular-sair {
    display: flex; align-items: center; justify-content: center; position: fixed; right: 8px; top: 8px; z-index: 40;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; opacity: .7;
  }
  body.modo-celular #celular-sair:hover, body.modo-celular #celular-sair:focus-visible { opacity: 1; }
}