/* Leitor: só o que o Bootstrap não cobre (palco, livro, cor do volume). */
:root {
  --cor: #4f5d66;
  --cor-esc: color-mix(in srgb, var(--cor) 78%, #000);
  --cor-clara: color-mix(in srgb, var(--cor) 12%, #fff);
  --barra: 58px;
  --bs-focus-ring-color: color-mix(in srgb, var(--cor) 30%, transparent);
}
html, body { height: 100%; overflow: hidden; }
body { -webkit-tap-highlight-color: transparent; }
.flex-basis-0 { flex-basis: 0; }
.min-w-0 { min-width: 0; }

/* Cor do volume aplicada aos componentes do Bootstrap */
.btn-primary {
  --bs-btn-bg: var(--cor); --bs-btn-border-color: var(--cor);
  --bs-btn-hover-bg: var(--cor-esc); --bs-btn-hover-border-color: var(--cor-esc);
  --bs-btn-active-bg: var(--cor-esc); --bs-btn-active-border-color: var(--cor-esc);
  --bs-btn-disabled-bg: var(--cor); --bs-btn-disabled-border-color: var(--cor);
}
.btn-outline-primary {
  --bs-btn-color: var(--cor); --bs-btn-border-color: var(--cor);
  --bs-btn-hover-bg: var(--cor); --bs-btn-hover-border-color: var(--cor);
  --bs-btn-active-bg: var(--cor); --bs-btn-active-border-color: var(--cor);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--cor); --bs-nav-link-color: #495057; --bs-nav-link-hover-color: var(--cor); }
.list-group { --bs-list-group-active-bg: var(--cor-clara); --bs-list-group-active-border-color: var(--cor-clara); --bs-list-group-active-color: var(--bs-body-color); }
.form-control:focus { border-color: var(--cor); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.btn:focus-visible, .list-group-item-action:focus-visible, .nav-link:focus-visible { box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.badge-volume { background: var(--cor-clara); color: var(--cor-esc); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; }

/* Barra */
.barra { height: var(--barra); padding-top: 0; padding-bottom: 0; }
.titulo { font-size: .95rem; font-weight: 600; }
.btn-icone { --bs-btn-padding-x: .5rem; --bs-btn-padding-y: .35rem; --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-color: var(--cor); --bs-btn-active-bg: var(--cor); --bs-btn-active-color: #fff;
  color: #3a4044; font-size: 1.15rem; line-height: 1; }
.btn-icone.active, .btn-icone[aria-expanded="true"]:not([data-bs-toggle]) { background: var(--cor); color: #fff; }
.paginador { width: auto; flex-wrap: nowrap; }
.paginador .btn { --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--cor-clara); --bs-btn-hover-color: var(--cor); --bs-btn-hover-border-color: var(--bs-border-color); }
.campo-pagina { width: 5.5rem !important; flex: 0 0 auto !important; font-variant-numeric: tabular-nums; }

/* Painel */
.painel.offcanvas-start { top: var(--barra); width: min(380px, 100vw); }
.painel .nav-link { font-size: .78rem; line-height: 1.2; }
.painel .nav-link i { font-size: 1.05rem; }
.lista-sumario .list-group-item { font-size: .9rem; line-height: 1.35; display: flex; justify-content: space-between; gap: .75rem; }
.lista-sumario .eixo { font-weight: 700; color: var(--cor-esc); margin-top: .25rem; }
.lista-sumario .secao { font-style: italic; }
.lista-sumario .capitulo { padding-left: 1.75rem; }
.lista-sumario .num { flex: 0 0 auto; }
.lista-sumario .active { border-left: 3px solid var(--cor); }
.grade-miniaturas a { text-decoration: none; color: var(--bs-secondary-color); font-size: .75rem; }
.grade-miniaturas .img-thumbnail { aspect-ratio: 453.5 / 652; width: 100%; object-fit: cover; padding: 2px; }
.grade-miniaturas a:hover .img-thumbnail { border-color: var(--cor); }
.grade-miniaturas a[aria-current="true"] .img-thumbnail { border: 2px solid var(--cor); }
.grade-miniaturas a[aria-current="true"] { color: var(--cor-esc); font-weight: 600; }
.resultados .list-group-item { font-size: .88rem; }
.resultados mark { background: color-mix(in srgb, var(--cor) 25%, #fff); padding: 0 1px; border-radius: 2px; }
.nota { background: #fffdf4; }
.nota p { white-space: pre-wrap; }

/* Palco e livro */
.palco { position: fixed; inset: var(--barra) 0 0 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 45%, #fbfaf8 0%, #e9e6e1 60%, #d6d2cb 100%); }
.area-livro { position: absolute; inset: 22px 84px 26px 84px; display: flex; align-items: center; justify-content: center; }
.moldura { flex: 0 0 auto; }
.livro { width: 100%; }
.pagina { background: #fff; overflow: hidden; }
.stf__item.--simple { box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.folha { position: relative; width: 100%; height: 100%; background: #fff; }
.folha img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.folha.branca { background: #f7f6f3; }
.folha::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.pagina.--left .folha::after { background: linear-gradient(to left, rgba(0,0,0,.16) 0, rgba(0,0,0,.05) 3%, transparent 9%); }
.pagina.--right .folha::after { background: linear-gradient(to right, rgba(0,0,0,.16) 0, rgba(0,0,0,.05) 3%, transparent 9%); }
.pagina.--hard .folha::after { background: none; }
.link-pagina { position: absolute; z-index: 2; border-radius: 2px; }
.link-pagina:not(.em-partes):hover,
.link-pagina.em-partes:hover .parte { background: color-mix(in srgb, var(--cor) 14%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cor) 40%, transparent); }
.link-pagina:not(.em-partes) { margin: -2px -4px; padding: 2px 4px; box-sizing: content-box; }
.link-pagina.em-partes { pointer-events: none; }
.link-pagina .parte { position: absolute; pointer-events: auto; border-radius: 2px; cursor: pointer; }
.link-pagina:focus-visible { outline: 2px solid var(--cor); outline-offset: 1px; }

.seta { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #4a5054;
  --bs-btn-bg: rgba(255,255,255,.85); --bs-btn-border-color: transparent; --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--cor); }
.seta:disabled { opacity: 0 !important; pointer-events: none; }
.seta-esq { left: 18px; }
.seta-dir { right: 18px; }

/* Ampliação */
.zoom-topo { display: grid; grid-template-columns: 1fr auto 1fr; }
.zoom-navegacao { justify-self: start; min-width: 0; }
.zoom-navegacao .bt-redondo { flex: 0 0 auto; }
.zoom-titulo { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; }
.zoom-topo .btn-close { justify-self: end; }
.controles-zoom { background: rgba(255,255,255,.08); border-radius: 999px; padding: 4px 6px 4px 6px; }
.bt-redondo { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.zoom-nivel { width: 220px; --bs-form-range-thumb-bg: #fff; --bs-form-range-thumb-active-bg: #e9ecef;
  --bs-form-range-track-bg: rgba(255,255,255,.3); --bs-form-range-thumb-focus-box-shadow: 0 0 0 1px #2f3336, 0 0 0 .25rem rgba(255,255,255,.4); }
.zoom-nivel::-webkit-slider-thumb { background-color: #fff; box-shadow: 0 0 0 3px var(--cor); }
.zoom-nivel::-moz-range-thumb { background-color: #fff; box-shadow: 0 0 0 3px var(--cor); }
.zoom-nivel::-webkit-slider-runnable-track { background-color: rgba(255,255,255,.3); }
.zoom-nivel::-moz-range-track { background-color: rgba(255,255,255,.3); }
.zoom-percentual { min-width: 3.2em; text-align: right; }
.zoom-rolagem { display: flex; overflow: auto; cursor: grab; background: #2f3336; overscroll-behavior: contain; }
.zoom-rolagem.arrastando { cursor: grabbing; }
.zoom-conteudo { display: flex; margin: auto; padding: 24px; --alt: 700px; }
.zoom-conteudo img { display: block; height: var(--alt); width: auto; max-width: none; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.45); user-select: none; -webkit-user-drag: none; }

/* Página carregando */
.folha .carregando { position: absolute; top: 50%; left: 50%; margin: -1rem 0 0 -1rem; opacity: .35; }
.folha.pronta .carregando { display: none; }

/* Telas estreitas */
@media (max-width: 767.98px) {
  .area-livro { inset: 10px 6px 12px 6px; }
  .seta { width: 40px; height: 40px; font-size: 1.2rem; }
  .seta-esq { left: 4px; } .seta-dir { right: 4px; }
  #bt-primeira, #bt-ultima { display: none; }
  /* No celular o controle de ampliação vai para uma barra no pé da tela (alcance do polegar),
     sem cobrir a página: a área de rolagem encolhe para dar lugar a ela. */
  .zoom-topo { display: flex; }
  .zoom-topo .btn-close { margin-left: auto !important; }
  .controles-zoom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; border-radius: 0; justify-content: center;
    background: #212529; border-top: 1px solid rgba(255,255,255,.15); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  .zoom-nivel { width: auto; flex: 1 1 auto; max-width: 260px; }
  .zoom-rolagem { margin-bottom: calc(50px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .offcanvas, .modal.fade .modal-dialog, .toast { transition: none !important; } }