/* ============================================================
   LêPraMim — estilo.css
   Visual inspirado em leitores digitais (Kindle, Kobo) e players
   de audiobook (Audible). Cores principais: azul, branco e cinza
   escuro, com o laranja do logotipo como destaque da leitura.
   Fontes do próprio sistema: nada é baixado da internet.
   ============================================================ */

/* ---------- Tema claro (padrão) ---------- */
:root {
  --azul: #2563EB;
  --azul-forte: #1D4ED8;
  --azul-suave: #E6EEFE;
  --laranja: #F97316;
  --laranja-suave: #FFE9D6;
  --marinho: #1B2A5E;
  --roxo: #7C4DC4;

  --fundo: #EEF1F6;
  --superficie: #FFFFFF;
  --superficie-2: #F6F8FB;
  --tinta: #1F2733;
  --tinta-suave: #5A6474;
  --linha: #D9DFE8;
  --papel: #FFFFFF;
  --tinta-papel: #20242B;
  --sombra: 0 1px 2px rgba(27, 42, 94, .08), 0 6px 20px rgba(27, 42, 94, .07);
  --perigo: #C62828;

  --fonte-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fonte-leitura: "Literata", "Bookerly", "Charter", "Bitstream Charter", "Cambria", "Georgia", serif;
  --tamanho-leitura: 19px;
  --raio: 10px;
  --altura-topo: 60px;
  --altura-barra: 76px;
  --largura-lateral: 316px;
}

/* ---------- Tema escuro ---------- */
:root[data-tema="escuro"] {
  --azul: #6C9CFF;
  --azul-forte: #8DB2FF;
  --azul-suave: #1E2B49;
  --laranja: #FB8B3C;
  --laranja-suave: #4A2E18;
  --marinho: #E8ECF6;
  --fundo: #15181D;
  --superficie: #1D2128;
  --superficie-2: #232831;
  --tinta: #E6E9EF;
  --tinta-suave: #9AA4B4;
  --linha: #313846;
  --papel: #1A1D23;
  --tinta-papel: #D9DCE3;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --perigo: #FF8A80;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  font: 15px/1.45 var(--fonte-ui);
  color: var(--tinta);
  background: var(--fundo);
  overflow: hidden;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 6px; }

.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Botões ---------- */
.bt {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--linha); border-radius: 8px;
  background: var(--superficie); color: var(--tinta);
  font-weight: 600; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.bt:hover { border-color: var(--azul); }
.bt.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
:root[data-tema="escuro"] .bt.primario { color: #0E1524; }
.bt.primario:hover { background: var(--azul-forte); border-color: var(--azul-forte); }
.bt.fantasma { border-color: transparent; background: transparent; font-weight: 500; }
.bt.fantasma:hover, .bt.fantasma.ativo { background: var(--azul-suave); color: var(--azul-forte); }
.bt.pequeno { height: 32px; padding: 0 10px; font-size: 13.5px; font-weight: 500; }
.bt.pequeno .ic { width: 17px; height: 17px; }
.bt.grande { height: 46px; padding: 0 22px; font-size: 16px; }
.bt.perigo { color: var(--perigo); }
.bt.ligado { background: var(--azul-suave); border-color: var(--azul); color: var(--azul-forte); }
.bt:disabled, .bt-icone:disabled { opacity: .45; cursor: not-allowed; }

.bt-icone {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--tinta);
}
.bt-icone:hover { background: var(--azul-suave); color: var(--azul-forte); }
.bt-icone.texto { font-weight: 700; font-size: 14px; }

/* ---------- Barra superior ---------- */
.topo {
  flex: none; height: var(--altura-topo);
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  z-index: 5;
}
.marca {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 2px; margin-right: 6px;
  border: 0; background: none; border-radius: 10px;
}
.marca img { display: block; }
.marca-nome { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.marca-le { color: var(--laranja); }
.marca-pm { color: var(--marinho); }
.topo-acoes { display: flex; align-items: center; gap: 4px; min-width: 0; }
.busca {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  height: 38px; width: min(260px, 26vw); padding: 0 12px;
  border: 1px solid var(--linha); border-radius: 19px;
  background: var(--superficie-2); color: var(--tinta-suave);
}
.busca:focus-within { border-color: var(--azul); }
.busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--tinta); }

/* ---------- Estrutura ---------- */
.corpo { flex: 1; min-height: 0; display: flex; position: relative; }
.lateral {
  flex: none; width: var(--largura-lateral);
  display: flex; flex-direction: column;
  background: var(--superficie);
  border-right: 1px solid var(--linha);
}
.central { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.visao { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- Painel lateral ---------- */
.abas { flex: none; display: flex; padding: 8px 8px 0; gap: 2px; border-bottom: 1px solid var(--linha); }
.abas button {
  flex: 1; padding: 9px 2px 10px; border: 0; background: none;
  font-size: 13px; font-weight: 600; color: var(--tinta-suave); white-space: nowrap;
  border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0;
}
.abas button:hover { color: var(--tinta); }
.abas button.ativa { color: var(--azul-forte); border-bottom-color: var(--azul); }
.aba-painel { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.lista-vazia { padding: 22px 14px; color: var(--tinta-suave); font-size: 14px; }

.item {
  display: flex; align-items: flex-start; gap: 8px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; text-align: left; line-height: 1.35;
}
.item:hover { background: var(--superficie-2); }
.item.atual { background: var(--azul-suave); color: var(--azul-forte); font-weight: 600; }
.item-corpo { flex: 1; min-width: 0; }
.item-titulo { display: block; overflow-wrap: anywhere; }
.item-sub { display: block; font-size: 12.5px; color: var(--tinta-suave); font-weight: 400; margin-top: 2px; }
.item-pag { flex: none; font-size: 12.5px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; padding-top: 1px; }
.item .bt-icone { width: 28px; height: 28px; flex: none; color: var(--tinta-suave); }
.item .bt-icone .ic { width: 16px; height: 16px; }
.item mark { background: var(--laranja-suave); color: inherit; border-radius: 3px; padding: 0 1px; }
.painel-cab { padding: 6px 10px 10px; font-size: 13px; color: var(--tinta-suave); }

/* ---------- Biblioteca ---------- */
#visaoBiblioteca { overflow-y: auto; padding: 26px 30px 40px; display: block; }
.estante-topo { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.estante-topo h1 { font-size: 26px; letter-spacing: -.02em; color: var(--marinho); }
.estante-topo input {
  margin-left: auto; height: 38px; width: min(300px, 40vw); padding: 0 12px;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie);
}
.estante { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 22px; }

.livro { position: relative; display: flex; flex-direction: column; min-width: 0; }
.livro-abrir { border: 0; padding: 0; background: none; text-align: left; display: flex; flex-direction: column; min-width: 0; }
.livro-capa {
  position: relative; aspect-ratio: 2 / 3; width: 100%;
  border-radius: 4px 10px 10px 4px; overflow: hidden;
  background: var(--superficie-2);
  box-shadow: var(--sombra);
  transition: transform .18s;
}
.livro-abrir:hover .livro-capa { transform: translateY(-3px); }
.livro-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.livro-capa::before { /* lombada */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,0));
}
.capa-gerada {
  height: 100%; display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px 14px 14px 18px; color: #fff;
}
.capa-gerada .emoji { font-size: 34px; line-height: 1; }
.capa-gerada .t { font: 700 15px/1.25 var(--fonte-leitura); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.livro-formato {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  padding: 2px 7px; border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  background: rgba(20, 24, 32, .78); color: #fff;
}
.livro-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(20,24,32,.35); z-index: 2; }
.livro-barra i { display: block; height: 100%; background: var(--laranja); }
.livro-nome { margin-top: 10px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.livro-autor { font-size: 13px; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.livro-info { margin-top: 3px; font-size: 12.5px; color: var(--tinta-suave); }
.livro-mais { position: absolute; right: 2px; bottom: 0; width: 30px; height: 30px; color: var(--tinta-suave); }

.vazio { max-width: 560px; margin: 4vh auto 0; text-align: center; }
.vazio-logo { width: min(360px, 78%); height: auto; border-radius: 18px; background: #fff; padding: 14px 18px; box-shadow: var(--sombra); }
.vazio-texto { margin: 26px 0 20px; font-size: 17px; color: var(--tinta); }
.vazio-formatos { margin-top: 18px; font-size: 13px; color: var(--tinta-suave); }

/* ---------- Leitor ---------- */
.leitor-cab {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; min-height: 50px;
  background: var(--superficie); border-bottom: 1px solid var(--linha);
}
.leitor-titulos { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.leitor-titulos strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leitor-titulos span { font-size: 13px; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leitor-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rolagem { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 20px 60px; scroll-behavior: smooth; outline: 0; }

.pagina {
  max-width: 44em; margin: 0 auto; padding: 46px 56px 56px;
  background: var(--papel); color: var(--tinta-papel);
  border-radius: 6px; box-shadow: var(--sombra);
  font: var(--tamanho-leitura)/1.72 var(--fonte-leitura);
  min-height: 60vh;
  hyphens: auto; overflow-wrap: break-word;
}
.pagina p { margin: 0 0 .95em; text-align: left; padding-left: 12px; margin-left: -15px; border-left: 3px solid transparent; }
.pagina h2, .pagina h3 { font-family: var(--fonte-leitura); line-height: 1.25; margin: 1.1em 0 .7em; color: var(--marinho); padding-left: 12px; margin-left: -15px; border-left: 3px solid transparent; }
.pagina h2 { font-size: 1.5em; letter-spacing: -.01em; }
.pagina h3 { font-size: 1.18em; }
.pagina > :first-child { margin-top: 0; }
.frase { border-radius: 4px; cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.frase:hover { background: var(--superficie-2); }
.pagina-vazia { color: var(--tinta-suave); font: 15px/1.5 var(--fonte-ui); text-align: center; padding: 18vh 0; }

/* Modo karaokê: cada nível pode ser ligado/desligado nas Configurações */
.k-paragrafo .pagina .ativo { border-left-color: var(--azul); }
.k-frase .frase.ativa { background: var(--azul-suave); }
.k-palavra .frase mark { background: var(--laranja); color: #1A1206; border-radius: 4px; padding: 0 2px; margin: 0 -2px; }
.frase mark { background: none; color: inherit; }
.frase.cursor { box-shadow: inset 0 -2px 0 var(--laranja); }
.frase.achado { background: var(--laranja-suave); }

.original { text-align: center; }
.original canvas { max-width: 100%; height: auto; border-radius: 4px; box-shadow: var(--sombra); background: #fff; }

/* ---------- Player de audiobook ---------- */
#visaoAudio { overflow-y: auto; }
.audio-palco { margin: auto; padding: 36px 30px; display: flex; gap: 44px; align-items: center; max-width: 980px; width: 100%; }
.audio-capa {
  flex: none; width: min(320px, 34vw); aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  background: linear-gradient(145deg, var(--roxo), var(--azul)); box-shadow: var(--sombra);
  display: grid; place-items: center; color: #fff; font-size: 92px;
}
.audio-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.audio-ficha { flex: 1; min-width: 0; }
.audio-ficha h1 { font: 700 30px/1.2 var(--fonte-leitura); letter-spacing: -.01em; color: var(--marinho); overflow-wrap: anywhere; }
.audio-autor { margin-top: 8px; font-size: 17px; }
.audio-detalhes { margin-top: 4px; color: var(--tinta-suave); font-size: 14px; }
.audio-capitulo { margin-top: 22px; min-height: 1.4em; font-weight: 600; color: var(--azul-forte); }
.audio-linha { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--tinta-suave); }
.audio-linha input { flex: 1; min-width: 0; }
.audio-extra { margin-top: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.audio-ouvido { font-size: 13px; color: var(--tinta-suave); }

/* ---------- Barra inferior ---------- */
.barra {
  flex: none; position: relative; min-height: var(--altura-barra);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--superficie); border-top: 1px solid var(--linha);
  z-index: 4;
}
.barra-progresso { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--linha); }
.barra-progresso div { height: 100%; width: 0; background: var(--laranja); transition: width .3s; }
.controles { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.grupo { display: flex; align-items: center; gap: 6px; }
.grupo.fim { margin-left: auto; }
.grupo > .ic { color: var(--tinta-suave); }
.barra select, .campo-pagina input {
  height: 36px; padding: 0 8px; border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie);
}
.campo-pagina { font-size: 14px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.campo-pagina input { width: 68px; text-align: center; color: var(--tinta); }
.deslizante input { width: 120px; }
.deslizante output { width: 40px; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
input[type="range"] { accent-color: var(--azul); height: 22px; }

/* Botão principal de leitura, com as "ondas de som" do logotipo */
.bt-tocar {
  position: relative; width: 52px; height: 52px; margin: 0 6px; padding: 0;
  display: inline-grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--azul); color: #fff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .35);
}
:root[data-tema="escuro"] .bt-tocar { color: #0E1524; }
.bt-tocar:hover { background: var(--azul-forte); }
.bt-tocar .ic { width: 26px; height: 26px; }
.ondas { position: absolute; left: 100%; top: 50%; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .2s; }
.ondas i {
  position: absolute; top: 50%; left: 0; border: 2.5px solid transparent; border-right-color: var(--laranja);
  border-radius: 50%; transform: translate(-50%, -50%);
}
.ondas i:nth-child(1) { width: 14px; height: 14px; margin-left: -1px; }
.ondas i:nth-child(2) { width: 26px; height: 26px; margin-left: -2px; opacity: .7; }
.ondas i:nth-child(3) { width: 38px; height: 38px; margin-left: -3px; opacity: .4; }
.tocando .ondas { opacity: 1; }
.tocando .ondas i { animation: onda 1.4s ease-in-out infinite; }
.tocando .ondas i:nth-child(2) { animation-delay: .18s; }
.tocando .ondas i:nth-child(3) { animation-delay: .36s; }
@keyframes onda { 0%, 100% { border-right-color: transparent; } 40% { border-right-color: var(--laranja); } }

/* ---------- Modais ---------- */
.modal-fundo {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 20px;
  background: rgba(15, 20, 35, .55);
}
.modal {
  width: min(560px, 100%); max-height: min(86vh, 900px);
  display: flex; flex-direction: column;
  background: var(--superficie); color: var(--tinta);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.modal.largo { width: min(820px, 100%); }
.modal-cab { flex: none; display: flex; align-items: center; gap: 10px; padding: 18px 20px 12px 24px; }
.modal-cab h2 { flex: 1; font-size: 20px; letter-spacing: -.01em; color: var(--marinho); }
.modal-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 24px 20px; }
.modal-corpo p { margin-bottom: 12px; }
.modal-rodape { flex: none; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 24px 20px; border-top: 1px solid var(--linha); }

.progresso { height: 8px; border-radius: 4px; background: var(--linha); overflow: hidden; margin: 14px 0 8px; }
.progresso div { height: 100%; width: 0; background: var(--azul); transition: width .2s; }
.progresso-texto { font-size: 14px; color: var(--tinta-suave); min-height: 1.4em; }

/* Formulários (configurações, gerar audiobook) */
.secao { padding: 16px 0; border-top: 1px solid var(--linha); }
.secao:first-child { border-top: 0; padding-top: 4px; }
.secao h3 { font-size: 15px; margin-bottom: 12px; color: var(--marinho); }
.campo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.campo > label, .campo > .rot { flex: none; width: 150px; font-size: 14px; color: var(--tinta-suave); }
.campo select, .campo input[type="number"], .campo input[type="text"] {
  flex: 1; min-width: 0; height: 38px; padding: 0 10px;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie);
}
.campo input[type="range"] { flex: 1; min-width: 0; }
.campo output { width: 46px; text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
.marcar { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; font-size: 14.5px; cursor: pointer; }
.marcar input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--azul); flex: none; }
.marcar small { display: block; color: var(--tinta-suave); font-size: 13px; }
.colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; }
.nota { font-size: 13.5px; color: var(--tinta-suave); line-height: 1.5; }
.nota.destaque { padding: 10px 12px; border-radius: 8px; background: var(--laranja-suave); color: var(--tinta); }
.segmentos { display: inline-flex; border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; }
.segmentos button { height: 36px; padding: 0 14px; border: 0; background: var(--superficie); border-right: 1px solid var(--linha); font-weight: 500; }
.segmentos button:last-child { border-right: 0; }
.segmentos button.ativo { background: var(--azul); color: #fff; }
:root[data-tema="escuro"] .segmentos button.ativo { color: #0E1524; }
.estado-lib { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; }
.estado-lib b { width: 120px; }
.selo { padding: 2px 9px; border-radius: 20px; font-size: 12.5px; font-weight: 600; }
.selo.ok { background: #DDF3E4; color: #17603A; }
.selo.falta { background: var(--laranja-suave); color: #9A4A08; }
:root[data-tema="escuro"] .selo.ok { background: #173A28; color: #8FE0B0; }
:root[data-tema="escuro"] .selo.falta { color: #FFC08A; }

/* Estatísticas */
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.numero { padding: 14px 16px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--linha); }
.numero b { display: block; font-size: 26px; line-height: 1.15; color: var(--marinho); font-variant-numeric: tabular-nums; }
.numero span { font-size: 13px; color: var(--tinta-suave); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-weight: 600; color: var(--tinta-suave); font-size: 13px; padding: 6px 8px; border-bottom: 1px solid var(--linha); }
.tabela td { padding: 8px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela td:last-child, .tabela th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Ajuda e créditos */
.tutorial ol { margin: 0 0 6px; padding-left: 22px; }
.tutorial li { margin-bottom: 9px; line-height: 1.5; }
.tutorial h3 { font-size: 15px; margin: 18px 0 8px; color: var(--marinho); }
.tutorial kbd { padding: 1px 6px; border: 1px solid var(--linha); border-bottom-width: 2px; border-radius: 5px; background: var(--superficie-2); font: 600 12.5px var(--fonte-ui); }
.creditos { text-align: center; padding-bottom: 6px; }
.creditos img { width: min(300px, 80%); height: auto; background: #fff; border-radius: 14px; padding: 10px 14px; }
.creditos .autor { margin-top: 16px; font-size: 17px; font-weight: 700; color: var(--marinho); }
.creditos p { margin-bottom: 6px; }
.menu-lista { display: flex; flex-direction: column; gap: 4px; }
.menu-lista .item { align-items: center; padding: 11px 12px; font-weight: 500; }
.ficha { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14.5px; margin-bottom: 14px; }
.ficha dt { color: var(--tinta-suave); }
.ficha dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Avisos rápidos ---------- */
#avisos { position: fixed; left: 50%; bottom: calc(var(--altura-barra) + 18px); transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.aviso {
  max-width: min(560px, 92vw); padding: 11px 18px; border-radius: 10px;
  background: #1F2733; color: #fff; font-size: 14.5px; box-shadow: var(--sombra);
  animation: surgir .2s ease-out;
}
.aviso.erro { background: #9B1C1C; }
:root[data-tema="escuro"] .aviso { background: #E6E9EF; color: #15181D; }
:root[data-tema="escuro"] .aviso.erro { background: #FFB4AB; color: #410002; }
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Área de soltar arquivos ---------- */
.soltar { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(37, 99, 235, .16); pointer-events: none; }
.soltar div { padding: 26px 34px; border: 3px dashed var(--azul); border-radius: 16px; background: var(--superficie); font-size: 18px; font-weight: 700; color: var(--azul-forte); }

.veu { display: none; position: absolute; inset: 0; z-index: 2; background: rgba(15, 20, 35, .4); }
.so-estreito { display: none; }

/* ---------- Telas menores ---------- */
@media (max-width: 1180px) {
  .topo-acoes .bt.fantasma span { display: none; }
  .topo-acoes .bt.fantasma { padding: 0 9px; }
}
@media (max-width: 900px) {
  .so-estreito { display: inline-grid; }
  .veu { display: block; }
  .lateral { position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; width: min(320px, 86vw); transform: translateX(-102%); transition: transform .2s; box-shadow: var(--sombra); }
  .lateral.aberta { transform: none; }
  .marca-nome { display: none; }
  .pagina { padding: 28px 22px 36px; }
  .pagina p, .pagina h2, .pagina h3 { margin-left: -12px; padding-left: 9px; }
  .rolagem { padding: 14px 10px 40px; }
  #visaoBiblioteca { padding: 18px 16px 30px; }
  .estante { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 20px 14px; }
  .audio-palco { flex-direction: column; gap: 22px; padding: 22px 18px; text-align: center; }
  .audio-capa { width: min(240px, 60vw); }
  .audio-extra { justify-content: center; }
  .leitor-acoes .bt.pequeno span { display: none; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .colunas { grid-template-columns: 1fr; }
  .campo { flex-wrap: wrap; }
  .campo > label, .campo > .rot { width: 100%; }
}
@media (max-width: 600px) {
  /* barra superior em duas linhas: ações em cima, busca embaixo */
  .topo { height: auto; flex-wrap: wrap; padding: 8px 10px; gap: 6px; }
  .topo-acoes { flex: 1; justify-content: flex-end; gap: 0; }
  .topo-acoes .bt.primario span { display: none; }
  .topo-acoes .bt.primario { padding: 0 10px; }
  .marca { margin-right: 0; }
  #btTema { order: 2; }
  .busca { order: 3; width: auto; flex: 1 1 100%; margin-left: 0; }
  .controles { gap: 8px 10px; justify-content: center; }
  .deslizante input { width: 90px; }
  .grupo.fim { margin-left: 0; }
  .barra { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .tocando .ondas i { border-right-color: var(--laranja); }
}
@media print { .topo, .lateral, .barra, .leitor-cab { display: none !important; } body { overflow: visible; } .rolagem { overflow: visible; } }