/* ==========================================================================
   LEI SECA — estilos
   Cores em variáveis (tema claro e escuro). Layout pensado primeiro para celular.
   ========================================================================== */
:root {
  --bg: #F7F6F2;
  --surface: #FFFFFF;
  --surface-2: #EFF1F4;
  --ink: #2B2F36;
  --ink-soft: #5A616B;
  --accent: #2563A8;
  --accent-soft: #E3EDF8;
  --accent-ink: #1C4E87;
  --calor1: #EEF5FD; --calor1-borda: #BFDDF7; --calor2: #CFE6FA; --calor2-borda: #6FB1EA; --calor3: #1C4E87; --calor3-borda: #0F2F55; --calor3-tinta: #FFFFFF; --prog-ini: #CFE4F7; --prog-fim: #1C4E87;
  --on-accent: #FFFFFF;
  --destaque: #9A5B00;
  --destaque-soft: #FDF1D8;
  --ok: #24704C;
  --ok-bg: #E3F1E9;
  --err: #B23A3A;
  --err-bg: #F9E7E6;
  --line: #DCDFE3;
  --mark: #FBE3A1;
  /* Planta (Desempenho e menu) */
  --pl-terra: #9B7653; --pl-semente: #6B4A2B; --pl-tronco: #7A5636; --pl-folha: #4C9A5B; --pl-folha2: #2F7D47; --pl-flor: #E58BB0; --pl-miolo: #F2B632; --pl-fruto: #D9502F; --bn-contorno: #17181A;
  /* Cores dos cartões do mapa de artigos (O que mais cai) */
  --c1: #8C3B3B; --c2: #2E6672; --c3: #5E7A3A; --c4: #B5643C; --c5: #6E4A7E; --c6: #4A5F8C; --c7: #2F6B4F; --c8: #A9822F;
  --radius: 8px;
  --serif: 'Spectral', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14181E; --surface: #1E242C; --surface-2: #27303A; --ink: #E7EAEE; --ink-soft: #A7B0BB;
    --accent: #6BA6E8; --accent-soft: #1F3347; --accent-ink: #A8CCF3; --on-accent: #10161C; --destaque: #F0B64C; --destaque-soft: #3A2E14;
    --calor1: #1B2938; --calor1-borda: #2F4A66; --calor2: #23476B; --calor2-borda: #4F86C0; --calor3: #3B7BC4; --calor3-borda: #8EC0F2; --calor3-tinta: #FFFFFF; --prog-ini: #2A425A; --prog-fim: #8EC0F2;
    --ok: #6FCB9B; --ok-bg: #17332A; --err: #F08C8C; --err-bg: #3D2224; --line: #36404B; --mark: #6B5516;
    --pl-terra: #7D6147; --pl-semente: #C49A6C; --pl-tronco: #A67C52; --pl-folha: #66B877; --pl-folha2: #3F9259; --pl-flor: #F0A3C2; --pl-miolo: #F2C14E; --pl-fruto: #EF7350; --bn-contorno: #7C848E;
    --c1: #E08C8C; --c2: #7FC0CC; --c3: #A9C77E; --c4: #E6A07A; --c5: #C29BD3; --c6: #9DB0E0; --c7: #7CC29C; --c8: #D9B45E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14181E; --surface: #1E242C; --surface-2: #27303A; --ink: #E7EAEE; --ink-soft: #A7B0BB;
    --accent: #6BA6E8; --accent-soft: #1F3347; --accent-ink: #A8CCF3; --on-accent: #10161C; --destaque: #F0B64C; --destaque-soft: #3A2E14;
    --calor1: #1B2938; --calor1-borda: #2F4A66; --calor2: #23476B; --calor2-borda: #4F86C0; --calor3: #3B7BC4; --calor3-borda: #8EC0F2; --calor3-tinta: #FFFFFF; --prog-ini: #2A425A; --prog-fim: #8EC0F2;
    --ok: #6FCB9B; --ok-bg: #17332A; --err: #F08C8C; --err-bg: #3D2224; --line: #36404B; --mark: #6B5516;
    --pl-terra: #7D6147; --pl-semente: #C49A6C; --pl-tronco: #A67C52; --pl-folha: #66B877; --pl-folha2: #3F9259; --pl-flor: #F0A3C2; --pl-miolo: #F2C14E; --pl-fruto: #EF7350; --bn-contorno: #7C848E;
    --c1: #E08C8C; --c2: #7FC0CC; --c3: #A9C77E; --c4: #E6A07A; --c5: #C29BD3; --c6: #9DB0E0; --c7: #7CC29C; --c8: #D9B45E;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1 { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; margin: 0 0 12px; }
h2 { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin: 28px 0 10px; }
.suave, .dica { color: var(--ink-soft); }
.dica { font-size: 0.85rem; margin: 8px 0 0; }
.dica summary { cursor: pointer; }
.dica ul { margin: 8px 0 0; padding-left: 20px; }

/* ---------------------------------------------------------------- topo */
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 720px; margin: 0 auto; padding: 18px 16px 10px;
}
.marca { display: flex; flex-direction: column; line-height: 1.1; }
.marca-nome { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: var(--accent-ink); }
.marca-sub { font-size: 0.78rem; color: var(--ink-soft); }
.placar { display: flex; align-items: center; gap: 14px; }
.placar-item { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.placar-item strong { font-family: var(--serif); font-size: 1.15rem; color: var(--accent-ink); }
.placar-pontos strong { color: var(--destaque); }
.placar-item span { font-size: 0.7rem; color: var(--ink-soft); }
.placar-perfil {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px;
  padding: 6px 12px; font: 500 0.85rem var(--sans); cursor: pointer; max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.abas { display: flex; gap: 6px; max-width: 720px; margin: 0 auto; padding: 0 16px 12px; }
.aba {
  flex: 1; border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  border-radius: 999px; padding: 8px 12px; font: 500 0.92rem var(--sans); cursor: pointer;
}
.aba.ativa { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-accent); }

/* ---------------------------------------------------------------- base */
.app { max-width: 720px; margin: 0 auto; padding: 0 16px 48px; }
.cartao {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 18px; margin-bottom: 16px;
}
@media (min-width: 600px) { .cartao { padding: 28px; } }

button { font-family: var(--sans); }
.btn-primario {
  background: var(--accent-ink); border: 1px solid var(--accent-ink); color: var(--on-accent);
  border-radius: var(--radius); padding: 12px 20px; font-size: 1rem; font-weight: 500; cursor: pointer;
}
.btn-primario:disabled { background: var(--line); border-color: var(--line); color: var(--ink-soft); cursor: not-allowed; }
.btn-secundario {
  background: transparent; border: 1px solid var(--accent-ink); color: var(--accent-ink);
  border-radius: var(--radius); padding: 12px 18px; font-size: 1rem; font-weight: 500; cursor: pointer;
}
.link { background: none; border: none; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 0.9rem; padding: 6px 0; }
.link.perigo { color: var(--err); margin-top: 18px; }
.btn-dica { display: inline-flex; align-items: center; gap: 2px; margin-top: 10px; background: transparent; border: 1px dashed var(--destaque); color: var(--destaque); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 0.85rem; cursor: pointer; }
.btn-dica:disabled { opacity: 0.45; cursor: default; }
.btn-dica.usada { border-style: solid; }
.cruz-dica-cab .btn-dica { margin: 0 0 0 4px; padding: 0 6px; font-size: 0.8rem; vertical-align: middle; }

input[type=text], input[type=search], input[type=email], input[type=password], select {
  width: 100%; font: inherit; font-size: 1rem; padding: 10px 12px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
select { appearance: auto; }
.busca-lei { margin-bottom: 8px; }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.linha-form { display: flex; gap: 8px; margin: 16px 0; }
.linha-form input { flex: 1; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 0.92rem; }

/* ---------------------------------------------------------------- filtros */
.campo { margin-top: 20px; }
.rotulo-campo { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.segmentos { display: flex; flex-wrap: wrap; gap: 6px; }
.segmento {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 7px 14px; font-size: 0.92rem; cursor: pointer;
}
.segmento.ativo { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.checks { display: grid; gap: 6px; }
@media (min-width: 520px) { .checks { grid-template-columns: 1fr 1fr; } }
.checks-linha { display: flex; flex-wrap: wrap; gap: 16px; }
.check { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.95rem; }
.check input { width: 18px; height: 18px; accent-color: var(--accent-ink); }
.check.desabilitado { color: var(--ink-soft); opacity: 0.6; cursor: not-allowed; }
.linha-artigos { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.linha-artigos input { width: 80px; }
.aviso-suave { background: var(--surface-2); border-radius: var(--radius); padding: 12px 14px; color: var(--ink-soft); font-size: 0.92rem; }
.rodape-filtros {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
}
.contagem { color: var(--ink-soft); font-size: 0.92rem; }

/* ---------------------------------------------------------------- questão */
.quiz-topo { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: var(--ink-soft); margin: 4px 0 6px; }
.quiz-direita { display: flex; align-items: center; gap: 10px; }
.quiz-pontos strong { font-family: var(--serif); font-size: 1.1rem; color: var(--destaque); }
.combo { background: var(--destaque-soft); color: var(--destaque); border-radius: 999px; padding: 2px 10px; font-size: 0.8rem; font-weight: 600; }
.progresso { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.progresso div { height: 100%; background: var(--accent); transition: width 0.3s; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag { font-size: 0.76rem; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; color: var(--ink-soft); }
.tag-tipo { background: var(--surface-2); color: var(--ink); }
.tag-facil { color: var(--ok); border-color: var(--ok); }
.tag-medio { color: var(--accent-ink); border-color: var(--accent); }
.tag-dificil { color: var(--err); border-color: var(--err); }
.tag-revisao { font-weight: 600; color: var(--ok); border-color: var(--ok); }
.tag-item { font-weight: 600; color: var(--ink); border-color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.instrucao { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 14px; }

.texto-base {
  background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 14px; margin-bottom: 14px; font-family: var(--serif); font-size: 1.02rem; color: var(--ink-soft);
}
.texto-base p { margin: 4px 0; }
.texto-base-titulo { font-family: var(--sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.enunciado { font-family: var(--serif); font-size: 1.2rem; line-height: 1.75; margin: 0 0 18px; }
.enunciado .rotulo { font-weight: 600; }
.enunciado.com-complemento { white-space: pre-line; }
.lacuna { color: var(--accent-ink); font-weight: 600; white-space: normal; overflow-wrap: anywhere; }

.alternativas { display: flex; flex-direction: column; gap: 8px; }
.alt-btn {
  display: flex; gap: 10px; align-items: baseline; text-align: left; width: 100%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--radius); padding: 12px 14px; font-size: 1rem; cursor: pointer;
}
.alt-btn:hover:not(:disabled) { border-color: var(--accent); }
.alt-letra { font-weight: 600; color: var(--ink-soft); }
.alt-btn.selecionada { border-color: var(--accent); background: var(--accent-soft); }
.alt-btn.correta, .pedaco.correta, .palavra.correta { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.alt-btn.errada, .pedaco.errada, .palavra.errada { border-color: var(--err); background: var(--err-bg); color: var(--err); }
.alt-btn:disabled { cursor: default; }
.ce-opcoes { display: flex; gap: 10px; }
.ce-btn { justify-content: center; font-weight: 600; }

.enunciado .lacuna-input {
  width: auto; max-width: 100%; display: inline-block; font-family: var(--sans); font-size: 1rem; padding: 2px 8px; margin: 0 2px;
  border: none; border-bottom: 2px solid var(--accent); border-radius: 4px 4px 0 0; background: var(--accent-soft); color: var(--ink);
}
.lacuna-input.correta { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.lacuna-input.errada { border-color: var(--err); background: var(--err-bg); color: var(--err); text-decoration: line-through; }
.resposta-certa { font-family: var(--sans); font-size: 0.95rem; color: var(--ok); font-weight: 600; margin: 0 4px; }
.lacuna-grupo { white-space: normal; }
.continuacao { display: block; margin-top: 10px; color: var(--ink-soft); font-size: 0.92em; }
.continuacao-titulo { display: block; font-family: var(--sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.alt-btn.eliminada:not(:disabled) { opacity: 0.55; border-style: dashed; }
.alt-btn.eliminada .alt-texto { text-decoration: line-through; }

.palavra {
  font: inherit; color: inherit; background: none; border: 1px solid transparent; border-radius: 4px;
  padding: 0 1px; margin: 0 -2px; cursor: pointer;
}
.palavra:hover:not(:disabled) { border-color: var(--line); background: var(--surface-2); }
.palavra.selecionada { border-color: var(--accent); background: linear-gradient(var(--accent-soft), var(--accent-soft)) no-repeat left center / 100% 100%; animation: marca-texto 0.22s ease-out; }
.palavra:disabled { cursor: default; }
.palavra.faltou { border: 1px dashed var(--ok); color: var(--ok); }
.aviso-acento { font-size: 0.85rem; margin: 10px 0 0; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--accent-ink); border-radius: 0 var(--radius) var(--radius) 0; }
.fim-lista li.branco .fim-marca { color: var(--ink-soft); }
.quiz-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.quiz-nav button { white-space: nowrap; }
.quiz-rodape { display: flex; justify-content: flex-start; margin-top: 12px; }

.forca-palavra { display: inline-flex; gap: 6px; vertical-align: bottom; margin: 0 4px; }
.forca-letra {
  display: inline-block; min-width: 0.9em; text-align: center; border-bottom: 2px solid var(--accent-ink);
  font-family: var(--sans); font-weight: 600; text-transform: uppercase; color: var(--err); line-height: 1.3;
}
.forca-letra.revelada { color: var(--accent-ink); }
.forca-painel { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.forca-desenho { width: 135px; height: 90px; flex: none; overflow: visible; }
.forca-base { stroke: var(--ink-soft); stroke-width: 3; fill: none; stroke-linecap: round; }
.forca-parte { stroke: var(--err); stroke-width: 3; fill: none; stroke-linecap: round; opacity: 0; transition: opacity 0.2s; }
.forca-parte.visivel { opacity: 1; }
.forca-contador { color: var(--ink-soft); font-size: 0.92rem; }
.teclado { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
@media (min-width: 600px) { .teclado { grid-template-columns: repeat(13, 1fr); } }
.tecla {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 6px;
  padding: 9px 0; font-weight: 600; cursor: pointer; font-size: 0.95rem;
}
.tecla.certa { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.tecla.errada { background: var(--err-bg); color: var(--err); border-color: var(--err); opacity: 0.7; }

.ordenar-montagem {
  min-height: 64px; border: 2px dashed var(--line); border-radius: var(--radius); padding: 10px;
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-content: flex-start;
}
.ordenar-montagem:empty::before { content: attr(data-vazio); color: var(--ink-soft); font-size: 0.9rem; }
.ordenar-reserva { display: flex; flex-wrap: wrap; gap: 8px; }
.pedaco {
  font-family: var(--serif); font-size: 1.02rem; text-align: left; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); border-radius: var(--radius); padding: 8px 12px; cursor: pointer;
}
.pedaco:hover:not(:disabled) { border-color: var(--accent); }

/* palavras cruzadas */
.cruz-moldura { overflow-x: auto; margin: 0 -4px 16px; padding: 4px; }
.cruz-grade {
  --cel: clamp(24px, calc((100vw - 72px) / var(--colunas)), 36px);
  display: grid; grid-template-columns: repeat(var(--colunas), var(--cel)); grid-auto-rows: var(--cel);
  gap: 2px; width: max-content; margin: 0 auto;
}
.cruz-vazia { background: transparent; }
.cruz-casa { position: relative; background: var(--surface); border: 1px solid var(--ink-soft); border-radius: 3px; }
.cruz-casa input {
  width: 100%; height: 100%; border: none; background: transparent; text-align: center; padding: 0;
  font: 600 calc(var(--cel) * 0.5) var(--sans); color: var(--ink); text-transform: uppercase; caret-color: var(--accent);
}
.cruz-casa input:focus { outline: none; }
.cruz-casa:focus-within { box-shadow: 0 0 0 2px var(--accent-ink); z-index: 1; }
.cruz-casa.ativa { background: var(--accent-soft); }
.cruz-casa.dica input { font-style: italic; text-decoration: underline dotted; }
.cruz-casa.certa { background: var(--ok-bg); border-color: var(--ok); }
.cruz-casa.certa input { color: var(--ok); }
.cruz-casa.errada { background: var(--err-bg); border-color: var(--err); }
.cruz-casa.errada input { color: var(--err); }
.cruz-num { position: absolute; top: 0; left: 2px; font-size: 9px; line-height: 1; color: var(--ink-soft); pointer-events: none; }
.cruz-dicas { display: grid; gap: 4px 20px; }
@media (min-width: 640px) { .cruz-dicas { grid-template-columns: 1fr 1fr; } }
.cruz-bloco h3 { font-family: var(--sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin: 8px 0 6px; }
.cruz-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cruz-dica { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; cursor: pointer; }
.cruz-dica.ativa { border-color: var(--accent); background: var(--accent-soft); }
.cruz-dica.certa { border-color: var(--ok); }
.cruz-dica.errada { border-color: var(--err); }
.cruz-dica-cab { font-size: 0.78rem; color: var(--ink-soft); }
.cruz-dica-ctx { font-family: var(--serif); font-size: 0.85rem; color: var(--ink-soft); margin: 4px 0 0; }
.cruz-dica-det summary { font-size: 0.78rem; color: var(--accent-ink); cursor: pointer; margin-top: 4px; }
.cruz-dica-texto { font-family: var(--serif); font-size: 0.98rem; margin: 4px 0 0; }
.feedback .gabarito + .gabarito { margin-top: 6px; }

/* reportar erro */
.reporte-linha { text-align: center; margin: -6px 0 16px; }
.reporte { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.reporte-titulo { font-weight: 600; font-size: 0.92rem; margin-bottom: 8px; }
.reporte-motivos { display: grid; gap: 6px; margin-bottom: 10px; font-size: 0.92rem; }
.reporte textarea {
  width: 100%; font: inherit; font-size: 0.95rem; padding: 8px 10px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); resize: vertical;
}
.reporte-acoes { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 8px; }

.aviso { margin-top: 14px; padding: 10px 14px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-ink); font-size: 0.92rem; }
.feedback { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid; }
.feedback.ok { background: var(--ok-bg); border-color: var(--ok); }
.feedback.err { background: var(--err-bg); border-color: var(--err); }
.feedback-titulo { font-weight: 600; font-size: 1.05rem; }
.feedback.ok .feedback-titulo { color: var(--ok); }
.feedback.err .feedback-titulo { color: var(--err); }
.feedback-pontos { font-weight: 500; font-size: 0.9rem; }
.feedback-sub { font-size: 0.88rem; color: var(--ink-soft); margin-top: 6px; }
.gabarito { background: var(--surface); border-radius: var(--radius); padding: 12px 14px; margin-top: 8px; }
.gabarito-ref { font-size: 0.8rem; font-weight: 600; color: var(--accent-ink); text-transform: uppercase; letter-spacing: 0.03em; }
.gabarito p { font-family: var(--serif); margin: 6px 0 0; }
.gabarito-contexto { color: var(--ink-soft); }
.ressalva { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; }
.ressalva-titulo { font-size: 0.78rem; font-weight: 700; color: var(--accent-ink); text-transform: uppercase; letter-spacing: 0.04em; }
.gabarito .ressalva-texto { font-family: var(--sans); font-size: 0.92rem; margin: 4px 0 8px; }
mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 2px; }

.quiz-acoes { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 20px; }
.quiz-acoes > .quiz-nav:last-child { margin-left: auto; flex-wrap: nowrap; }

/* ---------------------------------------------------------------- fim e desempenho */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 10px 0 18px; }
.numeros div { background: var(--surface-2); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; }
.numeros strong { font-family: var(--serif); font-size: 1.6rem; color: var(--accent-ink); line-height: 1.2; }
.numeros span { font-size: 0.82rem; color: var(--ink-soft); }
.fim-lista { list-style: none; padding: 0; margin: 0 0 18px; max-height: 300px; overflow: auto; font-size: 0.9rem; }
.fim-lista li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.fim-marca { font-weight: 700; width: 1.2em; }
.fim-lista li.ok .fim-marca { color: var(--ok); }
.fim-lista li.err .fim-marca { color: var(--err); }
.acoes-fim { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.barras { display: flex; flex-direction: column; gap: 10px; }
.barra-linha { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; align-items: center; gap: 10px; font-size: 0.88rem; }
.barra-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-trilho { height: 12px; background: var(--err-bg); border-radius: 6px; overflow: hidden; }
.barra-ok { height: 100%; background: var(--ok); border-radius: 6px 0 0 6px; }
.barra-valor { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fracos { list-style: none; padding: 0; margin: 8px 0 0; }
.fracos li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }

/* Conta online (login, cadastro, minha conta) */
.form-conta { display: flex; flex-direction: column; gap: 6px; }
.form-conta .rotulo-campo { margin-top: 8px; }
.form-conta .btn-primario { margin-top: 14px; align-self: flex-start; }
.form-conta .check { margin-top: 8px; align-items: flex-start; }
.form-conta .check input { flex: none; margin-top: 2px; }
.links-conta { display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 0 0; }
.sem-conta { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); }
.excluir-conta { margin-top: 28px; }
.excluir-conta .aviso p { margin: 0 0 10px; }
#tela-conta .checks { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.form-conta a { color: var(--accent-ink); }

/* O que mais cai */
.barras-freq .barra-trilho { background: var(--surface-2); }
.barras-freq .barra-ok { background: var(--accent); }
.mc-lista { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.mc-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.mc-texto { min-width: 0; }
.mc-titulo { font-weight: 600; overflow-wrap: anywhere; }
.mc-info { font-size: 0.86rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mc-assuntos { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; }
.mc-btn { flex: none; }
.mc-sem { flex: none; font-size: 0.78rem; color: var(--ink-soft); text-align: right; max-width: 9em; }
.mc-acoes { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }

/* Tempo limite por questão */
.quiz-tempo { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.quiz-tempo.acabando { color: var(--err); }

/* Grupos de estudo */
.grupo-convite { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); }
.grupo-codigo { font-size: 1.1rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.grupo-linha { justify-content: flex-start; }
.grupo-linha .mc-texto { flex: 1; }
.grupo-pos { flex: none; font-weight: 600; min-width: 2em; font-variant-numeric: tabular-nums; }
.grupo-eu { border-color: var(--accent); }
.grupo-form-simulado { display: flex; flex-wrap: wrap; gap: 8px; }
.grupo-form-simulado select { flex: 1 1 160px; min-width: 0; }
#grupo-confirmacao p, #fim-grupo p { margin: 0 0 10px; }

/* Animações ao confirmar: brilho e estrelinhas no acerto, tremor no erro. */
.feedback-titulo { position: relative; }
.feedback.brilho { animation: brilho 1s ease-out; }
@keyframes brilho {
  0% { box-shadow: 0 0 0 0 var(--ok); }
  35% { box-shadow: 0 0 14px 4px var(--ok); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.estrela {
  position: absolute; top: 0; pointer-events: none; color: var(--destaque); font-size: 1rem; line-height: 1;
  opacity: 0; animation: estrela 1.1s ease-out forwards;
}
@keyframes estrela {
  0% { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(1.15) rotate(120deg); opacity: 0; }
}
.cartao.tremer { animation: tremer 0.42s ease-in-out; }
@keyframes tremer {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(4px); }
}
/* Aparelho que pede menos movimento: o mesmo aviso sem deslocamento (estrelas acendem no lugar;
   no erro, o cartão pisca em vermelho em vez de tremer). */
@media (prefers-reduced-motion: reduce) {
  .estrela { animation-name: estrela-fixa; }
  .cartao.tremer { animation: erro-brilho 0.7s ease-out; }
}
@keyframes estrela-fixa {
  0%, 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.8); }
  40% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); }
}
@keyframes erro-brilho { 0% { box-shadow: 0 0 0 0 var(--err); } 35% { box-shadow: 0 0 14px 4px var(--err); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Forca: palavra descoberta — as partes vermelhas somem, o boneco salvo desce até o chão
   e sai andando com um "Ufa!". */
.forca-livre { opacity: 0; stroke: var(--ok); stroke-width: 3; fill: none; stroke-linecap: round; }
.forca-ufa { fill: var(--ok); stroke: none; font: 700 18px system-ui, sans-serif; opacity: 0; }
.forca-painel.salvo .forca-parte { opacity: 0; }
.forca-painel.salvo .forca-livre { animation: forca-sai 2.8s ease-in-out forwards; }
.forca-painel.salvo .forca-ufa { animation: forca-ufa 2.8s ease-out forwards; }
.forca-painel.salvo .forca-perna { transform-origin: 80px 74px; animation: forca-passo 0.35s ease-in-out 0.75s 6 alternate; }
.forca-painel.salvo .forca-perna-b { animation-direction: alternate-reverse; }
@keyframes forca-sai {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: 1; transform: translate(0, 0); }
  26% { opacity: 1; transform: translate(0, 18px); }
  100% { opacity: 1; transform: translate(52px, 18px); }
}
@keyframes forca-passo { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes forca-ufa { 0%, 22% { opacity: 0; } 32%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .forca-painel.salvo .forca-livre { animation: forca-aparece 0.6s ease-out forwards; transform: translate(52px, 18px); }
  .forca-painel.salvo .forca-perna { animation: none; }
  .forca-painel.salvo .forca-ufa { animation: forca-aparece 0.6s ease-out forwards; }
}
@keyframes forca-aparece { from { opacity: 0; } to { opacity: 1; } }

/* Ordenar: ao confirmar, os pedaços certos acendem em onda e, se tudo estiver certo,
   se juntam numa frase só; os fora de lugar balançam. */
.ordenar-montagem { transition: gap 0.4s ease, border-color 0.4s ease; }
.ordenar-montagem .pedaco { transition: padding 0.4s ease, border-color 0.4s ease, background-color 0.4s ease; }
.ordenar-montagem .pedaco.correta { animation: pedaco-onda 0.5s ease-out both; }
.ordenar-montagem .pedaco.errada { animation: pedaco-balanca 0.45s ease-in-out; }
.ordenar-montagem.unida { gap: 0 4px; border-color: var(--ok); border-style: solid; }
.ordenar-montagem.unida .pedaco { padding: 2px; border-color: transparent; background: transparent; }
@keyframes pedaco-onda {
  0% { transform: scale(1); box-shadow: 0 0 0 0 var(--ok); }
  45% { transform: scale(1.08); box-shadow: 0 0 10px 2px var(--ok); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
@keyframes pedaco-balanca {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ordenar-montagem .pedaco.correta { animation-name: pedaco-acende; }
  .ordenar-montagem .pedaco.errada { animation: none; }
}
@keyframes pedaco-acende { 0% { box-shadow: 0 0 0 0 var(--ok); } 45% { box-shadow: 0 0 10px 2px var(--ok); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Certo/errado: botão afunda ao tocar; ao confirmar, carimbo com o gabarito numa linha abaixo do texto. */
.ce-btn.selecionada { animation: aperta 0.18s ease-out; }
@keyframes aperta { 0% { transform: scale(0.94); } 100% { transform: scale(1); } }
.carimbo-linha { display: flex; justify-content: flex-end; margin: -6px 0 14px; padding-right: 6px; }
.carimbo {
  display: inline-block; pointer-events: none;
  font-family: var(--sans); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 12px; border: 3px double currentColor; border-radius: 6px; background: transparent;
  transform: rotate(-10deg); opacity: 0.85; animation: carimbo 0.38s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.carimbo.ok { color: var(--ok); }
.carimbo.err { color: var(--err); }
@keyframes carimbo {
  0% { transform: rotate(-10deg) scale(2.4); opacity: 0; }
  60% { opacity: 0.95; }
  100% { transform: rotate(-10deg) scale(1); opacity: 0.85; }
}

/* Caça ao erro: marca-texto ao tocar; ao confirmar, círculo de caneta nas palavras achadas,
   as que faltaram piscam e as marcadas sem razão balançam. */
.palavra { position: relative; }
@keyframes marca-texto { from { background-size: 0% 100%; } }
.palavra.correta::after {
  content: ''; position: absolute; inset: -5px -7px; border: 2px solid var(--ok); border-radius: 50%;
  transform: rotate(-4deg); pointer-events: none; animation: circula 0.45s ease-out var(--atraso, 0ms) both;
}
@keyframes circula {
  0% { transform: rotate(-40deg) scale(0.4); opacity: 0; }
  100% { transform: rotate(-4deg) scale(1); opacity: 1; }
}
.palavra.faltou { animation: faltou-pisca 0.5s ease-in-out 3; }
@keyframes faltou-pisca { 50% { background: var(--ok-bg); } }
.palavra.errada { animation: pedaco-balanca 0.45s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .ce-btn.selecionada, .palavra.errada, .palavra.selecionada { animation: none; }
  .carimbo { animation: forca-aparece 0.4s ease-out both; }
  .palavra.correta::after { animation: forca-aparece 0.4s ease-out var(--atraso, 0ms) both; }
}

/* Caça ao erro: quantas palavras procurar. Forca perdida: "Ops!" ao lado do boneco. */
.caca-conta { font-size: 0.88rem; color: var(--ink-soft); margin: -8px 0 12px; }
.forca-ops { fill: var(--err); stroke: none; font: 700 18px system-ui, sans-serif; opacity: 0; }
.forca-painel.enforcado .forca-ops { animation: forca-aparece 0.5s ease-out 0.2s forwards; }

/* O que mais cai — mapa dos artigos mais cobrados de cada lei (um cartão colorido por lei). */
.mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 12px; }
.mapa-cartao {
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--cor);
  border-radius: 12px; padding: 12px 14px 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.mapa-cab { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.mapa-pos {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--cor); color: var(--surface);
  display: grid; place-items: center; font-weight: 700; font-size: 0.82rem; font-variant-numeric: tabular-nums;
}
.mapa-tit { min-width: 0; }
.mapa-lei { font-family: var(--serif); font-weight: 600; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.mapa-sub { font-size: 0.8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mapa-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mapa-barra {
  width: 100%; display: grid; grid-template-columns: 5.6em 1fr 2.2em; align-items: center; gap: 8px;
  font: inherit; font-size: 0.86rem; color: var(--ink); background: none; border: 0; border-radius: 6px;
  padding: 4px 6px; text-align: left; cursor: pointer; transition: background-color 0.15s;
}
button.mapa-barra:hover, button.mapa-barra:focus-visible { background: var(--surface-2); outline: none; }
.mapa-barra.sem { cursor: default; opacity: 0.55; }
.mapa-art { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-trilho { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.mapa-enche {
  display: block; height: 100%; border-radius: 5px; background: var(--cor);
  transform-origin: left; animation: mapa-cresce 0.6s ease-out both;
}
.mapa-n { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
@keyframes mapa-cresce { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .mapa-enche { animation: none; } }

/* Botão "← Voltar" no alto de todas as telas. */
.voltar-barra { margin: 0 0 10px; }
.btn-voltar {
  font: inherit; font-size: 0.92rem; font-weight: 500; color: var(--accent-ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
.btn-voltar:hover, .btn-voltar:focus-visible { border-color: var(--accent); outline: none; }

/* ---------------------------------------------------------------- tela inteira
   Celular e tablet: menu em cima, como sempre. A partir de 900px: menu fixo à esquerda
   e o programa ocupa o resto da tela, com largura adequada a cada tela. */
.lateral .topo { flex-wrap: wrap; max-width: 720px; }
.btn-tema {
  flex: none; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
  color: var(--ink); font: 500 0.9rem var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-tema .tema-texto { display: none; }
#tela-filtros .filtros-colunas { display: grid; }
.filtros-coluna > .campo:first-child { margin-top: 0; }
.filtros-coluna + .filtros-coluna { margin-top: 20px; }
#des-graficos { display: grid; gap: 0 36px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
#des-fracos-bloco { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .programa:not(.sem-lateral) { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
  .programa:not(.sem-lateral) .lateral {
    position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 18px;
    padding: 24px 16px; background: var(--surface); border-right: 1px solid var(--line);
  }
  .programa:not(.sem-lateral) .topo { display: contents; }
  .programa:not(.sem-lateral) .marca { order: 1; padding: 0 8px; }
  .programa:not(.sem-lateral) .marca-nome { font-size: 1.7rem; }
  .programa:not(.sem-lateral) .abas { order: 2; flex-direction: column; padding: 0; margin: 0; max-width: none; gap: 4px; }
  .programa:not(.sem-lateral) .aba { flex: none; text-align: left; border: 0; border-radius: var(--radius); padding: 10px 12px; color: var(--ink); font-size: 0.98rem; }
  .programa:not(.sem-lateral) .aba:hover { background: var(--surface-2); }
  .programa:not(.sem-lateral) .aba.ativa { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
  .programa:not(.sem-lateral) .planta-mini { order: 3; margin-top: auto; flex-direction: column; width: 100%; padding: 12px; background: var(--surface-2); border-radius: var(--radius); }
  .programa:not(.sem-lateral) .planta-mini-desenho { width: 110px; height: 110px; }
  .programa:not(.sem-lateral) .planta-mini-texto { display: flex; text-align: center; }
  .programa:not(.sem-lateral) .placar { order: 4; flex-wrap: wrap; justify-content: space-around; }
  .programa:not(.sem-lateral) .placar-perfil { flex: 1 0 100%; max-width: none; }
  .programa:not(.sem-lateral) .btn-tema { order: 5; width: 100%; height: auto; padding: 8px 12px; border-radius: 999px; }
  .programa:not(.sem-lateral) .btn-tema .tema-texto { display: inline; }

  .programa:not(.sem-lateral) .app { max-width: none; width: 100%; margin: 0; padding: 28px 36px 48px; }
  .programa:not(.sem-lateral) #tela-quiz, .programa:not(.sem-lateral) #tela-fim { max-width: 980px; margin-inline: auto; }
  .programa:not(.sem-lateral) #tela-grupos { max-width: 960px; margin-inline: auto; }
  .programa:not(.sem-lateral) #tela-conta { max-width: 620px; margin-inline: auto; }
  .programa:not(.sem-lateral) .voltar-barra { max-width: 980px; margin-inline: auto; }
  .programa:not(.sem-lateral) #tela-filtros .filtros-colunas { grid-template-columns: 1fr 1fr; gap: 0 48px; }
  .programa:not(.sem-lateral) .filtros-coluna + .filtros-coluna { margin-top: 0; }
}
@media (max-width: 520px) {
  .marca-sub { display: none; }
  .lateral .topo { padding-top: 12px; gap: 8px; }
  .placar { gap: 8px; }
  .placar-perfil { max-width: 78px; padding: 6px 8px; }
  .placar-item span { font-size: 0.62rem; max-width: 3.6em; text-align: center; }
  .abas { gap: 4px; flex-wrap: wrap; }
  .aba { flex: 1 1 auto; padding: 8px 6px; font-size: 0.78rem; white-space: nowrap; }
}

/* Ranking do simulado do grupo: centralizado, com os três primeiros em destaque. */
#grupo-resultado-bloco { max-width: 600px; margin-inline: auto; }
#grupo-resultado-bloco > h1 { text-align: center; }
#grupo-resultado .grupo-linha:nth-child(-n+3) { padding-block: 14px; }
#grupo-resultado .grupo-linha:nth-child(-n+3) .grupo-pos { font-family: var(--serif); font-size: 1.3rem; color: var(--destaque); }
#grupo-resultado .grupo-linha:first-child { background: var(--destaque-soft); border-color: var(--destaque); }

/* ---------------------------------------------------------------- planta */
.planta-mini { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--ink); padding: 0; cursor: pointer; font: inherit; border-radius: var(--radius); }
.planta-mini:disabled { cursor: default; }
.planta-mini-desenho { display: block; width: 44px; height: 44px; flex: none; }
.planta-mini-desenho svg, .planta-grande svg, .planta-etapa svg { display: block; width: 100%; height: 100%; }
.planta-mini-texto { display: none; flex-direction: column; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.3; }
.planta-mini-texto strong { color: var(--ink); font-family: var(--serif); font-size: 1rem; }
.pl-terra { fill: var(--pl-terra); } .pl-semente { fill: var(--pl-semente); } .pl-tronco { fill: var(--pl-tronco); }
.pl-caule { stroke: var(--pl-folha2); stroke-width: 3; stroke-linecap: round; fill: none; }
.pl-galho { stroke: var(--pl-tronco); stroke-width: 3; stroke-linecap: round; fill: none; }
.pl-folha { fill: var(--pl-folha); } .pl-folha2 { fill: var(--pl-folha2); }
.pl-flor { fill: var(--pl-flor); } .pl-miolo { fill: var(--pl-miolo); } .pl-fruto { fill: var(--pl-fruto); }
.planta-murcha .ev-planta { filter: saturate(0.35) sepia(0.35); transform: rotate(-4deg); transform-origin: 60px 104px; }
.evo-novidade { font-weight: 600; color: var(--destaque); }

/* Escolha do caminho */
.evo-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-top: 14px; }
.evo-opcao { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 14px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.evo-opcao:hover:not(:disabled) { border-color: var(--accent); }
.evo-opcao.ativa { border: 2px solid var(--accent); background: var(--accent-soft); cursor: default; }
.evo-opcao:disabled { opacity: 0.6; cursor: not-allowed; }
.evo-opcao-fig { display: block; width: 110px; height: 110px; }
.evo-opcao-fig svg { display: block; width: 100%; height: 100%; }
.evo-opcao-como { font-size: 0.85rem; color: var(--ink-soft); }
.evo-opcao-hoje { font-size: 0.85rem; font-weight: 500; }
.evo-escolhas { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 20px; }
.evo-mudar { display: block; }
.evo-campo { min-width: 0; }
.evo-campo .rotulo-campo { margin-bottom: 6px; }
.evo-colecao { grid-column: 1 / -1; margin-top: 10px; }

/* Boneco */
.bn-pele { fill: #C98F63; } .bn-cabelo { fill: #33241A; } .bn-calca { fill: #39424E; } .bn-sapato { fill: #1F2227; }
.bn-camisa { fill: var(--accent); }
.bn-toga { fill: #17181A; stroke: var(--bn-contorno); stroke-width: 0.8; }
.bn-gola { fill: #FFFFFF; }
.bn-terno { fill: #3A4452; stroke: var(--bn-contorno); stroke-width: 0.4; } .bn-terno-linha { stroke: #3A4452; }
.bn-gravata { fill: var(--err); } .bn-lenco { fill: var(--accent); }
.bn-contorno-corda { stroke: #A7B0BB; stroke-width: 3.4; stroke-linecap: round; }
.bn-olho { fill: #1F2227; } .bn-boca { fill: none; stroke: #1F2227; stroke-width: 0.8; stroke-linecap: round; }
.bn-braco { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.bn-toga-linha { stroke: #17181A; } .bn-camisa-linha { stroke: var(--accent); }
.bn-livro { fill: var(--destaque); } .bn-madeira { fill: #8B5A2B; }
.ev-degrau { fill: var(--ink-soft); opacity: 0.35; }
.ev-estante { fill: var(--pl-tronco); opacity: 0.22; } .ev-prateleira, .ev-chao { fill: var(--pl-tronco); }
.ev-mais { fill: var(--ink-soft); font: 700 8px var(--sans, sans-serif); }
.ev-toc { font: 700 12px var(--sans); fill: var(--destaque); opacity: 0; }

/* Animações: regador; martelo; subir o degrau; levar o livro à prateleira. */
.ev-regador-corpo { fill: var(--accent); }
.ev-regador-escuro { fill: var(--accent-ink); }
.ev-regador-alca { stroke: var(--accent-ink); stroke-width: 2.6; fill: none; stroke-linecap: round; }
/* Entra de cima à direita, inclina até o bico apontar para baixo, despeja, endireita e sai. */
.ev-regador { transform-origin: 93px 31px; animation: ev-rega 4.6s ease-in-out both; }
@keyframes ev-rega {
  0% { transform: translate(45px, -22px); opacity: 0; }
  10% { opacity: 1; }
  22% { transform: none; opacity: 1; }
  34% { transform: rotate(-50deg); }
  50% { transform: rotate(-54deg); }
  62% { transform: rotate(-48deg); }
  72% { transform: rotate(-50deg); opacity: 1; }
  84% { transform: none; opacity: 1; }
  100% { transform: translate(45px, -22px); opacity: 0; }
}
.ev-gota { fill: #4FA8E8; opacity: 0; animation: ev-gota 0.75s cubic-bezier(0.5, 0, 0.9, 0.6) both; }
@keyframes ev-gota {
  0% { transform: none; opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--q)); opacity: 0; }
}
.ev-cresce { transform-origin: 60px 104px; animation: ev-cresce 1.2s cubic-bezier(0.2, 1.4, 0.4, 1) 2.4s both; }
@keyframes ev-cresce { 0% { transform: scale(0.72); } 100% { transform: scale(1); } }
/* Estudante: vira as páginas do livro aberto. */
.bn-capa { fill: var(--accent-ink); } .bn-folha { fill: #FBFAF5; stroke: #B9BDC4; stroke-width: 0.4; }
.ev-pagina { transform-origin: 0 -24px; animation: ev-pagina 1.1s ease-in-out 0.3s 3 both; }
@keyframes ev-pagina { 0% { transform: scaleX(1); } 45% { transform: scaleX(0.05); } 100% { transform: scaleX(-1); } }

/* Terno e toga: o braço levanta o martelo e bate na base, três vezes. */
.bn-madeira-escura { fill: #5E3A1A; }
.ev-bate { transform-origin: 9px -35px; animation: ev-bate 0.9s ease-in 0.3s 3 both; }
@keyframes ev-bate { 0% { transform: rotate(-60deg); } 45% { transform: rotate(-68deg); } 68% { transform: rotate(0); } 78% { transform: rotate(-7deg); } 100% { transform: rotate(-60deg); } }
.ev-toc { animation: ev-toc 0.9s linear 0.3s 3 both; }
@keyframes ev-toc { 0%, 66% { opacity: 0; } 70%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* Subir o degrau: passos no degrau de baixo, salto, comemoração. */
.ev-sobe { animation: ev-sobe 2.6s ease-in-out both; }
@keyframes ev-sobe {
  0% { transform: translate(-16px, 4px); }
  35% { transform: translate(-10px, 4px); }
  48% { transform: translate(-5px, -7px); }
  60%, 100% { transform: none; }
}
.ev-sobe .bn-perna-a, .ev-anda .bn-perna-a { transform-origin: -3.5px -14px; }
.ev-sobe .bn-perna-b, .ev-anda .bn-perna-b { transform-origin: 3.5px -14px; }
.ev-sobe .bn-perna-a { animation: ev-passo 0.3s ease-in-out 5 alternate; }
.ev-sobe .bn-perna-b { animation: ev-passo 0.3s ease-in-out 5 alternate-reverse; }
@keyframes ev-passo { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
.ev-comemora { transform-origin: 9px -35px; animation: ev-comemora 2.6s ease-in-out both; }
@keyframes ev-comemora { 0%, 58% { transform: none; } 70%, 92% { transform: rotate(-150deg); } 100% { transform: none; } }
.ev-brilho { opacity: 0; transform-box: fill-box; transform-origin: center; animation: ev-brilho 0.7s ease-out both; }
@keyframes ev-brilho { 0% { opacity: 0; transform: scale(0.2); } 40% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(0.8); } }

/* Biblioteca: anda, sobe a escada, guarda o livro e desce. */
.ev-escada { stroke: var(--pl-tronco); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.ev-anda { animation: ev-anda 5.4s linear both; }
@keyframes ev-anda {
  0% { transform: none; }
  32% { transform: translate(var(--cx), 0); }
  48%, 72% { transform: translate(var(--cx), var(--cy)); }
  88%, 100% { transform: translate(var(--cx), 0); }
}
.ev-anda .bn-perna-a { animation: ev-perna-a 5.4s linear both; }
.ev-anda .bn-perna-b { animation: ev-perna-b 5.4s linear both; }
@keyframes ev-perna-a { 0%, 32%, 48%, 72%, 88%, 100% { transform: none; } 4%, 12%, 20%, 28% { transform: rotate(20deg); } 8%, 16%, 24% { transform: rotate(-20deg); } 36%, 44%, 76%, 84% { transform: rotate(14deg); } 40%, 80% { transform: rotate(-14deg); } }
@keyframes ev-perna-b { 0%, 32%, 48%, 72%, 88%, 100% { transform: none; } 4%, 12%, 20%, 28% { transform: rotate(-20deg); } 8%, 16%, 24% { transform: rotate(20deg); } 36%, 44%, 76%, 84% { transform: rotate(-14deg); } 40%, 80% { transform: rotate(14deg); } }
.ev-braco { transform-origin: 9px -35px; animation: ev-braco 5.4s ease-in-out both; }
@keyframes ev-braco { 0%, 50% { transform: none; } 60%, 70% { transform: rotate(var(--ang)); } 82%, 100% { transform: none; } }
.ev-livro-mao { animation: ev-livro-mao 5.4s linear both; }
@keyframes ev-livro-mao { 0%, 62% { opacity: 1; } 63%, 100% { opacity: 0; } }
.ev-livro { animation: ev-livro 5.4s ease-out both; }
@keyframes ev-livro { 0%, 62% { opacity: 0; transform: translateX(-5px); } 63% { opacity: 1; transform: translateX(-5px); } 70%, 100% { opacity: 1; transform: none; } }
.planta-painel { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 24px; align-items: center; margin: 0 0 22px; padding: 16px 18px; background: var(--surface-2); border-radius: var(--radius); }
.planta-grande { width: 180px; }
.planta-grande svg { display: block; width: 100%; height: auto; }
.planta-painel h2 { margin: 0 0 2px; font-size: 1.35rem; }
.planta-painel p { margin: 4px 0; font-size: 0.95rem; }
.planta-barra { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; margin: 8px 0; }
.planta-barra div { height: 100%; background: var(--pl-folha2); border-radius: 5px; }
.planta-trilha { grid-column: 1 / -1; list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
.planta-etapa { text-align: center; font-size: 0.74rem; color: var(--ink-soft); line-height: 1.25; }
.planta-etapa span { display: block; width: 52px; height: 52px; margin: 0 auto 2px; }
.planta-etapa small { display: block; font-size: 0.7rem; }
.planta-etapa.futura span { opacity: 0.25; filter: grayscale(1); }
.planta-etapa.atual { color: var(--ink); font-weight: 600; }
@media (max-width: 520px) { .planta-painel { grid-template-columns: 1fr; justify-items: center; text-align: center; } .planta-painel > div { width: 100%; } }

/* ---------------------------------------------------------------- Hoje (js/hoje.js) */
.hoje-meta { padding: 16px 18px; background: var(--surface-2); border-radius: var(--radius); margin: 0 0 14px; }
.hoje-meta-linha { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hoje-meta-num { font-family: var(--serif); font-size: 1.9rem; color: var(--ink); }
.btn-grande { font-size: 1.15rem; padding: 14px 28px; width: 100%; max-width: 420px; }
.hoje-escolhas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; margin: 22px 0 26px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hoje-escolhas .campo { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.hoje-escolhas select { max-width: 260px; }
@media (max-width: 420px) { .hoje-escolhas { grid-template-columns: 1fr; } }
.hoje-barra-geral { height: 14px; margin: 6px 0 14px; }
.hoje-andamento h2 { font-size: 1.2rem; margin: 0 0 6px; }
.hoje-leis { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.hoje-leis li { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 52px; align-items: center; gap: 10px; font-size: 0.9rem; }
.hoje-leis .planta-barra { margin: 0; }
.hoje-lei-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoje-lei-num { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Ler a lei (mapa de calor) */
.lei-escolha { display: grid; gap: 6px; max-width: 640px; }
.lei-opcoes { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; margin: 12px 0 8px; }
.lei-vel { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.lei-legenda { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; font-size: 0.8rem; }
.lei-legenda span { padding: 2px 10px; border-radius: 999px; border-left: 4px solid transparent; }
.leitura-art { padding: 10px 14px; margin: 0 0 8px; border-left: 5px solid var(--line); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface); }
.calor-0 { border-left-color: var(--line); }
.calor-1 { border-left-color: var(--calor1-borda); background: var(--calor1); }
.calor-2 { border-left-color: var(--calor2-borda); background: var(--calor2); }
.calor-3 { border-left-color: var(--calor3-borda); background: var(--calor3); color: var(--calor3-tinta); }
.calor-3 .link, .calor-3 .leitura-selo, .calor-3 strong { color: var(--calor3-tinta); }
.calor-3 .leitura-mudou { color: var(--calor3); background: var(--calor3-tinta); }
.leitura-titulo { text-align: center; font-family: var(--serif); font-size: 1.45rem; line-height: 1.3; margin: 18px 0 16px; padding: 12px 8px; color: var(--accent-ink); border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
.leitura-art.lendo { outline: 2px solid var(--accent); }
.leitura-topo { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; font-size: 0.85rem; margin-bottom: 4px; }
.leitura-selo { font-weight: 700; color: var(--accent-ink); }
.leitura-art p { margin: 4px 0; line-height: 1.55; }
.leitura-paragrafo { margin-left: 0; }
.leitura-inciso, .leitura-pena { margin-left: 18px !important; }
.leitura-alinea { margin-left: 36px !important; }
.leitura-item { margin-left: 54px !important; }
.lei-voz { position: sticky; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; margin-top: 12px; background: var(--accent-soft); border-radius: var(--radius); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); }
#lei-mais { margin: 8px 0; }
.leitura-mudou { display: inline-block; margin-left: 6px; padding: 0 8px; font-size: 0.75rem; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; white-space: nowrap; }
.leitura-mudou::before { content: '🆕 '; }

#config-carreira { max-width: 360px; }
.hoje-carreira { display: block; padding: 8px 0; }

/* ---------------------------------------------------------------- O que mudou (tabela só para leitura) */
.mudou-ano { margin: 12px 0 6px; }
.sem-copia { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mudou-tab { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.mudou-tab th { text-align: left; padding: 8px 10px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.mudou-tab td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.mudou-ref { white-space: nowrap; font-weight: 600; color: var(--accent-ink); }
.mudou-alt { font-size: 0.85rem; color: var(--ink-soft); min-width: 150px; }
.mudou-alt div + div { margin-top: 4px; }
@media (max-width: 640px) {
  .mudou-tab thead { display: none; }
  .mudou-tab tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .mudou-tab td { display: block; border: 0; padding: 2px 0; }
  .mudou-ref { white-space: normal; }
}
#confunda-comecar { margin-top: 10px; }
.mudou-antes { color: var(--ink-soft); }
.mudou-versao + .mudou-versao { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.mudou-versao-rot { font-size: 0.78rem; font-weight: 600; color: var(--accent-ink); margin-bottom: 2px; }
.mudou-sem { font-size: 0.85rem; font-style: italic; }
.mudou-rotulo { display: none; }
@media (max-width: 640px) {
  .mudou-rotulo { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-ink); margin-top: 6px; }
}