/* ============================================================
   EM QUESTÕES — Design System Estratégia Militar
   Dourado #FFB001 · Preto quente #1A1611 · Inter + Playfair
   ============================================================ */

:root {
  --brand: #FFB001;
  --brand-light: #FFD24D;
  --brand-dark: #B37700;
  --grad: linear-gradient(165deg, #B37700 0%, #FFB001 50%, #FFD24D 100%);

  --red: #E63946;
  --green: #2A9D8F;

  /* tema escuro (padrão) */
  --bg: #1A1611;
  --bg-2: #241F18;
  --bg-3: #2E2820;
  --border: #3A332A;
  --text: rgba(255, 255, 255, 0.88);
  --text-2: rgba(255, 255, 255, 0.62);
  --muted: #8A8580;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);

  /* CORES DE DISCIPLINA — faixa fechada de 8 tons (âmbar, terracota, oliva,
     aço, bordô, chumbo, latão, campo). Nada de arco-íris: todos assentam no
     fundo escuro e nenhum briga com o dourado da marca. */
  --d1: #E2A03F; --d2: #C9773F; --d3: #8FA45C; --d4: #5B8FA8;
  --d5: #B0808A; --d6: #8189BE; --d7: #C6A94F; --d8: #6FA490;
}

[data-theme="light"] {
  /* dourado escurecido no tema claro para manter contraste AA em texto/ícones */
  --brand: #8A5600;
  --brand-light: #9E6500;
  --brand-dark: #6F4500;
  --grad: linear-gradient(165deg, #C58100 0%, #FFB001 52%, #FFD24D 100%);
  --bg: #FAF7F0;
  --bg-2: #FFFFFF;
  --bg-3: #F3EEE2;
  --border: #EDE6D4;
  --text: #2A2419;
  --text-2: #5C5546;
  --muted: #6B655E;
  --shadow: 0 6px 24px rgba(120, 100, 60, 0.12);
  /* mesmos tons, escurecidos para manter o texto legível no claro */
  --d1: #9A6612; --d2: #98501F; --d3: #5A6E30; --d4: #2F5F78;
  --d5: #7C4A54; --d6: #4E568B; --d7: #856C16; --d8: #3C6F5D;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth;
  /* iOS Safari infla fontes por conta própria e estoura a largura da página */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* nada pode alargar a página além da tela (corta qualquer elemento rebelde
   e mantém a bottomnav/cards ancorados na largura REAL do aparelho) */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
.card, .patente-card, .acao-card, .plano-card { min-width: 0; max-width: 100%; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;  /* fallback navegadores antigos */
  min-height: 100dvh;
}

/* vinheta dourada de quartel ao fundo (sutil) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 38% at 50% -4%, rgba(255, 176, 1, 0.085), transparent 62%),
    radial-gradient(46% 32% at 88% 104%, rgba(255, 176, 1, 0.05), transparent 60%);
}
[data-theme="light"] body::before { opacity: 0.55; }
#app, .bottomnav, #overlay { position: relative; z-index: 1; }
/* instalado como app (tela cheia), o conteúdo avança sob o notch/relógio:
   compensa as áreas seguras do aparelho no topo e nas laterais */
#app {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.bottomnav { position: fixed; }
/* o overlay precisa empilhar ACIMA da bottomnav (z 50), senão o modal
   (z 100, mas preso DENTRO do contexto do overlay) fica embaixo da barra
   e o botão do rodapé do modal some atrás dela */
#overlay { z-index: 90; }

h1, h2, h3, .serif { font-family: "Playfair Display", Georgia, serif; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }

/* ---------- layout geral ---------- */

#app { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
  display: none;
  flex-direction: column;
  width: 240px;
  min-height: 100vh;
  min-height: 100dvh;
  position: sticky; top: 0;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  gap: 4px;
}

.sidebar .brand-row { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.sidebar .brand-row img { width: 42px; height: 42px; }
.sidebar .brand-row .b-name { font-weight: 800; font-size: 15px; letter-spacing: 0.2px; }
.sidebar .brand-row .b-sub { font-size: 11px; color: var(--muted); }

.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 10px;
  color: var(--text-2); font-weight: 600; font-size: 14px;
  transition: background 0.15s, color 0.15s;
  width: 100%; text-align: left;
}
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-item:hover { background: var(--bg-3); color: var(--text); }
.nav-item.active { background: rgba(255, 176, 1, 0.12); color: var(--brand); }

main {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  /* respiro inferior folgado: nada pode sumir atrás da bottomnav fixa */
  padding: 18px 16px calc(124px + env(safe-area-inset-bottom));
}

/* header mobile */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0 14px;
}
.topbar .brand-row { display: flex; align-items: center; gap: 10px; }
.topbar img { width: 38px; height: 38px; }
.topbar .b-name { font-weight: 800; font-size: 14px; }
.topbar .b-sub { font-size: 10.5px; color: var(--muted); }
.icon-btn {
  width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--text-2);
}
.icon-btn svg { width: 18px; height: 18px; }

/* bottom nav mobile */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; /* acompanha o nº de itens do NAV */
  background: var(--bg-2); /* fallback p/ navegadores sem color-mix */
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
}
.bottomnav button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 1px; color: var(--muted); font-size: 9.5px; font-weight: 600;
  border-radius: 10px; min-width: 0;
}
.bottomnav button svg { width: 21px; height: 21px; }
.bottomnav button.active { color: var(--brand); }

/* modo auth: esconde navegação enquanto deslogado */
body.auth-mode .bottomnav, body.auth-mode .sidebar { display: none !important; }

@media (min-width: 900px) {
  .sidebar { display: flex; }
  .bottomnav, .topbar { display: none; }
  main { padding: 28px 32px 60px; }
  body.auth-mode .topbar { display: flex; }
}

/* ---------- componentes ---------- */

.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}

.card + .card, .stack > * + * { margin-top: 12px; }

.h-page { font-size: 26px; font-weight: 800; margin-bottom: 2px; }
.h-page::after {
  content: ""; display: block; width: 46px; height: 4px;
  border-radius: 99px; background: var(--grad); margin-top: 7px;
}
.h-page[style*="text-align:center"]::after, .h-page[style*="text-align: center"]::after { margin-left: auto; margin-right: auto; }
.sub { color: var(--text-2); font-size: 13.5px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; font-weight: 700; font-size: 15px;
  padding: 13px 20px; transition: transform 0.08s, filter 0.15s;
  width: 100%; text-decoration: none;
}
a.btn { color: var(--text); }
a.btn svg { width: 15px; height: 15px; }
.btn:active { transform: scale(0.985); }
.btn-primary { background: var(--grad); color: #241A05; box-shadow: 0 4px 16px rgba(255, 176, 1, 0.25); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline { border: 1.5px solid var(--border); color: var(--text); background: var(--bg-2); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost { color: var(--text-2); font-weight: 600; }
.btn-sm { padding: 10px 14px; font-size: 13.5px; width: auto; border-radius: 10px; min-height: 44px; }
.btn-danger { background: rgba(230, 57, 70, 0.12); color: var(--red); border: 1px solid rgba(230, 57, 70, 0.3); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.assuntos-scroll { max-height: 210px; overflow-y: auto; padding-right: 4px; }
.assuntos-scroll .chip { font-size: 12.5px; padding: 9px 13px; white-space: normal; text-align: left; line-height: 1.3; max-width: 100%; }
.chip {
  padding: 11px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  border: 1.5px solid var(--border); color: var(--text-2); background: var(--bg-2);
  transition: all 0.15s;
}
.chip.on { border-color: var(--brand); color: var(--brand); background: rgba(255, 176, 1, 0.1); }
/* assunto que veio do edital pela teoria: não está no catálogo, mas é alvo do aluno */
.chip-edital { border-style: dashed; }
.chip-edital::before { content: "🎯 "; }

/* pills de metadados */
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
  background: var(--bg-3); color: var(--text-2); border: 1px solid var(--border);
}
.pill.gold { background: rgba(255, 176, 1, 0.12); color: var(--brand); border-color: rgba(255, 176, 1, 0.3); }
.pill.red { background: rgba(230, 57, 70, 0.1); color: var(--red); border-color: rgba(230, 57, 70, 0.25); }
.pill.green { background: rgba(42, 157, 143, 0.12); color: var(--green); border-color: rgba(42, 157, 143, 0.3); }

/* ---------- dashboard ---------- */

.saudacao { margin: 6px 0 18px; }
.saudacao h1 { font-size: 25px; line-height: 1.16; letter-spacing: -0.01em; }
.saudacao .nome { color: var(--brand); }

/* card de patente: ouro sólido e crafted (sem shimmer agitado), com brilho sutil */
.patente-card {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #FFC23A 0%, #FFB001 58%, #EDA200 100%);
  color: #231903;
  border-radius: 18px; padding: 18px 20px;
  box-shadow: 0 14px 34px -14px rgba(255, 176, 1, 0.5);
}
.patente-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 132px; height: 132px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); pointer-events: none; z-index: 0; }
.patente-card > * { position: relative; z-index: 1; }
.patente-card .pat-nome { font-family: "Playfair Display", serif; font-size: 23px; font-weight: 800; letter-spacing: -0.01em; margin-top: 2px; }
.patente-card .xp-bar { height: 7px; background: rgba(35, 25, 3, 0.2); border-radius: 99px; margin-top: 14px; overflow: hidden; }
.patente-card .xp-fill { height: 100%; background: #231903; border-radius: 99px; transition: width 0.6s ease; }
.patente-card .xp-info { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; margin-top: 7px; opacity: 0.78; }

/* frase motivacional do dia (QG) — acento dourado lateral, mais limpo */
.frase-dia {
  position: relative; overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-2);
  border-radius: 16px; padding: 15px 16px 15px 19px; margin-bottom: 12px;
}
.frase-dia::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.frase-dia .fd-rotulo {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.frase-dia .fd-texto {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17.5px; line-height: 1.6; font-weight: 500;
  letter-spacing: -0.003em; color: var(--text);
}
.frase-dia .fd-acoes { margin-top: 12px; }

.acoes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.acao-card {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px;
  padding: 15px; text-align: left; display: flex; flex-direction: column;
  transition: border-color 0.15s, transform 0.08s;
}
.acao-card:hover { border-color: var(--brand); }
.acao-card:active { transform: scale(0.98); }
.acao-card .ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 176, 1, 0.12); color: var(--brand); margin-bottom: 11px;
}
.acao-card .ico svg { width: 21px; height: 21px; }
.acao-card .t { font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; }
.acao-card .d { font-size: 11.5px; color: var(--text-2); line-height: 1.4; margin-top: 3px; }

.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.kpi .v { font-size: 26px; font-weight: 800; font-family: "Playfair Display", serif; color: var(--brand); }
.kpi .l { font-size: 11.5px; color: var(--text-2); font-weight: 600; margin-top: 2px; }

.semana { display: flex; align-items: flex-end; gap: 8px; height: 90px; padding-top: 8px; }
.semana .dia { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.semana .barra { width: 100%; max-width: 34px; background: var(--bg-3); border-radius: 6px 6px 3px 3px; min-height: 4px; position: relative; overflow: hidden; }
.semana .barra .fill { position: absolute; bottom: 0; left: 0; right: 0; background: var(--grad); border-radius: 6px 6px 3px 3px; }
.semana .lbl { font-size: 10px; color: var(--muted); font-weight: 700; }

/* ---------- questão ---------- */

.q-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.q-prog { font-size: 13px; font-weight: 700; color: var(--text-2); }
.q-timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--brand); background: rgba(255,176,1,0.1); padding: 4px 10px; border-radius: 8px; }

/* enunciado: fonte de LEITURA (Inter), não de título — Playfair é bonita em
   destaques curtos, mas cansa em bloco de texto. Corpo maior e mais respiro
   pra facilitar a leitura da questão. */
.enunciado {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18.5px; line-height: 1.72; font-weight: 500;
  letter-spacing: 0.004em; color: var(--text); margin: 14px 0 18px;
}
.suporte {
  background: var(--bg-3); border-left: 3px solid var(--brand);
  padding: 14px 16px; border-radius: 0 10px 10px 0;
  font-size: 15.5px; line-height: 1.7; color: var(--text); margin: 12px 0; white-space: pre-wrap;
}

.alts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.alt {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  border: 1.5px solid var(--border); background: var(--bg-2);
  border-radius: 12px; padding: 14px 15px; font-size: 16px; line-height: 1.58;
  transition: all 0.15s; width: 100%;
}
.alt .letra {
  font-family: "Playfair Display", serif; font-weight: 800; font-size: 16px;
  color: var(--brand); min-width: 22px;
}
.alt:hover { border-color: rgba(255, 176, 1, 0.5); }
.alt.sel { border-color: var(--brand); background: rgba(255, 176, 1, 0.08); }
.alt.certa { border-color: var(--green); background: rgba(42, 157, 143, 0.15); }
.alt.errada { border-color: var(--red); background: rgba(230, 57, 70, 0.08); }
.alt:disabled { cursor: default; }
.alt:disabled:hover { border-color: var(--border); }
.alt.certa:disabled:hover { border-color: var(--green); }
.alt.errada:disabled:hover { border-color: var(--red); }

.gabarito-box {
  background: rgba(255, 176, 1, 0.1); border: 1px solid rgba(255, 176, 1, 0.35);
  border-radius: 12px; padding: 14px; margin-bottom: 12px;
}
.gabarito-box .g-t { font-family: "Playfair Display", serif; font-size: 19px; font-weight: 800; color: var(--brand); }
.resultado-flag { font-weight: 800; font-size: 14px; }
.resultado-flag.ok { color: var(--green); }
.resultado-flag.erro { color: var(--red); }

.comentario { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--bg-2); }
.comentario h4 { font-family: "Inter", sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--brand); margin: 14px 0 6px; }
.comentario h4:first-child { margin-top: 0; }
.comentario p, .comentario li { font-size: 15px; line-height: 1.65; color: var(--text); }
.comentario ul { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.coment-head {
  display: flex; gap: 11px; align-items: center;
  margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.coment-av {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad); display: grid; place-items: center;
  font-family: "Playfair Display", serif; font-weight: 800; font-size: 19px; color: #241A05;
  box-shadow: 0 3px 12px rgba(255, 176, 1, 0.3);
}
.coment-head b { font-size: 14.5px; }
.coment-head i { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); }

.share-img { width: 100%; border-radius: 14px; border: 1px solid rgba(255, 176, 1, 0.35); display: block; }

.banner-sessao {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 1.5px solid var(--brand) !important;
  background: linear-gradient(160deg, rgba(255, 176, 1, 0.12), transparent 60%), var(--bg-2);
  margin-bottom: 12px; cursor: pointer;
  animation: banner-pulse 2.4s ease-in-out infinite;
}
@keyframes banner-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 176, 1, 0); }
  50% { box-shadow: 0 0 22px rgba(255, 176, 1, 0.22); }
}

.ponto-crucial {
  background: rgba(255, 176, 1, 0.1); border: 1px solid rgba(255, 176, 1, 0.3);
  border-radius: 10px; padding: 13px; font-size: 15px; line-height: 1.6; margin-top: 6px;
}
.fonte-legal { font-size: 13.5px; color: var(--text-2); font-style: italic; margin-top: 6px; }

.pegadinha {
  background: rgba(230, 57, 70, 0.08); border: 1px solid rgba(230, 57, 70, 0.3);
  border-radius: 12px; padding: 14px 15px; font-size: 15px; line-height: 1.6; margin-top: 12px;
}
.pegadinha b { color: var(--red); }

/* A BARRA DE AÇÃO DA QUESTÃO GRUDA NO PÉ DA TELA.
   Era um flex comum: numa questão longa no celular, o botão de responder (e
   depois o "Próxima →") ficava abaixo da dobra. O aluno escolhia a alternativa,
   não via botão nenhum e ficava preso — "arrastei, cliquei, fiz de tudo já".
   Grudado acima da barra de abas, ele está sempre ao alcance do polegar. */
.q-acoes {
  display: flex; gap: 10px; margin-top: 16px;
  position: sticky; bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 20; flex-wrap: wrap;
  padding: 10px 0 4px;
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}
.q-acoes .btn { flex: 1 1 auto; min-width: 140px; }
.q-acoes .btn-sm { flex: 0 1 auto; min-width: 0; }
@media (min-width: 900px) { .q-acoes { position: static; background: none; padding: 0; } }

/* ---------- forms ---------- */

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--text-2); }
.input, select.input {
  width: 100%; padding: 12px 14px; border-radius: 11px;
  border: 1.5px solid var(--border); background: var(--bg-2); color: var(--text);
  outline: none; transition: border-color 0.15s; font-size: 16px;
}
/* ⚠️ REGRA DE OURO iOS: campo de texto com fonte < 16px faz o Safari dar
   ZOOM na página ao focar — e a página fica "cortada" à direita depois.
   TODO campo de digitação tem que ter 16px no mínimo. */
input:not([type="range"]):not([type="checkbox"]), select, textarea { font-size: 16px; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 176, 1, 0.16); }
select.input { appearance: none; }

input[type="range"] { width: 100%; accent-color: var(--brand); }

.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.switch-row .sl { font-size: 14px; font-weight: 600; }
.switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0; border-radius: 99px; background: var(--bg-3);
  border: 1px solid var(--border); transition: background 0.2s; cursor: pointer;
}
.switch .track::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: var(--muted); top: 2px; left: 2px; transition: all 0.2s;
}
.switch input:checked + .track { background: rgba(255, 176, 1, 0.25); border-color: var(--brand); }
.switch input:checked + .track::after { background: var(--brand); left: 22px; }

/* ---------- editais ---------- */

.estados-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.estado-card {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 10px; text-align: center; transition: border-color 0.15s;
}
.estado-card:hover { border-color: var(--brand); }
.estado-card .uf { font-family: "Playfair Display", serif; font-size: 22px; font-weight: 800; color: var(--brand); }
.estado-card .nm { font-size: 11px; color: var(--text-2); font-weight: 600; margin-top: 2px; }
.estado-card .badge { margin-top: 7px; font-size: 9.5px; }

.badge {
  display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.4px; padding: 3px 8px; border-radius: 6px;
}
.badge.aberto { background: rgba(42, 157, 143, 0.15); color: var(--green); }
.badge.banca { background: rgba(255, 176, 1, 0.14); color: var(--brand); }
.badge.previsto { background: var(--bg-3); color: var(--text-2); }

.concurso-card { border-left: 3px solid var(--brand); }
.concurso-card .cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.concurso-card h3 { font-size: 18px; }
.cc-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 10px; }
.cc-info .ci { font-size: 13px; }
.cc-info .ci b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); font-weight: 700; }

.disc-check { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.disc-check:last-child { border-bottom: none; }
.disc-check input { accent-color: var(--brand); width: 17px; height: 17px; }
.disc-check.done span { color: var(--muted); text-decoration: line-through; }

/* ---------- estatísticas ---------- */

.bar-row { margin-bottom: 12px; }
.bar-row .br-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.bar-row .br-track { height: 9px; background: var(--bg-3); border-radius: 99px; overflow: hidden; }
.bar-row .br-fill { height: 100%; border-radius: 99px; background: var(--grad); transition: width 0.5s; }
.bar-row.fraco .br-fill { background: var(--red); }
.bar-row.forte .br-fill { background: var(--green); }

.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }
.tab {
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: var(--text-2); white-space: nowrap; border: 1.5px solid var(--border); background: var(--bg-2);
}
.tab.on { background: var(--brand); color: #241A05; border-color: var(--brand); }

/* ---------- pomodoro ---------- */

.pomo-wrap { text-align: center; padding: 24px 0; }
.pomo-timer {
  font-family: "Playfair Display", serif; font-size: 54px; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--brand);
  position: relative; z-index: 1;
}
.pomo-fase { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-2); margin-bottom: 10px; }
.pomo-ring { width: 230px; height: 230px; margin: 0 auto 18px; position: relative; display: grid; place-items: center; border-radius: 50%; }
.pomo-ring svg.ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.pomo-ring circle { fill: none; stroke-width: 9; }
.pomo-ring .ring-bg { stroke: var(--bg-3); }
.pomo-ring .ring-fg { stroke: url(#gradRing); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }

/* ---------- simulado resultado ---------- */

.nota-grande {
  text-align: center; padding: 24px 0 10px;
}
.nota-grande .n { font-family: "Playfair Display", serif; font-size: 64px; font-weight: 800; color: var(--brand); line-height: 1; }
.nota-grande .d { color: var(--text-2); font-size: 13px; margin-top: 6px; }

.rev-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.rev-item:last-child { border: none; }
.rev-item .ic { font-weight: 800; font-size: 15px; min-width: 20px; }
.rev-item .ic.ok { color: var(--green); }
.rev-item .ic.erro { color: var(--red); }

/* ---------- planos (vitrine de venda) ---------- */
.plano-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .plano-grid { grid-template-columns: 1fr 1fr; } }
.plano-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 18px; padding: 20px 18px 18px;
}
.plano-card.destaque { border: 1.5px solid var(--brand); box-shadow: 0 0 28px rgba(255, 176, 1, 0.14); }
.plano-tag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #15110C; font-size: 10px; font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase; padding: 4px 12px;
  border-radius: 999px; white-space: nowrap;
}
.plano-nome { font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--text-2); }
.plano-preco { font-family: "Playfair Display", Georgia, serif; font-size: 30px; font-weight: 800; color: var(--brand); margin-top: 6px; line-height: 1; letter-spacing: -0.01em; }
.plano-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.plano-desc { font-size: 12.5px; color: var(--text-2); margin: 10px 0 14px; line-height: 1.5; }
.plano-tagline { font-size: 11.5px; color: var(--muted); margin-top: 3px; font-style: italic; }
.plano-itens { list-style: none; margin: 12px 0 8px; padding: 0; }
.plano-itens li { font-size: 12px; color: var(--text-2); padding: 3px 0; line-height: 1.4; }
.plano-itens li.nao { color: var(--muted); opacity: 0.7; }
.plano-aviso { font-size: 11.5px; color: var(--muted); margin: 2px 0 12px; }
/* banner de upgrade (troca de plano nativa) — só pra mensais */
.upgrade-banner { border: 1.5px solid var(--brand); text-align: left; margin-bottom: 16px; box-shadow: 0 0 24px rgba(255, 176, 1, 0.12); }
.upgrade-banner .ub-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.4px; color: var(--brand); background: rgba(255, 176, 1, 0.12); border: 1px solid rgba(255, 176, 1, 0.3); padding: 3px 10px; border-radius: 999px; margin-bottom: 9px; }
.upgrade-banner .ub-titulo { font-size: 17px; display: block; margin-bottom: 5px; }
.upgrade-banner .ub-sub { margin: 0 0 14px; line-height: 1.6; }
.upgrade-banner .btn { width: 100%; }

.ciclo-toggle { display: flex; width: fit-content; max-width: 100%; margin: 0 auto 16px; gap: 4px; background: var(--bg-2); border: 1.5px solid var(--brand); border-radius: 999px; padding: 4px; box-shadow: 0 0 16px rgba(255,176,1,.2); }
.ciclo-btn { display: inline-flex; align-items: center; gap: 7px; border: none; background: none; color: var(--text-2); font-size: 13px; font-weight: 700; padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.ciclo-btn.on { background: var(--brand); color: #15110C; }
.ciclo-eco { font-size: 9px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; color: #fff; background: #1f7a3a; padding: 2px 7px; border-radius: 999px; }
.ciclo-btn.on .ciclo-eco { background: #15110C; color: #7CF59A; }
.comp-tab { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.comp-tab th { color: var(--muted); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--border); text-align: center; }
.comp-tab th:first-child { text-align: left; }
.comp-tab td { padding: 7px 4px; border-bottom: 1px solid var(--border); color: var(--text-2); text-align: center; }
.comp-tab td:first-child { text-align: left; }

/* ---------- modal / toast / loading ---------- */

.modal-bg {
  position: fixed; inset: 0; z-index: 100; background: rgba(10, 8, 5, 0.7);
  backdrop-filter: blur(4px); display: grid; place-items: end center; padding: 0;
}
@media (min-width: 640px) { .modal-bg { place-items: center; padding: 20px; } }
.modal {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 20px 20px 0 0; width: 100%; max-width: 560px;
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
  max-height: 88vh; max-height: 88dvh; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  animation: slideup 0.22s ease;
}
/* com modal aberto, o fundo não rouba o gesto de rolagem (mobile) */
body.modal-aberto { overflow: hidden; }
/* Fallback para WebViews sem suporte completo à propriedade `inert`: o JS ainda
   contém o foco, e esta regra impede toque/seleção no conteúdo atrás do diálogo. */
body > [inert]:not(#overlay), .pdf-viewer[inert] { pointer-events: none; user-select: none; }
@media (min-width: 640px) { .modal { border-radius: 20px; } }
@keyframes slideup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal h3 { font-size: 20px; margin-bottom: 4px; }

.toast {
  position: fixed; bottom: calc(86px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: var(--bg-3); border: 1px solid var(--brand); color: var(--text);
  padding: 11px 18px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
  z-index: 200; box-shadow: var(--shadow); max-width: 92vw; text-align: center;
  animation: slideup 0.2s ease;
}
@media (min-width: 900px) { .toast { bottom: 30px; } }

.spinner {
  width: 38px; height: 38px; border-radius: 50%; margin: 0 auto;
  border: 3.5px solid var(--bg-3); border-top-color: var(--brand);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-box { text-align: center; padding: 36px 16px; }
.loading-box .msg { margin-top: 14px; font-weight: 700; color: var(--text-2); font-size: 14px; }

.empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.empty .e-ico { font-size: 40px; margin-bottom: 10px; }
.empty .e-t { font-family: "Playfair Display", serif; font-size: 18px; color: var(--text-2); font-weight: 700; }

.aviso {
  font-size: 12.5px; color: var(--text-2); background: var(--bg-3);
  border-radius: 10px; padding: 10px 12px; line-height: 1.5;
}

.divider { height: 1px; background: var(--border); margin: 16px 0; }

.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 700; font-size: 13.5px; margin-bottom: 12px; cursor: pointer; white-space: nowrap; }
.back-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.back-link:hover { color: var(--brand); }

.footer-note { text-align: center; color: var(--muted); font-size: 11.5px; margin-top: 28px; line-height: 1.6; }

/* ---------- landing / auth ---------- */

.landing { text-align: center; padding: 30px 12px 24px; max-width: 480px; margin: 0 auto; }
.landing-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); opacity: 0.9; margin-bottom: 16px; }
.landing-brasao { width: 104px; height: 104px; filter: drop-shadow(0 10px 30px rgba(255, 176, 1, 0.4)); animation: brasao-in 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.landing-h1 { font-size: 38px; line-height: 1.05; letter-spacing: -0.025em; margin-top: 18px; }
.landing-h1 span { color: var(--brand); }
.landing-foco { font-size: 14.5px; line-height: 1.55; color: var(--text-2); margin: 14px auto 0; max-width: 360px; }
.landing-foco b { color: var(--text); font-weight: 600; }
/* landing limpa, sem imagem de fundo (decisão de 11/06) */
.landing-orgaos { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.landing-orgaos span { font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--border); padding: 5px 11px; border-radius: 999px; }
.landing-stats { display: flex; justify-content: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.landing-stats .lst {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px;
  padding: 15px 20px; min-width: 120px;
}
.landing-stats .lst b { display: block; font-family: "Playfair Display", serif; font-size: 27px; color: var(--brand); letter-spacing: -0.01em; }
.landing-stats .lst span { font-size: 11px; color: var(--text-2); font-weight: 600; }
.landing-ctas { max-width: 380px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 10px; }
@keyframes brasao-in { from { transform: scale(0.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }

.erro-box { border: 1px solid rgba(230, 57, 70, 0.4); color: var(--red); margin-top: 12px; }

/* telas de autenticação */
.auth-wrap { max-width: 440px; margin: 0 auto; }
.auth-brasao {
  display: block; width: 76px; height: 76px; margin: 6px auto 12px;
  filter: drop-shadow(0 6px 20px rgba(255, 176, 1, 0.35));
  animation: brasao-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.auth-card {
  border-color: rgba(255, 176, 1, 0.3);
  box-shadow: 0 0 44px rgba(255, 176, 1, 0.07), var(--shadow);
}

/* mentoria — WhatsApp */
.card-mentoria {
  border: 1.5px solid rgba(255, 176, 1, 0.5);
  background:
    linear-gradient(160deg, rgba(255, 176, 1, 0.12), transparent 58%),
    var(--bg-2);
  box-shadow: 0 0 36px rgba(255, 176, 1, 0.08);
}
.btn-wa {
  background: #25D366; color: #06281A;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.3);
}
.card-mentoria-mini { padding: 12px 14px; }
.input-sm { padding: 9px 12px; font-size: 16px; } /* nunca < 16px: zoom do iOS */
.btn-wa:hover { filter: brightness(1.06); }
.btn-wa svg { width: 19px; height: 19px; }
a.btn-wa { color: #06281A; }

/* ---------- sala de instrução (aulas) ---------- */

.tema-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 1.5px solid var(--border); background: var(--bg-2);
  border-radius: 12px; padding: 13px 14px; font-size: 14.5px; font-weight: 600;
  transition: border-color 0.15s, transform 0.08s;
}
.tema-btn:hover { border-color: var(--brand); }
.tema-btn:active { transform: scale(0.985); }
.tema-btn .play-ico { color: var(--brand); display: grid; place-items: center; }
.tema-btn .play-ico svg { width: 22px; height: 22px; }
.tema-btn .ext-ico { color: var(--muted); }
.tema-btn .ext-ico svg { width: 15px; height: 15px; }

.link-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.link-row .btn { flex: 1; min-width: 120px; }

/* ---------- dinâmica / microinterações ---------- */

#view.anim-in > * { animation: fadeUp 0.34s ease both; }
#view.anim-in > *:nth-child(2) { animation-delay: 0.04s; }
#view.anim-in > *:nth-child(3) { animation-delay: 0.08s; }
#view.anim-in > *:nth-child(4) { animation-delay: 0.12s; }
#view.anim-in > *:nth-child(5) { animation-delay: 0.16s; }
#view.anim-in > *:nth-child(6) { animation-delay: 0.2s; }
#view.anim-in > *:nth-child(n+7) { animation-delay: 0.24s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.gabarito-box.fx-ok { animation: pop-ok 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.gabarito-box.fx-erro { animation: shake 0.4s ease; }
@keyframes pop-ok { 0% { transform: scale(0.94); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}

.xp-float {
  position: fixed; left: 50%; bottom: 30%; transform: translateX(-50%);
  z-index: 300; pointer-events: none;
  font-family: "Playfair Display", serif; font-weight: 800; font-size: 30px;
  color: var(--brand); text-shadow: 0 2px 16px rgba(255, 176, 1, 0.5);
  animation: xp-rise 1.25s ease-out forwards;
}
@keyframes xp-rise {
  0% { opacity: 0; transform: translate(-50%, 16px) scale(0.8); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -64px) scale(1); }
}

.acao-card .ico, .kpi .v { transition: transform 0.15s ease; }
.acao-card:hover .ico { transform: scale(1.08) rotate(-3deg); }

/* ---------- simulado: distribuição por matéria ---------- */

.step-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.step-row:last-child { border-bottom: none; }
.step-row.zerada { opacity: 0.42; }
.step-nome { font-size: 13.5px; font-weight: 600; min-width: 0; }
.step-max { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.step-ctrl { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.step-btn {
  width: 32px; height: 32px; border-radius: 9px;
  border: 1.5px solid var(--border); background: var(--bg-2); color: var(--text);
  font-weight: 800; font-size: 15px; display: grid; place-items: center;
  transition: border-color 0.15s, transform 0.08s;
}
.step-btn:hover { border-color: var(--brand); color: var(--brand); }
.step-btn:active { transform: scale(0.92); }
.step-val { min-width: 24px; text-align: center; font-weight: 800; font-size: 15px; color: var(--brand); font-variant-numeric: tabular-nums; }

/* ---------- ranking ---------- */

.rk-item { display: flex; align-items: center; gap: 11px; padding: 10px 6px; border-bottom: 1px solid var(--border); }
.rk-item:last-child { border-bottom: none; }
.rk-item.eu {
  background: rgba(255, 176, 1, 0.09); border: 1px solid rgba(255, 176, 1, 0.4);
  border-radius: 12px; margin: 4px -6px; padding: 10px 12px;
}
.rk-pos { font-family: "Playfair Display", serif; font-weight: 800; font-size: 15px; min-width: 34px; color: var(--text-2); }
.rk-av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-3); display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: var(--brand);
}
.rk-item.eu .rk-av { background: var(--grad); color: #241A05; }
.rk-free { font-size: 10px; vertical-align: middle; padding: 1px 5px; margin-left: 4px; border-radius: 6px; background: rgba(255,255,255,0.08); border: 1px solid var(--border); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============ SIMULADOS OFICIAIS ============ */

.sim-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  cursor: pointer;
  border: 1.5px solid rgba(255, 176, 1, 0.45);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.sim-cta:hover { transform: translateY(-1px); border-color: var(--brand); }
.sim-cta .ico { font-size: 24px; }

.sim-nota { font-size: 13.5px; margin-top: 8px; color: var(--text-2); }

.sim-regras {
  margin: 0 0 14px 18px;
  padding: 0;
  font-size: 13.5px;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cartao-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
  margin: 14px 0 16px;
  max-height: 280px;
  overflow: auto;
}
.cr-num {
  aspect-ratio: 1;
  min-height: 42px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg-3);
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
}
.cr-num.ok {
  border-color: var(--brand);
  background: rgba(255, 176, 1, 0.16);
  color: var(--brand);
}
.cr-num.atual { outline: 2px solid var(--brand); outline-offset: 1px; }
.cr-num.rev { position: relative; border-color: #6ea8ff; }
.cr-num.rev::after { content: "🔖"; position: absolute; top: -7px; right: -5px; font-size: 11px; line-height: 1; }

/* ---- brasão do órgão no simulado ---- */
.sim-brasao { height: auto; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }

/* ---- papo de quartel (discussão por questão) ---- */
.disc-bloco { margin-top: 12px; }
.disc-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0; border-top: 1px solid var(--border);
}
.disc-item:first-child { border-top: none; }
.disc-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.disc-form textarea { resize: vertical; min-height: 44px; font-size: 13.5px; }

/* ---- cartão-resposta seccionado por matéria ---- */
.cartao-corpo { max-height: 46vh; overflow: auto; margin: 12px 0 16px; }
.cartao-corpo .cartao-grid { max-height: none; overflow: visible; margin: 8px 0 14px; }
.cr-sec {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px;
  text-align: left;
}
.cr-sec-nome { font-weight: 800; font-size: 13px; }
.cr-sec-faixa { font-size: 11.5px; color: var(--brand); font-weight: 700; white-space: nowrap; }

/* ---- pastas de concursos na vitrine de simulados ---- */
.pasta-card {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin-bottom: 12px; cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.pasta-card:hover { transform: translateY(-1px); border-color: var(--brand); }
.pasta-card:active { transform: scale(.985); }
.pasta-card .pasta-ico { font-size: 36px; }
/* mesma entrada escalonada da teoria e da missão */
.pasta-card { animation: teoMatIn .38s cubic-bezier(.22,.9,.3,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) { .pasta-card { animation: none; } }
#sim-titulo .sim-brasao { vertical-align: middle; margin-right: 6px; }

/* ---- concurso atual + foto de perfil ---- */
.pasta-card.pasta-atual { border-color: var(--brand); }
.pasta-card.trancado { opacity: 0.72; }
.pasta-card.trancado img, .pasta-card.trancado .pasta-ico { filter: grayscale(0.7); }
.avatar-btn {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad); display: grid; place-items: center;
  overflow: hidden; flex-shrink: 0; cursor: pointer; padding: 0;
  border: 2px solid var(--border);
}
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.avatar-cam {
  position: absolute; right: -2px; bottom: -2px;
  background: var(--bg-2); border-radius: 50%; font-size: 12px;
  width: 20px; height: 20px; display: grid; place-items: center;
  border: 1px solid var(--border);
}

/* ---- freemium: paywall e cards trancados ---- */
.paywall-banner {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-bottom: 12px; cursor: pointer;
  border: 1.5px solid var(--brand); background: rgba(255,176,1,0.07);
}
.acao-card.trancado { position: relative; opacity: 0.82; }
.acao-card.trancado .ico { filter: grayscale(0.6); }
.lock-badge {
  position: absolute; top: 8px; right: 10px; font-size: 14px;
  opacity: 0.9; z-index: 1;
}

/* ============================================================
   NOVOS MÓDULOS — Conquista, Mais, Redação, Flashcards,
   Cronograma, Teoria, Visualizador de PDF
   ============================================================ */

/* --- conquista do dia (dashboard) --- */
.conquista-card {
  background: linear-gradient(135deg, rgba(255,176,1,.16), rgba(255,176,1,.04));
  border: 1px solid rgba(255,176,1,.35); border-radius: 16px; padding: 14px;
  margin-bottom: 12px;
}
.conquista-card .cq-top { display: flex; gap: 12px; align-items: center; }
.conquista-card .cq-badge { font-size: 30px; line-height: 1; flex-shrink: 0; }
.conquista-card .cq-titulo { font-weight: 800; font-size: 14.5px; line-height: 1.25; }
.conquista-card .cq-sub { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.conquista-card .btn { margin-top: 12px; }

/* --- painel "Mais" (☰) --- */
.mais-grid { display: flex; flex-direction: column; gap: 8px; }
.mais-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; cursor: pointer; color: var(--text); text-align: left;
}
.mais-item.on { border-color: var(--brand); }
.mais-item .mais-ic { width: 22px; height: 22px; color: var(--brand); flex-shrink: 0; }
.mais-item .mais-ic svg { width: 22px; height: 22px; }
.mais-item .mais-nm { flex: 1; font-weight: 700; font-size: 14px; }
.mais-item .mais-lock { width: 16px; color: var(--muted); }
.mais-item .mais-lock svg { width: 16px; height: 16px; }
.mais-item .mais-arr { color: var(--muted); font-size: 20px; }

/* --- grade de concursos (redação / teoria) --- */
.grid-concursos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.concurso-card {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 12px; text-align: center; cursor: pointer; color: var(--text);
  display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative;
}
.concurso-card:active { transform: scale(.98); }
.concurso-card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(255,176,1,.35); }
.concurso-card img { width: 56px; height: 56px; object-fit: contain; }
.concurso-card .cc-ph { width: 56px; height: 56px; color: var(--brand); }
.concurso-card .cc-ph svg { width: 56px; height: 56px; }
.concurso-card .cc-nome { font-weight: 700; font-size: 13px; line-height: 1.25; }
.concurso-card .cc-banca { font-size: 11px; color: var(--muted); }

/* concursos "em breve" (demonstração): borda tracejada dourada, brasão suave */
.pasta-card.embreve { border: 1px dashed rgba(255, 176, 1, 0.45); }
.concurso-card.embreve { border: 1px dashed rgba(255, 176, 1, 0.45); }
.pasta-card.embreve img, .concurso-card.embreve img { opacity: 0.92; }
.embreve-card { border: 1px dashed rgba(255, 176, 1, 0.4) !important; }
.concurso-card.embreve .lock-badge { background: rgba(255, 176, 1, 0.18); color: var(--brand); }

/* --- redação: hub e escolha --- */
.red-hub-head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.red-logo { width: 54px; height: 54px; object-fit: contain; flex-shrink: 0; }
.red-logo-ph { width: 48px; color: var(--brand); flex-shrink: 0; }
.red-logo-ph svg { width: 48px; height: 48px; }
.red-escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* --- temas / cards expansíveis / materiais --- */
.tema-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.tema-card > summary { padding: 12px 14px; cursor: pointer; display: flex; gap: 8px; align-items: center; list-style: none; font-size: 13px; }
.tema-card > summary::-webkit-details-marker { display: none; }
.tema-num { background: var(--brand); color: #241A05; font-weight: 800; font-size: 11px; border-radius: 6px; padding: 2px 6px; flex-shrink: 0; }
.tema-tit { flex: 1; font-weight: 700; line-height: 1.3; }
.tema-area { font-size: 10.5px; color: var(--muted); flex-shrink: 0; }
.tema-body { padding: 0 14px 14px; }
.tema-mot { font-size: 13px; line-height: 1.6; color: var(--text-2); background: var(--bg-3); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.tema-comando { font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
.material-card { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

/* --- segmented (tipo de envio) --- */
.seg { display: flex; gap: 6px; background: var(--bg-3); border-radius: 10px; padding: 4px; }
.seg-btn { flex: 1; border: none; background: transparent; color: var(--text-2); font-weight: 700; font-size: 13px; padding: 8px 4px; border-radius: 7px; cursor: pointer; }
.seg-btn.on { background: var(--brand); color: #241A05; }

/* --- correção: nota + blocos --- */
.nota-card { display: flex; gap: 16px; align-items: center; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.nota-grande { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 44px; line-height: 1; color: var(--brand); }
.nota-max { font-size: 18px; color: var(--muted); }
.nota-info { flex: 1; min-width: 0; }
.nota-veredito { display: inline-block; font-weight: 800; font-size: 12px; padding: 3px 10px; border-radius: 20px; background: rgba(230,57,70,.15); color: var(--red); margin-bottom: 4px; }
.nota-veredito.ok { background: rgba(42,157,143,.18); color: var(--green); }
.cor-bloco { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.cor-bloco > summary { padding: 12px 14px; cursor: pointer; font-weight: 700; font-size: 13.5px; list-style: none; }
.cor-bloco > summary::-webkit-details-marker { display: none; }
.cor-bloco-body { padding: 0 14px 14px; font-size: 13px; line-height: 1.65; color: var(--text-2); }

/* --- flashcards --- */
.fc-mini { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fc-mini-frente { font-weight: 600; font-size: 13px; line-height: 1.35; }
.fc-mini-acoes { display: flex; gap: 4px; flex-shrink: 0; }
.icon-btn-sm { background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; cursor: pointer; font-size: 14px; }
.flashcard { position: relative; min-height: 260px; background: var(--grad); border-radius: 18px; padding: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.flashcard .fc-face { display: none; width: 100%; text-align: center; color: #241A05; }
.flashcard:not(.flip) .fc-frente { display: block; }
.flashcard.flip { background: var(--bg-2); border: 2px solid var(--brand); }
.flashcard.flip .fc-verso { display: block; color: var(--text); }
.fc-rotulo { font-size: 11px; font-weight: 800; letter-spacing: 1px; opacity: .65; margin-bottom: 10px; }
.fc-conteudo { font-size: 17px; font-weight: 600; line-height: 1.5; }
.fc-toque { font-size: 12px; opacity: .6; margin-top: 14px; }

/* --- cronograma --- */
.cw-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; }
.cw-dia { text-align: center; font-size: 11px; }
.cw-dia span { display: block; color: var(--muted); margin-bottom: 3px; }
.cw-dia input { text-align: center; padding: 6px 2px; }
.cw-mat { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cw-mat-chk { flex: 1; display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.cw-mat-dif { width: 110px; flex-shrink: 0; }
.cron-prog { margin-bottom: 14px; }
.cron-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cron-nav .btn { width: auto; flex-shrink: 0; }
.cron-nav-tit { flex: 1; text-align: center; font-weight: 800; font-size: 14px; }
.cron-nav-tit .sub { display: block; font-weight: 400; font-size: 11px; }
.meta-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.meta-row:last-child { border-bottom: none; }
.meta-row input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--brand); }
.meta-txt { flex: 1; font-size: 13.5px; line-height: 1.35; }
.meta-row.feita .meta-txt { text-decoration: line-through; opacity: .55; }
.meta-rev { font-size: 10px; background: var(--bg-3); border-radius: 5px; padding: 1px 5px; color: var(--muted); }
.meta-h { font-size: 11px; color: var(--muted); flex-shrink: 0; }

/* --- teoria --- */
.teoria-card { opacity: .92; }
.teoria-soon { position: absolute; top: 6px; right: 6px; font-size: 9.5px; font-weight: 800; background: var(--brand); color: #241A05; border-radius: 6px; padding: 2px 6px; }
/* biblioteca de teoria (material escolhido → matérias → assuntos) */
/* ── CAPA DA TEORIA ────────────────────────────────────────────────────────
   Ocupa o cartão inteiro: brasão grande à esquerda, identidade do curso no
   meio, progresso embaixo. O brilho dourado atrás do brasão dá profundidade
   sem pedir imagem nova. */
.teo-capa {
  position: relative; overflow: hidden; margin-bottom: 14px; padding: 16px;
  border: 1px solid var(--border); border-radius: 18px; background: var(--bg-2);
  box-shadow: var(--shadow);
  animation: teoCapaIn .45s cubic-bezier(.22,.9,.3,1) both;
}
.teo-capa::before {
  content: ""; position: absolute; inset: -40% 55% 40% -30%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,176,1,.16), transparent 70%);
}
.teo-capa::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--grad); opacity: .9;
}
.teo-capa.travada::after { background: var(--border); }
.teo-capa-topo { position: relative; display: flex; align-items: center; gap: 14px; }
.teo-capa-brasao {
  flex: 0 0 auto; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
  animation: brasao-in .5s cubic-bezier(.22,.9,.3,1) both; animation-delay: .08s;
}
.teo-capa-brasao img { width: 60px; height: 60px; object-fit: contain; }
.teo-capa-brasao svg { width: 44px; height: 44px; color: var(--brand); }
.teo-capa-id { flex: 1; min-width: 0; display: grid; gap: 5px; }
.teo-capa-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand);
}
.teo-capa-nome {
  margin: 0; font-size: 19px; line-height: 1.22; font-weight: 800; color: var(--text);
  text-wrap: balance;
}
.teo-capa-trocar {
  flex: 0 0 auto; padding: 7px 12px; border-radius: 10px; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--text-2);
  background: transparent; border: 1px solid var(--border);
  transition: color .2s ease, border-color .2s ease, transform .18s cubic-bezier(.22,.9,.3,1);
}
.teo-capa-trocar:hover { color: var(--brand); border-color: rgba(255,176,1,.45); }
.teo-capa-trocar:active { transform: scale(.94); }
.teo-capa-prog { position: relative; margin-top: 14px; }
.teo-capa-linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--text-2); margin-bottom: 7px;
}
.teo-capa-linha b { font-size: 15px; color: var(--brand); font-variant-numeric: tabular-nums; }
.teo-capa-trilho {
  height: 7px; border-radius: 99px; background: var(--bg-3); overflow: hidden;
}
.teo-capa-trilho i {
  display: block; height: 100%; border-radius: 99px; background: var(--grad);
  animation: teoBarra .9s cubic-bezier(.22,.9,.3,1) both; animation-delay: .18s;
}
@keyframes teoCapaIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes teoBarra { from { width: 0 !important; } }

/* as caixinhas de matéria entram escalonadas, como as etapas da missão */
.teo-mat-card {
  animation: teoMatIn .38s cubic-bezier(.22,.9,.3,1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes teoMatIn { from { opacity: 0; transform: translateY(11px) scale(.985); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .teo-capa, .teo-capa-brasao, .teo-capa-trilho i, .teo-mat-card { animation: none; }
}
.teo-materia { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.teo-materia > summary { padding: 12px 14px; cursor: pointer; display: flex; gap: 8px; align-items: center; list-style: none; font-size: 13px; }
.teo-materia > summary::-webkit-details-marker { display: none; }
.teo-mat-num { background: var(--brand); color: #241A05; font-weight: 800; font-size: 11px; border-radius: 6px; padding: 2px 6px; flex-shrink: 0; }
.teo-mat-nome { flex: 1; font-weight: 700; line-height: 1.3; }
.teo-mat-tag { font-size: 10.5px; color: var(--muted); background: var(--bg-3); border-radius: 10px; padding: 2px 8px; flex-shrink: 0; }
.teo-assuntos { padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.teo-assunto { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; cursor: pointer; color: var(--text); }
.teo-assunto:active { transform: scale(.99); }
.teo-assunto .ta-ico { width: 16px; color: var(--brand); flex-shrink: 0; }
.teo-assunto .ta-ico svg { width: 16px; height: 16px; }
.teo-assunto .ta-nome { flex: 1; font-size: 12.5px; line-height: 1.3; min-width: 0; }
.teo-assunto .ta-go { font-size: 11px; font-weight: 800; color: var(--brand); flex-shrink: 0; }
.teo-assunto .ta-pct { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; font-weight: 700; }
.teo-assunto.teo-done { border-color: var(--brand); }
.teo-assunto.teo-done .ta-pct { color: var(--brand); }
/* Resumo Tático — seções por matéria */
.resumo-mat { margin-bottom: 14px; }
.resumo-mat-tit { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; letter-spacing: -.01em; padding: 2px 2px 4px; }
.resumo-mat-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 7px; background: rgba(255,176,1,.14); color: var(--brand); font-size: 11px; font-weight: 800; flex-shrink: 0; }
.resumo-mat .teo-assuntos { padding: 4px 0 0; }
.ls-cat { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--brand); margin: 14px 0 6px; }
.ls-fav { background: none; border: none; font-size: 16px; cursor: pointer; padding: 0 2px; flex-shrink: 0; line-height: 1; }
.ls-abrir { flex: 1; min-width: 0; background: none; border: none; text-align: left; cursor: pointer; color: var(--text); padding: 0; font: inherit; }
.rk-art { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.rk-pos { flex-shrink: 0; width: 22px; font-size: 11px; font-weight: 800; color: var(--brand); text-align: center; }
.rk-art-t { font-size: 12.5px; line-height: 1.3; }
.rk-bar { height: 5px; background: var(--bg-3); border-radius: 99px; margin-top: 3px; overflow: hidden; }
.rk-fill { height: 100%; background: linear-gradient(90deg, #d33, #FFB001); border-radius: 99px; }
.rk-n { flex-shrink: 0; font-weight: 800; font-size: 13px; color: var(--text); min-width: 32px; text-align: right; }
.teo-mat-card { gap: 8px; }
.teo-mat-card .teo-mat-bar { width: 100%; height: 4px; background: var(--bg-3); border-radius: 99px; margin-top: 6px; overflow: hidden; }
.teo-mat-card .teo-mat-fill { height: 100%; background: var(--brand); border-radius: 99px; transition: width .3s; }
.teo-mat-badge { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #241A05; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* --- visualizador de PDF protegido --- */
.pdf-viewer { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; box-sizing: border-box; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: #11100c; z-index: 9999; display: flex; flex-direction: column; }
/* A BARRA DO LEITOR ESTOURAVA: em tela estreita os botões saíam pela direita
   ("Ler o PDF", "Baixar" cortados). Agora ela rola na horizontal em vez de
   esconder ferramenta. */
.pdf-top {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: #1a1813; border-bottom: 1px solid #2a261d;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.pdf-top::-webkit-scrollbar { display: none; }
.pdf-top > * { flex-shrink: 0; }
.pdf-top .icon-btn { color: #fff; }
.pdf-tit { color: #fff; font-weight: 700; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-tools { display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; background: #1a1813; border-bottom: 1px solid #2a261d; }
.pdf-tool { flex-shrink: 0; background: #2a261d; color: #e8dcc0; border: 1px solid #3a332a; border-radius: 8px; padding: 7px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pdf-tool.on { background: var(--brand); color: #241A05; border-color: var(--brand); }
.pdf-scroll { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pdfpage { position: relative; box-shadow: 0 4px 18px rgba(0,0,0,.5); flex-shrink: 0; }
.pdfpage canvas { display: block; width: 100%; height: 100%; }
.pdf-ann-layer { position: absolute; inset: 0; touch-action: auto; }
.pdf-ann-layer.ativo { touch-action: none; cursor: crosshair; }
/* (leitor ANTIGO em canvas — escopo restrito p/ não afetar o <mark> inline do leitor de texto) */
.pdfpage .pdf-hl, .pdf-ann-layer .pdf-hl { position: absolute; background: rgba(255,214,0,.38); border-radius: 2px; pointer-events: auto; }
.pdf-note { position: absolute; transform: translate(-50%, -50%); font-size: 18px; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.pdf-wm { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 10px; color: rgba(180,140,40,.45); pointer-events: none; font-weight: 700; letter-spacing: .5px; }

@media (max-width: 520px) { .red-escolha { grid-template-columns: 1fr; } }

/* ===== Redação: correção enxuta (erros + proposta) ===== */
.erro-item { border-left: 3px solid var(--brand); padding: 8px 10px; margin-bottom: 10px; background: var(--bg-3); border-radius: 0 8px 8px 0; }
.erro-trecho { font-style: italic; color: var(--text-2); font-size: 13px; }
.erro-prob { font-size: 12.5px; color: var(--red); margin-top: 3px; }
.erro-corr { font-size: 13px; color: var(--green); margin-top: 3px; font-weight: 600; }
.cor-proposta { font-size: 13.5px; line-height: 1.7; color: var(--text-2); white-space: pre-wrap; }

/* ===== Cronograma: estimativa + grade semanal estilo Tutory ===== */
.cron-estimativa { margin-top: 10px; font-size: 13px; line-height: 1.5; background: rgba(255,176,1,.10); border: 1px solid rgba(255,176,1,.25); border-radius: 10px; padding: 10px 12px; }
.cron-grid { display: grid; grid-template-columns: repeat(7, minmax(178px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.cron-col {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px;
  padding: 10px; min-height: 80px; animation: cronIn .35s ease both;
  animation-delay: calc(var(--cron-i, 0) * 45ms);
}
@keyframes cronIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cron-col.hoje {
  border-color: var(--brand);
  background: linear-gradient(180deg, rgba(255,176,1,.09), var(--bg-2) 45%);
  box-shadow: 0 6px 22px -12px rgba(255,176,1,.55);
}
.cron-col-head { font-weight: 800; font-size: 12.5px; text-align: center; padding: 4px 0 8px; margin-bottom: 9px; letter-spacing: .02em; }
.cron-col.hoje .cron-col-head { color: var(--brand); }
.cron-col-head span { display: block; font-weight: 600; font-size: 11px; color: var(--muted); margin-top: 2px; }
.cron-col-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,.07); margin-top: 7px; overflow: hidden; }
.cron-col-bar > div { height: 100%; border-radius: 999px; background: var(--grad); transition: width .5s ease; }
.cron-vazio { text-align: center; color: var(--muted); font-size: 11px; padding: 14px 0; opacity: .8; }
.cron-meta {
  position: relative; border-radius: 12px; padding: 11px 12px; margin-bottom: 8px;
  cursor: pointer; background: var(--bg-3); border: 1px solid var(--border);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.cron-meta:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 8px 18px -12px rgba(0,0,0,.7); }
.cron-meta:active { transform: scale(.985); }
/* HOJE EM FOCO: missão do dia em destaque acima da grade */
.cron-hoje-hero {
  border: 1px solid rgba(255,176,1,.55); border-radius: 18px; padding: 14px;
  margin-bottom: 14px; background: linear-gradient(165deg, rgba(255,176,1,.10), var(--bg-2) 55%);
  animation: cronIn .3s ease both;
}
.cron-hoje-hero.completo { border-color: var(--green, #58C878); background: linear-gradient(165deg, rgba(88,200,120,.10), var(--bg-2) 55%); }
.chh-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.chh-top b { font-size: 15.5px; }
.chh-top span { font-size: 12px; color: var(--muted); font-weight: 700; }
.chh-cards { display: grid; gap: 8px; }
@media (min-width: 700px) { .chh-cards { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
.chh-cards .cron-meta { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .cron-col, .cron-hoje-hero { animation: none; }
  .cron-meta:hover { transform: none; }
}
.cron-meta.cron-fixo { border-style: dashed; }
.cron-meta.feita { opacity: .5; }
.cron-meta.feita .cm-ass, .cron-meta.feita .cm-disc { text-decoration: line-through; }
/* topo: chip de TIPO (colorido) + minutos/check — substitui a antiga barra lateral */
.cm-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cm-tipo { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(255, 176, 1, .14); color: var(--brand); white-space: nowrap; }
.cron-meta.t-questoes .cm-tipo { background: rgba(42, 157, 143, .18); color: #5FD6C4; }
.cron-meta.t-revisao  .cm-tipo { background: rgba(120, 150, 200, .2); color: #AAC4ED; }
.cron-meta.t-simulado .cm-tipo { background: rgba(231, 111, 81, .18); color: #F0997B; }
.cron-meta.t-redacao  .cm-tipo { background: rgba(176, 124, 196, .2); color: #D4AEE0; }
.cm-min { font-size: 11px; color: var(--muted); font-weight: 600; flex-shrink: 0; }
.cm-disc { font-weight: 700; font-size: 13px; letter-spacing: -.01em; line-height: 1.25; }
/* o assunto do edital vem com os subtópicos e chega a 434 caracteres; mostra até
   5 linhas (o corte antigo em 90 caracteres fazia o aluno achar que o cronograma
   pulava conteúdo). O resto fica no title, ao passar o mouse. */
.cm-ass { font-size: 12px; color: var(--text-2); margin-top: 3px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; }
.cm-check { color: var(--green); font-weight: 800; font-size: 15px; flex-shrink: 0; line-height: 1; }

/* ===== Cronômetro: chip flutuante + tela ===== */
#crono-fab { position: fixed; right: 14px; bottom: 84px; z-index: 60; }
.crono-chip { display: flex; align-items: center; gap: 6px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 24px; padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; box-shadow: var(--shadow); }
.crono-chip.on { border-color: var(--brand); color: var(--brand); }
.crono-dot { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--border); font-size: 18px; cursor: pointer; box-shadow: var(--shadow); }
.crono-pop { width: 220px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px; box-shadow: var(--shadow); }
.crono-pop-time { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 30px; text-align: center; color: var(--brand); margin-bottom: 8px; }
.crono-big { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 60px; color: var(--brand); line-height: 1.1; }
@media (max-width: 760px) { #crono-fab { bottom: 78px; } }

/* ===== Correção: acertos + lembrete cronograma + aviso ===== */
.cor-lista { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; font-size: 13.5px; color: var(--text-2); }
.cor-lista li { margin-bottom: 4px; }
.lembrete-card { display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; margin-bottom: 12px; text-align: left; color: var(--text); border: 1px solid rgba(255,176,1,.30); }
.lembrete-card.atrasado { border-color: var(--red); }
.cron-aviso { background: rgba(230,57,70,.12); border: 1px solid rgba(230,57,70,.3); color: var(--text); border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-bottom: 8px; }

/* ===== Cronograma wizard — matéria compacta (estilo Tutory) ===== */
.cw-mat2 { padding: 10px 0; border-bottom: 1px solid var(--border); }
.cw-mat2:last-child { border-bottom: none; }
.cw-mat-top { display: flex; align-items: center; gap: 10px; }
.cw-chk { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cw-chk input, .cw-chk-sm input { width: 17px; height: 17px; accent-color: var(--brand); flex-shrink: 0; }
.cw-dif { width: 110px; flex-shrink: 0; }
.cw-rr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cw-rr-col { background: var(--bg-3); border-radius: 8px; padding: 7px 8px; }
.cw-chk-sm { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; cursor: pointer; margin-bottom: 5px; }
.cw-rr-col .input { width: 100%; }
.cw-mat-top .cw-dif { flex: 0 0 116px; width: 116px; }

/* ===== Visualizador PDF v2: camada de desenho + cores ===== */
.pdf-base { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.pdf-draw { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.pdf-draw.ativo { pointer-events: auto; touch-action: none; cursor: crosshair; }
.pdf-wm { z-index: 3; pointer-events: none; }
.pdf-cores { display: none; gap: 5px; align-items: center; padding: 0 6px; }
.pdf-cor { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #555; cursor: pointer; flex-shrink: 0; padding: 9px; background-clip: content-box !important; }
.pdf-cor.on { border-color: #fff; transform: scale(1.12); }

/* ===== Cronograma wizard — assuntos por matéria ===== */
.cw-assuntos { margin-top: 8px; }
.cw-assuntos > summary { font-size: 11.5px; color: var(--brand); font-weight: 700; cursor: pointer; list-style: none; padding: 2px 0; }
.cw-assuntos > summary::-webkit-details-marker { display: none; }
.cw-assuntos > summary::before { content: "▸ "; }
.cw-assuntos[open] > summary::before { content: "▾ "; }
.cw-ass-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 8px 10px; background: var(--bg-3); border-radius: 8px; }
.cw-ass-lbl { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.35; cursor: pointer; }
.cw-ass-lbl input { width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; margin-top: 1px; }

/* ===== Leitor de PDF em TEXTO (reflow) ===== */
.pdf-top-btn { background: var(--brand); color: #241A05; border: none; border-radius: 8px; padding: 7px 12px; font-weight: 800; font-size: 12.5px; cursor: pointer; flex-shrink: 0; }
.pdf-read { flex: 1; overflow: auto; background: #1c1914; padding: 18px clamp(12px, 4vw, 28px) 60px; -webkit-overflow-scrolling: touch; }
.pdf-pagina { max-width: 720px; margin: 0 auto; }
.pdf-pg-num { text-align: center; color: #7a7367; font-size: 11px; margin: 20px 0 10px; letter-spacing: .5px; }
.pdf-par { font-size: 16.5px; line-height: 1.78; color: #ece6d8; margin: 0 0 15px; word-wrap: break-word; }
.pdf-read.modo-anotar .pdf-par, .pdf-read.modo-apagar .pdf-par { cursor: pointer; }
.pdf-read.modo-anotar .pdf-par:hover, .pdf-read.modo-apagar .pdf-par:hover { background: rgba(255,176,1,.08); border-radius: 6px; }
.pdf-par mark.pdf-hl { color: #1a1611; padding: 1px 0; border-radius: 2px; }
.pdf-par b { color: #fff; }
.pdf-par .pdf-kw { font-weight: 700; text-decoration: underline dotted #FFB001; text-underline-offset: 3px; }
.pdf-par.tts-lendo { background: rgba(255,176,1,.16); border-radius: 6px; box-shadow: 0 0 0 5px rgba(255,176,1,.16); transition: background .2s; }
.pdf-nota { cursor: default; margin-left: 2px; }
.pdf-nota-box { display: block; margin: 8px 0 4px; padding: 7px 11px; background: rgba(255,176,1,.14); border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0; font-size: .88em; line-height: 1.5; font-style: italic; white-space: pre-wrap; }
.pdf-read.tema-escuro .pdf-nota-box { color: #e7c98a; }
.pdf-read.tema-sepia .pdf-nota-box { color: #6b531f; background: rgba(150,110,30,.12); }
.pdf-read.tema-claro .pdf-nota-box { color: #6b531f; background: rgba(150,110,30,.10); }
.pdf-wm-fix { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 10px; color: rgba(180,140,40,.5); pointer-events: none; font-weight: 700; letter-spacing: .5px; }
/* o cronômetro flutuante fica ABAIXO de modais/leitor (overlay z90, modal z100,
   leitor z9999) e some quando algum deles abre — senão tampava os botões do
   rodapé direito do modal e os controles do leitor de PDF (taps "não funcionavam") */
body.modal-aberto #crono-fab { display: none; }
/* nas telas de configuração/listagem (não-estudo) o cronômetro flutuante some,
   pra não cobrir chips/botões; volta nas telas de estudo (QG, questões, leitor) */
body[data-rota="treino"] #crono-fab,
body[data-rota="simulados"] #crono-fab,
body[data-rota="ajustes"] #crono-fab,
body[data-rota="planos"] #crono-fab,
body[data-rota="comandante"] #crono-fab { display: none; }

/* leitor de PDF: títulos/negritos preservados */
.pdf-par.pdf-head { font-size: 17.5px; font-weight: 800; color: #fff; margin: 18px 0 8px; }
.pdf-par.pdf-head b { color: #fff; }

/* ===== Leitor PDF — temas de leitura + tipografia imersiva ===== */
.pdf-top-crono { background: #2a261d; color: #FFD24D; border: 1px solid #3a332a; border-radius: 20px; padding: 6px 12px; font-weight: 800; font-size: 12.5px; cursor: pointer; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.pdf-viewbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 12px; background: #1a1813; border-bottom: 1px solid #2a261d; }
.pdf-top-btn.on { background: #2a9d4a; color: #fff; }
.pdf-prog { position: relative; height: 16px; background: #1a1813; border-bottom: 1px solid #2a261d; }
.pdf-prog-fill { height: 100%; background: linear-gradient(90deg, var(--brand), #ffd36b); transition: width .25s; }
.pdf-prog-lbl { position: absolute; right: 8px; top: 0; line-height: 16px; font-size: 10px; font-weight: 800; color: var(--muted); }
.pvb-grp { display: inline-flex; gap: 4px; background: #2a261d; border-radius: 9px; padding: 3px; }
.pvb-tema, .pvb-fs { background: transparent; border: none; color: #cdbf9f; font-size: 14px; font-weight: 700; padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.pvb-tema.on { background: var(--brand); }
.pvb-fs { min-width: 38px; }

.pdf-read { transition: background .2s; }
/* A LEITURA SE AJUSTA À TELA. Antes o corpo era um px fixo: no celular (ou no
   painel estreito do computador) o texto ficava enorme e o título maior ainda.
   Agora o tamanho tem piso, teto e acompanha a largura — e a coluna nunca passa
   de 68 caracteres, que é onde a leitura corrida fica confortável. */
/* LARGURA DA LEITURA (item 25) — "realmente ficou pequeno" (Sd Nycholas).
   Ficava travado em 680px mesmo num monitor grande. Agora acompanha a tela e
   ainda respeita o limite de ~68 caracteres por linha, que é o que mantém a
   leitura confortável; o aluno alarga mais ainda com o A+. */
/* largura definitiva no bloco 'LEITOR: tela cheia' (v301); aqui só a centragem */
.pdf-read .pdf-pagina { margin-inline: auto; }
.pdf-read .pdf-par {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: clamp(14.5px, calc(var(--pdf-fs, 18px) * .74 + 0.9vw), var(--pdf-fs, 18px));
  line-height: 1.7; margin: 0 0 14px; letter-spacing: .1px;
  text-wrap: pretty;
}
.pdf-read .pdf-par.pdf-head {
  font-size: clamp(15.5px, calc(var(--pdf-fs, 18px) * .8 + 1vw), calc(var(--pdf-fs, 18px) + 2px));
  font-weight: 800; margin: 20px 0 8px; letter-spacing: .2px; line-height: 1.35;
  text-wrap: balance;
}
.pdf-read .pdf-par mark.pdf-hl { position: static !important; display: inline; color: #1a1611 !important; padding: .08em 0; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* tema escuro (padrão) */
.pdf-read.tema-escuro { background: #14120e; }
.pdf-read.tema-escuro .pdf-par { color: #e7e0d0; }
.pdf-read.tema-escuro .pdf-par.pdf-head, .pdf-read.tema-escuro .pdf-par b { color: #fff; }
/* tema sépia */
.pdf-read.tema-sepia { background: #f3ead6; }
.pdf-read.tema-sepia .pdf-par { color: #4a4234; }
.pdf-read.tema-sepia .pdf-par.pdf-head, .pdf-read.tema-sepia .pdf-par b { color: #2a2113; }
.pdf-read.tema-sepia .pdf-wm-fix, .pdf-read.tema-claro .pdf-wm-fix { color: rgba(150,110,30,.5); }
/* tema claro */
.pdf-read.tema-claro { background: #fbfaf7; }
.pdf-read.tema-claro .pdf-par { color: #33312c; }
.pdf-read.tema-claro .pdf-par.pdf-head, .pdf-read.tema-claro .pdf-par b { color: #14120e; }
/* leitor v2: níveis de título, MAIÚSCULAS realçadas, expoentes/índices, listas, página-imagem */
.pdf-read .pdf-par.pdf-head[data-lvl="2"] { font-size: clamp(17px, calc(var(--pdf-fs, 18px) * .95 + 1.4vw), calc(var(--pdf-fs, 18px) + 4px)); margin-top: 24px; }
.pdf-read .pdf-par sup, .pdf-read .pdf-par sub { font-size: .7em; line-height: 0; }
.pdf-read .pdf-caps { font-weight: 600; letter-spacing: .4px; }
.pdf-read .pdf-par.pdf-li { padding-left: 1.5em; text-indent: -1.05em; margin: 0 0 8px; }
.pdf-pagina { position: relative; }
.pdf-orig-btn { display: block; margin: 0 0 8px auto; font-size: 11px; padding: 3px 11px; border: 1px solid rgba(255,176,1,.45); border-radius: 14px; background: transparent; color: var(--brand); cursor: pointer; opacity: .85; }
.pdf-orig-btn:active { transform: scale(.96); }
.pdf-img { display: none; width: 100%; height: auto; border-radius: 8px; background: #fff; margin: 4px auto 12px; box-shadow: 0 2px 12px rgba(0,0,0,.28); }
.pdf-pagina.mostra-img canvas.pdf-img { display: block; }
.pdf-pagina.mostra-img .pdf-par, .pdf-pagina.mostra-img .pdf-fig-ph { display: none; }
.pdf-fig-ph { font-size: 12px; color: var(--muted); text-align: center; padding: 14px 12px; border: 1px dashed var(--border); border-radius: 10px; opacity: .85; }

/* cronograma: dificuldade por assunto */
.cw-mat-tag { font-size: 11px; color: var(--muted); flex-shrink: 0; }
/* assunto EM CIMA (largura toda, legível) e o marcador de dificuldade EMBAIXO.
   Antes ficavam lado a lado e o `select.input{width:100%}` (especificidade maior que
   .cw-ass-dif) inflava o select, espremendo o nome do assunto numa coluna estreita. */
.cw-ass-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.cw-ass-row:last-child { border-bottom: none; }
.cw-ass-row .cw-ass-lbl { flex: 1; font-size: 13px; }
.cw-ass-row .cw-ass-dif { width: 100%; max-width: 170px; flex-shrink: 0; }

/* ===== Caderno (grifos + anotações + flashcards por matéria/assunto) ===== */
.cad-resumo{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.cad-resumo span{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-size:12.5px}
.cad-mat{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden}
.cad-mat-h{display:flex;align-items:center;gap:10px;width:100%;padding:14px;background:none;border:0;color:var(--text);cursor:pointer;text-align:left;font:inherit}
.cad-ico{font-size:17px}
.cad-mat-nome{font-weight:700;font-size:14.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cad-tags{display:flex;gap:5px}
.cad-tag{font-size:11px;background:var(--bg-3);border:1px solid var(--border);border-radius:20px;padding:2px 8px;white-space:nowrap}
.cad-arr{transition:transform .2s;color:var(--muted);font-size:18px}
.cad-mat.open .cad-arr{transform:rotate(90deg)}
.cad-mat-body{display:none;padding:2px 14px 12px;border-top:1px solid var(--border)}
.cad-mat.open .cad-mat-body{display:block}
.cad-ass{padding:10px 0;border-bottom:1px dashed var(--border)}
.cad-ass:last-child{border-bottom:0}
.cad-ass-h{display:flex;justify-content:space-between;gap:8px;font-weight:600;font-size:13px;margin-bottom:4px}
.cad-ass-c{color:var(--muted);font-size:11px;font-weight:400;white-space:nowrap}
.cad-nota{background:var(--bg-3);border-left:3px solid var(--brand);border-radius:6px;padding:7px 10px;margin:5px 0;font-size:12.5px;white-space:pre-wrap;line-height:1.4}
.cad-card{display:flex;flex-direction:column;gap:2px;background:var(--bg-3);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin:5px 0;font-size:12.5px}
.cad-card span{color:var(--text-2)}
.cad-hint{font-size:11.5px;color:var(--muted);padding:2px 0}

/* ===== Caderno v2 (abas, excluir, questões salvas) ===== */
.cad-tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.cad-tab{flex:0 0 auto;background:var(--bg-2);border:1px solid var(--border);color:var(--text-2);border-radius:20px;padding:8px 13px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;min-height:38px}
.cad-tab.on{background:var(--brand);border-color:var(--brand);color:#231a05}
.cad-tab-n{display:inline-block;min-width:17px;text-align:center;background:rgba(0,0,0,.18);border-radius:10px;padding:0 5px;font-size:11px;margin-left:2px}
.cad-tab:not(.on) .cad-tab-n{background:var(--bg-3)}
.cad-aviso{background:var(--bg-3);border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:12px;margin-bottom:10px}
.cad-aviso .lk{background:none;border:0;color:var(--brand);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;padding:0}
.cad-del-wrap{position:relative;padding-right:38px}
.cad-del{position:absolute;top:6px;right:6px;background:none;border:0;cursor:pointer;font-size:15px;opacity:.55;padding:4px;line-height:1}
.cad-del:hover{opacity:1}
.cad-q{background:var(--bg-3);border:1px solid var(--border);border-radius:8px;padding:9px 11px;margin:5px 0;font-size:12.5px}
.cad-q-en{line-height:1.4}
.cad-q-gab{color:var(--brand);font-weight:700;margin-top:5px;font-size:12px}
.cad-q-com{color:var(--text-2);margin-top:4px;font-size:12px;line-height:1.4}

/* botão de interligação no Caderno (assunto → treino) */
.cad-act{flex:0 0 auto;background:var(--bg-3);border:1px solid var(--border);color:var(--brand);border-radius:16px;padding:4px 10px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;min-height:30px}
.cad-act:hover{background:var(--brand);color:#231a05}
.cad-ass-h{gap:8px;align-items:center}

/* leitor de PDF — placeholders do lazy-render */
.pdf-pagina.pdf-lazy{min-height:42vh}
.pdf-ph{color:var(--muted);opacity:.35;text-align:center;padding:46px 0;font-size:13px}

/* Teoria → Treino (botão por assunto) */
.teo-assunto-row{display:flex;gap:6px;align-items:stretch}
.teo-assunto-row .teo-assunto{flex:1;width:auto}
.teo-treinar{flex:0 0 auto;background:var(--bg-3);border:1px solid var(--border);border-radius:10px;font-size:17px;cursor:pointer;padding:0 13px;color:var(--text)}
.teo-treinar{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:800;min-width:92px}
.teo-treinar svg{width:17px;height:17px;color:var(--brand)}
.teo-treinar:hover{background:var(--brand);color:#211904}
.teo-treinar:hover svg{color:#211904}

/* Integração por assunto: EM Questões + QConcursos + TEC */
.resource-modal{display:flex;flex-direction:column;gap:10px}
.resource-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.resource-kicker{color:var(--brand);font-size:10px;font-weight:800;letter-spacing:.16em}
.resource-modal h3{font-family:"Playfair Display",serif;font-size:22px;line-height:1.15;margin:2px 0 0}
.resource-modal>p{color:var(--muted);font-size:12px;margin:-4px 0 6px}
.resource-provider{background:var(--bg-3);border:1px solid var(--border);border-radius:14px;padding:12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(132px,auto);gap:10px;align-items:center}
.resource-provider-emq{border-color:rgba(255,176,1,.42)}
.resource-provider-head{display:flex;align-items:center;gap:11px;min-width:0}
.resource-provider-head img{width:42px;height:42px;object-fit:contain;border-radius:10px;background:#fff;padding:4px;flex:0 0 auto}
.resource-sigla{width:42px;height:42px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-style:normal;font-weight:900;font-size:15px;letter-spacing:-.02em}
.resource-provider-emq .resource-provider-head img{background:transparent;padding:0;border-radius:0}
.resource-provider-head span{display:flex;flex-direction:column;min-width:0}
.resource-provider-head b{font-size:13px;line-height:1.2}
.resource-provider-head small{color:var(--muted);font-size:10.5px;line-height:1.3;margin-top:3px}
.resource-provider-actions{display:flex;flex-direction:column;gap:6px}
.resource-link-btn{width:100%;min-height:39px;border:1px solid var(--border);border-radius:10px;background:var(--bg-2);color:var(--text);padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:800;cursor:pointer;text-align:left}
.resource-link-btn svg{width:15px;height:15px;flex:0 0 auto;color:var(--brand)}
.resource-link-btn:hover:not(:disabled),.resource-primary{background:var(--brand);border-color:var(--brand);color:#211904}
.resource-primary svg,.resource-link-btn:hover:not(:disabled) svg{color:#211904}
.resource-link-btn:disabled,.resource-provider.is-disabled{opacity:.55;cursor:not-allowed}
.resource-note{font-size:11px;line-height:1.45;color:var(--muted);padding:9px 11px;border-left:3px solid var(--brand);background:rgba(255,176,1,.06)}
.resource-modal-layer,.leitor-modal-layer{z-index:10050}
.pdf-praticar{display:inline-flex;align-items:center;gap:6px;margin-left:0;background:#2a261d;color:#FFD24D;border:1px solid #5a4824}
.pdf-praticar svg{width:15px;height:15px}

@media(max-width:520px){
  .teo-assunto-row{flex-direction:column}
  .teo-treinar{width:100%;min-height:38px}
  .resource-provider{grid-template-columns:1fr}
  .resource-link-btn{min-height:44px}
  .pdf-praticar span{display:none}
  .pdf-praticar{padding-inline:9px}
}

/* Cronograma → Treino (botão por meta de exercício/revisão) */
.cron-treinar{display:inline-flex;align-items:center;gap:5px;margin-top:10px;background:rgba(255,176,1,.1);border:1px solid rgba(255,176,1,.3);color:var(--brand);font-size:11px;font-weight:700;border-radius:9px;padding:6px 11px;line-height:1;cursor:pointer}
.cron-treinar:hover{background:var(--brand);color:#15110C}
.cron-fixo-acoes{display:grid;grid-template-columns:1fr;gap:6px;margin-top:10px}
.cron-fixo-acoes .cron-treinar{width:100%;min-height:36px;justify-content:center;margin-top:0}
.cron-fixo-acoes .cron-fixo-abrir{background:var(--brand);border-color:var(--brand);color:#15110C}
.cron-fixo-acoes .cron-fixo-marcar{background:var(--bg-2);border-color:var(--border);color:var(--text-2)}
.cron-fixo-acoes .cron-fixo-marcar:hover{border-color:var(--brand);color:var(--brand)}

/* destaque (sublinhado) de termos nas questões — recuperado do gabarito original */
.q-dest{text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:3px;font-weight:600}


/* ===== MENTORIA NO APP — missão, plano e comando (v157) ===== */
.mm-skel { display: grid; gap: 10px; margin-top: 8px; }
.mm-skel > div { height: 84px; border-radius: 14px; background: linear-gradient(100deg, var(--bg-2) 40%, var(--bg-3) 50%, var(--bg-2) 60%); background-size: 200% 100%; animation: mmShimmer 1.2s infinite linear; }
@keyframes mmShimmer { to { background-position: -200% 0; } }
.mm-hero {
  border: 1px solid rgba(255,176,1,.5); border-radius: 18px; padding: 16px;
  background: linear-gradient(165deg, rgba(255,176,1,.10), var(--bg-2) 55%);
  margin-bottom: 12px; animation: cronIn .3s ease both;
}
.mm-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--brand); }
.mm-hero-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.mm-hero-tit { font-size: 21px; font-weight: 800; margin-top: 2px; }
.mm-pct { text-align: right; min-width: 86px; }
.mm-pct-num { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 26px; color: var(--brand); line-height: 1; }
.mm-pct-lbl { font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--muted); margin: 2px 0 5px; }
.mm-pct-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.mm-pct-bar > div { height: 100%; border-radius: 999px; background: var(--grad); transition: width .5s ease; }
.mm-lista { display: grid; gap: 10px; margin-top: 12px; }
.mm-meta {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-3);
  animation: cronIn .3s ease both; animation-delay: calc(var(--mm-i, 0) * 60ms);
  transition: border-color .15s, transform .15s;
}
.mm-meta:hover { border-color: rgba(255,176,1,.5); transform: translateY(-1px); }
.mm-meta:active { transform: scale(.99); }
.mm-meta.feita { opacity: .55; }
.mm-meta.feita .mm-titulo { text-decoration: line-through; }
.mm-check {
  flex: 0 0 30px; height: 30px; border-radius: 50%; cursor: pointer; margin-top: 2px;
  border: 2px solid rgba(255,176,1,.65); background: transparent; color: #1A1611;
  font-weight: 900; font-size: 16px; line-height: 1; transition: transform .12s, background .15s;
}
.mm-check:active { transform: scale(.9); }
.mm-meta.feita .mm-check { background: var(--brand); border-color: var(--brand); }
.mm-corpo { flex: 1; min-width: 0; }
.mm-titulo { font-size: 14.5px; line-height: 1.35; }
.mm-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mm-dica {
  margin-top: 8px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5;
  background: rgba(255,176,1,.09); border: 1px solid rgba(255,176,1,.3); color: var(--text);
}
.mm-dica-mini { padding: 6px 10px; font-size: 11.5px; }
.mm-meta .cron-treinar { margin-top: 8px; }
.mm-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .mm-duplo { grid-template-columns: 1fr; } }
.mm-atalho {
  position: relative; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--bg-2); color: var(--text); cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.mm-atalho:hover { border-color: rgba(255,176,1,.5); transform: translateY(-2px); }
.mm-atalho:active { transform: scale(.98); }
.mm-atalho-ico { font-size: 24px; }
.mm-atalho-txt b { display: block; font-size: 14.5px; }
.mm-atalho-txt small { color: var(--muted); font-size: 11.5px; }
.mm-badge {
  position: absolute; top: 10px; right: 12px; background: var(--brand); color: #1A1611;
  font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px;
}
.mm-post { border: 1px solid rgba(255,176,1,.35); border-radius: 12px; padding: 11px 13px; margin-bottom: 8px; background: rgba(255,176,1,.05); }
.mm-post b { font-size: 14px; }
.mm-post p { margin: 5px 0 3px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.mm-post small { font-size: 10.5px; color: var(--muted); }
.mm-inbox { border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px; margin-bottom: 8px; }
.mm-inbox.novo { border-color: rgba(255,176,1,.6); }
.mm-inbox summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.mm-inbox p { margin: 8px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.55; }


/* ============================================================
   ORDEM DE OPERAÇÕES — cronograma da mentoria (08/08)
   Fita de patrulha: 7 colunas que deslizam com encaixe; HOJE sob
   holofote dourado. Só transform/opacity animam. Substitui o .cronf
   (dias empilhados) — mantido abaixo porque o cronograma pessoal
   ainda usa aquelas classes.
   ============================================================ */

/* --- barra de progresso do período --- */
.opb .opb-atraso { color: #F0997B; font-weight: 800; }

/* --- seletor de semana + atalho pro hoje --- */
.ops { display: flex; align-items: stretch; gap: 8px; margin-bottom: 12px; }
.ops-seg {
  display: flex; flex: 1; min-width: 0; gap: 4px; padding: 4px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 13px;
}
.ops-btn {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  padding: 7px 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--text-2); cursor: pointer; text-align: left;
  transition: background .22s ease, color .22s ease;
}
.ops-btn b { font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; }
.ops-btn small { font-size: 10px; opacity: .72; font-variant-numeric: tabular-nums; }
.ops-btn.on { background: var(--bg-3); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,176,1,.28); }
.ops-btn.on b { color: var(--brand); }
.ops-hoje {
  flex: 0 0 auto; padding: 0 13px; border-radius: 13px; cursor: pointer;
  border: 1px solid rgba(255,176,1,.35); background: rgba(255,176,1,.09);
  color: var(--brand); font-size: 12px; font-weight: 800; white-space: nowrap;
  transition: transform .16s ease, background .2s ease;
}
.ops-hoje:hover { background: rgba(255,176,1,.18); }
.ops-hoje:active { transform: scale(.95); }

/* --- a fita --- */
.opr {
  display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
  /* cada coluna com a própria altura: um dia livre não vira um poço vazio do
     tamanho do dia mais cheio (o de hoje tinha 8 metas e esticava os 7) */
  align-items: flex-start;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 2px 2px 12px; margin: 0 -2px;
  scrollbar-width: none;
}
.opr::-webkit-scrollbar { display: none; }
.opr-dica { font-size: 11px; color: var(--muted); margin: -4px 0 6px; text-align: center; }

/* --- coluna do dia --- */
.opd {
  flex: 0 0 auto; width: min(78vw, 268px); scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--card, var(--bg-2)); border: 1px solid var(--border); border-radius: 16px;
  padding: 11px 11px 9px; min-height: 132px;
  transition: border-color .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.opd.passou { opacity: .58; }
.opd.no-foco { opacity: 1; }
.opd.hoje {
  position: relative; overflow: hidden;
  border-color: rgba(255,176,1,.55);
  box-shadow: 0 0 0 1px rgba(255,176,1,.18) inset, 0 8px 26px rgba(255,176,1,.09);
}
/* trilho de hoje: uma luz lenta atravessa o topo da coluna — é o único
   movimento contínuo da tela, e só na coluna que importa */
.opd.hoje::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  background-size: 55% 100%; background-repeat: no-repeat;
  animation: opdTrilho 3.6s linear infinite;
}
@keyframes opdTrilho { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.opr.entra .opd { animation: opdEntra .42s cubic-bezier(.22,.9,.3,1) both; animation-delay: calc(var(--i) * 52ms); }
@keyframes opdEntra { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.opd.bate { animation: opdBate .5s ease; }
@keyframes opdBate { 0%,100% { transform: none; } 30% { transform: translateY(-6px) scale(1.015); } }

.opd-top {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--border);
}
.opd-top:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
.opd-dow {
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-2); white-space: nowrap;
}
.opd.hoje .opd-dow { color: var(--brand); }
.opd-data { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.opd-atraso { font-size: 10.5px; font-weight: 700; color: #F0997B; margin: -3px 0 7px; }

/* anel de progresso do dia */
.opd-anel { position: relative; margin-left: auto; width: 32px; height: 32px; flex: 0 0 auto; }
.opd-anel svg { width: 32px; height: 32px; transform: rotate(-90deg); }
.opd-trilho { fill: none; stroke: var(--border); stroke-width: 3; }
.opd-arco {
  fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round;
  transition: stroke-dashoffset .6s cubic-bezier(.22,.9,.3,1);
}
.opd-anel b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.opd-anel.cheio b { color: var(--brand); font-size: 13px; }
.opd-livre { margin-left: auto; font-size: 17px; opacity: .8; }

.opd-cards { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.opd-pe { margin-top: 9px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.opd-vazio {
  display: flex; flex-direction: column; gap: 3px; justify-content: center;
  padding: 14px 4px; text-align: center;
}
.opd-vazio b { font-size: 12.5px; color: var(--text-2); }
.opd-vazio small { font-size: 10.5px; color: var(--muted); line-height: 1.4; }

/* --- card de meta (a operação) --- */
.opc {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  width: 100%; text-align: left; cursor: pointer; overflow: hidden;
  padding: 10px 11px 9px 14px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
  background: color-mix(in srgb, var(--c) 13%, var(--bg-2));
  transition: transform .18s cubic-bezier(.22,.9,.3,1), box-shadow .22s ease, background .22s ease;
}
.opc:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.28); background: color-mix(in srgb, var(--c) 20%, var(--bg-2)); }
.opc:active { transform: scale(.98); }
.opc:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.opc-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3.5px; background: var(--c); }
.opc-disc { font-size: 12.5px; font-weight: 800; color: var(--text); line-height: 1.25; }
.opc-ass {
  font-size: 11px; color: var(--text-2); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.opc-pe { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.opc-mod { font-size: 10px; font-weight: 700; color: var(--text-2); letter-spacing: .01em; }
.opc-min {
  margin-left: auto; flex: 0 0 auto; font-size: 10.5px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--text);
  background: rgba(255,255,255,.09); border-radius: 999px; padding: 2px 8px;
}
[data-theme="light"] .opc-min { background: rgba(0,0,0,.07); }
/* no claro o mesmo 13% quase some no branco: sobe o tinte e reforça a borda
   pra cor da matéria continuar sendo o que identifica o card de longe */
[data-theme="light"] .opc {
  background: color-mix(in srgb, var(--c) 17%, #fff);
  border-color: color-mix(in srgb, var(--c) 42%, transparent);
}
[data-theme="light"] .opc:hover { background: color-mix(in srgb, var(--c) 25%, #fff); box-shadow: 0 10px 22px rgba(120,100,60,.16); }
[data-theme="light"] .opc.feita { background: var(--bg-2); border-color: var(--border); }
.opc-min small { font-weight: 600; opacity: .7; margin-left: 1px; }
.opc.feita { background: var(--bg-2); border-color: var(--border); }
.opc.feita .opc-disc, .opc.feita .opc-ass { text-decoration: line-through; color: var(--muted); }
.opc.feita .opc-rail { opacity: .35; }
.opc-ok {
  position: absolute; right: 9px; top: 9px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--brand); color: #15110C; font-size: 11px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}

/* --- painel da missão do dia --- */
.opm-topo { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.opm-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--brand); }
.opm-topo h3 { margin: 3px 0 2px; font-size: 17px; }
.opm-topo .sub { font-size: 12px; margin: 0; }
.opm-lista { display: flex; flex-direction: column; gap: 8px; }
.opm-item { border-left: 3px solid var(--c); border-radius: 12px; overflow: hidden; animation: opmIn .34s ease both; animation-delay: calc(var(--i) * 45ms); }
@keyframes opmIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.opm-item .mm-meta { margin: 0; border-radius: 0 12px 12px 0; border-left: 0; }
.opm-item .mm-meta.pop { animation: opmPop .42s cubic-bezier(.22,.9,.3,1); }
@keyframes opmPop { 0%,100% { transform: none; } 40% { transform: scale(1.025); } }
.opm-cta { margin-top: 14px; }

/* --- telas largas: a fita continua, com colunas um pouco mais estreitas para
       caberem ~3 dias e meio na área de conteúdo (760px). Espremer os 7 dias
       numa grade deixava 91px por coluna e quebrava "História de Pernambuco"
       em três linhas — a própria referência rola de lado. --- */
@media (min-width: 760px) {
  .opd { width: 224px; }
  .opr-dica::after { content: " (ou use a roda do mouse com Shift)"; }
}

@media (prefers-reduced-motion: reduce) {
  .opr.entra .opd, .opm-item, .opd.hoje::before { animation: none; }
  .opd.bate, .opm-item .mm-meta.pop { animation: none; }
  .opc, .opd, .opd-arco, .ops-btn, .ops-hoje { transition: none; }
}






/* ============================================================
   MISSÃO DO DIA — a fila do dia como uma linha de estações.
   Um fio dourado desce pelas etapas; o nó da vez pulsa. Só
   transform/opacity animam.
   ============================================================ */
.mss-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .11em; color: var(--brand); display: block; }

/* --- cartão de chamada no QG --- */
.mss-cta {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; cursor: pointer;
  padding: 15px 16px; margin-bottom: 12px; border-radius: 18px;
  border: 1px solid rgba(255,176,1,.4); background: var(--bg-2);
  transition: transform .18s cubic-bezier(.22,.9,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.mss-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,176,1,.12); border-color: var(--brand); }
.mss-cta:active { transform: scale(.99); }
.mss-cta.completa { border-color: rgba(42,157,143,.5); }
.mss-cta-anel { position: relative; width: 56px; height: 56px; flex: 0 0 auto; }
.mss-cta-anel svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.mss-cta-anel b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 900; color: var(--brand); font-variant-numeric: tabular-nums;
}
.mss-cta-anel b i { font-style: normal; font-size: 9px; margin-top: 3px; opacity: .7; }
.mss-cta-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mss-cta-txt b { font-size: 14px; line-height: 1.25; }
.mss-cta-txt small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mss-cta-seta { font-size: 24px; color: var(--muted); flex: 0 0 auto; line-height: 1; }

/* --- anel grande --- */
.mss-anel { position: relative; width: 80px; height: 80px; flex: 0 0 auto; }
.mss-anel svg { width: 80px; height: 80px; transform: rotate(-90deg); }
.mss-trilho { fill: none; stroke: var(--border); stroke-width: 6; }
.mss-arco {
  fill: none; stroke: var(--brand); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dashoffset .9s cubic-bezier(.22,.9,.3,1);
}
.mss-anel.cheio .mss-arco { stroke: #2A9D8F; }
.mss-anel-txt {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
}
.mss-anel-txt b { font-size: 25px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mss-anel-txt small { font-size: 9.5px; color: var(--muted); margin-top: 3px; }

/* --- topo da missão --- */
.mss-hero {
  padding: 18px; border-radius: 20px; margin-bottom: 16px;
  border: 1px solid rgba(255,176,1,.32);
  background: radial-gradient(120% 130% at 12% 0%, rgba(255,176,1,.13) 0%, transparent 62%), var(--bg-2);
}
.mss-hero.completa { border-color: rgba(42,157,143,.4);
  background: radial-gradient(120% 130% at 12% 0%, rgba(42,157,143,.13) 0%, transparent 62%), var(--bg-2); }
.mss-hero-top { display: flex; align-items: center; gap: 15px; }
.mss-hero-txt { min-width: 0; }
.mss-hero-txt h1 { font-size: 21px; margin: 3px 0 5px; letter-spacing: -.02em; line-height: 1.15; }
.mss-hero-txt p { font-size: 12.5px; color: var(--text-2); margin: 0; line-height: 1.5; }
.mss-carga { margin-top: 15px; }
.mss-carga-cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.mss-carga-cab b { color: var(--text-2); font-variant-numeric: tabular-nums; }
.mss-carga-bar { height: 7px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.mss-carga-bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad);
  transition: width .8s cubic-bezier(.22,.9,.3,1); }
.mss-atraso {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 14px;
  padding: 10px 12px; border-radius: 11px; font-size: 12px; line-height: 1.5;
  background: rgba(240,153,123,.09); border: 1px solid rgba(240,153,123,.32); color: #F0997B;
}

/* --- a linha de estações --- */
.mss-linha { position: relative; }
.mss-etapa {
  display: flex; gap: 13px; padding-bottom: 12px;
  animation: mssIn .4s cubic-bezier(.22,.9,.3,1) both; animation-delay: calc(var(--i) * 62ms);
}
@keyframes mssIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.mss-no { position: relative; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.mss-check {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; z-index: 1;
  border: 2px solid var(--border); background: var(--bg-2); color: #15110C;
  font-size: 15px; font-weight: 900; display: flex; align-items: center; justify-content: center;
  transition: transform .18s cubic-bezier(.22,.9,.3,1), background .2s ease, border-color .2s ease;
}
.mss-check:active { transform: scale(.88); }
.mss-etapa.agora .mss-check { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(255,176,1,.14); }
.mss-etapa.feita .mss-check { background: var(--brand); border-color: var(--brand); }
.mss-fio { flex: 1; width: 2px; margin-top: 4px; background: var(--border); border-radius: 2px; }
.mss-etapa.feita .mss-fio { background: linear-gradient(180deg, var(--brand), var(--border)); }

.mss-corpo {
  flex: 1; min-width: 0; padding: 13px 14px; border-radius: 14px;
  border: 1px solid var(--border); border-left: 3px solid var(--c); background: var(--bg-2);
}
.mss-etapa.agora .mss-corpo { border-color: rgba(255,176,1,.4); border-left-color: var(--c); }
/* o card inteiro é o botão: abre a teoria ou o treino conforme a meta */
.mss-corpo.tocavel { cursor: pointer; text-align: left; width: 100%; }
.mss-corpo.tocavel:hover { border-color: rgba(255,176,1,.55); }
.mss-corpo.tocavel:active { transform: scale(.995); }
.mss-corpo.tocavel:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mss-etapa.feita .mss-corpo { opacity: .62; }
.mss-tags { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mss-tag-mod { font-size: 10.5px; font-weight: 700; color: var(--text-2); }
.mss-tag-min {
  margin-left: auto; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.08); border-radius: 999px; padding: 2px 9px; color: var(--text);
}
[data-theme="light"] .mss-tag-min { background: rgba(0,0,0,.06); }
.mss-tag-min small { font-weight: 600; opacity: .68; margin-left: 1px; }
.mss-corpo h3 { font-size: 14.5px; margin: 0; line-height: 1.3; }
.mss-etapa.feita .mss-corpo h3 { text-decoration: line-through; }
.mss-ass { font-size: 12.5px; color: var(--text-2); margin: 3px 0 0; line-height: 1.4; }
.mss-dica {
  margin-top: 9px; padding: 9px 11px; border-radius: 10px; font-size: 11.5px; line-height: 1.5;
  background: rgba(255,176,1,.07); border: 1px solid rgba(255,176,1,.24); color: var(--text-2);
}
.mss-dica b { color: var(--brand); }
.mss-baixa { margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.mss-corpo .cron-treinar { margin-top: 11px; }

/* --- saídas --- */
.mss-saidas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.mss-saida {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  padding: 13px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-2);
  transition: transform .16s ease, border-color .18s ease;
}
.mss-saida:hover { transform: translateY(-2px); border-color: rgba(255,176,1,.45); }
.mss-saida span { font-size: 19px; line-height: 1; margin-bottom: 3px; }
.mss-saida b { font-size: 12.5px; }
.mss-saida small { font-size: 10.5px; color: var(--muted); line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
  .mss-etapa { animation: none; }
  .mss-arco, .mss-carga-bar i, .mss-cta, .mss-check, .mss-saida { transition: none; }
}

/* ===== FOLHA DO MENTOR — painel do aluno na área do dono ===== */
.fm-aluno {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 13px; margin-bottom: 7px; border-radius: 13px;
  border: 1px solid var(--border); background: var(--bg-2);
  transition: transform .16s ease, border-color .18s ease;
}
.fm-aluno:hover { border-color: rgba(255,176,1,.5); transform: translateY(-1px); }
.fm-aluno-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fm-aluno-t b { font-size: 13.5px; }
.fm-aluno-t small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.fm-aluno-n { text-align: right; flex: 0 0 auto; }
.fm-aluno-n b { display: block; font-size: 16px; color: var(--brand); font-variant-numeric: tabular-nums; }
.fm-aluno-n small { font-size: 10.5px; color: var(--muted); }
.fm-atr { font-style: normal; color: #F0997B; font-weight: 700; }

.fm-topo { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.fm-kicker { font-size: 10px; font-weight: 800; letter-spacing: .11em; color: var(--brand); }
.fm-topo h3 { margin: 3px 0 2px; font-size: 15px; word-break: break-all; }
.fm-topo .sub { font-size: 11.5px; margin: 0; }
/* Abas do painel do aluno em TRÊS GRUPOS. Antes eram 10 numa fila com rolagem
   lateral: as últimas ficavam fora da tela do celular e o dono jurava que as
   funcionalidades não existiam. */
.fm-navs { display: grid; gap: 8px; margin-bottom: 14px; }
.fm-nav {
  display: grid; gap: 5px; padding: 8px 9px 9px;
  border-radius: 13px; background: var(--bg-3);
  border: 1px solid rgba(255, 255, 255, .05);
}
.fm-nav-t {
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em;
  color: var(--muted); text-transform: uppercase;
}
.fm-abas { display: flex; flex-wrap: wrap; gap: 5px; }
.fm-abas button {
  flex: 1 1 auto; min-width: max-content; white-space: nowrap;
  padding: 9px 11px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--bg-2); color: var(--text-2); font-size: 11.5px; font-weight: 700;
  transition: color .14s ease, box-shadow .14s ease;
}
.fm-abas button:hover { color: var(--text); }
.fm-abas button.on { background: rgba(255,176,1,.12); color: var(--brand); box-shadow: inset 0 0 0 1.5px rgba(255,176,1,.45); }
.fm-abas button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fm-corpo { max-height: 58vh; overflow-y: auto; }
.fm-sub { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 14px 0 7px; }
.fm-acoes { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 11px; align-items: center; }
.fm-alerta {
  padding: 10px 12px; border-radius: 10px; margin-bottom: 11px; font-size: 12px; line-height: 1.5;
  background: rgba(255,176,1,.08); border: 1px solid rgba(255,176,1,.28); color: var(--text-2);
}

.fm-linha, .fm-meta {
  display: flex; align-items: center; gap: 9px; padding: 10px 11px; margin-bottom: 6px;
  border-radius: 11px; border: 1px solid var(--border); border-left: 3px solid var(--c, var(--border));
  background: var(--bg-2);
}
.fm-linha-t, .fm-meta-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.fm-linha-t b, .fm-meta-t b { font-size: 12.5px; }
.fm-linha-t small, .fm-meta-t small { font-size: 11px; color: var(--text-2); }
.fm-meta-t i { font-style: normal; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.fm-linha-d { font-size: 11.5px; font-weight: 700; color: var(--brand); white-space: nowrap; flex: 0 0 auto; }
.fm-meta-b { display: flex; gap: 5px; flex: 0 0 auto; }
.fm-meta-b button {
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 13px;
  border: 1px solid var(--border); background: var(--bg-3); color: var(--text-2);
}
.fm-meta-b button:hover { border-color: var(--brand); color: var(--brand); }
.fm-meta-b button.del:hover { border-color: #E63946; color: #E63946; }

.fm-dia { margin-bottom: 12px; }
.fm-dia-cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .05em; color: var(--text-2);
  padding-bottom: 5px; margin-bottom: 7px; border-bottom: 1px solid var(--border);
}
.fm-dia-cab span { font-weight: 600; color: var(--muted); }
.fm-dia.hoje .fm-dia-cab { color: var(--brand); border-color: rgba(255,176,1,.4); }
.fm-dia.passou { opacity: .62; }

.fm-recado {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; margin-bottom: 6px;
  border-radius: 11px; background: var(--bg-2); border: 1px solid var(--border);
}
.fm-recado b { font-size: 12px; }
.fm-recado span { font-size: 12px; color: var(--text-2); line-height: 1.45; }
.fm-recado small { font-size: 10.5px; color: var(--muted); }

.fm-ciclo { padding: 12px; border-radius: 13px; border: 1px solid var(--border); background: var(--bg-2); margin-bottom: 9px; }
.fm-ciclo-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.fm-ciclo-cab b { font-size: 13.5px; }
.fm-ciclo-cab span { font-size: 11px; color: var(--muted); }
.fm-ciclo-itens { display: flex; flex-wrap: wrap; gap: 5px; }
.fm-pill {
  font-size: 10.5px; padding: 4px 9px; border-radius: 999px; line-height: 1.35;
  background: color-mix(in srgb, var(--c) 15%, var(--bg-3));
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); color: var(--text-2);
}
.fm-pill i { font-style: normal; color: var(--muted); }
.fm .input, .fm textarea, .fm select {
  width: 100%; padding: 10px 12px; border-radius: 11px; font-size: 14px;
  border: 1.5px solid var(--border); background: var(--bg-2); color: var(--text);
}
.fm textarea { min-height: 62px; resize: vertical; line-height: 1.5; }
.fm .input:focus, .fm textarea:focus, .fm select:focus { outline: none; border-color: var(--brand); }
.fm-editor { z-index: 10060; }
@media (prefers-reduced-motion: reduce) { .fm-aluno { transition: none; } }

/* ============================================================
   PAINEL DO ALUNO (mentoria) — saudação + sequência + números,
   no formato do painel que o dono usa hoje. Três blocos que
   empilham no celular e viram três colunas no desktop.
   ============================================================ */
.dash { display: grid; gap: 10px; margin-bottom: 12px; }
.dash-ola, .dash-seq { border-radius: 18px; padding: 20px 18px; }
.dash-ola {
  background: var(--bg-2); border: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center; text-align: center;
}
.dash-ola h1 { font-size: 26px; letter-spacing: -.02em; margin: 0 0 10px; line-height: 1.15; }
.dash-prog { font-size: 13.5px; color: var(--text-2); margin: 0 0 8px; }
.dash-prog b { color: var(--text); font-size: 15px; }
.dash-bar { height: 12px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.dash-bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad);
  transition: width .8s cubic-bezier(.22,.9,.3,1); }
.dash-val { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.dash-tag {
  display: inline-block; padding: 2px 9px; border-radius: 7px; font-weight: 800;
  background: rgba(255,176,1,.14); color: var(--brand); font-variant-numeric: tabular-nums;
}

/* o cartão da sequência é o único com fundo cheio: é o que puxa o olho */
.dash-seq {
  background: linear-gradient(150deg, #B37700 0%, #6b4700 55%, #241a08 100%);
  border: 1px solid rgba(255,176,1,.3); color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
}
[data-theme="light"] .dash-seq { background: linear-gradient(150deg, #C58100 0%, #8A5600 60%, #4a2f00 100%); }
.dash-seq-marca { width: 46px; height: 46px; object-fit: contain; margin-bottom: 2px; }
.dash-seq-n { font-size: 42px; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.dash-seq-t { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.dash-seq small { font-size: 11.5px; opacity: .82; margin-top: 10px; line-height: 1.4; }
.dash-circles { display: flex; gap: 7px; justify-content: center; }

/* os quatro números */
.dash-kpis { display: grid; gap: 8px; }
.dash-kpi {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 13px 15px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--border);
}
.dash-kpi b { display: block; font-size: 20px; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dash-kpi small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.dash-kpi-ic {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.dash-kpi-ic.i1 { background: rgba(230,57,70,.12); }
.dash-kpi-ic.i2 { background: rgba(129,137,190,.14); }
.dash-kpi-ic.i3 { background: rgba(201,119,63,.14); }
.dash-kpi-ic.i4 { background: rgba(42,157,143,.14); }

.dash-mural { margin-bottom: 12px; }
.dash-aviso {
  display: flex; flex-direction: column; gap: 3px; margin-top: 9px;
  padding: 12px 13px; border-radius: 11px; font-size: 12.5px; line-height: 1.5;
  background: rgba(91,143,168,.10); border: 1px solid rgba(91,143,168,.28); color: var(--text-2);
}
.dash-aviso b { color: var(--text); font-size: 13px; }
.dash-aviso.vazio { color: var(--muted); }

@media (min-width: 620px) {
  .dash { grid-template-columns: 1.15fr 1fr 1fr; align-items: stretch; }
  .dash-kpis { grid-template-rows: repeat(4, 1fr); }
  .dash-ola h1 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .dash-bar i { transition: none; } }

/* ===== HISTÓRICO DE ASSUNTOS ESTUDADOS ===== */
.hst-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 14px; }
.hst-kpi {
  display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center;
  padding: 11px 4px; border-radius: 13px; border: 1px solid var(--border); background: var(--bg-2);
}
.hst-kpi b { font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hst-kpi small { font-size: 9.5px; color: var(--muted); line-height: 1.2; }
.hst {
  border: 1px solid var(--border); border-left: 3px solid var(--c); border-radius: 13px;
  padding: 12px 13px; margin-bottom: 9px; background: var(--bg-2);
  animation: hstIn .34s ease both; animation-delay: calc(var(--i) * 38ms);
}
@keyframes hstIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hst-top { display: flex; align-items: flex-start; gap: 10px; }
.hst-tit { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hst-tit b { font-size: 13.5px; line-height: 1.3; }
.hst-tit small { font-size: 11px; color: var(--muted); }
.hst-aval { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.hst-dados { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 11.5px; color: var(--text-2); }
.hst-dados b { color: var(--text); font-variant-numeric: tabular-nums; }
.hst-dados .ok b { color: #2A9D8F; }
.hst-dados .meio b { color: var(--brand); }
.hst-dados .ruim b { color: #F0997B; }
.hst-quando { margin-left: auto; color: var(--muted); }
.hst-nivel {
  margin-top: 9px; padding: 7px 10px; border-radius: 9px; font-size: 11.5px; color: var(--text-2);
  background: rgba(255,176,1,.07); border: 1px solid rgba(255,176,1,.22);
}
.hst-nivel b { color: var(--brand); }
.hst-nota { margin-top: 7px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 380px) { .hst-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .hst { animation: none; } }

/* ===== BAIXA DA MISSÃO — lançamento pós-estudo (modelo emDELTA) ===== */
.bx-topo { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.bx-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--brand); }
.bx-topo h3 { margin: 3px 0 2px; font-size: 17px; line-height: 1.25; }
.bx-topo .sub { font-size: 12.5px; margin: 0; }
.bx-campo { margin-bottom: 14px; }
.bx-campo > label { display: block; font-size: 12px; font-weight: 800; margin-bottom: 7px; color: var(--text); }
.bx-op-min { font-weight: 600; color: var(--muted); }

/* como se saiu: 5 colunas de emoji, igual ao emDELTA */
.bx-grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.bx-grade button {
  display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  padding: 8px 2px; border-radius: 11px; border: 1.5px solid var(--border);
  background: var(--bg-2); color: var(--text-2); font-size: 9.5px; font-weight: 700; line-height: 1.1;
  transition: transform .16s cubic-bezier(.22,.9,.3,1), border-color .18s ease, background .18s ease;
}
.bx-grade button b { font-size: 19px; font-weight: 400; line-height: 1; }
.bx-grade button:active { transform: scale(.93); }
.bx-grade button.on { border-color: var(--brand); background: rgba(255,176,1,.12); color: var(--brand); transform: translateY(-2px); }

/* como fica o assunto: a pergunta que muda o plano */
.bx-opcoes { display: flex; flex-direction: column; gap: 7px; }
.bx-op {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg-2);
  transition: transform .16s cubic-bezier(.22,.9,.3,1), border-color .18s ease, background .18s ease;
}
.bx-op:active { transform: scale(.985); }
.bx-op-e { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.bx-op-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bx-op-t b { font-size: 13px; color: var(--text); }
.bx-op-t small { font-size: 11px; color: var(--muted); line-height: 1.35; }
.bx-op.on { border-color: var(--brand); background: rgba(255,176,1,.10); }
.bx-op.on .bx-op-t b { color: var(--brand); }

.bx-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bx-linha input, .bx textarea {
  width: 100%; padding: 11px 12px; border-radius: 11px; font-size: 14px;
  border: 1.5px solid var(--border); background: var(--bg-2); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bx textarea { min-height: 66px; resize: vertical; font-variant-numeric: normal; line-height: 1.5; }
.bx-linha input:focus, .bx textarea:focus { outline: none; border-color: var(--brand); }
.bx-check {
  display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12.5px; font-weight: 700;
  padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg-2);
  color: var(--text-2); transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.bx-check input { width: 17px; height: 17px; accent-color: var(--brand); }
.bx-check.on { border-color: rgba(240,153,123,.6); background: rgba(240,153,123,.09); color: #F0997B; }

@media (prefers-reduced-motion: reduce) { .bx-grade button, .bx-op { transition: none; } }

/* ===== PLANO DA MENTORIA — dias empilhados, cards largos e achatados (06/08) ===== */
.cronf { display: flex; flex-direction: column; gap: 10px; }
.cronf-dia {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 12px 8px; animation: cronIn .35s ease both; animation-delay: calc(var(--cron-i) * 45ms);
}
.cronf-dia.hoje { border-color: rgba(255,176,1,.65); box-shadow: 0 0 0 1px rgba(255,176,1,.25) inset; }
.cronf-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cronf-dow { font-weight: 800; font-size: 12.5px; letter-spacing: .03em; white-space: nowrap; }
.cronf-dia.hoje .cronf-dow { color: var(--brand); }
.cronf-dow b { font-weight: 600; font-size: 11px; color: var(--muted); }
.cronf-cnt { font-size: 11.5px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.cronf-bar { flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.cronf-bar > div { height: 100%; border-radius: 999px; background: var(--grad); transition: width .5s ease; }
.cronf-livre { margin-left: auto; font-size: 11.5px; color: var(--muted); }
/* cards achatados dentro do dia: menos padding, título numa linha só */
.cronf-dia .mm-meta { padding: 9px 11px; margin-bottom: 6px; }
.cronf-dia .mm-meta:last-child { margin-bottom: 2px; }
.cronf-dia .mm-titulo { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cronf-dia .mm-sub { font-size: 11px; }
.cronf-dia .mm-check { width: 26px; height: 26px; }
@media (prefers-reduced-motion: reduce) { .cronf-dia { animation: none; } }

/* ===== QG do mentorado — campanha + sequência da semana (estilo painel Tutory) ===== */
.mm-week { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.02); }
.mm-week-circles { display: flex; gap: 10px; }
.mm-wk { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mm-wk i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 13px; color: var(--muted); transition: all .2s ease; }
.mm-wk.ok i { background: var(--brand); border-color: var(--brand); color: #1a1611; }
.mm-wk.x i { border-color: rgba(240,153,123,.7); color: #F0997B; }
.mm-wk.hoje i { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,176,1,.18); }
.mm-wk small { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.mm-week > small { font-size: 11.5px; color: var(--muted); }
.mm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0 2px; }
.mm-stat { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 10px; text-align: center; animation: cronIn .35s ease both; animation-delay: calc(var(--mm-i) * 60ms); transition: transform .15s ease, border-color .15s ease; }
.mm-stat:hover { transform: translateY(-2px); border-color: rgba(255,176,1,.5); }
.mm-stat b { display: block; font-family: "Playfair Display", Georgia, serif; font-size: 22px; color: var(--brand); line-height: 1.1; }
.mm-stat small { display: block; margin-top: 4px; font-size: 10.5px; color: var(--muted); font-weight: 600; }
@media (max-width: 560px) { .mm-stats { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .mm-stat { animation: none; } }

/* ===== imagem em questão (recorte do PDF) + lightbox (06/08) ===== */
.q-img { display: block; max-width: 100%; margin: 12px auto 4px; border-radius: 12px; background: #fff; padding: 6px; cursor: zoom-in; box-shadow: 0 4px 18px rgba(0,0,0,.35); }
#q-img-zoom { position: fixed; inset: 0; z-index: 9999; background: rgba(8,6,4,.92); display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 18px; }
#q-img-zoom img { max-width: 100%; max-height: 100%; border-radius: 10px; background: #fff; padding: 8px; }

/* ===== OFERTAS DA ÁREA DO ALUNO + FALE COM O MENEZES (07/08) ===== */
.ofertas-bloco { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.ofertas-titulo { font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.ofertas-titulo span { display: block; font-weight: 600; font-size: 12px; color: var(--muted); margin-top: 2px; }
.oferta-card { border: 1px solid var(--border); border-radius: 14px; padding: 13px 15px; margin-bottom: 10px; background: var(--card); }
.oferta-card.destaque { border-color: rgba(255,176,1,.6); background: rgba(255,176,1,.05); }
.oferta-topo { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 11px; }
.oferta-emoji { font-size: 22px; line-height: 1; flex: none; }
.oferta-topo b { display: block; font-size: 14px; margin-bottom: 3px; }
.oferta-topo small { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.oferta-unit { font-size: 12.5px; margin-top: 2px; }
/* card humano do professor */
.menezes-card { display: flex; gap: 14px; align-items: center; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(135deg, rgba(255,176,1,.08), transparent 60%); }
.menezes-foto { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; object-position: top center; border: 2px solid var(--brand); flex: none; }
.menezes-txt b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.menezes-txt p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 10px; }
.menezes-txt small { display: block; font-size: 11px; color: var(--muted); margin-top: 7px; }
.menezes-txt .btn-wa { width: auto; padding: 9px 16px; font-size: 13px; }
@media (max-width: 520px) { .menezes-card { flex-direction: column; text-align: center; } .menezes-txt .btn-wa { width: 100%; } }

/* ===== oferta persuasiva (teoria/redação) + card de simulado bloqueado ===== */
.oferta-hero { border: 1.5px solid rgba(255,176,1,.55); border-radius: 18px; padding: 20px 18px; margin-bottom: 16px; background: linear-gradient(160deg, rgba(255,176,1,.10), transparent 65%); }
.oh-selo { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--brand); border: 1px solid rgba(255,176,1,.5); border-radius: 999px; padding: 4px 10px; margin-bottom: 12px; }
.oh-titulo { font-family: "Playfair Display", Georgia, serif; font-size: clamp(20px, 5vw, 27px); line-height: 1.25; margin: 0 0 10px; font-weight: 700; }
.oh-titulo b { color: var(--brand); }
.oh-texto { font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin: 0 0 14px; }
.oh-lista { list-style: none; padding: 0; margin: 0 0 16px; }
.oh-lista li { font-size: 13px; color: var(--text-2); line-height: 1.55; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.oh-lista li:last-child { border-bottom: 0; }
.oh-lista b { color: var(--text); }
.oh-preco { margin-bottom: 14px; }
.oh-preco b { font-family: "Playfair Display", Georgia, serif; font-size: 34px; color: var(--brand); }
.oh-de { display: block; font-size: 12px; color: var(--muted); text-decoration: line-through; margin-bottom: 2px; }
.oh-uma { font-size: 12.5px; color: var(--text-2); }
.oh-micro { display: block; text-align: center; font-size: 11px; color: var(--muted); margin-top: 9px; }
.sim-cadeados { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.sim-lock { font-size: 11.5px; color: var(--muted); border: 1px dashed var(--border); border-radius: 8px; padding: 6px 10px; }
.sim-liberar { margin-top: 8px; }

/* TEORIA em vitrine travada: o aluno navega o acervo inteiro de cadeado */
.teo-mat-card.teo-travado { position: relative; opacity: .82; }
.teo-mat-card.teo-travado .cc-nome { color: var(--muted); }
.teo-cadeado { position: absolute; top: 10px; right: 12px; font-size: 15px; opacity: .8; }
.teo-assunto.teo-travado { opacity: .85; }
.teo-assunto.teo-travado .ta-nome { color: var(--muted); }
.teo-assunto.teo-travado .ta-go { color: var(--brand); font-weight: 800; }

/* provas ainda não publicadas: presença sem promessa de acesso */
.sim-breve { margin-bottom: 10px; opacity: .62; border-style: dashed; }

/* Painel do comandante: vitrine de cursos (checkout + área do aluno) */
.vitrine-curso { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:10px 0; border-top:1px solid var(--border); }
.vitrine-curso:first-of-type { border-top:0; }
.vc-nome { display:flex; align-items:center; gap:8px; min-width:0; }
.vc-acoes { display:flex; gap:6px; flex-wrap:wrap; }

/* faixa de pré-visualização "ver como aluno" */
#preview-banner { position: fixed; left: 0; right: 0; z-index: 40; /* abaixo da .bottomnav (z-50) */
  bottom: var(--preview-bottom, 0px);
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  background: var(--brand); color: #1a1200; font-weight: 800; font-size: 12.5px;
  box-shadow: 0 -6px 18px rgba(0,0,0,.35); }
#preview-banner button { background: #1a1200; color: var(--brand); border: 0; border-radius: 8px;
  padding: 6px 14px; font-weight: 800; cursor: pointer; }
/* no celular a faixa sobe pra cima da barra de abas (a altura vem do JS) */
@media (max-width: 899px) {
  #preview-banner { padding-bottom: 9px; }
}
body.com-preview { padding-bottom: 56px; }
body.com-preview .bottomnav { z-index: 50; }
.vitrine-org { display:flex; align-items:center; gap:8px; margin:14px 0 2px; font-size:13px; }
.vitrine-org:first-of-type { margin-top:4px; }
.vitrine-org .sub { font-size:11.5px; }

/* linha do assunto: leitura dinâmica + PDF + questões */
.teo-baixar { min-width: 74px; }
.teo-baixar svg { width: 15px; height: 15px; }
.teo-assunto-row .ta-go { white-space: nowrap; }

/* ── UM CARTÃO POR ASSUNTO ─────────────────────────────────────────────────
   Eram três botões soltos empilhados (assunto, PDF, Questões) e o aluno via
   três caixas do mesmo tamanho sem saber qual era a principal. Agora é um
   cartão só: o assunto ocupa o corpo e as duas ações ficam num rodapé
   dividido, visivelmente secundárias. (Vem depois das regras antigas de
   propósito — sobrescreve sem disputa de especificidade.) */
.teo-assunto-row {
  display: block; background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  transition: border-color .2s ease;
}
.teo-assunto-row:has(.teo-done) { border-color: rgba(255,176,1,.55); }
.teo-assunto-row .teo-assunto {
  display: flex; width: 100%; background: transparent; border: 0; border-radius: 0;
  padding: 11px 12px; gap: 10px; align-items: flex-start;
}
.teo-assunto-row .teo-assunto .ta-ico { margin-top: 1px; }
.teo-assunto-row .teo-assunto .ta-nome { font-size: 13px; }
.teo-assunto-row .teo-assunto .ta-go { align-self: center; }
.teo-assunto-row .teo-acoes { display: flex; border-top: 1px solid var(--border); }
.teo-assunto-row .teo-treinar {
  flex: 1 1 0; min-width: 0; min-height: 40px; padding: 9px 8px;
  background: transparent; border: 0; border-radius: 0;
  transition: background .18s ease, color .18s ease;
}
.teo-assunto-row .teo-treinar + .teo-treinar { border-left: 1px solid var(--border); }
.teo-assunto-row .teo-treinar:active { background: rgba(255,176,1,.12); }
@media (max-width: 560px) {
  .teo-assunto-row .ta-go { font-size: 11px; }
}

/* ===== LEITOR: respiro do texto + "ler o PDF" + marca do YouTube ===== */
/* O texto ficava colado nas bordas: em tela estreita a coluna é limitada pela
   viewport, então quem dá o respiro é o padding — não o max-width. */
.pdf-read { padding: 26px 34px 76px; }
.pdf-read .pdf-par { margin: 0 0 22px; line-height: 1.9; }
.pdf-read .pdf-par.pdf-head { margin: 30px 0 14px; }
@media (min-width: 900px) { .pdf-read { padding: 34px 56px 96px; } }
@media (max-width: 560px) { .pdf-read { padding: 20px 24px 68px; } }

.pdf-top-btn.pdf-yt { display: inline-flex; align-items: center; gap: 7px; }
.pdf-top-btn.pdf-yt svg { width: 20px; height: 15px; flex: none; }
.pdf-top-btn.pdf-yt span { white-space: nowrap; }
@media (max-width: 760px) { .pdf-top-btn.pdf-yt span { display: none; } }

/* modo "ler o PDF": só a página original na tela, sem o texto reflowado */
body.pdf-tudo-orig .pdf-pagina .pdf-par,
body.pdf-tudo-orig .pdf-pagina .pdf-fig-ph,
body.pdf-tudo-orig .pdf-pagina .pdf-orig-btn { display: none; }
body.pdf-tudo-orig .pdf-pagina { margin-bottom: 18px; }
/* ZOOM NO MODO PDF (item 27): o A+/A− existia e não fazia nada aqui — só mexia
   no texto reflowado, que neste modo está escondido. O canvas é renderizado a
   2,4x, então há resolução de sobra para ampliar sem re-renderizar. */
body.pdf-tudo-orig .pdf-pagina canvas.pdf-img { display: block;
  width: 100%; max-width: none; height: auto;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: width .12s ease-out; }
/* com zoom acima de 1 a página passa a ser mais larga que a coluna: a rolagem
   lateral fica no container, nunca no corpo da página */
body.pdf-tudo-orig .pdf-read { overflow-x: auto; }
body.pdf-tudo-orig .pdf-read .pdf-pagina { max-width: none; }

/* ===== ELIMINAR ALTERNATIVA (a tesourinha da prova impressa) ===== */
.alt-linha { display: flex; align-items: center; gap: 8px; }
.alt-linha .alt { flex: 1; min-width: 0; }
.alt-corta {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--border); background: var(--bg-2);
  color: var(--muted); cursor: pointer; padding: 0;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.alt-corta svg { width: 16px; height: 16px; }
.alt-corta:hover { color: var(--brand); border-color: rgba(255,176,1,.55); transform: scale(1.06); }
.alt-corta:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* riscada: continua legível (o aluno pode voltar atrás), mas sai do caminho */
.alt-linha.cortada .alt {
  opacity: .45; text-decoration: line-through; text-decoration-thickness: 1.5px;
  border-style: dashed; background: transparent;
}
.alt-linha.cortada .alt .letra { opacity: .6; }
.alt-linha.cortada .alt:hover { border-color: var(--border); }
.alt-linha.cortada .alt-corta { color: var(--brand); border-color: rgba(255,176,1,.4); }
@media (max-width: 420px) { .alt-corta { width: 28px; height: 28px; } .alt-corta svg { width: 14px; height: 14px; } }
@media (prefers-reduced-motion: reduce) { .alt-corta { transition: none; } .alt-corta:hover { transform: none; } }

/* ═══════════ COMUNIDADE E COMENTÁRIOS ═══════════ */
.com-novo { display: grid; gap: 10px; margin-bottom: 4px; }
.com-novo textarea { width: 100%; resize: vertical; min-height: 66px; font: inherit;
  padding: 11px 13px; line-height: 1.5; }
.com-seletor { display: flex; gap: 8px; flex-wrap: wrap; }

.com-post { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-2);
  padding: 13px 14px; margin-bottom: 10px; }
/* o post do mentor tem que se destacar na rolagem — é a resposta que o aluno procura */
.com-post.do-mentor { border-color: rgba(255,176,1,.42); background: rgba(255,176,1,.05); }
.com-post.fixado { border-color: rgba(255,176,1,.3); }
.com-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.com-autor { font-weight: 700; font-size: 13.5px; }
.com-selo { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; padding: 2px 7px;
  border-radius: 99px; background: var(--brand); color: #1a1200; }
.com-selo.com-fix { background: rgba(255,176,1,.18); color: var(--brand); }
.com-quando { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.com-tag { display: inline-block; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.com-corpo { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; white-space: pre-line;
  overflow-wrap: anywhere; }

.com-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.com-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 34px;
  padding: 0 11px; border-radius: 99px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.com-btn:active { transform: scale(.97); }
.com-btn.on { color: var(--brand); border-color: rgba(255,176,1,.45); background: rgba(255,176,1,.08); }
.com-btn.com-apagar { margin-left: auto; color: #a06a64; border-color: transparent; }
.com-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.com-respostas { margin-top: 11px; padding-left: 12px; border-left: 2px solid var(--border); }
.com-resp { margin-bottom: 10px; font-size: 13.5px; }
.com-resp.do-mentor { border-left: 2px solid var(--brand); margin-left: -14px; padding-left: 12px; }
.com-resp b { font-size: 13px; }
.com-resp p { margin: 3px 0 0; line-height: 1.5; color: var(--text-dim, #b3b3b3); overflow-wrap: anywhere; }
.com-responder { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
.com-responder textarea { flex: 1; resize: vertical; font: inherit; padding: 9px 11px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); }

/* bloco preso ao conteúdo (questão, teoria, simulado) */
.com-inline { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.com-inline-head { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.com-inline-head span { color: var(--brand); }
.com-novo-inline { grid-template-columns: 1fr auto; align-items: start; }
@media (max-width: 460px) { .com-novo-inline { grid-template-columns: 1fr; } }
.com-btn i { font-style: normal; }
/* o seletor de tipo precisa caber o rótulo inteiro no celular */
.com-seletor select { max-width: 100%; width: 100%; }
@media (min-width: 480px) { .com-seletor select { max-width: 260px; } }
/* post esperando liberação: o autor vê o próprio, apagado, com o selo */
.com-selo.com-espera { background: rgba(255,255,255,.1); color: var(--muted); }
.com-post.em-analise { opacity: .72; border-style: dashed; }
.com-post.em-analise .com-acoes { display: none; }

/* ---- cronograma em projeção (espera do aluno) + trilha da baixa ---- */
.proj-card {
  border: 1px solid rgba(255,176,1,.30); border-radius: 18px; padding: 26px 20px;
  background: linear-gradient(180deg, rgba(255,176,1,.07), rgba(255,176,1,.02));
  text-align: center;
}
.proj-selo {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  color: var(--brand); border: 1px solid rgba(255,176,1,.4); border-radius: 999px;
  padding: 4px 12px; margin-bottom: 12px;
}
.proj-card h1 { font-size: clamp(19px, 5vw, 25px); line-height: 1.2; margin: 0 0 10px; }
.proj-txt { color: var(--text-2); font-size: 14px; line-height: 1.65; margin: 0 auto 18px; max-width: 46ch; }
.proj-passos { display: grid; gap: 8px; text-align: left; max-width: 340px; margin: 0 auto; }
.proj-passo {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted);
  background: rgba(255,255,255,.03); border-radius: 11px; padding: 10px 13px;
}
.proj-passo span { width: 18px; text-align: center; flex: none; }
.proj-passo.pronto { color: var(--text-2); }
.proj-passo.pronto span { color: var(--green); font-weight: 800; }
.proj-passo.andando { color: var(--text); border: 1px solid rgba(255,176,1,.28); background: rgba(255,176,1,.06); }
.proj-spin {
  width: 13px; height: 13px; border-radius: 50%; display: inline-block;
  border: 2px solid rgba(255,176,1,.28); border-top-color: var(--brand);
  animation: proj-gira .9s linear infinite;
}
@keyframes proj-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .proj-spin { animation: none; } }
.proj-rodape { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin: 18px auto 0; max-width: 44ch; }
.bx-trilha .material-card { margin-top: 8px; }

/* ── PAINEL DO MENTOR: abas de concurso e alerta de saúde do plano ──────────
   O aluno pode ter mais de um plano (PMPE + CBMPE). A tela mostrava só um e o
   mentor não conseguia administrar o segundo. */
.fp-planos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.fp-plano-aba {
  padding: 7px 12px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 700;
  color: var(--text-2); background: var(--bg-2); border: 1px solid var(--border);
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .16s cubic-bezier(.22,.9,.3,1);
}
.fp-plano-aba:hover { color: var(--text); border-color: rgba(255,176,1,.4); }
.fp-plano-aba:active { transform: scale(.95); }
.fp-plano-aba.ativa { color: #211904; background: var(--grad); border-color: transparent; }
.fp-alerta {
  margin: 10px 0 0; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.5;
  color: #F0997B; background: rgba(240,153,123,.09); border: 1px solid rgba(240,153,123,.32);
  animation: cronIn .3s ease both;
}
/* horas de cada dia, no painel do mentor (o que o aluno pedia "feito o tutory") */
.fh-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fh-dia { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fh-dia > span { font-size: 11px; font-weight: 800; color: var(--muted); text-align: center; }
.fh-dia .fh-in {
  padding: 8px 4px; text-align: center; font-size: 13px; font-weight: 700;
  -moz-appearance: textfield; appearance: textfield;
}
.fh-dia .fh-in::-webkit-outer-spin-button,
.fh-dia .fh-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 420px) {
  .fh-grade { grid-template-columns: repeat(4, 1fr); }
}
/* meta de questões do dono, ao lado do tempo da meta */
.mss-tag-q {
  display: inline-flex; align-items: baseline; gap: 3px; padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: var(--brand);
  background: rgba(255,176,1,.10); border: 1px solid rgba(255,176,1,.26);
}
.mss-tag-q small { font-size: 9.5px; font-weight: 700; opacity: .8; }

/* ── PAINEL DE METODOLOGIA (modelo Tutory, no painel do comandante) ─────────
   Previsão de horas + configuração por disciplina. É aqui que a metodologia
   do dono sai do código e vira coisa dele. */
.fp-prev { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 8px; margin-bottom: 12px; }
.fp-prev-card {
  padding: 13px 12px; border-radius: 14px; background: var(--bg-2);
  border: 1px solid var(--border); border-left: 3px solid var(--c, var(--brand));
  display: grid; gap: 2px;
  animation: cronIn .34s cubic-bezier(.22,.9,.3,1) both; animation-delay: calc(var(--i,0) * 55ms);
}
.fp-prev-card b { font-size: 24px; line-height: 1; color: var(--c, var(--brand)); font-variant-numeric: tabular-nums; }
.fp-prev-card b small { font-size: 13px; font-weight: 700; opacity: .75; }
.fp-prev-card span { font-size: 11px; color: var(--text-2); line-height: 1.35; }

.fm-metodo { display: grid; gap: 10px; }
.fm-met-card {
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-2); padding: 13px;
  animation: cronIn .3s ease both; animation-delay: calc(var(--i,0) * 35ms);
}
.fm-met-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fm-met-topo b { font-size: 13.5px; }
.fm-met-topo .sub { font-size: 11px; }
.fm-met-mods { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 2px; }
.fm-met-mod { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); cursor: pointer; }
.fm-met-mod input { accent-color: var(--brand); width: 15px; height: 15px; }
.fm-met-campos, .fm-met-dias { display: grid; gap: 8px; margin-top: 10px; }
.fm-met-campos { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.fm-met-dias { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.fm-met-campos label, .fm-met-dias label {
  display: grid; gap: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.fm-met-campos .input, .fm-met-dias .input { padding: 8px 10px; font-size: 13px; }
.fm-met-campos small, .fm-met-dias small { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: 0; }
.fm-met-acoes { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.fm-met-acoes .btn { width: auto; }
.fm-met-copiar { font-size: 12px; color: var(--brand); text-decoration: underline; cursor: pointer; background: none; border: 0; }

/* ── LEITURA DINÂMICA: infográfico aparece INLINE ──────────────────────────
   A página de figura/fórmula era um cartão vazio pedindo pra "abrir a página
   original". Agora ela é desenhada aqui mesmo, no fluxo da leitura. */
.pdf-fig-img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.28);
  animation: fadeUp .35s ease both;
}
.pdf-pagina-fig { padding: 4px 0; }
.pdf-fig-carregando { padding: 26px 12px; text-align: center; color: #9a938a; font-size: 13px; }

/* ── PAINEL DO MENTOR: "como o aluno vê" ───────────────────────────────────
   O dono pediu para entrar na tela do aluno. Aqui ele vê a missão do dia com
   a mesma cara — em modo leitura, sem risco de dar baixa no lugar dele. */
.fca-aviso {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  padding: 9px 12px; border-radius: 11px; font-size: 12.5px; line-height: 1.5;
  color: var(--brand); background: rgba(255,176,1,.10); border: 1px solid rgba(255,176,1,.28);
}
.fca-bloco {
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-2);
  padding: 13px; margin-bottom: 10px;
  animation: cronIn .3s ease both;
}
.fca-bloco.alerta { border-color: rgba(240,153,123,.4); }
.fca-tit {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 10px;
}
.fca-tit span { font-size: 11px; color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 700; }
.fca-meta {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 0;
  border-top: 1px solid var(--border);
}
.fca-bloco .fca-meta:first-of-type { border-top: 0; padding-top: 0; }
.fca-meta.feita { opacity: .55; }
.fca-meta.feita .fca-txt b { text-decoration: line-through; }
.fca-ico { font-size: 17px; line-height: 1.2; flex: 0 0 auto; }
.fca-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fca-txt b { font-size: 13px; line-height: 1.3; }
.fca-txt small { font-size: 11.5px; color: var(--text-2); line-height: 1.4; }
.fca-txt em { font-size: 11px; color: var(--brand); font-style: normal; line-height: 1.45; }
.fca-min {
  flex: 0 0 auto; text-align: right; font-size: 13px; font-weight: 800; color: var(--text-2);
  display: grid; gap: 2px; font-variant-numeric: tabular-nums;
}
.fca-min small { font-size: 9.5px; font-weight: 700; opacity: .75; }
.fca-min i { font-style: normal; font-size: 10.5px; color: var(--brand); }
.fca-vazio { font-size: 12.5px; color: var(--muted); padding: 6px 0; }

/* ── ESPELHO SEGURO DO ALUNO ──────────────────────────────────────────────
   Ocupa a plataforma inteira, mas continua dentro da sessão do mentor. A
   faixa fixa não deixa confundir o espelho com uma conta real e a única ação
   persistente disponível é sair. */
.fm-mirror-bg { padding: 0 !important; place-items: stretch !important; background: #0f0d09; backdrop-filter: none; }
.fm-mirror-modal {
  width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  padding: 0; border: 0; border-radius: 0 !important; overflow: hidden;
  background: #15120d; animation: none;
}
.msv-shell { height: 100%; display: flex; flex-direction: column; color: var(--text); }
.msv-banner {
  position: relative; z-index: 3; flex: 0 0 auto; min-height: 68px;
  padding: calc(10px + env(safe-area-inset-top)) clamp(12px, 3vw, 28px) 10px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px;
  color: #201704; background: #ffcf59; border-bottom: 1px solid rgba(0,0,0,.2);
  box-shadow: 0 7px 24px rgba(0,0,0,.26);
}
.msv-banner > span { font-size: 22px; }
.msv-banner > div { min-width: 0; display: grid; gap: 2px; }
.msv-banner strong { font-size: 13px; }
.msv-banner small { font-size: 10.5px; line-height: 1.35; color: rgba(32,23,4,.76); overflow-wrap: anywhere; }
.msv-banner button {
  min-height: 44px; padding: 8px 13px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(32,23,4,.45); background: #211a0d; color: #fff;
  font: inherit; font-size: 11.5px; font-weight: 850;
}
.msv-banner button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.msv-app { min-height: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #120f0b; }
.msv-app-header {
  flex: 0 0 auto; min-height: 68px; padding: 10px clamp(14px, 4vw, 36px);
  display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--border);
  background: #19150f;
}
.msv-app-header img { width: 46px; height: 46px; object-fit: contain; }
.msv-app-header > div:not(.msv-identity) { min-width: 0; display: grid; gap: 1px; }
.msv-app-header > div > span { color: var(--brand); font-size: 9px; font-weight: 850; letter-spacing: .15em; }
.msv-app-header > div > strong { font-family: Georgia, serif; font-size: 18px; }
.msv-identity { margin-left: auto; min-width: 0; text-align: right; display: grid; gap: 2px; }
.msv-identity b, .msv-identity small { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msv-identity b { font-size: 11.5px; }
.msv-identity small { color: var(--muted); font-size: 9.5px; }
.msv-app-body {
  min-height: 0; flex: 1; display: grid; grid-template-columns: 220px minmax(0, 1fr);
  overflow: hidden;
}
.msv-nav {
  min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 12px;
  overflow-y: auto; overflow-x: hidden; border-right: 1px solid var(--border); background: #15120d;
  scrollbar-width: thin;
}
.msv-nav::-webkit-scrollbar { width: 5px; height: 5px; }
.msv-nav button {
  flex: 0 0 auto; min-height: 46px; width: 100%; display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: 10px; border: 1px solid transparent;
  color: var(--text-2); background: transparent; font: inherit; text-align: left;
  cursor: pointer;
}
.msv-nav button > span { font-size: 16px; text-align: center; }
.msv-nav button > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; white-space: nowrap; }
.msv-nav button > i { color: var(--muted); font-size: 8px; font-style: normal; }
.msv-nav button:hover { border-color: var(--border); background: var(--bg-2); }
.msv-nav button.on { color: #211904; background: var(--brand); border-color: var(--brand); }
.msv-nav button.on > i { color: rgba(33,25,4,.7); }
.msv-nav button.unavailable:not(.on) { opacity: .62; }
.msv-nav button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.msv-content { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: clamp(14px, 3vw, 28px); overscroll-behavior: contain; }
.msv-content > * { width: min(100%, 980px); margin-inline: auto; }
.msv-section-title {
  display: flex; align-items: end; justify-content: space-between; gap: 20px;
  margin-bottom: 14px;
}
.msv-section-title > div { min-width: 0; }
.msv-section-title span { color: var(--brand); font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.msv-section-title h2 { margin: 3px 0 0; font-size: clamp(20px, 3vw, 28px); }
.msv-section-title p { width: min(48%, 470px); margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: right; }
.msv-welcome {
  padding: clamp(18px, 4vw, 34px); margin-bottom: 12px; border-radius: 18px;
  border: 1px solid rgba(255,176,1,.3);
  background: radial-gradient(circle at 85% 0, rgba(255,176,1,.14), transparent 40%), var(--bg-2);
}
.msv-eyebrow { color: var(--brand); font-size: 9.5px; font-weight: 850; letter-spacing: .15em; }
.msv-welcome h1 { margin: 5px 0 3px; font-size: clamp(23px, 5vw, 36px); }
.msv-welcome p { color: var(--text-2); font-size: 12px; }
.msv-progress { margin-top: 16px; display: grid; gap: 7px; }
.msv-progress span { display: flex; justify-content: space-between; color: var(--text-2); font-size: 11px; }
.msv-progress span b { color: var(--brand); }
.msv-progress::after { content: ""; height: 7px; border-radius: 99px; background: var(--bg-3); grid-area: 2 / 1; }
.msv-progress i { position: relative; z-index: 1; height: 7px; max-width: 100%; border-radius: 99px; background: var(--grad); grid-area: 2 / 1; }
.msv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.msv-kpis > div { padding: 13px; border-radius: 13px; border: 1px solid var(--border); background: var(--bg-2); display: grid; gap: 3px; }
.msv-kpis b { color: var(--brand); font-size: 18px; font-variant-numeric: tabular-nums; }
.msv-kpis span { color: var(--muted); font-size: 9.5px; line-height: 1.3; }
.msv-kpis .danger b { color: #ef8b7d; }
.msv-kpis .success b { color: #7ee08a; }
.msv-panel {
  padding: 14px; margin-bottom: 12px; border-radius: 15px;
  border: 1px solid var(--border); background: var(--bg-2);
}
.msv-panel.danger { border-color: rgba(239,139,125,.38); }
.msv-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 10px;
}
.msv-panel-head > div { min-width: 0; }
.msv-panel-head span { display: block; color: var(--brand); font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.msv-panel-head h3 { margin: 2px 0 0; font-size: 14px; }
.msv-panel-head > h3 { margin: 0; }
.msv-panel-head > b { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.msv-meta {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: start; gap: 10px;
  padding: 11px 0; border-top: 1px solid var(--border);
}
.msv-panel .msv-meta:nth-child(2) { border-top: 0; }
.msv-meta.done { opacity: .66; }
.msv-meta.cancelled { opacity: .45; }
.msv-meta-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,176,1,.10); }
.msv-meta-copy { min-width: 0; display: grid; gap: 3px; }
.msv-meta-copy b, .msv-meta-copy span, .msv-meta-copy small { overflow-wrap: anywhere; }
.msv-meta-copy b { font-size: 12.5px; line-height: 1.35; }
.msv-meta-copy span { color: var(--text-2); font-size: 11px; line-height: 1.4; }
.msv-meta-copy small { color: var(--brand); font-size: 10px; line-height: 1.45; }
.msv-meta-info { min-width: 70px; display: grid; justify-items: end; gap: 3px; text-align: right; }
.msv-meta-info time, .msv-meta-info span { color: var(--muted); font-size: 9.5px; }
.msv-meta-info > b { font-size: 12px; }
.msv-meta-info > b small { color: var(--muted); font-size: 8.5px; }
.msv-pill { display: inline-flex; align-items: center; min-height: 22px; width: max-content; max-width: 100%; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--border); color: var(--text-2); background: var(--bg-3); font-size: 9px; font-weight: 800; overflow-wrap: anywhere; }
.msv-pill.ok { color: #15341d; background: #7ee08a; border-color: #7ee08a; }
.msv-pill.muted { opacity: .68; }
.msv-notice {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 11px 13px;
  border-radius: 12px; border: 1px solid rgba(255,176,1,.25); background: rgba(255,176,1,.07);
}
.msv-notice b { flex: 0 0 auto; color: var(--brand); font-size: 11px; }
.msv-notice span { min-width: 0; color: var(--text-2); font-size: 10.5px; line-height: 1.45; overflow-wrap: anywhere; }
.msv-notice.warning { border-color: rgba(239,139,125,.3); background: rgba(239,139,125,.07); }
.msv-notice.warning b { color: #ef8b7d; }
.msv-card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 10px; margin-bottom: 12px;
}
.msv-plan-card, .msv-essay-card, .msv-flashcard, .msv-material-card {
  min-width: 0; padding: 15px; border-radius: 15px; border: 1px solid var(--border); background: var(--bg-2);
}
.msv-plan-card.live { border-color: rgba(126,224,138,.32); }
.msv-card-top { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.msv-card-top > span { min-width: 0; color: var(--brand); font-size: 9px; font-weight: 850; letter-spacing: .1em; overflow-wrap: anywhere; }
.msv-plan-card h3, .msv-essay-card h3, .msv-flashcard h3, .msv-material-card h3 { margin: 12px 0 8px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.msv-plan-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0 0; }
.msv-plan-card dl > div { min-width: 0; display: grid; gap: 2px; }
.msv-plan-card dt { color: var(--muted); font-size: 9px; }
.msv-plan-card dd { margin: 0; font-size: 11px; overflow-wrap: anywhere; }
.msv-essay-card p, .msv-flashcard p, .msv-material-card p { color: var(--text-2); font-size: 10.5px; line-height: 1.5; overflow-wrap: anywhere; }
.msv-essay-card > small, .msv-flashcard > small, .msv-material-card > small { color: var(--muted); font-size: 9.5px; line-height: 1.4; overflow-wrap: anywhere; }
.msv-grade { color: var(--brand); font-size: 26px; font-weight: 850; }
.msv-attempt, .msv-result, .msv-note, .msv-message, .msv-grant {
  min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border);
}
.msv-panel > .msv-attempt:nth-child(2), .msv-panel > .msv-result:nth-child(2), .msv-panel > .msv-note:nth-child(2), .msv-panel > .msv-message:nth-child(2), .msv-panel > .msv-grant:nth-child(2) { border-top: 0; }
.msv-attempt > span { flex: 0 0 auto; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; }
.msv-attempt.correct > span { color: #15341d; background: #7ee08a; }
.msv-attempt.wrong > span { color: #fff; background: #b95047; }
.msv-attempt > div, .msv-result > div, .msv-note > div, .msv-grant > div { min-width: 0; display: grid; gap: 2px; }
.msv-attempt > div, .msv-result > div:first-child, .msv-note > div, .msv-grant > div:first-child { flex: 1; }
.msv-attempt b, .msv-result b, .msv-note b, .msv-grant b, .msv-message b { font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }
.msv-attempt small, .msv-result small, .msv-note small, .msv-grant small, .msv-message small, .msv-attempt time, .msv-note time { color: var(--muted); font-size: 9.5px; line-height: 1.4; overflow-wrap: anywhere; }
.msv-attempt time, .msv-note time { flex: 0 0 auto; text-align: right; }
.msv-result > div:last-child, .msv-grant > div:last-child { flex: 0 0 auto; align-items: end; text-align: right; }
.msv-result > div:last-child > b { color: var(--brand); font-size: 16px; }
.msv-note > span { flex: 0 0 auto; font-size: 18px; }
.msv-note p, .msv-message p { margin: 3px 0 0; color: var(--text-2); font-size: 10.5px; line-height: 1.5; overflow-wrap: anywhere; }
.msv-message { display: grid; gap: 4px; align-items: start; }
.msv-chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.msv-chip-row span { padding: 6px 10px; border-radius: 99px; color: #251b05; background: var(--brand); font-size: 10px; font-weight: 850; }
.msv-subnav { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; scrollbar-width: none; }
.msv-subnav::-webkit-scrollbar { display: none; }
.msv-subnav button { flex: 0 0 auto; min-height: 44px; padding: 8px 12px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border); color: var(--text-2); background: var(--bg-2); font: inherit; font-size: 10.5px; font-weight: 800; }
.msv-subnav button.on { color: #251b05; border-color: var(--brand); background: var(--brand); }
.msv-empty, .msv-unavailable, .msv-loading {
  min-width: 0; display: grid; place-items: center; gap: 7px; padding: clamp(24px, 6vw, 50px) 18px;
  border-radius: 15px; border: 1px dashed var(--border); color: var(--muted); text-align: center;
}
.msv-empty > span, .msv-unavailable > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--brand); background: rgba(255,176,1,.09); font-size: 20px; }
.msv-empty b, .msv-unavailable h3, .msv-loading b { margin: 0; color: var(--text); font-size: 13px; }
.msv-empty p, .msv-unavailable p, .msv-loading span { max-width: 560px; margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.55; overflow-wrap: anywhere; }
.msv-unavailable small { color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.msv-unavailable button { min-height: 44px; margin-top: 5px; padding: 8px 13px; border-radius: 9px; cursor: pointer; border: 1px solid var(--brand); color: var(--brand); background: transparent; font: inherit; font-size: 10.5px; font-weight: 800; }
.msv-loading i { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: msvSpin .8s linear infinite; }
@keyframes msvSpin { to { transform: rotate(360deg); } }
.msv-readonly-note {
  flex: 0 0 auto; padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); color: var(--muted); background: #15120d;
  text-align: center; font-size: 9.5px; line-height: 1.4;
}
body.mentor-student-view-active { overflow: hidden; }

@media (max-width: 600px) {
  .msv-banner { grid-template-columns: auto minmax(0, 1fr); }
  .msv-banner button { grid-column: 1 / -1; width: 100%; }
  .msv-app-header { min-height: 60px; }
  .msv-app-header img { width: 38px; height: 38px; }
  .msv-identity b, .msv-identity small { max-width: 38vw; }
  .msv-app-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .msv-nav {
    flex-direction: row; gap: 6px; padding: 7px 9px; overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid var(--border); scrollbar-width: none;
  }
  .msv-nav::-webkit-scrollbar { display: none; }
  .msv-nav button { width: auto; min-width: 74px; min-height: 50px; grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 1px; justify-items: center; padding: 5px 9px; text-align: center; }
  .msv-nav button > span { font-size: 15px; }
  .msv-nav button > b { max-width: 100%; font-size: 9.5px; }
  .msv-nav button > i { display: none; }
  .msv-section-title { display: grid; gap: 6px; }
  .msv-section-title p { width: auto; text-align: left; }
  .msv-kpis { grid-template-columns: 1fr 1fr; }
  .msv-content { padding: 13px 11px 20px; }
  .msv-meta { grid-template-columns: 28px minmax(0, 1fr); }
  .msv-meta-info { grid-column: 2; min-width: 0; grid-auto-flow: column; justify-content: start; justify-items: start; text-align: left; }
  .msv-attempt { align-items: start; }
  .msv-attempt time, .msv-note time { max-width: 72px; }
  .msv-notice { align-items: flex-start; display: grid; gap: 3px; }
  .msv-readonly-note { font-size: 8.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .fm-mirror-modal, .msv-welcome, .msv-loading i { animation: none; }
}

/* ── QUESTÃO RESPONDÍVEL DENTRO DA LEITURA ────────────────────────────────
   O material já traz questão e gabarito comentado. Em vez de texto morto,
   vira treino: o aluno marca, descobre na hora e conta na estatística. */
.pdfq {
  margin: 20px 0; padding: 15px; border-radius: 14px;
  background: rgba(255,176,1,.05); border: 1px solid rgba(255,176,1,.26);
  animation: fadeUp .3s ease both;
}
.pdfq:focus-within { border-color: rgba(255,176,1,.62); box-shadow: 0 0 0 2px rgba(255,176,1,.10); }
.pdfq-contexto { margin: 0 0 12px; padding: 9px 11px; border-radius: 9px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 13px; line-height: 1.55; }
.pdfq-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.pdfq-num { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.pdfq-selo { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.pdfq-selo.neutro { color: #a99a7c; background: rgba(255,255,255,.06); }
.pdfq-selo.ok { color: #0f2d16; background: #7ee08a; }
.pdfq-selo.erro { color: #fff; background: #c0453c; }
.pdfq-enun { font-size: 15px; line-height: 1.6; margin: 0 0 12px; color: inherit; font-family: inherit; }
.pdfq-alts { display: grid; gap: 7px; }
.pdfq-alt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 11px; cursor: pointer; font-size: 14px; line-height: 1.5;
  color: inherit; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  transition: border-color .18s ease, background .18s ease, transform .16s cubic-bezier(.22,.9,.3,1);
}
.pdfq-alt:hover:not(:disabled) { border-color: rgba(255,176,1,.5); background: rgba(255,176,1,.08); }
.pdfq-alt:active:not(:disabled) { transform: scale(.99); }
.pdfq-alt:disabled { cursor: default; }
.pdfq-letra {
  flex: 0 0 24px; height: 24px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
  background: rgba(255,255,255,.10); color: inherit;
}
.pdfq-alt.certa { border-color: #7ee08a; background: rgba(126,224,138,.14); }
.pdfq-alt.certa .pdfq-letra { background: #7ee08a; color: #0f2d16; }
.pdfq-alt.errada { border-color: #c0453c; background: rgba(192,69,60,.14); }
.pdfq-alt.errada .pdfq-letra { background: #c0453c; color: #fff; }
.pdfq-alt.apagada { opacity: .45; }
.pdfq-coment {
  margin-top: 11px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.6;
  background: rgba(255,255,255,.05); border-left: 3px solid var(--brand);
}
.pdf-read.tema-sepia .pdfq-alt, .pdf-read.tema-claro .pdfq-alt { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.12); }
.pdf-read.tema-sepia .pdfq-letra, .pdf-read.tema-claro .pdfq-letra { background: rgba(0,0,0,.08); }
.pdf-read.tema-sepia .pdfq-coment, .pdf-read.tema-claro .pdfq-coment { background: rgba(0,0,0,.04); }
.pdfq-alt:focus-visible, .pdfq-refazer:focus-visible, .pdf-q-resumo button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pdf-q-resumo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; background: rgba(255,176,1,.08); border-bottom: 1px solid rgba(255,176,1,.22); color: var(--text); font-size: 12px; line-height: 1.4; }
.pdf-q-resumo button { min-height: 38px; flex: 0 0 auto; padding: 6px 10px; border-radius: 9px; border: 1px solid rgba(255,176,1,.38); background: transparent; color: var(--brand); font-weight: 800; cursor: pointer; }

/* ── RELATÓRIO / HISTÓRICO / CONVERSA no painel do mentor ─────────────────── */
.fm-rel-insight { display: grid; gap: 5px; margin-bottom: 12px; padding: 12px 13px;
  border-radius: 13px; background: var(--bg-2); border: 1px solid var(--border); }
.fm-rel-insight p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.fm-rel-insight b { color: var(--text); }
.fm-rel-bloco { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-2);
  padding: 13px; margin-bottom: 10px; animation: cronIn .3s ease both; }
.fm-rel-linha { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.fm-rel-bloco .fm-rel-linha:first-of-type { border-top: 0; padding-top: 0; }
.fm-rel-nome { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fm-rel-nome b { font-size: 13px; line-height: 1.3; }
.fm-rel-nome small { font-size: 11px; color: var(--muted); }
.fm-rel-pct { flex: 0 0 auto; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 3px 9px; border-radius: 999px; }
.fm-rel-pct.bom { color: #0f2d16; background: #7ee08a; }
.fm-rel-pct.meio { color: #3a2a05; background: #e2c15c; }
.fm-rel-pct.ruim { color: #fff; background: #c0453c; }
.fm-rel-pct.vazio { color: var(--muted); background: transparent; }
.fm-rel-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.fm-rel-acoes .btn { width: auto; }
.fm-hist-linha { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--border); }
.fm-hist-quando { flex: 0 0 auto; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; width: 92px; }
.fm-hist-num { flex: 0 0 auto; font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fm-hist-fonte { flex: 0 0 auto; font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .05em; }
.fm-hist-fonte.app { color: #211904; background: var(--brand); }
.fm-hist-fonte.tutory { color: var(--muted); background: var(--bg-3); border: 1px solid var(--border); }
.fm-conv-duv { padding: 11px 0; border-top: 1px solid var(--border); display: grid; gap: 5px; }
.fm-rel-bloco .fm-conv-duv:first-of-type { border-top: 0; padding-top: 0; }
.fm-conv-duv b { font-size: 13px; line-height: 1.45; }
.fm-conv-duv small { font-size: 10.5px; color: var(--muted); }
.fm-conv-duv p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.fm-conv-duv.aberta b { color: var(--brand); }
.fm-conv-rec { padding: 9px 0; border-top: 1px solid var(--border); }
.fm-rel-bloco .fm-conv-rec:first-of-type { border-top: 0; padding-top: 0; }
.fm-conv-rec p { margin: 0 0 3px; font-size: 12.5px; line-height: 1.55; }
.fm-conv-rec small { font-size: 10.5px; color: var(--muted); }
.fm-conv-rec.lido { opacity: .6; }

/* ÍNDICE DO PAINEL ÚNICO — o dono operava em duas telas diferentes (esta e o
   Portal em React) e jurava que as entregas não existiam, porque estava
   olhando a outra. Ordem dele (10/08): "quero um painel só". */
.pc-secoes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px; margin: 0 0 16px;
}
.pc-sec {
  display: grid; gap: 2px; padding: 12px 13px; border-radius: 13px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-left: 3px solid rgba(255, 176, 1, .5);
  text-decoration: none; color: var(--text); cursor: pointer;
  transition: border-left-color .15s ease, background-color .15s ease;
}
.pc-sec:hover { background: var(--bg-3); border-left-color: var(--brand); }
.pc-sec b { font-size: 13px; font-weight: 800; }
.pc-sec span { font-size: 11px; color: var(--muted); }
/* seções que ainda moram no Portal — marcadas para o dono saber que saem daqui */
.pc-sec-fora { border-left-color: rgba(255,255,255,.18); }
.pc-sec-fora span { opacity: .8; }
/* Atalho para o espelho seguro do painel do aluno, sempre somente leitura. */
.fm-espelho {
  margin-top: 8px; padding: 7px 11px; border-radius: 9px; cursor: pointer;
  background: rgba(255,176,1,.10); color: var(--brand);
  border: 1px solid rgba(255,176,1,.34);
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
}
.fm-espelho:hover { background: rgba(255,176,1,.2); }
.fm-espelho:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Porta única do painel: abre somente leituras acadêmicas temporárias. */
.fm-portas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Leitor/cronograma: alvos de toque acessíveis e texto resistente a telas estreitas. */
.pdfq-alt { min-height: 44px; overflow-wrap: anywhere; }
.pdfq-coment { overflow-wrap: anywhere; }
.pdfq-refazer { min-height: 44px; margin-top: 9px; padding: 8px 12px; border-radius: 9px; border: 1px solid rgba(255,176,1,.35); background: transparent; color: var(--brand); font-weight: 700; cursor: pointer; }
.pdfq-complex-list { display: grid; gap: 12px; width: 100%; margin-top: 14px; text-align: left; }
.pdf-top { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pdf-top::-webkit-scrollbar, .pdf-tools::-webkit-scrollbar { display: none; }
.pdf-top > * { flex-shrink: 0; }
.pdf-tools { scrollbar-width: none; }
.pdf-top .icon-btn, .pdf-top-btn, .pdf-top-crono, .pdf-tool, .pvb-tema, .pvb-fs { min-height: 44px; }
.cron-meta.t-correcao .cm-tipo { background: rgba(255,176,1,.18); color: #FFD36B; }
.cron-fixo-acoes .cron-treinar { min-height: 44px; }
@media (max-width: 560px) {
  .pdf-read { padding: 20px 20px 68px; }
  .pdf-tit { min-width: 132px; max-width: 58vw; }
  .pdfq { padding: 13px 11px; }
  .pdfq-alt { padding: 10px; }
  .pdf-q-resumo { align-items: flex-start; padding: 9px 11px; }
  .pdf-q-resumo button { min-height: 44px; max-width: 46%; white-space: normal; }
}

/* ============================================================
   TESTE DO COMANDO — convite e cantinho
   O cantinho fica à ESQUERDA porque #crono-fab já ocupa a direita
   (right:14px; bottom:84px). Mesma altura para os dois pousarem na
   mesma linha, acima da .bottomnav.
   ============================================================ */
/* A linha do teste do Comando dentro de "Mais recursos". O botão flutuante
   foi removido a pedido do dono: oferta parada na tela o tempo todo incomoda. */
.trial-linha { border-color: rgba(255, 176, 1, .34) !important; }
.trial-linha .mais-nm { color: var(--brand); font-weight: 700; }
.trial-linha.on .mais-nm { color: #9BE29B; }

.trial-convite { text-align: center; }
.trial-selo { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.trial-convite h3 { margin: 0 0 6px; font-size: 21px; }
.trial-convite .sub { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; }

.trial-lista { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; display: grid; gap: 9px; }
.trial-lista li {
  position: relative; padding: 10px 12px 10px 34px; font-size: 13.5px; line-height: 1.45;
  background: rgba(255, 176, 1, .05); border: 1px solid rgba(255, 176, 1, .14); border-radius: 11px;
}
.trial-lista li::before {
  content: "✓"; position: absolute; left: 12px; top: 10px;
  color: var(--brand); font-weight: 800;
}

.trial-preco {
  display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-bottom: 14px;
}
.trial-preco span { color: var(--muted); font-size: 13px; }
.trial-preco b { color: var(--brand); font-size: 30px; font-weight: 800; letter-spacing: -.5px; }

.trial-convite .btn { width: 100%; }
.trial-convite .btn-ghost { margin-top: 8px; background: transparent; color: var(--muted); }
.trial-rodape { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }


/* Faixa de "você está na conta de outro" — ver ATOR_ALUNO em app.js. */
#ator-faixa {
  position: fixed; left: 0; right: 0; top: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; padding: 9px 14px;
  background: #7A2E12; color: #FFE9D6;
  font-size: 13px; line-height: 1.4; text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
#ator-faixa b { color: #FFD9B8; }
#ator-faixa button {
  border: 1px solid rgba(255,255,255,.45); background: transparent;
  color: #FFE9D6; border-radius: 999px; padding: 5px 12px;
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
#ator-faixa button:hover { background: rgba(255,255,255,.12); }
/* A ALTURA É MEDIDA, NÃO CHUTADA (20/08/2026). Os 42px fixos daqui valiam só
   para a faixa em UMA linha: em tela estreita ela quebra em duas e passou a
   comer o topo da tela do aluno. `--ator-h` é escrita pelo JS com a altura
   real (atorMedirFaixa) e revista no resize. */
body.ator-ativo { padding-top: var(--ator-h, 42px); }
body.ator-ativo .bottomnav { bottom: 0; }
/* As camadas `fixed` ignoram o padding do body — elas são posicionadas pela
   viewport, não pelo fluxo. Sem descer cada uma, a faixa cobria a barra de
   botões do leitor (Concluir/Baixar/Ler o PDF) e o topo dos modais. */
body.ator-ativo .pdf-viewer,
body.ator-ativo #crono-full,
body.ator-ativo #q-img-zoom {
  top: var(--ator-h, 42px);
  height: calc(100dvh - var(--ator-h, 42px));
}
body.ator-ativo .modal-layer,
body.ator-ativo .leitor-modal-layer,
body.ator-ativo .resource-modal-layer { top: var(--ator-h, 42px); }

/* "Sua compra está em outro e-mail" — ver contaParecidaPintar em app.js.
   Fica ACIMA do convite de planos: quem já pagou não pode ser convidado a
   comprar de novo antes de saber que a compra existe. */
.conta-parecida {
  display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
  border-color: rgba(255, 176, 1, .38); background: rgba(255, 176, 1, .06);
  margin-bottom: 12px;
}
.conta-parecida .cp-ico { font-size: 22px; line-height: 1.2; }
.conta-parecida .cp-txt { flex: 1; min-width: 200px; }
.conta-parecida .cp-txt b { display: block; margin-bottom: 4px; font-size: 14.5px; }
.conta-parecida .cp-txt span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.conta-parecida .cp-txt span b { display: inline; color: var(--brand); }
.conta-parecida .cp-acoes { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.conta-parecida .cp-acoes .btn { flex: 1; min-width: 150px; }

/* botão de baixa do mentor no cartão de meta do painel */
.fm-meta-b .ok { color: #9BE29B; border-color: rgba(155,226,155,.4); }
.fm-meta-b .ok:hover { background: rgba(155,226,155,.12); }

/* Radar da tropa — ver radarMentoria() */
.radar-card { margin-bottom: 14px; border-color: rgba(255, 96, 64, .3); }
.radar-cab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.radar-grupo { padding: 8px 0; border-top: 1px solid var(--linha, rgba(255,255,255,.06)); }
.radar-t { font-size: 13px; margin-bottom: 7px; }
.radar-t small { color: var(--muted); margin-left: 4px; }
.radar-nomes { display: flex; flex-wrap: wrap; gap: 6px; }
.radar-nomes button {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  color: inherit; cursor: pointer;
}
.radar-nomes button:hover { border-color: var(--brand); }
.radar-nomes button small { color: var(--muted); font-weight: 400; }
.radar-ok { margin-bottom: 14px; border-color: rgba(155, 226, 155, .3); }

/* ── Histórico: fita de sessões (estilo emDELTA) ────────────────────── */
.sess-topo { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.sess-totais { font-size:13px; color:var(--sub); white-space:nowrap; }
.sess-totais b { color:var(--brand); font-variant-numeric:tabular-nums; }
.sess-filtros { display:grid; grid-template-columns:1.4fr 1fr; gap:8px; margin-bottom:14px; }
.sess-filtros select { width:100%; }
.sess { display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line);
  animation:subir .3s calc(var(--i) * 18ms) both; }
.sess-badge { flex:0 0 auto; font-size:12px; font-weight:800; padding:5px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--brand) 16%, transparent); color:var(--brand); white-space:nowrap; }
.sess-badge.simulado { background:color-mix(in srgb, #e5484d 18%, transparent); color:#ff8589; }
.sess-badge.estudo { background:color-mix(in srgb, #6fa8ff 16%, transparent); color:#9cc2ff; }
.sess-meio { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sess-meio b { font-size:14.5px; }
.sess-meio small { color:var(--sub); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sess-fim { flex:0 0 auto; display:flex; align-items:center; gap:10px; }
.sess-placar { font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--sub); }
.sess-placar.ok { color:#5bd88a; } .sess-placar.meio { color:#e8c268; } .sess-placar.ruim { color:#ff8589; }
.sess-aval { font-size:16px; }
.sess-min { color:var(--brand); font-size:14px; font-variant-numeric:tabular-nums; }
@media (max-width:520px) { .sess-meio small { white-space:normal; } .sess { flex-wrap:wrap; } .sess-fim { margin-left:auto; } }

/* ── NIVELAMENTO (15/08/2026) — tela única de boas-vindas da mentoria ── */
.niv-overlay {
  position: fixed; inset: 0; z-index: 400; overflow-y: auto;
  background: rgba(10, 8, 5, 0.82); backdrop-filter: blur(3px);
  padding: 18px 12px calc(24px + env(safe-area-inset-bottom));
}
.niv-card {
  max-width: 640px; margin: 0 auto; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow);
  padding: 20px 16px 92px; position: relative;
}
.niv-head h2 { margin: 0 0 8px; color: var(--brand); font-size: 1.35rem; }
.niv-head p { margin: 0; color: var(--text-2); font-size: .92rem; line-height: 1.5; }
.niv-sec { margin: 22px 0 10px; font-size: 1rem; color: var(--text); }
.niv-dias { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.niv-dia {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 10px; font-size: .9rem; color: var(--text);
}
.niv-dia select {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px 6px; font-size: .88rem;
}
.niv-mat {
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 12px;
  margin-bottom: 8px; overflow: hidden;
}
.niv-mat summary {
  cursor: pointer; padding: 11px 12px; font-weight: 600; color: var(--text);
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.niv-mat summary em { font-style: normal; font-weight: 400; font-size: .78rem; color: var(--muted); }
.niv-ass { padding: 9px 12px; border-top: 1px solid var(--border); }
.niv-ass-nome { font-size: .86rem; color: var(--text); margin-bottom: 7px; }
.niv-ass-nome small { display: block; color: var(--brand); font-size: .74rem; margin-top: 2px; }
.niv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.niv-chip {
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text-2);
  border-radius: 999px; padding: 5px 11px; font-size: .8rem; cursor: pointer;
}
.niv-chip.on { background: var(--brand); border-color: var(--brand); color: #1A1611; font-weight: 700; }
.niv-foot {
  position: sticky; bottom: 0; left: 0; right: 0; margin: 18px -16px -92px;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--bg-2); border-top: 1px solid var(--border); text-align: center;
}
.niv-enviar {
  width: 100%; background: var(--grad); color: #1A1611; font-weight: 800;
  border: 0; border-radius: 12px; padding: 14px; font-size: 1rem; cursor: pointer;
}
.niv-enviar:disabled { opacity: .6; }
.niv-depois { display: inline-block; margin-top: 10px; color: var(--muted); font-size: .84rem; cursor: pointer; text-decoration: underline; }

/* ── ESTUDEI POR FORA — registro avulso na Missão do dia ── */
.ef-campo {
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  background: var(--bg-3); color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; font-size: .92rem;
}
.ef-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ef-grid .ef-campo { margin-bottom: 0; }

/* ── NOTA DO SIMULADO FEITO NO PDF — placar matéria por matéria ── */
.ef-sim-carregando, .ef-sim-aviso { font-size: .86rem; color: var(--text-2); margin: 0 0 6px; }
.ef-sim-aviso { color: #F0997B; }
.ef-sim-dica { font-size: .86rem; color: var(--text-2); margin: -2px 0 10px; line-height: 1.45; }
.ef-sim-dica b { color: var(--text); }
.ef-sim-lista { display: flex; flex-direction: column; gap: 6px; }
.ef-sim-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px;
}
.ef-sim-mat { display: flex; flex-direction: column; min-width: 0; font-size: .88rem; color: var(--text); }
.ef-sim-mat small { color: var(--text-2); font-size: .74rem; margin-top: 1px; }
.ef-sim-campos { display: flex; gap: 8px; flex: 0 0 auto; }
.ef-sim-campos label {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .68rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em;
}
.ef-sim-campos input {
  width: 58px; text-align: center; -moz-appearance: textfield;
  background: var(--bg-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 4px; font-size: .95rem; font-weight: 600;
}
.ef-sim-campos input::-webkit-outer-spin-button,
.ef-sim-campos input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ef-sim-campos input:focus { outline: none; border-color: var(--brand); }
.ef-sim-campos input.ef-sim-erro { border-color: #F0997B; background: rgba(240,153,123,.12); }
.ef-sim-total {
  margin-top: 10px; text-align: center; font-size: .9rem; color: var(--text-2);
}
.ef-sim-total b { color: var(--brand); font-size: 1.05rem; }
.ef-sim-total span { color: var(--text-2); }
.ef-sim-total-erro { color: #F0997B; font-weight: 600; }

/* ── HORAS DE ESTUDO — total, por matéria e por assunto ── */
.hr-tit { margin: 18px 0 10px; font-size: .98rem; color: var(--text); }
.hr-lista { display: flex; flex-direction: column; gap: 9px; }
.hr-linha { display: flex; flex-direction: column; gap: 4px; }
.hr-rot { display: flex; justify-content: space-between; align-items: baseline; font-size: .87rem; }
.hr-rot b { font-weight: 600; color: var(--text); }
.hr-rot span { color: var(--brand); font-weight: 700; font-size: .84rem; }
.hr-trilho { height: 8px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
.hr-trilho i { display: block; height: 100%; background: var(--grad); border-radius: 999px; }
.hr-ass { display: flex; flex-direction: column; gap: 7px; }
.hr-mat { background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.hr-mat summary {
  cursor: pointer; padding: 10px 12px; font-size: .88rem; font-weight: 600; color: var(--text);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.hr-mat summary em { font-style: normal; font-weight: 700; color: var(--brand); font-size: .84rem; }
.hr-item {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 8px 12px; border-top: 1px solid var(--border); font-size: .84rem;
}
.hr-item span { color: var(--text-2); }
.hr-item b { color: var(--text); white-space: nowrap; }
.hr-nota { margin-top: 14px; font-size: .82rem; line-height: 1.5; }

/* ===== METAS ATRASADAS NA MISSÃO (16/08) =====
   A tarja mostrava só o número; o aluno não tinha onde ver QUAL meta e de QUE
   dia — nem no cronograma do mentorado, que desenha só de hoje pra frente. */
.mss-atraso-cab { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; width:100%; }
.mss-atraso-lista { display:flex; flex-direction:column; gap:6px; margin-top:10px; width:100%; }
/* LEGIBILIDADE DA LISTA DE ATRASADAS (16/08/2026).
   A faixa `.mss-atraso` é um AVISO e por isso pinta tudo de salmão
   (color:#F0997B). Quando a lista de metas passou a morar dentro dela, os cards
   herdavam essa cor com `color:inherit` — e o resultado era o nome da matéria e
   o assunto em vermelho apagado sobre fundo escuro, praticamente ilegível no
   celular. Aqui o texto volta a ser texto: cor normal do tema, contraste alto.
   O salmão fica só onde ele informa alguma coisa — a etiqueta do dia. */
.mss-atraso-item {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--bg-3); border:1px solid var(--border);
  border-radius:10px; padding:10px 11px; color:var(--text); cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.mss-atraso-item:hover, .mss-atraso-item:focus-visible {
  border-color:var(--brand); background:#332C22;
}
.mss-atraso-dia {
  flex-shrink:0; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; color:#15110C; background:#F0997B;
  border-radius:6px; padding:3px 7px; min-width:58px; text-align:center;
}
.mss-atraso-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mss-atraso-txt b { font-size:13.5px; color:var(--text); line-height:1.3; }
/* sem opacity: texto apagado sobre fundo escuro é o que quebrou a leitura */
.mss-atraso-txt small { font-size:11.5px; color:var(--text-2); line-height:1.35; }
.mss-atraso-min { flex-shrink:0; font-size:11.5px; color:var(--text-2); font-weight:700; }
.mss-atraso-mais { font-size:12px; color:var(--text-2); padding:4px 4px 0; }
.opb-tempo-ok { display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:12.5px; opacity:.78; }
.opb-tempo-link {
  background:none; border:none; padding:0; font:inherit; cursor:pointer;
  color:var(--brand); text-decoration:underline; opacity:.9;
}
.ef-sim-casar { margin-top: 10px; }

/* ============================================================
   PAINEL DO COMANDANTE — CICLO DE ESTUDO
   A 1ª versão desta tela saiu com campos de 56 px e rótulo ao LADO: o dono
   abriu e viu "aut", "1!", "3" cortados, sem saber o que estava escrito.
   Aqui o rótulo vai EM CIMA, cada campo tem largura para o número inteiro, e
   as peças do dia (teoria / exercício / revisão) viram blocos separados, que
   é como ele pensa o ciclo.
   ============================================================ */
.pnc-topo { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  margin: 12px 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }

.pnc-campo { display: flex; flex-direction: column; gap: 4px; min-width: 92px; }
.pnc-campo > span { font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2); line-height: 1.3; }
.pnc-campo .input { width: 100%; min-width: 88px; }
.pnc-campo.pnc-largo { flex: 1 1 210px; max-width: 320px; }
.pnc-campo.pnc-ordem { min-width: 78px; max-width: 82px; }

.pnc-abas { display: flex; gap: 6px; flex-wrap: wrap; }
.pnc-aba { font: inherit; font-size: 13px; padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card-2, transparent);
  color: var(--text-1); cursor: pointer; }
.pnc-aba b { font-weight: 700; opacity: .65; margin-left: 3px; }
.pnc-aba.on { border-color: var(--brand); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.pnc-aba.pnc-novo { border-style: dashed; opacity: .8; }
.pnc-aba:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.pnc-mats { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.pnc-mat { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px; }
.pnc-mat.off { opacity: .5; }
.pnc-mat-cab { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
/* a caixa de ligar/desligar anda junto do nome da matéria, não no canto oposto */
.pnc-mat-cab > .pnc-chk { margin-left: 0; }
.pnc-nome { font-size: 14px; display: block; line-height: 1.25; }
.pnc-sub { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.pnc-alerta { color: #F0997B; }

.pnc-linha { display: flex; gap: 12px; flex-wrap: wrap; }
.pnc-bloco { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  padding: 10px 12px; border-radius: 10px; background: var(--card-2, rgba(127,127,127,.06)); }
.pnc-bloco.off { opacity: .45; }
.pnc-chk { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.pnc-chk.pnc-chefe { min-width: 108px; padding-bottom: 6px; }

.pnc-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pnc-rodape { font-size: 11.5px; color: var(--text-2); margin-top: 8px; line-height: 1.5; }
.pnc-msg { font-size: 12.5px; color: var(--text-2); margin-top: 8px; min-height: 18px; }

.pnc-alunos { display: flex; flex-direction: column; gap: 6px;
  max-height: 420px; overflow-y: auto; }
.pnc-aluno { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--line); }

@media (max-width: 560px) {
  .pnc-bloco { flex-direction: column; align-items: stretch; }
  .pnc-chk.pnc-chefe { padding-bottom: 0; }
  .pnc-campo.pnc-largo { flex: 1 1 100%; }
}

/* ===== BARRAS QUE SAEM DA FRENTE (item 25) =====
   "realmente ficou pequeno" (Sd Nycholas, CFO CBM PE): cinco barras fixas
   empilhadas comiam ~219px antes da primeira linha — 27% de um notebook e 34%
   de um celular. Rolando para BAIXO as três barras de ferramenta somem; rolando
   para CIMA elas voltam na hora. O título (com o Fechar) e a barrinha de
   progresso ficam sempre, para o aluno nunca perder a saída nem a noção de onde
   está. O recolhimento em si é feito no JS (pdfBarras) — ver o comentário lá
   sobre por que max-height e height não bastaram. */
.pdf-viewer.barras-off .pdf-read { padding-top: 6px; }

/* ===== FAVORITAR / ANOTAR NA QUESTÃO + FILTROS DE HISTÓRICO (20/08) ===== */
.q-marcas { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.q-marca {
  border: 1px solid var(--border); background: var(--bg-2); color: var(--muted);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.q-marca:hover { color: var(--text); border-color: var(--brand); }
.q-marca.on { color: #1c1508; background: var(--brand); border-color: var(--brand); }
.q-marca-nota {
  flex: 1 1 100%; font-size: 12.5px; line-height: 1.45; color: var(--muted);
  background: rgba(255,176,1,.08); border-left: 2px solid var(--brand);
  border-radius: 0 6px 6px 0; padding: 7px 10px;
}
/* o número de questões em cada situação, ao lado do texto do filtro */
.chip .chip-n { opacity: .7; font-weight: 600; }

/* ===== GRIFAR E ANOTAR NO MODO PDF (item 28) =====
   A camada de texto do pdf.js fica por cima do canvas, invisível: é ela que dá
   texto selecionável onde só havia imagem. Os grifos ficam ATRÁS dela, com
   opacidade — é o que faz parecer marca-texto e não tarja preta. */
body.pdf-tudo-orig .pdf-pagina { position: relative; }
.pdf-tl {
  position: absolute; inset: 0; overflow: hidden; line-height: 1;
  z-index: 3; opacity: 0; user-select: text; -webkit-user-select: text;
}
.pdf-tl span {
  position: absolute; white-space: pre; transform-origin: 0 0;
  color: transparent; cursor: text;
}
/* a seleção precisa aparecer, mesmo com a camada invisível */
.pdf-tl ::selection { background: rgba(255,176,1,.45); color: transparent; }
.pdf-hl {
  position: absolute; z-index: 2; border-radius: 2px; opacity: .38;
  pointer-events: auto; cursor: pointer; mix-blend-mode: multiply;
}
body.pdf-tudo-orig.tema-escuro .pdf-hl { mix-blend-mode: screen; opacity: .30; }
.pdf-pin {
  position: absolute; z-index: 4; transform: translate(-50%, -100%);
  border: 0; background: transparent; font-size: 19px; line-height: 1;
  cursor: pointer; padding: 2px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.pdf-pin:hover { transform: translate(-50%, -100%) scale(1.15); }
/* no modo anotar, a página inteira convida ao toque */
body.pdf-tudo-orig .pdf-read.modo-anotar .pdf-pagina { cursor: crosshair; }

/* ---------- HISTÓRICO POR ASSUNTO (v300) ---------- */
.ha-barra { width: 52px; height: 6px; border-radius: 4px; background: var(--bg-3); overflow: hidden; flex: none; }
.ha-barra i { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.ha-lista { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ha-item { padding: 8px 10px; border-radius: 10px; background: var(--bg-3); }
.ha-nome { font-size: 13px; font-weight: 600; line-height: 1.35; }
.ha-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.ha-selo { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ha-selo.ok    { background: rgba(34, 197, 94, .16);  color: #4ade80; }
.ha-selo.meio  { background: rgba(255, 176, 1, .16);  color: var(--brand); }
.ha-selo.falta { background: var(--bg-2); color: var(--text-2); }
.ha-selo.tempo { background: rgba(96, 165, 250, .16); color: #60a5fa; }
.ha-falta { font-size: 11px; color: var(--text-2); }
/* o details herda o flex do .material-card e o resumo cola do lado da lista */
details.material-card { display: block; }
details.material-card > summary::-webkit-details-marker { display: none; }

/* ---------- FILTRAR QUESTÕES estilo Tec (v300): categorias | painel | ativos ---------- */
.fq { display: grid; grid-template-columns: 172px minmax(0, 1fr) 208px; gap: 12px; align-items: start; }
.fq-cats { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 10px; }
.fq-cat { border: none; background: var(--bg-3); color: var(--text-2); font-weight: 600; font-size: 12.5px;
  text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer; line-height: 1.25; }
.fq-cat.on { background: var(--brand); color: #241A05; }
.fq-cat-n { font-weight: 800; }
.fq-cat.on .fq-cat-n { color: #241A05; }
.fq-cat:not(.on) .fq-cat-n { color: var(--brand); }
.fq-meio { background: var(--bg-2); border-radius: 14px; padding: 14px; min-height: 220px; }
.fq-ativos { background: var(--bg-2); border-radius: 14px; padding: 12px; position: sticky; top: 10px; }
.fq-ativos-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.fq-limpar { border: none; background: transparent; color: var(--brand); font-weight: 700; font-size: 12px; cursor: pointer; padding: 2px; }
.fq-ativos-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fq-tag { display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer;
  background: var(--bg-3); color: var(--text); font-size: 12px; padding: 5px 9px; border-radius: 999px; }
.fq-tag span { color: var(--brand); font-weight: 800; }
.fq-conta { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bg-3); display: flex; align-items: baseline; gap: 6px; }
.fq-conta-n { font-size: 22px; color: var(--brand); font-variant-numeric: tabular-nums; }
.fq-modo { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.fq-modo-rot { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.fq-radio { border: 1px solid var(--bg-3); background: var(--bg-2); color: var(--text-2);
  font-weight: 600; font-size: 12.5px; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.fq-radio.on { background: var(--brand); border-color: var(--brand); color: #241A05; }
.fq-rodape { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px;
  background: var(--bg-2); border-radius: 14px; padding: 12px 14px; }
.fq-rodape .btn { flex: 1; min-width: 200px; }
.chip-n { font-size: 11px; color: var(--brand); font-weight: 800; margin-left: 5px; }
.chip.on .chip-n { color: inherit; }
/* celular: categorias viram fita rolável em cima, ativos descem pro fim */
@media (max-width: 760px) {
  .fq { grid-template-columns: 1fr; }
  .fq-cats { flex-direction: row; overflow-x: auto; position: static; padding-bottom: 4px; scrollbar-width: none; }
  .fq-cats::-webkit-scrollbar { display: none; }
  .fq-cat { white-space: nowrap; flex: none; }
  .fq-ativos { position: static; }
}

/* Matéria/Assunto: a lista de chips rola DENTRO do painel em vez de esticar a
   página (o dono mandou: "está indo lá pra baixo e ficando desproporcional"). */
.fq-meio .chips { max-height: min(52vh, 460px); overflow-y: auto; align-content: flex-start; padding-right: 4px; }
.fq-meio .chips::-webkit-scrollbar { width: 8px; }
.fq-meio .chips::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 8px; }
.fq-meio .chips::-webkit-scrollbar-track { background: transparent; }

/* ---------- LEITOR: tela cheia e texto que preenche (v301) ---------- */
/* "Esconder menu": tira a lateral e devolve os 240px ao texto. */
@media (min-width: 900px) {
  body.sem-lateral .sidebar { display: none; }
}
/* O texto NÃO preenchia ao aumentar a fonte: a coluna estava presa em 74ch
   (medida em CARACTERES — cresce junto com a fonte e some com a largura útil,
   deixando a linha curta e a leitura picotada, exatamente a queixa do dono).
   Agora a coluna acompanha a largura da tela; o ch vira só o teto de conforto
   e, com o menu escondido, o texto usa a tela inteira. */
.pdf-read .pdf-pagina { max-width: min(clamp(760px, 74vw, 1180px), 92ch); }
/* "TEM QUE OCUPAR TUDO ISSO" (20/08/2026): com o menu escondido o aluno pediu a
   tela inteira — o teto de 100ch deixava ~1/3 da tela em margem num monitor
   largo. Agora o texto vai até 97vw; quem achar a linha comprida controla no
   A+ (a fonte maior encurta a linha em caracteres). */
body.sem-lateral .pdf-read .pdf-pagina { max-width: 97vw; }
.teo-treinar svg { width: 16px; height: 16px; }
.sess-edit { border: none; background: transparent; cursor: pointer; font-size: 14px; padding: 2px 4px; opacity: .55; }
.sess-edit:hover { opacity: 1; }

/* MODO TELA CHEIA DA LEITURA (v301, pedido do Nycholas via dono): "Esconder
   menu" limpa TUDO — barra lateral, faixa de título e ferramentas — e sobra o
   texto (ou o PDF) na tela inteira. A viewbar fina fica: é nela que moram o
   tema, o A+/A− e o botão de voltar ao normal. */
body.sem-lateral .pdf-viewer .pdf-top,
body.sem-lateral .pdf-viewer .pdf-tools,
body.sem-lateral .pdf-viewer .pdf-q-resumo { display: none; }
body.sem-lateral.pdf-tudo-orig .pdf-read .pdf-pagina { max-width: none; }

/* ---------- CRONÔMETRO EM TELA CHEIA (v301) ---------- */
#crono-full { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  background: rgba(10, 9, 7, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* logo em FLUXO, acima do relógio ("tá topando no número" — dono, 20/08) */
#crono-full .cf-logo { width: min(150px, 32vw); opacity: .3; pointer-events: none;
  margin-bottom: 26px; }
#crono-full .cf-time { font-size: clamp(64px, 16vw, 140px); font-weight: 800;
  color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: .02em;
  text-shadow: 0 0 60px rgba(255, 176, 1, .25); line-height: 1; }
#crono-full .cf-meta { color: var(--text-2); font-size: 14px; }
#crono-full .cf-presets { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#crono-full .cf-preset { border: 1px solid var(--bg-3); background: var(--bg-2); color: var(--text-2);
  font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
#crono-full .cf-preset.on { background: var(--brand); border-color: var(--brand); color: #241A05; }
#crono-full .cf-acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
#crono-full .cf-acoes .btn { width: auto; min-width: 150px; }

/* ---------- ANOTAÇÃO COM CARA DE CADERNO (20/08/2026) ---------- */
.ln-layer {
  position: fixed; inset: 0; z-index: 10060; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(10, 8, 5, .55); backdrop-filter: blur(2px);
}
.ln-card {
  width: min(520px, 94vw); background: #241F18; color: var(--text, #F4F0E7);
  border: 1px solid #3A332A; border-left: 4px solid var(--brand, #FFB001);
  border-radius: 14px; padding: 16px 16px 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  animation: ln-subir .18s ease-out;
}
@keyframes ln-subir { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.ln-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14.5px; }
.ln-texto {
  width: 100%; box-sizing: border-box; resize: none; overflow-y: auto;
  background: #1A1611; color: inherit; border: 1px solid #3A332A;
  border-radius: 10px; padding: 12px 13px; font: inherit; font-size: 15px;
  line-height: 1.55; min-height: 84px;
}
.ln-texto:focus { outline: none; border-color: var(--brand, #FFB001); }
.ln-acoes { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ln-acoes button {
  border: 1px solid #3A332A; background: transparent; color: inherit;
  border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.ln-salvar { background: var(--brand, #FFB001) !important; color: #1A1611 !important; border-color: var(--brand, #FFB001) !important; }
.ln-apagar { color: #ff8589 !important; border-color: rgba(255,133,137,.4) !important; }

/* negrito sobre a página desenhada = traço firme sob a linha */
.pdf-hl.pdf-hl-bold { opacity: .95; mix-blend-mode: normal; border-radius: 2px; }
body.pdf-tudo-orig.tema-escuro .pdf-hl.pdf-hl-bold { mix-blend-mode: normal; opacity: .95; }

/* ---------- NÍVEL POR ASSUNTO (20/08/2026) ---------- */
.ha-nivel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ha-chip {
  border: 1px solid var(--line, #3A332A); background: transparent; color: var(--muted, #8A8580);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.ha-chip.on {
  background: color-mix(in srgb, var(--brand, #FFB001) 16%, transparent);
  color: var(--brand, #FFB001); border-color: color-mix(in srgb, var(--brand, #FFB001) 45%, transparent);
}
.ha-chip.ghost { border-style: dashed; }
.ha-concurso {
  font-weight: 800; font-size: 14px; letter-spacing: .4px; color: var(--brand, #FFB001);
  margin: 16px 2px 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line, #3A332A);
}

/* rótulo das seções do modal de prática direcionada (PDF primeiro) */
.resource-secao{margin:14px 0 6px;font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold2,#FFB001);opacity:.9}