/* ===== Caderno do Leitor · Entre Páginas =====
   Identidade herdada do App dos Pais (azul petróleo, laranja e turquesa),
   com alvos de toque grandes e texto maior para crianças. */

:root {
  --bg: #f7f6f3;
  --surface: #ffffff;
  --surface-2: #fbfaf8;
  --border: #e3e0d9;
  --divider: #ece9e2;

  --text: #1f2b38;
  --muted: #526270;
  --faint: #9aa5ae;

  --navy: #0d4d63;
  --navy-hover: #0a3d4f;
  --navy-soft: #dbe9ec;
  --orange: #ff5a00;
  --orange-ink: #a83b00;
  --orange-soft: #ffe4d1;
  --turq: #1ba7b5;
  --turq-soft: #d8f0f2;
  --ok: #2f7a3a;
  --ok-soft: #dcecdc;
  --warn: #8a5410;
  --warn-soft: #f6e8d2;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs: 1.125rem;          /* 18px: texto base para crianças */
  --fs-sm: 0.9375rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-hero: 2.125rem;

  --r-sm: 0.75rem;
  --r: 1.125rem;
  --r-lg: 1.5rem;
  --shadow: 0 1px 2px rgba(13, 77, 99, 0.06), 0 6px 18px rgba(13, 77, 99, 0.07);
  --tap: 3.5rem;           /* 56px */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body.grande { --fs: 1.3125rem; --fs-sm: 1.0625rem; --fs-lg: 1.5625rem; --fs-xl: 1.9375rem; --fs-hero: 2.375rem; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/watercolor-bg.svg") center top / cover no-repeat;
  opacity: 0.55;
}
.app {
  position: relative; z-index: 1;
  max-width: 34rem; margin: 0 auto;
  padding: 0 1rem calc(2rem + env(safe-area-inset-bottom));
  min-height: 100vh; min-height: 100dvh;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--navy); line-height: 1.2; margin: 0; font-weight: 700; }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--turq); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.5rem; }
.row { display: flex; gap: 0.75rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

/* ----- topo ----- */
.topo { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 0 0.5rem; }
.topo .titulo { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 600; color: var(--navy); font-size: var(--fs-lg); line-height: 1.2; }
.icone-btn {
  width: 3rem; height: 3rem; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--navy);
}
.icone-btn:active { transform: scale(0.96); }
.icone-btn svg, .btn svg, .ico svg { width: 1.375rem; height: 1.375rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ----- cartões ----- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.25rem; box-shadow: var(--shadow);
}
.card.flat { box-shadow: none; }
.card.soft { background: var(--navy-soft); border-color: transparent; }
.card.warm { background: var(--orange-soft); border-color: transparent; }

/* ----- botões ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: var(--tap); padding: 0.75rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  background: var(--navy); color: #fff; font-weight: 700; font-size: var(--fs); text-decoration: none;
  transition: transform 0.15s var(--ease), background 0.15s;
}
.btn:hover { background: var(--navy-hover); }
.btn:active { transform: scale(0.98); }
.btn.block { display: flex; width: 100%; }
.btn.laranja { background: var(--orange); color: #1b0f08; }
.btn.laranja:hover { background: #e85100; }
.btn.claro { background: var(--surface); color: var(--navy); border-color: var(--navy); }
.btn.claro:hover { background: var(--navy-soft); }
.btn.fantasma { background: transparent; color: var(--navy); border-color: transparent; min-height: 3rem; padding: 0.5rem 1rem; }
.btn.fantasma:hover { background: var(--navy-soft); }
.btn.pequeno { min-height: 3rem; padding: 0.5rem 1.125rem; font-size: var(--fs-sm); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn.perigo { background: #a1352f; }

/* ----- campos ----- */
.campo label { display: block; font-weight: 600; margin-bottom: 0.375rem; color: var(--navy); }
.campo .dica { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 0.375rem; }
.input, .textarea {
  width: 100%; min-height: var(--tap); padding: 0.75rem 1rem; border-radius: var(--r);
  border: 2px solid var(--border); background: var(--surface); color: var(--text);
}
.textarea { min-height: 7.5rem; resize: vertical; line-height: 1.45; }
.input:focus, .textarea:focus { border-color: var(--turq); outline: none; box-shadow: 0 0 0 3px var(--turq-soft); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  min-height: 3rem; padding: 0.5rem 1.125rem; border-radius: 999px; border: 2px solid var(--border);
  background: var(--surface); color: var(--text); font-weight: 600; font-size: var(--fs-sm);
}
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ----- início ----- */
.saudacao { padding: 0.25rem 0 0.25rem; }
.saudacao p { color: var(--muted); }

.livro {
  display: flex; gap: 1rem; align-items: stretch;
}
.capa {
  flex: none; width: 6rem; min-height: 8.5rem; border-radius: 0.375rem 0.875rem 0.875rem 0.375rem;
  background: var(--navy); color: #fff; padding: 0.75rem 0.625rem 0.75rem 1rem; position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 8px 18px rgba(13, 77, 99, 0.25);
}
.capa::before { content: ""; position: absolute; left: 0.4375rem; top: 0; bottom: 0; width: 0.1875rem; background: var(--orange); opacity: 0.9; }
.capa .t { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; line-height: 1.15; }
.capa .a { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.capa-real { flex: none; width: 6rem; align-self: flex-start; }
.capa-real img { display: block; width: 100%; height: auto; border-radius: 0.375rem 0.625rem 0.625rem 0.375rem; background: #eee; box-shadow: 0 8px 18px rgba(13, 77, 99, 0.25); }
.livro .info { display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; min-width: 0; }
.rotulo { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-ink); }

.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.passo {
  display: flex; align-items: center; gap: 0.875rem; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1rem 1rem; min-height: 4.75rem; box-shadow: var(--shadow); color: var(--text); text-decoration: none;
  transition: transform 0.15s var(--ease);
}
.passo:active { transform: scale(0.99); }
.passo .num {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; background: var(--navy-soft); color: var(--navy);
}
.passo.feito .num { background: var(--ok); color: #fff; }
.passo .txt { flex: 1; min-width: 0; }
.passo .txt b { display: block; font-size: var(--fs); color: var(--navy); }
.passo .txt span { display: block; font-size: var(--fs-sm); color: var(--muted); }
.passo .seta { color: var(--faint); flex: none; }
.passo .seta svg { width: 1.375rem; height: 1.375rem; stroke: currentColor; fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

/* ----- selos ----- */
.selos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.selo { text-align: center; }
.selo .disco {
  width: 5rem; height: 5rem; margin: 0 auto 0.375rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 3px dashed var(--border); color: var(--faint); background: transparent;
}
.selo .disco svg { width: 2rem; height: 2rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.selo .nome { font-weight: 700; font-size: var(--fs-sm); color: var(--muted); }
.selo.ganho .disco { border: 3px solid #fff; color: #fff; box-shadow: 0 0 0 3px var(--c, var(--navy)), 0 6px 14px rgba(13, 77, 99, 0.18); background: var(--c, var(--navy)); transform: rotate(-4deg); }
.selo.ganho .nome { color: var(--navy); }
.selo.li { --c: var(--navy); }
.selo.conversei { --c: #b64500; }
.selo.criei { --c: #0f7f8b; }
@media (prefers-reduced-motion: no-preference) {
  .selo.novo .disco { animation: carimbo 0.7s var(--ease); }
  @keyframes carimbo { 0% { transform: scale(1.8) rotate(-18deg); opacity: 0; } 60% { transform: scale(0.94) rotate(-4deg); opacity: 1; } 100% { transform: scale(1) rotate(-4deg); } }
  .fade { animation: entrar 0.35s var(--ease); }
  @keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ----- quiz ----- */
.progresso { display: flex; gap: 0.3125rem; margin: 0.25rem 0 1rem; }
.progresso i { flex: 1; height: 0.5rem; border-radius: 999px; background: var(--border); }
.progresso i.ok { background: var(--ok); }
.progresso i.erro { background: var(--orange); }
.progresso i.atual { background: var(--turq); }
.progresso i.aberta { background: var(--navy); }

.pergunta { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); line-height: 1.3; color: var(--navy); }
.tipo { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--turq-soft); color: #0b5560; font-weight: 700; font-size: var(--fs-sm); }
.opcoes { display: grid; gap: 0.75rem; }
.opcao {
  display: flex; align-items: center; gap: 0.875rem; width: 100%; text-align: left; min-height: 4rem;
  padding: 0.75rem 1rem; border-radius: var(--r); border: 2px solid var(--border); background: var(--surface); color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.opcao:hover { border-color: var(--turq); }
.opcao .letra {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy-soft); color: var(--navy); font-weight: 700;
}
.opcao.certa { border-color: var(--ok); background: var(--ok-soft); }
.opcao.certa .letra { background: var(--ok); color: #fff; }
.opcao.errada { border-color: var(--orange); background: var(--orange-soft); }
.opcao.errada .letra { background: var(--orange); color: #1b0f08; }
.opcao[disabled] { cursor: default; }
.vf { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.vf .opcao { flex-direction: column; justify-content: center; text-align: center; min-height: 6.5rem; font-weight: 700; }
.vf .opcao svg { width: 2.25rem; height: 2.25rem; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.lacuna { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.5; color: var(--navy); font-weight: 600; }
.lacuna .vazio { display: inline-block; min-width: 5.5rem; padding: 0 0.5rem; text-align: center; border-bottom: 3px solid var(--orange); }

.ordem-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.ordem-item {
  display: flex; align-items: center; gap: 0.875rem; width: 100%; text-align: left; min-height: 4rem;
  padding: 0.75rem 1rem; border-radius: var(--r); border: 2px dashed var(--border); background: var(--surface); color: var(--text);
}
.ordem-item .n {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 2px dashed var(--faint); color: var(--faint); font-weight: 700;
}
.ordem-item.escolhido { border-style: solid; border-color: var(--turq); background: var(--turq-soft); }
.ordem-item.escolhido .n { border: none; background: var(--turq); color: #fff; }
.ordem-item.certa { border-style: solid; border-color: var(--ok); background: var(--ok-soft); }
.ordem-item.certa .n { border: none; background: var(--ok); color: #fff; }
.ordem-item.errada { border-style: solid; border-color: var(--orange); background: var(--orange-soft); }
.ordem-item.errada .n { border: none; background: var(--orange); color: #1b0f08; }

.retorno { border-radius: var(--r-lg); padding: 1.125rem 1.25rem; }
.retorno.certo { background: var(--ok-soft); border: 2px solid var(--ok); }
.retorno.quase { background: var(--orange-soft); border: 2px solid var(--orange); }
.retorno.neutro { background: var(--navy-soft); border: 2px solid transparent; }
.retorno h3 { font-size: var(--fs); font-family: var(--font-body); color: var(--text); margin-bottom: 0.25rem; }
.retorno .resp { font-weight: 700; color: var(--navy); margin: 0.25rem 0; }

.resultado-pontos { display: flex; gap: 0.375rem; justify-content: center; flex-wrap: wrap; margin: 0.75rem 0; }
.resultado-pontos i { width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--border); display: inline-block; }
.resultado-pontos i.ok { background: var(--ok); }
.resultado-pontos i.erro { background: var(--orange-soft); box-shadow: inset 0 0 0 2px var(--orange); }
.numero-grande { font-family: var(--font-display); font-size: 3.5rem; font-weight: 700; color: var(--navy); line-height: 1; }

/* ----- desafio ----- */
.escolha {
  display: flex; align-items: flex-start; gap: 0.875rem; width: 100%; text-align: left; padding: 1rem; min-height: 4.25rem;
  border-radius: var(--r); border: 2px solid var(--border); background: var(--surface); color: var(--text);
}
.escolha .caixa {
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; border: 2px solid var(--faint); margin-top: 0.125rem;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.escolha .caixa svg { width: 1.125rem; height: 1.125rem; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.escolha[aria-pressed="true"] { border-color: var(--turq); background: var(--turq-soft); }
.escolha[aria-pressed="true"] .caixa { background: var(--turq); border-color: var(--turq); }
.escolha[aria-pressed="true"] .caixa svg { opacity: 1; }
.escolha[disabled] { opacity: 0.5; cursor: not-allowed; }
.mostrar-adulto { border: 2px dashed var(--navy); border-radius: var(--r-lg); padding: 1rem 1.25rem; background: var(--surface); }
.lista-opc { margin: 0.75rem 0 0; padding-left: 1.25rem; }
.lista-opc li + li { margin-top: 0.375rem; }

/* ----- caderno / mediadora ----- */
.linha-hist { border-top: 1px solid var(--divider); padding: 0.875rem 0; }
.linha-hist:first-child { border-top: none; padding-top: 0; }
.linha-hist .quando { font-size: var(--fs-sm); color: var(--muted); }
.tabela-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
table.reg { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 34rem; }
table.reg th, table.reg td { padding: 0.625rem 0.75rem; text-align: left; border-bottom: 1px solid var(--divider); vertical-align: top; }
table.reg th { background: var(--surface-2); color: var(--muted); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; }
table.reg tr:last-child td { border-bottom: none; }
.etiqueta { display: inline-block; padding: 0.125rem 0.625rem; border-radius: 999px; font-weight: 700; font-size: 0.8125rem; }
.etiqueta.sim { background: var(--ok-soft); color: var(--ok); }
.etiqueta.nao { background: var(--divider); color: var(--muted); }
.aviso { font-size: var(--fs-sm); color: var(--muted); border-left: 4px solid var(--turq); padding: 0.25rem 0 0.25rem 0.875rem; }
.rodape { padding: 1.5rem 0 0; text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.rodape a, .linklike { color: var(--navy); font-weight: 600; background: none; border: none; text-decoration: underline; padding: 0.5rem; font-size: var(--fs-sm); }

.entrada-logo { width: min(11rem, 52vw); height: auto; display: block; margin: 0 auto; border-radius: 1.25rem; }
.hero { padding: 1.5rem 0 0.5rem; text-align: center; }
.hero p { color: var(--muted); max-width: 26rem; margin: 0.5rem auto 0; }

/* ----- aviso rápido ----- */
.toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); transform: translate(-50%, 1rem);
  background: var(--navy); color: #fff; padding: 0.75rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: var(--fs-sm);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s var(--ease); z-index: 20; width: max-content; max-width: calc(100vw - 2rem); text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 40rem) {
  .app { padding-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
[data-foco]:focus { outline: none; }