/* ══ ACADEMIA DO CAPIBLU (academia.js) ══════════════════════════════════ */

/* Botão na barra lateral e o chip de XP */
.nav-btn-academia { position: relative; }
.ac-chip {
  position: absolute; right: 10px; top: 10px; font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; font-weight: 600; color: #fff; background: var(--terracota);
  padding: 2px 7px; border-radius: 999px; letter-spacing: .02em;
}

/* ── Herói: nível, barra de XP, próximo passo ── */
.ac-heroi {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--blue) 0%, #1E4265 60%, #2c5a85 100%);
  color: #fff; padding: 22px 24px; border-radius: 10px; margin-bottom: 18px;
}
.ac-avatar {
  --pct: 0; width: 86px; height: 86px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: conic-gradient(var(--terracota) calc(var(--pct) * 1%), rgba(255,255,255,.18) 0);
}
.ac-avatar span {
  width: 70px; height: 70px; border-radius: 50%; background: #1E4265; display: grid; place-items: center;
  font-size: 40px; animation: ac-respira 3.2s ease-in-out infinite;
}
@keyframes ac-respira { 50% { transform: translateY(-3px) rotate(-4deg); } }
.ac-heroi-info { flex: 1; min-width: 220px; }
.ac-heroi-nivel { font-size: 1.35rem; font-weight: 700; }
.ac-barra { height: 10px; background: rgba(255,255,255,.18); border-radius: 999px; margin: 8px 0 6px; overflow: hidden; max-width: 420px; }
.ac-barra i { display: block; height: 100%; background: linear-gradient(90deg, #E0A53B, var(--terracota)); border-radius: 999px; transition: width .8s cubic-bezier(.22,1,.36,1); }
.ac-heroi-sub { font-size: .88rem; color: #C6D8E5; }
.ac-heroi-sub b { color: #fff; }
.ac-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .8rem; color: #C6D8E5; }
.ac-heroi-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--terracota) !important; border-radius: 8px !important; }
.ac-heroi-btn:hover { filter: brightness(1.08); }
.ac-heroi-btn small { font-weight: 500; font-size: .76rem; opacity: .9; }
.ac-heroi-fim { font-weight: 700; }

/* ── Abas ── */
.ac-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--gray-200); margin-bottom: 18px; overflow-x: auto; }
.ac-aba {
  border: none; background: none; padding: 10px 14px; font-size: .92rem; font-weight: 600;
  color: var(--gray-600); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap;
}
.ac-aba:hover { color: var(--blue); }
.ac-aba.active { color: var(--blue); border-bottom-color: var(--terracota); }

/* ── Trilha: caminho vertical de capítulos ── */
.ac-trilha { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 10px; }
.ac-trilha::before { content: ""; position: absolute; left: 25px; top: 20px; bottom: 20px; border-left: 3px dashed var(--gray-300); }
.ac-no { position: relative; }
.ac-no-btn {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 14px 12px 0;
  transition: transform .15s, border-color .15s, box-shadow .15s; font: inherit; color: inherit;
}
.ac-no-btn:hover { transform: translateX(4px); border-color: var(--blue); box-shadow: var(--shadow-float); }
.ac-no-icone {
  width: 44px; height: 44px; margin-left: -22px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; background: var(--gray-100);
  border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--gray-300);
}
.ac-no.meio .ac-no-icone { box-shadow: 0 0 0 2px var(--terracota); background: var(--terracota-soft); }
.ac-no.feito .ac-no-icone { box-shadow: 0 0 0 2px var(--green); background: var(--green); color: #fff; font-weight: 700; }
.ac-no-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ac-no-n { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); }
.ac-no-t { font-weight: 700; color: var(--gray-900); }
.ac-no-r { font-size: .84rem; color: var(--gray-600); }
.ac-no-st { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ac-estrelas { color: #D49A2A; letter-spacing: 2px; font-size: 15px; }
.ac-estrelas-vazia { color: var(--gray-300); }
.ac-estrelas-grande { font-size: 30px; }
.ac-tag-xp, .ac-tag-lido {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.ac-tag-xp { background: var(--amber-soft); color: var(--amber); }
.ac-tag-lido { background: var(--green-soft); color: var(--green); }

/* ── Missões ── */
.ac-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ac-card {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; padding: 16px;
  display: flex; flex-direction: column; gap: 6px; transition: transform .15s, box-shadow .15s;
}
.ac-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
.ac-card.feito { border-color: var(--green); background: linear-gradient(180deg, var(--green-soft), #fff 60%); }
.ac-card-i { font-size: 30px; }
.ac-card-t { font-weight: 700; color: var(--gray-900); }
.ac-card-d { font-size: .86rem; color: var(--gray-600); flex: 1; }
.ac-card-pe { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; margin: 4px 0 6px; }
.ac-card .btn-primary, .ac-card .btn-secondary { padding: 9px 14px; }

/* ── Conquistas e níveis ── */
.ac-conqs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ac-conq { background: #fff; border: 1px dashed var(--gray-300); border-radius: 10px; padding: 14px; text-align: center; opacity: .6; }
.ac-conq.ok { opacity: 1; border: 1px solid #D49A2A; background: linear-gradient(180deg, var(--amber-soft), #fff 70%); }
.ac-conq-i { font-size: 32px; filter: grayscale(1); }
.ac-conq.ok .ac-conq-i { filter: none; }
.ac-conq-n { font-weight: 700; margin-top: 4px; font-size: .9rem; }
.ac-conq-d { font-size: .78rem; color: var(--gray-600); margin-top: 2px; }
.ac-niveis { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-nivel { background: #fff; border: 1px solid var(--gray-200); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; font-size: .85rem; color: var(--gray-500); }
.ac-nivel.ok { border-color: var(--green); color: var(--gray-900); }
.ac-nivel span { font-family: "IBM Plex Mono", monospace; font-size: 11px; }

/* ── Modal ── */
.ac-modal-fundo {
  position: fixed; inset: 0; z-index: 1200; background: rgba(26,29,33,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ac-modal {
  background: #fff; border-radius: 12px; width: 100%; max-width: 460px; max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
}
.ac-modal-largo { max-width: 680px; }
.ac-modal-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--gray-100); }
.ac-modal-cab h3 { margin: 0; font-size: 1.1rem; color: var(--gray-900); }
.ac-x { border: none; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--gray-500); padding: 0 4px; }
.ac-modal-corpo { padding: 18px 20px; overflow-y: auto; }
.ac-modal-pe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--gray-100); }
.ac-modal-pe .btn-primary, .ac-modal-pe .btn-secondary { padding: 10px 16px; }
.ac-cap-n { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 8px; }
.ac-cap-texto { line-height: 1.65; color: var(--gray-800); }
.ac-cap-texto p { margin: 0 0 10px; }
.ac-cap-texto ul, .ac-cap-texto ol { margin: 0 0 10px; padding-left: 20px; }
.ac-cap-texto li { margin-bottom: 6px; }
.ac-box { background: var(--terracota-soft); border-left: 4px solid var(--terracota); padding: 10px 14px; border-radius: 6px; margin: 10px 0; line-height: 1.55; }
.ac-g, .ac-p { font-size: .82em; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.ac-g { background: var(--green-soft); color: var(--green); }
.ac-p { background: var(--amber-soft); color: var(--amber); }
.ac-mudo { color: var(--gray-500); font-size: .88rem; }

/* ── Quiz ── */
.ac-quiz-p { font-size: 1.08rem; font-weight: 700; color: var(--gray-900); margin: 4px 0 14px; line-height: 1.45; }
.ac-ops { display: grid; gap: 8px; }
.ac-op {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; cursor: pointer;
  background: #fff; border: 2px solid var(--gray-200); border-radius: 10px; padding: 11px 14px;
  font: inherit; color: var(--gray-800); transition: border-color .15s, background .15s;
}
.ac-op:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-soft); }
.ac-op:disabled { cursor: default; }
.ac-op-l { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--gray-100); font-weight: 700; font-size: .82rem; }
.ac-op.certa { border-color: var(--green); background: var(--green-soft); }
.ac-op.certa .ac-op-l { background: var(--green); color: #fff; }
.ac-op.errada { border-color: var(--red); background: var(--red-soft); }
.ac-op.errada .ac-op-l { background: var(--red); color: #fff; }
.ac-porque { margin-top: 12px; padding: 10px 14px; border-radius: 8px; line-height: 1.5; }
.ac-porque.ok { background: var(--green-soft); color: var(--green); }
.ac-porque.nok { background: var(--amber-soft); color: var(--amber); }
.ac-pontos { display: flex; gap: 5px; margin-bottom: 10px; }
.ac-pontos i { flex: 1; height: 5px; border-radius: 3px; background: var(--gray-200); }
.ac-pontos i.feito { background: var(--green); }
.ac-pontos i.atual { background: var(--terracota); }

/* ── Comemorações ── */
.ac-festa { text-align: center; }
.ac-medalha {
  width: 84px; height: 84px; margin: 4px auto 10px; border-radius: 50%; display: grid; place-items: center;
  font-size: 42px; background: radial-gradient(circle at 35% 30%, #F4D58A, #D49A2A); box-shadow: 0 10px 24px -8px rgba(212,154,42,.7);
}
.ac-festa-nome { font-size: 1.25rem; font-weight: 700; margin: 0 0 4px; color: var(--gray-900); }
.ac-subiu { color: var(--terracota); margin: 6px 0; }
.ac-confete { position: fixed; width: 8px; height: 12px; border-radius: 2px; z-index: 1400; pointer-events: none; }
.ac-xp-voa {
  position: fixed; left: 50%; top: 38%; z-index: 1400; pointer-events: none;
  font-weight: 800; font-size: 26px; color: var(--terracota); text-shadow: 0 2px 0 #fff, 0 0 18px rgba(255,255,255,.9);
}
.ac-aviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 1400; background: var(--gray-900); color: #fff;
  padding: 10px 16px; border-radius: 8px; font-size: .9rem; max-width: calc(100vw - 32px);
}
.ac-conq-toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 1400; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 2px solid #D49A2A; border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow-float);
}
.ac-conq-toast-i { font-size: 30px; }

/* ── Tour ── */
.ac-bloco { position: fixed; z-index: 1100; background: rgba(15,46,74,.62); }
.ac-anel {
  position: fixed; z-index: 1101; pointer-events: none; border-radius: 8px;
  box-shadow: 0 0 0 3px var(--terracota), 0 0 0 9px rgba(168,90,44,.28);
  animation: ac-pulsa 1.6s ease-in-out infinite;
}
@keyframes ac-pulsa { 50% { box-shadow: 0 0 0 3px var(--terracota), 0 0 0 14px rgba(168,90,44,.12); } }
.ac-balao {
  position: fixed; z-index: 1102; width: 360px; max-width: calc(100vw - 24px);
  background: #fff; border-radius: 12px; padding: 14px 16px 12px; box-shadow: 0 24px 48px -16px rgba(0,0,0,.5);
}
.ac-balao-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ac-balao-missao { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--terracota); font-weight: 600; }
.ac-sair { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--gray-500); }
.ac-balao-corpo { display: flex; gap: 12px; align-items: flex-start; }
.ac-capi { font-size: 32px; line-height: 1; flex-shrink: 0; display: inline-block; }
.ac-balao-titulo { margin: 0 0 4px; font-size: 1rem; color: var(--gray-900); }
.ac-balao-texto { font-size: .9rem; line-height: 1.5; color: var(--gray-700); }
.ac-dica { margin-top: 8px; font-size: .85rem; background: var(--blue-soft); padding: 6px 10px; border-radius: 6px; }
.ac-dica-rot { font-weight: 700; color: var(--blue); margin-right: 6px; }
.ac-sumiu { color: var(--amber); font-size: .84rem; margin: 6px 0 0; }
.ac-balao-pe { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ac-balao-pe .btn-primary, .ac-balao-pe .btn-secondary { padding: 7px 14px; font-size: .85rem; }
.ac-espera { flex: 1; text-align: center; font-size: .78rem; color: var(--gray-500); }
.ac-espera-alerta { color: var(--red); font-weight: 600; }

@media (max-width: 640px) {
  .ac-heroi { padding: 18px; gap: 14px; }
  .ac-heroi-btn { width: 100%; align-items: center; }
  .ac-no-r { display: none; }
  .ac-trilha { padding-left: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-avatar span, .ac-anel { animation: none; }
}

/* ── Símbolos (ícones SVG de traço, academia.js › ICONES) ──
   1em: o tamanho vem do font-size de quem os contém, como acontecia com o emoji. */
.ac-ic { width: 1em; height: 1em; vertical-align: -.14em; flex-shrink: 0; }
.ac-card-i { color: var(--blue); }
.ac-conq-i { color: var(--gray-500); }
.ac-conq.ok .ac-conq-i { color: var(--amber); }
.ac-no-icone { color: var(--blue); }
.ac-no.meio .ac-no-icone { color: var(--terracota); }
.ac-medalha { color: #fff; }
.ac-avatar span { color: #fff; font-size: 36px; }
.ac-capi { color: var(--terracota); font-size: 28px; }
.ac-conq-toast-i { color: var(--amber); }
.ac-box-i { color: var(--terracota); margin-right: 2px; }
.ac-stats span, .ac-aba, .ac-heroi-fim { display: inline-flex; align-items: center; gap: 6px; }
.ac-pos { font-family: "IBM Plex Mono", monospace; color: var(--terracota); }
.nav-ic { width: 1em; height: 1em; vertical-align: -.14em; margin-right: 4px; }