/* GERADO por tools/design_tokens — NÃO EDITAR À MÃO. */
:root {
  --pv-spacing-xxs: 2px;
  --pv-spacing-xs: 4px;
  --pv-spacing-sm: 8px;
  --pv-spacing-md: 12px;
  --pv-spacing-lg: 16px;
  --pv-spacing-xl: 24px;
  --pv-spacing-xxl: 32px;
  --pv-spacing-xxxl: 48px;
  --pv-radius-sm: 8px;
  --pv-radius-md: 12px;
  --pv-radius-lg: 20px;
  --pv-radius-pill: 999px;
  --pv-touch-target-min: 48px;
  --pv-typography-reading-size-default: 20;
  --pv-typography-reading-size-min: 14;
  --pv-typography-reading-size-max: 40;
  --pv-typography-line-height-min: 1.6;
  --pv-typography-line-height-default: 1.7;
  --pv-typography-line-height-max: 1.8;
  --pv-typography-max-line-length-chars: 65;
  --pv-motion-short-ms: 150ms;
  --pv-motion-medium-ms: 200ms;
  --pv-breakpoints-medium: 600px;
  --pv-breakpoints-expanded: 840px;
  --pv-highlight-yellow: #F2C200;
  --pv-highlight-green: #4CAF50;
  --pv-highlight-blue: #3D8FE0;
  --pv-highlight-pink: #E0609E;
  --pv-highlight-orange: #EE8A2E;
}

[data-palette="claro"] {
  color-scheme: light;
  --pv-color-background: #FFF8F2;
  --pv-color-text: #2B211C;
  --pv-color-accent: #8A4B25;
}

[data-palette="papel"] {
  color-scheme: light;
  --pv-color-background: #F4ECD8;
  --pv-color-text: #3B2F20;
  --pv-color-accent: #8A5A2B;
}

[data-palette="suave"] {
  color-scheme: light;
  --pv-color-background: #E8E6DF;
  --pv-color-text: #2A2A2A;
  --pv-color-accent: #5B6B3A;
}

[data-palette="verde-salvia"] {
  color-scheme: light;
  --pv-color-background: #E6EEDD;
  --pv-color-text: #1F2A1B;
  --pv-color-accent: #4F6B2F;
}

[data-palette="azul-nevoa"] {
  color-scheme: light;
  --pv-color-background: #E4ECF4;
  --pv-color-text: #1B2430;
  --pv-color-accent: #2F5C8A;
}

[data-palette="escuro"] {
  color-scheme: dark;
  --pv-color-background: #1B1714;
  --pv-color-text: #EDE3D8;
  --pv-color-accent: #E0A06A;
}

[data-palette="preto"] {
  color-scheme: dark;
  --pv-color-background: #000000;
  --pv-color-text: #E6E0D8;
  --pv-color-accent: #E0A06A;
}

[data-palette="alto-contraste"] {
  color-scheme: light;
  --pv-color-background: #FFFFFF;
  --pv-color-text: #000000;
  --pv-color-accent: #7A1F00;
}

/* Estilo do site. As cores vêm de tokens.css (gerado dos design tokens,
   o mesmo arquivo de onde sai o tema do app), concatenado antes deste. */

:root {
  --tamanho-leitura: 20px;
  --fundo: var(--pv-color-background);
  --texto: var(--pv-color-text);
  --destaque: var(--pv-color-accent);
  --suave: color-mix(in srgb, var(--texto) 62%, var(--fundo));
  --linha: color-mix(in srgb, var(--texto) 14%, var(--fundo));
  --cartao: color-mix(in srgb, var(--texto) 5%, var(--fundo));
  --serifa: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --sem-serifa: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sem-serifa);
  font-size: 17px;
  line-height: 1.5;
}

a { color: var(--destaque); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible { outline: 3px solid var(--destaque); outline-offset: 2px; }

.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.pular { position: absolute; left: -999px; }
.pular:focus { left: 16px; top: 8px; z-index: 10; background: var(--fundo); padding: 8px; }

/* Cabeçalho */
.topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 5; background: var(--fundo);
}
.marca { display: flex; flex-direction: column; text-decoration: none; color: var(--texto); line-height: 1.1; }
.marca-titulo { font-family: var(--serifa); font-weight: 700; font-size: 22px; }
.marca-sub { font-size: 13px; color: var(--suave); }
.menu { display: flex; align-items: center; gap: 4px; }
.menu a, .botao-ajustes {
  min-height: var(--pv-touch-target-min); min-width: var(--pv-touch-target-min);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px; border-radius: var(--pv-radius-pill);
  color: var(--texto); text-decoration: none; font-weight: 600;
}
.menu a:hover { background: var(--cartao); }
.botao-ajustes {
  border: 1px solid var(--linha); background: transparent; cursor: pointer;
  font-family: var(--serifa); font-size: 18px;
}

main { max-width: 46rem; margin: 0 auto; padding: 16px 16px 96px; }

h1 { font-family: var(--serifa); font-size: 30px; line-height: 1.2; margin: 16px 0 8px; }
h1 .sub { display: block; font-size: 20px; font-weight: 400; color: var(--suave); }
h2 { font-family: var(--serifa); font-size: 22px; margin: 28px 0 8px; }

.trilha { font-size: 15px; color: var(--suave); margin-top: 8px; }

/* Botões e formulários */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--pv-touch-target-min); padding: 0 20px;
  border-radius: var(--pv-radius-pill); border: 1px solid var(--destaque);
  background: var(--destaque); color: var(--fundo);
  font: 600 16px var(--sem-serifa); text-decoration: none; cursor: pointer;
}
.botao.secundario { background: transparent; color: var(--destaque); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }

.ir { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.ir input, .ir select {
  flex: 1 1 14rem; min-height: var(--pv-touch-target-min);
  padding: 0 14px; border-radius: var(--pv-radius-md);
  border: 1px solid var(--linha); background: var(--fundo); color: var(--texto);
  font: 17px var(--sem-serifa);
}
.ir select { flex: 0 1 auto; }

.cartao {
  background: var(--cartao); border-radius: var(--pv-radius-lg);
  padding: 4px 20px 16px; margin: 20px 0;
}
.cartao .citacao { font-family: var(--serifa); font-size: var(--tamanho-leitura); line-height: 1.6; }
.cartao .referencia { font-weight: 700; }

/* Listas de livros e capítulos */
.livros { list-style: none; padding: 0; columns: 2 11rem; column-gap: 16px; }
.livros li { break-inside: avoid; }
.livros a { display: block; padding: 10px 4px; text-decoration: none; border-bottom: 1px solid var(--linha); }
.capitulos-grade {
  list-style: none; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
}
.capitulos-grade a {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; border-radius: var(--pv-radius-md);
  background: var(--cartao); text-decoration: none; font-weight: 600;
}
.lista-simples { padding-left: 20px; }
.lista-simples li { margin: 10px 0; }

/* Leitura */
.edicao-atual { color: var(--suave); font-size: 14px; margin: 0 0 8px; }
.texto {
  font-family: var(--serifa); font-size: var(--tamanho-leitura);
  line-height: var(--pv-typography-line-height-default);
  max-width: 65ch;
}
.v { margin: 0 0 0.45em; border-radius: 6px; cursor: pointer; }
.v .n {
  font-family: var(--sem-serifa); font-size: 0.62em; font-weight: 700;
  vertical-align: super; color: var(--destaque); text-decoration: none;
}
.v.selecionado { background: color-mix(in srgb, var(--pv-highlight-yellow) 32%, var(--fundo)); }
.v.alvo { background: color-mix(in srgb, var(--destaque) 14%, var(--fundo)); }

.navegacao {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin: 32px 0; font-weight: 600;
}
.navegacao a { min-height: var(--pv-touch-target-min); display: inline-flex; align-items: center; }

.barra-selecao {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  background: var(--fundo); border: 1px solid var(--linha);
  border-radius: var(--pv-radius-lg); padding: 8px 12px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.18); max-width: calc(100% - 32px);
}
.barra-selecao[hidden] { display: none; }
#selecao-ref { font-weight: 700; margin-right: 4px; }

/* Busca */
.resultado { margin: 0 0 16px; }
.resultado .citacao { font-family: var(--serifa); font-size: 18px; margin: 4px 0 0; }
.resultado mark { background: color-mix(in srgb, var(--pv-highlight-yellow) 45%, var(--fundo)); color: inherit; }
.contagem { color: var(--suave); }

/* Painel de ajustes */
.painel {
  border: none; border-radius: var(--pv-radius-lg); padding: 8px 20px 20px;
  background: var(--fundo); color: var(--texto); width: min(28rem, calc(100% - 32px));
}
.painel::backdrop { background: rgb(0 0 0 / 0.35); }
.painel fieldset { border: none; padding: 0; margin: 16px 0; }
.painel legend { font-weight: 700; margin-bottom: 8px; }
.tamanho { display: flex; align-items: center; gap: 16px; }
.tamanho button, .paleta {
  min-height: var(--pv-touch-target-min); min-width: var(--pv-touch-target-min);
  border-radius: var(--pv-radius-md); border: 1px solid var(--linha);
  background: var(--cartao); color: var(--texto); font: 600 16px var(--sem-serifa); cursor: pointer;
}
.paletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 8px; }
.paleta[aria-pressed="true"] { outline: 3px solid var(--destaque); }
.opcao { display: flex; align-items: center; gap: 8px; min-height: var(--pv-touch-target-min); }

/* Textos legais e Sobre */
.legal { line-height: 1.65; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; }
dt { font-weight: 700; }
dd { margin: 0; }

.rodape {
  max-width: 46rem; margin: 0 auto; padding: 24px 16px 40px;
  border-top: 1px solid var(--linha); color: var(--suave); font-size: 15px;
}

/* Logo da empresa no rodapé (link): claro nas paletas claras, escuro em
   Escuro/Preto. */
.autoria { margin-top: 20px; }
.autoria a { display: inline-flex; padding: 6px; margin-left: -6px; border-radius: var(--pv-radius-sm); }
.autoria img { display: block; height: 28px; width: auto; }
.logo-escuro { display: none !important; }
[data-palette="escuro"] .logo-claro,
[data-palette="preto"] .logo-claro { display: none !important; }
[data-palette="escuro"] .logo-escuro,
[data-palette="preto"] .logo-escuro { display: block !important; }

/* Celulares estreitos (≤ 360 px): menu mais compacto, sem rolagem lateral. */
@media (max-width: 360px) {
  .topo { padding: 8px 10px; gap: 6px; }
  .menu { gap: 0; }
  .menu a { padding: 0 7px; font-size: 15px; }
  .marca-titulo { font-size: 20px; }
}

@media (min-width: 840px) {
  h1 { font-size: 36px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}