/* Livro interativo de Geometria Plana (posts com geoLivro: true).
   Complementa css/historia.css (figuras .mf) com caixas de teoria, exercícios e quizzes. */
:root {
  --gl-ink: #1c2541; --gl-muted: #5b6478; --gl-line: #e3e6ef; --gl-soft: #f7f8fc;
  --gl-teal: #1f7f9e; --gl-gold: #f4b740; --gl-gold2: #e0931b; --gl-violet: #6c4ab6;
  --gl-red: #d64545; --gl-green: #2a9d8f; --gl-blue: #2f6fd1;
}

/* ---------- SVG das figuras ---------- */
/* main.css dá width: fit-content a todo figure; aqui a figura ocupa a coluna inteira */
figure.mf { width: auto; align-self: stretch; }
.geo-svg { font-family: inherit; }
.geo-svg--esboco { margin: 0 auto; }
.geo-lbl { font-size: 16px; font-weight: 700; font-style: italic; fill: var(--gl-ink); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.geo-lbl--ang { font-size: 14px; font-style: normal; }
.geo-lbl--cota { font-size: 14px; font-style: normal; font-weight: 600; fill: var(--gl-muted); }
.geo-lbl--plain { font-style: normal; }
.geo-lbl--small { font-size: 13px; font-weight: 600; font-style: normal; }
.geo-grid line { stroke: #eef1f6; stroke-width: 1; }
.geo-handle { cursor: grab; touch-action: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); transition: r 0.15s; }
.geo-handle:hover { r: 11; }
.geo-handle:active { cursor: grabbing; }
.mf-readout .geo-k { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 6px; background: #f1eefa; font-weight: 800; font-variant-numeric: tabular-nums; }
.mf-readout .geo-ok { color: var(--gl-green); font-weight: 800; }
.mf-readout .geo-no { color: var(--gl-red); font-weight: 800; }
.geo-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1rem; margin-top: 0.5rem; font-size: 0.85rem; color: var(--gl-muted); }
.geo-legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 0.35rem; vertical-align: middle; }

/* ---------- abertura do capítulo ---------- */
.geo-abertura {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.25rem; align-items: center;
  margin: 0 0 2rem; padding: 1.25rem 1.4rem; border-radius: 18px;
  background: linear-gradient(135deg, #140b2b 0%, #2b1a52 60%, #1f4f7e 100%); color: #fff;
}
.geo-abertura__num { font-size: 3.2rem; line-height: 1; font-weight: 900; color: var(--gl-gold); font-variant-numeric: tabular-nums; }
.geo-abertura__eyebrow { margin: 0; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #cdbff2; }
.geo-abertura__titulo { margin: 0.1rem 0 0.4rem; font-size: 1.35rem; font-weight: 800; color: #fff; }
.geo-abertura ul { margin: 0; padding-left: 1.1rem; font-size: 0.92rem; color: #e9e4f7; }
.geo-abertura li { margin: 0.1rem 0; }
.geo-abertura strong, .geo-abertura b { color: var(--gl-gold) !important; }
@media (max-width: 560px) { .geo-abertura { grid-template-columns: 1fr; } .geo-abertura__num { font-size: 2.4rem; } }

/* ---------- caixas de teoria ---------- */
.geo-box {
  position: relative; margin: 1.5rem 0; padding: 1rem 1.2rem 0.9rem 1.25rem;
  border-radius: 14px; border: 1px solid var(--gl-line); border-left: 6px solid var(--gl-teal);
  background: var(--gl-soft);
}
.geo-box > :last-child { margin-bottom: 0; }
.geo-box__tag {
  display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; padding: 0.15rem 0.65rem;
  border-radius: 999px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--gl-teal); color: #fff;
}
.geo-box__title { font-weight: 800; color: var(--gl-ink); }
.geo-box--definicao { border-left-color: var(--gl-teal); background: #f2f8fb; }
.geo-box--definicao .geo-box__tag { background: var(--gl-teal); }
.geo-box--postulado { border-left-color: var(--gl-violet); background: #f6f3fc; }
.geo-box--postulado .geo-box__tag { background: var(--gl-violet); }
.geo-box--teorema { border-left-color: var(--gl-gold2); background: #fff8ea; }
.geo-box--teorema .geo-box__tag { background: var(--gl-gold2); }
.geo-box--propriedade { border-left-color: var(--gl-green); background: #f0f9f7; }
.geo-box--propriedade .geo-box__tag { background: var(--gl-green); }
.geo-box--demonstracao { border-left-color: var(--gl-muted); background: #fff; border-style: dashed; border-left-style: solid; }
.geo-box--demonstracao .geo-box__tag { background: var(--gl-muted); }
.geo-box--exemplo { border-left-color: var(--gl-blue); background: #f2f6fd; }
.geo-box--exemplo .geo-box__tag { background: var(--gl-blue); }
.geo-box--atencao { border-left-color: var(--gl-red); background: #fdf3f3; }
.geo-box--atencao .geo-box__tag { background: var(--gl-red); }
.geo-box--resumo { border-left-color: var(--gl-ink); background: #fff; }
.geo-box--resumo .geo-box__tag { background: var(--gl-ink); }
.geo-box .mf { margin: 1rem 0; box-shadow: none; }

/* ---------- exercícios ---------- */
.geo-ex {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 0 0.8rem;
  margin: 1.1rem 0; padding: 0.9rem 1rem; border: 1px solid var(--gl-line); border-radius: 14px; background: #fff;
}
.geo-ex__n {
  display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 12px;
  background: var(--gl-ink); color: var(--gl-gold); font-weight: 900; font-variant-numeric: tabular-nums;
}
.geo-ex__body { min-width: 0; }
.geo-ex__body > p:first-child { margin-top: 0.35rem; }
.geo-ex__body > :last-child { margin-bottom: 0; }
.geo-ex .mf { margin: 0.75rem 0; padding: 0.5rem; box-shadow: none; }
.geo-ans { margin-top: 0.6rem; border-radius: 10px; background: #f1f8f6; border: 1px solid #cfe9e3; }
.geo-ans > summary {
  cursor: pointer; padding: 0.45rem 0.8rem; font-weight: 800; font-size: 0.9rem; color: #1f7a6d; list-style: none;
}
.geo-ans > summary::-webkit-details-marker { display: none; }
.geo-ans > summary::before { content: "▸ "; display: inline-block; transition: transform 0.2s; }
.geo-ans[open] > summary::before { transform: rotate(90deg); }
.geo-ans__body { padding: 0.1rem 0.9rem 0.7rem; }
.geo-ans__body > :last-child { margin-bottom: 0; }
.geo-sol { border-color: #e2d9f6; background: #f8f5fe; }
.geo-sol > summary { color: var(--gl-violet); }
@media (max-width: 560px) { .geo-ex { grid-template-columns: 1fr; } .geo-ex__n { width: 2rem; height: 2rem; margin-bottom: 0.3rem; } }

/* ---------- quiz verdadeiro ou falso ---------- */
.geo-vf { margin: 1.5rem 0; padding: 1rem 1.1rem; border-radius: 18px; border: 1px solid var(--gl-line); background: linear-gradient(180deg, #fbfaff, #fff); box-shadow: 0 10px 26px rgba(28, 37, 65, 0.06); }
.geo-vf__title { margin: 0 0 0.6rem; font-weight: 800; color: var(--gl-ink); }
.geo-vf__title i { color: var(--gl-gold2); margin-right: 0.35rem; }
.geo-vf ol { margin: 0; padding: 0; list-style: none; counter-reset: vf; }
.geo-vf__item { counter-increment: vf; display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 0.8rem; align-items: center; padding: 0.6rem 0.2rem; border-top: 1px dashed var(--gl-line); }
.geo-vf__q::before { content: counter(vf, lower-alpha) ") "; font-weight: 800; color: var(--gl-muted); }
.geo-vf__btns { display: flex; gap: 0.35rem; }
.geo-vf__btns button {
  width: 2.4rem; height: 2.2rem; border-radius: 10px; border: 2px solid var(--gl-line); background: #fff;
  font-weight: 900; color: var(--gl-ink); cursor: pointer; transition: transform 0.15s, background 0.2s, border-color 0.2s;
}
.geo-vf__btns button:hover { transform: translateY(-1px); border-color: var(--gl-gold); }
.geo-vf__item.is-done button { cursor: default; opacity: 0.45; transform: none; }
.geo-vf__item.is-done button.is-right { opacity: 1; background: var(--gl-green); border-color: var(--gl-green); color: #fff; }
.geo-vf__item.is-no button.is-chosen { opacity: 1; background: var(--gl-red); border-color: var(--gl-red); color: #fff; }
.geo-vf__why { grid-column: 1 / -1; margin: 0; padding: 0.45rem 0.7rem; border-radius: 8px; font-size: 0.92rem; background: #f3f5f9; color: var(--gl-ink); animation: geo-in 0.3s ease; }
.geo-vf__item.is-ok .geo-vf__why { background: #e8f6f2; }
.geo-vf__item.is-no .geo-vf__why { background: #fdeeee; }
.geo-vf__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--gl-line); font-size: 0.92rem; }
.geo-vf__again { border: 0; background: none; color: var(--gl-violet); font-weight: 800; cursor: pointer; }
@keyframes geo-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- testes de múltipla escolha ---------- */
.geo-teste { margin: 1.2rem 0; padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid var(--gl-line); background: #fff; }
.geo-teste__head { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.4rem; }
.geo-teste__n { font-weight: 900; color: var(--gl-gold2); }
.geo-teste__src { font-size: 0.8rem; font-weight: 700; color: var(--gl-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.geo-teste__q > :last-child { margin-bottom: 0.5rem; }
.geo-teste__opts { display: grid; gap: 0.4rem; }
.geo-teste__opt {
  display: flex; gap: 0.6rem; align-items: baseline; width: 100%; padding: 0.45rem 0.75rem; text-align: left;
  border: 2px solid var(--gl-line); border-radius: 10px; background: #fff; color: var(--gl-ink); cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.geo-teste__opt:hover { border-color: var(--gl-gold); }
.geo-teste__opt b { color: var(--gl-violet); }
.geo-teste.is-done .geo-teste__opt { cursor: default; opacity: 0.55; }
.geo-teste.is-done .geo-teste__opt.is-right { opacity: 1; border-color: var(--gl-green); background: #e8f6f2; }
.geo-teste.is-no .geo-teste__opt.is-chosen { opacity: 1; border-color: var(--gl-red); background: #fdeeee; }
.geo-teste__fb { margin-top: 0.6rem; padding: 0.55rem 0.8rem; border-radius: 10px; background: #f3f5f9; font-size: 0.93rem; animation: geo-in 0.3s ease; }
.geo-teste__verdict { font-weight: 800; }
.geo-teste.is-ok .geo-teste__verdict { color: var(--gl-green); }
.geo-teste.is-no .geo-teste__verdict { color: var(--gl-red); }
.geo-placar { position: sticky; top: 70px; z-index: 5; margin: 1rem 0; padding: 0.5rem 0.9rem; border-radius: 999px; background: var(--gl-ink); color: #fff; text-align: center; font-size: 0.92rem; }
.geo-placar b { color: var(--gl-gold); }

/* ---------- leitura histórica ---------- */
.geo-leitura { margin: 2rem 0; padding: 1.2rem 1.3rem; border-radius: 18px; background: #fbf7ee; border: 1px solid #efe2c4; }
.geo-leitura__tag { margin: 0 0 0.3rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #a0721a; }
.geo-leitura__title { margin: 0 0 0.6rem; font-size: 1.15rem; font-weight: 800; color: var(--gl-ink); }
.geo-leitura > :last-child { margin-bottom: 0; }

/* ---------- navegação entre capítulos e fonte ---------- */
.geo-fonte { margin: 2rem 0 0; padding: 0.8rem 1rem; border-radius: 12px; background: var(--gl-soft); font-size: 0.88rem; color: var(--gl-muted); }
.geo-fonte a { font-weight: 700; }

/* ---------- calculadora de graus, minutos e segundos ---------- */
.geo-gms { display: grid; gap: 0.5rem; }
.geo-gms__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.geo-gms__lbl { min-width: 5.5rem; font-weight: 800; color: var(--gl-ink); font-size: 0.9rem; }
.geo-gms__f { display: inline-flex; align-items: center; gap: 0.15rem; margin: 0; font-weight: 800; color: var(--gl-violet); }
.geo-gms__f input { width: 4.6rem; padding: 0.3rem 0.45rem; border: 2px solid var(--gl-line); border-radius: 8px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gl-ink); background: #fff; }
.geo-gms__f input:focus { outline: none; border-color: var(--gl-gold); }

/* ---------- jogo de pares (triângulos congruentes) ---------- */
.geo-jogo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 560px) { .geo-jogo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.geo-jogo__cell { padding: 0.2rem; border: 2px solid var(--gl-line); border-radius: 12px; background: #fff; cursor: pointer; transition: transform 0.15s, border-color 0.2s, background 0.2s; }
.geo-jogo__cell:hover { transform: translateY(-2px); border-color: var(--gl-gold); }
.geo-jogo__cell.is-sel { border-color: var(--gl-violet); background: #f4f0fc; box-shadow: 0 0 0 3px rgba(108, 74, 182, 0.2); }
.geo-jogo__cell.is-found { cursor: default; transform: none; }
.geo-jogo__cell.is-shake { animation: geo-shake 0.4s ease; border-color: var(--gl-red); }
@keyframes geo-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---------- figura recortada da digitalização ---------- */
figure.geo-scan { width: auto; align-self: stretch; margin: 0.75rem 0; border: 0; text-align: center; }
.geo-scan img { max-width: 100%; max-height: 440px; mix-blend-mode: multiply; }
.geo-scan figcaption { margin-top: 0.25rem; font-size: 0.75rem; color: var(--gl-muted); }

/* ---------- mapa e vídeos incorporados ---------- */
.geo-mapa { margin: 1rem 0; border-radius: 14px; overflow: hidden; }
.geo-mapa iframe { display: block; width: 100%; height: 360px; }

/* ---------- diagrama de conjuntos clicável ---------- */
.geo-region { cursor: pointer; outline: none; }
.geo-region > path, .geo-region > ellipse, .geo-region > rect { transition: stroke-width 0.2s, filter 0.2s; }
.geo-region.is-on > path, .geo-region.is-on > ellipse, .geo-region.is-on > rect { stroke-width: 4; filter: drop-shadow(0 2px 6px rgba(28, 37, 65, 0.25)); }